refactor: move functions to outer scope for better performance

- Move setupAjaxPagination to outer scope in ajax-pagination.js
- Move setupAjaxNavigation, reloadScripts, initializePageScripts to outer scope in ajax-navigation.js
- Move updatePlotlyTheme, resizeCharts, updateDashboardStats, updateDashboardCharts to outer scope in dashboard.js
- Move handleSidebarOnResize, setTheme, getSystemPreference to outer scope in main.js
- Avoid recreating functions on every DOMContentLoaded call
- All oxlint strict checks now pass (11 warnings -> 0)

dashboard_project/static/js/ajax-navigation.js

@@ -6,14 +6,54 @@
 *   It intercepts link clicks, loads content via AJAX, and updates the browser history.
  */
 
-document.addEventListener("DOMContentLoaded", function () {
+// Function to reload and execute scripts in new content
-  // Only initialize if AJAX navigation is enabled
+function reloadScripts(container) {
-  if (typeof ENABLE_AJAX_NAVIGATION !== "undefined" && ENABLE_AJAX_NAVIGATION) {
+  const scripts = container.getElementsByTagName("script");
-    setupAjaxNavigation();
+  for (let script of scripts) {
+    const newScript = document.createElement("script");
+
+    // Copy all attributes
+    Array.from(script.attributes).forEach((attr) => {
+      newScript.setAttribute(attr.name, attr.value);
+    });
+
+    // Copy inline script content
+    newScript.textContent = script.textContent;
+
+    // Replace old script with new one
+    script.parentNode.replaceChild(newScript, script);
+  }
+}
+
+// Function to initialize scripts needed for the new page content
+function initializePageScripts() {
+  // Re-initialize any custom scripts that might be needed
+  if (typeof setupAjaxPagination === "function") {
+    setupAjaxPagination();
   }
 
-  // Function to set up AJAX navigation for the application
+  // Initialize Bootstrap tooltips, popovers, etc.
-  function setupAjaxNavigation() {
+  if (typeof bootstrap !== "undefined") {
+    // Initialize tooltips
+    const tooltipTriggerList = [].slice.call(
+      document.querySelectorAll('[data-bs-toggle="tooltip"]'),
+    );
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+      return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+
+    // Initialize popovers
+    const popoverTriggerList = [].slice.call(
+      document.querySelectorAll('[data-bs-toggle="popover"]'),
+    );
+    popoverTriggerList.map(function (popoverTriggerEl) {
+      return new bootstrap.Popover(popoverTriggerEl);
+    });
+  }
+}
+
+// Function to set up AJAX navigation for the application
+function setupAjaxNavigation() {
   // Configuration
   const config = {
     mainContentSelector: "#main-content", // Selector for the main content area
@@ -122,25 +162,6 @@ document.addEventListener("DOMContentLoaded", function () {
       });
   }
 
-    // Function to reload and execute scripts in new content
-    function reloadScripts(container) {
-      const scripts = container.getElementsByTagName("script");
-      for (let script of scripts) {
-        const newScript = document.createElement("script");
-
-        // Copy all attributes
-        Array.from(script.attributes).forEach((attr) => {
-          newScript.setAttribute(attr.name, attr.value);
-        });
-
-        // Copy inline script content
-        newScript.textContent = script.textContent;
-
-        // Replace old script with new one
-        script.parentNode.replaceChild(newScript, script);
-      }
-    }
-
   // Function to handle form submissions
   function handleFormSubmission(form, e) {
     e.preventDefault();
@@ -204,33 +225,6 @@ document.addEventListener("DOMContentLoaded", function () {
     }
   }
 
-    // Function to initialize scripts needed for the new page content
-    function initializePageScripts() {
-      // Re-initialize any custom scripts that might be needed
-      if (typeof setupAjaxPagination === "function") {
-        setupAjaxPagination();
-      }
-
-      // Initialize Bootstrap tooltips, popovers, etc.
-      if (typeof bootstrap !== "undefined") {
-        // Initialize tooltips
-        const tooltipTriggerList = [].slice.call(
-          document.querySelectorAll('[data-bs-toggle="tooltip"]'),
-        );
-        tooltipTriggerList.map(function (tooltipTriggerEl) {
-          return new bootstrap.Tooltip(tooltipTriggerEl);
-        });
-
-        // Initialize popovers
-        const popoverTriggerList = [].slice.call(
-          document.querySelectorAll('[data-bs-toggle="popover"]'),
-        );
-        popoverTriggerList.map(function (popoverTriggerEl) {
-          return new bootstrap.Popover(popoverTriggerEl);
-        });
-      }
-    }
-
   // Function to attach event listeners to forms and links
   function attachEventListeners() {
     // Handle AJAX navigation links
@@ -270,5 +264,11 @@ document.addEventListener("DOMContentLoaded", function () {
       handlePageNavigation(window.location.href, false);
     }
   });
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  // Only initialize if AJAX navigation is enabled
+  if (typeof ENABLE_AJAX_NAVIGATION !== "undefined" && ENABLE_AJAX_NAVIGATION) {
+    setupAjaxNavigation();
   }
 });

dashboard_project/static/js/ajax-pagination.js

@@ -1,17 +1,12 @@
 /**
-
+ * ajax-pagination.js - Common JavaScript for AJAX pagination across the application
-*   ajax-pagination.js - Common JavaScript for AJAX pagination across the application
+ *
-*
+ * This script handles AJAX-based pagination for all pages in the Chat Analytics Dashboard.
-*   This script handles AJAX-based pagination for all pages in the Chat Analytics Dashboard.
+ * It intercepts pagination link clicks, loads content via AJAX, and updates the browser history.
-*   It intercepts pagination link clicks, loads content via AJAX, and updates the browser history.
  */
 
-document.addEventListener("DOMContentLoaded", function () {
+// Function to set up AJAX pagination for the entire application
-  // Initialize AJAX pagination
+function setupAjaxPagination() {
-  setupAjaxPagination();
-
-  // Function to set up AJAX pagination for the entire application
-  function setupAjaxPagination() {
   // Configuration - can be customized per page if needed
   const config = {
     contentContainerId: "ajax-content-container", // ID of the container to update
@@ -103,5 +98,9 @@ document.addEventListener("DOMContentLoaded", function () {
       handleAjaxNavigation(window.location.href);
     }
   });
-  }
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  // Initialize AJAX pagination
+  setupAjaxPagination();
 });

dashboard_project/static/js/dashboard.js

@@ -7,9 +7,8 @@
 *   customization.
  */
 
-document.addEventListener("DOMContentLoaded", function () {
+// Set up Plotly default config based on theme
-  // Set up Plotly default config based on theme
+function updatePlotlyTheme() {
-  function updatePlotlyTheme() {
   // Force a fresh check of the current theme
   const isDarkMode = document.documentElement.getAttribute("data-bs-theme") === "dark";
   console.log("updatePlotlyTheme called - Current theme mode:", isDarkMode ? "dark" : "light");
@@ -100,8 +99,198 @@ document.addEventListener("DOMContentLoaded", function () {
       orientation: "h",
     },
   };
+}
+
+// Chart responsiveness
+function resizeCharts() {
+  const charts = document.querySelectorAll(".chart-container");
+  charts.forEach((chart) => {
+    if (chart.id && window.Plotly) {
+      Plotly.relayout(chart.id, {
+        "xaxis.automargin": true,
+        "yaxis.automargin": true,
+      });
+    }
+  });
+}
+
+// Function to update dashboard statistics
+function updateDashboardStats(data) {
+  // Update total sessions
+  const totalSessionsElement = document.querySelector(".stats-card:nth-child(1) h3");
+  if (totalSessionsElement) {
+    totalSessionsElement.textContent = data.total_sessions;
   }
 
+  // Update average response time
+  const avgResponseTimeElement = document.querySelector(".stats-card:nth-child(2) h3");
+  if (avgResponseTimeElement) {
+    avgResponseTimeElement.textContent = data.avg_response_time + "s";
+  }
+
+  // Update total tokens
+  const totalTokensElement = document.querySelector(".stats-card:nth-child(3) h3");
+  if (totalTokensElement) {
+    totalTokensElement.textContent = data.total_tokens;
+  }
+
+  // Update total cost
+  const totalCostElement = document.querySelector(".stats-card:nth-child(4) h3");
+  if (totalCostElement) {
+    totalCostElement.textContent = "€" + data.total_cost;
+  }
+}
+
+// Function to update dashboard charts
+function updateDashboardCharts(data) {
+  // Check if Plotly is available
+  if (!window.Plotly) {
+    console.error("Plotly library not loaded!");
+    document.querySelectorAll(".chart-container").forEach((container) => {
+      container.innerHTML =
+        '<div class="text-center py-5"><p class="text-danger">Chart library not available. Please refresh the page.</p></div>';
+    });
+    return;
+  }
+
+  // Update sessions over time chart
+  const timeSeriesData = data.time_series_data;
+  if (timeSeriesData && timeSeriesData.length > 0) {
+    try {
+      const timeSeriesX = timeSeriesData.map((item) => item.date);
+      const timeSeriesY = timeSeriesData.map((item) => item.count);
+
+      Plotly.react(
+        "sessions-time-chart",
+        [
+          {
+            x: timeSeriesX,
+            y: timeSeriesY,
+            type: "scatter",
+            mode: "lines+markers",
+            line: {
+              color: "rgb(75, 192, 192)",
+              width: 2,
+            },
+            marker: {
+              color: "rgb(75, 192, 192)",
+              size: 6,
+            },
+          },
+        ],
+        {
+          ...window.plotlyDefaultLayout,
+          margin: { t: 10, r: 10, b: 40, l: 40 },
+          xaxis: {
+            ...window.plotlyDefaultLayout.xaxis,
+            title: "Date",
+          },
+          yaxis: {
+            ...window.plotlyDefaultLayout.yaxis,
+            title: "Number of Sessions",
+          },
+        },
+      );
+    } catch (error) {
+      console.error("Error rendering time series chart:", error);
+      document.getElementById("sessions-time-chart").innerHTML =
+        '<div class="text-center py-5"><p class="text-danger">Error rendering chart.</p></div>';
+    }
+  } else {
+    document.getElementById("sessions-time-chart").innerHTML =
+      '<div class="text-center py-5"><p class="text-muted">No time series data available</p></div>';
+  }
+
+  // Update sentiment chart
+  const sentimentData = data.sentiment_data;
+  if (sentimentData && sentimentData.length > 0 && window.Plotly) {
+    const sentimentLabels = sentimentData.map((item) => item.sentiment);
+    const sentimentValues = sentimentData.map((item) => item.count);
+    const sentimentColors = sentimentLabels.map((sentiment) => {
+      if (sentiment.toLowerCase().includes("positive")) return "rgb(75, 192, 92)";
+      if (sentiment.toLowerCase().includes("negative")) return "rgb(255, 99, 132)";
+      if (sentiment.toLowerCase().includes("neutral")) return "rgb(255, 205, 86)";
+      return "rgb(201, 203, 207)";
+    });
+
+    Plotly.react(
+      "sentiment-chart",
+      [
+        {
+          values: sentimentValues,
+          labels: sentimentLabels,
+          type: "pie",
+          marker: {
+            colors: sentimentColors,
+          },
+          hole: 0.4,
+          textinfo: "label+percent",
+          insidetextorientation: "radial",
+        },
+      ],
+      {
+        ...window.plotlyDefaultLayout,
+        margin: { t: 10, r: 10, b: 10, l: 10 },
+      },
+    );
+  }
+
+  // Update country chart
+  const countryData = data.country_data;
+  if (countryData && countryData.length > 0 && window.Plotly) {
+    const countryLabels = countryData.map((item) => item.country);
+    const countryValues = countryData.map((item) => item.count);
+
+    Plotly.react(
+      "country-chart",
+      [
+        {
+          x: countryValues,
+          y: countryLabels,
+          type: "bar",
+          orientation: "h",
+          marker: {
+            color: "rgb(54, 162, 235)",
+          },
+        },
+      ],
+      {
+        ...window.plotlyDefaultLayout,
+        margin: { t: 10, r: 10, b: 40, l: 100 },
+        xaxis: {
+          ...window.plotlyDefaultLayout.xaxis,
+          title: "Number of Sessions",
+        },
+      },
+    );
+  }
+
+  // Update category chart
+  const categoryData = data.category_data;
+  if (categoryData && categoryData.length > 0 && window.Plotly) {
+    const categoryLabels = categoryData.map((item) => item.category);
+    const categoryValues = categoryData.map((item) => item.count);
+
+    Plotly.react(
+      "category-chart",
+      [
+        {
+          labels: categoryLabels,
+          values: categoryValues,
+          type: "pie",
+          textinfo: "label+percent",
+          insidetextorientation: "radial",
+        },
+      ],
+      {
+        ...window.plotlyDefaultLayout,
+        margin: { t: 10, r: 10, b: 10, l: 10 },
+      },
+    );
+  }
+}
+
+document.addEventListener("DOMContentLoaded", function () {
   // Initialize theme setting
   updatePlotlyTheme();
 
@@ -122,19 +311,6 @@ document.addEventListener("DOMContentLoaded", function () {
 
   observer.observe(document.documentElement, { attributes: true });
 
-  // Chart responsiveness
-  function resizeCharts() {
-    const charts = document.querySelectorAll(".chart-container");
-    charts.forEach((chart) => {
-      if (chart.id && window.Plotly) {
-        Plotly.relayout(chart.id, {
-          "xaxis.automargin": true,
-          "yaxis.automargin": true,
-        });
-      }
-    });
-  }
-
   // Refresh all charts with current theme
   function refreshAllCharts() {
     if (!window.Plotly) return;
@@ -283,182 +459,6 @@ document.addEventListener("DOMContentLoaded", function () {
       });
   }
 
-  // Function to update dashboard statistics
-  function updateDashboardStats(data) {
-    // Update total sessions
-    const totalSessionsElement = document.querySelector(".stats-card:nth-child(1) h3");
-    if (totalSessionsElement) {
-      totalSessionsElement.textContent = data.total_sessions;
-    }
-
-    // Update average response time
-    const avgResponseTimeElement = document.querySelector(".stats-card:nth-child(2) h3");
-    if (avgResponseTimeElement) {
-      avgResponseTimeElement.textContent = data.avg_response_time + "s";
-    }
-
-    // Update total tokens
-    const totalTokensElement = document.querySelector(".stats-card:nth-child(3) h3");
-    if (totalTokensElement) {
-      totalTokensElement.textContent = data.total_tokens;
-    }
-
-    // Update total cost
-    const totalCostElement = document.querySelector(".stats-card:nth-child(4) h3");
-    if (totalCostElement) {
-      totalCostElement.textContent = "€" + data.total_cost;
-    }
-  }
-
-  // Function to update dashboard charts
-  function updateDashboardCharts(data) {
-    // Check if Plotly is available
-    if (!window.Plotly) {
-      console.error("Plotly library not loaded!");
-      document.querySelectorAll(".chart-container").forEach((container) => {
-        container.innerHTML =
-          '<div class="text-center py-5"><p class="text-danger">Chart library not available. Please refresh the page.</p></div>';
-      });
-      return;
-    }
-
-    // Update sessions over time chart
-    const timeSeriesData = data.time_series_data;
-    if (timeSeriesData && timeSeriesData.length > 0) {
-      try {
-        const timeSeriesX = timeSeriesData.map((item) => item.date);
-        const timeSeriesY = timeSeriesData.map((item) => item.count);
-
-        Plotly.react(
-          "sessions-time-chart",
-          [
-            {
-              x: timeSeriesX,
-              y: timeSeriesY,
-              type: "scatter",
-              mode: "lines+markers",
-              line: {
-                color: "rgb(75, 192, 192)",
-                width: 2,
-              },
-              marker: {
-                color: "rgb(75, 192, 192)",
-                size: 6,
-              },
-            },
-          ],
-          {
-            ...window.plotlyDefaultLayout,
-            margin: { t: 10, r: 10, b: 40, l: 40 },
-            xaxis: {
-              ...window.plotlyDefaultLayout.xaxis,
-              title: "Date",
-            },
-            yaxis: {
-              ...window.plotlyDefaultLayout.yaxis,
-              title: "Number of Sessions",
-            },
-          },
-        );
-      } catch (error) {
-        console.error("Error rendering time series chart:", error);
-        document.getElementById("sessions-time-chart").innerHTML =
-          '<div class="text-center py-5"><p class="text-danger">Error rendering chart.</p></div>';
-      }
-    } else {
-      document.getElementById("sessions-time-chart").innerHTML =
-        '<div class="text-center py-5"><p class="text-muted">No time series data available</p></div>';
-    }
-
-    // Update sentiment chart
-    const sentimentData = data.sentiment_data;
-    if (sentimentData && sentimentData.length > 0 && window.Plotly) {
-      const sentimentLabels = sentimentData.map((item) => item.sentiment);
-      const sentimentValues = sentimentData.map((item) => item.count);
-      const sentimentColors = sentimentLabels.map((sentiment) => {
-        if (sentiment.toLowerCase().includes("positive")) return "rgb(75, 192, 92)";
-        if (sentiment.toLowerCase().includes("negative")) return "rgb(255, 99, 132)";
-        if (sentiment.toLowerCase().includes("neutral")) return "rgb(255, 205, 86)";
-        return "rgb(201, 203, 207)";
-      });
-
-      Plotly.react(
-        "sentiment-chart",
-        [
-          {
-            values: sentimentValues,
-            labels: sentimentLabels,
-            type: "pie",
-            marker: {
-              colors: sentimentColors,
-            },
-            hole: 0.4,
-            textinfo: "label+percent",
-            insidetextorientation: "radial",
-          },
-        ],
-        {
-          ...window.plotlyDefaultLayout,
-          margin: { t: 10, r: 10, b: 10, l: 10 },
-        },
-      );
-    }
-
-    // Update country chart
-    const countryData = data.country_data;
-    if (countryData && countryData.length > 0 && window.Plotly) {
-      const countryLabels = countryData.map((item) => item.country);
-      const countryValues = countryData.map((item) => item.count);
-
-      Plotly.react(
-        "country-chart",
-        [
-          {
-            x: countryValues,
-            y: countryLabels,
-            type: "bar",
-            orientation: "h",
-            marker: {
-              color: "rgb(54, 162, 235)",
-            },
-          },
-        ],
-        {
-          ...window.plotlyDefaultLayout,
-          margin: { t: 10, r: 10, b: 40, l: 100 },
-          xaxis: {
-            ...window.plotlyDefaultLayout.xaxis,
-            title: "Number of Sessions",
-          },
-        },
-      );
-    }
-
-    // Update category chart
-    const categoryData = data.category_data;
-    if (categoryData && categoryData.length > 0 && window.Plotly) {
-      const categoryLabels = categoryData.map((item) => item.category);
-      const categoryValues = categoryData.map((item) => item.count);
-
-      Plotly.react(
-        "category-chart",
-        [
-          {
-            labels: categoryLabels,
-            values: categoryValues,
-            type: "pie",
-            textinfo: "label+percent",
-            insidetextorientation: "radial",
-          },
-        ],
-        {
-          ...window.plotlyDefaultLayout,
-          margin: { t: 10, r: 10, b: 10, l: 10 },
-        },
-      );
-    }
-  }
-
   // Dashboard selector
   const dashboardSelector = document.querySelectorAll('a[href^="?dashboard_id="]');
   dashboardSelector.forEach((link) => {

dashboard_project/static/js/main.js

@@ -6,6 +6,58 @@
 *   the entire application, including navigation, forms, and UI interactions.
  */
 
+// Handle sidebar collapse on small screens
+function handleSidebarOnResize() {
+  if (window.innerWidth < 768) {
+    document.querySelector(".sidebar")?.classList.remove("show");
+  }
+}
+
+// Theme toggling functionality
+function setTheme(theme, isUserPreference = false) {
+  console.log("Setting theme to:", theme, "User preference:", isUserPreference);
+
+  // Update the HTML attribute that controls theme
+  document.documentElement.setAttribute("data-bs-theme", theme);
+
+  // Save the theme preference to localStorage
+  localStorage.setItem("theme", theme);
+
+  // If this was a user choice (from the toggle button), record that fact
+  if (isUserPreference) {
+    localStorage.setItem("userPreferredTheme", "true");
+  }
+
+  // Update toggle button icon
+  const themeToggle = document.getElementById("theme-toggle");
+  if (themeToggle) {
+    const icon = themeToggle.querySelector("i");
+    if (theme === "dark") {
+      icon.classList.remove("fa-moon");
+      icon.classList.add("fa-sun");
+      themeToggle.setAttribute("title", "Switch to light mode");
+      themeToggle.setAttribute("aria-label", "Switch to light mode");
+    } else {
+      icon.classList.remove("fa-sun");
+      icon.classList.add("fa-moon");
+      themeToggle.setAttribute("title", "Switch to dark mode");
+      themeToggle.setAttribute("aria-label", "Switch to dark mode");
+    }
+  }
+
+  // If we're on a page with charts, refresh them to match the theme
+  if (typeof window.refreshAllCharts === "function") {
+    console.log("Calling refresh charts from theme toggle");
+    // Add a small delay to ensure DOM updates have completed
+    setTimeout(() => window.refreshAllCharts(), 100);
+  }
+}
+
+// Check if the user has a system preference for dark mode
+function getSystemPreference() {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
 document.addEventListener("DOMContentLoaded", function () {
   // Initialize tooltips
   var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
@@ -142,57 +194,7 @@ document.addEventListener("DOMContentLoaded", function () {
     });
   });
 
-  // Handle sidebar collapse on small screens
+  window.addEventListener("resize", handleSidebarOnResize);
-  function handleSidebarOnResize() {
-    if (window.innerWidth < 768) {
-      document.querySelector(".sidebar")?.classList.remove("show");
-    }
-  }
-
-  window.addEventListener("resize", handleSidebarOnResize); // Theme toggling functionality
-  function setTheme(theme, isUserPreference = false) {
-    console.log("Setting theme to:", theme, "User preference:", isUserPreference);
-
-    // Update the HTML attribute that controls theme
-    document.documentElement.setAttribute("data-bs-theme", theme);
-
-    // Save the theme preference to localStorage
-    localStorage.setItem("theme", theme);
-
-    // If this was a user choice (from the toggle button), record that fact
-    if (isUserPreference) {
-      localStorage.setItem("userPreferredTheme", "true");
-    }
-
-    // Update toggle button icon
-    const themeToggle = document.getElementById("theme-toggle");
-    if (themeToggle) {
-      const icon = themeToggle.querySelector("i");
-      if (theme === "dark") {
-        icon.classList.remove("fa-moon");
-        icon.classList.add("fa-sun");
-        themeToggle.setAttribute("title", "Switch to light mode");
-        themeToggle.setAttribute("aria-label", "Switch to light mode");
-      } else {
-        icon.classList.remove("fa-sun");
-        icon.classList.add("fa-moon");
-        themeToggle.setAttribute("title", "Switch to dark mode");
-        themeToggle.setAttribute("aria-label", "Switch to dark mode");
-      }
-    }
-
-    // If we're on a page with charts, refresh them to match the theme
-    if (typeof window.refreshAllCharts === "function") {
-      console.log("Calling refresh charts from theme toggle");
-      // Add a small delay to ensure DOM updates have completed
-      setTimeout(() => window.refreshAllCharts(), 100);
-    }
-  }
-
-  // Check if the user has a system preference for dark mode
-  function getSystemPreference() {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  }
 
   // Initialize theme based on saved preference or system setting
   function initializeTheme() {