feldera · Karakatiza666 · Mar 4, 2026 · Mar 5, 2026
diff --git a/js-packages/web-console/src/lib/components/pipelines/editor/LogsStreamList.svelte b/js-packages/web-console/src/lib/components/pipelines/editor/LogsStreamList.svelte
@@ -5,7 +5,7 @@
   import ScrollDownFab from '$lib/components/other/ScrollDownFab.svelte'
   import WarningBanner from '$lib/components/pipelines/editor/WarningBanner.svelte'
   import { useReverseScrollContainer } from '$lib/compositions/common/useReverseScrollContainer.svelte'
-  import { selectScope, virtualSelect } from '$lib/compositions/common/userSelect'
+  import { virtualSelect } from '$lib/compositions/common/userSelect'
   import { useSkeletonTheme } from '$lib/compositions/useSkeletonTheme.svelte'
   import { humanSize } from '$lib/functions/common/string'
 
@@ -27,32 +27,14 @@
     )} in total.
   </WarningBanner>
 {/if}
-<!-- <ReverseScrollList items={logs.rows} class="bg-white-dark pl-2 scrollbar">
-    {#snippet item(value, i)}
-      <div class="whitespace-pre-wrap" style="font-family: {theme.config.monospaceFontFamily};"> -->
-<!-- TODO: Re-enable line numbers when they get reported by backend -->
-<!-- <span class="select-none font-bold">{(i + 1).toFixed().padStart(5, ' ')}&nbsp;&nbsp;</span> -->
-<!-- {@html value}
-      </div>
-    {/snippet}
-  </ReverseScrollList> -->
 <div
   role="textbox"
   class="bg-white-dark scrollbar h-full w-full overflow-y-auto rounded pl-2 whitespace-pre-wrap"
   style="font-family: {theme.config.monospaceFontFamily}; user-select: contain;"
   tabindex={-1}
   use:reverseScroll.action
-  use:selectScope
   use:virtualSelect={{
     getRoot: (node) => node.firstElementChild!,
-    getRootChildrenOffset: (root) => {
-      const firstChild = root?.children.item(0)?.children.item(0)
-      if (!firstChild) {
-        return 0
-      }
-      const num = parseInt(firstChild.getAttribute('data-rowindex')!)
-      return num
-    },
     getCopyContent(slice) {
       if (slice === 'all') {
         return logs.rows.map(stripANSI).join('')
@@ -70,42 +52,9 @@
   <Virtualizer data={logs.rows} getKey={(_, i) => i + logs.firstRowIndex} bind:this={virtualizer}>
     {#snippet children(value, index)}
       <div data-rowindex={index}>
-        <!-- <span class="select-none font-bold">{(index + 1).toFixed().padStart(5, ' ')}&nbsp;&nbsp;</span> -->
         <AnsiDecoratedText {value}></AnsiDecoratedText>
       </div>
     {/snippet}
   </Virtualizer>
 </div>
-
-<!-- <SvelteVirtualList items={logs.rows} containerClass="scrollbar" viewportClass="virtual-list-viewport bg-white-dark " bufferSize={1000}>
-    {#snippet renderItem(item, i)}
-      <span class="select-none font-bold">{(i + 1).toFixed().padStart(5, ' ')}&nbsp;&nbsp;</span>
-      {@html item}
-    {/snippet}
-  </SvelteVirtualList> -->
-<!-- <div
-    role="textbox"
-    use:reverseScroll.action
-    use:selectScope
-    class="bg-white-dark h-full w-full overflow-auto whitespace-pre-wrap pl-2 scrollbar"
-    style="font-family: {theme.config.monospaceFontFamily}; user-select: contain;"
-    tabindex={99}
-  >
-    {#each logs.rows as value, i}
-    {@const x = console.log('row')}
-      <div>
-        {@html value}
-      </div>
-    {/each}
-  </div> -->
-<!-- <div
-    role="textbox"
-    use:reverseScroll.action
-    use:selectScope
-    class="bg-white-dark h-full w-full overflow-auto whitespace-pre-wrap pl-2 scrollbar"
-    style="font-family: {theme.config.monospaceFontFamily}; user-select: contain;"
-    tabindex={99}
-  >
-    {@html logs.rows}
-  </div> -->
 <ScrollDownFab {reverseScroll}></ScrollDownFab>
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)
         }
       }