Use CellOutputViewer for SchemaAnalyzer (#747)

src/CellOutputViewer/CellOutputViewer.less

@@ -0,0 +1,10 @@
+.schema-analyzer-cell-outputs {
+  padding:  10px;
+}
+
+.schema-analyzer-cell-output {
+  margin-bottom: 20px;
+  padding: 10px;
+  border-radius: 2px;
+  box-shadow: rgba(0, 0, 0, 13%) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 11%) 0px 0.3px 0.9px 0px;
+}

src/CellOutputViewer/CellOutputViewer.tsx

@@ -11,13 +11,14 @@ import * as ReactDOM from "react-dom";
 import "../../externals/iframeResizer.contentWindow.min.js"; // Required for iFrameResizer to work
 import "../Explorer/Notebook/NotebookRenderer/base.css";
 import "../Explorer/Notebook/NotebookRenderer/default.css";
+import "./CellOutputViewer.less";
 import { TransformMedia } from "./TransformMedia";
 
 export interface CellOutputViewerProps {
   id: string;
   contentRef: ContentRef;
-  hidden: boolean;
-  expanded: boolean;
+  outputsContainerClassName: string;
+  outputClassName: string;
   outputs: OnDiskOutput[];
   onMetadataChange: (metadata: JSONObject, mediaType: string, index?: number) => void;
 }
@@ -34,11 +35,9 @@ const onInit = async () => {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const props = (event as any).data as CellOutputViewerProps;
       const outputs = (
-        <div
-          data-iframe-height
-          className={`nteract-cell-outputs ${props.hidden ? "hidden" : ""} ${props.expanded ? "expanded" : ""}`}
-        >
+        <div data-iframe-height className={props.outputsContainerClassName}>
           {props.outputs?.map((output, index) => (
+            <div className={props.outputClassName} key={index}>
               <Output output={createImmutableOutput(output)} key={index}>
                 <TransformMedia
                   output_type={"display_data"}
@@ -55,6 +54,7 @@ const onInit = async () => {
                 <KernelOutputError />
                 <StreamText />
               </Output>
+            </div>
           ))}
         </div>
       );

src/Explorer/Notebook/NotebookRenderer/outputs/SandboxOutputs.tsx

@@ -15,6 +15,8 @@ import { CellOutputViewerProps } from "../../../../CellOutputViewer/CellOutputVi
 interface ComponentProps {
   id: string;
   contentRef: ContentRef;
+  outputsContainerClassName?: string;
+  outputClassName?: string;
 }
 
 interface StateProps {
@@ -59,8 +61,10 @@ export class SandboxOutputs extends React.PureComponent<ComponentProps & StatePr
     const props: CellOutputViewerProps = {
       id: this.props.id,
       contentRef: this.props.contentRef,
-      hidden: this.props.hidden,
-      expanded: this.props.expanded,
+      outputsContainerClassName: `nteract-cell-outputs ${this.props.hidden ? "hidden" : ""} ${
+        this.props.expanded ? "expanded" : ""
+      } ${this.props.outputsContainerClassName}`,
+      outputClassName: this.props.outputClassName,
       outputs: this.props.outputs.toArray().map((output) => outputToJS(output)),
       onMetadataChange: this.props.onMetadataChange,
     };

src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.less

@@ -1,10 +1,5 @@
-.shemaAnalyzerComponent {
+.schemaAnalyzerComponent {
   width: 100%;
   height: 100%;
   overflow-y: auto;
 }
-
-.schemaAnalyzerCard {
-  max-width: 4096px;
-  width: 100%;
-}

src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.tsx

@@ -1,14 +1,12 @@
 import { ImmutableOutput } from "@nteract/commutable";
 import { actions, AppState, ContentRef, KernelRef, selectors } from "@nteract/core";
-import { KernelOutputError, Output, StreamText } from "@nteract/outputs";
-import TransformMedia from "@nteract/stateful-components/lib/outputs/transform-media";
-import { Card } from "@uifabric/react-cards";
 import Immutable from "immutable";
 import { FontIcon, PrimaryButton, Spinner, SpinnerSize, Stack, Text, TextField } from "office-ui-fabric-react";
 import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import loadTransform from "../NotebookComponent/loadTransform";
+import SandboxOutputs from "../NotebookRenderer/outputs/SandboxOutputs";
 import "./SchemaAnalyzerComponent.less";
 
 interface SchemaAnalyzerComponentPureProps {
@@ -91,7 +89,8 @@ export class SchemaAnalyzerComponent extends React.Component<
     const showSchemaOutput = isKernelIdle && outputs.size > 0;
 
     return (
-      <Stack className="schemaAnalyzerComponent" horizontalAlign="center" tokens={{ childrenGap: 20, padding: 20 }}>
+      <div className="schemaAnalyzerComponent">
+        <Stack horizontalAlign="center" tokens={{ childrenGap: 20, padding: 20 }}>
           <Stack.Item grow styles={{ root: { display: "contents" } }}>
             <Stack horizontal tokens={{ childrenGap: 20 }} styles={{ root: { width: "100%" } }}>
               <Stack.Item grow align="end">
@@ -114,18 +113,12 @@ export class SchemaAnalyzerComponent extends React.Component<
           </Stack.Item>
 
           {showSchemaOutput ? (
-          outputs.map((output, index) => (
-            <Card className="schemaAnalyzerCard" key={index}>
-              <Card.Item tokens={{ padding: 10 }}>
-                <Output output={output}>
-                  <TransformMedia output_type={"display_data"} id={id} contentRef={contentRef} />
-                  <TransformMedia output_type={"execute_result"} id={id} contentRef={contentRef} />
-                  <KernelOutputError />
-                  <StreamText />
-                </Output>
-              </Card.Item>
-            </Card>
-          ))
+            <SandboxOutputs
+              id={id}
+              contentRef={contentRef}
+              outputsContainerClassName="schema-analyzer-cell-outputs"
+              outputClassName="schema-analyzer-cell-output"
+            />
           ) : this.state.isFiltering ? (
             <Stack.Item>
               {isKernelBusy && <Spinner styles={{ root: { marginTop: 40 } }} size={SpinnerSize.large} />}
@@ -155,6 +148,7 @@ export class SchemaAnalyzerComponent extends React.Component<
             </>
           )}
         </Stack>
+      </div>
     );
   }
 }