refactor: organize supply frontend structure

src/features/workbench/map/export-view.ts

@@ -119,5 +119,5 @@ function getExportLabel(targetLongEdge: number | undefined, scale: number) {
 
 function getDefaultExportFilename(label: string) {
   const timestamp = new Date().toISOString().slice(0, 19).replace(/[:T]/g, "-");
-  return `drainage-network-view-${label}-${timestamp}.png`;
+  return `supply-network-view-${label}-${timestamp}.png`;
 }

src/features/workbench/map/geoserver-config.ts

@@ -0,0 +1,5 @@
+import { env } from "@/shared/config/env";
+
+export const MAP_URL = env.TJWATER_MAP_URL.replace(/\/$/, "");
+
+export const GEOSERVER_WORKSPACE = env.TJWATER_GEOSERVER_WORKSPACE.trim().replace(/^\/+|\/+$/g, "");

src/features/workbench/map/map-control-config.ts

@@ -1,8 +1,6 @@
 import type { Map as MapLibreMap } from "maplibre-gl";
-import type { BaseLayerOption } from "@/features/map/core/components/base-layers-control";
-import type { MapLayerControlItem } from "@/features/map/core/components/layer-control";
-import type { MapLegendItem } from "@/features/map/core/components/legend";
-import { GEOSERVER_WORKSPACE } from "../../../lib/config";
+import type { BaseLayerOption, MapLayerControlItem, MapLegendItem } from "@/features/map/core";
+import { GEOSERVER_WORKSPACE } from "./geoserver-config";
 import { MAP_STYLE_TOKENS } from "./map-colors";
 import {
   AVAILABLE_WATER_NETWORK_SOURCE_IDS,
@@ -57,6 +55,18 @@ export const MAP_LEGEND_ITEMS: MapLegendItem[] = [
 
 export const BASE_LAYER_IDS = ["mapbox-light", "mapbox-satellite"] as const;
 
+export function applyBaseLayerVisibility(map: MapLibreMap, activeBaseLayerId: string) {
+  BASE_LAYER_IDS.forEach((layerId) => {
+    if (map.getLayer(layerId)) {
+      map.setLayoutProperty(
+        layerId,
+        "visibility",
+        activeBaseLayerId === layerId ? "visible" : "none"
+      );
+    }
+  });
+}
+
 export const BASE_LAYER_OPTIONS: BaseLayerOption[] = [
   {
     id: "mapbox-light",

src/features/workbench/map/map-feature-query.ts

@@ -1,5 +1,5 @@
 import type { FeatureCollection } from "geojson";
-import { GEOSERVER_WORKSPACE, MAP_URL } from "../../../lib/config";
+import { GEOSERVER_WORKSPACE, MAP_URL } from "./geoserver-config";
 import {
   SOURCE_LAYERS,
   isAvailableWaterNetworkSourceId,

src/features/workbench/map/map-layer-visuals.ts

@@ -139,70 +139,6 @@ const facilityIconSize = [
   24, 0.56
 ] as IconSize;
 
-export const DRAINAGE_LAYER_VISUALS = {
-  conduits: {
-    minzoom: 9,
-    casingWidth: [
-      "interpolate", ["linear"], ["zoom"],
-      9, 1.7,
-      13, 2.8,
-      17, ["+", 4.5, ["/", ["coalesce", ["get", "diameter"], 100], 300]],
-      22, ["+", 6, ["/", ["coalesce", ["get", "diameter"], 100], 260]],
-      24, ["+", 7, ["/", ["coalesce", ["get", "diameter"], 100], 240]]
-    ] as LineWidth,
-    width: [
-      "interpolate", ["linear"], ["zoom"],
-      9, 1.1,
-      13, 2,
-      17, ["+", 2.5, ["/", ["coalesce", ["get", "diameter"], 100], 360]],
-      22, ["+", 3.5, ["/", ["coalesce", ["get", "diameter"], 100], 300]],
-      24, ["+", 4, ["/", ["coalesce", ["get", "diameter"], 100], 280]]
-    ] as LineWidth,
-    hoverOutlineWidth: ["interpolate", ["linear"], ["zoom"], 9, 5.5, 13, 8, 17, 12.5, 22, 15, 24, 17] as LineWidth,
-    hoverWidth: ["interpolate", ["linear"], ["zoom"], 9, 3, 13, 5.2, 17, 9, 22, 11.5, 24, 13] as LineWidth,
-    selectedWidth: ["interpolate", ["linear"], ["zoom"], 9, 4, 13, 6.5, 17, 10.5, 22, 13.5, 24, 16] as LineWidth,
-    selectedBorderWidth: ["interpolate", ["linear"], ["zoom"], 9, 1.2, 13, 1.5, 17, 2, 22, 2.5, 24, 3] as LineWidth,
-    hitWidth: lineHitWidth
-  },
-  junctions: {
-    minzoom: 12,
-    haloRadius: ["interpolate", ["linear"], ["zoom"], 12, 1.2, 14, 1.8, 15, 2.8, 16, 4.5, 20, 7, 24, 9.5] as CircleRadius,
-    haloOpacity: ["interpolate", ["linear"], ["zoom"], 12, 0, 14, 0, 15, 1] as const,
-    radius: ["interpolate", ["linear"], ["zoom"], 12, 0.6, 14, 1, 15, 1.5, 16, 3, 20, 5.5, 24, 8] as CircleRadius,
-    hoverRadius: ["interpolate", ["linear"], ["zoom"], 12, 5, 16, 7, 20, 10, 24, 12] as CircleRadius,
-    selectedRadius: ["interpolate", ["linear"], ["zoom"], 12, 5.5, 16, 7.5, 20, 10.5, 24, 13] as CircleRadius,
-    hitRadius: pointHitRadius
-  },
-  orifices: {
-    minzoom: 11,
-    casingWidth: ["interpolate", ["linear"], ["zoom"], 11, 3.2, 17, 7.5, 22, 9, 24, 10] as LineWidth,
-    width: ["interpolate", ["linear"], ["zoom"], 11, 1.6, 17, 4.5, 22, 6, 24, 7] as LineWidth,
-    hoverOutlineWidth: ["interpolate", ["linear"], ["zoom"], 11, 6, 17, 10.5, 22, 12.5, 24, 14] as LineWidth,
-    hoverWidth: ["interpolate", ["linear"], ["zoom"], 11, 4, 17, 7, 22, 9, 24, 10.5] as LineWidth,
-    selectedWidth: ["interpolate", ["linear"], ["zoom"], 11, 5.5, 17, 9, 22, 12, 24, 14] as LineWidth,
-    selectedBorderWidth: ["interpolate", ["linear"], ["zoom"], 11, 1.25, 17, 1.75, 22, 2.25, 24, 2.5] as LineWidth,
-    hitWidth: lineHitWidth
-  },
-  pumps: {
-    minzoom: 11,
-    casingWidth: ["interpolate", ["linear"], ["zoom"], 11, 4, 17, 9.5, 22, 11, 24, 12] as LineWidth,
-    width: ["interpolate", ["linear"], ["zoom"], 11, 2.4, 17, 6.2, 22, 8, 24, 9] as LineWidth,
-    hoverOutlineWidth: ["interpolate", ["linear"], ["zoom"], 11, 7, 17, 12, 22, 14, 24, 16] as LineWidth,
-    hoverWidth: ["interpolate", ["linear"], ["zoom"], 11, 4.5, 17, 8.5, 22, 10.5, 24, 12] as LineWidth,
-    selectedWidth: ["interpolate", ["linear"], ["zoom"], 11, 6, 17, 10, 22, 13, 24, 15] as LineWidth,
-    selectedBorderWidth: ["interpolate", ["linear"], ["zoom"], 11, 1.25, 17, 1.75, 22, 2.25, 24, 2.5] as LineWidth,
-    hitWidth: lineHitWidth
-  },
-  outfalls: {
-    minzoom: 11,
-    haloRadius: ["interpolate", ["linear"], ["zoom"], 11, 5, 16, 7, 20, 9, 24, 11] as CircleRadius,
-    radius: ["interpolate", ["linear"], ["zoom"], 11, 3, 16, 5, 20, 7, 24, 9] as CircleRadius,
-    hoverRadius: ["interpolate", ["linear"], ["zoom"], 11, 6, 16, 8, 20, 11, 24, 13] as CircleRadius,
-    selectedRadius: ["interpolate", ["linear"], ["zoom"], 11, 7.5, 16, 9.5, 20, 12.5, 24, 15] as CircleRadius,
-    hitRadius: pointHitRadius
-  }
-} as const;
-
 export const SUPPLY_LAYER_VISUALS = {
   pipes: {
     minzoom: 8.5,

src/features/workbench/map/sources.ts

@@ -1,6 +1,6 @@
 import type { StyleSpecification, VectorSourceSpecification } from "maplibre-gl";
 
-import { GEOSERVER_WORKSPACE, MAP_URL } from "../../../lib/config";
+import { GEOSERVER_WORKSPACE, MAP_URL } from "./geoserver-config";
 import { MAP_STYLE_TOKENS } from "./map-colors";
 
 export const WATER_NETWORK_GLOBAL_VIEW = {

src/features/workbench/map/toolbar-config.ts

@@ -1,5 +1,5 @@
 import { BarChart3, Layers3, MapPinned, MoreHorizontal, Ruler } from "lucide-react";
-import type { MapToolbarItem } from "@/features/map/core/components/toolbar";
+import type { MapToolbarItem } from "@/features/map/core";
 
 export const waterNetworkToolbarItems: MapToolbarItem[] = [
   {