redis key loading refactor

packages/tools/src/dbKeysLoader.ts

@@ -0,0 +1,177 @@
+import _omit from 'lodash/omit';
+
+const SHOW_INCREMENT = 100;
+
+export interface DbKeysNodeModelBase {
+  text?: string;
+  count?: number;
+  level: number;
+}
+
+export interface DbKeysLeafNodeModel extends DbKeysNodeModelBase {
+  key: string;
+
+  type: 'string' | 'hash' | 'set' | 'list' | 'zset' | 'stream' | 'binary' | 'ReJSON-RL';
+}
+
+export interface DbKeysFolderNodeModel extends DbKeysNodeModelBase {
+  root: string;
+  type: 'dir';
+  maxShowCount?: number;
+  isExpanded?: boolean;
+  shouldLoadNext?: boolean;
+  hasNext?: boolean;
+}
+
+export interface DbKeysTreeModel {
+  root: DbKeysFolderNodeModel;
+  dirsByKey: { [key: string]: DbKeysFolderNodeModel };
+  childrenByKey: { [key: string]: DbKeysNodeModel[] };
+  refreshAll?: boolean;
+}
+
+export type DbKeysNodeModel = DbKeysLeafNodeModel | DbKeysFolderNodeModel;
+
+export type DbKeysLoadFunction = (root: string, limit: number) => Promise<DbKeysNodeModel[]>;
+
+export type DbKeysChangeModelFunction = (func: (model: DbKeysTreeModel) => DbKeysTreeModel) => void;
+
+// function dbKeys_findFolderNode(node: DbKeysNodeModel, root: string) {
+//   if (node.type != 'dir') {
+//     return null;
+//   }
+//   if (node.root === root) {
+//     return node;
+//   }
+//   for (const child of node.children ?? []) {
+//     const res = dbKeys_findFolderNode(child, root);
+//     if (res) {
+//       return res;
+//     }
+//   }
+//   return null;
+// }
+
+// export async function dbKeys_loadKeysFromNode(
+//   tree: DbKeysTreeModel,
+//   callingRoot: string,
+//   separator: string,
+//   loader: DbKeysLoadFunction
+// ): Promise<DbKeysTreeModel> {
+//   const callingRootNode = tree.dirsByKey[callingRoot];
+//   if (!callingRootNode) {
+//     return tree;
+//   }
+//   const newItems = await loader(callingRoot, callingRootNode.maxShowCount ?? SHOW_INCREMENT);
+
+//   return {
+//     ...tree,
+//     childrenByKey: {
+//       ...tree.childrenByKey,
+//       [callingRoot]: newItems,
+//     },
+//   };
+// }
+
+export async function dbKeys_loadMissing(tree: DbKeysTreeModel, loader: DbKeysLoadFunction): Promise<DbKeysTreeModel> {
+  const childrenByKey = { ...tree.childrenByKey };
+  const dirsByKey = { ...tree.dirsByKey };
+
+  for (const root in tree.dirsByKey) {
+    const dir = tree.dirsByKey[root];
+
+    if (dir.isExpanded && dir.shouldLoadNext) {
+      if (!tree.childrenByKey[root] || dir.hasNext) {
+        const loadCount = dir.maxShowCount && dir.shouldLoadNext ? dir.maxShowCount + SHOW_INCREMENT : SHOW_INCREMENT;
+        const items = await loader(root, loadCount + 1);
+
+        childrenByKey[root] = items.slice(0, loadCount);
+        dirsByKey[root] = {
+          ...dir,
+          shouldLoadNext: false,
+          maxShowCount: loadCount,
+          hasNext: items.length > loadCount,
+        };
+
+        for (const child of items.slice(0, loadCount)) {
+          if (child.type == 'dir' && !dirsByKey[child.root]) {
+            dirsByKey[child.root] = {
+              shouldLoadNext: false,
+              maxShowCount: null,
+              hasNext: false,
+              isExpanded: false,
+              type: 'dir',
+              level: dir.level + 1,
+              root: child.root,
+              text: child.text,
+            };
+          }
+        }
+      } else {
+        dirsByKey[root] = {
+          ...dir,
+          shouldLoadNext: false,
+        };
+      }
+    }
+  }
+
+  return {
+    ...tree,
+    dirsByKey,
+    childrenByKey,
+    refreshAll: false,
+  };
+}
+
+export function dbKeys_markNodeExpanded(tree: DbKeysTreeModel, root: string, isExpanded: boolean): DbKeysTreeModel {
+  const node = tree.dirsByKey[root];
+  if (!node) {
+    return tree;
+  }
+  return {
+    ...tree,
+    dirsByKey: {
+      ...tree.dirsByKey,
+      [root]: {
+        ...node,
+        isExpanded,
+        shouldLoadNext: isExpanded,
+      },
+    },
+  };
+}
+
+export function dbKeys_refreshAll(tree?: DbKeysTreeModel): DbKeysTreeModel {
+  const root: DbKeysFolderNodeModel = {
+    isExpanded: true,
+    level: 0,
+    root: '',
+    type: 'dir',
+    shouldLoadNext: true,
+  };
+  return {
+    ...tree,
+    childrenByKey: {},
+    dirsByKey: {
+      '': root,
+    },
+    refreshAll: true,
+    root,
+  };
+}
+
+export function dbKeys_reloadFolder(tree: DbKeysTreeModel, root: string): DbKeysTreeModel {
+  return {
+    ...tree,
+    childrenByKey: _omit(tree.childrenByKey, root),
+    dirsByKey: {
+      ...tree.dirsByKey,
+      [root]: {
+        ...tree.dirsByKey[root],
+        shouldLoadNext: true,
+        hasNext: undefined,
+      },
+    },
+  };
+}

packages/tools/src/index.ts

@@ -24,3 +24,4 @@ export * from './getConnectionLabel';
 export * from './detectSqlFilterBehaviour';
 export * from './filterBehaviours';
 export * from './schemaInfoTools';
+export * from './dbKeysLoader';

packages/web/src/widgets/DbKeysSubTree.svelte

@@ -2,89 +2,38 @@
   import _ from 'lodash';
 
   import AppObjectCore from '../appobj/AppObjectCore.svelte';
-  import LoadingInfo from '../elements/LoadingInfo.svelte';
-  import { apiCall } from '../utility/api';
-
-  const SHOW_INCREMENT = 100;
 
   import DbKeysTreeNode from './DbKeysTreeNode.svelte';
-
-  export let conid;
-  export let database;
+  import { dbKeys_markNodeExpanded, DbKeysChangeModelFunction, DbKeysTreeModel } from 'dbgate-tools';
 
   export let root;
+  export let connection;
+  export let database;
+  export let conid;
   export let indentLevel = 0;
 
-  export let reloadToken = 0;
-  export let connection;
   export let filter;
 
-  let reloadToken2 = 0;
-  let maxShowCount = SHOW_INCREMENT;
-  let loading = false;
-  let loadingWhole = false;
-  let items = [];
+  export let model: DbKeysTreeModel;
+  export let changeModel: DbKeysChangeModelFunction;
 
-  async function loadData() {
-    loading = true;
-    const result = await apiCall('database-connections/load-keys', {
-      conid,
-      database,
-      root,
-      filter,
-      limit: maxShowCount + 1,
-    });
-    items = result;
-    loading = false;
-    loadingWhole = false;
-  }
-
-  $: {
-    conid;
-    database;
-    root;
-    filter;
-    reloadToken;
-    reloadToken2;
-    maxShowCount;
-    loadData();
-  }
-
-  $: {
-    reloadToken;
-    loadingWhole = true;
-  }
+  $: items = model.childrenByKey[root] ?? [];
 </script>
 
-{#if loadingWhole}
-  <LoadingInfo message="Loading key list" wrapper />
-{:else}
-  {#each items.slice(0, maxShowCount) as item}
-    <DbKeysTreeNode
-      {conid}
-      {database}
-      {root}
-      {connection}
-      {item}
-      {filter}
-      {indentLevel}
-      onRefreshParent={() => {
-        reloadToken2 += 1;
-      }}
-    />
-  {/each}
+{#each items as item}
+  <DbKeysTreeNode {conid} {database} {root} {connection} {item} {filter} {indentLevel} {model} {changeModel} />
+{/each}
 
-  {#if loading}
-    <AppObjectCore {indentLevel} title="Loading keys..." icon="icon loading" expandIcon="icon invisible-box" />
-  {:else if items.length > maxShowCount}
-    <AppObjectCore
-      {indentLevel}
-      title="Show more..."
-      icon="icon dots-horizontal"
-      expandIcon="icon invisible-box"
-      on:click={() => {
-        maxShowCount += SHOW_INCREMENT;
-      }}
-    />
-  {/if}
+{#if model.dirsByKey[root]?.shouldLoadNext}
+  <AppObjectCore {indentLevel} title="Loading keys..." icon="icon loading" expandIcon="icon invisible-box" />
+{:else if model.dirsByKey[root]?.hasNext}
+  <AppObjectCore
+    {indentLevel}
+    title="Show more..."
+    icon="icon dots-horizontal"
+    expandIcon="icon invisible-box"
+    on:click={() => {
+      changeModel(model => dbKeys_markNodeExpanded(model, root, true));
+    }}
+  />
 {/if}

packages/web/src/widgets/DbKeysTree.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import { findEngineDriver } from 'dbgate-tools';
+  import { dbKeys_loadMissing, dbKeys_refreshAll, findEngineDriver } from 'dbgate-tools';
 
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
   import InlineButton from '../buttons/InlineButton.svelte';
-  import runCommand from '../commands/runCommand';
 
   import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
   import SearchInput from '../elements/SearchInput.svelte';
@@ -17,15 +16,16 @@
   import DbKeysSubTree from './DbKeysSubTree.svelte';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
   import FocusedConnectionInfoWidget from './FocusedConnectionInfoWidget.svelte';
-
+  
   export let conid;
   export let database;
 
   let filter;
-  let reloadToken = 0;
+
+  let model = dbKeys_refreshAll();
 
   function handleRefreshDatabase() {
-    reloadToken += 1;
+    changeModel(model => dbKeys_refreshAll(model));
   }
 
   function handleAddKey() {
@@ -58,6 +58,31 @@
       ($focusedConnectionOrDatabase?.database && $focusedConnectionOrDatabase?.database != database));
 
   $: connection = useConnectionInfo({ conid });
+
+  async function changeModel(modelUpdate) {
+    model = modelUpdate(model);
+    model = await dbKeys_loadMissing(model, async (root, limit) => {
+      const result = await apiCall('database-connections/load-keys', {
+        conid,
+        database,
+        root,
+        filter,
+        limit,
+      });
+      return result;
+    });
+  }
+
+  function reloadModel() {
+    changeModel(model => dbKeys_refreshAll(model));
+  }
+
+  $: {
+    conid;
+    database;
+    filter;
+    reloadModel();
+  }
 </script>
 
 <SearchBoxWrapper>
@@ -74,5 +99,5 @@
   <FocusedConnectionInfoWidget {conid} {database} connection={$connection} />
 {/if}
 <WidgetsInnerContainer hideContent={differentFocusedDb}>
-  <DbKeysSubTree {conid} {database} root="" {reloadToken} connection={$currentDatabase?.connection} {filter} />
+  <DbKeysSubTree root="" {filter} {model} {changeModel} {conid} {database} {connection} />
 </WidgetsInnerContainer>

packages/web/src/widgets/DbKeysTreeNode.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-  import { getIconForRedisType } from 'dbgate-tools';
+  import {
+    dbKeys_markNodeExpanded,
+    dbKeys_reloadFolder,
+    DbKeysChangeModelFunction,
+    DbKeysTreeModel,
+    getIconForRedisType,
+  } from 'dbgate-tools';
 
   import AppObjectCore from '../appobj/AppObjectCore.svelte';
   import { plusExpandIcon } from '../icons/expandIcons';
@@ -25,10 +31,10 @@
   export let indentLevel = 0;
   export let filter;
 
-  export let onRefreshParent;
+  export let model: DbKeysTreeModel;
+  export let changeModel: DbKeysChangeModelFunction;
 
-  let isExpanded;
-  let reloadToken = 0;
+  $: isExpanded = model.dirsByKey[item.root]?.isExpanded;
 
   // $: console.log(item.text, indentLevel);
   function createMenu() {
@@ -47,9 +53,7 @@
                   args: [item.key],
                 });
 
-                if (onRefreshParent) {
-                  onRefreshParent();
-                }
+                changeModel(m => dbKeys_reloadFolder(m, root));
               },
             });
           },
@@ -70,9 +74,7 @@
                   args: [item.key, newName],
                 });
 
-                if (onRefreshParent) {
-                  onRefreshParent();
-                }
+                changeModel(m => dbKeys_reloadFolder(m, root));
               },
             });
           },
@@ -81,7 +83,7 @@
         !connection?.isReadOnly && {
           label: 'Reload',
           onClick: () => {
-            reloadToken += 1;
+            changeModel(m => dbKeys_reloadFolder(m, root));
           },
         },
       item.type == 'dir' &&
@@ -99,9 +101,7 @@
                   args: [branch],
                 });
 
-                if (onRefreshParent) {
-                  onRefreshParent();
-                }
+                changeModel(m => dbKeys_reloadFolder(m, root));
               },
             });
           },
@@ -139,12 +139,12 @@
   expandIcon={item.type == 'dir' ? plusExpandIcon(isExpanded) : 'icon invisible-box'}
   on:expand={() => {
     if (item.type == 'dir') {
-      isExpanded = !isExpanded;
+      changeModel(tree => dbKeys_markNodeExpanded(tree, item.root, !isExpanded));
     }
   }}
   on:click={() => {
     if (item.type == 'dir') {
-      isExpanded = !isExpanded;
+      changeModel(tree => dbKeys_markNodeExpanded(tree, item.root, !isExpanded));
     } else {
       openNewTab({
         tabComponent: 'DbKeyDetailTab',
@@ -177,8 +177,9 @@
     {database}
     root={item.root}
     indentLevel={indentLevel + 1}
-    {reloadToken}
     {connection}
     {filter}
+    {model}
+    {changeModel}
   />
 {/if}