Add first two Z-based metrics - probably want to expand this in the future to have actual substitution for Y

nearest.html

@@ -32,6 +32,8 @@
                         <option>Mean Angle</option>
                         <option>Mean Distance</option>
                         <option>Hue Angle</option>
+                        <option>Best Z Distance</option>
+                        <option>Worst Z Distance</option>
                         <option>Custom Metric</option>
                     </select>
                 </div>

nearest.js

@@ -113,6 +113,15 @@ const scoringMetrics = [
     angleDiff(state.targetColor.qHueAngleJAB, yHueAngleJAB),
     angleDiff(state.targetColor.qHueAngleRGB, yHueAngleRGB),
   ],
+  // TODO - might want an alternative metric of subbing these Z's in for Y
+  ({ zJAB, zRGB }) => [
+    Math.min(...zJAB.map(z => vectorSqDist(z, state.targetColor.qJAB))), 
+    Math.min(...zRGB.map(z => vectorSqDist(z, state.targetColor.qRGB))), 
+  ],
+  ({ zJAB, zRGB }) => [
+    Math.max(...zJAB.map(z => vectorSqDist(z, state.targetColor.qJAB))), 
+    Math.max(...zRGB.map(z => vectorSqDist(z, state.targetColor.qRGB))), 
+  ],
   ({ xJAB, xRGB, yJAB, yRGB, yJABHat, yRGBHat }) => [
     (state.includeX ? xJAB : 0) - state.closeCoeff * vectorDot(
       state.normQY ? yJABHat : yJAB,
@@ -122,7 +131,7 @@ const scoringMetrics = [
       state.normQY ? yRGBHat : yRGB,
       state.normQY ? state.targetColor.qRGBHat : state.targetColor.qRGB
     ),
-  ]
+  ],
 ];
 
 const calcDisplayMetrics = ({
@@ -136,6 +145,8 @@ const calcDisplayMetrics = ({
   const cosAngleRGB = vectorDot(state.targetColor.qRGBHat, yRGBHat);
   const yTermRGB = cosAngleRGB * yRGBNorm * state.targetColor.qRGBNorm;
 
+  // TODO Z-dists?
+
   return {
     stdDevRGB: Math.sqrt(xRGB - 2 * yTermRGB + state.targetColor.qRGBNormSq),
     stdDevJAB: Math.sqrt(xJAB - 2 * yTermJAB + state.targetColor.qJABNormSq),
@@ -190,6 +201,8 @@ const metricText = [
   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}`,
+  String.raw`\left|\left| \vec{q} - \vec{Z}_{\text{best}}\left(P\right) \right|\right|`,
+  String.raw`\left|\left| \vec{q} - \vec{Z}_{\text{worst}}\left(P\right) \right|\right|`,
 ].map(s => TeXZilla.toMathML(s));
 
 const renderVec = math => String.raw`\vec{${math.charAt(0)}}${math.substr(1)}`;
@@ -385,7 +398,7 @@ const onMetricChanged = skipScore => {
     return;
   }
   state.metric = metric;
-  if (state.metric === 4) { // Custom
+  if (state.metric === 6) { // Custom
     showCustomControls();
     onCustomControlsChanged(skipScore); // triggers rescore
   } else {