Merge pull request #6 from halcyon-tech/feature/scrolling_results

Feature/scrolling results
codefori · Jun 29, 2022 · cb17fb7 · cb17fb7
2 parents 10175db + cbb2666
commit cb17fb7
Show file tree

Hide file tree

Showing 5 changed files with 275 additions and 112 deletions.
diff --git a/global.d.ts b/global.d.ts
@@ -24,4 +24,10 @@ interface SQLParm {
   IS_NULLABLE: "Y" | "N",
   DEFAULT?: string,
   LONG_COMMENT?: string
+}
+
+interface StatementInfo {
+  content: string,
+  type: "statement"|"json"|"csv"|"cl"|"sql",
+  open?: boolean
 }
diff --git a/package.json b/package.json
@@ -131,13 +131,13 @@
       {
         "command": "vscode-db2i.generateSQL",
         "title": "Generate SQL",
-        "category": "Db2 for i",
-        "icon": "$(add)"
+        "category": "Db2 for i"
       },
       {
-        "command": "vscode-db2i.generateSelect",
-        "title": "Generate SELECT",
-        "category": "Db2 for i"
+        "command": "vscode-db2i.getResultSet",
+        "title": "View contents",
+        "category": "Db2 for i",
+        "icon": "$(output)"
       },
       {
         "command": "vscode-db2i.setCurrentSchema",
@@ -195,9 +195,9 @@
           "group": "db2@1"
         },
         {
-          "command": "vscode-db2i.generateSelect",
+          "command": "vscode-db2i.getResultSet",
           "when": "viewItem == table || viewItem == view || viewItem == alias",
-          "group": "db2@1"
+          "group": "inline"
         },
         {
           "command": "vscode-db2i.generateSQL",

diff --git a/src/language/results/html.js b/src/language/results/html.js
@@ -68,6 +68,103 @@ exports.getLoadingHTML = () => {
   `;
 }
 
+/**
+ * 
+ * @param {string} basicSelect
+ * @returns {string}
+ */
+exports.generateScroller = (basicSelect) => {
+  return /*html*/ `
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        ${head}
+        <script>
+          const vscode = acquireVsCodeApi();
+          const basicSelect = ${JSON.stringify(basicSelect)};
+          const limit = 50;
+
+          let nextOffset = 0;
+          let noMoreRows = false;
+          let isFetching = false;
+
+          window.addEventListener("load", main);
+            function main() {
+              let Observer = new IntersectionObserver(function(entries) {
+              // isIntersecting is true when element and viewport are overlapping
+              // isIntersecting is false when element and viewport don't overlap
+              if(entries[0].isIntersecting === true) {
+                if (isFetching === false && noMoreRows === false) {
+                  fetchNextPage();
+                }
+              }
+            }, { threshold: [0] });
+
+            Observer.observe(document.getElementById("nextButton"));
+
+            window.addEventListener('message', event => {
+              const scroller = document.getElementById("scroller");
+              const data = event.data;
+
+              switch (data.command) {
+                case 'rows':
+
+                  isFetching = false;
+
+                  if (scroller.columnDefinitions.length === 0) {
+                    scroller.columnDefinitions = Object.keys(data.rows[0]).map(col => ({
+                      title: col,
+                      columnDataKey: col,
+                    }));
+                  }
+
+                  if (scroller.rowsData.length > 0) {
+                    scroller.rowsData = [...scroller.rowsData, ...data.rows];
+                  } else {
+                    scroller.rowsData = data.rows;
+                  }
+
+                  console.log('row check');
+                  if (data.rows.length < limit) {
+                    console.log("No more rows");
+                    noMoreRows = true;
+                  }
+
+                  const nextButton = document.getElementById("nextButton");
+                  nextButton.innerText = noMoreRows ? 'End of data' : 'Fetching more...';
+                  break;
+
+                case 'fetch':
+                  scroller.columnDefinitions = [];
+                  scroller.rowsData = [];
+                  nextOffset = 0;
+                  fetchNextPage();
+                  break;
+              }
+            });
+          }
+
+          function fetchNextPage() {
+            isFetching = true;
+            vscode.postMessage({
+              query: basicSelect,
+              limit,
+              offset: nextOffset,
+            });
+
+            nextOffset += limit;
+          }
+        </script>
+      </head>
+      <body>
+        <vscode-data-grid id="scroller"></vscode-data-grid>
+        <vscode-divider></vscode-divider>
+        <p id="nextButton">Execute statement.</p>
+      </body>
+    </html>
+  `;
+}
+
 /**
  * 
  * @param {object[]} rows