Improved info-panel visualization on small screens

Mendiak · Nov 15, 2024 · 154f9a3 · 154f9a3
1 parent 5b85d32
commit 154f9a3
Showing 1 changed file with 58 additions and 35 deletions.
diff --git a/script.js b/script.js
@@ -80,9 +80,9 @@ function createTree(data) {
       .x(d => d.y)
       .y(d => d.x));
 
-  // Create the nodes
-  const node = svg.selectAll('.node')
-    .data(nodesToShow) // Bind the filtered data
+    // Create the nodes
+    const node = svg.selectAll('.node')
+    .data(nodesToShow)
     .enter()
     .append('g')
     .attr('class', 'node')
@@ -113,41 +113,64 @@ function createTree(data) {
         <iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/${trackId}?utm_source=generator" width="100%" height="160" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
       `;
 
-      // Show the info panel
+      // Obtener el ancho de la ventana actual
+      const windowWidth = window.innerWidth;
+
+      // Establecer el ancho máximo del panel de información
+      const maxPanelWidth = Math.min(500, windowWidth * 0.9);
+
+      // Establecer el ancho del panel de información
+      infoPanel.style.width = `${maxPanelWidth}px`;
+
+      // Mostrar el panel de información
       infoPanel.classList.add('visible');
     });
 
-  // Add the tooltip functionality
-  node.on('mouseover', (event, d) => {
-    if (d.depth === 0) return; // Don't show tooltip for the root node
-
-    // Create a div element for the tooltip
-    const tooltip = d3.select('body')
-      .append('div')
-      .attr('class', 'tooltip')
-      .style('opacity', 0);
-
-    // Add content to the tooltip
-    tooltip.html(`
-      <h3>${d.data.name}</h3>
-      <p>${d.data.description || 'No description available'}</p>
-      <p><i class="bi bi-hand-index"></i> Click the node to listen the example track.</p>
-    `);
-
-    // Animate the tooltip's appearance
-    tooltip.transition()
-      .duration(200)
-      .style('opacity', 0.9);
-
-    // Position the tooltip near the node
-    tooltip.style('left', (event.pageX + 10) + 'px')
-      .style('top', (event.pageY - 28) + 'px');
-  });
-
-  node.on('mouseout', (event, d) => {
-    // Remove the tooltip when the mouse leaves the node
-    d3.select('.tooltip').remove();
-  });
+  // Function to show the tooltip
+function showTooltip(event, d) {
+  if (d.depth === 0) return; // Don't show tooltip for the root node
+
+  // Create a div element for the tooltip
+  const tooltip = d3.select('body')
+    .append('div')
+    .attr('class', 'tooltip')
+    .style('opacity', 0);
+
+  // Add content to the tooltip
+  tooltip.html(`
+    <h3>${d.data.name}</h3>
+    <p>${d.data.description || 'No description available'}</p>
+    <p><i class="bi bi-hand-index"></i> Click the node to listen the example track.</p>
+  `);
+
+  // Animate the tooltip's appearance
+  tooltip.transition()
+    .duration(200)
+    .style('opacity', 0.9);
+
+  // Position the tooltip near the node
+  tooltip.style('left', (event.pageX + 10) + 'px')
+    .style('top', (event.pageY - 28) + 'px');
+}
+
+// Function to hide the tooltip
+function hideTooltip() {
+  d3.select('.tooltip').remove();
+}
+
+// Add the event listeners to the nodes
+node.on('mouseover', (event, d) => {
+  // Check if the screen is small before showing the tooltip
+  if (window.innerWidth < 768) {
+    return;
+  }
+  showTooltip(event, d);
+});
+
+node.on('mouseout', () => {
+  hideTooltip();
+});
+
 
   // Add the circles for the nodes
   node.append('circle')