From 43d76c6c7586a33a39a536e4d7474a6e7978407f Mon Sep 17 00:00:00 2001
From: Andrew Michael McNutt <mcnutt.andrew@gmail.com>
Date: Tue, 5 Mar 2024 10:32:56 -0800
Subject: [PATCH] amys ux name suggestion

---
 public/examples/colorpack.json |  2 +-
 src/example/Examples.svelte    | 19 +++++++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/public/examples/colorpack.json b/public/examples/colorpack.json
index 2926f585..32e0fef0 100644
--- a/public/examples/colorpack.json
+++ b/public/examples/colorpack.json
@@ -31,7 +31,7 @@
       "name": "color",
       "type": "ordinal",
       "domain": { "data": "tree", "field": "depth" },
-      "range": { "scheme": "category20" }
+      "range": "category"
     }
   ],
 
diff --git a/src/example/Examples.svelte b/src/example/Examples.svelte
index 1d865399..380dfd76 100644
--- a/src/example/Examples.svelte
+++ b/src/example/Examples.svelte
@@ -71,6 +71,16 @@
   $: examples = $exampleStore.examples as any;
   $: hiddenExamples = $exampleStore.examples.filter((x: any) => x.hidden);
   $: numberHidden = hiddenExamples.length;
+
+  const navNameMap = {
+    svg: "SVG",
+    vega: "Visualizations (via Vega)",
+    swatches: "Swatches",
+  } as any;
+  const navNameMapRev = Object.keys(navNameMap).reduce((acc, key) => {
+    acc[navNameMap[key]] = key;
+    return acc;
+  }, {} as any);
 </script>
 
 <div class="flex flex-col items-center bg-stone-300 px-4 py-2">
@@ -150,11 +160,12 @@
     {/if}
   </div>
   <Nav
-    tabs={["svg", "vega", "swatches"]}
-    isTabSelected={(x) => x === $configStore.exampleRoute}
+    tabs={Object.values(navNameMap)}
+    isTabSelected={(x) => navNameMapRev[x] === $configStore.exampleRoute}
     selectTab={(x) => {
-      //@ts-ignore
-      configStore.setExampleRoute(x);
+      const val = Object.keys(navNameMapRev).find((key) => key === x);
+      // @ts-ignore
+      configStore.setExampleRoute(navNameMapRev[val]);
     }}
   />
 </div>