Define metric dropdowns programmatically

nearest.html

@@ -38,6 +38,21 @@
       document.getElementById("nu-def").innerHTML = TeXZilla.toMathMLString(String.raw`
           \vec{\nu}\left(P\right) = \frac{1}{\left|P\right|}\sum_{p\in P}{\hat{p}}
       `);
+
+      Object.entries(metrics).forEach(([name, metric]) => {
+        const opt = document.createElement("option");
+        opt.setAttribute("value", name);
+        console.log(metric.option);
+        document.getElementById("sort-metric").appendChild(opt);
+        opt.innerHTML = metric.option;
+        const clone = opt.cloneNode();
+        document.getElementById("cluster-sort-metric").appendChild(clone);
+        clone.innerHTML = metric.option;
+      });
+
+      document.getElementById("sort-metric").firstChild.selected = true;
+      document.getElementById("cluster-sort-metric").lastChild.selected = true;
+      
       onColorChanged(state, "#222222");
     }
   </script>
@@ -87,14 +102,6 @@
           </div>
           <select style="grid-area: metr" autocomplete="off" id="sort-metric"
             onchange="state.sortMetric = event.target.value; onControlsChanged(state)">
-            <option value="sigma" selected>RMS Deviation (σ)</option>
-            <option value="bigTheta">Mean of Angular Difference (Θ)</option>
-            <option value="theta">Angular Difference of Mean (θ)</option>
-            <option value="phi">Hue Difference of Mean (ϕ)</option>
-            <option value="delta">Euclidean Distance to Mean (δ)</option>
-            <option value="ch">Chebyshev Distance to Mean (Ч)</option>
-            <option value="inertia">Inertia (I)</option>
-            <option value="size">Size (N)</option>
           </select>
           <div style="grid-area: disp; padding-bottom: 0.5em; justify-self: center;" id="metric-display"></div>
           <div
@@ -123,14 +130,6 @@
           </div>
           <select style="grid-area: metr" autocomplete="off" id="cluster-sort-metric" class="toggle-on"
             onchange="state.clusterSettings.sortMetric = event.target.value; onControlsChanged(state)">
-            <option value="sigma">RMS Deviation (σ)</option>
-            <option value="bigTheta">Mean of Angular Difference (Θ)</option>
-            <option value="theta">Angular Difference of Mean (θ)</option>
-            <option value="phi">Hue Difference of Mean (ϕ)</option>
-            <option value="delta">Euclidean Distance to Mean (δ)</option>
-            <option value="ch">Chebyshev Distance to Mean (Ч)</option>
-            <option value="inertia">Inertia (I)</option>
-            <option value="size" selected>Size (N)</option>
           </select>
           <span style="grid-area: blbl; justify-self: end;" class="toggle-on">Rescaled by</span>
           <select style="grid-area: clus" autocomplete="off" id="cluster-scale-option" class="toggle-on"

web/metrics.js

@@ -1,5 +1,6 @@
 const metrics = {
   sigma: { // RMS
+    option: "RMS Deviation (σ)",
     displayName: p => String.raw`\sigma\left(${p}\right)`,
     displayBody: p => String.raw`
       \sqrt{I\left(${p}\right) - 2\vec{q}\cdot\vec{\mu}\left(${p}\right) + \left|\left|\vec{q}\right|\right|^2}
@@ -7,6 +8,7 @@ const metrics = {
     evaluate: (data, target) => Math.sqrt(data.inertia - 2 * vectorDot(data.mu.vector, target.vector) + target.sqMag),
   },
   bigTheta: { // mean of angle
+    option: "Mean of Angular Difference (Θ)",
     displayName: p => String.raw`\Theta\left(${p}\right)`,
     displayBody: p => String.raw`
       \cos^{-1}\left( \hat{q}\cdot\vec{\nu}\left(${p}\right) \right)
@@ -14,6 +16,7 @@ const metrics = {
     evaluate: (data, target) => rad2deg * Math.acos(vectorDot(data.nu, target.unit)),
   },
   theta: { // angle of mean
+    option: "Angular Difference of Mean (θ)",
     displayName: p => String.raw`\theta\left(${p}\right)`,
     displayBody: p => String.raw`
       \cos^{-1}\left( \hat{q}\cdot\hat{\mu}\left(${p}\right) \right)
@@ -21,6 +24,7 @@ const metrics = {
     evaluate: (data, target) => rad2deg * Math.acos(vectorDot(data.mu.unit, target.unit)),
   },
   phi: { // hue angle
+    option: "Hue Difference of Mean (ϕ)",
     displayName: p => String.raw`\phi\left(${p}\right)`,
     displayBody: p => String.raw`
       \angle \left(\vec{q}_{\perp}, \vec{\mu}\left(${p}\right)_{\perp} \right)
@@ -28,6 +32,7 @@ const metrics = {
     evaluate: (data, target) => angleDiff(data.mu.hue, target.hue),
   },
   delta: { // euclidean
+    option: "Euclidean Distance to Mean (δ)",
     displayName: p => String.raw`\delta\left(${p}\right)`,
     displayBody: p => String.raw`
       \left|\left| \vec{q} - \vec{\mu}\left(${p}\right) \right|\right|
@@ -35,6 +40,7 @@ const metrics = {
     evaluate: (data, target) => vectorDist(data.mu.vector, target.vector),
   },
   ch: { // chebyshev
+    option: "Chebyshev Distance to Mean (Ч)",
     displayName: p => String.raw`Ч\left(${p}\right)`,
     displayBody: p => String.raw`
       \max_{i} \left| \vec{\mu}\left(${p}\right)_i - \vec{q}_i \right|
@@ -42,6 +48,7 @@ const metrics = {
     evaluate: (data, target) => Math.max(...data.mu.vector.map((x, i) => Math.abs(x - target.vector[i]))),
   },
   inertia: {
+    option: "Inertia (I)",
     displayName: p => String.raw`I\left(${p}\right)`,
     displayBody: p => String.raw`
       \frac{1}{\left|${p}\right|} \sum_{p\in ${p}}{\left|\left|\vec{p}\right|\right|^2}
@@ -49,6 +56,7 @@ const metrics = {
     evaluate: data => data.inertia,
   },
   size: {
+    option: "Size (N)",
     displayName: p => String.raw`N\left(${p}\right)`,
     displayBody: p => String.raw`\left|${p}\right|`,
     evaluate: data => data.size,