First pass at form layout

listeners.js

@@ -71,13 +71,15 @@ const onControlsChanged = state => {
   }
   const [ scaleDisplayL, scaleDisplayR ] = state.useCluster ? scaleOptionsDisplay[state.scaleOption](arg) : ["", ""];
   document.getElementById("final-metric-display").innerHTML = TeXZilla.toMathMLString(`
-    \\${state.sortOrder}_{P}\\left[
+    \\begin{aligned}
+    &\\${state.sortOrder}_{P}\\left[
       ${scaleDisplayL.slice(0, -6)} ${metrics[state.sortMetric].displayName(arg)}
-    \\right]
-    =
-    \\${state.sortOrder}_{P}\\left[
+    \\right]\\\\
+    = 
+    &\\${state.sortOrder}_{P}\\left[
       ${scaleDisplayL} ${metrics[state.sortMetric].displayBody(arg)} ${scaleDisplayR}
     \\right]
+    \\end{aligned}
   `);
 
   // Update the current best

nearest.css

@@ -1,455 +1,492 @@
 :root {
-    --highlight: #ddd;
-    --background: #222;
-    --tile-width: 480px;
+  --highlight: #ddd;
+  --background: #222;
+  --tile-width: 480px;
 }
 
 body {
-    width: 99%;
-    padding-top: 4px;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-    color: var(--highlight);
-    background-color: var(--background);
+  width: 99%;
+  padding-top: 4px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  color: var(--highlight);
+  background-color: var(--background);
+  margin: 8px;
+}
+
+math {
+  font-size: 12px;
 }
 
 .hide {
-    display: none !important;
+  display: none !important;
 }
 
 /* Toggles */
 
 .toggle-box {
-    display: block;
+  display: block;
 }
 
 .toggle-box > .toggle-off {
-    display: block;
+  display: block;
 }
 
 .toggle-box > .toggle-on {
-    display: none;
+  display: none;
 }
 
 .toggle-box > label > .toggle-off {
-    display: block;
+  display: block;
 }
 
 .toggle-box > label > .toggle-on {
-    display: none;
+  display: none;
 }
 
 .toggle-box > .toggle-button {
-    display: none;
+  display: none;
 }
 
 .toggle-box > .toggle-button:checked ~ .toggle-off {
-    display: none;
+  display: none;
 }
 
 .toggle-box > .toggle-button:checked ~ .toggle-on {
-    display: block;
+  display: block;
 }
 
 .toggle-box > .toggle-button:checked ~ label > .toggle-off {
-    display: none;
+  display: none;
 }
 
 .toggle-box > .toggle-button:checked ~ label > .toggle-on {
-    display: block;
+  display: block;
+}
+
+/* Controls */
+.control-grid {
+  margin-top: 16px;
+  display: grid;
+  gap: 4px 8px;
+  grid:
+    "bulb inpt rand"
+    "cspc cspc cspc"
+    "sort metr metr"
+    "disp disp disp" 4em
+    /1fr  8em  auto
+  ;
+  justify-items: stretch;
+  align-items: center;
+}
+
+.cluster-grid {
+  margin-bottom: 16px;
+  display: grid;
+  gap: 4px 8px;
+  grid:
+    "albl albl"
+    "sort metr"
+    "blbl clus"
+    "disp disp"
+    "slbl scal"
+    /10em 10em
+  ;
+  justify-items: stretch;
+  align-items: center;
 }
 
 /* 
 .container {
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: space-between;
-    align-items: flex-start;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
 }
 
 @media (min-width: 1000px) {
-    .container {
-        flex-direction: row;
-    }
+  .container {
+    flex-direction: row;
+  }
 }
 
 .start-justified {
-    justify-content: flex-start;
+  justify-content: flex-start;
 }
 
 .panel {
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: flex-start;
-    align-items: stretch;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: stretch;
 }
 
 @media (min-width: 1500px) {
-    .rpanel {
-        flex-direction: row;
-    }
+  .rpanel {
+    flex-direction: row;
+  }
 
-    .rpanel > :last-child {
-        margin-left: 16px;
-    }
+  .rpanel > :last-child {
+    margin-left: 16px;
+  }
 }
 
 .center-text {
-    text-align: center;
+  text-align: center;
 }
 
 .config {
-    width: 100%;
-    margin-bottom: 16px;
+  width: 100%;
+  margin-bottom: 16px;
 }
 
 .dropdown {
-    flex: 1;
-    justify-content: space-between;
-    align-items: center;
+  flex: 1;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .dropdown > select {
-    margin-top: 8px;
-    margin-right: 8px;
-    margin-left: 8px;
+  margin-top: 8px;
+  margin-right: 8px;
+  margin-left: 8px;
 }
 
 .center-aligned {
-    align-items: center;
+  align-items: center;
 }
 
 .center-justified {
-    justify-content: center;
+  justify-content: center;
 }
 
 .start-justified {
-    justify-content: flex-start;
+  justify-content: flex-start;
 }
 
 .eqn-label {
-    margin-right: 0.5em;
+  margin-right: 0.5em;
 }
 
 #reveal-definitions {
-    display: none;
+  display: none;
 }
 
 #reveal-definitions:checked ~ .definitions {
-    display: block;
+  display: block;
 }
 
 #reveal-definitions:checked ~ * > .definitions {
-    display: block;
+  display: block;
 }
 
 #reveal-definitions:checked ~ #reveal-def-label > #reveal-def-hide {
-    display: block;
+  display: block;
 }
 
 #reveal-definitions:checked ~ #reveal-def-label > #reveal-def-show {
-    display: none;
+  display: none;
 }
 
 #reveal-def-hide {
-    display: none;
-    margin-bottom: 0.5em;
+  display: none;
+  margin-bottom: 0.5em;
 }
 
 #reveal-def-show {
-    display: block;
-    margin-bottom: 0.5em;
+  display: block;
+  margin-bottom: 0.5em;
 }
 
 .definitions {
-    display: none;
-    /* evil trick to allow running into margins /
-    max-width: 0px;
-    overflow: visible;
+  display: none;
+  /* evil trick to allow running into margins /
+  max-width: 0px;
+  overflow: visible;
 }
 
 .math-section {
-    border: 2px solid var(--highlight);
-    padding: 0.3em;
-    margin-bottom: 0.2em;
-    align-self: stretch;
+  border: 2px solid var(--highlight);
+  padding: 0.3em;
+  margin-bottom: 0.2em;
+  align-self: stretch;
 }
 
 #obj-fn {
-    display: inline-flex;
-    flex-flow: column nowrap;
-    justify-content: center;
+  display: inline-flex;
+  flex-flow: column nowrap;
+  justify-content: center;
 }
 
 .padded {
-    padding-left: 16px;
-    padding-right: 16px;
+  padding-left: 16px;
+  padding-right: 16px;
 }
 
 .title {
-    font-weight: 1000;
+  font-weight: 1000;
 }
 
 .control {
-    height: 32px;
-    align-items: flex-end;
+  height: 32px;
+  align-items: flex-end;
 }
 
 .control > * {
-    flex: 1;
+  flex: 1;
 }
 
 .control > button {
-    margin-left: 16px;
-    margin-right: 16px;
+  margin-left: 16px;
+  margin-right: 16px;
 }
 
 .control > input {
-    max-width: 10em;
+  max-width: 10em;
 }
 
 #bulba-wrapper {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
 }
 
 label {
-    white-space: nowrap
+  white-space: nowrap
 }
 
 .hideable_control {
-    display: flex;
-    flex-flow: row nowrap;
+  display: flex;
+  flex-flow: row nowrap;
 }
 
 .hideable_control--hidden {
-    display: none;
+  display: none;
 }
 
 .pkmn-list {
-    display: none;
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-    margin-top: 8px;
-    margin-left: 8px;
-    margin-bottom: 16px;
-    width: 100%;
+  display: none;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  margin-top: 8px;
+  margin-left: 8px;
+  margin-bottom: 16px;
+  width: 100%;
 }
 
 .show-list {
-    display: none;
+  display: none;
 }
 
 .show-list:checked ~ .pkmn-list {
-    display: block;
+  display: block;
 }
 
 .show-list-lbl-hide {
-    display: none;
+  display: none;
 }
 
 .show-list:checked ~ * > .show-list-lbl-hide {
-    display: block;
+  display: block;
 }
 
 .show-list-lbl-show {
-    display: block;
+  display: block;
 }
 
 .show-list:checked ~ * > .show-list-lbl-show {
-    display: none;
+  display: none;
 }
 
 #search-space-button {
-    width: 3em;
+  width: 3em;
 }
 
 #controls {
-    width: calc(var(--tile-width) + 32px);
-    display: grid;
-    gap: 4px 16px;
-    grid:
-        "bulb inpt rand"
-        "liml qvec qvec" 1.5em
-        "limt qvec qvec" 1.5em
-        "metr objf objf"
-        ".    iner coef"
-        ".    norm coef"
-        "clst scal scal"
-        "warn warn warn"
-        "srch name btns"
-        "rslt rslt rslt"
-        "togg togg .   "
-        "defs clsd clsd"
-        /10em 10em 1fr
-    ;
-    justify-items: stretch;
-    align-items: center;
-    margin-right: 32px;
+  width: calc(var(--tile-width) + 32px);
+  display: grid;
+  gap: 4px 16px;
+  grid:
+    "bulb inpt rand"
+    "liml qvec qvec" 1.5em
+    "limt qvec qvec" 1.5em
+    "metr objf objf"
+    ".    iner coef"
+    ".    norm coef"
+    "clst scal scal"
+    "warn warn warn"
+    "srch name btns"
+    "rslt rslt rslt"
+    "togg togg .   "
+    "defs clsd clsd"
+    /10em 10em 1fr
+  ;
+  justify-items: stretch;
+  align-items: center;
+  margin-right: 32px;
 }
 
 /* Pokemon Tile /
 
 .pkmn_tile {
-    width: var(--tile-width);
-    display: grid;
-    gap: 2px 2px;
-    margin-top: 4px;
-    margin-bottom: 4px;
-    grid:
-        "img  name name fn" 1.2em
-        "img  mu   mu   mu" 1fr
-        "tog  mu   mu   mu" 1fr
-        ".    k1   k2   k3" auto
-        /60px 1fr  1fr 1fr
-    ;
+  width: var(--tile-width);
+  display: grid;
+  gap: 2px 2px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  grid:
+    "img  name name fn" 1.2em
+    "img  mu   mu   mu" 1fr
+    "tog  mu   mu   mu" 1fr
+    ".    k1   k2   k3" auto
+    /60px 1fr  1fr 1fr
+  ;
 }
 
 .pkmn_tile-true_mean {
-    grid-area: mu;
-    font-size: 12px;
-    display: grid;
-    grid:
-        ".     mu  mus mut"
-        ".     in  mud mup"
-        /0.1fr 3fr 1fr 1fr
-    ;
-    gap: 2px 2px;
-    align-items: center;
+  grid-area: mu;
+  font-size: 12px;
+  display: grid;
+  grid:
+    ".     mu  mus mut"
+    ".     in  mud mup"
+    /0.1fr 3fr 1fr 1fr
+  ;
+  gap: 2px 2px;
+  align-items: center;
 }
 
 .pkmn_tile-true_mean-value {
-    grid-area: mu;
-    display: grid;
-    grid:
-        "mul mux muv"
-        /2em 6em auto
-    ;
-    align-items: center;
+  grid-area: mu;
+  display: grid;
+  grid:
+    "mul mux muv"
+    /2em 6em auto
+  ;
+  align-items: center;
 }
 
 .pkmn_tile-true_mean-inertia {
-    grid-area: in;
+  grid-area: in;
 }
 
 .pkmn_tile-true_mean-mu_label {
-    grid-area: mul;
-    justify-self: end;
-    padding-right: 2px;
+  grid-area: mul;
+  justify-self: end;
+  padding-right: 2px;
 }
 
 .pkmn_tile-true_mean-mu_hex {
-    grid-area: mux;
+  grid-area: mux;
 }
 
 .pkmn_tile-true_mean-mu_vec {
-    grid-area: muv;
+  grid-area: muv;
 }
 
 .pkmn_tile-true_mean-stat {
-    margin-left: 8px;
+  margin-left: 8px;
 }
 
 .pkmn_tile-true_mean-stat-sigma {
-    grid-area: mus;
+  grid-area: mus;
 }
 
 .pkmn_tile-true_mean-stat-theta {
-    grid-area: mut;
+  grid-area: mut;
 }
 
 .pkmn_tile-true_mean-stat-delta {
-    grid-area: mud;
+  grid-area: mud;
 }
 
 .pkmn_tile-true_mean-stat-phi {
-    grid-area: mup;
+  grid-area: mup;
 }
 
 .pkmn_tile-img {
-    grid-area: img;
+  grid-area: img;
 }
 
 .pkmn_tile-name {
-    grid-area: name;
-    font-weight: 1000;
+  grid-area: name;
+  font-weight: 1000;
 }
 
 .pkmn_tile-fn {
-    grid-area: fn;
-    justify-self: end;
+  grid-area: fn;
+  justify-self: end;
 }
 
 .pkmn_tile-cluster {
-    display: none;
-
-    font-size: 12px;
-    grid:
-        "lbl  lbl  lbl lbl lbl" 1em
-        "mu   mux  mux mux mux"
-        "muv  muv  muv muv muv"
-        "pi   piv  .   th  thv"
-        "dl   dlv  .   ph  phv"
-        /2fr  4fr  1fr 2fr 4fr
-    ;
-    gap: 5px 0px;
-    padding-top: 4px;
-    padding-bottom: 8px;
+  display: none;
+
+  font-size: 12px;
+  grid:
+    "lbl  lbl  lbl lbl lbl" 1em
+    "mu   mux  mux mux mux"
+    "muv  muv  muv muv muv"
+    "pi   piv  .   th  thv"
+    "dl   dlv  .   ph  phv"
+    /2fr  4fr  1fr 2fr 4fr
+  ;
+  gap: 5px 0px;
+  padding-top: 4px;
+  padding-bottom: 8px;
 }
 
 .pkmn_tile-cluster-top_label {
-    font-weight: 1000;
-    font-size: 14px;
-    justify-self: center;
-    width: 100%;
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: space-around;
-    align-items: center;
+  font-weight: 1000;
+  font-size: 14px;
+  justify-self: center;
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-around;
+  align-items: center;
 }
 
 .pkmn_tile-cluster-stat_label {
-    justify-self: end;
-    padding-right: 2px;
+  justify-self: end;
+  padding-right: 2px;
 }
 
 /* Cluster Hiding Logic /
 
 .pkmn_tile-reveal_clusters {
-    display: none;
+  display: none;
 }
 
 .pkmn_tile-reveal_clusters:checked ~ .pkmn_tile-cluster {
-    display: grid;
+  display: grid;
 }
 
 .pkmn_tile-reveal_clusters:checked ~ .pkmn_tile-reveal_clusters_label > .pkmn_tile-reveal_clusters_label--closed {
-    display: none;
+  display: none;
 }
 
 .pkmn_tile-reveal_clusters_label--closed {
-    display: block;
+  display: block;
 }
 
 .pkmn_tile-reveal_clusters:checked ~ .pkmn_tile-reveal_clusters_label > .pkmn_tile-reveal_clusters_label--open {
-    display: block;
+  display: block;
 }
 
 .pkmn_tile-reveal_clusters_label--open {
-    display: none;
+  display: none;
 }
 
 .pkmn_tile-reveal_clusters_label {
-    font-size: 16px;
-    text-align: center;
-    grid-area: tog;
+  font-size: 16px;
+  text-align: center;
+  grid-area: tog;
 }
 
 .pkmn_tile-reveal_clusters--hide {
-    display: none;
+  display: none;
 }
 
 .pkmn_tile-reveal_clusters--show {
-    display: block;
+  display: block;
 } 
 */

nearest.html

@@ -23,7 +23,7 @@
       clusterSettings: {
         sortMetric: "size",
         scaleOption: "none",
-        sortOrder: "min",
+        sortOrder: "max",
       },
       space: "jab",
       sortMetric: "sigma",
@@ -39,78 +39,84 @@
 
 <body>
   <noscript>Requires javascript</noscript>
-  <button style="grid-area: rand;" type="button" onclick="onRandomColor(state); onControlsChanged(state)">Random Color</button>
-  <input autocomplete="off" maxlength="7" id="color-input" value="#222222" oninput="onColorChanged(state, event.target.value)" />
-  <br/>
-  <div class="toggle-box">
-    <input autocomplete="off" type="checkbox" class="toggle-button" id="space-toggle" role="button" onchange="state.space = event.target.checked ? 'rgb' : 'jab'; onControlsChanged(state)">
-    <label for="space-toggle">
-      <span class="toggle-off">CIECAM02-UCS (Jab)</span>
-      <span class="toggle-on">sRGB</span>
-    </label>
-  </div>
-  <br/>
-  <select autocomplete="off" id="sort-metric" onchange="state.sortMetric = event.target.value; onControlsChanged(state)">
-    <option value="sigma" selected>RMS Deviation (σ)</option>
-    <option value="bigTheta">Mean of Angular Difference (Θ)</option>
-    <option value="theta">Angular Difference of Mean (θ)</option>
-    <option value="phi">Hue Difference of Mean (ϕ)</option>
-    <option value="delta">Euclidean Distance to Mean (δ)</option>
-    <option value="ch">Chebyshev Distance to Mean (Ч)</option>
-    <option value="inertia">Inertia (I)</option>
-    <option value="size">Size (N)</option>
-  </select>
-  <div id="metric-display"></div>
-  <br/>
-  <div class="toggle-box">
-    <input autocomplete="off" type="checkbox" class="toggle-button" id="cluster-toggle" role="button" onchange="state.useCluster = event.target.checked; onControlsChanged(state)">
-    <label for="cluster-toggle">
-      <span class="toggle-off">Whole</span>
-      <span class="toggle-on">Cluster</span>
-    </label>
-    <select autocomplete="off" id="cluster-sort-metric" class="toggle-on" onchange="state.clusterSettings.sortMetric = event.target.value; onControlsChanged(state)">
-      <option value="sigma">RMS Deviation (σ)</option>
-      <option value="bigTheta">Mean of Angular Difference (Θ)</option>
-      <option value="theta">Angular Difference of Mean (θ)</option>
-      <option value="phi">Hue Difference of Mean (ϕ)</option>
-      <option value="delta">Euclidean Distance to Mean (δ)</option>
-      <option value="ch">Chebyshev Distance to Mean (Ч)</option>
-      <option value="inertia">Inertia (I)</option>
-      <option value="size" selected>Size (N)</option>
-    </select>
-    <select autocomplete="off" id="cluster-scale-option" class="toggle-on" onchange="state.clusterSettings.scaleOption = event.target.value; onControlsChanged(state)">
-      <option value="none" selected>None</option>
-      <option value="direct">Cluster size</option>
-      <option value="inverse">Inverse cluster size</option>
-    </select>
-    <div class="toggle-on toggle-box">
-      <input autocomplete="off" type="checkbox" class="toggle-button" id="cluster-sort-order" role="button" onchange="state.clusterSettings.sortOrder = event.target.checked ? 'max' : 'min'; onControlsChanged(state)">
-      <label for="cluster-sort-order">
-        <span class="toggle-off">Min</span>
-        <span class="toggle-on">Max</span>
+  <div style="display: inline-block;">
+    <div class="control-grid">
+      <img style="grid-area: bulb; justify-self: center;" src="https://img.pokemondb.net/sprites/sword-shield/icon/bulbasaur.png" />
+      <button style="grid-area: rand;" type="button" onclick="onRandomColor(state); onControlsChanged(state)">Random Color</button>
+      <input style="grid-area: inpt;" autocomplete="off" maxlength="7" id="color-input" value="#222222" oninput="onColorChanged(state, event.target.value)" />
+      <div class="toggle-box" style="grid-area: cspc;">
+        <input autocomplete="off" type="checkbox" class="toggle-button" id="space-toggle" role="button" onchange="state.space = event.target.checked ? 'rgb' : 'jab'; onControlsChanged(state)">
+        <label for="space-toggle" style="display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; padding-bottom: 0.5em;">
+          Color space:&nbsp;
+          <span class="toggle-off">CIECAM02-UCS (Jab)</span>
+          <span class="toggle-on">sRGB</span>
+        </label>
+      </div>
+      <div class="toggle-box" style="grid-area: sort">
+        <input autocomplete="off" type="checkbox" class="toggle-button" id="sort-order" role="button" onchange="state.sortOrder = event.target.checked ? 'max' : 'min'; onControlsChanged(state)">
+        <label for="sort-order">
+          <span class="toggle-off">Minimize</span>
+          <span class="toggle-on">Maximize</span>
+        </label>
+      </div>
+      <select style="grid-area: metr" autocomplete="off" id="sort-metric" onchange="state.sortMetric = event.target.value; onControlsChanged(state)">
+        <option value="sigma" selected>RMS Deviation (σ)</option>
+        <option value="bigTheta">Mean of Angular Difference (Θ)</option>
+        <option value="theta">Angular Difference of Mean (θ)</option>
+        <option value="phi">Hue Difference of Mean (ϕ)</option>
+        <option value="delta">Euclidean Distance to Mean (δ)</option>
+        <option value="ch">Chebyshev Distance to Mean (Ч)</option>
+        <option value="inertia">Inertia (I)</option>
+        <option value="size">Size (N)</option>
+      </select>
+      <div style="grid-area: disp; padding-top: 0.5em; padding-bottom: 0.5em; justify-self: center;" id="metric-display"></div>
+    </div>
+    <div class="toggle-box cluster-grid">
+      <input autocomplete="off" type="checkbox" class="toggle-button" id="cluster-toggle" role="button" onchange="state.useCluster = event.target.checked; onControlsChanged(state)">
+      <label for="cluster-toggle" style="grid-area: albl; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; padding-bottom: 0.5em;">
+        Across&nbsp;
+        <span class="toggle-off">whole image</span>
+        <span class="toggle-on">best cluster by...</span>
       </label>
+      <div style="grid-area: sort; justify-self: end;" class="toggle-on toggle-box">
+        <input autocomplete="off" checked type="checkbox" class="toggle-button" id="cluster-sort-order" role="button" onchange="state.clusterSettings.sortOrder = event.target.checked ? 'max' : 'min'; onControlsChanged(state)">
+        <label for="cluster-sort-order">
+          <span class="toggle-off">Minimizing</span>
+          <span class="toggle-on">Maximizing</span>
+        </label>
+      </div>
+      <select style="grid-area: metr" autocomplete="off" id="cluster-sort-metric" class="toggle-on" onchange="state.clusterSettings.sortMetric = event.target.value; onControlsChanged(state)">
+        <option value="sigma">RMS Deviation (σ)</option>
+        <option value="bigTheta">Mean of Angular Difference (Θ)</option>
+        <option value="theta">Angular Difference of Mean (θ)</option>
+        <option value="phi">Hue Difference of Mean (ϕ)</option>
+        <option value="delta">Euclidean Distance to Mean (δ)</option>
+        <option value="ch">Chebyshev Distance to Mean (Ч)</option>
+        <option value="inertia">Inertia (I)</option>
+        <option value="size" selected>Size (N)</option>
+      </select>
+      <span style="grid-area: blbl; justify-self: end;" class="toggle-on">Rescaled by</span>
+      <select style="grid-area: clus" autocomplete="off" id="cluster-scale-option" class="toggle-on" onchange="state.clusterSettings.scaleOption = event.target.value; onControlsChanged(state)">
+        <option value="none" selected>None</option>
+        <option value="direct">Cluster size</option>
+        <option value="inverse">Inverse cluster size</option>
+      </select>
+      <span style="grid-area: slbl" class="toggle-on">And scale result by</span>
+      <select style="grid-area: scal" autocomplete="off" id="scale-option" class="toggle-on" onchange="state.scaleOption = event.target.value; onControlsChanged(state)">
+        <option value="none" selected>None</option>
+        <option value="direct">Cluster size</option>
+        <option value="inverse">Inverse cluster size</option>
+      </select>
+      <div style="grid-area: disp; padding-top: 0.5em; padding-bottom: 0.5em; padding-top: 0.5em; padding-bottom: 0.5em; justify-self: center;" id="cluster-metric-display" class="toggle-on"></div>
+    </div>
+    <div style="width: 100%; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;">
+      <span style="align-self: flex-start;">Final metric:</span>
+      <div id="final-metric-display" style="padding-top: 0.5em; padding-bottom: 0.5em;"></div>
     </div>
-    <select autocomplete="off" id="scale-option" class="toggle-on" onchange="state.scaleOption = event.target.value; onControlsChanged(state)">
-      <option value="none" selected>None</option>
-      <option value="direct">Cluster size</option>
-      <option value="inverse">Inverse cluster size</option>
-    </select>
-    <div id="cluster-metric-display" class="toggle-on"></div>
-  </div>
-  <br/>
-  <div class="toggle-box">
-    <input autocomplete="off" type="checkbox" class="toggle-button" id="sort-order" role="button" onchange="state.sortOrder = event.target.checked ? 'max' : 'min'; onControlsChanged(state)">
-    <label for="sort-order">
-      <span class="toggle-off">Min</span>
-      <span class="toggle-on">Max</span>
-    </label>
   </div>
-  <br/>
-  <div id="final-metric-display"></div>
 
   <!-- <div class="container start-justified">
     <form id="controls" onsubmit="event.preventDefault()">
-      <img style="grid-area: bulb; justify-self: center;" src="https://img.pokemondb.net/sprites/sword-shield/icon/bulbasaur.png" />
       <input style="grid-area: inpt;" maxlength="7" id="color-input" oninput="onColorChanged()" />
 
       <label for="num-poke" style="grid-area: liml" class="center-text">