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

package/dist/types/extensions/codemirror/CodeMirror.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import "codemirror/mode/markdown/markdown.js";
+import "codemirror/mode/python/python.js";
+import "codemirror/mode/sparql/sparql.js";
+import "codemirror/mode/sql/sql.js";
+import "codemirror/mode/turtle/turtle.js";
+import "codemirror/mode/xml/xml.js";
+export interface CodeEditorProps {
+    /**
+     * `name` attribute of connected textarea element.
+     */
+    name: string;
+    /**
+     * `id` attribute of connected textarea element.
+     * If not set then the default value is created by `codemirror-${name-attribute}`.
+     */
+    id?: string;
+    /**
+     * Handler method to receive onChange events.
+     * As input the new value is given.
+     */
+    onChange: (v: any) => void;
+    /**
+     * Syntax mode of the code editor.
+     */
+    mode?: "markdown" | "python" | "sparql" | "sql" | "turtle" | "xml" | "undefined";
+    /**
+     * Default value used first when the editor is instanciated.
+     */
+    defaultValue?: any;
+}
+/**
+ * Includes a code editor, currently we use CodeMirror library as base.
+ */
+export declare const CodeEditor: ({ onChange, name, id, mode, defaultValue }: CodeEditorProps) => JSX.Element;

package/dist/types/extensions/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./codemirror/CodeMirror";
+export * from "./react-flow";

package/dist/types/extensions/react-flow/edges/getSmoothStepPath.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copied from `react-flow` because we need to change there routing.
+ * We use the 10.2.0cversion minus commit 87d518f8b5540a91a3f9c163a2315c2de47abc31
+ * @see https://github.com/wbkd/react-flow/commit/87d518f8b5540a91a3f9c163a2315c2de47abc31
+ */
+import { Position } from "react-flow-renderer";
+export interface GetSmoothStepPathParams {
+    sourceX: number;
+    sourceY: number;
+    sourcePosition?: Position;
+    targetX: number;
+    targetY: number;
+    targetPosition?: Position;
+    borderRadius?: number;
+    centerX?: number;
+    centerY?: number;
+}
+export declare function getSmoothStepPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius, centerX, centerY, }: GetSmoothStepPathParams): string;

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

@@ -3,6 +3,7 @@ import { Position } from "react-flow-renderer";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
 import { HandleProps } from "./../handles/HandleDefault";
 import { NodeProps } from "./NodeDefault";
+import { NodeContentExtensionProps } from "./NodeContentExtension";
 export declare type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
 export interface IHandleProps extends HandleProps {
     category?: "configuration";
@@ -28,7 +29,7 @@ interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Content extension, displayed at the bottom side of a node.
      */
-    contentExtension?: React.ReactNode;
+    contentExtension?: React.ReactElement<NodeContentExtensionProps>;
 }
 export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends NodeContentData, React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -111,11 +112,16 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * If set then it will be always overwritten internally.
      */
     selected?: boolean;
+    /**
+     * Allow react flow wheel events, e.g. for zooming using the mouse wheel over a node.
+     * If this is allowed scrolling inside a node is not possible.
+     */
+    letPassWheelEvents?: boolean;
 }
 export declare const gethighlightedStateClasses: (state: any, baseClassName: any) => any;
 /**
  * The `NodeContent` element manages the main view of how a node is displaying which content.
  * This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
  */
-export declare function NodeContent<CONTENT_PROPS = any>({ iconName, depiction, typeLabel, label, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, size, minimalShape, highlightedState, handles, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, targetPosition, sourcePosition, isConnectable, selected, businessData, ...otherProps }: NodeContentProps<any>): JSX.Element;
+export declare function NodeContent<CONTENT_PROPS = any>({ iconName, depiction, typeLabel, label, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, size, minimalShape, highlightedState, handles, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherProps }: NodeContentProps<any>): JSX.Element;
 export {};

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

@@ -1,5 +1,9 @@
 import React from "react";
 export interface NodeContentExtensionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * When enabled the element is displayed in a way that it does not count into the node size calculation.
+     */
+    slideOutOfNode?: boolean;
     /**
      * Element is displayed in expanded state.
      * If it has no `onToggle` handler property set then it is always expanded.
@@ -27,4 +31,4 @@ export interface NodeContentExtensionProps extends React.HTMLAttributes<HTMLDivE
 /**
  * Displays an content area that can be attached to `NodeContent` elements.
  */
-export declare const NodeContentExtension: ({ children, isExpanded, onToggle, actionButtons, tooltipExpand, tooltipReduce, ...otherProps }: NodeContentExtensionProps) => JSX.Element;
+export declare const NodeContentExtension: ({ children, slideOutOfNode, isExpanded, onToggle, actionButtons, tooltipExpand, tooltipReduce, ...otherProps }: NodeContentExtensionProps) => JSX.Element;

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

@@ -6,5 +6,11 @@ export interface NodeToolsProps extends IBlueprintPopoverProps {
     togglerElement?: ValidIconName | JSX.Element;
     togglerText?: string;
     menuButtonDataTestId?: string;
+    /** If defined this function will be called with the menu API object to be used externally. */
+    menuFunctionsCallback?: (menuFunctions: NodeToolsMenuFunctions) => any;
 }
-export declare const NodeTools: React.MemoExoticComponent<({ children, togglerElement, togglerText, menuButtonDataTestId, ...otherOverlayProps }: NodeToolsProps) => JSX.Element>;
+export interface NodeToolsMenuFunctions {
+    /** Closes the menu if its open. */
+    closeMenu: () => void;
+}
+export declare const NodeTools: React.MemoExoticComponent<({ children, togglerElement, togglerText, menuButtonDataTestId, menuFunctionsCallback, ...otherOverlayProps }: NodeToolsProps) => JSX.Element>;

package/dist/types/index.d.ts

@@ -91,9 +91,7 @@ declare const HelperClasses: {
 declare const Utilities: {
     openInNewTab: (event: import("react").MouseEvent<HTMLElement, MouseEvent>, handler?: ((e: import("react").MouseEvent<HTMLElement, MouseEvent>) => void) | undefined, url?: string | undefined) => void;
 };
-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, // TODO: scss styles
-NumericInput, // TODO: scss styles
-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, // TODO: include as own element
+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";

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@eccenca/gui-elements",
   "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-  "version": "22.1.0-rc.0",
+  "version": "23.0.0-rc.0",
   "license": "Apache-2.0",
   "homepage": "https://github.com/eccenca/gui-elements",
+  "bugs": "https://github.com/eccenca/gui-elements/issues",
   "keywords": [
     "GUI",
     "React",
-    "Blueprint JS",
-    "Carbon Components",
-    "Typescript"
+    "Blueprint",
+    "Carbon Design System",
+    "Typescript",
+    "SCSS"
   ],
   "maintainers": [
     {
@@ -18,22 +20,23 @@
       "web": "https://eccence.com/"
     }
   ],
-  "repository": [
-    {
-      "type": "git",
-      "url": "git://github.com/eccenca/gui-elements.git"
-    }
-  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/eccenca/gui-elements.git"
+  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
+  "engines": {
+    "node": ">=14.x"
+  },
   "style": "src/index.scss",
   "main": "dist/cjs/index.js",
-  "module": "dist/es5/index.js",
+  "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/es5/index.js",
+      "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"
     }
   },
@@ -43,9 +46,9 @@
   ],
   "scripts": {
     "build:clean": "rimraf dist/",
-    "build:es5": "tsc --build .typescript/tsbuild-es5.json && ./scripts/fix-es5-dist",
-    "build:cjs": "tsc --build .typescript/tsbuild-cjs.json && ./scripts/fix-cjs-dist",
-    "build:all": "yarn build:clean && yarn build:es5 && yarn build:cjs",
+    "build:esm": "tsc --project .typescript/tsbuild-esm.json && ./scripts/fix-esm-dist",
+    "build:cjs": "tsc --project .typescript/tsbuild-cjs.json && ./scripts/fix-cjs-dist",
+    "build:all": "yarn build:clean && yarn build:esm && yarn build:cjs",
     "compile": "tsc --build tsconfig.json",
     "compile-scss": "node-sass src/index.scss --importer=node_modules/node-sass-tilde-importer",
     "storybook": "start-storybook -p 6006",
@@ -53,7 +56,8 @@
     "test": "jest",
     "test:ci": "jest --ci --reporters='default'",
     "test:coverage": "jest --collectCoverage",
-    "test:generate-output": "jest --json --outputFile=.jest-test-results.json"
+    "test:generate-output": "jest --json --outputFile=.jest-test-results.json",
+    "check:package": "pjv --warnings --recommendations"
   },
   "dependencies": {
     "@blueprintjs/core": "3.49.1",
@@ -97,7 +101,7 @@
     "@storybook/react": "^6.4.9",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
-    "@types/carbon-components-react": "^7.49.0",
+    "@types/carbon-components-react": "7.49.0",
     "@types/codemirror": "^5.60.5",
     "@types/color": "^3.0.2",
     "@types/jest": "^24.9.1",
@@ -106,7 +110,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",
@@ -116,12 +119,14 @@
     "jest-pnp-resolver": "^1.2.1",
     "node-sass": "4.14.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",
     "style-loader": "0.23.1",
+    "tsc-esm-fix": "^2.13.0",
     "typescript": "4.4.4",
     "webpack": "^4.46.0"
   },
@@ -133,7 +138,12 @@
     "**/carbon-components": "10.44.0",
     "**/carbon-components-react": "7.44.1",
     "**/carbon-icons": "7.0.7",
-    "**/@types/react": "^17.0.0"
+    "**/@types/react": "^17.0.0",
+    "**/node-gyp": "^7.0.0",
+    "**/glob-parent": "^5.1.2",
+    "**/trim": "^0.0.3",
+    "**/trim-newlines": "^3.0.1",
+    "**/minimist": "^1.2.6"
   },
   "eslintConfig": {
     "extends": [

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

@@ -2,7 +2,7 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import { ActivityControlWidget } from "./ActivityControlWidget";
-import { loremIpsum, name } from "react-lorem-ipsum";
+import { loremIpsum } from "react-lorem-ipsum";
 import Tag from "../../components/Tag/Tag";
 import TagList from "../../components/Tag/TagList";
 
@@ -66,10 +66,10 @@ const actions = [
 ];
 
 const commonWidgetArgs = {
-    label: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4 }),
+    label: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4, random: false }),
     border: true,
     activityActions: actions,
-    statusMessage: loremIpsum({ p: 1, startWithLoremIpsum: false }),
+    statusMessage: loremIpsum({ p: 1, startWithLoremIpsum: false, random: false }),
     progressSpinner: {
         intent: "none",
         value: 0.5,
@@ -86,9 +86,9 @@ export const WidgetWithTags = TemplateWithTags.bind({});
 
 const widgetTags = (
     <TagList>
-        <Tag small>{name()}</Tag>
-        <Tag small>{name()}</Tag>
-        <Tag small>{name()}</Tag>
+        <Tag small>Tag one</Tag>
+        <Tag small>Other tag</Tag>
+        <Tag small>Third keyword</Tag>
     </TagList>
 );
 

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -11,7 +11,6 @@ import {
     OverviewItemDescription,
     OverviewItemLine,
     ProgressBar,
-    Spacing,
     Spinner,
     Tooltip,
 } from "../../index";
@@ -27,6 +26,11 @@ export interface IActivityControlProps extends TestableComponent {
      * The label to be shown
      */
     label?: string | JSX.Element;
+    /**
+     * Element that wraps around the label.
+     * Default: `<OverflowText inline={true} />`
+     */
+    labelWrapper?: JSX.Element;
     /**
      * To add tags in addition to the widget status description
      */
@@ -59,6 +63,10 @@ export interface IActivityControlProps extends TestableComponent {
      * display widget inside rectangle
      */
     border?: boolean;
+    /**
+     * display a bit whitespace around widget, even without border
+     */
+    hasSpacing?: boolean;
     /**
      * only use necessary width, not always the available 100% of parent element
      */
@@ -103,13 +111,15 @@ export function ActivityControlWidget(props: IActivityControlProps) {
         activityContextMenu,
         small,
         border,
+        hasSpacing,
         canShrink,
         tags,
         progressSpinnerFinishedIcon,
+        labelWrapper = <OverflowText inline={true} />,
     } = props;
     const spinnerClassNames = (progressSpinner?.className ?? "") + ` ${eccgui}-spinner--permanent`;
     const widget = (
-        <OverviewItem data-test-id={dataTestId} hasSpacing={border} densityHigh={small}>
+        <OverviewItem data-test-id={dataTestId} hasSpacing={border || hasSpacing} densityHigh={small}>
             {progressBar && <ProgressBar {...progressBar} />}
             {(progressSpinner || progressSpinnerFinishedIcon) && (
                 <OverviewItemDepiction keepColors>
@@ -129,31 +139,34 @@ export function ActivityControlWidget(props: IActivityControlProps) {
             <OverviewItemDescription>
                 {props.label && (
                     <OverviewItemLine small={small}>
-                        <OverflowText inline={true}>{props.label}</OverflowText>
+                        { React.cloneElement(labelWrapper, {}, props.label) }
                     </OverviewItemLine>
                 )}
                 {(props.statusMessage || tags) && (
                     <OverviewItemLine small>
-                        {tags && (
-                            <>
-                                { tags }
-                                <Spacing vertical size="tiny" />
-                            </>
-                        )}
+                        { tags }
                         {props.statusMessage && (
-                            <>
+                            <OverflowText passDown>
                                 {props.statusMessage.length > 50 ? (
                                     <Tooltip
                                         content={props.statusMessage}
                                         size="large"
-                                        tooltipProps={{ placement: "top", boundary: "viewport" }}
+                                        tooltipProps={{
+                                            position: "top-right",
+                                            boundary: "viewport",
+                                            modifiers: {
+                                                flip: {
+                                                    enabled: false
+                                                }
+                                            }
+                                        }}
                                     >
-                                        <OverflowText inline={true}>{props.statusMessage}</OverflowText>
+                                        {props.statusMessage}
                                     </Tooltip>
                                 ) : (
-                                    <OverflowText inline={true}>{props.statusMessage}</OverflowText>
+                                    props.statusMessage
                                 )}
-                            </>
+                            </OverflowText>
                         )}
                     </OverviewItemLine>
                 )}

package/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx

@@ -1,5 +1,5 @@
-import {Button, HtmlContentBlock, SimpleDialog} from "../../index";
-import React from "react";
+import {Button, HtmlContentBlock, IconButton, SimpleDialog} from "../../index";
+import React, { useState } from "react";
 
 interface IProps {
     // Title of the modal
@@ -18,6 +18,7 @@ interface IProps {
 
 /** Shows the execution error report to the user and offers to download the report. */
 export const ActivityExecutionErrorReportModal = ({title, onDiscard, report, downloadButtonValue, closeButtonValue, fetchErrorReport}: IProps) => {
+    const [displayFullscreen, setDisplayFullscreen] = useState<boolean>(false);
     const fileName = "Activity execution report from " + (new Date()).toISOString().replace(/T/, " ").replace(/:/g, "-").substr(0, 19) + ".md"
     const handleDownload = async () => {
         const markdown = await fetchErrorReport()
@@ -37,7 +38,14 @@ export const ActivityExecutionErrorReportModal = ({title, onDiscard, report, dow
         <SimpleDialog
             title={title}
             isOpen={true}
+            size={displayFullscreen ? "fullscreen" : "large"}
             onClose={onDiscard}
+            headerOptions={(
+                <IconButton
+                    name={displayFullscreen ? "toggler-minimize" : "toggler-maximize"}
+                    onClick={() => setDisplayFullscreen(!displayFullscreen)}
+                />
+            )}
             actions={[
                 <Button data-test-id={"error-report-download-btn"} affirmative onClick={handleDownload} key="download">
                     {downloadButtonValue}
@@ -47,7 +55,7 @@ export const ActivityExecutionErrorReportModal = ({title, onDiscard, report, dow
                 </Button>,
             ]}
         >
-            <HtmlContentBlock>
+            <HtmlContentBlock noScrollbarsOnChildren>
                 {report}
             </HtmlContentBlock>
         </SimpleDialog>

package/src/cmem/ActivityControl/SilkActivityControl.tsx

@@ -63,10 +63,14 @@ export interface IActivityControlLayoutProps {
     small?: boolean;
     // display widget inside rectange
     border?: boolean;
+    // add a bit spacing
+    hasSpacing?: boolean;
     // only use necessary width, not always the available 100% of parent element
     canShrink?: boolean;
     // what type of progrss display should be uses, horizontal progress bar, circular spinner, or none of that
     visualization?: "none" | "progressbar" | "spinner";
+    // wrapper around label
+    labelWrapper?: JSX.Element;
 }
 
 const defaultLayout: IActivityControlLayoutProps = {
@@ -352,7 +356,7 @@ export const calcIntent = (activityStatus: IActivityStatus): Intent => {
             intent = "danger";
             break;
         case "Waiting":
-            intent = "none"; // TODO: This is 100% yellow in the old activity control
+            intent = "none";
             break;
         default:
             intent = "none";

package/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ContentBlobToggler, Markdown } from "../";
+import { ContentBlobToggler, Markdown } from "./..";
 
 interface IStringPreviewContentBlobTogglerProps extends React.HTMLAttributes<HTMLDivElement> {
     /**

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

@@ -10,7 +10,9 @@
         background-color: mix($color, #fff, 24%);
     }
     .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: $color;
+        &.#{$eccgui}-graphviz__node__extension--slideout {
+            border-color: $color;
+        }
     }
 }
 
@@ -23,10 +25,12 @@
         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;
+        &.#{$eccgui}-graphviz__node__extension--slideout {
+            border-style: double;
+            border-width: 3 * $reactflow-node-border-width;
+            left: -3 * $reactflow-node-border-width;
+            right: -3 * $reactflow-node-border-width;
+        }
     }
 }
 
@@ -39,7 +43,9 @@
         border-style: dashed;
     }
     .#{$eccgui}-graphviz__node__extension--expanded {
-        border-style: dashed;
+        &.#{$eccgui}-graphviz__node__extension--slideout {
+            border-style: dashed;
+        }
     }
 }
 

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";

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

@@ -1,6 +1,5 @@
 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,
@@ -25,5 +24,4 @@ const nodeTypes = {
  export {
      edgeTypes,
      nodeTypes,
-     colors,
  }

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

@@ -1,7 +1,6 @@
 
 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,
@@ -24,5 +23,4 @@ const nodeTypes = {
  export {
      edgeTypes,
      nodeTypes,
-     colors,
  }

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

@@ -1,6 +1,5 @@
 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,
@@ -21,5 +20,4 @@ const nodeTypes = {
  export {
      edgeTypes,
      nodeTypes,
-     colors,
  }