@eccenca/gui-elements 23.1.0-easynav.0 → 23.1.0-easynav.2

package/src/extensions/react-flow/nodes/NodeContent.tsx

@@ -1,17 +1,20 @@
 import React from "react";
+import Color from "color";
 import { Position, useStoreState as useStoreStateFlowLegacy } from "react-flow-renderer";
 import { useStore as useStoreStateFlowNext } from "react-flow-renderer-lts";
-import { Icon, Depiction } from "../../../index";
+import { Icon, Depiction, OverflowText } from "../../../index";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
 import { DepictionProps } from "../../../components/Depiction/Depiction";
-import { ReacFlowVersionSupportProps } from "../versionsupport";
+import { IntentTypes, intentClassName } from "../../../common/Intent";
+import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 import { HandleDefault, HandleProps, HandleNextProps } from "./../handles/HandleDefault";
 import { NodeProps } from "./NodeDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
 import { Resizable } from "re-resizable";
 
 export type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
+export type NodeHighlightColor = "default" | "alternate" | Color | string;
 
 export interface IHandleProps extends HandleProps {
     category?: "configuration";
@@ -44,7 +47,11 @@ interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Label that is displayed in the node header.
      */
-    label: string;
+    label: string | JSX.Element;
+    /**
+     * Element that is displayed as subline under the label in the header.
+     */
+    labelSubline?: JSX.Element;
     /**
      * Content element, displayed in the node body.
      */
@@ -73,9 +80,35 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      */
     minimalShape?: "none" | "circular" | "rectangular";
     /**
+     * Stretches the node to the full available width.
+     */
+    fullWidth?: boolean;
+    /**
+     * Increase the hight of the node header.
+     * Use this for example if you need more space for a label subline.
+     * Also the depiction is displayed larger.
+     */
+    enlargeHeader?: boolean;
+    /**
+     * @deprecated
      * Set the type of used highlights to mark the node.
+     * Replaced by `intent` and `highlightColor` properties.
      */
     highlightedState?: HighlightingState | HighlightingState[];
+    /**
+     * Defines how the borders of a node are displayed.
+     * Use this property to overwrite default styles.
+     * You can use this to visuaize different states or type without depending only on color.
+     */
+    border?: "solid" | "double" | "dashed" | "dotted";
+    /**
+     * Feedback state of the node.
+     */
+    intent?: IntentTypes;
+    /**
+     * Set the type of used highlights to mark the node.
+     */
+    highlightColor?: NodeHighlightColor | [NodeHighlightColor, NodeHighlightColor];
     /**
      * Text used for tooltip used on icon and depiction.
      */
@@ -181,7 +214,17 @@ interface MemoHandlerNextProps extends HandleNextProps {
 
 type MemoHandlerProps = MemoHandlerLegacyProps | MemoHandlerNextProps;
 
-const defaultHandles = [{ type: "target" }, { type: "source" }] as IHandleProps[];
+const defaultHandles = () => {
+    const flowVersion = useReactFlowVersion();
+    switch (flowVersion) {
+        case "legacy":
+            return [{ type: "target" }, { type: "source" }] as IHandleProps[];
+        case "next":
+            return [{ type: "target" }, { type: "source" }] as NodeContentHandleNextProps[];
+        default:
+            return [];
+    }
+}
 
 const getDefaultMinimalTooltipData = (node: any) => {
     return {
@@ -216,10 +259,14 @@ const addHandles = (handles: any, position: any, posDirection: any, isConnectabl
     });
 };
 
-export const gethighlightedStateClasses = (state: any, baseClassName: any) => {
+export const gethighlightedStateClasses = (
+    state: HighlightingState | HighlightingState[],
+    baseClassName: string
+) => {
     let hightlights = typeof state === "string" ? [state] : state;
-    //@ts-ignore
-    return hightlights.map((item) => `${baseClassName}--highlight-${item}`).join(" ");
+    return hightlights.map(
+        (item : HighlightingState) => `${baseClassName}--highlight-${item}`
+    ).join(" ");
 };
 
 const MemoHandler = React.memo(
@@ -235,22 +282,28 @@ const MemoHandler = React.memo(
  * 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 function NodeContent<CONTENT_PROPS = any>({
-    flowVersion = "legacy",
+    flowVersion = useReactFlowVersion(),
     iconName,
     depiction,
     leftElement,
     typeLabel,
     label,
+    labelSubline,
+    enlargeHeader,
+    fullWidth,
     showExecutionButtons = true,
     executionButtons,
     menuButtons,
     content,
     contentExtension,
-     footerContent,
+    footerContent,
     size = "small",
     minimalShape = "circular",
     highlightedState,
-    handles = defaultHandles,
+    intent,
+    border,
+    highlightColor,
+    handles = defaultHandles(),
     adaptHeightForHandleMinCount,
     adaptSizeIncrement = 15,
     getMinimalTooltipData = getDefaultMinimalTooltipData,
@@ -270,11 +323,15 @@ export function NodeContent<CONTENT_PROPS = any>({
     // other props for DOM element
     ...otherProps
 }: NodeContentProps<any>) {
+    const isResizeable = (!!onNodeResize && minimalShape === "none");
     const [width, setWidth] = React.useState<number>(nodeDimensions?.width ?? 0);
     const [height, setHeight] = React.useState<number>(nodeDimensions?.height ?? 0);
-    const [, , zoom] = flowVersion === "legacy"
-        ? useStoreStateFlowLegacy((state) => state.transform)
-        : useStoreStateFlowNext((state) => state.transform);
+    let zoom = 1;
+    if (isResizeable) try {
+        [, , zoom] = flowVersion === "legacy"
+            ? useStoreStateFlowLegacy((state) => state.transform)
+            : useStoreStateFlowNext((state) => state.transform);
+    } catch {}
     const [adjustedContentProps, setAdjustedContentProps] = React.useState<Partial<CONTENT_PROPS>>({});
     const nodeContentRef = React.useRef<any>();
     const handleStack = flowVersion==="legacy" ? {} as { [key: string]: IHandleProps[] } : {} as { [key: string]: NodeContentHandleNextProps[] };
@@ -335,17 +392,29 @@ export function NodeContent<CONTENT_PROPS = any>({
         styleExpandDimensions["minHeight"] = Math.max(minHeightLeft, minHeightRight);
     }
 
+    const {
+        highlightClassNameSuffix,
+        highlightCustomPropertySettings
+    } = evaluateHighlightColors("--node-highlight", highlightColor);
+
     const resizableStyles = (!!onNodeResize === true && minimalShape === "none" && (width + height > 0)) ? { width, height } : {};
     const nodeContent = (
         <>
             <section
                 ref={nodeContentRef}
                 {...otherProps}
-                style={{ ...style, ...styleExpandDimensions, ...resizableStyles }}
+                style={{ ...style, ...highlightCustomPropertySettings, ...styleExpandDimensions, ...resizableStyles }}
                 className={
                     `${eccgui}-graphviz__node` +
                     ` ${eccgui}-graphviz__node--${size}` +
                     ` ${eccgui}-graphviz__node--minimal-${minimalShape}` +
+                    (fullWidth ? ` ${eccgui}-graphviz__node--fullwidth` : "") +
+                    (border ? ` ${eccgui}-graphviz__node--border-${border}` : "") +
+                    (intent ? ` ${intentClassName(intent)}` : "") +
+                    (highlightClassNameSuffix.length > 0
+                        ? highlightClassNameSuffix.map(highlight => ` ${eccgui}-graphviz__node--highlight-${highlight}`).join("")
+                        : ""
+                    ) +
                     (!!highlightedState
                         ? " " + gethighlightedStateClasses(highlightedState, `${eccgui}-graphviz__node`)
                         : "") +
@@ -354,9 +423,12 @@ export function NodeContent<CONTENT_PROPS = any>({
                     (letPassWheelEvents === false ? ` nowheel` : "")
                 }
             >
-                <header className={`${eccgui}-graphviz__node__header`}>
+                <header className={
+                    `${eccgui}-graphviz__node__header` +
+                    ((enlargeHeader && minimalShape==="none") ? ` ${eccgui}-graphviz__node__header--large` : "")
+                }>
                     {(!!iconName || !!depiction || !!leftElement) && (
-                        <span className={`${eccgui}-graphviz__node__header-depiction`}>
+                        <div className={`${eccgui}-graphviz__node__header-depiction`}>
                             { leftElement }
                             {!!depiction && !leftElement && typeof depiction === "string" && (
                                 <Depiction
@@ -380,23 +452,37 @@ export function NodeContent<CONTENT_PROPS = any>({
                                 })
                             )}
                             {!!iconName && !leftElement && !depiction && (
-                                <Icon
-                                    name={iconName}
-                                    tooltipText={minimalShape === "none" || selected ? typeLabel : undefined}
+                                <Depiction
+                                    image={<Icon name={iconName} />}
+                                    caption={minimalShape === "none" || selected ? typeLabel : undefined}
+                                    captionPosition="tooltip"
+                                    padding="tiny"
+                                    ratio="1:1"
+                                    resizing="contain"
+                                    forceInlineSvg
                                 />
                             )}
-                        </span>
+                        </div>
                     )}
-                    <span className={`${eccgui}-graphviz__node__header-label`} title={label}>
-                        {label}
-                    </span>
+                    <div className={`${eccgui}-graphviz__node__header-label`} title={typeof label==="string" ? label : undefined}>
+                        {
+                            typeof label === "string"
+                                ? <OverflowText className={`${eccgui}-graphviz__node__header-label__mainline`}>{label}</OverflowText>
+                                : <div className={`${eccgui}-graphviz__node__header-label__mainline`}>{label}</div>
+                        }
+                        {!!labelSubline && (
+                            <div className={`${eccgui}-graphviz__node__header-label__subline`}>
+                                { labelSubline }
+                            </div>
+                        )}
+                    </div>
                     {(menuButtons || (showExecutionButtons && executionButtons)) && (
-                        <span className={`${eccgui}-graphviz__node__header-menu`}>
+                        <div className={`${eccgui}-graphviz__node__header-menu`}>
                             {showExecutionButtons && typeof executionButtons === "function"
                                 ? executionButtons(adjustedContentProps, setAdjustedContentProps)
                                 : null}
                             {menuButtons ?? null}
-                        </span>
+                        </div>
                     )}
                 </header>
                 {content && (
@@ -449,5 +535,54 @@ export function NodeContent<CONTENT_PROPS = any>({
         </Resizable>
     );
 
-    return (!!onNodeResize && minimalShape === "none") ? resizableNode() : nodeContent;
+    return (isResizeable) ? resizableNode() : nodeContent;
+}
+
+export const evaluateHighlightColors = (
+    baseCustomProperty: string,
+    highlightColor?: NodeHighlightColor | NodeHighlightColor[]
+) => {
+    let styleHighlightColors = {
+        [`${baseCustomProperty}-default-color`]: undefined,
+        [`${baseCustomProperty}-alternate-color`]: undefined,
+    } as React.CSSProperties;
+    const classesHightlightColors = [] as string[];
+    if (!!highlightColor) {
+        const highlightingColors = (typeof highlightColor === "string") ? [highlightColor] : highlightColor;
+        (highlightingColors as Array<string>).map((color, idx) => {
+            switch (color) {
+                case "default":
+                    classesHightlightColors.push("default");
+                    break;
+                case "alternate":
+                    classesHightlightColors.push("alternate");
+                    break;
+                default:
+                    classesHightlightColors.push("custom");
+                    let customColor = Color("#ffffff")
+                    try {
+                        customColor = Color(color);
+                    } catch(ex) {
+                        console.warn("Received invalid color for highlight: " + color)
+                    }
+                    if (idx === 0) {
+                        styleHighlightColors = {
+                            ...styleHighlightColors,
+                            [`${baseCustomProperty}-default-color`]: customColor.rgb().toString(),
+                        } as React.CSSProperties
+                    } else {
+                        styleHighlightColors = {
+                            ...styleHighlightColors,
+                            [`${baseCustomProperty}-alternate-color`]: customColor.rgb().toString(),
+                        } as React.CSSProperties
+                    }
+                    break;
+            }
+        });
+    }
+
+    return {
+        highlightClassNameSuffix: classesHightlightColors,
+        highlightCustomPropertySettings: styleHighlightColors,
+    }
 }

package/src/extensions/react-flow/nodes/NodeDefault.tsx

@@ -5,7 +5,7 @@ import {
 } from "react-flow-renderer";
 import { Tooltip } from "../../../index";
 import { NodeContent, NodeContentProps } from "./NodeContent";
-import { ReacFlowVersionSupportProps } from "../versionsupport";
+import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
 export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReacFlowVersionSupportProps, ReactFlowNodeProps {
     /**
@@ -23,7 +23,7 @@ export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReacFlow
 export const NodeDefault = memo(
     (node: NodeProps<any>) => {
         const {
-            flowVersion,
+            flowVersion = useReactFlowVersion(),
             data,
             targetPosition = Position.Left,
             sourcePosition = Position.Right,

package/src/extensions/react-flow/nodes/_nodes.scss

@@ -51,22 +51,6 @@
     }
 }
 
-.#{$eccgui}-graphviz__node--animated {
-    animation: pumpingshadow 4 * $reactflow-transition-time linear infinite;
-}
-
-@keyframes pumpingshadow {
-  0% {
-    box-shadow: 0 0 2 * $reactflow-node-border-width 0 rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 0 rgba($reactflow-edge-stroke-color-selected, 0);
-  }
-  50% {
-    box-shadow: 0 0 2 * $reactflow-node-border-width 6 * $reactflow-node-border-width rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 6 * $reactflow-node-border-width $reactflow-edge-stroke-color-selected;
-  }
-  100% {
-    box-shadow: 0 0 2 * $reactflow-node-border-width 0 rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 0 rgba($reactflow-edge-stroke-color-selected, 0);
-  }
-}
-
 .#{$eccgui}-graphviz__node--minimal-rectangular,
 .#{$eccgui}-graphviz__node--minimal-circular {
 
@@ -120,22 +104,20 @@
     }
 }
 
+.#{$eccgui}-graphviz__node__header--large {
+    min-height: $reactflow-node-largesize;
+}
+
 .#{$eccgui}-graphviz__node__header-depiction,
 .#{$eccgui}-graphviz__node__header-menu {
     flex-grow: 0;
     flex-shrink: 0;
     max-height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
-}
-
-.#{$eccgui}-graphviz__node__header-label {
     margin: 0 $eccgui-size-block-whitespace * 0.25;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex-grow: 1;
-    flex-shrink: 1;
-    display: inline-block;
-    text-align: left;
+
+    .#{$eccgui}-graphviz__node__header--large & {
+        max-height: calc(#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width});
+    }
 }
 
 .#{$eccgui}-graphviz__node__header-depiction {
@@ -165,6 +147,37 @@
             height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
         }
     }
+
+    .#{$eccgui}-graphviz__node__header--large & {
+        min-width: calc(#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width});
+        min-height: calc(#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width});
+        max-width: calc(2 * (#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width}));
+
+        .#{$eccgui}-depiction__image {
+            height: calc(#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width});
+        }
+    }
+}
+
+.#{$eccgui}-graphviz__node__header-label {
+    margin: 0 $eccgui-size-block-whitespace * 0.25;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-grow: 1;
+    flex-shrink: 1;
+    display: inline-flex;
+    flex-direction: column;
+    text-align: left;
+}
+
+.#{$eccgui}-graphviz__node__header-label__mainline,
+.#{$eccgui}-graphviz__node__header-label__subline {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-grow: 0;
+    flex-shrink: 0;
 }
 
 .#{$eccgui}-graphviz__node__content {
@@ -231,12 +244,47 @@
     max-height: $reactflow-node-basesize * 13;
 }
 
-// Node highlights
+.#{$eccgui}-graphviz__node--fullwidth:not(.is-resizeable) {
+    width: 100%;
+}
 
-.#{$eccgui}-graphviz__node--highlight-success,
-.#{$eccgui}-graphviz__node--highlight-warning,
-.#{$eccgui}-graphviz__node--highlight-danger {
-    &:before {
+// Node border overwrites
+
+.#{$eccgui}-graphviz__node--border-solid {
+    border-style: solid;
+}
+
+.#{$eccgui}-graphviz__node--border-double {
+    border-width: 1.5 * $reactflow-node-border-width;
+    border-style: double;
+}
+
+.#{$eccgui}-graphviz__node--border-dashed {
+    border-style: dashed;
+}
+
+.#{$eccgui}-graphviz__node--border-dotted {
+    border-style: dotted;
+}
+
+// Node intent
+
+@mixin node-intent-gradient {
+    border-image-source: conic-gradient(
+        from var(--node-intent-angle),
+        transparent,
+        var(--node-intent-color) 0.05turn,
+        var(--node-intent-color) 0.2turn,
+        transparent 0.25turn
+    );
+}
+
+.#{$eccgui}-graphviz__node[class*="#{$eccgui}-intent--"],
+.#{$eccgui}-graphviz__node--animated:not([class*="#{$eccgui}-intent--"]) {
+    --node-intent-color: #{$eccgui-color-workspace-text};
+
+    &:after {
+        --node-intent-angle: #{$reactflow-transition-anglestart};
         content: " ";
         display: block;
         position: absolute;
@@ -244,15 +292,45 @@
         left: -2 * $reactflow-node-border-width;
         bottom: -2 * $reactflow-node-border-width;
         right: -2 * $reactflow-node-border-width;
-        border-radius: inherit;
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-danger-text;
         z-index: -1;
+        border-style: solid;
+        border-width: 2 * $reactflow-node-border-width;
+        @include node-intent-gradient;
+        border-image-slice: 1;
+        border-image-width: 2 * $reactflow-node-border-width;
     }
 }
 
-.#{$eccgui}-graphviz__node--highlight-match,
-.#{$eccgui}-graphviz__node--highlight-altmatch {
-    &:after {
+.#{$eccgui}-graphviz__node.#{$eccgui}-intent--primary {
+    --node-intent-color: #{$eccgui-color-primary};
+}
+
+.#{$eccgui}-graphviz__node.#{$eccgui}-intent--accent {
+    --node-intent-color: #{$eccgui-color-accent};
+}
+
+.#{$eccgui}-graphviz__node.#{$eccgui}-intent--info {
+    --node-intent-color: #{$eccgui-color-info-text};
+}
+
+.#{$eccgui}-graphviz__node.#{$eccgui}-intent--success {
+    --node-intent-color: #{$eccgui-color-success-text};
+}
+
+.#{$eccgui}-graphviz__node.#{$eccgui}-intent--warning {
+    --node-intent-color: #{$eccgui-color-warning-text};
+}
+
+.#{$eccgui}-graphviz__node.#{$eccgui}-intent--danger {
+    --node-intent-color: #{$eccgui-color-danger-text};
+}
+
+// hode highlight mark
+
+.#{$eccgui}-graphviz__node[class*="#{$eccgui}-graphviz__node--highlight-"] {
+
+    &:before {
+        opacity: $eccgui-opacity-disabled;
         content: " ";
         display: block;
         position: absolute;
@@ -260,38 +338,56 @@
         left: -2 * $reactflow-node-border-width;
         bottom: -2 * $reactflow-node-border-width;
         right: -2 * $reactflow-node-border-width;
-        border-radius: inherit;
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-accent;
-        z-index: -1;
+        z-index: -2;
+        box-shadow:
+            0 0 0 2 * $reactflow-node-border-width var(--node-highlight-default-color),
+            0 0 0 3.5 * $reactflow-node-border-width var(--node-highlight-alternate-color, var(--node-highlight-default-color));
+        border: 0.1px solid transparent; // workaround for Firefox, otherwise shadows are overlayed
     }
+}
 
-    &.#{$eccgui}-graphviz__node--highlight-success,
-    &.#{$eccgui}-graphviz__node--highlight-warning,
-    &.#{$eccgui}-graphviz__node--highlight-danger {
-        &:after {
-            top: -4 * $reactflow-node-border-width;
-            left: -4 * $reactflow-node-border-width;
-            bottom: -4 * $reactflow-node-border-width;
-            right: -4 * $reactflow-node-border-width;
-        }
-    }
+.#{$eccgui}-graphviz__node--highlight-default {
+    --node-highlight-default-color: #{$eccgui-color-accent};
+    --node-highlight-alternate-color: #{$eccgui-color-accent};
 }
 
-.#{$eccgui}-graphviz__node--highlight-success {
-    &:before {
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-success-text;
-    }
+.#{$eccgui}-graphviz__node--highlight-alternate {
+    --node-highlight-default-color: #{$eccgui-color-primary};
+    --node-highlight-alternate-color: #{$eccgui-color-primary};
 }
 
-.#{$eccgui}-graphviz__node--highlight-warning {
-    &:before {
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-warning-text;
-    }
+.#{$eccgui}-graphviz__node--highlight-default.#{$eccgui}-graphviz__node--highlight-alternate {
+    --node-highlight-default-color: #{$eccgui-color-accent};
+    --node-highlight-alternate-color: #{$eccgui-color-primary};
 }
 
-.#{$eccgui}-graphviz__node--highlight-altmatch {
-    &:after {
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width complement($eccgui-color-primary);
+// Node animation
+
+@property --node-intent-angle {
+    // rule necessary, otherwise increasing --node-intent-angle for animation does not work correctly
+    syntax: '<angle>';
+    initial-value: #{$reactflow-transition-anglestart};
+    inherits: true;
+}
+
+.#{$eccgui}-graphviz__node--animated:after {
+    animation: spinningborder 8 * $reactflow-transition-time linear infinite;
+
+    @keyframes spinningborder {
+        to {
+            --node-intent-angle: #{$reactflow-transition-anglestart + 360deg};
+        }
+        @for $step from 1 through 10 {
+            /*
+            This is a fix/workaround for Firefox/Gecko.
+            Looks like "animation" the custom property is not enough.
+            It is also necessary to repeat the rule.
+            */
+            #{$step*10}#{"%"} {
+                --node-intent-angle: #{$reactflow-transition-anglestart + $step * 36deg};
+                @include node-intent-gradient;
+            }
+        }
     }
 }
 
@@ -391,3 +487,67 @@
     flex-grow: 0;
     flex-shrink: 0;
 }
+
+// Node highlights (@deprecated) // FIXME: remove in v24.0.0
+
+.#{$eccgui}-graphviz__node--highlight-success,
+.#{$eccgui}-graphviz__node--highlight-warning,
+.#{$eccgui}-graphviz__node--highlight-danger {
+    &:before {
+        content: " ";
+        display: block;
+        position: absolute;
+        top: -2 * $reactflow-node-border-width;
+        left: -2 * $reactflow-node-border-width;
+        bottom: -2 * $reactflow-node-border-width;
+        right: -2 * $reactflow-node-border-width;
+        border-radius: inherit;
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-danger-text;
+        z-index: -1;
+    }
+}
+
+.#{$eccgui}-graphviz__node--highlight-match,
+.#{$eccgui}-graphviz__node--highlight-altmatch {
+    &:after {
+        content: " ";
+        display: block;
+        position: absolute;
+        top: -2 * $reactflow-node-border-width;
+        left: -2 * $reactflow-node-border-width;
+        bottom: -2 * $reactflow-node-border-width;
+        right: -2 * $reactflow-node-border-width;
+        border-radius: inherit;
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-accent;
+        z-index: -1;
+    }
+
+    &.#{$eccgui}-graphviz__node--highlight-success,
+    &.#{$eccgui}-graphviz__node--highlight-warning,
+    &.#{$eccgui}-graphviz__node--highlight-danger {
+        &:after {
+            top: -4 * $reactflow-node-border-width;
+            left: -4 * $reactflow-node-border-width;
+            bottom: -4 * $reactflow-node-border-width;
+            right: -4 * $reactflow-node-border-width;
+        }
+    }
+}
+
+.#{$eccgui}-graphviz__node--highlight-success {
+    &:before {
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-success-text;
+    }
+}
+
+.#{$eccgui}-graphviz__node--highlight-warning {
+    &:before {
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-warning-text;
+    }
+}
+
+.#{$eccgui}-graphviz__node--highlight-altmatch {
+    &:after {
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width complement($eccgui-color-primary);
+    }
+}