add priority color outline to task markers (#2756)

* add priority color outline to task markers

* run formatting

Author: CollinBeczak

src/components/HOCs/WithTaskClusterMarkers/WithTaskClusterMarkers.jsx

@@ -20,10 +20,14 @@ export const WithTaskClusterMarkers = function (WrappedComponent) {
     }
 
     componentDidUpdate(prevProps) {
+      const showPriorityColors = this.props.user?.settings?.showPriorityMarkerColors ?? false;
+      const prevShowPriorityColors = prevProps.user?.settings?.showPriorityMarkerColors ?? false;
+
       if (
         !_isEqual(this.props.taskClusters, prevProps.taskClusters) ||
         !_isEqual(this.props.selectedTasks, prevProps.selectedTasks) ||
-        !_isEqual(this.props.selectedClusters, prevProps.selectedClusters)
+        !_isEqual(this.props.selectedClusters, prevProps.selectedClusters) ||
+        showPriorityColors !== prevShowPriorityColors
       ) {
         this.updateMapMarkers();
       }
@@ -69,12 +73,15 @@ export const WithTaskClusterMarkers = function (WrappedComponent) {
           tasksToDeselect.push({ id: clusterId });
         }
 
+        const showPriorityColors = this.props.user?.settings?.showPriorityMarkerColors ?? false;
+
         return AsMappableCluster(cluster).mapMarker(
           this.props.monochromaticClusters,
           this.props.selectedTasks,
           this.props.highlightPrimaryTask,
           this.props.selectedClusters,
           bundleConflict,
+          showPriorityColors,
         );
       });
 

src/components/TaskPane/TaskNearbyList/TaskNearbyMap.jsx

@@ -9,7 +9,10 @@ import _map from "lodash/map";
 import { AttributionControl, MapContainer, Marker, Tooltip, useMap } from "react-leaflet";
 import resolveConfig from "tailwindcss/resolveConfig";
 import AsMappableTask from "../../../interactions/Task/AsMappableTask";
-import { messagesByPriority } from "../../../services/Task/TaskPriority/TaskPriority";
+import {
+  TaskPriorityColors,
+  messagesByPriority,
+} from "../../../services/Task/TaskPriority/TaskPriority";
 import { TaskStatusColors, messagesByStatus } from "../../../services/Task/TaskStatus/TaskStatus";
 import { buildLayerSources } from "../../../services/VisibleLayer/LayerSources";
 import tailwindConfig from "../../../tailwind.config.js";
@@ -166,14 +169,19 @@ export class TaskNearbyMap extends Component {
     const hasTaskMarkers = (this.props.taskMarkers?.length ?? 0) > 0;
     let coloredMarkers = null;
     if (hasTaskMarkers) {
+      const showPriorityColors = this.props.user?.settings?.showPriorityMarkerColors ?? false;
+
       coloredMarkers = _map(this.props.taskMarkers, (marker) => {
         const isRequestedMarker = marker.options.taskId === this.props.requestedNextTask;
         const markerData = _cloneDeep(marker);
         markerData.options.title = `Task ${marker.options.taskId}`;
+        const priorityColor = showPriorityColors
+          ? TaskPriorityColors[marker.options?.priority ?? 0] || colors["grey-leaflet"]
+          : colors["grey-leaflet"];
         const markerStyle = {
           fill: TaskStatusColors[marker.options?.status ?? 0],
-          stroke: isRequestedMarker ? colors.yellow : colors["grey-leaflet"],
-          strokeWidth: isRequestedMarker ? 2 : 0.5,
+          stroke: isRequestedMarker ? colors.yellow : priorityColor,
+          strokeWidth: isRequestedMarker ? 2 : showPriorityColors ? 1.5 : 0.5,
         };
 
         return (

src/interactions/TaskCluster/AsMappableCluster.jsx

@@ -7,6 +7,7 @@ import _isEmpty from "lodash/isEmpty";
 import _map from "lodash/map";
 import _merge from "lodash/merge";
 import resolveConfig from "tailwindcss/resolveConfig";
+import { TaskPriorityColors } from "../../services/Task/TaskPriority/TaskPriority";
 import { TaskStatusColors } from "../../services/Task/TaskStatus/TaskStatus";
 import tailwindConfig from "../../tailwind.config.js";
 
@@ -62,6 +63,7 @@ export class AsMappableCluster {
     highlightPrimaryTask,
     selectedClusters = null,
     bundleConflict,
+    showPriorityColors = false,
   ) {
     return {
       position: [this.point.lat, this.point.lng],
@@ -79,6 +81,7 @@ export class AsMappableCluster {
         highlightPrimaryTask,
         selectedClusters,
         bundleConflict,
+        showPriorityColors,
       ),
       zIndexOffset: bundleConflict ? -10 : 0,
     };
@@ -94,6 +97,7 @@ export class AsMappableCluster {
     highlightPrimaryTask = false,
     selectedClusters = null,
     bundleConflict = false,
+    showPriorityColors = false,
   ) {
     const count =
       typeof this.rawData.getChildCount === "function"
@@ -150,6 +154,13 @@ export class AsMappableCluster {
 
       let icon = _cloneDeep(statusIcons[markerData.taskStatus] || statusIcons[0]);
 
+      // Set stroke color based on priority if enabled
+      if (showPriorityColors) {
+        const priorityColor = TaskPriorityColors[markerData.taskPriority] || colors["grey-leaflet"];
+        icon.options.style.stroke = priorityColor;
+        icon.options.style.strokeWidth = 1;
+      }
+
       if (bundleConflict) {
         const red = parseInt(icon.options.style.fill.slice(1, 3), 16);
         const green = parseInt(icon.options.style.fill.slice(3, 5), 16);

src/pages/Profile/Messages.js

@@ -298,4 +298,15 @@ export default defineMessages({
     id: "Profile.form.mandatory.label",
     defaultMessage: "Mandatory",
   },
+
+  showPriorityMarkerColorsLabel: {
+    id: "Profile.form.showPriorityMarkerColors.label",
+    defaultMessage: "Show Priority Colors on Map Markers",
+  },
+
+  showPriorityMarkerColorsDescription: {
+    id: "Profile.form.showPriorityMarkerColors.description",
+    defaultMessage:
+      "Display task priority as colored outlines on map markers (high priority = red, medium = orange, low = teal). When disabled, markers use a standard grey outline.",
+  },
 });

src/pages/Profile/UserSettings/UserSettingsSchema.jsx

@@ -135,6 +135,12 @@ export const jsSchema = (intl, user, editor) => {
         default: false,
         enumNames: [intl.formatMessage(messages.yesLabel), intl.formatMessage(messages.noLabel)],
       },
+      showPriorityMarkerColors: {
+        title: intl.formatMessage(messages.showPriorityMarkerColorsLabel),
+        type: "boolean",
+        default: false,
+        enumNames: [intl.formatMessage(messages.yesLabel), intl.formatMessage(messages.noLabel)],
+      },
     },
   };
 
@@ -229,6 +235,10 @@ export const uiSchema = (intl, user, editor) => {
       "ui:widget": "radio",
       "ui:help": intl.formatMessage(messages.disableTaskConfirmDescription),
     },
+    showPriorityMarkerColors: {
+      "ui:widget": "radio",
+      "ui:help": intl.formatMessage(messages.showPriorityMarkerColorsDescription),
+    },
     "ui:order": [
       "locale",
       "allowFollowing",
@@ -238,6 +248,7 @@ export const uiSchema = (intl, user, editor) => {
       "isReviewer",
       "customBasemaps",
       "seeTagFixSuggestions",
+      "showPriorityMarkerColors",
       "disableTaskConfirm",
     ],
   };