changed query workflow

packages/web/src/query/MessageView.svelte

@@ -4,6 +4,8 @@
   import RowsFilterSwitcher from '../forms/RowsFilterSwitcher.svelte';
   import SearchInput from '../elements/SearchInput.svelte';
   import { filterName } from 'dbgate-tools';
+  import InlineButton from '../buttons/InlineButton.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
 
   export let items: any[];
   export let showProcedure = false;
@@ -15,6 +17,7 @@
   export let engine = null;
 
   export let filter = '';
+  export let onClear = null;
 
   $: time0 = items[0] && new Date(items[0].time).getTime();
 
@@ -38,6 +41,17 @@
 
 <div class="main">
   <div class="topbar">
+    {#if onClear}
+      <InlineButton
+        icon="img clear"
+        on:click={() => {
+          onClear();
+        }}
+      >
+        <FontIcon icon="icon delete" padRight />
+        Clear
+      </InlineButton>
+    {/if}
     <RowsFilterSwitcher
       icon="img debug"
       label="Debug"

packages/web/src/query/SocketMessageView.svelte

@@ -12,7 +12,7 @@
   export let showLine = false;
   export let showCaller = false;
   export let eventName;
-  export let executeNumber;
+  export let executeNumber = null;
   export let showNoMessagesAlert = false;
   export let startLine = 0;
   export let onChangeErrors = null;
@@ -44,6 +44,11 @@
     return () => {};
   });
 
+  function handleClearMessages() {
+    cachedMessagesRef.set([]);
+    displayedMessages = [];
+  }
+
   $: {
     if (executeNumber >= 0) {
       displayedMessages = [];
@@ -81,5 +86,6 @@
     {startLine}
     {onExplainError}
     {engine}
+    onClear={executeNumber == null ? handleClearMessages : null}
   />
 {/if}