Add clickable asset names to action cards - #16
Merged
Merged
Conversation
Each action card now displays the grid assets it acts upon (lines, generators, loads) as small clickable pill badges extracted from action_topology. Clicking a badge: - Fills the Inspect Line/Bus/VL field with the asset name - Selects the action (loading its network variant diagram) if not already selected and switches to the Action tab - Triggers the existing zoom-to-element mechanism to center the visualization on that asset Badges are color-coded by asset type: blue for lines, yellow for generators, purple for loads. Click propagation is stopped so the badge click doesn't toggle the card's action selection. https://claude.ai/code/session_015RCpQX3Ejn786NfkGmJxVG
Replaces the plain-text formatRho helper with renderRho, which renders each line name in the "Rho before / Rho after" rows as a clickable inline button. The maximally-loaded line shown after "Max rho: X% on" is likewise made clickable. Clicking any of these names triggers the same onAssetClick → inspectQuery zoom flow as the action-topology asset badges added previously. https://claude.ai/code/session_015RCpQX3Ejn786NfkGmJxVG
Mirrors the React app changes to the standalone interface: - Overloaded line names in Rho before/after rows are now clickable inline buttons (dotted-underline, blue) that zoom to the line - The maximally-loaded line shown after "Max rho: X% on" is likewise clickable - Action-topology assets (lines, generators, loads) are shown as colored pill badges below the rho block and also trigger zoom - All clicks fill the Inspect Line/Bus/VL field and select the action's network variant tab (via handleAssetClick → setInspectQuery + handleActionSelect / setActiveTab) https://claude.ai/code/session_015RCpQX3Ejn786NfkGmJxVG
Two refinements to clickable asset names in action cards:
1. Rho before/after tab routing
- 'Rho before' line names now switch to the N-1 (post-contingency)
tab on click, since those values represent the pre-action network
- 'Rho after' and 'Max rho on ...' still route to the action tab
2. Smart asset badge detection (mirrors applyActionTargetHighlights)
- For node actions (bus splitting, node merging, open coupling):
getActionTargetVoltageLevel extracts the VL name from
description_unitaire and shows a single green VL badge
- For line actions: getActionTargetLines returns the acted-upon
line(s) and blue line badges are shown as before
- Gen/load badges removed; covered by VL badge for node actions
- nMetaIndex maps passed to ActionFeed for proper VL/edge validation
Applied identically to both the React app and standalone_interface.html.
https://claude.ai/code/session_015RCpQX3Ejn786NfkGmJxVG
…ned) The VL/line target badge is now displayed on the right side of the description row instead of below the rho stats block. The description and badge share a flex row (description takes remaining space, badge is flex-shrink:0 on the right), making every card's layout consistent regardless of action type. https://claude.ai/code/session_015RCpQX3Ejn786NfkGmJxVG
Two bugs fixed in getActionTargetVoltageLevel (both svgUtils.ts and standalone_interface.html): 1. Line-action highlight regression The action-ID suffix fallback could match a VL name embedded in a line-action ID (e.g. reco_LINEXY_CHATNO → 'CHATNO'). When that happened, applyActionTargetHighlights highlighted the VL node and returned early, skipping the yellow halo on line edges entirely. Fix: return null immediately when topology indicates a pure line action (has line entries, no gen/load entries). 2. GEN.PY762 zoom failure / missing badge For generator reconnection actions the topology only has gen entries, so neither VL nor line detection found anything. The badge was missing and clicking would full-unzoom. Fix: after description parsing, derive the VL name from gen/load equipment names by stripping the prefix before the first '.' (e.g. GEN.PY762 → PY762) and checking metadata. Also iterate ALL quoted strings in description_unitaire (reverse order) instead of only the last one, to catch VL names that appear before the equipment name. https://claude.ai/code/session_015RCpQX3Ejn786NfkGmJxVG
- Remove overly aggressive pure-line guard in getActionTargetVoltageLevel that was suppressing VL detection for node actions (e.g. COUCHP6) - Make action ID suffix conditional: skip only for line reconnection actions (lines with bus >= 0, no gen/load) to avoid false VL matches - Broaden poste regex to match "du poste", "au poste" patterns - Add prefix-strip fallback in zoomToElement (GEN.PY762 -> PY762) - Add gen/load equipment names as amber badge fallback in action cards - Apply all fixes to both React app and standalone_interface.html https://claude.ai/code/session_015RCpQX3Ejn786NfkGmJxVG
- Add /api/action-variant-focused-diagram endpoint that accepts action_id + element_id (resolved to voltage_level_ids) and returns a focused NAD for the post-action network state - Add vlOverlay state in standalone_interface.html to manage the popup - Add handleVlDoubleClick handler that fetches the focused diagram async - VL (green) badge now supports double-click to open a floating overlay panel in the bottom-right corner of the network visualization - Overlay shows the voltage level's post-action NAD, scaled to fit width, with loading/error states and a manual close button - Single-click on VL badge continues to zoom/inspect as before https://claude.ai/code/session_015RCpQX3Ejn786NfkGmJxVG
- Add get_action_variant_sld() to recommender_service: switches to the action variant network and calls network.get_single_line_diagram(vl_id) - Add POST /api/action-variant-sld endpoint (action_id + voltage_level_id) - Update handleVlDoubleClick in standalone to call the SLD endpoint https://claude.ai/code/session_015RCpQX3Ejn786NfkGmJxVG
- Anchor overlay at top-right (top: 16px, right: 80px) so CSS resize grows naturally downward and leftward - Add resize: both with explicit initial size (440x420px) and min constraints (220x150px) - Body uses flex: 1 + minHeight: 0 to fill the resized container height https://claude.ai/code/session_015RCpQX3Ejn786NfkGmJxVG
- Replace CSS resize:both with a custom bottom-left drag handle (sw-resize cursor with diagonal SVG indicator) - Dragging bottom-left: leftward widens, downward tallens the window (direct DOM style mutation for smooth 60fps resize without re-renders) - Add wheel zoom centered on cursor position (non-passive listener) with scale clamped to [0.1, 10] - Add mouse-drag pan inside the overlay body (grab cursor) - SVG content uses transform: translate+scale with origin 0,0 - Transform resets to identity each time a new SLD is opened https://claude.ai/code/session_015RCpQX3Ejn786NfkGmJxVG
…ight) - Position overlay at top: 16px, left: 16px so CSS resize:both handle sits at bottom-right and grows naturally downward/rightward - Remove custom bottom-left drag-handle and vlOverlayRef (no longer needed) - Retain wheel-zoom and mouse-pan inside the SLD canvas https://claude.ai/code/session_015RCpQX3Ejn786NfkGmJxVG
marota
pushed a commit
that referenced
this pull request
Apr 30, 2026
Rewrites Phase 1 from the abstract CHANGELOG summary into a six-week chronology grounded in PR descriptions: - 1.1 Bootstrap (pre-#1) — scaffolding pushed direct to main - 1.2 End-to-end loop (PRs #1–#15) — NAD scaling, multi-tab pan/zoom, manual actions, action variants, action scoring, svgUtils + usePanZoom - 1.3 UX maturation (PRs #16–#24) — settings panel, OverloadPanel, monitoring factor, action filters, state-switching SLDs - 1.4 Robustness + CI (PRs #25–#46) — backend/frontend test suites, CircleCI + GitHub Actions, lazy loading, divergence UI - 1.5 Persistence + complex actions (PRs #47–#56) — save/reload sessions, combined actions w/ persistence, islanding MW, App.tsx Phase 1 hooks - 1.6 Two-step + replay logging + rebrand (PRs #57–#65) — split analysis, config.json persistence, load shedding, MW Start, SLD highlights, InteractionLogger, ExpertAssist → Co-Study4Grid Sections 2–4 left untouched (will be reconciled in a follow-up). https://claude.ai/code/session_01Pg7fuCUG2edfm5PyHS6SbN
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
https://claude.ai/code/session_015RCpQX3Ejn786NfkGmJxVG