tab status bar improved

packages/web/src/datagrid/DataGridCore.svelte

@@ -249,6 +249,7 @@
   import GenerateSqlFromDataModal from '../modals/GenerateSqlFromDataModal.svelte';
   import { showModal } from '../modals/modalTools';
   import { updateStatuBarInfo } from '../widgets/StatusBar.svelte';
+  import StatusBarTabItem from '../widgets/StatusBarTabItem.svelte';
 
   export let onLoadNextData = undefined;
   export let grider = undefined;
@@ -1196,15 +1197,15 @@
     ];
   }
 
-  $: {
-    if (!tabControlHiddenTab) {
-      if (!multipleGridsOnTab && allRowCount != null) {
-        updateStatuBarInfo(tabid, [{ text: `Rows: ${allRowCount.toLocaleString()}` }]);
-      } else {
-        updateStatuBarInfo(tabid, []);
-      }
-    }
-  }
+  // $: {
+  //   if (!tabControlHiddenTab) {
+  //     if (!multipleGridsOnTab && allRowCount != null) {
+  //       updateStatuBarInfo(tabid, [{ text: `Rows: ${allRowCount.toLocaleString()}` }]);
+  //     } else {
+  //       updateStatuBarInfo(tabid, []);
+  //     }
+  //   }
+  // }
 </script>
 
 {#if !display || (!isDynamicStructure && (!columns || columns.length == 0))}
@@ -1384,6 +1385,10 @@
     {#if isLoading}
       <LoadingInfo wrapper message="Loading data" />
     {/if}
+
+    {#if !tabControlHiddenTab && !multipleGridsOnTab && allRowCount != null}
+      <StatusBarTabItem text={`Rows: ${allRowCount.toLocaleString()}`} />
+    {/if}
   </div>
 {/if}
 

packages/web/src/utility/useTimerLabel.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { getContext, onDestroy } from 'svelte';
-import { updateStatuBarInfo } from '../widgets/StatusBar.svelte';
+import { updateStatuBarInfoItem } from '../widgets/StatusBar.svelte';
 
 function formatSeconds(duration) {
   if (duration == null) return '';
@@ -17,11 +17,7 @@ export default function useTimerLabel() {
   const tabid = getContext('tabid');
 
   const update = () => {
-    updateStatuBarInfo(tabid, [
-      {
-        text: formatSeconds(duration),
-      },
-    ]);
+    updateStatuBarInfoItem(tabid, 'durationSeconds', { text: formatSeconds(duration) });
   };
 
   const start = () => {

packages/web/src/widgets/StatusBar.svelte

@@ -1,15 +1,34 @@
 <script lang="ts" context="module">
   const statusBarTabInfo = writable({});
 
-  export function updateStatuBarInfo(tabid, info) {
-    statusBarTabInfo.update(x => ({
-      ...x,
-      [tabid]: info,
-    }));
+  // export function updateStatuBarInfo(tabid, info) {
+  //   statusBarTabInfo.update(x => ({
+  //     ...x,
+  //     [tabid]: info,
+  //   }));
+  // }
+
+  export function updateStatuBarInfoItem(tabid, key, item) {
+    statusBarTabInfo.update(tabs => {
+      const items = tabs[tabid] || [];
+      let newItems;
+      if (item == null) {
+        newItems = items.filter(x => x.key != key);
+      } else if (items.find(x => x.key == key)) {
+        newItems = items.map(x => (x.key == key ? { ...item, key } : x));
+      } else {
+        newItems = [...items, { ...item, key }];
+      }
+      return {
+        ...tabs,
+        [tabid]: newItems,
+      };
+    });
   }
 </script>
 
 <script lang="ts">
+  import _ from 'lodash';
   import { writable } from 'svelte/store';
   import moment from 'moment';
 

packages/web/src/widgets/StatusBarTabItem.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { getContext, onDestroy, onMount } from 'svelte';
+
+  import uuidv1 from 'uuid/v1';
+  import { updateStatuBarInfoItem } from './StatusBar.svelte';
+
+  export let text;
+
+  const key = uuidv1();
+  const tabid = getContext('tabid');
+
+  onMount(() => {
+    updateStatuBarInfoItem(tabid, key, { text });
+  });
+  onDestroy(() => updateStatuBarInfoItem(tabid, key, null));
+</script>