aglinxinyuan opened a new issue, #5366: URL: https://github.com/apache/texera/issues/5366
### Task Summary Migrate the frontend workflow editor from **`[email protected]`** to **`@joint/[email protected]`** (JointJS v4, the rebranded successor package). This was surfaced while triaging the closed Dependabot PR #5064 (bump `lodash` 4.17.23 → 4.18.1). That bump could not complete because **`[email protected]` pins `lodash: ~4.17.21`** (`>=4.17.21 <4.18.0`), which forces a second, stale `[email protected]` copy to remain in `frontend/yarn.lock` alongside the `4.18.1` everything else uses. Every stable 3.x jointjs release (through 3.7.7) keeps that same `~4.17.21` pin — **only v4 (`@joint/core`) drops the runtime `lodash` (and `jQuery`/`Backbone`) dependency entirely**. So consolidating lodash to a single 4.18.1 requires the v4 migration. ### Motivation - **De-duplicate `lodash`** — removing jointjs's `~4.17.21` pin lets the tree resolve to a single `[email protected]`. - **Drop transitive `jQuery` and `Backbone`** — v4 removed both; `@types/backbone` can be dropped from `devDependencies`. - **Modernize** — v4 is ESM-first, actively maintained, and ships its own TypeScript types. ### Breaking-change inventory | v3 API in use | Where | v4 status | Migration | |---|---|---|---| | pkg `[email protected]` | all 12 importers | **renamed** → `@joint/[email protected]` | swap dep; `import * as joint from "jointjs"` → `"@joint/core"` | | `joint.shapes.devs.Model` | operator + comment box base, `joint-ui.service.ts` | **removed** | re-base `TexeraCustomJointElement` / `TexeraCustomCommentElement` on `dia.Element` + explicit ports API | | `joint.shapes.devs.ModelSelectors` | type, `joint-ui.service.ts` (×2) | **removed** | replace with v4 selectors / `dia.Cell.Selectors` type | | `joint.shapes.basic.Rect` | `workflow-editor.component.spec.ts` (×4) | **removed** | `joint.shapes.standard.Rectangle` | | `joint.layout.DirectedGraph` | `autoLayoutJoint()`, `joint-graph-wrapper.ts` | **moved** to `@joint/[email protected]` | add dep; import from new package | | SVG-string `markup` | operator/comment markup | v4 prefers JSON markup | convert markup; verify rendering | | `joint.attributes.SVGAttributes` | `joint-ui.service.ts` (×1) | exists (path may differ) | verify type import | | bundled `jQuery` (`$`) | internal paper events; 1 spec | **removed** | rework spec event simulation; re-verify paper pointer events | | `Backbone` + `@types/[email protected]` | types only (no direct src use) | **removed** | drop `@types/backbone` | ### Affected files (12) ``` frontend/package.json (deps) frontend/yarn.lock (regenerate → lodash dedupes to 4.18.1) service/joint-ui/joint-ui.service.ts (devs.Model rewrite — core) service/joint-ui/joint-ui.service.spec.ts service/workflow-graph/model/joint-graph-wrapper.ts (DirectedGraph layout) service/workflow-graph/model/joint-graph-wrapper.spec.ts service/workflow-graph/model/workflow-action.service.ts service/workflow-graph/model/shared-model-change-handler.ts service/workflow-graph/model/coeditor-presence.service.ts service/workflow-graph/model/sync-texera-model.spec.ts service/drag-drop/drag-drop.service.ts component/workflow-editor/workflow-editor.component.ts component/workflow-editor/workflow-editor.component.spec.ts component/workflow-editor/mini-map/mini-map.component.ts ``` ### Plan / checklist - [ ] Swap `jointjs` → `@joint/[email protected]`; add `@joint/[email protected]`; drop `@types/backbone`; regenerate lockfile with vendored Yarn 4.14.1. - [ ] Update all `import * as joint from "jointjs"` → `"@joint/core"` (12 files). - [ ] Rewrite `TexeraCustomJointElement` / `TexeraCustomCommentElement` off `devs.Model` onto `dia.Element` + ports API; convert SVG-string markup to v4 markup. - [ ] Re-point `joint.layout.DirectedGraph.layout(...)` to `@joint/layout-directed-graph`. - [ ] Replace `shapes.basic.Rect` / `devs.ModelSelectors` usages in specs and service. - [ ] Audit other v4 API changes (paper options, `setTheme`, event signatures, `highlighters`, `linkTools`, `ToolsView`). - [ ] Type-check + unit tests green. - [ ] **Manual visual QA** of the workflow editor (below). ### Risks & required QA This touches the **core rendering of the workflow canvas**, so type-checking alone is insufficient. Manual QA must confirm: operator boxes render with correct size/icons/labels · input/output ports (incl. dynamic add/remove port buttons) · link drawing & connection validation · delete/chat buttons & link tools · highlighters/selection · drag-drop from the operator panel · auto-layout · mini-map · co-editor presence rendering. ### Task Type Refactor / Cleanup · DevOps / Deployment / CI (dependency upgrade) -- 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]
