Plots in an editor (#4364)

Creates a new editor that takes a plot id as input. The Plots view has a button that can open the plot in an editor. The comm has been refactored to be shared among plot clients and will be disposed of when all clients are disposed. The entire feature is hidden behind an experimental flag. It is in the Application > Experimental category in the preferences. Signed-off-by: Tim Mok <[email protected]> Co-authored-by: Nick Strayer <[email protected]>
posit-dev · Sep 10, 2024 · 475768a · 475768a
1 parent 6cc3471
commit 475768a
Show file tree

Hide file tree

Showing 15 changed files with 920 additions and 271 deletions.
diff --git a/build/lib/i18n.resources.json b/build/lib/i18n.resources.json
@@ -214,6 +214,10 @@
 			"name": "vs/workbench/contrib/positronOutputWebview",
 			"project": "vscode-workbench"
 		},
+		{
+			"name": "vs/workbench/contrib/positronPlotsEditor",
+			"project": "vscode-workbench"
+		},
 		{
 			"name": "vs/workbench/contrib/preferences",
 			"project": "vscode-workbench"

diff --git a/src/vs/base/common/network.ts b/src/vs/base/common/network.ts
@@ -129,6 +129,7 @@ export namespace Schemas {
 	 */
 	export const positronDataExplorer = 'positron-data-explorer';
 	export const positronNotebook = 'positron-notebook';
+	export const positronPlotsEditor = 'positron-plots-editor';
 
 	// --- End Positron ---
 

diff --git a/src/vs/workbench/contrib/positronPlots/browser/components/actionBars.tsx b/src/vs/workbench/contrib/positronPlots/browser/components/actionBars.tsx
@@ -11,7 +11,7 @@ import { ICommandService } from 'vs/platform/commands/common/commands';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
-import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
+import { IConfigurationChangeEvent, IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { PositronActionBar } from 'vs/platform/positronActionBar/browser/positronActionBar';
 import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService';
 import { ActionBarRegion } from 'vs/platform/positronActionBar/browser/components/actionBarRegion';
@@ -28,6 +28,7 @@ import { INotificationService } from 'vs/platform/notification/common/notificati
 import { PlotsClearAction, PlotsCopyAction, PlotsNextAction, PlotsPopoutAction, PlotsPreviousAction, PlotsSaveAction } from 'vs/workbench/contrib/positronPlots/browser/positronPlotsActions';
 import { IHoverService } from 'vs/platform/hover/browser/hover';
 import { HtmlPlotClient } from 'vs/workbench/contrib/positronPlots/browser/htmlPlotClient';
+import { POSITRON_EDITOR_PLOTS, positronPlotsEditorEnabled } from 'vs/workbench/contrib/positronPlotsEditor/browser/positronPlotsEditor.contribution';
 
 // Constants.
 const kPaddingLeft = 14;
@@ -58,6 +59,7 @@ export interface ActionBarsProps {
 export const ActionBars = (props: PropsWithChildren<ActionBarsProps>) => {
 	// Hooks.
 	const positronPlotsContext = usePositronPlotsContext();
+	const [useEditorPlots, setUseEditorPlots] = React.useState<boolean>(positronPlotsEditorEnabled(props.configurationService));
 
 	// Do we have any plots?
 	const noPlots = positronPlotsContext.positronPlotInstances.length === 0;
@@ -85,9 +87,18 @@ export const ActionBars = (props: PropsWithChildren<ActionBarsProps>) => {
 	const enablePopoutPlot = hasPlots &&
 		selectedPlot instanceof HtmlPlotClient;
 
+	const enableEditorPlot = hasPlots && useEditorPlots
+		&& (selectedPlot instanceof PlotClientInstance
+			|| selectedPlot instanceof StaticPlotClient);
+
 	useEffect(() => {
-		// Empty for now.
-	});
+		const disposable = props.configurationService.onDidChangeConfiguration((event: IConfigurationChangeEvent) => {
+			if (event.affectedKeys.has(POSITRON_EDITOR_PLOTS)) {
+				setUseEditorPlots(positronPlotsEditorEnabled(props.configurationService));
+			}
+		});
+		return () => disposable.dispose();
+	}, [props.configurationService]);
 
 	// Clear all the plots from the service.
 	const clearAllPlotsHandler = () => {
@@ -136,28 +147,43 @@ export const ActionBars = (props: PropsWithChildren<ActionBarsProps>) => {
 						<ActionBarButton iconId='positron-right-arrow' disabled={disableRight} tooltip={localize('positronShowNextPlot', "Show next plot")}
 							ariaLabel={localize('positronShowNextPlot', "Show next plot")} onPressed={showNextPlotHandler} />
 
-						{(enableSizingPolicy || enableSavingPlots || enableZoomPlot || enablePopoutPlot) && <ActionBarSeparator />}
-						{enableSavingPlots && <ActionBarButton iconId='positron-save' tooltip={localize('positronSavePlot', "Save plot")}
-							ariaLabel={localize('positronSavePlot', "Save plot")} onPressed={savePlotHandler} />}
-						{enableCopyPlot && <ActionBarButton iconId='copy' disabled={!hasPlots} tooltip={localize('positron-copy-plot', "Copy plot to clipboard")} ariaLabel={localize('positron-copy-plot', "Copy plot to clipboard")}
-							onPressed={copyPlotHandler} />}
-						{enableZoomPlot && <ZoomPlotMenuButton actionHandler={zoomPlotHandler} zoomLevel={props.zoomLevel} />}
-						{enableSizingPolicy &&
+						{(enableSizingPolicy || enableSavingPlots || enableZoomPlot || enablePopoutPlot) ? <ActionBarSeparator /> : null}
+						{enableSavingPlots ? <ActionBarButton iconId='positron-save' tooltip={localize('positronSavePlot', "Save plot")}
+							ariaLabel={localize('positronSavePlot', "Save plot")} onPressed={savePlotHandler} /> : null}
+						{enableCopyPlot ? <ActionBarButton iconId='copy' disabled={!hasPlots} tooltip={localize('positron-copy-plot', "Copy plot to clipboard")} ariaLabel={localize('positron-copy-plot', "Copy plot to clipboard")}
+							onPressed={copyPlotHandler} /> : null}
+						{enableZoomPlot ? <ZoomPlotMenuButton actionHandler={zoomPlotHandler} zoomLevel={props.zoomLevel} /> : null}
+						{enableSizingPolicy ?
 							<SizingPolicyMenuButton
 								keybindingService={props.keybindingService}
 								layoutService={props.layoutService}
 								notificationService={positronPlotsContext.notificationService}
 								plotsService={positronPlotsContext.positronPlotsService}
 								plotClient={selectedPlot}
 							/>
+							: null
 						}
-						{enablePopoutPlot &&
+						{enablePopoutPlot ?
 							<ActionBarButton
 								iconId='positron-open-in-new-window'
 								align='right'
 								tooltip={localize('positron-popout-plot', "Open plot in new window")}
 								ariaLabel={localize('positron-popout-plot', "Open plot in new window")}
 								onPressed={popoutPlotHandler} />
+							: null
+						}
+						{enableEditorPlot ?
+							<ActionBarButton
+								iconId='go-to-file'
+								align='right'
+								tooltip={localize('positron-open-plot-editor', "Open plot in editor")}
+								ariaLabel={localize('positron-open-plot-editor', "Open plot in editor")}
+								onPressed={() => {
+									if (hasPlots) {
+										positronPlotsContext.positronPlotsService.openEditor();
+									}
+								}} />
+							: null
 						}
 					</ActionBarRegion>
 					<ActionBarRegion location='right'>

diff --git a/src/vs/workbench/contrib/positronPlots/browser/modalDialogs/savePlotModalDialog.tsx b/src/vs/workbench/contrib/positronPlots/browser/modalDialogs/savePlotModalDialog.tsx
@@ -7,7 +7,7 @@ import 'vs/css!./savePlotModalDialog';
 import * as React from 'react';
 import { localize } from 'vs/nls';
 import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService';
-import { IRenderedPlot, PlotClientInstance } from 'vs/workbench/services/languageRuntime/common/languageRuntimePlotClient';
+import { PlotClientInstance } from 'vs/workbench/services/languageRuntime/common/languageRuntimePlotClient';
 import { IDialogService, IFileDialogService } from 'vs/platform/dialogs/common/dialogs';
 import { URI } from 'vs/base/common/uri';
 import { ProgressBar } from 'vs/base/browser/ui/positronComponents/progressBar';
@@ -29,6 +29,7 @@ import { IPlotSize, IPositronPlotSizingPolicy } from 'vs/workbench/services/posi
 import { ILogService } from 'vs/platform/log/common/log';
 import { PlotSizingPolicyIntrinsic } from 'vs/workbench/services/positronPlots/common/sizingPolicyIntrinsic';
 import { INotificationService } from 'vs/platform/notification/common/notification';
+import { IRenderedPlot } from 'vs/workbench/services/languageRuntime/common/positronPlotCommProxy';
 
 export interface SavePlotOptions {
 	uri: string;
@@ -249,7 +250,7 @@ const SavePlotModalDialog = (props: SavePlotModalDialogProps) => {
 			}
 			size = { height: height.value, width: width.value };
 		}
-		return props.plotClient.preview(size, dpi.value / BASE_DPI, format);
+		return props.plotClient.render(size, dpi.value / BASE_DPI, format, true);
 	};
 
 	const previewButton = () => {

diff --git a/src/vs/workbench/contrib/positronPlots/browser/positronPlots.contribution.ts b/src/vs/workbench/contrib/positronPlots/browser/positronPlots.contribution.ts
@@ -18,7 +18,7 @@ import { IPositronPlotsService, POSITRON_PLOTS_VIEW_ID } from 'vs/workbench/serv
 import { IWorkbenchContributionsRegistry, Extensions as WorkbenchExtensions, IWorkbenchContribution } from 'vs/workbench/common/contributions';
 import { Extensions as ViewContainerExtensions, IViewsRegistry } from 'vs/workbench/common/views';
 import { registerAction2 } from 'vs/platform/actions/common/actions';
-import { PlotsClearAction, PlotsCopyAction, PlotsNextAction, PlotsPopoutAction, PlotsPreviousAction, PlotsRefreshAction, PlotsSaveAction } from 'vs/workbench/contrib/positronPlots/browser/positronPlotsActions';
+import { PlotsClearAction, PlotsCopyAction, PlotsEditorAction, PlotsNextAction, PlotsPopoutAction, PlotsPreviousAction, PlotsRefreshAction, PlotsSaveAction } from 'vs/workbench/contrib/positronPlots/browser/positronPlotsActions';
 import { POSITRON_SESSION_CONTAINER } from 'vs/workbench/contrib/positronSession/browser/positronSessionContainer';
 
 // Register the Positron plots service.
@@ -69,6 +69,7 @@ class PositronPlotsContribution extends Disposable implements IWorkbenchContribu
 		registerAction2(PlotsPreviousAction);
 		registerAction2(PlotsClearAction);
 		registerAction2(PlotsPopoutAction);
+		registerAction2(PlotsEditorAction);
 	}
 }
 

diff --git a/src/vs/workbench/contrib/positronPlots/browser/positronPlotsActions.ts b/src/vs/workbench/contrib/positronPlots/browser/positronPlotsActions.ts
@@ -7,9 +7,11 @@ import * as nls from 'vs/nls';
 import { localize, localize2 } from 'vs/nls';
 import { ILocalizedString } from 'vs/platform/action/common/action';
 import { Action2 } from 'vs/platform/actions/common/actions';
+import { ContextKeyExpr } from 'vs/platform/contextkey/common/contextkey';
 import { IsDevelopmentContext } from 'vs/platform/contextkey/common/contextkeys';
 import { ServicesAccessor } from 'vs/platform/instantiation/common/instantiation';
 import { INotificationService } from 'vs/platform/notification/common/notification';
+import { POSITRON_EDITOR_PLOTS } from 'vs/workbench/contrib/positronPlotsEditor/browser/positronPlotsEditor.contribution';
 import { IPositronPlotsService } from 'vs/workbench/services/positronPlots/common/positronPlots';
 
 export const POSITRON_PLOTS_ACTION_CATEGORY = nls.localize('positronPlotsCategory', "Plots");
@@ -204,3 +206,31 @@ export class PlotsPopoutAction extends Action2 {
 		}
 	}
 }
+
+export class PlotsEditorAction extends Action2 {
+	static ID = 'workbench.action.positronPlots.openEditor';
+
+	constructor() {
+		super({
+			id: PlotsEditorAction.ID,
+			title: localize2('positronPlots.openEditor', 'Open Plot in Editor tab'),
+			category,
+			f1: true,
+			precondition: ContextKeyExpr.equals(`config.${POSITRON_EDITOR_PLOTS}`, true),
+		});
+	}
+
+	/**
+	 * Runs the action and opens the selected plot in the editor.
+	 *
+	 * @param accessor The service accessor.
+	 */
+	async run(accessor: ServicesAccessor) {
+		const plotsService = accessor.get(IPositronPlotsService);
+		if (plotsService.selectedPlotId) {
+			plotsService.openEditor();
+		} else {
+			accessor.get(INotificationService).info(localize('positronPlots.noPlotSelected', 'No plot selected.'));
+		}
+	}
+}