random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-04-15 14:17:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use CellOutputViewer for SchemaAnalyzer (#747)

Browse Source
This commit is contained in:
Tanuj Mittal 2021-05-04 22:42:27 -07:00 committed by GitHub
parent aab624e241
commit d1d28885d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 97 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/CellOutputViewer/CellOutputViewer.less Normal file
View File

@ -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;
}

44
src/CellOutputViewer/CellOutputViewer.tsx
View File

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

8
src/Explorer/Notebook/NotebookRenderer/outputs/SandboxOutputs.tsx
View File

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

7
src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.less
View File

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

122
src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.tsx
View File

@ -1,14 +1,12 @@
import { ImmutableOutput } from "@nteract/commutable"; import { ImmutableOutput } from "@nteract/commutable";
import { actions, AppState, ContentRef, KernelRef, selectors } from "@nteract/core"; 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 Immutable from "immutable";
import { FontIcon, PrimaryButton, Spinner, SpinnerSize, Stack, Text, TextField } from "office-ui-fabric-react"; import { FontIcon, PrimaryButton, Spinner, SpinnerSize, Stack, Text, TextField } from "office-ui-fabric-react";
import * as React from "react"; import * as React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Dispatch } from "redux"; import { Dispatch } from "redux";
import loadTransform from "../NotebookComponent/loadTransform"; import loadTransform from "../NotebookComponent/loadTransform";
import SandboxOutputs from "../NotebookRenderer/outputs/SandboxOutputs";
import "./SchemaAnalyzerComponent.less"; import "./SchemaAnalyzerComponent.less";
interface SchemaAnalyzerComponentPureProps { interface SchemaAnalyzerComponentPureProps {
@ -91,70 +89,66 @@ export class SchemaAnalyzerComponent extends React.Component<
const showSchemaOutput = isKernelIdle && outputs.size > 0; const showSchemaOutput = isKernelIdle && outputs.size > 0;
return ( return (
<Stack className="schemaAnalyzerComponent" horizontalAlign="center" tokens={{ childrenGap: 20, padding: 20 }}> <div className="schemaAnalyzerComponent">
<Stack.Item grow styles={{ root: { display: "contents" } }}> <Stack horizontalAlign="center" tokens={{ childrenGap: 20, padding: 20 }}>
<Stack horizontal tokens={{ childrenGap: 20 }} styles={{ root: { width: "100%" } }}> <Stack.Item grow styles={{ root: { display: "contents" } }}>
<Stack.Item grow align="end"> <Stack horizontal tokens={{ childrenGap: 20 }} styles={{ root: { width: "100%" } }}>
<TextField <Stack.Item grow align="end">
value={this.state.filter} <TextField
onChange={this.onFilterTextFieldChange} value={this.state.filter}
label="Filter" onChange={this.onFilterTextFieldChange}
placeholder="{ field: 'value' }" label="Filter"
disabled={!isKernelIdle} placeholder="{ field: 'value' }"
/> disabled={!isKernelIdle}
</Stack.Item> />
<Stack.Item align="end"> </Stack.Item>
<PrimaryButton <Stack.Item align="end">
text={isKernelBusy ? "Analyzing..." : "Analyze"} <PrimaryButton
onClick={this.onAnalyzeButtonClick} text={isKernelBusy ? "Analyzing..." : "Analyze"}
disabled={!isKernelIdle} onClick={this.onAnalyzeButtonClick}
/> disabled={!isKernelIdle}
</Stack.Item> />
</Stack> </Stack.Item>
</Stack.Item> </Stack>
{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>
))
) : this.state.isFiltering ? (
<Stack.Item>
{isKernelBusy && <Spinner styles={{ root: { marginTop: 40 } }} size={SpinnerSize.large} />}
</Stack.Item> </Stack.Item>
) : (
<> {showSchemaOutput ? (
<SandboxOutputs
id={id}
contentRef={contentRef}
outputsContainerClassName="schema-analyzer-cell-outputs"
outputClassName="schema-analyzer-cell-output"
/>
) : this.state.isFiltering ? (
<Stack.Item> <Stack.Item>
<FontIcon iconName="Chart" style={{ fontSize: 100, color: "#43B1E5", marginTop: 40 }} /> {isKernelBusy && <Spinner styles={{ root: { marginTop: 40 } }} size={SpinnerSize.large} />}
</Stack.Item> </Stack.Item>
<Stack.Item> ) : (
<Text variant="xxLarge">Explore your schema</Text> <>
</Stack.Item> <Stack.Item>
<Stack.Item> <FontIcon iconName="Chart" style={{ fontSize: 100, color: "#43B1E5", marginTop: 40 }} />
<Text variant="large"> </Stack.Item>
Quickly visualize your schema to infer the frequency, types and ranges of fields in your data set. <Stack.Item>
</Text> <Text variant="xxLarge">Explore your schema</Text>
</Stack.Item> </Stack.Item>
<Stack.Item> <Stack.Item>
<PrimaryButton <Text variant="large">
styles={{ root: { fontSize: 18, padding: 30 } }} Quickly visualize your schema to infer the frequency, types and ranges of fields in your data set.
text={isKernelBusy ? "Analyzing..." : "Analyze Schema"} </Text>
onClick={this.onAnalyzeButtonClick} </Stack.Item>
disabled={kernelStatus !== "idle"} <Stack.Item>
/> <PrimaryButton
</Stack.Item> styles={{ root: { fontSize: 18, padding: 30 } }}
<Stack.Item>{isKernelBusy && <Spinner size={SpinnerSize.large} />}</Stack.Item> text={isKernelBusy ? "Analyzing..." : "Analyze Schema"}
</> onClick={this.onAnalyzeButtonClick}
)} disabled={kernelStatus !== "idle"}
</Stack> />
</Stack.Item>
<Stack.Item>{isKernelBusy && <Spinner size={SpinnerSize.large} />}</Stack.Item>
</>
)}
</Stack>
</div>
); );
} }
} }