Add metric indicator in collapsed controls

nearest.html

@@ -79,6 +79,7 @@
       <input autocomplete="off" type="checkbox" checked id="all-control-toggle" class="toggle-button" role="button">
       <label for="all-control-toggle" style="min-width: 1.1em; display: inline-block;">
         <div class="toggle-off" style="writing-mode: vertical-rl">► Controls</div>
+        <div class="toggle-off" style="margin-top: 16px; text-align: center;" id="collapsed-fn-name"></div>
         <div class="toggle-on">▼ Controls</div>
       </label>
       <div class="toggle-on">

web/listeners.js

@@ -61,8 +61,9 @@ const onControlsChanged = state => {
     = \left(\text{${state.target[state.space].vector.map(c => c.toFixed(state.space === "rgb" ? 0 : 2)).join(", ")}}\right)
   `);
   // Update metric displays
+  document.getElementById("collapsed-fn-name").innerHTML = TeXZilla.toMathMLString(metrics[state.sortMetric].displayName);
   document.getElementById("metric-display").innerHTML = TeXZilla.toMathMLString(`
-    ${metrics[state.sortMetric].displayName("P")} = ${metrics[state.sortMetric].displayBody("P", state.space)}
+    ${metrics[state.sortMetric].displayName}\\left(P\\right) = ${metrics[state.sortMetric].displayBody("P", state.space)}
   `);
   let arg;
   if (state.useCluster) {
@@ -81,7 +82,7 @@ const onControlsChanged = state => {
   document.getElementById("final-metric-display").innerHTML = TeXZilla.toMathMLString(`
     \\begin{aligned}
     &\\${state.sortOrder}_{P}\\left[
-      ${scaleDisplayL.slice(0, -6)} ${metrics[state.sortMetric].displayName(arg)}
+      ${scaleDisplayL.slice(0, -6)} ${metrics[state.sortMetric].displayName}\\left(${arg}\\right)
     \\right]\\\\
     = 
     &\\${state.sortOrder}_{P}\\left[

web/metrics.js

@@ -1,7 +1,7 @@
 const metrics = {
   sigma: { // RMS
     option: "RMS Deviation (σ)",
-    displayName: p => String.raw`\sigma\left(${p}\right)`,
+    displayName: String.raw`\sigma`,
     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}
     `,
@@ -9,7 +9,7 @@ const metrics = {
   },
   bigTheta: { // mean of angle
     option: "Angular Difference (Θ)",
-    displayName: p => String.raw`\Theta\left(${p}\right)`,
+    displayName: String.raw`\Theta`,
     displayBody: p => String.raw`
       \cos^{-1}\left( \hat{q}\cdot\vec{\nu}\left(${p}\right) \right)
     `,
@@ -17,7 +17,7 @@ const metrics = {
   },
   theta: { // angle of mean
     option: "Angular Difference (θ)",
-    displayName: p => String.raw`\theta\left(${p}\right)`,
+    displayName: String.raw`\theta`,
     displayBody: p => String.raw`
       \cos^{-1}\left( \hat{q}\cdot\hat{\mu}\left(${p}\right) \right)
     `,
@@ -25,7 +25,7 @@ const metrics = {
   },
   phi: { // hue angle
     option: "Hue Difference (ϕ)",
-    displayName: p => String.raw`\phi\left(${p}\right)`,
+    displayName: String.raw`\phi`,
     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)
     `,
@@ -33,7 +33,7 @@ const metrics = {
   },
   delta: { // euclidean
     option: "Euclidean Distance (δ)",
-    displayName: p => String.raw`\delta\left(${p}\right)`,
+    displayName: String.raw`\delta`,
     displayBody: p => String.raw`
       \left|\left| \vec{q} - \vec{\mu}\left(${p}\right) \right|\right|
     `,
@@ -41,7 +41,7 @@ const metrics = {
   },
   ch: { // chebyshev
     option: "Chebyshev Distance (Ч)",
-    displayName: p => String.raw`Ч\left(${p}\right)`,
+    displayName: "Ч",
     displayBody: p => String.raw`
       \max_{i} \left| \vec{\mu}\left(${p}\right)_i - \vec{q}_i \right|
     `,
@@ -49,7 +49,7 @@ const metrics = {
   },
   lightnessDiff: {
     option: "Lightness Difference (ℓ)",
-    displayName: p => String.raw`\ell\left(${p}\right)`,
+    displayName: String.raw`\ell`,
     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|
     `,
@@ -57,7 +57,7 @@ const metrics = {
   },
   inertia: {
     option: "Inertia (I)",
-    displayName: p => String.raw`I\left(${p}\right)`,
+    displayName: "I",
     displayBody: p => String.raw`
       \frac{1}{\left|${p}\right|} \sum_{p\in ${p}}{\left|\left|\vec{p}\right|\right|^2}
     `,
@@ -65,7 +65,7 @@ const metrics = {
   },
   lightness: {
     option: "Mean Lightness (ℒ)",
-    displayName: p => String.raw`\mathcal{L}\left(${p}\right)`,
+    displayName: String.raw`\mathcal{L}`,
     displayBody: (p, space) => String.raw`
       \text{comp}_{\vec{${space === "jab" ? "J" : "L"}}}{\vec{\mu}\left(${p}\right)}
     `,
@@ -73,13 +73,13 @@ const metrics = {
   },
   muNuAngle: {
     option: "Mu-Nu Angle (V)",
-    displayName: p => String.raw`V\left(${p}\right)`,
+    displayName: "V",
     displayBody: p => String.raw`\angle \left( \vec{\mu}\left(${p}\right), \vec{\nu}\left(${p}\right) \right)`,
     evaluate: data => rad2deg * Math.acos(vectorDot(data.mu.unit, data.nu) / vectorMag(data.nu)),
   },
   size: {
     option: "Size (N)",
-    displayName: p => String.raw`N\left(${p}\right)`,
+    displayName: "N",
     displayBody: p => String.raw`\left|${p}\right|`,
     evaluate: data => data.size,
   }