Updates for mapping editor (CMEM-5432)

CHANGELOG.md

@@ -8,7 +8,6 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Added
 
-- Added custom icon for "Concatenate to file" operator (CMEM-6476).
 -   `<ContentGroup />` component
     -   Manage display of a grouped content section.
     -   Add info, actions and context annotations by using its properties.
@@ -20,7 +19,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   implemented support for `disabled` state in code editor
     -   implemented support for `intent` states in code editor
 -   `<Label />`
-    -   added `additionalElements` property to display elements at the end of the label
+    -   `additionalElements` property to display elements at the end of the label
+    -   `inline` property to display the label component as inline block
 -   `<NodeContent />`
     -   `resizeDirections` to specifiy the axis that can be used to resize the node
     -   `resizeMaxDimensions` to add maximum values for resizing height/width
@@ -30,15 +30,28 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   `actionsProps` property to forward `CardActions` properties, e.g. `noWrap`
 -   `<MenutItem />`
     -   `tooltip` property to dislay tooltip on menu item label
+-   `<NodeContent />`
+    -   `resizeDirections` to specifiy the axis that can be used to resize the node
+    -   `resizeMaxDimensions` to add maximum values for resizing height/width
+-   New icons:
+    -   "item-magic-edit": icon for "magic" edit suggestions
+    -   "artefact-task-concatenatetofile": icon for "Concatenate to file" operator
 
 ### Fixed
 
--   `CodeAutocompleteField`:
+-   `<CodeAutocompleteField />`:
     -    Code editor resets to initial value on every code editor instance re-init
+-   `<OverviewItemActions />`
+    -   `hiddenInteractions` stay visible if they contain focused elements or opened overlays (e.g. context menus)
 
 ### Changed
 
--   StickyNote data structure: Refactored position and dimension (breaking change)
+-   `<ReactFlow />`
+    -   property color for `graph` configuration was adjusted
+-   `<Switch />`
+    -   use always `<Label/>` component for `label` value
+-   `<StickyNoteNode />`
+    -   Refactored data structure position and dimension (breaking change)
 
 ## [24.0.1] - 2025-02-06
 

src/cmem/react-flow/configuration/_colors-graph.scss

@@ -1,7 +1,7 @@
 $reactflow-color-graph-node: #745a85 !default;
 $reactflow-color-class-node: #3a7896 !default;
 $reactflow-color-instance-node: #0097a7 !default;
-$reactflow-color-property-node: #ffd54f !default;
+$reactflow-color-property-node: #40a691 !default;
 $reactflow-color-implicit-edge: #ae3c74 !default;
 $reactflow-color-import-edge: $reactflow-color-graph-node !default;
 $reactflow-color-subclass-edge: $reactflow-color-class-node !default;
@@ -13,6 +13,8 @@ $reactflow-color-rdftype-edge: $reactflow-color-instance-node !default;
 }
 
 .#{eccgui}-configuration--colors__react-flow-graph {
+    /* stylelint-disable custom-property-pattern */
+    // TODO: we should correct custom property names later but atm this would lead to broken consumer apps
     --graphNode: #{$reactflow-color-graph-node};
     --classNode: #{$reactflow-color-class-node};
     --instanceNode: #{$reactflow-color-instance-node};
@@ -31,4 +33,5 @@ $reactflow-color-rdftype-edge: $reactflow-color-instance-node !default;
     --subclassEdgeBright: #{bright($reactflow-color-subclass-edge)};
     --subpropertyEdgeBright: #{bright($reactflow-color-subproperty-edge)};
     --rdftypeEdgeBright: #{bright($reactflow-color-rdftype-edge)};
+    /* stylelint-enable custom-property-pattern */
 }

src/components/AutocompleteField/AutoCompleteField.tsx

@@ -301,13 +301,15 @@ function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps<T, UPD
             let enableHighlighting = true;
             if (onlySelectItemReturned) {
                 // If the auto-completion only returns no suggestion or the selected item itself, query with empty string.
-                const emptyStringResults = await onSearch("");
+                const emptyStringResults: T[] = await onSearch("");
                 // Disable highlighting, since we used empty string search
                 enableHighlighting = false;
                 // Put selected item at the top if it is not in the result list
                 if (!!selectedItem && itemIndexOf(emptyStringResults, selectedItem) > -1) {
-                    emptyStringResults.splice(itemIndexOf(emptyStringResults, selectedItem), 1);
-                    result = [selectedItem, ...emptyStringResults];
+                    // Do not mutate original array
+                    const withoutSelected = [...emptyStringResults]
+                    withoutSelected.splice(itemIndexOf(emptyStringResults, selectedItem), 1);
+                    result = [selectedItem, ...withoutSelected];
                 } else {
                     result = emptyStringResults;
                 }

src/components/Card/CardContent.tsx

@@ -15,10 +15,16 @@ export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
  * Holds the card content.
  * Display scrollbars in case there is not enough space for it.
  */
-export const CardContent = ({ children, className = "", noFlexHeight, ...otherProps }: CardContentProps) => {
+export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(({
+    children,
+    className='',
+    noFlexHeight,
+    ...otherProps
+}: CardContentProps, ref) => {
     return (
         <div
             {...otherProps}
+            ref={ref}
             className={
                 `${eccgui}-card__content` +
                 (noFlexHeight ? ` ${eccgui}-card__content--noflexheight` : "") +
@@ -28,6 +34,4 @@ export const CardContent = ({ children, className = "", noFlexHeight, ...otherPr
             {children}
         </div>
     );
-};
-
-export default CardContent;
+});

src/components/Icon/canonicalIconNames.tsx

@@ -66,6 +66,7 @@ const canonicalIcons = {
     "item-download": icons.Download,
     "item-draggable": icons.Draggable,
     "item-edit": icons.Edit,
+    "item-magic-edit": icons.MagicWand,
     "item-evaluation": icons.Analytics,
     "item-execution": icons.Run,
     "item-info": icons.Information,

src/components/Label/Label.tsx

@@ -39,6 +39,8 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
      * Add other elements to the end of the label content
      */
     additionalElements?: React.ReactNode | React.ReactNode[];
+    /** Force label to get displayed as inline block element. */
+    inline?: boolean;
 }
 
 export const Label = ({
@@ -52,6 +54,7 @@ export const Label = ({
     isLayoutForElement = "label",
     emphasis = "normal",
     additionalElements,
+    inline,
     ...otherLabelProps
 }: LabelProps) => {
     let htmlElementstring = isLayoutForElement;
@@ -85,6 +88,7 @@ export const Label = ({
                 className:
                     `${eccgui}-label ${eccgui}-label--${emphasis}` +
                     (className ? " " + className : "") +
+                    (inline ? ` ${eccgui}-label--inline` : "") +
                     (disabled ? ` ${eccgui}-label--disabled` : ""),
                 ...otherLabelProps,
             },

src/components/Label/label.scss

@@ -8,7 +8,6 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
     font-size: $eccgui-size-typo-label;
     line-height: $eccgui-size-typo-label-lineheight;
     color: $eccgui-color-label-text;
-    vertical-align: middle;
 
     .#{$eccgui}-typography__overflowtext--passdown > & {
         display: flex;
@@ -17,6 +16,11 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
     }
 }
 
+.#{$eccgui}-label--inline {
+    display: inline-block;
+    vertical-align: middle;
+}
+
 .#{$eccgui}-label--disabled {
     opacity: $eccgui-opacity-disabled;
 }

src/components/OverviewItem/overviewitem.scss

@@ -193,7 +193,10 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
     .#{$eccgui}-overviewitem__item:hover &,
     .#{$eccgui}-overviewitem__item:focus &,
-    .#{$eccgui}-overviewitem__item:active & {
+    .#{$eccgui}-overviewitem__item:active &,
+    &:focus-within,
+    &:has(.#{$ns}-active),
+    &:has(.#{$ns}-popover-open) {
         display: flex;
     }
 }

src/components/Switch/Switch.tsx

@@ -1,26 +1,45 @@
-import React, { memo, SyntheticEvent } from "react";
-import { Switch as BlueprintSwitch, SwitchProps as BlueprintSwitchProps } from "@blueprintjs/core";
+import React, { memo } from "react";
+import {
+    Classes as BlueprintClasses,
+    Switch as BlueprintSwitch,
+    SwitchProps as BlueprintSwitchProps,
+} from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { Label } from "../Label/Label";
 
 export interface SwitchProps extends Omit<BlueprintSwitchProps, "onChange"> {
     /**
      * Event handler for changed state.
      */
-    onChange?: (value: boolean) => any;
+    onChange?: (value: boolean) => void;
     /**
      * class names
      */
     className?: string;
 }
 
-export const Switch = ({ onChange, className, ...otherProps }: SwitchProps) => {
-    const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
-        const checked = !!(e as any).target?.checked;
-        onChange && onChange(checked);
+export const Switch = ({ onChange, className, label, ...otherProps }: SwitchProps) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (onChange) {
+            onChange(!!e.target?.checked);
+        }
     };
 
-    return <BlueprintSwitch className={`${eccgui}-switch ${className}`} {...otherProps} onChange={handleChange} />;
+    return (
+        <BlueprintSwitch
+            className={`${eccgui}-switch ${className ?? ""} ${
+                label && !otherProps.labelElement ? BlueprintClasses.INLINE : ""
+            }`}
+            labelElement={
+                label ? (
+                    <Label text={label} isLayoutForElement="span" disabled={otherProps.disabled} inline />
+                ) : undefined
+            }
+            {...otherProps}
+            onChange={handleChange}
+        />
+    );
 };
 
 export default memo(Switch);