sql editor - play icon to execute sql fragment

misc/play-dark-mode.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 17.804 17.804" style="enable-background:new 0 0 17.804 17.804;" xml:space="preserve">
+<g>
+	<g id="c98_play">
+		<path fill='#ccc' d="M2.067,0.043C2.21-0.028,2.372-0.008,2.493,0.085l13.312,8.503c0.094,0.078,0.154,0.191,0.154,0.313
+			c0,0.12-0.061,0.237-0.154,0.314L2.492,17.717c-0.07,0.057-0.162,0.087-0.25,0.087l-0.176-0.04
+			c-0.136-0.065-0.222-0.207-0.222-0.361V0.402C1.844,0.25,1.93,0.107,2.067,0.043z"/>
+	</g>
+	<g id="Capa_1_78_">
+	</g>
+</g>
+</svg>

misc/play-light-mode.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 17.804 17.804" style="enable-background:new 0 0 17.804 17.804;" xml:space="preserve">
+<g>
+	<g id="c98_play">
+		<path fill='#444' d="M2.067,0.043C2.21-0.028,2.372-0.008,2.493,0.085l13.312,8.503c0.094,0.078,0.154,0.191,0.154,0.313
+			c0,0.12-0.061,0.237-0.154,0.314L2.492,17.717c-0.07,0.057-0.162,0.087-0.25,0.087l-0.176-0.04
+			c-0.136-0.065-0.222-0.207-0.222-0.361V0.402C1.844,0.25,1.93,0.107,2.067,0.043z"/>
+	</g>
+	<g id="Capa_1_78_">
+	</g>
+</g>
+</svg>

packages/web/public/global.css

@@ -167,3 +167,27 @@ textarea {
   color: var(--theme-font-1);
   border: 1px solid var(--theme-border);
 }
+
+.ace_gutter-cell.ace-gutter-sql-run {
+  background-repeat: no-repeat;
+  background-position: 2px center;
+
+  /* content: '▶';
+  margin-right: 3px; */
+
+  /* border-radius: 20px 0px 0px 20px; */
+  /* Change the color of the breakpoint if you want 
+  box-shadow: 0px 0px 1px 1px #248c46 inset;  */
+}
+
+.theme-type-light .ace_gutter-cell.ace-gutter-sql-run {
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTcuODA0IDE3LjgwNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTcuODA0IDE3LjgwNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnIGlkPSJjOThfcGxheSI+CgkJPHBhdGggZmlsbD0nIzQ0NCcgZD0iTTIuMDY3LDAuMDQzQzIuMjEtMC4wMjgsMi4zNzItMC4wMDgsMi40OTMsMC4wODVsMTMuMzEyLDguNTAzYzAuMDk0LDAuMDc4LDAuMTU0LDAuMTkxLDAuMTU0LDAuMzEzCgkJCWMwLDAuMTItMC4wNjEsMC4yMzctMC4xNTQsMC4zMTRMMi40OTIsMTcuNzE3Yy0wLjA3LDAuMDU3LTAuMTYyLDAuMDg3LTAuMjUsMC4wODdsLTAuMTc2LTAuMDQKCQkJYy0wLjEzNi0wLjA2NS0wLjIyMi0wLjIwNy0wLjIyMi0wLjM2MVYwLjQwMkMxLjg0NCwwLjI1LDEuOTMsMC4xMDcsMi4wNjcsMC4wNDN6Ii8+Cgk8L2c+Cgk8ZyBpZD0iQ2FwYV8xXzc4XyI+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==);
+}
+
+.theme-type-dark .ace_gutter-cell.ace-gutter-sql-run {
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTcuODA0IDE3LjgwNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTcuODA0IDE3LjgwNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnIGlkPSJjOThfcGxheSI+CgkJPHBhdGggZmlsbD0nI2RkZCcgZD0iTTIuMDY3LDAuMDQzQzIuMjEtMC4wMjgsMi4zNzItMC4wMDgsMi40OTMsMC4wODVsMTMuMzEyLDguNTAzYzAuMDk0LDAuMDc4LDAuMTU0LDAuMTkxLDAuMTU0LDAuMzEzCgkJCWMwLDAuMTItMC4wNjEsMC4yMzctMC4xNTQsMC4zMTRMMi40OTIsMTcuNzE3Yy0wLjA3LDAuMDU3LTAuMTYyLDAuMDg3LTAuMjUsMC4wODdsLTAuMTc2LTAuMDQKCQkJYy0wLjEzNi0wLjA2NS0wLjIyMi0wLjIwNy0wLjIyMi0wLjM2MVYwLjQwMkMxLjg0NCwwLjI1LDEuOTMsMC4xMDcsMi4wNjcsMC4wNDN6Ii8+Cgk8L2c+Cgk8ZyBpZD0iQ2FwYV8xXzc4XyI+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==);
+}
+
+.ace_gutter-cell.ace-gutter-sql-run:hover {
+   background-color: var(--theme-bg-2);
+}

packages/web/src/query/AceEditor.svelte

@@ -155,6 +155,7 @@
   export let readOnly = false;
   export let splitterOptions = null;
   export let onKeyDown = null;
+  export let onExecuteFragment = null;
 
   const tabVisible: any = getContext('tabVisible');
 
@@ -287,6 +288,17 @@
     queryParts = data;
     editor.setHighlightActiveLine(queryParts.length <= 1);
     changedCurrentQueryPart();
+    updateAnnotations();
+  }
+
+  function updateAnnotations() {
+    editor.session.setAnnotations(
+      (queryParts || []).map(part => ({
+        row: part.trimStart.line,
+        text: part.text,
+        className: 'ace-gutter-sql-run',
+      }))
+    );
   }
 
   const handleContextMenu = e => {
@@ -304,8 +316,6 @@
   function changedQueryParts() {
     const editor = getEditor();
     if (splitterOptions && editor && queryParserWorker) {
-      const editor = getEditor();
-
       const message = {
         text: editor.getValue(),
         options: {
@@ -392,6 +402,77 @@
     editor.container.addEventListener('contextmenu', handleContextMenu);
     editor.keyBinding.addKeyboardHandler(handleKeyDown);
     changedQueryParts();
+
+    // editor.session.addGutterDecoration(0, 'ace-gutter-sql-run');
+
+    // editor.session.setAnnotations([
+    //   {
+    //     row: 1,
+    //     text: 'SQL SCRIPT 0',
+    //     type: 'gutter',
+    //   },
+    // ]);
+
+    // editor.getSession().setAnnotations([
+    //   {
+    //     row: 0,
+    //     // column: 0,
+    //     text: 'Error Message', // Or the Json reply from the parser
+    //     type: 'error', // also "warning" and "information"
+    //   },
+    //   {
+    //     row: 1,
+    //     // column: 0,
+    //     text: 'SELECT * FROM \n22222', // Or the Json reply from the parser
+    //     // type: 'info', // also "warning" and "information"
+    //     className: 'ace-gutter-sql-run',
+    //   },
+    // ]);
+
+    // editor.on('guttermousemove', e => console.log('MOVE', e.target), true);
+    // editor.on('guttermouseout', e => console.log('OUT', e.target), true);
+    // editor.on('guttermouseleave', e => console.log('LEAVE', e.target), true);
+    // editor.session.setBreakpoint(0);
+
+    // editor.on(
+    //   'gutterclick',
+    //   e => {
+    //     const row = e.getDocumentPosition().row;
+
+    //     const part = (queryParts || []).find(part => part.trimStart.line == row);
+    //     if (part && onExecuteFragment) {
+    //       onExecuteFragment(part.text);
+    //       e.stop();
+    //     }
+    //   },
+    //   true
+    // );
+
+    editor.on(
+      'guttermousedown',
+      e => {
+        const row = e.getDocumentPosition().row;
+
+        const part = (queryParts || []).find(part => part.trimStart.line == row);
+        if (part && onExecuteFragment) {
+          onExecuteFragment(part.text);
+          e.stop();
+          editor.moveCursorTo(part.trimStart.line, 0);
+          editor.selection.clearSelection()
+        }
+      },
+      true
+    );
+
+    // editor.session.gutterRenderer = {
+    //   getWidth: function (session, lastLineNumber, config) {
+    //     return lastLineNumber.toString().length * config.characterWidth;
+    //   },
+    //   getText: function (session, row) {
+    //     return (row + 1).toString();
+    //     // return String.fromCharCode(row + 65);
+    //   },
+    // };
   });
 
   onDestroy(() => {

packages/web/src/tabs/QueryTab.svelte

@@ -295,6 +295,7 @@
             invalidateCommands();
           }}
           bind:this={domEditor}
+          onExecuteFragment={sql => executeCore(sql)}
         />
       {:else}
         <AceEditor