Add chart viewer and gif downloader

Grufoony · Grufoony · commit 45a85b6d5e1a · 2025-11-28T22:27:54.000+01:00
diff --git a/webapp/index.html b/webapp/index.html
@@ -21,61 +21,75 @@
   <!-- gif.js for GIF generation -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js"></script>
 
+  <!-- Chart.js -->
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
   <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
+  <div id="app-container">
+    <!-- Map container -->
+    <div id="map"></div>
 
-  <!-- Map container -->
-  <div id="map"></div>
-
-  <!-- Data directory selector -->
-  <div class="data-selector">
-    <label for="dataDir">Data Directory Name:</label>
-    <input type="text" id="dataDir" placeholder="Enter directory name (e.g., 'output')" />
-    <button id="loadDataBtn">Load Data</button>
-    <div class="data-info">
-      <small>Place your edges and densities CSV files under the main directory: {directory_name}</small>
+    <!-- Data directory selector -->
+    <div class="data-selector">
+      <label for="dataDir">Data Directory Name:</label>
+      <input type="text" id="dataDir" placeholder="Enter directory name (e.g., 'output')" />
+      <button id="loadDataBtn">Load Data</button>
+      <div class="data-info">
+        <small>Place your edges and densities CSV files under the main directory: {directory_name}</small>
+      </div>
     </div>
-  </div>
 
-  <!-- Search container -->
-  <div class="search-container">
-    <div>
-      <label for="edgeSearch">Edge ID:</label>
-      <input type="text" id="edgeSearch" />
-      <button id="edgeSearchBtn">Search</button>
+    <!-- Search container -->
+    <div class="search-container">
+      <div>
+        <label for="edgeSearch">Edge ID:</label>
+        <input type="text" id="edgeSearch" />
+        <button id="edgeSearchBtn">Search</button>
+      </div>
+      <div>
+        <label for="nodeSearch">Node ID:</label>
+        <input type="text" id="nodeSearch" />
+        <button id="nodeSearchBtn">Search</button>
+      </div>
+      <button id="inverseBtn" disabled>Inverse Edge</button>
+      <button id="clearBtn">Clear Selections</button>
+      <div id="searchResults"></div>
     </div>
-    <div>
-      <label for="nodeSearch">Node ID:</label>
-      <input type="text" id="nodeSearch" />
-      <button id="nodeSearchBtn">Search</button>
+
+    <!-- Slider for time step -->
+    <div class="slider-container">
+      <div class="slider-controls">
+        <button id="playBtn" title="Play/Pause">▶</button>
+        <div class="fps-control">
+          <label for="fpsInput">FPS:</label>
+          <input type="number" id="fpsInput" value="10" min="1" max="60" />
+        </div>
+      </div>
+      <input type="range" id="timeSlider" min="0" step="300" value="0" />
+      <span id="timeLabel">N/A</span>
     </div>
-    <button id="inverseBtn" disabled>Inverse Edge</button>
-    <button id="clearBtn">Clear Selections</button>
-    <div id="searchResults"></div>
-  </div>
 
-  <!-- Slider for time step -->
-  <div class="slider-container">
-    <div class="slider-controls">
-      <button id="playBtn" title="Play/Pause">▶</button>
-      <div class="fps-control">
-        <label for="fpsInput">FPS:</label>
-        <input type="number" id="fpsInput" value="10" min="1" max="60" />
+    <!-- Legend container -->
+    <div class="legend-container">
+      <div class="legend-title">Density</div>
+      <div class="legend-bar"></div>
+      <div class="legend-labels">
+        <span>0%</span>
+        <span>50%</span>
+        <span>100%</span>
       </div>
     </div>
-    <input type="range" id="timeSlider" min="0" step="300" value="0" />
-    <span id="timeLabel">N/A</span>
-  </div>
 
-  <!-- Legend container -->
-  <div class="legend-container">
-    <div class="legend-title">Density</div>
-    <div class="legend-bar"></div>
-    <div class="legend-labels">
-      <span>0%</span>
-      <span>50%</span>
-      <span>100%</span>
+    <!-- Chart container -->
+    <div class="chart-container">
+      <div style="margin-bottom: 5px; height: 30px;">
+        <select id="chartColumnSelector" style="width: 100%; padding: 5px;"></select>
+      </div>
+      <div style="position: relative; height: calc(100% - 40px); width: 100%;">
+        <canvas id="densityChart"></canvas>
+      </div>
     </div>
   </div>
 
diff --git a/webapp/script.js b/webapp/script.js
@@ -110,6 +110,37 @@ map.addControl(new L.Control.BackgroundMenu());
 // Add search menu control to map
 map.addControl(new L.Control.SearchMenu());
 
+// Add chart toggle control
+L.Control.ChartToggle = L.Control.extend({
+  options: {
+    position: 'topright'
+  },
+
+  onAdd: function(map) {
+    const container = L.DomUtil.create('div', 'leaflet-control-chart-toggle');
+    const button = L.DomUtil.create('button', 'leaflet-control-search-btn', container);
+    
+    button.innerHTML = '📈';
+    button.title = 'Toggle Chart';
+    button.onclick = () => {
+      const chartContainer = document.querySelector('.chart-container');
+      if (chartContainer.style.display === 'none' || chartContainer.style.display === '') {
+        chartContainer.style.display = 'block';
+        if (typeof chart !== 'undefined' && chart) {
+          chart.resize();
+        }
+      } else {
+        chartContainer.style.display = 'none';
+      }
+    };
+
+    return container;
+  }
+});
+
+// Add chart toggle control to map
+map.addControl(new L.Control.ChartToggle());
+
 // Add screenshot control
 L.Control.Screenshot = L.Control.extend({
   options: {
@@ -165,12 +196,17 @@ L.Control.Screenshot = L.Control.extend({
     document.body.appendChild(loadingDiv);
 
     // Capture the map
-    html2canvas(document.getElementById('map'), {
+    html2canvas(document.getElementById('app-container'), {
       useCORS: true,
       allowTaint: false,
       scale: 2, // Higher resolution
       width: window.innerWidth,
-      height: window.innerHeight
+      height: window.innerHeight,
+      ignoreElements: (element) => {
+        // Ignore the loading indicator if it's inside app-container (it shouldn't be, but just in case)
+        // Also ignore data selector if it's hidden (html2canvas usually handles hidden, but let's be safe)
+        return element.classList.contains('data-selector') && element.style.display === 'none';
+      }
     }).then(canvas => {
       // Remove loading indicator
       document.body.removeChild(loadingDiv);
@@ -334,6 +370,7 @@ L.Control.GIFRecorder = L.Control.extend({
     const gif = new GIF({
       workers: 2,
       quality: 10,
+      dither: "FloydSteinberg",
       width: map.getSize().x,
       height: map.getSize().y,
       workerScript: workerUrl
@@ -397,11 +434,16 @@ L.Control.GIFRecorder = L.Control.extend({
       await new Promise(resolve => setTimeout(resolve, 200));
 
       try {
-        const canvas = await html2canvas(document.getElementById('map'), {
+        const canvas = await html2canvas(document.getElementById('app-container'), {
           useCORS: true,
           allowTaint: false,
           logging: false,
-          scale: 1 // Use 1 for GIF to keep size reasonable
+          scale: 1, // Use 1 for GIF to keep size reasonable
+          ignoreElements: (element) => {
+             // Ignore loading div if it somehow gets in there (it's in body, so fine)
+             // Ignore hidden elements
+             return element.style.display === 'none';
+          }
         });
         
         const currentFps = parseFloat(document.getElementById('fpsInput').value) || 10;
@@ -686,10 +728,11 @@ L.svg().addTo(map);
 const overlay = d3.select(map.getPanes().overlayPane).select("svg");
 const g = overlay.append("g").attr("class", "leaflet-zoom-hide");
 
-let edges, densities;
+let edges, densities, globalData;
 let timeStamp = new Date();
 let highlightedEdge = null;
 let highlightedNode = null;
+let chart;
 
 function formatTime(date) {
   const year = date.getFullYear();
@@ -770,24 +813,25 @@ loadDataBtn.addEventListener('click', async function() {
     // Fetch CSV files from the data subdirectory
     const edgesUrl = `../${dirName}/edges.csv`;
     const densitiesUrl = `../${dirName}/densities.csv`;
+    const dataUrl = `../${dirName}/data.csv`;
 
     // Load CSV data
     Promise.all([
       d3.dsv(";", edgesUrl, parseEdges),
-      d3.dsv(";", densitiesUrl, parseDensity)
-    ]).then(([edgesData, densityData]) => {
+      d3.dsv(";", densitiesUrl, parseDensity),
+      d3.dsv(";", dataUrl, parseData).catch(e => { console.warn('data.csv not found or invalid', e); return []; })
+    ]).then(([edgesData, densityData, additionalData]) => {
       edges = edgesData;
       densities = densityData;
+      globalData = additionalData;
 
       // console.log("Edges:", edges);
       // console.log("Densities:", densities);
 
       if (!edges.length || !densities.length) {
         console.error("Missing CSV data.");
         return;
-      }
-
-      timeStamp = densities[0].datetime;
+      }      timeStamp = densities[0].datetime;
 
     // Calculate median center from edge geometries
     let allLats = [];
@@ -812,13 +856,124 @@ loadDataBtn.addEventListener('click', async function() {
     const canvasEdges = new L.CanvasEdges(edges);
     canvasEdges.addTo(map);
 
+    let currentChartColumn = 'mean_density_vpk';
+
+    // Initialize Chart
+    if (globalData && globalData.length > 0) {
+      const columns = Object.keys(globalData[0]).filter(k => k !== 'datetime');
+      const selector = document.getElementById('chartColumnSelector');
+      selector.innerHTML = '';
+      columns.forEach(col => {
+          const option = document.createElement('option');
+          option.value = col;
+          option.text = col;
+          selector.appendChild(option);
+      });
+      
+      if (columns.includes('mean_density_vpk')) {
+          selector.value = 'mean_density_vpk';
+      } else if (columns.length > 0) {
+          selector.value = columns[0];
+      }
+      currentChartColumn = selector.value;
+
+      selector.onchange = () => {
+          currentChartColumn = selector.value;
+          initChart();
+          updateChart();
+      };
+
+      initChart();
+      // document.querySelector('.chart-container').style.display = 'block';
+    }
+
+    function initChart() {
+      const ctx = document.getElementById('densityChart').getContext('2d');
+      if (chart) chart.destroy();
+      
+      chart = new Chart(ctx, {
+        type: 'line',
+        data: {
+          labels: globalData.map(d => formatTime(d.datetime)),
+          datasets: [{
+            label: currentChartColumn,
+            data: globalData.map(d => d[currentChartColumn]),
+            borderColor: 'blue',
+            borderWidth: 1,
+            pointRadius: 0,
+            fill: false,
+            tension: 0.1
+          }, {
+            label: 'Current Time',
+            data: [], // Will be populated dynamically
+            borderColor: 'red',
+            backgroundColor: 'red',
+            pointRadius: 5,
+            pointHoverRadius: 7,
+            showLine: false
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          animation: {
+              duration: 0
+          },
+          scales: {
+            x: {
+              display: true,
+              title: {
+                display: true,
+                text: 'time'
+              },
+              ticks: {
+                  display: false
+              }
+            },
+            y: {
+              beginAtZero: true,
+              title: {
+                display: true,
+                text: currentChartColumn
+              }
+            }
+          },
+          plugins: {
+              legend: {
+                  display: true,
+                  labels: {
+                      boxWidth: 10
+                  }
+              }
+          }
+        }
+      });
+    }
+
+    function updateChart() {
+        if (!chart || !globalData) return;
+        
+        // Find current data point index based on timeStamp
+        const currentIndex = densities.findIndex(d => d.datetime.getTime() === timeStamp.getTime());
+        
+        if (currentIndex !== -1) {
+            const pointData = new Array(globalData.length).fill(null);
+            if (globalData[currentIndex]) {
+                pointData[currentIndex] = globalData[currentIndex][currentChartColumn];
+            }
+            chart.data.datasets[1].data = pointData;
+            chart.update('none');
+        }
+    }
+
     // Function to update edge positions, and color edges based on density
     function update() {
       // Update edge stroke width based on zoom level (handled in Canvas layer)
       // No need to update paths, Canvas layer handles it
 
       updateDensityVisualization();
       updateNodeHighlight();
+      updateChart();
     }
 
     map.on("zoomend", update);
@@ -1091,4 +1246,15 @@ function parseDensity(d) {
           return val === "" ? 0 : +val;
         });
       return { datetime, densities };
+}
+
+// Parsing function for data CSV
+function parseData(d) {
+  const result = { datetime: new Date(d.datetime) };
+  for (const key in d) {
+    if (key !== 'datetime') {
+      result[key] = +d[key];
+    }
+  }
+  return result;
 }
diff --git a/webapp/styles.css b/webapp/styles.css
