Merge pull request #1208 from colouring-cities/interface/typology-updates

Typology Section Updates

app/src/api/config/dataFields.ts

@@ -423,6 +423,14 @@ export const buildingAttributesConfig = valueType<DataFieldConfig>()({ /* eslint
         edit: true,
         verify: true,
     },
+    building_attachment_source_type: {
+        edit: true,
+        verify: true,
+    },
+    building_attachment_source_links: {
+        edit: true,
+        verify: true,
+    },
     date_change_building_use: {
         edit: true,
     },
@@ -801,7 +809,55 @@ export const buildingAttributesConfig = valueType<DataFieldConfig>()({ /* eslint
     energy_green_roof_source_links : {
         edit: true,
         verify: true
-    }
+    },
+    typology_classification : {
+        edit: true,
+        verify: true
+    },
+    typology_classification_source_type : {
+        edit: true,
+        verify: true
+    },
+    typology_classification_source_links: {
+        edit: true,
+        verify: true
+    },
+    typology_style_period : {
+        edit: true,
+        verify: true
+    },
+    typology_style_period_source_type : {
+        edit: true,
+        verify: true
+    },
+    typology_style_period_source_links: {
+        edit: true,
+        verify: true
+    },
+    typology_dynamic_classification : {
+        edit: true,
+        verify: true
+    },
+    typology_dynamic_classification_source_type : {
+        edit: true,
+        verify: true
+    },
+    typology_dynamic_classification_source_links: {
+        edit: true,
+        verify: true
+    },
+    typology_original_use : {
+        edit: true,
+        verify: true
+    },
+    typology_original_use_source_type : {
+        edit: true,
+        verify: true
+    },
+    typology_original_use_source_links: {
+        edit: true,
+        verify: true
+    },
 });
 
 

app/src/api/services/autofill.ts

@@ -10,6 +10,7 @@ type GetAutofillOptionsFn = (value: string, all?: boolean) => Promise<AutofillOp
 
 const autofillFunctionMap : { [fieldName: string] : GetAutofillOptionsFn } = {
     current_landuse_group: getLanduseGroupOptions,
+    typology_original_use: getLanduseGroupOptions,
 };
 
 

app/src/frontend/building/data-containers/typology.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 
-import { dataFields } from '../../config/data-fields-config';
+import { commonSourceTypes, dataFields } from '../../config/data-fields-config';
 import DataEntry from '../data-components/data-entry';
 import NumericDataEntry from '../data-components/numeric-data-entry';
 import SelectDataEntry from '../data-components/select-data-entry';
@@ -10,6 +10,7 @@ import withCopyEdit from '../data-container';
 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';
 
 const AttachmentFormOptions = [
     "Detached",
@@ -24,7 +25,207 @@ const AttachmentFormOptions = [
 const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
     return (
         <Fragment>
-            <DataEntryGroup name="Adjacency and building use data">
+            <DataEntryGroup name="Basic typology classification">
+                <SelectDataEntry
+                    title={dataFields.typology_classification.title}
+                    slug="typology_classification"
+                    value={props.building.typology_classification}
+                    tooltip={dataFields.typology_classification.tooltip}
+                    options={dataFields.typology_classification.items}
+                    mode={props.mode}
+                    copy={props.copy}
+                    onChange={props.onChange}
+                />
+                <Verification
+                    slug="typology_classification"
+                    allow_verify={props.user !== undefined && props.building.typology_classification !== null && !props.edited}
+                    onVerify={props.onVerify}
+                    user_verified={props.user_verified.hasOwnProperty("typology_classification")}
+                    user_verified_as={props.user_verified.typology_classification}
+                    verified_count={props.building.verified.typology_classification}
+                />
+                <SelectDataEntry
+                    title={dataFields.typology_classification_source_type.title}
+                    slug="typology_classification_source_type"
+                    value={props.building.typology_classification_source_type}
+                    mode={props.mode}
+                    copy={props.copy}
+                    onChange={props.onChange}
+                    tooltip={dataFields.typology_classification_source_type.tooltip}
+                    placeholder={dataFields.typology_classification_source_type.example}
+                    options={dataFields.typology_classification_source_type.items}
+                    />
+                {(props.building.typology_classification_source_type == commonSourceTypes[0] ||
+                    props.building.typology_classification_source_type == commonSourceTypes[1] ||
+                    props.building.typology_classification_source_type == null) ? <></> :
+                    <>
+                        <MultiDataEntry
+                            title={dataFields.typology_classification_source_links.title}
+                            slug="typology_classification_source_links"
+                            value={props.building.typology_classification_source_links}
+                            mode={props.mode}
+                            copy={props.copy}
+                            onChange={props.onChange}
+                            tooltip={dataFields.typology_classification_source_links.tooltip}
+                            placeholder="https://..."
+                            editableEntries={true}
+                            isUrl={true}
+                        />
+                    </>
+                }
+            </DataEntryGroup>
+            <DataEntryGroup name="Architectural style/Historical period">
+                <SelectDataEntry
+                    title={dataFields.typology_style_period.title}
+                    slug="typology_style_period"
+                    value={props.building.typology_style_period}
+                    tooltip={dataFields.typology_style_period.tooltip}
+                    options={dataFields.typology_style_period.items}
+                    mode={props.mode}
+                    copy={props.copy}
+                    onChange={props.onChange}
+                />
+                <Verification
+                    slug="typology_style_period"
+                    allow_verify={props.user !== undefined && props.building.typology_style_period !== null && !props.edited}
+                    onVerify={props.onVerify}
+                    user_verified={props.user_verified.hasOwnProperty("typology_style_period")}
+                    user_verified_as={props.user_verified.typology_style_period}
+                    verified_count={props.building.verified.typology_style_period}
+                />
+                <SelectDataEntry
+                    title={dataFields.typology_style_period_source_type.title}
+                    slug="typology_style_period_source_type"
+                    value={props.building.typology_style_period_source_type}
+                    mode={props.mode}
+                    copy={props.copy}
+                    onChange={props.onChange}
+                    tooltip={dataFields.typology_style_period_source_type.tooltip}
+                    placeholder={dataFields.typology_style_period_source_type.example}
+                    options={dataFields.typology_style_period_source_type.items}
+                    />
+                {(props.building.typology_style_period_source_type == commonSourceTypes[0] ||
+                    props.building.typology_style_period_source_type == commonSourceTypes[1] ||
+                    props.building.typology_style_period_source_type == null) ? <></> :
+                    <>
+                        <MultiDataEntry
+                            title={dataFields.typology_style_period_source_links.title}
+                            slug="typology_style_period_source_links"
+                            value={props.building.typology_style_period_source_links}
+                            mode={props.mode}
+                            copy={props.copy}
+                            onChange={props.onChange}
+                            tooltip={dataFields.typology_style_period_source_links.tooltip}
+                            placeholder="https://..."
+                            editableEntries={true}
+                            isUrl={true}
+                        />
+                    </>
+                }
+            </DataEntryGroup>
+            <DataEntryGroup name="Dynamic classification">
+                <SelectDataEntry
+                    title={dataFields.typology_dynamic_classification.title}
+                    slug="typology_dynamic_classification"
+                    value={props.building.typology_dynamic_classification}
+                    tooltip={dataFields.typology_dynamic_classification.tooltip}
+                    options={dataFields.typology_dynamic_classification.items}
+                    mode={props.mode}
+                    copy={props.copy}
+                    onChange={props.onChange}
+                />
+                <Verification
+                    slug="typology_dynamic_classification"
+                    allow_verify={props.user !== undefined && props.building.typology_dynamic_classification !== null && !props.edited}
+                    onVerify={props.onVerify}
+                    user_verified={props.user_verified.hasOwnProperty("typology_dynamic_classification")}
+                    user_verified_as={props.user_verified.typology_dynamic_classification}
+                    verified_count={props.building.verified.typology_dynamic_classification}
+                />
+                <SelectDataEntry
+                    title={dataFields.typology_dynamic_classification_source_type.title}
+                    slug="typology_dynamic_classification_source_type"
+                    value={props.building.typology_dynamic_classification_source_type}
+                    mode={props.mode}
+                    copy={props.copy}
+                    onChange={props.onChange}
+                    tooltip={dataFields.typology_dynamic_classification_source_type.tooltip}
+                    placeholder={dataFields.typology_dynamic_classification_source_type.example}
+                    options={dataFields.typology_dynamic_classification_source_type.items}
+                    />
+                {(props.building.typology_dynamic_classification_source_type == commonSourceTypes[0] ||
+                    props.building.typology_dynamic_classification_source_type == commonSourceTypes[1] ||
+                    props.building.typology_dynamic_classification_source_type == null) ? <></> :
+                    <>
+                        <MultiDataEntry
+                            title={dataFields.typology_dynamic_classification_source_links.title}
+                            slug="typology_dynamic_classification_source_links"
+                            value={props.building.typology_dynamic_classification_source_links}
+                            mode={props.mode}
+                            copy={props.copy}
+                            onChange={props.onChange}
+                            tooltip={dataFields.typology_dynamic_classification_source_links.tooltip}
+                            placeholder="https://..."
+                            editableEntries={true}
+                            isUrl={true}
+                        />
+                    </>
+                }
+            </DataEntryGroup>
+            <DataEntryGroup name="Original Use">
+                <MultiDataEntry
+                    title={dataFields.typology_original_use.title}
+                    slug="typology_original_use"
+                    value={props.building.typology_original_use}
+                    mode={props.mode}
+                    copy={props.copy}
+                    onChange={props.onChange}
+                    confirmOnEnter={true}
+                    tooltip={dataFields.typology_original_use.tooltip}
+                    placeholder="Type new land use group here"
+                    copyable={true}
+                    autofill={true}
+                    showAllOptionsOnEmpty={true}
+                />
+                <Verification
+                    slug="typology_original_use"
+                    allow_verify={props.user !== undefined && props.building.typology_original_use !== null && !props.edited}
+                    onVerify={props.onVerify}
+                    user_verified={props.user_verified.hasOwnProperty("typology_original_use")}
+                    user_verified_as={props.user_verified.typology_original_use}
+                    verified_count={props.building.verified.typology_original_use}
+                />
+                <SelectDataEntry
+                    title={dataFields.typology_original_use_source_type.title}
+                    slug="typology_original_use_source_type"
+                    value={props.building.typology_original_use_source_type}
+                    mode={props.mode}
+                    copy={props.copy}
+                    onChange={props.onChange}
+                    tooltip={dataFields.typology_original_use_source_type.tooltip}
+                    placeholder={dataFields.typology_original_use_source_type.example}
+                    options={dataFields.typology_original_use_source_type.items}
+                    />
+                {(props.building.typology_original_use_source_type == commonSourceTypes[0] ||
+                    props.building.typology_original_use_source_type == commonSourceTypes[1] ||
+                    props.building.typology_original_use_source_type == null) ? <></> :
+                    <>
+                        <MultiDataEntry
+                            title={dataFields.typology_original_use_source_links.title}
+                            slug="typology_original_use_source_links"
+                            value={props.building.typology_original_use_source_links}
+                            mode={props.mode}
+                            copy={props.copy}
+                            onChange={props.onChange}
+                            tooltip={dataFields.typology_original_use_source_links.tooltip}
+                            placeholder="https://..."
+                            editableEntries={true}
+                            isUrl={true}
+                        />
+                    </>
+                }
+            </DataEntryGroup>
+            <DataEntryGroup name="Attachment/Adjacency">
                 <SelectDataEntry
                     title={dataFields.building_attachment_form.title}
                     slug="building_attachment_form"
@@ -43,67 +244,38 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     user_verified_as={props.user_verified.building_attachment_form}
                     verified_count={props.building.verified.building_attachment_form}
                     />
-                <DataEntry
+                <SelectDataEntry
-                    title="Source type"
+                    title={dataFields.building_attachment_source_type.title}
-                    slug=""
+                    slug="building_attachment_source_type"
-                    value=""
+                    value={props.building.building_attachment_source_type}
-                    mode='view'
-                    tooltip="Coming Soon"
-                />
-                <DataEntry
-                    title="Source link"
-                    slug=""
-                    value=""
-                    mode='view'
-                    tooltip="Coming Soon"
-                />
-                <hr/>
-                <DataEntry
-                    title={dataFields.original_building_use.title}
-                    slug="original_building_use" // doesn't exist in database yet
-                    tooltip={dataFields.original_building_use.tooltip}
-                    value={undefined}
-                    copy={props.copy}
                     mode={props.mode}
+                    copy={props.copy}
                     onChange={props.onChange}
-                    disabled={true}
+                    tooltip={dataFields.building_attachment_source_type.tooltip}
-                />
+                    placeholder={dataFields.building_attachment_source_type.example}
-                <Verification
+                    options={dataFields.building_attachment_source_type.items}
-                    slug="building_attachment_form"
-                    allow_verify={props.user !== undefined && props.building.building_attachment_form !== null && !props.edited}
-                    onVerify={props.onVerify}
-                    user_verified={props.user_verified.hasOwnProperty("building_attachment_form")}
-                    user_verified_as={props.user_verified.building_attachment_form}
-                    verified_count={props.building.verified.building_attachment_form}
                     />
-                <DataEntry
+                {(props.building.building_attachment_source_type == commonSourceTypes[0] ||
-                    title="Source type"
+                    props.building.building_attachment_source_type == commonSourceTypes[1] ||
-                    slug=""
+                    props.building.building_attachment_source_type == null) ? <></> :
-                    value=""
+                    <>
-                    mode='view'
+                        <MultiDataEntry
-                    tooltip="Coming Soon"
+                            title={dataFields.building_attachment_source_links.title}
-                />
+                            slug="building_attachment_source_links"
-                <DataEntry
+                            value={props.building.building_attachment_source_links}
-                    title="Source link"
+                            mode={props.mode}
-                    slug=""
+                            copy={props.copy}
-                    value=""
+                            onChange={props.onChange}
-                    mode='view'
+                            tooltip={dataFields.building_attachment_source_links.tooltip}
-                    tooltip="Coming Soon"
+                            placeholder="https://..."
-                />
+                            editableEntries={true}
+                            isUrl={true}
+                        />
+                    </>
+                }
             </DataEntryGroup>
-            <DataEntryGroup name="Building typology and classification data">
+            {/*}
-                <DataEntry
+            <DataEntryGroup name="Other fields (in development)">
-                    title="Local typology/architectural style"
-                    slug=""
-                    value=""
-                    mode='view'
-                />
-                <DataEntry
-                    title="Base type classification"
-                    slug=""
-                    value=""
-                    mode='view'
-                />
                 <SelectDataEntry
                     title={dataFields.size_roof_shape.title}
                     slug="size_roof_shape"
@@ -136,6 +308,7 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     value=""
                     mode='view'
                 />
+        
                 {/* <NumericDataEntry
                     title={dataFields.date_change_building_use.title}
                     slug="date_change_building_use"
@@ -147,8 +320,8 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     mode={props.mode}
                     copy={props.copy}
                     onChange={props.onChange}
-                /> */}
+                />//*}
-            </DataEntryGroup>
+            </DataEntryGroup>*/}
         </Fragment>
     );
     };

app/src/frontend/config/data-fields-config.ts

@@ -310,26 +310,23 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
     },
     building_attachment_form: {
         category: Category.Typology,
-        title: "Attachment type/adjacency",
+        title: "Which description best explains the way the building is attached to others?",
         tooltip: "We have prepopulated these based on their current attachment. A building can either be detached, semi-detached or part of a terrace (middle or end)",
         example: "",
     },
-    date_change_building_use: {
+    building_attachment_source_type: {
-        category: Category.Typology,
+        category: Category.Age,
-        title: "When did use change?",
+        title: "Source type",
-        tooltip: "This is the date the building stopped being used for for the function it was built for. I.e. if it was Victorian warehouse which is now an office this would be when it became an office or if it was something before that, maybe a garage then the date that happened",
+        tooltip: "Source type for the building data above",
-        example: 1920,
+        items: commonSourceTypes,
-    },
-    /**
-     * original_building_use does not exist in database yet.
-     * Slug needs to be adjusted if the db column will be named differently 
-     */
-    original_building_use: {
-        category: Category.Typology,
-        title: "Original building use",
-        tooltip: "What was the building <u><i>originally</i></u> used for when it was built?",
         example: "",
     },
+    building_attachment_source_links: {
+        category: Category.Age,
+        title: "Source link(s)",
+        tooltip: "URL for data reference",
+        example: ["", "", ""],
+    },
     size_roof_shape: {
         category: Category.Typology,
         title: "Roof type",
@@ -1466,6 +1463,117 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
         tooltip: "Source link(s) for street width data",
         example: ["", "", ""],
     },
+
+    typology_classification: {
+        category: Category.Typology,
+        title: "Which description best suits the building and its context?",
+        tooltip: "HINT: Adapted from building type classifications developed in urban morphology. See <a href=\"https://www.smog.chalmers.se/\">https://www.smog.chalmers.se/</a> 'Space Matrix' for further information.",
+        example: "High rise: Not part of a group/cluster",
+        items: [
+            'Low-rise: Not part of a group/cluster (1-3 core floors- excluding extensions)',
+            'Low-rise: Part of dense block/row/terrace',
+            'Low-rise: Part of group of widely spaced blocks (includes semi-detached houses)',
+            'Mid-rise: Not part of a group/cluster (4-7 core floors)',
+            'Mid-rise: Part of group of densely spaced blocks',
+            'Mid-rise: Part of group of widely spaced blocks',
+            'High rise: Not part of a group/cluster',
+            'High-rise: Part of group of densely spaced blocks (8 + core floors)',
+            'High-rise: Part of group of widely spaced blocks',
+        ]
+    },
+    typology_classification_source_type: {
+        category: Category.Typology,
+        title: "Source type",
+        tooltip: "Source type for street width data",
+        example: "",
+        items: commonSourceTypes
+    },
+    typology_classification_source_links: {
+        category: Category.Typology,
+        title: "Source link(s)",
+        tooltip: "Source link(s) for street width data",
+        example: ["", "", ""],
+    },
+    typology_style_period: {
+        category: Category.Typology,
+        title: "Which description best suits the building's architectural style/historical period?",
+        tooltip: "",
+        example: "High rise: Not part of a group/cluster",
+        items: [
+            'Roman (43AD-410)',
+            'Early Medieval (410-1066)',
+            'Mid- Late Medieval (1066-1485)',
+            'Tudor (1485-1603)',
+            'Stuart (1603 -1714)',
+            'Georgian/William IV (1714-1837)',
+            'Victorian (1837-1901)',
+            'Edwardian (1901-1914)',
+            'World War I (1914-18)',
+            'Interwar (1918-39)',
+            'World War II (1939-45)',
+            'Post war (1945-1975)',
+            'Postmodern (1975-1990)',
+            '1990s',
+            '2000s/2010s',
+            '2020s',
+        ]
+    },
+    typology_style_period_source_type: {
+        category: Category.Typology,
+        title: "Source type",
+        tooltip: "Source type for street width data",
+        example: "",
+        items: commonSourceTypes
+    },
+    typology_style_period_source_links: {
+        category: Category.Typology,
+        title: "Source link(s)",
+        tooltip: "Source link(s) for street width data",
+        example: ["", "", ""],
+    },
+    typology_dynamic_classification: {
+        category: Category.Typology,
+        title: "Which description best suits the building's plot?",
+        tooltip: "HINT: Based on a dynamic classification system for urban tissue developed by Brenda Case Scheer. For further information see: <a href=\"https://www.researchgate.net/publication/242150847_The_Anatomy_of_Sprawl\">https://www.researchgate.net/publication/242150847_The_Anatomy_of_Sprawl</a>.",
+        example: "High rise: Not part of a group/cluster",
+        items: [
+            'Small fairly regular plot part of repetitive domestic streets',
+            'Irregular shaped plots built along the edge of long established routes (e.g high streets)',
+            'Large plot with internal access roads (e.g. infrastructure hubs/large institution such as hospitals/universities/airports)',
+        ]
+    },
+    typology_dynamic_classification_source_type: {
+        category: Category.Typology,
+        title: "Source type",
+        tooltip: "Source type for street width data",
+        example: "",
+        items: commonSourceTypes
+    },
+    typology_dynamic_classification_source_links: {
+        category: Category.Typology,
+        title: "Source link(s)",
+        tooltip: "Source link(s) for street width data",
+        example: ["", "", ""],
+    },
+    typology_original_use: {
+        category: Category.Typology,
+        title: "Which land use best describes the purpose for which the building was built?",
+        tooltip: "Land use Groups as classified by [NLUD](https://www.gov.uk/government/statistics/national-land-use-database-land-use-and-land-cover-classification)",
+        example: ["", ""],
+    },
+    typology_original_use_source_type: {
+        category: Category.Typology,
+        title: "Source type",
+        tooltip: "Source type for street width data",
+        example: "",
+        items: commonSourceTypes
+    },
+    typology_original_use_source_links: {
+        category: Category.Typology,
+        title: "Source link(s)",
+        tooltip: "Source link(s) for street width data",
+        example: ["", "", ""],
+    },
 };
 
 export const allFieldsConfig = { ...dataFields, ...buildingUserFields };

migrations/043.typology_updates.down.sql

@@ -0,0 +1,18 @@
+ALTER TABLE buildings DROP COLUMN IF EXISTS typology_classification;
+ALTER TABLE buildings DROP COLUMN IF EXISTS typology_classification_source_type;
+ALTER TABLE buildings DROP COLUMN IF EXISTS typology_classification_source_links;
+
+ALTER TABLE buildings DROP COLUMN IF EXISTS typology_style_period;
+ALTER TABLE buildings DROP COLUMN IF EXISTS typology_style_period_source_type;
+ALTER TABLE buildings DROP COLUMN IF EXISTS typology_style_period_source_links;
+
+ALTER TABLE buildings DROP COLUMN IF EXISTS typology_dynamic_classification;
+ALTER TABLE buildings DROP COLUMN IF EXISTS typology_dynamic_classification_source_type;
+ALTER TABLE buildings DROP COLUMN IF EXISTS typology_dynamic_classification_source_links;
+
+ALTER TABLE buildings DROP COLUMN IF EXISTS typology_original_use;
+ALTER TABLE buildings DROP COLUMN IF EXISTS typology_original_use_source_type;
+ALTER TABLE buildings DROP COLUMN IF EXISTS typology_original_use_source_links;
+
+ALTER TABLE buildings DROP COLUMN IF EXISTS building_attachment_source_type;
+ALTER TABLE buildings DROP COLUMN IF EXISTS building_attachment_source_links;

migrations/043.typology_updates_up.sql

@@ -0,0 +1,18 @@
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS typology_classification text;
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS typology_classification_source_type text;
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS typology_classification_source_links text[];
+
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS typology_style_period text;
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS typology_style_period_source_type text;
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS typology_style_period_source_links text[];
+
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS typology_dynamic_classification text;
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS typology_dynamic_classification_source_type text;
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS typology_dynamic_classification_source_links text[];
+
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS typology_original_use text[];
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS typology_original_use_source_type text;
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS typology_original_use_source_links text[];
+
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS building_attachment_source_type text;
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS building_attachment_source_links text[];