Add NAD middle edge infos and adjust css

[souissimai]

PR Summary

Add PermanentLimitPercentage and ActivePower at middle edge infos
Adjust some CSS for level of details by zoom level and colors

[coderabbitai]

📝 Walkthrough

Walkthrough

Updates NetworkAreaDiagram styling and rendering configuration: adds intermediate NAD zoom thresholds, shifts adaptive text zoom threshold, expands invalid-state selectors to include NAD elements (and removes a dedicated .nad-active fill override), adjusts edge-info visibility and typography by zoom level, adds theme-specific SVG overrides, and raises invalid-computation opacity to 0.5.

Changes

Cohort / File(s)	Summary
Diagram Rendering Configuration src/components/grid-layout/cards/diagrams/diagram-utils.ts, src/components/grid-layout/cards/diagrams/networkAreaDiagram/network-area-diagram-content.tsx	NAD_ZOOM_LEVELS extended from [0, 2000, 3500, 6000, 9000, 12000, 15000] to include 500, 1000, 5000 ([0,500,1000,2000,3500,5000,6000,9000,12000,15000]). adaptiveTextZoomThreshold changed from 3500 → 6000.
Diagram Styling (invalid state) src/components/grid-layout/cards/diagrams/diagram-styles.ts	Expanded the invalid-opacity selector to include NetworkAreaDiagram targets (.nad-reactive, text.nad-permanent-limit-percentage, path.nad-permanent-limit-percentage, and .nad-active) alongside .sld-*; removed the dedicated .nad-active { fill: '#787F81' } rule so .nad-active now relies on the shared opacity rule.
Global NAD CSS / edge-info layout src/nad-index.css	Changed .nad-reactive fill to blue; removed previous global .nad-edge-infos text block; introduced default hiding of .nad-edge-infos .nad-active, .nad-reactive, .nad-permanent-limit-percentage and re-enabled visibility selectively per .nad-zoom-* levels; added new .nad-edge-infos text font/stroke rules and zoom-level overrides for font-size/stroke-width and path stroke widths.
Theme SVG overrides (dark) src/styles/dark-theme-css-vars.ts	Added dark-theme selector entries forcing fill: white for .nad-arrow-out/.nad-arrow-in, reactive/text overrides (#77b5fe), and grouped fill: white rules for .nad-active, .nad-permanent-limit-percentage, .nad-bus-descr; added .nad-edge-infos path-specific fill/stroke rules for reactive and limit classes.
Theme SVG overrides (light) src/styles/light-theme-css-vars.ts	Added light-theme selector entries setting fill: black for arrow classes, fill: blue for .nad-reactive (including text.nad-reactive and arrow-combined selectors), and fill: black for .nad-active, .nad-permanent-limit-percentage, .nad-bus-descr; added .nad-edge-infos path fill/stroke overrides matching reactive/limit classes.
Constants src/utils/colors.ts	Updated exported INVALID_COMPUTATION_OPACITY from 0.2 → 0.5.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Title check	✅ Passed	The title 'Add NAD middle edge infos and adjust css' is partially related to the changeset. It specifically mentions 'NAD edge infos' and CSS adjustments, which are core aspects of the changes in src/nad-index.css and related styling files. However, the title does not fully capture the scope—it omits important details about zoom level adjustments (NAD_ZOOM_LEVELS updates, adaptiveTextZoomThreshold changes) and opacity adjustments (INVALID_COMPUTATION_OPACITY), which are substantial parts of the changeset.
Description check	✅ Passed	The PR description is relevant to the changeset, mentioning PermanentLimitPercentage, ActivePower edge infos, CSS adjustments, and zoom level configurations, which aligns with the file modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/grid-layout/cards/diagrams/diagram-styles.ts`:
- Line 127: The selector list inside the divDiagramLoadflowInvalid styles is
missing the nesting operator for .nad-reactive causing it to leak globally;
update the selector string that currently contains ".nad-reactive" to include
the ampersand prefix "& .nad-reactive" so it becomes nested with the other
selectors (the same selector list that starts with "& .sld-active-power, &
.sld-reactive-power, ..."). Ensure the modified selector list uses "&
.nad-reactive" to scope opacity to this component only.

In `@src/styles/dark-theme-css-vars.ts`:
- Around line 34-36: The CSS selector key string '.nad-active,
.nad-permanent-limit-percentage, .nad-bus-descr,' in dark-theme-css-vars is
invalid due to a trailing comma; remove the trailing comma from that selector
list so it reads '.nad-active, .nad-permanent-limit-percentage, .nad-bus-descr'
to match the light theme and ensure the fill: 'white' rule is applied.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 306d1e39-1664-42cd-96c1-e73de28374d1

📥 Commits

Reviewing files that changed from the base of the PR and between a40f0f4 and a5331d9.

📒 Files selected for processing (7)

• src/components/grid-layout/cards/diagrams/diagram-styles.ts
• src/components/grid-layout/cards/diagrams/diagram-utils.ts
• src/components/grid-layout/cards/diagrams/networkAreaDiagram/network-area-diagram-content.tsx
• src/nad-index.css
• src/styles/dark-theme-css-vars.ts
• src/styles/light-theme-css-vars.ts
• src/utils/colors.ts

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud