Fix form logic on page load

listeners.js

@@ -30,6 +30,7 @@ const onColorChanged = (state, newValue) => {
   rootElem.style.setProperty("--highlight", getContrastingTextColor(state.target.rgb.vector));
 
   rescoreAll(state.target);
+  onControlsChanged(state);
 };
 
 // Sorting/Metrics
@@ -40,9 +41,9 @@ const scaleOptions = {
 };
 
 const scaleOptionsDisplay = {
-  none: ["", ""],
-  direct: ["\\frac{\\left|P_i\\right|}{\\left|P\\right|} \\left(", "\\right)"],
-  inverse: ["\\frac{\\left|P\\right|}{\\left|P_i\\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)"],
 }
 
 const sortOrders = {
@@ -51,24 +52,35 @@ const sortOrders = {
 };
 
 const onControlsChanged = state => {
-  const arg = state.useCluster ? "P_x" : "P";
-  const [ scaleDisplayL, scaleDisplayR ] = scaleOptionsDisplay[state.scaleOption];
+  // Update metric displays
   document.getElementById("metric-display").innerHTML = TeXZilla.toMathMLString(`
-    \\${state.sortOrder}_{${arg}}\\left[
-      ${scaleDisplayL} ${metrics[state.sortMetric].displayBody(arg)} ${scaleDisplayR}
-    \\right]
+    ${metrics[state.sortMetric].displayName("P")} = ${metrics[state.sortMetric].displayBody("P")}
   `);
+  let arg;
   if (state.useCluster) {
-    const [ clusterScaleDisplayL, clusterScaleDisplayR ] = scaleOptionsDisplay[state.clusterSettings.scaleOption];
+    arg = "K\\left(P\\right)";
+    const [ clusterScaleDisplayL, clusterScaleDisplayR ] = scaleOptionsDisplay[state.clusterSettings.scaleOption]("P_i");
     document.getElementById("cluster-metric-display").innerHTML = TeXZilla.toMathMLString(`
-      P_x = \\arg\\${state.clusterSettings.sortOrder}_{P_i}\\left[
+      K\\left(P\\right) = \\arg\\${state.clusterSettings.sortOrder}_{P_i}\\left[
         ${clusterScaleDisplayL} ${metrics[state.clusterSettings.sortMetric].displayBody("P_i")} ${clusterScaleDisplayR}
       \\right]
     `);
   } else {
+    arg = "P";
     document.getElementById("cluster-metric-display").innerHTML = '';
   }
+  const [ scaleDisplayL, scaleDisplayR ] = state.useCluster ? scaleOptionsDisplay[state.scaleOption](arg) : ["", ""];
+  document.getElementById("final-metric-display").innerHTML = TeXZilla.toMathMLString(`
+    \\${state.sortOrder}_{P}\\left[
+      ${scaleDisplayL.slice(0, -6)} ${metrics[state.sortMetric].displayName(arg)}
+    \\right]
+    =
+    \\${state.sortOrder}_{P}\\left[
+      ${scaleDisplayL} ${metrics[state.sortMetric].displayBody(arg)} ${scaleDisplayR}
+    \\right]
+  `);
 
+  // Update the current best
   getBest(
     state.number, state.space, 
     state.useCluster ? { sortMetric: state.clusterSettings.sortMetric, sortOrder: sortOrders[state.clusterSettings.sortOrder], scaleOption: scaleOptions[state.clusterSettings.scaleOption] } : null, 

nearest.css

@@ -16,6 +16,49 @@ body {
     display: none !important;
 }
 
+/* Toggles */
+
+.toggle-box {
+    display: block;
+}
+
+.toggle-box > .toggle-off {
+    display: block;
+}
+
+.toggle-box > .toggle-on {
+    display: none;
+}
+
+.toggle-box > label > .toggle-off {
+    display: block;
+}
+
+.toggle-box > label > .toggle-on {
+    display: none;
+}
+
+.toggle-box > .toggle-button {
+    display: none;
+}
+
+.toggle-box > .toggle-button:checked ~ .toggle-off {
+    display: none;
+}
+
+.toggle-box > .toggle-button:checked ~ .toggle-on {
+    display: block;
+}
+
+.toggle-box > .toggle-button:checked ~ label > .toggle-off {
+    display: none;
+}
+
+.toggle-box > .toggle-button:checked ~ label > .toggle-on {
+    display: block;
+}
+
+/* 
 .container {
     display: flex;
     flex-flow: column nowrap;
@@ -119,7 +162,7 @@ body {
 
 .definitions {
     display: none;
-    /* evil trick to allow running into margins */
+    /* evil trick to allow running into margins /
     max-width: 0px;
     overflow: visible;
 }
@@ -245,7 +288,7 @@ label {
     margin-right: 32px;
 }
 
-/* Pokemon Tile */
+/* Pokemon Tile /
 
 .pkmn_tile {
     width: var(--tile-width);
@@ -370,7 +413,7 @@ label {
     padding-right: 2px;
 }
 
-/* Cluster Hiding Logic */
+/* Cluster Hiding Logic /
 
 .pkmn_tile-reveal_clusters {
     display: none;
@@ -408,4 +451,5 @@ label {
 
 .pkmn_tile-reveal_clusters--show {
     display: block;
-}
+} 
+*/

nearest.html

@@ -31,7 +31,8 @@
       sortOrder: "min",
     };
     window.onload = () => {
-      // TODO initialize state based on form controls
+      onColorChanged(state, "#222222");
+      onControlsChanged(state);
     }
   </script>
 </head>
@@ -39,16 +40,17 @@
 <body>
   <noscript>Requires javascript</noscript>
   <button style="grid-area: rand;" type="button" onclick="onRandomColor(state); onControlsChanged(state)">Random Color</button>
-  <input maxlength="7" id="color-input" oninput="onColorChanged(state, event.target.value); onControlsChanged(state)" />
-  <select id="cluster" onchange="state.useCluster = !!(event.target.value); onControlsChanged(state)">
-    <option value="" selected>Whole</option>
-    <option value="true">Cluster</option>
-  </select>
-  <select id="color-space" onchange="state.space = event.target.value; onControlsChanged(state)">
-    <option value="jab" selected>CIECAM02-UCS (Jab)</option>
-    <option value="rgb">sRGB</option>
-  </select>
-  <select id="sort-metric" onchange="state.sortMetric = event.target.value; onControlsChanged(state)">
+  <input autocomplete="off" maxlength="7" id="color-input" value="#222222" oninput="onColorChanged(state, event.target.value)" />
+  <br/>
+  <div class="toggle-box">
+    <input autocomplete="off" type="checkbox" class="toggle-button" id="space-toggle" role="button" onchange="state.space = event.target.checked ? 'rgb' : 'jab'; onControlsChanged(state)">
+    <label for="space-toggle">
+      <span class="toggle-off">CIECAM02-UCS (Jab)</span>
+      <span class="toggle-on">sRGB</span>
+    </label>
+  </div>
+  <br/>
+  <select 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>
@@ -58,39 +60,53 @@
     <option value="inertia">Inertia (I)</option>
     <option value="size">Size (N)</option>
   </select>
-  <select id="scale-option" onchange="state.scaleOption = event.target.value; onControlsChanged(state)">
-    <option value="none" selected>None</option>
-    <option value="direct">Cluster size</option>
-    <option value="inverse">Inverse cluster size</option>
-  </select>
-  <select id="sort-order" onchange="state.sortOrder = event.target.value; onControlsChanged(state)">
-    <option value="min" selected>Min</option>
-    <option value="max">Max</option>
-  </select>
+  <div id="metric-display"></div>
   <br/>
-  <select id="cluster-sort-metric" 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>
-  <select id="cluster-scale-option" onchange="state.clusterSettings.scaleOption = event.target.value; onControlsChanged(state)">
-    <option value="none" selected>None</option>
-    <option value="direct">Cluster size</option>
-    <option value="inverse">Inverse cluster size</option>
-  </select>
-  <select id="cluster-sort-order" onchange="state.clusterSettings.sortOrder = event.target.value; onControlsChanged(state)">
-    <option value="min" selected>Min</option>
-    <option value="max">Max</option>
-  </select>
+  <div class="toggle-box">
+    <input autocomplete="off" type="checkbox" class="toggle-button" id="cluster-toggle" role="button" onchange="state.useCluster = event.target.checked; onControlsChanged(state)">
+    <label for="cluster-toggle">
+      <span class="toggle-off">Whole</span>
+      <span class="toggle-on">Cluster</span>
+    </label>
+    <select 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>
+    <select autocomplete="off" id="cluster-scale-option" class="toggle-on" onchange="state.clusterSettings.scaleOption = event.target.value; onControlsChanged(state)">
+      <option value="none" selected>None</option>
+      <option value="direct">Cluster size</option>
+      <option value="inverse">Inverse cluster size</option>
+    </select>
+    <div class="toggle-on toggle-box">
+      <input autocomplete="off" type="checkbox" class="toggle-button" id="cluster-sort-order" role="button" onchange="state.clusterSettings.sortOrder = event.target.checked ? 'max' : 'min'; onControlsChanged(state)">
+      <label for="cluster-sort-order">
+        <span class="toggle-off">Min</span>
+        <span class="toggle-on">Max</span>
+      </label>
+    </div>
+    <select autocomplete="off" id="scale-option" class="toggle-on" onchange="state.scaleOption = event.target.value; onControlsChanged(state)">
+      <option value="none" selected>None</option>
+      <option value="direct">Cluster size</option>
+      <option value="inverse">Inverse cluster size</option>
+    </select>
+    <div id="cluster-metric-display" class="toggle-on"></div>
+  </div>
   <br/>
-  <div id="cluster-metric-display"></div>
+  <div class="toggle-box">
+    <input autocomplete="off" type="checkbox" class="toggle-button" id="sort-order" role="button" onchange="state.sortOrder = event.target.checked ? 'max' : 'min'; onControlsChanged(state)">
+    <label for="sort-order">
+      <span class="toggle-off">Min</span>
+      <span class="toggle-on">Max</span>
+    </label>
+  </div>
   <br/>
-  <div id="metric-display"></div>
+  <div id="final-metric-display"></div>
 
   <!-- <div class="container start-justified">
     <form id="controls" onsubmit="event.preventDefault()">