Canvass UX Map contrast and new icons

src/features/areaAssignments/components/OrganizerMapRenderer.tsx

@@ -23,6 +23,8 @@ import {
   ZetkinLocation,
 } from '../types';
 import { getBoundSize } from '../../canvass/utils/getBoundSize';
+import MarkerIcon from 'features/canvass/utils/markerIcon';
+import { getVisitPercentage } from 'features/canvass/utils/getVisitPercentage';
 
 const LocationMarker: FC<{
   areaAssId: string;
@@ -84,76 +86,19 @@ const LocationMarker: FC<{
       </DivIconMarker>
     );
   } else {
-    let visits = 0;
-    let successfulVisits = 0;
-    location.households.forEach((household) => {
-      const visitInThisAssignment = household.visits.find(
-        (visit) => visit.areaAssId == areaAssId
-      );
-      if (visitInThisAssignment) {
-        visits++;
-
-        const responseToMetricThatDefinesDone =
-          visitInThisAssignment.responses.find(
-            (response) => response.metricId == idOfMetricThatDefinesDone
-          );
-
-        if (responseToMetricThatDefinesDone?.response == 'yes') {
-          successfulVisits++;
-        }
-      }
-    });
-
-    const successfulVisitsColorPercent =
-      (successfulVisits / location.households.length) * 100;
-    const visitsColorPercent = (visits / location.households.length) * 100;
+    const percentage = getVisitPercentage(
+      areaAssId,
+      location.households,
+      idOfMetricThatDefinesDone
+    );
 
     return (
       <DivIconMarker iconAnchor={[6, 24]} position={location.position}>
-        <Box alignItems="center" display="flex" flexDirection="column">
-          <Box
-            alignItems="center"
-            bgcolor="white"
-            borderRadius={1}
-            boxShadow="0px 4px 20px 0px rgba(0,0,0,0.3)"
-            color={theme.palette.text.secondary}
-            display="inline-flex"
-            flexDirection="column"
-            fontSize="12px"
-            justifyContent="center"
-            padding="2px"
-          >
-            <div
-              style={{
-                alignItems: 'center',
-                background: `conic-gradient(${
-                  theme.palette.primary.main
-                } ${successfulVisitsColorPercent}%, ${lighten(
-                  theme.palette.primary.main,
-                  0.7
-                )} ${successfulVisitsColorPercent}% ${visitsColorPercent}%, ${
-                  theme.palette.grey[400]
-                } ${visitsColorPercent}%)`,
-                borderRadius: '2em',
-                display: 'flex',
-                flexDirection: 'row',
-                height: '16px',
-                justifyContent: 'center',
-                width: '16px',
-              }}
-            />
-          </Box>
-          <div
-            style={{
-              borderLeft: '4px solid transparent',
-              borderRight: '4px solid transparent',
-              borderTop: '4px solid white',
-              boxShadow: '0px 4px 20px 0px rgba(0,0,0,0.3)',
-              height: 0,
-              width: 0,
-            }}
-          />
-        </Box>
+        <MarkerIcon
+          percentage={percentage}
+          selected={false}
+          uniqueKey={location.id}
+        />
       </DivIconMarker>
     );
   }

src/features/canvass/components/CanvassMap.tsx

@@ -7,6 +7,7 @@ import {
   LatLngBounds,
   LatLngTuple,
   LeafletMouseEvent,
+  LatLngExpression,
 } from 'leaflet';
 import { makeStyles } from '@mui/styles';
 import { GpsNotFixed } from '@mui/icons-material';
@@ -15,23 +16,23 @@ import {
   AttributionControl,
   FeatureGroup,
   MapContainer,
+  Pane,
   Polygon,
   TileLayer,
 } from 'react-leaflet';
 
-import { ZetkinArea } from '../../areas/types';
+import CanvassMapOverlays from './CanvassMapOverlays';
 import { DivIconMarker } from 'features/events/components/LocationModal/DivIconMarker';
-import useCreateLocation from '../hooks/useCreateLocation';
-import useLocations from 'features/areaAssignments/hooks/useLocations';
 import getCrosshairPositionOnMap from '../utils/getCrosshairPositionOnMap';
-import getVisitState from '../utils/getVisitState';
-import MarkerIcon from '../utils/markerIcon';
-import { ZetkinAreaAssignment } from 'features/areaAssignments/types';
+import { getVisitPercentage } from '../utils/getVisitPercentage';
 import MapControls from 'features/areaAssignments/components/MapControls';
+import MarkerIcon from '../utils/markerIcon';
 import objToLatLng from 'features/areas/utils/objToLatLng';
-import CanvassMapOverlays from './CanvassMapOverlays';
-import useAllLocationVisits from '../hooks/useAllLocationVisits';
+import useCreateLocation from '../hooks/useCreateLocation';
 import useLocalStorage from 'zui/hooks/useLocalStorage';
+import useLocations from 'features/areaAssignments/hooks/useLocations';
+import { ZetkinArea } from '../../areas/types';
+import { ZetkinAreaAssignment } from 'features/areaAssignments/types';
 
 const useStyles = makeStyles(() => ({
   '@keyframes ghostMarkerBounce': {
@@ -73,10 +74,6 @@ const CanvassMap: FC<CanvassMapProps> = ({ areas, assignment }) => {
   const classes = useStyles();
   const locations = useLocations(assignment.organization.id).data || [];
   const createLocation = useCreateLocation(assignment.organization.id);
-  const locationVisitList = useAllLocationVisits(
-    assignment.organization.id,
-    assignment.id
-  );
   const [localStorageBounds, setLocalStorageBounds] = useLocalStorage<
     [LatLngTuple, LatLngTuple] | null
   >(`mapBounds-${assignment.id}`, null);
@@ -213,6 +210,21 @@ const CanvassMap: FC<CanvassMapProps> = ({ areas, assignment }) => {
     }
   }, [areas, map]);
 
+  const outerBounds: [number, number][] = [
+    [90, -180],
+    [90, 180],
+    [-90, 180],
+    [-90, -180],
+  ];
+
+  function getMaskLayer(areas: ZetkinArea[]) {
+    const maskPositions: LatLngExpression[][] = [
+      outerBounds,
+      ...areas.map((area) => area.points as LatLngExpression[]),
+    ];
+    return maskPositions;
+  }
+
   return (
     <>
       <Box position="relative">
@@ -277,6 +289,13 @@ const CanvassMap: FC<CanvassMapProps> = ({ areas, assignment }) => {
           attribution="<span style='color:#a3a3a3;'>Leaflet & OpenStreetMap</span>"
           url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
+        <Pane name="blendedPane" style={{ mixBlendMode: 'color-burn' }} />
+        <Polygon
+          fillColor="black"
+          fillOpacity={0.3}
+          positions={getMaskLayer(areas)}
+          stroke={false}
+        />
         <FeatureGroup
           ref={(fgRef) => {
             reactFGref.current = fgRef;
@@ -285,25 +304,27 @@ const CanvassMap: FC<CanvassMapProps> = ({ areas, assignment }) => {
           {areas.map((area) => (
             <Polygon
               key={area.id}
-              color={theme.palette.primary.main}
+              color="#A8A8A8"
+              fillColor="#A8A8A8"
+              fillOpacity={0.5}
+              pane="blendedPane"
+              pathOptions={{
+                color: theme.palette.common.black,
+                opacity: 0.5,
+                weight: 4,
+              }}
               positions={area.points}
             />
           ))}
         </FeatureGroup>
         {locations.map((location) => {
-          const householdState = getVisitState(
-            location.households,
-            assignment.id
-          );
-          const visited = locationVisitList.data?.some(
-            (visit) => visit.locationId == location.id
-          );
-
-          const state = visited ? 'all' : householdState;
-
           const selected = location.id == selectedLocationId;
           const key = `marker-${location.id}-${selected.toString()}`;
-
+          const percentage = getVisitPercentage(
+            assignment.id,
+            location.households,
+            assignment.metrics.find((metric) => metric.definesDone)?.id || null
+          );
           return (
             <DivIconMarker
               key={key}
@@ -319,9 +340,9 @@ const CanvassMap: FC<CanvassMapProps> = ({ areas, assignment }) => {
               }}
             >
               <MarkerIcon
-                dataToShow="visited"
+                percentage={percentage}
                 selected={selected}
-                state={state}
+                uniqueKey={key}
               />
             </DivIconMarker>
           );