Resizing the running sidebar needlessly re-renders the open tabs section

[krassowski]

Description

Resizing the running sidebar needlessly re-renders the open tabs section. This is because the OpenTabsSignaler is connected to layoutModified signal indiscriminately, and reiszing is in fact a layout modification.

jupyterlab/packages/running-extension/src/opentabs.ts

Lines 15 to 18 in 2ceabd8

	class OpenTabsSignaler {
	constructor(labShell: ILabShell) {
	this._labShell = labShell;
	this._labShell.layoutModified.connect(this._emitTabsChanged, this);

However, the listener does not filter out the modifications which do not change the open tabs:

jupyterlab/packages/running-extension/src/opentabs.ts

Lines 41 to 47 in 2ceabd8

	private _emitTabsChanged(): void {
	this._widgets.forEach(widget => {
	widget.title.changed.disconnect(this._emitTabsChanged, this);
	});
	this._widgets = [];
	this._tabsChanged.emit(void 0);
	}

This is problematic when many tabs are open as it slows down responsiveness of the interface making the resize operation slower. However, since the list is rendered with virtual DOM using React, the performance impact is limited to spurious rerendering rather than to DOM updates.

Reproduce

1. Open the running sidebar
2. Add a breakpoint on:
   

   jupyterlab/packages/running/src/index.tsx

   Line 459 in 2ceabd8

   return (

3. Resize the sidebar
4. See the react does an unnecessary rerender

Expected behavior

The listener of layoutModified signal (_emitTabsChanged) should filter out resize operations, or we should use a more granular signal rather than the generic layoutModified

Context

• JupyterLab version: 4.1.5