@evergis/react 3.1.73 → 3.1.75

package/dist/components/Dashboard/components/LogTerminal/index.d.ts

@@ -0,0 +1,9 @@
+import { FC, CSSProperties } from 'react';
+import { ITerminalInitOnlyOptions, ITerminalOptions } from '@xterm/xterm';
+export interface TaskLogTerminalProps {
+    log?: string | Record<string, any>;
+    className?: string;
+    styles?: CSSProperties;
+    terminalOptions?: ITerminalOptions & ITerminalInitOnlyOptions;
+}
+export declare const LogTerminal: FC<TaskLogTerminalProps>;

package/dist/components/Dashboard/components/LogTerminal/styled.d.ts

@@ -0,0 +1 @@
+export declare const TerminalWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/components/Dashboard/components/index.d.ts

@@ -13,6 +13,7 @@ export * from './FeatureCardHeader';
 export * from './FeatureCardTitle';
 export * from './HiddenTitleItems';
 export * from './Loading';
+export * from './LogTerminal';
 export * from './Pagination';
 export * from './Pagination/styled';
 export * from './StackBar';

package/dist/index.js

@@ -24,9 +24,9 @@ require('mapbox-gl/dist/mapbox-gl.css');
 var react = require('swiper/react');
 var ReactMarkdown = require('react-markdown');
 var remarkGfm = require('remark-gfm');
-require('@xterm/xterm/css/xterm.css');
 var xterm = require('@xterm/xterm');
 var addonFit = require('@xterm/addon-fit');
+require('@xterm/xterm/css/xterm.css');
 
 const AddFeatureButton = ({ title, icon = "feature_add" /* , layerName, geometryType*/ }) => {
     // const [, handleAddFeature] = useFeatureCreator(layerName, geometryType);
@@ -5687,14 +5687,15 @@ const OneColumnContainer = React.memo(({ elementConfig, renderElement }) => {
 const TwoColumnContainer = React.memo(({ config, elementConfig, type, renderElement }) => {
     const { selectedTabId, layerInfo, attributes } = useWidgetContext(type);
     const { attributes: renderAttributes } = elementConfig?.options || {};
-    const renderContainer = React.useCallback((element, attribute) => {
-        const { id, options, style, children } = element || {};
+    const renderContainer = React.useCallback((attribute) => {
+        const { id, options, style, children } = elementConfig || {};
         const { hideEmpty, innerTemplateStyle } = options || {};
         const hasUnits = children?.some(({ id }) => id === "units");
         const iconIndex = children?.findIndex(({ id }) => id === "icon");
         const icon = children?.[iconIndex];
         const hasIcon = !!icon;
-        const elementChildren = element?.children?.map(child => ({
+        const elementChildren = elementConfig?.children?.map(child => ({
+            type: "attributeValue",
             ...child,
             attributeName: attribute,
             options: { noUnits: hasUnits, ...child.options },
@@ -5714,7 +5715,7 @@ const TwoColumnContainer = React.memo(({ config, elementConfig, type, renderElem
             ? getRenderElement({
                 config,
                 elementConfig: {
-                    ...element,
+                    ...elementConfig,
                     children: elementChildren,
                 },
                 selectedTabId,
@@ -5727,8 +5728,8 @@ const TwoColumnContainer = React.memo(({ config, elementConfig, type, renderElem
         if (!value && hideEmpty)
             return null;
         return (jsxRuntime.jsxs(TwoColumnContainerWrapper, { id: id, style: innerTemplateStyle || style, children: [jsxRuntime.jsxs(ContainerAlias, { children: [hasIcon && jsxRuntime.jsx(ContainerAliasIcon, { children: render({ id: "icon" }) }), render({ id: "alias" }), render({ id: "tooltip" })] }), jsxRuntime.jsxs(ContainerValue, { big: true, children: [value, hasUnits && jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) })] })] }, attribute));
-    }, [attributes, config, getRenderElement, layerInfo, renderElement, selectedTabId, type]);
-    return renderAttributes?.length ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderAttributes.map(attribute => renderContainer(elementConfig, attribute)) })) : (renderContainer(elementConfig));
+    }, [attributes, config, getRenderElement, layerInfo, renderElement, selectedTabId, type, elementConfig]);
+    return renderAttributes?.length ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderAttributes.map(attribute => renderContainer(attribute)) })) : (renderContainer());
 });
 
 const InnerContainerWrapper = styled.div `
@@ -6847,121 +6848,6 @@ const StatusBadge = styled(uilibGl.Chip) `
   color: ${({ theme }) => theme.palette.iconContrast};
 `;
 
-const TerminalWrapper = styled.div `
-  flex: 1;
-  overflow: hidden;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  min-height: 0;
-
-  .xterm-viewport {
-    overflow-y: auto;
-  }
-
-  .xterm-screen .xterm-rows span {
-    letter-spacing: 0 !important;
-  }
-`;
-
-const LogTerminal = ({ log }) => {
-    const terminalRef = React.useRef(null);
-    const xtermRef = React.useRef(null);
-    const fitAddonRef = React.useRef(null);
-    const previousLogRef = React.useRef("");
-    const theme = styled.useTheme();
-    React.useEffect(() => {
-        if (!terminalRef.current)
-            return;
-        // Create terminal instance
-        const terminal = new xterm.Terminal({
-            cursorBlink: false,
-            fontSize: 12,
-            fontFamily: '"Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace',
-            scrollback: 10000,
-            convertEol: true,
-            lineHeight: 1.5,
-            theme: {
-                background: theme.palette.background,
-                foreground: theme.palette.textPrimary,
-                cursor: theme.palette.primary,
-            },
-        });
-        // Create fit addon
-        const fitAddon = new addonFit.FitAddon();
-        terminal.loadAddon(fitAddon);
-        // Open terminal
-        terminal.open(terminalRef.current);
-        fitAddon.fit();
-        // Store refs
-        xtermRef.current = terminal;
-        fitAddonRef.current = fitAddon;
-        // Handle window resize
-        const handleResize = () => {
-            fitAddon.fit();
-        };
-        window.addEventListener("resize", handleResize);
-        // Cleanup
-        return () => {
-            window.removeEventListener("resize", handleResize);
-            terminal.dispose();
-            xtermRef.current = null;
-            fitAddonRef.current = null;
-        };
-    }, [theme]);
-    // Update log content
-    React.useEffect(() => {
-        if (!xtermRef.current)
-            return;
-        // Handle different log types
-        if (typeof log === "string") {
-            // For string logs, only write the new content (append mode)
-            const previousLog = previousLogRef.current;
-            if (log !== previousLog) {
-                if (log.startsWith(previousLog)) {
-                    // Log is accumulated - write only the new part
-                    const newContent = log.substring(previousLog.length);
-                    xtermRef.current.write(newContent);
-                }
-                else {
-                    // Log was replaced completely - clear and write all
-                    xtermRef.current.clear();
-                    xtermRef.current.write(log);
-                }
-                previousLogRef.current = log;
-            }
-        }
-        else if (typeof log === "object") {
-            // JSON object (results) - always replace
-            xtermRef.current.clear();
-            const formatted = JSON.stringify(log, null, 2);
-            xtermRef.current.write(formatted);
-            previousLogRef.current = "";
-        }
-        else if (!log) {
-            // No log - clear terminal
-            xtermRef.current.clear();
-            previousLogRef.current = "";
-        }
-        // Scroll to bottom
-        xtermRef.current.scrollToBottom();
-    }, [log]);
-    React.useEffect(() => {
-        if (!fitAddonRef.current)
-            return;
-        const resizeObserver = new ResizeObserver(() => {
-            fitAddonRef.current?.fit();
-        });
-        if (terminalRef.current) {
-            resizeObserver.observe(terminalRef.current);
-        }
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, []);
-    return jsxRuntime.jsx(TerminalWrapper, { ref: terminalRef });
-};
-
 const STATUS_TRANSLATION_KEYS = {
     [api.RemoteTaskStatus.Process]: "taskProcess",
     [api.RemoteTaskStatus.Completed]: "taskCompleted",
@@ -7417,9 +7303,11 @@ const GradientHeaderWrapper = styled.div `
 const FeatureCardGradientHeader = ({ isRow }) => {
     const { layerInfo } = useWidgetContext(exports.WidgetType.FeatureCard);
     const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
-    const { header, options } = config || {};
+    const { header } = config || {};
+    const { options } = header || {};
+    const { fontColor, bgColor } = options || {};
     const renderElement = useHeaderRender(header);
-    return (jsxRuntime.jsx(GradientHeaderWrapper, { "$fontColor": options?.fontColor, "$bgColor": options?.bgColor, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.defaultTheme, children: jsxRuntime.jsx(Header, { "$isRow": isRow, children: jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
+    return (jsxRuntime.jsx(GradientHeaderWrapper, { "$fontColor": fontColor, "$bgColor": bgColor, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.defaultTheme, children: jsxRuntime.jsx(Header, { "$isRow": isRow, children: jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
                                         id: "title",
                                         wrap: false,
                                     }), description: renderElement({
@@ -7429,7 +7317,7 @@ const FeatureCardGradientHeader = ({ isRow }) => {
 };
 
 const HeaderFontColorMixin = styled.css `
-  ${HeaderTitleContainer}, ${LayerDescription} {
+  ${HeaderTitleContainer}, ${HeaderTitleContainer} *, ${LayerDescription} {
     color: ${({ $fontColor }) => $fontColor};
   }
 `;
@@ -7507,9 +7395,11 @@ const IconHeaderWrapper = styled.div `
 const FeatureCardIconHeader = ({ isRow }) => {
     const { layerInfo } = useWidgetContext(exports.WidgetType.FeatureCard);
     const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
-    const { header, options } = config || {};
+    const { header } = config || {};
+    const { options } = header || {};
+    const { fontColor, bgColor, bigIcon } = options || {};
     const renderElement = useHeaderRender(header);
-    return (jsxRuntime.jsx(IconHeaderWrapper, { "$fontColor": options?.fontColor, "$bgColor": options?.bgColor, "$bigIcon": options?.bigIcon, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.defaultTheme, children: jsxRuntime.jsxs(Header, { "$isRow": isRow, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
+    return (jsxRuntime.jsx(IconHeaderWrapper, { "$fontColor": fontColor, "$bgColor": bgColor, "$bigIcon": bigIcon, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.defaultTheme, children: jsxRuntime.jsxs(Header, { "$isRow": isRow, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
                                             id: "title",
                                             wrap: false,
                                         }), description: renderElement({
@@ -7976,8 +7866,13 @@ const LocalLinkButton = styled(uilibGl.IconButton).attrs(() => ({
   width: 1rem;
   height: 1rem;
   background-color: ${({ theme: { palette } }) => palette.primary};
+  padding: 0;
   border-radius: 50%;
 
+  :hover {
+    background-color: ${({ theme: { palette } }) => palette.primary};
+  }
+  
   span[kind] {
     display: flex;
     justify-content: center;
@@ -8007,8 +7902,8 @@ const LocalLink = React.memo(({ link }) => {
 const ElementLink = React.memo(({ type, elementConfig }) => {
     const { attributes } = useWidgetContext(type);
     const attribute = getAttributeByName(elementConfig?.attributeName, attributes);
-    const link = attribute?.value;
-    if (!link || typeof link !== "string")
+    const link = getResourceUrl(attribute?.value?.toString());
+    if (!link)
         return null;
     return link.startsWith("http") ? jsxRuntime.jsx(ExternalLink, { onClick: () => window.open(link) }) : jsxRuntime.jsx(LocalLink, { link: link });
 });
@@ -8312,9 +8207,11 @@ const HeaderSlideshow = styled.div `
 const FeatureCardSlideshowHeader = ({ isRow }) => {
     const { layerInfo } = useWidgetContext(exports.WidgetType.FeatureCard);
     const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
-    const { header, options } = config || {};
+    const { header } = config || {};
+    const { options } = header || {};
+    const { height, withPadding } = options || {};
     const renderElement = useHeaderRender(header);
-    return (jsxRuntime.jsx(SlideshowHeaderWrapper, { big: true, withPadding: options?.withPadding, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.darkTheme, children: jsxRuntime.jsxs(Header, { "$isRow": isRow, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
+    return (jsxRuntime.jsx(SlideshowHeaderWrapper, { big: true, withPadding: withPadding, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.darkTheme, children: jsxRuntime.jsxs(Header, { "$isRow": isRow, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
                                             id: "title",
                                             wrap: false,
                                         }), description: renderElement({
@@ -8323,7 +8220,7 @@ const FeatureCardSlideshowHeader = ({ isRow }) => {
                                         }) })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }), jsxRuntime.jsx(ImageContainerBg, { children: renderElement({
                             id: "bgImage",
                             wrap: false,
-                        }) }), jsxRuntime.jsx(HeaderSlideshow, { height: options?.height, children: renderElement({
+                        }) }), jsxRuntime.jsx(HeaderSlideshow, { height: height, children: renderElement({
                             id: "slideshow",
                             wrap: false,
                         }) })] }) }) }));
@@ -10615,7 +10512,7 @@ const ContainerChildren = React.memo(({ type, items, isColumn, isMain, renderEle
             });
             if (checkIfEmptyDataSource(item.options?.hideIfEmptyDataSource))
                 return null;
-            return isMain ? (jsxRuntime.jsx(ContainerWrapper, { "data-id": item.id, "data-templatename": item.templateName, "$noMargin": item.options?.noMargin, children: jsxRuntime.jsx(DashboardWrapper, { children: render }) }, index)) : (jsxRuntime.jsx(React.Fragment, { children: render }, index));
+            return isMain ? (jsxRuntime.jsx(ContainerWrapper, { "$noMargin": item.options?.noMargin, children: jsxRuntime.jsx(DashboardWrapper, { children: render }) }, index)) : (jsxRuntime.jsx(React.Fragment, { children: render }, index));
         }) }));
 });
 
@@ -10787,6 +10684,122 @@ const HiddenTitleItems = React.memo(({ elementConfig, config, type, filter }) =>
                     getConfigFilter(filterName, configFilters)?.defaultValue, index)) }));
 });
 
+const TerminalWrapper = styled.div `
+  flex: 1;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  min-height: 0;
+
+  .xterm-viewport {
+    overflow-y: auto;
+  }
+
+  .xterm-screen .xterm-rows span {
+    letter-spacing: 0 !important;
+  }
+`;
+
+const LogTerminal = ({ log, terminalOptions, className, styles }) => {
+    const terminalRef = React.useRef(null);
+    const xtermRef = React.useRef(null);
+    const fitAddonRef = React.useRef(null);
+    const previousLogRef = React.useRef("");
+    const theme = styled.useTheme();
+    React.useEffect(() => {
+        if (!terminalRef.current)
+            return;
+        // Create terminal instance
+        const terminal = new xterm.Terminal({
+            cursorBlink: false,
+            fontSize: 12,
+            fontFamily: '"Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace',
+            scrollback: 10000,
+            convertEol: true,
+            lineHeight: 1.5,
+            theme: {
+                background: theme.palette.background,
+                foreground: theme.palette.textPrimary,
+                cursor: theme.palette.primary,
+            },
+            ...terminalOptions,
+        });
+        // Create fit addon
+        const fitAddon = new addonFit.FitAddon();
+        terminal.loadAddon(fitAddon);
+        // Open terminal
+        terminal.open(terminalRef.current);
+        fitAddon.fit();
+        // Store refs
+        xtermRef.current = terminal;
+        fitAddonRef.current = fitAddon;
+        // Handle window resize
+        const handleResize = () => {
+            fitAddon.fit();
+        };
+        window.addEventListener("resize", handleResize);
+        // Cleanup
+        return () => {
+            window.removeEventListener("resize", handleResize);
+            terminal.dispose();
+            xtermRef.current = null;
+            fitAddonRef.current = null;
+        };
+    }, [theme, terminalOptions]);
+    // Update log content
+    React.useEffect(() => {
+        if (!xtermRef.current)
+            return;
+        // Handle different log types
+        if (typeof log === "string") {
+            // For string logs, only write the new content (append mode)
+            const previousLog = previousLogRef.current;
+            if (log !== previousLog) {
+                if (log.startsWith(previousLog)) {
+                    // Log is accumulated - write only the new part
+                    const newContent = log.substring(previousLog.length);
+                    xtermRef.current.write(newContent);
+                }
+                else {
+                    // Log was replaced completely - clear and write all
+                    xtermRef.current.clear();
+                    xtermRef.current.write(log);
+                }
+                previousLogRef.current = log;
+            }
+        }
+        else if (typeof log === "object") {
+            // JSON object (results) - always replace
+            xtermRef.current.clear();
+            const formatted = JSON.stringify(log, null, 2);
+            xtermRef.current.write(formatted);
+            previousLogRef.current = "";
+        }
+        else if (!log) {
+            // No log - clear terminal
+            xtermRef.current.clear();
+            previousLogRef.current = "";
+        }
+        // Scroll to bottom
+        xtermRef.current.scrollToBottom();
+    }, [log]);
+    React.useEffect(() => {
+        if (!fitAddonRef.current)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            fitAddonRef.current?.fit();
+        });
+        if (terminalRef.current) {
+            resizeObserver.observe(terminalRef.current);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    return jsxRuntime.jsx(TerminalWrapper, { ref: terminalRef, className: className, style: styles });
+};
+
 const PageNavigator = styled(uilibGl.Flex) `
   margin-right: -0.5rem;
   align-items: center;
@@ -11210,6 +11223,7 @@ exports.LayerTree = LayerTree;
 exports.LayersContainer = LayersContainer;
 exports.LayersListWrapper = LayersListWrapper;
 exports.LinearProgressContainer = LinearProgressContainer;
+exports.LogTerminal = LogTerminal;
 exports.LogoContainer = LogoContainer;
 exports.MAX_CHART_WIDTH = MAX_CHART_WIDTH;
 exports.Map = Map$1;