Layout and metric improvements

web/index.html

@@ -19,14 +19,20 @@
         class="metric-fields | flex col small-gap"
       >
         <output hidden name="metric"></output>
-        <label>
-          <input type="radio" name="metricKind" value="compare" />
-          <div class="toggle-label | center pill-shape highlight-border">Comparison</div>
-        </label>
-        <label>
-          <input type="radio" name="metricKind" value="stat" />
-          <div class="toggle-label | center pill-shape highlight-border">Statistics</div>
-        </label>
+        <div class="flex center">
+          <label>
+            <input type="radio" name="metricKind" value="compare" />
+            <div class="toggle-label | center pill-shape highlight-border">
+              Comparison
+            </div>
+          </label>
+          <label>
+            <input type="radio" name="metricKind" value="stat" />
+            <div class="toggle-label | center pill-shape highlight-border">
+              Statistics
+            </div>
+          </label>
+        </div>
         <select class="pill-shape highlight-border" name="compare" disabled>
           <option value="alpha">Geometric Difference (α)</option>
           <option value="psi">RMS Distance (Ψ)</option>
@@ -39,10 +45,10 @@
         </select>
         <select class="pill-shape highlight-border" name="stat" disabled>
           <option value="beta">Visual Importance (β)</option>
-          <option value="size">Size (N)</option>
+          <option value="variance">Variance (σ²)</option>
           <option value="lightness">Mean Lightness (L̅)</option>
+          <option value="size">Size (N)</option>
           <option value="chroma">Mean Chroma (C̅)</option>
-          <option value="variance">Variance (σ²)</option>
         </select>
       </form>
     </template>
@@ -59,9 +65,9 @@
       <div>Δh&nbsp;=&nbsp;<span bind-to="deltaH"></span>°</div>
       <div class="pkmn-data-separator | full-grid-row" role="presentation"></div>
       <div>β&nbsp;=&nbsp;<span bind-to="beta"></span></div>
-      <div class="pkmn-data-size">N&nbsp;=&nbsp;<span bind-to="size"></span></div>
       <div>σ²&nbsp;=&nbsp;<span bind-to="variance"></span></div>
-      <div>L̅&nbsp;=&nbsp;<span bind-to="lightness"></span></div>
+      <div>L̅&nbsp;=&nbsp;<span bind-to="lightness"></span>%</div>
+      <div class="pkmn-data-size">N&nbsp;=&nbsp;<span bind-to="size"></span></div>
       <div>C̅&nbsp;=&nbsp;<span bind-to="chroma"></span></div>
       <div class="pkmn-data-separator | full-grid-row" role="presentation"></div>
       <div>a̅&nbsp;=&nbsp;<span bind-to="abar"></span></div>
@@ -74,24 +80,25 @@
       <div class="pkmn-tile | flex col no-gap">
         <div class="ellipsis emphasis" bind-to="name"></div>
         <div class="pkmn-info | highlight-border flex">
-          <div class="flex col small-gap">
+          <div class="pkmn-info-main | flex col">
             <a bind-to="link" href=""><img bind-to="image" /></a>
             <div class="math-font center" bind-to="score"></div>
+            <div class="smallest center">"<span bind-to="color"></span>"</div>
             <button
               bind-to="totalBtn"
               class="pkmn-total | math-font color-select"
             ></button>
-            <div class="total-info | math-font grid small-gap" bind-to="totalData"></div>
+            <div class="total-info | math-font grid" bind-to="totalData"></div>
           </div>
           <div class="cluster-buttons | math-font flex col">
             <button bind-to="cls1Btn" class="color-select" hidden></button>
-            <div class="cluster-info | grid small-gap" bind-to="cls1Data"></div>
+            <div class="cluster-info | grid" bind-to="cls1Data"></div>
             <button bind-to="cls2Btn" class="color-select" hidden></button>
-            <div class="cluster-info | grid small-gap" bind-to="cls2Data"></div>
+            <div class="cluster-info | grid" bind-to="cls2Data"></div>
             <button bind-to="cls3Btn" class="color-select" hidden></button>
-            <div class="cluster-info | grid small-gap" bind-to="cls3Data"></div>
+            <div class="cluster-info | grid" bind-to="cls3Data"></div>
             <button bind-to="cls4Btn" class="color-select" hidden></button>
-            <div class="cluster-info | grid small-gap" bind-to="cls4Data"></div>
+            <div class="cluster-info | grid" bind-to="cls4Data"></div>
           </div>
         </div>
       </div>
@@ -148,6 +155,7 @@
         <button type="button" form="targetColorForm" name="randomColor">
           Random Color
         </button>
+        <output class="center smaller" form="targetColorForm" name="info"></output>
         <div class="center">
           <label>
             <div class="emphasis">

web/main.js

@@ -65,20 +65,20 @@ const pokemonData = database.map(({ total, clusters, ...rest }) => ({
   total: {
     ...total,
     unitCentroid: unitVector(total.centroid),
-    lightness: total.centroid[0],
+    lightness: 100 * total.centroid[0],
     abar: total.centroid[1],
     bbar: total.centroid[2],
-    proportion: 1,
+    proportion: null,
     beta: 1,
     inverseSize: 1 / total.size,
   },
   clusters: clusters.map(c => ({
     ...c,
     unitCentroid: unitVector(c.centroid),
-    lightness: c.centroid[0],
+    lightness: 100 * c.centroid[0],
     abar: c.centroid[1],
     bbar: c.centroid[2],
-    proportion: c.size / total.size,
+    proportion: ((100 * c.size) / total.size).toFixed(2),
     beta: Math.sqrt((c.chroma * c.size) / total.size),
     inverseSize: 1 / c.size,
   })),
@@ -241,7 +241,7 @@ const createPokemonTooltip = makeTemplate("pkmn-data-template", data =>
       {
         innerText: Array.isArray(value)
           ? value.map(v => v.toFixed(2)).join(", ")
-          : value.toFixed?.(3)?.replace(".000", ""),
+          : value?.toFixed?.(3)?.replace(".000", ""),
       },
     ])
   )
@@ -249,7 +249,7 @@ const createPokemonTooltip = makeTemplate("pkmn-data-template", data =>
 
 const createPokemonTile = makeTemplate(
   "pkmn-tile-template",
-  ({ name, species }, enableTotalFlags, enableClusterFlags) => {
+  ({ name, species, color }, enableTotalFlags, enableClusterFlags) => {
     const formattedName = name
       .split("-")
       .map(part => part.charAt(0).toUpperCase() + part.substr(1))
@@ -325,7 +325,7 @@ const createPokemonTile = makeTemplate(
               included: enableClusterFlags && index === bestClusterIndices[name],
             },
             hidden: false,
-            innerText: data.hex,
+            innerText: data.hex + (data.proportion ? ` - ${data.proportion}%` : ""),
             "@click"() {
               model.setTargetColor(data.hex);
             },
@@ -345,6 +345,7 @@ const createPokemonTile = makeTemplate(
         title: formattedName,
       },
       image,
+      color: { innerText: color },
       link,
       score,
       ...buttonBinds,
@@ -377,7 +378,7 @@ const renderPokemon = (list, target) => {
   );
 
   target.append(
-    ...list.map(name => createPokemonTile(name, enableTotalFlags, enableClusterFlags)[0])
+    ...list.map(pkmn => createPokemonTile(pkmn, enableTotalFlags, enableClusterFlags)[0])
   );
 };
 
@@ -409,6 +410,11 @@ const model = {
     }
 
     const targetData = getColorData(hex);
+    targetColorElements.info.value = `
+      (${(targetData.vector[0] * 100).toFixed(2)}%,
+      ${targetData.chroma.toFixed(4)}, 
+      ${(targetData.hue * rad2deg).toFixed(1)}°)
+    `;
 
     pokemonData.forEach(({ name, total, clusters }) => {
       metricScores[name] = {

web/styles.css

@@ -122,6 +122,14 @@ body {
   font-weight: 600;
 }
 
+.smaller {
+  font-size: 0.875rem;
+}
+
+.smallest {
+  font-size: 0.75rem;
+}
+
 .center {
   text-align: center;
   margin-inline: auto;
@@ -259,7 +267,7 @@ button.color-select:hover {
 /* Pokemon Tiles */
 
 .pkmn-tile {
-  max-width: 24ch;
+  width: 28ch;
   padding-inline: 0.5ch;
   --tile-block-padding: 0.25rem;
   --tile-border-radius: 8px;
@@ -282,6 +290,11 @@ button.color-select:hover {
   margin-block-start: 0.25rem;
 }
 
+.pkmn-tile .pkmn-info-main {
+  flex: 1;
+  --gap: 0.125rem;
+}
+
 .pkmn-tile .cluster-buttons {
   position: relative;
   --gap: 0.125rem;
@@ -311,9 +324,8 @@ button.color-select:hover {
 .pkmn-tile button {
   font-size: 0.75rem;
   font-weight: 600;
-  /* padding-block-start: 0.35rem; */
-  padding-inline-start: 2ch;
-  padding-inline-end: 1ch;
+  padding: 0.125rem 1ch 0.125rem 2ch;
+  white-space: nowrap;
 }
 
 .pkmn-tile button[data-included="true"] {
@@ -357,7 +369,7 @@ button.color-select:hover {
 }
 
 .pkmn-tile .pkmn-data-size {
-  grid-column: 2 / -1;
+  grid-column: 1 / 3;
 }
 
 .pkmn-tile:hover {