Maps Update: Cards and Modals for Maps Components

src/client/app/components/BarChartComponent.tsx

@@ -8,7 +8,7 @@ import { PlotRelayoutEvent } from 'plotly.js';
 import * as React from 'react';
 import Plot from 'react-plotly.js';
 import { TimeInterval } from '../../../common/TimeInterval';
-import { updateSliderRange } from '../redux/actions/extraActions';
+import { updateSliderRange } from '../redux/slices/graphSlice';
 import { readingsApi, stableEmptyBarReadings } from '../redux/api/readingsApi';
 import { useAppDispatch, useAppSelector } from '../redux/reduxHooks';
 import { selectPlotlyBarDataFromResult, selectPlotlyBarDeps } from '../redux/selectors/barChartSelectors';
@@ -115,14 +115,15 @@ export default function BarChartComponent() {
 							const startTS = utc(e['xaxis.range[0]']);
 							const endTS = utc(e['xaxis.range[1]']);
 							const workingTimeInterval = new TimeInterval(startTS, endTS);
-							dispatch(updateSliderRange(workingTimeInterval));
+							dispatch(updateSliderRange(workingTimeInterval.toString()));
 						}
 						else if (e['xaxis.range']) {
 							// this case is when the slider knobs are dragged.
 							const range = e['xaxis.range']!;
 							const startTS = range && range[0];
 							const endTS = range && range[1];
-							dispatch(updateSliderRange(new TimeInterval(utc(startTS), utc(endTS))));
+							const interval = new TimeInterval(utc(startTS), utc(endTS)).toString();
+							dispatch(updateSliderRange(interval));
 
 						}
 					}, 500, { leading: false, trailing: true })}

src/client/app/components/ChartSelectComponent.tsx

@@ -2,17 +2,13 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { sortBy, values } from 'lodash';
 import * as React from 'react';
 import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useSelector } from 'react-redux';
 import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
 import { useAppDispatch, useAppSelector } from '../redux/reduxHooks';
 import { graphSlice, selectChartToRender } from '../redux/slices/graphSlice';
-import { SelectOption } from '../types/items';
 import { ChartTypes } from '../types/redux/graph';
-import { State } from '../types/redux/state';
 import translate from '../utils/translate';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
 
@@ -24,10 +20,10 @@ export default function ChartSelectComponent() {
 	const currentChartToRender = useAppSelector(selectChartToRender);
 	const dispatch = useAppDispatch();
 	const [expand, setExpand] = useState(false);
-	const mapsById = useSelector((state: State) => state.maps.byMapID);
-	const sortedMaps = sortBy(values(mapsById).map(map => (
-		{ value: map.id, label: map.name, isDisabled: !(map.origin && map.opposite) } as SelectOption
-	)), 'label');
+	// const mapsById = useAppSelector(selectMapDataById);
+	// const sortedMaps = sortBy(values(mapsById).map(map => (
+	// 	{ value: map.id, label: map.name, isDisabled: !(map.origin && map.opposite) } as SelectOption
+	// )), 'label');
 
 	return (
 		<>
@@ -52,11 +48,6 @@ export default function ChartSelectComponent() {
 									key={chartType}
 									onClick={() => {
 										dispatch(graphSlice.actions.changeChartToRender(chartType));
-										if (chartType === ChartTypes.map && Object.keys(sortedMaps).length === 1) {
-											// If there is only one map, selectedMap is the id of the only map. ie; display map automatically if only 1 map
-											dispatch({ type: 'UPDATE_SELECTED_MAPS', mapID: sortedMaps[0].value });
-
-										}
 									}}
 								>
 									{translate(`${chartType}`)}

src/client/app/components/DateRangeComponent.tsx

@@ -9,9 +9,8 @@ import * as React from 'react';
 import 'react-calendar/dist/Calendar.css';
 import { useAppDispatch, useAppSelector } from '../redux/reduxHooks';
 import { selectSelectedLanguage } from '../redux/slices/appStateSlice';
-import { changeSliderRange, selectQueryTimeInterval, updateTimeInterval, selectChartToRender} from '../redux/slices/graphSlice';
+import { changeSliderRange, selectQueryTimeInterval, updateTimeInterval, selectChartToRender } from '../redux/slices/graphSlice';
 import '../styles/DateRangeCustom.css';
-import { Dispatch } from '../types/redux/actions';
 import { dateRangeToTimeInterval, timeIntervalToDateRange } from '../utils/dateRangeCompatibility';
 import translate from '../utils/translate';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
@@ -22,15 +21,15 @@ import { ChartTypes } from '../types/redux/graph';
  * @returns Date Range Calendar Picker
  */
 export default function DateRangeComponent() {
-	const dispatch: Dispatch = useAppDispatch();
+	const dispatch = useAppDispatch();
 	const queryTimeInterval = useAppSelector(selectQueryTimeInterval);
 	const locale = useAppSelector(selectSelectedLanguage);
 	const chartType = useAppSelector(selectChartToRender);
-	const datePickerVisible =  chartType !== ChartTypes.compare;
+	const datePickerVisible = chartType !== ChartTypes.compare;
 
 	const handleChange = (value: Value) => {
-		dispatch(updateTimeInterval(dateRangeToTimeInterval(value)));
-		dispatch(changeSliderRange(dateRangeToTimeInterval(value)));
+		dispatch(updateTimeInterval(dateRangeToTimeInterval(value).toString()));
+		dispatch(changeSliderRange(dateRangeToTimeInterval(value).toString()));
 	};
 
 

src/client/app/components/HeaderButtonsComponent.tsx

@@ -8,7 +8,6 @@ import { FormattedMessage } from 'react-intl';
 import { Link, useLocation } from 'react-router-dom';
 import { DropdownItem, DropdownMenu, DropdownToggle, Nav, NavLink, Navbar, UncontrolledDropdown } from 'reactstrap';
 import TooltipHelpComponent from '../components/TooltipHelpComponent';
-import { clearGraphHistory } from '../redux/actions/extraActions';
 import { authApi } from '../redux/api/authApi';
 import { selectOEDVersion } from '../redux/api/versionApi';
 import { useAppDispatch, useAppSelector } from '../redux/reduxHooks';
@@ -19,6 +18,7 @@ import { UserRole } from '../types/items';
 import translate from '../utils/translate';
 import LanguageSelectorComponent from './LanguageSelectorComponent';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
+import { clearGraphHistory } from '../redux/slices/graphSlice';
 
 /**
  * React Component that defines the header buttons at the top of a page

src/client/app/components/HistoryComponent.tsx

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import { useAppDispatch, useAppSelector } from '../redux/reduxHooks';
 import { selectForwardHistory, selectPrevHistory } from '../redux/slices/graphSlice';
-import { historyStepBack, historyStepForward } from '../redux/actions/extraActions';
+import { historyStepBack, historyStepForward } from '../redux/slices/graphSlice';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
 
 /**

src/client/app/components/LineChartComponent.tsx

@@ -8,7 +8,7 @@ import { PlotRelayoutEvent } from 'plotly.js';
 import * as React from 'react';
 import Plot from 'react-plotly.js';
 import { TimeInterval } from '../../../common/TimeInterval';
-import { updateSliderRange } from '../redux/actions/extraActions';
+import { updateSliderRange } from '../redux/slices/graphSlice';
 import { readingsApi, stableEmptyLineReadings } from '../redux/api/readingsApi';
 import { useAppDispatch, useAppSelector } from '../redux/reduxHooks';
 import { selectLineChartQueryArgs } from '../redux/selectors/chartQuerySelectors';
@@ -101,14 +101,15 @@ export default function LineChartComponent() {
 							const startTS = utc(e['xaxis.range[0]']);
 							const endTS = utc(e['xaxis.range[1]']);
 							const workingTimeInterval = new TimeInterval(startTS, endTS);
-							dispatch(updateSliderRange(workingTimeInterval));
+							dispatch(updateSliderRange(workingTimeInterval.toString()));
 						}
 						else if (e['xaxis.range']) {
 							// this case is when the slider knobs are dragged.
 							const range = e['xaxis.range']!;
 							const startTS = range && range[0];
 							const endTS = range && range[1];
-							dispatch(updateSliderRange(new TimeInterval(utc(startTS), utc(endTS))));
+							const interval = new TimeInterval(utc(startTS), utc(endTS));
+							dispatch(updateSliderRange(interval.toString()));
 
 						}
 					}, 500, { leading: false, trailing: true })