adds explain selected feature refs: #533

extends pgsql ace editor mode with code folding adds more functionality and renames getQueryEditorValue to getEditorContent
commandprompt · Nov 12, 2024 · 6a3f0b8 · 6a3f0b8
1 parent df6409f
commit 6a3f0b8
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 13 deletions.
diff --git a/pgmanage/app/static/pgmanage_frontend/src/ace-mode-pgsql-extended.js b/pgmanage/app/static/pgmanage_frontend/src/ace-mode-pgsql-extended.js
@@ -0,0 +1,18 @@
+ace.define(
+  "ace/mode/pgsql_extended",
+  ["require", "exports", "ace/lib/oop", "ace/mode/text", "ace/range"],
+  function (acequire, exports) {
+    const oop = acequire("ace/lib/oop");
+    const PgsqlMode = acequire("ace/mode/pgsql").Mode;
+    const SqlFoldMode = acequire("./folding/sql").FoldMode;
+
+    const ExtendedPgsqlMode = function () {
+      PgsqlMode.call(this);
+      this.foldingRules = new SqlFoldMode();
+    };
+    oop.inherits(ExtendedPgsqlMode, PgsqlMode);
+
+    // Export the mode
+    exports.Mode = ExtendedPgsqlMode;
+  }
+);
diff --git a/pgmanage/app/static/pgmanage_frontend/src/components/QueryEditor.vue b/pgmanage/app/static/pgmanage_frontend/src/components/QueryEditor.vue
@@ -101,7 +101,7 @@ export default {
     },
     setupEditor() {
       const EDITOR_MODEMAP = {
-        'postgresql': 'pgsql',
+        'postgresql': 'pgsql_extended',
         'mysql': 'mysql',
         'mariadb': 'mysql',
         'oracle': 'plsql'
@@ -194,13 +194,16 @@ export default {
 
       this.completer = new SQLAutocomplete(DIALECT_MAP[this.dialect] || SQLDialect.PLpgSQL, filteredMeta);
     },
-    getQueryEditorValue(raw_query) {
-      if (raw_query) return this.editor.getValue();
+    getEditorContent({ getFullContent = false, singleLineQuery = false } = {}) {
+      if (getFullContent) return this.editor.getValue();
+
       let selectedText = this.editor.getSelectedText();
-      let lineAtCursor = this.editor.session.getLine(
-        this.editor.getCursorPosition().row
-      );
-      return !!selectedText ? selectedText : lineAtCursor;
+
+      if (!selectedText && singleLineQuery) {
+        return this.editor.session.getLine(this.editor.getCursorPosition().row);
+      }
+
+      return selectedText || this.editor.getValue();
     },
     getQueryOffset() {
       return this.editor.selection.getRange().start.row

diff --git a/pgmanage/app/static/pgmanage_frontend/src/components/QueryTab.vue b/pgmanage/app/static/pgmanage_frontend/src/components/QueryTab.vue
@@ -251,14 +251,14 @@ export default {
     }
   },
   methods: {
-    getQueryEditorValue(raw_query) {
-      return this.$refs.editor.getQueryEditorValue(raw_query);
+    getEditorContent(getFullContent=false, singleLineQuery=false) {
+      return this.$refs.editor.getEditorContent({getFullContent: getFullContent, singleLineQuery: singleLineQuery})
     },
     querySQL(
       mode,
       cmd_type = null,
       all_data = false,
-      query = this.getQueryEditorValue(true),
+      query = this.getEditorContent(true),
       log_query = true,
       save_query = this.editorContent,
       clear_data = false
@@ -388,7 +388,7 @@ export default {
       }
     },
     runExplain(explainMode) {
-      let command = this.getQueryEditorValue(true);
+      let command = this.getEditorContent();
 
       if (command.trim() === "") {
         showToast("info", "Please provide a string.");
@@ -416,7 +416,7 @@ export default {
       }
     },
     queryRunOrExplain(use_raw_query=true) {
-      let query = this.getQueryEditorValue(use_raw_query)
+      let query = this.getEditorContent(use_raw_query)
       if (this.dialect === "postgresql") {
         let should_explain =
           query.trim().split(" ")[0].toUpperCase() === "EXPLAIN";
@@ -437,7 +437,7 @@ export default {
     },
     exportData() {
       let cmd_type = `export_${this.exportType}`;
-      let command = this.lastQuery || this.getQueryEditorValue(true);
+      let command = this.lastQuery || this.getEditorContent(true);
       let explainRegex =
           /^(EXPLAIN ANALYZE|EXPLAIN)\s*(\([^\)\(]+\))?\s+(.+)/is;
       let queryMatch = command.match(explainRegex);

diff --git a/pgmanage/app/static/pgmanage_frontend/src/main.js b/pgmanage/app/static/pgmanage_frontend/src/main.js
@@ -23,6 +23,7 @@ import './assets/scss/omnidb.scss'
 import './assets/scss/pgmanage.scss'
 import omniURL from './ace_themes/theme-omnidb.js?url'
 import omniDarkURL from './ace_themes/theme-omnidb_dark.js?url'
+import extendedPgsqlUrl from  "./ace-mode-pgsql-extended.js?url";
 import axios from 'axios'
 import { getCookie } from './ajax_control.js';
 import "tabulator-tables/dist/css/tabulator.min.css"
@@ -35,6 +36,7 @@ import { settingsStore, pinia } from './stores/stores_initializer.js';
 window.jQuery = window.$ = $;
 ace.config.setModuleUrl('ace/theme/omnidb', omniURL)
 ace.config.setModuleUrl('ace/theme/omnidb_dark', omniDarkURL)
+ace.config.setModuleUrl('ace/mode/pgsql_extended', extendedPgsqlUrl)
 
 axios.defaults.headers.common['X-CSRFToken'] = getCookie(v_csrf_cookie_name);