Metrics Query fields on blur

Author: simonredfern

src/lib/components/metrics/MetricsQueryForm.svelte

@@ -88,22 +88,25 @@
         </select>
       </label>
       <label class="qf-inline"><span>Consumer</span>
-        <input type="text" bind:value={queryForm.consumer_id} onblur={handleFieldChange} placeholder="ID" name="consumer_id" />
+        <input type="text" bind:value={queryForm.consumer_id} onblur={handleFieldChange} onchange={handleFieldChange} placeholder="ID" name="consumer_id" />
       </label>
       <label class="qf-inline"><span>App</span>
-        <input type="text" bind:value={queryForm.app_name} onblur={handleFieldChange} placeholder="name" name="app_name" />
+        <input type="text" bind:value={queryForm.app_name} onblur={handleFieldChange} onchange={handleFieldChange} placeholder="name" name="app_name" />
       </label>
       <label class="qf-inline"><span>Apps</span>
-        <input type="text" bind:value={queryForm.include_app_names} onblur={handleFieldChange} placeholder="csv" name="include_app_names" />
+        <input type="text" bind:value={queryForm.include_app_names} onblur={handleFieldChange} onchange={handleFieldChange} placeholder="csv" name="include_app_names" />
       </label>
       <label class="qf-inline"><span>User</span>
-        <input type="text" bind:value={queryForm.username} onblur={handleFieldChange} placeholder="ID" name="username" />
+        <input type="text" bind:value={queryForm.username} onblur={handleFieldChange} onchange={handleFieldChange} placeholder="ID" name="username" />
       </label>
       <label class="qf-inline"><span>Fn</span>
-        <input type="text" bind:value={queryForm.implemented_by_partial_function} onblur={handleFieldChange} placeholder="partial fn" name="implemented_by_partial_function" />
+        <input type="text" bind:value={queryForm.implemented_by_partial_function} onblur={handleFieldChange} onchange={handleFieldChange} placeholder="partial fn" name="implemented_by_partial_function" />
       </label>
       <label class="qf-inline qf-sm"><span>Ver</span>
-        <input type="text" bind:value={queryForm.implemented_in_version} onblur={handleFieldChange} placeholder="ver" name="implemented_in_version" />
+        <input type="text" bind:value={queryForm.implemented_in_version} onblur={handleFieldChange} onchange={handleFieldChange} placeholder="ver" name="implemented_in_version" />
+      </label>
+      <label class="qf-inline qf-sm"><span>Min Duration</span>
+        <input type="number" bind:value={queryForm.duration} min="0" onblur={handleFieldChange} onchange={handleFieldChange} placeholder="ms" name="duration" />
       </label>
       <label class="qf-inline qf-sm"><span>Anon</span>
         <select bind:value={queryForm.anon} onchange={handleFieldChange} name="anon">
@@ -112,6 +115,7 @@
           <option value="false">No</option>
         </select>
       </label>
+      <button type="submit" hidden>Submit</button>
       {#if showClearButton}
         <div class="qf-actions">
           <button type="button" class="qf-btn" onclick={onClear} title="Clear form">🗑️ Clear</button>

src/routes/(protected)/metrics/+page.svelte

@@ -375,19 +375,19 @@
   <div class="panel full-width-panel">
     <div class="panel-header-compact">
       <div class="panel-header-row">
-        <h2 class="panel-title">Query Metrics</h2>
+        <h2 class="panel-title">Metrics Query</h2>
         <div class="panel-meta header-fields">
           <label class="hf"><span>From</span>
-            <input type="datetime-local" bind:value={queryForm.from_date} onblur={handleFieldChange} step="1" name="from_date" />
+            <input type="datetime-local" bind:value={queryForm.from_date} onblur={handleFieldChange} onchange={handleFieldChange} step="1" name="from_date" />
           </label>
           <label class="hf"><span>To</span>
-            <input type="datetime-local" bind:value={queryForm.to_date} onblur={handleFieldChange} step="1" name="to_date" />
+            <input type="datetime-local" bind:value={queryForm.to_date} onblur={handleFieldChange} onchange={handleFieldChange} step="1" name="to_date" />
           </label>
           <label class="hf hf-tiny"><span>Limit</span>
-            <input type="number" bind:value={queryForm.limit} min="1" max="10000" onblur={handleFieldChange} name="limit" />
+            <input type="number" bind:value={queryForm.limit} min="1" max="10000" onblur={handleFieldChange} onchange={handleFieldChange} name="limit" />
           </label>
           <label class="hf hf-tiny"><span>Offset</span>
-            <input type="number" bind:value={queryForm.offset} min="0" onblur={handleFieldChange} name="offset" />
+            <input type="number" bind:value={queryForm.offset} min="0" onblur={handleFieldChange} onchange={handleFieldChange} name="offset" />
           </label>
           <label class="hf hf-sm"><span>Sort</span>
             <select bind:value={queryForm.sort_by} onchange={handleFieldChange} name="sort_by">