Refactor duplicated Plotly code

net_maestro/core/static/net_maestro/customStyles.css

@@ -5,7 +5,7 @@
 
 /* Prevent flash of unstyled content with Alpine.js */
 [x-cloak] {
-  /* biome-ignore lint/complexity/noImportantStyles: ensure this is honored */
+  /* biome-ignore lint/complexity/noImportantStyles: must override any inline/component styles until Alpine initializes */
   display: none !important;
 }
 

net_maestro/core/static/net_maestro/plots/heatmap.js

@@ -4,6 +4,13 @@
  */
 import _ from 'lodash';
 import Plotly from 'plotly';
+import {
+  DARK_LAYOUT,
+  purgePlot,
+  setupAxisState,
+  setupLoadWatcher,
+  setupPlot,
+} from './plotUtils.js';
 
 export const heatmapPlot = () => ({
   heatmapPlotEl: null,
@@ -25,36 +32,14 @@ export const heatmapPlot = () => ({
    * Initialize the component and set up watchers.
    */
   init() {
-    // Restore UI state
-    const savedState = this.$store.uiStateStore.getUIState('heatmapPlot');
-    this.selectedMetric = savedState.selectedMetric ?? 'num_messages';
-
-    this.$watch('selectedMetric', (newValue) => {
-      if (newValue) {
-        this.$store.uiStateStore.saveUIState('heatmapPlot', { selectedMetric: newValue });
-      }
-    });
-
-    // Load data if a run is already selected
-    if (this.$store.dataStore.selectedRunId) {
-      this.load();
-    }
-
-    // Watch for new data loads
-    this.$watch('$store.dataStore.loadTick', () => {
-      this.load();
-    });
+    setupAxisState(this, 'heatmapPlot', [{ prop: 'selectedMetric', default: 'num_messages' }]);
+    setupLoadWatcher(this, () => this.load());
   },
 
   /**
    * Initialize the Plotly heatmap plot.
    */
   initPlot() {
-    if (this.isPlotInitialized) {
-      return;
-    }
-    this.heatmapPlotEl = document.getElementById('heatmapPlot');
-
     const data = [
       {
         type: 'heatmap',
@@ -65,30 +50,21 @@ export const heatmapPlot = () => ({
       },
     ];
     const layout = {
-      // biome-ignore-start lint/style/useNamingConvention: library interface names
-      paper_bgcolor: '#1d232a',
-      plot_bgcolor: '#1d232a',
-      font: {
-        color: 'white',
-      },
-      margin: {
-        t: 50,
-        b: 50,
-        l: 50,
-        r: 50,
-        pad: 4,
-      },
+      ...DARK_LAYOUT,
       xaxis: {
         title: 'Receiving LP ID',
       },
       yaxis: {
         title: 'Sending LP ID',
       },
-      // biome-ignore-end lint/style/useNamingConvention: library interface names
     };
-    const config = { responsive: true };
-    Plotly.newPlot(this.heatmapPlotEl, data, layout, config);
-    this.isPlotInitialized = true;
+    setupPlot({
+      component: this,
+      elementId: 'heatmapPlot',
+      elementProp: 'heatmapPlotEl',
+      data,
+      layout,
+    });
   },
 
   async load() {
@@ -109,10 +85,7 @@ export const heatmapPlot = () => ({
   },
 
   purge() {
-    if (this.heatmapPlotEl) {
-      Plotly.purge(this.heatmapPlotEl);
-      this.isPlotInitialized = false;
-    }
+    purgePlot(this, 'heatmapPlotEl');
   },
 
   createHeatmapMatrix() {
@@ -169,19 +142,7 @@ export const heatmapPlot = () => ({
         },
       ],
       {
-        // biome-ignore-start lint/style/useNamingConvention: library interface names
-        paper_bgcolor: '#1d232a',
-        plot_bgcolor: '#1d232a',
-        font: {
-          color: 'white',
-        },
-        margin: {
-          t: 50,
-          b: 50,
-          l: 50,
-          r: 50,
-          pad: 4,
-        },
+        ...DARK_LAYOUT,
         xaxis: {
           title: 'Receiving LP ID',
         },
@@ -191,7 +152,6 @@ export const heatmapPlot = () => ({
         coloraxis: {
           colorbar: { title: title },
         },
-        // biome-ignore-end lint/style/useNamingConvention: library interface names
       },
     );
   },

net_maestro/core/static/net_maestro/plots/networkTimePlot.js

@@ -1,4 +1,14 @@
 import Plotly from 'plotly';
+import {
+  axisConfig,
+  createValueList,
+  DARK_LAYOUT,
+  getLabel,
+  purgePlot,
+  setupAxisState,
+  setupLoadWatcher,
+  setupPlot,
+} from './plotUtils.js';
 
 export const networkTimePlot = () => ({
   records: [],
@@ -17,98 +27,38 @@ export const networkTimePlot = () => ({
     ];
   },
   get yAxisValues() {
-    const excludedColumns = ['lp_id', 'component_id', 'real_time', 'virtual_time'];
-    const filteredColumns = this.columns.filter(
-      (column) => column && !excludedColumns.includes(column),
-    );
-    return filteredColumns.map((value) => ({
-      key: value,
-      label: value.replaceAll('_', ' '),
-    }));
+    return createValueList(this.columns, ['lp_id', 'component_id', 'real_time', 'virtual_time']);
   },
 
   /**
    * Initialize the component and set up watchers.
    * Called automatically by Alpine.js when component mounts.
    */
   init() {
-    // Restore UI state
-    const savedState = this.$store.uiStateStore.getUIState('networkTimePlot');
-    this.selectedXAxis = savedState.selectedXAxis ?? 'virtual_time';
-    this.selectedYAxis = savedState.selectedYAxis ?? 'send_count';
-
-    this.$watch('selectedXAxis', (newValue) => {
-      if (newValue) {
-        this.$store.uiStateStore.saveUIState('networkTimePlot', { selectedXAxis: newValue });
-      }
-    });
-
-    this.$watch('selectedYAxis', (newValue) => {
-      if (newValue) {
-        this.$store.uiStateStore.saveUIState('networkTimePlot', { selectedYAxis: newValue });
-      }
-    });
-
-    // Load data if a run is already selected
-    if (this.$store.dataStore.selectedRunId) {
-      this.load();
-    }
-
-    // Watch for new data loads
-    this.$watch('$store.dataStore.loadTick', () => {
-      this.load();
-    });
+    setupAxisState(this, 'networkTimePlot', [
+      { prop: 'selectedXAxis', default: 'virtual_time' },
+      { prop: 'selectedYAxis', default: 'send_count' },
+    ]);
+    setupLoadWatcher(this, () => this.load());
   },
 
   /**
    * Initialize the Plotly networkTime plot.
    */
   initPlot() {
-    if (this.isPlotInitialized) {
-      return;
-    }
-    this.networkTimePlotEl = document.getElementById('networkTimePlot');
-    if (!this.networkTimePlotEl) {
-      return;
-    }
-
-    const data = [
-      {
-        x: [],
-        y: [],
-        showlegend: true,
-      },
-    ];
     const layout = {
-      // biome-ignore-start lint/style/useNamingConvention: library interface names
-      xaxis: {
-        title: {
-          text: 'Virtual Time',
-        },
-        rangemode: 'tozero',
-        color: 'white',
-      },
-      yaxis: {
-        title: {
-          text: 'Send Count',
-        },
-        rangemode: 'tozero',
-        color: 'white',
-      },
-      paper_bgcolor: '#1d232a',
-      plot_bgcolor: '#1d232a',
-      margin: {
-        l: 50,
-        r: 50,
-        b: 50,
-        t: 50,
-        pad: 4,
-      },
-      // biome-ignore-end lint/style/useNamingConvention: library interface names
+      ...DARK_LAYOUT,
+      xaxis: axisConfig('Virtual Time', { rangemode: 'tozero' }),
+      yaxis: axisConfig('Send Count', { rangemode: 'tozero' }),
     };
-    const config = { responsive: true };
-    Plotly.newPlot(this.networkTimePlotEl, data, layout, config);
-    this.isPlotInitialized = true;
+    const data = [{ x: [], y: [], showlegend: true }];
+    setupPlot({
+      component: this,
+      elementId: 'networkTimePlot',
+      elementProp: 'networkTimePlotEl',
+      data,
+      layout,
+    });
   },
 
   async load() {
@@ -130,10 +80,7 @@ export const networkTimePlot = () => ({
   },
 
   purge() {
-    if (this.networkTimePlotEl) {
-      Plotly.purge(this.networkTimePlotEl);
-      this.isPlotInitialized = false;
-    }
+    purgePlot(this, 'networkTimePlotEl');
   },
 
   /**
@@ -168,33 +115,9 @@ export const networkTimePlot = () => ({
     }));
 
     Plotly.react(this.networkTimePlotEl, traces, {
-      // biome-ignore-start lint/style/useNamingConvention: library interface names
-      xaxis: {
-        title: {
-          text:
-            this.xAxisValues.find((item) => item.key === this.selectedXAxis)?.label ??
-            this.selectedXAxis,
-        },
-        color: 'white',
-      },
-      yaxis: {
-        title: {
-          text:
-            this.yAxisValues.find((item) => item.key === this.selectedYAxis)?.label ??
-            this.selectedYAxis,
-        },
-        color: 'white',
-      },
-      paper_bgcolor: '#1d232a',
-      plot_bgcolor: '#1d232a',
-      margin: {
-        l: 50,
-        r: 50,
-        b: 50,
-        t: 50,
-        pad: 4,
-      },
-      // biome-ignore-end lint/style/useNamingConvention: library interface names
+      ...DARK_LAYOUT,
+      xaxis: axisConfig(getLabel(this.xAxisValues, this.selectedXAxis, this.selectedXAxis)),
+      yaxis: axisConfig(getLabel(this.yAxisValues, this.selectedYAxis, this.selectedYAxis)),
     });
   },
 });