@eccenca/gui-elements 23.0.0-rc.0 → 23.0.0-rc.3-unofficial.0

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/StickyNoteModal/StickyNoteModal.tsx

@@ -0,0 +1,134 @@
+import React from "react";
+import { Tag, TagList, SimpleDialog, Icon, Button, FieldItem } from "./../../../index";
+import getColorConfiguration from "../../../common/utils/getColorConfiguration";
+import { CodeEditor } from "../../../extensions";
+
+export type StickyNoteModalTranslationKeys = "modalTitle" | "noteLabel" | "colorLabel" | "saveButton" | "cancelButton";
+
+export type StickyNoteMetadataType = { note: string; color: string };
+
+export interface StickyNoteModalProps {
+    /**
+     * sticky data containing the sticky note and the selected color
+     */
+    metaData?: StickyNoteMetadataType;
+    /**
+     * utility to close the sticky note modal when cancelled as well as closed also
+     */
+    onClose: () => void;
+    /**
+     * utility to save recently entered metadata for sticky
+     *  note and add on to the canvas
+     */
+    onSubmit: (data: StickyNoteMetadataType) => void;
+    /**
+     * translation utility for language compatibility
+     */
+    translate: (key: StickyNoteModalTranslationKeys) => string;
+}
+
+export const StickyNoteModal: React.FC<StickyNoteModalProps> = ({ metaData, onClose, onSubmit, translate }) => {
+    const refNote = React.useRef<string>(metaData?.note ?? "");
+    const [color, setSelectedColor] = React.useState<string>(metaData?.color ?? "");
+    const noteColors: [string, string][] = Object.entries(getColorConfiguration("stickynotes")).map(([key, value]) => [
+        key,
+        value as string,
+    ]);
+
+    React.useEffect(() => {
+        if (!color && noteColors[0][1]) {
+            setSelectedColor(noteColors[0][1]);
+        }
+    }, [color, noteColors]);
+
+    const wrapperDivProps: { [key: string]: (event: any) => any } = {
+        // Prevent react-flow from getting these events
+        onContextMenu: (event) => event.stopPropagation(),
+        onDrag: (event) => event.stopPropagation(),
+        onDragStart: (event) => event.stopPropagation(),
+        onDragEnd: (event) => event.stopPropagation(),
+        onMouseDown: (event) => event.stopPropagation(),
+        onMouseUp: (event) => event.stopPropagation(),
+        onClick: (event) => event.stopPropagation(),
+    };
+
+    const predefinedColorsMenu = (
+        <TagList>
+            {noteColors &&
+                noteColors.map(([colorName, colorValue]) => {
+                    const selectedFeedback =
+                        color === colorValue
+                            ? {
+                                  icon: <Icon name="state-checkedsimple" />,
+                                  large: true,
+                              }
+                            : {};
+                    return (
+                        <Tag
+                            round
+                            onClick={() => setSelectedColor(colorValue)}
+                            backgroundColor={colorValue}
+                            {...selectedFeedback}
+                            key={colorName}
+                        />
+                    );
+                })}
+        </TagList>
+    );
+
+    return (
+        <SimpleDialog
+            data-test-id={"sticky-note-modal"}
+            size="small"
+            title={translate("modalTitle")}
+            hasBorder
+            isOpen
+            onClose={onClose}
+            wrapperDivProps={wrapperDivProps}
+            actions={[
+                <Button
+                    key="submit"
+                    data-test-id="sticky-submit-btn"
+                    affirmative
+                    onClick={() => {
+                        onSubmit({ note: refNote.current, color: color || "#444444" });
+                        onClose();
+                    }}
+                >
+                    {translate("saveButton")}
+                </Button>,
+                <Button key="cancel" onClick={onClose}>
+                    {translate("cancelButton")}
+                </Button>,
+            ]}
+        >
+            <FieldItem
+                key="note"
+                labelProps={{
+                    htmlFor: "noteinput",
+                    text: translate("noteLabel"),
+                }}
+            >
+                <CodeEditor
+                    name={translate("noteLabel")}
+                    id={"sticky-note-input"}
+                    mode="markdown"
+                    preventLineNumbers
+                    onChange={(value) => {
+                        refNote.current = value;
+                    }}
+                    defaultValue={refNote.current}
+                />
+            </FieldItem>
+            <FieldItem
+                key="color"
+                labelProps={{
+                    htmlFor: "colorinput",
+                    text: translate("colorLabel"),
+                }}
+            >
+                {predefinedColorsMenu}
+            </FieldItem>
+        </SimpleDialog>
+    );
+};

package/src/cmem/react-flow/_index.scss

@@ -2,4 +2,4 @@
 @import "edges";
 @import "handles";
 @import "minimap";
-@import "nodes";
+@import "./nodes";

package/src/cmem/react-flow/_minimap.scss

@@ -5,8 +5,12 @@
 }
 
 @mixin mapcoloring($color) {
-    fill: $color;
-    stroke: $color;
+    &:not([fill]) {
+        fill: $color;
+    }
+    &:not([stroke]) {
+        stroke: $color;
+    }
 }
 
 // Graph node type

package/src/cmem/react-flow/configuration/customLabel.ts

@@ -0,0 +1,11 @@
+import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
+import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
+
+export const edgeTypes = {
+    default: EdgeDefault,
+    straight: EdgeDefault,
+};
+
+export const nodeTypes = {
+    default: NodeDefault,
+};

package/src/cmem/react-flow/configuration/graph.ts

@@ -1,5 +1,6 @@
 import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
+import { GRAPH_NODE_TYPES } from "./typing";
 
 const edgeTypes = {
     default: EdgeDefault,
@@ -13,7 +14,7 @@ const edgeTypes = {
     danger: EdgeDefault,
 };
 
-const nodeTypes = {
+const nodeTypes: Record<GRAPH_NODE_TYPES, React.ReactNode> = {
     default: NodeDefault,
     graph: NodeDefault,
     class: NodeDefault,
@@ -21,7 +22,4 @@ const nodeTypes = {
     property: NodeDefault,
 };
 
- export {
-     edgeTypes,
-     nodeTypes,
- }
+export { edgeTypes, nodeTypes };

package/src/cmem/react-flow/configuration/inverseEdge.ts

@@ -0,0 +1,11 @@
+import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
+import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
+
+export const edgeTypes = {
+    default: EdgeDefault,
+    straight: EdgeDefault,
+};
+
+export const nodeTypes = {
+    default: NodeDefault,
+};

package/src/cmem/react-flow/configuration/linking.ts

@@ -1,6 +1,7 @@
-
 import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
+import { StickyNoteNode } from "./../nodes/StickyNoteNode";
+import { LINKING_NODE_TYPES } from "./typing";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -11,16 +12,14 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes = {
+const nodeTypes: Record<LINKING_NODE_TYPES, React.ReactNode> = {
     default: NodeDefault,
     sourcepath: NodeDefault,
     targetpath: NodeDefault,
     transformation: NodeDefault,
     comparator: NodeDefault,
     aggregator: NodeDefault,
+    stickynote: StickyNoteNode,
 };
 
- export {
-     edgeTypes,
-     nodeTypes,
- }
+export { edgeTypes, nodeTypes };