fix(frontend): reset left panel metadata on notebook switch

[Hariharanpugazh]

What this does

Fixes stale metadata in the Kale left panel when switching between notebooks.

Problem

When switching from one notebook to another, the left panel kept showing the
previous notebook's experiment, pipeline name, and description. The
notebook-load sequence in useNotebookLoader.loadNotebookPanel() awaits several
backend RPCs (getKfpUiHost, getNamespace, getExperiments) before it calls
setMetadata, and it never cleared state first. During that async window the
panel rendered stale values from the notebook we just left.

Fix

• Reset the panel to fresh defaults synchronously at the start of every
  notebook switch, before any await, via a new resetForNotebookSwitch() in
  useNotebookMetadata. This also sets gettingExperiments, so the experiment
  field shows its existing "Loading..." state during the load instead of stale text.
• Guard the async load with an isStale() check after each await: if the user
  switches notebooks again while a load is in flight, the late-resolving load
  bails out instead of clobbering the now-active notebook's metadata.
• Clear the loading flag at the end of loadNotebookPanel so it resets on the
  non-backend path too.

Reset uses a fresh default metadata object rather than the shared
DefaultState.metadata reference, so it stays compatible with the
DefaultState freezing proposed in #868 (#643).

Testing

• jlpm eslint:check — clean
• prettier --check — clean
• tsc --noEmit — clean
• jest — passing

Manually verified by opening two notebooks with different metadata and switching
between them: the panel now resets/loads instead of showing the previous
notebook's values.

Related

• Fixes bug(frontend): Left panel shows stale metadata when switching between notebooks #644
• Touches the same files as fix(frontend): break shared references to DefaultState metadata #868 (bug(frontend): DefaultState global object is mutated at runtime, causing shared state between notebooks #643); reset avoids mutating DefaultState
  so the two changes shouldn't conflict.

[google-oss-prow]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign ederign for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[ada333]

hi @Hariharanpugazh I could not replicate the bug that is described in this PR - could you please share a video, or detailed instructions?

[Hariharanpugazh]

Hi @ada333, thanks for taking a look! Here are detailed steps to reproduce.

Setup

Create two notebooks in the same Jupyter server, each with different Kale metadata:

• notebook-a.ipynb → experiment exp-a, pipeline name pipeline-a, description Description A
• notebook-b.ipynb → experiment exp-b, pipeline name pipeline-b, description Description B

Make sure Kale is enabled and the left panel is open.

Steps

1. Open notebook-a.ipynb and wait for the Kale left panel to fully load you should see pipeline-a / Description A / exp-a.
2. Without closing it, switch directly to notebook-b.ipynb.
3. Watch the left panel during the load the window while getKfpUiHost / getNamespace / getExperiments are still resolving.

Expected: Panel clears to defaults (experiment shows Loading...), then populates with pipeline-b / Description B / exp-b.

Actual (before this fix): During the async load window the panel keeps showing the previous notebook's values (pipeline-a / Description A / exp-a) until the RPCs resolve.

Why it can be hard to hit

It's a race in loadNotebookPanel() - setMetadata is only called after several awaited backend RPCs, and state is never cleared first. If your backend responds very quickly, the stale window is tiny and easy to miss. To make it deterministic you can either throttle the network in DevTools, or temporarily add await new Promise(r => setTimeout(r, 2000)) before setMetadata in loadNotebookPanel() to widen the window, then switch notebooks and observe the stale values.

I'll follow up with a short screen recording if these steps don't reproduce it on your end.

[Hariharanpugazh]

Thanks for taking a look, @ada333.

The original symptom is timing-sensitive, which is likely why it didn't reproduce for you on a fast KFP backend the stale-metadata window is very small.

While reproducing it locally I found a deeper and more serious variant of the same underlying issue: metadata could leak between notebooks.

Root cause: the metadata-persistence effect wrote to tracker.currentWidget, which is resolved when the effect runs (React runs effects after paint), not when the edit was made. If you switched notebook tabs before that effect flushed, one notebook's metadata got written into another notebook's .ipynb.

Fix: persist to the notebook the metadata was actually loaded from (tracked via a loadedNotebookRef) instead of the currently-active tab, so an edit always saves to the notebook it belongs to. I also:

• guarded the load so the loader's own setMetadata calls aren't written back to the file,
• wrapped the load in try/finally so the loading state can never get stuck, and
• made the load resilient to an unreachable KFP so the panel no longer hangs on timeouts.

I've pushed these changes to this PR.

Repro for the original stale-metadata symptom:

1. Create two notebooks, each with Kale enabled and different pipeline names/descriptions.
2. Open notebook A, wait for the panel to populate.
3. Switch to notebook B and watch the panel during the async load window (while getKfpUiHost / getNamespace / getExperiments resolve).

Expected: panel resets/loads B's values. Before the fix: it kept showing A's values during that window, and rapid switching could persist A's metadata onto B. To widen the window for a reliable repro, throttle the network in DevTools or add a temporary delay before setMetadata in loadNotebookPanel.