query tab - ability to stop loading

packages/web/src/tabs/QueryDataTab.svelte

@@ -1,16 +1,35 @@
 <script lang="ts" context="module">
   export const matchingProps = ['conid', 'database', 'pureName', 'sql'];
+
+  const getCurrentEditor = () => getActiveComponent('QueryDataTab');
+
+  registerCommand({
+    id: 'queryData.stopLoading',
+    category: 'Query data',
+    name: 'Stop loading',
+    icon: 'icon stop',
+    testEnabled: () => getCurrentEditor()?.isLoading(),
+    onClick: () => getCurrentEditor().stopLoading(),
+  });
 </script>
 
 <script lang="ts">
+  import { onDestroy } from 'svelte';
+
   import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
 
   import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
   import ToolStripExportButton, { createQuickExportHandlerRef } from '../buttons/ToolStripExportButton.svelte';
+  import invalidateCommands from '../commands/invalidateCommands';
+  import registerCommand from '../commands/registerCommand';
 
   import JslDataGrid from '../datagrid/JslDataGrid.svelte';
   import LoadingInfo from '../elements/LoadingInfo.svelte';
-  import { apiCall } from '../utility/api';
+  import { apiCall, apiOff, apiOn } from '../utility/api';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
+  import useEffect from '../utility/useEffect';
+
+  export const activator = createActivator('QueryDataTab', true);
 
   export let sql = undefined;
   export let pureName = undefined;
@@ -19,6 +38,7 @@
   export let database;
 
   let jslid;
+  let loading = false;
 
   async function loadData(conid, database, sql) {
     const resp = await apiCall('sessions/execute-reader', {
@@ -29,16 +49,53 @@
       queryName: pureName,
     });
     jslid = resp.jslid;
+    loading = true;
   }
 
   function handleRefresh() {
     jslid = null;
-    loadData(conid, database, sql)
+    loadData(conid, database, sql);
   }
 
   const quickExportHandlerRef = createQuickExportHandlerRef();
 
   $: loadData(conid, database, sql);
+
+  function handleJslidDone() {
+    loading = false;
+    invalidateCommands();
+  }
+
+  export function isLoading() {
+    return loading;
+  }
+
+  export function stopLoading() {
+    if (jslid) {
+      apiCall('sessions/stop-loading-reader', { jslid });
+      loading = false;
+      invalidateCommands();
+    }
+  }
+
+  onDestroy(() => {
+    if (jslid && loading) {
+      apiCall('sessions/stop-loading-reader', { jslid });
+    }
+  });
+
+  $: effect = useEffect(() => onJslId(jslid));
+  function onJslId(jslidVal) {
+    if (jslidVal) {
+      apiOn(`session-jslid-done-${jslidVal}`, handleJslidDone);
+      return () => {
+        apiOff(`session-initialize-file-${jslidVal}`, handleJslidDone);
+      };
+    } else {
+      return () => {};
+    }
+  }
+  $: $effect;
 </script>
 
 <ToolStripContainer>
@@ -49,6 +106,7 @@
   {/if}
   <svelte:fragment slot="toolstrip">
     <ToolStripCommandButton command="dataGrid.refresh" />
+    <ToolStripCommandButton command="queryData.stopLoading" />
     <ToolStripExportButton command="jslTableGrid.export" {quickExportHandlerRef} />
   </svelte:fragment>
 </ToolStripContainer>