sqlite-wasm-viewer 1.0.13 → 1.2.0

package/dist/viewer.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Viewer = void 0;
+var _dbWorkerConnector = require("./dbWorkerConnector");
+var _resizeHandler = require("./utils/resizeHandler");
+var _EditCellView = require("./views/EditCellView/EditCellView");
+var _ExecuteSQLView = require("./views/ExecuteSQLView/ExecuteSQLView");
+var _ExplorerView = require("./views/ExplorerView/ExplorerView");
+var _SqlLogView = require("./views/SqlLogView/SqlLogView");
+var _TableView = require("./views/TableView/TableView");
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var Viewer = /*#__PURE__*/function () {
+  function Viewer(config, onClickClose) {
+    _classCallCheck(this, Viewer);
+    this.onClickClose = onClickClose;
+    this.createElements();
+    (0, _dbWorkerConnector.connectToWorker)(config);
+  }
+  _createClass(Viewer, [{
+    key: "createElements",
+    value: function createElements() {
+      var _this = this;
+      this._container = document.createElement('div');
+      this._container.id = 'viewer';
+      var closeBtn = document.createElement('button');
+      closeBtn.id = 'close_btn';
+      closeBtn.innerText = 'Close';
+      closeBtn.onclick = function () {
+        _this.onClickClose();
+      };
+      this._container.appendChild(closeBtn);
+
+      // Left Panel
+      var leftPanel = document.createElement('div');
+      leftPanel.id = 'db_list';
+      (0, _ExplorerView.createExplorerView)(leftPanel, this._container);
+      this._container.appendChild(leftPanel);
+
+      // Middle Panel
+      var middlePanel = document.createElement('div');
+      middlePanel.id = 'middle_panel';
+      var listResizeHandlerEl = (0, _resizeHandler.createResizeHandler)(leftPanel, middlePanel, true, this._container);
+      this._container.appendChild(listResizeHandlerEl);
+      var tableViewEl = document.createElement('div');
+      tableViewEl.id = 'table_view';
+      middlePanel.appendChild(tableViewEl);
+      (0, _TableView.createTableView)(tableViewEl);
+      this._container.append(middlePanel);
+
+      // Right Panel
+      var rightPanel = document.createElement('div');
+      rightPanel.id = 'right_panel';
+      var rightPanelResizeHandlerEl = (0, _resizeHandler.createResizeHandler)(middlePanel, rightPanel, false, this._container);
+      this._container.appendChild(rightPanelResizeHandlerEl);
+      (0, _EditCellView.createEditCellView)(rightPanel);
+      (0, _ExecuteSQLView.createSQLExecutorView)(rightPanel);
+      (0, _SqlLogView.createSqlLogView)(rightPanel);
+      this._container.append(rightPanel);
+    }
+  }, {
+    key: "element",
+    get: function get() {
+      return this._container;
+    }
+  }]);
+  return Viewer;
+}();
+exports.Viewer = Viewer;

package/dist/views/EditCellView/EditCellView.js

@@ -4,8 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EditCellView = void 0;
-var _viewerState = require("../../viewerState");
+exports.createEditCellView = createEditCellView;
+var Bus = _interopRequireWildcard(require("../../bus"));
+var _QueryRunner = require("../../QueryRunner");
+var _state = require("../../state");
 require("./styles.css");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
@@ -13,17 +18,20 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var EditCellView = /*#__PURE__*/function () {
-  function EditCellView(viewerElem, rootEl) {
+  function EditCellView(rootEl) {
     var _this = this;
     _classCallCheck(this, EditCellView);
-    this.viewerElem = viewerElem;
     this.rootEl = rootEl;
     this.buildDom();
-    viewerElem.addEventListener('cellSelected', function (event) {
-      var cell = event.detail;
-      _this.currentCell = cell;
-      _this.textArea.value = cell.value;
-      _this.textArea.select();
+    Bus.listen('cell-selected', function (cell) {
+      if (cell) {
+        _this.textArea.value = cell.value;
+        _this.textArea.select();
+        _this.textArea.placeholder = '';
+      } else {
+        _this.textArea.value = '';
+        _this.textArea.placeholder = 'Select cell to edit...';
+      }
     });
   }
   _createClass(EditCellView, [{
@@ -36,10 +44,12 @@ var EditCellView = /*#__PURE__*/function () {
       header.innerText = 'Edit Cell';
       container.appendChild(header);
       this.textArea = document.createElement('textarea');
+      this.textArea.placeholder = 'Select cell to edit...';
       this.textArea.id = 'execute_sql_textarea';
       container.appendChild(this.textArea);
       var executeBtn = document.createElement('button');
       executeBtn.innerText = 'Apply';
+      executeBtn.classList.add('panelActionBtn');
       executeBtn.onclick = this.handleApplyEdit.bind(this);
       container.appendChild(executeBtn);
       this.rootEl.appendChild(container);
@@ -48,27 +58,30 @@ var EditCellView = /*#__PURE__*/function () {
     key: "handleApplyEdit",
     value: function handleApplyEdit() {
       if (this.textArea.value) {
-        var _this$queryRunner2, _this$currentCell, _this$currentCell2, _this$currentCell3;
-        if (!_viewerState.ViewerState.instance.hasChanges) {
-          var _this$queryRunner;
-          (_this$queryRunner = this.queryRunner) === null || _this$queryRunner === void 0 ? void 0 : _this$queryRunner.runQuery({
+        var _this$currentCell, _this$currentCell2, _this$currentCell3;
+        if (!(0, _state.isDirty)()) {
+          _QueryRunner.queryRunner.runQuery({
             sql: 'SAVEPOINT "RESTOREPOINT"',
             parameters: []
           });
         }
-        (_this$queryRunner2 = this.queryRunner) === null || _this$queryRunner2 === void 0 ? void 0 : _this$queryRunner2.runQuery({
+        _QueryRunner.queryRunner.runQuery({
           sql: "UPDATE ".concat((_this$currentCell = this.currentCell) === null || _this$currentCell === void 0 ? void 0 : _this$currentCell.tableName, " SET \"").concat((_this$currentCell2 = this.currentCell) === null || _this$currentCell2 === void 0 ? void 0 : _this$currentCell2.columnName, "\"=? WHERE \"_rowid_\"='").concat((_this$currentCell3 = this.currentCell) === null || _this$currentCell3 === void 0 ? void 0 : _this$currentCell3.cellRowId, "'"),
           parameters: [this.textArea.value]
         });
-        _viewerState.ViewerState.instance.setHasChanges(true);
+        if (this.currentCell) {
+          Bus.emit('cell-edited', {
+            cell: this.currentCell,
+            value: this.textArea.value
+          });
+        }
+        (0, _state.setDirty)(true);
       }
     }
-  }, {
-    key: "setDb",
-    value: function setDb(queryRunner) {
-      this.queryRunner = queryRunner;
-    }
   }]);
   return EditCellView;
 }();
-exports.EditCellView = EditCellView;
+exports.EditCellView = EditCellView;
+function createEditCellView(rootEl) {
+  return new EditCellView(rootEl);
+}

package/dist/views/EditCellView/styles.css

@@ -1,23 +1,30 @@
 #execute_sql_container {
     display: flex;
     flex-direction: column;
+    height: 100%;
 }
 
 #execute_sql_editor {
     position: relative;
-    background-color: white;
-    height: 300px;
+    background-color: #fff;
+    height: 100%;
 }
 
 #execute_sql_textarea {
     resize: none;
-    height: 300px;
-    background-color: white;
+    height: 100%;
+    min-height: 150px;
+    background: #f8fafc;
     overflow: auto;
     white-space: nowrap;
-    font-size: 10pt;
-    font-family: monospace;
-    line-height: 1.5;
+    font-size: 12px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+    line-height: 1.45;
     tab-size: 2;
-    caret-color: black;
+    caret-color: #111827;
+    color: #0f172a;
+    border: 0;
+    border-top: 1px solid #e5e7eb;
+    border-bottom: 1px solid #e5e7eb;
+    border-radius: 0;
 }

package/dist/views/ExecuteSQLView/ExecuteSQLView.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ExecuteSQLView = void 0;
+exports.createSQLExecutorView = createSQLExecutorView;
+var _QueryRunner = require("../../QueryRunner");
 require("./styles.css");
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -31,6 +32,7 @@ var ExecuteSQLView = /*#__PURE__*/function () {
       container.appendChild(this.textArea);
       var executeBtn = document.createElement('button');
       executeBtn.innerText = 'Execute SQL';
+      executeBtn.classList.add('panelActionBtn');
       executeBtn.onclick = this.handleExecuteSql.bind(this);
       container.appendChild(executeBtn);
       this.rootEl.appendChild(container);
@@ -39,19 +41,15 @@ var ExecuteSQLView = /*#__PURE__*/function () {
     key: "handleExecuteSql",
     value: function handleExecuteSql() {
       if (this.textArea.value) {
-        var _this$queryRunner;
-        (_this$queryRunner = this.queryRunner) === null || _this$queryRunner === void 0 ? void 0 : _this$queryRunner.runQuery({
+        _QueryRunner.queryRunner.runQuery({
           sql: this.textArea.value,
           parameters: []
         });
       }
     }
-  }, {
-    key: "setDb",
-    value: function setDb(queryRunner) {
-      this.queryRunner = queryRunner;
-    }
   }]);
   return ExecuteSQLView;
 }();
-exports.ExecuteSQLView = ExecuteSQLView;
+function createSQLExecutorView(rootEl) {
+  return new ExecuteSQLView(rootEl);
+}

package/dist/views/ExecuteSQLView/styles.css

@@ -1,47 +1,51 @@
 #execute_sql_container {
     display: flex;
     flex-direction: column;
+    height: 100%;
 }
 
 #execute_sql_editor {
     position: relative;
-    background-color: white;
-    height: 300px;
+    background-color: #fff;
+    height: 100%;
 }
 
 #execute_sql_textarea, #execute_sql_highlighting {
     resize: none;
-    height: 300px;
-    background-color: white;
+    height: 100%;
+    min-height: 150px;
+    background: #f8fafc;
     overflow: auto;
     white-space: nowrap;
-    font-size: 10pt;
-    font-family: monospace;
-    line-height: 1.5;
+    font-size: 12px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+    line-height: 1.45;
     tab-size: 2;
-    caret-color: black;
+    caret-color: #111827;
+    color: #0f172a;
 }
 
 #execute_sql_highlighting {
     z-index: 0;
     margin: 0;
-    padding: 2px;
+    padding: 8px;
+    border-top: 1px solid #e5e7eb;
+    border-bottom: 1px solid #e5e7eb;
+    border-radius: 0;
 }
 
 .highlighting {
-    color: blue;
+    color: #2563eb;
 }
 
 .sql-hl-keyword {
-    color: purple;
-    /* font-weight: 600; */
+    color: #7c3aed;
 }
 
 .sql-hl-special {
-    color: black;
+    color: #0f172a;
 }
 
 .sql-hl-string {
-    color: red;
-    /* font-weight: 600; */
+    color: #dc2626;
 }

package/dist/views/ExplorerView/ExplorerView.js

@@ -4,8 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExplorerView = void 0;
-var _viewerState = require("../../viewerState");
+exports.createExplorerView = createExplorerView;
+var Bus = _interopRequireWildcard(require("../../bus"));
+var _state = require("../../state");
 require("./styles.css");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
@@ -16,11 +20,15 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 var EXPANDED_EXPLORER_ITEMS_KEY = 'expanded_explorer_items';
 var ExplorerView = /*#__PURE__*/function () {
   function ExplorerView(rootEl, viewEl) {
-    var _localStorage$getItem;
+    var _this = this,
+      _localStorage$getItem;
     _classCallCheck(this, ExplorerView);
     _defineProperty(this, "expandedItems", {});
     _defineProperty(this, "selectedItem", null);
     _defineProperty(this, "showFullItemLabelTimeout", 0);
+    Bus.listen('db-found', function (table) {
+      _this.addDatabaseItem(table);
+    });
     this.dbs = [];
     this.scheduleShowFullItemLabel = this.scheduleShowFullItemLabel.bind(this);
     this.hideFullItemLabel = this.hideFullItemLabel.bind(this);
@@ -52,16 +60,16 @@ var ExplorerView = /*#__PURE__*/function () {
   }, {
     key: "buildDom",
     value: function buildDom() {
-      var _this = this;
+      var _this2 = this;
       this.containerEl.innerHTML = '';
       this.dbs.forEach(function (db) {
-        _this.buildDbGroupDom(db);
+        _this2.buildDbGroupDom(db);
       });
     }
   }, {
     key: "buildDbGroupDom",
     value: function buildDbGroupDom(db) {
-      var _this2 = this;
+      var _this3 = this;
       var dbRoot = document.createDocumentFragment();
       var dbItem = document.createElement('div');
       this.setupCommonItemDom(dbItem);
@@ -74,7 +82,7 @@ var ExplorerView = /*#__PURE__*/function () {
       this.buildExpandArrowDom(dbItem, tablesContainer, db, isExpanded);
       dbRoot.appendChild(dbItem);
       db.tables.forEach(function (table) {
-        _this2.buildTableDom(tablesContainer, table, db);
+        _this3.buildTableDom(tablesContainer, table, db);
       });
       tablesContainer.style.display = isExpanded ? 'block' : 'none';
       dbRoot.appendChild(tablesContainer);
@@ -83,7 +91,7 @@ var ExplorerView = /*#__PURE__*/function () {
   }, {
     key: "buildExpandArrowDom",
     value: function buildExpandArrowDom(itemElem, tablesContainer, db, isExpanded) {
-      var _this3 = this;
+      var _this4 = this;
       var expandArrow = document.createElement('div');
       expandArrow.className = 'expand';
       expandArrow.innerHTML = '&#9656;';
@@ -92,24 +100,24 @@ var ExplorerView = /*#__PURE__*/function () {
         expandArrow.classList.add('expanded');
       }
       expandArrow.onclick = function () {
-        _this3.expandedItems[db.filename] = !_this3.expandedItems[db.filename];
-        tablesContainer.style.display = _this3.expandedItems[db.filename] ? 'block' : 'none';
+        _this4.expandedItems[db.filename] = !_this4.expandedItems[db.filename];
+        tablesContainer.style.display = _this4.expandedItems[db.filename] ? 'block' : 'none';
         expandArrow.classList.toggle('expanded');
-        localStorage.setItem(EXPANDED_EXPLORER_ITEMS_KEY, JSON.stringify(_this3.expandedItems));
+        localStorage.setItem(EXPANDED_EXPLORER_ITEMS_KEY, JSON.stringify(_this4.expandedItems));
       };
       itemElem.appendChild(expandArrow);
     }
   }, {
     key: "buildTableDom",
     value: function buildTableDom(tablesContainer, tableName, db) {
-      var _this4 = this,
+      var _this5 = this,
         _this$selectedItem,
         _this$selectedItem2;
       var tableItem = document.createElement('div');
       this.setupCommonItemDom(tableItem);
       tableItem.classList.add('table');
       tableItem.onclick = function () {
-        _this4.selectTable(tableItem, db);
+        _this5.selectTable(tableItem, db);
       };
       if (((_this$selectedItem = this.selectedItem) === null || _this$selectedItem === void 0 ? void 0 : _this$selectedItem.tableName) === tableName && ((_this$selectedItem2 = this.selectedItem) === null || _this$selectedItem2 === void 0 ? void 0 : _this$selectedItem2.dbName) === db.filename) {
         this.selectedItem.tableElem = tableItem;
@@ -132,7 +140,7 @@ var ExplorerView = /*#__PURE__*/function () {
           tableElem: tableEl
         };
         var databasePath = databaseItem.filename;
-        _viewerState.ViewerState.instance.setSelectedTable({
+        (0, _state.selectTable)({
           tableName: tableName,
           databasePath: databasePath
         });
@@ -156,13 +164,13 @@ var ExplorerView = /*#__PURE__*/function () {
   }, {
     key: "scheduleShowFullItemLabel",
     value: function scheduleShowFullItemLabel(event) {
-      var _this5 = this;
+      var _this6 = this;
       var item = event.target;
       var label = item.querySelector('.label');
       if (label && label.offsetWidth < label.scrollWidth) {
         clearTimeout(this.showFullItemLabelTimeout);
         this.showFullItemLabelTimeout = window.setTimeout(function () {
-          _this5.showFullItemLabel(item);
+          _this6.showFullItemLabel(item);
         }, 300);
       }
     }
@@ -190,4 +198,12 @@ var ExplorerView = /*#__PURE__*/function () {
   }]);
   return ExplorerView;
 }();
-exports.ExplorerView = ExplorerView;
+exports.ExplorerView = ExplorerView;
+var _explorerView;
+function createExplorerView(rootEl, viewEl) {
+  if (!_explorerView) {
+    _explorerView = new ExplorerView(rootEl, viewEl);
+  } else {
+    // console.warn('ExplorerView is already created');
+  }
+}

package/dist/views/ExplorerView/styles.css

@@ -1,19 +1,21 @@
 #explorer_tree {
-    padding: 8px;
-    padding-left: 20px;
+    padding: 8px 8px 8px 20px;
     overflow-y: auto;
     scrollbar-gutter: stable;
+    background: #fff;
 }
 
 #explorer_tree .item {
-    height: 20px;
+    height: 26px;
     white-space: nowrap;
     text-overflow: ellipsis;
-    background-color: darkgray;
+    background: transparent;
+    border-radius: 6px;
+    color: #334155;
 }
 
 #explorer_tree .item > .label {
-    padding: 2px 4px;
+    padding: 4px 8px;
     overflow: hidden;
     text-overflow: ellipsis;
 }
@@ -24,14 +26,15 @@
 
 #explorer_tree .expand {
     position: absolute;
-    top: 1px;
+    top: 3px;
     left: -20px;
     width: 20px;
     height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all .1s ease-in;
+    color: #64748b;
+    transition: all 0.12s ease-in;
 }
 
 #explorer_tree .expanded {
@@ -43,16 +46,25 @@
     cursor: pointer;
 }
 
+#explorer_tree .table:hover,
+#explorer_tree .db:hover {
+    background: #f1f5f9;
+}
+
 #explorer_tree .table.selected {
-    background-color: rgb(128, 128, 128);
+    background: #e2e8f0;
+    color: #0f172a;
+    font-weight: 600;
 }
 
 #viewer #full_label {
     position: absolute;
     pointer-events: none;
     z-index: 99999;
-    border: 1px solid gray;
-    background-color: darkgray;
-    padding: 2px 4px;
-    border-radius: 2px;
+    border: 1px solid #cbd5e1;
+    background-color: #fff;
+    color: #0f172a;
+    padding: 4px 8px;
+    border-radius: 6px;
+    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.16);
 }

package/dist/views/SqlLogView/SqlLogView.js

@@ -3,8 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.initSqlLogView = initSqlLogView;
+exports.createSqlLogView = createSqlLogView;
+var Bus = _interopRequireWildcard(require("../../bus"));
 require("./styles.css");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
@@ -12,10 +15,16 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var SqlLogView = /*#__PURE__*/function () {
-  function SqlLogView(rootEl, queryRunner) {
+  function SqlLogView(rootEl) {
     var _this = this;
     _classCallCheck(this, SqlLogView);
-    queryRunner.addListener(this.handleQueryRun.bind(this));
+    Bus.listen('query-run', function (query) {
+      if (query.errorMsg) {
+        _this.textArea.value += "Error while running previous query: ".concat(query.errorMsg, "\n");
+      } else {
+        _this.textArea.value += "".concat(query.sql, "\n");
+      }
+    });
     var container = document.createElement('div');
     container.id = 'sql_log_container';
     var header = document.createElement('div');
@@ -43,6 +52,6 @@ var SqlLogView = /*#__PURE__*/function () {
   }]);
   return SqlLogView;
 }();
-function initSqlLogView(rootEl, queryRunner) {
-  return new SqlLogView(rootEl, queryRunner);
+function createSqlLogView(rootEl) {
+  return new SqlLogView(rootEl);
 }

package/dist/views/SqlLogView/styles.css

@@ -2,9 +2,19 @@
     flex-grow: 1;
     display: flex;
     flex-direction: column;
+    height: 100%;
 }
 
 #query_log_text {
     resize: none;
     height: 100%;
+    min-height: 150px;
+    background: #f8fafc;
+    color: #1e293b;
+    border: 0;
+    border-top: 1px solid #e5e7eb;
+    border-radius: 0;
+    font-size: 12px;
+    line-height: 1.45;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
 }