Update metrics selector via State

scripts/graph/metrics.ts

@@ -57,7 +57,7 @@ class Folder {
     }
 }
 
-export function update(div: HTMLElement, metrics: string[]) {
+export function updateMetricsDiv(div: HTMLElement, metrics: string[]) {
     let folder = new Folder();
     for (let metric of metrics) {
         folder.add(metric);

scripts/graph/state.ts

@@ -0,0 +1,42 @@
+import { updateMetricsDiv } from "./metrics.js";
+import { Requests, MetricsResponse } from "./requests.js";
+
+export class State {
+    #requests: Requests;
+    #metricsDiv: HTMLElement;
+
+    #updating: boolean = false;
+    #metrics: MetricsResponse | null = null;
+
+    constructor(requests: Requests, metricsDiv: HTMLElement) {
+        this.#requests = requests;
+        this.#metricsDiv = metricsDiv;
+    }
+
+    /**
+     * Look at current state and try to change it so that it represents what the
+     * user wants.
+     *
+     * This function is idempotent.
+     */
+    async update() {
+        if (this.#updating) {
+            return;
+        }
+        try {
+            await this.#update_impl();
+        } finally {
+            this.#updating = false;
+        }
+    }
+
+    async #update_impl() {
+        this.#update_metrics();
+    }
+
+    async #update_metrics() {
+        this.#metrics = await this.#requests.get_metrics();
+        if (this.#metrics === null) { return; }
+        updateMetricsDiv(this.#metricsDiv, this.#metrics.metrics);
+    }
+}