Add information-layer filtering to NAD by flomillot · Pull Request #4054 · gridsuite/gridstudy-app

flomillot · 2026-06-23T11:00:03Z

Summary

Adds an Information section to the NAD navigation sidebar (after History and Voltage), letting users toggle the visibility of individual information layers to tailor the diagram to their use.

Each toggle hides the matching elements through CSS classes on the rendered SVG, reusing the voltage-filter masking mechanism — no refetch of the diagram.

Notes

Selectors are derived from the network-viewer rendering: values are <text> elements (text.nad-active, text.nad-reactive, text.nad-permanent-limit-percentage), arrows are <path> elements carrying both the direction and type classes (.nad-active.nad-arrow-in/out, .nad-reactive.nad-arrow-in/out), voltage-level names are .nad-text-nodes. This mirrors the convention already used in the theme CSS vars.
Toggle state is transient (per panel, reset on reload), consistent with the existing voltage filter.

Needs : powsybl/powsybl-network-viewer#392 to make the text.nad-reactive selector works

Add an "Information" section to the NAD navigation sidebar letting users toggle the visibility of P/Q values, % IST, P/Q arrows and voltage-level names. Each toggle hides the matching elements through CSS classes on the rendered SVG, reusing the voltage-filter masking mechanism without refetching the diagram. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Signed-off-by: Florent MILLOT <florent.millot_externe@rte-france.com>

coderabbitai · 2026-06-23T11:00:12Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e4e0b1ea-e55a-48ff-be86-2b498880d597

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Signed-off-by: Florent MILLOT <florent.millot_externe@rte-france.com>

Meklo

"nad-arrow-in nad-permanent-limit-percentage", "nad-arrow-out nad-permanent-limit-percentage" are still visible after filtering everything out, I feel it ought to be included, maybe in the IST category ?

Meklo · 2026-06-29T14:06:01Z

+// (nad-arrow-in/out) and the edge-info type class (nad-active/nad-reactive).
+const INFO_SELECTORS: Record<NadSelectedInfoKey, string[]> = {
+    activePowerValue: ['text.nad-active'],
+    reactivePowerValue: ['text.nad-reactive'],


"nad-reactive" seems to still be visible after filtering it out

plain ".nad-reactive" instead of "text.nad-reactive" seems to do the trick

I don't really understand because we want to hide the text only. Can you show me a picture of the problem ?

Also where I got those selectors

gridstudy-app/src/styles/light-theme-css-vars.ts

Line 34 in ff1c2ac

'text.nad-reactive': {

needs powsybl/powsybl-network-viewer#392 that's why

Meklo

~~"nad-arrow-in nad-permanent-limit-percentage", "nad-arrow-out nad-permanent-limit-percentage" are still visible after filtering everything out, maybe it ought to be included in the IST category~~ duplicate comment

…o nad-information-filtering # Conflicts: # src/components/workspace/diagrams/nad/nad-navigation-sidebar.tsx # src/components/workspace/panel-contents/diagrams/nad/nad-panel-content.tsx

Active-power arrows carry only the direction class (nad-arrow-in/out) while reactive arrows also carry nad-reactive, so the previous `.nad-active.nad-arrow-*` selectors matched no active arrow. Target active arrows by direction, excluding reactive ones, consistent with the theme css-vars files. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Signed-off-by: Florent MILLOT <florent.millot_externe@rte-france.com>

sBouzols · 2026-07-09T15:31:02Z

            },
+            {
+                id: 'informations',
+                icon: <InfoIcon fontSize="medium" />,


Ah yes indeed

sBouzols · 2026-07-09T15:31:09Z

+                id: 'informations',
+                icon: <InfoIcon fontSize="medium" />,
+                titleId: 'nadInfoFilter',
+                isDisabled: !isBuilt,


Yes forgit it also, done

…ring

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Signed-off-by: Florent MILLOT <florent.millot_externe@rte-france.com>

Signed-off-by: Florent MILLOT <florent.millot_externe@rte-france.com>

sBouzols

Code Review OK
Tests OK (locally with network-viewer v3.6.0 and commons-ui with gridsuite/commons-ui#1203
Console warning check OK

Add a small gap between the info switches and their labels

a7094d8

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Signed-off-by: Florent MILLOT <florent.millot_externe@rte-france.com>

Meklo reviewed Jun 29, 2026

View reviewed changes

flomillot and others added 2 commits July 3, 2026 15:26

Merge remote-tracking branch 'origin/nad-voltage-level-filtering' int…

796c410

…o nad-information-filtering # Conflicts: # src/components/workspace/diagrams/nad/nad-navigation-sidebar.tsx # src/components/workspace/panel-contents/diagrams/nad/nad-panel-content.tsx

Meklo approved these changes Jul 6, 2026

View reviewed changes

sBouzols reviewed Jul 9, 2026

View reviewed changes

flomillot and others added 2 commits July 9, 2026 18:19

Merge branch 'nad-voltage-level-filtering' into nad-information-filte…

46469c4

…ring

Rename isDisabled prop to disabled for MUI consistency

1aa7c36

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Signed-off-by: Florent MILLOT <florent.millot_externe@rte-france.com>

flomillot requested a review from sBouzols July 9, 2026 17:25

Use small font size for 'Info' icon in NAD navigation sidebar

e79a311

Signed-off-by: Florent MILLOT <florent.millot_externe@rte-france.com>

sBouzols approved these changes Jul 10, 2026

View reviewed changes

Uh oh!

Conversation

flomillot commented Jun 23, 2026 • edited by sBouzols Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Notes

Uh oh!

coderabbitai Bot commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

Meklo 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!

Meklo left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

sBouzols left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

flomillot commented Jun 23, 2026 •

edited by sBouzols

Loading

coderabbitai Bot commented Jun 23, 2026 •

edited

Loading

Meklo left a comment •

edited

Loading