From 41814a95a105e4131fcdd68109775f5f5765fb39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luiz=20Jo=C3=A3o=20Motta?= <luizjoaomotta@gmail.com>
Date: Tue, 30 Jan 2024 13:46:45 -0300
Subject: [PATCH] kie-issues#232: Identify DMN 1.4 collections with `|||` on
 the DMN Editor diagram (#2132)

---
 .../src/AvailableModelsToInclude.ts           |  2 +-
 .../dmn-editor/src/diagram/nodes/NodeSvgs.tsx | 50 ++++++++++++++++++-
 .../dmn-editor/src/diagram/nodes/Nodes.tsx    | 25 ++++++++--
 3 files changed, 70 insertions(+), 7 deletions(-)

diff --git a/packages/dmn-editor/dev-webapp/src/AvailableModelsToInclude.ts b/packages/dmn-editor/dev-webapp/src/AvailableModelsToInclude.ts
index d86321a2f6a..55ae39ea07a 100644
--- a/packages/dmn-editor/dev-webapp/src/AvailableModelsToInclude.ts
+++ b/packages/dmn-editor/dev-webapp/src/AvailableModelsToInclude.ts
@@ -67,7 +67,7 @@ export const modelsByNamespace = Object.values(avaiableModels).reduce((acc, v) =
   if (v.type === "dmn") {
     acc[v.model.definitions["@_namespace"]] = v;
   } else if (v.type === "pmml") {
-    acc[getPmmlNamespace({ normalizedPathRelativeToTheOpenFile: v.normalizedPosixPathRelativeToTheOpenFile })] = v;
+    acc[getPmmlNamespace({ normalizedPosixPathRelativeToTheOpenFile: v.normalizedPosixPathRelativeToTheOpenFile })] = v;
   }
   return acc;
 }, {} as DmnEditor.ExternalModelsIndex);
diff --git a/packages/dmn-editor/src/diagram/nodes/NodeSvgs.tsx b/packages/dmn-editor/src/diagram/nodes/NodeSvgs.tsx
index 03db3ededc7..29e5baaf1b8 100644
--- a/packages/dmn-editor/src/diagram/nodes/NodeSvgs.tsx
+++ b/packages/dmn-editor/src/diagram/nodes/NodeSvgs.tsx
@@ -66,7 +66,7 @@ export function normalize<T extends NodeSvgProps>(_props: T) {
   };
 }
 
-export function InputDataNodeSvg(__props: NodeSvgProps) {
+export function InputDataNodeSvg(__props: NodeSvgProps & { isCollection?: boolean }) {
   const { strokeWidth, x, y, width, height, fillColor, strokeColor, props } = normalize(__props);
   const rx =
     typeof height === "number"
@@ -97,11 +97,12 @@ export function InputDataNodeSvg(__props: NodeSvgProps) {
         rx={rx}
         ry={ry}
       />
+      {props.isCollection && <NodeCollectionMarker {...__props} anchor={"bottom"} />}
     </>
   );
 }
 
-export function DecisionNodeSvg(__props: NodeSvgProps) {
+export function DecisionNodeSvg(__props: NodeSvgProps & { isCollection?: boolean }) {
   const { strokeWidth, x, y, width, height, fillColor, strokeColor, props } = normalize(__props);
 
   return (
@@ -117,6 +118,7 @@ export function DecisionNodeSvg(__props: NodeSvgProps) {
         strokeLinejoin={"round"}
         {...props}
       />
+      {props.isCollection && <NodeCollectionMarker {...__props} anchor="top" />}
     </>
   );
 }
@@ -378,3 +380,47 @@ export const UnknownNodeSvg = (_props: NodeSvgProps & { strokeDasharray?: string
     </>
   );
 };
+
+function NodeCollectionMarker(__props: NodeSvgProps & { anchor: "top" | "bottom" }) {
+  const { strokeWidth, x, y, width, height, fillColor, strokeColor, props } = normalize(__props);
+
+  const xPosition = x + width / 2;
+  const xSpacing = 7;
+  const y1Position = props.anchor === "bottom" ? y + height - 4 : y + 4;
+  const y2Position = props.anchor === "bottom" ? y + height - 18 : y + 18;
+
+  return (
+    <>
+      <line
+        {...props}
+        x1={xPosition - xSpacing}
+        x2={xPosition - xSpacing}
+        y1={y1Position}
+        y2={y2Position}
+        strokeWidth={strokeWidth}
+        fill={fillColor ?? DEFAULT_NODE_FILL}
+        stroke={strokeColor ?? DEFAULT_NODE_STROKE_COLOR}
+      />
+      <line
+        {...props}
+        x1={xPosition}
+        x2={xPosition}
+        y1={y1Position}
+        y2={y2Position}
+        strokeWidth={strokeWidth}
+        fill={fillColor ?? DEFAULT_NODE_FILL}
+        stroke={strokeColor ?? DEFAULT_NODE_STROKE_COLOR}
+      />
+      <line
+        {...props}
+        x1={xPosition + xSpacing}
+        x2={xPosition + xSpacing}
+        y1={y1Position}
+        y2={y2Position}
+        strokeWidth={strokeWidth}
+        fill={fillColor ?? DEFAULT_NODE_FILL}
+        stroke={strokeColor ?? DEFAULT_NODE_STROKE_COLOR}
+      />
+    </>
+  );
+}
diff --git a/packages/dmn-editor/src/diagram/nodes/Nodes.tsx b/packages/dmn-editor/src/diagram/nodes/Nodes.tsx
index 068a395eaed..1082f3aa905 100644
--- a/packages/dmn-editor/src/diagram/nodes/Nodes.tsx
+++ b/packages/dmn-editor/src/diagram/nodes/Nodes.tsx
@@ -29,7 +29,7 @@ import {
   DMNDI15__DMNShape,
 } from "@kie-tools/dmn-marshaller/dist/schemas/dmn-1_5/ts-gen/types";
 import * as React from "react";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import * as RF from "reactflow";
 import { renameDrgElement, renameGroupNode, updateTextAnnotation } from "../../mutations/renameNode";
 import { DmnEditorTab, DropTargetNode, SnapGrid, useDmnEditorStore, useDmnEditorStoreApi } from "../../store/Store";
@@ -141,8 +141,8 @@ export const InputDataNode = React.memo(
       [dmnEditorStoreApi, index, inputData]
     );
 
-    const { allFeelVariableUniqueNames } = useDmnEditorDerivedStore();
-
+    const { allFeelVariableUniqueNames, allTopLevelItemDefinitionUniqueNames, allDataTypesById } =
+      useDmnEditorDerivedStore();
     const onCreateDataType = useDataTypeCreationCallbackForNodes(index, inputData["@_name"]);
 
     const { fontCssProperties, shapeStyle } = useNodeStyle({
@@ -151,10 +151,18 @@ export const InputDataNode = React.memo(
       isEnabled: diagram.overlays.enableStyles,
     });
 
+    const isCollection = useMemo(() => {
+      return (
+        allDataTypesById.get(allTopLevelItemDefinitionUniqueNames.get(inputData.variable?.["@_typeRef"] ?? "") ?? "")
+          ?.itemDefinition?.["@_isCollection"] ?? false
+      );
+    }, [allDataTypesById, allTopLevelItemDefinitionUniqueNames, inputData.variable]);
+
     return (
       <>
         <svg className={`kie-dmn-editor--node-shape ${className} ${dmnObjectQName.prefix ? "external" : ""}`}>
           <InputDataNodeSvg
+            isCollection={isCollection}
             {...nodeDimensions}
             x={0}
             y={0}
@@ -260,7 +268,8 @@ export const DecisionNode = React.memo(
       [decision, dmnEditorStoreApi, index]
     );
 
-    const { allFeelVariableUniqueNames } = useDmnEditorDerivedStore();
+    const { allFeelVariableUniqueNames, allTopLevelItemDefinitionUniqueNames, allDataTypesById } =
+      useDmnEditorDerivedStore();
 
     const onCreateDataType = useDataTypeCreationCallbackForNodes(index, decision["@_name"]);
 
@@ -270,10 +279,18 @@ export const DecisionNode = React.memo(
       isEnabled: diagram.overlays.enableStyles,
     });
 
+    const isCollection = useMemo(() => {
+      return (
+        allDataTypesById.get(allTopLevelItemDefinitionUniqueNames.get(decision.variable?.["@_typeRef"] ?? "") ?? "")
+          ?.itemDefinition?.["@_isCollection"] ?? false
+      );
+    }, [allDataTypesById, allTopLevelItemDefinitionUniqueNames, decision.variable]);
+
     return (
       <>
         <svg className={`kie-dmn-editor--node-shape ${className} ${dmnObjectQName.prefix ? "external" : ""}`}>
           <DecisionNodeSvg
+            isCollection={isCollection}
             {...nodeDimensions}
             x={0}
             y={0}