Ignore specific colors (#114)

* Ignore specific colors * clean up * presentation tweaks
mcnuttandrew · Sep 15, 2024 · 672e357 · 672e357
1 parent 57bdc01
commit 672e357
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 2 deletions.
diff --git a/apps/color-buddy/src/linting/EvalResponse.svelte b/apps/color-buddy/src/linting/EvalResponse.svelte
@@ -84,6 +84,9 @@
     (x) => lintProgram.description.toLowerCase().includes(x) && x !== colorSpace
   ) as any;
   $: ignored = !!evalConfig[lintProgram.name]?.ignore;
+  $: blameData = (
+    lintResult.kind === "success" ? lintResult.blameData : []
+  ).flat();
 </script>
 
 <Tooltip {positionAlongRightEdge}>
@@ -172,6 +175,31 @@
       </button>
     {/if}
 
+    <div>For just this lint</div>
+    {#each blameData as index}
+      <button
+        class={buttonStyle
+          .split(" ")
+          .filter((x) => x !== "opacity-50")
+          .join(" ")}
+        on:click={() => {
+          colorStore.setCurrentPalEvalConfig({
+            ...evalConfig,
+            [`${palette.colors[index].toHex()}-?-${lintProgram.id}`]: {
+              ignore: true,
+            },
+          });
+        }}
+      >
+        <span class="opacity-50">ignore ({palette.colors[index].toHex()})</span>
+
+        <div
+          class="rounded-full w-3 h-3 ml-1 inline-block opacity-100"
+          style={`background: ${palette.colors[index].toHex()}`}
+        />
+      </button>
+    {/each}
+
     {#if requestState === "loading"}
       <div>Loading...</div>
     {:else if requestState === "failed"}

diff --git a/apps/color-buddy/src/linting/LintDisplay.svelte b/apps/color-buddy/src/linting/LintDisplay.svelte
@@ -14,6 +14,12 @@
   $: evalConfig = currentPal.evalConfig;
   $: lintProgram = lintResult.lintProgram;
   $: isCompact = $configStore.evalDisplayMode === "compact";
+  $: ignoredColors = Object.entries(evalConfig)
+    .filter(
+      ([name, config]) =>
+        (name.split("-?-")[1] || "").trim() === lintProgram.id && config.ignore
+    )
+    .map(([name]) => name.split("-?-")[0]);
 </script>
 
 {#if lintResult.kind === "ignored"}
@@ -61,6 +67,26 @@
         </div>
         <EvalResponse {lintResult} />
       </div>
+      {#if ignoredColors.length > 0 && !isCompact}
+        <div class="text-sm italic">
+          Ignored colors for this lint:
+          {#each ignoredColors as color}
+            <div class="inline-block relative w-3 h-3 mx-1">
+              <button
+                on:click={() => {
+                  colorStore.setCurrentPalEvalConfig({
+                    ...evalConfig,
+                    [`${color}-?-${lintProgram.id}`]: { ignore: false },
+                  });
+                }}
+                class="rounded-full w-3 h-3 bottom-0 absolute inline-block opacity-100"
+                style={`background: ${color}`}
+              />
+            </div>
+          {/each}
+          (click to re-enable)
+        </div>
+      {/if}
       {#if lintResult.kind === "success" && !lintResult.passes && !isCompact}
         <ExplanationViewer {lintResult} />
       {/if}

diff --git a/apps/color-buddy/src/stores/config-store.ts b/apps/color-buddy/src/stores/config-store.ts
@@ -95,7 +95,6 @@ function hydrateStore(): StoreData {
   if (str === "undefined") {
     str = JSON.stringify(InitialStore);
   }
-  console.log(str, localStorage.getItem(storeName));
   const store = addDefaults(JSON.parse(str));
   if (store.tempPal) {
     store.tempPal = stringPalToColorPal(store.tempPal as any);

diff --git a/packages/palette-lint/src/linter.ts b/packages/palette-lint/src/linter.ts
@@ -77,14 +77,20 @@ function processLint(
   if (!ignored) {
     return { kind: "ignored", lintProgram: lint };
   }
+  // ignored colors
+  let pal = { ...palette };
+  pal.colors = palette.colors.filter((color) => {
+    const key = `${color.toHex()}-?-${lint.id}`;
+    return palette.evalConfig[key]?.ignore !== true;
+  });
 
   // run the lint
   if (prebuiltIdToCustomFunc[lint.id]) {
     lint.customProgram = prebuiltIdToCustomFunc[lint.id];
   }
   let result: LintResult;
   try {
-    result = RunLint(lint, palette, options);
+    result = RunLint(lint, pal, options);
   } catch (e) {
     console.error(e);
     result = { kind: "invalid", lintProgram: lint };