Skip to content

feat(workflow-form): embed the read-only workflow preview - #8429

Draft
yangzhang75 wants to merge 2 commits into
apache:mainfrom
yangzhang75:formview-pr8
Draft

feat(workflow-form): embed the read-only workflow preview#8429
yangzhang75 wants to merge 2 commits into
apache:mainfrom
yangzhang75:formview-pr8

Conversation

@yangzhang75

@yangzhang75 yangzhang75 commented Sep 4, 2026

Copy link
Copy Markdown
Contributor

What changes were proposed in this PR?

Building on the title-bar frame (#8391), this PR adds the collapsible read-only workflow preview to the Form View, and the read-only support the embedded editor needs (parent issue #8011). Frontend only.

  • A "Workflow" strip on the page that opens to show the same workflow editor and mini-map the operator canvas uses, embedded here read-only. It is built the first time the reader opens the strip (a frame after the strip is revealed, so JointJS measures a real size rather than a zero-sized one that misroutes links), then centred.
  • structureLocked on the shared workflow-editor: a mode that locks the graph shape (dragging, linking, deleting) without touching the workflow-modification lock the property panel rides on, and suppresses the shared cursor so a read-only view never broadcasts one. It defaults to false, so the operator canvas is unchanged. A container ResizeObserver keeps the paper sized to its own container (the strip toggles it via display:none, which the window-resize handler never hears), and operators already in the graph when this late-mounting editor appears are repainted so a completed run's colours are not missing.
  • With the flag on the form renders for any workflow, so the preview shows the graph read-only regardless of the workflow's default view.

The inputs, running and results are added on top of this by later PRs.

Screenshot

The workflow preview open on the read-only page (the "Workflow" strip expanded to the embedded editor + mini-map):
Screenshot 2026-09-04 at 1 25 22 PM

Any related issues, documentation, discussions?

Part of the Form View feature (parent issue #8011); stacked on #8391 (title bar) and #8376 (page shell). Until those merge, this PR's diff includes their commits as well.

How was this PR tested?

Unit tests (vitest): workflow-form.component.spec.ts (direct construction) and workflow-form.rendered.spec.ts (TestBed-rendered template) cover the strip's open/build/close/walk-away behaviour and the rendered bar; the shared workflow-editor.component.spec.ts (106 tests) is unchanged and green, confirming the structureLocked split leaves the canvas untouched. The page component is at 100% of its TypeScript, and every line added to workflow-editor is covered. Three template lines are not exercised: the <texera-workflow-editor> and <texera-mini-map> embed behind *ngIf, which need a real JointJS paper jsdom cannot provide (the editor's own paper code is v8-ignored for the same reason). ng build is clean.

Was this PR authored or co-authored using generative AI tooling?

Yes. Co-authored with Claude (Anthropic), reviewed line by line by the author before submission.

@github-actions github-actions Bot added the frontend Changes related to the frontend GUI label Sep 4, 2026
@github-actions

github-actions Bot commented Sep 4, 2026

Copy link
Copy Markdown
Contributor

Automated Reviewer Suggestions

Based on the git blame history of the changed files, we recommend the following reviewers:

  • Contributors with relevant context: @PG1204
    You can notify them by mentioning @PG1204 in a comment.

@codecov-commenter

codecov-commenter commented Sep 4, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 94.05941% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 94.03%. Comparing base (dcb25ef) to head (6b9d453).

Files with missing lines Patch % Lines
...mponent/workflow-form/workflow-form.component.html 86.36% 3 Missing ⚠️
...component/workflow-form/workflow-form.component.ts 96.66% 0 Missing and 2 partials ⚠️
...onent/workflow-editor/workflow-editor.component.ts 87.50% 0 Missing and 1 partial ⚠️
Additional details and impacted files
@@             Coverage Diff              @@
##               main    #8429      +/-   ##
============================================
- Coverage     94.03%   94.03%   -0.01%     
+ Complexity     4821     4820       -1     
============================================
  Files          1207     1207              
  Lines         49109    49202      +93     
  Branches       5963     5975      +12     
============================================
+ Hits          46180    46266      +86     
- Misses         1461     1464       +3     
- Partials       1468     1472       +4     
Flag Coverage Δ *Carryforward flag
access-control-service 81.00% <ø> (ø) Carriedforward from 71637a1
agent-service 99.32% <ø> (ø) Carriedforward from 71637a1
amber 89.90% <ø> (-0.01%) ⬇️ Carriedforward from 71637a1
computing-unit-managing-service 73.67% <ø> (ø) Carriedforward from 71637a1
config-service 87.12% <ø> (ø) Carriedforward from 71637a1
file-service 87.91% <ø> (ø) Carriedforward from 71637a1
frontend 96.77% <94.05%> (-0.02%) ⬇️
notebook-migration-service 83.57% <ø> (ø) Carriedforward from 71637a1
pyamber 98.47% <ø> (ø) Carriedforward from 71637a1
workflow-compiling-service 77.19% <ø> (ø) Carriedforward from 71637a1

*This pull request uses carry forward flags. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

yangzhang75 and others added 2 commits September 4, 2026 13:26
On top of the page shell: the title bar's workflow name (renamable in place,
exactly as on the operator canvas), its 'Saved at ...' state, and the debounced
save both views share -- so an edit made in the form is not lost on the canvas,
and vice versa. A save fills in a position for every operator and reports a
failure rather than losing it silently. The read-only preview, inputs, running
and results are added by later PRs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add the collapsible workflow preview to the Form View frame, and the read-only
support the embedded editor needs: a structureLocked mode on the shared workflow
editor that locks the graph shape (dragging, linking, deleting) without touching
the modification lock the property panel rides on, suppresses the shared cursor,
and a container ResizeObserver so the paper draws correctly wherever it is mounted.
The preview builds that editor and its mini-map the first time the reader opens the
strip. With the flag on the form renders for any workflow, so the preview shows the
graph read-only regardless of the workflow's default view.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

frontend Changes related to the frontend GUI

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants