EPIC - Continuous improvements for the DMN Editor (1H2025 iteration)

[tiagobento]

Prev: #1419

Decision Services & multiple DRDs (see #870)

• Decision Services & multiple DRDs: Collapsing and expanding Decision Services. #892
• Decision Services & multiple DRDs: Deleting a Decision Service. #911
• Decision Services & multiple DRDs: Moving or resizing a Decision contained by a Decision Service. #889
• Decision Services & multiple DRDs: Moving the divider line of or resizing a Decision Service #898
• Decision Services & multiple DRDs: Adding a Decision to a Decision Service. #890
• Decision Services & multiple DRDs: Removing a Decision from a Decision Service. #891
• Decision Services & multiple DRDs: Dealing with External Decisions and Decision Services. #893
• Decision Services & multiple DRDs: Dealing with Decisions contained by multiple Decision Services on the same DRD. #895

Q1

• Write an ARCHITECTURE.md file, describing how the React-based DMN Editor works under the hood, to be used as reference in the future or for new contributors #448
• Write an ARCHITECTURE.md file, describing how the TypeScript-based DMN Marshaller works under the hood, to be used as reference in the future or for new contributors. #449
• Write a nice blog post about the new React-based DMN Editor. #447
• On the DMN Editor, add a subtitle when the "highlight hierarchy" overlay is turned on. #884
• On the DMN Editor, change the selection label that appears to show for single nodes and transform it into a dropdown with possible actions for the selected nodes/edges #887
• DMN Edge Waypoints are not editable in the Firefox [webkit] #991
• Unify the focus mechanism on the DMN Editor #984
• On the DMN Editor the HREF is used as an ID for the React Flow elements which can be misleading #983
• Make it possible to generate a Documentation PDF/HTML for a select group of DMN files on KIE Sandbox #171
• Programmatically generate documentation HTML of DMN files for a project #388
• On the DMN Editor, the resizing handle of nodes should have a bigger interaction area.. It's too small thus requiring a lot of precision to grab it.
• Remove dependency on DMN 1.2. Currently, included models are using the DMN 1.2 namespace, to be compatible with JIT Executor. As soon as JIT Executor is updated to DMN 1.5, we need to alter that too.
• DMNs with or without DRDs must have the ability to render the DRG using auto-layout strategies, potentially converting what is on-screen to as a DRD.
• On the DMN Editor, when an included model includes a model that is not included on the DMN being edited, the DMN Editor should be able to work normally.
• On the DMN Editor, divider lines of Decision Services always fall to bottom-most position when moved in Firefox
• On the DMN Editor, cannot copy/cut/paste values using keyboard shortcuts in Firefox and Safari. Both for Diagram and Data Types.
• On a string Data Type with Enum constraints, adding a , to one of the values will break the parsing, resulting in a broken UI. We need to use the FEEL parser to understand the saved expression and auto-detect ranges & enums. Right now, the implementation we have is a best-effort RegEx-like strategy, which does not hold very well.
• Decide what we should do with the @_importType attribute of imports when migrating DMN versions to latest.
• On the DMN Editor, reset Shape and Font styles should have a consistent UI.
• In a workspace with any DMN with version higher than 1.2 will break the legacy DMN Editor.
• On the DMN Editor, the TypeRefSelector on Data Type node panel for Decision Services is showing behind Decision nodes contained by Decision Services.

Q2

---

Roll-over section (to be moved to the next iteration)

⚪️ --- STRUCTURAL --- ⤵️⤵️⤵️

• Create the KIE extension 1.1 for the DMN spec adding an id value to the attachement items #666
• On the DMN Editor, multiple imports with empty import names are allowed in the default namespace and their precedence is resolved according to their definition order. (Need to check this precedence thing... if it has any impact on the Editor itself, or only at runtime.)

⚪️ --- DECISION SERVICES --- ⤵️⤵️⤵️

• The DMN Editor must allow adding a new Decision node from the Palette directly to a Decision Service #896
• The DMN Editor must allow a new Decision node from other nodes' source handles to be added directly to a Decision Service (Connection Line) #897
• The DMN Editor should not allow moving contained Decisions outside of their sections on Decision Services when using the keyboard, only when using the mouse. #876
• The DMN Editor should not allow nodes to go inside Decision Services when moving them with the keyboard.
• The DMN Editor should have a decent strategy to handle moving nodes when selected nodes are inside different Decision Services.
• The DMN Editor should grow the Decision Service when adding nodes to it. Selection stay unaltered, but the Decision Service expands to fit the selection. Much like what Grouping does for selected nodes.
• On the DMN Editor, it's not possible to use the centralized edge handle when Decision Services are targeted.
• The DMN Editor should indicate somehow that Decision Service nodes need at least one Output Decision to be valid. Maybe an Empty State?
• On the DMN Editor, moving a bunch of selected nodes won't work if there are non-Decision nodes selected and the dragging is being done by a Decision node inside a Decision Service
• The DMN Editor must highlight which section of the Decision Service the node being dragged will land on.
• On the DMN Editor, only edge waypoints inside the Decision Service / Group sub-graph should be automatically repositioned

⚪️ --- EDGES --- ⤵️⤵️⤵️

• On the DMN Editor, enable the "Edit" button (with "View" label) for external Decisions and BKMs. When clicking it, the Boxed Expression Editor should be open in "readonly" mode, with a link to the file that contains that Decision/BKM. See Support readonly mode on DMN Editor's Boxed Expression Editor #182
• On the DMN Editor, when an edge is hovered, "phantom" Waypoints are rendered. Allow them to be dragged to create a new Waypoint without having to Double-click the edge.
• On the DMN Editor, add an interaction width to Edge Updaters and Waypoints to make it easier to interact with them.

⚪️ --- BOXED-EXPRESSIONS --- ⤵️⤵️⤵️

⚪️ --- VALIDATION --- ⤵️⤵️⤵️

• xml-parser-ts shoud validate the DMN being parsed. There's good validation information on the XSD, but not everything... E.g., For DMN, Decision Services need to have at least one Output Decision to be valid, although the XSD says outputDecision can be an array with zero elements.

⚪️ --- UX --- ⤵️⤵️⤵️

• [DMN Editor] Selection of data type by using keystrokes only  #504
• On the DMN Editor, add a nice "hint panel" with GIFs and nice text for each element of the Palette. Needs to expand once the cursor sits on top of Palette buttons, like waiting for a tooltip
• On the DMN Editor, allow resizing nodes while pressing Alt for pivot point at the center of the node, rather than the top-left.
• On the DMN Editor, allow horizontal/vertical lock when resizing a node while pressing Shift
• On the DMN Editor, allow horizontal/vertical locking when moving the selected nodes while pressing Shift
• New options for selection on the DMN Editor: Add all connected edges / Remove edges from selection / Remove nodes from selection / Group / Grow selection (BFS)
• Double-clicking on DMN Editor nodes resizer handle to adjust Decision Service / Group size to its containments. Leave a nice padding.
• On the DMN Editor, selecting all diagram elements with Cmd + A is only working when letting go of both keys, but ideally users should be able to keep pressing Cmd and only let go of A to re-trigger it.
• Ctrl + F: Find nodes on the diagram or lines on Boxed Expressions. Jump right to where the "Find match" is. Move the Diagram to show where the node is.
• Allow creating nodes by clicking on the Palette icons, not only by dragging. Make sure the new nodes are always visible on the screen, independent of the coordinates visible on screen.
• Clicking on "Edit" for an imported Decision/BKM doesn't work.. The label should actually be "View" and the BEE should open in "Read-only mode". Editing an imported Decision should be done on the file it's defined. We can add a link to allow jumping to the file, at the correct place.
• On the DMN Editor Data Types tab, expanding a property of a Struct item definition while pressing Alt should expand it recursively.
• Slightly offset nodes if position clash with existing nodes when pasting nodes on the DMN Editor diagram.
• Transform the title of the Boxed Expression Editor into a dropdown, where users can select which node's Boxed Expression they'll be editing.

⚪️ --- CLIPBOARD --- ⤵️⤵️⤵️

• On the DMN Editor, make sure the pasted content on the Diagram is always shown at the screen, independent of the coordinates of the copied DMNShapes and the coordinates that are visible on the screen at the moment paste was executed.
• On the DMN Editor, when pasting content (Diagram nodes / Data Types / Boxed Expressions ), suggest to import missing models that will make the pasted content valid. For example, a node might be pasted with a Data Type that doesn't exist on the target DMN. We should suggest including the DMN where that Data Type is declared.
• On the DMN Editor, allow cut/copy/paste to work with External Nodes. See above.

⚪️ --- UI --- ⤵️⤵️⤵️

• When creating new nodes from the DMN Editor Palette, we should see a placeholder for the node name that's gonna be created, like "New decision". This needs to be a feature of the "Node SVG" components.
• When dragging nodes from the DMN Editor Palette to the diagram, we should have a live preview of node shapes before putting them on the diagram
• Moving nodes with the keyboard arrows is glitching the edge updaters. Note that you need to have the mouse hovering a selected edge to be able to see it.
• Stuff with long names on the UI should have a good strategy for rendering. Truncating, line breaks, scroll etc. Nodes should never let their contents overflow. Truncate text with ... etc. Patternfly has a nice component for that called "Truncate"

⚪️ --- INCLUDED MODELS & EXTERNAL NODES --- ⤵️⤵️⤵️

• Allow Copy/cut/paste operations for External nodes on the DMN Editor.
• Included model card should show the included model SVG, and some more information. Kebab menu at the top-right with option to delete, instead of inline button.
• Draw edges between external nodes that are connected on the included model.
• Add the names of external nodes to allFeelVariableUniqueNames that come from imports namespaced with "". Inlcude all names, or only what is referenced into thisDmn? What about named imports?
• The DMN Editor must allow adding an external Decision to a local Decision Service. Search the dmn-editor package for #${. Decisions required by external Decisions that are in the OUTPUT section are all treated as Encapsulated Decisions. Making the inputData list of the Decision Service contain all InputData nodes required on the external Decision's sub-graph.

⚪️ --- DATA TYPES --- ⤵️⤵️⤵️

• The DMN Editor's Data Type selector's UX is not good. Use keyboard, enter/focus etc. DataType selector should be the same on DMN Editor and BEE. I think we need to extract it to a new package? dmn-data-types?
• On the DMN Editor, implement the side-panel for "View usages" of Data Types. It should contain mentions to DRG elements, other Data Types, or even elements of Boxed Expressions.
• On the DMN Editor, implement the "Back" and "Forward" navigation mechanisms for the Data Types tab
• On the DMN Editor, make it possible to reorder Properties on struct Data Types by dragging them around.
• Searching for data types should be easier with the same algorithm being applied to the "Filter" input on the Data Types tab, and the TypeRef selector. Nested properties should be matched against, and visual indications of where the match is should be shown.

⚪️ --- MISC --- ⤵️⤵️⤵️

• Delete the old GWT-based DMN Editor from packages/stunner-editors on KIE Tools. #445
• Delete DMN-specific code from packages/kie-bc-editors, on KIE Tools. #446