Allow query return size to be limited at API side & add loading anima…

…tion for query execution (#45)

* Add option to limit query size

* Add loader

src/components/MainLayout.vue

@@ -111,14 +111,13 @@
               </a>
               scale factor 0.1 dataset. Please run KùzuExplorer locally to load a
               different dataset (see the
-              <a href="https://kuzudb.com/docusaurus/kuzuexplorer/">
-                documentation here
-              </a>
-              ).
+              <a href="https://kuzudb.com/docusaurus/kuzuexplorer/"> documentation here</a
+              >).
               <br />
               <br />
               You can visualize the schema of LDBC SNB in the Schema tab and execute
-              interactive Cypher queries in the Shell tab.
+              interactive Cypher queries in the Shell tab. If your query returns more than
+              1000 rows, it will be truncated.
             </p>
             <p v-if="modeStore.isReadOnly">
               KùzuExplorer is running in read-only mode. In this mode, you cannot load a

src/components/SchemaView/SchemaPropertyEditCell.vue

@@ -309,7 +309,7 @@ export default {
           return `${type.memberType}[${type.size}]`;
         case DATA_TYPES.VAR_LIST: {
           let result = type.memberType;
-          for (let i = 0; i < type.dim; i++) {
+          for (let i = 0; i < type.dim; ++i) {
             result += '[]';
           }
           return result;

src/components/ShellView/CypherEditor.vue

@@ -17,7 +17,7 @@
       <div class="shell-editor__button" v-show="!isMaximized">
         <i class="fa-lg fa-solid fa-times" @click="removeCell"></i>
       </div>
-      <div class="shell-editor__button">
+      <div class="shell-editor__button" v-show="!isLoading">
         <i
           class="fa-lg fa-solid fa-play"
           data-bs-toggle="tooltip"
@@ -74,6 +74,11 @@ export default {
       required: false,
       default: false,
     },
+    isLoading: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
   },
 
   computed: {

src/components/ShellView/ShellCell.vue

@@ -6,6 +6,7 @@
       :isMaximizable="
         (queryResult && queryResult.rows && queryResult.rows.length > 0) || isMaximized
       "
+      :isLoading="isLoading"
       @evaluateCypher="evaluateCypher"
       @remove="removeCell"
       @toggleMaximize="toggleMaximize"
@@ -17,6 +18,14 @@
       ref="resultContainer"
       v-if="queryResult || errorMessage"
     />
+    <div class="d-flex align-items-center" v-if="isLoading">
+      <strong class="text-secondary">Executing query...</strong>
+      <div
+        class="spinner-border text-secondary ms-auto"
+        role="status"
+        aria-hidden="true"
+      ></div>
+    </div>
   </div>
 </template>
 
@@ -39,6 +48,7 @@ export default {
     errorMessage: "",
     isEvaluated: false,
     isMaximized: false,
+    isLoading: false,
   }),
 
   props: {
@@ -66,6 +76,7 @@ export default {
     evaluateCypher(query) {
       this.queryResult = null;
       this.errorMessage = "";
+      this.isLoading = true;
       Axios.post("/api/cypher", { query })
         .then((res) => {
           this.queryResult = res.data;
@@ -98,6 +109,8 @@ export default {
               this.$refs.resultContainer.handleDataChange(this.schema, null, this.errorMessage);
             });
           }
+        }).finally(() => {
+          this.isLoading = false;
         });
       if (!this.isEvaluated) {
         this.$emit("addCell");
@@ -133,4 +146,12 @@ export default {
 .shell-cell__wrapper {
   display: block;
 }
+
+div.d-flex.align-items-center {
+  margin: 20px;
+  margin-top: 0;
+  padding: 16px;
+  border: 2px solid $gray-300;
+  border-top: 0;
+}
 </style>

src/server/Cypher.js

@@ -1,8 +1,15 @@
 const database = require("./utils/Database");
 const express = require("express");
 const router = express.Router();
+const logger = require("./utils/Logger");
+
 const DEMO_MODE = "DEMO";
 
+let querySizeLimit = parseInt(process.env.KUZU_QUERY_SIZE_LIMIT);
+querySizeLimit = isNaN(querySizeLimit) ? null : querySizeLimit;
+if (querySizeLimit) {
+  logger.info(`Query size limit: ${querySizeLimit}`);
+}
 let schema = null;
 
 router.post("/", async (req, res) => {
@@ -39,7 +46,16 @@ router.post("/", async (req, res) => {
       const preparedStatment = await conn.prepare(query);
       result = await conn.execute(preparedStatment, params);
     }
-    const rows = await result.getAll();
+    let rows;
+    const resultSize = result.getNumTuples();
+    if (!querySizeLimit || resultSize <= querySizeLimit) {
+      rows = await result.getAll();
+    } else {
+      rows = [];
+      for (let i = 0; i < querySizeLimit; ++i) {
+        rows.push(await result.getNext());
+      }
+    }
     const columnTypes = await result.getColumnDataTypes();
     const columnNames = await result.getColumnNames();
     const dataTypes = {};

src/server/Datasets.js

@@ -97,7 +97,7 @@ router.get("/:dataset/copy", async (req, res) => {
   }
   const conn = database.getConnection();
   try {
-    for (let i = 0; i < commands.length; i++) {
+    for (let i = 0; i < commands.length; ++i) {
       const command = commands[i];
       res.write("Executing: " + command + "\n");
       const result = await conn.query(command);

src/server/utils/Database.js

@@ -75,7 +75,7 @@ class Database {
     }
     this.db = new kuzu.Database(dbPath, bufferPoolSize, true, accessMode);
     this.connectionPool = [];
-    for (let i = 0; i < numberConnections; i++) {
+    for (let i = 0; i < numberConnections; ++i) {
       const conn = {
         connection: new kuzu.Connection(this.db, coresPerConnection),
         useCount: 0,
@@ -99,7 +99,7 @@ class Database {
   getConnection() {
     let minUseCount = Number.MAX_SAFE_INTEGER;
     let minUseCountIndex = -1;
-    for (let i = 0; i < this.connectionPool.length; i++) {
+    for (let i = 0; i < this.connectionPool.length; ++i) {
       if (this.connectionPool[i].useCount < minUseCount) {
         minUseCount = this.connectionPool[i].useCount;
         minUseCountIndex = i;
@@ -115,7 +115,7 @@ class Database {
   }
 
   releaseConnection(connection) {
-    for (let i = 0; i < this.connectionPool.length; i++) {
+    for (let i = 0; i < this.connectionPool.length; ++i) {
       if (this.connectionPool[i].connection === connection) {
         this.connectionPool[i].useCount--;
         return true;