fix: Ensure categorical values are derived on attribute change. (#348)

Author: parkerziegler

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}

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>

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;