Add data popups

form.js

@@ -25,6 +25,9 @@ const selectors = {
   get pokemonTemplate() {
     return document.getElementById("pkmn-template").content;
   },
+  get pokemonDataTemplate() {
+    return document.getElementById("pkmn-data-template").content;
+  },
   get colorSearchResults() {
     return document.getElementById("color-results");
   },
@@ -318,6 +321,15 @@ const getSprite = (() => {
   };
 })();
 
+const populateDataDialog = (data, dialog) =>
+  Object.entries(data).forEach(([metric, value]) => {
+    const target = dialog.querySelector(`.pkmn-data-value--${metric}`);
+    console.log(target);
+    if (target) {
+      target.innerText = value % 1 === 0 ? value : value.toFixed(3);
+    }
+  });
+
 const makePokemonTile = (name) => {
   const clone = selectors.pokemonTemplate.cloneNode(true);
 
@@ -337,20 +349,30 @@ const makePokemonTile = (name) => {
   const { total, clusters } = currentScores[name][selectors.colorSpace];
 
   const mu = clone.querySelector(".pkmn-total");
-  mu.innerText = total.muHex;
+  mu.appendChild(document.createTextNode(total.muHex));
   mu.style = `
     color: ${getContrastingTextColor(total.muHex)}; 
     background-color: ${total.muHex};
   `;
 
+  const totalDataDialog = selectors.pokemonDataTemplate.cloneNode(true);
+  populateDataDialog(total, totalDataDialog);
+  clone.querySelector("dialog").appendChild(totalDataDialog);
+
   clusters.forEach((cls, i) => {
     const clsDiv = clone.querySelector(`.pkmn-cls${i + 1}`);
-    clsDiv.firstChild.innerText = (cls.proportion * 100).toFixed(2) + "%";
-    clsDiv.lastChild.innerText = cls.muHex;
+    clsDiv.querySelector("span:first-child").innerText =
+      (cls.proportion * 100).toFixed(2) + "%";
+    clsDiv.querySelector("span:nth-child(2)").innerText = cls.muHex;
     clsDiv.style = `
       color: ${getContrastingTextColor(cls.muHex)}; 
       background-color: ${cls.muHex};
     `;
+    const dialog = clsDiv.querySelector("dialog");
+    dialog.removeAttribute("hidden");
+    const clsDataDialog = selectors.pokemonDataTemplate.cloneNode(true);
+    populateDataDialog(cls, clsDataDialog);
+    dialog.appendChild(clsDataDialog);
   });
 
   if (selectors.sortUseWholeImage) {

index.html

@@ -39,9 +39,9 @@
           </label>
         </div>
         <select name="whole" disabled>
+          <option value="alpha">Geometric Difference (α)</option>
           <option value="sigma">RMS Deviation (σ)</option>
           <option value="bigTheta">Cosine Difference (Θ)</option>
-          <option value="alpha" selected>Geometric Difference (α)</option>
         </select>
         <select name="mean" disabled>
           <option value="theta">Angular Difference (θ)</option>
@@ -52,28 +52,83 @@
           <option value="lightnessDiff">Lightness (ℓ)</option>
         </select>
         <select name="statistic" disabled>
+          <option value="importance">Visual Importance (β)</option>
           <option value="inertia">Inertia (I)</option>
           <option value="variance">Variance (V)</option>
           <option value="muNuAngle">Mu-Nu Angle (Φ)</option>
           <option value="size">Size (N)</option>
           <option value="lightness">Mean Lightness (L)</option>
           <option value="chroma">Mean Chroma (C)</option>
-          <option value="importance">Visual Importance (β)</option>
         </select>
         <output name="sortMetric" hidden aria-hidden="true"></output>
       </fieldset>
     </template>
 
+    <template id="pkmn-data-template">
+      α&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--alpha"></span>
+      σ&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--sigma"></span>
+      Θ&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--bigTheta"></span>
+      <hr />
+      θ&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--theta"></span>°
+      ϕ&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--phi"></span>°
+      δ&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--delta"></span>
+      M&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--manhattan"></span>
+      Ч&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--ch"></span>
+      ℓ&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--lightnessDiff"></span>
+      <hr />
+      β&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--importance"></span>
+      I&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--inertia"></span>
+      V&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--variance"></span>
+      Φ&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--muNuAngle"></span>°
+      N&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--size"></span>
+      L&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--lightness"></span>
+      C&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--chroma"></span>
+    </template>
+
     <template id="pkmn-template">
       <div class="pkmn">
         <img />
         <div class="pkmn-name"></div>
-        <div class="pkmn-total"></div>
+        <div
+          class="pkmn-total"
+          onmouseenter="event.target.querySelector('dialog').show()"
+          onmouseleave="event.target.querySelector('dialog').close()"
+        >
+          <dialog class="pkmn-data"></dialog>
+        </div>
         <div class="pkmn-score"></div>
-        <div class="pkmn-cls pkmn-cls1"><span></span><span></span></div>
-        <div class="pkmn-cls pkmn-cls2"><span></span><span></span></div>
-        <div class="pkmn-cls pkmn-cls3"><span></span><span></span></div>
-        <div class="pkmn-cls pkmn-cls4"><span></span><span></span></div>
+        <div
+          class="pkmn-cls pkmn-cls1"
+          onmouseenter="event.target.querySelector('dialog').show()"
+          onmouseleave="event.target.querySelector('dialog').close()"
+        >
+          <span></span><span></span>
+          <dialog class="pkmn-data" hidden></dialog>
+        </div>
+        <div
+          class="pkmn-cls pkmn-cls2"
+          onmouseenter="event.target.querySelector('dialog').show()"
+          onmouseleave="event.target.querySelector('dialog').close()"
+        >
+          <span></span><span></span>
+          <dialog class="pkmn-data" hidden></dialog>
+        </div>
+        <div
+          class="pkmn-cls pkmn-cls3"
+          onmouseenter="event.target.querySelector('dialog').show()"
+          onmouseleave="event.target.querySelector('dialog').close()"
+        >
+          <span></span><span></span>
+          <dialog class="pkmn-data" hidden></dialog>
+        </div>
+        <div
+          class="pkmn-cls pkmn-cls4"
+          onmouseenter="event.target.querySelector('dialog').show()"
+          onmouseleave="event.target.querySelector('dialog').close()"
+        >
+          <span></span><span></span>
+          <dialog class="pkmn-data" hidden></dialog>
+        </div>
       </div>
     </template>
 
@@ -138,7 +193,7 @@
         onchange="updateSort()"
       >
         <div class="fn-group">
-          <span>where B =&nbsp;</span>
+          <span class="center">where B =&nbsp;</span>
           <label class="fn-minmax fn-minmax--wide">
             <input type="checkbox" name="sortOrder" role="button" checked hidden />
             <div class="fn-minmax-toggle">
@@ -207,7 +262,7 @@
       <form action="javascript:void(0);" id="sortControl" autocomplete="off">
         <div>
           <label>
-            <div>Results:&nbsp;<output name="resultsToDisplayOutput">10</output></div>
+            <div>Results:&nbsp;<output name="resultsToDisplayOutput">6</output></div>
             <input
               name="resultsToDisplay"
               type="range"

styles.css

@@ -17,6 +17,10 @@ select:disabled {
   display: none;
 }
 
+.center {
+  text-align: center;
+}
+
 .pkmn {
   margin: 0.25rem;
   padding: 0.25rem;
@@ -47,6 +51,7 @@ select:disabled {
 }
 
 .pkmn > .pkmn-total {
+  position: relative;
   border: var(--highlight-border);
   border-radius: 100vmax;
   grid-area: total;
@@ -62,6 +67,7 @@ select:disabled {
 }
 
 .pkmn > .pkmn-cls {
+  position: relative;
   border: var(--highlight-border);
   border-radius: 100vmax;
   font-weight: 600;
@@ -104,6 +110,27 @@ select:disabled {
   grid-area: cls4;
 }
 
+.pkmn-data {
+  left: 100%;
+  z-index: 2;
+  color: var(--highlight);
+  background-color: var(--background);
+}
+
+.pkmn-data > hr {
+  color: var(--highlight);
+}
+
+.pkmn-total > .pkmn-data {
+  margin-inline-start: 0.5ch;
+}
+
+.pkmn-cls > .pkmn-data {
+  font-weight: 400;
+  margin-inline-start: 0.5ch;
+  transform: translateY(-50%);
+}
+
 #color-results,
 #name-results {
   min-width: fit-content;