@eccenca/gui-elements 22.1.0 → 23.0.0-rc.2

package/dist/types/extensions/react-flow/nodes/NodeTools.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { IPopoverProps as IBlueprintPopoverProps } from "@blueprintjs/core";
+import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
-export interface NodeToolsProps extends IBlueprintPopoverProps {
+export interface NodeToolsProps extends Omit<ContextOverlayProps, "children"> {
     children: string | JSX.Element;
     togglerElement?: ValidIconName | JSX.Element;
     togglerText?: string;

package/dist/types/index.d.ts

@@ -51,7 +51,7 @@ import Tag from "./components/Tag/Tag";
 import TagList from "./components/Tag/TagList";
 import Notification from "./components/Notification/Notification";
 import Toast from "./components/Notification/Toast";
-import { Select } from "@blueprintjs/select";
+import Select from "./components/Select/Select";
 import MultiSelect from "./components/MultiSelect/MultiSelect";
 import { Iframe } from "./components/Iframe/Iframe";
 import { IframeModal } from "./components/Iframe/IframeModal";
@@ -94,4 +94,5 @@ declare const Utilities: {
 export { ApplicationContainer, ApplicationHeader, ApplicationContent, ApplicationSidebarNavigation, ApplicationSidebarToggler, ApplicationTitle, ApplicationToolbar, ApplicationToolbarSection, ApplicationToolbarAction, ApplicationToolbarPanel, AutoSuggestion, AutoSuggestionList, SingleLineCodeEditor, HtmlContentBlock, OverflowText, WhiteSpaceContainer, Highlighter, Grid, GridRow, GridColumn, List, WorkspaceContent, WorkspaceMain, WorkspaceSide, WorkspaceHeader, Menu, MenuItem, MenuDivider, ContextOverlay, ContextMenu, OverviewItem, OverviewItemDepiction, OverviewItemDescription, OverviewItemLine, OverviewItemActions, OverviewItemList, TableContainer, Table, TableHead, TableRow, TableBody, TableCell, TableHeader, Icon, IconButton, Label, Button, Checkbox, RadioButton, Tabs, Tab, TabTitle, TextField, TextArea, SearchField, Switch, NumericInput, FieldItem, FieldItemRow, FieldSet, BreadcrumbList, BreadcrumbItem, Modal, SimpleDialog, AlertDialog, Card, CardHeader, CardTitle, CardOptions, CardContent, CardActions, CardActionsAux, Spacing, Divider, Tooltip, Section, SectionHeader, TitlePage, TitleMainsection, TitleSubsection, Accordion, AccordionItem, Toolbar, ToolbarSection, Tag, TagList, Pagination, Notification, Link, Spinner, PropertyName, PropertyValue, PropertyValuePair, PropertyValueList, Toast, HelperClasses, Select, // FIXME: CMEM-3742: include as own element
 MultiSelect, AutoCompleteField, ProgressBar, Iframe, IframeModal, Utilities, LegacyReplacements, };
 export * from "./cmem";
-export * from "./extensions/react-flow";
+export * from "./extensions";
+export * from "./components/interfaces";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eccenca/gui-elements",
   "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-  "version": "22.1.0",
+  "version": "23.0.0-rc.2",
   "license": "Apache-2.0",
   "homepage": "https://github.com/eccenca/gui-elements",
   "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -60,8 +60,10 @@
     "check:package": "pjv --warnings --recommendations"
   },
   "dependencies": {
-    "@blueprintjs/core": "3.49.1",
-    "@blueprintjs/select": "3.18.1",
+    "@blueprintjs/colors": "^4.1.3",
+    "@blueprintjs/core": "4.0.4",
+    "@blueprintjs/popover2": "1.0.4",
+    "@blueprintjs/select": "4.3.1",
     "@carbon/icons": "10.44.0",
     "@carbon/icons-react": "10.44.0",
     "@mavrin/remark-typograf": "^2.2.0",
@@ -110,7 +112,6 @@
     "@typescript-eslint/parser": "^4.33.0",
     "babel-jest": "^27.5.1",
     "chromatic": "^6.5.1",
-    "copyfiles": "^2.4.1",
     "css-loader": "3.4.2",
     "eslint": "^7.32.0",
     "eslint-config-react-app": "^6.0.0",
@@ -118,22 +119,27 @@
     "jest": "^26.6.3",
     "jest-environment-jsdom-fourteen": "1.0.1",
     "jest-pnp-resolver": "^1.2.1",
-    "node-sass": "4.14.1",
+    "node-sass": "6.0.1",
     "node-sass-tilde-importer": "^1.0.2",
     "package-json-validator": "^0.6.3",
     "react-app-polyfill": "^1.0.6",
     "react-lorem-ipsum": "^1.4.9",
     "regenerator-runtime": "^0.13.9",
     "rimraf": "^3.0.2",
-    "sass-loader": "8.0.2",
+    "sass-loader": "^10.3.1",
     "style-loader": "0.23.1",
     "tsc-esm-fix": "^2.13.0",
     "typescript": "4.4.4",
     "webpack": "^4.46.0"
   },
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16"
+  },
   "resolutions": {
-    "**/@blueprintjs/core": "3.49.1",
-    "**/@blueprintjs/select": "3.18.1",
+    "**/@blueprintjs/core": "4.0.4",
+    "**/@blueprintjs/popover2": "1.0.4",
+    "**/@blueprintjs/select": "4.3.1",
     "**/@carbon/icons": "10.44.0",
     "**/@carbon/icons-react": "10.44.0",
     "**/carbon-components": "10.44.0",
@@ -143,7 +149,8 @@
     "**/node-gyp": "^7.0.0",
     "**/glob-parent": "^5.1.2",
     "**/trim": "^0.0.3",
-    "**/trim-newlines": "^3.0.1"
+    "**/trim-newlines": "^3.0.1",
+    "**/minimist": "^1.2.6"
   },
   "eslintConfig": {
     "extends": [

package/src/cmem/ActivityControl/ActivityControlWidget.stories.tsx

@@ -66,10 +66,10 @@ const actions = [
 ];
 
 const commonWidgetArgs = {
-    label: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4, random: false }),
+    label: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4, random: false }).toString(),
     border: true,
     activityActions: actions,
-    statusMessage: loremIpsum({ p: 1, startWithLoremIpsum: false, random: false }),
+    statusMessage: loremIpsum({ p: 1, startWithLoremIpsum: false, random: false }).toString(),
     progressSpinner: {
         intent: "none",
         value: 0.5,

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -151,15 +151,8 @@ export function ActivityControlWidget(props: IActivityControlProps) {
                                     <Tooltip
                                         content={props.statusMessage}
                                         size="large"
-                                        tooltipProps={{
-                                            position: "top-right",
-                                            boundary: "viewport",
-                                            modifiers: {
-                                                flip: {
-                                                    enabled: false
-                                                }
-                                            }
-                                        }}
+                                        placement="top-start"
+                                        rootBoundary="viewport"
                                     >
                                         {props.statusMessage}
                                     </Tooltip>
@@ -181,9 +174,11 @@ export function ActivityControlWidget(props: IActivityControlProps) {
                                 name={action.icon}
                                 text={action.tooltip}
                                 onClick={action.action}
-                                tooltipOpenDelay={200}
                                 disabled={action.disabled}
                                 hasStateWarning={action.hasStateWarning}
+                                tooltipProps={{
+                                    hoverOpenDelay: 200
+                                }}
                             />
                         );
                     })}

package/src/cmem/react-flow/ReactFlow/ReactFlow.stories.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, FC } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { ReactFlow } from "./ReactFlow";
-import { Elements } from 'react-flow-renderer';
+import { ReactFlow, EdgeTools, NodeTools, IconButton } from "./../../../index";
+import { ReactFlowProps } from "./ReactFlow";
+import { ArrowHeadType, Elements, FlowElement, getMarkerEnd } from "react-flow-renderer";
 
 export default {
     title: "CMEM/React Flow/Configurations",
@@ -13,15 +14,16 @@ export default {
 const nodeExamples = {
     unspecified: [
         {
-            id: 1,
+            id: 'unspecified-1',
             type: "default",
             data: {
-                label: "Default ", content: "Example content.", minimalShape: "none"
+                label: "Default ", content: "Example content.", minimalShape: "none",
+                menuButtons: <NodeTools>Pass your menu here.</NodeTools>
             },
             position: { x: 200, y: 50 },
         },
         {
-            id: 2,
+            id: 'unspecified-2',
             type: "default",
             data: {
                 label: "Default ", content: "Example content.", minimalShape: "none",
@@ -30,23 +32,24 @@ const nodeExamples = {
             position: { x: 200, y: 300 },
         },
         {
-            id: 'e1', type: 'straight', label: "straight edge", arrowHeadType: "arrowclosed",source: '1', target: '2',
+            id: 'unspecified-e1', type: 'straight', label: "straight edge", arrowHeadType: "arrowclosed",source: 'unspecified-1', target: 'unspecified-2',
         },
         {
-            id: 'e2', type: 'step', label: "step edge", arrowHeadType: "arrowclosed",source: '2', target: '1',
+            id: 'unspecified-e2', type: 'step', label: "step edge", arrowHeadType: "arrowclosed",source: 'unspecified-2', target: 'unspecified-1',
         }
     ],
     linking: [
         {
-            id: 1,
+            id: 'linking-1',
             type: "sourcepath",
             data: {
-                label: "Source path", content: "Example content.", minimalShape: "none"
+                label: "Source path", content: "Example content.", minimalShape: "none",
+                menuButtons: <NodeTools>Pass your menu here.</NodeTools>
             },
             position: { x: 100, y: 50 },
         },
         {
-            id: 2,
+            id: 'linking-2',
             type: "targetpath",
             data: {
                 label: "Target path", content: "Example content.", minimalShape: "none"
@@ -54,7 +57,7 @@ const nodeExamples = {
             position: { x: 400, y: 200 },
         },
         {
-            id: 3,
+            id: 'linking-3',
             type: "transformation",
             data: {
                 label: "Transformation", content: "Example content.", minimalShape: "none"
@@ -62,7 +65,7 @@ const nodeExamples = {
             position: { x: 700, y: 50 },
         },
         {
-            id: 4,
+            id: 'linking-4',
             type: "comparator",
             data: {
                 label: "Comparation", content: "Example content.", minimalShape: "none",
@@ -71,7 +74,7 @@ const nodeExamples = {
             position: { x: 750, y: 300 },
         },
         {
-            id: 5,
+            id: 'linking-5',
             type: "aggregator",
             data: {
                 label: "Aggregation", content: "Example content.", minimalShape: "none",
@@ -79,23 +82,24 @@ const nodeExamples = {
             },
             position: { x: 50, y: 300 },
         },
-        { id: 'e1', type: 'value', label: "value edge", arrowHeadType: "arrowclosed",source: '1', target: '2' },
-        { id: 'e2', type: 'score', label: "score edge", arrowHeadType: "arrowclosed",source: '2', target: '3' },
-        { id: 'e3', type: 'success', label: "success edge", arrowHeadType: "arrowclosed",source: '3', target: '4' },
-        { id: 'e4', type: 'warning', label: "warning edge", arrowHeadType: "arrowclosed",source: '4', target: '5' },
-        { id: 'e5', type: 'danger', label: "danger edge", arrowHeadType: "arrowclosed",source: '5', target: '1' },
+        { id: 'linking-e1', type: 'value', label: "value edge", arrowHeadType: "arrowclosed",source: 'linking-1', target: 'linking-2' },
+        { id: 'linking-e2', type: 'score', label: "score edge", arrowHeadType: "arrowclosed",source: 'linking-2', target: 'linking-3' },
+        { id: 'linking-e3', type: 'success', label: "success edge", arrowHeadType: "arrowclosed",source: 'linking-3', target: 'linking-4' },
+        { id: 'linking-e4', type: 'warning', label: "warning edge", arrowHeadType: "arrowclosed",source: 'linking-4', target: 'linking-5' },
+        { id: 'linking-e5', type: 'danger', label: "danger edge", arrowHeadType: "arrowclosed",source: 'linking-5', target: 'linking-1' },
     ],
     workflow: [
         {
-            id: 1,
+            id: 'workflow-1',
             type: "dataset",
             data: {
-                label: "Dataset", content: "Example content.", minimalShape: "none"
+                label: "Dataset", content: "Example content.", minimalShape: "none",
+                menuButtons: <NodeTools>Pass your menu here.</NodeTools>
             },
             position: { x: 100, y: 50 },
         },
         {
-            id: 2,
+            id: 'workflow-2',
             type: "linking",
             data: {
                 label: "Linking", content: "Example content.", minimalShape: "none"
@@ -103,7 +107,7 @@ const nodeExamples = {
             position: { x: 400, y: 200 },
         },
         {
-            id: 3,
+            id: 'workflow-3',
             type: "transform",
             data: {
                 label: "Transform", content: "Example content.", minimalShape: "none"
@@ -111,7 +115,7 @@ const nodeExamples = {
             position: { x: 700, y: 50 },
         },
         {
-            id: 4,
+            id: 'workflow-4',
             type: "task",
             data: {
                 label: "Task", content: "Example content.", minimalShape: "none",
@@ -120,7 +124,7 @@ const nodeExamples = {
             position: { x: 750, y: 300 },
         },
         {
-            id: 5,
+            id: 'workflow-5',
             type: "workflow",
             data: {
                 label: "Workflow", content: "Example content.", minimalShape: "none",
@@ -128,23 +132,24 @@ const nodeExamples = {
             },
             position: { x: 50, y: 300 },
         },
-        { id: 'e1', arrowHeadType: "arrowclosed",source: '1', target: '2' },
-        { id: 'e2', arrowHeadType: "arrowclosed",source: '2', target: '3' },
-        { id: 'e3', type: 'success', label: "success edge", arrowHeadType: "arrowclosed",source: '3', target: '4' },
-        { id: 'e4', type: 'warning', label: "warning edge", arrowHeadType: "arrowclosed",source: '4', target: '5' },
-        { id: 'e5', type: 'danger', label: "danger edge", arrowHeadType: "arrowclosed",source: '5', target: '1' },
+        { id: 'workflow-e1', arrowHeadType: "arrowclosed",source: 'workflow-1', target: 'workflow-2' },
+        { id: 'workflow-e2', arrowHeadType: "arrowclosed",source: 'workflow-2', target: 'workflow-3' },
+        { id: 'workflow-e3', type: 'success', label: "success edge", arrowHeadType: "arrowclosed",source: 'workflow-3', target: 'workflow-4' },
+        { id: 'workflow-e4', type: 'warning', label: "warning edge", arrowHeadType: "arrowclosed",source: 'workflow-4', target: 'workflow-5' },
+        { id: 'workflow-e5', type: 'danger', label: "danger edge", arrowHeadType: "arrowclosed",source: 'workflow-5', target: 'workflow-1' },
     ],
     graph: [
         {
-            id: 1,
+            id: 'graph-1',
             type: "default",
             data: {
-                label: "Default ", content: "Example content.", minimalShape: "none"
+                label: "Default ", content: "Example content.", minimalShape: "none",
+                menuButtons: <NodeTools>Pass your menu here.</NodeTools>
             },
             position: { x: 100, y: 50 },
         },
         {
-            id: 2,
+            id: 'graph-2',
             type: "graph",
             data: {
                 label: "Graph", content: "Example content.", minimalShape: "none"
@@ -152,7 +157,7 @@ const nodeExamples = {
             position: { x: 400, y: 200 },
         },
         {
-            id: 3,
+            id: 'graph-3',
             type: "class",
             data: {
                 label: "Class", content: "Example content.", minimalShape: "none"
@@ -160,7 +165,7 @@ const nodeExamples = {
             position: { x: 700, y: 50 },
         },
         {
-            id: 4,
+            id: 'graph-4',
             type: "instance",
             data: {
                 label: "Instance", content: "Example content.", minimalShape: "none",
@@ -169,7 +174,7 @@ const nodeExamples = {
             position: { x: 750, y: 300 },
         },
         {
-            id: 5,
+            id: 'graph-5',
             type: "property",
             data: {
                 label: "Property", content: "Example content.", minimalShape: "none",
@@ -177,23 +182,122 @@ const nodeExamples = {
             },
             position: { x: 50, y: 300 },
         },
-        { id: 'e1', type: 'implicit', label: "implicit edge", arrowHeadType: "arrowclosed",source: '1', target: '2' },
-        { id: 'e2', type: 'import', label: "import edge", arrowHeadType: "arrowclosed",source: '2', target: '3' },
-        { id: 'e3', type: 'subclass', label: "subclass edge", arrowHeadType: "arrowclosed",source: '3', target: '4' },
-        { id: 'e4', type: 'subproperty', label: "subproperty edge", arrowHeadType: "arrowclosed",source: '4', target: '5' },
-        { id: 'e5', type: 'rdftype', label: "rdftype edge", arrowHeadType: "arrowclosed",source: '5', target: '1' },
+        { id: 'graph-e1', type: 'implicit', label: "implicit edge", arrowHeadType: "arrowclosed",source: 'graph-1', target: 'graph-2' },
+        { id: 'graph-e2', type: 'import', label: "import edge", arrowHeadType: "arrowclosed",source: 'graph-2', target: 'graph-3' },
+        { id: 'graph-e3', type: 'subclass', label: "subclass edge", arrowHeadType: "arrowclosed",source: 'graph-3', target: 'graph-4' },
+        { id: 'graph-e4', type: 'subproperty', label: "subproperty edge", arrowHeadType: "arrowclosed",source: 'graph-4', target: 'graph-5' },
+        { id: 'graph-e5', type: 'rdftype', label: "rdftype edge", arrowHeadType: "arrowclosed",source: 'graph-5', target: 'graph-1' },
+    ],
+    inverseEdge: [
+        {
+            id: 'inverseEdge-1',
+            type: "default",
+            data: {
+                label: "Default ", content: "Example content.", minimalShape: "none"
+            },
+            position: { x: 200, y: 50 },
+        },
+        {
+            id: 'inverseEdge-2',
+            type: "default",
+            data: {
+                label: "Default ", content: "Example content.", minimalShape: "none",
+                handles: [ { type: "source", position: "left" }, { type: "target", position: "right" } ],
+                inversePath: true,
+            },
+            position: { x: 200, y: 300 },
+        },
+        {
+            id: 'inverseEdge-e1', type: 'straight', label: "straight edge", arrowHeadType: "arrowclosed",source: 'inverseEdge-1', target: 'inverseEdge-2',
+        },
+        {
+            id: 'inverseEdge-e2', type: 'default', label: "inverse edge", source: 'inverseEdge-2', target: 'inverseEdge-1',
+            data: {
+                markerStart: getMarkerEnd(
+                    `${ArrowHeadType.ArrowClosed}-inverse` as ArrowHeadType
+                ),
+            }
+        }
     ],
+    customLabel: [
+        {
+            id: 'customLabel-1',
+            type: "default",
+            data: {
+                label: "Default ", content: "Example content.", minimalShape: "none"
+            },
+            position: { x: 200, y: 50 },
+        },
+        {
+            id: 'customLabel-2',
+            type: "default",
+            data: {
+                label: "Default ", content: "Example content.", minimalShape: "none",
+                handles: [ { type: "source", position: "left" }, { type: "target", position: "right" } ],
+                inversePath: true,
+            },
+            position: { x: 200, y: 300 },
+        },
+        {
+            id: 'customLabel-e1', type: 'straight', label: "straight edge", arrowHeadType: "arrowclosed", source: 'customLabel-1', target: 'customLabel-2',
+        },
+        {
+            id: 'customLabel-e2', type: 'default', label: "custom edge", arrowHeadType: "arrowclosed", source: 'customLabel-2', target: 'customLabel-1',
+            data: {
+                renderLabel: (
+                    edgeCenter: [number, number, number, number]
+                ) => (
+                    <foreignObject
+                        width={30}
+                        height={30}
+                        x={edgeCenter[0] - 15}
+                        y={edgeCenter[1] - 15}
+                        className="instance-viz-multiedge"
+                        requiredExtensions="http://www.w3.org/1999/xhtml"
+                    >
+                        <body>
+                            <IconButton name="navigation-close" />
+                        </body>
+                    </foreignObject>
+                )
+            }
+        }
+    ]
 }
 
-const ReactFlowExample = (args) => {
+const ReactFlowExample: FC<ReactFlowProps> = (args) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
     const [elements, setElements] = useState([] as Elements);
-    //const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
+    const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
 
     useEffect(() => {
-        setElements(nodeExamples[args.configuration] as Elements);
+        setElements(nodeExamples[args.configuration ?? "unspecified"] as Elements);
     }, [args]);
 
+    // Helper methods for nodes and edges
+    const isNode = (element: FlowElement & { source?: string }): boolean =>
+        !element.source;
+    const isEdge = (element: FlowElement & { source?: string }): boolean =>
+        !isNode(element);
+
+    // Fired when clicked on any elements, e.g. edge or node. Used to show the edge menu.
+    const onElementClick = React.useCallback((event, element) => {
+        if (isEdge(element)) {
+            event.preventDefault();
+            setEdgeTools(
+                <EdgeTools
+                    posOffset={{ left: event.clientX, top: event.clientY }}
+                    onClose={() => {
+                        setEdgeTools(<></>);
+                    }}
+                >
+                    EdgeTools demo,
+                    add elements here.
+                </EdgeTools>
+            );
+        }
+    }, []);
+
     const onLoad = useCallback(
         (rfi) => {
             if (!reactflowInstance) {
@@ -203,13 +307,18 @@ const ReactFlowExample = (args) => {
         [reactflowInstance]
     );
 
-    return <ReactFlow
-        configuration={args.configuration}
-        elements={elements}
-        style={{ height: '400px' }}
-        onLoad={onLoad}
-        defaultZoom={1}
-    />
+    return <>
+        <ReactFlow
+            configuration={args.configuration}
+            elements={elements}
+            style={{ height: '400px' }}
+            onLoad={onLoad}
+            defaultZoom={1}
+            onElementClick={onElementClick}
+            onEdgeContextMenu={onElementClick}
+        />
+        {edgeTools}
+    </>
 }
 
 const Template: ComponentStory<typeof ReactFlow> = (args) => (

package/src/cmem/react-flow/ReactFlow/ReactFlow.tsx

@@ -1,15 +1,18 @@
 import React from "react";
 import {default as ReactFlowOriginal, ReactFlowProps as ReactFlowOriginalProps} from "react-flow-renderer";
+import { ReactFlowMarkers } from "../../../extensions/react-flow/markers/ReactFlowMarkers";
 import * as unspecifiedConfig from "./../configuration/unspecified";
 import * as graphConfig from "./../configuration/graph";
 import * as workflowConfig from "./../configuration/workflow";
 import * as linkingConfig from "./../configuration/linking";
+import * as inverseEdgeConfig from "./../configuration/inverseEdge";
+import * as customLabelConfig from "./../configuration/customLabel";
 
-interface ReactFlowProps extends ReactFlowOriginalProps {
+export interface ReactFlowProps extends ReactFlowOriginalProps {
     /**
      * Load `ReactFlow` component with pre-configured values for `nodeTypes` and `edgeTypes`
      */
-    configuration?: "unspecified" | "graph" | "workflow" | "linking";
+    configuration?: "unspecified" | "graph" | "workflow" | "linking" | "inverseEdge" | "customLabel";
 }
 
 /**
@@ -19,6 +22,7 @@ interface ReactFlowProps extends ReactFlowOriginalProps {
 export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
     {
         configuration = "unspecified",
+        children,
         ...originalProps
     },
     ref) => {
@@ -27,6 +31,8 @@ export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
         graph: graphConfig,
         workflow: workflowConfig,
         linking: linkingConfig,
+        inverseEdge: inverseEdgeConfig,
+        customLabel: customLabelConfig,
     }
 
     return (
@@ -35,6 +41,9 @@ export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
             nodeTypes={ configReactFlow[configuration].nodeTypes }
             edgeTypes={ configReactFlow[configuration].edgeTypes }
             {...originalProps}
-        />
+        >
+            { children }
+            <ReactFlowMarkers />
+        </ReactFlowOriginal>
     );
 })

package/src/cmem/react-flow/configuration/_colors-graph.scss

@@ -0,0 +1,35 @@
+$reactflow-color-graph-node: #745a85 !default;
+$reactflow-color-class-node: #3a7896 !default;
+$reactflow-color-instance-node: #0097a7 !default;
+$reactflow-color-property-node: #ffd54f !default;
+
+$reactflow-color-implicit-edge: #ae3c74 !default;
+$reactflow-color-import-edge: $reactflow-color-graph-node !default;
+$reactflow-color-subclass-edge: $reactflow-color-class-node !default;
+$reactflow-color-subproperty-edge: $reactflow-color-property-node !default;
+$reactflow-color-rdftype-edge: $reactflow-color-instance-node !default;
+
+@function bright($color) {
+    @return mix($color, #fff, 24%);
+}
+
+.#{eccgui}-configuration--colors__react-flow-graph {
+    --graphNode: #{$reactflow-color-graph-node};
+    --classNode: #{$reactflow-color-class-node};
+    --instanceNode: #{$reactflow-color-instance-node};
+    --propertyNode: #{$reactflow-color-property-node};
+    --implicitEdge: #{$reactflow-color-implicit-edge};
+    --importEdge: #{$reactflow-color-import-edge};
+    --subclassEdge: #{$reactflow-color-subclass-edge};
+    --subpropertyEdge: #{$reactflow-color-subproperty-edge};
+    --rdftypeEdge: #{$reactflow-color-rdftype-edge};
+    --graphNodeBright: #{bright($reactflow-color-graph-node)};
+    --classNodeBright: #{bright($reactflow-color-class-node)};
+    --instanceNodeBright: #{bright($reactflow-color-instance-node)};
+    --propertyNodeBright: #{bright($reactflow-color-property-node)};
+    --implicitEdgeBright: #{bright($reactflow-color-implicit-edge)};
+    --importEdgeBright: #{bright($reactflow-color-import-edge)};
+    --subclassEdgeBright: #{bright($reactflow-color-subclass-edge)};
+    --subpropertyEdgeBright: #{bright($reactflow-color-subproperty-edge)};
+    --rdftypeEdgeBright: #{bright($reactflow-color-rdftype-edge)};
+}

package/src/cmem/react-flow/configuration/_colors-linking.scss

@@ -0,0 +1,29 @@
+$reactflow-color-sourcepath-node: #745a85 !default;
+$reactflow-color-targetpath-node: #3a7896 !default;
+$reactflow-color-transformation-node: #ae3c74 !default;
+$reactflow-color-comparator-node: #40a691 !default;
+$reactflow-color-aggregator-node: #0097a7 !default;
+
+$reactflow-color-value-edge: #222 !default;
+$reactflow-color-score-edge: $reactflow-color-aggregator-node !default;
+
+@function bright($color) {
+    @return mix($color, #fff, 24%);
+}
+
+.#{eccgui}-configuration--colors__react-flow-linking {
+    --sourcepathNode: #{$reactflow-color-sourcepath-node};
+    --targetpathNode: #{$reactflow-color-targetpath-node};
+    --transformationNode: #{$reactflow-color-transformation-node};
+    --comparatorNode: #{$reactflow-color-comparator-node};
+    --aggregatorNode: #{$reactflow-color-aggregator-node};
+    --valueEdge: #{$reactflow-color-value-edge};
+    --scoreEdge: #{$reactflow-color-score-edge};
+    --sourcepathNodeBright: #{bright($reactflow-color-sourcepath-node)};
+    --targetpathNodeBright: #{bright($reactflow-color-targetpath-node)};
+    --transformationNodeBright: #{bright($reactflow-color-transformation-node)};
+    --comparatorNodeBright: #{bright($reactflow-color-comparator-node)};
+    --aggregatorNodeBright: #{bright($reactflow-color-aggregator-node)};
+    --valueEdgeBright: #{bright($reactflow-color-value-edge)};
+    --scoreEdgeBright: #{bright($reactflow-color-score-edge)};
+}

package/src/cmem/react-flow/configuration/_colors-workflow.scss

@@ -0,0 +1,22 @@
+$reactflow-color-dataset-node: #3a7896 !default;
+$reactflow-color-linking-node: #0097a7 !default;
+$reactflow-color-transform-node: #40a691 !default;
+$reactflow-color-task-node: #80b67b !default;
+$reactflow-color-workflow-node: #745a85 !default;
+
+@function bright($color) {
+    @return mix($color, #fff, 24%);
+}
+
+.#{eccgui}-configuration--colors__react-flow-workflow {
+    --datasetNode: #{$reactflow-color-dataset-node};
+    --linkingNode: #{$reactflow-color-linking-node};
+    --transformNode: #{$reactflow-color-transform-node};
+    --taskNode: #{$reactflow-color-task-node};
+    --workflowNode: #{$reactflow-color-workflow-node};
+    --datasetNodeBright: #{bright($reactflow-color-dataset-node)};
+    --linkingNodeBright: #{bright($reactflow-color-linking-node)};
+    --transformNodeBright: #{bright($reactflow-color-transform-node)};
+    --taskNodeBright: #{bright($reactflow-color-task-node)};
+    --workflowNodeBright: #{bright($reactflow-color-workflow-node)};
+}

package/src/cmem/react-flow/configuration/_colors.scss

@@ -1,3 +1,3 @@
-@import "colors-graph.module";
-@import "colors-workflow.module";
-@import "colors-linking.module";
+@import "colors-graph";
+@import "colors-workflow";
+@import "colors-linking";