mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-03-08 01:53:30 +01:00
83278b4370
- Add ExecutionOverlay React component with header, node badges, data popup, timeline scrubber - Add ExecutionNodeBadge: status badge positioned in canvas-space at each node - Add ExecutionDataPopup: floating popup showing input/output/error data for selected node - Add ExecutionTimeline: fixed scrubber bar with Prev/Next, range input, step dots - Add #execution-overlay-layer DOM layer to nodegrapheditor.html - Wire renderExecutionOverlay/updateExecutionOverlay into nodegrapheditor.ts - Wire ExecutionHistoryPanel pin button via EventDispatcher execution:pinToCanvas event - Add 20 unit tests for overlay utility functions - Update PROGRESS-dishant.md: CF11-006 and CF11-007 both complete
101 lines
4.4 KiB
Markdown
101 lines
4.4 KiB
Markdown
# Phase 11 — Cloud Functions: Dishant's Progress
|
||
|
||
**Branch:** `cline-dev-dishant`
|
||
**Last Updated:** 2026-02-18
|
||
|
||
---
|
||
|
||
## CF11-006 — Execution History Panel UI ✅ COMPLETE
|
||
|
||
**Status:** Done
|
||
**Completed:** 2026-02-18
|
||
|
||
### What was built
|
||
|
||
- `ExecutionHistoryPanel.tsx` — main panel component (registered in sidebar at order 8.8)
|
||
- `ExecutionHistoryPanel.module.scss` — panel styles using design tokens
|
||
- `hooks/useExecutionHistory.ts` — fetches paginated execution list with filters
|
||
- `hooks/useExecutionDetail.ts` — fetches single execution with full step data
|
||
- `components/ExecutionList/` — `ExecutionList.tsx`, `ExecutionItem.tsx`, SCSS
|
||
- `components/ExecutionFilters/` — `ExecutionFilters.tsx`, SCSS (status + date range)
|
||
- `components/ExecutionDetail/` — `ExecutionDetail.tsx`, `NodeStepList.tsx`, `NodeStepItem.tsx`, SCSS
|
||
- `tests/cloud/ExecutionHistoryPanel.test.ts` — 15 unit tests (formatDuration, formatRelativeTime, buildExecutionQuery)
|
||
|
||
### Key decisions
|
||
|
||
- `useExecutionDetail` is always called (even when no execution selected) to avoid React hook ordering violations — returns null when no ID provided
|
||
- All colours via CSS variables (`var(--theme-color-*)`) — no hardcoded values
|
||
- Panel registered via `router.setup.ts` at order 8.8
|
||
|
||
---
|
||
|
||
## CF11-007 — Canvas Execution Overlay ✅ COMPLETE
|
||
|
||
**Status:** Done
|
||
**Completed:** 2026-02-18
|
||
|
||
### What was built
|
||
|
||
**React components** (`src/editor/src/views/CanvasOverlays/ExecutionOverlay/`):
|
||
|
||
| File | Purpose |
|
||
|------|---------|
|
||
| `ExecutionOverlay.tsx` | Main overlay — header, transform container, badge list, popup, timeline |
|
||
| `ExecutionNodeBadge.tsx` | Status badge rendered at each node's canvas-space position |
|
||
| `ExecutionDataPopup.tsx` | Floating popup showing input/output/error data for selected node |
|
||
| `ExecutionTimeline.tsx` | Fixed scrubber bar — Prev/Next buttons, range input, step dots |
|
||
| `index.ts` | Barrel exports |
|
||
| `*.module.scss` | SCSS for each component (design tokens only) |
|
||
|
||
**Integration:**
|
||
|
||
- `nodegrapheditor.html` — added `#execution-overlay-layer` div
|
||
- `nodegrapheditor.ts` — added `executionOverlayRoot` field, `renderExecutionOverlay()`, `updateExecutionOverlay()`, wired into `render()` and `setPanAndScale()`
|
||
- `ExecutionHistoryPanel.tsx` — added `handlePinToCanvas` callback that emits `execution:pinToCanvas` via `EventDispatcher.instance`
|
||
|
||
**Tests** (`tests/cloud/ExecutionOverlay.test.ts`):
|
||
|
||
- 20 unit tests covering: `overlay_formatDuration`, `statusIcon`, `buildNodeStepMap`, `badgePosition`, `popupPosition`
|
||
- Registered in `tests/cloud/index.ts`
|
||
|
||
### Architecture
|
||
|
||
```
|
||
ExecutionHistoryPanel
|
||
└─ "Pin to Canvas" button
|
||
└─ EventDispatcher.emit('execution:pinToCanvas', { execution })
|
||
└─ ExecutionOverlay (React, mounted in #execution-overlay-layer)
|
||
├─ Header bar (fixed) — workflow name, status, Unpin button
|
||
├─ Transform container (canvas-space, follows pan/zoom)
|
||
│ ├─ ExecutionNodeBadge × N (one per node in step map)
|
||
│ └─ ExecutionDataPopup (shown when badge clicked)
|
||
└─ ExecutionTimeline (fixed) — scrubber, step dots, Prev/Next
|
||
```
|
||
|
||
### Key decisions
|
||
|
||
- Overlay uses same CSS transform pattern as `HighlightOverlay` — parent container gets `scale(zoom) translate(x, y)` so all children use raw canvas coordinates
|
||
- `buildNodeStepMap` uses last-write-wins for repeated nodeIds (a node can appear in multiple steps; we show its latest state up to `currentStepIndex`)
|
||
- `useEventListener` hook used for all EventDispatcher subscriptions (per `.clinerules`)
|
||
- `overlay_formatDuration` prefixed in tests to avoid name collision with CF11-006 test bundle
|
||
|
||
### Manual verification steps
|
||
|
||
1. `npm run dev` → open editor
|
||
2. Open Execution History panel (sidebar)
|
||
3. Click an execution to open detail view
|
||
4. Click "Pin to Canvas" button
|
||
5. Verify: header bar appears at top of canvas with workflow name + status
|
||
6. Verify: node badges appear at each node's position (colour-coded by status)
|
||
7. Verify: clicking a badge opens the data popup with input/output/error data
|
||
8. Verify: timeline scrubber at bottom — Prev/Next navigate through steps
|
||
9. Verify: badges update as you scrub through steps
|
||
10. Verify: "Unpin" button dismisses the overlay
|
||
11. Verify: pan/zoom updates badge positions correctly
|
||
|
||
---
|
||
|
||
## Next Up
|
||
|
||
Per sprint doc: **STRUCT-001 — JSON Schema Definition** (Phase 10A, critical path start)
|