new interface for layer handling

closes #1059

app/src/frontend/displayPreferences-context.tsx

@@ -3,8 +3,8 @@ import React, { createContext, useCallback, useContext, useEffect, useState } fr
 import { LayerEnablementState, MapTheme } from './config/map-config';
 
 interface DisplayPreferencesContextState {
-    resetLayers: (e: React.FormEvent<HTMLFormElement>) => void;
+    showOverlayList: (e: React.FormEvent<HTMLFormElement>) => void;
-    anyLayerModifiedState: () => boolean;
+    resetLayersAndHideTheirList: (e: React.FormEvent<HTMLFormElement>) => void;
 
     vista: LayerEnablementState;
     vistaSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
@@ -41,6 +41,10 @@ interface DisplayPreferencesContextState {
     darkLightTheme: MapTheme;
     darkLightThemeSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
     darkLightThemeSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
+
+    showLayerSelection: LayerEnablementState;
+    showLayerSelectionSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
+    showLayerSelectionSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
 }
 
 const stub = (): never => {
@@ -48,8 +52,8 @@ const stub = (): never => {
 };
 
 export const DisplayPreferencesContext = createContext<DisplayPreferencesContextState>({
-    resetLayers: stub,
+    showOverlayList: stub,
-    anyLayerModifiedState: stub,
+    resetLayersAndHideTheirList: stub,
 
     vista: undefined,
     vistaSwitch: stub,
@@ -86,6 +90,10 @@ export const DisplayPreferencesContext = createContext<DisplayPreferencesContext
     darkLightTheme: undefined,
     darkLightThemeSwitch: stub,
     darkLightThemeSwitchOnClick: undefined,
+
+    showLayerSelection: undefined,
+    showLayerSelectionSwitch: stub,
+    showLayerSelectionSwitchOnClick: undefined,
 });
 
 const noop = () => {};
@@ -99,6 +107,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
     const defaultParcel = 'disabled'
     const defaultConservation = 'disabled'
     const defaultHistoricData = 'disabled'
+    const defaultShowLayerSelection = 'disabled'
     const [vista, setVista] = useState<LayerEnablementState>(defaultVista);
     const [flood, setFlood] = useState<LayerEnablementState>(defaultFlood);
     const [creative, setCreative] = useState<LayerEnablementState>(defaultCreative);
@@ -108,10 +117,17 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
     const [conservation, setConservation] = useState<LayerEnablementState>(defaultConservation);
     const [historicData, setHistoricData] = useState<LayerEnablementState>(defaultHistoricData);
     const [darkLightTheme, setDarkLightTheme] = useState<MapTheme>('night');
+    const [showLayerSelection, setShowLayerSelection] = useState<LayerEnablementState>(defaultShowLayerSelection);
 
-    const resetLayers = useCallback(
+    const showOverlayList = useCallback(
+        (e) => {
+            setShowLayerSelection('enabled')
+        },
+        []
+    )
+
+    const resetLayersAndHideTheirList = useCallback(
         (e) => {
-            e.preventDefault();
             setVista(defaultVista);
             setFlood(defaultFlood);
             setCreative(defaultCreative);
@@ -120,6 +136,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
             setParcel(defaultParcel);
             setConservation(defaultConservation);
             setHistoricData(defaultHistoricData);
+            setShowLayerSelection(defaultShowLayerSelection); // reset layers + hiding this panel is integrated into one action
             //setDarkLightTheme('night'); // reset only layers
     },
         []
@@ -289,11 +306,26 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
         setDarkLightTheme(newDarkLightTheme);
     }
 
+    const showLayerSelectionSwitch = useCallback(
+        (e) => {
+            flipShowLayerSelection(e)
+        },
+        [showLayerSelection],
+    )
+    const showLayerSelectionSwitchOnClick = (e) => {
+        flipShowLayerSelection(e)
+    }
+    function flipShowLayerSelection(e) {
+        e.preventDefault();
+        const newShowLayerSelection = (showLayerSelection === 'enabled')? 'disabled' : 'enabled';
+        setShowLayerSelection(newShowLayerSelection);
+    }
+
 
     return (
         <DisplayPreferencesContext.Provider value={{
-            resetLayers,
+            showOverlayList,
-            anyLayerModifiedState,
+            resetLayersAndHideTheirList,
 
             vista,
             vistaSwitch,
@@ -324,7 +356,11 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
 
             darkLightTheme,
             darkLightThemeSwitch,
-            darkLightThemeSwitchOnClick
+            darkLightThemeSwitchOnClick,
+
+            showLayerSelection,
+            showLayerSelectionSwitch,
+            showLayerSelectionSwitchOnClick
         }}>
             {children}
         </DisplayPreferencesContext.Provider>

app/src/frontend/map/data-switcher.tsx

@@ -4,17 +4,23 @@ import './map-button.css';
 import { useDisplayPreferences } from '../displayPreferences-context';
 
 interface DataLayerSwitcherProps {
-    currentDisplay: string;
-    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
 }
 
 const DataLayerSwitcher: React.FC<DataLayerSwitcherProps> = (props) => {
-    const { darkLightTheme } = useDisplayPreferences();
+    const { showLayerSelection, showOverlayList, resetLayersAndHideTheirList, darkLightTheme } = useDisplayPreferences();
+    const handleSubmit = (evt) => {
+        evt.preventDefault();
+        if (showLayerSelection === 'enabled') {
+            resetLayersAndHideTheirList(evt)
+        } else {
+            showOverlayList(evt)
+        }
+    }
     return (
-        <form className={`data-switcher map-button ${darkLightTheme}`} onSubmit={props.onSubmit}>
+        <form className={`data-switcher map-button ${darkLightTheme}`} onSubmit={handleSubmit}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
-                {(props.currentDisplay === 'enabled')? 'Hide layer options' : 'Show layer options'}
+                {(showLayerSelection === 'enabled')? 'Clear layer options' : 'Show layer options'}
             </button>
         </form>
     );

app/src/frontend/map/map-button.css

@@ -17,6 +17,10 @@
 .map-button .btn {
     margin: 0;
     min-width: 310px;
+    color: #191b1d;
+}
+.map-button .btn:hover {
+    color: #fff;
 }
 .map-button.night .btn {
     color: #fff;
@@ -24,7 +28,7 @@
     border-color: #343a40;
 }
 .map-button.night .btn:hover {
-    color: #343a40;
+    color: #d4d7da;
     background-color: transparent;
     background-image: none;
     border-color: #343a40;
@@ -46,11 +50,11 @@
     background-image: none;
 }
 .map-button.enabled-state {
-    color: #61ef61;
+    color: #75e775;
-    background-color: #61ef61;
+    background-color: #75e775;
 }
 .map-button.enabled-state .btn{
-    background-color: #61ef61;
+    background-color: #75e775;
 }
 .map-button.night.enabled-state {
     color: #448844;
@@ -73,14 +77,6 @@
     }
 }
 
-.reset-switcher {
-    top: 37px;
-    margin-right: 60px;
-}
-.reset-switcher .btn {
-    min-width: 280px;
-}
-
 .theme-switcher {
     top: 77px;
 }

app/src/frontend/map/map.tsx

@@ -29,7 +29,6 @@ import { Legend } from './legend';
 import SearchBox from './search-box';
 import ThemeSwitcher from './theme-switcher';
 import DataLayerSwitcher from './data-switcher';
-import { ResetSwitcher } from './reset-switcher';
 import { BoroughSwitcher } from './borough-switcher';
 import { ParcelSwitcher } from './parcel-switcher';
 import { FloodSwitcher } from './flood-switcher';
@@ -62,8 +61,7 @@ export const ColouringMap : FC<ColouringMapProps> = ({
     categoryMapDefinitions,
     children
 }) => {
-    const { darkLightTheme, darkLightThemeSwitch } = useDisplayPreferences();
+    const { darkLightTheme, darkLightThemeSwitch, showLayerSelection } = useDisplayPreferences();
-    const [dataLayers, setDataLayers] = useState<LayerEnablementState>('disabled');
     const [position, setPosition] = useState(initialMapViewport.position);
     const [zoom, setZoom] = useState(initialMapViewport.zoom);
 
@@ -86,15 +84,6 @@ export const ColouringMap : FC<ColouringMapProps> = ({
         [onBuildingAction],
     )
 
-    const layerSwitch = useCallback(
-        (e) => {
-            e.preventDefault();
-            const newDisplayState = (dataLayers === 'enabled')? 'disabled' : 'enabled';
-            setDataLayers(newDisplayState);
-        },
-        [dataLayers],
-    )
-
     return (
         <div className="map-container">
             <MapContainer
@@ -169,11 +158,10 @@ export const ColouringMap : FC<ColouringMapProps> = ({
                 mode !== 'basic' &&
                 <>
                     <Legend mapColourScaleDefinitions={categoryMapDefinitions} mapColourScale={mapColourScale} onMapColourScale={onMapColourScale}/>
-                    <ResetSwitcher/>
                     <ThemeSwitcher onSubmit={darkLightThemeSwitch} currentTheme={darkLightTheme} />
-                    <DataLayerSwitcher onSubmit={layerSwitch} currentDisplay={dataLayers} />
+                    <DataLayerSwitcher />
                     {
-                        (dataLayers == "enabled") ?
+                        (showLayerSelection == "enabled") ?
                         <>
                             <BoroughSwitcher/>
                             <ParcelSwitcher/>

app/src/frontend/map/reset-switcher.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-import './map-button.css';
-import { useDisplayPreferences } from '../displayPreferences-context';
-
-export const ResetSwitcher: React.FC<{}> = () => {
-    const { resetLayers, darkLightTheme, anyLayerModifiedState } = useDisplayPreferences();
-    if(anyLayerModifiedState()) {
-        return (
-            <form className={`reset-switcher map-button ${darkLightTheme}`} onSubmit={resetLayers}>
-                <button className="btn btn-outline btn-outline-dark"
-                    type="submit">
-                    {"Reset layers"}
-                </button>
-            </form>
-            );
-    } else {
-        return <></>
-    }
-}