query tab - ability to stop loading

packages/api/src/controllers/sessions.js

@@ -54,6 +54,9 @@ module.exports = {
       this.dispatchMessage(sesid, 'Query execution finished');
     }
     const session = this.opened.find(x => x.sesid == sesid);
+    if (session.loadingReader_jslid) {
+      socket.emit(`session-jslid-done-${session.loadingReader_jslid}`);
+    }
     if (session.killOnDone) {
       this.kill({ sesid });
     }
@@ -124,6 +127,7 @@ module.exports = {
     const session = this.opened.find(x => x.sesid == sesid);
     session.killOnDone = true;
     const jslid = uuidv1();
+    session.loadingReader_jslid = jslid;
     const fileName = queryName && appFolder ? path.join(appdir(), appFolder, `${queryName}.query.sql`) : null;
 
     session.subprocess.send({ msgtype: 'executeReader', sql, fileName, jslid });
@@ -131,6 +135,15 @@ module.exports = {
     return { jslid };
   },
 
+  stopLoadingReader_meta: true,
+  async stopLoadingReader({ jslid }) {
+    const session = this.opened.find(x => x.loadingReader_jslid == jslid);
+    if (session) {
+      this.kill({ sesid: session.sesid });
+    }
+    return true;
+  },
+
   // cancel_meta: true,
   // async cancel({ sesid }) {
   //   const session = this.opened.find((x) => x.sesid == sesid);

packages/types/index.d.ts

@@ -20,6 +20,7 @@ export interface OpenedSession {
   conid: string;
   database: string;
   killOnDone?: boolean;
+  loadingReader_jslid: string;
   subprocess: ChildProcess;
 }
 

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>