@iobroker/gui-components 10.1.0 → 10.2.0

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.1.0",
+        "@iobroker/gui-components": "^10.2.0",
         "@mui/icons-material": "^9.0.1",
         "@mui/material": "^9.0.1",
         "react": "^19.2.5",
@@ -799,6 +799,11 @@ shared is delivered with this package:
 const { moduleFederationShared } = require('@iobroker/gui-components/modulefederation.admin.config');
 ```
 
+Custom components of the JSON config must additionally be built with `manifest: true` and ship the
+generated `mf-manifest.json` next to `customComponents.js`, as the admin reads from it against which
+component library the build was made. See
+[the migration instructions](MIGRATION_8_10.md#6-custom-admin-components) for the details.
+
 ## Test GUI
 
 The `test-gui` directory contains a vite application to develop and test the components visually.
@@ -872,6 +877,12 @@ You can find the migration instructions:
 -->
 
 ## Changelog
+### 10.2.0 (2026-08-26)
+
+- (@krobipd) Corrected: the object browser stayed empty after closing the object customization dialog if any object was changed while the dialog was open (ioBroker/ioBroker.admin#3391)
+- (@krobipd) Changed: `ObjectBrowserClass.subscribes` and `.recordStates` are `Set`s instead of arrays now
+- (@krobipd) Improved: object browser performance on large installations — bursts of object changes cause one tree rebuild instead of several, state-change echoes no longer trigger redraws, subscription bookkeeping is no longer quadratic, and rows outside the viewport skip layout and paint
+
 ### 10.1.0 (2026-08-13)
 
 - (@GermanBluefox) Updated `@iobroker/type-detector` to 6.0.0

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

@@ -33,6 +33,10 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     /** Width class for which the columns were calculated the last time */
     private lastCalculatedWidth;
     private pausedSubscribes;
+    /** The tree was rebuilt while subscribes were paused, so the filter must be re-applied on resume */
+    private treeRebuiltWhilePaused;
+    /** Time of the first object change since the last tree rebuild (upper bound for the rebuild delay) */
+    private objectsUpdateFirstTs;
     private selectFirst;
     /** Last navigation that was applied from `navigateTo` or reported via `onNavigateTo` (loop guard). */
     private lastNav;
@@ -40,7 +44,7 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     private applyingNav;
     root: TreeItem | null;
     readonly states: Record<string, ioBroker.State>;
-    subscribes: string[];
+    subscribes: Set<string>;
     private unsubscribeTimer;
     private statesUpdateTimer;
     private objectsUpdateTimer;
@@ -94,7 +98,7 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
         item: any;
         ts: number;
     };
-    recordStates: string[];
+    recordStates: Set<string>;
     styles: {
         cellIdIconFolder?: React.CSSProperties;
         cellIdIconDocument?: React.CSSProperties;

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, binarySearch, buildTree, findNode, formatValue, generateFile, getName, colVar, widthFromContainer, growVar, getSelectIdIconFromObjects, setCustomValue, } from './utils';
+import { 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';
@@ -54,6 +54,10 @@ export class ObjectBrowserClass extends Component {
     /** Width class for which the columns were calculated the last time */
     lastCalculatedWidth = null;
     pausedSubscribes = false;
+    /** The tree was rebuilt while subscribes were paused, so the filter must be re-applied on resume */
+    treeRebuiltWhilePaused = false;
+    /** Time of the first object change since the last tree rebuild (upper bound for the rebuild delay) */
+    objectsUpdateFirstTs = 0;
     selectFirst;
     /** Last navigation that was applied from `navigateTo` or reported via `onNavigateTo` (loop guard). */
     lastNav = null;
@@ -61,7 +65,7 @@ export class ObjectBrowserClass extends Component {
     applyingNav = false;
     root = null;
     states = {};
-    subscribes = [];
+    subscribes = new Set();
     unsubscribeTimer = null;
     statesUpdateTimer = null;
     objectsUpdateTimer = null;
@@ -99,7 +103,7 @@ export class ObjectBrowserClass extends Component {
     columnsVisibility = {};
     changedIds = null;
     contextMenu = null;
-    recordStates = [];
+    recordStates = new Set();
     styles = {};
     expertMode = false;
     customColumnDialog = null;
@@ -688,7 +692,7 @@ export class ObjectBrowserClass extends Component {
             // console.log(`- unsubscribe ${pattern}`);
             this.props.socket.unsubscribeState(pattern, this.onStateChange);
         });
-        this.subscribes = [];
+        this.subscribes.clear();
         this.objects = {};
     }
     /**
@@ -740,7 +744,7 @@ export class ObjectBrowserClass extends Component {
             // console.log(`- unsubscribe ${pattern}`);
             this.props.socket.unsubscribeState(pattern, this.onStateChange);
         });
-        this.subscribes = [];
+        this.subscribes.clear();
         this.loadAllObjects(true)
             .then(() => console.log('updated!'))
             .catch(e => this.showError(e));
@@ -837,12 +841,12 @@ export class ObjectBrowserClass extends Component {
     }
     checkUnsubscribes() {
         // Remove unused subscriptions
-        for (let i = this.subscribes.length - 1; i >= 0; i--) {
-            if (!this.recordStates.includes(this.subscribes[i])) {
-                this.unsubscribe(this.subscribes[i]);
+        for (const id of [...this.subscribes]) {
+            if (!this.recordStates.has(id)) {
+                this.unsubscribe(id);
             }
         }
-        this.recordStates = [];
+        this.recordStates.clear();
     }
     /**
      * Find an item.
@@ -875,6 +879,19 @@ export class ObjectBrowserClass extends Component {
      */
     onStateChange = (id, state) => {
         // console.log(`> stateChange ${id}`);
+        const oldState = this.states[id];
+        if (state &&
+            oldState &&
+            state.val === oldState.val &&
+            state.ack === oldState.ack &&
+            state.q === oldState.q &&
+            state.ts === oldState.ts &&
+            state.lc === oldState.lc &&
+            state.from === oldState.from) {
+            // echo of the already known state: nothing that is displayed can have changed
+            // (`from` is compared too, because it is shown in the `changedFrom` column)
+            return;
+        }
         if (this.states[id]) {
             const item = this.findItem(id);
             if (item?.data.state) {
@@ -995,23 +1012,38 @@ export class ObjectBrowserClass extends Component {
         this.afterObjectUpdated();
     };
     afterObjectUpdated() {
-        if (!this.objectsUpdateTimer && this.objects) {
-            this.objectsUpdateTimer = setTimeout(() => {
-                this.objectsUpdateTimer = null;
-                const { info, root } = buildTree(this.objects, {
-                    imagePrefix: this.props.imagePrefix,
-                    root: this.props.root,
-                    lang: this.props.lang,
-                    themeType: this.props.themeType,
-                });
-                this.root = root;
-                this.info = info;
-                if (!this.pausedSubscribes) {
-                    this.doFilter();
-                }
-                // else it will be re-rendered when the dialog will be closed
-            }, 500);
+        if (!this.objects) {
+            return;
+        }
+        if (this.objectsUpdateTimer) {
+            // collect a burst of object changes into one rebuild: wait for a quiet period,
+            // but do not postpone the rebuild forever while changes keep arriving
+            if (Date.now() - this.objectsUpdateFirstTs >= 2000) {
+                return;
+            }
+            clearTimeout(this.objectsUpdateTimer);
+        }
+        else {
+            this.objectsUpdateFirstTs = Date.now();
         }
+        this.objectsUpdateTimer = setTimeout(() => {
+            this.objectsUpdateTimer = null;
+            const { info, root } = buildTree(this.objects, {
+                imagePrefix: this.props.imagePrefix,
+                root: this.props.root,
+                lang: this.props.lang,
+                themeType: this.props.themeType,
+            });
+            this.root = root;
+            this.info = info;
+            if (!this.pausedSubscribes) {
+                this.doFilter(true);
+            }
+            else {
+                // the new tree has no visibility flags yet; re-apply the filter when the dialog is closed
+                this.treeRebuiltWhilePaused = true;
+            }
+        }, 500);
     }
     // This function is called when the user changes the alias of an object.
     // It updates the aliasMap and returns true if the aliasMap has changed.
@@ -1097,8 +1129,8 @@ export class ObjectBrowserClass extends Component {
         return { newInnerState, filtered: false };
     }
     subscribe(id) {
-        if (!this.subscribes.includes(id)) {
-            this.subscribes.push(id);
+        if (!this.subscribes.has(id)) {
+            this.subscribes.add(id);
             // console.log(`+ subscribe ${id}`);
             if (!this.pausedSubscribes) {
                 this.props.socket
@@ -1108,9 +1140,8 @@ export class ObjectBrowserClass extends Component {
         }
     }
     unsubscribe(id) {
-        const pos = this.subscribes.indexOf(id);
-        if (pos !== -1) {
-            this.subscribes.splice(pos, 1);
+        if (this.subscribes.has(id)) {
+            this.subscribes.delete(id);
             if (this.states[id]) {
                 delete this.states[id];
             }
@@ -1129,6 +1160,11 @@ export class ObjectBrowserClass extends Component {
         else if (this.pausedSubscribes && !isPause) {
             this.pausedSubscribes = false;
             this.subscribes.forEach(id => this.props.socket.subscribeState(id, this.onStateChange));
+            if (this.treeRebuiltWhilePaused) {
+                // without this filter run, no node of the rebuilt tree is marked visible and the browser stays empty
+                this.treeRebuiltWhilePaused = false;
+                this.doFilter(true);
+            }
         }
     }
     clearFilter() {
@@ -1168,20 +1204,21 @@ export class ObjectBrowserClass extends Component {
         this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectSelected`, '[]');
         this.setState({ expanded: [], depth: 0, selected: [] }, () => this.onAfterSelect());
     }
-    expandDepth(root, depth, expanded) {
+    expandDepth(root, depth, expanded, expandedSet) {
         if (!this.root) {
             throw new Error('No root');
         }
         root ||= this.root;
+        expandedSet ||= new Set(expanded);
         if (depth > 0) {
             root.children?.forEach(item => {
                 if (item.data.sumVisibility) {
-                    if (!binarySearch(expanded, item.data.id)) {
+                    if (!expandedSet.has(item.data.id)) {
                         expanded.push(item.data.id);
-                        expanded.sort();
+                        expandedSet.add(item.data.id);
                     }
                     if (depth - 1 > 0) {
-                        this.expandDepth(item, depth - 1, expanded);
+                        this.expandDepth(item, depth - 1, expanded, expandedSet);
                     }
                 }
             });
@@ -1196,6 +1233,7 @@ export class ObjectBrowserClass extends Component {
             const expanded = [...this.state.expanded];
             if (this.root) {
                 this.expandDepth(this.root, depth, expanded);
+                expanded.sort();
             }
             this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectExpanded`, JSON.stringify(expanded));
             this.setState({ depth, expanded });
@@ -2303,7 +2341,7 @@ export class ObjectBrowserClass extends Component {
      * The rendering method of this component.
      */
     render() {
-        this.recordStates = [];
+        this.recordStates.clear();
         if (this.unsubscribeTimer) {
             clearTimeout(this.unsubscribeTimer);
         }