heatmaps: part 6

website/scripts/main.js

@@ -147,8 +147,6 @@ function initSelected() {
           break;
         }
         case "heatmap": {
-          console.log("heatmap");
-
           element = heatmapElement;
 
           setHeatmapOption(option);
@@ -156,8 +154,6 @@ function initSelected() {
           break;
         }
         case "chart": {
-          console.log("chart");
-
           element = chartElement;
 
           if (firstTimeLoadingChart) {

website/scripts/utils/chart/index.js

@@ -1339,6 +1339,8 @@ export function createChart({ parent, brk, fitContent }) {
 
   /** @type {Record<number, ReturnType<typeof createPersistedValue<"lin" | "log">>>} */
   const scalePersistedValues = {};
+  /** @type {Record<number, HTMLElement | undefined>} */
+  const scaleSelectorElements = {};
 
   /**
    * @param {number} paneIndex
@@ -1366,8 +1368,7 @@ export function createChart({ parent, brk, fitContent }) {
     const td = tr?.querySelector("td:last-child");
     if (!td) return;
 
-    // Remove previous if any
-    td.querySelector(":scope > .field")?.remove();
+    scaleSelectorElements[paneIndex]?.remove();
 
     /** @type {HTMLTableCellElement} */ (td).style.position = "relative";
 
@@ -1381,6 +1382,7 @@ export function createChart({ parent, brk, fitContent }) {
       },
       toTitle: (c) => (c === "lin" ? "Linear scale" : "Logarithmic scale"),
     });
+    scaleSelectorElements[paneIndex] = radios;
     td.append(radios);
   }
 
@@ -1586,7 +1588,7 @@ export function createChart({ parent, brk, fitContent }) {
           choices,
           groups,
           id: "index",
-        }),
+        }).element,
       );
 
       for (const preset of getRangePresets()) {
@@ -1649,7 +1651,7 @@ export function createChart({ parent, brk, fitContent }) {
               blueprints.panes[paneIndex].unit = unit;
               blueprints.rebuildPane(paneIndex);
             },
-          }),
+          }).element,
         );
       });
 

website/scripts/utils/dom.js

@@ -179,12 +179,20 @@ export function createLabeledInput({
 }
 
 
+/**
+ * @template T
+ * @typedef {Object} Select
+ * @property {HTMLElement} element
+ * @property {() => T} get
+ * @property {(choice: T) => void} set
+ */
+
 /**
  * @template T
  * @param {Object} args
  * @param {T} args.initialValue
  * @param {string} [args.id]
- * @param {string} [args.label]
+ * @param {string} [args.legend]
  * @param {readonly T[]} args.choices
  * @param {(value: T) => void} [args.onChange]
  * @param {(choice: T) => string} [args.toKey]
@@ -193,6 +201,7 @@ export function createLabeledInput({
  */
 export function createRadios({
   id,
+  legend,
   choices,
   initialValue,
   onChange,
@@ -200,8 +209,7 @@ export function createRadios({
   toLabel = /** @type {(choice: T) => string} */ ((c) => String(c)),
   toTitle,
 }) {
-  const field = window.document.createElement("div");
-  field.classList.add("field");
+  const field = window.document.createElement("fieldset");
 
   const initialKey = toKey(initialValue);
 
@@ -214,6 +222,12 @@ export function createRadios({
     span.textContent = toLabel(choices[0]);
     field.append(span);
   } else {
+    if (legend) {
+      const legendElement = window.document.createElement("legend");
+      legendElement.textContent = legend;
+      field.append(legendElement);
+    }
+
     const fieldId = id ?? "";
     choices.forEach((choice) => {
       const choiceKey = toKey(choice);
@@ -232,10 +246,10 @@ export function createRadios({
       field.append(label);
     });
 
-    field.addEventListener("change", (event) => {
-      // @ts-ignore
-      onChange?.(fromKey(event.target.value));
-    });
+  field.addEventListener("change", (event) => {
+    if (!(event.target instanceof HTMLInputElement)) return;
+    onChange?.(fromKey(event.target.value));
+  });
   }
 
   return field;
@@ -253,6 +267,7 @@ export function createRadios({
  * @param {(choice: T) => string} [args.toLabel]
  * @param {boolean} [args.sorted]
  * @param {{ label: string, items: T[] }[]} [args.groups]
+ * @returns {Select<T>}
  */
 export function createSelect({
   id,
@@ -278,7 +293,11 @@ export function createSelect({
   if (choices.length === 1) {
     const span = window.document.createElement("span");
     span.textContent = toLabel(choices[0]);
-    return span;
+    return {
+      element: span,
+      get: () => initialValue,
+      set: () => {},
+    };
   }
 
   const field = window.document.createElement("label");
@@ -330,13 +349,19 @@ export function createSelect({
   }
 
   field.addEventListener("click", (e) => {
-    if (e.target !== select) {
+    if (e.target !== select && "showPicker" in select) {
       e.preventDefault();
       select.showPicker();
     }
   });
 
-  return field;
+  return {
+    element: field,
+    get: () => fromKey(select.value),
+    set: (choice) => {
+      select.value = toKey(choice);
+    },
+  };
 }
 
 /**