Add an option to multiply cluster metrics by total metric

nearest.html

@@ -25,6 +25,7 @@
         sortMetric: "importance",
         scaleOption: "none",
         sortOrder: "max",
+        multWithTotal: true,
       },
       space: "jab",
       sortMetric: "alpha",
@@ -88,6 +89,7 @@
         <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-cluster-mult-total"></div>
         <hr class="toggle-off" style="color: var(--highlight); margin-top: 1em;" />
         <div class="toggle-off" style="margin-top: 16px; text-align: center;" id="collapsed-scale"></div>
         <div class="toggle-on">▼ Controls</div>
@@ -174,6 +176,16 @@
             <option value="size">Image size</option>
             <option value="inverseSize">Inverse image size</option>
           </select>
+          <div class="toggle-box" style="grid-area: mult;">
+            <input autocomplete="off" type="checkbox" class="toggle-button" id="multiply-toggle" role="button"
+              checked onchange="state.clusterSettings.multWithTotal = event.target.checked; onControlsChanged(state)">
+            <label for="multiply-toggle"
+              style="display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; padding-bottom: 0.5em;">
+              And
+              <span class="toggle-off">&nbsp;do not&nbsp;</span>
+              multiply by whole image score
+            </label>
+          </div>
           <div
             style="grid-area: disp; padding-top: 0.5em; padding-bottom: 0.5em; padding-top: 0.5em; padding-bottom: 0.5em; justify-self: center; overflow: hidden;"
             id="cluster-metric-display" class="toggle-on"></div>

web/listeners.js

@@ -68,6 +68,7 @@ const onControlsChanged = state => {
   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]("K")[0] || "1") : "";
+  document.getElementById("collapsed-cluster-mult-total").innerHTML = state.useCluster && state.clusterSettings.multWithTotal ? TeXZilla.toMathMLString(metrics[state.sortMetric].displayName) : "";
   document.getElementById("collapsed-scale").innerHTML = state.useCluster ? TeXZilla.toMathMLString(scaleOptionsDisplay[state.scaleOption]("K")[0] || "1") : "";
   document.getElementById("metric-display").innerHTML = TeXZilla.toMathMLString(`
     ${metrics[state.sortMetric].displayName}\\left(P\\right) = ${metrics[state.sortMetric].displayBody("P", state.space)}
@@ -90,10 +91,15 @@ const onControlsChanged = state => {
     \\begin{aligned}
     &\\${state.sortOrder}_{P}\\left[
       ${scaleDisplay} ${metrics[state.sortMetric].displayName}\\left(${arg}\\right)
+      ${state.clusterSettings.multWithTotal ? `${metrics[state.sortMetric].displayName}\\left(P\\right)` : ""}
     \\right]\\\\
     = 
     &\\${state.sortOrder}_{P}\\left[
-      ${scaleDisplay} ${scaleDisplayL} ${metrics[state.sortMetric].displayBody(arg, state.space)} ${scaleDisplayR}
+      \\begin{aligned}
+        &${scaleDisplay}\\\\
+        *&${scaleDisplayL} ${metrics[state.sortMetric].displayBody(arg, state.space)} ${scaleDisplayR} 
+        ${state.clusterSettings.multWithTotal ? `\\\\ \n *&\\left(${metrics[state.sortMetric].displayBody("P", state.space)}\\right)` : ""}
+      \\end{aligned}
     \\right]
     \\end{aligned}
   `);
@@ -103,7 +109,14 @@ const onControlsChanged = state => {
   resultList.innerHTML = "";
   getBest(
     state.number, state.space, 
-    state.useCluster ? { sortMetric: state.clusterSettings.sortMetric, sortOrder: sortOrders[state.clusterSettings.sortOrder], scaleOption: scaleOptions[state.clusterSettings.scaleOption] } : null, 
+    state.useCluster 
+      ? { 
+          sortMetric: state.clusterSettings.sortMetric, 
+          sortOrder: sortOrders[state.clusterSettings.sortOrder], 
+          scaleOption: scaleOptions[state.clusterSettings.scaleOption],
+          multWithTotal: state.clusterSettings.multWithTotal,
+        } 
+      : null, 
     { sortMetric: state.sortMetric, sortOrder: sortOrders[state.sortOrder], scaleOption: scaleOptions[state.scaleOption] }
   ).forEach(pkmn => {
     const li = document.createElement("li");

web/nearest.css

@@ -116,6 +116,7 @@ math {
     "blbl clus"
     "disp disp"
     "slbl scal"
+    "mult mult"
     /10em auto
   ;
   justify-items: stretch;

web/score.js

@@ -31,7 +31,12 @@ const getBest = (number, space, clusterSettings, { sortMetric, scaleOption, sort
       // save the index for rendering
       currentBestClusterIndices[pkmn.name] = { ...(currentBestClusterIndices[pkmn.name] || {}), [space]: index };
       // and then get the *actual* score according to the sort metric
-      return scaleOption(pkmn[space])[index] * currentScores[pkmn.name][space].clusters[index][sortMetric];      
+      const clusterScore =  scaleOption(pkmn[space])[index] * currentScores[pkmn.name][space].clusters[index][sortMetric];
+      if (!clusterSettings.multWithTotal) {
+        return clusterScore;
+      }
+      // and then multiply it with the total score if that's needed
+      return clusterScore * currentScores[pkmn.name][space].total[sortMetric];
     };
   } else {
     // ignore scaleOption if not using clusters