feat(map): add five-source drainage styling

features/workbench/map-workbench-page.tsx

@@ -47,7 +47,8 @@ import {
   INITIAL_LAYER_VISIBILITY,
   MAP_LEGEND_ITEMS,
   WORKBENCH_LAYER_GROUPS,
-  createLayerControlItems
+  createLayerControlItems,
+  getWorkbenchLayerIds
 } from "./map/map-control-config";
 import { waterNetworkToolbarItems } from "./map/toolbar-config";
 import type { DetailFeature, ScheduledConditionItem, ScheduledConditionRecord, WorkbenchAlert } from "./types";
@@ -178,7 +179,8 @@ export function MapWorkbenchPage() {
     leftPanelOpen,
     rightPanelOpen,
     impactVisible,
-    onSelectFeature: handleSelectFeature
+    onSelectFeature: handleSelectFeature,
+    selectedFeature: detailFeature
   });
 
   const agent = useWorkbenchAgent({
@@ -286,11 +288,11 @@ export function MapWorkbenchPage() {
   );
 
   const layerControlItems = useMemo(() => createLayerControlItems(layerVisibility), [layerVisibility]);
-  function handleToggleLayer(layerGroupId: string, visible: boolean) {
+  function handleToggleLayer(layerControlId: string, visible: boolean) {
     const map = mapRef.current;
 
-    setLayerVisibility((current) => ({ ...current, [layerGroupId]: visible }));
-    if (layerGroupId === "simulation") {
+    setLayerVisibility((current) => ({ ...current, [layerControlId]: visible }));
+    if (layerControlId === "simulation") {
       setImpactVisible(visible);
     }
 
@@ -298,7 +300,7 @@ export function MapWorkbenchPage() {
       return;
     }
 
-    WORKBENCH_LAYER_GROUPS[layerGroupId]?.forEach((layerId) => {
+    getWorkbenchLayerIds(map, layerControlId).forEach((layerId) => {
       if (map.getLayer(layerId)) {
         map.setLayoutProperty(layerId, "visibility", visible ? "visible" : "none");
       }