From 79adb2d49d59fe8081382cf58142fa06349cdb50 Mon Sep 17 00:00:00 2001
From: Mike Simpson <mike.simpson@ncl.ac.uk>
Date: Tue, 25 Jul 2023 17:05:20 +0100
Subject: [PATCH] New Keys for Typology category

- Keys for all subcategories (except original building use)
- Buttons to change key/visible layer

Re: Issue #1212
---
 app/map_styles/polygon.xml                    | 151 ++++++++++++++++++
 .../building/data-containers/typology.tsx     |  56 +++++++
 .../frontend/config/category-maps-config.ts   |  76 +++++++--
 app/src/frontend/config/data-fields-config.ts |   2 +-
 app/src/frontend/config/tileserver-config.ts  |   5 +-
 app/src/tiles/dataDefinition.ts               |  21 +++
 6 files changed, 298 insertions(+), 13 deletions(-)

diff --git a/app/map_styles/polygon.xml b/app/map_styles/polygon.xml
index 652f698d..d90205d5 100644
--- a/app/map_styles/polygon.xml
+++ b/app/map_styles/polygon.xml
@@ -973,4 +973,155 @@
             <PolygonSymbolizer fill="#ffe8a9" />
         </Rule>
     </Style>
+    <Style name="typology_classification">
+        <Rule>
+            <Filter>[typology_classification] = "Low-rise: Not part of a group/cluster (1-3 core floors- excluding extensions)"</Filter>
+            <PolygonSymbolizer fill="#F2E5FF" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_classification] = "Low-rise: Part of dense block/row/terrace"</Filter>
+            <PolygonSymbolizer fill="#CBABEA" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_classification] = "Low-rise: Part of group of widely spaced blocks (includes semi-detached houses)"</Filter>
+            <PolygonSymbolizer fill="#A272D4" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_classification] = "Mid-rise: Not part of a group/cluster (4-7 core floors)"</Filter>
+            <PolygonSymbolizer fill="#7939BE" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_classification] = "Mid-rise: Part of group of densely spaced blocks"</Filter>
+            <PolygonSymbolizer fill="#5000A8" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_classification] = "Mid-rise: Part of group of widely spaced blocks"</Filter>
+            <PolygonSymbolizer fill="#3F0086" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_classification] = "High rise: Not part of a group/cluster"</Filter>
+            <PolygonSymbolizer fill="#2E0062" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_classification] = "High-rise: Part of group of densely spaced blocks (8 + core floors)"</Filter>
+            <PolygonSymbolizer fill="#1D003E" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_classification] = "High-rise: Part of group of widely spaced blocks"</Filter>
+            <PolygonSymbolizer fill="#0C001A" />
+        </Rule>
+
+        <Rule>
+            <MaxScaleDenominator>17061</MaxScaleDenominator>
+            <MinScaleDenominator>4264</MinScaleDenominator>
+            <LineSymbolizer stroke="#888" stroke-width="0.8"/>
+        </Rule>
+        <Rule>
+            <MaxScaleDenominator>4264</MaxScaleDenominator>
+            <MinScaleDenominator>0</MinScaleDenominator>
+            <LineSymbolizer stroke="#888" stroke-width="2.0"/>
+        </Rule>
+    </Style>
+    <Style name="typology_style_period">
+        <Rule>
+            <Filter>[typology_style_period] = "Roman (43AD-410)"</Filter>
+            <PolygonSymbolizer fill="#00B2CB" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_style_period] = "Early Medieval (410-1066)"</Filter>
+            <PolygonSymbolizer fill="#00A9C6" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_style_period] = "Mid-Late Medieval (1066-1485)"</Filter>
+            <PolygonSymbolizer fill="#00A0C1" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_style_period] = "Tudor (1485-1603)"</Filter>
+            <PolygonSymbolizer fill="#0097BC" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_style_period] = "Stuart (1603 -1714)"</Filter>
+            <PolygonSymbolizer fill="#008EB7" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_style_period] = "Georgian/William IV (1714-1837)"</Filter>
+            <PolygonSymbolizer fill="#0085B2" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_style_period] = "Victorian (1837-1901)"</Filter>
+            <PolygonSymbolizer fill="#007CAD" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_style_period] = "Edwardian (1901-1914)"</Filter>
+            <PolygonSymbolizer fill="#0073A8" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_style_period] = "World War I (1914-18)"</Filter>
+            <PolygonSymbolizer fill="#006AA3" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_style_period] = "Interwar (1918-39)"</Filter>
+            <PolygonSymbolizer fill="#00619E" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_style_period] = "World War II (1939-45)"</Filter>
+            <PolygonSymbolizer fill="#005899" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_style_period] = "Post war (1945-1975)"</Filter>
+            <PolygonSymbolizer fill="#004F94" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_style_period] = "Postmodern (1975-1990)"</Filter>
+            <PolygonSymbolizer fill="#00468F" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_style_period] = "1990s"</Filter>
+            <PolygonSymbolizer fill="#003D8A" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_style_period] = "2000s/2010s"</Filter>
+            <PolygonSymbolizer fill="#003485" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_style_period] = "2020s"</Filter>
+            <PolygonSymbolizer fill="#002C7C" />
+        </Rule>
+
+        <Rule>
+            <MaxScaleDenominator>17061</MaxScaleDenominator>
+            <MinScaleDenominator>4264</MinScaleDenominator>
+            <LineSymbolizer stroke="#888" stroke-width="0.8"/>
+        </Rule>
+        <Rule>
+            <MaxScaleDenominator>4264</MaxScaleDenominator>
+            <MinScaleDenominator>0</MinScaleDenominator>
+            <LineSymbolizer stroke="#888" stroke-width="2.0"/>
+        </Rule>
+    </Style>
+    <Style name="typology_dynamic_classification">
+        <Rule>
+            <Filter>[typology_dynamic_classification] = "Small fairly regular plot part of repetitive domestic streets"</Filter>
+            <PolygonSymbolizer fill="#F2E5FF" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_dynamic_classification] = "Irregular shaped plots built along the edge of long established routes (e.g high streets)"</Filter>
+            <PolygonSymbolizer fill="#CBABEA" />
+        </Rule>
+        <Rule>
+            <Filter>[typology_dynamic_classification] = "Large plot with internal access roads (e.g. infrastructure hubs/large institution such as hospitals/universities/airports)"</Filter>
+            <PolygonSymbolizer fill="#A272D4" />
+        </Rule>
+
+        <Rule>
+            <MaxScaleDenominator>17061</MaxScaleDenominator>
+            <MinScaleDenominator>4264</MinScaleDenominator>
+            <LineSymbolizer stroke="#888" stroke-width="0.8"/>
+        </Rule>
+        <Rule>
+            <MaxScaleDenominator>4264</MaxScaleDenominator>
+            <MinScaleDenominator>0</MinScaleDenominator>
+            <LineSymbolizer stroke="#888" stroke-width="2.0"/>
+        </Rule>
+    </Style>
 </Map>
diff --git a/app/src/frontend/building/data-containers/typology.tsx b/app/src/frontend/building/data-containers/typology.tsx
index 3a8e33e0..430943db 100644
--- a/app/src/frontend/building/data-containers/typology.tsx
+++ b/app/src/frontend/building/data-containers/typology.tsx
@@ -11,6 +11,7 @@ import { CategoryViewProps } from './category-view-props';
 import InfoBox from '../../components/info-box';
 import { DataEntryGroup } from '../data-components/data-entry-group';
 import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry';
+import { useDisplayPreferences } from '../../displayPreferences-context';
 
 const AttachmentFormOptions = [
     "Detached",
@@ -23,9 +24,37 @@ const AttachmentFormOptions = [
 * Type view/edit section
 */
 const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
+    const { darkLightTheme } = useDisplayPreferences();
+
+    const switchToClassificationMapStyle = (e) => {
+        e.preventDefault();
+        props.onMapColourScale('typology_classification')
+    }
+    const switchToStylePeriodMapStyle = (e) => {
+        e.preventDefault();
+        props.onMapColourScale('typology_style_period')
+    }
+    const switchToDynamicClassificationMapStyle = (e) => {
+        e.preventDefault();
+        props.onMapColourScale('typology_dynamic_classification')
+    }
+    const switchToAttachmentMapStyle = (e) => {
+        e.preventDefault();
+        props.onMapColourScale('building_attachment_form')
+    }
+
     return (
         <Fragment>
             <DataEntryGroup name="Basic typology classification">
+                {(props.mapColourScale == "typology_classification") ? 
+                    <button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToStylePeriodMapStyle}>
+                        {'Click here to change map to show architectural style/historical period.'}
+                    </button>
+                :
+                    <button className={`map-switcher-inline disabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToClassificationMapStyle}>
+                        {"Click to change map to show typology classification."}
+                    </button>
+                }
                 <SelectDataEntry
                     title={dataFields.typology_classification.title}
                     slug="typology_classification"
@@ -75,6 +104,15 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                 }
             </DataEntryGroup>
             <DataEntryGroup name="Architectural style/Historical period">
+                {(props.mapColourScale == "typology_style_period") ? 
+                    <button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToClassificationMapStyle}>
+                        {'Click to change map to show typology classification.'}
+                    </button>
+                :
+                    <button className={`map-switcher-inline disabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToStylePeriodMapStyle}>
+                        {"Click here to change map to show architectural style/historical period."}
+                    </button>
+                }
                 <SelectDataEntry
                     title={dataFields.typology_style_period.title}
                     slug="typology_style_period"
@@ -124,6 +162,15 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                 }
             </DataEntryGroup>
             <DataEntryGroup name="Dynamic classification">
+                {(props.mapColourScale == "typology_dynamic_classification") ? 
+                    <button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToClassificationMapStyle}>
+                        {'Click to change map to show typology classification.'}
+                    </button>
+                :
+                    <button className={`map-switcher-inline disabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToDynamicClassificationMapStyle}>
+                        {"Click here to change map to show dynamic classification."}
+                    </button>
+                }
                 <SelectDataEntry
                     title={dataFields.typology_dynamic_classification.title}
                     slug="typology_dynamic_classification"
@@ -226,6 +273,15 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                 }
             </DataEntryGroup>
             <DataEntryGroup name="Attachment/Adjacency">
+                {(props.mapColourScale == "building_attachment_form") ? 
+                    <button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToClassificationMapStyle}>
+                        {'Click to change map to show typology classification.'}
+                    </button>
+                :
+                    <button className={`map-switcher-inline disabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToAttachmentMapStyle}>
+                        {"Click here to change map to show attachment/adjacency."}
+                    </button>
+                }
                 <SelectDataEntry
                     title={dataFields.building_attachment_form.title}
                     slug="building_attachment_form"
diff --git a/app/src/frontend/config/category-maps-config.ts b/app/src/frontend/config/category-maps-config.ts
index 319fb57c..d9d575dd 100644
--- a/app/src/frontend/config/category-maps-config.ts
+++ b/app/src/frontend/config/category-maps-config.ts
@@ -299,18 +299,72 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
             ]
         },
     }],
-    [Category.Typology]: [{
-        mapStyle: 'building_attachment_form',
-        legend: {
-            title: 'Adjacency/Configuration',
-            elements: [
-                { color: "#f2a2b9", text: "Detached" },
-                { color: "#ab8fb0", text: "Semi-Detached" },
-                { color: "#3891d1", text: "End-Terrace" },
-                { color: "#226291", text: "Mid-Terrace" }
-            ]
+    [Category.Typology]: [
+        {
+            mapStyle: 'typology_classification',
+            legend: {
+                title: 'Typology classification',
+                elements: [
+                    { color: '#F2E5FF', text: 'Low-rise: Not part of a group/cluster (1-3 core floors- excluding extensions)' },
+                    { color: '#CBABEA', text: 'Low-rise: Part of dense block/row/terrace' },
+                    { color: '#A272D4', text: 'Low-rise: Part of group of widely spaced blocks (includes semi-detached houses)' },
+                    { color: '#7939BE', text: 'Mid-rise: Not part of a group/cluster (4-7 core floors)' },
+                    { color: '#5000A8', text: 'Mid-rise: Part of group of densely spaced blocks' },
+                    { color: '#3F0086', text: 'Mid-rise: Part of group of widely spaced blocks' },
+                    { color: '#2E0062', text: 'High rise: Not part of a group/cluster' },
+                    { color: '#1D003E', text: 'High-rise: Part of group of densely spaced blocks (8 + core floors)' },
+                    { color: '#0C001A', text: 'High-rise: Part of group of widely spaced blocks' },
+                ]
+            }
         },
-    }],
+        {
+            mapStyle: 'typology_style_period',
+            legend: {
+                title: 'Architectural style',
+                elements: [
+                    { color: '#00B2CB', text: 'Roman (43AD-410)' },
+                    { color: '#00A9C6', text: 'Early Medieval (410-1066)' },
+                    { color: '#00A0C1', text: 'Mid-Late Medieval (1066-1485)' },
+                    { color: '#0097BC', text: 'Tudor (1485-1603)' },
+                    { color: '#008EB7', text: 'Stuart (1603 -1714)' },
+                    { color: '#0085B2', text: 'Georgian/William IV (1714-1837)' },
+                    { color: '#007CAD', text: 'Victorian (1837-1901)' },
+                    { color: '#0073A8', text: 'Edwardian (1901-1914)' },
+                    { color: '#006AA3', text: 'World War I (1914-18)' },
+                    { color: '#00619E', text: 'Interwar (1918-39)' },
+                    { color: '#005899', text: 'World War II (1939-45)' },
+                    { color: '#004F94', text: 'Post war (1945-1975)' },
+                    { color: '#00468F', text: 'Postmodern (1975-1990)' },
+                    { color: '#003D8A', text: '1990s' },
+                    { color: '#003485', text: '2000s/2010s' },
+                    { color: '#002C7C', text: '2020s' },
+                ]
+            }
+        },
+        {
+            mapStyle: 'typology_dynamic_classification',
+            legend: {
+                title: 'Dynamic classification',
+                elements: [
+                    { color: '#F2E5FF', text: 'Small fairly regular plot part of repetitive domestic streets' },
+                    { color: '#CBABEA', text: 'Irregular shaped plots built along the edge of long established routes (e.g high streets)' },
+                    { color: '#A272D4', text: 'Large plot with internal access roads (e.g. infrastructure hubs/large institution such as hospitals/universities/airports)' },
+                ]
+            }
+        },
+        {
+            mapStyle: 'building_attachment_form',
+            legend: {
+                title: 'Attachment/Adjacency',
+                elements: [
+                    { color: "#f2a2b9", text: "Detached" },
+                    { color: "#ab8fb0", text: "Semi-Detached" },
+                    { color: "#3891d1", text: "End-Terrace" },
+                    { color: "#226291", text: "Mid-Terrace" }
+                ]
+            },
+        },
+    ],
     [Category.LandUse]: [
         {
             mapStyle: 'landuse',
diff --git a/app/src/frontend/config/data-fields-config.ts b/app/src/frontend/config/data-fields-config.ts
index ebd235c0..d90e16ce 100644
--- a/app/src/frontend/config/data-fields-config.ts
+++ b/app/src/frontend/config/data-fields-config.ts
@@ -1502,7 +1502,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
         items: [
             'Roman (43AD-410)',
             'Early Medieval (410-1066)',
-            'Mid- Late Medieval (1066-1485)',
+            'Mid-Late Medieval (1066-1485)',
             'Tudor (1485-1603)',
             'Stuart (1603 -1714)',
             'Georgian/William IV (1714-1837)',
diff --git a/app/src/frontend/config/tileserver-config.ts b/app/src/frontend/config/tileserver-config.ts
index 990536ef..73c2d4b7 100644
--- a/app/src/frontend/config/tileserver-config.ts
+++ b/app/src/frontend/config/tileserver-config.ts
@@ -24,7 +24,10 @@ export type BuildingMapTileset =
     'dynamics_demolished_count' |
     'disaster_severity' |
     'team' |
-    'survival_status';
+    'survival_status'|
+    'typology_classification'|
+    'typology_style_period' |
+    'typology_dynamic_classification';
 
 export type SpecialMapTileset = 'base_light' | 'base_night' | 'base_night_outlines' | 'highlight' | 'number_labels' | 'base_boroughs';
 
diff --git a/app/src/tiles/dataDefinition.ts b/app/src/tiles/dataDefinition.ts
index b440ca5d..a10cff9f 100644
--- a/app/src/tiles/dataDefinition.ts
+++ b/app/src/tiles/dataDefinition.ts
@@ -281,6 +281,27 @@ const LAYER_QUERIES = {
         FROM
             buildings
         WHERE jsonb_array_length(demolished_buildings) > 0 OR dynamics_has_demolished_buildings = FALSE`,
+    typology_classification: `
+        SELECT
+            geometry_id,
+            typology_classification
+        FROM
+            buildings
+        WHERE typology_classification IS NOT NULL`,
+    typology_style_period: `
+        SELECT
+            geometry_id,
+            typology_style_period
+        FROM
+            buildings
+        WHERE typology_style_period IS NOT NULL`,
+        typology_dynamic_classification: `
+        SELECT
+            geometry_id,
+            typology_dynamic_classification
+        FROM
+            buildings
+        WHERE typology_dynamic_classification IS NOT NULL`,
 };
 
 const GEOMETRY_FIELD = 'geometry_geom';