From 38872155a550f52382f1270c4fb4f8b4011e5ee1 Mon Sep 17 00:00:00 2001
From: Parker Ziegler <parkerziegler@users.noreply.github.com>
Date: Tue, 13 Aug 2024 12:27:09 -0700
Subject: [PATCH] fix: Ensure categorical values are derived on attribute
 change. (#348)

---
 .../components/data/AttributeSelect.svelte    |  1 +
 .../QuantitativeChoroplethLegend.svelte       | 11 ++---------
 src/lib/interaction/update.ts                 | 19 ++++++++++++++++++-
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/data/AttributeSelect.svelte b/src/lib/components/data/AttributeSelect.svelte
index 16115afb..5974f19d 100644
--- a/src/lib/components/data/AttributeSelect.svelte
+++ b/src/lib/components/data/AttributeSelect.svelte
@@ -78,6 +78,7 @@
     id="attribute-select"
     title="Attribute"
     on:change={onChange}
+    class="w-[80%] truncate"
   />
   <button
     bind:this={trigger}
diff --git a/src/lib/components/legends/QuantitativeChoroplethLegend.svelte b/src/lib/components/legends/QuantitativeChoroplethLegend.svelte
index f557512b..3623b678 100644
--- a/src/lib/components/legends/QuantitativeChoroplethLegend.svelte
+++ b/src/lib/components/legends/QuantitativeChoroplethLegend.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Feature } from 'geojson';
 
-  import { deriveExtent, deriveThresholds } from '$lib/interaction/scales';
+  import { deriveExtent } from '$lib/interaction/scales';
   import type { ConstantStroke, QuantitativeFill } from '$lib/types';
 
   export let fill: QuantitativeFill;
@@ -10,13 +10,6 @@
 
   $: colors = fill.scheme[fill.count] as string[];
   $: [min, max] = deriveExtent(fill.attribute, features);
-  $: stops = deriveThresholds({
-    method: fill.method,
-    attribute: fill.attribute,
-    features: features,
-    range: colors,
-    thresholds: fill.thresholds
-  });
 </script>
 
 <div class="stack stack-xs ml-8 text-white">
@@ -42,7 +35,7 @@
       {/each}
     </ul>
     <ul class="stack stack-xs">
-      {#each [min, ...stops, max] as stop}
+      {#each [min, ...fill.thresholds, max] as stop}
         <li class="stack-h stack-h-xs h-4 font-mono text-3xs">
           <span class="text-slate-400"> → </span>
           <span>{stop.toFixed(2)}</span>
diff --git a/src/lib/interaction/update.ts b/src/lib/interaction/update.ts
index 7193b0e5..dd675f78 100644
--- a/src/lib/interaction/update.ts
+++ b/src/lib/interaction/update.ts
@@ -278,10 +278,27 @@ export function dispatchLayerUpdate({
             (map.getSource(layerId) as GeoJSONSource).setData(features);
             break;
           }
-          case 'Choropleth':
+          case 'Choropleth': {
             lyr.style.fill.attribute = payload.attribute;
+
+            if (lyr.style.fill.type === 'Quantitative') {
+              lyr.style.fill.thresholds = deriveThresholds({
+                method: lyr.style.fill.method,
+                attribute: payload.attribute,
+                features: lyr.data.geojson.features,
+                range: lyr.style.fill.scheme[lyr.style.fill.count] as string[],
+                thresholds: lyr.style.fill.thresholds
+              });
+            } else {
+              lyr.style.fill.categories = enumerateAttributeCategories(
+                lyr.data.geojson.features,
+                payload.attribute
+              );
+            }
+
             map.setPaintProperty(lyr.id, 'fill-color', deriveColorScale(lyr));
             break;
+          }
         }
 
         return ir;