From f3511b1ab46ffa96ab35739b2b4102e7215b7f69 Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Mon, 10 Jun 2024 15:53:59 +0100
Subject: [PATCH] Replace with a new private hosted layer of criticals and
 policy conflicts

---
 src/lib/browse/LayerControls.svelte          |   2 +
 src/lib/browse/layers/points/Problems.svelte | 115 +++++++++++++++++++
 src/lib/maplibre/zorder.ts                   |   6 +-
 3 files changed, 119 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/browse/layers/points/Problems.svelte

diff --git a/src/lib/browse/LayerControls.svelte b/src/lib/browse/LayerControls.svelte
index 168fc8ec..29c925c7 100644
--- a/src/lib/browse/LayerControls.svelte
+++ b/src/lib/browse/LayerControls.svelte
@@ -37,6 +37,7 @@
   import SportsSpacesLayerControl from "./layers/points/SportsSpaces.svelte";
   import Stats19LayerControl from "./layers/points/Stats19.svelte";
   import VehicleCountsLayerControl from "./layers/points/VehicleCounts.svelte";
+  import ProblemsLayerControl from "./layers/points/Problems.svelte";
   import { interactiveMapLayersEnabled } from "./stores";
 
   // Workaround for https://github.com/sveltejs/svelte/issues/7630
@@ -113,6 +114,7 @@
         <RoadWidthsLayerControl />
         <PavementWidthsLayerControl />
         <RoadSpeedsLayerControl />
+        <ProblemsLayerControl />
       {/if}
       <PollutionLayerControl />
       <RoadNoiseLayerControl />
diff --git a/src/lib/browse/layers/points/Problems.svelte b/src/lib/browse/layers/points/Problems.svelte
new file mode 100644
index 00000000..7c8fa99a
--- /dev/null
+++ b/src/lib/browse/layers/points/Problems.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+  import {
+    HelpButton,
+    Popup,
+    privateResourceBaseUrl,
+    Legend,
+  } from "lib/common";
+  import { Checkbox } from "govuk-svelte";
+  import { layerId, constructMatchExpression } from "lib/maplibre";
+  import { CircleLayer, GeoJSON } from "svelte-maplibre";
+  import { showHideLayer } from "../url";
+
+  let name = "problems";
+
+  let show = showHideLayer(name);
+
+  // Display full details in a certain order
+  let keys = [
+    "Issue ID",
+    "Proposed ID",
+    "Scheme ID",
+    "Date Logged",
+    "Inspector",
+
+    "Street Location",
+    "Code",
+
+    "Issue Description",
+    "External Inspectorate Comment for LA",
+
+    "Issue Stage",
+    "Resolved by Design",
+    "Design Review Status",
+    "Date of Resolution",
+    "Design Resolution",
+  ];
+
+  let legend: [string, string][] = [
+    ["Outstanding", "red"],
+    ["Pending", "yellow"],
+    ["Resolved", "green"],
+    ["Not Applicable", "grey"],
+    ["No Resolution Planned", "black"],
+  ];
+</script>
+
+<Checkbox bind:checked={$show}>
+  Problems
+  <span slot="right">
+    <HelpButton>
+      <p>
+        Critical issues and policy conflicts from the DA Log. This is internally
+        collected data.
+      </p>
+      <p>This layer is manually copied from a copy of the DA Log. The data is recent as of 10 June 2024.</p>
+    </HelpButton>
+  </span>
+</Checkbox>
+{#if show}
+  <Legend rows={legend} />
+{/if}
+
+<GeoJSON data={`${privateResourceBaseUrl()}/v1/problems.geojson.gz`}>
+  <CircleLayer
+    {...layerId(name)}
+    paint={{
+      "circle-color": constructMatchExpression(
+        ["get", "Design Review Status"],
+        Object.fromEntries(legend),
+        "cyan",
+      ),
+      "circle-opacity": 0.9,
+      "circle-radius": [
+        "interpolate",
+        ["linear"],
+        ["zoom"],
+        1,
+        2,
+        8,
+        3,
+        13,
+        15,
+      ],
+      "circle-stroke-color": "black",
+      "circle-stroke-width": 0.1,
+    }}
+    layout={{
+      visibility: $show ? "visible" : "none",
+    }}
+    hoverCursor="pointer"
+    eventsIfTopMost
+  >
+    <Popup openOn="hover" let:props>
+      <h2>{props["Issue ID"]} - {props["Code"]}</h2>
+      <p>{props["Issue Stage"]}</p>
+    </Popup>
+
+    <Popup openOn="click" popupClass="border-popup" let:props>
+      <div style="max-width: 30vw; max-height: 60vh; overflow: auto;">
+        {#each keys as key}
+          <p>
+            {key}:
+            <b>{props[key]}</b>
+          </p>
+        {/each}
+      </div>
+    </Popup>
+  </CircleLayer>
+</GeoJSON>
+
+<style>
+  :global(.border-popup .maplibregl-popup-content) {
+    border: 1px solid black;
+  }
+</style>
diff --git a/src/lib/maplibre/zorder.ts b/src/lib/maplibre/zorder.ts
index e0883af3..ec4433ff 100644
--- a/src/lib/maplibre/zorder.ts
+++ b/src/lib/maplibre/zorder.ts
@@ -130,10 +130,8 @@ const layerZorder = [
   sketch("hover-points"),
   sketch(browse("interventions-points")),
 
-  // Criticals are one layer that should display on top of scheme data
-  browse("criticals-clusters"),
-  browse("criticals-counts"),
-  browse("criticals-points"),
+  // Problem points are one layer that should display on top of scheme data
+  browse("problems"),
 
   sketch("edit-polygon-fill"),
   sketch("edit-polygon-lines"),