verify-graph - SKILL.md Agent Skill

name: verify-graph description: Playwright MCP verification of the graph page — modes, controls, topic selection, and data rendering. Use after any change to graph-page components, graph rendering, data flow, or mode switching logic. user-invocable: true

Prerequisites

Local app running. Check for an Angular instance on ports 4200-4210 AND the backend on :8000. If either is missing, run /run-local first — it brings up the right compose profile (client-dev for frontend-only changes, scylla-dev + cargo run when scylla-server changed).
Historical runs must exist with data — graph views need real backend data to render anything meaningful.

Detect the port: !lsof -i :4200-4210 -sTCP:LISTEN 2>/dev/null | grep LISTEN | head -1

Set BASE_URL = http://localhost:<detected-port>.

Playwright MCP Workflow

Use these tools in this pattern for each test:

browser_navigate -> browser_snapshot (assert DOM state) -> browser_click / browser_run_code (interact) -> browser_take_screenshot (visual proof)

Create the screenshots directory first: !mkdir -p pictures/<branch>/verify-graph

PrimeNG Dialog Workaround

The "Select this Run" button in the run carousel is blocked by a PrimeNG overlay. Always use browser_run_code for this:

async (page) => {
  await page.waitForTimeout(1500);
  await page.evaluate(() => {
    const btn = Array.from(document.querySelectorAll('button'))
      .find(b => b.textContent?.includes('Select this Run'));
    if (btn) btn.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
  });
  await page.waitForTimeout(2000);
}

Topic Selection Helper

To select a leaf topic (tree click navigates to page instead), use browser_run_code:

async (page) => {
  // Click a specific leaf topic by name
  await page.evaluate((topicName) => {
    const p = Array.from(document.querySelectorAll('p'))
      .find(el => el.textContent?.trim() === topicName);
    if (p) p.click();
  }, 'Voltage');
  await page.waitForTimeout(3000);
}

Test Checklist

Run all 7 groups sequentially. Stop and fix if any group fails.

1. Real-time baseline

browser_navigate to {BASE_URL}/graph
browser_snapshot: assert the following
- Text "Real Time" present in right header
- Buttons visible: "Pause", "Time Range", "Select Run", "Clear Graph"
- Text "X (sec):" with spinbutton present
- "Y Min:" and "Y Max:" spinbuttons present
- Combobox "Select Range" present
- Button "Realtime" is NOT present (only shown in historical mode)
browser_take_screenshot -> pictures/<branch>/verify-graph/01-rt-baseline.png

2. Topic selection + data

browser_snapshot to find the BMS tree expand button (look for treeitem "BMS" > button ref)
browser_click the BMS expand button by ref
browser_snapshot to find Pack expand button
browser_click the Pack expand button by ref
browser_run_code with the Topic Selection Helper to click "Voltage"
Wait 3s for data to load
browser_snapshot: assert URL contains ?topics=BMS/Pack/Voltage
browser_take_screenshot -> pictures/<branch>/verify-graph/02-topic-selected.png
Verify: chart shows a data series (line visible in screenshot)

3. Real-time controls

Pause/Play:

browser_click button "Pause"
browser_snapshot: assert button now shows "Play"
browser_click button "Play"
browser_snapshot: assert button shows "Pause" again

Time Range / Point Range:

browser_click button "Time Range"
browser_snapshot: assert button shows "Point Range", label shows "X (points):"
browser_click button "Point Range"
browser_snapshot: assert reverted to "Time Range" + "X (sec):"

Sidebar toggle:

browser_click button "Tog Sidebar"
browser_take_screenshot -> pictures/<branch>/verify-graph/03-sidebar-hidden.png (sidebar should be gone)
browser_click button "Tog Sidebar"
browser_take_screenshot -> pictures/<branch>/verify-graph/03-sidebar-visible.png (sidebar back)

4. Historical Run mode

browser_click button "Select Run"
browser_run_code with the PrimeNG Dialog Workaround to click "Select this Run"
browser_snapshot: assert the following
- Text matching "Run #" in right header (not "Real Time")
- Button "Realtime" IS present
- Button "Pause" is NOT present
- Button "Time Range" / text "X (sec):" is NOT present
- "Y Min:" and "Y Max:" still present
Topic should still be selected from step 2 — wait 3s for historical data
browser_take_screenshot -> pictures/<branch>/verify-graph/04-hist-run.png
Verify: x-axis on chart spans MORE than 30 seconds (check axis labels in screenshot)

5. Historical Time Range mode

browser_click button "Realtime" (return to RT first)
browser_snapshot: confirm "Real Time" header
browser_snapshot to find the Select Range dropdown ref
browser_click the Select Range combobox/container by ref
browser_snapshot: assert listbox has all 7 options: "1 minute", "2 minutes", "5 minutes", "10 minutes", "15 minutes", "30 minutes", "1 hour"
browser_click option "5 minutes" by ref
browser_snapshot: assert the following
- Text "Hist Range" in right header
- Button "Realtime" IS present
- Button "Pause" is NOT present
- Combobox shows "5 minutes" selected
Wait 3s for data
browser_take_screenshot -> pictures/<branch>/verify-graph/05-hist-range-5min.png
Verify: x-axis spans approximately 5 minutes (NOT 30 seconds)

6. Mode switching cycle

Run through all transitions, snapshot after each:

browser_click "Realtime" -> browser_snapshot: header = "Real Time", RT controls back
browser_click "Select Run" -> PrimeNG workaround -> browser_snapshot: header = "Run #N"
browser_click "Realtime" -> browser_snapshot: header = "Real Time"
Open dropdown, click "1 minute" -> browser_snapshot: header = "Hist Range"
browser_click "Realtime" -> browser_snapshot: header = "Real Time"

browser_take_screenshot -> pictures/<branch>/verify-graph/06-mode-cycle-final.png
Verify: no console errors from mode switching (check browser_console_messages if needed)

7. Regression: RT range constraint

Should be in RT mode from step 6. If topic is cleared, re-select one.
Wait 10 seconds for real-time data to accumulate
browser_take_screenshot -> pictures/<branch>/verify-graph/07-rt-range-check.png
Verify: x-axis shows approximately 30 seconds of data (the default range), NOT the full session duration
This confirms the historical auto-fit behavior does NOT leak into real-time mode

Output

Report as a markdown checklist with screenshot links:

## Graph Verification Results — <branch>

- [x] RT baseline — controls correct
- [x] Topic selection — data loads, URL syncs
- [x] RT controls — pause, range toggle, sidebar work
- [x] Historical Run — mode switches, x-axis auto-fits
- [x] Historical Range — dropdown works, x-axis auto-fits
- [x] Mode switching — all transitions clean
- [x] Regression — RT range constraint preserved

Screenshots: `pictures/<branch>/verify-graph/`

Mark any failed group with [ ] and describe the failure.