Hide web variableviewer features (#10313)

* Hiding the data viewer on the variable viewer if web (#10305)

* wip

* wip

* almost there

* both fixes in the same commit, I need to clean this up

* Not using IsWebExtension

* no more console logs

* no more TODO comment

* changelog entry

* comment about the DataFrame viewer and the Plot viewer

CHANGELOG.md

@@ -11,6 +11,10 @@
    ([#8399](https://github.com/Microsoft/vscode-jupyter/issues/8399))
 1. Enabled the Interactive Window in web.
    ([#9717](https://github.com/Microsoft/vscode-jupyter/issues/9717))
+1. Enabled the Variables Viewer in web.
+   ([#10154](https://github.com/microsoft/vscode-jupyter/pull/10154))
+   However, neither the DataFrame viewer nor the Plot viewer are enabled in this release.
+   (Tracking: [#9665](https://github.com/microsoft/vscode-jupyter/issues/9665))
 
 ### Fixes
 

src/notebooks/helpers.ts

@@ -41,6 +41,7 @@ import {
 import { IJupyterKernelSpec, KernelConnectionMetadata } from '../kernels/types';
 import { JupyterNotebookView, InteractiveWindowView } from './constants';
 import { CellOutputMimeTypes } from './types';
+import { getOSType, OSType } from '../platform/common/utils/platform';
 
 /**
  * Whether this is a Notebook we created/manage/use.
@@ -360,7 +361,8 @@ function translateDisplayDataOutput(
     */
     const metadata = getOutputMetadata(output);
     // If we have SVG or PNG, then add special metadata to indicate whether to display `open plot`
-    if ('image/svg+xml' in output.data || 'image/png' in output.data) {
+    const osType = getOSType();
+    if (osType !== OSType.Unknown && ('image/svg+xml' in output.data || 'image/png' in output.data)) {
         metadata.__displayOpenPlotIcon = true;
     }
     const items: NotebookCellOutputItem[] = [];

src/webviews/extension-side/types.ts

@@ -22,6 +22,7 @@ export interface IJupyterExtraSettings extends IJupyterSettings {
         };
         theme: string;
         hasPythonExtension: boolean;
+        isWeb: boolean;
     };
 }
 

src/webviews/extension-side/webviewHost.ts

@@ -26,6 +26,7 @@ import { CssMessages, InteractiveWindowMessages, SharedMessages } from '../../pl
 import { captureTelemetry, sendTelemetryEvent } from '../../telemetry';
 import { DefaultTheme, PythonExtension, Telemetry } from '../webview-side/common/constants';
 import { IJupyterExtraSettings } from './types';
+import { getOSType, OSType } from '../../platform/common/utils/platform';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
@@ -246,7 +247,8 @@ export abstract class WebviewHost<IMapping> implements IDisposable {
                     fontFamily: this.getValue(editor, 'fontFamily', "Consolas, 'Courier New', monospace")
                 },
                 theme,
-                hasPythonExtension: pythonExt !== undefined
+                hasPythonExtension: pythonExt !== undefined,
+                isWeb: getOSType() === OSType.Unknown
             }
         };
     }

src/webviews/webview-side/interactive-common/redux/reducers/variables.ts

@@ -10,8 +10,10 @@ import {
 import {
     InteractiveWindowMessages,
     IFinishCell,
-    IInteractiveWindowMapping
+    IInteractiveWindowMapping,
+    SharedMessages
 } from '../../../../../platform/messageTypes';
+import { IJupyterExtraSettings } from '../../../../extension-side/types';
 import { BaseReduxActionPayload } from '../../../../types';
 import { combineReducers, QueuableAction, ReducerArg, ReducerFunc } from '../../../react-common/reduxUtils';
 import { postActionToExtension } from '../helpers';
@@ -37,6 +39,7 @@ export type IVariableState = {
     showVariablesOnDebug: boolean;
     viewHeight: number;
     requestInProgress: boolean;
+    isWeb: boolean;
 };
 
 type VariableReducerFunc<T = never | undefined> = ReducerFunc<
@@ -125,6 +128,14 @@ function handleSort(arg: VariableReducerArg<ISortVariablesRequest>): IVariableSt
     };
 }
 
+function handleIsWebUpdate(arg: VariableReducerArg<string>): IVariableState {
+    const settings = JSON.parse(arg.payload.data) as IJupyterExtraSettings;
+    return {
+        ...arg.prevState,
+        isWeb: settings.extraSettings.isWeb
+    };
+}
+
 function handleVariableExplorerHeightResponse(arg: VariableReducerArg<IVariableExplorerHeight>): IVariableState {
     if (arg.payload.data) {
         const containerHeight = arg.payload.data.containerHeight;
@@ -367,7 +378,8 @@ const reducerMap: Partial<VariableActionMapping> = {
     [InteractiveWindowMessages.GetVariablesResponse]: handleResponse,
     [CommonActionType.RUN_BY_LINE]: handleDebugStart,
     [InteractiveWindowMessages.UpdateVariableViewExecutionCount]: updateExecutionCount,
-    [CommonActionType.SORT_VARIABLES]: handleSort
+    [CommonActionType.SORT_VARIABLES]: handleSort,
+    [SharedMessages.UpdateSettings]: handleIsWebUpdate
 };
 
 export function generateVariableReducer(
@@ -387,7 +399,8 @@ export function generateVariableReducer(
         refreshCount: 0,
         showVariablesOnDebug,
         viewHeight: 0,
-        requestInProgress: false
+        requestInProgress: false,
+        isWeb: false
     };
 
     // Then combine that with our map of state change message to reducer

src/webviews/webview-side/interactive-common/variableExplorer.tsx

@@ -39,6 +39,7 @@ interface IVariableExplorerProps {
     sort(sortColumn: string, sortAscending: boolean): void;
     viewHeight: number;
     requestInProgress: boolean;
+    isWeb: boolean;
 }
 
 const defaultColumnProperties = {
@@ -66,6 +67,7 @@ interface IGridRow {
 interface IVariableExplorerState {
     containerHeight: number;
     gridHeight: number;
+    isWeb: boolean;
 }
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -99,7 +101,8 @@ export class VariableExplorer extends React.Component<IVariableExplorerProps, IV
 
         this.state = {
             containerHeight: this.props.containerHeight,
-            gridHeight: this.props.gridHeight
+            gridHeight: this.props.gridHeight,
+            isWeb: this.props.isWeb
         };
 
         this.handleResizeMouseMove = this.handleResizeMouseMove.bind(this);
@@ -119,6 +122,7 @@ export class VariableExplorer extends React.Component<IVariableExplorerProps, IV
                     <VariableExplorerButtonCellFormatter
                         showDataExplorer={this.props.showDataExplorer}
                         baseTheme={this.props.baseTheme}
+                        isWeb={() => this.props.isWeb}
                     />
                 )
             },
@@ -190,6 +194,10 @@ export class VariableExplorer extends React.Component<IVariableExplorerProps, IV
             return true;
         }
 
+        if (prevState.isWeb !== nextProps.isWeb) {
+            return true;
+        }
+
         return false;
     }
 

src/webviews/webview-side/interactive-common/variableExplorerButtonCellFormatter.tsx

@@ -21,6 +21,7 @@ interface IVariableExplorerButtonCellFormatterProps {
     baseTheme: string;
     value?: IButtonCellValue;
     showDataExplorer(targetVariable: IJupyterVariable, numberOfColumns: number): void;
+    isWeb: () => boolean;
 }
 
 export class VariableExplorerButtonCellFormatter extends React.Component<IVariableExplorerButtonCellFormatterProps> {
@@ -31,7 +32,7 @@ export class VariableExplorerButtonCellFormatter extends React.Component<IVariab
     public override render() {
         const className = 'variable-explorer-button-cell';
         if (this.props.value !== null && this.props.value !== undefined) {
-            if (this.props.value.supportsDataExplorer) {
+            if (this.props.value.supportsDataExplorer && !this.props.isWeb()) {
                 return (
                     <div className={className}>
                         <ImageButton

src/webviews/webview-side/interactive-common/variablePanel.tsx

@@ -28,6 +28,7 @@ export interface IVariablePanelProps {
     sort(sortColumn: string, sortAscending: boolean): void;
     viewHeight: number;
     requestInProgress: boolean;
+    isWeb: boolean;
 }
 
 export class VariablePanel extends React.Component<IVariablePanelProps> {
@@ -51,6 +52,7 @@ export class VariablePanel extends React.Component<IVariablePanelProps> {
                 refreshCount={this.props.refreshCount}
                 viewHeight={this.props.viewHeight}
                 requestInProgress={this.props.requestInProgress}
+                isWeb={this.props.isWeb}
             />
         );
     }

src/webviews/webview-side/react-common/settingsReactSide.ts

@@ -49,7 +49,8 @@ export function getDefaultSettings(): IJupyterExtraSettings {
                 fontFamily: "Consolas, 'Courier New', monospace"
             },
             theme: 'Default Dark+',
-            hasPythonExtension: true
+            hasPythonExtension: true,
+            isWeb: false
         },
         runStartupCommands: '',
         debugJustMyCode: true,

src/webviews/webview-side/variable-view/variableViewPanel.tsx

@@ -111,7 +111,8 @@ ${buildSettingsCss(this.props.settings)}`}</style>
             refreshCount: this.props.variableState.refreshCount,
             offsetHeight: 0, // No toolbar in variable view panel
             viewHeight: this.props.variableState.viewHeight, // Height to use for variable view mode
-            requestInProgress: this.props.variableState.requestInProgress
+            requestInProgress: this.props.variableState.requestInProgress,
+            isWeb: this.props.variableState.isWeb
         };
     };