Add better descriptions and spacers in dropdowns

nearest.html

@@ -38,27 +38,33 @@
       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]) => {
-        if (name === "inertia") {
-          const spacer = document.createElement("option");
-          spacer.disabled = true;
-          document.getElementById("sort-metric").appendChild(spacer);
-          spacer.innerHTML = "---";
-          const clone = spacer.cloneNode();
-          document.getElementById("cluster-sort-metric").appendChild(clone);
-          clone.innerHTML = "---";
-        }
+      
+      const metricSelect = document.getElementById("sort-metric");
+      const clusterMetricSelect = document.getElementById("cluster-sort-metric");
+      const addOption = (name, value) => {
         const opt = document.createElement("option");
-        opt.setAttribute("value", name);
-        document.getElementById("sort-metric").appendChild(opt);
-        opt.innerHTML = metric.option;
+        if (value) {
+          opt.setAttribute("value", value);
+        } else {
+          opt.disabled = true;
+        }
+        metricSelect.appendChild(opt);
+        opt.innerHTML = name;
         const clone = opt.cloneNode();
-        document.getElementById("cluster-sort-metric").appendChild(clone);
-        clone.innerHTML = metric.option;
+        clusterMetricSelect.appendChild(clone);
+        clone.innerHTML = name;
+      }
+      addOption("--- Compare to whole ---");
+      Object.entries(metrics).forEach(([value, metric]) => {
+        if (value === "theta") {
+          addOption("--- Compare to mean ---");
+        } else if (value === "inertia") {
+          addOption("--- Statistics ---");
+        }
+        addOption(metric.option, value);
       });
 
-      document.getElementById("sort-metric").firstChild.selected = true;
+      document.getElementById("sort-metric").firstChild.nextSibling.nextSibling.selected = true;
       document.getElementById("cluster-sort-metric").lastChild.selected = true;
       
       onColorChanged(state, "#222222");

web/metrics.js

@@ -8,7 +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 (Θ)",
+    option: "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)
@@ -16,7 +16,7 @@ const metrics = {
     evaluate: (data, target) => rad2deg * Math.acos(vectorDot(data.nu, target.unit)),
   },
   theta: { // angle of mean
-    option: "Angular Difference of Mean (θ)",
+    option: "Angular Difference (θ)",
     displayName: p => String.raw`\theta\left(${p}\right)`,
     displayBody: p => String.raw`
       \cos^{-1}\left( \hat{q}\cdot\hat{\mu}\left(${p}\right) \right)
@@ -24,7 +24,7 @@ const metrics = {
     evaluate: (data, target) => rad2deg * Math.acos(vectorDot(data.mu.unit, target.unit)),
   },
   phi: { // hue angle
-    option: "Hue Difference of Mean (ϕ)",
+    option: "Hue Difference (ϕ)",
     displayName: p => String.raw`\phi\left(${p}\right)`,
     displayBody: (p, space) => String.raw`
       \angle \left(\text{oproj}_{\vec{${space === "jab" ? "J" : "L"}}}{\vec{q}}, \text{oproj}_{\vec{${space === "jab" ? "J" : "L"}}}{\vec{\mu}\left(${p}\right)} \right)
@@ -32,7 +32,7 @@ const metrics = {
     evaluate: (data, target) => angleDiff(data.mu.hue, target.hue),
   },
   delta: { // euclidean
-    option: "Euclidean Distance to Mean (δ)",
+    option: "Euclidean Distance (δ)",
     displayName: p => String.raw`\delta\left(${p}\right)`,
     displayBody: p => String.raw`
       \left|\left| \vec{q} - \vec{\mu}\left(${p}\right) \right|\right|
@@ -40,7 +40,7 @@ const metrics = {
     evaluate: (data, target) => vectorDist(data.mu.vector, target.vector),
   },
   ch: { // chebyshev
-    option: "Chebyshev Distance to Mean (Ч)",
+    option: "Chebyshev Distance (Ч)",
     displayName: p => String.raw`Ч\left(${p}\right)`,
     displayBody: p => String.raw`
       \max_{i} \left| \vec{\mu}\left(${p}\right)_i - \vec{q}_i \right|
@@ -48,7 +48,7 @@ const metrics = {
     evaluate: (data, target) => Math.max(...data.mu.vector.map((x, i) => Math.abs(x - target.vector[i]))),
   },
   lightnessDiff: {
-    option: "Lightness Difference from Mean (ℓ)",
+    option: "Lightness Difference (ℓ)",
     displayName: p => String.raw`\ell\left(${p}\right)`,
     displayBody: (p, space) => String.raw`
       \left| \text{comp}_{\vec{${space === "jab" ? "J" : "L"}}}{\vec{q}} - \text{comp}_{\vec{${space === "jab" ? "J" : "L"}}}{\vec{\mu}\left(${p}\right)} \right|