Get initial sql values back from file which is database

6 files changed, 42 insertions, 3 deletions

diff --git a/app/assets/javascripts/blob/balsamiq/index.js b/app/assets/javascripts/blob/balsamiq/index.js
new file mode 100644
index 00000000000..04201366897
--- /dev/null
+++ b/app/assets/javascripts/blob/balsamiq/index.js
@@ -0,0 +1,27 @@
+import Vue from 'vue';
+import sqljs from 'sql.js';
+
+export default class BalsamiqViewer {
+  constructor(el) {
+    this.el = el;
+    this.loadSqlFile();
+  }
+  
+  
+
+  loadSqlFile() {
+    var xhr = new XMLHttpRequest();
+    console.log(this.el)
+    xhr.open('GET', this.el.dataset.endpoint, true);
+    xhr.responseType = 'arraybuffer';
+
+    xhr.onload = function(e) {
+      var uInt8Array = new Uint8Array(this.response);
+      var db = new SQL.Database(uInt8Array);
+      var contents = db.exec("SELECT * FROM thumbnails");
+      console.log(contents)
+      // contents is now [{columns:['col1','col2',...], values:[[first row], [second row], ...]}]
+    };
+    xhr.send();
+  }
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/blob/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq_viewer.js
new file mode 100644
index 00000000000..b1493398099
--- /dev/null
+++ b/app/assets/javascripts/blob/balsamiq_viewer.js
@@ -0,0 +1,5 @@
+import BalsamiqViewer from './balsamiq';
+
+document.addEventListener('DOMContentLoaded', () => {
+  new BalsamiqViewer(document.getElementById('js-balsamiq-viewer'));
+});
\ No newline at end of file
diff --git a/app/views/projects/blob/balsamiq_viewer.js b/app/views/projects/blob/balsamiq_viewer.js
deleted file mode 100644
index b60cfe165a4..00000000000
--- a/app/views/projects/blob/balsamiq_viewer.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import renderBalsamiq from './balsamiq';
-
-document.addEventListener('DOMContentLoaded', renderBalsamiq);
\ No newline at end of file
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 42638d47cfa..bc4126bce02 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -15,6 +15,10 @@ var DEV_SERVER_LIVERELOAD = process.env.DEV_SERVER_LIVERELOAD !== 'false';
 var WEBPACK_REPORT = process.env.WEBPACK_REPORT;
 
 var config = {
+  // because sqljs requires fs.
+  node: {
+    fs: "empty"
+  },
   context: path.join(ROOT_PATH, 'app/assets/javascripts'),
   entry: {
     common:               './commons/index.js',
@@ -118,6 +122,7 @@ var config = {
         'merge_conflicts',
         'notebook_viewer',
         'pdf_viewer',
+        'balsamiq_viewer',
         'vue_pipelines',
       ],
       minChunks: function(module, count) {
diff --git a/package.json b/package.json
index 6d4f99e33b3..eb680b0d76c 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "raphael": "^2.2.7",
     "raw-loader": "^0.5.1",
     "select2": "3.5.2-browserify",
+    "sql.js": "^0.4.0",
     "stats-webpack-plugin": "^0.4.3",
     "three": "^0.84.0",
     "three-orbit-controls": "^82.1.0",
diff --git a/yarn.lock b/yarn.lock
index 2434b3a8a48..d0175ca9f98 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4154,6 +4154,10 @@ sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
 
+sql.js@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/sql.js/-/sql.js-0.4.0.tgz#23be9635520eb0ff43a741e7e830397266e88445"
+
 sshpk@^1.7.0:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.10.2.tgz#d5a804ce22695515638e798dbe23273de070a5fa"