Rewrite equations and control layout

nearest.css

@@ -9,7 +9,6 @@ body {
 }
 
 .container {
-    width: 100%;
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-between;
@@ -25,7 +24,6 @@ body {
     flex-flow: column nowrap;
     justify-content: flex-start;
     align-items: stretch;
-    width: 100%;
 }
 
 .config {
@@ -41,7 +39,8 @@ body {
 
 .dropdown > select, input {
     margin-top: 8px;
-    width: 80%;
+    margin-right: 8px;
+    margin-left: 8px;
 }
 
 .center-aligned {
@@ -52,6 +51,14 @@ body {
     justify-content: center;
 }
 
+.start-justified {
+    justify-content: flex-start;
+}
+
+.eqn-label {
+    margin-right: 0.5em;
+}
+
 #reveal-definitions {
     display: none;
 }
@@ -87,8 +94,7 @@ body {
     border: 4px solid #222;
     padding: 1em;
     padding-bottom: 0.2em;
-    min-width: 90%;
-    align-self: center;
+    align-self: stretch;
 }
 
 .qvecs {
@@ -144,7 +150,6 @@ label {
 
 .hideable_control {
     /* container + control, copied to a single class for toggling */
-    width: 100%;
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-between;
@@ -153,6 +158,14 @@ label {
     align-items: flex-end;
 }
 
+.hideable_control > label {
+    padding-right: 2em;
+}
+
+.hideable_control > input {
+    flex: 0 0 50%;
+}
+
 .hideable_control--hidden {
     display: none;
 }

nearest.html

@@ -48,6 +48,13 @@
                             <option>Worst Cluster (ω)</option>
                         </select>
                     </div>
+
+                    <div class="panel dropdown">
+                        <label for="num-poke">
+                            Search limit: <span id="num-poke-display">10</span>
+                        </label>
+                        <input type="range" min="1" max="100" value="10" oninput="onLimitChanged()" id="num-poke">
+                    </div>
                 </div>
 
                 <div id="cluster-mean-warning" class="container center-justified hide">
@@ -73,16 +80,9 @@
                     <label for="close-coeff">Closeness coefficient: <span id="close-coeff-display">2</span></label>
                     <input type="range" min="0" max="10" value="2" step="0.1" oninput="onCustomControlsChanged()" id="close-coeff">
                 </div>
-
-                <div class="container control">
-                    <label for="num-poke" style="min-width: 200px;">
-                        Search limit: <span id="num-poke-display">10</span>
-                    </label>
-                    <input type="range" min="1" max="100" value="10" oninput="onLimitChanged()" id="num-poke">
-                </div>
             </form>
 
-            <input type="checkbox" id="reveal-definitions" role="button">
+            <input type="checkbox" checked id="reveal-definitions" role="button">
 
             <label id="reveal-def-label" for="reveal-definitions" style="width: 300px">
                 <div id="reveal-def-show">Show Definitions</div>
@@ -90,31 +90,24 @@
             </label>
             
             <div id="definitions" class="panel math-section">
-                <div class="container center-aligned center-justified">
-                    <div id="rms-definition"></div>
-                </div>
-                <div class="container center-aligned center-justified">
-                    <div id="main-definition"></div>
-                    <div id="k-definition"></div>
-                </div>
-                <div class="container center-aligned center-justified">
-                    <div id="cluster-definition"></div>
-                </div>
+                <div>Statistics</div>
+                <div id="main-definition"></div>
+                <hr>
+                <div>Clusters</div>
+                <div id="cluster-definition"></div>
             </div>
 
             <div class="panel math-section">
-                <div class="container center-aligned">
-                    <div id="q-vec-jab"></div>
-                    <div id="q-vec-rgb"></div>
-                </div>
+                <div id="q-vec-jab"></div>
+                <div id="q-vec-rgb"></div>
 
-                <div class="container center-aligned center-justified">
-                    <span style="margin-right: 0.5em;">Optimizing:</span>
+                <div class="container center-aligned start-justified">
+                    <span class="eqn-label">Optimizing:</span>
                     <span id="obj-fn"></span>
                 </div>
 
-                <div class="container center-aligned center-justified">
-                    <span style="margin-right: 0.5em;">Displaying:</span>
+                <div class="container center-aligned start-justified">
+                    <span class="eqn-label">Displaying:</span>
                     <span id="result-definition"></span>
                 </div>
             </div>

nearest.js

@@ -193,28 +193,22 @@ const mathArgBest = (mxn, arg) => `\\underset{${arg}}{\\arg\\${mxn}}`;
 const mathDefinitions = {
   "main-definition": String.raw`
     \begin{aligned}
+      \text{RMS}_{P}\left(q\right) &= \sqrt{E\left[\left|\left|\vec{q} - \vec{p}\right|\right|^2\right]} = \sqrt{\frac{1}{|P|}\sum_{p \in P}{\left|\left|\vec{p} - \vec{q}\right|\right|^2}} \\
       \vec{\mu}\left(P\right) &= \frac{1}{\left|P\right|}\sum_{p\in P}{\vec{p}} \\
       I\left(P\right) &= \frac{1}{\left|P\right|}\sum_{p\in P}{\left|\left|\vec{p}\right|\right|^2} \\
       \vec{x}_{\perp} &= \text{oproj}_{\left\{\vec{J}, \vec{L}\right\}}{\vec{x}} \\
       \Delta{\theta}\left(P\right) &= \angle \left(\vec{q}_{\perp}, \vec{\mu}\left(P\right)_{\perp} \right)
     \end{aligned}
   `,
-  "k-definition": String.raw`
-    \begin{aligned}
-      M\left(P\right) &= ${mathArgBest("max", "P_i")} \frac{\left|P_i\right|}{\left|P\right|} \\
-      m\left(P\right) &= ${mathArgBest("min", "P_i")} \frac{\left|P_i\right|}{\left|P\right|} \\
-      \alpha\left(P\right) &= ${mathArgBest("min", "P_i")} \frac{\left|P\right|}{\left|P_i\right|} \left|\left| \vec{q} - \vec{\mu}\left(P_i\right) \right|\right| \\
-      \omega\left(P\right) &= ${mathArgBest("max", "P_i")} \frac{\left|P\right|}{\left|P_i\right|} \left|\left| \vec{q} - \vec{\mu}\left(P_i\right) \right|\right|
-    \end{aligned}
-  `,
   "cluster-definition": String.raw`
     \begin{aligned}
-      \left\{P_1, P_2, P_3\right\} = ${mathArgBest("max", String.raw`\left\{P_1, P_2, P_3\right\}`)} \sum_{i=1}^3 \sum_{p\inP_i} \left|\left| \vec{p} - \vec{\mu}\left(P_i\right) \right|\right|^2
+      \left\{P_1, P_2, P_3\right\} &= ${mathArgBest("max", String.raw`\left\{P_1, P_2, P_3\right\}`)} \sum_{i=1}^3 \sum_{p\inP_i} \left|\left| \vec{p} - \vec{\mu}\left(P_i\right) \right|\right|^2 \\
+      M\left(P\right) &= ${mathArgBest("max", "P_i")} \left( \left|P_i\right| \right) \\
+      m\left(P\right) &= ${mathArgBest("min", "P_i")} \left( \left|P_i\right| \right) \\
+      \alpha\left(P\right) &= ${mathArgBest("min", "P_i")} \left[ \frac{\left|P\right|}{\left|P_i\right|} \left|\left| \vec{q} - \vec{\mu}\left(P_i\right) \right|\right| \right] \\
+      \omega\left(P\right) &= ${mathArgBest("max", "P_i")} \left[ \frac{\left|P\right|}{\left|P_i\right|} \left|\left| \vec{q} - \vec{\mu}\left(P_i\right) \right|\right| \right]
     \end{aligned}
   `,
-  "rms-definition": String.raw`
-    \text{RMS}_{P}\left(q\right) = \sqrt{E\left[\left|\left|\vec{q} - \vec{p}\right|\right|^2\right]} = \sqrt{\frac{1}{|P|}\sum_{p \in P}{\left|\left|\vec{p} - \vec{q}\right|\right|^2}}
-  `,
   "result-definition": String.raw`
     \left(
       \text{RMS}_P\left(q\right),
@@ -248,7 +242,7 @@ const updateObjective = () => {
   if (!tex) {
     const { includeX, normQY, closeCoeff } = state;
     if (!includeX && closeCoeff === 0) {
-      tex = TeXZilla.toMathML(String.raw`\text{Empty Metric}`);
+      tex = TeXZilla.toMathML(String.raw`\text{Malamar-ness}`);
     } else {
       const qyMod = normQY ? renderNorm : c => c;
       tex = TeXZilla.toMathML(String.raw`