default non-text mimetypes to white background (microsoft#8452)

news/2 Fixes/8423.md

@@ -0,0 +1 @@
+Add a white backtground for most non-text mimetypes. This lets stuff like Atlair look good in dark mode.

src/datascience-ui/interactive-common/cellOutput.tsx

@@ -249,71 +249,72 @@ export class CellOutput extends React.Component<ICellOutputProps> {
             const mimeBundle = copy.data as nbformat.IMimeBundle;
             let data: nbformat.MultilineString | JSONObject = mimeBundle[mimeType];
 
-            switch (mimeType) {
-                case 'text/plain':
-                case 'text/html':
-                    return {
-                        mimeType,
-                        data: concatMultilineStringOutput(data as nbformat.MultilineString),
-                        isText,
-                        isError,
-                        renderWithScrollbars: true,
-                        extraButton,
-                        doubleClick: noop
+            // Text based mimeTypes don't get a white background
+            if (/^text\//.test(mimeType)) {
+                return {
+                    mimeType,
+                    data: concatMultilineStringOutput(data as nbformat.MultilineString),
+                    isText,
+                    isError,
+                    renderWithScrollbars: true,
+                    extraButton,
+                    doubleClick: noop
+                };
+            } else if (mimeType === 'image/svg+xml' || mimeType === 'image/png') {
+                // If we have a png or svg enable the plot viewer button
+                // There should be two mime bundles. Well if enablePlotViewer is turned on. See if we have both
+                const svg = mimeBundle['image/svg+xml'];
+                const png = mimeBundle['image/png'];
+                const buttonTheme = this.props.themeMatplotlibPlots ? this.props.baseTheme : 'vscode-light';
+                let doubleClick: () => void = noop;
+                if (svg && png) {
+                    // Save the svg in the extra button.
+                    const openClick = () => {
+                        this.props.expandImage(svg.toString());
                     };
+                    extraButton = (
+                        <div className='plot-open-button'>
+                            <ImageButton baseTheme={buttonTheme} tooltip={getLocString('DataScience.plotOpen', 'Expand image')} onClick={openClick}>
+                                <Image baseTheme={buttonTheme} class='image-button-image' image={ImageName.OpenPlot} />
+                            </ImageButton>
+                        </div>
+                    );
 
-                case 'image/svg+xml':
-                case 'image/png':
-                    // There should be two mime bundles. Well if enablePlotViewer is turned on. See if we have both
-                    const svg = mimeBundle['image/svg+xml'];
-                    const png = mimeBundle['image/png'];
-                    const buttonTheme = this.props.themeMatplotlibPlots ? this.props.baseTheme : 'vscode-light';
-                    let doubleClick: () => void = noop;
-                    if (svg && png) {
-                        // Save the svg in the extra button.
-                        const openClick = () => {
-                            this.props.expandImage(svg.toString());
-                        };
-                        extraButton = (
-                            <div className='plot-open-button'>
-                                <ImageButton baseTheme={buttonTheme} tooltip={getLocString('DataScience.plotOpen', 'Expand image')} onClick={openClick}>
-                                    <Image baseTheme={buttonTheme} class='image-button-image' image={ImageName.OpenPlot} />
-                                </ImageButton>
-                            </div>
-                        );
-
-                        // Switch the data to the png
-                        data = png;
-                        mimeType = 'image/png';
-
-                        // Switch double click to do the same thing as the extra button
-                        doubleClick = openClick;
-                    }
-
-                    // return the image
-                    // If not theming plots then wrap in a span
-                    return {
-                        mimeType,
-                        data,
-                        isText,
-                        isError,
-                        renderWithScrollbars,
-                        extraButton,
-                        doubleClick,
-                        outputSpanClassName: this.props.themeMatplotlibPlots ? undefined : 'cell-output-plot-background'
-                    };
+                    // Switch the data to the png
+                    data = png;
+                    mimeType = 'image/png';
 
-                default:
-                    return {
-                        mimeType,
-                        data,
-                        isText,
-                        isError,
-                        renderWithScrollbars,
-                        extraButton,
-                        doubleClick: noop
-                    };
+                    // Switch double click to do the same thing as the extra button
+                    doubleClick = openClick;
+                }
+
+                // return the image
+                // If not theming plots then wrap in a span
+                return {
+                    mimeType,
+                    data,
+                    isText,
+                    isError,
+                    renderWithScrollbars,
+                    extraButton,
+                    doubleClick,
+                    outputSpanClassName: this.props.themeMatplotlibPlots ? undefined : 'cell-output-plot-background'
+                };
+            } else {
+                // For anything else just return it with a white plot background. This lets stuff like vega look good in
+                // dark mode
+                return {
+                    mimeType,
+                    data,
+                    isText,
+                    isError,
+                    renderWithScrollbars,
+                    extraButton,
+                    doubleClick: noop,
+                    outputSpanClassName: this.props.themeMatplotlibPlots ? undefined : 'cell-output-plot-background'
+                };
             }
+
         } catch (e) {
             return {
                 data: e.toString(),

src/test/datascience/manualTestFiles/manualTestFile.py

@@ -1,4 +1,4 @@
-# To run this file either conda or pip install the following: jupyter, numpy, matplotlib, pandas, tqdm, bokeh
+# To run this file either conda or pip install the following: jupyter, numpy, matplotlib, pandas, tqdm, bokeh, vega_datasets, altair, vega
 
 # %% Basic Imports
 import numpy as np
@@ -18,13 +18,13 @@
 p.circle([1,2,3,4,5], [6,7,2,4,5], size=15, line_color="navy", fill_color="orange", fill_alpha=0.5)
 show(p)
 
-#%% Progress bar
+# %% Progress bar
 from tqdm import trange
 import time
 for i in trange(100):
     time.sleep(0.01)
 
-#%% [markdown]
+# %% [markdown]
 # # Heading
 # ## Sub-heading
 # *bold*,_italic_,`monospace`
@@ -39,20 +39,32 @@
 #
 # [Link](http://www.microsoft.com)
 
-#%% Magics
+# %% Magics
 %whos
 
-#%% Some extra variable types for the variable explorer
+# %% Some extra variable types for the variable explorer
 myNparray = np.array([['Bob', 1, 2, 3], ['Alice', 4, 5, 6], ['Gina', 7, 8, 9]])
 myDataFrame = pd.DataFrame(myNparray, columns=['name', 'b', 'c', 'd'])
 mySeries = myDataFrame['name']
 myList = [x ** 2 for x in range(0, 100000)]
 myString = 'testing testing testing'
 
-#%%
+# %% Latex
 %%latex
 \begin{align}
 \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
 \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
 \nabla \cdot \vec{\mathbf{B}} & = 0
 \end{align}
+
+# %% Altair (vega)
+import altair as alt
+from vega_datasets import data
+
+iris = data.iris()
+
+alt.Chart(iris).mark_point().encode(
+    x='petalLength',
+    y='petalWidth',
+    color='species'
+)