Extended chart link to support from latest readings

.gitignore

@@ -53,7 +53,7 @@ nohup.out
 
 # Visual Studio Code settings file
 .vscode/settings.json
-
+.vscode/launch.json
 # tmp file
 src/server/tmp/*
 

.vscode/launch.json

@@ -1,7 +1,9 @@
 {
 	"version": "0.2.0",
 	"configurations": [
+
 		{
+
 			"name": "Attach to Node in Docker",
 			"type": "node",
 			"request": "attach",
@@ -44,6 +46,7 @@
 				"Attach to Node in Docker",
 				"Launch Firefox against localhost"
 			]
+
 		}
 	]
 }

as

@@ -0,0 +1,7 @@
+  origin/HEAD -> origin/development
+  origin/ann_branch
+  origin/ann_branch_2
+  origin/ann_will_branch
+  origin/codebase-testing
+  origin/development
+  origin/w/dev

d

@@ -0,0 +1,7 @@
+  origin/HEAD -> origin/development
+  origin/ann_branch
+  origin/ann_branch_2
+  origin/ann_will_branch
+  origin/codebase-testing
+  origin/development
+  origin/w/dev

src/client/app/components/ChartLinkComponent.tsx

@@ -5,15 +5,28 @@
 import * as React from 'react';
 import { toast } from 'react-toastify';
 import ReactTooltip from 'react-tooltip';
-import { Button, ButtonGroup, Input } from 'reactstrap';
+import { Button, ButtonGroup,Input} from 'reactstrap';
 import { useAppDispatch, useAppSelector } from '../redux/reduxHooks';
 import { selectChartLink } from '../redux/selectors/uiSelectors';
-import { selectChartLinkHideOptions, setChartLinkOptionsVisibility } from '../redux/slices/appStateSlice';
-import { selectSelectedGroups, selectSelectedMeters } from '../redux/slices/graphSlice';
-import { showErrorNotification, showInfoNotification } from '../utils/notifications';
+import {
+	selectChartLinkHideOptions, selectIsKeepCurrent, setChartLinkOptionsVisibility,
+	setIsKeepCurrent
+} from '../redux/slices/appStateSlice';
+import {
+	selectSelectedGroups,
+	selectSelectedMeters,
+	selectQueryTimeInterval
+} from '../redux/slices/graphSlice';
+import {
+	showErrorNotification,
+	showInfoNotification
+} from '../utils/notifications';
 import { useTranslate } from '../redux/componentHooks';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
-import { wellStyle, rowFlexStart } from '../styles/modalStyle';
+import { wellStyle, rowFlexStart, labelStyle } from '../styles/modalStyle';
+import { checkboxStyle } from '../styles/modalStyle';
+
+
 
 /**
  * @returns chartLinkComponent
@@ -26,59 +39,134 @@ export default function ChartLinkComponent() {
 	const linkHideOptions = useAppSelector(selectChartLinkHideOptions);
 	const selectedMeters = useAppSelector(selectSelectedMeters);
 	const selectedGroups = useAppSelector(selectSelectedGroups);
+	const queryTimeInterval = useAppSelector(selectQueryTimeInterval);
+	const isKeepCurrent = useAppSelector(selectIsKeepCurrent);
 	const ref = React.useRef<HTMLDivElement>(null);
+
+	// THIS react.UseMemo ONLY RETURNS TRUE WHEN THE CONDITIONS ARE MET FOR USING KEEP CURRENT (left is is bounded and right is unbounded)
+	const shouldShowKeepCurrentCheckbox = React.useMemo(() => {
+		if (!queryTimeInterval) return false;
+		if (queryTimeInterval.getIsBounded()) return false;
+		if (
+			queryTimeInterval.getStartTimestamp() == null &&
+			!queryTimeInterval.getIsBounded()
+		)
+			return false;
+		return true;
+	}, [queryTimeInterval]);
+
 	const handleButtonClick = () => {
 		// First attempt to write directly to user's clipboard.
-		navigator.clipboard.writeText(linkText)
+		navigator.clipboard
+			.writeText(linkText)
 			.then(() => {
-				showInfoNotification(translate('clipboard.copied'), toast.POSITION.TOP_RIGHT, 1000);
+				showInfoNotification(
+					translate('clipboard.copied'),
+					toast.POSITION.TOP_RIGHT,
+					1000
+				);
 			})
 			.catch(() => {
 				// if operation fails, open copyable text for manual copy.
-				showErrorNotification(translate('clipboard.not.copied'), toast.POSITION.TOP_RIGHT, 1000);
+				showErrorNotification(
+					translate('clipboard.not.copied'),
+					toast.POSITION.TOP_RIGHT,
+					1000
+				);
 				setLinkTextVisible(true);
 			});
 	};
 	if (selectedMeters.length > 0 || selectedGroups.length > 0) {
 		return (
 			<div>
+				{/* inputting new "keep chart current" feature */}
+				<div style={labelStyle}>{translate('chart.link.options.title')}</div>
+				{/* hide options checkbox */}
+				<div className="checkbox">
+					<Input
+						type="checkbox"
+						style={checkboxStyle}
+						defaultChecked={linkHideOptions}
+						onClickCapture={e => {
+							e.stopPropagation();
+							dispatch(setChartLinkOptionsVisibility(!linkHideOptions));
+						}}
+						onMouseOver={() => {
+							ref.current && ReactTooltip.show(ref.current);
+						}}
+						onMouseLeave={() => {
+							ref.current && ReactTooltip.hide(ref.current);
+						}}
+					/>
+					<label>{translate('hide.options.when.using.this.label')}</label>
+					<TooltipMarkerComponent
+						page="home"
+						helpTextId="help.home.toggle.chart.link"
+					/>
+				</div>
+				{/* keep current checkbox ----> */}
+				{/* USE shouldShowKeepCurrentCheckbox AS THE CONDITIONAL BOOLEAN */}
+				<div className="checkbox">
+					<Input
+						type="checkbox"
+						style={checkboxStyle}
+						onMouseOver={() => {
+							ref.current && ReactTooltip.show(ref.current);
+						}}
+						onMouseLeave={() => {
+							ref.current && ReactTooltip.hide(ref.current);
+						}}
+						checked={isKeepCurrent}
+						onChange={e => dispatch(setIsKeepCurrent(e.target.checked))}
+						disabled={!shouldShowKeepCurrentCheckbox}
+						// shouldShow is the value we use to tell if it should be disabled or not
+						//when disabled = true, you CANNOT click the checkbox
+					/>
+
+					<label
+					// uses the default value when shouldShowKeepCurrentCheckbox is true, and the greyed out color when it's false
+						style={{
+							color: shouldShowKeepCurrentCheckbox
+								? undefined
+								: 'hsl(0, 0%, 70%)'
+						}}
+					>
+						{translate('keep.chart.current.label')}
+					</label>
+					{/* we need to create a tool tip for "keep chart current" checkbox */}
+					<TooltipMarkerComponent page="home" helpTextId="help.home.toggle.chart.link.keep.current" />
+				</div>
+
 				<div style={rowFlexStart}>
-					<ButtonGroup >
-						<Button outline onClick={handleButtonClick} >
-							<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', gap: '1em', alignItems: 'center' }}>
+
+					<ButtonGroup>
+						<Button outline onClick={handleButtonClick}>
+							<div
+								style={{
+									display: 'flex',
+									flexDirection: 'row',
+									justifyContent: 'space-evenly',
+									gap: '1em',
+									alignItems: 'center'
+								}}
+							>
 								{translate('chart.link')}
-								<div ref={ref} data-for={'home'} data-tip={'help.home.toggle.chart.link'}								>
-									<Input type='checkbox' defaultChecked={linkHideOptions}
-										onClickCapture={e => {
-											e.stopPropagation();
-											dispatch(setChartLinkOptionsVisibility(!linkHideOptions));
-										}}
-										onMouseOver={() => {
-											ref.current && ReactTooltip.show(ref.current);
-										}}
-										onMouseLeave={() => {
-											ref.current && ReactTooltip.hide(ref.current);
-										}}
-									/>
-								</div>
+
 							</div>
 						</Button>
-						<Button outline onClick={() => setLinkTextVisible(visible => !visible)}>
+						<Button
+							outline
+							onClick={() => setLinkTextVisible(visible => !visible)}
+						>
 							{linkTextVisible ? 'x' : 'v'}
 						</Button>
+
 					</ButtonGroup>
-					<TooltipMarkerComponent page='home' helpTextId='help.home.toggle.chart.link' />
 				</div>
-				{
-					linkTextVisible &&
-					<div style={wellStyle}>
-						{linkText}
-					</div>
-				}
-			</div >
+				{linkTextVisible && <div style={wellStyle}>{linkText}</div>}
+			</div>
 		);
-	}
-	else {
+	} else {
 		return null;
 	}
-}
+}

src/client/app/components/PlotNavComponent.tsx

@@ -12,7 +12,7 @@ import {
 	changeSliderRange, selectChartToRender, selectHistoryIsDirty,
 	selectSelectedGroups, selectSelectedMeters,
 	selectSliderRangeInterval, selectInitialXAxisRange,
-	selectQueryTimeInterval, updateTimeIntervalAndSliderRange
+	selectQueryTimeInterval, updateTimeIntervalAndSliderRange,updateTimeCreated
 } from '../redux/slices/graphSlice';
 import HistoryComponent from './HistoryComponent';
 import { ChartTypes } from '../types/redux/graph';
@@ -110,6 +110,7 @@ export const RefreshGraphComponent = () => {
 					const maxX = initialXAxisRange?.getEndTimestamp?.();
 					const nextInterval = getNextQueryTimeInterval(queryTimeInterval, sliderInterval, minX, maxX);
 					dispatch(updateTimeIntervalAndSliderRange(nextInterval));
+					dispatch(updateTimeCreated());
 				}
 			}}
 		/>

src/client/app/components/TooltipHelpComponent.tsx

@@ -68,6 +68,7 @@ export default function TooltipHelpComponent(props: TooltipHelpProps) {
 		'help.home.select.units': { link: `${helpUrl}/graphingUnits/` },
 		'help.home.readings.per.day': { link: `${helpUrl}/readingsPerDay/` },
 		'help.home.toggle.chart.link': { link: `${helpUrl}/chartLink/` },
+		'help.home.toggle.chart.link.keep.current': { link: `${helpUrl}/chartLink/` },
 		'help.groups.groupdetails': { link: `${helpUrl}/groupViewing/#groupDetails` },
 		'help.groups.groupview': { link: `${helpUrl}/groupViewing/` },
 		'help.meters.meterview': { link: `${helpUrl}/meterViewing/` },

src/client/app/redux/selectors/uiSelectors.ts

@@ -5,7 +5,7 @@ import { LanguageTypes } from 'types/redux/i18n';
 import { selectGroupDataById } from '../../redux/api/groupsApi';
 import { selectMeterDataById } from '../../redux/api/metersApi';
 import { selectUnitDataById } from '../../redux/api/unitsApi';
-import { selectChartLinkHideOptions, selectSelectedLanguage } from '../../redux/slices/appStateSlice';
+import { selectChartLinkHideOptions, selectIsKeepCurrent, selectSelectedLanguage } from '../../redux/slices/appStateSlice';
 import { DataType } from '../../types/Datasources';
 import { GroupedOption, SelectOption } from '../../types/items';
 import { ChartTypes, ShiftAmount } from '../../types/redux/graph';
@@ -453,9 +453,10 @@ export const selectChartLink = createAppSelector(
 		selectGraphState,
 		selectChartLinkHideOptions,
 		selectSliderRangeInterval,
+		selectIsKeepCurrent,
 		state => state.maps.selectedMap
 	],
-	(current, chartLinkHideOptions, rangeSliderInterval, selectedMap) => {
+	(current, chartLinkHideOptions, rangeSliderInterval, isKeepCurrent,selectedMap) => {
 		// Determine the beginning of the URL to add arguments to.
 		// This is the current URL.
 		const winLocHref = window.location.href;
@@ -514,6 +515,12 @@ export const selectChartLink = createAppSelector(
 		if (chartLinkHideOptions) {
 			linkText += '&optionsVisibility=false';
 		}
+		if (isKeepCurrent) {
+			const timeCreatedEnd = current.timeCreated.getEndTimestamp();
+			const sliderStart = current.rangeSliderInterval.getStartTimestamp();
+			const diffDays = timeCreatedEnd.diff(sliderStart, 'days', true);
+			linkText += `&timeSpan=${diffDays.toFixed(2)}`;
+		}
 		return linkText;
 	}
 );

src/client/app/redux/slices/appStateSlice.ts

@@ -25,6 +25,7 @@ export interface AppState {
 	selectedLanguage: LanguageTypes;
 	languageManuallySet: boolean;
 	refreshingReadings: boolean;
+	isKeepCurrent: boolean;
 }
 
 const defaultState: AppState = {
@@ -33,7 +34,8 @@ const defaultState: AppState = {
 	selectedLanguage: LanguageTypes.en,
 	chartLinkHideOptions: false,
 	languageManuallySet: false,
-	refreshingReadings: false
+	refreshingReadings: false,
+	isKeepCurrent: false
 };
 
 export const appStateSlice = createThunkSlice({
@@ -63,6 +65,9 @@ export const appStateSlice = createThunkSlice({
 		setRefresingReadings: create.reducer<boolean>((state, action) => {
 			state.refreshingReadings = action.payload;
 		}),
+		setIsKeepCurrent: create.reducer<boolean>((state, action) => {
+			state.isKeepCurrent = action.payload;
+		}),
 		initApp: create.asyncThunk(
 			// Thunk initiates many data fetching calls on startup before react begins to render
 			async (_: void, { dispatch }) => {
@@ -132,7 +137,9 @@ export const appStateSlice = createThunkSlice({
 		selectOptionsVisibility: state => state.optionsVisibility,
 		selectSelectedLanguage: state => state.selectedLanguage,
 		selectChartLinkHideOptions: state => state.chartLinkHideOptions,
-		selectRefreshingReadings: state => state.refreshingReadings
+		selectRefreshingReadings: state => state.refreshingReadings,
+		selectIsKeepCurrent: state => state.isKeepCurrent
+
 	}
 });
 
@@ -143,13 +150,15 @@ export const {
 	setOptionsVisibility,
 	updateSelectedLanguage,
 	setChartLinkOptionsVisibility,
-	setRefresingReadings
+	setRefresingReadings,
+	setIsKeepCurrent
 } = appStateSlice.actions;
 
 export const {
 	selectInitComplete,
 	selectOptionsVisibility,
 	selectSelectedLanguage,
 	selectChartLinkHideOptions,
-	selectRefreshingReadings
+	selectRefreshingReadings,
+	selectIsKeepCurrent
 } = appStateSlice.selectors;