fix: minor bugs for mapped for funders demo

src/app/(private)/data-sources/[id]/components/ColumnRoleFields.tsx

@@ -39,7 +39,7 @@ export function ColumnRoleFields({
       />
       <CustomSelect
         id="config-date-column"
-        label="Date column"
+        label="Date column (if present)"
         hint="Select a field to use as the date for a record."
         value={dateColumn}
         options={dataSource?.columnDefs.map((cd) => ({
@@ -50,7 +50,7 @@ export function ColumnRoleFields({
       />
       <CustomSelect
         id="config-date-format"
-        label="Date format"
+        label="Date format (optional)"
         hint="Select a date format (if yours is not listed, contact us)."
         value={dateFormat}
         options={[

src/app/map/[id]/colors.ts

@@ -261,7 +261,7 @@ export const useFillColor = ({
   selectedBivariateBucket: string | null;
 }): DataDrivenPropertyValueSpecification<string> => {
   // useMemo to cache calculated fillColor
-  return useMemo(() => {
+  const fillColor = useMemo(() => {
     if (areaStats?.secondary) {
       return getBivariateFillColor(areaStats, selectedBivariateBucket);
     }
@@ -340,6 +340,13 @@ export const useFillColor = ({
       ...interpolateColorStops,
     ];
   }, [areaStats, viewConfig, selectedBivariateBucket]);
+
+  return [
+    "case",
+    ["!=", ["feature-state", "value"], null],
+    fillColor,
+    DEFAULT_FILL_COLOR,
+  ];
 };
 
 const getSteppedFillColor = (

src/app/map/[id]/components/BoundaryHoverInfo/AreasList.tsx

@@ -7,7 +7,7 @@ import {
   TableRow,
 } from "@/shadcn/ui/table";
 
-import { getDisplayValue } from "./utils";
+import { getDisplayValue } from "../../utils/stats";
 import type { ColumnType } from "@/server/models/DataSource";
 import type { CalculationType } from "@/server/models/MapView";
 
@@ -113,18 +113,20 @@ export function AreasList({
               : null;
 
           const primaryValue = areaStats
-            ? getDisplayValue(
-                areaStats.calculationType,
-                areaStats.primary,
-                areaStat?.primary,
-              )
+            ? getDisplayValue(areaStat?.primary, {
+                calculationType: areaStats.calculationType,
+                columnType: areaStats.primary?.columnType,
+                minValue: areaStats.primary?.minValue,
+                maxValue: areaStats.primary?.maxValue,
+              })
             : null;
           const secondaryValue = areaStats
-            ? getDisplayValue(
-                areaStats.calculationType,
-                areaStats.secondary,
-                areaStat?.secondary,
-              )
+            ? getDisplayValue(areaStat?.secondary, {
+                calculationType: areaStats.calculationType,
+                columnType: areaStats.primary?.columnType,
+                minValue: areaStats.secondary?.minValue,
+                maxValue: areaStats.secondary?.maxValue,
+              })
             : null;
 
           return (

src/app/map/[id]/components/BoundaryHoverInfo/utils.ts

@@ -1,39 +1,3 @@
-import { ColumnType } from "@/server/models/DataSource";
-import { CalculationType } from "@/server/models/MapView";
-import { formatNumber } from "@/utils/text";
-
-export const getDisplayValue = (
-  calculationType: CalculationType | null | undefined,
-  areaStats:
-    | {
-        columnType: ColumnType;
-        minValue: number;
-        maxValue: number;
-      }
-    | undefined
-    | null,
-  areaStatValue: unknown,
-): string => {
-  if (
-    areaStatValue === undefined ||
-    areaStatValue === null ||
-    areaStatValue === ""
-  ) {
-    return calculationType === CalculationType.Count ? "0" : "-";
-  }
-  if (areaStats?.columnType !== ColumnType.Number) {
-    return String(areaStatValue);
-  }
-  const value = Number(areaStatValue);
-  if (isNaN(value)) {
-    return "-";
-  }
-  if (areaStats?.minValue >= 0 && areaStats?.maxValue <= 1) {
-    return `${Math.round(value * 1000) / 10}%`;
-  }
-  return formatNumber(value);
-};
-
 export const toRGBA = (expressionResult: unknown) => {
   if (
     !expressionResult ||

src/app/map/[id]/components/Choropleth/index.tsx

@@ -20,6 +20,7 @@ export default function Choropleth() {
 
   // Custom hooks for effects
   const fillColor = useChoroplethFillColor();
+
   const opacity = (viewConfig.choroplethOpacityPct ?? 80) / 100;
 
   const hoverSourceId = `${sourceId}-hover`;

src/app/map/[id]/components/Choropleth/useChoroplethColors.ts

@@ -42,6 +42,7 @@ export function useChoroplethFeatureStatesEffect() {
   useEffect(() => {
     const map = mapRef?.current;
     if (!areaStats || !map) {
+      prevAreaStatValues.current = new Map();
       return;
     }
 
@@ -107,10 +108,5 @@ export function useChoroplethFeatureStatesEffect() {
 
     areaCodesToClean.current = nextAreaCodesToClean;
     prevAreaStatValues.current = nextStatValues;
-
-    return () => {
-      areaCodesToClean.current = {};
-      prevAreaStatValues.current = new Map();
-    };
   }, [areaStats, lastLoadedSourceId, layerId, mapRef, sourceId]);
 }