@eccenca/gui-elements 24.0.0-rc.2 → 24.0.0-rc.3

package/src/extensions/codemirror/CodeMirror.tsx

@@ -1,50 +1,43 @@
-import React, { TextareaHTMLAttributes, useEffect, useRef } from "react";
-import CodeMirror, { ModeSpec, ModeSpecOptions } from "codemirror";
-
-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";
-import "codemirror/mode/jinja2/jinja2.js";
-import "codemirror/mode/yaml/yaml.js";
-import "codemirror/mode/javascript/javascript.js";
-import "codemirror/mode/ntriples/ntriples.js";
-import "codemirror/mode/mathematica/mathematica.js";
-import "codemirror-formatting";
-//folding imports
-import "codemirror/addon/fold/foldcode";
-import "codemirror/addon/fold/foldgutter";
-import "codemirror/addon/fold/brace-fold";
-import "codemirror/addon/fold/xml-fold.js";
+import React, { AllHTMLAttributes, useRef } from "react";
+import { defaultKeymap, indentWithTab } from "@codemirror/commands";
+import { foldKeymap } from "@codemirror/language";
+import { EditorState, Extension } from "@codemirror/state";
+import { DOMEventHandlers, EditorView, KeyBinding, keymap, Rect, ViewUpdate } from "@codemirror/view";
+//CodeMirror
+import { minimalSetup } from "codemirror";
 
+import { markField } from "../../components/AutoSuggestion/extensions/markText";
+//constants
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export const supportedCodeEditorModes = [
-    "markdown",
-    "python",
-    "sparql",
-    "sql",
-    "turtle",
-    "xml",
-    "jinja2",
-    "yaml",
-    "json",
-    "ntriples",
-    "mathematica",
-    "undefined",
-] as const;
-type SupportedModesTuple = typeof supportedCodeEditorModes;
-export type SupportedCodeEditorModes = SupportedModesTuple[number];
-
+//hooks
+import {
+    SupportedCodeEditorModes,
+    supportedCodeEditorModes,
+    useCodeMirrorModeExtension,
+} from "./hooks/useCodemirrorModeExtension.hooks";
+//adaptations
+import {
+    adaptedCodeFolding,
+    AdaptedEditorView,
+    AdaptedEditorViewDomEventHandlers,
+    adaptedFoldGutter,
+    adaptedHighlightActiveLine,
+    adaptedHighlightSpecialChars,
+    adaptedLineNumbers,
+    adaptedPlaceholder,
+} from "./tests/codemirrorTestHelper";
 export interface CodeEditorProps {
     // Is called with the editor instance that allows access via the CodeMirror API
-    setEditorInstance?: (editor: CodeMirror.Editor) => any;
+    setEditorView?: (editor: EditorView | undefined) => any;
     /**
      * `name` attribute of connected textarea element.
      */
     name: string;
+    /**
+     * Placeholder to be shown when no text has been entered, yet.
+     */
+    placeholder?: string;
     /**
      * `id` attribute of connected textarea element.
      * If not set then the default value is created by `codemirror-${name-attribute}`.
@@ -55,9 +48,31 @@ export interface CodeEditorProps {
      * As input the new value is given.
      */
     onChange?: (v: any) => void;
+    /**
+     *  Called when the focus status changes
+     */
+    onFocusChange?: (focused: boolean) => any;
+    /**
+     * Called when the user presses a key
+     */
+    onKeyDown?: (event: KeyboardEvent) => boolean;
+    /**
+     * function invoked when any click occurs
+     */
+    onMouseDown?: (view: EditorView) => void;
+    /**
+     * Called when the user selects text
+     */
+    onSelection?: (ranges: { from: number; to: number }[]) => any;
+    /**
+     * Called when the cursor position changes
+     */
+    onCursorChange?: (pos: number, coords: Rect, scrollinfo: HTMLElement, cm: EditorView) => any;
+
     /**
      * Syntax mode of the code editor.
      */
+
     mode?: SupportedCodeEditorModes;
     /**
      * Default value used first when the editor is instanciated.
@@ -77,7 +92,7 @@ export interface CodeEditorProps {
     /** Long lines are wrapped and displayed on multiple lines */
     wrapLines?: boolean;
 
-    outerDivAttributes?: Partial<TextareaHTMLAttributes<HTMLDivElement>>;
+    outerDivAttributes?: Partial<AllHTMLAttributes<HTMLDivElement>>;
 
     /**
      * Size in spaces that is used for a tabulator key.
@@ -98,108 +113,176 @@ export interface CodeEditorProps {
     /**
      *  handler for scroll event
      */
-    onScroll?: (editorInstance: CodeMirror.Editor) => void;
+    onScroll?: (event: Event, view: EditorView) => boolean | void;
     /**
      * optional property to fold code for the supported modes e.g: xml, json etc.
      */
     supportCodeFolding?: boolean;
+    /**
+     * highlight active line where the cursor is currently in
+     */
+    shouldHighlightActiveLine?: boolean;
+    /**
+     * additional extensions to customize the editor further
+     */
+    additionalExtensions?: Extension[];
+    /**
+     * codemirror minimal setup flag
+     */
+    shouldHaveMinimalSetup?: boolean;
+    /**
+     * If the <Tab> key is enabled as normal input, i.e. it won't have the behavior of changing to the next input element, expected in a web app.
+     */
+    enableTab?: boolean;
 }
 
+const addExtensionsFor = (flag: boolean, ...extensions: Extension[]) => (flag ? [...extensions] : []);
+const addToKeyMapConfigFor = (flag: boolean, ...keys: any) => (flag ? [...keys] : []);
+const addHandlersFor = (flag: boolean, handlerName: string, handler: any) =>
+    flag ? ({ [handlerName]: handler } as DOMEventHandlers<any>) : {};
+
 /**
  * Includes a code editor, currently we use CodeMirror library as base.
  */
 export const CodeEditor = ({
     onChange,
+    onSelection,
+    onMouseDown,
+    onFocusChange,
+    onKeyDown,
+    onCursorChange,
     name,
     id,
-    mode = "undefined",
+    mode,
     preventLineNumbers = false,
     defaultValue = "",
     readOnly = false,
-    height,
+    shouldHaveMinimalSetup = true,
     wrapLines = false,
     onScroll,
-    setEditorInstance,
+    setEditorView,
     supportCodeFolding = false,
+    shouldHighlightActiveLine = false,
     outerDivAttributes,
     tabIntentSize = 2,
     tabIntentStyle = "tab",
+    placeholder,
+    additionalExtensions = [],
     tabForceSpaceForModes = ["python", "yaml"],
+    enableTab = false,
+    height,
 }: CodeEditorProps) => {
-    const domRef = useRef<HTMLTextAreaElement>(null);
-
-    useEffect(() => {
-        const editorInstance = CodeMirror.fromTextArea(domRef.current!, {
-            mode: convertMode(mode),
-            lineWrapping: wrapLines,
-            lineNumbers: !preventLineNumbers,
-            tabSize: tabIntentSize,
-            indentUnit: tabIntentSize,
-            indentWithTabs: tabIntentStyle === "tab" && !(tabForceSpaceForModes ?? []).includes(mode),
-            theme: "xq-light",
-            readOnly: readOnly,
-            extraKeys: {
-                Tab: function (cm) {
-                    cm.execCommand(cm.getOption("indentWithTabs") ? "insertTab" : "insertSoftTab");
-                },
-            },
-            foldGutter: supportCodeFolding,
-            gutters: supportCodeFolding ? ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] : [],
-        });
+    const parent = useRef<any>(undefined);
 
-        setEditorInstance && setEditorInstance(editorInstance);
-
-        if (onScroll) {
-            editorInstance.on("scroll", (instance) => {
-                onScroll(instance);
-            });
+    const onKeyDownHandler = (event: KeyboardEvent, view: EditorView) => {
+        if (onKeyDown && !onKeyDown(event)) {
+            if (event.key === "Enter") {
+                const cursor = view.state.selection.main.head;
+                const cursorLine = view.state.doc.lineAt(cursor).number;
+                const offsetFromFirstLine = view.state.doc.line(cursorLine).to;
+                view.dispatch({
+                    changes: {
+                        from: offsetFromFirstLine,
+                        insert: "\n",
+                    },
+                    selection: {
+                        anchor: offsetFromFirstLine + 1,
+                    },
+                });
+            }
         }
+    };
 
-        if (onChange) {
-            editorInstance.on("change", (api) => {
-                onChange(api.getValue());
-            });
-        }
+    React.useEffect(() => {
+        const tabIndent =
+            !!(tabIntentStyle === "tab" && mode && !(tabForceSpaceForModes ?? []).includes(mode)) || enableTab;
+        const keyMapConfigs = [
+            defaultKeymap as KeyBinding,
+            ...addToKeyMapConfigFor(supportCodeFolding, foldKeymap),
+            ...addToKeyMapConfigFor(tabIndent, indentWithTab),
+        ];
+        const domEventHandlers = {
+            ...addHandlersFor(!!onScroll, "scroll", onScroll),
+            ...addHandlersFor(
+                !!onMouseDown,
+                "mousedown",
+                (_: any, view: EditorView) => onMouseDown && onMouseDown(view)
+            ),
+            ...addHandlersFor(!!onFocusChange, "blur", () => onFocusChange && onFocusChange(false)),
+            ...addHandlersFor(!!onFocusChange, "focus", () => onFocusChange && onFocusChange(true)),
+            ...addHandlersFor(!!onKeyDown, "keydown", onKeyDownHandler),
+        } as DOMEventHandlers<any>;
+        const extensions = [
+            markField,
+            adaptedPlaceholder(placeholder),
+            adaptedHighlightSpecialChars(),
+            useCodeMirrorModeExtension(mode),
+            keymap?.of(keyMapConfigs),
+            EditorState?.tabSize.of(tabIntentSize),
+            EditorState?.readOnly.of(readOnly),
+            AdaptedEditorViewDomEventHandlers(domEventHandlers) as Extension,
+            EditorView?.updateListener.of((v: ViewUpdate) => {
+                onChange && onChange(v.state.doc.toString());
+
+                if (onSelection)
+                    onSelection(v.state.selection.ranges.filter((r) => !r.empty).map(({ from, to }) => ({ from, to })));
+
+                if (onCursorChange) {
+                    const cursorPosition = v.state.selection.main.head ?? 0;
+                    const editorRect = v.view.dom.getBoundingClientRect();
+                    const coords = v.view.coordsAtPos(cursorPosition),
+                        scrollInfo = v.view.scrollDOM;
+                    if (coords && scrollInfo && editorRect) {
+                        // Calculate the coordinates relative to the editor's top-left corner
+                        const relativeLeft = coords.left - editorRect.left;
+                        const relativeBottom = coords.bottom - editorRect.bottom;
+
+                        onCursorChange(
+                            cursorPosition,
+                            { ...coords, left: relativeLeft, bottom: relativeBottom },
+                            scrollInfo,
+                            v.view
+                        );
+                    }
+                }
+            }),
+            addExtensionsFor(shouldHaveMinimalSetup, minimalSetup),
+            addExtensionsFor(!preventLineNumbers, adaptedLineNumbers()),
+            addExtensionsFor(shouldHighlightActiveLine, adaptedHighlightActiveLine()),
+            addExtensionsFor(wrapLines, EditorView?.lineWrapping),
+            addExtensionsFor(supportCodeFolding, adaptedFoldGutter(), adaptedCodeFolding()),
+            additionalExtensions,
+        ];
+
+        const view: EditorView = new AdaptedEditorView({
+            state: EditorState?.create({
+                doc: defaultValue,
+                extensions,
+            }),
+            parent: parent.current,
+        });
 
         if (height) {
-            editorInstance.setSize(null, height);
+            view.dom.style.height = typeof height === "string" ? height : `${height}px`;
         }
 
-        editorInstance.setValue(defaultValue);
+        setEditorView && setEditorView(view);
 
-        return function cleanup() {
-            editorInstance.toTextArea();
+        return () => {
+            view.destroy();
+            setEditorView && setEditorView(undefined);
         };
-    }, [onChange, mode, preventLineNumbers]);
+    }, [parent.current, mode, preventLineNumbers]);
 
     return (
-        <div {...outerDivAttributes} className={`${eccgui}-codeeditor ${eccgui}-codeeditor--mode-${mode}`}>
-            <textarea
-                ref={domRef}
-                /**
-                 * FIXME: same `data-test-id` for multiple code editor elements are valid
-                 * but may not make really sense for testing purposes. Currently let it
-                 * unchanged from the code what was took over here.
-                 */
-                data-test-id="codemirror-wrapper"
-                id={id ? id : `codemirror-${name}`}
-                name={name}
-                defaultValue={defaultValue}
-            />
-        </div>
+        <div
+            id={id ? id : `codemirror-${name}`}
+            ref={parent}
+            data-test-id="codemirror-wrapper"
+            className={`${eccgui}-codeeditor ${eccgui}-codeeditor--mode-${mode}`}
+            {...outerDivAttributes}
+        />
     );
 };
 
-const convertMode = (mode: SupportedCodeEditorModes | undefined): string | ModeSpec<ModeSpecOptions> | undefined => {
-    switch (mode) {
-        case "undefined":
-            return undefined;
-        case "json":
-            return {
-                name: "javascript",
-                jsonld: true,
-            };
-        default:
-            return mode;
-    }
-};
+CodeEditor.supportedModes = supportedCodeEditorModes;

package/src/extensions/codemirror/_codemirror.scss

@@ -1,25 +1,28 @@
-@import "~codemirror/lib/codemirror";
-@import "~codemirror/theme/xq-light";
-@import "~codemirror/addon/fold/foldgutter";
+// own vars
+$eccgui-color-codeeditor-background: $eccgui-color-textfield-background !default;
 
 // adjustments
 // stylelint-disable selector-class-pattern
 .#{$eccgui}-codeeditor {
+    position: relative;
+    display: flex;
     max-width: 100%;
 
-    .CodeMirror {
+    [class^="cm-theme"] {
+        width: 100%;
+    }
+
+    .cm-editor {
+        width: 100%;
         height: 290px;
         clip-path: unset !important; // we may check later why they set inset(0) now
+        background-color: $eccgui-color-codeeditor-background;
         border-radius: $pt-border-radius;
 
         // get them a "border" like input boxes from blueprintjs
         box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow;
 
-        &.CodeMirror-focused {
-            box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
-        }
-
-        .CodeMirror-scroll {
+        .cm-scroller {
             width: calc(100% - 2px);
             height: calc(100% - 2px);
 
@@ -27,13 +30,11 @@
             padding: 0;
             margin: 1px;
             cursor: text;
+        }
 
-            // remove scrollbars, codemirrow has own elements to fake them
-            scrollbar-width: none; // Firefox
-            -ms-overflow-style: none; // IE, Edge
-            &::-webkit-scrollbar {
-                display: none; // Chrome, Safari and Opera
-            }
+        &.cm-focused {
+            outline: none;
+            box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
         }
 
         .CodeMirror-hscrollbar {
@@ -52,7 +53,7 @@
             bottom: 1px;
         }
 
-        .CodeMirror-sizer {
+        .cm-content {
             border-right-width: $eccgui-size-inline-whitespace !important;
         }
 
@@ -72,12 +73,14 @@
     }
 }
 
+// cm-lineNumbers
+
 .#{$prefix}--accordion__content {
-    .CodeMirror-scroll,
-    .CodeMirror-sizer,
-    .CodeMirror-gutter,
-    .CodeMirror-gutters,
-    .CodeMirror-linenumber {
+    .cm-scroller,
+    .cm-content,
+    .cm-gutter,
+    .cm-gutters,
+    .cm-lineNumbers {
         box-sizing: content-box;
     }
 }
@@ -91,23 +94,3 @@
     }
 }
 // stylelint-enable selector-class-pattern
-
-//custom styles for json mode
-.#{$eccgui}-codeeditor--mode-json {
-    .CodeMirror-line {
-        & > span {
-            span.cm-property {
-                color: $eccgui-color-warning-text;
-            }
-            span.cm-string {
-                color: $eccgui-color-success-text;
-            }
-            span.cm-number {
-                color: $eccgui-color-accent;
-            }
-            span.cm-atom {
-                color: $eccgui-color-primary;
-            }
-        }
-    }
-}

package/src/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.ts

@@ -0,0 +1,44 @@
+import { defaultHighlightStyle, StreamLanguage, StreamParser, LanguageSupport } from "@codemirror/language";
+
+//modes imports
+import { markdown } from "@codemirror/lang-markdown";
+import { json } from "@codemirror/lang-json";
+import { xml } from "@codemirror/lang-xml";
+import { javascript } from "@codemirror/legacy-modes/mode/javascript";
+import { python } from "@codemirror/legacy-modes/mode/python";
+import { sparql } from "@codemirror/legacy-modes/mode/sparql";
+import { sql } from "@codemirror/legacy-modes/mode/sql";
+import { turtle } from "@codemirror/legacy-modes/mode/turtle";
+import { jinja2 } from "@codemirror/legacy-modes/mode/jinja2";
+import { yaml } from "@codemirror/legacy-modes/mode/yaml";
+import { ntriples } from "@codemirror/legacy-modes/mode/ntriples";
+import { mathematica } from "@codemirror/legacy-modes/mode/mathematica";
+
+//adaptations
+import { adaptedSyntaxHighlighting } from "../tests/codemirrorTestHelper";
+
+const supportedModes = {
+    markdown,
+    python,
+    sparql,
+    turtle,
+    xml,
+    yaml,
+    jinja2,
+    json,
+    ntriples,
+    mathematica,
+    sql,
+    javascript,
+} as const;
+
+export const supportedCodeEditorModes = Object.keys(supportedModes) as Array<keyof typeof supportedModes>;
+export type SupportedCodeEditorModes = (typeof supportedCodeEditorModes)[number];
+
+export const useCodeMirrorModeExtension = (mode?: SupportedCodeEditorModes) => {
+    return !mode
+        ? adaptedSyntaxHighlighting(defaultHighlightStyle)
+        : ["json", "markdown", "xml"].includes(mode)
+        ? ((typeof supportedModes[mode] === "function" ? supportedModes[mode] : () => {}) as () => LanguageSupport)()
+        : StreamLanguage?.define(supportedModes[mode] as StreamParser<unknown>);
+};

package/src/extensions/codemirror/tests/codemirrorTestHelper.ts

@@ -0,0 +1,57 @@
+/**
+ *  This file helps avoid jest errors that arise from codemirror node_module files.
+ *  Errors like 'Cannot read keyword of undefined',
+ *              '(view, highlightActiveLine) is not a function',
+ *              'EditorView is not a constructor'
+ * This errors do not exist during compilation only during testing.
+ */
+//Todo this should become redundant with later patches that avoid this error
+
+import { EditorView, placeholder, highlightSpecialChars, lineNumbers, highlightActiveLine } from "@codemirror/view";
+import { syntaxHighlighting, foldGutter, codeFolding } from "@codemirror/language";
+import { Extension } from "@codemirror/state";
+
+/** placeholder extension, current error '_view.placeholder is not a function' */
+export const adaptedPlaceholder = (text?: string) =>
+    typeof placeholder === "function" ? placeholder(text ?? "") : ((() => {}) as unknown as Extension);
+
+function isConstructor(f: any) {
+    try {
+        new f();
+    } catch (err) {
+        // verify err is the expected error and then
+        return false;
+    }
+    return true;
+}
+
+/** current error '_view.Editor is not a constructor' */
+export const AdaptedEditorView = isConstructor(EditorView)
+    ? EditorView
+    : (class view {
+          constructor() {}
+          destroy() {}
+      } as any);
+
+const emptyExtension = (() => {}) as any;
+/** extension adding event handlers, current error '(view, domEventHandlers) is not a function'  */
+export const AdaptedEditorViewDomEventHandlers =
+    typeof EditorView?.domEventHandlers == "function" ? EditorView?.domEventHandlers : emptyExtension;
+
+export const adaptedSyntaxHighlighting = (style: any) =>
+    typeof syntaxHighlighting === "function" ? syntaxHighlighting(style) : emptyExtension;
+
+export const adaptedHighlightSpecialChars = (props?: any) =>
+    typeof highlightSpecialChars === "function" ? highlightSpecialChars(props) : emptyExtension;
+
+export const adaptedLineNumbers = (props?: any) =>
+    typeof lineNumbers === "function" ? lineNumbers(props) : emptyExtension;
+
+export const adaptedHighlightActiveLine = () =>
+    typeof highlightActiveLine === "function" ? highlightActiveLine() : emptyExtension;
+
+export const adaptedFoldGutter = (props?: any) =>
+    typeof foldGutter === "function" ? foldGutter(props) : emptyExtension;
+
+export const adaptedCodeFolding = (props?: any) =>
+    typeof codeFolding === "function" ? codeFolding(props) : emptyExtension;

package/src/extensions/react-flow/edges/edgeTypes.ts

@@ -8,7 +8,7 @@
 import { EdgeDefault } from "./EdgeDefault";
 import { EdgeStep } from "./EdgeStep";
 
-// @deprecated will be removed because it is probably not used this way anymore
+/** @deprecated (v25) will be removed without replacement, define it yourself or use `<ReactFlow/` with `configuration` option. */
 export const edgeTypes = {
     default: EdgeDefault,
     straight: EdgeDefault,

package/src/extensions/react-flow/index.ts

@@ -1,6 +1,3 @@
-import { miniMapUtils } from "./minimap/utils";
-import { nodeDefaultUtils } from "./nodes/nodeUtils";
-
 export * from "./nodes/NodeDefault";
 export * from "./nodes/NodeContent";
 export * from "./nodes/NodeContentExtension";
@@ -18,13 +15,5 @@ export * from "./minimap/MiniMap";
 export * from "./minimap/utils";
 
 // deprecated exports
-export { nodeTypes } from "./nodes/nodeTypes"; // FIXME: deprecated, remove it later
-export { edgeTypes } from "./edges/edgeTypes"; // FIXME: deprecated, remove it later
-// @deprecated was moved to `miniMapUtils.nodeClassName`
-const minimapNodeClassName = miniMapUtils.nodeClassName;
-// @deprecated was moved to `miniMapUtils.nodeClassName`
-const minimapNodeColor = miniMapUtils.nodeColor;
-export { minimapNodeClassName, minimapNodeColor };
-// @deprecated renamed to `nodeDefaultUtils`
-const nodeUtils = nodeDefaultUtils;
-export { nodeUtils };
+export { nodeTypes } from "./nodes/nodeTypes"; // @deprecated removed in v25
+export { edgeTypes } from "./edges/edgeTypes"; // @deprecated removed in v25

package/src/extensions/react-flow/minimap/_minimap.scss

@@ -8,28 +8,6 @@
     }
 }
 
-.#{$eccgui}-graphviz__minimap__node--highlight-match {
-    stroke: $eccgui-color-accent;
-    stroke-width: 5;
-}
-.#{$eccgui}-graphviz__minimap__node--highlight-altmatch {
-    stroke: complement($eccgui-color-primary);
-    stroke-width: 5;
-}
-.#{$eccgui}-graphviz__minimap__node--highlight-success {
-    stroke: $eccgui-color-success-text;
-    stroke-width: 5;
-}
-.#{$eccgui}-graphviz__minimap__node--highlight-warning {
-    stroke: $eccgui-color-warning-text;
-    stroke-width: 7;
-}
-.#{$eccgui}-graphviz__minimap__node--highlight-danger {
-    fill: $eccgui-color-danger-text;
-    stroke: $eccgui-color-danger-text;
-    stroke-width: 9;
-}
-
 .react-flow__minimap-node {
     // FIXME: this is a first basic implementation, later it should be possible to highlight without overwriting stroke/fill colors
 

package/src/extensions/react-flow/minimap/utils.ts

@@ -1,15 +1,12 @@
 import { intentClassName } from "../../../common/Intent";
 
 import { CLASSPREFIX as eccgui } from "./../../../configuration/constants";
-import { nodeContentUtils } from "./../nodes/NodeContent";
 
 const nodeClassName = (node: any) => {
     const typeClass = `${eccgui}-graphviz__minimap__node--` + node.type;
-    const stateClass = node.data?.highlightedState
-        ? nodeContentUtils.gethighlightedStateClasses(node.data.highlightedState, `${eccgui}-graphviz__minimap__node`)
-        : "";
+    // TODO: re-implement the evaluation of node.data.highlightColor so it is highlighted the same way in the minimap, too.
     const intentClass = node.data?.intent ? intentClassName(node.data.intent) : "";
-    return `${typeClass} ${intentClass} ${stateClass}`;
+    return `${typeClass} ${intentClass}`;
 };
 
 const nodeColor = (node: any) => {