pivot bookmarks. Codemirror config

explorerhq · Dec 21, 2023 · b0b41f4 · b0b41f4
1 parent 6c20c2f
commit b0b41f4
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 17 deletions.
diff --git a/explorer/static/js/src/codemirror-config.js b/explorer/static/js/src/codemirror-config.js
@@ -0,0 +1,69 @@
+import {
+    keymap, highlightSpecialChars, drawSelection, highlightActiveLine, dropCursor,
+    lineNumbers, highlightActiveLineGutter
+} from "@codemirror/view"
+import {
+    defaultHighlightStyle, syntaxHighlighting, indentOnInput, bracketMatching,
+    foldGutter, foldKeymap
+} from "@codemirror/language"
+import {defaultKeymap, history, historyKeymap} from "@codemirror/commands"
+import {searchKeymap, highlightSelectionMatches} from "@codemirror/search"
+import {autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap} from "@codemirror/autocomplete"
+import {lintKeymap} from "@codemirror/lint"
+import { Prec } from "@codemirror/state";
+import {sql} from "@codemirror/lang-sql";
+
+
+const submitEventFromCM = new CustomEvent('submitEventFromCM', {});
+const submitKeymapArr = [
+    {
+        key: "Ctrl-Enter",
+        run: () => {
+            document.dispatchEvent(submitEventFromCM);
+            return true;
+        }
+    },
+    {
+        key: "Cmd-Enter",
+        run: () => {
+            document.dispatchEvent(submitEventFromCM);
+            return true;
+        }
+    }
+]
+
+const submitKeymap = Prec.highest(
+    keymap.of(
+      submitKeymapArr
+    )
+)
+
+
+
+export const explorerSetup = (() => [
+    sql(),
+    lineNumbers(),
+    highlightActiveLineGutter(),
+    highlightSpecialChars(),
+    history(),
+    foldGutter(),
+    drawSelection(),
+    dropCursor(),
+    indentOnInput(),
+    syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
+    bracketMatching(),
+    closeBrackets(),
+    autocompletion(),
+    highlightActiveLine(),
+    highlightSelectionMatches(),
+    submitKeymap,
+    keymap.of([
+        ...closeBracketsKeymap,
+        ...defaultKeymap,
+        ...searchKeymap,
+        ...historyKeymap,
+        ...foldKeymap,
+        ...completionKeymap,
+        ...lintKeymap
+    ])
+])()
diff --git a/explorer/static/js/src/explorer.js b/explorer/static/js/src/explorer.js
@@ -1,25 +1,23 @@
 import $ from 'jquery';
-import {basicSetup, EditorView } from "codemirror";
-import {sql} from "@codemirror/lang-sql"
-import {languages} from "@codemirror/language-data"
+import { EditorView } from "codemirror";
+import { languages } from "@codemirror/language-data"
+import { explorerSetup } from "./codemirror-config";
 
 import cookie from 'cookiejs';
 import List from 'list.js'
 
 import 'floatthead'
-import {getCsrfToken} from "./csrf";
-import {toggleFavorite} from "./favorites";
+import { getCsrfToken } from "./csrf";
+import { toggleFavorite } from "./favorites";
 
 import {pivotJq} from "./pivot";
 
 
-
 function editorFromTextArea(textarea) {
     let view = new EditorView({
         doc: textarea.value,
         extensions: [
-            basicSetup,
-            sql({codeLanguages: languages}),
+            explorerSetup,
         ]})
     textarea.parentNode.insertBefore(view.dom, textarea)
     textarea.style.display = "none"
@@ -45,6 +43,10 @@ export class ExplorerEditor {
 
         this.editor = editorFromTextArea(document.getElementById("id_sql"));
 
+        document.addEventListener('submitEventFromCM', (e) => {
+            this.$submit.click();
+        });
+
         pivotJq($);
 
         this.bind();
@@ -73,15 +75,12 @@ export class ExplorerEditor {
         return encodeURIComponent(args.join("|"));
     }
 
-    doCodeMirrorSubmit() {
-        // Captures the cmd+enter keystroke and figures out which button to trigger.
-        this.$submit.click();
-    }
-
     savePivotState(state) {
-        //let bmark = btoa(JSON.stringify(_(state).pick("aggregatorName", "rows", "cols", "rendererName", "vals")));
-        //let $el = $("#pivot-bookmark");
-        //$el.attr("href", $el.data("baseurl") + "#" + bmark);
+        const picked = (({ aggregatorName, rows, cols, rendererName, vals }) => ({ aggregatorName, rows, cols, rendererName, vals }))(state);
+        const jsonString = JSON.stringify(picked);
+        let bmark = btoa(jsonString);
+        let $el = $("#pivot-bookmark");
+        $el.attr("href", $el.data("baseurl") + "#" + bmark);
     }
 
     updateQueryString(key, value, url) {
@@ -303,7 +302,8 @@ export class ExplorerEditor {
 
         $(".pivot-table").pivotUI(this.$table, pivotState);
         if (navToPivot) {
-            $("#pivot-tab-label").tab("show");
+            let pivotEl = document.querySelector('#nav-pivot-tab')
+            pivotEl.click()
         }
 
         setTimeout(function() {