@iobroker/gui-components 10.3.14 → 10.3.16

package/build/Components/Loaders/CommunityLegacy.js

@@ -0,0 +1,266 @@
+/**
+ * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ * Previous loader of the community edition, replaced by `LoaderCommunity` in 2026-11.
+ */
+import React, { useEffect } from 'react';
+const loaderStyles = `
+/**
+ * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ **/
+
+.logo-background-light, .logo-background-colored {
+    background: white;
+}
+.logo-background-dark, .logo-background-blue {
+    background: black;
+}
+.logo-div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    overflow: hidden;
+    border-radius: 50%;
+    z-index: 2;
+}
+.logo-border {
+    /*border-color: #164477;*/
+    border-top-color: #3399CC;
+    border-left-color: #164477;
+    border-bottom-color: #164477;
+    border-right-color: #164477;
+    border-radius: 50%;
+    border-style: solid;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
+.logo-top {
+    position: absolute;
+    width: 4.5%;
+    height: 16%;
+    top: 0;
+    z-index: 2;
+}
+.logo-i {
+    position: absolute;
+    width: 14.5%;
+    height: 60%;
+    top: 20%;
+    left: 42%;
+    background: #3399CC;
+}
+.logo-i-top {
+    position: absolute;
+    width: 14.5%;
+    height: 4%;
+    left: 42%;
+    background: #3399CC;
+    border-radius: 100%;
+}
+.logo-back {
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    overflow: hidden;
+}
+@keyframes logo-grow {
+    0% {
+        width: 230px;
+        height: 230px;
+        transform: translate(-50%,-50%) scale(1);
+        opacity: 1
+    }
+    99% {
+        width: 230px;
+        height: 230px;
+        transform: translate(-50%,-50%) scale(10);
+        opacity: 0;
+    }
+    100% {
+        width: 0;
+        height: 0;
+        opacity: 0;
+    }
+}
+@keyframes logo-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
+@keyframes logo-color-inside-light {
+    0% {
+        background: #FEFEFE;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+@keyframes logo-color-inside-dark {
+    0% {
+        background: #030303;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+@keyframes logo-color-inside-colored {
+    0% {
+        background: #FEFEFE;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+@keyframes logo-color-inside-blue {
+    0% {
+        background: #030303;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+
+@keyframes logo-color-outside-light {
+    0% {
+        border-color: #FEFEFE;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+@keyframes logo-color-outside-dark  {
+    0% {
+        border-color: #040404;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+@keyframes logo-color-outside-colored {
+    0% {
+        border-color: #FEFEFE;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+@keyframes logo-color-outside-blue  {
+    0% {
+        border-color: #040404;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+
+.logo-animate-wait {
+    animation: logo-color-outside 1.5s, logo-spin 1.5s linear infinite;
+}
+
+.logo-animate-grow-light {
+    background: #DDD;
+}
+.logo-animate-grow-dark {
+    background: #1d1d1d;
+}
+.logo-animate-grow-colored {
+    background: #DDD;
+}
+.logo-animate-grow-blue {
+    background: #1d1d1d;
+}
+
+.logo-animate-grow {
+    display: inline-block;
+    text-align: center;
+    z-index: 1;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    width: 245px;
+    height: 245px;
+    border-radius: 50%;
+    position: absolute;
+    animation: logo-grow 1s 1 ease forwards;
+}
+
+.logo-animate-color-inside-light {
+    animation: logo-color-inside-light 2.5s;
+}
+.logo-animate-color-inside-dark {
+    animation: logo-color-inside-dark 2.5s;
+}
+.logo-animate-color-inside-colored {
+    animation: logo-color-inside-colored 2.5s;
+}
+.logo-animate-color-inside-blue {
+    animation: logo-color-inside-blue 2.5s;
+}
+
+.logo-animate-color-outside-light {
+    animation: logo-color-outside-light 1.5s;
+}
+.logo-animate-color-outside-dark {
+    animation: logo-color-outside-dark 1.5s;
+}
+.logo-animate-color-outside-colored {
+    animation: logo-color-outside-colored 1.5s;
+}
+.logo-animate-color-outside-blue {
+    animation: logo-color-outside-blue 1.5s;
+}
+`;
+export function LoaderCommunityLegacy(props) {
+    useEffect(() => {
+        if (!window.document.getElementById('loader-iobroker-component')) {
+            const style = window.document.createElement('style');
+            style.setAttribute('id', 'loader-iobroker-component');
+            style.innerHTML = loaderStyles;
+            window.document.head.appendChild(style);
+        }
+    }, []);
+    const size = props.size || 234;
+    const theme = props.themeName || props.theme || props.themeType || 'light';
+    return (React.createElement("div", { className: `logo-back logo-background-${theme}`, style: {
+            backgroundImage: props.backgroundImage && props.backgroundImage !== '@@loginBackgroundImage@@'
+                ? props.backgroundImage
+                : window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@'
+                    ? `url(${window.loadingBackgroundImage})`
+                    : undefined,
+            backgroundColor: props.backgroundColor && props.backgroundColor !== '@@loginBackgroundColor@@'
+                ? props.backgroundColor
+                : window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@'
+                    ? window.loadingBackgroundColor
+                    : undefined,
+            backgroundSize: 'cover',
+        } }, window.loadingHideLogo === 'true' ? null : (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "logo-div", style: { width: size, height: size } },
+            React.createElement("div", { className: `logo-top logo-background-${theme}`, style: { left: '37%' } }),
+            React.createElement("div", { className: `logo-top logo-background-${theme}`, style: { left: '57%' } }),
+            React.createElement("div", { className: `logo-border logo-background-${theme} logo-animate-wait`, style: { borderWidth: size * 0.132 } }),
+            React.createElement("div", { className: `logo-i logo-animate-color-inside-${theme}` }),
+            React.createElement("div", { className: `logo-i-top logo-animate-color-inside-${theme}`, style: { top: '18%' } }),
+            React.createElement("div", { className: `logo-i-top logo-animate-color-inside-${theme}`, style: { bottom: '18%' } })),
+        React.createElement("div", { className: `logo-animate-grow logo-animate-grow-${theme}`, style: { width: size + 11, height: size + 11 } })))));
+}
+//# sourceMappingURL=CommunityLegacy.js.map

package/build/Components/Loaders/CommunityLegacy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommunityLegacy.js","sourceRoot":"./src/","sources":["Components/Loaders/CommunityLegacy.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>\n *\n * MIT License\n *\n * Previous loader of the community edition, replaced by `LoaderCommunity` in 2026-11.\n */\nimport React, { useEffect } from 'react';\nimport type { ThemeName, ThemeType } from '../../types';\n\ndeclare global {\n    interface Window {\n        loadingBackgroundImage: undefined | string;\n        loadingBackgroundColor: undefined | string;\n        loadingHideLogo: undefined | 'true';\n    }\n}\n\nconst loaderStyles = `\n/**\n * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>\n *\n * MIT License\n *\n **/\n\n.logo-background-light, .logo-background-colored {\n    background: white;\n}\n.logo-background-dark, .logo-background-blue {\n    background: black;\n}\n.logo-div {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    -ms-transform: translateX(-50%) translateY(-50%);\n    -webkit-transform: translate(-50%,-50%);\n    transform: translate(-50%,-50%);\n    overflow: hidden;\n    border-radius: 50%;\n    z-index: 2;\n}\n.logo-border {\n    /*border-color: #164477;*/\n    border-top-color: #3399CC;\n    border-left-color: #164477;\n    border-bottom-color: #164477;\n    border-right-color: #164477;\n    border-radius: 50%;\n    border-style: solid;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n}\n.logo-top {\n    position: absolute;\n    width: 4.5%;\n    height: 16%;\n    top: 0;\n    z-index: 2;\n}\n.logo-i {\n    position: absolute;\n    width: 14.5%;\n    height: 60%;\n    top: 20%;\n    left: 42%;\n    background: #3399CC;\n}\n.logo-i-top {\n    position: absolute;\n    width: 14.5%;\n    height: 4%;\n    left: 42%;\n    background: #3399CC;\n    border-radius: 100%;\n}\n.logo-back {\n    width: 100%;\n    height: 100%;\n    z-index: 0;\n    overflow: hidden;\n}\n@keyframes logo-grow {\n    0% {\n        width: 230px;\n        height: 230px;\n        transform: translate(-50%,-50%) scale(1);\n        opacity: 1\n    }\n    99% {\n        width: 230px;\n        height: 230px;\n        transform: translate(-50%,-50%) scale(10);\n        opacity: 0;\n    }\n    100% {\n        width: 0;\n        height: 0;\n        opacity: 0;\n    }\n}\n@keyframes logo-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }\n@keyframes logo-color-inside-light {\n    0% {\n        background: #FEFEFE;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n@keyframes logo-color-inside-dark {\n    0% {\n        background: #030303;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n@keyframes logo-color-inside-colored {\n    0% {\n        background: #FEFEFE;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n@keyframes logo-color-inside-blue {\n    0% {\n        background: #030303;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n\n@keyframes logo-color-outside-light {\n    0% {\n        border-color: #FEFEFE;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n@keyframes logo-color-outside-dark  {\n    0% {\n        border-color: #040404;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n@keyframes logo-color-outside-colored {\n    0% {\n        border-color: #FEFEFE;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n@keyframes logo-color-outside-blue  {\n    0% {\n        border-color: #040404;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n\n.logo-animate-wait {\n    animation: logo-color-outside 1.5s, logo-spin 1.5s linear infinite;\n}\n\n.logo-animate-grow-light {\n    background: #DDD;\n}\n.logo-animate-grow-dark {\n    background: #1d1d1d;\n}\n.logo-animate-grow-colored {\n    background: #DDD;\n}\n.logo-animate-grow-blue {\n    background: #1d1d1d;\n}\n\n.logo-animate-grow {\n    display: inline-block;\n    text-align: center;\n    z-index: 1;\n    top: 50%;\n    left: 50%;\n    -ms-transform: translateX(-50%) translateY(-50%);\n    -webkit-transform: translate(-50%,-50%);\n    transform: translate(-50%,-50%);\n    width: 245px;\n    height: 245px;\n    border-radius: 50%;\n    position: absolute;\n    animation: logo-grow 1s 1 ease forwards;\n}\n\n.logo-animate-color-inside-light {\n    animation: logo-color-inside-light 2.5s;\n}\n.logo-animate-color-inside-dark {\n    animation: logo-color-inside-dark 2.5s;\n}\n.logo-animate-color-inside-colored {\n    animation: logo-color-inside-colored 2.5s;\n}\n.logo-animate-color-inside-blue {\n    animation: logo-color-inside-blue 2.5s;\n}\n\n.logo-animate-color-outside-light {\n    animation: logo-color-outside-light 1.5s;\n}\n.logo-animate-color-outside-dark {\n    animation: logo-color-outside-dark 1.5s;\n}\n.logo-animate-color-outside-colored {\n    animation: logo-color-outside-colored 1.5s;\n}\n.logo-animate-color-outside-blue {\n    animation: logo-color-outside-blue 1.5s;\n}\n`;\n\ninterface LoaderProps {\n    /** The size in pixels of this loader. */\n    size?: number;\n    /** The chosen theme type. */\n    themeType?: ThemeType;\n    /** Theme name */\n    themeName?: ThemeName;\n    /** @deprecated Theme name. use themeName instead */\n    theme?: ThemeName;\n    /** Background color */\n    backgroundColor?: string;\n    /** Background image URL */\n    backgroundImage?: string;\n}\n\nexport function LoaderCommunityLegacy(props: LoaderProps): React.JSX.Element {\n    useEffect(() => {\n        if (!window.document.getElementById('loader-iobroker-component')) {\n            const style = window.document.createElement('style');\n            style.setAttribute('id', 'loader-iobroker-component');\n            style.innerHTML = loaderStyles;\n            window.document.head.appendChild(style);\n        }\n    }, []);\n\n    const size = props.size || 234;\n    const theme = props.themeName || props.theme || props.themeType || 'light';\n    return (\n        <div\n            className={`logo-back logo-background-${theme}`}\n            style={{\n                backgroundImage:\n                    props.backgroundImage && props.backgroundImage !== '@@loginBackgroundImage@@'\n                        ? props.backgroundImage\n                        : window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@'\n                          ? `url(${window.loadingBackgroundImage})`\n                          : undefined,\n                backgroundColor:\n                    props.backgroundColor && props.backgroundColor !== '@@loginBackgroundColor@@'\n                        ? props.backgroundColor\n                        : window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@'\n                          ? window.loadingBackgroundColor\n                          : undefined,\n                backgroundSize: 'cover',\n            }}\n        >\n            {window.loadingHideLogo === 'true' ? null : (\n                <>\n                    <div\n                        className=\"logo-div\"\n                        style={{ width: size, height: size }}\n                    >\n                        <div\n                            className={`logo-top logo-background-${theme}`}\n                            style={{ left: '37%' }}\n                        />\n                        <div\n                            className={`logo-top logo-background-${theme}`}\n                            style={{ left: '57%' }}\n                        />\n                        <div\n                            className={`logo-border logo-background-${theme} logo-animate-wait`}\n                            style={{ borderWidth: size * 0.132 }}\n                        />\n                        <div className={`logo-i logo-animate-color-inside-${theme}`} />\n                        <div\n                            className={`logo-i-top logo-animate-color-inside-${theme}`}\n                            style={{ top: '18%' }}\n                        />\n                        <div\n                            className={`logo-i-top logo-animate-color-inside-${theme}`}\n                            style={{ bottom: '18%' }}\n                        />\n                    </div>\n                    <div\n                        className={`logo-animate-grow logo-animate-grow-${theme}`}\n                        style={{ width: size + 11, height: size + 11 }}\n                    />\n                </>\n            )}\n        </div>\n    );\n}\n"]}

package/build/Components/ObjectBrowser/ObjectBrowserClass.d.ts

@@ -97,6 +97,20 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     private windowLast;
     /** id -> how often the state of this row has changed. Part of the memo key of the row */
     readonly rowStateVersion: Record<string, number>;
+    /**
+     * id -> last change of a number (arrow up or down) or of a boolean (the value flips), see `renderColumnValue`.
+     * `shown` is the time the row showed it first, so a row that is rendered again continues the animation.
+     */
+    readonly valueTrends: Record<string, {
+        dir: 'up' | 'down' | 'toggle';
+        ts: number;
+        shown?: number;
+    }>;
+    /** The running animations of an unfolded or folding node (see `rowAnimation.ts`) */
+    private rowAnimations;
+    /** The node whose children slide under its row at the moment; they are removed when that ends */
+    private foldingId;
+    private foldTimer;
     private stateVersionCounter;
     private selectFirst;
     /** Last navigation that was applied from `navigateTo` or reported via `onNavigateTo` (loop guard). */
@@ -349,6 +363,10 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
      */
     getToolbar(): JSX.Element;
     toggleExpanded(id: string): void;
+    /** The fold animation ended (or is cut short): remove the children of the node now */
+    private applyFold;
+    /** Ends a running fold or unfold animation at once */
+    private finishRowAnimations;
     onCopy(e: React.MouseEvent, text: string | undefined): void;
     renderTooltipAccessControl(acl: ioBroker.StateACL): null | JSX.Element;
     renderColumnButtons(id: string, item: TreeItem): (JSX.Element | null)[] | JSX.Element | null;

package/build/Components/ObjectBrowser/ObjectBrowserClass.js

@@ -17,13 +17,14 @@ import { Utils } from '../Utils'; // @iobroker/gui-components/Components/Utils
 import { TabContainer } from '../TabContainer';
 import { TabContent } from '../TabContent';
 import { TabHeader } from '../TabHeader';
-import { ROW_HEIGHT, applyFilter, buildTree, findNode, formatValue, generateFile, getName, colVar, widthFromContainer, growVar, getSelectIdIconFromObjects, setCustomValue, } from './utils';
+import { ROW_HEIGHT, TREND_DURATION, applyFilter, buildTree, findNode, formatValue, generateFile, getName, colVar, widthFromContainer, growVar, getSelectIdIconFromObjects, setCustomValue, } from './utils';
 import { HistoryChart } from './HistoryChart';
 import { styles } from './styles';
 import * as dialogs from './dialogs';
 import * as toolbar from './toolbar';
 import * as leaf from './renderLeaf';
 import * as contextMenu from './contextMenu';
+import * as rowAnimation from './rowAnimation';
 import { DEFAULT_DATE_FORMAT, DEFAULT_FILTER, ITEM_LEVEL, MIN_COLUMN_WIDTHS, SCREEN_WIDTHS, } from './constants';
 export { getSelectIdIconFromObjects };
 let objectsAlreadyLoaded = false;
@@ -123,6 +124,16 @@ export class ObjectBrowserClass extends Component {
     windowLast = 0;
     /** id -> how often the state of this row has changed. Part of the memo key of the row */
     rowStateVersion = {};
+    /**
+     * id -> last change of a number (arrow up or down) or of a boolean (the value flips), see `renderColumnValue`.
+     * `shown` is the time the row showed it first, so a row that is rendered again continues the animation.
+     */
+    valueTrends = {};
+    /** The running animations of an unfolded or folding node (see `rowAnimation.ts`) */
+    rowAnimations = [];
+    /** The node whose children slide under its row at the moment; they are removed when that ends */
+    foldingId = null;
+    foldTimer = null;
     stateVersionCounter = 0;
     selectFirst;
     /** Last navigation that was applied from `navigateTo` or reported via `onNavigateTo` (loop guard). */
@@ -764,6 +775,14 @@ export class ObjectBrowserClass extends Component {
             window.cancelAnimationFrame(this.scrollFrame);
             this.scrollFrame = null;
         }
+        // a fold animation must not update the state after the component was destroyed
+        this.foldingId = null;
+        if (this.foldTimer) {
+            clearTimeout(this.foldTimer);
+            this.foldTimer = null;
+        }
+        this.rowAnimations.forEach(animation => animation.cancel());
+        this.rowAnimations = [];
         // the timers must not fire after the component was destroyed
         if (this.unsubscribeTimer) {
             clearTimeout(this.unsubscribeTimer);
@@ -1059,6 +1078,16 @@ export class ObjectBrowserClass extends Component {
                 item.data.state = undefined;
             }
         }
+        const oldVal = oldState?.val;
+        const newVal = state?.val;
+        if (typeof oldVal === 'number' && typeof newVal === 'number' && oldVal !== newVal) {
+            if (!Number.isNaN(oldVal) && !Number.isNaN(newVal)) {
+                this.valueTrends[id] = { dir: newVal > oldVal ? 'up' : 'down', ts: Date.now() };
+            }
+        }
+        else if (typeof oldVal === 'boolean' && typeof newVal === 'boolean' && oldVal !== newVal) {
+            this.valueTrends[id] = { dir: 'toggle', ts: Date.now() };
+        }
         if (state) {
             this.states[id] = state;
         }
@@ -1775,7 +1804,10 @@ export class ObjectBrowserClass extends Component {
         return toolbar.getToolbar(this);
     }
     toggleExpanded(id) {
-        const expanded = JSON.parse(JSON.stringify(this.state.expanded));
+        // a node that is still folding is folded now, this toggle builds on it
+        const folding = this.foldingId;
+        this.finishRowAnimations();
+        const expanded = this.state.expanded.filter(item => item !== folding);
         const pos = expanded.indexOf(id);
         if (pos === -1) {
             expanded.push(id);
@@ -1785,7 +1817,50 @@ export class ObjectBrowserClass extends Component {
             expanded.splice(pos, 1);
         }
         this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectExpanded`, JSON.stringify(expanded));
-        this.setState({ expanded });
+        if (pos === -1) {
+            // the children are rendered after this update: let them slide out from under the row
+            this.setState({ expanded }, () => {
+                this.rowAnimations = rowAnimation.unfold(this.tableRef.current, id);
+            });
+            return;
+        }
+        const animations = rowAnimation.fold(this.tableRef.current, id, () => this.applyFold());
+        if (animations) {
+            // the children slide under the row first and are removed when the animation ends
+            this.rowAnimations = animations;
+            this.foldingId = id;
+            // a hidden tab does not run animations: fold anyway
+            this.foldTimer = setTimeout(() => this.applyFold(), 600);
+        }
+        else {
+            this.setState({ expanded });
+        }
+    }
+    /** The fold animation ended (or is cut short): remove the children of the node now */
+    applyFold() {
+        const id = this.foldingId;
+        if (id === null) {
+            return;
+        }
+        this.foldingId = null;
+        if (this.foldTimer) {
+            clearTimeout(this.foldTimer);
+            this.foldTimer = null;
+        }
+        const animations = this.rowAnimations;
+        this.rowAnimations = [];
+        // the animations hold the rows in their end position until the children are really gone
+        this.setState(state => ({ expanded: state.expanded.filter(item => item !== id) }), () => animations.forEach(animation => animation.cancel()));
+    }
+    /** Ends a running fold or unfold animation at once */
+    finishRowAnimations() {
+        if (this.foldingId !== null) {
+            this.applyFold();
+        }
+        else {
+            this.rowAnimations.forEach(animation => animation.cancel());
+            this.rowAnimations = [];
+        }
     }
     onCopy(e, text) {
         e.stopPropagation();
@@ -2832,6 +2907,59 @@ export class ObjectBrowserClass extends Component {
 .newValueBrowser-light {
     animation: newValueAnimation-light 2s ease-in-out;
 }
+.iob-ob-trend {
+    display: inline-flex;
+    align-self: center;
+    flex-shrink: 0;
+    width: 0.85em;
+    height: 0.85em;
+    margin-left: 4px;
+    opacity: 0;
+    animation: iob-ob-trend-up ${TREND_DURATION}ms ease-out forwards;
+}
+.iob-ob-trend svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+}
+.iob-ob-trend-up {
+    color: ${this.props.themeType === 'dark' ? '#66bb6a' : '#2e7d32'};
+}
+.iob-ob-trend-down {
+    color: ${this.props.themeType === 'dark' ? '#ef5350' : '#c62828'};
+    animation-name: iob-ob-trend-down;
+}
+@keyframes iob-ob-trend-up {
+    0% { opacity: 0; transform: translateY(45%); }
+    12% { opacity: 1; transform: none; }
+    80% { opacity: 1; }
+    100% { opacity: 0; }
+}
+@keyframes iob-ob-trend-down {
+    0% { opacity: 0; transform: translateY(-45%); }
+    12% { opacity: 1; transform: none; }
+    80% { opacity: 1; }
+    100% { opacity: 0; }
+}
+.newValueBrowser-dark.iob-ob-flip {
+    animation: iob-ob-flip 0.32s cubic-bezier(0.3, 1.4, 0.5, 1), newValueAnimation-dark 2s ease-in-out;
+}
+.newValueBrowser-light.iob-ob-flip {
+    animation: iob-ob-flip 0.32s cubic-bezier(0.3, 1.4, 0.5, 1), newValueAnimation-light 2s ease-in-out;
+}
+@keyframes iob-ob-flip {
+    0% { transform: perspective(60px) rotateX(90deg); opacity: 0.3; }
+    100% { transform: none; opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+    .iob-ob-trend { animation-name: iob-ob-trend-fade; }
+    .newValueBrowser-dark.iob-ob-flip { animation: newValueAnimation-dark 2s ease-in-out; }
+    .newValueBrowser-light.iob-ob-flip { animation: newValueAnimation-light 2s ease-in-out; }
+    @keyframes iob-ob-trend-fade {
+        0%, 80% { opacity: 1; }
+        100% { opacity: 0; }
+    }
+}
 .highlight-link .iob-link {
     text-decoration: underline;
     cursor: pointer;