perf(map): reuse resources across routes

Preserve standard network layers between map pages while disposing route-owned overlays and controls to prevent memory growth.

src/app/(main)/(map)/health-risk-analysis/page.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import Timeline from "@components/olmap/HealthRiskAnalysis/Timeline";
+import MapToolbar from "@components/olmap/core/Controls/Toolbar";
+import { HealthRiskProvider } from "@components/olmap/HealthRiskAnalysis/HealthRiskContext";
+import HealthRiskStatistics from "@components/olmap/HealthRiskAnalysis/HealthRiskStatistics";
+import PredictDataPanel from "@components/olmap/HealthRiskAnalysis/PredictDataPanel";
+import StyleLegend from "@components/olmap/core/Controls/StyleLegend";
+import {
+  RAINBOW_COLORS,
+  RISK_BREAKS,
+} from "@components/olmap/HealthRiskAnalysis/types";
+import { Box } from "@mui/material";
+
+export default function Home() {
+  return (
+    <HealthRiskProvider>
+      <MapToolbar
+        queryType="realtime"
+        hiddenButtons={["style"]}
+        HistoryPanel={PredictDataPanel}
+      />
+      <Timeline />
+      <HealthRiskStatistics />
+      <Box className="absolute bottom-40 right-4 drop-shadow-xl flex flex-row items-end max-w-screen-lg overflow-x-auto z-10">
+        <StyleLegend
+          layerName="管道"
+          layerId="health-risk"
+          property="健康风险"
+          colors={RAINBOW_COLORS}
+          type="line"
+          dimensions={Array(RAINBOW_COLORS.length).fill(2)}
+          breaks={[0, ...RISK_BREAKS]}
+        />
+      </Box>
+    </HealthRiskProvider>
+  );
+}

src/app/(main)/(map)/hydraulic-simulation/burst-detection/page.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import MapToolbar from "@components/olmap/core/Controls/Toolbar";
+import BurstDetectionPanel from "@/components/olmap/BurstDetection/BurstDetectionPanel";
+
+export default function Home() {
+  return (
+    <>
+      <MapToolbar
+        queryType="scheme"
+        schemeType="burst_detection"
+        hiddenButtons={["style"]}
+      />
+      <BurstDetectionPanel />
+    </>
+  );
+}

src/app/(main)/(map)/hydraulic-simulation/burst-location/page.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import MapToolbar from "@components/olmap/core/Controls/Toolbar";
+import BurstLocationPanel from "@/components/olmap/BurstLocation/BurstLocationPanel";
+
+export default function Home() {
+  return (
+    <>
+      <MapToolbar
+        queryType="scheme"
+        schemeType="burst_location"
+        hiddenButtons={["style"]}
+      />
+      <BurstLocationPanel />
+    </>
+  );
+}

src/app/(main)/(map)/hydraulic-simulation/burst-simulation/page.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import MapToolbar from "@components/olmap/core/Controls/Toolbar";
+import BurstPipeAnalysisPanel from "@/components/olmap/BurstSimulation/BurstPipeAnalysisPanel";
+
+export default function Home() {
+  return (
+    <>
+      <MapToolbar
+        queryType="scheme"
+        schemeType="burst_analysis"
+        enableCompare
+      />
+      <BurstPipeAnalysisPanel />
+    </>
+  );
+}

src/app/(main)/(map)/hydraulic-simulation/contaminant-simulation/page.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import MapToolbar from "@components/olmap/core/Controls/Toolbar";
+import WaterQualityPanel from "@/components/olmap/ContaminantSimulation/WaterQualityPanel";
+
+export default function Home() {
+  return (
+    <>
+      <MapToolbar
+        queryType="scheme"
+        schemeType="contaminant_analysis"
+        enableCompare
+      />
+      <WaterQualityPanel />
+    </>
+  );
+}

src/app/(main)/(map)/hydraulic-simulation/dma-leak-detection/page.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import MapToolbar from "@components/olmap/core/Controls/Toolbar";
+import DMALeakDetectionPanel from "@/components/olmap/DMALeakDetection/DMALeakDetectionPanel";
+
+export default function Home() {
+  return (
+    <>
+      <MapToolbar
+        queryType="scheme"
+        schemeType="dma_leak_identification"
+        hiddenButtons={["style"]}
+      />
+      <DMALeakDetectionPanel />
+    </>
+  );
+}

src/app/(main)/(map)/hydraulic-simulation/flushing-analysis/page.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import MapToolbar from "@components/olmap/core/Controls/Toolbar";
+import FlushingAnalysisPanel from "@/components/olmap/FlushingAnalysis/FlushingAnalysisPanel";
+
+export default function Home() {
+  return (
+    <>
+      <MapToolbar queryType="scheme" schemeType="flushing_analysis" />
+      <FlushingAnalysisPanel />
+    </>
+  );
+}

src/app/(main)/(map)/layout.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import MapComponent from "@components/olmap/core/MapComponent";
+
+export default function MapLayout({ children }: { children: ReactNode }) {
+  return <MapComponent>{children}</MapComponent>;
+}

src/app/(main)/(map)/monitoring-place-optimization/page.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import MapToolbar from "@components/olmap/core/Controls/Toolbar";
+import MonitoringPlaceOptimizationPanel from "@components/olmap/MonitoringPlaceOptimization/MonitoringPlaceOptimizationPanel";
+
+export default function Home() {
+  return (
+    <>
+      <MapToolbar hiddenButtons={["style"]} />
+      <MonitoringPlaceOptimizationPanel />
+    </>
+  );
+}

src/app/(main)/(map)/network-simulation/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useCallback, useState } from "react";
-import MapComponent from "@components/olmap/core/MapComponent";
 import Timeline from "@components/olmap/core/Controls/Timeline";
 import MapToolbar from "@components/olmap/core/Controls/Toolbar";
 
@@ -22,17 +21,15 @@ export default function Home() {
   }, []);
 
   return (
-    <div className="relative w-full h-full overflow-hidden">
-      <MapComponent>
-        <MapToolbar queryType="realtime" />
-        <Timeline />
-        <SCADADeviceList
-          onDeviceClick={handleDeviceClick}
-          onSelectionChange={handleSelectionChange}
-          selectedDeviceIds={selectedDeviceIds}
-        />
-        <SCADADataPanel deviceIds={selectedDeviceIds} visible={panelVisible} />
-      </MapComponent>
-    </div>
+    <>
+      <MapToolbar queryType="realtime" />
+      <Timeline />
+      <SCADADeviceList
+        onDeviceClick={handleDeviceClick}
+        onSelectionChange={handleSelectionChange}
+        selectedDeviceIds={selectedDeviceIds}
+      />
+      <SCADADataPanel deviceIds={selectedDeviceIds} visible={panelVisible} />
+    </>
   );
 }

src/app/(main)/(map)/scada-data-cleaning/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useCallback, useState } from "react";
-import MapComponent from "@components/olmap/core/MapComponent";
 import MapToolbar from "@components/olmap/core/Controls/Toolbar";
 
 import SCADADeviceList from "@components/olmap/SCADA/SCADADeviceList";
@@ -21,21 +20,19 @@ export default function Home() {
   }, []);
 
   return (
-    <div className="relative w-full h-full overflow-hidden">
-      <MapComponent>
-        <MapToolbar hiddenButtons={["style"]} />
-        <SCADADeviceList
-          onDeviceClick={handleDeviceClick}
-          onSelectionChange={handleSelectionChange}
-          selectedDeviceIds={selectedDeviceIds}
-          showCleaning={true}
-        />
-        <SCADADataPanel
-          deviceIds={selectedDeviceIds}
-          visible={panelVisible}
-          showCleaning={true}
-        />
-      </MapComponent>
-    </div>
+    <>
+      <MapToolbar hiddenButtons={["style"]} />
+      <SCADADeviceList
+        onDeviceClick={handleDeviceClick}
+        onSelectionChange={handleSelectionChange}
+        selectedDeviceIds={selectedDeviceIds}
+        showCleaning={true}
+      />
+      <SCADADataPanel
+        deviceIds={selectedDeviceIds}
+        visible={panelVisible}
+        showCleaning={true}
+      />
+    </>
   );
 }

src/app/(main)/health-risk-analysis/page.tsx

@@ -1,43 +0,0 @@
-"use client";
-
-import MapComponent from "@components/olmap/core/MapComponent";
-import Timeline from "@components/olmap/HealthRiskAnalysis/Timeline";
-import MapToolbar from "@components/olmap/core/Controls/Toolbar";
-import { HealthRiskProvider } from "@components/olmap/HealthRiskAnalysis/HealthRiskContext";
-import HealthRiskStatistics from "@components/olmap/HealthRiskAnalysis/HealthRiskStatistics";
-import PredictDataPanel from "@components/olmap/HealthRiskAnalysis/PredictDataPanel";
-import StyleLegend from "@components/olmap/core/Controls/StyleLegend";
-import {
-  RAINBOW_COLORS,
-  RISK_BREAKS,
-} from "@components/olmap/HealthRiskAnalysis/types";
-import { Box } from "@mui/material";
-
-export default function Home() {
-  return (
-    <div className="relative w-full h-full overflow-hidden">
-      <HealthRiskProvider>
-        <MapComponent>
-          <MapToolbar
-            queryType="realtime"
-            hiddenButtons={["style"]}
-            HistoryPanel={PredictDataPanel}
-          />
-          <Timeline />
-          <HealthRiskStatistics />
-          <Box className="absolute bottom-40 right-4 drop-shadow-xl flex flex-row items-end max-w-screen-lg overflow-x-auto z-10">
-            <StyleLegend
-              layerName="管道"
-              layerId="health-risk"
-              property="健康风险"
-              colors={RAINBOW_COLORS}
-              type="line"
-              dimensions={Array(RAINBOW_COLORS.length).fill(2)}
-              breaks={[0, ...RISK_BREAKS]}
-            />
-          </Box>
-        </MapComponent>
-      </HealthRiskProvider>
-    </div>
-  );
-}

src/app/(main)/hydraulic-simulation/burst-detection/page.tsx

@@ -1,16 +0,0 @@
-"use client";
-
-import MapComponent from "@components/olmap/core/MapComponent";
-import MapToolbar from "@components/olmap/core/Controls/Toolbar";
-import BurstDetectionPanel from "@/components/olmap/BurstDetection/BurstDetectionPanel";
-
-export default function Home() {
-  return (
-    <div className="relative h-full w-full overflow-hidden">
-      <MapComponent>
-        <MapToolbar queryType="scheme" schemeType="burst_detection" hiddenButtons={["style"]} />
-        <BurstDetectionPanel />
-      </MapComponent>
-    </div>
-  );
-}

src/app/(main)/hydraulic-simulation/burst-location/page.tsx

@@ -1,20 +0,0 @@
-"use client";
-
-import MapComponent from "@components/olmap/core/MapComponent";
-import MapToolbar from "@components/olmap/core/Controls/Toolbar";
-import BurstLocationPanel from "@/components/olmap/BurstLocation/BurstLocationPanel";
-
-export default function Home() {
-  return (
-    <div className="relative w-full h-full overflow-hidden">
-      <MapComponent>
-        <MapToolbar
-          queryType="scheme"
-          schemeType="burst_location"
-          hiddenButtons={["style"]}
-        />
-        <BurstLocationPanel />
-      </MapComponent>
-    </div>
-  );
-}

src/app/(main)/hydraulic-simulation/burst-simulation/page.tsx

@@ -1,20 +0,0 @@
-"use client";
-
-import MapComponent from "@components/olmap/core/MapComponent";
-import MapToolbar from "@components/olmap/core/Controls/Toolbar";
-import BurstPipeAnalysisPanel from "@/components/olmap/BurstSimulation/BurstPipeAnalysisPanel";
-
-export default function Home() {
-  return (
-    <div className="relative w-full h-full overflow-hidden">
-      <MapComponent>
-        <MapToolbar
-          queryType="scheme"
-          schemeType="burst_analysis"
-          enableCompare
-        />
-        <BurstPipeAnalysisPanel />
-      </MapComponent>
-    </div>
-  );
-}

src/app/(main)/hydraulic-simulation/contaminant-simulation/page.tsx

@@ -1,20 +0,0 @@
-"use client";
-
-import MapComponent from "@components/olmap/core/MapComponent";
-import MapToolbar from "@components/olmap/core/Controls/Toolbar";
-import WaterQualityPanel from "@/components/olmap/ContaminantSimulation/WaterQualityPanel";
-
-export default function Home() {
-  return (
-    <div className="relative w-full h-full overflow-hidden">
-      <MapComponent>
-        <MapToolbar
-          queryType="scheme"
-          schemeType="contaminant_analysis"
-          enableCompare
-        />
-        <WaterQualityPanel />
-      </MapComponent>
-    </div>
-  );
-}

src/app/(main)/hydraulic-simulation/dma-leak-detection/page.tsx

@@ -1,20 +0,0 @@
-"use client";
-
-import MapComponent from "@components/olmap/core/MapComponent";
-import MapToolbar from "@components/olmap/core/Controls/Toolbar";
-import DMALeakDetectionPanel from "@/components/olmap/DMALeakDetection/DMALeakDetectionPanel";
-
-export default function Home() {
-  return (
-    <div className="relative w-full h-full overflow-hidden">
-      <MapComponent>
-        <MapToolbar
-          queryType="scheme"
-          schemeType="dma_leak_identification"
-          hiddenButtons={["style"]}
-        />
-        <DMALeakDetectionPanel />
-      </MapComponent>
-    </div>
-  );
-}

src/app/(main)/hydraulic-simulation/flushing-analysis/page.tsx

@@ -1,16 +0,0 @@
-"use client";
-
-import MapComponent from "@components/olmap/core/MapComponent";
-import MapToolbar from "@components/olmap/core/Controls/Toolbar";
-import FlushingAnalysisPanel from "@/components/olmap/FlushingAnalysis/FlushingAnalysisPanel";
-
-export default function Home() {
-  return (
-    <div className="relative w-full h-full overflow-hidden">
-      <MapComponent>
-        <MapToolbar queryType="scheme" schemeType="flushing_analysis" />
-        <FlushingAnalysisPanel />
-      </MapComponent>
-    </div>
-  );
-}

src/app/(main)/monitoring-place-optimization/page.tsx

@@ -1,15 +0,0 @@
-"use client";
-
-import MapComponent from "@components/olmap/core/MapComponent";
-import MapToolbar from "@components/olmap/core/Controls/Toolbar";
-import MonitoringPlaceOptimizationPanel from "@components/olmap/MonitoringPlaceOptimization/MonitoringPlaceOptimizationPanel";
-export default function Home() {
-  return (
-    <div className="relative w-full h-full overflow-hidden">
-      <MapComponent>
-        <MapToolbar hiddenButtons={["style"]} />
-        <MonitoringPlaceOptimizationPanel />
-      </MapComponent>
-    </div>
-  );
-}