@eccenca/gui-elements 23.4.2-rc.0 → 23.6.0-rc.0

package/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx

@@ -1,19 +1,20 @@
-import {Button, HtmlContentBlock, IconButton, SimpleDialog} from "../../index";
 import React, { useState } from "react";
 
+import { Button, HtmlContentBlock, IconButton, SimpleDialog } from "../../index";
+
 interface ActivityExecutionErrorReportModalProps {
     // Title of the modal
-    title?: string
+    title?: string;
     // Called when the close button is clicked
-    onDiscard: () => any
+    onDiscard: () => any;
     // The error report
-    report: JSX.Element
+    report: JSX.Element;
     // Value of the download button
-    downloadButtonValue: string
+    downloadButtonValue: string;
     // Value of the close button
-    closeButtonValue: string
+    closeButtonValue: string;
     // Function that fetches the Markdown error report
-    fetchErrorReport: () => Promise<string | undefined>
+    fetchErrorReport: () => Promise<string | undefined>;
 }
 
 /** Shows the execution error report to the user and offers to download the report. */
@@ -23,16 +24,19 @@ export const ActivityExecutionErrorReportModal = ({
     report,
     downloadButtonValue,
     closeButtonValue,
-    fetchErrorReport
+    fetchErrorReport,
 }: ActivityExecutionErrorReportModalProps) => {
     const [displayFullscreen, setDisplayFullscreen] = useState<boolean>(false);
-    const fileName = "Activity execution report from " + (new Date()).toISOString().replace(/T/, " ").replace(/:/g, "-").substr(0, 19) + ".md"
+    const fileName =
+        "Activity execution report from " +
+        new Date().toISOString().replace(/T/, " ").replace(/:/g, "-").substr(0, 19) +
+        ".md";
     const handleDownload = async () => {
-        const markdown = await fetchErrorReport()
-        if(markdown) {
+        const markdown = await fetchErrorReport();
+        if (markdown) {
             const element = document.createElement("a");
             element.href = window.URL.createObjectURL(new Blob([markdown], { type: "text/markdown" }));
-            element.download = fileName
+            element.download = fileName;
             //the above code is equivalent to
             document.body.appendChild(element);
             //onClick property
@@ -47,12 +51,12 @@ export const ActivityExecutionErrorReportModal = ({
             isOpen={true}
             size={displayFullscreen ? "fullscreen" : "large"}
             onClose={onDiscard}
-            headerOptions={(
+            headerOptions={
                 <IconButton
                     name={displayFullscreen ? "toggler-minimize" : "toggler-maximize"}
                     onClick={() => setDisplayFullscreen(!displayFullscreen)}
                 />
-            )}
+            }
             actions={[
                 <Button data-test-id={"error-report-download-btn"} affirmative onClick={handleDownload} key="download">
                     {downloadButtonValue}
@@ -62,9 +66,7 @@ export const ActivityExecutionErrorReportModal = ({
                 </Button>,
             ]}
         >
-            <HtmlContentBlock noScrollbarsOnChildren>
-                {report}
-            </HtmlContentBlock>
+            <HtmlContentBlock noScrollbarsOnChildren>{report}</HtmlContentBlock>
         </SimpleDialog>
     );
-}
+};

package/src/cmem/ActivityControl/activitycontrol.scss

@@ -4,18 +4,18 @@
     }
 
     .#{$ns}-progress-bar {
-        display: block;
         position: absolute;
-        left: 0;
         bottom: 0;
+        left: 0;
+        display: block;
         width: 100%;
         height: $tab-indicator-width;
     }
 }
 
 .#{$eccgui}-addon-activitycontrol--shrink {
-    max-width: 100%;
     display: inline-flex;
+    max-width: 100%;
 
     &:not(.#{$eccgui}-card) {
         display: inline-block;

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

@@ -1,5 +1,6 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { ConfidenceValue } from "../../../index";
 
 export default {
@@ -9,14 +10,11 @@ export default {
         barColor: {
             control: "color",
         },
-    }
-
+    },
 } as ComponentMeta<typeof ConfidenceValue>;
 
-const TemplateIcons: ComponentStory<typeof ConfidenceValue> = (args) => (
-    <ConfidenceValue {...args} />
-);
+const TemplateIcons: ComponentStory<typeof ConfidenceValue> = (args) => <ConfidenceValue {...args} />;
 export const Default = TemplateIcons.bind({});
 Default.args = {
-    value: "0.5"
+    value: "0.5",
 };

package/src/cmem/ConfidenceValue/ConfidenceValue.tsx

@@ -1,9 +1,11 @@
 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";
 
+import { ProgressBar, ProgressBarProps } from "./../../components/ProgressBar";
+import { Tag, TagProps } from "./../../components/Tag";
+
 export interface ConfidenceValueProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
     /**
      * Confidence value.
@@ -47,12 +49,12 @@ export interface ConfidenceValueProps extends Omit<React.HTMLAttributes<HTMLSpan
 }
 
 const toPercent = (n: number) => {
-    let formatted = (n * 100).toFixed(2)
-    const maybeRemovedFraction = formatted.replace(/(\.0+$)|(0+$)/, "")
-    return `${maybeRemovedFraction}%`
-}
+    const formatted = (n * 100).toFixed(2);
+    const maybeRemovedFraction = formatted.replace(/(\.0+$)|(0+$)/, "");
+    return `${maybeRemovedFraction}%`;
+};
 
-export function ConfidenceValue ({
+export function ConfidenceValue({
     className,
     value,
     minValue = -1,
@@ -65,19 +67,19 @@ export function ConfidenceValue ({
     progressBarProps,
     ...otherProps
 }: ConfidenceValueProps) {
-
-    const barValue = (
-        value === centerValue ? 0 :
-        value < centerValue ? value / (minValue - centerValue) :
-        value / (maxValue - centerValue)
-    );
+    const barValue =
+        value === centerValue
+            ? 0
+            : value < centerValue
+            ? value / (minValue - centerValue)
+            : value / (maxValue - centerValue);
 
     let color = Color("#000000");
-    if (!!barColor) {
+    if (barColor) {
         try {
             color = Color(barColor);
-        } catch(ex) {
-            console.warn("Received invalid color for confidence bar: " + barColor)
+        } catch (ex) {
+            console.warn("Received invalid color for confidence bar: " + barColor);
         }
     }
 
@@ -87,25 +89,24 @@ export function ConfidenceValue ({
                 `${eccgui}-confidencevalue` +
                 ` ${eccgui}-confidencevalue--${barStart}` +
                 ` ${eccgui}-confidencevalue--${spaceUsage}space` +
-                (value < centerValue ? ` ${eccgui}-confidencevalue--negative` : ` ${eccgui}-confidencevalue--positive`) +
+                (value < centerValue
+                    ? ` ${eccgui}-confidencevalue--negative`
+                    : ` ${eccgui}-confidencevalue--positive`) +
                 (className ? ` ${className}` : "")
             }
             {...otherProps}
         >
-            <Tag
-                className={`${eccgui}-confidencevalue__value`}
-                {...tagProps}
-            >
+            <Tag className={`${eccgui}-confidencevalue__value`} {...tagProps}>
                 {toPercent(value)}
             </Tag>
             <div
                 className={`${eccgui}-confidencevalue__bar-colorwrapper`}
-                style={!!barColor ? { color: color.rgb().toString() } : {}}
+                style={barColor ? { color: color.rgb().toString() } : {}}
             >
                 <ProgressBar
                     className={`${eccgui}-confidencevalue__bar`}
                     value={barValue}
-                    intent={!!barColor ? undefined : value < centerValue ? "danger" : "success"}
+                    intent={barColor ? undefined : value < centerValue ? "danger" : "success"}
                     stripes={false}
                     animate={false}
                     {...progressBarProps}

package/src/cmem/ConfidenceValue/confidencevalue.scss

@@ -1,6 +1,6 @@
 .#{$eccgui}-confidencevalue {
-    display: inline-block;
     position: relative;
+    display: inline-block;
     width: 5rem;
 }
 
@@ -21,8 +21,8 @@
 
 .#{$eccgui}-confidencevalue__bar {
     position: absolute;
-    left: 0;
     bottom: 0;
+    left: 0;
     width: 100%;
     height: 3px;
     background-color: transparent;
@@ -37,13 +37,13 @@
     }
 
     .#{$eccgui}-confidencevalue--center.#{$eccgui}-confidencevalue--negative & {
-        left: 0;
         right: 50%;
+        left: 0;
     }
 }
 
 .#{$eccgui}-confidencevalue__bar-colorwrapper {
     & .#{$ns}-progress-meter {
-        background-color: currentColor;
+        background-color: currentcolor;
     }
 }

package/src/cmem/ContentBlobToggler/ContentBlobToggler.tsx

@@ -1,94 +1,95 @@
-import React, {useState} from "react";
-import {Link, Spacing} from "../../index";
+import React, { useState } from "react";
+
+import { Link, Spacing } from "../../index";
 
 export interface ContentBlobTogglerProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
+    /**
         space-delimited list of class names
     */
-  className?: string;
-  /**
+    className?: string;
+    /**
         text label used for toggler when preview is displayed
     */
-  toggleExtendText: string;
-  /**
+    toggleExtendText: string;
+    /**
         text label used for toggler when full view is displayed
     */
-  toggleReduceText: string;
-  /**
+    toggleReduceText: string;
+    /**
         content that is displayed as preview
     */
-  previewContent: React.ReactNode;
-  /**
+    previewContent: React.ReactNode;
+    /**
         content that is displayed as extended full view
     */
-  fullviewContent: React.ReactNode;
-  /**
+    fullviewContent: React.ReactNode;
+    /**
         Show extended full view initially. Default: false
     */
-  startExtended?: boolean;
-  /**
+    startExtended?: boolean;
+    /**
         Callback if toggler is necessary. Default: true
     */
-  enableToggler?: boolean;
+    enableToggler?: boolean;
 }
 
 /** Shows a preview with the option to expand to a full view (and back). */
 export function ContentBlobToggler({
-  className = "",
-  toggleExtendText,
-  toggleReduceText,
-  previewContent,
-  fullviewContent,
-  startExtended = false,
-  enableToggler = true,
-  ...otherProps
+    className = "",
+    toggleExtendText,
+    toggleReduceText,
+    previewContent,
+    fullviewContent,
+    startExtended = false,
+    enableToggler = true,
+    ...otherProps
 }: ContentBlobTogglerProps) {
-  const [isExtended, setViewState] = useState(startExtended);
-  const handlerToggleView = (event: any) => {
-    event.preventDefault();
-    event.stopPropagation();
-    setViewState(!isExtended);
-  };
+    const [isExtended, setViewState] = useState(startExtended);
+    const handlerToggleView = (event: any) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setViewState(!isExtended);
+    };
 
-  return (
-    <div className={className} {...otherProps}>
-        {!isExtended ? (
-          <>
-            {previewContent}
-            {enableToggler && (
-              <>
-                &hellip;{" "}
-                <Link
-                  href="#more"
-                  data-test-id={"content-blob-toggler-more-link"}
-                  onClick={(e: any) => {
-                    handlerToggleView(e);
-                  }}
-                >
-                  {toggleExtendText}
-                </Link>
-              </>
-            )}
-          </>
-        ) : (
-          <>
-            {fullviewContent}
-            {enableToggler && (
-                <div>
-                    <Spacing size="small" />
-                    <Link
-                        data-test-id={"content-blob-toggler-less-link"}
-                        href="#less"
-                        onClick={(e: any) => {
-                            handlerToggleView(e);
-                        }}
-                    >
-                        {toggleReduceText}
-                    </Link>
-                </div>
+    return (
+        <div className={className} {...otherProps}>
+            {!isExtended ? (
+                <>
+                    {previewContent}
+                    {enableToggler && (
+                        <>
+                            &hellip;{" "}
+                            <Link
+                                href="#more"
+                                data-test-id={"content-blob-toggler-more-link"}
+                                onClick={(e: any) => {
+                                    handlerToggleView(e);
+                                }}
+                            >
+                                {toggleExtendText}
+                            </Link>
+                        </>
+                    )}
+                </>
+            ) : (
+                <>
+                    {fullviewContent}
+                    {enableToggler && (
+                        <div>
+                            <Spacing size="small" />
+                            <Link
+                                data-test-id={"content-blob-toggler-less-link"}
+                                href="#less"
+                                onClick={(e: any) => {
+                                    handlerToggleView(e);
+                                }}
+                            >
+                                {toggleReduceText}
+                            </Link>
+                        </div>
+                    )}
+                </>
             )}
-          </>
-        )}
-    </div>
-  );
+        </div>
+    );
 }

package/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -1,7 +1,9 @@
 import React from "react";
+
 import { ContentBlobToggler, ContentBlobTogglerProps, Markdown } from "./..";
 
-export interface StringPreviewContentBlobTogglerProps extends Omit<ContentBlobTogglerProps, "previewContent" | "enableToggler"> {
+export interface StringPreviewContentBlobTogglerProps
+    extends Omit<ContentBlobTogglerProps, "previewContent" | "enableToggler"> {
     /**
      The preview content will be cut to this length if it is too long.
      */
@@ -11,11 +13,11 @@ export interface StringPreviewContentBlobTogglerProps extends Omit<ContentBlobTo
      */
     content: string;
     /** If only the first non-empty line should be shown in the preview. This will in addition also be shortened according to previewMaxLength. */
-    firstNonEmptyLineOnly?: boolean
+    firstNonEmptyLineOnly?: boolean;
     /** If enabled the preview is rendered as markdown. */
-    renderPreviewAsMarkdown?: boolean
+    renderPreviewAsMarkdown?: boolean;
     /** White-listing of HTML elements that will be rendered when renderPreviewAsMarkdown is enabled. */
-    allowedHtmlElementsInPreview?: string[]
+    allowedHtmlElementsInPreview?: string[];
 }
 
 /** Version of the content toggler for text only content. */
@@ -29,21 +31,29 @@ export function StringPreviewContentBlobToggler({
     startExtended,
     firstNonEmptyLineOnly,
     renderPreviewAsMarkdown = false,
-    allowedHtmlElementsInPreview
+    allowedHtmlElementsInPreview,
 }: StringPreviewContentBlobTogglerProps) {
-    const previewMaybeFirstLine = firstNonEmptyLineOnly ? firstNonEmptyLine(content) : content
-    const previewString = previewMaxLength ? previewMaybeFirstLine.substr(0, previewMaxLength) : previewMaybeFirstLine
-    const enableToggler = previewString !== content
+    const previewMaybeFirstLine = firstNonEmptyLineOnly ? firstNonEmptyLine(content) : content;
+    const previewString = previewMaxLength ? previewMaybeFirstLine.substr(0, previewMaxLength) : previewMaybeFirstLine;
+    const enableToggler = previewString !== content;
 
-    return <ContentBlobToggler
-        className={className}
-        previewContent={renderPreviewAsMarkdown ? <Markdown allowedElements={allowedHtmlElementsInPreview}>{previewString}</Markdown> : previewString}
-        toggleExtendText={toggleExtendText}
-        toggleReduceText={toggleReduceText}
-        fullviewContent={fullviewContent}
-        startExtended={startExtended}
-        enableToggler={enableToggler}
-    />
+    return (
+        <ContentBlobToggler
+            className={className}
+            previewContent={
+                renderPreviewAsMarkdown ? (
+                    <Markdown allowedElements={allowedHtmlElementsInPreview}>{previewString}</Markdown>
+                ) : (
+                    previewString
+                )
+            }
+            toggleExtendText={toggleExtendText}
+            toggleReduceText={toggleReduceText}
+            fullviewContent={fullviewContent}
+            startExtended={startExtended}
+            enableToggler={enableToggler}
+        />
+    );
 }
 
 const newLineRegex = new RegExp("\r|\n"); // eslint-disable-line
@@ -59,5 +69,5 @@ export function firstNonEmptyLine(preview: string) {
 }
 
 export const stringPreviewContentBlobTogglerUtils = {
-    firstNonEmptyLine
-}
+    firstNonEmptyLine,
+};

package/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx

@@ -1,28 +1,29 @@
-import React, {useEffect, useState} from "react";
-import {TestableComponent} from "../../components/interfaces";
+import React, { useEffect, useState } from "react";
+
+import { TestableComponent } from "../../components/interfaces";
 
 // @deprecated use `ElapsedDateTimeDisplayUnits`
-export type TimeUnits = "second"| "seconds" | "minute" | "minutes" | "hour" | "hours" | "day" | "days"
+export type TimeUnits = "second" | "seconds" | "minute" | "minutes" | "hour" | "hours" | "day" | "days";
 export type ElapsedDateTimeDisplayUnits = TimeUnits;
 
 export interface ElapsedDateTimeDisplayProps extends TestableComponent {
     // The date time given as string (parseable by Date) or number (ms since 1970-01-01 00:00:00 UTC)
-    dateTime: string | number
+    dateTime: string | number;
     // String to put before the elapsed time
-    prefix?: string
+    prefix?: string;
     // String to put after the elapsed time
-    suffix?: string
+    suffix?: string;
     // If the date time string should be shown as tooltip
-    showDateTimeTooltip?: boolean
+    showDateTimeTooltip?: boolean;
     // Translate time related vocabulary
-    translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string
-    includeSeconds?:boolean
+    translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string;
+    includeSeconds?: boolean;
 }
 
 const dateTimeToElapsedTimeInMs = (dateTime: string | number) => {
-    const absoluteMs = typeof dateTime === "number" ? dateTime : new Date(dateTime).getTime()
-    return new Date().getTime() - absoluteMs
-}
+    const absoluteMs = typeof dateTime === "number" ? dateTime : new Date(dateTime).getTime();
+    return new Date().getTime() - absoluteMs;
+};
 
 /**
  * Returns a segmentation of the elapsed time, i.e. an array with the nr of days, hours, minutes, seconds
@@ -30,43 +31,49 @@ const dateTimeToElapsedTimeInMs = (dateTime: string | number) => {
  */
 export const elapsedTimeSegmented = (elapsedTimeInMs: number): number[] => {
     // In how many segments the time should be split, i.e. hours, minutes, seconds
-    const segmentSteps = [24, 60, 60]
+    const segmentSteps = [24, 60, 60];
     // First convert to time in seconds
-    let remaining = Math.floor(elapsedTimeInMs / 1000)
-    const segmentValues: number[] = []
+    let remaining = Math.floor(elapsedTimeInMs / 1000);
+    const segmentValues: number[] = [];
     segmentSteps.reverse().forEach((segmentSize) => {
-        const segmentValue = remaining % segmentSize
-        remaining =  Math.floor(remaining / segmentSize)
-        segmentValues.push(segmentValue)
-    })
-    segmentValues.push(remaining)
-    return segmentValues.reverse()
-}
+        const segmentValue = remaining % segmentSize;
+        remaining = Math.floor(remaining / segmentSize);
+        segmentValues.push(segmentValue);
+    });
+    segmentValues.push(remaining);
+    return segmentValues.reverse();
+};
 
 /**
  * Returns the simplified elapsed time
  * @deprecated moved to `elapsedDateTimeDisplayUtils.simplifiedElapsedTime`
  */
-export const simplifiedElapsedTime = (timeSegments: number[], translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string, includeSeconds = false) => {
-    const units: ElapsedDateTimeDisplayUnits[] = ["day", "hour", "minute"]
+export const simplifiedElapsedTime = (
+    timeSegments: number[],
+    translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string,
+    includeSeconds = false
+) => {
+    const units: ElapsedDateTimeDisplayUnits[] = ["day", "hour", "minute"];
 
-    if(includeSeconds){
-        units.push("second")
+    if (includeSeconds) {
+        units.push("second");
     }
 
     // Find first non-null value
-    let idx = 0
-    while(idx < 3 && timeSegments[idx] === 0) {
-        idx++
+    let idx = 0;
+    while (idx < 3 && timeSegments[idx] === 0) {
+        idx++;
     }
 
-    if(idx === 3 && !includeSeconds) {
+    if (idx === 3 && !includeSeconds) {
         // Do not show exact seconds
-        return `< 1 ${translateUnits("minute")}`
+        return `< 1 ${translateUnits("minute")}`;
     } else {
-        return `${timeSegments[idx]} ${translateUnits(units[idx] + (timeSegments[idx] > 1 ? "s": "") as ElapsedDateTimeDisplayUnits)}`
+        return `${timeSegments[idx]} ${translateUnits(
+            (units[idx] + (timeSegments[idx] > 1 ? "s" : "")) as ElapsedDateTimeDisplayUnits
+        )}`;
     }
-}
+};
 
 /**
  * Displays the elapsed time in a human readable way.
@@ -77,24 +84,29 @@ export const ElapsedDateTimeDisplay = ({
     suffix = "",
     showDateTimeTooltip = true,
     translateUnits,
-    includeSeconds, 
+    includeSeconds,
     ...otherProps
 }: ElapsedDateTimeDisplayProps) => {
-    const [elapsedTime, setElapsedTime] = useState<number>(dateTimeToElapsedTimeInMs(dateTime))
+    const [elapsedTime, setElapsedTime] = useState<number>(dateTimeToElapsedTimeInMs(dateTime));
 
     useEffect(() => {
         const timeout = setInterval(() => {
-            setElapsedTime(dateTimeToElapsedTimeInMs(dateTime))
-        }, 1000)
-        return () => clearInterval(timeout)
-    }, [dateTime])
+            setElapsedTime(dateTimeToElapsedTimeInMs(dateTime));
+        }, 1000);
+        return () => clearInterval(timeout);
+    }, [dateTime]);
 
-    return <span data-test-id={otherProps["data-test-id"]} title={showDateTimeTooltip ? new Date(dateTime).toString() : ""}>
-        {prefix + simplifiedElapsedTime(elapsedTimeSegmented(elapsedTime), translateUnits, includeSeconds) + suffix}
-    </span>
-}
+    return (
+        <span
+            data-test-id={otherProps["data-test-id"]}
+            title={showDateTimeTooltip ? new Date(dateTime).toString() : ""}
+        >
+            {prefix + simplifiedElapsedTime(elapsedTimeSegmented(elapsedTime), translateUnits, includeSeconds) + suffix}
+        </span>
+    );
+};
 
 export const elapsedDateTimeDisplayUtils = {
     elapsedTimeSegmented,
     simplifiedElapsedTime,
-}
+};