feat: add result sets selection and pagination

src-tauri/src/queues/query.rs

@@ -77,6 +77,8 @@ pub struct QueryTaskResult {
     pub id: String,
     pub path: Option<String>,
     pub error: Option<String>,
+    pub info: Option<String>,
+    pub count: Option<usize>,
     pub tab_idx: usize,
     pub query_idx: usize,
 }
@@ -89,32 +91,36 @@ pub async fn async_process_model(
         let task = input;
         // tokio::time::sleep(tokio::time::Duration::from_secs(1)).await;
         match task.conn.execute_query(&task.query).await {
-            Ok(result_set) => match write_query(&task.id, result_set) {
+            Ok(result_set) => match write_query(&task.id, &result_set) {
                 Ok(path) => {
                     output_tx
                         .send(QueryTaskResult {
                             conn_id: task.conn.config.id.to_string(),
+                            count: Some(result_set.rows.len()),
                             status: QueryTaskStatus::Completed,
                             query: task.query,
                             id: task.id,
                             query_idx: task.query_idx,
                             tab_idx: task.tab_idx,
                             path: Some(path),
                             error: None,
+                            info: Some(result_set.info),
                         })
                         .await?
                 }
                 Err(e) => {
                     output_tx
                         .send(QueryTaskResult {
                             conn_id: task.conn.config.id.to_string(),
+                            count: None,
                             status: QueryTaskStatus::Error,
                             query: task.query,
                             id: task.id,
                             query_idx: task.query_idx,
                             tab_idx: task.tab_idx,
                             path: None,
                             error: Some(e.to_string()),
+                            info: None,
                         })
                         .await?
                 }
@@ -123,13 +129,15 @@ pub async fn async_process_model(
                 output_tx
                     .send(QueryTaskResult {
                         conn_id: task.conn.config.id.to_string(),
+                        count: None,
                         status: QueryTaskStatus::Error,
                         query: task.query,
                         id: task.id,
                         query_idx: task.query_idx,
                         tab_idx: task.tab_idx,
                         path: None,
                         error: Some(e.to_string()),
+                        info: None,
                     })
                     .await?;
             }

src-tauri/src/utils/fs.rs

@@ -68,7 +68,7 @@ pub fn write_file(path: &PathBuf, content: &str) -> Result<()> {
     Ok(())
 }
 
-pub fn write_query(id: &str, result_set: ResultSet) -> Result<String> {
+pub fn write_query(id: &str, result_set: &ResultSet) -> Result<String> {
     let mut rows = String::from("");
     result_set.rows.iter().for_each(|row| {
         rows += &(row.to_string() + "\n");

src/App.tsx

@@ -18,7 +18,6 @@ function App() {
       getConnection,
       updateResultSet,
       contentStore: { idx },
-      queryIdx,
     },
     app: { restoreAppStore },
     backend: { getQueryMetadata },
@@ -31,11 +30,9 @@ function App() {
   });
 
   const compareAndAssign = async (event: QueryTaskResult) => {
-    if (
-      getConnection().id === event.conn_id &&
-      idx === event.tab_idx &&
-      queryIdx() === event.query_idx
-    ) {
+    // TODO: this does not take into account the connection, when we have multiple connections
+    // FIXME: Why more than 3 queries in a tab suddenly breaks?
+    if (getConnection().id === event.conn_id && idx === event.tab_idx) {
       if (event.status === 'Completed') {
         const md = await getQueryMetadata(event.path);
         const metadata = {
@@ -47,11 +44,10 @@ function App() {
       } else if (event.status === 'Error') {
         updateResultSet(event.tab_idx, event.query_idx, {
           status: event.status,
-          info: event.error,
+          error: event.error,
         });
       }
     }
-    // setContentStore('tabs', idx ?? contentStore.idx, key, data);
   };
 
   onMount(async () => {

src/components/CommandPalette/CommandPaletteContext.tsx

@@ -5,7 +5,7 @@ import { JSX } from "solid-js/jsx-runtime";
 import { createShortcut } from "@solid-primitives/keyboard";
 
 export interface ActionsContext {
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 export const CommandPaletteContext = (props: { children: JSX.Element }) => {

src/components/Screens/Console/Content/QueryTab/QueryTab.tsx

@@ -5,9 +5,10 @@ import { QueryTextArea } from "./QueryTextArea";
 
 export const QueryTab = () => {
   createEffect(() => {
+    // TODO: fix this, results table height changes between results sets
     const q = Split(["#query", "#results"], {
-      sizes: [30, 80],
-      minSize: [100, 400],
+      sizes: [30, 70],
+      minSize: [200, 400],
       maxSize: [500, Infinity],
       direction: "vertical",
       gutterSize: 4,

src/components/Screens/Console/Content/QueryTab/ResultesTable.tsx

@@ -39,7 +39,7 @@ const parseObjRecursive = (
 export const ResultsTable = () => {
   const {
     connections: { queryIdx, getContentData },
-    backend: { pageSize, getQueryResults },
+    backend: { getQueryResults },
   } = useAppSelector();
   const [code, setCode] = createSignal('');
   const { ref, editorView, createExtension } = createCodeMirror({
@@ -58,16 +58,20 @@ export const ResultsTable = () => {
 
   const updateRows = async () => {
     const result_set = getContentData('Query').result_sets[queryIdx()];
-    const _rows =
-      result_set?.status === 'Completed'
-        ? await getQueryResults(result_set.path!)
-        : [];
-
+    if (result_set?.status !== 'Completed') {
+      setRows([]);
+      return;
+    }
+    const _rows = await getQueryResults(result_set.path!, page());
     setRows(_rows);
   };
 
-  createEffect(on(queryIdx, updateRows));
-  createEffect(on(page, updateRows));
+  createEffect(
+    on(queryIdx, () => {
+      setPage(0);
+      updateRows();
+    })
+  );
   createEffect(updateRows);
 
   createEffect(async () => {
@@ -92,7 +96,7 @@ export const ResultsTable = () => {
       autoResize: true,
       clipboard: true,
       pagination: false,
-      paginationSize: pageSize(),
+      maxHeight: '100%',
       height: '100%',
       paginationCounter: 'rows',
       debugInvalidOptions: false,
@@ -134,16 +138,13 @@ export const ResultsTable = () => {
 
   const onNextPage = async () => {
     setPage(page() + 1);
-    const result_set = getContentData('Query').result_sets[queryIdx()];
-    const res = await getQueryResults(result_set.path!, page());
-    setRows(res);
+    updateRows();
   };
 
   const onPrevPage = async () => {
+    if (page() === 0) return;
     setPage(page() - 1);
-    const result_set = getContentData('Query').result_sets[queryIdx()];
-    const res = await getQueryResults(result_set.path!, page());
-    setRows(res);
+    updateRows();
   };
 
   return (

src/components/Screens/Console/Content/QueryTab/components/Pagination.tsx

@@ -3,7 +3,7 @@ import { useAppSelector } from 'services/Context';
 import { createShortcut } from '@solid-primitives/keyboard';
 import { ChevronLeft, ChevronRight } from 'components/UI/Icons';
 import { t } from 'utils/i18n';
-import { Accessor, createEffect, on, Show } from 'solid-js';
+import { Accessor, createEffect, Show } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import { ResultSet } from 'interfaces';
 
@@ -21,18 +21,14 @@ export const Pagination = (props: PaginationProps) => {
 
   createShortcut(['Control', 'Shift', 'N'], selectNextQuery);
   createShortcut(['Control', 'Shift', 'P'], selectPrevQuery);
+  createShortcut(['Control', 'N'], props.onNextPage);
+  createShortcut(['Control', 'P'], props.onPrevPage);
 
   const [resultSet, setResultSet] = createStore<ResultSet>({});
 
-  createEffect(
-    on(queryIdx, () => {
-      const rs = getContentData('Query').result_sets[queryIdx()];
-      if (rs) setResultSet(rs);
-    })
-  );
-
   createEffect(() => {
-    console.log('query idx', queryIdx());
+    const rs = getContentData('Query').result_sets[queryIdx()];
+    if (rs) setResultSet(rs);
   });
 
   return (
@@ -52,13 +48,19 @@ export const Pagination = (props: PaginationProps) => {
           </button>
         </div>
         <div class="flex-1">
-          <Show when={resultSet?.info}>
-            <Alert color="info">{resultSet?.info}</Alert>
+          <Show when={resultSet?.status === 'Completed' && resultSet.info}>
+            <Alert color="info">
+              {resultSet?.status === 'Completed' && resultSet?.info}
+            </Alert>
+          </Show>
+          <Show when={resultSet?.status === 'Error'}>
+            <Alert color="error">
+              {resultSet?.status === 'Error' && resultSet?.error}
+            </Alert>
           </Show>
         </div>
       </div>
-
-      <Show when={!resultSet?.info}>
+      <Show when={resultSet.status === 'Completed' && !resultSet.info}>
         <div class="join">
           <button
             class="join-item btn btn-sm"
@@ -67,7 +69,10 @@ export const Pagination = (props: PaginationProps) => {
           >
             <ChevronLeft />
           </button>
-          <button class="join-item btn btn-sm btn-disabled !text-base-content">
+          <button
+            disabled
+            class="join-item btn btn-sm btn-disabled !text-base-content"
+          >
             {props.page() + 1}
           </button>
           <button

src/interfaces.ts

@@ -116,10 +116,17 @@ export type ResultSet = {
   count?: number;
   affected_rows?: number;
   warnings?: number;
-  info?: string;
   path?: string;
-  status?: QueryTaskStatusType;
-};
+} & (
+    | {
+      status?: (typeof QueryTaskStatus)['Completed'];
+      info?: string;
+    }
+    | {
+      status?: (typeof QueryTaskStatus)['Error'];
+      error?: string;
+    }
+  );
 
 const QueryTaskStatus = {
   Progress: 'Progress',

src/services/Backend.ts

@@ -3,7 +3,7 @@ import { QueryMetadataResult, Row } from 'interfaces';
 import { createSignal } from 'solid-js';
 
 export const BackendService = () => {
-  const [pageSize, setPageSize] = createSignal<number>(30);
+  const [pageSize, setPageSize] = createSignal<number>(20);
 
   const getQueryResults = async (
     path: string,