Add indicators for cluster being used

web/listeners.js

@@ -8,7 +8,10 @@ const { rerenderSearch, onSearch, onRandomName } = (() => {
     node.innerHTML = "";
     results?.forEach(pkmn => {
       const li = document.createElement("li");
-      li.innerHTML = renderPokemonTile("search", pkmn.name, pkmn[state.space], currentScores[pkmn.name][state.space]);
+      li.innerHTML = renderPokemonTile(
+        "search", pkmn.name, pkmn[state.space], currentScores[pkmn.name][state.space], 
+        state.useCluster ? currentBestClusterIndices[pkmn.name][state.space] : -1,
+      );
       node.appendChild(li);
     })
   };
@@ -104,9 +107,15 @@ const onControlsChanged = state => {
     { sortMetric: state.sortMetric, sortOrder: sortOrders[state.sortOrder], scaleOption: scaleOptions[state.scaleOption] }
   ).forEach(pkmn => {
     const li = document.createElement("li");
-    li.innerHTML = renderPokemonTile("results", pkmn.name, pkmn[state.space], currentScores[pkmn.name][state.space]);
+    li.innerHTML = renderPokemonTile(
+      "results", pkmn.name, pkmn[state.space], currentScores[pkmn.name][state.space], 
+      state.useCluster ? currentBestClusterIndices[pkmn.name][state.space] : -1,
+    );
     resultList.appendChild(li);
   });
+
+  // Also rerender search just in case
+  rerenderSearch(state);
 };
 
 // Color

web/nearest.css

@@ -160,6 +160,11 @@ math {
   margin-left: 4px;
 }
 
+.pkmn-tile_indicator {
+  flex: 1;
+  text-align: center;
+}
+
 .pkmn-tile_vector {
   flex: 2;
   text-align: left;

web/render.js

@@ -74,7 +74,7 @@ const renderPokemonTileCluster = (area, totalSize, { mu, nu }, scores) => {
 
 const clusterToggles = {};
 
-const renderPokemonTile = (kind, name, { total: { mu, nu, size }, clusters }, scores) => {
+const renderPokemonTile = (kind, name, { total: { mu, nu, size }, clusters }, scores, bestClusterIndex) => {
   const clusterToggleId = `${name}-${kind}-pkmn-expand-toggle`;
   const textColor = getContrastingTextColor(mu.hex);
 
@@ -137,6 +137,12 @@ const renderPokemonTile = (kind, name, { total: { mu, nu, size }, clusters }, sc
               ["N =", size],
             ].map(([lbl, val, cls]) => renderStatPair(lbl, val, cls))
           )}
+          ${ bestClusterIndex < 0 ? "" : `<hr style="width: 80%; color: ${textColor}"/>` }
+          ${ renderStatRow([
+            `<span class="pkmn-tile_indicator">${bestClusterIndex === 0 ? "▼" : ""}</span>`,
+            `<span class="pkmn-tile_indicator">${bestClusterIndex === 1 ? "▼" : ""}</span>`,
+            `<span class="pkmn-tile_indicator">${bestClusterIndex === 2 ? "▼" : ""}</span>`,
+          ])}
         </div>
       </div>
       ${clusters.map((c, i) => renderPokemonTileCluster(`cls${i+1}`, size, c, scores.clusters[i])).join("\n")}

web/score.js

@@ -1,4 +1,5 @@
 const currentScores = {};
+const currentBestClusterIndices = {};
 
 const rescoreAll = target => pokemonData.forEach(({ name, jab, rgb }) => {
   currentScores[name] = {
@@ -27,6 +28,8 @@ const getBest = (number, space, clusterSettings, { sortMetric, scaleOption, sort
   if (clusterSettings) {
     valueExtractor = pkmn => {
       const index = getBestClusterIndex(pkmn, space, clusterSettings);
+      // 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];      
     };