PG1204 opened a new issue, #5774:
URL: https://github.com/apache/texera/issues/5774
### Task Summary
Add a "Performance" overlay to the canvas Layers menu that colors operators
cold -> hot by a normalized performance score, with three selectable views and
an on-canvas legend, driven by the metrics captured in the previous sub-task.
### Context
After the data foundation lands (#5773), `WorkflowStatusService` exposes a
derived, normalized per-operator performance model. There is still no visual
way to read it on the canvas.
Texera already has a pattern for toggleable canvas layers: Grid, Regions,
Workers and Status, all wired through the Layers dropdown in
`frontend/src/app/workspace/component/menu/menu.component.{ts,html}`. The
Regions layer is the closest model: a `BehaviorSubject` on `JointGraphWrapper`
that the canvas subscribes to and applies via JointJS `.attr(...)`.
Operator coloring is already split cleanly:
execution status -> operator border (rect.body/stroke) + state text
operator type -> operator body fill (rect.body/fill)
so a heat-map can own the body fill and coexist with the status border
without conflict. The minimap shares the same JointJS graph model, so attribute
changes propagate to both surfaces automatically.
### Proposed Change
New `frontend/src/app/workspace/service/heatmap/heatmap-color.ts` (pure):
- `scoreToColor(score)` mapping a `[0, 1]` score onto a cold -> hot ramp
(colorblind-safe RdYlBu reversed), with a distinct neutral color for operators
that have no metrics yet.
In
`frontend/src/app/workspace/service/workflow-graph/model/joint-graph-wrapper.ts`:
- Add a single `BehaviorSubject<HeatmapView | null>` (null = off) with
set/get/stream accessors, mirroring the Regions pattern.
In `frontend/src/app/workspace/service/joint-ui/joint-ui.service.ts`:
- `applyHeatmapColor(paper, operatorID, score?)`: sets `rect.body/fill` only.
- `restoreOperatorFill(paper, operator)`: restores the default fill via the
existing `getOperatorFillColor`, used on toggle-off.
In
`frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.ts`:
- Subscribe to the heat-map view stream combined with the
performance-metrics stream; recolor all operators on each emission, and restore
fills when the view is null. Newly added operators are colored when a view is
active.
UI:
- Add a "Performance" entry with a Runtime / Throughput / I/O imbalance view
selector to the Layers dropdown in
`frontend/src/app/workspace/component/menu/menu.component.{ts,html}`, mirroring
`toggleRegion()`.
- New presentational `heatmap-legend` component showing the cold -> hot
scale and the active view, mounted over the canvas and hidden when the layer is
off.
### Required Test
- `heatmap-color.spec.ts`: ramp endpoints/midpoint, monotonic channel
changes, out-of-range clamping, and the no-metrics neutral case.
- `joint-ui.service` spec: `applyHeatmapColor` writes the expected
`rect.body/fill`, a missing operator id is a no-op, and `restoreOperatorFill`
restores enabled vs disabled fills correctly.
### Related
- Umbrella issue #5772
- Depends on #5773
- RFC discussion #5216
### Task Type
- [ ] Refactor / Cleanup
- [ ] DevOps / Deployment / CI
- [ ] Testing / QA
- [ ] Documentation
- [x] Performance
- [x] Other
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
