Extended chart link to support from latest readings #1530

w-b-d · 2025-08-25T04:48:00Z

Description

Extend chart link to support from latest readings. Users can now select "keep current" and the current timespan within the slider range will be saved as a parameter in the URL. If the right is bounded, the "keep current" checkbox is greyed out, as well as if the whole graph is unbounded the checkbox is greyed out. When a user changes the slider range, the graph must be refreshed for the "keep current" functionality to work for the updated slider range.

Partly Addresses #[457]

Added "Chart Link Options:" section title.
Moved "Hide Options When Using This Link" checkbox outside of the button (UI only, logic unchanged).
Added "Keep Chart Current" checkbox with full logic implementation.
Implemented tooltip content for “Keep Chart Current” checkbox.
All hard coded strings moved into data.ts file for consistency and to support multiple languages.
Updated UI so that the "Keep Chart Current" checkbox remains visible but is disabled and greyed out when requirements are not met.
Preserved original behavior for the hide options feature.
Added isKeepCurrent variable in appStateSlice.ts
Added "&timeSpan=" to URL in uiSelectors.ts if keep current checkbox is checked
added timeCreated in graphSlice.ts and is updated within PlotNavComponent.tsx
added case for timeSpan within the processGraphLink function in graphSlice.ts to handle the logic of the "keep current" functionality.

Documentation for the Chart LInk should be updated so users will be able to understand the functionality of the new "keep current" checkbox.

Type of change

Note merging this changes the database configuration.
This change requires a documentation update

Checklist

I have followed the OED pull request ideas
I have removed text in ( ) from the issue request
You acknowledge that every person contributing to this work has signed the [OED Contributing License Agreement]

Limitations

Tests have not been created using Mocha/Chai, which is why this is labeled as a partial address.

Contributors: @w-b-d, @anntreasajojo, @rianhassett, @nickhitos

- Added "Chart Link Options:" section title - Moved "Hide Options When Using This Link" checkbox outside of button (UI only, logic unchanged) - Added "Keep Chart Current" checkbox (UI only, logic not implemented yet) - Added tooltips for both checkboxes (tooltip content for "Keep Chart Current" still pending) - Preserved original behavior for hide options feature

… both sides

… should appear

…box and timespan parameter

Updated UI + Checkbox Visibility

…met, aswell as the checkbox being disabled under the same conditions.

Ann rian UI

Addding backend functionality

Connected back-end to front-end

huss

Thanks to @w-b-d, @anntreasajojo, @rianhassett & @nickhitos for this contribution, esp. since I think it is your first one to OED. Overall, it works well. I have made a few comments within files to consider. Here are some global ones:

The box indicating everyone signed the CLA is checked but the OED records do not show that @rianhassett & @nickhitos have signed. Could they please sign or let me know if you think our records are off.

I tried using a chart link from a graphic that had the slider range set so the left side differed from the data range of the graphic. If I don't use the new option then it reproduces the slider range. If I use the new option then it does not. I also tried to test the new option by doing: const now = moment('2025-08-28 10:35:00'); in timeSpan in src/client/app/redux/slices/graphSlice.ts. This shifted the current time forward to convince the code the chart link was used in the future. It seems to do that and changes leftBound but it does not change what the graphic shows. I have not investigated the cause. I looked at the design document and it talks about two values that needed to be fixed (in the general case): 1) the data fetched from the server (server range); 2) the points displayed on the graphic (slider range). The code in src/client/app/redux/slices/graphSlice.ts only seems to adjust current.rangeSliderInterval and I think it might relate to that. I appreciate this is subtle so please ask questions or seek my help (I can do video calls) as needed.

huss · 2025-08-25T12:27:44Z

.vscode/launch.json

 {
 	"version": "0.2.0",
 	"configurations": [
+


This file only has new blank lines so please revert changes so none in file.

huss · 2025-08-25T12:28:28Z

as

@@ -0,0 +1,7 @@
+  [31morigin/HEAD[m -> origin/development


I'm unsure what this file is for. Should it be removed?

huss · 2025-08-25T12:28:41Z

d

@@ -0,0 +1,7 @@
+  [31morigin/HEAD[m -> origin/development


I'm unsure what this file is for. Should it be removed?

huss · 2025-08-25T12:30:39Z

.gitignore

 # Visual Studio Code settings file
 .vscode/settings.json
-
+.vscode/launch.json


This file is used by OED to define the debugging setup, etc. I'm not sure it should be in .gitignore.

huss · 2025-08-25T12:35:17Z

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

+		},updateTimeCreated: state => {
+			state.current.timeCreated = new TimeInterval(moment(), moment());
 		},
+


Please remove blank line.

huss · 2025-08-25T14:15:39Z

src/client/app/components/ChartLinkComponent.tsx

 	const handleButtonClick = () => {
 		// First attempt to write directly to user's clipboard.
-		navigator.clipboard.writeText(linkText)
+		navigator.clipboard


I preferred the old formatting without the extra lines to shorten the code.

huss · 2025-08-25T14:16:54Z

src/client/app/components/ChartLinkComponent.tsx

 	if (selectedMeters.length > 0 || selectedGroups.length > 0) {
 		return (
 			<div>
+				{/* inputting new "keep chart current" feature */}


I think this comment should just say what the code does or be removed if you think it is not necessary.

huss · 2025-08-25T14:25:57Z

src/client/app/components/PlotNavComponent.tsx

 	selectSelectedGroups, selectSelectedMeters,
 	selectSliderRangeInterval, selectInitialXAxisRange,
-	selectQueryTimeInterval, updateTimeIntervalAndSliderRange
+	selectQueryTimeInterval, updateTimeIntervalAndSliderRange,updateTimeCreated


space after comma.

huss · 2025-08-25T14:57:00Z

src/client/app/components/ChartLinkComponent.tsx

 							</div>
 						</Button>
-						<Button outline onClick={() => setLinkTextVisible(visible => !visible)}>
+						<Button


Can the original formatting please be put back since shorter and will remove these lines as having changes.

huss · 2025-08-25T15:29:13Z

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

 								break;
+							case 'timeSpan':{
+								const days = parseFloat(value);
+								const now = moment();


This is a subtle point but this uses moment to get the current time (as was done in the link creation). This will use the time zone of the current system to get the time. If it differs from the time zone where the link was created then it will differ by the shift amount between the time zones. This means that if a user creates a chart link and quickly sends it to someone else in a different time zone that uses it quickly, the graph will be slightly different. I think this is a small concern but here is a proposal to fix it up:

OED tries to avoid this issue with readings by storing them all in UTC. The time help page discusses this. I propose that the time used in all the calculations be UTC for the current time. Thus, the time at a given point is the same everywhere in the world in UTC and moment() will give this value. It also means that the time sent to the server for readings will relate to the time zone used for readings.

I'm also happy to help make this happen by either working with you or doing it as an addition to this work. Having done a fair amount with time zones in moment I can say it can be a little tricky to use the right code (and why there are so many comment about it in the code). I welcome your thoughts on doing this and how it will get done.

rianhassett · 2025-08-25T21:05:40Z

Thanks to @w-b-d, @anntreasajojo, @rianhassett & @nickhitos for this contribution, esp. since I think it is your first one to OED. Overall, it works well. I have made a few comments within files to consider. Here are some global ones:

The box indicating everyone signed the CLA is checked but the OED records do not show that @rianhassett & @nickhitos have signed. Could they please sign or let me know if you think our records are off.

I tried using a chart link from a graphic that had the slider range set so the left side differed from the data range of the graphic. If I don't use the new option then it reproduces the slider range. If I use the new option then it does not. I also tried to test the new option by doing: const now = moment('2025-08-28 10:35:00'); in timeSpan in src/client/app/redux/slices/graphSlice.ts. This shifted the current time forward to convince the code the chart link was used in the future. It seems to do that and changes leftBound but it does not change what the graphic shows. I have not investigated the cause. I looked at the design document and it talks about two values that needed to be fixed (in the general case): 1) the data fetched from the server (server range); 2) the points displayed on the graphic (slider range). The code in src/client/app/redux/slices/graphSlice.ts only seems to adjust current.rangeSliderInterval and I think it might relate to that. I appreciate this is subtle so please ask questions or seek my help (I can do video calls) as needed.

Hey @huss! Thanks for the feedback, currently our classes just started but I do want to continue with this, I will try fixing these issues when I can.

huss · 2025-08-25T22:06:46Z

Hey @huss! Thanks for the feedback, currently our classes just started but I do want to continue with this, I will try fixing these iss

@rianhassett Thanks for letting me know. This work is not on a tight clock so as long as it moves forward at a reasonable pace that is fine. I understand that you have classes. Anyone else on the team is welcome to continue. Also, I have your (and all the CLAs) now.

huss · 2025-11-19T20:01:26Z

Hey @huss! Thanks for the feedback, currently our classes just started but I do want to continue with this, I will try fixing these iss

@rianhassett Thanks for letting me know. This work is not on a tight clock so as long as it moves forward at a reasonable pace that is fine. I understand that you have classes. Anyone else on the team is welcome to continue. Also, I have your (and all the CLAs) now.

@w-b-d, @anntreasajojo, @rianhassett & @nickhitos I was looking at all the open PRs and wanted to touch base to verify you still want to work on this. Thanks for any information.

w-b-d and others added 21 commits July 18, 2025 12:32

Added Keep Current checkbox only when right side is unbounded

2ef5c6e

Made temporary hardcoded changes in ChartLinkComponent.

7ff4d7c

Disabled Keep Current when the right side is bounded

79f02c5

Updated appStateSlice and graphSlice and added parameter in url

a8b2782

Upated keep current checkbox to not appear when graph is unbounded on…

de1a067

… both sides

Pulled in changes from Will's branch about when Keep Current checkbox…

7e3d0e6

… should appear

Added functionality to shift slider range based on keep current check…

09005f6

…box and timespan parameter

Merge pull request #1 from nickhitos/ann_will_branch

6ac0799

Updated UI + Checkbox Visibility

Added keep chart current checkbox to be grey when conditions are not …

89b9884

…met, aswell as the checkbox being disabled under the same conditions.

The link in the tool-tip for keep chart current is now functioning.

01fb5e1

updated variable names

d985ffe

cleaned up files

94a1e64

Merge pull request #2 from nickhitos/ann-rian-ui

f68f589

Ann rian UI

Merge branch 'development' into w/dev

e4864eb

Merge branch 'OpenEnergyDashboard:development' into development

135b53f

Merge branch 'test-backend-with-ui' into w/dev

8ffc441

Merge pull request #4 from nickhitos/w/dev

84bb65b

Addding backend functionality

connected backend to frontend

4c2c367

Merge pull request #5 from nickhitos/test-backend-with-ui

d4e5b61

Connected back-end to front-end

Fixed eslint errors

e79ee5b

huss requested changes Aug 25, 2025

View reviewed changes

Extended chart link to support from latest readings #1530

Are you sure you want to change the base?

Extended chart link to support from latest readings #1530

Uh oh!

Conversation

w-b-d commented Aug 25, 2025

Description

Type of change

Checklist

Limitations

Uh oh!

huss left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rianhassett commented Aug 25, 2025

Uh oh!

huss commented Aug 25, 2025

Uh oh!

huss commented Nov 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants