fix keralcare data

Author: abhimanyurajeesh

components/filters/deployment-filters.tsx

@@ -108,12 +108,12 @@ export function DeploymentFilters({
                 />
               </div>
 
-              <div className="max-h-[300px] space-y-1 overflow-y-auto pr-1">
+              <div className="max-h-[300px] space-y-1 overflow-auto pr-1">
                 {filteredDeployments.map((deployment) => (
                   <button
                     key={deployment.id}
                     onClick={() => onDeploymentClick?.(deployment)}
-                    className={`w-full rounded-md border p-3 text-left transition-colors hover:bg-accent hover:border-primary ${
+                    className={`w-full overflow-hidden rounded-md border p-3 text-left transition-colors hover:bg-accent hover:border-primary ${
                       highlightedDeploymentId === deployment.id
                         ? "bg-accent border-primary ring-2 ring-primary"
                         : ""

components/map/deployment-map.tsx

@@ -10,7 +10,7 @@ import type { Deployment } from "@/types/deployment";
 import maplibregl from "maplibre-gl";
 import { useTheme } from "next-themes";
 import { useEffect, useRef, useState } from "react";
-import Supercluster from "supercluster";
+import Supercluster, { ClusterFeature, PointFeature } from "supercluster";
 
 interface DeploymentMapProps {
   deployments: Deployment[];
@@ -301,17 +301,44 @@ export function DeploymentMap({
     markers.current = [];
     markerElementsMap.current.clear();
 
-    // Create supercluster index only if clustering is enabled
-    const cluster = enableClustering
-      ? new Supercluster<Deployment>({
-          radius: 60,
-          maxZoom: 16,
-          minPoints: 2,
-        })
+    // Group deployments by program for separate clustering
+    const deploymentsByProgram = deployments.reduce((acc, deployment) => {
+      if (!acc[deployment.program]) {
+        acc[deployment.program] = [];
+      }
+      acc[deployment.program].push(deployment);
+      return acc;
+    }, {} as Record<string, Deployment[]>);
+
+    // Create separate supercluster instances for each program
+    const clustersByProgram = enableClustering
+      ? Object.entries(deploymentsByProgram).reduce((acc, [program, deps]) => {
+          const cluster = new Supercluster<Deployment>({
+            radius: 60,
+            maxZoom: 16,
+            minPoints: 2,
+          });
+
+          const features = deps.map((deployment) => ({
+            type: "Feature" as const,
+            geometry: {
+              type: "Point" as const,
+              coordinates: [
+                deployment.location.longitude,
+                deployment.location.latitude,
+              ],
+            },
+            properties: deployment,
+          }));
+
+          cluster.load(features);
+          acc[program] = cluster;
+          return acc;
+        }, {} as Record<string, Supercluster<Deployment>>)
       : null;
 
-    // Convert deployments to GeoJSON features
-    const features = deployments.map((deployment) => ({
+    // Convert all deployments to GeoJSON features (for non-clustered mode)
+    const allFeatures = deployments.map((deployment) => ({
       type: "Feature" as const,
       geometry: {
         type: "Point" as const,
@@ -323,29 +350,44 @@ export function DeploymentMap({
       properties: deployment,
     }));
 
-    if (cluster) {
-      cluster.load(features);
-    }
-
     const updateMarkers = () => {
       if (!map.current) return;
 
       const bounds = map.current.getBounds();
       const zoom = map.current.getZoom();
 
       // Get clusters or individual points based on enableClustering
-      const clusters =
-        enableClustering && cluster
-          ? cluster.getClusters(
-              [
-                bounds.getWest(),
-                bounds.getSouth(),
-                bounds.getEast(),
-                bounds.getNorth(),
-              ],
-              Math.floor(zoom)
-            )
-          : features; // If clustering disabled, show all features
+      let allClusters: Array<
+        PointFeature<Deployment> | ClusterFeature<{ program?: string }>
+      > = [];
+
+      if (enableClustering && clustersByProgram) {
+        // Get clusters from each program separately
+        Object.entries(clustersByProgram).forEach(([program, cluster]) => {
+          const programClusters = cluster.getClusters(
+            [
+              bounds.getWest(),
+              bounds.getSouth(),
+              bounds.getEast(),
+              bounds.getNorth(),
+            ],
+            Math.floor(zoom)
+          );
+          // Add program info to each cluster for color coding
+          programClusters.forEach((c) => {
+            if (c.properties && "cluster" in c.properties) {
+              (c.properties as { program?: string; cluster: boolean }).program =
+                program;
+            }
+          });
+          allClusters.push(...programClusters);
+        });
+      } else {
+        // If clustering disabled, show all features
+        allClusters = allFeatures as Array<
+          PointFeature<Deployment> | ClusterFeature<{ program?: string }>
+        >;
+      }
 
       // Clear existing markers
       markers.current.forEach((marker) => marker.remove());
@@ -357,7 +399,7 @@ export function DeploymentMap({
         lngLat: [number, number];
       }> = [];
 
-      clusters.forEach((clusterPoint) => {
+      allClusters.forEach((clusterPoint) => {
         const [lng, lat] = clusterPoint.geometry.coordinates;
         const properties = clusterPoint.properties;
 
@@ -370,25 +412,29 @@ export function DeploymentMap({
           const clusterLeaves =
             (properties as { point_count?: number }).point_count || 0;
           const clusterId = (properties as { cluster_id?: number }).cluster_id;
+          const program = (properties as { program?: string }).program;
 
-          // For simplicity, use first deployment's color
-          const firstDeployment = deployments[0];
-          const color = firstDeployment
-            ? PROGRAM_COLORS[firstDeployment.program]
+          // Use the program's color for the cluster
+          const color = program
+            ? PROGRAM_COLORS[program as keyof typeof PROGRAM_COLORS]
             : "#6B7280";
 
           const el = createClusterMarkerElement(clusterLeaves, color);
 
           el.addEventListener("click", () => {
-            if (map.current && clusterId && cluster) {
-              const expansionZoom = Math.min(
-                cluster.getClusterExpansionZoom?.(clusterId) || zoom + 2,
-                20
-              );
-              map.current.flyTo({
-                center: [lng, lat],
-                zoom: expansionZoom,
-              });
+            if (map.current && clusterId && program && clustersByProgram) {
+              const programCluster = clustersByProgram[program];
+              if (programCluster) {
+                const expansionZoom = Math.min(
+                  programCluster.getClusterExpansionZoom?.(clusterId) ||
+                    zoom + 2,
+                  20
+                );
+                map.current.flyTo({
+                  center: [lng, lat],
+                  zoom: expansionZoom,
+                });
+              }
             }
             if (!introAnimationComplete) {
               setIntroAnimationComplete(true);

components/map/map-popup.tsx

@@ -5,6 +5,7 @@ import {
   Card,
   CardContent,
   CardDescription,
+  CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
@@ -20,63 +21,51 @@ interface MapPopupProps {
 
 export function MapPopup({ deployment }: MapPopupProps) {
   return (
-    <Card className="w-full max-w-md min-w-60 border-2 py-4 gap-2">
-      <CardHeader className="pb-0">
-        <div className="flex items-start justify-between gap-2">
-          <div className="flex-1">
-            <CardTitle className="text-lg">
-              {deployment.name}{" "}
-              {deployment.website && (
-                <Button variant="ghost" size="sm" asChild>
-                  <a href={deployment.website} target="_blank">
-                    <ExternalLink />
-                  </a>
-                </Button>
-              )}
-            </CardTitle>
-            <CardDescription className="mt-1 flex items-center gap-1 text-sm">
-              <MapPin className="size-3 shrink-0" />
-              {deployment.location.address
-                ? `${deployment.location.address.city}, ${deployment.location.address.country}`
-                : `${deployment.location.latitude.toFixed(
-                    4
-                  )}, ${deployment.location.longitude.toFixed(4)}`}
-            </CardDescription>
-          </div>
-          <div className="flex flex-col gap-2">
-            <Badge
-              style={{
-                backgroundColor: PROGRAM_COLORS[deployment.program],
-                color: "white",
-              }}
-            >
-              {PROGRAM_LABELS[deployment.program]}
-            </Badge>
-            <Badge className="capitalize">{deployment.status || "unknown"}</Badge>
-          </div>
-        </div>
+    <Card className="w-full max-w-md">
+      <CardHeader>
+        <CardTitle>{deployment.name}</CardTitle>
+        <CardDescription>
+          <MapPin className="size-3 shrink-0 inline mr-2" />
+          {deployment.location.address
+            ? `${deployment.location.address.city}, ${deployment.location.address.state}, ${deployment.location.address.country}`
+            : `${deployment.location.latitude.toFixed(
+                4
+              )}, ${deployment.location.longitude.toFixed(4)}`}
+        </CardDescription>
       </CardHeader>
       <CardContent className="space-y-1">
         <p className="text-sm text-muted-foreground line-clamp-3 md:line-clamp-none">
           {deployment.description}
         </p>
-
-        <div className="flex flex-wrap gap-3 text-sm">
+      </CardContent>
+      <CardFooter className="sm:flex-row flex-col gap-2">
+        <div className="flex gap-2">
           {deployment.dateDeployed && (
-            <div className="flex items-center gap-1.5 text-muted-foreground">
-              <Calendar className="h-4 w-4" />
+            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+              <Calendar className="size-3 shrink-0" />
               <span>{formatDate(deployment.dateDeployed)}</span>
             </div>
           )}
-
-          {deployment.organization && (
-            <div className="text-muted-foreground">
-              <span className="font-medium">Org:</span>{" "}
-              {deployment.organization}
-            </div>
+          {deployment.website && (
+            <Button variant="ghost" size="sm" asChild>
+              <a href={deployment.website} target="_blank">
+                <ExternalLink />
+              </a>
+            </Button>
           )}
         </div>
-      </CardContent>
+        <div className="flex gap-2">
+          <Badge
+            style={{
+              backgroundColor: PROGRAM_COLORS[deployment.program],
+              color: "white",
+            }}
+          >
+            {PROGRAM_LABELS[deployment.program]}
+          </Badge>
+          <Badge className="capitalize">{deployment.status || "unknown"}</Badge>
+        </div>
+      </CardFooter>
     </Card>
   );
 }