Add scaling controls, fix structure

form.js

@@ -6,11 +6,14 @@ const selectors = {
     return document.forms.clusterControl.elements;
   },
   get colorSpace() {
-    return selectors.colorSpace.value;
+    return selectors.sortControl.colorSpace.value;
+  },
+  get useClusters() {
+    return selectors.sortControl.useClusters.value;
   },
 };
 
-const onMetricChange = (elements) => {
+const onMetricChange = (elements, skipUpdates = false) => {
   elements.sortOrderLabel.value = elements.sortOrder.checked
     ? "Maximizing"
     : "Minimizing";
@@ -20,11 +23,13 @@ const onMetricChange = (elements) => {
   elements.statistic.disabled = kind !== "statistic";
   elements.sortMetric.value = elements[kind].value;
 
-  updateSort();
-  showResults(selectors.sortControl.resultsToDisplay.value);
+  if (!skipUpdates) {
+    updateSort();
+    showResults(selectors.sortControl.resultsToDisplay.value);
+  }
 };
 
-const onColorChange = (inputValue) => {
+const onColorChange = (inputValue, skipUpdates = false) => {
   console.log(inputValue);
   const colorInput = "#" + (inputValue?.replace("#", "") ?? "FFFFFF");
 
@@ -44,9 +49,11 @@ const onColorChange = (inputValue) => {
   // TODO last color saver
   // TODO bg + text color change
 
-  updateScores(rgb);
-  updateSort();
-  showResults(selectors.sortControl.resultsToDisplay.value);
+  if (!skipUpdates) {
+    updateScores(rgb);
+    updateSort();
+    showResults(selectors.sortControl.resultsToDisplay.value);
+  }
 };
 
 const calcScores = (data, target) => {
@@ -126,11 +133,18 @@ window.onload = () => {
   selectors.sortControl.metric.appendChild(metricTemplate.cloneNode(true));
   selectors.sortControl.metricKind.value = "whole";
   selectors.sortControl.whole.value = "alpha";
-  onMetricChange(selectors.sortControl);
+  onMetricChange(selectors.sortControl, true);
 
   selectors.clusterControl.metric.appendChild(metricTemplate.cloneNode(true));
   selectors.clusterControl.sortOrder.checked = true;
   selectors.clusterControl.metricKind.value = "statistic";
   selectors.clusterControl.statistic.value = "importance";
-  onMetricChange(selectors.clusterControl);
+  onMetricChange(selectors.clusterControl, true);
+
+  const scaleTemplate = document.getElementById("scale-form-template").content;
+  selectors.sortControl.rescaleSection.appendChild(scaleTemplate.cloneNode(true));
+  selectors.sortControl.rescaleFactor.value = "none";
+
+  selectors.clusterControl.rescaleSection.appendChild(scaleTemplate.cloneNode(true));
+  selectors.clusterControl.rescaleFactor.value = "inverse";
 };

index.html

@@ -66,6 +66,39 @@
       <output name="sortMetric" hidden aria-hidden="true"></output>
     </template>
 
+    <template id="scale-form-template">
+      <div>
+        <label>
+          <input type="radio" name="rescaleFactor" value="none" />
+          None
+        </label>
+      </div>
+      <div>
+        <label>
+          <input type="radio" name="rescaleFactor" value="direct" />
+          Cluster Size
+        </label>
+      </div>
+      <div>
+        <label>
+          <input type="radio" name="rescaleFactor" value="inverse" />
+          Inverse Cluster Size
+        </label>
+      </div>
+      <div>
+        <label>
+          <input type="radio" name="rescaleFactor" value="size" />
+          Image Size
+        </label>
+      </div>
+      <div>
+        <label>
+          <input type="radio" name="rescaleFactor" value="inverseSize" />
+          Inverse Image Size
+        </label>
+      </div>
+    </template>
+
     <form action="javascript:void(0);" id="sortControl" autocomplete="off">
       <div>
         <label>
@@ -118,13 +151,14 @@
         <legend>Distance Metric</legend>
         <!-- template mount point -->
       </fieldset>
-    </form>
-
-    <form action="javascript:void(0);" id="clusterControl" autocomplete="off">
+      <fieldset name="rescaleSection" onchange="updateSort()">
+        <legend>Scaled By</legend>
+        <!-- template mount point -->
+      </fieldset>
       <fieldset
         onchange="
           const elements = event.target.form.elements;
-          elements.metric.hidden = elements.useClusters.value === 'off';
+          document.forms.clusterControl.hidden = elements.useClusters.value === 'off';
           onMetricChange(elements);
         "
       >
@@ -137,14 +171,28 @@
         </div>
         <div>
           <label>
-            <input type="radio" name="useClusters" value="on" checked />
+            <input type="radio" name="useClusters" value="on" />
             Best Cluster
           </label>
         </div>
-        <fieldset name="metric">
-          <legend>Cluster Ranking</legend>
-          <!-- template mount point -->
-        </fieldset>
+        <div>
+          <label>
+            <input type="radio" name="useClusters" value="mult" checked />
+            Best Cluster Times Whole
+          </label>
+        </div>
+      </fieldset>
+    </form>
+
+    <form action="javascript:void(0);" id="clusterControl" autocomplete="off">
+      <div>Cluster Ranking</div>
+      <fieldset name="metric" onchange="onMetricChange(event.target.form.elements)">
+        <legend>Distance Metric</legend>
+        <!-- template mount point -->
+      </fieldset>
+      <fieldset name="rescaleSection" onchange="updateSort()">
+        <legend>Scaled By</legend>
+        <!-- template mount point -->
       </fieldset>
     </form>
   </body>