[
https://issues.apache.org/jira/browse/NIFI-16397?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=18125625#comment-18125625
]
ASF subversion and git services commented on NIFI-16397:
--------------------------------------------------------
Commit 0977feba14248af99b14be5909ee9133802e4803 in nifi's branch
refs/heads/main from Matt Gilman
[ https://gitbox.apache.org/repos/asf?p=nifi.git;h=0977feba142 ]
NIFI-16397: Add reusable canvas interaction support (#11773)
* NIFI-16397: Add reusable canvas interaction support
Add typed component dragging, connection creation, endpoint reconnection,
selection, and optimistic UI state handling. Integrate the reusable canvas
with connector flows and add regression coverage for gesture lifecycles.
* NIFI-16397: Addressing review feedback.
* NIFI-16397: Addressing review feedback.
* NIFI-16397: Addressing review feedback.
This closes #11773
> Type reusable canvas wrappers, renderers, selections, and gesture contracts
> ---------------------------------------------------------------------------
>
> Key: NIFI-16397
> URL: https://issues.apache.org/jira/browse/NIFI-16397
> Project: Apache NiFi
> Issue Type: Task
> Components: Core UI
> Reporter: Matt Gilman
> Assignee: Matt Gilman
> Priority: Major
> Time Spent: 1h
> Remaining Estimate: 0h
>
> h2. Background
> The reusable canvas wraps each server entity with frontend-only UI state for
> dimensions, selection, drag state, and rendering. These wrappers and many D3
> renderer contracts currently use any, which prevents the compiler from
> validating entity access and interaction payloads.
> The reusable canvas should use canonical entity contracts throughout its
> wrapper, rendering, selection, and gesture layers.
> h2. Goals
> * Type every reusable-canvas wrapper with its canonical entity.
> * Introduce discriminated unions for canvas data and selected targets.
> * Type D3 selections, render contexts, callbacks, and drag events.
> * Separate frontend-only UI state from server-returned entity state.
> * Type connection creation and endpoint-reconnection payloads.
> * Eliminate explicit any from the reusable canvas directory.
> h2. Scope
> h3. Canvas Wrappers
> Type each wrapper as:
> * CanvasProcessor with ProcessorEntity.
> * CanvasConnection with ConnectionEntity.
> * CanvasPort with PortEntity.
> * CanvasProcessGroup with ProcessGroupEntity.
> * CanvasRemoteProcessGroup with RemoteProcessGroupEntity.
> * CanvasFunnel with FunnelEntity.
> * CanvasLabel with LabelEntity.
> Retain frontend-only fields such as dimensions, current drag position,
> temporary bend state, preview state, and selection state under the wrapper's
> ui property.
> h3. Canvas Data Union
> * Replace the generic CanvasComponent shape with a discriminated CanvasDatum
> union.
> * Use ui.componentType as the component-kind discriminator.
> * Add narrowing helpers for processors, connections, named components,
> positionable components, and connectable components.
> * Ensure labels and connections cannot participate as connection endpoints.
> h3. Component Inputs and Outputs
> * Type all reusable-canvas component collection inputs with concrete entity
> arrays.
> * Type internal computed collections with the corresponding canvas wrappers.
> * Type selection, context-menu, drag, resize, bend-point, label-index,
> connection-create, and reconnect outputs.
> * Keep the reusable component independent of page-specific NgRx actions.
> h3. Renderers and Layer Contracts
> * Type each layer's D3 selections with the corresponding canvas wrapper.
> * Replace renderer callback any parameters with shared callback aliases.
> * Type render-context fields used by processor, connection, port, funnel,
> label, process-group, and remote-process-group renderers.
> * Type D3 event subjects and currentTarget access without this aliases or
> unbounded casts.
> * Scope D3 queries to the owning canvas instance.
> h3. Selection Contracts
> * Define a discriminated SelectionTarget union for context menus and bulk
> operations.
> * Type clicked components, selected components, and related connections.
> * Replace structural entity envelopes and nested any fields.
> * Preserve route-based selection and context-menu behavior.
> h3. Gesture Contracts
> * Type the component drag pipeline and its drag-end baseline payload.
> * Preserve the baseline revision captured at gesture start.
> * Type connection-handle creation payloads with valid connectable entities.
> * Define one shared destination contract for endpoint reconnection.
> * Retain complete endpoint entities as frontend metadata.
> * Ensure labels and connections are rejected as connection endpoints.
> * Keep connection bend-point, connection-label, and endpoint-reconnect
> gestures as dedicated handlers.
> h3. Tests and Linting
> * Replace partial any fixtures with canonical entity factories.
> * Add compile-time coverage for discriminated unions and endpoint exclusions.
> * Retain integration coverage for selection and drag interactions.
> * Enable no-explicit-any for the completed reusable canvas directory.
> h2. Out of Scope
> * Adding connector troubleshooting commands.
> * Migrating the legacy flow-designer canvas.
> * Changing REST endpoint behavior.
> * Changing rendered appearance or interaction semantics.
> * Dispatching page-specific state actions from the reusable component.
> h2. Acceptance Criteria
> * Every Canvas wrapper uses its canonical entity type.
> * CanvasDatum and SelectionTarget are discriminated unions.
> * Canvas collection inputs use concrete entity arrays.
> * D3 renderer and layer contracts do not use explicit any.
> * Drag and render callbacks have shared typed contracts.
> * Connection creation and reconnection accept only valid connectable entities.
> * Labels and connections are rejected as connection endpoints at compile time.
> * Full endpoint entities remain frontend metadata and are not added to REST
> payloads.
> * Context-menu and selection behavior remains unchanged.
> * Drag, bend-point, label, resize, and reconnect behavior remains unchanged.
> * no-explicit-any is enabled for the reusable canvas directory.
> * Frontend lint, strict type-check, unit tests, integration tests, and
> production build pass.
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
