[web-console] Avoid re-loading logs every time when switching between the tabs

Karakatiza666 · Karakatiza666 · commit 2dea6021d495 · 2026-03-05T01:04:54.000Z
Signed-off-by: Karakatiza666 &lt;bulakh.96@gmail.com&gt;
diff --git a/js-packages/web-console/src/lib/components/pipelines/editor/MonitoringPanel.svelte b/js-packages/web-console/src/lib/components/pipelines/editor/MonitoringPanel.svelte
@@ -52,7 +52,7 @@
         true
       ),
       tuple('Samply' as const, TabSamplyProfile.Label, TabSamplyProfile.default, false),
-      tuple('Logs' as const, TabLogs, PanelLogs, false)
+      tuple('Logs' as const, TabLogs, PanelLogs, true)
     ].filter((tab) => tab[0] !== currentInteractionTab)
   )
   let currentTab = $derived(
diff --git a/js-packages/web-console/src/lib/components/pipelines/editor/TabLogs.svelte b/js-packages/web-console/src/lib/components/pipelines/editor/TabLogs.svelte
@@ -51,7 +51,7 @@
 
   let pipelineStatusName = $derived(unionName(pipeline.current.status))
 
-  $effect.pre(() => {
+  let pipelineLogs = $derived.by(() => {
     if (!streams[pipelineName]) {
       streams[pipelineName] = {
         firstRowIndex: 0,
@@ -61,6 +61,7 @@
         totalSkippedBytes: 0
       }
     }
+    return getStreams.current[pipelineName]
   })
 
   $effect(() => {
@@ -204,11 +205,6 @@
     }
   }
 
-  // Trigger update to display the latest rows when switching to another pipeline
-  $effect(() => {
-    pipelineName
-    getStreams.current = streams
-  })
   $effect(() => {
     const interval = setInterval(() => {
       getStreams.current = streams
@@ -221,7 +217,7 @@
       pipelineActionCallbacks.remove('', 'delete', dropLogHistory)
     }
   })
-  let stream = $derived(getStreams.current[pipelineName].stream)
+  let stream = $derived(pipelineLogs.stream)
   const now = useInterval(() => new Date(), 1000, 1000 - (Date.now() % 1000))
 </script>
 
@@ -240,7 +236,7 @@
         {/if}
       </WarningBanner>
     {:else if !areLogsExpected(pipelineStatusName)}
-      {#if getStreams.current[pipelineName].rows.length}
+      {#if pipelineLogs.rows.length}
         <WarningBanner variant="info">
           Displaying log history from the last pipeline run. When the pipeline is started again this
           history will be cleared.
@@ -255,6 +251,6 @@
     <WarningBanner>Connecting to logs stream...</WarningBanner>
   {/if}
   {#key pipelineName}
-    <LogsStreamList logs={getStreams.current[pipelineName]}></LogsStreamList>
+    <LogsStreamList logs={pipelineLogs}></LogsStreamList>
   {/key}
 </div>
diff --git a/js-packages/web-console/src/lib/components/pipelines/editor/TabsPanel.svelte b/js-packages/web-console/src/lib/components/pipelines/editor/TabsPanel.svelte
@@ -1,6 +1,7 @@
 <script lang="ts" generics="T extends Record<string, unknown>  ">
   import type { Component } from 'svelte'
   import type { Snippet } from '$lib/types/svelte'
+  import { SvelteSet } from 'svelte/reactivity'
 
   import { Tabs } from '@skeletonlabs/skeleton-svelte'
 
@@ -17,6 +18,11 @@
     tabProps: T
     currentTab: string
   } = $props()
+
+  let visited = $state(new SvelteSet<string>())
+  $effect.pre(() => {
+    visited.add(currentTab)
+  })
 </script>
 
 {#snippet defaultTabContainer(tab: Snippet, hidden: boolean)}
@@ -49,7 +55,7 @@
       {#snippet tab()}
         <TabComponent {...tabProps}></TabComponent>
       {/snippet}
-      {#if keepAlive}
+      {#if keepAlive && visited.has(tabName)}
         {@render tabContainer(tab, currentTab !== tabName)}
       {:else if currentTab === tabName}
         {@render tabContainer(tab, false)}
diff --git a/js-packages/web-console/src/lib/compositions/common/useReverseScrollContainer.svelte.ts b/js-packages/web-console/src/lib/compositions/common/useReverseScrollContainer.svelte.ts
@@ -91,11 +91,25 @@ export const useReverseScrollContainer = (
         })
       }
 
+      // When the container becomes visible after being hidden (e.g. tab switch with keepAlive),
+      // the ResizeObserver fires but the virtualizer may need extra time to lay out content.
+      // Schedule scrollToBottom attempt to catch up.
+      let wasHidden = false
+      const visibilityObserver = new IntersectionObserver((entries) => {
+        const isVisible = entries[0]?.isIntersecting ?? false
+        if (isVisible && wasHidden && stickToBottom) {
+          scrollToBottom()
+        }
+        wasHidden = !isVisible
+      })
+      visibilityObserver.observe(ref)
+
       ref.addEventListener('scroll', onscroll)
       scrollToBottom()
       return {
         destroy: () => {
           resizeObserver?.disconnect()
+          visibilityObserver.disconnect()
           ref.removeEventListener('scroll', onscroll)
         }
       }

Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,7 @@`
`52`	`52`	`true`
`53`	`53`	`),`
`54`	`54`	`tuple('Samply' as const, TabSamplyProfile.Label, TabSamplyProfile.default, false),`
`55`		`- tuple('Logs' as const, TabLogs, PanelLogs, false)`
	`55`	`+ tuple('Logs' as const, TabLogs, PanelLogs, true)`
`56`	`56`	`].filter((tab) => tab[0] !== currentInteractionTab)`
`57`	`57`	`)`
`58`	`58`	`let currentTab = $derived(`