Use SQL wasm to improve performance

inloop · Jan 16, 2024 · ffb7a69 · ffb7a69
1 parent 576c3de
commit ffb7a69
Show file tree

Hide file tree

Showing 5 changed files with 204 additions and 225 deletions.
diff --git a/index.html b/index.html
@@ -138,7 +138,7 @@ <h4 class="mb-0">SQLite Viewer</h4>
 
 <script src="js/jquery-3.7.1.min.js"></script>
 <script src="js/filereader.js"></script>
-<script src="js/sql.js?v=190"></script>
+<script src="js/sql-wasm.js?v=1100"></script>
 <script src="js/select2.min.js?v=4013"></script>
 <script src="js/ace/ace.js?v=1323"></script>
 <script src="js/bootstrap.bundle.min.js?v=532"></script>

diff --git a/js/main.js b/js/main.js
@@ -45,7 +45,7 @@ function initialize() {
         onKeyDown(e);
     })
 
-    if (typeof FileReader === "undefined") {
+        if (typeof FileReader === "undefined" || typeof WebAssembly === "undefined") {
         $('#dropzone, #dropzone-dialog').hide();
         $('#compat-error').toggleClass("d-none", false);
     } else {
@@ -100,7 +100,7 @@ function loadDB(arrayBuffer) {
 
     resetTableList();
 
-    initSqlJs().then(function(SQL){
+    initSqlJs({ locateFile: file => `/js/${file}` }).then(function(SQL){
         let tables;
         try {
             db = new SQL.Database(new Uint8Array(arrayBuffer));
@@ -378,17 +378,15 @@ function renderQuery(query) {
         return;
     }
 
-    let addedColumns = false;
-    while (sel.step()) {
-        if (!addedColumns) {
-            addedColumns = true;
-            const columnNames = sel.getColumnNames();
-            for (let i = 0; i < columnNames.length; i++) {
-                const type = columnTypes[columnNames[i]];
-                thead.append('<th><span data-bs-toggle="tooltip" title="' + type + '">' + columnNames[i] + "</span></th>");
-            }
-        }
+    let isEmptyTable = true;
+    const columnNames = sel.getColumnNames();
+    for (let i = 0; i < columnNames.length; i++) {
+        const type = columnTypes[columnNames[i]];
+        thead.append('<th><span data-bs-toggle="tooltip" title="' + type + '">' + columnNames[i] + "</span></th>");
+    }
 
+    while (sel.step()) {
+        isEmptyTable = false;
         const tr = $('<tr>');
         const s = sel.get();
         for (let i = 0; i < s.length; i++) {
@@ -397,7 +395,7 @@ function renderQuery(query) {
         tbody.append(tr);
     }
 
-    if (!addedColumns) {
+    if (isEmptyTable) {
         infoBox.text("No data for given select.")
         infoBox.show();
     }