Matt Gilman created NIFI-16397:
----------------------------------
Summary: 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
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)
