Cache scores and tweak some layout

nearest.css

@@ -186,7 +186,7 @@ label {
         "bulb qvec qvec"
         "inpt qvec qvec"
         "rand liml limt"
-        "metr objf objf" 3em
+        "metr objf objf"
         "clst scal scal"
         ".    iner coef"
         ".    norm coef"

nearest.html

@@ -31,7 +31,7 @@
                 type="range" min="1" max="100" value="10" 
                 oninput="onLimitChanged(true)" onchange="onLimitChanged()" 
             >
-            <div style="grid-area: qvec; justify-self: start; align-self: end;">
+            <div style="grid-area: qvec; justify-self: start;">
                 <div id="q-vec-jab"></div>
                 <div id="q-vec-rgb"></div>
             </div>

nearest.js

@@ -118,6 +118,7 @@ const state = {
   targetColor: null,
   searchResults: null,
   clusterToggles: {},
+  currentScores: {},
 };
 
 // Metrics
@@ -356,7 +357,7 @@ const getPokemonRenderer = targetList =>  (name, stats, q, score, idPostfix) =>
         ${name.split("-").map(part => part.charAt(0).toUpperCase() + part.substr(1)).join(" ")}
       </span>
       <div class="pkmn_tile-fn">
-        ${score.toFixed(3)}
+        ${score?.toFixed(3) ?? ""}
       </div>
       <input 
         type="checkbox" 
@@ -416,44 +417,51 @@ const renderSearch = () => {
   const append = getPokemonRenderer(resultsNode);
   clearNodeContents(resultsNode);
   const argMapper = state.searchSpace === "RGB"
-    ? pkmn => [pkmn.rgbStats, state.targetColor?.rgbData, state.targetColor ? scorePokemon(pkmn).rgb : 0]
-    : pkmn => [pkmn.jabStats, state.targetColor?.jabData, state.targetColor ? scorePokemon(pkmn).jab : 0]
+    ? pkmn => [pkmn.rgbStats, state.targetColor?.rgbData, state.currentScores?.[pkmn.name]?.rgb ?? null]
+    : pkmn => [pkmn.jabStats, state.targetColor?.jabData, state.currentScores?.[pkmn.name]?.jab ?? null]
   state.searchResults?.forEach(pkmn => append(
     pkmn.name, ...argMapper(pkmn), "search"
   ));
 };
 
 // Scoring
-const rescore = () => {
-  if (!state.targetColor) {
-    return;
-  }
-
-  // TODO might like to save this somewhere instead of recomputing when limit changes
-  const scores = pokemonColorData.map(data => ({ ...data, scores: scorePokemon(data) }));
-
+const renderScored = () => {
   const jabList = getScoreListJABNode();
   const appendJAB = getPokemonRenderer(jabList);
   const rgbList = getScoreListRGBNode();
   const appendRGB = getPokemonRenderer(rgbList);
 
   // extract best CIECAM02 results
-  const bestJAB = scores
-    .sort((a, b) => a.scores.jab - b.scores.jab)
+  const bestJAB = pokemonColorData
+    .sort((a, b) => state.currentScores[a.name].jab - state.currentScores[b.name].jab)
     .slice(0, state.numPoke);
   clearNodeContents(jabList);
   bestJAB.forEach(data => appendJAB(
-    data.name, data.jabStats, state.targetColor.jabData, data.scores.jab, "jab"
+    data.name, data.jabStats, state.targetColor.jabData, state.currentScores[data.name].jab, "jab"
   ));
 
   // extract best RGB results
-  const bestRGB = scores
-    .sort((a, b) => a.scores.rgb - b.scores.rgb)
+  const bestRGB = pokemonColorData
+    .sort((a, b) => state.currentScores[a.name].rgb - state.currentScores[b.name].rgb)
     .slice(0, state.numPoke);
   clearNodeContents(rgbList);
   bestRGB.forEach(data => appendRGB(
-    data.name, data.rgbStats, state.targetColor.rgbData, data.scores.rgb, "rgb"
+    data.name, data.rgbStats, state.targetColor.rgbData, state.currentScores[data.name].rgb, "rgb"
   ));
+};
+
+const rescore = () => {
+  if (!state.targetColor) {
+    return;
+  }
+
+  state.currentScores = {};
+  pokemonColorData.forEach(data => {
+    state.currentScores[data.name] = scorePokemon(data);
+  });
+
+  // update displays
+  renderScored();
 
   // update the rendered search results as well
   renderSearch();
@@ -561,14 +569,13 @@ const onMetricChanged = skipScore => {
   }
 };
 
-const onLimitChanged = skipScore => {
+const onLimitChanged = skipRenderScore => {
   state.numPoke = parseInt(getLimitSliderNode()?.value ?? 10);
 
   getLimitDisplayNode().textContent = state.numPoke;
 
-  if (!skipScore) {
-    // TODO don't need to rescore just need to expand
-    rescore();
+  if (!skipRenderScore) {
+    renderScored();
   }
 };