Catalog render optimizations (#3422)

__mocks__/windowMock.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+Object.defineProperty(window, "requestIdleCallback", {
+  writable: true,
+  value: jest.fn().mockImplementation(callback => callback()),
+});
+
+Object.defineProperty(window, "cancelIdleCallback", {
+  writable: true,
+  value: jest.fn(),
+});
+
+export default {};

package.json

@@ -63,7 +63,8 @@
     },
     "moduleNameMapper": {
       "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.ts",
-      "\\.(svg)$": "<rootDir>/__mocks__/imageMock.ts"
+      "\\.(svg)$": "<rootDir>/__mocks__/imageMock.ts",
+      "src/(.*)": "<rootDir>/__mocks__/windowMock.ts"
     },
     "modulePathIgnorePatterns": [
       "<rootDir>/dist",

src/common/user-store/user-store.ts

@@ -137,7 +137,11 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
    * Toggles the hidden configuration of a table's column
    */
   toggleTableColumnVisibility(tableId: string, columnId: string) {
-    this.hiddenTableColumns.get(tableId)?.toggle(columnId);
+    if (!this.hiddenTableColumns.get(tableId)) {
+      this.hiddenTableColumns.set(tableId, new ObservableToggleSet());
+    }
+
+    this.hiddenTableColumns.get(tableId).toggle(columnId);
   }
 
   @action

src/renderer/components/+catalog/catalog-tree.module.css

@@ -46,6 +46,11 @@
   border-radius: 2px;
 }
 
+.content:active {
+  color: white;
+  background-color: var(--blue);
+}
+
 .group {
   margin-left: 0px;
 }

src/renderer/components/+catalog/catalog.tsx

@@ -42,6 +42,9 @@ import { CatalogEntityDetails } from "./catalog-entity-details";
 import { catalogURL, CatalogViewRouteParam } from "../../../common/routes";
 import { CatalogMenu } from "./catalog-menu";
 import { HotbarIcon } from "../hotbar/hotbar-icon";
+import { RenderDelay } from "../render-delay/render-delay";
+import { CatalogTopbar } from "../cluster-manager/catalog-topbar";
+import type { TableSortCallback } from "../table";
 
 export const previousActiveTab = createAppStorage("catalog-previous-active-tab", "");
 
@@ -144,7 +147,9 @@ export class Catalog extends React.Component<Props> {
   };
 
   renderNavigation() {
-    return <CatalogMenu activeItem={this.activeTab} onItemClick={this.onTabChange}/>;
+    return (
+      <CatalogMenu activeItem={this.activeTab} onItemClick={this.onTabChange}/>
+    );
   }
 
   renderItemMenu = (item: CatalogEntityItem<CatalogEntity>) => {
@@ -172,110 +177,73 @@ export class Catalog extends React.Component<Props> {
 
   renderIcon(item: CatalogEntityItem<CatalogEntity>) {
     return (
-      <HotbarIcon
+      <RenderDelay>
-        uid={`catalog-icon-${item.getId()}`}
+        <HotbarIcon
-        title={item.getName()}
+          uid={`catalog-icon-${item.getId()}`}
-        source={item.source}
+          title={item.getName()}
-        src={item.entity.spec.icon?.src}
+          source={item.source}
-        material={item.entity.spec.icon?.material}
+          src={item.entity.spec.icon?.src}
-        background={item.entity.spec.icon?.background}
+          material={item.entity.spec.icon?.material}
-        size={24}
+          background={item.entity.spec.icon?.background}
-      />
+          size={24}
+        />
+      </RenderDelay>
     );
   }
 
-  renderSingleCategoryList() {
+  renderList() {
-    return (
+    const { activeCategory } = this.catalogEntityStore;
-      <ItemListLayout
+    const tableId = activeCategory ? `catalog-items-${activeCategory.metadata.name.replace(" ", "")}` : "catalog-items";
-        key={this.catalogEntityStore.activeCategory.getId()}
+    let sortingCallbacks: { [sortBy: string]: TableSortCallback } = {
-        tableId={`catalog-items-${this.catalogEntityStore.activeCategory?.metadata.name.replace(" ", "")}`}
+      [sortBy.name]: (item: CatalogEntityItem<CatalogEntity>) => item.name,
-        renderHeaderTitle={this.catalogEntityStore.activeCategory?.metadata.name}
+      [sortBy.source]: (item: CatalogEntityItem<CatalogEntity>) => item.source,
-        isSelectable={false}
+      [sortBy.status]: (item: CatalogEntityItem<CatalogEntity>) => item.phase,
-        isConfigurable={true}
+    };
-        className="CatalogItemList"
-        store={this.catalogEntityStore}
-        sortingCallbacks={{
-          [sortBy.name]: (item: CatalogEntityItem<CatalogEntity>) => item.name,
-          [sortBy.source]: (item: CatalogEntityItem<CatalogEntity>) => item.source,
-          [sortBy.status]: (item: CatalogEntityItem<CatalogEntity>) => item.phase,
-        }}
-        searchFilters={[
-          (entity: CatalogEntityItem<CatalogEntity>) => entity.searchFields,
-        ]}
-        renderTableHeader={[
-          { title: "", className: css.iconCell, id: "icon" },
-          { title: "Name", className: css.nameCell, sortBy: sortBy.name, id: "name" },
-          { title: "Source", className: css.sourceCell, sortBy: sortBy.source, id: "source" },
-          { title: "Labels", className: css.labelsCell, id: "labels" },
-          { title: "Status", className: css.statusCell, sortBy: sortBy.status, id: "status" },
-        ]}
-        customizeTableRowProps={(item: CatalogEntityItem<CatalogEntity>) => ({
-          disabled: !item.enabled,
-        })}
-        renderTableContents={(item: CatalogEntityItem<CatalogEntity>) => [
-          this.renderIcon(item),
-          item.name,
-          item.source,
-          item.getLabelBadges(),
-          { title: item.phase, className: cssNames(css[item.phase]) }
-        ]}
-        onDetails={this.onDetails}
-        renderItemMenu={this.renderItemMenu}
-      />
-    );
-  }
 
-  renderAllCategoriesList() {
+    sortingCallbacks = activeCategory ? sortingCallbacks : {
-    return (
+      ...sortingCallbacks,
-      <ItemListLayout
+      [sortBy.kind]: (item: CatalogEntityItem<CatalogEntity>) => item.kind,
-        key="all"
+    };
-        renderHeaderTitle={"Browse All"}
-        isSelectable={false}
-        isConfigurable={true}
-        className="CatalogItemList"
-        store={this.catalogEntityStore}
-        tableId="catalog-items"
-        sortingCallbacks={{
-          [sortBy.name]: (item: CatalogEntityItem<CatalogEntity>) => item.name,
-          [sortBy.kind]: (item: CatalogEntityItem<CatalogEntity>) => item.kind,
-          [sortBy.source]: (item: CatalogEntityItem<CatalogEntity>) => item.source,
-          [sortBy.status]: (item: CatalogEntityItem<CatalogEntity>) => item.phase,
-        }}
-        searchFilters={[
-          (entity: CatalogEntityItem<CatalogEntity>) => entity.searchFields,
-        ]}
-        renderTableHeader={[
-          { title: "", className: css.iconCell, id: "icon" },
-          { title: "Name", className: css.nameCell, sortBy: sortBy.name, id: "name" },
-          { title: "Kind", className: css.kindCell, sortBy: sortBy.kind, id: "kind" },
-          { title: "Source", className: css.sourceCell, sortBy: sortBy.source, id: "source" },
-          { title: "Labels", className: css.labelsCell, id: "labels" },
-          { title: "Status", className: css.statusCell, sortBy: sortBy.status, id: "status" },
-        ]}
-        customizeTableRowProps={(item: CatalogEntityItem<CatalogEntity>) => ({
-          disabled: !item.enabled,
-        })}
-        renderTableContents={(item: CatalogEntityItem<CatalogEntity>) => [
-          this.renderIcon(item),
-          item.name,
-          item.kind,
-          item.source,
-          item.getLabelBadges(),
-          { title: item.phase, className: cssNames(css[item.phase]) }
-        ]}
-        detailsItem={this.catalogEntityStore.selectedItem}
-        onDetails={this.onDetails}
-        renderItemMenu={this.renderItemMenu}
-      />
-    );
-  }
 
-  renderCategoryList() {
     if (this.activeTab === undefined) {
       return null;
     }
 
-    return this.catalogEntityStore.activeCategory ? this.renderSingleCategoryList() : this.renderAllCategoriesList();
+    return (
+      <ItemListLayout
+        tableId={tableId}
+        renderHeaderTitle={activeCategory?.metadata.name || "Browse All"}
+        isSelectable={false}
+        isConfigurable={true}
+        className="CatalogItemList"
+        store={this.catalogEntityStore}
+        sortingCallbacks={sortingCallbacks}
+        searchFilters={[
+          (entity: CatalogEntityItem<CatalogEntity>) => entity.searchFields,
+        ]}
+        renderTableHeader={[
+          { title: "", className: css.iconCell, id: "icon" },
+          { title: "Name", className: css.nameCell, sortBy: sortBy.name, id: "name" },
+          !activeCategory && { title: "Kind", className: css.kindCell, sortBy: sortBy.kind, id: "kind" },
+          { title: "Source", className: css.sourceCell, sortBy: sortBy.source, id: "source" },
+          { title: "Labels", className: css.labelsCell, id: "labels" },
+          { title: "Status", className: css.statusCell, sortBy: sortBy.status, id: "status" },
+        ].filter(Boolean)}
+        customizeTableRowProps={(item: CatalogEntityItem<CatalogEntity>) => ({
+          disabled: !item.enabled,
+        })}
+        renderTableContents={(item: CatalogEntityItem<CatalogEntity>) => [
+          this.renderIcon(item),
+          item.name,
+          !activeCategory && item.kind,
+          item.source,
+          item.getLabelBadges(),
+          { title: item.phase, className: cssNames(css[item.phase]) }
+        ].filter(Boolean)}
+        onDetails={this.onDetails}
+        renderItemMenu={this.renderItemMenu}
+      />
+    );
   }
 
   render() {
@@ -284,21 +252,28 @@ export class Catalog extends React.Component<Props> {
     }
 
     return (
-      <MainLayout sidebar={this.renderNavigation()}>
+      <>
-        <div className="p-6 h-full">
+        <CatalogTopbar/>
-          { this.renderCategoryList() }
+        <MainLayout sidebar={this.renderNavigation()}>
-        </div>
+          <div className="p-6 h-full">
-        {
+            { this.renderList() }
-          this.catalogEntityStore.selectedItem
+          </div>
-            ? <CatalogEntityDetails
+          {
-              item={this.catalogEntityStore.selectedItem}
+            this.catalogEntityStore.selectedItem
-              hideDetails={() => this.catalogEntityStore.selectedItemId = null}
+              ? <CatalogEntityDetails
-            />
+                item={this.catalogEntityStore.selectedItem}
-            : <CatalogAddButton
+                hideDetails={() => this.catalogEntityStore.selectedItemId = null}
-              category={this.catalogEntityStore.activeCategory}
+              />
-            />
+              : (
-        }
+                <RenderDelay>
-      </MainLayout>
+                  <CatalogAddButton
+                    category={this.catalogEntityStore.activeCategory}
+                  />
+                </RenderDelay>
+              )
+          }
+        </MainLayout>
+      </>
     );
   }
 }

src/renderer/components/cluster-manager/cluster-manager.scss

@@ -35,10 +35,6 @@
     position: relative;
     display: flex;
     flex-direction: column;
-
-    > * {
-      z-index: 1;
-    }
   }
 
   .HotbarMenu {
@@ -52,7 +48,7 @@
   #lens-views {
     position: absolute;
     left: 0;
-    top: 0;
+    top: 40px; // Move below top bar
     right: 0;
     bottom: 0;
     display: flex;

src/renderer/components/cluster-manager/cluster-manager.tsx

@@ -34,8 +34,6 @@ import { Extensions } from "../+extensions";
 import { HotbarMenu } from "../hotbar/hotbar-menu";
 import { EntitySettings } from "../+entity-settings";
 import { Welcome } from "../+welcome";
-import { ClusterTopbar } from "./cluster-topbar";
-import { CatalogTopbar } from "./catalog-topbar";
 import * as routes from "../../../common/routes";
 
 @observer
@@ -43,8 +41,6 @@ export class ClusterManager extends React.Component {
   render() {
     return (
       <div className="ClusterManager">
-        <Route component={CatalogTopbar} {...routes.catalogRoute} />
-        <Route component={ClusterTopbar} {...routes.clusterViewRoute} />
         <main>
           <div id="lens-views"/>
           <Switch>

src/renderer/components/cluster-manager/cluster-view.tsx

@@ -34,6 +34,7 @@ import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { navigate } from "../../navigation";
 import { catalogURL, ClusterViewRouteParams } from "../../../common/routes";
 import { previousActiveTab } from "../+catalog";
+import { ClusterTopbar } from "./cluster-topbar";
 
 interface Props extends RouteComponentProps<ClusterViewRouteParams> {
 }
@@ -104,6 +105,7 @@ export class ClusterView extends React.Component<Props> {
   render() {
     return (
       <div className="ClusterView flex column align-center">
+        <ClusterTopbar {...this.props}/>
         {this.renderStatus()}
       </div>
     );

src/renderer/components/input/input.scss

@@ -61,7 +61,6 @@
       width: 0;
       height: 2px;
       background: $primary;
-      transition: width 250ms;
     }
   }
 

src/renderer/components/menu/menu-actions.tsx

@@ -30,6 +30,7 @@ import { Icon, IconProps } from "../icon";
 import { Menu, MenuItem, MenuProps } from "../menu";
 import uniqueId from "lodash/uniqueId";
 import isString from "lodash/isString";
+import { RenderDelay } from "../render-delay/render-delay";
 
 export interface MenuActionsProps extends Partial<MenuProps> {
   className?: string;
@@ -124,30 +125,32 @@ export class MenuActions extends React.Component<MenuActionsProps> {
     return (
       <>
         {this.renderTriggerIcon()}
-        <Menu
+        <RenderDelay>
-          htmlFor={this.id}
+          <Menu
-          isOpen={this.isOpen} open={this.toggle} close={this.toggle}
+            htmlFor={this.id}
-          className={menuClassName}
+            isOpen={this.isOpen} open={this.toggle} close={this.toggle}
-          usePortal={autoClose}
+            className={menuClassName}
-          closeOnScroll={autoClose}
+            usePortal={autoClose}
-          closeOnClickItem={autoCloseOnSelect ?? autoClose }
+            closeOnScroll={autoClose}
-          closeOnClickOutside={autoClose}
+            closeOnClickItem={autoCloseOnSelect ?? autoClose }
-          {...menuProps}
+            closeOnClickOutside={autoClose}
-        >
+            {...menuProps}
-          {children}
+          >
-          {updateAction && (
+            {children}
-            <MenuItem onClick={updateAction}>
+            {updateAction && (
-              <Icon material="edit" interactive={toolbar} tooltip="Edit"/>
+              <MenuItem onClick={updateAction}>
-              <span className="title">Edit</span>
+                <Icon material="edit" interactive={toolbar} tooltip="Edit"/>
-            </MenuItem>
+                <span className="title">Edit</span>
-          )}
+              </MenuItem>
-          {removeAction && (
+            )}
-            <MenuItem onClick={this.remove}>
+            {removeAction && (
-              <Icon material="delete" interactive={toolbar} tooltip="Delete"/>
+              <MenuItem onClick={this.remove}>
-              <span className="title">Remove</span>
+                <Icon material="delete" interactive={toolbar} tooltip="Delete"/>
-            </MenuItem>
+                <span className="title">Remove</span>
-          )}
+              </MenuItem>
-        </Menu>
+            )}
+          </Menu>
+        </RenderDelay>
       </>
     );
   }

src/renderer/components/menu/menu.tsx

@@ -260,6 +260,8 @@ export class Menu extends React.Component<MenuProps, State> {
   }
 
   onBlur() {
+    if (!this.isOpen) return;  // Prevents triggering document.activeElement for each <Menu/> instance
+
     if (document.activeElement?.tagName == "IFRAME") {
       this.close();
     }

src/renderer/components/render-delay/__tests__/render-delay.test.tsx

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import { render } from "@testing-library/react";
+import { RenderDelay } from "../render-delay";
+
+describe("<RenderDelay/>", () => {
+  it("renders w/o errors", () => {
+    const { container } = render(<RenderDelay><button>My button</button></RenderDelay>);
+
+    expect(container).toBeInstanceOf(HTMLElement);
+  });
+
+  it("renders it's child", () => {
+    const { getByText } = render(<RenderDelay><button>My button</button></RenderDelay>);
+
+    expect(getByText("My button")).toBeInTheDocument();
+  });
+});

src/renderer/components/render-delay/render-delay.tsx

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import React from "react";
+import { makeObservable, observable } from "mobx";
+import { observer } from "mobx-react";
+import { boundMethod } from "../../utils";
+
+interface Props {
+  placeholder?: React.ReactNode;
+  children: unknown;
+}
+
+@observer
+export class RenderDelay extends React.Component<Props> {
+  @observable isVisible = false;
+
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
+  componentDidMount() {
+    const guaranteedFireTime = 1000;
+
+    window.requestIdleCallback(this.showContents, { timeout: guaranteedFireTime });
+  }
+
+  componentWillUnmount() {
+    window.cancelIdleCallback(this.showContents);
+  }
+
+  @boundMethod
+  showContents() {
+    this.isVisible = true;
+  }
+
+  render() {
+    if (!this.isVisible) {
+      return this.props.placeholder || null;
+    }
+
+    return this.props.children;
+  }
+}

types/dom.d.ts

@@ -24,4 +24,9 @@ declare global {
   interface Element {
     scrollIntoViewIfNeeded(opt_center?: boolean): void;
   }
+
+  interface Window {
+    requestIdleCallback(callback: () => void, options: { timeout: number });
+    cancelIdleCallback(callback: () => void);
+  }
 }