From feef98d3a36d811ae2bc0bd68dd4b5176ce0cda7 Mon Sep 17 00:00:00 2001 From: Andrew Michael McNutt Date: Wed, 24 Jan 2024 13:25:03 -0800 Subject: [PATCH] some lint improvements --- README.md | 5 +- src/App.svelte | 23 ++++ src/content-modules/Eval.svelte | 28 +--- .../contextual-tools/EvalResponse.svelte | 49 +++++-- src/lib/linter.ts | 43 ++++-- src/lib/lints/ColorLint.ts | 5 + src/lib/lints/avoid-extremes.ts | 1 + src/lib/lints/background-differentiability.ts | 1 + src/lib/lints/color-similarity.ts | 12 +- src/lib/lints/contrast.ts | 5 +- src/lib/lints/diverging-order.ts | 1 + src/lib/lints/even-distribution.ts | 129 ++++++++++++++++++ src/lib/lints/fair.ts | 90 ++++++++++++ src/lib/lints/max-colors.ts | 1 + src/lib/lints/name-discrim.ts | 1 + src/lib/lints/sequential-order.ts | 1 + src/lib/lints/ugly-colors.ts | 1 + src/lib/utils.ts | 2 +- src/stores/color-store.ts | 6 +- 19 files changed, 338 insertions(+), 66 deletions(-) create mode 100644 src/lib/lints/even-distribution.ts create mode 100644 src/lib/lints/fair.ts diff --git a/README.md b/README.md index 59ff9e15..a6d3e025 100644 --- a/README.md +++ b/README.md @@ -12,12 +12,12 @@ First time you start it up you should also run `yarn prep data` # Todo bankruptcy +- [ ] per cols 4 all: color blindness metric should maybe be sensitive to task? - [ ] Minor: Make keyboard short cut (option+up/down) for the z-direction - [ ] Chore: Extract some common types into a top level location (like types.ts type thing) - [ ] Insert color theory options, eg insert opposing, inserting analogous color, etc, mine from the adobe picker - [ ] Labels, tooltips, etc - [ ] Nice to have: Rest of basic geometry manipulations: flip (horizontal, vertical), scale, Distribute radially -- [ ] For the palettes, a couple of ideas. Right now, feels like selecting a palette in the list reorders all the palettes, which is disorienting. I realize what you're doing in removing the palette I clicked on, adding the one I was editing. I think don't do this. Keep a fixed order (which I could change if I wanted to), and simply mark the palette that's being editing, don't remove it from the list. Similarly, if I copy a palette, put it right after the palette I copied, not up at the top. I also think adding a compact view of the palettes will eventually be necessary, so now might be the time to do it. Even as a default, would make the circles a bit smaller and pack them tighter. Or maybe make them tall rectangles that would pack even tighter. - [ ] For the palettes, there is a copy and delete bug. Try this: Copy Example 2, then immediately click delete (menu is still up). Surpise! - [ ] Tool tip not staying put - [ ] Bug: Color channel usage slightly cursed (doesn't update positions correctly) @@ -27,7 +27,8 @@ First time you start it up you should also run `yarn prep data` - [ ] XYY is probaably now possible - [ ] Bug: rotate in polar coordinates doesn't work right - [ ] Ad hoc lints seem possible, do a spike -- [ ] Directional subtlies for aligns +- [ ] Directional subtlies for aligns, they do not work in polar also +- [x] For the palettes, a couple of ideas. Right now, feels like selecting a palette in the list reorders all the palettes, which is disorienting. I realize what you're doing in removing the palette I clicked on, adding the one I was editing. I think don't do this. Keep a fixed order (which I could change if I wanted to), and simply mark the palette that's being editing, don't remove it from the list. Similarly, if I copy a palette, put it right after the palette I copied, not up at the top. I also think adding a compact view of the palettes will eventually be necessary, so now might be the time to do it. Even as a default, would make the circles a bit smaller and pack them tighter. Or maybe make them tall rectangles that would pack even tighter. - [x] Bug report. If I am comparing a palette with itself and select a color in the main view, the color is not selected in the xy plot of the comparison panel. It is selected in the vertical only plot - [x] Similarly, would like to work through the various options for the examples. Delete, Edit, Hide (not Mute) seem good. If you're going to Hide, then ideally you provide a selective unhide (dropdown of names is the easiest) as well as the unhide all. Your Solo means "hide everything else" which I'm not convinced is worth a button. However, a "full screen" or "fit width" "fit height" options that scales it up and reduces the rest to thumbnails might be cool. And I'm sure there are a few more we'll discover as we work with it. - [x] Albers color theory games style examples diff --git a/src/App.svelte b/src/App.svelte index 7d9dee0e..79a20a87 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -26,6 +26,15 @@ $: currentPal = $colorStore.palettes[$colorStore.currentPal]; const tabs = ["examples", "compare", "eval"]; + const descriptions = { + sequential: + "Sequential palettes are used to represent a range of values. They are often used to represent quantitative data, such as temperature or elevation.", + diverging: + "Diverging palettes are used to represent a range of values around a central point. They are often used to represent quantitative data, such as temperature or elevation.", + categorical: + "Categorical palettes are used to represent a set of discrete values. They are often used to represent qualitative data, such as different types of land cover or different political parties.", + }; + $: palType = currentPal.type;
@@ -101,6 +110,20 @@ allowModification={true} /> +
+ This is a + palette. {descriptions[palType]} +
diff --git a/src/content-modules/Eval.svelte b/src/content-modules/Eval.svelte index bfe0c08e..1580f467 100644 --- a/src/content-modules/Eval.svelte +++ b/src/content-modules/Eval.svelte @@ -23,9 +23,7 @@ $: colorNames = colorNameSimple(colors); $: palType = currentPal.type; $: evalConfig = currentPal.evalConfig; - $: checks = runLintChecks(currentPal).filter((x) => - x.taskTypes.includes(palType) - ); + $: checks = runLintChecks(currentPal, palType); $: checkGroups = checks.reduce( (acc, check) => { @@ -56,15 +54,6 @@ .split(" ") .map((x) => x[0].toUpperCase() + x.slice(1)) .join(" "); - - const descriptions = { - sequential: - "Sequential palettes are used to represent a range of values. They are often used to represent quantitative data, such as temperature or elevation.", - diverging: - "Diverging palettes are used to represent a range of values around a central point. They are often used to represent quantitative data, such as temperature or elevation.", - categorical: - "Categorical palettes are used to represent a set of discrete values. They are often used to represent qualitative data, such as different types of land cover or different political parties.", - };
@@ -157,21 +146,6 @@
-
- This is a - palette. {descriptions[palType]} -
-
{#each Object.entries(checkGroups) as checkGroup}
diff --git a/src/content-modules/contextual-tools/EvalResponse.svelte b/src/content-modules/contextual-tools/EvalResponse.svelte index 703abb07..cc4061ba 100644 --- a/src/content-modules/contextual-tools/EvalResponse.svelte +++ b/src/content-modules/contextual-tools/EvalResponse.svelte @@ -13,14 +13,22 @@ $: suggestion = false as false | Palette; - function proposeFix() { + function proposeFix(useAi: boolean = false) { requestState = "loading"; let hasRetried = false; - const getFix = () => - check.suggestFix($configStore.engine).then((x) => { - suggestion = x; - requestState = "loaded"; - }); + const getFix = () => { + if (useAi) { + return check.suggestAIFix().then((x) => { + suggestion = x; + requestState = "loaded"; + }); + } else { + return check.suggestFix().then((x) => { + suggestion = x; + requestState = "loaded"; + }); + } + }; getFix().catch((e) => { console.log(e); @@ -49,13 +57,38 @@ [checkName]: { ...evalConfig[checkName], val }, }); } + + function activateCB() { + const match = options.find((x) => check.name.includes(x)); + if (match) { + configStore.setColorSim(match); + } + } + const options = ["deuteranopia", "protanopia", "tritanopia"] as const; + $: cbMatch = options.find((x) => + check.name.includes(x) + ) as (typeof options)[number];
- + {/if} + + {#if check.hasHeuristicFix} + + {/if} +