From 2327e4e536e3be29ffd7af54ebba6ae24265c692 Mon Sep 17 00:00:00 2001 From: James Barnett Date: Sat, 17 Feb 2018 18:03:34 +0000 Subject: WIP - Add basic unstyled static tabs. IPC needs work --- editor-instance.js | 245 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 245 insertions(+) create mode 100644 editor-instance.js (limited to 'editor-instance.js') diff --git a/editor-instance.js b/editor-instance.js new file mode 100644 index 0000000..3ec123a --- /dev/null +++ b/editor-instance.js @@ -0,0 +1,245 @@ +"use strict"; + +const { ipcRenderer } = require('electron'); +const $ = window.jQuery = require("jquery"); +require("jquery-ui"); +require("jquery.tabulator"); +const cm = require("codemirror"); +require("codemirror/mode/sql/sql"); +require("codemirror/addon/hint/show-hint.js") +require("codemirror/addon/hint/sql-hint.js") +const Split = require("split.js"); + +const editorContext = cm(document.getElementById("editor"), { + value: "select *\nfrom information_schema.tables\n/\nselect now()\n/\nselect *\nfrom foo", + mode: "text/x-sql", + theme: "dracula", + lineNumbers: true, + gutters: ["CodeMirror-linenumbers", "statement-pointer"], + extraKeys: { "Ctrl-Space": "autocomplete" } +}); + +editorContext.on("cursorActivity", (instance) => { + let coords = instance.getCursor(); + $("#cursor-coords").text("Ln " + (parseInt(coords.line) + 1) + ", Col " + (parseInt(coords.ch) + 1)); +}); + +ipcRenderer.send("queryExecutor.queryTableMetadata"); +ipcRenderer.on("queryExecutor.queryTableMetadataComplete", (event, response) => { + console.log(response); + cm.commands.autocomplete = function (cmInstance) { + cm.showHint(cmInstance, cm.hint.sql, { + tables: response.result + }); + } +}); + +const statementDelimiter = "/"; + +let dataTable; +let execStartTime; +let execTimerInterval; +let execElapsedTime; +let queryMark; + +function runQuery() { + + _setExecutionStatusIndicator("RUNNING"); + _startExecTimer(); + + let query = findQuery(); + + ipcRenderer.send("queryExecutor.runQuery", query); +} + +/** + * If there's selected text, return it. Otherwise find the statement nearest the cursor. + * Statements are delimited by lines containing only a "/" character. + */ +function findQuery() { + let selectedText = editorContext.getSelection(); + + if (selectedText !== "") { + _clearQueryMarks(); + return selectedText; + } + else { + let cursorLine = editorContext.getCursor().line; + + let statementStartLine = editorContext.firstLine(); + + // lineCount rather than lastLine here, since lineCount is index 1 based. + // getRange(from, to) below is 0 based, but the range is exclusive, so if we need to include the last line we need the +1 + let statementEndLine = editorContext.lineCount(); + + // if the current line is a delimiter, thats the end of the statement + if (editorContext.getLine(cursorLine) === statementDelimiter) { + statementEndLine = cursorLine; + } + else { + // move down the document until a delimiter or the end of the document is reached + for (let i = cursorLine + 1; i <= editorContext.lastLine(); i++) { + if (editorContext.getLine(i) === statementDelimiter) { + statementEndLine = i; + break; + } + } + } + + // mode up the document until a previous statements delimiter is found or the start of the document is reached + for (let i = cursorLine - 1; i >= editorContext.firstLine(); i--) { + if (editorContext.getLine(i) === statementDelimiter) { + statementStartLine = i + 1; + break; + } + } + + let query = editorContext.getRange( + { line: statementStartLine, ch: 0 }, + { line: statementEndLine, ch: 0 } + ); + + console.log(query); + + _clearQueryMarks(); + + queryMark = editorContext.markText( + { line: statementStartLine, ch: 0 }, + { line: statementEndLine, ch: 0 }, + { className: "selected-statement" } + ); + + editorContext.setGutterMarker(statementStartLine, "statement-pointer", _createGutterMarkerDom()); + + return query; + } +} + +function _createGutterMarkerDom() { + return $("
>
").get(0); +} + +function _clearQueryMarks() { + if (queryMark) { + queryMark.clear(); + } + editorContext.clearGutter("statement-pointer"); +} + +ipcRenderer.on("queryExecutor.runQueryComplete", (event, response) => { + _stopExecTimer(); + if (response.error === undefined) { + handleResult(response.result); + } + else { + handleError(response.error); + } + +}); + +function _startExecTimer() { + execStartTime = new Date; + execElapsedTime = 0; + execTimerInterval = setInterval(() => { + execElapsedTime = Date.now() - execStartTime; + $("#execution-time").text("exec time: " + execElapsedTime + "ms"); + }, 10); +} + +function _stopExecTimer() { + clearInterval(execTimerInterval); + execStartTime = null; +} + +function handleError(err) { + _stopExecTimer(); + _destroyDataTable(); + $("#result-error").removeAttr("style").text("Error (" + err.code + ") - " + err.message); + _setExecutionStatusIndicator("ERROR"); + $("#execution-time").text("failed after " + execElapsedTime + " ms"); +} + +function handleResult(results) { + _stopExecTimer(); + _clearErrors(); + _destroyDataTable(); + + dataTable = $("#result-table").tabulator({ + height: "100%", + columns: _mapColumnProperties(results), + data: results.rows + }); + + _setExecutionStatusIndicator("OK"); + $("#execution-time").text("returned " + results.rowCount + " rows in " + execElapsedTime + " ms"); +} + +function _mapColumnProperties(results) { + return results.fields.map((column) => { + return { + field: column.name, + title: column.name + }; + }); +} + +function _resultTable() { + return $("#result-table"); +} + +function _setExecutionStatusIndicator(status) { + switch (status) { + case "RUNNING": + $("#execution-status").removeClass().addClass("exec-running").text("Running"); + break; + case "OK": + $("#execution-status").removeClass().addClass("exec-ok").text("Ok"); + break; + case "ERROR": + $("#execution-status").removeClass().addClass("exec-error").text("Error"); + break; + } +} + +function _destroyDataTable() { + if (dataTable) { + _resultTable().tabulator("destroy"); + _resultTable().removeAttr("style").empty(); + dataTable = undefined; + } +} + +function _clearErrors() { + $("#result-error").attr("style", "display:none;").empty(); +} + +function _onKeyUp(event) { + if (event.ctrlKey && event.keyCode == 13) { + runQuery(); + } +} + +$(document).ready(() => { + + // Event handlers + $("#run-query").click(runQuery); + $(document).keyup(_onKeyUp); + + Split([".editor-row", ".results-row"], { + sizes: [50, 50], + direction: "vertical", + gutterSize: 10, + elementStyle: (dimension, size, gutterSize) => { + return { + "flex-basis": "calc(" + size + "% - " + gutterSize + "px" + } + }, + gutterStyle: (dimension, gutterSize) => { + return { + "flex-basis": gutterSize + "px" + } + } + }); + +}) + -- cgit v1.2.3 From 0c0fdc4e61d07d8883c382a4dd9d1afaa1874c33 Mon Sep 17 00:00:00 2001 From: James Barnett Date: Sat, 17 Feb 2018 18:29:47 +0000 Subject: Add instance IDs to allow IPC message routing --- editor-instance.js | 38 ++++++++++++++++++++++++++------------ 1 file changed, 26 insertions(+), 12 deletions(-) (limited to 'editor-instance.js') diff --git a/editor-instance.js b/editor-instance.js index 3ec123a..cb26db7 100644 --- a/editor-instance.js +++ b/editor-instance.js @@ -6,10 +6,13 @@ require("jquery-ui"); require("jquery.tabulator"); const cm = require("codemirror"); require("codemirror/mode/sql/sql"); -require("codemirror/addon/hint/show-hint.js") -require("codemirror/addon/hint/sql-hint.js") +require("codemirror/addon/hint/show-hint.js"); +require("codemirror/addon/hint/sql-hint.js"); const Split = require("split.js"); +const editorInstanceId = require('uuid/v1')(); +console.log("instanceId=" + editorInstanceId); + const editorContext = cm(document.getElementById("editor"), { value: "select *\nfrom information_schema.tables\n/\nselect now()\n/\nselect *\nfrom foo", mode: "text/x-sql", @@ -24,7 +27,7 @@ editorContext.on("cursorActivity", (instance) => { $("#cursor-coords").text("Ln " + (parseInt(coords.line) + 1) + ", Col " + (parseInt(coords.ch) + 1)); }); -ipcRenderer.send("queryExecutor.queryTableMetadata"); +ipcRenderer.send("queryExecutor.queryTableMetadata", _generateIpcPayload()); ipcRenderer.on("queryExecutor.queryTableMetadataComplete", (event, response) => { console.log(response); cm.commands.autocomplete = function (cmInstance) { @@ -47,9 +50,10 @@ function runQuery() { _setExecutionStatusIndicator("RUNNING"); _startExecTimer(); - let query = findQuery(); + let payload = _generateIpcPayload(); + payload.query = findQuery(); - ipcRenderer.send("queryExecutor.runQuery", query); + ipcRenderer.send("queryExecutor.runQuery", payload); } /** @@ -126,15 +130,25 @@ function _clearQueryMarks() { editorContext.clearGutter("statement-pointer"); } -ipcRenderer.on("queryExecutor.runQueryComplete", (event, response) => { - _stopExecTimer(); - if (response.error === undefined) { - handleResult(response.result); - } - else { - handleError(response.error); +function _generateIpcPayload() { + return { + editorInstanceId: editorInstanceId } +} +ipcRenderer.on("queryExecutor.runQueryComplete", (event, response) => { + // TODO - new instances should register with the instance manager, and the manager should proxy IPC messages only to + // the webview which sent the message. Rather than sending to all instances and the instance having to check + // if they were the intended recipient + if (response.editorInstanceId === editorInstanceId) { + _stopExecTimer(); + if (response.error === undefined) { + handleResult(response.result); + } + else { + handleError(response.error); + } + } }); function _startExecTimer() { -- cgit v1.2.3 From b81c0f834f7f2285c40cfd57eb2943140025edad Mon Sep 17 00:00:00 2001 From: James Barnett Date: Tue, 20 Feb 2018 21:44:28 +0000 Subject: Dynamically create query executors - WIP --- editor-instance.js | 29 ++++++++++++++++++----------- 1 file changed, 18 insertions(+), 11 deletions(-) (limited to 'editor-instance.js') diff --git a/editor-instance.js b/editor-instance.js index cb26db7..008705f 100644 --- a/editor-instance.js +++ b/editor-instance.js @@ -11,7 +11,8 @@ require("codemirror/addon/hint/sql-hint.js"); const Split = require("split.js"); const editorInstanceId = require('uuid/v1')(); -console.log("instanceId=" + editorInstanceId); + +let queryExecutorId; const editorContext = cm(document.getElementById("editor"), { value: "select *\nfrom information_schema.tables\n/\nselect now()\n/\nselect *\nfrom foo", @@ -27,7 +28,20 @@ editorContext.on("cursorActivity", (instance) => { $("#cursor-coords").text("Ln " + (parseInt(coords.line) + 1) + ", Col " + (parseInt(coords.ch) + 1)); }); -ipcRenderer.send("queryExecutor.queryTableMetadata", _generateIpcPayload()); +const statementDelimiter = "/"; + +let dataTable; +let execStartTime; +let execTimerInterval; +let execElapsedTime; +let queryMark; + +ipcRenderer.on("editorInstance.registerQueryExecutor", (event, payload) => { + queryExecutorId = payload; + console.log(queryExecutorId); + ipcRenderer.send("queryExecutor.queryTableMetadata", _generateIpcPayload()); +}) + ipcRenderer.on("queryExecutor.queryTableMetadataComplete", (event, response) => { console.log(response); cm.commands.autocomplete = function (cmInstance) { @@ -37,14 +51,6 @@ ipcRenderer.on("queryExecutor.queryTableMetadataComplete", (event, response) => } }); -const statementDelimiter = "/"; - -let dataTable; -let execStartTime; -let execTimerInterval; -let execElapsedTime; -let queryMark; - function runQuery() { _setExecutionStatusIndicator("RUNNING"); @@ -132,7 +138,8 @@ function _clearQueryMarks() { function _generateIpcPayload() { return { - editorInstanceId: editorInstanceId + editorInstanceId: editorInstanceId, + queryExecutorId: queryExecutorId } } -- cgit v1.2.3 From 703f78867653ed9c53a745f9808eb96ae8a89dc7 Mon Sep 17 00:00:00 2001 From: James Barnett Date: Wed, 21 Feb 2018 21:28:39 +0000 Subject: Ensure query error messages survive the IPC serialisaion --- editor-instance.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'editor-instance.js') diff --git a/editor-instance.js b/editor-instance.js index 008705f..8ed6674 100644 --- a/editor-instance.js +++ b/editor-instance.js @@ -175,7 +175,7 @@ function _stopExecTimer() { function handleError(err) { _stopExecTimer(); _destroyDataTable(); - $("#result-error").removeAttr("style").text("Error (" + err.code + ") - " + err.message); + $("#result-error").removeAttr("style").text("Error (" + err.code + ") - " + err.cause); _setExecutionStatusIndicator("ERROR"); $("#execution-time").text("failed after " + execElapsedTime + " ms"); } -- cgit v1.2.3