Create metric selector via JS

scripts/graph/metrics.ts

@@ -0,0 +1,68 @@
+import { el } from "./util.js";
+
+class Folder {
+    metric: string | null = null;
+    children: Map<string, Folder> = new Map();
+
+    getOrCreateChild(name: string): Folder {
+        let child = this.children.get(name);
+        if (child === undefined) {
+            child = new Folder();
+            this.children.set(name, child);
+        }
+        return child;
+    }
+
+    add(metric: string) {
+        let current: Folder = this;
+        for (let segment of metric.split("/")) {
+            current = current.getOrCreateChild(segment);
+        }
+        current.metric = metric;
+    }
+
+    toHtmlElement(name: string): HTMLElement {
+        if (this.children.size > 0) { // Folder
+            name = `${name}/`;
+            if (this.metric === null) { // Folder without metric
+                return el("details", { "class": "no-metric" },
+                    el("summary", {}, name),
+                    this.childrenToHtmlElements(),
+                );
+            } else { // Folder with metric
+                return el("details", {},
+                    el("summary", {},
+                        el("input", { "type": "checkbox", "name": this.metric }),
+                        " ", name,
+                    ),
+                    this.childrenToHtmlElements(),
+                );
+            }
+        } else if (this.metric !== null) { // Normal metric
+            return el("label", {},
+                el("input", { "type": "checkbox", "name": this.metric }),
+                " ", name,
+            );
+        } else { // Metric without metric, should never happen
+            return el("label", {}, name);
+        }
+    }
+
+    childrenToHtmlElements(): HTMLElement {
+        let result: HTMLElement = el("ul", {});
+        for (let [name, folder] of this.children.entries()) {
+            result.append(el("li", {}, folder.toHtmlElement(name)));
+        }
+        return result;
+    }
+}
+
+export function update(div: HTMLElement, metrics: string[]) {
+    let folder = new Folder();
+    for (let metric of metrics) {
+        folder.add(metric);
+    }
+
+    div.textContent = ""; // Remove children
+    div.append(folder.childrenToHtmlElements());
+}

scripts/graph/requests.ts

@@ -0,0 +1,71 @@
+/**
+ * `/graph/metrics` response data.
+ */
+export type MetricsResponse = {
+    // data_id: number; // TODO Uncomment
+
+    metrics: string[];
+};
+
+/**
+ * `/graph/commits` response data.
+ */
+export type CommitsResponse = {
+    // graph_id: number; // TODO Uncomment
+
+    hash_by_hash: string[];
+    author_by_hash: number[];
+    committer_date_by_hash: string[];
+    message_by_hash: string[];
+    parents: [string, string][];
+};
+
+/**
+ * `/graph/measurements` response data.
+ */
+export type MeasurementsResponse = {
+    // graph_id: number; // TODO Uncomment
+    // data_id: number; // TODO Uncomment
+
+    measurements: { [key: string]: (number | null)[]; };
+};
+
+/**
+ * Request different kinds of data from the server.
+ *
+ * This class has two main purposes:
+ *
+ * 1. Providing a nice interface for requesting data from the server
+ * 2. Preventing sending the same request again while still waiting for the server
+ */
+export class Requests {
+    #requesting_metrics: Promise<MetricsResponse> | null = null;
+    #requesting_commits: Promise<CommitsResponse> | null = null;
+    #requesting_measurements: Map<string, Promise<MeasurementsResponse>> = new Map();
+
+    async #request_data<R>(url: string): Promise<R> {
+        let response = await fetch(url);
+        let data: R = await response.json();
+        return data;
+    }
+
+    async get_metrics(): Promise<MetricsResponse | null> {
+        if (this.#requesting_metrics !== null) {
+            try {
+                return await this.#requesting_metrics;
+            } catch (error) {
+                return null;
+            }
+        }
+
+        this.#requesting_metrics = this.#request_data<MetricsResponse>("metrics");
+        try {
+            return await this.#requesting_metrics;
+        } catch (error) {
+            console.error("Could not get metrics:", error);
+            return null;
+        } finally {
+            this.#requesting_metrics = null;
+        }
+    }
+}

scripts/graph/util.ts

@@ -0,0 +1,11 @@
+/**
+ * Create an {@link HTMLElement}.
+ */
+export function el(name: string, attributes: { [key: string]: string; }, ...children: (string | Node)[]) {
+    let element = document.createElement(name);
+    for (let [name, value] of Object.entries(attributes)) {
+        element.setAttribute(name, value);
+    }
+    element.append(...children);
+    return element;
+}