Update categories and data fields text/names

app/src/frontend/building/data-components/data-entry-group.tsx

@@ -9,10 +9,14 @@ interface DataEntryGroupProps {
     name: string;
     /** Whether the group should be collapsed initially */
     collapsed?: boolean;
+    showCount?: boolean;
 }
 
 const DataEntryGroup: React.FunctionComponent<DataEntryGroupProps> = (props) => {
-    const {collapsed: initialCollapsed = true} = props;
+    const {
+        collapsed: initialCollapsed = true,
+        showCount = true
+    } = props;
 
     const [collapsed, setCollapsed] = useState(initialCollapsed);
 
@@ -22,7 +26,7 @@ const DataEntryGroup: React.FunctionComponent<DataEntryGroupProps> = (props) =>
                 <CollapseIcon collapsed={collapsed} />
                 <span className='data-entry-group-title'>
                     {props.name}
-                    <span className='data-entry-group-count'>{` (${React.Children.count(props.children)} attributes)`}</span>
+                    <span className='data-entry-group-count'>{showCount && ` (${React.Children.count(props.children)} attributes)`}</span>
                 </span>
             </div>
             <div className={`data-entry-group-body ${collapsed ? 'collapse' : ''}`}>

app/src/frontend/building/data-container.tsx

@@ -308,19 +308,16 @@ const withCopyEdit: (wc: React.ComponentType<CategoryViewProps>) => DataContaine
                 {
                     this.props.inactive ?
                         <Fragment>
-                            <InfoBox
-                                msg={`We're not collecting data on ${this.props.title.toLowerCase()} yet - check back soon.`}
-                            />
                             <WrappedComponent
                                 intro={this.props.intro}
-                                building={undefined}
-                                building_like={undefined}
+                                building={this.props.building}
+                                building_like={this.props.building_like}
                                 mode={this.props.mode}
                                 edited={false}
                                 copy={copy}
-                                onChange={this.handleChange}
-                                onLike={this.handleLike}
-                                onVerify={this.handleVerify}
+                                onChange={undefined}
+                                onLike={undefined}
+                                onVerify={undefined}
                                 user_verified={[]}
                             />
                         </Fragment> :

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

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 
 import { dataFields } from '../../config/data-fields-config';
+import DataEntry from '../data-components/data-entry';
 import SelectDataEntry from '../data-components/select-data-entry';
 import withCopyEdit from '../data-container';
 
@@ -65,6 +66,12 @@ const ConstructionView: React.FunctionComponent<CategoryViewProps> = (props) =>
                 copy={props.copy}
                 onChange={props.onChange}
             />
+            <DataEntry
+                title="Construction system"
+                slug=""
+                value=""
+                mode='view'
+            />
         </Fragment>
     );
 };

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

@@ -1,4 +1,7 @@
 import React, { Fragment } from 'react';
+import InfoBox from '../../components/info-box';
+import DataEntry from '../data-components/data-entry';
+import { DataEntryGroup } from '../data-components/data-entry-group';
 
 import withCopyEdit from '../data-container';
 
@@ -9,14 +12,39 @@ import { CategoryViewProps } from './category-view-props';
 */
 const DynamicsView: React.FunctionComponent<CategoryViewProps> = (props) => (
     <Fragment>
-        <p className="data-intro">{props.intro}</p>
-        <ul className="data-list">
-            <li>Under threat of demolition (partial/complete?</li>
-            <li>Demolition permit no. issued </li>
-            <li>Whole building demolitions for current year</li>
-            <li>Whole building demolitions since 2000</li>
-            <li>Pairs of construction and demolition dates for previous buildings built on any part of the site</li>
-        </ul>
+        <InfoBox msg="This is what we're planning to collect in this section" />
+        <DataEntryGroup collapsed={false} name="Historical constructions and demolitions" showCount={false}>
+            <DataEntry
+                title="Current building"
+                slug=""
+                value=""
+                mode='view'
+            />
+            <DataEntry
+                title="Past buildings"
+                slug=""
+                value=""
+                mode='view'
+            />
+        </DataEntryGroup>
+        <DataEntry
+            title="Historical land use change"
+            slug=""
+            value=""
+            mode='view'
+        />
+        <DataEntry
+            title="Longitudinal historical footprints (raster) link"
+            slug=""
+            value=""
+            mode='view'
+        />
+        <DataEntry
+            title="Longitudinal historical footprints (vector) link"
+            slug=""
+            value=""
+            mode='view'
+        />
     </Fragment>
 );
 const DynamicsContainer = withCopyEdit(DynamicsView);

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

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 
 import { dataFields } from '../../config/data-fields-config';
+import DataEntry from '../data-components/data-entry';
 import { DataEntryGroup } from '../data-components/data-entry-group';
 import NumericDataEntry from '../data-components/numeric-data-entry';
 import SelectDataEntry from '../data-components/select-data-entry';
@@ -167,58 +168,12 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
             verified_count={props.building.verified.size_width_frontage}
             />
 
-        <NumericDataEntry
-            title={dataFields.size_plot_area_total.title}
-            slug="size_plot_area_total"
-            value={props.building.size_plot_area_total}
-            mode={props.mode}
-            copy={props.copy}
-            onChange={props.onChange}
-            step={0.1}
-            min={0}
-            disabled={true}
-            />
-        <NumericDataEntry
-            title={dataFields.size_far_ratio.title}
-            slug="size_far_ratio"
-            value={props.building.size_far_ratio}
-            mode={props.mode}
-            copy={props.copy}
-            onChange={props.onChange}
-            step={0.1}
-            min={0}
-            disabled={true}
-            />
-        <SelectDataEntry
-            title={dataFields.size_configuration.title}
-            slug="size_configuration"
-            value={props.building.size_configuration}
-            mode={props.mode}
-            copy={props.copy}
-            onChange={props.onChange}
-            disabled={true}
-            options={[
-                "Detached",
-                "Semi-detached",
-                "Terrace",
-                "End terrace",
-                "Block"
-            ]}
-            />
-        <SelectDataEntry
-            title={dataFields.size_roof_shape.title}
-            slug="size_roof_shape"
-            value={props.building.size_roof_shape}
-            mode={props.mode}
-            copy={props.copy}
-            onChange={props.onChange}
-            disabled={true}
-            options={[
-                "Flat",
-                "Pitched",
-                "Other"
-            ]}
-            />
+        <DataEntry
+            title="Total opening area"
+            slug=""
+            value=""
+            mode='view'
+        />
     </Fragment>
 );
 const SizeContainer = withCopyEdit(SizeView);

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

@@ -1,4 +1,8 @@
 import React, { Fragment } from 'react';
+import InfoBox from '../../components/info-box';
+import { dataFields } from '../../config/data-fields-config';
+import DataEntry from '../data-components/data-entry';
+import NumericDataEntry from '../data-components/numeric-data-entry';
 
 import withCopyEdit from '../data-container';
 
@@ -9,7 +13,7 @@ import { CategoryViewProps } from './category-view-props';
 */
 const StreetscapeView: React.FunctionComponent<CategoryViewProps> = (props) => (
     <Fragment>
-        <p className="data-intro">{props.intro}</p>
+        <InfoBox msg="This is what we're planning to collect on the building's context" />
         <ul className="data-list">
             <li>Gardens</li>
             <li>Trees</li>
@@ -18,6 +22,64 @@ const StreetscapeView: React.FunctionComponent<CategoryViewProps> = (props) => (
             <li>Proximity to parks and open greenspace</li>
             <li>Building shading</li>
         </ul>
+        <NumericDataEntry
+            title={dataFields.size_plot_area_total.title}
+            slug="size_plot_area_total"
+            value={props.building.size_plot_area_total}
+            mode={props.mode}
+            copy={props.copy}
+            onChange={props.onChange}
+            step={0.1}
+            min={0}
+            disabled={true}
+            />
+        <NumericDataEntry
+            title={dataFields.size_far_ratio.title}
+            slug="size_far_ratio"
+            value={props.building.size_far_ratio}
+            mode={props.mode}
+            copy={props.copy}
+            onChange={props.onChange}
+            step={0.1}
+            min={0}
+            disabled={true}
+            />
+        <DataEntry
+            title="Plot dimensions"
+            slug=""
+            value=""
+            mode='view'
+        />
+        <DataEntry
+            title="Plot geometry link"
+            slug=""
+            value=""
+            mode='view'
+        />
+        <DataEntry
+            title="Land ownership parcel link"
+            slug=""
+            value=""
+            mode='view'
+        />
+        <DataEntry
+            title="Land ownership type"
+            slug=""
+            value=""
+            mode='view'
+        />
+        <DataEntry
+            title="Street width"
+            slug=""
+            value=""
+            mode='view'
+        />
+        <DataEntry
+            title="Street network geometry link"
+            slug=""
+            value=""
+            mode='view'
+        />
     </Fragment>
 );
 const StreetscapeContainer = withCopyEdit(StreetscapeView);

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

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 
 import { 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';
 import Verification from '../data-components/verification';
@@ -105,6 +106,18 @@ const SustainabilityView: React.FunctionComponent<CategoryViewProps> = (props) =
                 copy={props.copy}
                 onChange={props.onChange}
             />
+            <DataEntry
+                title="Repairability rating for type"
+                slug=""
+                value=""
+                mode='view'
+            />
+            <DataEntry
+                title="Adaptability within plot rating"
+                slug=""
+                value=""
+                mode='view'
+            />
         </Fragment>
     );
     };

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

@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react';
+import InfoBox from '../../components/info-box';
 
 import withCopyEdit from '../data-container';
 
@@ -9,7 +10,7 @@ import { CategoryViewProps } from './category-view-props';
 */
 const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => (
     <Fragment>
-        <p className="data-intro">{props.intro}</p>
+        <InfoBox msg="This is what we're planning to collect in this section" />
         <ul>
             <li>Construction and design team (original building)</li>
             {
@@ -23,6 +24,7 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 // "slug": "team_after_original",
                 // "type": "text_multi"
             }
+            <li>Awards</li>
         </ul>
     </Fragment>
 );

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

@@ -22,6 +22,42 @@ const AttachmentFormOptions = [
 const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
     return (
         <Fragment>
+            <DataEntry
+                title="Base type classification"
+                slug=""
+                value=""
+                mode='view'
+            />
+            <DataEntry
+                title="Local typology/architectural style"
+                slug=""
+                value=""
+                mode='view'
+            />
+            <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}
+                onChange={props.onChange}
+                disabled={true}
+            />
+            <SelectDataEntry
+                title={dataFields.size_roof_shape.title}
+                slug="size_roof_shape"
+                value={props.building.size_roof_shape}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
+                disabled={true}
+                options={[
+                    "Flat",
+                    "Pitched",
+                    "Other"
+                ]}
+            />
             <SelectDataEntry
                 title={dataFields.building_attachment_form.title}
                 slug="building_attachment_form"
@@ -41,6 +77,24 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                 verified_count={props.building.verified.building_attachment_form}
                 />
 
+            <DataEntry
+                title="Local typology mutations"
+                slug=""
+                value=""
+                mode='view'
+            />
+            <DataEntry
+                title="3D procedural model classifications"
+                slug=""
+                value=""
+                mode='view'
+            />
+            <DataEntry
+                title="Dynamic tissue type classificaiton"
+                slug=""
+                value=""
+                mode='view'
+            />
             <NumericDataEntry
                 title={dataFields.date_change_building_use.title}
                 slug="date_change_building_use"
@@ -53,16 +107,6 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                 copy={props.copy}
                 onChange={props.onChange}
             />
-            <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}
-                onChange={props.onChange}
-                disabled={true}
-            />
         </Fragment>
     );
     };

app/src/frontend/config/categories-config.ts

@@ -7,7 +7,7 @@ export enum Category {
     LandUse = 'use',
     Type = 'type',
     Age = 'age',
-    SizeShape = 'size',
+    Size = 'size',
     Construction = 'construction',
     Streetscape = 'streetscape',
     Team = 'team',
@@ -27,7 +27,7 @@ export const categoriesOrder: Category[] = [
     Category.LandUse,
     Category.Type,
     Category.Age,
-    Category.SizeShape,
+    Category.Size,
     Category.Construction,
     Category.Streetscape,
     Category.Team,
@@ -52,9 +52,9 @@ export const categoriesConfig: {[key in Category]: CategoryDefinition} = {
         aboutUrl: 'https://pages.colouring.london/age',
         intro: 'Building age data can support energy analysis and help predict long-term change.',
     },
-    [Category.SizeShape]: {
+    [Category.Size]: {
         slug: 'size',
-        name: 'Size & Shape',
+        name: 'Size',
         aboutUrl: 'https://pages.colouring.london/shapeandsize',
         intro: 'How big are buildings?',
     },

app/src/frontend/config/category-maps-config.ts

@@ -46,7 +46,7 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition} = {
             ]
         },
     },
-    [Category.SizeShape]: {
+    [Category.Size]: {
         mapStyle: 'size_height',
         legend: {
             title: 'Height to apex',

app/src/frontend/config/category-ui-config.ts

@@ -20,7 +20,7 @@ export const categoryUiConfig: {[key in Category]: DataContainerType} = {
     [Category.LandUse]: UseContainer,
     [Category.Type]: TypeContainer,
     [Category.Age]: AgeContainer,
-    [Category.SizeShape]: SizeContainer,
+    [Category.Size]: SizeContainer,
     [Category.Construction]: ConstructionContainer,
     [Category.Streetscape]: StreetscapeContainer,
     [Category.Team]: TeamContainer,

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

@@ -100,7 +100,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
 
     building_attachment_form: {
         category: Category.Type,
-        title: "Building configuration (attachment)?",
+        title: "Adjacency/configuration",
         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: "",
     },
@@ -121,6 +121,13 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
         example: "",
     },
 
+    size_roof_shape: {
+        category: Category.Type,
+        title: "Roof type",
+        example: "",
+        //tooltip: ,
+    },
+
     date_year: {
         category: Category.Age,
         title: "Year built (best estimate)",
@@ -164,77 +171,73 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
     },
 
     size_storeys_core: {
-        category: Category.SizeShape,
+        category: Category.Size,
         title: "Core storeys",
         tooltip: "How many storeys between the pavement and start of roof?",
         example: 10,
     },
     size_storeys_attic: {
-        category: Category.SizeShape,
+        category: Category.Size,
         title: "Attic storeys",
         tooltip: "How many storeys above start of roof?",
         example: 1,
     },
     size_storeys_basement: {
-        category: Category.SizeShape,
+        category: Category.Size,
         title: "Basement storeys",
         tooltip: "How many storeys below pavement level?",
         example: 1,
     },
     size_height_apex: {
-        category: Category.SizeShape,
+        category: Category.Size,
         title: "Height to apex (m)",
         example: 100.5,
         //tooltip: ,
     },
     size_height_eaves: {
-        category: Category.SizeShape,
+        category: Category.Size,
         title: "Height to eaves (m)",
         example: 20.33,
         //tooltip: ,
     },
     size_floor_area_ground: {
-        category: Category.SizeShape,
+        category: Category.Size,
         title: "Ground floor area (m²)",
         example: 1245.6,
         //tooltip: ,
     },
     size_floor_area_total: {
-        category: Category.SizeShape,
+        category: Category.Size,
         title: "Total floor area (m²)",
         example: 2001.7,
         //tooltip: ,
     },
     size_width_frontage: {
-        category: Category.SizeShape,
+        category: Category.Size,
         title: "Frontage Width (m)",
         example: 12.2,
         //tooltip: ,
     },
+
+    size_configuration: {
+        category: Category.Size,
+        title: "Configuration (semi/detached, end/terrace)",
+        example: "",
+        //tooltip: ,
+    },
+
     size_plot_area_total: {
-        category: Category.SizeShape,
+        category: Category.Streetscape,
         title: "Total area of plot (m²)",
         example: 123.02,
         //tooltip: ,
     },
     size_far_ratio: {
-        category: Category.SizeShape,
+        category: Category.Streetscape,
         title: "FAR ratio (percentage of plot covered by building)",
         example: 0.1,
         //tooltip: ,
     },
-    size_configuration: {
-        category: Category.SizeShape,
-        title: "Configuration (semi/detached, end/terrace)",
-        example: "",
-        //tooltip: ,
-    },
-    size_roof_shape: {
-        category: Category.SizeShape,
-        title: "Roof shape",
-        example: "",
-        //tooltip: ,
-    },
 
     construction_core_material: {
         category: Category.Construction,