@iobroker/gui-components 10.3.2 → 10.3.4

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

@@ -27,15 +27,47 @@ export declare function renderAliasLink(that: ObjectBrowserClass, id: string, in
 /**
  * Renders a leaf.
  */
-export declare function renderLeaf(that: ObjectBrowserClass, item: TreeItem, isExpanded: boolean | undefined, counter: {
+export declare function renderLeaf(that: ObjectBrowserClass, item: TreeItem, isExpanded: boolean | undefined, 
+/**
+ * Kept for the public `ObjectBrowserClass.renderLeaf`. `renderItem` counts the items now, so
+ * that a row which is served from the memo is counted as well
+ */
+_counter?: {
     count: number;
 }): {
     row: JSX.Element;
     details: JSX.Element | null;
 };
 /**
- * Renders an item.
+ * Renders ONE row - without its children.
+ *
+ * The table renders only the rows around the visible area (see `ObjectBrowserClass.getWindow`), so
+ * the row of an item is built on its own and not as a part of the recursion over the tree.
+ */
+export declare function renderRow(that: ObjectBrowserClass, root: TreeItem, isExpanded: boolean | undefined): JSX.Element;
+/**
+ * Renders an item and all its expanded children.
+ *
+ * Kept for the public `ObjectBrowserClass.renderLeaf`. The table itself walks the flat list of
+ * `flattenItems` and renders only the rows of the window.
  */
 export declare function renderItem(that: ObjectBrowserClass, root: TreeItem, isExpanded: boolean | undefined, counter?: {
     count: number;
 }): (JSX.Element | null)[];
+/** One row of the table, in the order in which the table shows it */
+export interface FlatItem {
+    item: TreeItem;
+    /** An open folder looks different from a closed one, and only an open one shows its children */
+    isExpanded: boolean;
+}
+/**
+ * Walks the tree in EXACTLY the order in which `renderItem` renders it and returns the rows as one
+ * flat list.
+ *
+ * The table needs that list to render only the rows around the visible area and to know where a row
+ * that is not rendered at the moment would be - `scrollToItem` and the keyboard navigation used to
+ * read that from the DOM. Every change of the order in `renderItem` belongs here as well.
+ */
+export declare function flattenItems(that: ObjectBrowserClass, root: TreeItem, result?: FlatItem[], counter?: {
+    count: number;
+}): FlatItem[];

package/build/Components/ObjectBrowser/renderLeaf.js

@@ -196,13 +196,13 @@ export function renderColumnValue(that, id, item, narrowStyleWithDetails) {
     if (!that.states[id]) {
         if (obj.type === 'state') {
             // we are waiting for state
-            that.recordStates.add(id);
+            that.recordState(id, id);
             that.states[id] = { val: null };
             that.subscribe(id);
         }
         return null;
     }
-    that.recordStates.add(id);
+    that.recordState(id, id);
     const state = that.states[id];
     let info = item.data.state;
     if (!info) {
@@ -330,10 +330,16 @@ export function renderAliasLink(that, id, index, customStyle) {
 /**
  * Renders a leaf.
  */
-export function renderLeaf(that, item, isExpanded, counter) {
+export function renderLeaf(that, item, isExpanded, 
+/**
+ * Kept for the public `ObjectBrowserClass.renderLeaf`. `renderItem` counts the items now, so
+ * that a row which is served from the memo is counted as well
+ */
+_counter) {
     const id = item.data.id;
-    counter.count++;
     isExpanded = isExpanded === undefined ? that.state.expanded.includes(id) : isExpanded;
+    // the row records the states it shows anew (see `ObjectBrowserClass.recordState`)
+    delete that.rowStates[id];
     // icon
     let iconFolder;
     const obj = item.data.obj;
@@ -519,13 +525,13 @@ export function renderLeaf(that, item, isExpanded, counter) {
             ids[name] = _id;
             if (!that.states[_id]) {
                 if (that.objects[_id]?.type === 'state') {
-                    that.recordStates.add(_id);
+                    that.recordState(id, _id);
                     that.states[_id] = { val: null };
                     that.subscribe(_id);
                 }
             }
             else {
-                that.recordStates.add(_id);
+                that.recordState(id, _id);
             }
         });
         // calculate color
@@ -935,7 +941,7 @@ export function renderLeaf(that, item, isExpanded, counter) {
         // `renderItem` pushes this panel into the array of rows, so it needs its own key
         , { 
             // `renderItem` pushes this panel into the array of rows, so it needs its own key
-            key: `details_${id}`, elevation: 0, sx: styles.cellDetails },
+            key: `details_${id}`, "data-details-of": id, elevation: 0, sx: styles.cellDetails },
             React.createElement("div", { style: {
                     ...styles.cellDetailsHeader,
                     ...(hasLines ? styles.cellDetailsHeaderWithLines : undefined),
@@ -1035,32 +1041,64 @@ export function renderLeaf(that, item, isExpanded, counter) {
     return { row, details: colDetails };
 }
 /**
- * Renders an item.
+ * One row of the table.
+ *
+ * Building a row is expensive: it assembles up to a dozen cells and merges its styles for every
+ * one of them (`Utils.getStyle` returns a fresh object each time, which the style engine has to
+ * serialize anew). Until now a single state change rebuilt EVERY open row, because the browser
+ * answers a value with `forceUpdate()` on the whole table - with a few hundred rows open that
+ * blocked the main thread for a fifth of a second per value, and on an installation whose adapters
+ * report all the time the table never stood still.
+ *
+ * The memo keeps the row as it is unless one of the states it shows changed or something happened
+ * that concerns every row (filter, columns, theme, selection, a rebuilt tree - all of which count up
+ * the epoch).
  */
-export function renderItem(that, root, isExpanded, counter) {
-    const items = [];
-    counter = counter || { count: 0 };
-    const result = renderLeaf(that, root, isExpanded, counter);
-    let leaf;
+const ObjectBrowserRow = React.memo(function ObjectBrowserRow(props) {
+    return props.build();
+}, (prev, next) => prev.epoch === next.epoch && prev.stateVersion === next.stateVersion && prev.isExpanded === next.isExpanded);
+/**
+ * Renders ONE row - without its children.
+ *
+ * The table renders only the rows around the visible area (see `ObjectBrowserClass.getWindow`), so
+ * the row of an item is built on its own and not as a part of the recursion over the tree.
+ */
+export function renderRow(that, root, isExpanded) {
+    const id = root.data.id;
     const DragWrapper = that.props.DragWrapper;
-    if (that.props.dragEnabled && DragWrapper) {
-        if (root.data.sumVisibility) {
-            leaf = (React.createElement(DragWrapper, { key: root.data.id, item: root, style: styles.draggable }, result.row));
+    // Everything the row needs is built inside the memo: it does not run while the row is reused
+    const build = () => {
+        const result = renderLeaf(that, root, isExpanded);
+        let leaf;
+        if (that.props.dragEnabled && DragWrapper) {
+            if (root.data.sumVisibility) {
+                leaf = (React.createElement(DragWrapper, { key: id, item: root, style: styles.draggable }, result.row));
+            }
+            else {
+                // change cursor
+                leaf = (React.createElement("div", { key: id, style: styles.nonDraggable }, result.row));
+            }
         }
         else {
-            // change cursor
-            leaf = (React.createElement("div", { key: root.data.id, style: styles.nonDraggable }, result.row));
+            leaf = result.row;
         }
-    }
-    else {
-        leaf = result.row;
-    }
-    if (root.data.id && leaf) {
-        items.push(leaf);
-    }
-    if (result.details) {
-        items.push(result.details);
-    }
+        return (React.createElement(React.Fragment, null,
+            id ? leaf : null,
+            result.details));
+    };
+    return (React.createElement(ObjectBrowserRow, { key: id || '__root__', build: build, epoch: that.renderEpoch, stateVersion: that.rowStateVersion[id] || 0, isExpanded: isExpanded === undefined ? binarySearch(that.state.expanded, id) : isExpanded }));
+}
+/**
+ * Renders an item and all its expanded children.
+ *
+ * Kept for the public `ObjectBrowserClass.renderLeaf`. The table itself walks the flat list of
+ * `flattenItems` and renders only the rows of the window.
+ */
+export function renderItem(that, root, isExpanded, counter) {
+    const items = [];
+    counter = counter || { count: 0 };
+    counter.count++;
+    items.push(renderRow(that, root, isExpanded));
     isExpanded = isExpanded === undefined ? binarySearch(that.state.expanded, root.data.id) : isExpanded;
     if (!root.data.id || isExpanded) {
         if (!that.state.foldersFirst) {
@@ -1105,4 +1143,45 @@ export function renderItem(that, root, isExpanded, counter) {
     }
     return items;
 }
+/**
+ * Walks the tree in EXACTLY the order in which `renderItem` renders it and returns the rows as one
+ * flat list.
+ *
+ * The table needs that list to render only the rows around the visible area and to know where a row
+ * that is not rendered at the moment would be - `scrollToItem` and the keyboard navigation used to
+ * read that from the DOM. Every change of the order in `renderItem` belongs here as well.
+ */
+export function flattenItems(that, root, result, counter) {
+    result = result || [];
+    counter = counter || { count: 0 };
+    counter.count++;
+    const isExpanded = binarySearch(that.state.expanded, root.data.id);
+    result.push({ item: root, isExpanded });
+    if ((!root.data.id || isExpanded) && root.children) {
+        // do not render too many items in column editor mode
+        const allowed = (item) => (!that.state.columnsSelectorShow || counter.count < 15) && !!item.data.sumVisibility;
+        if (!that.state.foldersFirst) {
+            for (const item of root.children) {
+                if (allowed(item)) {
+                    flattenItems(that, item, result, counter);
+                }
+            }
+        }
+        else {
+            // first only folders
+            for (const item of root.children) {
+                if (item.children && allowed(item)) {
+                    flattenItems(that, item, result, counter);
+                }
+            }
+            // then items
+            for (const item of root.children) {
+                if (!item.children && allowed(item)) {
+                    flattenItems(that, item, result, counter);
+                }
+            }
+        }
+    }
+    return result;
+}
 //# sourceMappingURL=renderLeaf.js.map