Revised Preferences Menu

src/components/MapSection.js

@@ -616,7 +616,7 @@ export default function MapSection(){
             LayerArray.push(layers['choroplethHighlight'])
             LayerArray.push(layers['choroplethHover'])
         }
-
+        
         if (resources && resources.includes('hospital')) LayerArray.push(layers['hospitals'])
         if (resources && resources.includes('clinic')) LayerArray.push(layers['clinic'])
         if (resources && resources.includes('vaccinationSites')) LayerArray.push(layers['vaccinationSites'])

src/components/TopPanel.js

@@ -7,11 +7,15 @@ import styled from 'styled-components';
 import { DateSlider, Dock, Ticks, SliderPlaceholder } from '../components';
 import { colors } from '../config';
 import * as SVG from '../config/svg';
-import { OutlineButton } from '../styled_components';
+import { OutlineButton, StyledDropDown } from '../styled_components';
+// MUI import
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
 import Checkbox from '@material-ui/core/Checkbox';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Slider from '@material-ui/core/Slider';
+
+import { range } from 'lodash';
 
 // Styled components
 const TopDrawer = styled.div`
@@ -77,6 +81,7 @@ const PreferenceButton = styled.button`
 
 const DismissButton = styled(OutlineButton)`
     border:none;
+    font-weight:normal;
     &.topRight {
         position:absolute;
         top:0;
@@ -109,48 +114,92 @@ const PreferencePanelContainer = styled.div`
     }
 `
 
-function PreferncePanel({closePanel}){
+const SnapshotSelect = styled.p`
+    &.disabled {
+        opacity:0.5;
+        pointer-events:none;
+    }
+`
+
+const DaysDropdown = styled(StyledDropDown)`
+    transform:translateY(-6px);
+`
+
+function PreferencePanel({closePanel}){
     const shouldAlwaysLoadTimeseries = useSelector((state)=>state.shouldAlwaysLoadTimeseries)
     const snapshotDaysToLoad = useSelector((state) => state.snapshotDaysToLoad);
     const shouldSaveLocation = useSelector((state) => state.shouldSaveLocation);
+    const shouldSaveOverlay = useSelector((state) => state.shouldSaveOverlay);
+    const shouldSaveResource = useSelector((state) => state.shouldSaveResource);
+    const mapParams = useSelector((state) => state.mapParams);
+
     const dispatch = useDispatch();
 
     return <PreferencePanelContainer>
         <h3>Atlas Preferences</h3>
+        <br/>
         <FormGroup row>
+            <SnapshotSelect id="snapshot-slider-label" className={shouldAlwaysLoadTimeseries ? 'disabled' : ''}>
+                Only load the most recent {
+                    <DaysDropdown>
+                        <Select 
+                            value={snapshotDaysToLoad} 
+                            id="snapshotDaysToLoad-select"
+                            onChange={(e, newVal) => dispatch({type:'SET_PREFERENCE', payload:{pref:'snapshotDaysToLoad',value:newVal}})}
+                        >
+                        {range(1,13).map(i => <MenuItem 
+                            value={i*15} 
+                            key={`snapshot-${i}`}
+                            >{i*15} days</MenuItem>)}
+                    </Select>
+                    </DaysDropdown>
+                } of data
+            </SnapshotSelect>
             <FormControlLabel
                 control={<Checkbox 
                     checked={shouldAlwaysLoadTimeseries} 
                     onChange={() => dispatch({type:'SET_LOAD_TIMESERIES',payload:'toggle'})} 
                     name="checkedA" 
                 />}
-                label="Always load historic time-series data"
+                label="Always load all historic time-series data"
             />
-            {!shouldAlwaysLoadTimeseries && <><p id="snapshot-slider-label">
-                Number of days to load: {snapshotDaysToLoad} days
-            </p>
-            <Slider min={15} max={180} step={15} 
-                value={snapshotDaysToLoad} 
-                onChange={(e, value) => dispatch({type:'SET_PREFERENCE',payload:{pref:'snapshotDaysToLoad', value}})}
-                aria-labelledby="snapshot-slider-label" /></>}
             <FormControlLabel
-                control={<Checkbox checked={shouldSaveLocation} onChange={() => dispatch({type:'SET_PREFERENCE', payload:{pref:'shouldSaveLocation',value:'toggle'}})} name="checkedA" />}
+                control={
+                    <Checkbox 
+                        checked={shouldSaveLocation} 
+                        onChange={() => dispatch({type:'SET_PREFERENCE', payload:{pref:'shouldSaveLocation',value:'toggle'}})} 
+                        name="saveLocation" 
+                    />}
                 label="Save map location"
             />
+            <br/>
             <FormControlLabel
-                control={<Checkbox checked={false} onChange={(e) => console.log(e)} name="checkedA" />}
-                label="Save variable settings (requires historic time-series data enabled)"
+                control={
+                    <Checkbox 
+                        checked={false} 
+                        onChange={(e) => console.log(e)} 
+                        name="saveVariable" 
+                    />}
+                label="Save variable settings"
                 disabled
             />
             <FormControlLabel
-                control={<Checkbox checked={false} onChange={(e) => console.log(e)} name="checkedA" />}
-                label="Save overlay displayed"
-                disabled
+                control={
+                    <Checkbox 
+                        checked={shouldSaveOverlay !== false} 
+                        onChange={()=> dispatch({type:'SET_PREFERENCE', payload:{pref:'shouldSaveOverlay',value:shouldSaveOverlay === false ? mapParams.overlay : 'toggle'}})} 
+                        name="saveOverlay" 
+                    />}
+                label="Save overlay layer"
             />
             <FormControlLabel
-                control={<Checkbox checked={false} onChange={(e) => console.log(e)} name="checkedA" />}
-                label="Save resource displayed"
-                disabled
+                control={
+                    <Checkbox 
+                        checked={shouldSaveResource !== false} 
+                        onChange={()=> dispatch({type:'SET_PREFERENCE', payload:{pref:'shouldSaveResource',value:shouldSaveResource === false ? mapParams.resource : 'toggle'}})} 
+                        name="saveResource" 
+                    />}
+                label="Save resource layer"
             />
         </FormGroup>
         <DismissButton onClick={closePanel} className="topRight">×</DismissButton>
@@ -180,7 +229,7 @@ export default function TopPanel(){
                 </PreferenceContainer>
             }
             <PreferenceButton onClick={() => setShowPreferenceMenu(prev => !prev)}>{SVG.sliders}</PreferenceButton>
-            {showPreferenceMenu && <PreferncePanel closePanel={() => setShowPreferenceMenu(false)} />}
+            {showPreferenceMenu && <PreferencePanel closePanel={() => setShowPreferenceMenu(false)} />}
         </TopDrawer>
     )
 }

src/components/VariablePanel.js

@@ -18,6 +18,7 @@ import { StyledDropDown, BinsContainer, Gutter } from '../styled_components';
 import { setVariableParams, setMapParams, setCurrentData, setPanelState, setParametersAndData, setNotification, changeDotDensityMode, toggleDotDensityRace, setDotDensityBgOpacity } from '../actions';
 import { fixedScales, colorScales, colors, variableTree, urlParamsTree, datasetTree, allGeographies, allDatasets } from '../config';
 import * as SVG from '../config/svg';
+import { useEffect } from 'react/cjs/react.development';
 
 /** STYLES */
 const VariablePanelContainer = styled.div`
@@ -341,7 +342,9 @@ export default function VariablePanel(){
   const dataPresets = useSelector(state => state.dataPresets);
   const shouldLoadTimeseries = useSelector((state)=>state.shouldLoadTimeseries);
   const shouldAlwaysLoadTimeseries = useSelector((state)=>state.shouldAlwaysLoadTimeseries);
-
+  const shouldSaveOverlay = useSelector((state)=>state.shouldSaveOverlay);
+  const shouldSaveResource = useSelector((state)=>state.shouldSaveResource);
+
   const handleMapType = (event, newValue) => {
     let nBins = newValue === 'hinge15_breaks' ? 6 : 8
     if (newValue === 'lisa') {
@@ -387,6 +390,7 @@ export default function VariablePanel(){
         }
       )
     )
+    shouldSaveOverlay !== false && dispatch({type:'SET_PREFERENCE', payload:{pref:'shouldSaveOverlay',value:event.target.value}})
   }
   const handleMapResource = (event) =>{
     dispatch(
@@ -396,7 +400,19 @@ export default function VariablePanel(){
         }
       )
     )
+    shouldSaveResource !== false && dispatch({type:'SET_PREFERENCE', payload:{pref:'shouldSaveResource',value:event.target.value}})
   }
+
+  useEffect(() => {
+    if (shouldSaveOverlay !== false) {
+      handleMapOverlay({target:{value:shouldSaveOverlay}})
+    }
+
+    if (shouldSaveResource !== false) {
+      handleMapResource({target:{value:shouldSaveResource}})
+    }
+  },[])
+
   const handleOpenClose = () => dispatch(setPanelState({variables:!panelState.variables}))
   const handleVizTypeButton = (vizType) => dispatch(setMapParams({vizType}))
   const handleDotDensitySlider = (e, newValue) => dispatch(setDotDensityBgOpacity(newValue))  

src/constants/defaults.js

@@ -145,5 +145,7 @@ export const INITIAL_STATE = {
   shouldAlwaysLoadTimeseries: false,
   snapshotDaysToLoad: 90,
   savedLocation: '',
-  shouldSaveLocation: false
+  shouldSaveLocation: false,
+  shouldSaveOverlay:false,
+  shouldSaveResource:false
 };

src/contexts/ViewportContext.js

@@ -22,7 +22,6 @@ export const ViewportProvider = ({defaultViewport = {}, children}) => {
 
   useEffect(() => {
     if (shouldSaveLocation && document.hasFocus()){
-      console.log( JSON.stringify(viewport))
       dispatch({
         type: 'SET_PREFERENCE',
         payload: {

src/index.js

@@ -13,7 +13,7 @@ import { PersistGate } from 'redux-persist/integration/react';
 const persistConfig = {
   key: 'root',
   storage,
-  whitelist: ['shouldAlwaysLoadTimeseries','snapshotDaysToLoad','savedLocation','shouldSaveLocation']
+  whitelist: ['shouldAlwaysLoadTimeseries','snapshotDaysToLoad','savedLocation','shouldSaveLocation','shouldSaveOverlay','shouldSaveResource']
 }
 
 const persistedReducer = persistReducer(persistConfig, rootReducer)

src/reducers/index.js

@@ -895,7 +895,9 @@ var reducer = (state = INITIAL_STATE, action) => {
             return {
                 ...state,
                 [action.payload.pref]: action.payload.value === 'toggle'
-                    ? !state[action.payload.pref]
+                    ? 'string' === typeof(state[action.payload.pref])
+                        ? false
+                        : !state[action.payload.pref]
                     : action.payload.value
             }
         }

src/styled_components/index.js

@@ -195,17 +195,17 @@ export const HoverDiv = styled.div`
 `
 
 export const OutlineButton = styled.button`
-    border:none;
     padding:0.25em 0.5em;
-    border-radius:0.125em;
+    border-radius:0.5em;
     margin:0.5em;
     font-weight:bold;
     cursor:pointer;
     transition:250ms all;
     color:white;
     border-width:1px;
     border-style:solid;
-    background:none;
+    background:${colors.darkgray};
+    box-shadow: 0px 0px 5px rgba(0,0,0,0.7);
     font-family:'Lato', Arial, sans-serif;
     &:hover {
         border-color:${colors.yellow};

src/utils/parseMapboxLayers.js

@@ -24,7 +24,6 @@ export default function parseMapboxLayers(defaultLayers, mapParams, globalMap=fa
         : ['native_american_reservations','segregated_cities','uscongress-districts'].includes(mapParams.overlay)
         ? defaultLayers.map(layer => {
             if (mapParams.resource.includes(layer.id.split('-')[0]) || mapParams.overlay.includes(layer.id.split('-')[0])) {
-                console.log(layer)
                 return {...layer, layout: {...layer.layout, visibility: "visible"}}
             } else if (layer.id.includes('label')){
                 return {...layer, layout: {...layer.layout, visibility: "none"}}