refresh perspective command

packages/datalib/src/PerspectiveCache.ts

@@ -109,4 +109,8 @@ export class PerspectiveCache {
     // cache could be used
     return res;
   }
+
+  clear() {
+    this.tables = {};
+  }
 }

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -13,6 +13,7 @@
   import resizeObserver from '../utility/resizeObserver';
   import PerspectiveIntersectionObserver from './PerspectiveIntersectionObserver.svelte';
   import debug from 'debug';
+  import contextMenu from '../utility/contextMenu';
 
   const dbg = debug('dbgate:PerspectivaTable');
 
@@ -133,13 +134,27 @@
     domHeaderWrap;
     createHeaderClone();
   }
+
+  function buildMenu() {
+    return [
+      {
+        command: 'perspective.refresh',
+      },
+    ];
+  }
 </script>
 
 <div class="headerWrap">
   <table bind:this={domHeaderWrap} />
 </div>
 
-<div class="wrapper" bind:this={domWrapper} use:resizeObserver={true} on:resize={createHeaderClone}>
+<div
+  class="wrapper"
+  bind:this={domWrapper}
+  use:resizeObserver={true}
+  on:resize={createHeaderClone}
+  use:contextMenu={buildMenu}
+>
   {#if display}
     <table>
       <thead bind:this={domTableHead}>

packages/web/src/tabs/PerspectiveTab.svelte

@@ -1,10 +1,29 @@
+<script lang="ts" context="module">
+  const getCurrentEditor = () => getActiveComponent('PerspectiveTab');
+
+  registerCommand({
+    id: 'perspective.refresh',
+    category: 'Perspective',
+    name: 'Refresh',
+    keyText: 'F5 | CtrlOrCommand+R',
+    toolbar: true,
+    isRelatedToTab: true,
+    icon: 'icon reload',
+    testEnabled: () => getCurrentEditor() != null,
+    onClick: () => getCurrentEditor().refresh(),
+  });
+</script>
+
 <script lang="ts">
   import { PerspectiveCache } from 'dbgate-datalib';
 
   import PerspectiveView from '../perspectives/PerspectiveView.svelte';
   import usePerspectiveConfig from '../utility/usePerspectiveConfig';
-  import stableStringify from 'json-stable-stringify';
   import { writable } from 'svelte/store';
+  import registerCommand from '../commands/registerCommand';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
+  import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
+  import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
 
   export let tabid;
   export let conid;
@@ -12,18 +31,31 @@
   export let schemaName;
   export let pureName;
 
+  export const activator = createActivator('PerspectiveTab', true);
+
   const config = usePerspectiveConfig(tabid);
   const cache = new PerspectiveCache();
   const loadedCounts = writable({});
+
+  export function refresh() {
+    cache.clear();
+    loadedCounts.set({});
+  }
 </script>
 
-<PerspectiveView
+<ToolStripContainer>
-  {conid}
+  <PerspectiveView
-  {database}
+    {conid}
-  {schemaName}
+    {database}
-  {pureName}
+    {schemaName}
-  config={$config}
+    {pureName}
-  setConfig={config.update}
+    config={$config}
-  {cache}
+    setConfig={config.update}
-  {loadedCounts}
+    {cache}
-/>
+    {loadedCounts}
+  />
+
+  <svelte:fragment slot="toolstrip">
+    <ToolStripCommandButton command="perspective.refresh" />
+  </svelte:fragment>
+</ToolStripContainer>