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

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

@@ -1,13 +1,21 @@
 import React from "react";
+import Color from "color";
 import { Position } from "react-flow-renderer";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
-import { HandleProps } from "./../handles/HandleDefault";
+import { DepictionProps } from "../../../components/Depiction/Depiction";
+import { IntentTypes } from "../../../common/Intent";
+import { ReacFlowVersionSupportProps } from "../versionsupport";
+import { HandleProps, HandleNextProps } from "./../handles/HandleDefault";
 import { NodeProps } from "./NodeDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
 export declare type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
+export declare type NodeHighlightColor = "default" | "alternate" | Color | string;
 export interface IHandleProps extends HandleProps {
     category?: "configuration";
 }
+interface NodeContentHandleNextProps extends HandleNextProps {
+    category?: "configuration";
+}
 export declare type NodeDimensions = {
     width: number;
     height: number;
@@ -19,13 +27,22 @@ interface NodeContentData<CONTENT_PROPS = any> {
      */
     iconName?: ValidIconName;
     /**
-     * Valid and accessible URL or `data-uri` for an image that should be displayed before the node label.
+     * Depiction element that should be displayed before the node label.
+     * As alternative a valid and accessible URL or `data-uri` for an image can be set, then the Depiction element is created automatically.
      */
-    depiction?: string;
+    depiction?: string | React.ReactElement<DepictionProps>;
+    /**
+     * Any element that should be displayed as depiction before the node label.
+     */
+    leftElement?: JSX.Element;
     /**
      * 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.
      */
@@ -39,7 +56,7 @@ interface NodeContentData<CONTENT_PROPS = any> {
      */
     footerContent?: React.ReactNode;
 }
-export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends NodeContentData, React.HTMLAttributes<HTMLDivElement> {
+export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends NodeContentData, ReacFlowVersionSupportProps, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Size of the node.
      * If `minimalShape` is not set to `none`then the configured size definition is only used for the selected node state.
@@ -51,9 +68,35 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      */
     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.
      */
@@ -76,7 +119,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * Array of property definition objects for `Handle` components that need to be created for the node.
      * @see https://reactflow.dev/docs/api/handle/
      */
-    handles?: IHandleProps[];
+    handles?: IHandleProps[] | NodeContentHandleNextProps[];
     /**
      * Set the minimal number of handles on left or right side of the node to activate the recalculation of the minimal height of the node.
      */
@@ -134,10 +177,14 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      */
     nodeDimensions?: NodeDimensions;
 }
-export declare const gethighlightedStateClasses: (state: any, baseClassName: any) => any;
+export declare const gethighlightedStateClasses: (state: HighlightingState | HighlightingState[], baseClassName: string) => string;
 /**
  * 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, footerContent, size, minimalShape, highlightedState, handles, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, onNodeResize, nodeDimensions, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherProps }: NodeContentProps<any>): JSX.Element;
+export declare function NodeContent<CONTENT_PROPS = any>({ flowVersion, iconName, depiction, leftElement, typeLabel, label, labelSubline, enlargeHeader, fullWidth, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, footerContent, size, minimalShape, highlightedState, intent, border, highlightColor, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, onNodeResize, nodeDimensions, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherDomProps }: NodeContentProps<any>): JSX.Element;
+export declare const evaluateHighlightColors: (baseCustomProperty: string, highlightColor?: NodeHighlightColor | NodeHighlightColor[] | undefined) => {
+    highlightClassNameSuffix: string[];
+    highlightCustomPropertySettings: React.CSSProperties;
+};
 export {};

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { NodeProps as ReactFlowNodeProps } from "react-flow-renderer";
 import { NodeContentProps } from "./NodeContent";
-export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReactFlowNodeProps {
+import { ReacFlowVersionSupportProps } from "../versionsupport";
+export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReacFlowVersionSupportProps, ReactFlowNodeProps {
     /**
      * Contains all properties for our implementation of the React-Flow node.
      * For details pls see the `NodeContent` element documentation.

package/dist/types/extensions/react-flow/versionsupport.d.ts

@@ -0,0 +1,7 @@
+export interface ReacFlowVersionSupportProps {
+    /**
+     * Spevifies the context of the react flow renderer version that is used for the component.
+     */
+    flowVersion?: "legacy" | "next" | "none";
+}
+export declare const useReactFlowVersion: () => "none" | "legacy" | "next";

package/dist/types/index.d.ts

@@ -44,8 +44,6 @@ import MenuDivider from "./components/Menu/MenuDivider";
 import ContextOverlay from "./components/ContextOverlay/ContextOverlay";
 import ContextMenu from "./components/ContextOverlay/ContextMenu";
 import Pagination from "./components/Pagination/Pagination";
-import Tag from "./components/Tag/Tag";
-import TagList from "./components/Tag/TagList";
 import Notification from "./components/Notification/Notification";
 import Toast from "./components/Notification/Toast";
 import Select from "./components/Select/Select";
@@ -53,7 +51,6 @@ import MultiSelect from "./components/MultiSelect/MultiSelect";
 import { Iframe } from "./components/Iframe/Iframe";
 import { IframeModal } from "./components/Iframe/IframeModal";
 import { OverviewItem, OverviewItemActions, OverviewItemDepiction, OverviewItemDescription, OverviewItemLine, OverviewItemList } from "./components/OverviewItem";
-import { TableContainer, Table, TableHead, TableRow, TableBody, TableCell, TableHeader } from "./components/SimpleTable";
 import BreadcrumbList from "./components/Breadcrumb/BreadcrumbList";
 import BreadcrumbItem from "./components/Breadcrumb/BreadcrumbItem";
 import Modal from "./components/Dialog/Modal";
@@ -76,7 +73,6 @@ import Link from "./components/Link/Link";
 import Spinner from "./components/Spinner/Spinner";
 import InteractionGate from "./components/InteractionGate/InteractionGate";
 import { PropertyName, PropertyValue, PropertyValuePair, PropertyValueList } from "./components/PropertyValuePair";
-import { ProgressBar } from "./components/ProgressBar/ProgressBar";
 import List from "./components/List/List";
 import * as LegacyReplacements from "./legacy-replacements";
 import * as TypographyClassNames from "./components/Typography/classnames";
@@ -90,8 +86,7 @@ declare const Utilities: {
     openInNewTab: (event: import("react").MouseEvent<HTMLElement, MouseEvent>, handler?: ((e: import("react").MouseEvent<HTMLElement, MouseEvent>) => void) | undefined, url?: string | undefined) => void;
     decideContrastColorValue: ({ testColor, lightColor, darkColor }: import("./common/utils/colorDecideContrastvalue").decideContrastColorValueProps) => string;
 };
-export { ApplicationContainer, ApplicationHeader, ApplicationContent, ApplicationSidebarNavigation, ApplicationSidebarToggler, ApplicationTitle, ApplicationToolbar, ApplicationToolbarSection, ApplicationToolbarAction, ApplicationToolbarPanel, AutoSuggestion, AutoSuggestionList, SingleLineCodeEditor, 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, IconButton, Label, Button, Checkbox, RadioButton, Tabs, Tab, TabTitle, TabPanel, TextField, TextArea, SearchField, Switch, NumericInput, FieldItem, FieldItemRow, FieldSet, BreadcrumbList, BreadcrumbItem, Modal, SimpleDialog, AlertDialog, Card, CardHeader, CardTitle, CardOptions, CardContent, CardActions, CardActionsAux, HoverToggler, Spacing, Divider, Tooltip, Section, SectionHeader, TitlePage, TitleMainsection, TitleSubsection, Accordion, AccordionItem, Toolbar, ToolbarSection, Tag, TagList, Pagination, Notification, Link, Spinner, InteractionGate, PropertyName, PropertyValue, PropertyValuePair, PropertyValueList, Toast, HelperClasses, Select, MultiSelect, AutoCompleteField, ProgressBar, Iframe, IframeModal, Utilities, LegacyReplacements, };
+export { ApplicationContainer, ApplicationHeader, ApplicationContent, ApplicationSidebarNavigation, ApplicationSidebarToggler, ApplicationTitle, ApplicationToolbar, ApplicationToolbarSection, ApplicationToolbarAction, ApplicationToolbarPanel, AutoSuggestion, AutoSuggestionList, SingleLineCodeEditor, Grid, GridRow, GridColumn, List, WorkspaceContent, WorkspaceMain, WorkspaceSide, WorkspaceHeader, Menu, MenuItem, MenuDivider, ContextOverlay, ContextMenu, OverviewItem, OverviewItemDepiction, OverviewItemDescription, OverviewItemLine, OverviewItemActions, OverviewItemList, IconButton, Label, Button, Checkbox, RadioButton, Tabs, Tab, TabTitle, TabPanel, TextField, TextArea, SearchField, Switch, NumericInput, FieldItem, FieldItemRow, FieldSet, BreadcrumbList, BreadcrumbItem, Modal, SimpleDialog, AlertDialog, Card, CardHeader, CardTitle, CardOptions, CardContent, CardActions, CardActionsAux, HoverToggler, Spacing, Divider, Tooltip, Section, SectionHeader, TitlePage, TitleMainsection, TitleSubsection, Accordion, AccordionItem, Toolbar, ToolbarSection, Pagination, Notification, Link, Spinner, InteractionGate, PropertyName, PropertyValue, PropertyValuePair, PropertyValueList, Toast, HelperClasses, Select, MultiSelect, AutoCompleteField, Iframe, IframeModal, Utilities, LegacyReplacements, };
 export * from "./components";
-export * from "./components/interfaces";
 export * from "./extensions";
 export * from "./cmem";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eccenca/gui-elements",
   "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-  "version": "23.1.0-rc.1",
+  "version": "23.1.0-rc.3",
   "license": "Apache-2.0",
   "homepage": "https://github.com/eccenca/gui-elements",
   "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -80,6 +80,7 @@
     "react-codemirror2": "^7.2.1",
     "react-dom": "^16.13.1",
     "react-flow-renderer": "9.7.4",
+    "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
     "react-inlinesvg": "^3.0.1",
     "react-markdown": "^7.0.1",
     "rehype-raw": "^6.1.0",

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -91,7 +91,7 @@ export interface IActivityAction extends TestableComponent {
     // The tooltip that should be shown over the action icon
     tooltip?: string;
     // The icon of the action button
-    icon: ValidIconName
+    icon: ValidIconName | React.ReactElement<TestIconProps>
     // Action is currently disabled (but shown)
     disabled?: boolean;
     // Warning state
@@ -167,10 +167,10 @@ export function ActivityControlWidget(props: IActivityControlProps) {
             </OverviewItemDescription>
             <OverviewItemActions>
                 {activityActions &&
-                    activityActions.map((action) => {
+                    activityActions.map((action, idx) => {
                         return (
                             <IconButton
-                                key={action.icon}
+                                key={typeof action.icon === "string" ? action.icon : action["data-test-id"] ?? idx}
                                 data-test-id={action["data-test-id"]}
                                 name={action.icon}
                                 text={action.tooltip}
@@ -189,11 +189,11 @@ export function ActivityControlWidget(props: IActivityControlProps) {
                         data-test-id={activityContextMenu["data-test-id"]}
                         togglerText={activityContextMenu.tooltip}
                     >
-                        {activityContextMenu.menuItems.map((menuAction) => {
+                        {activityContextMenu.menuItems.map((menuAction, idx) => {
                             return (
                                 <MenuItem
                                     icon={menuAction.icon}
-                                    key={menuAction.icon}
+                                    key={typeof menuAction.icon === "string" ? menuAction.icon : menuAction["data-test-id"] ?? idx}
                                     onClick={menuAction.action}
                                     text={menuAction.tooltip}
                                 />

package/src/cmem/ActivityControl/SilkActivityControl.tsx

@@ -1,12 +1,12 @@
-import { TestableComponent } from "../../components/interfaces";
-import { ActivityControlWidget, IActivityAction } from "./ActivityControlWidget";
-import React, { useEffect, useState } from "react";
+import {TestableComponent} from "../../components/interfaces";
+import {ActivityControlWidget, IActivityAction} from "./ActivityControlWidget";
+import React, {useEffect, useRef, useState} from "react";
 import {ConcreteActivityStatus, IActivityStatus} from "./ActivityControlTypes";
-import { Intent } from "@blueprintjs/core/src/common/intent";
-import { ActivityExecutionErrorReportModal } from "./ActivityExecutionErrorReportModal";
-import { Icon, Spacing } from "../../";
-import { ElapsedDateTimeDisplay, TimeUnits } from "../DateTimeDisplay/ElapsedDateTimeDisplay";
-import { IntentTypes } from "../../common/Intent";
+import {Intent} from "@blueprintjs/core/src/common/intent";
+import {ActivityExecutionErrorReportModal} from "./ActivityExecutionErrorReportModal";
+import {Icon, Spacing} from "../../";
+import {ElapsedDateTimeDisplay, TimeUnits} from "../DateTimeDisplay/ElapsedDateTimeDisplay";
+import {IntentTypes} from "../../common/Intent";
 
 const progressBreakpointIndetermination = 10;
 const progressBreakpointAnimation = 99;
@@ -41,6 +41,10 @@ interface SilkActivityControlProps extends TestableComponent {
     };
     // DI activity actions
     executeActivityAction: (action: ActivityAction) => void;
+    /** If specified, the activity control will offer a "Start prioritized" button while the activity is in the waiting state.
+     * When the button is clicked it should start the activity via the startPrioritized endpoint.
+     */
+    executePrioritized?: () => void;
     // Get the translation for a specific key
     translate: (key: ActivityControlTranslationKeys) => string;
     // When defined the elapsed time since the last start is displayed next to the label
@@ -127,7 +131,7 @@ interface IStacktrace {
     cause?: IStacktrace;
 }
 
-export type ActivityControlTranslationKeys = "startActivity" | "stopActivity" | "reloadActivity" | "showErrorReport";
+export type ActivityControlTranslationKeys = "startActivity" | "stopActivity" | "reloadActivity" | "showErrorReport" | "startPrioritized";
 
 export type ActivityAction = "start" | "cancel" | "restart";
 
@@ -153,14 +157,28 @@ export function useSilkActivityControl({
     tags,
     layoutConfig = defaultLayout,
     hideMessageOnStatus = () => false,
+    executePrioritized,
     ...props
 }: SilkActivityControlProps) {
     const [activityStatus, setActivityStatus] = useState<IActivityStatus | undefined>(initialStatus);
+    const currentStatus = useRef<IActivityStatus | undefined>(initialStatus)
+    const [showStartPrioritized, setShowStartPrioritized] = useState(false)
     const [errorReport, setErrorReport] = useState<string | IActivityExecutionReport | undefined>(undefined);
 
     // Register update function
     useEffect(() => {
-        const updateActivityStatus = (status: any) => {
+        const updateActivityStatus = (status: IActivityStatus | undefined) => {
+            if(status?.concreteStatus !== "Waiting") {
+                setShowStartPrioritized(false)
+            } else if(executePrioritized) {
+                // Show start prioritized button only-if the activity is still in Waiting status after 2s
+                setTimeout(() => {
+                    if(currentStatus.current?.concreteStatus === "Waiting") {
+                        setShowStartPrioritized(true)
+                    }
+                }, 2000)
+            }
+            currentStatus.current = status
             setActivityStatus(status)
         }
         registerForUpdates(updateActivityStatus)
@@ -184,13 +202,22 @@ export function useSilkActivityControl({
     }
 
     if (showStartAction) {
-        actions.push({
-            "data-test-id": "activity-start-activity",
-            icon: "item-start",
-            action: () => executeActivityAction("start"),
-            tooltip: translate("startActivity"),
-            disabled: activityStatus?.isRunning === true,
-        });
+        if(showStartPrioritized && executePrioritized) {
+            actions.push({
+                "data-test-id": "activity-start-prioritized-activity",
+                icon: "item-skip-forward",
+                action: executePrioritized,
+                tooltip: translate("startPrioritized"),
+            })
+        } else {
+            actions.push({
+                "data-test-id": "activity-start-activity",
+                icon: "item-start",
+                action: () => executeActivityAction("start"),
+                tooltip: translate("startActivity"),
+                disabled: activityStatus?.isRunning === true,
+            });
+        }
     }
 
     if (showReloadAction) {

package/src/cmem/ConfidenceValue/ConfidenceValue.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ConfidenceValue } from "../../../index";
+
+export default {
+    title: "cmem/ConfidenceValue",
+    component: ConfidenceValue,
+    argTypes: {
+        barColor: {
+            control: "color",
+        },
+    }
+
+} as ComponentMeta<typeof ConfidenceValue>;
+
+const TemplateIcons: ComponentStory<typeof ConfidenceValue> = (args) => (
+    <ConfidenceValue {...args} />
+);
+export const Default = TemplateIcons.bind({});
+Default.args = {
+    value: "0.5"
+};

package/src/cmem/ConfidenceValue/ConfidenceValue.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+import Color from "color";
+import { Tag, TagProps } from "./../../components/Tag";
+import { ProgressBar, ProgressBarProps } from "./../../components/ProgressBar";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface ConfidenceValueProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /**
+     * Confidence value.
+     */
+    value: number;
+    /**
+     * Minimal border for the confidence range.
+     */
+    minValue?: number;
+    /**
+     * Center (or average) value of the confidence range.
+     */
+    centerValue?: number;
+    /**
+     * Maximum border for the confidence range.
+     */
+    maxValue?: number;
+    /**
+     * Color of the confidence bar.
+     * By default it is colorized red for values below the `centerValue`, otherwise green.
+     */
+    barColor?: Color | string;
+    /**
+     * The value is displayed by a bar.
+     * This confidence bar can be start from the left or right side, or from the center of the element.
+     */
+    barStart?: "side" | "center";
+    /**
+     * What width is used to display the lement.
+     * It could use the `minimal` necessary space, the `maximal` available space, or a `static` width.
+     */
+    spaceUsage?: "minimal" | "static" | "maximal";
+    /**
+     * Additional properties for the `<Tag/>` element that is used to display the confidence value.
+     */
+    tagProps?: Omit<TagProps, "className">;
+    /**
+     * Additional properties for the `<PRogressBar/>` element that is used to display the confidence bar.
+     */
+    progressBarProps?: Omit<ProgressBarProps, "className">;
+}
+
+const toPercent = (n: number) => {
+    let formatted = (n * 100).toFixed(2)
+    const maybeRemovedFraction = formatted.replace(/(\.0+$)|(0+$)/, "")
+    return `${maybeRemovedFraction}%`
+}
+
+export function ConfidenceValue ({
+    className,
+    value,
+    minValue = -1,
+    maxValue = 1,
+    centerValue = 0,
+    barColor,
+    barStart = "side",
+    spaceUsage = "static",
+    tagProps,
+    progressBarProps,
+    ...otherProps
+}: ConfidenceValueProps) {
+
+    const barValue = (
+        value === centerValue ? 0 :
+        value < centerValue ? value / (minValue - centerValue) :
+        value / (maxValue - centerValue)
+    );
+
+    let color = Color("#000000");
+    if (!!barColor) {
+        try {
+            color = Color(barColor);
+        } catch(ex) {
+            console.warn("Received invalid color for confidence bar: " + barColor)
+        }
+    }
+
+    return (
+        <span
+            className={
+                `${eccgui}-confidencevalue` +
+                ` ${eccgui}-confidencevalue--${barStart}` +
+                ` ${eccgui}-confidencevalue--${spaceUsage}space` +
+                (value < centerValue ? ` ${eccgui}-confidencevalue--negative` : ` ${eccgui}-confidencevalue--positive`) +
+                (className ? ` ${className}` : "")
+            }
+            {...otherProps}
+        >
+            <Tag
+                className={`${eccgui}-confidencevalue__value`}
+                {...tagProps}
+            >
+                {toPercent(value)}
+            </Tag>
+            <div
+                className={`${eccgui}-confidencevalue__bar-colorwrapper`}
+                style={!!barColor ? { color: color.rgb().toString() } : {}}
+            >
+                <ProgressBar
+                    className={`${eccgui}-confidencevalue__bar`}
+                    value={barValue}
+                    intent={!!barColor ? undefined : value < centerValue ? "danger" : "success"}
+                    stripes={false}
+                    animate={false}
+                    {...progressBarProps}
+                />
+            </div>
+        </span>
+    );
+}

package/src/cmem/ConfidenceValue/confidencevalue.scss

@@ -0,0 +1,49 @@
+.#{$eccgui}-confidencevalue {
+    display: inline-block;
+    position: relative;
+    width: 5rem;
+}
+
+.#{$eccgui}-confidencevalue--minimalspace {
+    width: auto;
+    min-width: 0;
+}
+
+.#{$eccgui}-confidencevalue--maximalspace {
+    width: auto;
+    min-width: 100%;
+}
+
+.#{$eccgui}-confidencevalue__value {
+    width: 100%;
+    text-align: center;
+}
+
+.#{$eccgui}-confidencevalue__bar {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 3px;
+    background-color: transparent;
+
+    .#{$eccgui}-confidencevalue--center & {
+        left: 50%;
+        width: 50%;
+    }
+
+    .#{$eccgui}-confidencevalue--negative & {
+        transform: rotate(180deg);
+    }
+
+    .#{$eccgui}-confidencevalue--center.#{$eccgui}-confidencevalue--negative & {
+        left: 0;
+        right: 50%;
+    }
+}
+
+.#{$eccgui}-confidencevalue__bar-colorwrapper {
+    & .#{$ns}-progress-meter {
+        background-color: currentColor;
+    }
+}

package/src/cmem/ConfidenceValue/index.ts

@@ -0,0 +1 @@
+export * from "./ConfidenceValue";

package/src/cmem/_index.scss

@@ -1,4 +1,5 @@
 @import "./ActivityControl/activitycontrol";
+@import "./ConfidenceValue/confidencevalue";
 @import "./markdown/markdown";
 @import "./react-flow";
 

package/src/cmem/index.ts

@@ -21,3 +21,5 @@ export type {
     IActivityControlLayoutProps,
     TimeUnits,
 }
+
+export * from "./ConfidenceValue";

package/src/cmem/markdown/Markdown.stories.tsx

@@ -36,7 +36,7 @@ This is a paragraph.
     * another line
 3. third item
 
-This is a paragraph with a [text link](http://example.com/).
+This is a paragraph with a [text link](http://example.com/) and a footnote reference [^1].
 
 ## Headline level 2
 ### Headline level 3
@@ -51,5 +51,7 @@ This is a paragraph with a [text link](http://example.com/).
 > With 2 paragraphs.
 
 A line with some <strong>HTML code</strong> inside.
+
+[^1]: This is the text related to the the footnote referrer.
     `
 };

package/src/cmem/markdown/Markdown.tsx

@@ -33,6 +33,11 @@ export interface MarkdownParserProps extends TestableComponent {
      * @see https://github.com/remarkjs/react-markdown#architecture
      */
     reHypePlugins?: PluggableList;
+    /**
+     * Name for browser target where links withing the Markdown content are opened.
+     * Set to `false` to disable this feature.
+     */
+    linkTargetName?: false | string;
 }
 
 const configDefault = {
@@ -60,14 +65,15 @@ const configDefault = {
 
 /** Renders a markdown string. */
 export const Markdown = ({
-                             children,
-                             allowHtml = false,
-                             removeMarkup = false,
-                             inheritBlock = false,
-                             allowedElements,
-                             reHypePlugins,
-                             ...otherProps
-                         }: MarkdownParserProps) => {
+    children,
+    allowHtml = false,
+    removeMarkup = false,
+    inheritBlock = false,
+    allowedElements,
+    reHypePlugins,
+    linkTargetName = "_mdref",
+    ...otherProps
+}: MarkdownParserProps) => {
 
     const configHtml = allowHtml ? {
         rehypePlugins: [...configDefault.rehypePlugins].concat([rehypeRaw]),
@@ -87,15 +93,21 @@ export const Markdown = ({
         ...configDefault,
         ...configHtml,
         ...configTextOnly,
+        linkTarget: linkTargetName ? (href: string, _children: any, _title: string) => {
+            const linkTarget = href.charAt(0) !== "#" ? linkTargetName : "";
+            return linkTarget as React.HTMLAttributeAnchorTarget;
+        } : undefined,
     };
     allowedElements && (reactMarkdownProperties.allowedElements = allowedElements)
     reHypePlugins && reHypePlugins.forEach(plugin => reactMarkdownProperties.rehypePlugins = [...reactMarkdownProperties.rehypePlugins, plugin])
 
+    // @ts-ignore because against the lib spec it does not allow a function for linkTarget.
+    const markdownDisplay = <ReactMarkdown {...reactMarkdownProperties} />
     return inheritBlock ? (
-        <ReactMarkdown {...reactMarkdownProperties} />
+        markdownDisplay
     ) : (
         <HtmlContentBlock data-test-id={otherProps["data-test-id"]} >
-            <ReactMarkdown {...reactMarkdownProperties} />
+            { markdownDisplay }
         </HtmlContentBlock>
     );
 }

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

@@ -125,8 +125,8 @@ const nodeExamples = {
             },
             position: { x: 50, y: 300 },
         },
-        { id: 'workflow-e1', arrowHeadType: "arrowclosed",source: 'workflow-1', target: 'workflow-2' },
-        { id: 'workflow-e2', arrowHeadType: "arrowclosed",source: 'workflow-2', target: 'workflow-3' },
+        { id: 'workflow-e1', label: "default", arrowHeadType: "arrowclosed",source: 'workflow-1', target: 'workflow-2' },
+        { id: 'workflow-e2', label: "default", arrowHeadType: "arrowclosed",source: 'workflow-2', target: 'workflow-3' },
         { id: 'workflow-e3', type: 'success', label: "success edge", arrowHeadType: "arrowclosed",source: 'workflow-3', target: 'workflow-4' },
         { id: 'workflow-e4', type: 'warning', label: "warning edge", arrowHeadType: "arrowclosed",source: 'workflow-4', target: 'workflow-5' },
         { id: 'workflow-e5', type: 'danger', label: "danger edge", arrowHeadType: "arrowclosed",source: 'workflow-5', target: 'workflow-1' },

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

@@ -5,8 +5,9 @@
 }
 
 @mixin edgecoloring($color) {
-    stroke: $color;
-    color: $color;
+    --#{$eccgui}-reactflow-node-color-default: #{$color};
+    --#{$eccgui}-reactflow-node-color-hover: #{$color};
+    --#{$eccgui}-reactflow-node-color-selected: #{$color};
 }
 
 // Graph edge types