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} +