From caf06a8a82c2ff0a93afec37e57aaa03867b6b56 Mon Sep 17 00:00:00 2001
From: Huarch <huarch97@outlook.com>
Date: Tue, 21 Jul 2026 10:17:26 +0800
Subject: [PATCH] style: improve SCADA analysis visibility

---
 features/workbench/map/scada-analysis.test.ts | 18 +++++++-------
 features/workbench/map/scada-analysis.ts      | 24 +++++++++----------
 tests/browser/scada-analysis.e2e.ts           |  8 +++----
 3 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/features/workbench/map/scada-analysis.test.ts b/features/workbench/map/scada-analysis.test.ts
index 8736253..44bd17e 100644
--- a/features/workbench/map/scada-analysis.test.ts
+++ b/features/workbench/map/scada-analysis.test.ts
@@ -15,25 +15,25 @@ describe("SCADA analysis overlay", () => {
     const indicator = scadaAnalysisLayers.find((layer) => layer.id === SCADA_ANALYSIS_LAYER_IDS.indicator);
     const label = scadaAnalysisLayers.find((layer) => layer.id === SCADA_ANALYSIS_LAYER_IDS.label);
     expect(SCADA_ANALYSIS_LEVEL_COLORS).toEqual({
-      high: "#DC2626",
+      high: "#F43F5E",
       medium: "#F59E0B",
-      low: "#16A34A",
-      unrated: "#7C3AED"
+      low: "#10B981",
+      unrated: "#8B5CF6"
     });
     expect(casing).toMatchObject({
       type: "circle",
-      paint: { "circle-radius": 16, "circle-stroke-color": "#FFFFFF", "circle-stroke-width": 7 }
+      paint: { "circle-radius": 20, "circle-stroke-color": "#FFFFFF", "circle-stroke-width": 8 }
     });
     expect(JSON.stringify(level)).toContain(SCADA_ANALYSIS_LEVEL_COLORS.high);
     expect(JSON.stringify(level)).toContain(SCADA_ANALYSIS_LEVEL_COLORS.medium);
     expect(JSON.stringify(level)).toContain(SCADA_ANALYSIS_LEVEL_COLORS.low);
     expect(JSON.stringify(level)).toContain(SCADA_ANALYSIS_LEVEL_COLORS.unrated);
-    expect(level).toMatchObject({ paint: { "circle-stroke-width": 4 } });
+    expect(level).toMatchObject({ paint: { "circle-radius": 20, "circle-stroke-width": 5 } });
     expect(indicator).toMatchObject({
       type: "circle",
       paint: {
-        "circle-radius": 5,
-        "circle-translate": [11, -11],
+        "circle-radius": 6,
+        "circle-translate": [14, -14],
         "circle-stroke-color": "#FFFFFF",
         "circle-stroke-width": 2
       }
@@ -43,11 +43,11 @@ describe("SCADA analysis overlay", () => {
       layout: {
         "symbol-sort-key": ["get", "sort_priority"],
         "text-field": ["get", "analysis_label"],
-        "text-size": 15,
+        "text-size": 18,
         "text-font": ["Noto Sans Regular"],
         "text-allow-overlap": false
       },
-      paint: { "text-halo-color": "#FFFFFF", "text-halo-width": 3, "text-halo-blur": 0.5 }
+      paint: { "text-halo-color": "#FFFFFF", "text-halo-width": 4, "text-halo-blur": 0.5 }
     });
     expect(JSON.stringify(label)).toContain("#991B1B");
     expect(JSON.stringify(label)).toContain("#92400E");
diff --git a/features/workbench/map/scada-analysis.ts b/features/workbench/map/scada-analysis.ts
index e9b36f5..c6720c2 100644
--- a/features/workbench/map/scada-analysis.ts
+++ b/features/workbench/map/scada-analysis.ts
@@ -21,10 +21,10 @@ export type ScadaAnalysisRenderResult = {
 };
 
 export const SCADA_ANALYSIS_LEVEL_COLORS: Record<ScadaAnalysisLevel, string> = {
-  high: "#DC2626",
+  high: "#F43F5E",
   medium: "#F59E0B",
-  low: "#16A34A",
-  unrated: "#7C3AED"
+  low: "#10B981",
+  unrated: "#8B5CF6"
 };
 
 const SCADA_ANALYSIS_LABEL_COLORS: Record<ScadaAnalysisLevel, string> = {
@@ -67,10 +67,10 @@ export const scadaAnalysisLayers: Layer[] = [
     type: "circle",
     source: SCADA_ANALYSIS_SOURCE_ID,
     paint: {
-      "circle-radius": 16,
+      "circle-radius": 20,
       "circle-color": "rgba(255,255,255,0)",
       "circle-stroke-color": "#FFFFFF",
-      "circle-stroke-width": 7
+      "circle-stroke-width": 8
     }
   },
   {
@@ -78,10 +78,10 @@ export const scadaAnalysisLayers: Layer[] = [
     type: "circle",
     source: SCADA_ANALYSIS_SOURCE_ID,
     paint: {
-      "circle-radius": 16,
+      "circle-radius": 20,
       "circle-color": "rgba(255,255,255,0)",
       "circle-stroke-color": levelColorExpression(SCADA_ANALYSIS_LEVEL_COLORS),
-      "circle-stroke-width": 4
+      "circle-stroke-width": 5
     }
   },
   {
@@ -89,8 +89,8 @@ export const scadaAnalysisLayers: Layer[] = [
     type: "circle",
     source: SCADA_ANALYSIS_SOURCE_ID,
     paint: {
-      "circle-radius": 5,
-      "circle-translate": [11, -11],
+      "circle-radius": 6,
+      "circle-translate": [14, -14],
       "circle-color": levelColorExpression(SCADA_ANALYSIS_LEVEL_COLORS),
       "circle-stroke-color": "#FFFFFF",
       "circle-stroke-width": 2
@@ -103,10 +103,10 @@ export const scadaAnalysisLayers: Layer[] = [
     layout: {
       "symbol-sort-key": ["get", "sort_priority"],
       "text-field": ["get", "analysis_label"],
-      "text-size": 15,
+      "text-size": 18,
       "text-font": ["Noto Sans Regular"],
       "text-letter-spacing": 0.015,
-      "text-offset": [0, -2.05],
+      "text-offset": [0, -2.2],
       "text-anchor": "bottom",
       "text-allow-overlap": false,
       "text-ignore-placement": false
@@ -114,7 +114,7 @@ export const scadaAnalysisLayers: Layer[] = [
     paint: {
       "text-color": levelColorExpression(SCADA_ANALYSIS_LABEL_COLORS),
       "text-halo-color": "#FFFFFF",
-      "text-halo-width": 3,
+      "text-halo-width": 4,
       "text-halo-blur": 0.5
     }
   }
diff --git a/tests/browser/scada-analysis.e2e.ts b/tests/browser/scada-analysis.e2e.ts
index cbe85eb..5f94592 100644
--- a/tests/browser/scada-analysis.e2e.ts
+++ b/tests/browser/scada-analysis.e2e.ts
@@ -66,17 +66,17 @@ test("frontend actions replace SCADA analysis results and remain legible at 375p
   expect(rendered).toEqual({
     label: "MP02 · 低",
     labelLayer: "symbol",
-    labelSize: 15,
+    labelSize: 18,
     labelFont: ["Noto Sans Regular"],
     level: "low",
     levelLayer: "circle",
     levelColors: [
       "match",
       ["get", "analysis_level"],
-      "high", "#DC2626",
+      "high", "#F43F5E",
       "medium", "#F59E0B",
-      "low", "#16A34A",
-      "#7C3AED"
+      "low", "#10B981",
+      "#8B5CF6"
     ],
     indicatorLayer: "circle"
   });