WIP Various tweaks to category pages

As discussed with Polly on 09/05/2023

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

@@ -47,7 +47,7 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
        ){
       return (
           <Fragment>
-            <DataEntryGroup name="Building Age" collapsed={true} >
+            <DataEntryGroup name="Building Age" collapsed={false} >
                 <YearDataEntry
                     year={props.building.date_year}
                     upper={props.building.date_upper}

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

@@ -41,13 +41,13 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
     const worthKeepingReasonsNonEmpty = Object.values(props.building.community_type_worth_keeping_reasons ?? {}).some(x => x);
     return <>
         <DataEntryGroup name="Community views on building types" collapsed={false} >
-        <div className='community-opinion-pane'>
         <InfoBox>
-                Here we are collecting data on how well you think specific types of building work (rather than individual buildings), to help ensure we save and reuse all useful buildings and to help improve urban design quality in future.
+            Note: We are not currently collecting data on domestic/privately owned properties, only on public buildings.
         </InfoBox>
+        <div className='community-opinion-pane'>
             {
-            /*
+            
-            {(props.building.is_domestic === "no" || props.building.is_domestic === "mixed domestic/non-domestic") ?
+            (props.building.is_domestic === "no" || props.building.is_domestic === "mixed domestic/non-domestic") ?
             <>
                 <UserOpinionEntry
                     slug='community_like'
@@ -59,13 +59,13 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     mode={props.mode}
                     copy={props.copy}
                 />
-                <button className={`map-switcher-inline ${props.mapColourScale == "likes" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToLikesMapStyle}>
+                <button className={`map-switcher-inline ${props.mapColourScale == "likes" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`}>
                     {(props.mapColourScale == "likes")? 'Showing likes for specific buildings' : 'Click to see likes for specific buildings mapped'}
                 </button>
                 </>
             : <></>}
-            */
+            
-            }
+            
             <LogicalDataEntryYesOnlyWithExplanation
                 slug='community_type_worth_keeping'
                 title={buildingUserFields.community_type_worth_keeping.title}

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

@@ -7,6 +7,8 @@ import withCopyEdit from '../data-container';
 import Verification from '../data-components/verification';
 
 import { CategoryViewProps } from './category-view-props';
+import InfoBox from '../../components/info-box';
+import { DataEntryGroup } from '../data-components/data-entry-group';
 
 const ConstructionMaterialsOptions = [
     'Wood',
@@ -36,6 +38,7 @@ const RoofCoveringOptions = [
 const ConstructionView: React.FunctionComponent<CategoryViewProps> = (props) => {
     return (
          <Fragment>
+            <DataEntryGroup name="Materials" collapsed={false}>
                 <SelectDataEntry
                     title={dataFields.construction_core_material.title}
                     slug="construction_core_material"
@@ -83,12 +86,15 @@ const ConstructionView: React.FunctionComponent<CategoryViewProps> = (props) =>
                     user_verified_as={props.user_verified.construction_roof_covering}
                     verified_count={props.building.verified.construction_roof_covering}
                     />
+            </DataEntryGroup>
+            <DataEntryGroup name="Construction Sectors" collapsed={false}>
                 <DataEntry
                     title="Construction system type"
                     slug=""
                     value=""
                     mode='view'
                 />
+            </DataEntryGroup>
         </Fragment>
     );
 };

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

@@ -10,6 +10,7 @@ import withCopyEdit from '../data-container';
 import { PatternDataEntry } from '../data-components/pattern-data-entry';
 
 import { CategoryViewProps } from './category-view-props';
+import { DataEntryGroup } from '../data-components/data-entry-group';
 
 const locationNumberPattern = "[1-9]\\d*[a-z]?(-([1-9]\\d*))?"; ///[1-9]\d*[a-z]?(-([1-9]\d*))?/;
 
@@ -34,7 +35,14 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
             user_verified_as={props.user_verified.location_name}
             verified_count={props.building.verified.location_name}
         />
-
+        <DataEntry
+            title="Building Name (Domestic)"
+            slug=""
+            value=""
+            mode='view'
+            tooltip="Coming Soon"
+        />
+        <DataEntryGroup name="Address" collapsed={false}>
             <PatternDataEntry
                 title={dataFields.location_number.title}
                 slug="location_number"
@@ -53,7 +61,6 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 user_verified_as={props.user_verified.location_number}
                 verified_count={props.building.verified.location_number}
                 />
-
             <DataEntry
                 title={dataFields.location_street.title}
                 slug="location_street"
@@ -71,7 +78,6 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 user_verified_as={props.user_verified.location_street}
                 verified_count={props.building.verified.location_street}
                 />
-
             <DataEntry
                 title={dataFields.location_line_two.title}
                 slug="location_line_two"
@@ -96,7 +102,6 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 mode={props.mode}
                 copy={props.copy}
                 onChange={props.onChange}
-            
                 />
             <Verification
                 slug="location_town"
@@ -125,6 +130,15 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 user_verified_as={props.user_verified.location_postcode}
                 verified_count={props.building.verified.location_postcode}
                 />
+            <DataEntry
+                title="Address Source"
+                slug=""
+                value=""
+                mode='view'
+                tooltip="Coming Soon"
+            />
+        </DataEntryGroup>
+        <DataEntryGroup name="Other Location Data" collapsed={false}>
             <DataEntry
                 title={dataFields.ref_toid.title}
                 slug="ref_toid"
@@ -133,7 +147,6 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 copy={props.copy}
                 tooltip={dataFields.ref_toid.tooltip}
                 onChange={props.onChange}
-            
                 />
             <UPRNsDataEntry
                 title={dataFields.uprns.title}
@@ -163,6 +176,7 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 title={dataFields.location_latitude.title}
                 slug="location_latitude"
                 value={props.building.location_latitude}
+                tooltip={dataFields.location_latitude.tooltip}
                 mode={props.mode}
                 copy={props.copy}
                 step={0.00001}
@@ -183,6 +197,7 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 title={dataFields.location_longitude.title}
                 slug="location_longitude"
                 value={props.building.location_longitude}
+                tooltip={dataFields.location_latitude.tooltip}
                 mode={props.mode}
                 copy={props.copy}
                 step={0.00001}
@@ -199,6 +214,7 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 user_verified_as={props.user_verified.location_longitude}
                 verified_count={props.building.verified.location_longitude}
                 />
+        </DataEntryGroup>
     </Fragment>
 );
 const LocationContainer = withCopyEdit(LocationView);

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

@@ -9,12 +9,41 @@ import Verification from '../data-components/verification';
 import withCopyEdit from '../data-container';
 
 import { CategoryViewProps } from './category-view-props';
+import InfoBox from '../../components/info-box';
 
 /**
 * Size view/edit section
 */
 const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
     <Fragment>
+        <DataEntryGroup name="Plot Size">
+            <NumericDataEntry
+                title={dataFields.size_plot_area_total.title}
+                slug="size_plot_area_total"
+                mode='view'
+                step={0.1}
+                min={0}
+            />
+            <NumericDataEntry
+                title={dataFields.size_far_ratio.title}
+                slug="size_far_ratio"
+                mode='view'
+                step={0.1}
+                min={0}
+            />
+            <DataEntry
+                title="Plot dimensions"
+                slug=""
+                value=""
+                mode='view'
+            />
+            <DataEntry
+                title="Plot geometry link"
+                slug=""
+                value=""
+                mode='view'
+            />
+        </DataEntryGroup>
         <DataEntryGroup name="Floors">
             <NumericDataEntry
                 title={dataFields.size_storeys_core.title}

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

@@ -13,43 +13,14 @@ import { CategoryViewProps } from './category-view-props';
 */
 const StreetscapeView: React.FunctionComponent<CategoryViewProps> = (props) => (
     <Fragment>
-        <InfoBox type='warning' msg="This is what we're planning to collect on the building's context" />
-        <ul className="data-list">
-            <li>Gardens</li>
-            <li>Trees</li>
-            <li>Green walls</li>
-            <li>Green roof</li>
-            <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"
-            mode='view'
-            step={0.1}
-            min={0}
-        />
-        <NumericDataEntry
-            title={dataFields.size_far_ratio.title}
-            slug="size_far_ratio"
-            mode='view'
-            step={0.1}
-            min={0}
-        />
         <DataEntry
-            title="Plot dimensions"
+            title="Does the building have a front garden?"
             slug=""
             value=""
             mode='view'
         />
         <DataEntry
-            title="Plot geometry link"
+            title="Does the building have a back garden?"
-            slug=""
-            value=""
-            mode='view'
-        />
-        <DataEntry
-            title="Does the building have a garden?"
             slug=""
             value=""
             mode='view'

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

@@ -95,9 +95,6 @@ const SustainabilityView: React.FunctionComponent<CategoryViewProps> = (props) =
                 user_verified_as={props.user_verified.sust_retrofit_date}
                 verified_count={props.building.verified.sust_retrofit_date}
                 />
-            <InfoBox>
-                This section is under development.
-            </InfoBox>
             <DataEntry
                 title="Date of Significant Retrofits"
                 slug=""
@@ -119,7 +116,7 @@ const SustainabilityView: React.FunctionComponent<CategoryViewProps> = (props) =
                 mode='view'
             />
             <DataEntry
-                title="Green Walls / Green Roof / Shading"
+                title="Green Walls / Green Roof"
                 slug=""
                 value=""
                 mode='view'

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

@@ -21,46 +21,6 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
     const currentBuildingConstructionYear = building.date_year || undefined;
       return (
        <form>
-          <InfoBox msg="Can you help us capture information on who built the current building?"></InfoBox>
-          <MultiDataEntry
-              title={dataFields.landowner.title}
-              slug="landowner"
-              value={props.building.landowner}
-              mode={props.mode}
-              copy={props.copy}
-              onChange={props.onChange}
-              tooltip={dataFields.landowner.tooltip}
-              placeholder=""
-              editableEntries={true}
-              />
-          <Verification
-              slug="landowner"
-              allow_verify={props.user !== undefined && props.building.landowner !== null && !props.edited}
-              onVerify={props.onVerify}
-              user_verified={props.user_verified.hasOwnProperty("landowner")}
-              user_verified_as={props.user_verified.landowner}
-              verified_count={props.building.verified.landowner}
-              />
-          <MultiDataEntry
-              title={dataFields.landowner_source_link.title}
-              slug="landowner_source_link"
-              value={props.building.landowner_source_link}
-              mode={props.mode}
-              copy={props.copy}
-              onChange={props.onChange}
-              tooltip={dataFields.landowner_source_link.tooltip}
-              placeholder="https://..."
-              editableEntries={true}
-              isUrl={true}
-              />
-          <Verification
-              slug="landowner_source_link"
-              allow_verify={props.user !== undefined && props.building.landowner_source_link !== null && !props.edited}
-              onVerify={props.onVerify}
-              user_verified={props.user_verified.hasOwnProperty("landowner_source_link")}
-              user_verified_as={props.user_verified.landowner_source_link}
-              verified_count={props.building.verified.landowner_source_link}
-              />
             <NumericDataEntry
                 slug='date_year'
                 title={dataFields.date_year.title}
@@ -114,6 +74,37 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     />
             </>
             ) : (null)}
+          <MultiDataEntry
+              title={dataFields.landowner.title}
+              slug="landowner"
+              value={props.building.landowner}
+              mode={props.mode}
+              copy={props.copy}
+              onChange={props.onChange}
+              tooltip={dataFields.landowner.tooltip}
+              placeholder=""
+              editableEntries={true}
+              />
+          <Verification
+              slug="landowner"
+              allow_verify={props.user !== undefined && props.building.landowner !== null && !props.edited}
+              onVerify={props.onVerify}
+              user_verified={props.user_verified.hasOwnProperty("landowner")}
+              user_verified_as={props.user_verified.landowner}
+              verified_count={props.building.verified.landowner}
+              />
+          <MultiDataEntry
+              title={dataFields.landowner_source_link.title}
+              slug="landowner_source_link"
+              value={props.building.landowner_source_link}
+              mode={props.mode}
+              copy={props.copy}
+              onChange={props.onChange}
+              tooltip={dataFields.landowner_source_link.tooltip}
+              placeholder="https://..."
+              editableEntries={true}
+              isUrl={true}
+              />
           <SelectDataEntry
               slug='developer_type'
               title={dataFields.developer_type.title}
@@ -162,14 +153,6 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
               editableEntries={true}
               isUrl={true}
               />
-          <Verification
-              slug="developer_source_link"
-              allow_verify={props.user !== undefined && props.building.developer_source_link !== null && !props.edited}
-              onVerify={props.onVerify}
-              user_verified={props.user_verified.hasOwnProperty("developer_source_link")}
-              user_verified_as={props.user_verified.developer_source_link}
-              verified_count={props.building.verified.developer_source_link}
-              />
           <MultiDataEntry
               title={dataFields.designers.title}
               slug="designers"
@@ -201,14 +184,6 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
               editableEntries={true}
               isUrl={true}
               />
-          <Verification
-              slug="designers_source_link"
-              allow_verify={props.user !== undefined && props.building.designers_source_link !== null && !props.edited}
-              onVerify={props.onVerify}
-              user_verified={props.user_verified.hasOwnProperty("designers_source_link")}
-              user_verified_as={props.user_verified.designers_source_link}
-              verified_count={props.building.verified.designers_source_link}
-              />
           <SelectDataEntry
               slug='lead_designer_type'
               title={dataFields.lead_designer_type.title}
@@ -297,51 +272,6 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
            editableEntries={true}
            isUrl={true}
            />
-       <Verification
-           slug="builder_source_link"
-           allow_verify={props.user !== undefined && props.building.builder_source_link !== null && !props.edited}
-           onVerify={props.onVerify}
-           user_verified={props.user_verified.hasOwnProperty("builder_source_link")}
-           user_verified_as={props.user_verified.builder_source_link}
-           verified_count={props.building.verified.builder_source_link}
-           />
-       <MultiDataEntry
-           title={dataFields.other_team.title}
-           slug="other_team"
-           value={props.building.other_team}
-           mode={props.mode}
-           copy={props.copy}
-           onChange={props.onChange}
-           placeholder=""
-           editableEntries={true}
-           />
-       <Verification
-           slug="other_team"
-           allow_verify={props.user !== undefined && props.building.other_team !== null && !props.edited}
-           onVerify={props.onVerify}
-           user_verified={props.user_verified.hasOwnProperty("other_team")}
-           user_verified_as={props.user_verified.other_team}
-           verified_count={props.building.verified.other_team}
-           />
-       <MultiDataEntry
-           title={dataFields.other_team_source_link.title}
-           slug="other_team_source_link"
-           value={props.building.other_team_source_link}
-           mode={props.mode}
-           copy={props.copy}
-           onChange={props.onChange}
-           placeholder="https://..."
-           editableEntries={true}
-           isUrl={true}
-           />
-       <Verification
-           slug="other_team_source_link"
-           allow_verify={props.user !== undefined && props.building.other_team_source_link !== null && !props.edited}
-           onVerify={props.onVerify}
-           user_verified={props.user_verified.hasOwnProperty("other_team_source_link")}
-           user_verified_as={props.user_verified.other_team_source_link}
-           verified_count={props.building.verified.other_team_source_link}
-           />
      </form>
     );
 };

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

@@ -8,6 +8,7 @@ import Verification from '../data-components/verification';
 import withCopyEdit from '../data-container';
 
 import { CategoryViewProps } from './category-view-props';
+import InfoBox from '../../components/info-box';
 
 const AttachmentFormOptions = [
     "Detached",
@@ -22,42 +23,6 @@ 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"
@@ -76,7 +41,50 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                 user_verified_as={props.user_verified.building_attachment_form}
                 verified_count={props.building.verified.building_attachment_form}
                 />
-
+            <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}
+            />
+            <Verification
+                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
+                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"
+                value={props.building.size_roof_shape}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
+                disabled={true}
+                options={[
+                    "Flat",
+                    "Pitched",
+                    "Other"
+                ]}
+            />
             <DataEntry
                 title="Local typology mutations"
                 slug=""

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

@@ -12,6 +12,7 @@ import withCopyEdit from '../data-container';
 import { CategoryViewProps } from './category-view-props';
 import Verification from '../data-components/verification';
 import { useDisplayPreferences } from '../../displayPreferences-context';
+import { DataEntryGroup } from '../data-components/data-entry-group';
 
 /**
  * Use view/edit section
@@ -24,6 +25,11 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
     const { darkLightTheme } = useDisplayPreferences();
       return (
           <Fragment>
+                <DataEntryGroup name="Domestic or non-domestic use" collapsed={false}>
+                    <InfoBox msg="93% of properties in UK are dwellings so we have set 'residential' as the default value. Can you help us identify non-residential and mixed use buildings (and verify residential buildings too)?"></InfoBox>
+                    <button className={`map-switcher-inline ${props.mapColourScale == "is_domestic" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToIsDomesticMapStyle}>
+                        {(props.mapColourScale == "is_domestic")? 'Showing domestic status for specific buildings' : 'Click to see domestic, non-domestic and mixed-use buildings'}
+                    </button>
                     <SelectDataEntry
                         title={dataFields.is_domestic.title}
                         slug="is_domestic"
@@ -42,11 +48,33 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
                         user_verified_as={props.user_verified.is_domestic}
                         verified_count={props.building.verified.is_domestic}
                     />
-              Work from home does not count as office and does not make building non-domestic.
+                    <InfoBox type='warning'>Note: Work from home does not count as office and does not make building non-domestic.</InfoBox>
-              <button className={`map-switcher-inline ${props.mapColourScale == "is_domestic" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToIsDomesticMapStyle}>
+                    <SelectDataEntry
-                    {(props.mapColourScale == "is_domestic")? 'Showing domestic status for specific buildings' : 'Click to see domestic status for specific buildings mapped'}
+                        title={dataFields.is_domestic_source.title}
-                </button>
+                        slug="is_domestic_source"
-              <InfoBox msg="93% of properties in UK are dwellings so we have set this as the default colour. Can you help us colour-in all non-residential and mixed use buildings, and verify residential buildings too?"></InfoBox>
+                        value={props.building.is_domestic}
+                        options={
+                            [
+                                "Citizen/passerby", 
+                                "Google or other photograph/satellite imagery", 
+                                "Government Record",
+                                "Other Record"
+                            ]
+                        }
+                        mode={props.mode}
+                        copy={props.copy}
+                        onChange={props.onChange}
+                        tooltip={dataFields.is_domestic_source.tooltip}
+                    />
+                    <DataEntry
+                        title="Please provide a link to the data source"
+                        slug=""
+                        value=""
+                        mode='view'
+                        tooltip="Coming Soon"
+                    />
+                </DataEntryGroup>
+                <DataEntryGroup name="Specific Land Use" collapsed={false}>
                     <MultiDataEntry
                         title={dataFields.current_landuse_group.title}
                         slug="current_landuse_group"
@@ -69,20 +97,6 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
                         user_verified_as={props.user_verified.current_landuse_group && props.user_verified.current_landuse_group.join(", ")}
                         verified_count={props.building.verified.current_landuse_group}
                         />
-              {
-                  props.mode != 'view' &&
-                  <InfoBox msg="Land use order, shown below, is automatically derived from the land use groups"></InfoBox>
-              }
-              <DataEntry
-                  title={dataFields.current_landuse_order.title}
-                  tooltip={dataFields.current_landuse_order.tooltip}
-                  slug="current_landuse_order"
-                  value={props.building.current_landuse_order}
-                  mode={props.mode}
-                  disabled={true}
-                  copy={props.copy}
-                  onChange={props.onChange}
-              />
                     <SelectDataEntry
                         title={dataFields.current_landuse_source.title}
                         slug="current_landuse_source"
@@ -94,14 +108,6 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
                         placeholder={dataFields.current_landuse_source.example}
                         options={dataFields.current_landuse_source.items}
                         />
-              <Verification
-                  slug="current_landuse_source"
-                  allow_verify={props.user !== undefined && props.building.current_landuse_source !== null && !props.edited}
-                  onVerify={props.onVerify}
-                  user_verified={props.user_verified.hasOwnProperty("current_landuse_source")}
-                  user_verified_as={props.user_verified.current_landuse_source}
-                  verified_count={props.building.verified.current_landuse_source}
-                  />
                     {(props.building.current_landuse_source == "Expert/personal knowledge of building" ||
                         props.building.current_landuse_source == "Online streetview image" ||
                         props.building.current_landuse_source == null) ? <></> :
@@ -117,16 +123,23 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
                             editableEntries={true}
                             isUrl={true}
                             />
-            <Verification
-                slug="current_landuse_link"
-                allow_verify={props.user !== undefined && props.building.current_landuse_link !== null && !props.edited}
-                onVerify={props.onVerify}
-                user_verified={props.user_verified.hasOwnProperty("current_landuse_link")}
-                user_verified_as={props.user_verified.current_landuse_link}
-                verified_count={props.building.verified.current_landuse_link}
-                />
                         </>
                     }
+                    {
+                        props.mode != 'view' &&
+                        <InfoBox msg="A more general classification for the land use of this building is automatically derived and shown below."></InfoBox>
+                    }
+                    <DataEntry
+                        title={dataFields.current_landuse_order.title}
+                        tooltip={dataFields.current_landuse_order.tooltip}
+                        slug="current_landuse_order"
+                        value={props.building.current_landuse_order}
+                        mode={props.mode}
+                        disabled={true}
+                        copy={props.copy}
+                        onChange={props.onChange}
+                    />
+                </DataEntryGroup>
           </Fragment>
         );
 };