feat(apollo-react): add ProbeCard and Node Flyout Probe story section by 1980computer · Pull Request #787 · UiPath/apollo-ui

1980computer · 2026-06-06T04:05:27Z

Summary

Extracts the ProbeCard debug component from flow-workbench into a reusable apollo-react canvas component, and introduces a dedicated Node Flyout Probe story section with full documentation.

ProbeCard component

A fully controlled, floating debug card that anchors to a canvas node via a dashed SVG connector.

Watch expressions with type-coloured value trees (strings, numbers, booleans, objects, arrays)
Iteration cycler for nodes inside loops (IterationControl prop)
Drag to reposition (header), corner handles to resize
Keyboard: Escape dismisses, ArrowUp/Down moves between watch inputs, Delete/Backspace closes when card has focus
Scroll/middle-mouse over the card forwards to canvas pan; Ctrl+scroll forwards to canvas zoom
All chrome uses Apollo semantic tokens — fully consistent across future-dark, future-light, and all other themes

Exports from @uipath/apollo-react/canvas:

import { ProbeCard } from '@uipath/apollo-react/canvas';
import type { WatchResult, IterationControl, ProbeCardProps, ResizeEdges } from '@uipath/apollo-react/canvas';

Node Flyout Probe story section

Standalone story section (Canvas > Components > Panels > Node Flyout Probe) with four entries:

Story	Description
Overview	Doc-layout page — anatomy cards, consumer contract table, usage snippet
Default	Pre-seeded watches with resolved values; interactive canvas with "Add probe" trigger
Empty state	Card before any watches are added
Iteration control	Loop node cycler — 5 iterations with changing values

All interactive stories use a real BaseCanvas with a uipath.agent anchor node. The ProbeOverlay inner component reads live node position and viewport transform from the ReactFlow store so the card and connector track correctly during pan and zoom.

Depends on

feat(apollo-react): IA updates, Node Flyout Panel migration, and NodePropertyTrigger #781 — IA updates, Node Flyout Panel, NodePropertyTrigger (base branch)

Test plan

Canvas > Panels > Node Flyout Probe > Overview — anatomy, contract table, and usage snippet render correctly
Default — click "Add probe", drag card, resize corners, add/remove watches, collapse values, Escape to close, ArrowUp/Down between inputs
Empty state — empty card shown, + adds a new watch
Iteration control — Previous/Next cycles through 5 iterations with changing values
Pan and zoom the canvas — connector and card track together
Themes — card chrome renders correctly in future-dark and future-light
No CI format/lint failures

🤖 Generated with Claude Code

github-actions · 2026-06-06T04:05:34Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (PT)
apollo-design	🟢 Ready	Preview, Logs	Jun 12, 2026, 04:50:04 PM
apollo-docs	🟢 Ready	Preview, Logs	Jun 12, 2026, 04:50:04 PM
apollo-landing	🟢 Ready	Preview, Logs	Jun 12, 2026, 04:50:04 PM
apollo-vertex	🟢 Ready	Preview, Logs	Jun 12, 2026, 04:50:04 PM

github-actions · 2026-06-06T04:06:22Z

Dependency License Review

✅ 1922 package(s) scanned
✅ No license issues found
⚠️ 2 package(s) excluded (see details below)

License distribution

License	Packages
MIT	1692
ISC	89
Apache-2.0	55
BSD-3-Clause	27
BSD-2-Clause	23
BlueOak-1.0.0	8
MPL-2.0	4
MIT-0	3
CC0-1.0	3
MIT OR Apache-2.0	2
(MIT OR Apache-2.0)	2
Unlicense	2
LGPL-3.0-or-later	1
Python-2.0	1
CC-BY-4.0	1
(MPL-2.0 OR Apache-2.0)	1
Unknown	1
Artistic-2.0	1
(WTFPL OR MIT)	1
(BSD-2-Clause OR MIT OR Apache-2.0)	1
CC-BY-3.0	1
0BSD	1
(MIT OR CC0-1.0)	1
MIT AND ISC	1

Excluded packages

Package	Version	License	Reason
@img/sharp-libvips-linux-x64	1.2.4	LGPL-3.0-or-later	LGPL pre-built binary, not linked
khroma	2.1.0	Unknown	MIT per GitHub repo, missing license field in package.json

Copilot

Pull request overview

Adds a new reusable ProbeCard canvas debug component to apollo-react and introduces a dedicated Storybook section demonstrating “Node Flyout Probe” behavior (overview + interactive scenarios), along with minor Storybook IA title/sort adjustments.

Changes:

Added ProbeCard (drag, resize, watch list rendering, keyboard shortcuts, wheel forwarding hooks) and supporting hooks/utilities.
Added “Node Flyout Probe” Storybook section with Overview/Default/Empty/Iteration-control stories using a real BaseCanvas.
Updated existing panel story titles and Storybook storySort ordering to include the new section.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/apollo-react/src/canvas/components/ProbeCard/useLatestRef.ts	New helper hook for keeping latest values in refs.
packages/apollo-react/src/canvas/components/ProbeCard/useDragSession.ts	New hook to manage window-level mouse drag sessions for drag/resize interactions.
packages/apollo-react/src/canvas/components/ProbeCard/ProbeResizeHandles.tsx	New resize handle UI + edge metadata for resizing behavior.
packages/apollo-react/src/canvas/components/ProbeCard/ProbeCard.tsx	New `ProbeCard` component implementation (watch list UI, keyboard + wheel handling, drag/resize wiring).
packages/apollo-react/src/canvas/components/ProbeCard/index.ts	Public barrel exports for `ProbeCard` + related types.
packages/apollo-react/src/canvas/components/NodePropertiesPanel/NodePropertiesPanel.stories.tsx	Story title updated to `Canvas/...` path.
packages/apollo-react/src/canvas/components/NodePropertiesPanel/NodeFlyoutProbe.stories.tsx	New “Node Flyout Probe” story section showcasing `ProbeCard` integration.
packages/apollo-react/src/canvas/components/index.ts	Re-exported `ProbeCard` from the canvas components barrel.
packages/apollo-react/src/canvas/components/CollapseConfig/CollapseConfig.stories.tsx	Story title updated to `Canvas/...` path.
apps/storybook/.storybook/preview.tsx	Story sort updated to include “Node Flyout Probe” ordering under Panels.

Copilot

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.

Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.

Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.

Extracts the Probe debug card from flow-workbench into a reusable apollo-react canvas component. ProbeCard is a fully controlled, floating debug card that anchors to a canvas node via a dashed connector. It exposes watch expressions with type-coloured value trees, an iteration cycler for loop nodes, and drag/resize/keyboard interactions. Architecture: - UI-only — callers own position, size, watch list, and persistence - Fully controlled via callbacks (onDrag, onResize, onAddWatch, etc.) - Canvas pan/zoom forwarding via onCanvasPan / onCanvasZoom - All chrome uses Apollo semantic tokens (surface-raised, border-subtle, foreground-muted, foreground-accent, etc.) - Memoised to skip re-renders when only the viewport pans/zooms Exports from @uipath/apollo-react/canvas: ProbeCard, ProbeCardProps, WatchResult, IterationControl, ResizeEdges Story added to Canvas > Components > Panels > Node Flyout Panel > Probe: - Real BaseCanvas with a uipath.agent anchor node - ProbeOverlay child component reads node position + viewport transform from the ReactFlow store so the card and connector track correctly during pan and zoom - "Add probe" button simulates the context-menu trigger Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…ction - ProbeCard: add Escape to dismiss, ArrowUp/Down to navigate between watch expression inputs (capture phase, consistent with existing Delete handler) - NodeFlyoutProbe.stories.tsx: new standalone story file with four exports — Overview (doc-layout: anatomy, consumer contract table, usage snippet), Default, Empty state, Iteration control - NodePropertiesPanel.stories.tsx: remove Probe stories now in dedicated file - preview.tsx: add Node Flyout Probe to storySort after Node Flyout Panel Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

github-actions Bot added the pkg:apollo-react label Jun 6, 2026

1980computer marked this pull request as ready for review June 8, 2026 16:02

1980computer changed the title ~~feat(apollo-react): add ProbeCard canvas component~~ feat(apollo-react): add ProbeCard and Node Flyout Probe story section Jun 8, 2026

1980computer force-pushed the add-probe-to-node-flyout-panel branch from c237d9c to 6150e02 Compare June 8, 2026 18:38

github-actions Bot added the app:storybook label Jun 8, 2026

1980computer requested a review from CalinaCristian June 8, 2026 18:39

1980computer force-pushed the add-probe-to-node-flyout-panel branch from 6150e02 to 168deac Compare June 11, 2026 00:08

CalinaCristian force-pushed the ia-and-panel-nodes branch from a5a702b to cbb1983 Compare June 11, 2026 09:24

Base automatically changed from ia-and-panel-nodes to main June 12, 2026 01:19

1980computer force-pushed the add-probe-to-node-flyout-panel branch from 168deac to 9d31b2f Compare June 12, 2026 23:00

Copilot AI review requested due to automatic review settings June 12, 2026 23:00

Copilot started reviewing on behalf of 1980computer June 12, 2026 23:01 View session

github-actions Bot added the size:XXL 1,000+ changed lines. label Jun 12, 2026

Copilot AI reviewed Jun 12, 2026

View reviewed changes

1980computer force-pushed the add-probe-to-node-flyout-panel branch from 9d31b2f to c103a73 Compare June 12, 2026 23:06

Copilot AI review requested due to automatic review settings June 12, 2026 23:12

1980computer force-pushed the add-probe-to-node-flyout-panel branch from c103a73 to 65723ea Compare June 12, 2026 23:12

Copilot started reviewing on behalf of 1980computer June 12, 2026 23:12 View session

Copilot AI reviewed Jun 12, 2026

View reviewed changes

Comment thread packages/apollo-react/src/canvas/components/ProbeCard/ProbeCard.tsx Outdated

Comment thread packages/apollo-react/src/canvas/components/ProbeCard/ProbeCard.tsx

Comment thread packages/apollo-react/src/canvas/components/ProbeCard/useDragSession.ts

1980computer force-pushed the add-probe-to-node-flyout-panel branch from 65723ea to 0ac13e6 Compare June 12, 2026 23:21

Copilot AI review requested due to automatic review settings June 12, 2026 23:24

1980computer force-pushed the add-probe-to-node-flyout-panel branch from 0ac13e6 to 1ddfe03 Compare June 12, 2026 23:24

Copilot started reviewing on behalf of 1980computer June 12, 2026 23:24 View session

Copilot AI reviewed Jun 12, 2026

View reviewed changes

Comment thread packages/apollo-react/src/canvas/components/ProbeCard/useDragSession.ts Outdated

Comment thread packages/apollo-react/src/canvas/components/ProbeCard/ProbeCard.tsx Outdated

1980computer force-pushed the add-probe-to-node-flyout-panel branch from 1ddfe03 to 05223f4 Compare June 12, 2026 23:35

Copilot AI review requested due to automatic review settings June 12, 2026 23:36

1980computer force-pushed the add-probe-to-node-flyout-panel branch from 05223f4 to 451e085 Compare June 12, 2026 23:36

Copilot started reviewing on behalf of 1980computer June 12, 2026 23:37 View session

Copilot AI reviewed Jun 12, 2026

View reviewed changes

Comment thread packages/apollo-react/src/canvas/components/ProbeCard/ProbeResizeHandles.tsx

Comment thread packages/apollo-react/src/canvas/components/NodePropertiesPanel/NodeFlyoutProbe.stories.tsx

1980computer and others added 2 commits June 12, 2026 16:44

1980computer force-pushed the add-probe-to-node-flyout-panel branch from 451e085 to 201f790 Compare June 12, 2026 23:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(apollo-react): add ProbeCard and Node Flyout Probe story section#787

feat(apollo-react): add ProbeCard and Node Flyout Probe story section#787
1980computer wants to merge 2 commits into
mainfrom
add-probe-to-node-flyout-panel

1980computer commented Jun 6, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 6, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 6, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

1980computer commented Jun 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

ProbeCard component

Node Flyout Probe story section

Depends on

Test plan

Uh oh!

github-actions Bot commented Jun 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Dependency License Review

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

1980computer commented Jun 6, 2026 •

edited

Loading

github-actions Bot commented Jun 6, 2026 •

edited

Loading

github-actions Bot commented Jun 6, 2026 •

edited

Loading