static: simplify app.js by carving PlotManager out of it

Author: arl

internal/static/src/PlotManager.js

@@ -0,0 +1,40 @@
+import { Plot, createVerticalLines } from "./plot.js";
+
+export default class PlotManager {
+  constructor(config) {
+    this.container = document.getElementById("plots");
+    // Build plot instances.
+    this.plots = config.series.map((pd) => new Plot(pd));
+    this.#attach();
+  }
+
+  #attach() {
+    // Render plot placeholders into DOM.
+    this.container.replaceChildren(
+      ...this.plots.map((p) => {
+        const div = document.createElement("div");
+        div.id = p.name();
+        p.createElement(div);
+        return div;
+      })
+    );
+  }
+
+  update(data, gcEnabled, timeRange, force = false) {
+    // Compute GC vertical lines.
+    const shapes = new Map();
+    if (gcEnabled) {
+      for (const [name, serie] of data.events) {
+        shapes.set(name, createVerticalLines(serie));
+      }
+    }
+    // X-axis range.
+    const now = data.times[data.times.length - 1];
+    const xrange = [now - timeRange * 1000, now];
+
+    // Delegate to each Plot.
+    this.plots.forEach((p) => {
+      if (!p.hidden) p.update(xrange, data, shapes, force);
+    });
+  }
+}

internal/static/src/app.js

@@ -1,67 +1,37 @@
 import StatsManager from "./StatsManager.js";
-import * as plot from "./plot.js";
-import { initNav, paused, show_gc, timerange } from "./nav.js";
+import PlotManager from "./PlotManager.js";
+import { initNav, paused, gcEnabled, timerange } from "./nav.js";
 import { buildWebsocketURI } from "./utils.js";
 import WebSocketClient from "./socket.js";
 import "bootstrap/dist/js/bootstrap.min.js";
 
-const dataRetentionSeconds = 600;
-export var allPlots;
+export let statsMgr;
+export let plotMgr;
+
+export const drawPlots = (force) => {
+  if (paused) return;
+  const data = statsMgr.slice(timerange);
+  plotMgr.update(data, gcEnabled, timerange, force);
+};
 
-let statsMgr;
 export const connect = () => {
   const uri = buildWebsocketURI();
+
   new WebSocketClient(
     uri,
     // onConfig
     (cfg) => {
-      allPlots = configurePlots(cfg);
-      statsMgr = new StatsManager(dataRetentionSeconds, cfg);
-      attachPlots(allPlots);
-      initNav(allPlots);
+      plotMgr = new PlotManager(cfg);
+      statsMgr = new StatsManager(600, cfg);
+
+      initNav(() => {
+        drawPlots(false);
+      });
     },
     // onData
     (msg) => {
       statsMgr.pushData(msg);
-      if (!paused) updatePlots(allPlots, false);
+      drawPlots(true);
     }
   );
 };
-
-const configurePlots = (config) => {
-  const plots = config.series.map((pd) => new plot.Plot(pd));
-  return plots;
-};
-
-const attachPlots = (plots) => {
-  const plotsDiv = document.getElementById("plots");
-  plotsDiv.replaceChildren(
-    ...plots.map((plot) => {
-      const div = document.createElement("div");
-      div.id = plot.name();
-      plot.createElement(div);
-      return div;
-    })
-  );
-};
-
-export const updatePlots = (plots, force = false) => {
-  const data = statsMgr.slice(timerange);
-  const shapes = new Map();
-
-  if (show_gc) {
-    for (const [name, serie] of data.events) {
-      shapes.set(name, plot.createVerticalLines(serie));
-    }
-  }
-
-  // Always show the full range on x axis.
-  const now = data.times[data.times.length - 1];
-  let xrange = [now - timerange * 1000, now];
-
-  plots.forEach((plot) => {
-    if (!plot.hidden) {
-      plot.update(xrange, data, shapes, force);
-    }
-  });
-};

internal/static/src/nav.js

@@ -1,18 +1,18 @@
-import { updatePlots } from "./app.js";
 import * as theme from "./theme.js";
 
-export function initNav(allPlots) {
-  // move gcToggle, pauseBtn, themeToggle, rangeInputs handling here
-  // exactly as in app.js but using passed-in allPlots
+export let paused = false;
+export let gcEnabled = true;
+export let timerange = 60;
 
+export function initNav(onUpdate) {
   // Show GC toggle.
   const gcToggle = document.getElementById("gcToggle");
 
-  gcToggle.checked = show_gc;
+  gcToggle.checked = gcEnabled;
   gcToggle.addEventListener("change", (e) => {
-    show_gc = !show_gc;
-    gcToggle.checked = show_gc;
-    updatePlots(allPlots, true);
+    gcEnabled = !gcEnabled;
+    gcToggle.checked = gcEnabled;
+    onUpdate(true);
   });
 
   // Pause/Resume button.
@@ -21,7 +21,7 @@ export function initNav(allPlots) {
     paused = !paused;
     pauseBtn.textContent = paused ? "Resume" : "Pause";
     pauseBtn.classList.toggle("active", paused);
-    updatePlots(allPlots, true);
+    onUpdate(true);
   });
 
   // Dark mode toggle.
@@ -32,10 +32,7 @@ export function initNav(allPlots) {
     localStorage.setItem("theme-mode", newTheme);
 
     theme.updateThemeMode();
-
-    allPlots.forEach((plot) => {
-      plot.updateTheme();
-    });
+    onUpdate(true);
   });
 
   // Time range selection
@@ -47,13 +44,9 @@ export function initNav(allPlots) {
         rangeInputs[i].checked = true;
         const val = 60 * parseInt(rangeInputs[i].value, 10);
         timerange = val;
-        updatePlots(allPlots, true);
+        onUpdate(true);
       }
     })
   );
   document.getElementById("range1").checked = true;
 }
-
-export let paused = false,
-  show_gc = true,
-  timerange = 60;

internal/static/src/ui.js

@@ -1,27 +1,25 @@
-import * as app from "./app.js";
+import { plotMgr, drawPlots } from "./app.js";
 import tippy from "tippy.js";
 
-export const onClickPlotMaximize = (cfg) => (gd, ev) => {
-  const clicked = app.allPlots.find((p) => p.name() === cfg.name);
-  const isOnlyVisible = app.allPlots.every(
+export const onClickPlotMaximize = (cfg) => (_, _) => {
+  const clicked = plotMgr.plots.find((p) => p.name() === cfg.name);
+  const isOnlyVisible = plotMgr.plots.every(
     (p) => p === clicked || !p.isVisible()
   );
 
   if (isOnlyVisible) {
-    // Restore all plots.
-    app.allPlots.forEach((p) => p.show());
+    // Show plots.
+    plotMgr.plots.forEach((p) => p.show());
+    clicked.minimize();
   } else {
     // Hide all plots except the clicked one.
-    app.allPlots.forEach((p) => {
+    plotMgr.plots.forEach((p) => {
       if (p !== clicked) p.hide();
     });
-  }
-  if (isOnlyVisible) {
-    clicked.minimize();
-  } else {
     clicked.maximize();
-    app.updatePlots([clicked], true);
   }
+
+  drawPlots(true);
 };
 
 export const onClickPlotInfo = (gd, ev) => {