Affects (#17)

* some refactoring to make pal manipulation easier * pretty much full affect story * messing around trying to make everything feel tighter * . * fix test
mcnuttandrew · Feb 15, 2024 · e6f7cd6 · e6f7cd6
1 parent 58f5fdb
commit e6f7cd6
Show file tree

Hide file tree

Showing 34 changed files with 608 additions and 223 deletions.
diff --git a/LintLanguageDocs.md b/LintLanguageDocs.md
@@ -20,11 +20,11 @@ Comparisons:
 {">": {left: Value, right: Value}}
 
 Math Operations:
-\*: {left: Number | Variable, right: Number | Variable}
-+: {left: Number | Variable, right: Number | Variable}
-/: {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}}
+{"+": {left: Number | Variable, right: Number | Variable}}
+{"/": {left: Number | Variable, right: Number | Variable}}
+{"-": {left: Number | Variable, right: Number | Variable}}
+{absDiff: {left: Number | Variable, right: Number | Variable}}
 
 Value Comparisons:
 {dist: {left: Color | Variable, right: Color | Variable}, space: COLOR_SPACE }

diff --git a/README.md b/README.md
@@ -13,20 +13,21 @@ First time you start it up you should also run `yarn prep data`
 # User study burn down
 
 - [ ] Tour?
-- [ ] roles, palette level semantics
+- [ ] Color Roles
 - [ ] Design adjustments for smaller screens
 - [ ] Language Docs??
+- [x] palette level semantics
 - [x] Get most of the lints converted
 - [x] Make lints fast / non blocking as much as possible
 
 # Language todos
 
-- [ ] Affect rules
 - [ ] Add more blame robustness, may pay to try to reason across all of the operator families (insight: keep a list of the blamable variables in the environment to support tracing)
 - [ ] per cols 4 all: color blindness metric should maybe be sensitive to task?
 - [ ] Sequential check fix is incorrect for things with equi-ligthness
 - [ ] Macros story: "not similar", "sequences", "where": { "!=": {"left": "index(a)", "right": "index(b)"} },
 - [ ] More crashy type validation
+- [x] Affect rules
 - [x] "No out of gamut"
 
 # General Todos

diff --git a/src/components/Tooltip.svelte b/src/components/Tooltip.svelte
@@ -55,8 +55,8 @@
     : "0";
   $: leftString = boundingBox ? `${boundingBox.x}px` : "0";
   $: {
-    if (boundingBox.y + 300 > window.screen.height) {
-      topString = `${window.screen.height - 300}px`;
+    if (boundingBox.y + 500 > window.screen.height) {
+      topString = `${window.screen.height - 500}px`;
     }
   }
   $: {

diff --git a/src/content-modules/MainColumn.svelte b/src/content-modules/MainColumn.svelte
@@ -2,12 +2,14 @@
   import colorStore from "../stores/color-store";
   import focusStore from "../stores/focus-store";
   import configStore from "../stores/config-store";
+
   import { buttonStyle } from "../lib/styles";
   import AdjustOrder from "../controls/AdjustOrder.svelte";
   import Background from "../components/Background.svelte";
   import ColorScatterPlot from "../scatterplot/ColorScatterPlot.svelte";
   import ExampleAlaCart from "../example/ExampleAlaCarte.svelte";
-  import GetColorsFromString from "../controls/GetColorsFromString.svelte";
+  import PalTypeConfig from "../controls/PalTypeConfig.svelte";
+
   import ModifySelection from "../controls/ModifySelection.svelte";
   import Nav from "../components/Nav.svelte";
   import PalPreview from "../components/PalPreview.svelte";
@@ -17,16 +19,6 @@
 
   import ContentEditable from "../components/ContentEditable.svelte";
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
-
-  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;
   $: selectedBlindType = $configStore.colorSim;
 </script>
 
@@ -100,28 +92,7 @@
       }}
     />
     {#if $configStore.mainColumnRoute === "palette-config"}
-      <GetColorsFromString
-        allowSort={true}
-        onChange={(colors) => colorStore.setCurrentPalColors(colors)}
-        colorSpace={currentPal.colorSpace}
-        colors={currentPal.colors}
-      />
-
-      <div class="max-w-lg text-sm italic">
-        This is a <select
-          value={palType}
-          class="font-bold"
-          on:change={(e) => {
-            // @ts-ignore
-            colorStore.setCurrentPalType(e.target.value);
-          }}
-        >
-          {#each ["sequential", "diverging", "categorical"] as type}
-            <option value={type}>{type}</option>
-          {/each}
-        </select>
-        palette. {descriptions[palType]}
-      </div>
+      <PalTypeConfig />
     {/if}
     {#if $configStore.mainColumnRoute === "example"}
       <ExampleAlaCart

diff --git a/src/controls/Config.svelte b/src/controls/Config.svelte
@@ -55,6 +55,8 @@
                 evalConfig: {},
                 name,
                 type,
+                intendedAffects: [],
+                intendedContexts: [],
               };
             });
           colorStore.setPalettes(pals);

diff --git a/src/controls/NewPal.svelte b/src/controls/NewPal.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
   import { Color } from "../lib/Color";
-  import colorStore, { newGenericPal } from "../stores/color-store";
+  import colorStore from "../stores/color-store";
   import type { StringPalette, Palette } from "../types";
   import focusStore from "../stores/focus-store";
   import { onMount } from "svelte";
   import Tooltip from "../components/Tooltip.svelte";
   import { VegaColors } from "../lib/charts";
   import { buttonStyle, denseButtonStyle } from "../lib/styles";
-  import { makePal, toHex } from "../lib/utils";
+  import {
+    makePal,
+    toHex,
+    newGenericPal,
+    createPalFromHexes,
+  } from "../lib/utils";
   import type { ExtendedPal } from "../lib/utils";
   import SuggestColorPal from "./SuggestColorPal.svelte";
 
@@ -16,17 +21,6 @@
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colorSpace = currentPal.colorSpace;
 
-  function createPalFromHexes(colors: string[]): StringPalette {
-    return {
-      name: "new palette",
-      colors,
-      background: "#ffffff",
-      type: "categorical",
-      evalConfig: {},
-      colorSpace: "lab",
-    };
-  }
-
   onMount(async () => {
     let newPals = [] as ExtendedPal[];
 

diff --git a/src/controls/PalTypeConfig.svelte b/src/controls/PalTypeConfig.svelte
@@ -0,0 +1,116 @@
+<script>
+  import colorStore from "../stores/color-store";
+  import { affects, contexts } from "../types";
+
+  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
+  $: palType = currentPal.type;
+
+  import GetColorsFromString from "../controls/GetColorsFromString.svelte";
+  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.",
+  };
+</script>
+
+<div class="max-w-lg">
+  <GetColorsFromString
+    allowSort={true}
+    onChange={(colors) => colorStore.setCurrentPalColors(colors)}
+    colorSpace={currentPal.colorSpace}
+    colors={currentPal.colors}
+  />
+
+  <div class="font-bold">Config</div>
+  <div class="max-w-lg text-sm italic">
+    This is a <select
+      value={palType}
+      class="font-bold"
+      on:change={(e) => {
+        // @ts-ignore
+        colorStore.setCurrentPalType(e.target.value);
+      }}
+    >
+      {#each ["sequential", "diverging", "categorical"] as type}
+        <option value={type}>{type}</option>
+      {/each}
+    </select>
+    palette. {descriptions[palType]}
+  </div>
+  <div class="mt-4 text-sm">
+    What types of affects do you intend to have on the palette?
+  </div>
+  <div class="flex flex-wrap">
+    <label class="mr-3">
+      <input
+        type="checkbox"
+        checked={currentPal.intendedAffects.length === 0}
+        on:change={(e) => {
+          if (currentPal.intendedAffects.length === 0) {
+            colorStore.setCurrentAffects(affects);
+          } else {
+            colorStore.setCurrentAffects([]);
+          }
+        }}
+      />
+      None Specific
+    </label>
+    {#each affects as affect}
+      <div class="flex items-center mr-2">
+        <label class="mr-3">
+          <input
+            type="checkbox"
+            checked={currentPal.intendedAffects.includes(affect)}
+            on:change={(e) => {
+              const newAffect = currentPal.intendedAffects.includes(affect)
+                ? currentPal.intendedAffects.filter((x) => x !== affect)
+                : [...currentPal.intendedAffects, affect];
+              colorStore.setCurrentAffects(newAffect);
+            }}
+          />
+          {affect}
+        </label>
+      </div>
+    {/each}
+  </div>
+
+  <div class="mt-4 text-sm">What types of contexts do you intend to use?</div>
+  <div class="flex flex-wrap">
+    <label class="mr-3">
+      <input
+        type="checkbox"
+        checked={currentPal.intendedContexts.length === 0}
+        value={currentPal.intendedContexts.length === 0}
+        on:change={(e) => {
+          if (currentPal.intendedContexts.length === 0) {
+            colorStore.setCurrentContexts(contexts);
+          } else {
+            colorStore.setCurrentContexts([]);
+          }
+        }}
+      />
+      None Specific
+    </label>
+    {#each contexts as context}
+      <div class="flex items-center mr-2">
+        <label>
+          <input
+            type="checkbox"
+            checked={currentPal.intendedContexts.includes(context)}
+            value={currentPal.intendedContexts.includes(context)}
+            on:change={(e) => {
+              const newContext = currentPal.intendedContexts.includes(context)
+                ? currentPal.intendedContexts.filter((x) => x !== context)
+                : [...currentPal.intendedContexts, context];
+              colorStore.setCurrentContexts(newContext);
+            }}
+          />
+          {context}
+        </label>
+      </div>
+    {/each}
+  </div>
+</div>
diff --git a/src/controls/SetColorSpace.svelte b/src/controls/SetColorSpace.svelte
@@ -2,13 +2,11 @@
   import { colorPickerConfig } from "../lib/Color";
   import Tooltip from "../components/Tooltip.svelte";
   import { buttonStyle } from "../lib/styles";
-  // $: colorSpace = $colorStore.currentPal.colorSpace;
   export let colorSpace: string;
   export let onChange: (e: any) => void;
   // const notAllowed = new Set(["rgb", "hsv", "hsl", "srgb", "lch", "oklch"]);
   // const notAllowed = new Set(["rgb", "lch", "oklch", "srgb"]);
   const notAllowed = new Set(["rgb", "oklch", "srgb", "jzazbz", "oklab"]);
-  // const onChange = (e: any) => colorStore.setColorSpace(e);
   $: options = Object.keys(colorPickerConfig)
     .filter((x) => !notAllowed.has(x))
     .sort();

diff --git a/src/controls/SuggestColorPal.svelte b/src/controls/SuggestColorPal.svelte
@@ -5,7 +5,7 @@
   import { suggestPal } from "../lib/api-calls";
   import type { Palette } from "../types";
   import PalPreview from "../components/PalPreview.svelte";
-  import { buttonStyle, AIButtonStyle } from "../lib/styles";
+  import { buttonStyle } from "../lib/styles";
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colorSpace = currentPal.colorSpace;
@@ -29,6 +29,8 @@
       type: "categorical",
       evalConfig: {},
       colorSpace: colorSpace as any,
+      intendedAffects: [],
+      intendedContexts: [],
     };
   }
 

diff --git a/src/controls/SuggestionModificationToSelection.svelte b/src/controls/SuggestionModificationToSelection.svelte
@@ -6,6 +6,7 @@
   import { suggestContextualAdjustments } from "../lib/api-calls";
   import { buttonStyle } from "../lib/styles";
   import PalDiff from "../components/PalDiff.svelte";
+  import { toPal } from "../lib/utils";
 
   let requestState: "idle" | "loading" | "loaded" | "failed" = "idle";
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
@@ -17,17 +18,6 @@
   let suggestedColorSets: string[][] = [];
   let palPrompt: string = "";
 
-  function toPal(colors: string[]) {
-    return {
-      colors: colors.map((x) => Color.colorFromString(x, colorSpace)),
-      name: "mods",
-      background: currentPal.background,
-      type: currentPal.type,
-      evalConfig: {},
-      colorSpace,
-    };
-  }
-
   function makeRequest() {
     requestState = "loading";
     const pal = selectedColors.length
@@ -100,9 +90,9 @@
         <div>
           <PalDiff
             beforePal={selectedColors.length
-              ? toPal(selectedColors)
+              ? toPal(selectedColors, currentPal, colorSpace)
               : currentPal}
-            afterPal={toPal(suggestedColors)}
+            afterPal={toPal(suggestedColors, currentPal, colorSpace)}
           />
         </div>
         <div class="flex justify-between">

diff --git a/src/example/Examples.svelte b/src/example/Examples.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { Color } from "../lib/Color";
-  import type { Palette } from "../types";
   import exampleStore, {
     DEMOS,
     detectColorsInSvgString,
@@ -15,6 +14,7 @@
   import MonacoEditor from "../components/MonacoEditor.svelte";
   import Swatches from "./Swatches.svelte";
   import Tooltip from "../components/Tooltip.svelte";
+  import { makePalFromString } from "../lib/utils";
 
   let modalState: "closed" | "input-svg" | "input-vega" | "edit-colors" =
     "closed";
@@ -30,18 +30,6 @@
     exampleStore.toggleSection(group as keyof typeof $exampleStore.sections);
   }
 
-  function createNewPal() {
-    const newPal: Palette = {
-      colors: detectedColors.map((x) => Color.colorFromString(x, colorSpace)),
-      background: bg,
-      name: "New Palette",
-      type: "categorical",
-      evalConfig: {},
-      colorSpace: "lab",
-    };
-    colorStore.createNewPal(newPal);
-  }
-
   let validJSON = false;
   $: {
     if (modalState === "input-vega") {
@@ -345,7 +333,12 @@
         >
           Back to editing SVG
         </button>
-        <button class={buttonStyle} on:click={createNewPal}>
+        <button
+          class={buttonStyle}
+          on:click={() => {
+            colorStore.createNewPal(makePalFromString(detectedColors));
+          }}
+        >
           Use identified colors as new palette
         </button>
       {/if}