Shatter tool

.github/workflows/fly-deploy-pr.yml

@@ -75,7 +75,7 @@ jobs:
                 echo "::set-output name=name::${{ github.event.repository.name }}-${{ github.event.number }}-db"
 
             # manually launch and deploy the api app
-            - name: launch api app
+            - name: Launch API
               if: github.event.action != 'closed'
               run: |
                 app="${{ github.event.repository.name }}-${{ github.event.number }}-api"
@@ -94,7 +94,7 @@ jobs:
                 echo "api_app_name=$app" >> $GITHUB_ENV
               working-directory: backend
 
-            - name: deploy api app
+            - name: Deploy API
               if: github.event.action != 'closed'
               run: |
                     flyctl secrets set \
@@ -138,7 +138,7 @@ jobs:
                 echo "frontend_app_name=$app" >> $GITHUB_ENV
               working-directory: app
 
-            - name: Deploy Frontend App
+            - name: Deploy frontend
               if: github.event.action != 'closed'
               run: |
                 app_name="${{ github.event.repository.name }}-${{ github.event.number }}-app"

app/fly.toml

@@ -11,9 +11,9 @@ primary_region = 'ewr'
 [http_service]
   internal_port = 3000
   force_https = true
-  auto_stop_machines = true
+  auto_stop_machines = "stop"
   auto_start_machines = true
-  min_machines_running = 1
+  min_machines_running = 0
   processes = ['app']
 
 [[vm]]

app/src/app/components/sidebar/GerryDBViewSelector.tsx

@@ -2,7 +2,6 @@ import { useState } from "react";
 import { Flex, Select } from "@radix-ui/themes";
 import { useMapStore } from "../../store/mapStore";
 import { document } from "@/app/utils/api/mutations";
-import { RecentMapsModal } from "./RecentMapsModal";
 
 export function GerryDBViewSelector() {
   const [limit, setLimit] = useState<number>(30);
@@ -57,7 +56,6 @@ export function GerryDBViewSelector() {
           </Select.Group>
         </Select.Content>
       </Select.Root>
-      <RecentMapsModal />
     </Flex>
   );
 }

app/src/app/components/sidebar/MapModeSelector.jsx

@@ -1,21 +1,31 @@
 import React from "react";
 import * as RadioGroup from "@radix-ui/react-radio-group";
 import { styled } from "@stitches/react";
-import { blackA } from "@radix-ui/colors";
-import { useMapStore } from "../../store/mapStore";
+import { useMapStore } from "@store/mapStore";
 import { RadioCards, Box } from "@radix-ui/themes";
-import { EraserIcon, Pencil2Icon, HandIcon } from "@radix-ui/react-icons";
+import {
+  EraserIcon,
+  Pencil2Icon,
+  HandIcon,
+  BorderSplitIcon,
+} from "@radix-ui/react-icons";
+import { RecentMapsModal } from "@components/sidebar/RecentMapsModal";
 
 export function MapModeSelector() {
-  const mapStore = useMapStore.getState();
   const activeTool = useMapStore((state) => state.activeTool);
   const setActiveTool = useMapStore((state) => state.setActiveTool);
-  
+
   if (!activeTool) return null;
   const activeTools = [
     { mode: "pan", disabled: false, label: "Pan", icon: <HandIcon /> },
     { mode: "brush", disabled: false, label: "Brush", icon: <Pencil2Icon /> },
     { mode: "eraser", disabled: false, label: "Erase", icon: <EraserIcon /> },
+    {
+      mode: "shatter",
+      disabled: false,
+      label: "Shatter",
+      icon: <BorderSplitIcon />,
+    },
   ];
 
   const handleRadioChange = (value) => {
@@ -42,6 +52,7 @@ export function MapModeSelector() {
             </RadioCards.Item>
           </Flex>
         ))}
+        <RecentMapsModal />
       </RadioCards.Root>
     </Box>
   );

app/src/app/components/sidebar/RecentMapsModal.tsx

@@ -1,6 +1,6 @@
 import { useMapStore } from "@/app/store/mapStore";
 import React from "react";
-import { Cross2Icon } from "@radix-ui/react-icons";
+import { Cross2Icon, CounterClockwiseClockIcon } from "@radix-ui/react-icons";
 import {
   Button,
   Flex,
@@ -10,6 +10,7 @@ import {
   Box,
   TextField,
   IconButton,
+  RadioCards,
 } from "@radix-ui/themes";
 import { usePathname, useSearchParams, useRouter } from "next/navigation";
 import { DocumentObject } from "../../utils/api/apiHandlers";
@@ -40,14 +41,10 @@ export const RecentMapsModal = () => {
   return (
     <Dialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>
       <Dialog.Trigger>
-        <Button
-          variant="ghost"
-          size="3"
-          // weird negative margin happening.
-          style={{ margin: 0 }}
-        >
-          Recent
-        </Button>
+        <RadioCards.Item value="recents">
+          <CounterClockwiseClockIcon />
+          Recents
+        </RadioCards.Item>
       </Dialog.Trigger>
       <Dialog.Content className="max-w-[75vw]">
         <Flex align="center" className="mb-4">

app/src/app/constants/types.ts

@@ -1,15 +1,15 @@
 import type { MapOptions, MapLibreEvent } from "maplibre-gl";
 
 export type Zone = number;
-export type NullableZone = Zone | null
+export type NullableZone = Zone | null;
 
 export type GEOID = string;
 
 export type GDBPath = string;
 
 export type ZoneDict = Map<GEOID, Zone>;
 
-export type ActiveTool = "pan" | "brush" | "eraser"; // others?
+export type ActiveTool = "pan" | "brush" | "eraser" | "shatter"; // others?
 
 export type SpatialUnit =
   | "county"

app/src/app/store/mapRenderSubs.ts

@@ -5,13 +5,14 @@ import {
   PARENT_LAYERS,
   CHILD_LAYERS,
   getLayerFilter,
-} from "../constants/layers";
+} from "@constants/layers";
 import {
   ColorZoneAssignmentsState,
   colorZoneAssignments,
   shallowCompareArray,
 } from "../utils/helpers";
-import { useMapStore as _useMapStore, MapStore } from "./mapStore";
+import { useMapStore as _useMapStore, MapStore } from "@store/mapStore";
+import { getFeatureUnderCursor } from "@utils/helpers";
 
 export const getRenderSubscriptions = (useMapStore: typeof _useMapStore) => {
   const addLayerSubMapDocument = useMapStore.subscribe<
@@ -20,7 +21,7 @@ export const getRenderSubscriptions = (useMapStore: typeof _useMapStore) => {
     (state) => [state.mapDocument, state.getMapRef],
     ([mapDocument, getMapRef]) => {
       const mapStore = useMapStore.getState();
-      const mapRef = getMapRef()
+      const mapRef = getMapRef();
       if (mapRef && mapDocument) {
         addBlockLayers(mapRef, mapDocument);
         mapStore.addVisibleLayerIds([BLOCK_LAYER_ID, BLOCK_HOVER_LAYER_ID]);
@@ -30,12 +31,16 @@ export const getRenderSubscriptions = (useMapStore: typeof _useMapStore) => {
   );
 
   const _shatterMapSideEffectRender = useMapStore.subscribe<
-    [MapStore["shatterIds"], MapStore["getMapRef"], MapStore["mapRenderingState"]]
+    [
+      MapStore["shatterIds"],
+      MapStore["getMapRef"],
+      MapStore["mapRenderingState"],
+    ]
   >(
     (state) => [state.shatterIds, state.getMapRef, state.mapRenderingState],
     ([shatterIds, getMapRef, mapRenderingState]) => {
       const state = useMapStore.getState();
-      const mapRef = getMapRef()
+      const mapRef = getMapRef();
       const setMapLock = state.setMapLock;
 
       if (!mapRef || mapRenderingState !== "loaded") {
@@ -91,10 +96,39 @@ export const getRenderSubscriptions = (useMapStore: typeof _useMapStore) => {
       { equalityFn: shallowCompareArray },
     );
 
+  const _updateMapCursor = useMapStore.subscribe<MapStore["activeTool"]>(
+    (state) => state.activeTool,
+    (activeTool) => {
+      const mapRef = useMapStore.getState().getMapRef();
+      if (!mapRef) return;
+
+      let cursor;
+      switch (activeTool) {
+        case "pan":
+          cursor = "";
+          break;
+        case "brush":
+          cursor = "pointer";
+          break;
+        case "eraser":
+          cursor = "pointer";
+          break;
+        case "shatter":
+          cursor = "crosshair";
+          useMapStore.getState().setPaintFunction(getFeatureUnderCursor);
+          break;
+        default:
+          cursor = "";
+      }
+      mapRef.getCanvas().style.cursor = cursor;
+    },
+  );
+
   return [
     addLayerSubMapDocument,
     _shatterMapSideEffectRender,
     _hoverMapSideEffectRender,
     _zoneAssignmentMapSideEffectRender,
+    _updateMapCursor,
   ];
 };

app/src/app/utils/events/mapEvents.ts

@@ -15,15 +15,30 @@ import {
   BLOCK_HOVER_LAYER_ID,
   BLOCK_HOVER_LAYER_ID_CHILD,
 } from "@constants/layers";
+import { ActiveTool } from "@/app/constants/types";
 
 /*
 MapEvent handling; these functions are called by the event listeners in the MapComponent
 */
 
 /**
+ * Get the layer IDs to paint based on whether we have
+ * a shatterable map (based on whether a child layer is
+ * present) and the active tool. If the active tool is
+ * shatter, we only want to paint the shatterable layer.
+ *
+ * @param child_layer - string | undefined | null, the child layer
+ * @param activeTool - ActiveTool, the active tool
+ * @returns string[], the layer IDs to paint
+ */
+function getLayerIdsToPaint(
+  child_layer: string | undefined | null,
+  activeTool: ActiveTool,
+) {
+  if (activeTool === "shatter") {
+    return [BLOCK_HOVER_LAYER_ID];
+  }
 
-*/
-function getLayerIdsToPaint(child_layer: string | undefined | null) {
   return child_layer
     ? [BLOCK_HOVER_LAYER_ID, BLOCK_HOVER_LAYER_ID_CHILD]
     : [BLOCK_HOVER_LAYER_ID];
@@ -41,9 +56,13 @@ export const handleMapClick = (
   const mapStore = useMapStore.getState();
   const activeTool = mapStore.activeTool;
   const sourceLayer = mapStore.mapDocument?.parent_layer;
+  const handleShatter = mapStore.handleShatter;
 
   if (activeTool === "brush" || activeTool === "eraser") {
-    const paintLayers = getLayerIdsToPaint(mapStore.mapDocument?.child_layer);
+    const paintLayers = getLayerIdsToPaint(
+      mapStore.mapDocument?.child_layer,
+      activeTool,
+    );
     const selectedFeatures = mapStore.paintFunction(
       map,
       e,
@@ -57,6 +76,12 @@ export const handleMapClick = (
         SelectZoneAssignmentFeatures(mapStore);
       });
     }
+  } else if (activeTool === "shatter") {
+    const documentId = mapStore.mapDocument?.document_id;
+    const featureId = e.features?.[0].id?.toString();
+    if (documentId && featureId) {
+      handleShatter(documentId, [featureId]);
+    }
   } else {
     // tbd, for pan mode - is there an info mode on click?
   }
@@ -129,15 +154,18 @@ export const handleMapMouseMove = (
   const setHoverFeatures = mapStore.setHoverFeatures;
   const isPainting = mapStore.isPainting;
   const sourceLayer = mapStore.mapDocument?.parent_layer;
-  const paintLayers = getLayerIdsToPaint(mapStore.mapDocument?.child_layer);
+  const paintLayers = getLayerIdsToPaint(
+    mapStore.mapDocument?.child_layer,
+    activeTool,
+  );
   const selectedFeatures = mapStore.paintFunction(
     map,
     e,
     mapStore.brushSize,
     paintLayers,
   );
   const isBrushingTool =
-    sourceLayer && ["brush", "eraser"].includes(activeTool);
+    sourceLayer && ["brush", "eraser", "shatter"].includes(activeTool);
   if (isBrushingTool) {
     setHoverFeatures(selectedFeatures);
   }