feat: move run and clear button to top

Data-Lake-Visualizer · Jan 26, 2025 · ddb45fb · ddb45fb
1 parent 037f58c
commit ddb45fb
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/media/scripts/main.js b/media/scripts/main.js
@@ -287,7 +287,9 @@
 
         const runQueryButton = document.getElementById('run-query-btn')
         runQueryButton?.removeAttribute('disabled')
-        runQueryButton.innerText = 'Run'
+
+        const runQueryButtonText = document.getElementById('run-query-btn-text')
+        runQueryButtonText.innerText = 'Run'
         resultsTable.clearAlert()
         isQueryRunning = false
     }
@@ -427,7 +429,6 @@
             footerElement: `<span class="tabulator-page-counter" id="query-count"></span>
                     <span class="tabulator-page-counter" id="page-count"></span>
                     <span class="tabulator-paginator">
-                        <button class="tabulator-page" disabled id="reset-sort-${requestSourceQueryTab}" type="button" role="button" aria-label="Reset Sort" title="Reset Sort" style="margin-right: 10px;">Reset Sort</button>
                         <label>Page Size</label>
                         <select class="tabulator-page-size" id="dropdown-page-size-${requestSourceQueryTab}" aria-label="Page Size" title="Page Size">
                             ${options}
@@ -496,7 +497,9 @@
 
         const runQueryButton = document.getElementById('run-query-btn')
         runQueryButton.setAttribute('disabled', '')
-        runQueryButton.innerText = 'Running'
+
+        const runQueryButtonText = document.getElementById('run-query-btn-text')
+        runQueryButtonText.innerText = 'Running'
 
         const selectedOption = getSelectedPageSize(requestSourceQueryTab)
         const queryString = getTextFromEditor(editor)

diff --git a/media/styles/parquet-visualizer.css b/media/styles/parquet-visualizer.css
@@ -33,7 +33,7 @@ body {
     box-sizing: border-box;
 }
 
-#query-actions {
+#query-result-actions {
     flex: 0 0 auto; /* Respects its height */
     min-height: 40px;
     max-height: 5%; /* Maximum height relative to the viewport */
@@ -54,7 +54,7 @@ body {
         height: 25%;
     }
 
-    #query-actions {
+    #query-result-actions {
         flex: 0 0 auto;
         min-height: 40px; /* Adjusted min-height */
         max-height: 6%;
@@ -70,7 +70,7 @@ body {
         height: 25%;
     }
 
-    #query-actions {
+    #query-result-actions {
         flex: 0 0 auto;
         min-height: 40px; /* Adjusted min-height */
         max-height: 6%;
@@ -145,7 +145,7 @@ body {
 
 .search-container {
     display: flex;
-    width: 40%;
+    width: 50%;
     align-items: center;
     border: 1px solid #ccc;
     padding: 3px;

diff --git a/src/tabular-document-editor.ts b/src/tabular-document-editor.ts
@@ -1114,13 +1114,18 @@ export class TabularDocumentEditorProvider
                 '<p>The loaded backend does not support SQL.</p>'
         } else {
             queryActionsBodyHtml = `
-              <div id="editor"></div>
               <div id="query-actions" class="button-container">
-
-                <button id="run-query-btn" class="tabulator-page flex-button">Run</button>
-                <button id="clear-query-btn" class="tabulator-page flex-button">Clear</button>
-                
-                <div class="flex-button search-container" style="margin-left: auto;">
+                    <button id="run-query-btn" class="tabulator-page flex-button">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+                            <polygon points="5,4 11,8 5,12" fill="none" stroke="#84CF85" stroke-width="1.5" />
+                        </svg>
+                        <span id="run-query-btn-text">Run</span>
+                    </button>
+                    <button id="clear-query-btn" class="tabulator-page flex-button">Clear</button>
+              </div>
+              <div id="editor"></div>
+              <div id="query-result-actions" class="button-container">
+                <div class="flex-button search-container" style="margin-right: auto;">
                     <div class="search-icon-element">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false" aria-hidden="true" class="search-icon">
                             <circle cx="7" cy="7" r="5"></circle>
@@ -1134,13 +1139,17 @@ export class TabularDocumentEditorProvider
                         </svg>
                     </div>
                 </div>
+                
+                <button class="tabulator-page flex-button" disabled id="reset-sort-queryTab" type="button" role="button" aria-label="Reset Sort" title="Reset Sort">Reset Sort</button>
+
                 <button class="tabulator-page flex-button" disabled id="copy-query-results" type="button" role="button" aria-label="Copy page to clipboard" title="Copy page to clipboard">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false" aria-hidden="true" width="16" height="16" class="copy-icon">
                       <path d="M2 5h9v9H2z" class="stroke-linejoin-round"></path>
                       <path d="M5 5V2h9v9h-3" class="stroke-linejoin-round"></path>
                   </svg>
                   Copy page
                 </button>
+                
                 <div class="dropdown">
                     <button class="flex-button" disabled id="export-query-results" type="button" role="button" aria-label="Export results" title="Export results">
                       <svg class="export-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="white" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">