From adee8d777cb81d2b945e2928e079ace18965f1dc Mon Sep 17 00:00:00 2001
From: Mounesh <mounesh.kalimisetty@straive.com>
Date: Sun, 24 Nov 2024 16:51:04 +0530
Subject: [PATCH] Add files via upload

---
 index.html | 118 +++++---
 script.js  | 824 +++++++++++++++++++++++++++++++++++++++--------------
 style.css  | 124 +++++---
 3 files changed, 778 insertions(+), 288 deletions(-)
diff --git a/index.html b/index.html
index 4b60655..38be281 100644
--- a/index.html
+++ b/index.html
@@ -6,25 +6,34 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Incident Analysis</title>
   <link rel="icon" href="https://raw.githubusercontent.com/gramener/assets/main/straive-favicon.svg">
+  
+  <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
+  
+  <!-- Bootstrap Icons -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+  
+  <!-- Custom CSS -->
   <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
+  <!-- Navigation Bar -->
   <nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
     <div class="container-fluid">
       <a class="navbar-brand" href=".">Incident Analysis</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <div class="btn-group ms-auto">
-          <a href="." class="btn btn-outline-primary active" aria-current="page">Incident Analysis</a>
+          <a href="#" class="btn btn-outline-primary active" aria-current="page">Incident Analysis</a>
           <a href="services.html" class="btn btn-outline-primary">Service Chainflow</a>
         </div>
         <div class="nav-item dropdown ms-auto" role="group" aria-label="Toggle dark mode" title="Toggle Dark Mode">
-          <button class="dark-theme-toggle btn btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (auto)">
+          <button class="dark-theme-toggle btn btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown"
+            aria-expanded="false" aria-label="Toggle theme (auto)">
             <i class="bi bi-circle-half"></i> <span class="d-lg-none ms-2">Toggle theme</span>
           </button>
           <ul class="dropdown-menu dropdown-menu-end">
@@ -37,22 +46,26 @@
     </div>
   </nav>
 
+  <!-- Main Container -->
   <div class="container-fluid">
+    <!-- Header Section -->
     <h1 class="display-1 my-4 text-center">Incident Analysis</h1>
     <h2 class="display-6 text-center">What are the main drivers of incidents?</h2>
-
+    
+    <!-- Narrative Section -->
     <div class="mx-auto my-3 narrative">
       <p>This application is designed for incident analysis, allowing users to upload CSV files containing incident data and service impact data.</p>
       <p>It visualizes the relationships between different incidents and their impacts using Sankey diagrams and network graphs.</p>
       <p>You can use sample data from <a href="https://drive.google.com/drive/folders/1qJXojKTsVfXAPVLApNV17tvY1Keexc0C">this folder</a> if you have access.</p>
     </div>
 
+    <!-- Upload Form -->
     <form id="upload" class="container mt-5">
       <div class="row">
         <div class="col-md mb-3">
           <label for="incidents" class="form-label">Upload <strong>Incidents</strong> .CSV</label>
           <input class="form-control" type="file" id="incidents" name="incidents" accept=".csv" />
-          <p class="form-text"><em>Columns</em>: Service, Shift, Area, Team, Count, Hours</p>
+          <p class="form-text"><em>Columns</em>: Service, Shift, Region, Team, Count, Hours, Date</p>
         </div>
         <div class="col-md mb-3">
           <label for="relations" class="form-label">Upload <strong>Service Impact</strong> .CSV</label>
@@ -62,43 +75,58 @@ <h2 class="display-6 text-center">What are the main drivers of incidents?</h2>
       </div>
     </form>
 
-    <div class="container">
-      <div id="filters" class="row mb-5"></div>
+    <!-- Filters Section -->
+    <div id="filters" class="row mb-5">
+      <!-- Filter Dropdowns will be dynamically generated here -->
     </div>
 
+    <!-- Result Section (Initially Hidden) -->
     <div id="result" class="d-none">
       <div class="container">
-        <div class="row g-2">
+        <div class="row g-2 mb-4">
+          <!-- Toggle Links Checkbox -->
           <div class="col-md flex-grow-0">
             <label class="form-check-label text-nowrap" for="show-links">Show links</label>
             <div class="form-check form-switch mt-2">
               <input class="form-check-input" type="checkbox" role="switch" id="show-links">
             </div>
           </div>
+
+          <!-- Threshold Slider -->
           <div class="col-md">
             <label for="threshold" class="form-label">Filter by incident duration (hours)</label>
             <input type="range" class="form-range" id="threshold" min="0" max="10" step="0.1" value="3" list="tickmarks">
-            <datalist id="tickmarks">
-              <option value="0" label="0h"></option>
-              <option value="1" label="1h"></option>
-              <option value="2" label="2h"></option>
-              <option value="3" label="3h"></option>
-              <option value="4" label="4h"></option>
-              <option value="5" label="5h"></option>
-              <option value="6" label="6h"></option>
-              <option value="7" label="7h"></option>
-              <option value="8" label="8h"></option>
-              <option value="9" label="9h"></option>
-              <option value="10" label="10h"></option>
-            </datalist>
             <div id="threshold-value">Threshold: <span id="threshold-display">3</span> hours</div>
           </div>
+
+          <!-- Reset Filters Button -->
+          <div class="col-md flex-grow-0">
+            <button class="btn btn-outline-primary" id="reset-filters" title="Reset Filters">
+              <i class="bi bi-arrow-clockwise"></i>
+            </button>
+          </div>
         </div>
-      </div>
 
+        <!-- Tick Marks for Threshold Slider -->
+        <datalist id="tickmarks">
+          <option value="0" label="0h"></option>
+          <option value="1" label="1h"></option>
+          <option value="2" label="2h"></option>
+          <option value="3" label="3h"></option>
+          <option value="4" label="4h"></option>
+          <option value="5" label="5h"></option>
+          <option value="6" label="6h"></option>
+          <option value="7" label="7h"></option>
+          <option value="8" label="8h"></option>
+          <option value="9" label="9h"></option>
+          <option value="10" label="10h"></option>
+        </datalist>
+      </div>
 
+      <!-- Sankey Diagram -->
       <svg width="1000" height="400" id="sankey" fill="currentColor" class="d-block mx-auto"></svg>
 
+      <!-- Network Graph -->
       <svg width="1000" height="1000" id="network" fill="currentColor" class="d-block mx-auto">
         <defs>
           <marker
@@ -115,30 +143,48 @@ <h2 class="display-6 text-center">What are the main drivers of incidents?</h2>
         </defs>
       </svg>
 
+      <!-- Ask a Question Section -->
+      <div class="container mt-5">
+        <div class="mb-3">
+          <label for="user-question" class="form-label">Ask a Question:</label>
+          <textarea class="form-control" id="user-question" rows="3" placeholder="Type your question here..."></textarea>
+        </div>
+        <button class="btn btn-secondary btn-lg d-block mx-auto mb-4" id="ask-question">Ask Question</button>
+      </div>
+
+      <!-- Summarize Button -->
       <button class="btn btn-primary btn-lg d-block mx-auto" id="summarize">Analyze and Summarize</button>
-      <section id="summary" class="narrative mx-auto"></section>
+      
+      <!-- Summary Section -->
+      <section id="summary" class="narrative mx-auto mt-5"></section>
     </div>
 
-  </div>
-
-  <footer class="my-5 vh-100 d-flex align-items-center justify-content-center">
-    <h1 class="display-4">Designed by <a href="https://gramener.com/" class="text-reset link-offset-3 link-underline link-underline-opacity-25">Gramener</a></h1>
-  </footer>
-
-  <div class="modal" tabindex="-1" id="snippet-modal">
-    <div class="modal-dialog">
-      <div class="modal-content" id="snippet-modal">
-        <div class="modal-header">
-          <h5 class="modal-title" id="snippet-modal-title"></h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+    <!-- Footer -->
+    <footer class="my-5 vh-100 d-flex align-items-center justify-content-center">
+      <h1 class="display-4">Designed by <a href="https://gramener.com/" class="text-reset link-offset-3 link-underline link-underline-opacity-25">Gramener</a></h1>
+    </footer>
+
+    <!-- Modal (If Needed) -->
+    <div class="modal" tabindex="-1" id="snippet-modal">
+      <div class="modal-dialog">
+        <div class="modal-content" id="snippet-modal">
+          <div class="modal-header">
+            <h5 class="modal-title" id="snippet-modal-title"></h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body" id="snippet-modal-body"></div>
         </div>
-        <div class="modal-body" id="snippet-modal-body"></div>
       </div>
     </div>
   </div>
 
+  <!-- Bootstrap Bundle JS (includes Popper) -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" type="module"></script>
+  
+  <!-- Dark Theme Toggle (from @gramex/ui) -->
   <script src="https://cdn.jsdelivr.net/npm/@gramex/ui@0.3/dist/dark-theme.js" type="module"></script>
+  
+  <!-- Custom Script -->
   <script src="script.js" type="module"></script>
 </body>
 
diff --git a/script.js b/script.js
index 672cad8..6cd0342 100644
--- a/script.js
+++ b/script.js
@@ -1,3 +1,4 @@
+// Import necessary libraries
 import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
 import { sankey } from "https://cdn.jsdelivr.net/npm/@gramex/sankey@1";
 import { network } from "https://cdn.jsdelivr.net/npm/@gramex/network@2/dist/network.js";
@@ -6,148 +7,206 @@ import { num0, num2 } from "https://cdn.jsdelivr.net/npm/@gramex/ui@0.3/dist/for
 import { Marked } from "https://cdn.jsdelivr.net/npm/marked@13/+esm";
 import { asyncLLM } from "https://cdn.jsdelivr.net/npm/asyncllm@1";
 
-const $upload = document.getElementById("upload");
-const $filters = document.getElementById("filters");
-const $result = document.getElementById("result");
-const $showLinks = document.getElementById("show-links");
-const $threshold = document.getElementById("threshold");
-const $thresholdDisplay = document.getElementById("threshold-display");
-const $sankey = document.getElementById("sankey");
-const $network = document.getElementById("network");
-const $summarize = document.getElementById("summarize");
-const $summary = document.getElementById("summary");
-
+// Get references to DOM elements
+const $elements = {
+  upload: document.getElementById("upload"),
+  filters: document.getElementById("filters"),
+  result: document.getElementById("result"),
+  showLinks: document.getElementById("show-links"),
+  threshold: document.getElementById("threshold"),
+  thresholdDisplay: document.getElementById("threshold-display"),
+  sankey: document.getElementById("sankey"),
+  network: document.getElementById("network"),
+  summarize: document.getElementById("summarize"),
+  summary: document.getElementById("summary"),
+  userQuestion: document.getElementById("user-question"),
+  askQuestion: document.getElementById("ask-question"),
+  resetFilters: document.getElementById("reset-filters"),
+};
+
+// Initialize variables and constants
 const data = {};
 const graphs = {};
 const minDuration = 0;
 const maxDuration = 10;
-let threshold = parseFloat($threshold.value) || 3;
+let threshold = parseFloat($elements.threshold.value) || 3;
+let colorScale;
 const marked = new Marked();
-
 const filters = {};
 
-// Function to create the color scale
-function createColorScale() {
-  return d3
-    .scaleLinear()
-    .domain([minDuration, 2, threshold, 4, maxDuration])
-    .range(["green", "green", "yellow", "red", "red"])
-    .interpolate(d3.interpolateLab)
-    .clamp(true);
-}
-
-let colorScale = createColorScale();
-
-// Function to read CSV files
+// Constants for filters and pre-selected services and regions
+const filterKeys = ["Region", "Shift", "Team", "Service"];
+const preSelectedServices = [
+  "CTR",
+  "LOGAN",
+  "VaR",
+  "GRT",
+  "LIQ",
+  "RWH",
+  "Argos",
+  "PXV",
+  "TLM",
+  "K2",
+  "TARDIS",
+];
+const preSelectedRegions = [
+  "Canada",
+  "Ireland",
+  "USA",
+  "UK",
+  "Global",
+  "Singapore",
+  "LATAM",
+];
+
+// Function to read and parse CSV files
 async function readCSV(file) {
   const text = await file.text();
   return d3.csvParse(text, (d) => {
+    // Automatically infer data types using d3.autoType
     const row = d3.autoType(d);
 
+    // Split 'Incident Data' into separate fields if it exists
     if (row["Incident Data"]) {
-      const [Incident, DescriptionCleaned, ImpactCleaned, ResolutionDetails] = row["Incident Data"].split("|");
+      const [Incident, DescriptionCleaned, ImpactCleaned, ResolutionDetails] =
+        row["Incident Data"].split("|");
       Object.assign(row, { Incident, DescriptionCleaned, ImpactCleaned, ResolutionDetails });
     }
 
+    // Ensure 'Time of Day' field exists
     row["Time of Day"] = row["Time of Day"] || "";
 
     return row;
   });
 }
 
-// Event listener for file upload
-$upload.addEventListener("change", async (e) => {
+// Event listener for file uploads
+$elements.upload.addEventListener("change", async (e) => {
   const name = e.target.getAttribute("name");
   data[name] = await readCSV(e.target.files[0]);
   draw();
 });
 
+// Main function to initialize the application after data is loaded
 function draw() {
   if (!data.incidents) return;
-  $result.classList.remove("d-none");
+  $elements.result.classList.remove("d-none");
+  initializeFilters();
   drawFilters();
   update();
 }
 
+// Update function to refresh visualizations
 function update() {
+  updateColorScale();
   drawSankey();
   drawNetwork();
 }
 
-function drawFilters() {
-  const filterKeys = ["Area", "Shift", "Team", "Service"];
-  const preSelectedServices = ["CTR", "LOGAN", "VaR", "GRT", "LIQ", "RWH", "Argos", "PXV", "TLM", "K2", "TARDIS"];
-
+// Function to initialize filters to default values
+function initializeFilters() {
   filterKeys.forEach((key) => {
     const values = [...new Set(data.incidents.map((d) => d[key]))].sort();
-    filters[key] = values.map((value, index) => ({
-      value,
-      selected: key === "Service" ? preSelectedServices.includes(value) : key !== "Team",
-      index,
+    filters[key] = values.map((v) => ({
+      value: v,
+      selected:
+        key === "Service"
+          ? preSelectedServices.includes(v)
+          : key === "Region"
+          ? preSelectedRegions.includes(v)
+          : key !== "Team",
     }));
   });
+}
 
-  $filters.innerHTML = filterKeys
+// Event listener for resetting filters
+$elements.resetFilters.addEventListener("click", resetFilters);
+
+// Function to reset filters and update visualizations
+function resetFilters() {
+  initializeFilters();
+  drawFilters();
+  update();
+}
+
+// Function to draw filter dropdowns
+function drawFilters() {
+  // Generate HTML for filter dropdowns
+  $elements.filters.innerHTML = filterKeys
     .map(
-      (key) => /* html */ `
-    <div class="col-md-3">
-      <div class="dropdown">
-        <button class="btn btn-secondary dropdown-toggle w-100" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside">
-          ${key}
-        </button>
-        <div class="dropdown-menu w-100" id="dropdown-menu-${key}">
-          <div class="dropdown-search">
-            <input type="text" placeholder="Search ${key}..." class="search-filter">
+      (key) => `
+      <div class="col-md-3">
+        <div class="dropdown">
+          <button class="btn btn-secondary dropdown-toggle w-100" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside">
+            ${key}
+          </button>
+          <div class="dropdown-menu w-100" id="dropdown-menu-${key}">
+            <div class="dropdown-search">
+              <input type="text" placeholder="Search ${key}..." class="search-filter">
+            </div>
+            <div class="dropdown-item">
+              <input type="checkbox" class="select-all" id="all-${key}" ${
+          key !== "Service" && key !== "Team" && key !== "Region" ? "checked" : ""
+        }>
+              <label for="all-${key}" class="flex-grow-1">Select All</label>
+            </div>
+            ${
+              key === "Service"
+                ? `
+            <div class="dropdown-item">
+              <input type="checkbox" class="top-10" id="top-10-${key}">
+              <label for="top-10-${key}" class="flex-grow-1">Top 10</label>
+            </div>
+            `
+                : ""
+            }
+            <div id="filter-options-${key}">
+              <!-- Options will be rendered here -->
+            </div>
           </div>
-          <div class="dropdown-item">
-            <input type="checkbox" class="select-all" id="all-${key}" ${
-        key !== "Service" && key !== "Team" ? "checked" : ""
-      }>
-            <label for="all-${key}">Select All</label>
-          </div>
-          ${
-            key === "Service"
-              ? /* html */ `<div class="dropdown-item">
-                   <input type="checkbox" class="top-10" id="top-10-${key}">
-                   <label for="top-10-${key}">Top 10</label>
-                 </div>`
-              : ""
-          }
-          <div id="filter-options-${key}"></div>
         </div>
       </div>
-    </div>
-  `
+    `
     )
     .join("");
 
-  filterKeys.forEach((key) => renderFilterOptions(key));
+  // Render options for each filter
+  filterKeys.forEach(renderFilterOptions);
+
+  // Add event listeners to filter components
   addFilterEventListeners();
+
+  // Select top teams based on selected services
   selectTopTeams();
 }
 
+// Function to render filter options within each dropdown
 function renderFilterOptions(key) {
   const optionsContainer = document.getElementById(`filter-options-${key}`);
   const options = filters[key];
 
-  options.sort((a, b) => (a.selected === b.selected ? a.index - b.index : b.selected - a.selected));
+  // Sort options: selected at the top, then unselected
+  options.sort((a, b) => b.selected - a.selected || a.value.localeCompare(b.value));
 
+  // Generate HTML for each option
   optionsContainer.innerHTML = options
     .map(
-      (option) => /* html */`
-    <div class="dropdown-item">
-      <input type="checkbox" class="filter-checkbox" name="${key}" value="${option.value}" id="${key}-${
-        option.value
-      }" ${option.selected ? "checked" : ""}>
-      <label for="${key}-${option.value}">${option.value}</label>
-    </div>
-  `
+      (option) => `
+      <div class="dropdown-item">
+        <input type="checkbox" class="filter-checkbox" name="${key}" value="${option.value}" id="${key}-${option.value}" ${
+        option.selected ? "checked" : ""
+      }>
+        <label for="${key}-${option.value}" class="flex-grow-1">${option.value}</label>
+      </div>
+    `
     )
     .join("");
 
+  // Add event listeners to checkboxes
   optionsContainer.querySelectorAll(".filter-checkbox").forEach((checkbox) => {
     checkbox.addEventListener("change", () => {
-      const option = filters[key].find((opt) => opt.value === checkbox.value);
+      const value = checkbox.value;
+      const option = filters[key].find((opt) => opt.value === value);
       if (option) option.selected = checkbox.checked;
       if (key === "Service") selectTopTeams();
       renderFilterOptions(key);
@@ -156,7 +215,9 @@ function renderFilterOptions(key) {
   });
 }
 
+// Function to add event listeners for filter interactions
 function addFilterEventListeners() {
+  // Search functionality within filters
   document.querySelectorAll(".search-filter").forEach((input) => {
     input.addEventListener("input", (e) => {
       const searchText = e.target.value.toLowerCase();
@@ -164,12 +225,14 @@ function addFilterEventListeners() {
       dropdownMenu.querySelectorAll(".dropdown-item").forEach((item) => {
         const label = item.querySelector("label");
         if (label) {
-          item.style.display = label.textContent.toLowerCase().includes(searchText) ? "" : "none";
+          const text = label.textContent.toLowerCase();
+          item.style.display = text.includes(searchText) ? "" : "none";
         }
       });
     });
   });
 
+  // 'Select All' functionality
   document.querySelectorAll(".select-all").forEach((checkbox) => {
     checkbox.addEventListener("change", (e) => {
       const key = e.target.id.replace("all-", "");
@@ -181,33 +244,32 @@ function addFilterEventListeners() {
     });
   });
 
+  // 'Top 10' services functionality
   document.querySelectorAll(".top-10").forEach((checkbox) => {
     checkbox.addEventListener("change", (e) => {
       const key = e.target.id.replace("top-10-", "");
       const checked = e.target.checked;
-      const top10Services = ["CTR", "LOGAN", "VaR", "GRT", "LIQ", "RWH", "Argos", "PXV", "TLM", "K2", "TARDIS"];
-
       filters[key].forEach((option) => {
-        option.selected = top10Services.includes(option.value) ? checked : false;
+        option.selected = checked && preSelectedServices.includes(option.value);
       });
-
-      const selectAll = document.getElementById(`all-${key}`);
-      if (selectAll) selectAll.checked = false;
-
+      document.getElementById(`all-${key}`).checked = false; // Uncheck 'Select All'
       selectTopTeams();
       renderFilterOptions(key);
       update();
     });
   });
 
+  // Prevent dropdown from closing on click inside
   document.querySelectorAll(".dropdown-menu").forEach((menu) => {
     menu.addEventListener("click", (e) => e.stopPropagation());
   });
 }
 
+// Function to select top teams based on selected services
 function selectTopTeams() {
   const selectedServices = filters["Service"].filter((opt) => opt.selected).map((opt) => opt.value);
 
+  // Unselect all teams initially
   filters["Team"].forEach((option) => (option.selected = false));
 
   if (selectedServices.length === 0) {
@@ -215,6 +277,7 @@ function selectTopTeams() {
     return;
   }
 
+  // Calculate top 2 teams for each selected service
   const incidentsByTeamService = d3.rollups(
     data.incidents,
     (v) => d3.sum(v, (d) => d.Count),
@@ -224,93 +287,145 @@ function selectTopTeams() {
 
   const topTeams = new Set();
 
-  incidentsByTeamService.forEach(([service, teams]) => {
+  for (const [service, teams] of incidentsByTeamService) {
     if (selectedServices.includes(service)) {
       teams
         .sort((a, b) => b[1] - a[1])
         .slice(0, 2)
-        .forEach(([team]) => topTeams.add(team));
+        .forEach(([teamName]) => topTeams.add(teamName));
     }
-  });
+  }
 
+  // Select only the top teams
   filters["Team"].forEach((option) => {
-    if (topTeams.has(option.value)) option.selected = true;
+    option.selected = topTeams.has(option.value);
   });
 
+  // Re-render team options
   renderFilterOptions("Team");
 }
 
+// Function to filter incidents based on selected filters
 function filteredIncidents() {
   const selectedValues = {};
-  const filterKeys = ["Area", "Shift", "Team", "Service"];
-
   filterKeys.forEach((key) => {
     selectedValues[key] = filters[key].filter((opt) => opt.selected).map((opt) => opt.value);
   });
 
   return data.incidents.filter((row) =>
-    filterKeys.every((key) => selectedValues[key].length === 0 || selectedValues[key].includes(row[key]))
+    filterKeys.every(
+      (key) => selectedValues[key].length === 0 || selectedValues[key].includes(row[key])
+    )
   );
 }
 
+// Function to draw the Sankey diagram
 function drawSankey() {
   const incidents = filteredIncidents();
-  const graph = sankey($sankey, {
+
+  // Check if incidents are present
+  if (incidents.length === 0) {
+    $elements.sankey.innerHTML = `<div class="alert alert-info" role="alert">
+      No data available for the selected filters.
+    </div>`;
+    return;
+  }
+
+  // Create a mapping between Team Acro and Team Name
+  const teamAcroToName = {};
+  incidents.forEach((incident) => {
+    if (incident["Team Acro"] && incident["Team"]) {
+      teamAcroToName[incident["Team Acro"]] = incident["Team"];
+    }
+  });
+
+  const graph = sankey($elements.sankey, {
     data: incidents,
     labelWidth: 100,
-    categories: ["Shift", "Area", "Team", "Service"],
+    categories: ["Shift", "Region", "Team Acro", "Service"],
     size: (d) => d.Count,
-    text: (d) => (d.key.length * 9 < d.width ? d.key : null),
+    text: (d) => (d.key.length * 6 < d.width ? d.key : null),
     d3,
   });
   graphs.sankey = graph;
 
-  graph.nodeData.forEach((d) => {
-    const totalAdjustedHours = d3.sum(d.group, (d) => d.Hours * d.Count);
-    const totalCount = d3.sum(d.group, (d) => d.Count);
-    d.Hours = totalAdjustedHours / totalCount;
-    d.size = totalCount;
-  });
-
-  graph.linkData.forEach((d) => {
-    const totalAdjustedHours = d3.sum(d.group, (d) => d.Hours * d.Count);
-    const totalCount = d3.sum(d.group, (d) => d.Count);
-    d.Hours = totalAdjustedHours / totalCount;
-    d.size = totalCount;
-  });
-
-  colorScale = createColorScale();
+  // Adjust 'Hours' and 'size' for nodes and links
+  adjustHoursAndSize(graph.nodeData);
+  adjustHoursAndSize(graph.linkData);
 
-  graph.nodes.attr("data-bs-toggle", "tooltip").attr("title", (d) => `${d.key}: ${num2(d.Hours)} hours`);
+  // Add tooltips with alternative Team names
+  graph.nodes
+    .attr("data-bs-toggle", "tooltip")
+    .attr("title", function (d) {
+      const teamFullName = teamAcroToName[d.key];
+      return teamFullName && teamFullName !== d.key
+        ? `${teamFullName}: ${num2(d.Hours)} hours`
+        : `${d.key}: ${num2(d.Hours)} hours`;
+    });
 
   graph.links
     .attr("data-bs-toggle", "tooltip")
     .attr("title", (d) => `${d.source.key} - ${d.target.key}: ${num2(d.Hours)} hours`);
 
-  graph.texts.attr("fill", "black");
-
+  // Style text labels
+  graph.texts.attr("fill", "black").attr("font-size", "12px");
   colorSankey();
+
+  // Initialize Bootstrap tooltips
+  initializeTooltips();
+}
+
+// Function to adjust 'Hours' and 'size' properties for nodes and links
+function adjustHoursAndSize(items) {
+  items.forEach((d) => {
+    const totalAdjustedHours = d3.sum(d.group, (item) => item.Hours * item.Count);
+    const totalCount = d3.sum(d.group, (item) => item.Count);
+    d.Hours = totalAdjustedHours / totalCount;
+    d.size = totalCount;
+  });
+}
+
+// Function to update color scale based on threshold
+function updateColorScale() {
+  colorScale = d3
+    .scaleLinear()
+    .domain([minDuration, 2, threshold, 4, maxDuration])
+    .range(["green", "green", "yellow", "red", "red"])
+    .clamp(true);
 }
 
+// Function to color the Sankey diagram based on 'Hours'
 function colorSankey() {
-  $thresholdDisplay.textContent = num2(threshold);
+  $elements.thresholdDisplay.textContent = num2(threshold);
   graphs.sankey.nodes.attr("fill", (d) => colorScale(d.Hours));
   graphs.sankey.links.attr("fill", (d) => colorScale(d.Hours));
 }
 
-$showLinks.addEventListener("change", () => {
-  graphs.sankey.links.classed("show", $showLinks.checked);
+// Event listener to toggle links in Sankey diagram
+$elements.showLinks.addEventListener("change", () => {
+  graphs.sankey.links.classed("show", $elements.showLinks.checked);
 });
 
-$threshold.addEventListener("input", () => {
-  threshold = parseFloat($threshold.value);
-  colorScale = createColorScale();
+// Event listener for threshold slider
+$elements.threshold.addEventListener("input", () => {
+  threshold = parseFloat($elements.threshold.value);
+  updateColorScale();
   colorSankey();
 });
 
+// Function to draw the network graph
 function drawNetwork() {
   const incidents = data.incidents;
 
+  // Check if incidents are present
+  if (incidents.length === 0) {
+    $elements.network.innerHTML = `<div class="alert alert-info" role="alert">
+      No data available for the selected filters.
+    </div>`;
+    return;
+  }
+
+  // Calculate service statistics
   const serviceStats = d3.rollup(
     incidents,
     (v) => ({
@@ -329,76 +444,74 @@ function drawNetwork() {
     { count: 1 }
   );
 
+  // Assign statistics to nodes
   nodes.forEach((node) => {
     Object.assign(node, serviceStats.get(node.value) || { TotalHours: 0, Count: 0 });
     node.Hours = node.TotalHours / node.Count || 0;
   });
 
+  // Define forces for the network layout
   const forces = {
     charge: () => d3.forceManyBody().strength(-200),
   };
 
-  const graph = network($network, { nodes, links, forces, d3 });
+  const graph = network($elements.network, { nodes, links, forces, d3 });
   graphs.network = graph;
 
+  // Define radius scale based on incident count
   const rScale = d3
     .scaleSqrt()
     .domain([0, d3.max(nodes, (d) => d.Count)])
     .range([1, 30]);
 
+  // Style nodes
   graph.nodes
     .attr("fill", (d) => colorScale(d.Hours))
     .attr("stroke", "white")
+    .attr("stroke-width", 1)
     .attr("r", (d) => rScale(d.Count))
     .attr("data-bs-toggle", "tooltip")
     .attr("title", (d) => `${d.value}: ${num2(d.Hours)} hours, ${num0(d.Count)} incidents`);
 
-  graph.links.attr("marker-end", "url(#triangle)").attr("stroke", "rgba(var(--bs-body-color-rgb), 0.2)");
-}
+  // Style links
+  graph.links
+    .attr("marker-end", "url(#triangle)")
+    .attr("stroke", "rgba(var(--bs-body-color-rgb), 0.2)");
 
-new bootstrap.Tooltip($sankey, { selector: "[data-bs-toggle='tooltip']" });
-new bootstrap.Tooltip($network, { selector: "[data-bs-toggle='tooltip']" });
+  // Initialize Bootstrap tooltips
+  initializeTooltips();
+}
 
-$summarize.addEventListener("click", summarize);
+// Event listeners for buttons
+$elements.summarize.addEventListener("click", summarize);
+$elements.askQuestion.addEventListener("click", answerQuestion);
 
+// Function to summarize data and display analysis
 async function summarize() {
   const selectedServices = filters["Service"].filter((opt) => opt.selected).map((opt) => opt.value);
+
   if (selectedServices.length === 0) {
-    $summary.innerHTML = `<div class="alert alert-warning" role="alert">
+    $elements.summary.innerHTML = `<div class="alert alert-warning" role="alert">
       No services selected for summarization.
     </div>`;
     return;
   }
 
   const incidents = filteredIncidents();
-
   const serviceData = {};
 
+  // Prepare data for each selected service
   for (const service of selectedServices) {
     const serviceIncidents = incidents.filter((d) => d.Service === service);
     if (serviceIncidents.length === 0) continue;
 
-    const getStats = (groupByKey) =>
-      d3
-        .rollups(
-          serviceIncidents,
-          (v) => ({
-            Count: d3.sum(v, (d) => d.Count),
-            Hours: d3.sum(v, (d) => d.Hours * d.Count),
-          }),
-          (d) => d[groupByKey]
-        )
-        .map(([key, stats]) => ({
-          Key: key,
-          Count: stats.Count,
-          AvgHours: stats.Hours / stats.Count,
-        }));
-
-    const shiftStats = getStats("Shift");
-    const timeOfDayStats = getStats("Time of Day");
-    const areaStats = getStats("Area");
-    const teamStats = getStats("Team");
+    // Calculate statistics
+    const shiftStats = computeStats(serviceIncidents, "Shift");
+    const timeOfDayStats = computeStats(serviceIncidents, "Time of Day");
+    const regionStats = computeStats(serviceIncidents, "Region");
+    const teamStats = computeStats(serviceIncidents, "Team");
 
+    // Aggregate frequent issues
     const descriptionStats = d3
       .rollups(
         serviceIncidents,
@@ -407,11 +520,9 @@ async function summarize() {
       )
       .sort((a, b) => b[1] - a[1])
       .slice(0, 5)
-      .map(([description, count]) => ({
-        Description: description,
-        Count: count,
-      }));
+      .map(([description, count]) => ({ Description: description, Count: count }));
 
+    // Identify related services from network data
     const relatedServices = data.relations
       .filter((rel) => rel.Source === service || rel.Target === service)
       .map((rel) => (rel.Source === service ? rel.Target : rel.Source));
@@ -419,107 +530,388 @@ async function summarize() {
     serviceData[service] = {
       shiftStats,
       timeOfDayStats,
-      areaStats,
+      regionStats,
       teamStats,
       descriptionStats,
       relatedServices,
     };
   }
 
-  const system = `As an expert analyst in financial application's incident management, provide a concise overall summary for the selected services, focusing on:
+  // Compute overall statistics
+  const overallServiceStats = computeStats(incidents, "Service");
+  const overallTeamStats = computeStats(incidents, "Team");
+  const overallRegionStats = computeStats(incidents, "Region");
+  const overallShiftStats = computeStats(incidents, "Shift");
+
+  // Include Network Data in the Message
+  const networkSummary = prepareNetworkSummary(selectedServices);
 
-- Overall problematic services, along with teams, areas and shifts (only top 2 or 3).
-- Services, teams, areas and shifts which are way beyond thresold duration. (only top 2 or 3).
-- Narrate story flow linking services, teams, areas and shifts (in 4 points). 
+  // Define the system message for the AI assistant
+  const system = `As an expert analyst in financial application's incident management, provide a structured and concise summary for the selected services, focusing on:
 
-Then, for each service, provide a detailed summary focusing on:
+1. **Overall Summary:**
+   - Identify overall problematic services, along with teams, regions, and shifts (only top 2 or 3).
+   - Highlight services, teams, regions, and shifts which are significantly beyond the threshold duration (only top 2 or 3).
 
-- Problematic times (including specific times of day)
-- Problematic areas
-- Problematic teams
-- Frequent issues or incidents
-- Connections with other services that might have impacted it
-- Recommendations on what can be done
+2. **Analysis:**
+   - Narrate a story flow linking services, teams, regions, and shifts in 4 key points under the subheading 'Analysis'.
+
+3. **Recommendations:**
+   - Highlight connections with other services that might have impacted the problematic services.
+   - Provide specific recommendations based on the current data provided.
+
+Include both incident data and network data in your analysis.
 
 Present the information concisely using bullet points under each section. Ensure that the summary is directly based on the data provided and is actionable.`;
 
-  let message = `Selected Services:\n${selectedServices.join(", ")}\n\n`;
+  // Prepare the message with aggregated data
+  let message = `Selected Services:\n${selectedServices.join(", ")}\n\nOverall Summary:\n`;
+
+  // Append top problematic services, teams, regions, and shifts
+  message += formatTopStats("Problematic services", overallServiceStats, "Service");
+  message += formatTopStats("Problematic teams", overallTeamStats, "Team");
+  message += formatTopStats("Problematic regions", overallRegionStats, "Region");
+  message += formatTopStats("Problematic shifts", overallShiftStats, "Shift");
 
+  // Append network data summary
+  message += `\nNetwork Data Summary:\n${networkSummary}\n`;
+
+  // Append per-service summaries
   for (const service of selectedServices) {
     const data = serviceData[service];
     if (!data) continue;
 
-    message += `Service: ${service}\n`;
-
-    const formatStats = (stats, label) =>
-      stats
-        .sort((a, b) => b.Count - a.Count)
-        .slice(0, 2)
-        .map((stat) => `${stat.Key} (${num0(stat.Count)} incidents, Avg ${num2(stat.AvgHours)} hrs)`)
-        .join("; ");
+    message += `\nService: ${service}\n`;
+    message += formatServiceStats(data);
+  }
 
-    const shiftInfo = formatStats(data.shiftStats, "Shift");
-    const timeInfo = formatStats(data.timeOfDayStats, "Time of Day");
+  // Display a loading spinner
+  $elements.summary.innerHTML = `<div class="spinner-border" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>`;
 
-    if (shiftInfo || timeInfo) {
-      message += `- Problematic times: `;
-      if (shiftInfo) message += `Shifts - ${shiftInfo}; `;
-      if (timeInfo) message += `Time of Day - ${timeInfo}`;
-      message += `\n`;
+  // Fetch and display the summary from the AI assistant
+  try {
+    let fullContent = "";
+    let lastContent = "";
+    for await (const { content } of asyncLLM(
+      "https://llmfoundry.straive.com/openai/v1/chat/completions",
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({
+          model: "gpt-4o-mini",
+          stream: true,
+          messages: [
+            { role: "system", content: system },
+            { role: "user", content: message },
+          ],
+        }),
+      }
+    )) {
+      if (content && content !== lastContent) {
+        lastContent = content;
+        fullContent = content;
+        $elements.summary.innerHTML = marked.parse(fullContent);
+      }
     }
+  } catch (error) {
+    console.error("Error in summarize function:", error);
+    $elements.summary.innerHTML = `<div class="alert alert-danger" role="alert">
+      An error occurred while generating the summary: ${error.message}
+    </div>`;
+  }
+}
+
+// Function to answer user's question based on the data
+async function answerQuestion() {
+  const userQuestion = $elements.userQuestion.value.trim();
+  if (!userQuestion) {
+    $elements.summary.innerHTML = `<div class="alert alert-warning" role="alert">
+      Please enter a question to ask.
+    </div>`;
+    return;
+  }
 
-    const areaInfo = formatStats(data.areaStats, "Area");
-    if (areaInfo) message += `- Problematic areas: ${areaInfo}\n`;
+  const incidents = filteredIncidents();
 
-    const teamInfo = formatStats(data.teamStats, "Team");
-    if (teamInfo) message += `- Problematic teams: ${teamInfo}\n`;
+  // Get selected services
+  const selectedServices = filters["Service"].filter((opt) => opt.selected).map((opt) => opt.value);
 
-    if (data.descriptionStats.length > 0) {
-      message += `- Frequent issues: `;
-      message += data.descriptionStats
-        .map((desc) => `${desc.Description} (${num0(desc.Count)} occurrences)`)
-        .join("; ");
-      message += `\n`;
-    }
+  if (selectedServices.length === 0) {
+    $elements.summary.innerHTML = `<div class="alert alert-warning" role="alert">
+      No services selected.
+    </div>`;
+    return;
+  }
 
-    if (data.relatedServices.length > 0) {
-      message += `- Impacting connections: ${data.relatedServices.join(", ")}\n`;
-    } else {
-      message += `- Impacting connections: None\n`;
-    }
+  // Prepare serviceData as in summarize()
+  const serviceData = {};
+
+  // Prepare data for each selected service
+  for (const service of selectedServices) {
+    const serviceIncidents = incidents.filter((d) => d.Service === service);
+    if (serviceIncidents.length === 0) continue;
+
+    // Calculate statistics
+    const shiftStats = computeStats(serviceIncidents, "Shift");
+    const timeOfDayStats = computeStats(serviceIncidents, "Time of Day");
+    const regionStats = computeStats(serviceIncidents, "Region");
+    const teamStats = computeStats(serviceIncidents, "Team");
+
+    // Aggregate frequent issues
+    const descriptionStats = d3
+      .rollups(
+        serviceIncidents,
+        (v) => d3.sum(v, (d) => d.Count),
+        (d) => d.DescriptionCleaned
+      )
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 5)
+      .map(([description, count]) => ({ Description: description, Count: count }));
 
-    message += `\n`;
+    // Identify related services from network data
+    const relatedServices = data.relations
+      .filter((rel) => rel.Source === service || rel.Target === service)
+      .map((rel) => (rel.Source === service ? rel.Target : rel.Source));
+
+    serviceData[service] = {
+      shiftStats,
+      timeOfDayStats,
+      regionStats,
+      teamStats,
+      descriptionStats,
+      relatedServices,
+    };
+  }
+
+  // Include Network Data in the Message
+  const networkSummary = prepareNetworkSummary(selectedServices);
+
+  // Define the system message for the AI assistant
+  const system = `As an expert analyst in financial application's incident management,
+answer the user's question based on the data provided.
+Provide examples from both the incident data and network data to support your answer.
+Present the information concisely and ensure that the answer is directly based on the data provided and is actionable.`;
+
+  // Prepare the message with user's question and data summary
+  let message = `User Question:\n${userQuestion}\n\nData Summary:\n`;
+
+  // Include overall statistics
+  const overallStats = computeStats(incidents, "Service");
+  overallStats.forEach((stat) => {
+    message += `- Service ${stat.Service}: ${num0(stat.Count)} incidents, Avg Duration: ${num2(
+      stat.AvgHours
+    )} hours\n`;
+  });
+
+  // Append per-service summaries
+  for (const service of selectedServices) {
+    const data = serviceData[service];
+    if (!data) continue;
+
+    message += `\nService: ${service}\n`;
+    message += formatServiceStats(data);
   }
 
-  $summary.innerHTML = /* html */ `<div class="spinner-border" role="status">
+  // Include network data summary
+  message += `\nNetwork Data Summary:\n${networkSummary}\n`;
+
+  // Display a loading spinner
+  $elements.summary.innerHTML = `<div class="spinner-border" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>`;
 
-  let fullContent = "";
-
+  // Fetch and display the answer from the AI assistant
   try {
-    for await (const { content } of asyncLLM("https://llmfoundry.straive.com/openai/v1/chat/completions", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      credentials: "include",
-      body: JSON.stringify({
-        model: "gpt-4o-mini",
-        stream: true,
-        messages: [
-          { role: "system", content: system },
-          { role: "user", content: message },
-        ],
-      }),
-    })) {
-      if (content) {
+    let fullContent = "";
+    let lastContent = "";
+    for await (const { content } of asyncLLM(
+      "https://llmfoundry.straive.com/openai/v1/chat/completions",
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({
+          model: "gpt-4o-mini",
+          stream: true,
+          messages: [
+            { role: "system", content: system },
+            { role: "user", content: message },
+          ],
+        }),
+      }
+    )) {
+      if (content && content !== lastContent) {
+        lastContent = content;
         fullContent = content;
-        $summary.innerHTML = marked.parse(fullContent);
+        $elements.summary.innerHTML = marked.parse(fullContent);
       }
     }
   } catch (error) {
-    console.error("Error in summarize function:", error);
-    $summary.innerHTML = /* html */`<div class="alert alert-danger" role="alert">
-      An error occurred while generating the summary: ${error.message}
+    console.error("Error in answerQuestion function:", error);
+    $elements.summary.innerHTML = `<div class="alert alert-danger" role="alert">
+      An error occurred while answering the question: ${error.message}
     </div>`;
   }
 }
+
+// Helper function to compute statistics
+function computeStats(dataArray, groupByKey) {
+  return d3
+    .rollups(
+      dataArray,
+      (v) => ({
+        Count: d3.sum(v, (d) => d.Count),
+        Hours: d3.sum(v, (d) => d.Hours * d.Count),
+      }),
+      (d) => d[groupByKey]
+    )
+    .map(([key, stats]) => ({
+      [groupByKey]: key,
+      Count: stats.Count,
+      AvgHours: stats.Hours / stats.Count,
+    }));
+}
+
+// Helper function to format top statistics for the message
+function formatTopStats(title, statsArray, keyName) {
+  const topStats = statsArray.sort((a, b) => b.Count - a.Count).slice(0, 5);
+  if (topStats.length === 0) return "";
+  let result = `- ${title}:\n`;
+  result += topStats
+    .map(
+      (item) =>
+        `  ${item[keyName]}: ${num0(item.Count)} incidents (Avg ${num2(item.AvgHours)} hrs)`
+    )
+    .join("\n");
+  return result + "\n\n";
+}
+
+// Helper function to format per-service statistics
+function formatServiceStats(data) {
+  let result = "";
+
+  // Problematic times
+  const topShifts = data.shiftStats.sort((a, b) => b.Count - a.Count).slice(0, 2);
+  const topTimesOfDay = data.timeOfDayStats.sort((a, b) => b.Count - a.Count).slice(0, 2);
+  if (topShifts.length > 0 || topTimesOfDay.length > 0) {
+    result += `- Problematic times:\n`;
+    if (topShifts.length > 0) {
+      result += `  Shifts:\n`;
+      result += topShifts
+        .map(
+          (shift) =>
+            `    ${shift.Shift}: ${num0(shift.Count)} incidents (Avg ${num2(
+              shift.AvgHours
+            )} hrs)`
+        )
+        .join("\n");
+      result += "\n";
+    }
+    if (topTimesOfDay.length > 0) {
+      result += `  Time of Day:\n`;
+      result += topTimesOfDay
+        .map(
+          (time) =>
+            `    ${time["Time of Day"]}: ${num0(time.Count)} incidents (Avg ${num2(
+              time.AvgHours
+            )} hrs)`
+        )
+        .join("\n");
+      result += "\n";
+    }
+  }
+
+  // Problematic regions
+  const topRegions = data.regionStats.sort((a, b) => b.Count - a.Count).slice(0, 2);
+  if (topRegions.length > 0) {
+    result += `- Problematic regions:\n`;
+    result += topRegions
+      .map(
+        (region) =>
+          `  ${region.Region}: ${num0(region.Count)} incidents (Avg ${num2(
+            region.AvgHours
+          )} hrs)`
+      )
+      .join("\n");
+    result += "\n";
+  }
+
+  // Problematic teams
+  const topTeams = data.teamStats.sort((a, b) => b.Count - a.Count).slice(0, 2);
+  if (topTeams.length > 0) {
+    result += `- Problematic teams:\n`;
+    result += topTeams
+      .map(
+        (team) =>
+          `  ${team.Team}: ${num0(team.Count)} incidents (Avg ${num2(team.AvgHours)} hrs)`
+      )
+      .join("\n");
+    result += "\n";
+  }
+
+  // Frequent issues
+  if (data.descriptionStats.length > 0) {
+    result += `- Frequent issues:\n`;
+    result += data.descriptionStats
+      .map((desc) => `  ${desc.Description}: ${num0(desc.Count)} occurrences`)
+      .join("\n");
+    result += "\n";
+  }
+
+  // Impacting connections
+  result += `- Impacting connections:\n  ${data.relatedServices.join(", ") || "None"}\n`;
+
+  return result;
+}
+
+// Helper function to prepare network data summary
+function prepareNetworkSummary(selectedServices) {
+  // Filter network relations based on selected services
+  const relevantRelations = data.relations.filter(
+    (rel) => selectedServices.includes(rel.Source) || selectedServices.includes(rel.Target)
+  );
+
+  // Count the number of connections for each service
+  const connectionCounts = {};
+  relevantRelations.forEach((rel) => {
+    const source = rel.Source;
+    const target = rel.Target;
+
+    if (!connectionCounts[source]) connectionCounts[source] = new Set();
+    if (!connectionCounts[target]) connectionCounts[target] = new Set();
+
+    connectionCounts[source].add(target);
+    connectionCounts[target].add(source);
+  });
+
+  // Prepare summary lines
+  let summary = "";
+  for (const service of selectedServices) {
+    const connections = connectionCounts[service]
+      ? Array.from(connectionCounts[service])
+      : [];
+    summary += `- ${service} connections: ${connections.join(", ") || "None"}\n`;
+  }
+
+  return summary;
+}
+
+// Function to initialize Bootstrap tooltips
+function initializeTooltips() {
+  // Dispose existing tooltips to prevent duplicates
+  const tooltipInstances = bootstrap.Tooltip.getInstance(document.body);
+  if (tooltipInstances) {
+    tooltipInstances.dispose();
+  }
+
+  // Initialize new tooltips
+  const tooltipTriggerList = [].slice.call(
+    document.querySelectorAll('[data-bs-toggle="tooltip"]')
+  );
+  tooltipTriggerList.map(
+    (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
+  );
+}
diff --git a/style.css b/style.css
index 3d0d5af..9e4dcfd 100644
--- a/style.css
+++ b/style.css
@@ -1,7 +1,15 @@
+/* Node styles */
+.node {
+  stroke: white;
+  stroke-width: 0.5px;
+}
+
+/* Narrative section */
 .narrative {
   max-width: 40rem;
 }
 
+/* Sankey diagram styles */
 #sankey {
   --disabled-node: rgba(var(--bs-body-color-rgb), 0.4);
   --disabled-link: rgba(var(--bs-body-color-rgb), 0.2);
@@ -17,6 +25,7 @@
   opacity: 1;
 }
 
+/* Summary section adjustments */
 #summary li p {
   margin-bottom: 0;
 }
@@ -48,7 +57,6 @@
   gap: 8px;
   cursor: pointer;
   padding: 0.5rem 1rem;
-  user-select: none;
 }
 
 .dropdown-item label {
@@ -57,58 +65,102 @@
   width: 100%;
 }
 
+/* Hover effect for dropdown items */
 .dropdown-item:hover {
   background-color: var(--bs-tertiary-bg);
 }
 
-/* Prevent dropdown from closing when clicking inside */
-.dropdown-menu.show {
-  display: block;
-}
-
-/* Prevent text selection */
+/* Prevent text selection in dropdown items */
 .dropdown-item,
 .dropdown-item label {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
 }
 
-/* -------------------------------------------------- */
-/* services.html */
-.visualization {
-  border: 1px solid var(--bs-border-color);
+/* "Ask a Question" text area styles */
+#user-question {
+  border: 2px solid #007bff;
   border-radius: 8px;
-  padding: 20px;
-  margin: 20px auto;
+  padding: 10px;
+  font-size: 1.1rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.3s, border-color 0.3s;
+}
+
+#user-question:focus {
+  border-color: #0056b3;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  outline: none;
+}
+
+/* "Ask Question" button styles */
+#ask-question {
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 10px 20px;
+  font-size: 1.2rem;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+#ask-question:hover {
+  background-color: #0056b3;
+  transform: translateY(-2px);
+}
+
+#ask-question:active {
+  background-color: #003d80;
+  transform: translateY(0);
+}
+
+/* Filters container */
+.flex-row {
   display: flex;
-  justify-content: center;
+  flex-direction: row;
+  gap: 10px;
+  align-items: flex-start;
+}
+
+/* "Show links" toggle container */
+.toggle-check-box {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 15px;
+}
+
+/* Slider container */
+.slide-bar {
+  flex-grow: 1;
+}
+
+/* Reset filters button */
+.reset-filters {
+  display: inline-flex;
   align-items: center;
-  width: 90%;
-  max-width: 1400px;
-  height: calc(100vh - 400px);
-  min-height: 500px;
-  overflow: hidden;
+  justify-content: center;
 }
 
-#chart {
-  width: 100%;
-  height: 100%;
-  display: block;
-  margin: auto;
+#reset-filters {
+  padding: 6px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
 }
 
-#upload {
-  max-width: 1200px;
-  margin: 0 auto;
+/* Threshold value spacing */
+#threshold-value {
+  margin: 0.5rem 0;
 }
 
-.node-label {
-  font-size: 12px;
-  pointer-events: none;
+/* Slider width */
+#threshold {
+  width: 100%;
 }
-.value-label {
-  font-size: 10px;
-  pointer-events: none;
+
+/* Ensure labels are aligned horizontally */
+.toggle-check-box label,
+.slide-bar label {
+  font-weight: 500;
 }
