Improve collapsed display

nearest.html

@@ -81,7 +81,12 @@
       <input autocomplete="off" type="checkbox" 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-sort"></div>
         <div class="toggle-off" style="margin-top: 16px; text-align: center;" id="collapsed-fn-name"></div>
+        <div class="toggle-off" style="margin-top: 16px; text-align: center;" id="collapsed-cluster-sort"></div>
+        <div class="toggle-off" style="margin-top: 16px; text-align: center;" id="collapsed-cluster"></div>
+        <div class="toggle-off" style="margin-top: 16px; text-align: center;" id="collapsed-cluster-scale"></div>
+        <div class="toggle-off" style="margin-top: 16px; text-align: center;" id="collapsed-scale"></div>
         <div class="toggle-on">▼ Controls</div>
       </label>
       <div class="toggle-on">

web/listeners.js

@@ -42,11 +42,11 @@ const scaleOptions = {
 };
 
 const scaleOptionsDisplay = {
-  none: () => ["", ""],
-  direct: arg => [`\\frac{\\left|${arg}\\right|}{\\left|P\\right|} \\left(`, "\\right)"],
-  inverse: arg => [`\\frac{\\left|P\\right|}{\\left|${arg}\\right|} \\left(`, "\\right)"],
-  size: () => ["\\left|P\\right| \\left(", "\\right)"],
-  inverseSize: () => ["\\frac{1}{\\left|P\\right|} \\left(", "\\right)"],
+  none: () => ["", "", ""],
+  direct: arg => [`\\frac{\\left|${arg}\\right|}{\\left|P\\right|}`, "\\left(", "\\right)"],
+  inverse: arg => [`\\frac{\\left|P\\right|}{\\left|${arg}\\right|}`, "\\left(", "\\right)"],
+  size: () => ["\\left|P\\right|", "\\left(", "\\right)"],
+  inverseSize: () => ["\\frac{1}{\\left|P\\right|}", "\\left(", "\\right)"],
 }
 
 const sortOrders = {
@@ -61,32 +61,37 @@ 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-sort").innerHTML = state.sortOrder === "min" ? "<" : ">";
   document.getElementById("collapsed-fn-name").innerHTML = TeXZilla.toMathMLString(metrics[state.sortMetric].displayName);
+  document.getElementById("collapsed-cluster-sort").innerHTML = state.useCluster ? state.clusterSettings.sortOrder === "min" ? "<" : ">" : "";
+  document.getElementById("collapsed-cluster").innerHTML = state.useCluster ? TeXZilla.toMathMLString(metrics[state.clusterSettings.sortMetric].displayName) : "";
+  document.getElementById("collapsed-cluster-scale").innerHTML = state.useCluster ? TeXZilla.toMathMLString(scaleOptionsDisplay[state.clusterSettings.scaleOption]("X")[0] || "1") : "";
+  document.getElementById("collapsed-scale").innerHTML = state.useCluster ? TeXZilla.toMathMLString(scaleOptionsDisplay[state.scaleOption]("X")[0] || "1") : "";
   document.getElementById("metric-display").innerHTML = TeXZilla.toMathMLString(`
     ${metrics[state.sortMetric].displayName}\\left(P\\right) = ${metrics[state.sortMetric].displayBody("P", state.space)}
   `);
   let arg;
   if (state.useCluster) {
     arg = "K\\left(P\\right)";
-    const [ clusterScaleDisplayL, clusterScaleDisplayR ] = scaleOptionsDisplay[state.clusterSettings.scaleOption]("P_i");
+    const [ clusterScaleDisplay, clusterScaleDisplayL, clusterScaleDisplayR ] = scaleOptionsDisplay[state.clusterSettings.scaleOption]("P_i");
     document.getElementById("cluster-metric-display").innerHTML = TeXZilla.toMathMLString(`
       K\\left(P\\right) = \\arg\\${state.clusterSettings.sortOrder}_{P_i}\\left[
-        ${clusterScaleDisplayL} ${metrics[state.clusterSettings.sortMetric].displayBody("P_i", state.space)} ${clusterScaleDisplayR}
+        ${clusterScaleDisplay} ${clusterScaleDisplayL} ${metrics[state.clusterSettings.sortMetric].displayBody("P_i", state.space)} ${clusterScaleDisplayR}
       \\right]
     `);
   } else {
     arg = "P";
     document.getElementById("cluster-metric-display").innerHTML = '';
   }
-  const [ scaleDisplayL, scaleDisplayR ] = state.useCluster ? scaleOptionsDisplay[state.scaleOption](arg) : ["", ""];
+  const [ scaleDisplay, scaleDisplayL, scaleDisplayR ] = state.useCluster ? scaleOptionsDisplay[state.scaleOption](arg) : ["", ""];
   document.getElementById("final-metric-display").innerHTML = TeXZilla.toMathMLString(`
     \\begin{aligned}
     &\\${state.sortOrder}_{P}\\left[
-      ${scaleDisplayL.slice(0, -6)} ${metrics[state.sortMetric].displayName}\\left(${arg}\\right)
+      ${scaleDisplay} ${metrics[state.sortMetric].displayName}\\left(${arg}\\right)
     \\right]\\\\
     = 
     &\\${state.sortOrder}_{P}\\left[
-      ${scaleDisplayL} ${metrics[state.sortMetric].displayBody(arg, state.space)} ${scaleDisplayR}
+      ${scaleDisplay} ${scaleDisplayL} ${metrics[state.sortMetric].displayBody(arg, state.space)} ${scaleDisplayR}
     \\right]
     \\end{aligned}
   `);