iijlab
diff --git a/‎css/styles.css‎
Lines changed: 38 additions & 0 deletions b/‎css/styles.css‎
Lines changed: 38 additions & 0 deletions
diff --git a/‎index-mock.html‎
Lines changed: 4 additions & 2 deletions b/‎index-mock.html‎
Lines changed: 4 additions & 2 deletions
diff --git a/‎js/DetailsPanelManager.js‎
Lines changed: 11 additions & 6 deletions b/‎js/DetailsPanelManager.js‎
Lines changed: 11 additions & 6 deletions
@@ -338,4 +338,42 @@ body.dark-mode circle[class*="selection"] {
     margin: 20px;
     break-inside: avoid;
   }
+}
+
+.history-plot {
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 15px;
+  margin: 10px 0;
+  overflow: hidden;
+}
+
+.history-plot svg {
+  width: 100%;
+  height: auto;
+  min-height: 200px;
+}
+
+/* Dark mode support */
+body.dark-mode .history-plot {
+  background: #2d2d2d;
+  border-color: #404040;
+}
+
+body.dark-mode .history-plot svg {
+  filter: invert(1) hue-rotate(180deg);
+}
+
+/* Make sure SVG text remains readable in dark mode */
+body.dark-mode .history-plot svg text {
+  fill: #fff;
+}
+
+/* Print optimization */
+@media print {
+  .history-plot {
+      break-inside: avoid;
+      border: 1px solid #999;
+  }
 }
@@ -1,4 +1,3 @@
-<!-- index-mock.html (mock data) -->
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -28,10 +27,13 @@
       window.USE_MOCK_DATA = true;
     </script>
 
+    <!-- Load the combined mock data generator first -->
+    <script src="js/MockDataGenerator.js"></script>
+
+    <!-- Then load the rest of the application -->
     <script src="js/DetailsPanelManager.js"></script>
     <script src="js/NetworkStats.js"></script>
     <script src="js/NetworkVisualizer.js"></script>
-    <script src="js/MockNetworkDataGenerator.js"></script>
     <script src="js/init.js"></script>
   </body>
 </html>
@@ -129,6 +129,12 @@ class DetailsPanelManager {
                     </tr>
                 </table>
             </div>
+            <div class="detail-section">
+                <h3>${metricTitle} History</h3>
+                <div class="history-plot">
+                    ${node.metrics.historyPlot || 'No historical data available'}
+                </div>
+            </div>
             <div class="detail-section">
                 <h3>Cluster ${metricTitle} Summary</h3>
                 <table>
@@ -154,7 +160,6 @@ class DetailsPanelManager {
         `;
     }
 
-
     updateLeafNodeDetails(node) {
         const metricName = this.config.visualization.metric;
         const metricTitle = metricName.charAt(0).toUpperCase() + metricName.slice(1);
@@ -178,9 +183,9 @@ class DetailsPanelManager {
                 </table>
             </div>
             <div class="detail-section">
-                <h3>Historical ${metricTitle}</h3>
-                <div class="chart-container">
-                    [Historical ${metricTitle.toLowerCase()} chart placeholder]
+                <h3>${metricTitle} History</h3>
+                <div class="history-plot">
+                    ${node.metrics.historyPlot || 'No historical data available'}
                 </div>
             </div>
         `;
@@ -214,8 +219,8 @@ class DetailsPanelManager {
             </div>
             <div class="detail-section">
                 <h3>${metricTitle} History</h3>
-                <div class="chart-container">
-                    [${metricTitle} history chart placeholder]
+                <div class="history-plot">
+                    ${link.metrics.historyPlot || 'No historical data available'}
                 </div>
             </div>
         `;