From 10290cce8c77dcc517d9cc99563086057f988310 Mon Sep 17 00:00:00 2001
From: Andrew Michael McNutt <mcnutt.andrew@gmail.com>
Date: Wed, 21 Feb 2024 09:29:46 -0800
Subject: [PATCH 1/3] small bugs (examples duplicated) and some ui tweaks

---
 src/App.svelte                          |  2 +-
 src/content-modules/ComparePal.svelte   | 24 +++++++++++++------
 src/content-modules/MainColumn.svelte   |  1 +
 src/example/ExampleAlaCarte.svelte      |  6 ++++-
 src/example/Swatches.svelte             | 26 +++++++++++---------
 src/lib/lints/max-colors.ts             |  2 +-
 src/scatterplot/ColorScatterPlot.svelte | 32 +++++++++++--------------
 src/stores/example-store.ts             | 14 +++--------
 8 files changed, 57 insertions(+), 50 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 270cea4f..29b17825 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -39,7 +39,7 @@
   $: updateSearchDebounced = debounce(10, (pal: any) => {
     // keep the noise down on the console
     if (!selectedLint && pal) {
-      lint(pal).then((res) => {
+      lint(pal, true).then((res) => {
         lintStore.postCurrentChecks(res);
       });
     }
diff --git a/src/content-modules/ComparePal.svelte b/src/content-modules/ComparePal.svelte
index a035feab..c9cf7303 100644
--- a/src/content-modules/ComparePal.svelte
+++ b/src/content-modules/ComparePal.svelte
@@ -33,7 +33,7 @@
   let colorSpace = ComparisonPal?.colorSpace || "lab";
 </script>
 
-<div style={`max-width: ${scatterSize + 50}px`}>
+<div style={`max-width: ${scatterSize + 150}px`}>
   <div class="flex flex-col">
     {#if ComparisonPal !== undefined}
       <div class="font-bold">
@@ -112,7 +112,10 @@
     <div class="flex flex-col pl-2">
       <PalPreview
         highlightSelected={false}
-        pal={ComparisonPal}
+        pal={{
+          ...ComparisonPal,
+          background: Color.colorFromHex(bg, colorSpace),
+        }}
         allowModification={false}
       />
 
@@ -124,13 +127,20 @@
     /> -->
     </div>
   {/if}
-  <Nav tabs={["example"]} selectTab={() => {}} isTabSelected={() => true} />
+  <Nav
+    tabs={["example"]}
+    selectTab={() => {}}
+    isTabSelected={() => true}
+    className="mt-4"
+  />
   {#if compareIdx !== undefined}
-    <div class="example-holder">
+    <div class="example-holder flex justify-center-center flex-col">
       <ExampleAlaCart
         paletteIdx={compareIdx}
         exampleIdx={$configStore.compareSelectedExample}
         setExampleIdx={(idx) => configStore.setCompareSelectedExample(idx)}
+        allowModification={false}
+        bgColor={bg}
       />
     </div>
   {/if}
@@ -138,10 +148,10 @@
 
 <style>
   .empty-pal-holder {
-    height: 450px;
-    width: 450px;
+    height: 600px;
+    width: 600px;
   }
   .example-holder {
-    width: 450px;
+    width: 600px;
   }
 </style>
diff --git a/src/content-modules/MainColumn.svelte b/src/content-modules/MainColumn.svelte
index 9031a515..3ed30c83 100644
--- a/src/content-modules/MainColumn.svelte
+++ b/src/content-modules/MainColumn.svelte
@@ -99,6 +99,7 @@
         exampleIdx={$configStore.mainColumnSelectedExample}
         setExampleIdx={(idx) => configStore.setMainColumnSelectedExample(idx)}
         allowModification={true}
+        bgColor={currentPal.background.toHex()}
       />
     {/if}
   </div>
diff --git a/src/example/ExampleAlaCarte.svelte b/src/example/ExampleAlaCarte.svelte
index 470b55a4..e671d787 100644
--- a/src/example/ExampleAlaCarte.svelte
+++ b/src/example/ExampleAlaCarte.svelte
@@ -9,6 +9,7 @@
   export let setExampleIdx: (idx: number) => void;
   export let paletteIdx: number;
   export let allowModification: boolean = false;
+  export let bgColor: string = "white";
   $: example = {
     ...$exampleStore.examples[exampleIdx],
     size: 400,
@@ -42,7 +43,10 @@
     </button>
   </Tooltip>
 </div>
-<div class="h-full flex justify-center items-center p-4">
+<div
+  class="h-full flex justify-center items-center"
+  style={`background: ${bgColor}`}
+>
   {#if exampleIdx === -1}
     <Swatches
       {paletteIdx}
diff --git a/src/example/Swatches.svelte b/src/example/Swatches.svelte
index 8b2ef8e9..5f4ad0b3 100644
--- a/src/example/Swatches.svelte
+++ b/src/example/Swatches.svelte
@@ -24,8 +24,9 @@
     }
   }
   $: bgColor = currentPal?.background?.toHex() || "white";
+
   $: focused = $focusStore.focusedColors;
-  $: focusSet = new Set(focused);
+  $: focusSet = allowInteraction ? new Set(focused) : new Set();
 
   let common = "cursor-pointer mr-2 mb-2 transition-all";
   let classes = [
@@ -83,6 +84,7 @@
           class:ml-5={focusSet.has(i)}
           class:mr-5={!focusSet.has(i)}
           on:click|preventDefault|stopPropagation={(e) =>
+            allowInteraction &&
             focusStore.setColors(
               dealWithFocusEvent(e, i, $focusStore.focusedColors)
             )}
@@ -102,13 +104,14 @@
                     }`}
                     style={`${styleMap(colors[colorIdx])}`}
                     on:click|preventDefault|stopPropagation={(e) => {
-                      focusStore.setColors(
-                        dealWithFocusEvent(
-                          e,
-                          colorIdx,
-                          $focusStore.focusedColors
-                        )
-                      );
+                      allowInteraction &&
+                        focusStore.setColors(
+                          dealWithFocusEvent(
+                            e,
+                            colorIdx,
+                            $focusStore.focusedColors
+                          )
+                        );
                     }}
                   ></button>
                 {/each}
@@ -125,9 +128,10 @@
             }deg)`}
             class="mr-2 w-16"
             on:click|preventDefault|stopPropagation={(e) => {
-              focusStore.setColors(
-                dealWithFocusEvent(e, i, $focusStore.focusedColors)
-              );
+              allowInteraction &&
+                focusStore.setColors(
+                  dealWithFocusEvent(e, i, $focusStore.focusedColors)
+                );
             }}
           >
             {color.toHex()}
diff --git a/src/lib/lints/max-colors.ts b/src/lib/lints/max-colors.ts
index efc7a664..1fec7e17 100644
--- a/src/lib/lints/max-colors.ts
+++ b/src/lib/lints/max-colors.ts
@@ -7,7 +7,7 @@ const lint: CustomLint = {
   program: JSONToPrettyString({
     // @ts-ignore
     $schema: `${location.href}lint-schema.json`,
-    "<": { left: { count: "colors" }, right: 10 },
+    "<": { left: { count: "colors" }, right: 11 },
   }),
   taskTypes: ["sequential", "diverging", "categorical"] as const,
   level: "warning",
diff --git a/src/scatterplot/ColorScatterPlot.svelte b/src/scatterplot/ColorScatterPlot.svelte
index f2a9bee7..78ff7456 100644
--- a/src/scatterplot/ColorScatterPlot.svelte
+++ b/src/scatterplot/ColorScatterPlot.svelte
@@ -34,7 +34,7 @@
 
   $: focusSet = new Set(focusedColors);
 
-  let margin = { top: 15, right: 15, bottom: 15, left: 15 };
+  let margin = { top: 20, right: 15, bottom: 15, left: 15 };
   $: plotWidth = width - margin.left - margin.right;
   $: plotHeight = height - margin.top - margin.bottom;
   $: extents = {
@@ -468,6 +468,17 @@
             on:touchend|preventDefault={puttingEnd}
           />
         {/if}
+
+        <!-- hover bull shit -->
+        {#if typeof hoveredPoint !== "boolean"}
+          <g transform={`translate(0, ${height - margin.bottom})`}>
+            <circle fill={hoveredPoint.toDisplay()} cx={6} cy={-7.5} r="6" />
+            <text fill={textColor} x={15}>{hoveredPoint.toHex()}</text>
+            <text fill={textColor} y="15">
+              {hoveredPoint.toPrettyString()}
+            </text>
+          </g>
+        {/if}
       </svg>
     </div>
   </div>
@@ -577,24 +588,9 @@
     </div>
   </div>
 </div>
-<div class="flex items-center text-sm w-full justify-center">
-  {#if typeof hoveredPoint !== "boolean"}
-    Hovered point:
-    {hoveredPoint.toPrettyString()} -
-    {hoveredPoint.toHex()}
-    <div
-      class="h-4 w-4 rounded-full"
-      style={`background: ${hoveredPoint.toDisplay()}`}
-    ></div>
-  {:else}
-    &nbsp;
-  {/if}
+<div class="flex justify-end text-sm">
+  {#if $configStore.showGamutMarkers}✖ indicates value that is out of gamut{:else}&nbsp;{/if}
 </div>
-{#if $configStore.showGamutMarkers}
-  <div class="flex items-center text-sm w-full justify-center">
-    X indicates value that is out of gamut
-  </div>
-{/if}
 
 <style>
   circle {
diff --git a/src/stores/example-store.ts b/src/stores/example-store.ts
index 17c13be5..e095228f 100644
--- a/src/stores/example-store.ts
+++ b/src/stores/example-store.ts
@@ -85,17 +85,11 @@ async function buildAllExamples() {
   for (const demo of DEMOS) {
     try {
       const text = await fetch(demo.filename).then((x) => x.text());
-      const example = {
-        hidden: false,
-        size: 250,
-        // name: demo.filename.split("/").at(-1)?.split(".")[0],
-        name: demo.title,
-      } as any;
+      const example = { hidden: false, size: 250, name: demo.title } as any;
       if (demo.type === "vega") {
         example.vega = text;
       } else {
         const colors = detectColorsInSvgString(text);
-        store.addExample(example);
         example.svg = modifySVGForExampleStore(text, colors);
       }
       builtExamples.push(example);
@@ -120,10 +114,8 @@ function createStore() {
       return acc;
     }, {} as any);
     if (x) {
-      const examples = x.examples.filter((x: any) => preBuiltMap[x.name]);
-      const newStore = {
-        examples: [...prebuiltExamples, ...examples],
-      };
+      const examples = x.examples.filter((x: any) => !preBuiltMap[x.name]);
+      const newStore = { examples: [...prebuiltExamples, ...examples] };
       set(newStore as StoreData);
     } else {
       set({ ...InitialStore, examples: prebuiltExamples });

From 87b7a55a948cc3fbd9975565b3c2d388204b694b Mon Sep 17 00:00:00 2001
From: Andrew Michael McNutt <mcnutt.andrew@gmail.com>
Date: Wed, 21 Feb 2024 11:11:41 -0800
Subject: [PATCH 2/3] can rename non-current pals

---
 src/content-modules/SavedPals.svelte | 42 ++++++++++++++++++++++++++--
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/content-modules/SavedPals.svelte b/src/content-modules/SavedPals.svelte
index d4a3f6a1..5a874dc1 100644
--- a/src/content-modules/SavedPals.svelte
+++ b/src/content-modules/SavedPals.svelte
@@ -11,6 +11,7 @@
   import Tooltip from "../components/Tooltip.svelte";
   $: nameSuggestions = [] as string[];
   let state: "idle" | "loading" = "idle";
+  let showRename = false;
 </script>
 
 <div class="overflow-auto">
@@ -31,8 +32,17 @@
             {pal.name}
           </button>
         </div>
-        <Tooltip>
-          <div slot="content" let:onClick class="flex flex-col">
+        <Tooltip
+          onClose={() => {
+            showRename = false;
+            nameSuggestions = [];
+          }}
+        >
+          <div
+            slot="content"
+            let:onClick
+            class="flex flex-col justify-start items-start"
+          >
             <button
               class={buttonStyle}
               on:click={() => {
@@ -94,6 +104,34 @@
                 Move down
               </button>
             {/if}
+            <button
+              class={buttonStyle}
+              on:click={() => {
+                showRename = true;
+              }}
+            >
+              Rename
+            </button>
+            {#if showRename}
+              <input
+                class="border-2 border-black"
+                value={pal.name}
+                on:blur={(e) => {
+                  const newPals = [...$colorStore.palettes];
+                  newPals[i] = { ...pal, name: e.currentTarget.value };
+                  colorStore.setPalettes(newPals);
+                  showRename = false;
+                }}
+                on:keydown={(e) => {
+                  if (e.key === "Enter") {
+                    const newPals = [...$colorStore.palettes];
+                    newPals[i] = { ...pal, name: e.currentTarget.value };
+                    colorStore.setPalettes(newPals);
+                    showRename = false;
+                  }
+                }}
+              />
+            {/if}
             <button
               class={buttonStyle}
               on:click={() => {

From a677759c00082df72511aae1192c4aad578631aa Mon Sep 17 00:00:00 2001
From: Andrew Michael McNutt <mcnutt.andrew@gmail.com>
Date: Wed, 21 Feb 2024 14:19:48 -0800
Subject: [PATCH 3/3] even distribution!

---
 LintLanguageDocs.md                     |   1 +
 public/lint-schema.json                 |  28 +++-
 src/content-modules/Browse.svelte       |  14 +-
 src/lib/lint-language/lint-language.ts  |  53 +++++--
 src/lib/lint-language/lint-type.ts      |   3 +-
 src/lib/linter.ts                       |   3 +-
 src/lib/lints/even-distribution.ts      | 177 +++++++-----------------
 src/scatterplot/ColorScatterPlot.svelte |   1 +
 8 files changed, 126 insertions(+), 154 deletions(-)

diff --git a/LintLanguageDocs.md b/LintLanguageDocs.md
index b229db48..94448a4a 100644
--- a/LintLanguageDocs.md
+++ b/LintLanguageDocs.md
@@ -25,6 +25,7 @@ Math Operations:
 {"/": {left: Number | Variable, right: Number | Variable}}
 {"-": {left: Number | Variable, right: Number | Variable}}
 {absDiff: {left: Number | Variable, right: Number | Variable}}
+{"%": {left: Number | Variable, right: Number | Variable}}
 
 Value Comparisons:
 {dist: {left: Color | Variable, right: Color | Variable}, space: COLOR_SPACE }
diff --git a/public/lint-schema.json b/public/lint-schema.json
index 585d6e02..1d2cdaf9 100644
--- a/public/lint-schema.json
+++ b/public/lint-schema.json
@@ -384,7 +384,7 @@
                 {
                     "additionalProperties": false, 
                     "properties": {
-                        "filter": {"$ref": "#/definitions/alias-1448761563-3658-3719-1448761563-0-6076"}, 
+                        "filter": {"$ref": "#/definitions/alias-1448761563-3695-3756-1448761563-0-6113"}, 
                         "func"  : {"$ref": "#/definitions/LintExpression"}                              , 
                         "varb"  : {"type": "string"}                                                      
                     }, 
@@ -395,7 +395,7 @@
                     "additionalProperties": false, 
                     "properties": {
                         "func": {"$ref": "#/definitions/LintValue"}                                   , 
-                        "map" : {"$ref": "#/definitions/alias-1448761563-3658-3719-1448761563-0-6076"}, 
+                        "map" : {"$ref": "#/definitions/alias-1448761563-3695-3756-1448761563-0-6113"}, 
                         "varb": {"type": "string"}                                                      
                     }, 
                     "required": ["map", "func", "varb"], 
@@ -404,7 +404,7 @@
                 {
                     "additionalProperties": false, 
                     "properties": {
-                        "reverse": {"$ref": "#/definitions/alias-1448761563-3658-3719-1448761563-0-6076"}
+                        "reverse": {"$ref": "#/definitions/alias-1448761563-3695-3756-1448761563-0-6113"}
                     }, 
                     "required": ["reverse"], 
                     "type": "object"
@@ -413,7 +413,7 @@
                     "additionalProperties": false, 
                     "properties": {
                         "func": {"$ref": "#/definitions/LintValue"}                                   , 
-                        "sort": {"$ref": "#/definitions/alias-1448761563-3658-3719-1448761563-0-6076"}, 
+                        "sort": {"$ref": "#/definitions/alias-1448761563-3695-3756-1448761563-0-6113"}, 
                         "varb": {"type": "string"}                                                      
                     }, 
                     "required": ["sort", "func", "varb"], 
@@ -421,7 +421,7 @@
                 }, 
                 {
                     "additionalProperties": false, 
-                    "properties": { "speed": {"$ref": "#/definitions/alias-1448761563-3658-3719-1448761563-0-6076"} }, 
+                    "properties": { "speed": {"$ref": "#/definitions/alias-1448761563-3695-3756-1448761563-0-6113"} }, 
                     "required": ["speed"], 
                     "type": "object"
                 }
@@ -492,6 +492,22 @@
                     }, 
                     "required": ["/"], 
                     "type": "object"
+                }, 
+                {
+                    "additionalProperties": false, 
+                    "properties": {
+                        "%": {
+                            "additionalProperties": false, 
+                            "properties": {
+                                "left" : {"$ref": "#/definitions/LintValue"}, 
+                                "right": {"$ref": "#/definitions/LintValue"}  
+                            }, 
+                            "required": ["left", "right"], 
+                            "type": "object"
+                        }
+                    }, 
+                    "required": ["%"], 
+                    "type": "object"
                 }
             ]
         }, 
@@ -702,7 +718,7 @@
             "description": "A LintValue is a JSON object that represents a value. It can be a string, a number, a boolean, a LintColor, a LintVariable, a LintMathOps, a LintPairOps, a LintAggregate, a LintColorFunction or a LintExpression"
         }, 
         "LintVariable": {"type": "string"}, 
-        "alias-1448761563-3658-3719-1448761563-0-6076": {
+        "alias-1448761563-3695-3756-1448761563-0-6113": {
             "anyOf": [
                 {"$ref": "#/definitions/LintVariable"}                           , 
                 { "items": {"$ref": "#/definitions/LintValue"}, "type": "array" }, 
diff --git a/src/content-modules/Browse.svelte b/src/content-modules/Browse.svelte
index b6464f6f..c4146b1b 100644
--- a/src/content-modules/Browse.svelte
+++ b/src/content-modules/Browse.svelte
@@ -18,11 +18,11 @@
     while ($examplePalStore.palettes.length === 0) {
       await new Promise((resolve) => setTimeout(resolve, 100));
     }
-    computeLints();
+    computeLints(false);
   });
-  function computeLints() {
+  function computeLints(breakLint: boolean) {
     $examplePalStore.palettes.forEach(async (pal, index) => {
-      if (pal.lints.length > 0) {
+      if (!breakLint && pal.lints.length > 0) {
         return;
       }
       lint(pal.palette, false).then((res) => {
@@ -37,8 +37,9 @@
     fail: "❌",
     warn: "⚠️",
   };
+  $: pals = $examplePalStore.palettes;
 
-  $: allEvaluatedLints = $examplePalStore.palettes.reduce(
+  $: allEvaluatedLints = pals.reduce(
     (acc, pal) => {
       pal.lints.forEach((lint) => {
         acc[lint.name] = lint;
@@ -49,7 +50,7 @@
   );
   let disAllowedLints = new Set<string>();
 
-  $: filteredPals = $examplePalStore.palettes;
+  $: filteredPals = pals;
   let sortedBy = "natural";
   $: console.log(allEvaluatedLints, disAllowedLints);
 </script>
@@ -75,6 +76,9 @@
     >
       reset filters
     </button>
+    <button class={buttonStyle} on:click={() => computeLints(true)}>
+      Re run lints
+    </button>
   </div>
   <div class="flex flex-col flex-wrap max-h-80">
     {#each Object.values(allEvaluatedLints) as lint}
diff --git a/src/lib/lint-language/lint-language.ts b/src/lib/lint-language/lint-language.ts
index c18e9e3c..780a5605 100644
--- a/src/lib/lint-language/lint-language.ts
+++ b/src/lib/lint-language/lint-language.ts
@@ -331,7 +331,7 @@ export class LLNumber extends LLNode {
   }
 }
 
-const LLNumberOpTypes = ["+", "-", "*", "/", "absDiff"] as const;
+const LLNumberOpTypes = ["+", "-", "*", "/", "absDiff", "%"] as const;
 export class LLNumberOp extends LLNode {
   constructor(
     private type: (typeof LLNumberOpTypes)[number],
@@ -355,16 +355,22 @@ export class LLNumberOp extends LLNode {
         return { result: left / right, env };
       case "absDiff":
         return { result: Math.abs(left - right), env };
+      case "%":
+        return { result: left % right, env };
     }
   }
   static tryToConstruct(node: any, options: OptionsConfig) {
     const opType = LLNumberOpTypes.find((x) => node[x]);
     if (!opType) return false;
     const { left, right } = node[opType];
-    if (!checkIfValsPresent(node[opType], ["left", "right"])) return false;
+    if (!checkIfValsPresent(node[opType], ["left", "right"])) {
+      throw new Error(`Missing left or right for ${opType}`);
+    }
     const leftType = tryTypes([LLValue], options)(left);
     const rightType = tryTypes([LLValue], options)(right);
-    if (!leftType || !rightType) return false;
+    if (!leftType || !rightType) {
+      throw new Error(`Type error in ${opType}`);
+    }
     return new LLNumberOp(opType, leftType, rightType);
   }
   toString(): string {
@@ -401,7 +407,7 @@ function compareValues(
         }
         return diff < thresh;
       }
-      throw new Error("Type error");
+      throw new Error("Type error. Similar must be used with colors.");
     case "==":
       return left === right;
     case "!=":
@@ -412,6 +418,8 @@ function compareValues(
       return left < right;
   }
 }
+const getType = (x: any) =>
+  typeof x === "object" ? (Array.isArray(x) ? "Array" : "object") : typeof x;
 export class LLPredicate extends LLNode {
   constructor(
     public type: (typeof predicateTypes)[number],
@@ -427,8 +435,13 @@ export class LLPredicate extends LLNode {
     const { left, right } = this;
     let leftEval = left.evaluate(env).result;
     let rightEval = right.evaluate(env).result;
-    if (typeof leftEval !== typeof rightEval) {
-      throw new Error("predicate - type error ");
+    const leftType = getType(leftEval);
+    const rightType = getType(rightEval);
+    if (leftType !== rightType) {
+      throw new Error(
+        `Type error on predicate "${this.type}": left and right types must be the same. 
+        Got ${leftType} and ${rightType}`
+      );
     }
     // array
     if (Array.isArray(leftEval)) {
@@ -523,7 +536,7 @@ const VFTypes = [
     primaryKey: "toColor",
     params: ["space", "channel"] as string[],
     op: (val: Color, params: Params) =>
-      val.toColorSpace(params.space as any).getChannel(params.channel),
+      Number(val.toColorSpace(params.space as any).getChannel(params.channel)),
   },
   {
     primaryKey: "inGamut",
@@ -539,7 +552,7 @@ Object.entries(colorPickerConfig).map(([colorSpace, value]) => {
       primaryKey: `${colorSpace}.${channelKey.toLowerCase()}`,
       params: [] as string[],
       op: (val: Color, _params: Params) =>
-        val.toColorSpace(colorSpace as any).getChannel(channelKey),
+        Number(val.toColorSpace(colorSpace as any).getChannel(channelKey)),
     });
   });
 });
@@ -558,7 +571,9 @@ export class LLValueFunction extends LLNode {
     // get the value of the input, such as by deref
     const inputEval = input.evaluate(env).result;
     if (!(inputEval instanceof Color)) {
-      throw new Error("Type error");
+      throw new Error(
+        `Type error, was expecting a color, but got ${inputEval} in function ${this.type}`
+      );
     }
     const op = VFTypes.find((x) => x.primaryKey === this.type);
     if (!op) throw new Error("Invalid type");
@@ -886,7 +901,9 @@ export class LLAggregate extends LLNode {
     } else {
       childType = tryTypes([LLVariable, LLMap], options)(children);
     }
-    if (!childType) return false;
+    if (!childType) {
+      throw new Error(`Type error in ${reduceType}`);
+    }
     return new LLAggregate(reduceType, childType);
   }
   toString(): string {
@@ -927,8 +944,13 @@ export class LLMap extends LLNode {
       case "filter":
         return { result: children.filter(evalFunc), env };
       case "sort":
-        const childrenCopy = [...children].map(evalFunc) as RawValues[];
-        childrenCopy.sort();
+        let childrenCopy = [...children].map(evalFunc) as RawValues[];
+        childrenCopy = childrenCopy.sort((a, b) => {
+          if (typeof a === "number" && typeof b === "number") {
+            return a - b;
+          }
+          return a.toString().localeCompare(b.toString());
+        });
         return { result: childrenCopy, env };
       case "reverse":
         const childrenCopy2 = [...children];
@@ -982,7 +1004,12 @@ export class LLMap extends LLNode {
         options
       )(node.func);
     }
-    if (!func || !childType || !varb) return false;
+    if (!func || !childType || !varb) {
+      throw new Error(
+        `Failed while parsing ${op}. func=${func}, child=${childType}, varb=${varb}`
+      );
+      return false;
+    }
     return new LLMap(op, childType, func, varb);
   }
   toString(): string {
diff --git a/src/lib/lint-language/lint-type.ts b/src/lib/lint-language/lint-type.ts
index 336b8cb6..44cdedc9 100644
--- a/src/lib/lint-language/lint-type.ts
+++ b/src/lib/lint-language/lint-type.ts
@@ -79,7 +79,8 @@ export type LintMathOps =
   | { "+": { left: LintValue; right: LintValue } }
   | { "-": { left: LintValue; right: LintValue } }
   | { "*": { left: LintValue; right: LintValue } }
-  | { "/": { left: LintValue; right: LintValue } };
+  | { "/": { left: LintValue; right: LintValue } }
+  | { "%": { left: LintValue; right: LintValue } };
 
 export type LintPairOps =
   | LintPairOpsDist
diff --git a/src/lib/linter.ts b/src/lib/linter.ts
index ca697346..9e804968 100644
--- a/src/lib/linter.ts
+++ b/src/lib/linter.ts
@@ -5,7 +5,6 @@ import { CreateCustomLint } from "./CustomLint";
 
 // manual lints
 import DivergingOrder from "./lints/diverging-order";
-import EvenDistribution from "./lints/even-distribution";
 
 // custom lints
 import Affects from "./lints/affects";
@@ -13,6 +12,7 @@ import AvoidExtremes from "./lints/avoid-extremes";
 import BackgroundDifferentiability from "./lints/background-contrast";
 import CatOrderSimilarity from "./lints/cat-order-similarity";
 import ColorBlindness from "./lints/color-blindness";
+import EvenDistribution from "./lints/even-distribution";
 import Fair from "./lints/fair";
 import Gamut from "./lints/in-gamut";
 import MaxColors from "./lints/max-colors";
@@ -30,6 +30,7 @@ export const BUILT_INS: CustomLint[] = [
   AvoidExtremes,
   BackgroundDifferentiability,
   CatOrderSimilarity,
+  EvenDistribution,
   Gamut,
   MaxColors,
   MutuallyDistinct,
diff --git a/src/lib/lints/even-distribution.ts b/src/lib/lints/even-distribution.ts
index 310d4e6b..7cf8ea10 100644
--- a/src/lib/lints/even-distribution.ts
+++ b/src/lib/lints/even-distribution.ts
@@ -1,129 +1,50 @@
-import { ColorLint } from "../ColorLint";
-import type { PalType } from "../../types";
-
-const sum = (arr: number[]) => arr.reduce((acc, val) => acc + val, 0);
-
-const normalize = (arr: number[]) => {
-  const total = sum(arr);
-  return arr.map((val) => val / total + 1);
+import { JSONToPrettyString } from "../utils";
+import type { CustomLint } from "../CustomLint";
+
+const lint: CustomLint = {
+  name: "Even Distribution",
+  program: JSONToPrettyString({
+    // @ts-ignore
+    $schema: "http://localhost:8888/lint-schema.json",
+    or: [
+      {
+        "<": {
+          left: {
+            std: {
+              speed: { sort: "colors", func: { "lch.h": "x" }, varb: "x" },
+            },
+          },
+          right: 10,
+        },
+      },
+      {
+        "<": {
+          left: {
+            std: {
+              speed: {
+                sort: "colors",
+                varb: "x",
+                func: {
+                  "%": {
+                    left: { "+": { left: { "lch.h": "x" }, right: 180 } },
+                    right: 360,
+                  },
+                },
+              },
+            },
+          },
+          right: 10,
+        },
+      },
+    ],
+  }),
+  taskTypes: ["categorical"] as const,
+  level: "warning",
+  group: "design",
+  description:
+    "Categorical values should have an even distribution around the hue circle in LCH color space",
+  failMessage: `This palette does not evenly distribute the colors around its range correctly. Try making the spacing between the colors more regular to resolve this issue. `,
+  id: "even-colors-built-in",
+  blameMode: "none",
 };
-
-const shiftToZero = (arr: number[]) => {
-  const min = Math.min(...arr);
-  return arr.map((val) => val - min);
-};
-
-function klDivergence(p: number[], q: number[]): number {
-  if (p.length !== q.length) {
-    throw new Error("Input arrays must have the same length");
-  }
-
-  p = normalize(p);
-  q = normalize(q);
-  //   console.log(p, q);
-
-  return p.reduce(
-    (acc, val, index) => acc + val * Math.log2(val / q[index]),
-    0
-  );
-}
-
-function variance(arr: number[]): number {
-  const mean = sum(arr) / arr.length;
-  return sum(arr.map((val) => (val - mean) ** 2)) / arr.length;
-}
-
-const uniform = (n: number) => [...Array(n)].map((_, i) => (i / n) * 360);
-
-function sequenceStandardDeviation(arr: number[]): number {
-  const mean = sum(arr) / arr.length;
-  return Math.sqrt(sum(arr.map((val) => (val - mean) ** 2)) / arr.length);
-}
-
-function stat(arrP: number[]) {
-  const arr = arrP;
-  //   const arr = shiftToZero(arrP);
-  const diffs = [];
-  for (let i = 0; i < arr.length - 1; i++) {
-    diffs.push(Math.abs(arr[i + 1] - arr[i]));
-  }
-  diffs.push(Math.abs(arr[0] - arr[arr.length - 1]));
-  const avgDiff = sum(diffs) / diffs.length;
-  console.log(arr, diffs, avgDiff);
-  const avgDistFromAvgDiff =
-    sum(diffs.map((val) => Math.abs(val - avgDiff))) / diffs.length;
-  return avgDistFromAvgDiff;
-}
-function circularMean(angles: number[]): number {
-  const toRad = (deg: number) => deg * (Math.PI / 180);
-  const sumCos = angles.reduce((acc, angle) => acc + Math.cos(toRad(angle)), 0);
-  const sumSin = angles.reduce((acc, angle) => acc + Math.sin(toRad(angle)), 0);
-
-  return Math.atan2(sumSin / angles.length, sumCos / angles.length);
-}
-
-function rayleighTest(angles: number[]): { z: number; criticalValue: number } {
-  const n = angles.length;
-  const circularMeanAngle = circularMean(angles);
-
-  // Calculate the length of the mean vector (R)
-  const R = Math.sqrt(
-    Math.pow(Math.cos(circularMeanAngle), 2) +
-      Math.pow(Math.sin(circularMeanAngle), 2)
-  );
-
-  // Calculate the Rayleigh test statistic (Z)
-  const Z = n * Math.pow(R, 2);
-
-  // Calculate the critical value based on the sample size
-  const criticalValue = 1.96 / Math.sqrt(n);
-
-  return { z: Z, criticalValue };
-}
-
-export default class EvenDistribution extends ColorLint<number, number> {
-  name = "Even Distribution";
-  taskTypes = ["categorical"] as PalType[];
-  hasParam = true;
-  defaultParam = 1;
-  group = "usability";
-  description: string = `Categorical values should be distributed evenly to avoid bias.`;
-  paramOptions: { type: "number"; min: number; max: number; step: 1 } = {
-    type: "number",
-    min: 2,
-    max: 20,
-    step: 1,
-  };
-  level: "error" | "warning" = "warning";
-
-  _runCheck() {
-    const { colors } = this.palette;
-    const hues = colors.map((color) => {
-      //   console.log(channels);
-      const channels = color.toColorSpace("lch").toChannels();
-      return channels[2];
-      // return channels[2];
-      //   const channels = color.toColorSpace("hsl").toChannels();
-      // return channels[0];
-    });
-    //   .sort();
-    const { z, criticalValue } = rayleighTest(hues);
-    const passFail = z > criticalValue;
-    // const uniformHues = uniform(hues.length);
-    // // console.log(hues, uniformHues);
-    // let kl = klDivergence(hues, uniformHues);
-    // if (Number.isNaN(kl)) {
-    //   console.log("asd", hues, uniformHues);
-    //   kl = Infinity;
-    // }
-    // console.log(kl);
-    console.log(z, criticalValue, { passFail });
-    return {
-      passCheck: false,
-      data: 0,
-    };
-  }
-  buildMessage(): string {
-    return `The colors in this palette are not evenly distributed.`;
-  }
-}
+export default lint;
diff --git a/src/scatterplot/ColorScatterPlot.svelte b/src/scatterplot/ColorScatterPlot.svelte
index 78ff7456..1efd6327 100644
--- a/src/scatterplot/ColorScatterPlot.svelte
+++ b/src/scatterplot/ColorScatterPlot.svelte
@@ -186,6 +186,7 @@
   let windowPos = { x: 0, y: 0 };
   let selectionIsZ = false;
   let selectionStart = (isZ: boolean) => (e: any) => {
+    hoveredPoint = false;
     selectionIsZ = isZ;
     interactionMode = "select";
     // console.log("selection start");