Merge branch 'main' into zoom-to-unassigned-tool

districtr · Jan 3, 2025 · e18784e · e18784e
2 parents ae1247e + e495d97
commit e18784e
Show file tree

Hide file tree

Showing 33 changed files with 838 additions and 233 deletions.
diff --git a/.github/workflows/fly-deploy-pr.yml b/.github/workflows/fly-deploy-pr.yml
@@ -1,4 +1,4 @@
-name: Fly Deploy Disctictr V2 Pull Request app
+name: Fly Deploy Districtr V2 Pull Request app
 on:
     pull_request:
         types: [opened, reopened, synchronize, closed]
@@ -53,18 +53,25 @@ jobs:
               id: fork-db
               if: github.event.action != 'closed'
               run: |              
-                if flyctl postgres list | grep -q ${{ github.event.repository.name }}-${{ github.event.number }}-db; then
-                  echo "DB already exists"                  
-                else              
+                DB_NAME="${{ github.event.repository.name }}-${{ github.event.number }}-db"
+                if flyctl postgres list | grep -q $DB_NAME; then
+                  echo "DB $DB_NAME already exists"                  
+                else
+                  echo "Creating database $DB_NAME"
+                  
                   flyctl postgres create \
-                  --name ${{ github.event.repository.name }}-${{ github.event.number }}-db \
+                  --name $DB_NAME \
                   --region ewr \
                   --initial-cluster-size 1 \
                   --vm-size shared-cpu-2x \
                   -p ${{ secrets.FLY_PR_PG_PASSWORD }} \
                   --org mggg \
                   --fork-from districtr-v2-db
                   
+                  MACHINE_ID=$(flyctl machines list -a $DB_NAME --json | jq -r '.[0].id')
+                  echo "Updating machine $MACHINE_ID"
+                  flyctl machine update $MACHINE_ID --vm-memory 1024 --app $DB_NAME -y
+                  
                   if [ $? -eq 0 ]; then
                     echo "Database created successfully."                                      
                   else

diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -38,6 +38,7 @@
     "axios": "^1.7.2",
     "comlink": "^4.4.2",
     "d3-scale-chromatic": "^3.1.0",
+    "fast-deep-equal": "^3.1.3",
     "idb-keyval": "^6.2.1",
     "lodash": "^4.17.21",
     "maplibre-gl": "^4.4.1",
@@ -47,6 +48,7 @@
     "react-dom": "^18",
     "react-resizable": "^3.0.5",
     "superjson": "^2.2.1",
+    "zundo": "^2.3.0",
     "zustand": "^4.5.2"
   },
   "devDependencies": {

diff --git a/app/src/app/components/Map.tsx b/app/src/app/components/Map.tsx
@@ -9,6 +9,7 @@ import {handleWheelOrPinch, mapContainerEvents, mapEvents} from '../utils/events
 import {INTERACTIVE_LAYERS} from '../constants/layers';
 import {useMapStore} from '../store/mapStore';
 import {MapTooltip} from './MapTooltip';
+import { MapLockShade } from './MapLockShade';
 
 export const MapComponent: React.FC = () => {
   const map: MutableRefObject<Map | null> = useRef(null);
@@ -103,7 +104,9 @@ export const MapComponent: React.FC = () => {
     ${mapLock ? 'pointer-events-none' : ''}
     `}
         ref={mapContainer}
-      />
+      >
+      <MapLockShade />
+      </div>
       <MapTooltip />
     </>
   );

diff --git a/app/src/app/components/MapLockShade.tsx b/app/src/app/components/MapLockShade.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import {useMapStore} from '../store/mapStore';
+import {Spinner} from '@radix-ui/themes';
+
+export const MapLockShade: React.FC = () => {
+  const mapLock = useMapStore(state => state.mapLock);
+  const isLoading = useMapStore(state => state.appLoadingState === 'loading');
+  const isLocked = mapLock || isLoading
+  return (
+    <div
+      style={{
+        opacity: isLocked ? 1 : 0,
+      }}
+      className="flex justify-center items-center absolute w-full h-full bg-white bg-opacity-25 pointer-events-none z-[100] transition-[150ms] delay-150"
+    >
+      <div className="rounded-full shadow-xl bg-white p-4">
+        <Spinner size="3" />
+      </div>
+    </div>
+  );
+};
diff --git a/app/src/app/components/sidebar/DataPanels.tsx b/app/src/app/components/sidebar/DataPanels.tsx
@@ -4,6 +4,7 @@ import PopulationPanel from '@components/sidebar/PopulationPanel';
 import {Tabs} from '@radix-ui/themes';
 import Layers from './Layers';
 import React from 'react';
+import {useMapStore} from '@/app/store/mapStore';
 
 interface DataPanelSpec {
   title: string;
@@ -13,7 +14,6 @@ interface DataPanelSpec {
 }
 
 interface DataPanelsProps {
-  defaultPanel?: string;
   panels?: DataPanelSpec[];
 }
 
@@ -36,14 +36,19 @@ const defaultPanels: DataPanelSpec[] = [
 ];
 
 const DataPanels: React.FC<DataPanelsProps> = ({
-  defaultPanel = defaultPanels[0].title,
   panels = defaultPanels,
 }) => {
+  const sidebarPanel = useMapStore(state => state.sidebarPanel);
+  const setSidebarPanel = useMapStore(state => state.setSidebarPanel);
   return (
-    <Tabs.Root defaultValue={defaultPanel}>
+    <Tabs.Root value={sidebarPanel}>
       <Tabs.List>
         {panels.map(panel => (
-          <Tabs.Trigger key={panel.title} value={panel.title}>
+          <Tabs.Trigger
+            key={panel.title}
+            value={panel.title}
+            onClick={_ => setSidebarPanel(panel.title as any)}
+          >
             {panel.label}
           </Tabs.Trigger>
         ))}

diff --git a/app/src/app/components/sidebar/GerryDBViewSelector.tsx b/app/src/app/components/sidebar/GerryDBViewSelector.tsx
@@ -2,12 +2,14 @@ import {useState} from 'react';
 import {Flex, Select} from '@radix-ui/themes';
 import {useMapStore} from '../../store/mapStore';
 import {document} from '@/app/utils/api/mutations';
+import { useTemporalStore } from '@/app/store/temporalStore';
 
 export function GerryDBViewSelector() {
   const [limit, setLimit] = useState<number>(30);
   const [offset, setOffset] = useState<number>(0);
   const mapDocument = useMapStore(state => state.mapDocument);
   const mapViews = useMapStore(state => state.mapViews);
+  const clear = useTemporalStore(store => store.clear);
   const {isPending, isError, data, error} = mapViews || {};
 
   const selectedView = data?.find(view => view.gerrydb_table_name === mapDocument?.gerrydb_table);
@@ -24,6 +26,7 @@ export function GerryDBViewSelector() {
       return;
     }
     console.log('mutating to create new document');
+    clear();
     document.mutate({gerrydb_table: selectedDistrictrMap.gerrydb_table_name});
   };
 

diff --git a/app/src/app/components/sidebar/Layers.tsx b/app/src/app/components/sidebar/Layers.tsx
@@ -46,8 +46,6 @@ export default function Layers() {
           mapOptions.showZoneNumbers ? '2' : '',
           parentsAreBroken && mapOptions.showBrokenDistricts ? '3' : '',
           mapOptions.lockPaintedAreas === true ? '4' : '',
-          mapOptions.higlightUnassigned === true ? 'higlightUnassigned' : '',
-          mapOptions.showPopulationTooltip === true ? 'showPopulationTooltip' : '',
         ]}
       >
         <CheckboxGroup.Item
@@ -64,49 +62,47 @@ export default function Layers() {
         >
           Show painted districts
         </CheckboxGroup.Item>
-        <CheckboxGroup.Item value="2" onClick={() => setMapOptions({
-          showZoneNumbers: !mapOptions.showZoneNumbers
-        })}>
-          Show numbering for painted districts <i>(experimental)</i>
-        </CheckboxGroup.Item>
-        <CheckboxGroup.Item
-          value="3"
-          disabled={!parentsAreBroken}
-          onClick={() => toggleHighlightBrokenDistricts()}
-        >
-          Highlight broken precincts
-        </CheckboxGroup.Item>
         <CheckboxGroup.Item
-          value="higlightUnassigned"
+          value="2"
           onClick={() =>
             setMapOptions({
-              higlightUnassigned: !mapOptions.higlightUnassigned,
+              showZoneNumbers: !mapOptions.showZoneNumbers,
             })
           }
         >
-          Highlight unassigned units
+          Show numbering for painted districts <i>(experimental)</i>
         </CheckboxGroup.Item>
         <CheckboxGroup.Item
-          value="showPopulationTooltip"
-          onClick={() =>
-            setMapOptions({
-              showPopulationTooltip: !mapOptions.showPopulationTooltip,
-            })
-          }
+          value="3"
+          disabled={!parentsAreBroken}
+          onClick={() => toggleHighlightBrokenDistricts()}
         >
-          Show population tooltip
+          Highlight broken precincts
         </CheckboxGroup.Item>
       </CheckboxGroup.Root>
       <Heading as="h3" weight="bold" size="3">
         Boundaries
       </Heading>
       <CheckboxGroup.Root
         name="contextualLayers"
-        value={COUNTY_LAYER_IDS.every(layerId => visibleLayerIds.includes(layerId)) ? ['1'] : []}
+        value={[
+          COUNTY_LAYER_IDS.every(layerId => visibleLayerIds.includes(layerId)) ? '1' : '',
+          mapOptions.prominentCountyNames ? 'prominentCountyNames' : '',
+        ]}
       >
         <CheckboxGroup.Item value="1" onClick={() => toggleLayers(COUNTY_LAYER_IDS)}>
           Show county boundaries
         </CheckboxGroup.Item>
+        <CheckboxGroup.Item
+          value="prominentCountyNames"
+          onClick={() =>
+            setMapOptions({
+              prominentCountyNames: !mapOptions.prominentCountyNames,
+            })
+          }
+        >
+          Emphasize County Names
+        </CheckboxGroup.Item>
         <CheckboxGroup.Item value="2" disabled>
           Show tribes and communities
         </CheckboxGroup.Item>

diff --git a/app/src/app/components/sidebar/PopulationPanel/PopulationChart/PopulationChart.tsx b/app/src/app/components/sidebar/PopulationPanel/PopulationChart/PopulationChart.tsx
@@ -195,6 +195,7 @@ export const PopulationChart: React.FC<{
                   yScale,
                   entry,
                   maxPop,
+                  idealPopulation,
                   index,
                   barHeight,
                   isHovered,

diff --git a/app/src/app/components/sidebar/PopulationPanel/PopulationChart/PopulationLabels.tsx b/app/src/app/components/sidebar/PopulationPanel/PopulationChart/PopulationLabels.tsx
@@ -7,6 +7,7 @@ export const PopulationLabels: React.FC<{
   yScale: (value: number) => number;
   entry: {zone: number; total_pop: number};
   maxPop: number;
+  idealPopulation?: number;
   index: number;
   barHeight: number;
   isHovered: boolean;
@@ -18,14 +19,15 @@ export const PopulationLabels: React.FC<{
   yScale,
   entry,
   maxPop,
+  idealPopulation,
   index,
   barHeight,
   isHovered,
   showPopNumbers,
   showTopBottomDeviation,
   width,
 }) => {
-  const popDiffLabel = formatNumber(entry.total_pop - maxPop, 'string');
+  const popDiffLabel = formatNumber(entry.total_pop - (idealPopulation || 0), 'string');
   const popLabel = formatNumber(entry.total_pop, 'string');
   if (!popDiffLabel || !popLabel) return null;
   const [left, top] = [xScale(entry.total_pop), yScale(index) + barHeight];

diff --git a/app/src/app/components/sidebar/PopulationPanel/PopulationChart/PopulationTooltip.tsx b/app/src/app/components/sidebar/PopulationPanel/PopulationChart/PopulationTooltip.tsx
@@ -3,16 +3,12 @@ import {colorScheme} from '@/app/constants/colors';
 import {formatNumber} from '@/app/utils/numbers';
 import {Card, Text} from '@radix-ui/themes';
 
-export const PopulationCustomTooltip = ({y, pop, index, idealPopulation, maxPop}: TooltipInput) => {
+export const PopulationCustomTooltip = ({y, pop, index, idealPopulation}: TooltipInput) => {
   const deviationFromIdeal = idealPopulation ? (idealPopulation - pop) * -1 : 0;
   const deviationDir = deviationFromIdeal > 0 ? '+' : '';
   const deviationPercent = idealPopulation
     ? formatNumber(deviationFromIdeal / idealPopulation, 'percent')
     : '';
-  const deviationFromMax = maxPop ? (maxPop - pop) * -1 : 0;
-  const deviationFromMaxDir = deviationFromMax > 0 ? '+' : '';
-  const deviationFromMaxPercent = maxPop ? formatNumber(deviationFromMax / maxPop, 'percent') : '';
-  const isMax = pop === maxPop;
   return (
     <foreignObject x="20" y={y + 10} width="300" height="120" style={{pointerEvents: 'none'}}>
       <Card size="1" style={{padding: '.25rem .375rem'}}>
@@ -31,12 +27,6 @@ export const PopulationCustomTooltip = ({y, pop, index, idealPopulation, maxPop}
           Zone {index + 1}: {formatNumber(pop, 'string')}
         </span>
         <br />
-        <Text>
-          {idealPopulation && isMax
-            ? `Deviation from max: 0`
-            : `Deviation from max: ${deviationFromMaxDir}${deviationFromMaxPercent} (${deviationFromMaxDir}${formatNumber(deviationFromMax, 'string')})`}
-        </Text>
-        <br />
         <Text>
           {idealPopulation &&
             `Deviation from ideal: ${deviationDir}${deviationPercent} (${deviationDir}${formatNumber(deviationFromIdeal, 'string')})`}
-Original file line number
+Diff line change
@@ Expand Up / @@ -195,6 +195,7 @@ export const PopulationChart: React.FC<{ @@
                       yScale,
                       entry,
                       maxPop,
+                      idealPopulation,
                       index,
                       barHeight,
                       isHovered,
@@ Expand Down @@