pretty much full affect story

mcnuttandrew · Feb 15, 2024 · 4d5ec69 · 4d5ec69
1 parent 46b6b54
commit 4d5ec69
Show file tree

Hide file tree

Showing 18 changed files with 400 additions and 83 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/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/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/lib/ColorLint.ts b/src/lib/ColorLint.ts
@@ -1,4 +1,4 @@
-import type { Palette, PalType } from "../types";
+import type { Palette, PalType, Affect, Context } from "../types";
 
 export type LintLevel = "error" | "warning";
 export interface LintResult {
@@ -10,12 +10,16 @@ export interface LintResult {
   description: string;
   isCustom: false | string;
   taskTypes: PalType[];
+  affectTypes: Affect[];
+  contextTypes: Context[];
   subscribedFix: string;
 }
 
 export class ColorLint<CheckData, ParamType> {
   name: string = "";
   taskTypes: PalType[] = [];
+  affectTypes: Affect[] = [];
+  contextTypes: Context[] = [];
   passes: boolean;
   checkData: CheckData;
   palette: Palette;

diff --git a/src/lib/CustomLint.ts b/src/lib/CustomLint.ts
@@ -1,5 +1,5 @@
 import { ColorLint } from "./ColorLint";
-import type { PalType } from "../types";
+import type { PalType, Affect, Context } from "../types";
 import {
   LLEval,
   prettyPrintLL,
@@ -8,22 +8,26 @@ import {
 
 import * as Json from "jsonc-parser";
 export interface CustomLint {
-  program: string;
-  name: string;
-  taskTypes: PalType[];
-  level: "error" | "warning";
-  group: string;
+  affectTypes?: Affect[];
+  contextTypes?: Context[];
+  blameMode: "pair" | "single" | "none";
   description: string;
   failMessage: string;
+  group: string;
   id: string;
-  blameMode: "pair" | "single" | "none";
+  level: "error" | "warning";
+  name: string;
+  program: string;
   subscribedFix?: string;
+  taskTypes: PalType[];
 }
 
 export function CreateCustomLint(props: CustomLint) {
   return class CustomLint extends ColorLint<number[] | number[][], any> {
     name = props.name;
     taskTypes = props.taskTypes;
+    affectTypes = props.affectTypes || [];
+    contextTypes = props.contextTypes || [];
     level = props.level;
     group = props.group;
     description = props.description;

diff --git a/src/lib/api-calls.ts b/src/lib/api-calls.ts
@@ -1,6 +1,7 @@
 import type { Palette } from "../types";
 import * as Json from "jsonc-parser";
 import LintWorker from "./linter-tools/lint-worker.worker?worker";
+import { summarizePal } from "./utils";
 
 type Engine = "openai" | "google";
 type SimplePal = { background: string; colors: string[] };
@@ -75,6 +76,7 @@ export function suggestNameForPalette(
   return engineToScaffold[engine]<string>(`suggest-name`, body, true);
 }
 
+// supports the add color search function
 export function suggestAdditionsToPalette(
   palette: Palette,
   engine: Engine,
@@ -99,15 +101,20 @@ export function suggestContextualAdjustments(
   currentPal: Palette,
   engine: Engine
 ) {
-  const body = JSON.stringify({ prompt, ...palToString(currentPal) });
+  const adjustPrompt = `${summarizePal(currentPal)}\n\n${prompt}`;
+  const body = JSON.stringify({
+    prompt: adjustPrompt,
+    ...palToString(currentPal),
+  });
   return engineToScaffold[engine]<SimplePal>(
     `suggest-contextual-adjustments`,
     body,
     true
   );
 }
 
-export function suggestFix(currentPal: Palette, error: string, engine: Engine) {
+export function suggestFix(currentPal: Palette, msg: string, engine: Engine) {
+  const error = `${summarizePal(currentPal)}\n\n${msg}`;
   const body = JSON.stringify({ ...palToString(currentPal), error });
   return engineToScaffold[engine]<SimplePal>(`suggest-fix`, body, true);
 }

diff --git a/src/lib/linter-tools/lint-fixer.ts b/src/lib/linter-tools/lint-fixer.ts
@@ -1,6 +1,6 @@
 import type { Palette } from "../../types";
-import { suggestFix } from "../api-calls";
 import type { LintResult } from "../ColorLint";
+import { suggestFix } from "../api-calls";
 import { Color } from "../Color";
 
 export async function suggestLintAIFix(

diff --git a/src/lib/linter-tools/lint-worker.worker.ts b/src/lib/linter-tools/lint-worker.worker.ts
@@ -70,6 +70,8 @@ async function dispatch(cmd: Command) {
           isCustom: x.isCustom,
           taskTypes: x.taskTypes as any,
           subscribedFix: x.subscribedFix,
+          affectTypes: x.affectTypes,
+          contextTypes: x.contextTypes,
         };
       });
       simpleLintCache.set(cmd.content, result);