Refactor filter help panel and tooltip integration for improved user experience

Author: pyoneerC

templates/show_plot.html

@@ -8,9 +8,6 @@
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Include ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
-   <!-- Include Tippy.js para tooltips -->
-   <script src="https://unpkg.com/@popperjs/core@2"></script>
-   <script src="https://unpkg.com/tippy.js@6"></script>
    <style>
       #chart-container {
          width: 100%;
@@ -42,39 +39,29 @@
          width: 20px;
          height: 14px;
       }
+      /* Estilos para el panel de ayuda de filtros */
       .filter-info {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 18px;
          height: 18px;
          border-radius: 50%;
-         background-color: rgba(255, 255, 255, 0.3);
+         background-color: #e5e7eb;
          color: #2563eb;
          font-size: 12px;
          font-weight: bold;
          cursor: pointer;
          margin-left: 4px;
       }
-      .tippy-box {
-         background-color: #fff;
-         color: #333;
-         border: 1px solid #e2e8f0;
-         border-radius: 0.375rem;
-         box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-         padding: 0.5rem;
-         max-width: 300px !important;
-      }
-      .tippy-box .tippy-content {
-         padding: 0.5rem;
-      }
       .filter-help-panel {
-         background-color: rgba(245, 247, 250, 0.9);
+         background-color: #f8fafc;
          border: 1px solid #e2e8f0;
          border-radius: 0.375rem;
          padding: 1rem;
          margin-bottom: 1rem;
          font-size: 0.875rem;
+         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
       }
    </style>
 </head>
@@ -89,7 +76,7 @@ <h1 class="text-4xl font-bold">Histograma de Precios</h1>
          </div>
       </header>
       <main class="p-6">
-         <!-- Información sobre filtros -->
+         <!-- Panel de ayuda de filtros (oculto por defecto) -->
          <div id="filter-help-panel" class="filter-help-panel hidden">
             <h4 class="font-semibold mb-2">Tipos de filtrado disponibles:</h4>
             <ul class="space-y-2">
@@ -110,7 +97,7 @@ <h4 class="font-semibold mb-2">Tipos de filtrado disponibles:</h4>
                   <span>Permite examinar cada producto individualmente y elegir cuáles incluir o excluir del análisis.</span>
                </li>
             </ul>
-            <button id="close-filter-help" class="mt-2 text-blue-600 underline text-sm">Cerrar</button>
+            <button id="close-filter-help" class="mt-2 text-blue-600 hover:text-blue-800 text-sm">Cerrar</button>
          </div>
 
          <!-- Chart Tabs -->
@@ -272,38 +259,36 @@ <h4 class="font-semibold mb-2">Tipos de filtrado disponibles:</h4>
             });
          });
 
-         // Configurar tooltips después de que se inicialice el gráfico
-         document.addEventListener('DOMContentLoaded', function() {
-            setTimeout(() => {
-               const filterControls = document.getElementById('filter-controls');
-               
-               if (filterControls) {
-                  // Añadir botón de ayuda junto al título del filtro
-                  const filterTitle = filterControls.querySelector('span.font-medium');
-                  if (filterTitle) {
-                     const helpButton = document.createElement('span');
-                     helpButton.className = 'filter-info';
-                     helpButton.textContent = '?';
-                     helpButton.id = 'filter-help-button';
-                     filterTitle.appendChild(helpButton);
-                     
-                     // Configurar el evento click para mostrar/ocultar el panel de ayuda
-                     helpButton.addEventListener('click', function() {
-                        const helpPanel = document.getElementById('filter-help-panel');
-                        helpPanel.classList.toggle('hidden');
-                     });
-                  }
+         // Configurar botón de ayuda para los filtros
+         // Este script se ejecutará después de que chart.js haya añadido los controles de filtros
+         setTimeout(() => {
+            const filterControls = document.getElementById('filter-controls');
+            if (filterControls) {
+               // Añadir botón de ayuda junto al título
+               const filterTitle = filterControls.querySelector('span.font-medium');
+               if (filterTitle) {
+                  const helpButton = document.createElement('span');
+                  helpButton.className = 'filter-info';
+                  helpButton.textContent = '?';
+                  helpButton.id = 'filter-help-button';
+                  filterTitle.appendChild(helpButton);
 
-                  // Configurar el botón para cerrar el panel de ayuda
-                  const closeHelpBtn = document.getElementById('close-filter-help');
-                  if (closeHelpBtn) {
-                     closeHelpBtn.addEventListener('click', function() {
-                        document.getElementById('filter-help-panel').classList.add('hidden');
-                     });
-                  }
+                  // Configurar evento para mostrar/ocultar el panel de ayuda
+                  helpButton.addEventListener('click', function() {
+                     const helpPanel = document.getElementById('filter-help-panel');
+                     helpPanel.classList.toggle('hidden');
+                  });
                }
-            }, 500); // Pequeño retraso para asegurar que los elementos existen
-         });
+            }
+            
+            // Configurar botón para cerrar el panel de ayuda
+            const closeHelpBtn = document.getElementById('close-filter-help');
+            if (closeHelpBtn) {
+               closeHelpBtn.addEventListener('click', function() {
+                  document.getElementById('filter-help-panel').classList.add('hidden');
+               });
+            }
+         }, 500); // Pequeño retraso para que los elementos de chart.js estén disponibles
       });
    </script>