Refactor definitions, add Z definitions

nearest.css

@@ -41,6 +41,37 @@ body {
     justify-content: center;
 }
 
+#reveal-definitions {
+    display: none;
+}
+
+#reveal-definitions:checked~#definitions {
+    display: flex;
+}
+
+#reveal-definitions:checked~#reveal-def-label > #reveal-def-hide {
+    display: block;
+}
+
+#reveal-definitions:checked~#reveal-def-label > #reveal-def-show {
+    display: none;
+}
+
+#reveal-def-hide {
+    display: none;
+    margin-bottom: 0.5em;
+}
+
+#reveal-def-show {
+    display: block;
+    margin-bottom: 0.5em;
+}
+
+#definitions {
+    display: none;
+    margin-bottom: 0.2em;
+}
+
 .math-section {
     border: 4px solid #222;
     padding: 1em;

nearest.html

@@ -59,17 +59,38 @@
                 </div>
             </form>
 
-            <div class="panel math-section">
-                <div class="container center-aligned">
+            <input type="checkbox" id="reveal-definitions" role="button">
+
+            <label id="reveal-def-label" for="reveal-definitions" style="width: 300px">
+                <div id="reveal-def-show">Show Definitions</div>
+                <div id="reveal-def-hide">Hide Definitions</div>
+            </label>
+            
+            <div id="definitions" class="panel math-section">
+                <div class="container center-aligned center-justified">
                     <div class="panel">
                         <div id="x-definition"></div>
                         <div id="y-definition"></div>
                     </div>
-                    <div class="panel qvecs">
-                        <div id="q-vec-jab"></div>
-                        <div id="q-vec-rgb"></div>
+                    <div class="panel">
+                        <div id="z-best-definition"></div>
+                        <div id="z-worst-definition"></div>
                     </div>
                 </div>
+                <div class="container center-aligned center-justified">
+                    <div id="cluster-definition"></div>
+                </div>
+                <div class="container center-aligned center-justified">
+                    <div id="del-h-definition"></div>
+                    <div id="v-perp-definition"></div>
+                </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 class="container center-aligned center-justified">
                     <span style="margin-right: 0.5em;">Optimizing:</span>

nearest.js

@@ -15,9 +15,6 @@ const getHideableControlNodes = () => document.querySelectorAll(".hideable_contr
 const getQJABDisplay = () => document.getElementById("q-vec-jab");
 const getQRGBDisplay = () => document.getElementById("q-vec-rgb");
 const getObjFnDisplay = () => document.getElementById("obj-fn");
-const getXDefinitionDisplay = () => document.getElementById("x-definition");
-const getYDefinitionDisplay = () => document.getElementById("y-definition");
-const getResultDefinitionDisplay = () => document.getElementById("result-definition");
 
 const clearNodeContents = node => { node.innerHTML = ""; };
 const hideCustomControls = () => getHideableControlNodes()
@@ -156,25 +153,43 @@ const renderQVec = (q, node, sub) => {
   node.innerHTML = TeXZilla.toMathMLString(String.raw`\vec{q}_{\text{${sub}}} = \left(\text{${q.join(", ")}}\right)`);
 };
 
-const xDefinition = TeXZilla.toMathML(String.raw`
-  X\left(P\right) = \frac{1}{\left|P\right|}\sum_{p\inP}{\left|\left|\vec{p}\right|\right|^2}
-`);
-const yDefinition = TeXZilla.toMathML(String.raw`
-  \vec{Y}\left(P\right) = \frac{1}{\left|P\right|}\sum_{p\inP}{\vec{p}}
-`);
-const resultDefinition = TeXZilla.toMathML(String.raw`
-  \left(
-    \text{RMS}_P\left(q\right), 
-    \angle \left(\vec{q}, \vec{Y}\left(P\right)\right), 
-    \left|\left| \vec{q} - \vec{Y}\left(P\right) \right|\right|,
-    \Delta{H}
-  \right)
-`);
+const mathDefinitions = {
+  "x-definition": String.raw`
+    X\left(P\right) = \frac{1}{\left|P\right|}\sum_{p\in P}{\left|\left|\vec{p}\right|\right|^2}
+  `,
+  "y-definition": String.raw`
+    \vec{Y}\left(P\right) = \frac{1}{\left|P\right|}\sum_{p\in P}{\vec{p}}
+  `,
+  "v-perp-definition": String.raw`
+    \vec{v}_{\perp} = \text{oproj}_{\left\{\vec{J}, \vec{L}\right\}}{\vec{v}}
+  `,
+  "del-h-definition": String.raw`
+    \Delta{H} = \angle \left(\vec{q}_{\perp}, \vec{Y}_{\perp}\left(P\right) \right)
+  `,
+  "cluster-definition": String.raw`
+    \left\{P_1, P_2, P_3\right\} = \arg\min_{\left\{P_1, P_2, P_3\right\}} \sum_{i=1}^3 \sum_{p\inP_i} \left|\left| \vec{p} - \vec{Y}\left(P_i\right) \right|\right|^2
+  `,
+  "z-best-definition": String.raw`
+    \vec{Z}_{\text{best}}\left(P\right) = \vec{Y}\left(\arg\min_{P_i} \left|\left| \vec{q} - \vec{Y}\left(P_i\right) \right|\right| \right)
+  `,
+  "z-worst-definition": String.raw`
+    \vec{Z}_{\text{worst}}\left(P\right) = \vec{Y}\left(\arg\max_{P_i} \left|\left| \vec{q} - \vec{Y}\left(P_i\right) \right|\right| \right)
+  `,
+  "result-definition": String.raw`
+    \left(
+      \text{RMS}_P\left(q\right), 
+      \angle \left(\vec{q}, \vec{Y}\left(P\right)\right), 
+      \left|\left| \vec{q} - \vec{Y}\left(P\right) \right|\right|,
+      \Delta{H}
+    \right)
+  `,
+};
+
 const metricText = [
   String.raw`\text{RMS}_{P}\left(q\right) ~ \arg\min_{P}\left[X\left(P\right) - 2\vec{q}\cdot \vec{Y}\left(P\right)\right]`,
   String.raw`\angle \left(\vec{q}, \vec{Y}\left(P\right)\right) ~ \arg\max_{P}\left[\cos\left(\angle \left(\vec{q}, \vec{Y}\left(P\right)\right)\right)\right]`,
   String.raw`\left|\left| \vec{q} - \vec{Y}\left(P\right) \right|\right| ~ \arg\min_{P}\left[\left|\left| \vec{q} - \vec{Y}\left(P\right) \right|\right|^2\right]`,
-  String.raw`\Delta{H} = \angle \left(\vec{q}_{\perp}, \vec{Y}_{\perp}\left(P\right) \right), \vec{v}_{\perp} = \text{oproj}_{\left\{\vec{J}, \vec{L}\right\}}{\vec{v}}`,
+  String.raw`\Delta{H}`,
 ].map(s => TeXZilla.toMathML(s));
 
 const renderVec = math => String.raw`\vec{${math.charAt(0)}}${math.substr(1)}`;
@@ -413,9 +428,9 @@ const onRandomPokemon = () => {
 
 const onPageLoad = () => {
   // render static explanations
-  getXDefinitionDisplay().appendChild(xDefinition);
-  getYDefinitionDisplay().appendChild(yDefinition);
-  getResultDefinitionDisplay().appendChild(resultDefinition);
+  Object.entries(mathDefinitions).forEach(([id, tex]) => {
+    document.getElementById(id).appendChild(TeXZilla.toMathML(tex));
+  });
 
   // fake some events but don't do any scoring
   onColorChanged(true);