@eccenca/gui-elements 22.0.1 → 22.1.0-rc.0

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

@@ -0,0 +1,222 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ReactFlow } from "./ReactFlow";
+import { Elements } from 'react-flow-renderer';
+
+export default {
+    title: "CMEM/React Flow/Configurations",
+    component: ReactFlow,
+    argTypes: {
+    },
+} as ComponentMeta<typeof ReactFlow>;
+
+const nodeExamples = {
+    unspecified: [
+        {
+            id: 1,
+            type: "default",
+            data: {
+                label: "Default ", content: "Example content.", minimalShape: "none"
+            },
+            position: { x: 200, y: 50 },
+        },
+        {
+            id: 2,
+            type: "default",
+            data: {
+                label: "Default ", content: "Example content.", minimalShape: "none",
+                handles: [ { type: "source", position: "left" }, { type: "target", position: "right" } ]
+            },
+            position: { x: 200, y: 300 },
+        },
+        {
+            id: 'e1', type: 'straight', label: "straight edge", arrowHeadType: "arrowclosed",source: '1', target: '2',
+        },
+        {
+            id: 'e2', type: 'step', label: "step edge", arrowHeadType: "arrowclosed",source: '2', target: '1',
+        }
+    ],
+    linking: [
+        {
+            id: 1,
+            type: "sourcepath",
+            data: {
+                label: "Source path", content: "Example content.", minimalShape: "none"
+            },
+            position: { x: 100, y: 50 },
+        },
+        {
+            id: 2,
+            type: "targetpath",
+            data: {
+                label: "Target path", content: "Example content.", minimalShape: "none"
+            },
+            position: { x: 400, y: 200 },
+        },
+        {
+            id: 3,
+            type: "transformation",
+            data: {
+                label: "Transformation", content: "Example content.", minimalShape: "none"
+            },
+            position: { x: 700, y: 50 },
+        },
+        {
+            id: 4,
+            type: "comparator",
+            data: {
+                label: "Comparation", content: "Example content.", minimalShape: "none",
+                handles: [ { type: "source", position: "left" }, { type: "target", position: "right" } ]
+            },
+            position: { x: 750, y: 300 },
+        },
+        {
+            id: 5,
+            type: "aggregator",
+            data: {
+                label: "Aggregation", content: "Example content.", minimalShape: "none",
+                handles: [ { type: "source", position: "left" }, { type: "target", position: "right" } ]
+            },
+            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' },
+    ],
+    workflow: [
+        {
+            id: 1,
+            type: "dataset",
+            data: {
+                label: "Dataset", content: "Example content.", minimalShape: "none"
+            },
+            position: { x: 100, y: 50 },
+        },
+        {
+            id: 2,
+            type: "linking",
+            data: {
+                label: "Linking", content: "Example content.", minimalShape: "none"
+            },
+            position: { x: 400, y: 200 },
+        },
+        {
+            id: 3,
+            type: "transform",
+            data: {
+                label: "Transform", content: "Example content.", minimalShape: "none"
+            },
+            position: { x: 700, y: 50 },
+        },
+        {
+            id: 4,
+            type: "task",
+            data: {
+                label: "Task", content: "Example content.", minimalShape: "none",
+                handles: [ { type: "source", position: "left" }, { type: "target", position: "right" } ]
+            },
+            position: { x: 750, y: 300 },
+        },
+        {
+            id: 5,
+            type: "workflow",
+            data: {
+                label: "Workflow", content: "Example content.", minimalShape: "none",
+                handles: [ { type: "source", position: "left" }, { type: "target", position: "right" } ]
+            },
+            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' },
+    ],
+    graph: [
+        {
+            id: 1,
+            type: "default",
+            data: {
+                label: "Default ", content: "Example content.", minimalShape: "none"
+            },
+            position: { x: 100, y: 50 },
+        },
+        {
+            id: 2,
+            type: "graph",
+            data: {
+                label: "Graph", content: "Example content.", minimalShape: "none"
+            },
+            position: { x: 400, y: 200 },
+        },
+        {
+            id: 3,
+            type: "class",
+            data: {
+                label: "Class", content: "Example content.", minimalShape: "none"
+            },
+            position: { x: 700, y: 50 },
+        },
+        {
+            id: 4,
+            type: "instance",
+            data: {
+                label: "Instance", content: "Example content.", minimalShape: "none",
+                handles: [ { type: "source", position: "left" }, { type: "target", position: "right" } ]
+            },
+            position: { x: 750, y: 300 },
+        },
+        {
+            id: 5,
+            type: "property",
+            data: {
+                label: "Property", content: "Example content.", minimalShape: "none",
+                handles: [ { type: "source", position: "left" }, { type: "target", position: "right" } ]
+            },
+            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' },
+    ],
+}
+
+const ReactFlowExample = (args) => {
+    const [reactflowInstance, setReactflowInstance] = useState(null);
+    const [elements, setElements] = useState([] as Elements);
+    //const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
+
+    useEffect(() => {
+        setElements(nodeExamples[args.configuration] as Elements);
+    }, [args]);
+
+    const onLoad = useCallback(
+        (rfi) => {
+            if (!reactflowInstance) {
+                setReactflowInstance(rfi);
+            }
+        },
+        [reactflowInstance]
+    );
+
+    return <ReactFlow
+        configuration={args.configuration}
+        elements={elements}
+        style={{ height: '400px' }}
+        onLoad={onLoad}
+        defaultZoom={1}
+    />
+}
+
+const Template: ComponentStory<typeof ReactFlow> = (args) => (
+    <ReactFlowExample {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    configuration: "unspecified",
+};

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

@@ -0,0 +1,40 @@
+import React from "react";
+import {default as ReactFlowOriginal, ReactFlowProps as ReactFlowOriginalProps} from "react-flow-renderer";
+import * as unspecifiedConfig from "./../configuration/unspecified";
+import * as graphConfig from "./../configuration/graph";
+import * as workflowConfig from "./../configuration/workflow";
+import * as linkingConfig from "./../configuration/linking";
+
+interface ReactFlowProps extends ReactFlowOriginalProps {
+    /**
+     * Load `ReactFlow` component with pre-configured values for `nodeTypes` and `edgeTypes`
+     */
+    configuration?: "unspecified" | "graph" | "workflow" | "linking";
+}
+
+/**
+ * `ReactFlow` container extension that includes pre-configured nodes and edges for
+ * Corporate Memory tools.
+ */
+export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
+    {
+        configuration = "unspecified",
+        ...originalProps
+    },
+    ref) => {
+    const configReactFlow = {
+        unspecified: unspecifiedConfig,
+        graph: graphConfig,
+        workflow: workflowConfig,
+        linking: linkingConfig,
+    }
+
+    return (
+        <ReactFlowOriginal
+            ref={ref}
+            nodeTypes={ configReactFlow[configuration].nodeTypes }
+            edgeTypes={ configReactFlow[configuration].edgeTypes }
+            {...originalProps}
+        />
+    );
+})

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

@@ -0,0 +1,23 @@
+@mixin edgetypestyles($type, $color) {
+    .react-flow__edge-#{$type} {
+        @include edgecoloring($color);
+    }
+}
+
+@mixin edgecoloring($color) {
+    stroke: $color;
+    color: $color;
+}
+
+// Graph edge types
+
+@include edgetypestyles("implicit", $reactflow-color-implicit-edge);
+@include edgetypestyles("import", $reactflow-color-import-edge);
+@include edgetypestyles("subclass", $reactflow-color-subclass-edge);
+@include edgetypestyles("subproperty", $reactflow-color-subproperty-edge);
+@include edgetypestyles("rdftype", $reactflow-color-rdftype-edge);
+
+// Linking edge types
+
+@include edgetypestyles("value", $reactflow-color-value-edge);
+@include edgetypestyles("score", $reactflow-color-score-edge);

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

@@ -0,0 +1,34 @@
+@mixin handletypestyles($type, $color) {
+    .react-flow__node-#{$type} {
+        @include handlecoloring($color);
+    }
+}
+
+@mixin handlecoloring($color) {
+    .react-flow__handle {
+        color: $color;
+    }
+}
+
+// Graph handle types
+
+@include handletypestyles("graph", $reactflow-color-graph-node);
+@include handletypestyles("class", $reactflow-color-class-node);
+@include handletypestyles("instance", $reactflow-color-instance-node);
+@include handletypestyles("property", $reactflow-color-property-node);
+
+// Workflow handle types
+
+@include handletypestyles("dataset", $reactflow-color-dataset-node);
+@include handletypestyles("linking", $reactflow-color-linking-node);
+@include handletypestyles("transform", $reactflow-color-transform-node);
+@include handletypestyles("task", $reactflow-color-task-node);
+@include handletypestyles("workflow", $reactflow-color-workflow-node);
+
+// Linking handle types
+
+@include handletypestyles("sourcepath", $reactflow-color-sourcepath-node);
+@include handletypestyles("targetpath", $reactflow-color-targetpath-node);
+@include handletypestyles("transformation", $reactflow-color-transformation-node);
+@include handletypestyles("comparator", $reactflow-color-comparator-node);
+@include handletypestyles("aggregator", $reactflow-color-aggregator-node);

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

@@ -0,0 +1,5 @@
+@import "./configuration/colors";
+@import "edges";
+@import "handles";
+@import "minimap";
+@import "nodes";

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

@@ -0,0 +1,33 @@
+@mixin mapnodestyles($type, $color) {
+    .#{$eccgui}-graphviz__minimap__node--#{$type} {
+        @include mapcoloring($color);
+    }
+}
+
+@mixin mapcoloring($color) {
+    fill: $color;
+    stroke: $color;
+}
+
+// Graph node type
+
+@include mapnodestyles("graph", $reactflow-color-graph-node);
+@include mapnodestyles("class", $reactflow-color-class-node);
+@include mapnodestyles("instance", $reactflow-color-instance-node);
+@include mapnodestyles("property", $reactflow-color-property-node);
+
+// Workflow node types
+
+@include mapnodestyles("dataset", $reactflow-color-dataset-node);
+@include mapnodestyles("linking", $reactflow-color-linking-node);
+@include mapnodestyles("transform", $reactflow-color-transform-node);
+@include mapnodestyles("task", $reactflow-color-task-node);
+@include mapnodestyles("workflow", $reactflow-color-workflow-node);
+
+// Linking node types
+
+@include mapnodestyles("sourcepath", $reactflow-color-sourcepath-node);
+@include mapnodestyles("targetpath", $reactflow-color-targetpath-node);
+@include mapnodestyles("transformation", $reactflow-color-transformation-node);
+@include mapnodestyles("comparator", $reactflow-color-comparator-node);
+@include mapnodestyles("aggregator", $reactflow-color-aggregator-node);

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

@@ -0,0 +1,60 @@
+@mixin nodetypestyles($type, $color) {
+    .react-flow__node-#{$type} {
+        @include nodecoloring($color);
+    }
+}
+
+@mixin nodecoloring($color) {
+    .#{$eccgui}-graphviz__node {
+        border-color: $color;
+        background-color: mix($color, #fff, 24%);
+    }
+    .#{$eccgui}-graphviz__node__extension--expanded {
+        border-color: $color;
+    }
+}
+
+// Graph node types
+
+.react-flow__node-graph {
+    @include nodecoloring($reactflow-color-graph-node);
+    .#{$eccgui}-graphviz__node {
+        border-style: double;
+        border-width: 3 * $reactflow-node-border-width;
+    }
+    .#{$eccgui}-graphviz__node__extension--expanded {
+        border-style: double;
+        border-width: 3 * $reactflow-node-border-width;
+        left: -3 * $reactflow-node-border-width;
+        right: -3 * $reactflow-node-border-width;
+    }
+}
+
+@include nodetypestyles("class", $reactflow-color-class-node);
+@include nodetypestyles("instance", $reactflow-color-instance-node);
+
+.react-flow__node-property {
+    @include nodecoloring($reactflow-color-property-node);
+    .#{$eccgui}-graphviz__node {
+        border-style: dashed;
+    }
+    .#{$eccgui}-graphviz__node__extension--expanded {
+        border-style: dashed;
+    }
+}
+
+// Workflow node types
+
+@include nodetypestyles("dataset", $reactflow-color-dataset-node);
+@include nodetypestyles("linking", $reactflow-color-linking-node);
+@include nodetypestyles("transform", $reactflow-color-transform-node);
+@include nodetypestyles("task", $reactflow-color-task-node);
+@include nodetypestyles("workflow", $reactflow-color-workflow-node);
+
+// Linking node types
+
+@include nodetypestyles("sourcepath", $reactflow-color-sourcepath-node);
+@include nodetypestyles("targetpath", $reactflow-color-targetpath-node);
+@include nodetypestyles("transformation", $reactflow-color-transformation-node);
+@include nodetypestyles("comparator", $reactflow-color-comparator-node);
+@include nodetypestyles("aggregator", $reactflow-color-aggregator-node);

package/src/cmem/react-flow/configuration/_colors-graph.module.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%);
+}
+
+:export {
+    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.module.scss

@@ -0,0 +1,29 @@
+$reactflow-color-sourcepath-node: #745a85 !default;
+$reactflow-color-targetpath-node: #3a7896 !default;
+$reactflow-color-transformation-node: #c1c1c1 !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%);
+}
+
+:export {
+    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.module.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%);
+}
+
+:export {
+    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

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

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

@@ -0,0 +1,29 @@
+import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
+import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
+import colors from "./_colors-graph.module.scss";
+
+const edgeTypes = {
+    default: EdgeDefault,
+    implicit: EdgeDefault,
+    import: EdgeDefault,
+    subclass: EdgeDefault,
+    subproperty: EdgeDefault,
+    rdftype: EdgeDefault,
+    success: EdgeDefault,
+    warning: EdgeDefault,
+    danger: EdgeDefault,
+};
+
+const nodeTypes = {
+    default: NodeDefault,
+    graph: NodeDefault,
+    class: NodeDefault,
+    instance: NodeDefault,
+    property: NodeDefault,
+};
+
+ export {
+     edgeTypes,
+     nodeTypes,
+     colors,
+ }

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

@@ -0,0 +1,28 @@
+
+import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
+import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
+import colors from "./_colors-linking.module.scss";
+
+const edgeTypes = {
+    default: EdgeStep,
+    value: EdgeStep,
+    score: EdgeStep,
+    success: EdgeStep,
+    warning: EdgeStep,
+    danger: EdgeStep,
+};
+
+const nodeTypes = {
+    default: NodeDefault,
+    sourcepath: NodeDefault,
+    targetpath: NodeDefault,
+    transformation: NodeDefault,
+    comparator: NodeDefault,
+    aggregator: NodeDefault,
+};
+
+ export {
+     edgeTypes,
+     nodeTypes,
+     colors,
+ }

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

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

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

@@ -0,0 +1,25 @@
+import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
+import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
+import colors from "./_colors-workflow.module.scss";
+
+const edgeTypes = {
+    default: EdgeStep,
+    success: EdgeStep,
+    warning: EdgeStep,
+    danger: EdgeStep,
+};
+
+const nodeTypes = {
+    default: NodeDefault,
+    dataset: NodeDefault,
+    linking: NodeDefault,
+    transform: NodeDefault,
+    task: NodeDefault,
+    workflow: NodeDefault,
+};
+
+ export {
+     edgeTypes,
+     nodeTypes,
+     colors,
+ }