From a9f4ec97f1c5bee8074bf7abd601b7c3618a6c20 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Tue, 16 Jul 2024 22:47:22 +0200
Subject: [PATCH 1/6] add Planning Data links

---
 .../components/PlanningConstraints/List.tsx   | 68 +++++++++++++------
 1 file changed, 46 insertions(+), 22 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
index 60e0c59c81..2158e58928 100644
--- a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
+++ b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
@@ -14,12 +14,15 @@ import type {
   Metadata,
 } from "@opensystemslab/planx-core/types";
 import groupBy from "lodash/groupBy";
+import { useStore } from "pages/FlowEditor/lib/store";
 import React, { ReactNode } from "react";
 import ReactHtmlParser from "react-html-parser";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 import Caret from "ui/icons/Caret";
 import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml";
 
+import { SiteAddress } from "../FindProperty/model";
+
 const CATEGORY_COLORS: Record<string, string> = {
   "General policy": "#99C1DE",
   "Heritage and conservation": "#EDDCD2",
@@ -70,7 +73,7 @@ export default function ConstraintsList({
   data,
   metadata,
 }: ConstraintsListProps) {
-  const groupedConstraints = groupBy(data, (constraint: Constraint) => {
+  const groupedConstraints = groupBy(data, (constraint) => {
     return constraint.category;
   });
 
@@ -105,10 +108,11 @@ export default function ConstraintsList({
                 {category}
               </Typography>
             </ListSubheader>
-            <List dense disablePadding>
-              {groupedConstraints[category].map((con: any) => (
+            <List key={`${category}-${index}`} dense disablePadding>
+              {groupedConstraints[category].map((con) => (
                 <ConstraintListItem
-                  key={con.text}
+                  key={con.fn}
+                  value={con.value}
                   content={con.text}
                   data={con.value ? con.data : null}
                   metadata={metadata?.[con.fn]}
@@ -126,8 +130,9 @@ export default function ConstraintsList({
 }
 
 interface ConstraintListItemProps {
-  key: string;
-  content: string;
+  key: Constraint["fn"];
+  value: Constraint["value"];
+  content: Constraint["text"];
   data: Constraint["data"] | null;
   metadata?: Metadata;
   category: string;
@@ -135,10 +140,16 @@ interface ConstraintListItemProps {
 }
 
 function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
+  const { longitude, latitude } =
+    (useStore(
+      (state) => state.computePassport().data?._address,
+    ) as SiteAddress) || {};
   const item = props.metadata?.name.replaceAll(" ", "-");
+  const isSourcedFromPlanningData =
+    props.metadata?.plural !== "Classified roads";
 
   return (
-    <ListItem disablePadding sx={{ backgroundColor: "white" }}>
+    <ListItem key={props.key} disablePadding sx={{ backgroundColor: "white" }}>
       <StyledAccordion {...props} disableGutters>
         <AccordionSummary
           id={`${item}-header`}
@@ -158,7 +169,7 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
             background: (theme) => theme.palette.background.default,
           }}
         >
-          <>
+          <React.Fragment>
             <Typography variant="h4" gutterBottom>
               {`This property ${props?.content}`}
             </Typography>
@@ -179,26 +190,39 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
                           sx={{ display: "list-item" }}
                         >
                           <Typography variant="body2">
-                            {record.name}{" "}
-                            {record.name && record["documentation-url"] && (
-                              <span>
-                                (
-                                <Link
-                                  href={record["documentation-url"]}
-                                  target="_blank"
-                                >
-                                  source
-                                </Link>
-                                )
-                              </span>
-                            )}
+                            <Link
+                              href={`https://www.planning.data.gov.uk/entity/${record.entity}`}
+                              target="_blank"
+                            >
+                              {record.name ||
+                                (record["flood-risk-level"] &&
+                                  `${props.metadata?.name} - Level ${record["flood-risk-level"]}`) ||
+                                `Planning Data entity #${record.entity}`}
+                            </Link>
                           </Typography>
                         </ListItem>
                       ),
                   )}
               </List>
             )}
-          </>
+          </React.Fragment>
+          {isSourcedFromPlanningData && (
+            <Typography component="div" variant="body2" my={2}>
+              {`View on the `}
+              <Link
+                href={`https://www.planning.data.gov.uk/map/?dataset=${props.metadata?.dataset}#${latitude},${longitude},17.5z`}
+                target="_blank"
+              >
+                Planning Data map
+              </Link>
+              {` (opens in a new tab).`}
+            </Typography>
+          )}
+          {isSourcedFromPlanningData && (
+            <Typography variant="h5" gutterBottom>
+              {`How is it defined`}
+            </Typography>
+          )}
           <Typography component="div" variant="body2">
             <ReactMarkdownOrHtml
               source={props.metadata?.text?.replaceAll(

From 6e07e34b4ed11361139fd9b44a2b6249273b2c9d Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Tue, 16 Jul 2024 23:23:42 +0200
Subject: [PATCH 2/6] add classified roads sourcing note since no Planning Data
 links

---
 .../components/PlanningConstraints/List.tsx   | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
index 2158e58928..679dce89b8 100644
--- a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
+++ b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
@@ -140,7 +140,7 @@ interface ConstraintListItemProps {
 }
 
 function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
-  const { longitude, latitude } =
+  const { longitude, latitude, usrn } =
     (useStore(
       (state) => state.computePassport().data?._address,
     ) as SiteAddress) || {};
@@ -206,7 +206,7 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
               </List>
             )}
           </React.Fragment>
-          {isSourcedFromPlanningData && (
+          {isSourcedFromPlanningData ? (
             <Typography component="div" variant="body2" my={2}>
               {`View on the `}
               <Link
@@ -217,18 +217,23 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
               </Link>
               {` (opens in a new tab).`}
             </Typography>
-          )}
-          {isSourcedFromPlanningData && (
-            <Typography variant="h5" gutterBottom>
-              {`How is it defined`}
+          ) : (
+            <Typography component="div" variant="body2" my={2}>
+              {`We searched Ordnance Survey MasterMap Highways for the Unique Street Reference Number of your property`}
+              {usrn && ` (${usrn})`}
             </Typography>
           )}
+          <Typography variant="h5">{`How is it defined`}</Typography>
           <Typography component="div" variant="body2">
             <ReactMarkdownOrHtml
-              source={props.metadata?.text?.replaceAll(
-                "(/",
-                "(https://www.planning.data.gov.uk/",
-              )}
+              source={
+                isSourcedFromPlanningData
+                  ? props.metadata?.text?.replaceAll(
+                      "(/",
+                      "(https://www.planning.data.gov.uk/",
+                    )
+                  : props.metadata?.text
+              }
               openLinksOnNewTab
             />
           </Typography>

From 2fe7c7a7aeddf71ed9c7b7a38d2af66f40b9ffdd Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Tue, 16 Jul 2024 23:25:09 +0200
Subject: [PATCH 3/6] fix typo

---
 .../src/@planx/components/PlanningConstraints/List.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
index 679dce89b8..4b07a08693 100644
--- a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
+++ b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
@@ -219,7 +219,7 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
             </Typography>
           ) : (
             <Typography component="div" variant="body2" my={2}>
-              {`We searched Ordnance Survey MasterMap Highways for the Unique Street Reference Number of your property`}
+              {`We searched Ordnance Survey MasterMap Highways using the Unique Street Reference Number of your property`}
               {usrn && ` (${usrn})`}
             </Typography>
           )}

From 7634d69438efb5f5d49bfcc5792f1719ea70b319 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Tue, 16 Jul 2024 23:28:04 +0200
Subject: [PATCH 4/6] remove classified roads entity links

---
 .../components/PlanningConstraints/List.tsx   | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
index 4b07a08693..19fbbcef3b 100644
--- a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
+++ b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
@@ -189,17 +189,23 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
                           disableGutters
                           sx={{ display: "list-item" }}
                         >
-                          <Typography variant="body2">
-                            <Link
-                              href={`https://www.planning.data.gov.uk/entity/${record.entity}`}
-                              target="_blank"
-                            >
-                              {record.name ||
-                                (record["flood-risk-level"] &&
-                                  `${props.metadata?.name} - Level ${record["flood-risk-level"]}`) ||
-                                `Planning Data entity #${record.entity}`}
-                            </Link>
-                          </Typography>
+                          {isSourcedFromPlanningData ? (
+                            <Typography variant="body2">
+                              <Link
+                                href={`https://www.planning.data.gov.uk/entity/${record.entity}`}
+                                target="_blank"
+                              >
+                                {record.name ||
+                                  (record["flood-risk-level"] &&
+                                    `${props.metadata?.name} - Level ${record["flood-risk-level"]}`) ||
+                                  `Planning Data entity #${record.entity}`}
+                              </Link>
+                            </Typography>
+                          ) : (
+                            <Typography variant="body2">
+                              {record.name}
+                            </Typography>
+                          )}
                         </ListItem>
                       ),
                   )}

From 13b5b339060525d1070b033f5af6eda0709ae677 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Wed, 17 Jul 2024 10:23:14 +0200
Subject: [PATCH 5/6] encode multiple datasets if applicable in Planning Data
 map url

---
 .../components/PlanningConstraints/List.tsx     | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
index 19fbbcef3b..96370f6aca 100644
--- a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
+++ b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
@@ -22,6 +22,7 @@ import Caret from "ui/icons/Caret";
 import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml";
 
 import { SiteAddress } from "../FindProperty/model";
+import { availableDatasets } from "./model";
 
 const CATEGORY_COLORS: Record<string, string> = {
   "General policy": "#99C1DE",
@@ -148,6 +149,17 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
   const isSourcedFromPlanningData =
     props.metadata?.plural !== "Classified roads";
 
+  // Some constraint categories search for entities amongst many PD datasets, but our `props.metadata.dataset` will only store reference to the last one
+  //   Cross reference with `availableDatasets` in Editor to ensure map URL is filtered to include each possible dataset
+  const matchingDatasets = availableDatasets.find(
+    (d) =>
+      props.metadata?.dataset && d.datasets.includes(props.metadata.dataset),
+  )?.datasets || [props?.metadata?.dataset];
+  const encodedMatchingDatasets = matchingDatasets
+    ?.map((d) => `dataset=${d}`)
+    .join("&");
+  const planningDataMapURL = `https://www.planning.data.gov.uk/map/?${encodedMatchingDatasets}#${latitude},${longitude},17.5z`;
+
   return (
     <ListItem key={props.key} disablePadding sx={{ backgroundColor: "white" }}>
       <StyledAccordion {...props} disableGutters>
@@ -215,10 +227,7 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
           {isSourcedFromPlanningData ? (
             <Typography component="div" variant="body2" my={2}>
               {`View on the `}
-              <Link
-                href={`https://www.planning.data.gov.uk/map/?dataset=${props.metadata?.dataset}#${latitude},${longitude},17.5z`}
-                target="_blank"
-              >
+              <Link href={planningDataMapURL} target="_blank">
                 Planning Data map
               </Link>
               {` (opens in a new tab).`}

From aed68e10d78ebc55e2746e535305f4e61993104b Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Wed, 17 Jul 2024 12:23:00 +0200
Subject: [PATCH 6/6] ensure unique keys for children

---
 .../components/PlanningConstraints/List.tsx   | 61 +++++++++----------
 1 file changed, 30 insertions(+), 31 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
index 96370f6aca..86998af6dc 100644
--- a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
+++ b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
@@ -88,7 +88,7 @@ export default function ConstraintsList({
               disableGutters
               disableSticky
               color="primary"
-              key={category}
+              key={`${category}-ls`}
               style={{
                 padding: 0,
                 backgroundColor: CATEGORY_COLORS[category],
@@ -161,7 +161,11 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
   const planningDataMapURL = `https://www.planning.data.gov.uk/map/?${encodedMatchingDatasets}#${latitude},${longitude},17.5z`;
 
   return (
-    <ListItem key={props.key} disablePadding sx={{ backgroundColor: "white" }}>
+    <ListItem
+      key={`${props.key}-li`}
+      disablePadding
+      sx={{ backgroundColor: "white" }}
+    >
       <StyledAccordion {...props} disableGutters>
         <AccordionSummary
           id={`${item}-header`}
@@ -192,35 +196,30 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
                 sx={{ listStyleType: "disc", pl: 4, pt: 1 }}
               >
                 {props.data &&
-                  props.data.map(
-                    (record: any) =>
-                      record.name && (
-                        <ListItem
-                          key={record.entity}
-                          dense
-                          disableGutters
-                          sx={{ display: "list-item" }}
-                        >
-                          {isSourcedFromPlanningData ? (
-                            <Typography variant="body2">
-                              <Link
-                                href={`https://www.planning.data.gov.uk/entity/${record.entity}`}
-                                target="_blank"
-                              >
-                                {record.name ||
-                                  (record["flood-risk-level"] &&
-                                    `${props.metadata?.name} - Level ${record["flood-risk-level"]}`) ||
-                                  `Planning Data entity #${record.entity}`}
-                              </Link>
-                            </Typography>
-                          ) : (
-                            <Typography variant="body2">
-                              {record.name}
-                            </Typography>
-                          )}
-                        </ListItem>
-                      ),
-                  )}
+                  props.data.map((record: any) => (
+                    <ListItem
+                      key={`entity-${record.entity}-li`}
+                      dense
+                      disableGutters
+                      sx={{ display: "list-item" }}
+                    >
+                      {isSourcedFromPlanningData ? (
+                        <Typography variant="body2">
+                          <Link
+                            href={`https://www.planning.data.gov.uk/entity/${record.entity}`}
+                            target="_blank"
+                          >
+                            {record.name ||
+                              (record["flood-risk-level"] &&
+                                `${props.metadata?.name} - Level ${record["flood-risk-level"]}`) ||
+                              `Planning Data entity #${record.entity}`}
+                          </Link>
+                        </Typography>
+                      ) : (
+                        <Typography variant="body2">{record.name}</Typography>
+                      )}
+                    </ListItem>
+                  ))}
               </List>
             )}
           </React.Fragment>