Layers panel/jan26 updates shorterm

package.json

@@ -79,7 +79,7 @@
     "jotai": "^2.16.0",
     "kysely": "^0.27.6",
     "lucide": "^0.544.0",
-    "lucide-react": "^0.484.0",
+    "lucide-react": "^0.562.0",
     "mapbox-gl": "^3.10.0",
     "minio": "^8.0.5",
     "next": "^15.5.7",

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

@@ -10,21 +10,11 @@ import { toast } from "sonner";
 import DataSourceBadge from "@/components/DataSourceBadge";
 import DataSourceRecordTypeIcon from "@/components/DataSourceRecordTypeIcon";
 import DefinitionList from "@/components/DefinitionList";
+import DeleteConfirmationDialog from "@/components/DeleteConfirmationDialog";
 import { Link } from "@/components/Link";
 import { DataSourceConfigLabels } from "@/labels";
 import { JobStatus } from "@/server/models/DataSource";
 import { useTRPC } from "@/services/trpc/react";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/shadcn/ui/alert-dialog";
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -251,6 +241,7 @@ function DeleteDataSourceButton({
 }) {
   const router = useRouter();
   const trpc = useTRPC();
+  const [open, setOpen] = useState(false);
   const { mutate, isPending } = useMutation(
     trpc.dataSource.delete.mutationOptions({
       onSuccess: () => {
@@ -264,31 +255,19 @@ function DeleteDataSourceButton({
   );
 
   return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button variant="destructive">
-          <Trash2Icon />
-          Delete data source
-        </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your data
-            source.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction
-            disabled={isPending}
-            onClick={() => mutate({ dataSourceId: dataSource.id })}
-          >
-            {isPending ? "Deleting..." : "Continue"}
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
+    <>
+      <Button variant="destructive" onClick={() => setOpen(true)}>
+        <Trash2Icon />
+        Delete data source
+      </Button>
+      <DeleteConfirmationDialog
+        open={open}
+        onOpenChange={setOpen}
+        description="This action cannot be undone. This will permanently delete your data source."
+        onConfirm={() => mutate({ dataSourceId: dataSource.id })}
+        isPending={isPending}
+        confirmButtonText="Continue"
+      />
+    </>
   );
 }

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

@@ -97,25 +97,29 @@ export const useColorScheme = ({
   areaStats,
   scheme,
   isReversed,
+  categoryColors,
 }: {
   areaStats: CombinedAreaStats | null;
   scheme: ColorScheme;
   isReversed: boolean;
+  categoryColors?: Record<string, string>;
 }): CategoricColorScheme | NumericColorScheme | null => {
   // useMemo to cache calculated scales
   return useMemo(() => {
-    return getColorScheme({ areaStats, scheme, isReversed });
-  }, [areaStats, scheme, isReversed]);
+    return getColorScheme({ areaStats, scheme, isReversed, categoryColors });
+  }, [areaStats, scheme, isReversed, categoryColors]);
 };
 
 const getColorScheme = ({
   areaStats,
   scheme,
   isReversed,
+  categoryColors,
 }: {
   areaStats: CombinedAreaStats | null;
   scheme: ColorScheme;
   isReversed: boolean;
+  categoryColors?: Record<string, string>;
 }): CategoricColorScheme | NumericColorScheme | null => {
   if (!areaStats || !areaStats.stats.length) {
     return null;
@@ -129,7 +133,8 @@ const getColorScheme = ({
     const colorScale = scaleOrdinal(schemeCategory10).domain(distinctValues);
     const colorMap: Record<string, string> = {};
     distinctValues.forEach((v) => {
-      colorMap[v] = getCategoricalColor(v, colorScale);
+      // Use custom color if provided, otherwise use default
+      colorMap[v] = categoryColors?.[v] ?? getCategoricalColor(v, colorScale);
     });
     return {
       columnType: ColumnType.String,
@@ -190,11 +195,13 @@ export const useFillColor = ({
   scheme,
   isReversed,
   selectedBivariateBucket,
+  categoryColors,
 }: {
   areaStats: CombinedAreaStats | null;
   scheme: ColorScheme;
   isReversed: boolean;
   selectedBivariateBucket: string | null;
+  categoryColors?: Record<string, string>;
 }): DataDrivenPropertyValueSpecification<string> => {
   // useMemo to cache calculated fillColor
   return useMemo(() => {
@@ -203,7 +210,12 @@ export const useFillColor = ({
     }
 
     const isCount = areaStats?.calculationType === CalculationType.Count;
-    const colorScheme = getColorScheme({ areaStats, scheme, isReversed });
+    const colorScheme = getColorScheme({
+      areaStats,
+      scheme,
+      isReversed,
+      categoryColors,
+    });
     if (!colorScheme) {
       return DEFAULT_FILL_COLOR;
     }
@@ -257,7 +269,7 @@ export const useFillColor = ({
         : ["feature-state", "value"],
       ...interpolateColorStops,
     ];
-  }, [areaStats, isReversed, scheme, selectedBivariateBucket]);
+  }, [areaStats, isReversed, scheme, selectedBivariateBucket, categoryColors]);
 };
 
 const getBivariateFillColor = (

src/app/map/[id]/components/AreaInfo.tsx

@@ -87,6 +87,7 @@ export default function AreaInfo() {
     scheme: viewConfig.colorScheme || ColorScheme.RedBlue,
     isReversed: Boolean(viewConfig.reverseColorScheme),
     selectedBivariateBucket: null,
+    categoryColors: viewConfig.categoryColors,
   });
 
   // Combine selected areas and hover area, avoiding duplicates

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

@@ -49,6 +49,7 @@ export default function Choropleth() {
         >
           {/* Fill Layer - only show for choropleth */}
           <Layer
+            key={`${sourceId}-fill-${viewConfig.areaDataColumn}-${viewConfig.calculationType}-${viewConfig.colorScheme}`}
             id={`${sourceId}-fill`}
             beforeId={choroplethTopLayerId}
             source={sourceId}

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

@@ -31,6 +31,7 @@ export function useChoroplethAreaStats() {
     scheme: viewConfig.colorScheme || ColorScheme.RedBlue,
     isReversed: Boolean(viewConfig.reverseColorScheme),
     selectedBivariateBucket,
+    categoryColors: viewConfig.categoryColors,
   });
 
   useEffect(() => {

src/app/map/[id]/components/LayerTypeIcon.tsx

@@ -1,8 +1,8 @@
 import {
+  CircleIcon,
   LayoutDashboardIcon,
-  MapPinIcon,
-  SquareIcon,
   UsersIcon,
+  VectorSquareIcon,
 } from "lucide-react";
 import { cn } from "@/shadcn/utils";
 import { LayerType } from "@/types";
@@ -21,9 +21,9 @@ export default function LayerTypeIcon({
       case LayerType.Member:
         return <UsersIcon size={size} />;
       case LayerType.Marker:
-        return <MapPinIcon size={size} />;
+        return <CircleIcon size={size} />;
       case LayerType.Turf:
-        return <SquareIcon size={size} />;
+        return <VectorSquareIcon size={size} />;
       case LayerType.Boundary:
         return <LayoutDashboardIcon size={size} />;
       default: