@eccenca/gui-elements 23.1.0 → 23.2.0-rc.1

package/src/components/Tooltip/Tooltip.tsx

@@ -35,7 +35,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
      markdownProps?: Omit<MarkdownParserProps, "children">;
 }
 
-function Tooltip({
+export const Tooltip = ({
     children,
     content,
     className = "",
@@ -44,7 +44,7 @@ function Tooltip({
     markdownEnabler = "\n\n",
     markdownProps,
     ...otherProps
-}: TooltipProps) {
+}: TooltipProps) => {
     let tooltipContent = content;
 
     if (

package/src/components/Typography/Highlighter.tsx

@@ -10,7 +10,7 @@ export interface HighlighterProps {
  * @param label       The string to highlight.
  * @param searchValue The mutli-word search query from which single words should be highlighted in the label.
  */
-function Highlighter({ label, searchValue }: HighlighterProps) {
+export function Highlighter({ label, searchValue }: HighlighterProps) {
     return <>{getSearchHighlight(label, searchValue)}</>;
 }
 
@@ -49,22 +49,37 @@ const escapeRegexWord = (str: string) => {
     return str.toLowerCase().replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
 };
 
-/** Extracts search words separated by white space. */
+/**
+ * Extracts search words separated by white space.
+ * @deprecated moved to `highlighterUtils.extractSearchWords`
+ */
 export function extractSearchWords(textQuery: string, toLowerCase: boolean = false): string[] {
     const words = textQuery.split(RegExp("\\s+")).filter((word) => word !== "");
     return toLowerCase ? words.map(w => w.toLowerCase()) : words
 }
 
-/** Returns true if all search words are included in the given text */
+/**
+ * Returns true if all search words are included in the given text
+ * @deprecated moved to `highlighterUtils.matchesAllWords`
+ */
 export function matchesAllWords(text: string,
                                 searchWords: string[]): boolean {
     return searchWords.every(w => text.includes(w))
 }
 
-/** Creates a case-insensitive multi-word regex, that matches any of the given words. */
+/**
+ * Creates a case-insensitive multi-word regex, that matches any of the given words.
+ * @deprecated moved to `highlighterUtils.createMultiWordRegex`
+ */
 export function createMultiWordRegex(multiWordQuery: string[], global: boolean = true) {
     const regexString = multiWordQuery.map(escapeRegexWord).join("|");
     return RegExp(regexString, (global ? "g" : "") + "i");
 }
 
+export const highlighterUtils = {
+    extractSearchWords,
+    matchesAllWords,
+    createMultiWordRegex,
+}
+
 export default Highlighter;

package/src/components/Typography/HtmlContentBlock.tsx

@@ -18,7 +18,7 @@ export interface HtmlContentBlockProps extends React.HTMLAttributes<HTMLDivEleme
     noScrollbarsOnChildren?: boolean;
 }
 
-function HtmlContentBlock({
+export const HtmlContentBlock = ({
     className = "",
     children,
     small = false,
@@ -29,7 +29,7 @@ function HtmlContentBlock({
     linebreakPrevented = false,
     noScrollbarsOnChildren = false,
     ...otherProps
-}: HtmlContentBlockProps) {
+}: HtmlContentBlockProps) => {
     return (
         <div
             className={

package/src/components/Typography/OverflowText.tsx

@@ -11,7 +11,7 @@ export interface OverflowTextProps {
 }
 
 /** Prevents text from overflowing. */
-function OverflowText({
+export const OverflowText = ({
     className = "",
     children,
     ellipsis,
@@ -19,7 +19,7 @@ function OverflowText({
     passDown = false,
     useHtmlElement,
     ...otherProps
-}: OverflowTextProps) {
+}: OverflowTextProps) => {
     const defaultHtmlElement = inline ? "span" : "div";
     const overflowtextElement = useHtmlElement
         ? React.createElement(useHtmlElement)

package/src/components/Typography/WhiteSpaceContainer.tsx

@@ -47,7 +47,7 @@ export interface WhiteSpaceContainerProps extends React.HTMLAttributes<HTMLDivEl
  * Simple container to add whitespace inside and around of it without adding style attributes directly.
  * This way the added whitespace keeps visually connected to the other whitespaces used in the application.
  */
-function WhiteSpaceContainer({
+export const WhiteSpaceContainer = ({
     className,
     children,
     marginTop,
@@ -60,7 +60,7 @@ function WhiteSpaceContainer({
     paddingLeft,
     linebreakForced = false,
     ...otherDivProps
-}: WhiteSpaceContainerProps) {
+}: WhiteSpaceContainerProps) => {
 
     const elementClassName = `${eccgui}-typography__whitespace`;
 

package/src/components/Typography/index.ts

@@ -1,25 +1,13 @@
-import Highlighter, { HighlighterProps } from "./Highlighter";
 import { extractSearchWords, matchesAllWords, createMultiWordRegex } from "./Highlighter";
-import HtmlContentBlock, { HtmlContentBlockProps } from "./HtmlContentBlock";
-import OverflowText, { OverflowTextProps } from "./OverflowText";
-import WhiteSpaceContainer, { WhiteSpaceContainerProps } from "./WhiteSpaceContainer";
-
-export type {
-    HighlighterProps,
-    HtmlContentBlockProps,
-    OverflowTextProps,
-    WhiteSpaceContainerProps
-};
-
-export {
-    Highlighter,
-    HtmlContentBlock,
-    OverflowText,
-    WhiteSpaceContainer,
-};
 
+// @deprecated use `highlighterUtils`
 export const HighlighterFunctions = {
     extractSearchWords,
     matchesAllWords,
     createMultiWordRegex,
 };
+
+export * from "./Highlighter";
+export * from "./HtmlContentBlock";
+export * from "./OverflowText";
+export * from "./WhiteSpaceContainer";

package/src/components/Workspace/WorkspaceContent.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 // import PropTypes from 'prop-types';
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import Grid from "./../Grid/Grid";
+import Grid, { GridProps } from "./../Grid/Grid";
 import GridRow from "./../Grid/GridRow";
 
-function WorkspaceContent({ children, className = '', ...restProps }: any) {
+export interface WorkspaceContentProps extends GridProps {};
+
+export const WorkspaceContent = ({ children, className = '', ...restProps }: WorkspaceContentProps) => {
     return (
         <Grid
             {...restProps}

package/src/components/Workspace/WorkspaceHeader.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface IWorkspaceHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface WorkspaceHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: any;
     /**
         space-delimited list of class names
@@ -9,7 +9,9 @@ interface IWorkspaceHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
 
-function WorkspaceHeader({ children, className = '', ...otherProps }: IWorkspaceHeaderProps) {
+export type IWorkspaceHeaderProps = WorkspaceHeaderProps;
+
+export const WorkspaceHeader = ({ children, className = '', ...otherProps }: WorkspaceHeaderProps) => {
     return (
         <div className={`${eccgui}-workspace__header ` + className} {...otherProps}>
             { children }

package/src/components/Workspace/WorkspaceMain.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-// import PropTypes from 'prop-types';
-import GridColumn from "./../Grid/GridColumn";
+import GridColumn, { GridColumnProps } from "./../Grid/GridColumn";
 
-function WorkspaceMain({ children, className = "", ...restProps }: any) {
+export interface WorkspaceMainProps extends GridColumnProps {};
+
+export const WorkspaceMain = ({ children, className = "", ...restProps }: GridColumnProps) => {
     return (
         <GridColumn {...restProps} className={`${eccgui}-workspace__main ` + className}>
             {children}

package/src/components/Workspace/WorkspaceSide.tsx

@@ -1,14 +1,15 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-// import PropTypes from 'prop-types';
-import GridColumn from "./../Grid/GridColumn";
+import GridColumn, { GridColumnProps } from "./../Grid/GridColumn";
 
-function WorkspaceSide({ children, className = '', ...restProps }: any) {
+export interface WorkspaceSideProps extends GridColumnProps {};
+
+export const WorkspaceSide = ({ children, className = '', ...restProps }: GridColumnProps) => {
     return (
         <GridColumn
             {...restProps}
             className={`${eccgui}-workspace__side `+className}
-            sm={4} md={8} lg={5} xlg={5}
+            carbonSizeConfig={{ sm:4, md:8, lg:5, xlg:5 }}
         >
             { children }
         </GridColumn>

package/src/components/Workspace/index.ts

@@ -0,0 +1,4 @@
+export * from "./WorkspaceContent";
+export * from "./WorkspaceMain";
+export * from "./WorkspaceSide";
+export * from "./WorkspaceHeader";

package/src/components/Workspace/workspace.scss

@@ -1 +1,6 @@
 @import 'header';
+
+html {
+    background-color: $eccgui-color-workspace-background;
+    color: $eccgui-color-workspace-text;
+}

package/src/components/index.scss

@@ -1,6 +1,40 @@
-@import "./Badge/badge";
+@import "./Application/application";
+@import "./AutocompleteField/autocompletefield";
+@import "./Breadcrumb/breadcrumb";
+@import "./Button/button";
+@import "./Card/card";
+@import "./Checkbox/checkbox";
+@import "./ContextOverlay/contextoverlay";
 @import "./Depiction/depiction";
+@import "./Dialog/dialog";
+@import "./Form/form";
+@import "./Grid/grid";
+@import "./HoverToggler/hovertoggler";
 @import "./Icon/icon";
-@import "./Tree/tree";
+@import "./Iframe/iframe";
+@import "./InteractionGate/interactiongate";
+@import "./Label/label";
+@import "./Link/link";
+@import "./Menu/menu";
+@import "./Notification/notification";
+@import "./OverviewItem/overviewitem";
+@import "./Pagination/pagination";
+@import "./RadioButton/radiobutton";
+@import "./Select/select";
+@import "./Separation/separation";
+@import "./Spinner/spinner";
+@import "./Structure/titles";
 @import "./Table/table";
+@import "./Tabs/tabs";
+@import "./Tag/tag";
+@import "./TextField/textfield";
+@import "./TagInput/taginput";
+@import "./Toolbar/toolbar";
+@import "./Tooltip/tooltip";
+@import "./Tree/tree";
 @import "./Typography/typography";
+@import "./Workspace/workspace";
+@import "./Accordion/accordion";
+@import "./AutoSuggestion/AutoSuggestion";
+@import "./Badge/badge";
+@import "./PropertyValuePair/propertyvalue";

package/src/components/index.ts

@@ -1,10 +1,50 @@
+export * from "./Accordion";
+export * from "./Application";
+export * from "./AutocompleteField";
+export * from "./SuggestField";
+export * from "./AutoSuggestion";
+export * from "./CodeAutocompleteField";
 export * from "./Badge/Badge";
+export * from "./Breadcrumb";
+export * from "./Button/Button";
+export * from "./Card";
+export * from "./Checkbox/Checkbox";
+export * from "./ContextOverlay";
 export * from "./Depiction/Depiction";
+export * from "./Dialog";
+export * from "./Form";
+export * from "./Grid";
+export * from "./HoverToggler/HoverToggler";
 export * from "./Icon";
+export * from "./Iframe";
+export * from "./InteractionGate/InteractionGate";
+export * from "./Label/Label";
+export * from "./Link/Link";
+export * from "./List/List";
+export * from "./Menu";
+export * from "./MultiSelect/MultiSelect";
+export * from "./MultiSuggestField/MultiSuggestField";
+export * from "./Notification";
+export * from "./NumericInput/NumericInput";
+export * from "./OverviewItem";
+export * from "./Pagination/Pagination";
 export * from "./ProgressBar";
+export * from "./PropertyValuePair";
+export * from "./RadioButton/RadioButton";
+export * from "./Select/Select";
+export * from "./Separation/Divider";
+export * from "./Separation/Spacing";
+export * from "./Spinner/Spinner";
+export * from "./Structure";
+export * from "./Switch/Switch";
 export * from "./Table";
+export * from "./Tabs";
 export * from "./Tag";
+export * from "./TextField";
+export * from "./Toolbar";
+export * from "./Tooltip/Tooltip";
 export * from "./Tree/Tree";
 export * from "./Typography";
+export * from "./Workspace";
 
 export * from "./interfaces";

package/src/extensions/codemirror/_codemirror.scss

@@ -1,11 +1,12 @@
-@import "~codemirror/lib/codemirror.css";
-@import "~codemirror/theme/xq-light.css";
+@import "~codemirror/lib/codemirror";
+@import "~codemirror/theme/xq-light";
 
 // adjustments
 
 .#{$eccgui}-codeeditor {
     .CodeMirror {
         border-radius: $pt-border-radius;
+        clip-path: unset !important; // we may check later why they set inset(0) now
 
         // get them a "border" like input boxes from blueprintjs
         box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow;

package/src/extensions/react-flow/edges/EdgeDefault.tsx

@@ -9,8 +9,9 @@ import {
 } from "react-flow-renderer";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import { IntentTypes, intentClassName } from "../../../common/Intent";
-import { NodeHighlightColor, evaluateHighlightColors } from "./../nodes/NodeContent";
-import { drawEdgeStraight} from "./utils";
+import { nodeContentUtils } from "./../nodes/NodeContent";
+import { NodeHighlightColor } from "./../nodes/sharedTypes";
+import { drawEdgeStraight, drawEdgeStep } from "./utils";
 
 export interface EdgeDefaultDataProps {
     /**
@@ -98,7 +99,7 @@ export const EdgeDefault = memo(
         const edgeStyle = edgeOriginalProperties.style ?? {};
         const {
             highlightCustomPropertySettings
-        } = evaluateHighlightColors("--edge-highlight", highlightColor);
+        } = nodeContentUtils.evaluateHighlightColors("--edge-highlight", highlightColor);
 
         return (
             <g
@@ -137,14 +138,14 @@ export const EdgeDefault = memo(
     }
 );
 
-export const createEdgeDefaultClassName = ({
+const createEdgeDefaultClassName = ({
     strokeType,
     intent,
     highlightColor,
 }: EdgeDefaultDataProps, baseClass: string = "react-flow__edge-path") => {
     const {
         highlightClassNameSuffix,
-    } = evaluateHighlightColors("--edge-highlight", highlightColor);
+    } = nodeContentUtils.evaluateHighlightColors("--edge-highlight", highlightColor);
     return baseClass +
     (strokeType ? ` ${baseClass}--stroke-${strokeType}` : "") +
     (intent ? ` ${intentClassName(intent)}` : "") +
@@ -153,3 +154,9 @@ export const createEdgeDefaultClassName = ({
         : ""
     );
 }
+
+export const edgeDefaultUtils = {
+    createEdgeDefaultClassName,
+    drawEdgeStep,
+    drawEdgeStraight,
+}

package/src/extensions/react-flow/edges/EdgeLabel.tsx

@@ -39,6 +39,7 @@ export const EdgeLabel = memo(({
     large,
     fullWidth,
     intent,
+    title,
     ...otherDivProps
 } : EdgeLabelProps) => {
 
@@ -70,7 +71,7 @@ export const EdgeLabel = memo(({
                     }
                 </div>
             )}
-            <div className={`${eccgui}-graphviz__edge-label__text`}>
+            <div className={`${eccgui}-graphviz__edge-label__text`} title={title}>
                 { typeof text === "string" ? <OverflowText>{ text }</OverflowText> : text }
             </div>
             {!!actions && (
@@ -82,7 +83,7 @@ export const EdgeLabel = memo(({
     )
 });
 
-interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObjectElement> {
+export interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObjectElement> {
     /**
      * The `<EdgeLabel />` element that need to be displayed.
      */

package/src/extensions/react-flow/edges/EdgeStep.tsx

@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import { EdgeDefaultProps, EdgeDefaultDataProps, EdgeDefault} from "./EdgeDefault";
 import { drawEdgeStep } from "./utils";
 
-export interface EdgeStepDataProps extends EdgeDefaultDataProps {
+interface EdgeStepDataProps extends EdgeDefaultDataProps {
     stepCornerRadius?: number;
 }
 

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

@@ -8,6 +8,7 @@
 import { EdgeDefault } from "./EdgeDefault";
 import { EdgeStep } from "./EdgeStep";
 
+// @deprecated will be removed because it is probably not used this way anymore
 export const edgeTypes = {
     default: EdgeDefault,
     straight: EdgeDefault,

package/src/extensions/react-flow/edges/stories/EdgeLabel.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { loremIpsum } from 'react-lorem-ipsum';
-import { EdgeLabel, IconButton, Badge, Icon } from "./../../../../../index";
+import { EdgeLabel, IconButton, Badge, Icon, OverflowText } from "./../../../../../index";
 import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
 import { helpersArgTypes } from "../../../../../.storybook/helpers";
 
@@ -34,7 +34,15 @@ const Template: ComponentStory<typeof EdgeLabel> = (args) => (
     <EdgeLabel {...args} />
 );
 
+const labelText = loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 8, random: false }).toString()
+
 export const Default = Template.bind({});
 Default.args = {
-    text: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 8, random: false }).toString(),
+    text: labelText,
 };
+
+export const ReverseEllipsisLabel = Template.bind({});
+ReverseEllipsisLabel.args = {
+    text: <OverflowText ellipsis="reverse">{labelText}</OverflowText>,
+    title: labelText,
+}

package/src/extensions/react-flow/handles/HandleDefault.tsx

@@ -23,11 +23,10 @@ interface HandleExtensionProps extends ReacFlowVersionSupportProps {
     onClick?: () => void;
 }
 
-export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacyProps {
-}
+export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacyProps {}
+export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNextProps {}
 
-export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNextProps {
-}
+export type HandleDefaultProps = HandleProps | HandleNextProps;
 
 export const HandleDefault = memo(({
     flowVersion,
@@ -35,7 +34,7 @@ export const HandleDefault = memo(({
     tooltip,
     children,
     ...handleProps
-}: HandleProps | HandleNextProps) => {
+}: HandleDefaultProps) => {
     const evaluateFlowVersion = useReactFlowVersion();
     const flowVersionCheck = flowVersion || evaluateFlowVersion;
 

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

@@ -1,24 +1,28 @@
-export { NodeDefault } from "./nodes/NodeDefault";
-export { NodeContent } from "./nodes/NodeContent";
-export { NodeContentExtension } from "./nodes/NodeContentExtension";
-export { NodeTools } from "./nodes/NodeTools";
-export { nodeTypes } from "./nodes/nodeTypes";
-export { EdgeStep } from "./edges/EdgeStep";
-export { EdgeTools } from "./edges/EdgeTools";
-export { edgeTypes } from "./edges/edgeTypes";
-export * from "./edges/EdgeLabel";
-export { MarkerArrowClosedInverse } from "./markers/MarkerArrowClosedInverse";
-export { ReactFlowMarkers } from "./markers/ReactFlowMarkers";
-export { MiniMap } from "./minimap/MiniMap";
-export { minimapNodeClassName, minimapNodeColor } from "./minimap/utils";
-export { default as nodeUtils } from "./nodes/nodeUtils";
-
-export type { NodeProps } from "./nodes/NodeDefault";
-export type { NodeContentProps } from "./nodes/NodeContent";
-export type { NodeContentExtensionProps } from "./nodes/NodeContentExtension";
-export type { NodeToolsProps } from "./nodes/NodeTools";
-export type { EdgeStepProps } from "./edges/EdgeStep";
-export type { MiniMapProps } from "./minimap/MiniMap";
+import { miniMapUtils } from "./minimap/utils";
+import { nodeDefaultUtils } from "./nodes/nodeUtils";
 
-export * from "./edges/EdgeDefault";
+export * from "./nodes/NodeDefault";
+export * from "./nodes/NodeContent";
+export * from "./nodes/NodeContentExtension";
+export * from "./nodes/NodeTools";
+export * from "./nodes/nodeUtils";
 export * from "./handles/HandleDefault";
+export * from "./edges/EdgeDefault";
+export * from "./edges/EdgeStep";
+export * from "./edges/EdgeTools";
+export * from "./edges/EdgeLabel";
+export * from "./markers/ReactFlowMarkers";
+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 };

package/src/extensions/react-flow/markers/ReactFlowMarkers.tsx

@@ -1,8 +1,10 @@
 import React, { FC } from "react";
 
+// FIXME: we need to check how these markers are used and if we can justify the namings
+
 import { MarkerArrowClosedInverse } from "./MarkerArrowClosedInverse";
 
-export const ReactFlowMarkers: FC = () => {
+const ReactFlowMarkers: FC = () => {
     return (
         <svg>
             <defs>
@@ -11,3 +13,8 @@ export const ReactFlowMarkers: FC = () => {
         </svg>
     );
 };
+
+export {
+    MarkerArrowClosedInverse,
+    ReactFlowMarkers
+}

package/src/extensions/react-flow/minimap/MiniMap.tsx

@@ -5,12 +5,7 @@ import {
     OnLoadParams,
 } from "react-flow-renderer";
 import {FlowTransform} from "react-flow-renderer/dist/types";
-import {
-    minimapNodeClassName,
-    minimapNodeColor,
-    minimapBorderColor
-} from "../minimap/utils";
-
+import { miniMapUtils } from "../minimap/utils";
 
 export interface MiniMapProps extends ReactFlowMiniMapProps {
     flowInstance?: OnLoadParams;
@@ -37,9 +32,9 @@ export const MiniMap = memo(({
     flowInstance,
     enableNavigation = false,
     maskColor = "#ddddddbb",
-    nodeClassName = minimapNodeClassName,
-    nodeColor = minimapNodeColor,
-    nodeStrokeColor = minimapBorderColor,
+    nodeClassName = miniMapUtils.nodeClassName,
+    nodeColor = miniMapUtils.nodeColor,
+    nodeStrokeColor = miniMapUtils.borderColor,
     ...minimapProps
 }: MiniMapProps) => {
     const minimapWrapper = React.useRef<HTMLDivElement | null>(null);

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

@@ -1,20 +1,26 @@
 import { CLASSPREFIX as eccgui } from "./../../../configuration/constants";
-import { gethighlightedStateClasses } from "./../nodes/NodeContent";
+import { nodeContentUtils } from "./../nodes/NodeContent";
 import { intentClassName } from "../../../common/Intent";
 
-export const minimapNodeClassName = (node: any) => {
+const nodeClassName = (node: any) => {
     const typeClass = `${eccgui}-graphviz__minimap__node--` + node.type;
-    const stateClass = node.data?.highlightedState ? gethighlightedStateClasses(node.data.highlightedState, `${eccgui}-graphviz__minimap__node`) : "";
+    const stateClass = node.data?.highlightedState ? nodeContentUtils.gethighlightedStateClasses(node.data.highlightedState, `${eccgui}-graphviz__minimap__node`) : "";
     const intentClass = node.data?.intent ? intentClassName(node.data.intent) : "";
     return `${typeClass} ${intentClass} ${stateClass}`;
 };
 
-export const minimapNodeColor = (node: any) => {
+const nodeColor = (node: any) => {
     const fillColor = node.data?.style?.backgroundColor || node.data?.style?.borderColor;
     return fillColor ?? "";
 }
 
-export const minimapBorderColor = (node: any) => {
+const borderColor = (node: any) => {
     const strokeColor = node.data?.style?.borderColor || node.data?.style?.backgroundColor;
     return strokeColor ?? "";
 }
+
+export const miniMapUtils = {
+    nodeClassName,
+    nodeColor,
+    borderColor,
+}