Merge pull request #1041 from matkoniecz/feature/1036-add-reset-button

add button to reset overlay state

app/src/frontend/displayPreferences-context.tsx

@@ -3,6 +3,9 @@ import React, { createContext, useCallback, useContext, useEffect, useState } fr
 import { LayerEnablementState, MapTheme } from './config/map-config';
 
 interface DisplayPreferencesContextState {
+    resetLayers: (e: React.FormEvent<HTMLFormElement>) => void;
+    anyLayerModifiedState: () => boolean;
+
     vista: LayerEnablementState;
     vistaSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
     vistaSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
@@ -45,6 +48,9 @@ const stub = (): never => {
 };
 
 export const DisplayPreferencesContext = createContext<DisplayPreferencesContextState>({
+    resetLayers: stub,
+    anyLayerModifiedState: stub,
+
     vista: undefined,
     vistaSwitch: stub,
     vistaSwitchOnClick: undefined,
@@ -85,16 +91,69 @@ export const DisplayPreferencesContext = createContext<DisplayPreferencesContext
 const noop = () => {};
 
 export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
-    const [vista, setVista] = useState<LayerEnablementState>('disabled');
+    const defaultVista = 'disabled'
-    const [flood, setFlood] = useState<LayerEnablementState>('disabled');
+    const defaultFlood = 'disabled'
-    const [creative, setCreative] = useState<LayerEnablementState>('disabled');
+    const defaultCreative = 'disabled'
-    const [housing, setHousing] = useState<LayerEnablementState>('disabled');
+    const defaultHousing = 'disabled'
-    const [borough, setBorough] = useState<LayerEnablementState>('enabled');
+    const defaultBorough = 'enabled'
-    const [parcel, setParcel] = useState<LayerEnablementState>('disabled');
+    const defaultParcel = 'disabled'
-    const [conservation, setConservation] = useState<LayerEnablementState>('disabled');
+    const defaultConservation = 'disabled'
-    const [historicData, setHistoricData] = useState<LayerEnablementState>('disabled');
+    const defaultHistoricData = 'disabled'
+    const [vista, setVista] = useState<LayerEnablementState>(defaultVista);
+    const [flood, setFlood] = useState<LayerEnablementState>(defaultFlood);
+    const [creative, setCreative] = useState<LayerEnablementState>(defaultCreative);
+    const [housing, setHousing] = useState<LayerEnablementState>(defaultHousing);
+    const [borough, setBorough] = useState<LayerEnablementState>(defaultBorough);
+    const [parcel, setParcel] = useState<LayerEnablementState>(defaultParcel);
+    const [conservation, setConservation] = useState<LayerEnablementState>(defaultConservation);
+    const [historicData, setHistoricData] = useState<LayerEnablementState>(defaultHistoricData);
     const [darkLightTheme, setDarkLightTheme] = useState<MapTheme>('night');
 
+    const resetLayers = useCallback(
+        (e) => {
+            e.preventDefault();
+            setVista(defaultVista);
+            setFlood(defaultFlood);
+            setCreative(defaultCreative);
+            setHousing(defaultHousing);
+            setBorough(defaultBorough)
+            setParcel(defaultParcel);
+            setConservation(defaultConservation);
+            setHistoricData(defaultHistoricData);
+            //setDarkLightTheme('night'); // reset only layers
+        },
+        []
+    )
+
+    function anyLayerModifiedState() {
+        if(vista != defaultVista) {
+            return true;
+        }
+        if(flood != defaultFlood) {
+            return true;
+        }
+        if(creative != defaultCreative) {
+            return true;
+        }
+        if(housing != defaultHousing) {
+            return true;
+        }
+        if(borough != defaultBorough) {
+            return true;
+        }
+        if(parcel != defaultParcel) {
+            return true;
+        }
+        if(conservation != defaultConservation) {
+            return true;
+        }
+        if(historicData != defaultHistoricData) {
+            return true;
+        }
+        //darkLightTheme not handled here
+        return false;
+    }
+
     const vistaSwitch = useCallback(
         (e) => {
             e.preventDefault();
@@ -233,6 +292,9 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
 
     return (
         <DisplayPreferencesContext.Provider value={{
+            resetLayers,
+            anyLayerModifiedState,
+
             vista,
             vistaSwitch,
             vistaSwitchOnClick,

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

@@ -35,6 +35,14 @@
     }
 }
 
+.reset-switcher {
+    top: 37px;
+    margin-right: 60px;
+}
+.reset-switcher .btn {
+    min-width: 280px;
+}
+
 .theme-switcher {
     top: 77px;
 }

app/src/frontend/map/map.tsx

@@ -31,6 +31,7 @@ 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';
@@ -173,6 +174,7 @@ 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} />
                     {

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

@@ -0,0 +1,20 @@
+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 <></>
+    }
+}