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

[yangzhang75]

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 paper's own interactions (dragging, linking, the editor's delete/cut/port commands) 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):

Any related issues, documentation, discussions?

Closes #8020.

Part of the Form View feature (parent issue #8011). Builds on the now-merged page shell (#8376) and title bar (#8391); this PR's diff is only its own change on current main.

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]

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 Report

❌ Patch coverage is 91.48936% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 94.02%. Comparing base (873c91c) to head (8f4d7bd).
⚠️ Report is 2 commits behind head on main.

Files with missing lines	Patch %	Lines
...mponent/workflow-form/workflow-form.component.html	88.88%	2 Missing ⚠️
...onent/workflow-editor/workflow-editor.component.ts	87.50%	0 Missing and 1 partial ⚠️
...component/workflow-form/workflow-form.component.ts	94.73%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##               main    #8429      +/-   ##
============================================
- Coverage     94.02%   94.02%   -0.01%     
  Complexity     4818     4818              
============================================
  Files          1207     1207              
  Lines         49167    49207      +40     
  Branches       5972     5978       +6     
============================================
+ Hits          46230    46265      +35     
- Misses         1464     1466       +2     
- Partials       1473     1476       +3     

Flag	Coverage Δ		*Carryforward flag
access-control-service	81.00% <ø> (ø)		Carriedforward from 873c91c
agent-service	99.32% <ø> (ø)		Carriedforward from 873c91c
amber	89.88% <ø> (ø)		Carriedforward from 873c91c
computing-unit-managing-service	73.67% <ø> (ø)		Carriedforward from 873c91c
config-service	87.12% <ø> (ø)		Carriedforward from 873c91c
file-service	87.91% <ø> (ø)		Carriedforward from 873c91c
frontend	96.77% <91.48%> (-0.02%)	⬇️
notebook-migration-service	83.57% <ø> (ø)		Carriedforward from 873c91c
pyamber	98.47% <ø> (ø)		Carriedforward from 873c91c
workflow-compiling-service	77.19% <ø> (ø)		Carriedforward from 873c91c

*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.

[Copilot]

🟡 Changes recommended

Rapid collapse can permanently mis-size the mini-map, and structural locking does not cover context-menu deletion paths.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds a collapsible, read-only workflow graph preview to Form View using the shared editor and mini-map.

Changes:

• Embeds and lazily initializes the preview.
• Adds structural locking, container resizing, and state repainting.
• Adds preview interaction tests and styling.

File summaries

File	Description
workflow-form.spec-harness.ts	Adds graph-centering mock support.
workflow-form.rendered.spec.ts	Tests the preview-bar binding.
workflow-form.component.ts	Implements deferred preview initialization.
workflow-form.component.spec.ts	Tests preview lifecycle behavior.
workflow-form.component.scss	Styles the collapsible preview.
workflow-form.component.html	Embeds the editor and mini-map.
workflow-editor.component.ts	Adds structural locking, resizing, repainting, and cursor suppression.

Review details

Suppressed comments (1)

frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.ts:308

• The new structureLocked branch has no regression test: the existing editor test only toggles the workflow-modification stream. Add coverage with structureLocked = true that verifies dragging/linking and all deletion paths stay disabled while workflow modification remains enabled, plus the default-false case. This is especially important because the two locks intentionally diverge.

      // marks all the available magnets or elements when a link is dragged
      markAvailable: true,
      // disable jointjs default action of adding vertexes to the link
      interactive: this.interactive ? defaultInteractiveOption : disableInteractiveOption,

• Files reviewed: 7/7 changed files
• Comments generated: 2
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[yangzhang75]

/request-review: @mengw15

[mengw15]

LGTM.