@iobroker/gui-components 10.3.2 → 10.3.4

package/README.md

@@ -36,7 +36,7 @@ npm create vite@latest src -- --template react-ts
     "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
-        "@iobroker/gui-components": "^10.3.2",
+        "@iobroker/gui-components": "^10.3.4",
         "@mui/icons-material": "^9.0.1",
         "@mui/material": "^9.0.1",
         "react": "^19.2.5",
@@ -877,6 +877,15 @@ You can find the migration instructions:
 -->
 
 ## Changelog
+### 10.3.4 (2026-09-23)
+
+- (@GermanBluefox) Fixed: the schedule wizard threw the time of day away. A schedule with an exact time was saved as `{"time":{"exactTime":true}}` without the time itself, so it ran at 00:00 and the dialog showed `--:--` and "every day at undefined" when it was opened again (ioBroker.javascript#2386). A saved schedule that lacks a setting now also falls back to the default of that setting instead of `undefined`
+
+### 10.3.3 (2026-09-23)
+
+- (@krobipd) Improved: the object browser renders the rows around the visible area instead of every open row of the tree. Selecting a row, applying a filter or folding a node rebuilt every open row, and that cost grows with the size of the tree: measured with 4003 rows open, one click on a row blocked the main thread for 3.9 seconds and a filter for 2.6 seconds - with 603 rows it was 0.4 seconds each. Now it is 0 ms in both cases, and the table holds 38 rows instead of 4003 (1985 instead of 164652 DOM nodes). Scrolling, scrolling to a row and the keyboard navigation reach every row as before
+- (@krobipd) Improved: a value that changes no longer rebuilds every open row of the object browser. Until now one state answered with a render of the whole table, and with a few hundred rows open that blocked the main thread for about a fifth of a second per value - on an installation whose adapters report all the time the table never stood still. A row is kept as it is unless its own state changed or something happened that concerns every row (filter, columns, theme, selection, a rebuilt tree). Measured in the admin with 542 open rows and ten state changes: 1937 ms of blocked main thread before, none after, with the new values shown in every case
+
 ### 10.3.2 (2026-09-22)
 
 - (@GermanBluefox) Updated packages

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

@@ -39,6 +39,65 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     private treeRebuiltWhilePaused;
     /** Time of the first object change since the last tree rebuild (upper bound for the rebuild delay) */
     private objectsUpdateFirstTs;
+    /**
+     * Counts up on every render that can change ANY row - a new filter, other columns, another
+     * theme, a different selection, a rebuilt tree. A state change does NOT count it up: it only
+     * concerns the rows whose value changed. Together with `rowStateVersion` this is the memo key
+     * of a row (see `renderRow`), so a value that ticks every second no longer rebuilds the whole
+     * table.
+     *
+     * Whether a render concerns every row is decided in `render` and not by a flag that the caller
+     * sets: React may batch the render of a state change with a `setState` (a click) or with new
+     * props, and a flag would then keep every row as it was, although the selection has changed.
+     */
+    renderEpoch: number;
+    /**
+     * Set by every `forceUpdate()`: something changed that is not visible in `state` or `props` (a
+     * rebuilt tree, other column widths), so every row has to be built again. Only
+     * `updateRowsOnly` renders without it
+     */
+    private rowsInvalid;
+    /** `state` and `props` of the last render: a render with the same two cannot concern every row */
+    private lastRenderedState;
+    private lastRenderedProps;
+    /**
+     * row id -> the states the row showed when it was built last: its own value and the status
+     * states of a device (online, offline, error). The subscriptions that are still needed are
+     * collected from the rows of the window (see `checkUnsubscribes`) - a row that is served from
+     * the memo is not built again, but its entry here is still valid
+     */
+    readonly rowStates: Record<string, Set<string>>;
+    /**
+     * state id -> the rows that show this state although it is not their own: a device shows the
+     * status of its `statusStates`. A change of such a state has to render those rows as well
+     */
+    private readonly stateDependents;
+    /**
+     * Rows that are rendered above and below the visible area, so that scrolling does not run into
+     * a gap before the next render
+     */
+    private static readonly OVERSCAN_ROWS;
+    /** Every row of the table in the order in which it is shown (see `flattenItems`) */
+    private flatRows;
+    /**
+     * Where every row of `flatRows` begins, in pixels. One entry longer than `flatRows`: the last
+     * one is the height of the whole table
+     */
+    private rowOffsets;
+    /** A row measured another height than `rowOffsets` expected: calculate them again */
+    private rowOffsetsInvalid;
+    /** id -> the height the row really had. Only rows that are not `ROW_HEIGHT` high end up here */
+    private readonly measuredHeights;
+    /** Scroll position and height of the table container, the two values the window is cut from */
+    private scrollTop;
+    private viewportHeight;
+    private scrollFrame;
+    /** First and last row of the last rendered window, to notice that scrolling moved it */
+    private windowFirst;
+    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>;
+    private stateVersionCounter;
     private selectFirst;
     /** Last navigation that was applied from `navigateTo` or reported via `onNavigateTo` (loop guard). */
     private lastNav;
@@ -105,7 +164,6 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
         item: any;
         ts: number;
     };
-    recordStates: Set<string>;
     styles: {
         cellIdIconFolder?: React.CSSProperties;
         cellIdIconDocument?: React.CSSProperties;
@@ -193,6 +251,13 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
      */
     renderColumnsSelectorDialog(): JSX.Element | null;
     private getAdditionalColumns;
+    /**
+     * Remember that a row shows a state. Called while the row is built (see `renderLeaf`)
+     *
+     * @param rowId the row
+     * @param stateId the state it shows: its own or one of its status states
+     */
+    recordState(rowId: string, stateId: string): void;
     private checkUnsubscribes;
     /**
      * Find an item.
@@ -301,8 +366,43 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     get width(): Width;
     /** Watch the width of the table container to detect the width class (see `width`) */
     observeContainerWidth(): void;
+    /** Store the height of the container: it decides how many rows the window holds */
+    setViewportHeight(viewportHeight: number): void;
     /** Store the width class of the container if it changed */
     setContainerWidth(containerWidth: number): void;
+    /**
+     * The height a row needs.
+     *
+     * A row with an alias is higher than the others, and what a row really measured beats the
+     * estimate - the table has to know the height of rows it does not render at the moment,
+     * otherwise the scrollbar does not fit the content.
+     */
+    private rowHeight;
+    /** All rows in the order in which they are shown, and where each of them begins */
+    private buildFlatRows;
+    /** Where every row begins - again after a row measured another height than was expected */
+    private calculateRowOffsets;
+    /** The row that covers this position (binary search over `rowOffsets`) */
+    private findRowAt;
+    /**
+     * The rows that are rendered: the visible ones plus `OVERSCAN_ROWS` above and below.
+     *
+     * A tree with a few thousand open rows costs a fifth of a second of blocked main thread for
+     * every change that concerns all rows - selecting a row, a filter, folding a node - because
+     * every row is built anew. Only the rows around the visible area are rendered now, so that
+     * work no longer grows with the size of the tree.
+     */
+    private getWindow;
+    /** The table was scrolled: move the window of rendered rows, at most once per frame */
+    private readonly onTableScroll;
+    /**
+     * Remember how high the rendered rows really are.
+     *
+     * Rows are not all `ROW_HEIGHT` high (an alias is higher, the focused row of the narrow view
+     * has no fixed height at all), and a row outside the window cannot be measured - so every row
+     * that was rendered once keeps its measured height for the calculation of the window.
+     */
+    private measureRenderedRows;
     /**
      * All column widths as CSS variables of the table container. The header and every row read the
      * widths from here (see `colWidth`), so they can never get out of sync, and the resizer can
@@ -343,6 +443,13 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
      * Called when component is updated.
      */
     componentDidUpdate(prevProps: ObjectBrowserProps): void;
+    /**
+     * Scrolls to a row.
+     *
+     * The row does not have to be rendered: only the rows around the visible area are (see
+     * `getWindow`), so the position is taken from the flat list of all rows and the row is brought
+     * into the middle of the table by scrolling there.
+     */
     scrollToItem(id: string): void;
     onUpdate(valAck: {
         val: ioBroker.StateValue;
@@ -353,6 +460,16 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     showAddDataPointDialog(id: string, initialType: ioBroker.ObjectType, initialStateType?: ioBroker.CommonType): void;
     /** Renders the aliases list for one state (if more than 2) */
     doFilter(doNotStore?: boolean): void;
+    /**
+     * Renders the browser and every row again: whoever calls it has changed something that is not
+     * visible in `state` or `props`, so the rows cannot keep their output
+     */
+    forceUpdate(callback?: () => void): void;
+    /**
+     * Renders the browser, but keeps the output of every row that did not change: a state changed
+     * (see `rowStateVersion`), the table was scrolled or a row measured another height
+     */
+    private updateRowsOnly;
     /**
      * The rendering method of this component.
      */

package/build/Components/ObjectBrowser/ObjectBrowserClass.js

@@ -17,7 +17,7 @@ import { Utils } from '../Utils'; // @iobroker/gui-components/Components/Utils
 import { TabContainer } from '../TabContainer';
 import { TabContent } from '../TabContent';
 import { TabHeader } from '../TabHeader';
-import { applyFilter, buildTree, findNode, formatValue, generateFile, getName, colVar, widthFromContainer, growVar, getSelectIdIconFromObjects, setCustomValue, } from './utils';
+import { ROW_HEIGHT, 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';
@@ -60,6 +60,65 @@ export class ObjectBrowserClass extends Component {
     treeRebuiltWhilePaused = false;
     /** Time of the first object change since the last tree rebuild (upper bound for the rebuild delay) */
     objectsUpdateFirstTs = 0;
+    /**
+     * Counts up on every render that can change ANY row - a new filter, other columns, another
+     * theme, a different selection, a rebuilt tree. A state change does NOT count it up: it only
+     * concerns the rows whose value changed. Together with `rowStateVersion` this is the memo key
+     * of a row (see `renderRow`), so a value that ticks every second no longer rebuilds the whole
+     * table.
+     *
+     * Whether a render concerns every row is decided in `render` and not by a flag that the caller
+     * sets: React may batch the render of a state change with a `setState` (a click) or with new
+     * props, and a flag would then keep every row as it was, although the selection has changed.
+     */
+    renderEpoch = 0;
+    /**
+     * Set by every `forceUpdate()`: something changed that is not visible in `state` or `props` (a
+     * rebuilt tree, other column widths), so every row has to be built again. Only
+     * `updateRowsOnly` renders without it
+     */
+    rowsInvalid = true;
+    /** `state` and `props` of the last render: a render with the same two cannot concern every row */
+    lastRenderedState = null;
+    lastRenderedProps = null;
+    /**
+     * row id -> the states the row showed when it was built last: its own value and the status
+     * states of a device (online, offline, error). The subscriptions that are still needed are
+     * collected from the rows of the window (see `checkUnsubscribes`) - a row that is served from
+     * the memo is not built again, but its entry here is still valid
+     */
+    rowStates = {};
+    /**
+     * state id -> the rows that show this state although it is not their own: a device shows the
+     * status of its `statusStates`. A change of such a state has to render those rows as well
+     */
+    stateDependents = {};
+    /**
+     * Rows that are rendered above and below the visible area, so that scrolling does not run into
+     * a gap before the next render
+     */
+    static OVERSCAN_ROWS = 12;
+    /** Every row of the table in the order in which it is shown (see `flattenItems`) */
+    flatRows = [];
+    /**
+     * Where every row of `flatRows` begins, in pixels. One entry longer than `flatRows`: the last
+     * one is the height of the whole table
+     */
+    rowOffsets = [0];
+    /** A row measured another height than `rowOffsets` expected: calculate them again */
+    rowOffsetsInvalid = false;
+    /** id -> the height the row really had. Only rows that are not `ROW_HEIGHT` high end up here */
+    measuredHeights = {};
+    /** Scroll position and height of the table container, the two values the window is cut from */
+    scrollTop = 0;
+    viewportHeight = 0;
+    scrollFrame = null;
+    /** First and last row of the last rendered window, to notice that scrolling moved it */
+    windowFirst = 0;
+    windowLast = 0;
+    /** id -> how often the state of this row has changed. Part of the memo key of the row */
+    rowStateVersion = {};
+    stateVersionCounter = 0;
     selectFirst;
     /** Last navigation that was applied from `navigateTo` or reported via `onNavigateTo` (loop guard). */
     lastNav = null;
@@ -110,7 +169,6 @@ export class ObjectBrowserClass extends Component {
     columnsVisibility = {};
     changedIds = null;
     contextMenu = null;
-    recordStates = new Set();
     styles = {};
     expertMode = false;
     customColumnDialog = null;
@@ -664,6 +722,7 @@ export class ObjectBrowserClass extends Component {
         window.addEventListener('keydown', this.onKeyPress, true);
         window.addEventListener('keyup', this.onKeyPress, true);
         this.observeContainerWidth();
+        this.measureRenderedRows();
         // Inform dialog that all objects are loaded
         if (this.props.onAllLoaded) {
             setTimeout(() => {
@@ -695,6 +754,10 @@ export class ObjectBrowserClass extends Component {
         this.resizeObserver?.disconnect();
         this.resizeObserver = null;
         this.observedContainer = null;
+        if (this.scrollFrame !== null) {
+            window.cancelAnimationFrame(this.scrollFrame);
+            this.scrollFrame = null;
+        }
         // the timers must not fire after the component was destroyed
         if (this.unsubscribeTimer) {
             clearTimeout(this.unsubscribeTimer);
@@ -868,14 +931,33 @@ export class ObjectBrowserClass extends Component {
             return null;
         }
     }
+    /**
+     * Remember that a row shows a state. Called while the row is built (see `renderLeaf`)
+     *
+     * @param rowId the row
+     * @param stateId the state it shows: its own or one of its status states
+     */
+    recordState(rowId, stateId) {
+        (this.rowStates[rowId] ||= new Set()).add(stateId);
+        if (stateId !== rowId) {
+            (this.stateDependents[stateId] ||= new Set()).add(rowId);
+        }
+    }
     checkUnsubscribes() {
+        // Only the states of the rows in the window are needed. Rows that scrolled away are not
+        // rendered anymore, so their states are unsubscribed as well
+        const needed = new Set();
+        for (let i = this.windowFirst; i < this.windowLast; i++) {
+            const rowId = this.flatRows[i]?.item.data.id;
+            this.rowStates[rowId]?.forEach(id => needed.add(id));
+        }
         // Remove unused subscriptions
         for (const id of [...this.subscribes]) {
-            if (!this.recordStates.has(id)) {
+            if (!needed.has(id)) {
                 this.unsubscribe(id);
+                delete this.stateDependents[id];
             }
         }
-        this.recordStates.clear();
     }
     /**
      * Find an item.
@@ -933,11 +1015,15 @@ export class ObjectBrowserClass extends Component {
         else {
             delete this.states[id];
         }
+        // only this row has to be rendered again - and the rows that show this state as their status
+        const version = ++this.stateVersionCounter;
+        this.rowStateVersion[id] = version;
+        this.stateDependents[id]?.forEach(rowId => (this.rowStateVersion[rowId] = version));
         if (!this.pausedSubscribes) {
             if (!this.statesUpdateTimer) {
                 this.statesUpdateTimer = setTimeout(() => {
                     this.statesUpdateTimer = null;
-                    this.forceUpdate();
+                    this.updateRowsOnly();
                 }, 300);
             }
         }
@@ -2023,11 +2109,27 @@ export class ObjectBrowserClass extends Component {
         }
         this.resizeObserver?.disconnect();
         this.observedContainer = container;
-        this.resizeObserver = new ResizeObserver(entries => this.setContainerWidth(entries[0].contentRect.width));
+        this.resizeObserver = new ResizeObserver(entries => {
+            // the height decides how many rows are rendered (see `getWindow`)
+            this.setViewportHeight(entries[0].contentRect.height);
+            this.setContainerWidth(entries[0].contentRect.width);
+        });
         this.resizeObserver.observe(container);
         // measure immediately, so the first render after mounting shows the right columns
+        this.setViewportHeight(container.clientHeight);
         this.setContainerWidth(container.clientWidth);
     }
+    /** Store the height of the container: it decides how many rows the window holds */
+    setViewportHeight(viewportHeight) {
+        if (Math.abs(this.viewportHeight - viewportHeight) < 1) {
+            return;
+        }
+        this.viewportHeight = viewportHeight;
+        const { first, last } = this.getWindow();
+        if (first !== this.windowFirst || last !== this.windowLast) {
+            this.updateRowsOnly();
+        }
+    }
     /** Store the width class of the container if it changed */
     setContainerWidth(containerWidth) {
         const width = widthFromContainer(containerWidth, this.props.theme);
@@ -2036,6 +2138,139 @@ export class ObjectBrowserClass extends Component {
             this.setState({ containerWidth: width });
         }
     }
+    /**
+     * The height a row needs.
+     *
+     * A row with an alias is higher than the others, and what a row really measured beats the
+     * estimate - the table has to know the height of rows it does not render at the moment,
+     * otherwise the scrollbar does not fit the content.
+     */
+    rowHeight(item) {
+        const id = item.data.id;
+        // the root itself has no row, only its children have one
+        if (!id) {
+            return 0;
+        }
+        const measured = this.measuredHeights[id];
+        if (measured) {
+            return measured;
+        }
+        const common = this.objects[id]?.common;
+        if (id.startsWith('alias.') && common?.alias?.id) {
+            // see `tableRowAlias` and `tableRowAliasReadWrite` in styles.ts
+            return typeof common.alias.id === 'object' ? ROW_HEIGHT + 22 : ROW_HEIGHT + 10;
+        }
+        return ROW_HEIGHT;
+    }
+    /** All rows in the order in which they are shown, and where each of them begins */
+    buildFlatRows() {
+        this.flatRows = this.root ? leaf.flattenItems(this, this.root) : [];
+        this.calculateRowOffsets();
+    }
+    /** Where every row begins - again after a row measured another height than was expected */
+    calculateRowOffsets() {
+        this.rowOffsetsInvalid = false;
+        const offsets = new Array(this.flatRows.length + 1);
+        offsets[0] = 0;
+        for (let i = 0; i < this.flatRows.length; i++) {
+            offsets[i + 1] = offsets[i] + this.rowHeight(this.flatRows[i].item);
+        }
+        this.rowOffsets = offsets;
+    }
+    /** The row that covers this position (binary search over `rowOffsets`) */
+    findRowAt(position) {
+        let low = 0;
+        let high = this.flatRows.length - 1;
+        while (low < high) {
+            const middle = (low + high + 1) >> 1;
+            if (this.rowOffsets[middle] <= position) {
+                low = middle;
+            }
+            else {
+                high = middle - 1;
+            }
+        }
+        return low;
+    }
+    /**
+     * The rows that are rendered: the visible ones plus `OVERSCAN_ROWS` above and below.
+     *
+     * A tree with a few thousand open rows costs a fifth of a second of blocked main thread for
+     * every change that concerns all rows - selecting a row, a filter, folding a node - because
+     * every row is built anew. Only the rows around the visible area are rendered now, so that
+     * work no longer grows with the size of the tree.
+     */
+    getWindow() {
+        const count = this.flatRows.length;
+        if (!count) {
+            return { first: 0, last: 0 };
+        }
+        // until the container was measured (the very first render) render a screen full of rows
+        const height = this.viewportHeight || 1_000;
+        const first = Math.max(0, this.findRowAt(this.scrollTop) - ObjectBrowserClass.OVERSCAN_ROWS);
+        const last = Math.min(count, this.findRowAt(this.scrollTop + height) + 1 + ObjectBrowserClass.OVERSCAN_ROWS);
+        return { first, last };
+    }
+    /** The table was scrolled: move the window of rendered rows, at most once per frame */
+    onTableScroll = () => {
+        if (this.scrollFrame !== null) {
+            return;
+        }
+        this.scrollFrame = window.requestAnimationFrame(() => {
+            this.scrollFrame = null;
+            const container = this.tableRef.current;
+            if (!container) {
+                return;
+            }
+            this.scrollTop = container.scrollTop;
+            const { first, last } = this.getWindow();
+            if (first !== this.windowFirst || last !== this.windowLast) {
+                // scrolling changes no row, so the rows that stay in the window keep their output
+                this.updateRowsOnly();
+            }
+        });
+    };
+    /**
+     * Remember how high the rendered rows really are.
+     *
+     * Rows are not all `ROW_HEIGHT` high (an alias is higher, the focused row of the narrow view
+     * has no fixed height at all), and a row outside the window cannot be measured - so every row
+     * that was rendered once keeps its measured height for the calculation of the window.
+     */
+    measureRenderedRows() {
+        const container = this.tableRef.current;
+        if (!container) {
+            return;
+        }
+        const heights = {};
+        for (const child of Array.from(container.children)) {
+            // the details panel of the narrow view follows its row and belongs to its height
+            const detailsOf = child.dataset.detailsOf;
+            if (detailsOf) {
+                if (heights[detailsOf]) {
+                    heights[detailsOf] += child.offsetHeight;
+                }
+                continue;
+            }
+            // with drag and drop enabled the row sits inside a wrapper
+            const row = (child.id ? child : child.firstElementChild);
+            if (row?.id && row.offsetHeight) {
+                heights[row.id] = row.offsetHeight;
+            }
+        }
+        let changed = false;
+        for (const id of Object.keys(heights)) {
+            if (Math.abs((this.measuredHeights[id] || ROW_HEIGHT) - heights[id]) > 0.5) {
+                this.measuredHeights[id] = heights[id];
+                changed = true;
+            }
+        }
+        if (changed) {
+            // the rows kept their content, only the calculated positions move
+            this.rowOffsetsInvalid = true;
+            this.updateRowsOnly();
+        }
+    }
     /**
      * All column widths as CSS variables of the table container. The header and every row read the
      * widths from here (see `colWidth`), so they can never get out of sync, and the resizer can
@@ -2162,14 +2397,8 @@ export class ObjectBrowserClass extends Component {
         }
         if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {
             event.preventDefault();
-            const ids = [];
-            // the first child is the header, it has no ID
-            this.tableRef.current?.childNodes.forEach((node) => {
-                const nodeId = node.id;
-                if (nodeId) {
-                    ids.push(nodeId);
-                }
-            });
+            // every row of the table, not only the rendered ones (see `getWindow`)
+            const ids = this.flatRows.map(row => row.item.data.id).filter(id => !!id);
             const idx = ids.indexOf(selectedId);
             const newIdx = event.code === 'ArrowDown' ? idx + 1 : idx - 1;
             const newId = ids[newIdx] || selectedId;
@@ -2342,19 +2571,38 @@ export class ObjectBrowserClass extends Component {
     componentDidUpdate(prevProps) {
         // the table is rendered only after the objects are loaded
         this.observeContainerWidth();
+        this.measureRenderedRows();
         if (this.tableRef.current && this.selectFirst) {
             this.scrollToItem(this.selectFirst);
         }
         this.reconcileNavigation(prevProps);
     }
+    /**
+     * Scrolls to a row.
+     *
+     * The row does not have to be rendered: only the rows around the visible area are (see
+     * `getWindow`), so the position is taken from the flat list of all rows and the row is brought
+     * into the middle of the table by scrolling there.
+     */
     scrollToItem(id) {
         this.selectFirst = '';
         const node = window.document.getElementById(id);
-        node?.scrollIntoView({
-            behavior: 'auto',
-            block: 'center',
-            inline: 'center',
-        });
+        if (node) {
+            node.scrollIntoView({
+                behavior: 'auto',
+                block: 'center',
+                inline: 'center',
+            });
+            return;
+        }
+        const container = this.tableRef.current;
+        const index = this.flatRows.findIndex(row => row.item.data.id === id);
+        if (!container || index === -1) {
+            return;
+        }
+        const middle = this.rowOffsets[index] - Math.max(0, (this.viewportHeight - ROW_HEIGHT) / 2);
+        container.scrollTop = Math.max(0, middle);
+        // the scroll event moves the window, and the row is rendered with the next frame
     }
     onUpdate(valAck) {
         this.props.socket
@@ -2396,11 +2644,35 @@ export class ObjectBrowserClass extends Component {
             this.forceUpdate();
         }
     }
+    /**
+     * Renders the browser and every row again: whoever calls it has changed something that is not
+     * visible in `state` or `props`, so the rows cannot keep their output
+     */
+    forceUpdate(callback) {
+        this.rowsInvalid = true;
+        super.forceUpdate(callback);
+    }
+    /**
+     * Renders the browser, but keeps the output of every row that did not change: a state changed
+     * (see `rowStateVersion`), the table was scrolled or a row measured another height
+     */
+    updateRowsOnly() {
+        super.forceUpdate();
+    }
     /**
      * The rendering method of this component.
      */
     render() {
-        this.recordStates.clear();
+        // Every row is built again, if anything changed that concerns all of them: `state`, `props`
+        // or whatever a `forceUpdate()` stands for. Otherwise the render only moved the window or
+        // showed new values, and the rows keep their output (see `renderRow`)
+        const fullRender = this.rowsInvalid || this.state !== this.lastRenderedState || this.props !== this.lastRenderedProps;
+        this.rowsInvalid = false;
+        this.lastRenderedState = this.state;
+        this.lastRenderedProps = this.props;
+        if (fullRender) {
+            this.renderEpoch++;
+        }
         if (this.unsubscribeTimer) {
             clearTimeout(this.unsubscribeTimer);
         }
@@ -2449,7 +2721,24 @@ export class ObjectBrowserClass extends Component {
             this.applyStoredWidths();
             this.calculateColumnsVisibility();
         }
-        const items = this.root ? this.renderItem(this.root, undefined) : null;
+        // Only the rows around the visible area are rendered - see `getWindow`. The rows that are
+        // not rendered are replaced by two spacers, so the scrollbar keeps the size of the table
+        if (fullRender || !this.flatRows.length) {
+            // a state change cannot add or remove a row, and scrolling does not either
+            this.buildFlatRows();
+        }
+        else if (this.rowOffsetsInvalid) {
+            this.calculateRowOffsets();
+        }
+        const { first, last } = this.getWindow();
+        this.windowFirst = first;
+        this.windowLast = last;
+        const items = [];
+        for (let i = first; i < last; i++) {
+            items.push(leaf.renderRow(this, this.flatRows[i].item, this.flatRows[i].isExpanded));
+        }
+        const spaceAbove = this.rowOffsets[first];
+        const spaceBelow = this.rowOffsets[this.flatRows.length] - this.rowOffsets[last];
         return (React.createElement(TabContainer, { key: this.props.dialogName, styles: { root: this.props.style } },
             React.createElement("style", null, `
 @keyframes newValueAnimation-light {
@@ -2487,9 +2776,11 @@ export class ObjectBrowserClass extends Component {
 `),
             React.createElement(TabHeader, null, this.getToolbar()),
             React.createElement(TabContent, null,
-                React.createElement(Box, { style: { ...styles.tableDiv, ...this.getColumnWidthVariables() }, ref: this.tableRef, onKeyDown: event => this.navigateKeyPress(event) },
+                React.createElement(Box, { style: { ...styles.tableDiv, ...this.getColumnWidthVariables() }, ref: this.tableRef, onKeyDown: event => this.navigateKeyPress(event), onScroll: this.onTableScroll },
                     toolbar.renderHeader(this),
-                    items)),
+                    spaceAbove ? React.createElement("div", { style: { height: spaceAbove } }) : null,
+                    items,
+                    spaceBelow ? React.createElement("div", { style: { height: spaceBelow } }) : null)),
             contextMenu.renderContextMenu(this),
             dialogs.renderAliasMenu(this),
             dialogs.renderToast(this),