Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UI modes #781

Merged
merged 7 commits into from
Mar 1, 2024
Merged

UI modes #781

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
00c1c69
introduce UI modes
mbektas Feb 26, 2024
bb19dc3
open single files in zen mode
mbektas Feb 28, 2024
233af4d
UI modes on settings dialog
mbektas Feb 28, 2024
c72e31f
Update app.ts
mbektas Feb 28, 2024
8621eab
compose menu based on session type
mbektas Feb 28, 2024
2fa9fd8
handle reverting back to web app managed, refactoring
mbektas Feb 29, 2024
65ef5c2
simplify and remove use of Default UI mode enum
mbektas Feb 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions src/main/config/settings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,13 @@ export enum CtrlWBehavior {
DoNotClose = 'do-not-close'
}

export enum UIMode {
Custom = 'custom',
MultiDocument = 'multi-document',
SingleDocument = 'single-document',
SingleDocumentZen = 'single-document-zen'
}

export type KeyValueMap = { [key: string]: string };

export enum SettingType {
Expand Down Expand Up @@ -62,7 +69,9 @@ export enum SettingType {
condaPath = 'condaPath',
systemPythonPath = 'systemPythonPath',
pythonEnvsPath = 'pythonEnvsPath',
condaChannels = 'condaChannels'
condaChannels = 'condaChannels',

uiMode = 'uiMode'
}

export const serverLaunchArgsFixed = [
Expand Down Expand Up @@ -159,7 +168,9 @@ export class UserSettings {
condaPath: new Setting<string>(''),
systemPythonPath: new Setting<string>(''),
pythonEnvsPath: new Setting<string>(''),
condaChannels: new Setting<string[]>(['conda-forge'])
condaChannels: new Setting<string[]>(['conda-forge']),

uiMode: new Setting<UIMode>(UIMode.MultiDocument, { wsOverridable: true })
};

if (readSettings) {
Expand Down
83 changes: 83 additions & 0 deletions src/main/labview/labview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { SessionWindow } from '../sessionwindow/sessionwindow';
import {
CtrlWBehavior,
SettingType,
UIMode,
userSettings,
WorkspaceSettings
} from '../config/settings';
Expand Down Expand Up @@ -222,6 +223,87 @@ export class LabView implements IDisposable {
}
}

get uiMode(): UIMode {
return this._uiMode;
}

async setUIMode(uiMode: UIMode) {
if (uiMode === UIMode.Custom) {
this._uiMode = uiMode;
return;
}

await this._setUIMode(uiMode);
}

async _setUIMode(uiMode: UIMode) {
this._uiMode = uiMode;

await this._view.webContents.executeJavaScript(`
executeJSResult_currentLayout = {};
{
const lab = window.jupyterapp || window.jupyterlab;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we should make the code below into a proper Jupyter extension and make it expose a single command on the window, like window.setJupyterLabMode('zen' | 'multi' | 'single'). This would ensure that as we update versions the type validation catches any changes, and allow re-using it elsewhere. This could be an extension or set of extensions in this repo, or even plugins which might be disabled by default in jupyterlab repo.

My main motivation would be to ultimately revert the change which exposed jupyterapp on window e.g. to avoid users writing logic which assumes that it is there (it will not be available outside of Desktop).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that makes sense. I was also thinking about exposing desktop API endpoints (something like window.jlabDesktopApp.), so that extensions can use. I will create a separate issue for such refactoring.


if (lab) {
const labShell = lab.shell;
const statusBar = labShell.widgets('bottom').find(widget => widget.id === 'jp-main-statusbar');
const currentState = {
leftTabBarVisible: labShell.isSideTabBarVisible('left'),
leftCollapsed: labShell.leftCollapsed,
rightTabBarVisible: labShell.isSideTabBarVisible('right'),
rightCollapsed: labShell.rightCollapsed,
isSimpleInterface: labShell.mode === 'single-document',
statusBarVisible: statusBar && statusBar.isVisible,
};

console.log('CURRENT STATE', currentState);

if ('${this._uiMode}' === '${UIMode.MultiDocument}' || '${this._uiMode}' === '${UIMode.SingleDocument}') {
console.log('UI MODE', '${this._uiMode}');
labShell.mode = '${this._uiMode}' === '${UIMode.MultiDocument}' ? 'multiple-document' : 'single-document';
if (currentState.leftCollapsed) {
labShell.expandLeft();
}
if (!currentState.leftTabBarVisible) {
labShell.toggleSideTabBarVisibility('left');
}
if (!currentState.rightCollapsed) {
labShell.collapseRight();
}
if (!currentState.rightTabBarVisible) {
labShell.toggleSideTabBarVisibility('right');
}
if (statusBar) {
statusBar.setHidden(false);
}
} else if ('${this._uiMode}' === '${UIMode.SingleDocumentZen}') {
if (!currentState.leftCollapsed) {
labShell.collapseLeft();
}
if (currentState.leftTabBarVisible) {
labShell.toggleSideTabBarVisibility('left');
}
if (!currentState.rightCollapsed) {
labShell.collapseRight();
}
if (currentState.rightTabBarVisible) {
labShell.toggleSideTabBarVisibility('right');
}
if (!currentState.isSimpleInterface) {
labShell.mode = 'single-document';
}
if (currentState.statusBarVisible) {
if (statusBar) {
statusBar.setHidden(true);
}
}
}
executeJSResult_currentLayout = currentState;
}
}
`);
}

get labUIReady(): Promise<boolean> {
return new Promise<boolean>(resolve => {
const checkIfReady = () => {
Expand Down Expand Up @@ -410,6 +492,7 @@ export class LabView implements IDisposable {
private _wsSettings: WorkspaceSettings;
private _labUIReady = false;
private _evm = new EventManager();
private _uiMode: UIMode = UIMode.Custom;
}

export namespace LabView {
Expand Down
60 changes: 60 additions & 0 deletions src/main/sessionwindow/sessionwindow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
DEFAULT_WIN_HEIGHT,
DEFAULT_WIN_WIDTH,
SettingType,
UIMode,
userSettings,
WorkspaceSettings
} from '../config/settings';
Expand Down Expand Up @@ -420,6 +421,8 @@ export class SessionWindow implements IDisposable {
showServerNotificationBadge
);
}

this._setUIMode(this._wsSettings.getValue(SettingType.uiMode));
}

get titleBarView(): TitleBarView {
Expand Down Expand Up @@ -861,6 +864,56 @@ export class SessionWindow implements IDisposable {
this._newWindow();
}
},
{
label: 'UI Mode',
visible:
this._contentViewType === ContentViewType.Lab &&
!this._progressViewVisible,
type: 'submenu',
submenu: [
{
label: 'Zen Mode',
click: () => {
this._setUIMode(UIMode.SingleDocumentZen);
},
type: 'checkbox',
checked:
this._contentViewType === ContentViewType.Lab &&
this._labView.uiMode === UIMode.SingleDocumentZen
},
{
label: 'Single document IDE',
click: () => {
this._setUIMode(UIMode.SingleDocument);
},
type: 'checkbox',
checked:
this._contentViewType === ContentViewType.Lab &&
this._labView.uiMode === UIMode.SingleDocument
},
{
label: 'Multi document IDE',
click: () => {
this._setUIMode(UIMode.MultiDocument);
},
type: 'checkbox',
checked:
this._contentViewType === ContentViewType.Lab &&
this._labView.uiMode === UIMode.MultiDocument
},
{
label: 'Custom',
click: () => {
this._setUIMode(UIMode.Custom);
},
type: 'checkbox',
checked:
this._contentViewType === ContentViewType.Lab &&
this._labView.uiMode === UIMode.Custom
}
]
},
{ type: 'separator' },
{
label: 'Close Session',
visible:
Expand Down Expand Up @@ -1564,6 +1617,13 @@ export class SessionWindow implements IDisposable {
this._updateContentView();
}

private async _setUIMode(uiMode: UIMode) {
await this._labView.labUIReady;
this._wsSettings.setValue(SettingType.uiMode, uiMode);
this._wsSettings.save();
this._labView.setUIMode(uiMode);
}

private _newWindow() {
this._app.createNewEmptySession();
// keep a free server up
Expand Down
Loading