Prep Schema Analyzer for flighting (#760)

* Prepare for flighting Schema Analyzer

* Rename SchemaAnalyzerComponent -> SchemaAnalyzer

* Only show Schema option if notebooks enabled

src/Explorer/Notebook/SchemaAnalyzer/SchemaAnalyzer.less

@@ -0,0 +1,5 @@
+.schemaAnalyzer {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}

src/Explorer/Notebook/SchemaAnalyzer/SchemaAnalyzer.tsx

@@ -0,0 +1,231 @@
+import { Spinner, SpinnerSize, Stack } from "@fluentui/react";
+import { ImmutableExecuteResult, ImmutableOutput } from "@nteract/commutable";
+import { actions, AppState, ContentRef, KernelRef, selectors } from "@nteract/core";
+import Immutable from "immutable";
+import * as React from "react";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
+import loadTransform from "../NotebookComponent/loadTransform";
+import SandboxOutputs from "../NotebookRenderer/outputs/SandboxOutputs";
+import "./SchemaAnalyzer.less";
+import { DefaultFilter, DefaultSampleSize, SchemaAnalyzerHeader } from "./SchemaAnalyzerHeader";
+import { SchemaAnalyzerSplashScreen } from "./SchemaAnalyzerSplashScreen";
+
+interface SchemaAnalyzerPureProps {
+  contentRef: ContentRef;
+  kernelRef: KernelRef;
+  databaseId: string;
+  collectionId: string;
+}
+
+interface SchemaAnalyzerDispatchProps {
+  runCell: (contentRef: ContentRef, cellId: string) => void;
+  addTransform: (transform: React.ComponentType & { MIMETYPE: string }) => void;
+  updateCell: (text: string, id: string, contentRef: ContentRef) => void;
+}
+
+type OutputType = "rich" | "json";
+
+interface SchemaAnalyzerState {
+  outputType: OutputType;
+  isFiltering: boolean;
+  sampleSize: string;
+}
+
+type SchemaAnalyzerProps = SchemaAnalyzerPureProps & StateProps & SchemaAnalyzerDispatchProps;
+
+export class SchemaAnalyzer extends React.Component<SchemaAnalyzerProps, SchemaAnalyzerState> {
+  private clickAnalyzeTelemetryStartKey: number;
+
+  constructor(props: SchemaAnalyzerProps) {
+    super(props);
+    this.state = {
+      outputType: "rich",
+      isFiltering: false,
+      sampleSize: DefaultSampleSize,
+    };
+  }
+
+  componentDidMount(): void {
+    loadTransform(this.props);
+  }
+
+  private onAnalyzeButtonClick = (filter: string = DefaultFilter, sampleSize: string = this.state.sampleSize) => {
+    const query = {
+      command: "listSchema",
+      database: this.props.databaseId,
+      collection: this.props.collectionId,
+      outputType: this.state.outputType,
+      filter,
+      sampleSize,
+    };
+
+    this.setState({
+      isFiltering: true,
+    });
+
+    this.props.updateCell(JSON.stringify(query), this.props.firstCellId, this.props.contentRef);
+
+    this.clickAnalyzeTelemetryStartKey = traceStart(Action.SchemaAnalyzerClickAnalyze, {
+      database: this.props.databaseId,
+      collection: this.props.collectionId,
+      sampleSize,
+    });
+
+    this.props.runCell(this.props.contentRef, this.props.firstCellId);
+  };
+
+  private traceClickAnalyzeComplete = (kernelStatus: string, outputs: Immutable.List<ImmutableOutput>) => {
+    /**
+     * CosmosMongoKernel always returns 1st output as "text/html"
+     * This output can be an error stack or information about how many documents were sampled
+     */
+    let firstTextHtmlOutput: string;
+    if (outputs.size > 0 && outputs.get(0).output_type === "execute_result") {
+      const executeResult = outputs.get(0) as ImmutableExecuteResult;
+      firstTextHtmlOutput = executeResult.data["text/html"];
+    }
+
+    const data = {
+      database: this.props.databaseId,
+      collection: this.props.collectionId,
+      firstTextHtmlOutput,
+      sampleSize: this.state.sampleSize,
+      numOfOutputs: outputs.size,
+      kernelStatus,
+    };
+
+    // Only in cases where CosmosMongoKernel runs into an error we get a single output
+    if (outputs.size === 1) {
+      traceFailure(Action.SchemaAnalyzerClickAnalyze, data, this.clickAnalyzeTelemetryStartKey);
+    } else {
+      traceSuccess(Action.SchemaAnalyzerClickAnalyze, data, this.clickAnalyzeTelemetryStartKey);
+    }
+  };
+
+  render(): JSX.Element {
+    const { firstCellId: id, contentRef, kernelStatus, outputs } = this.props;
+    if (!id) {
+      return <></>;
+    }
+
+    const isKernelBusy = kernelStatus === "busy";
+    const isKernelIdle = kernelStatus === "idle";
+    const showSchemaOutput = isKernelIdle && outputs?.size > 0;
+
+    if (showSchemaOutput && this.clickAnalyzeTelemetryStartKey) {
+      this.traceClickAnalyzeComplete(kernelStatus, outputs);
+      this.clickAnalyzeTelemetryStartKey = undefined;
+    }
+
+    return (
+      <div className="schemaAnalyzer">
+        <Stack tokens={{ childrenGap: 20, padding: 20 }}>
+          <SchemaAnalyzerHeader
+            isKernelIdle={isKernelIdle}
+            isKernelBusy={isKernelBusy}
+            onSampleSizeUpdated={(sampleSize) => this.setState({ sampleSize })}
+            onAnalyzeButtonClick={this.onAnalyzeButtonClick}
+          />
+
+          {showSchemaOutput ? (
+            <SandboxOutputs
+              id={id}
+              contentRef={contentRef}
+              outputsContainerClassName="schema-analyzer-cell-outputs"
+              outputClassName="schema-analyzer-cell-output"
+            />
+          ) : this.state.isFiltering ? (
+            <Spinner styles={{ root: { marginTop: 40 } }} size={SpinnerSize.large} />
+          ) : (
+            <SchemaAnalyzerSplashScreen
+              isKernelIdle={isKernelIdle}
+              isKernelBusy={isKernelBusy}
+              onAnalyzeButtonClick={this.onAnalyzeButtonClick}
+            />
+          )}
+        </Stack>
+      </div>
+    );
+  }
+}
+
+interface StateProps {
+  firstCellId: string;
+  kernelStatus: string;
+  outputs: Immutable.List<ImmutableOutput>;
+}
+
+interface InitialProps {
+  kernelRef: string;
+  contentRef: string;
+}
+
+// Redux
+const makeMapStateToProps = (state: AppState, initialProps: InitialProps) => {
+  const { kernelRef, contentRef } = initialProps;
+  const mapStateToProps = (state: AppState) => {
+    let kernelStatus;
+    let firstCellId;
+    let outputs;
+
+    const kernel = selectors.kernel(state, { kernelRef });
+    if (kernel) {
+      kernelStatus = kernel.status;
+    }
+
+    const content = selectors.content(state, { contentRef });
+    if (content?.type === "notebook") {
+      const cellOrder = selectors.notebook.cellOrder(content.model);
+      if (cellOrder.size > 0) {
+        firstCellId = cellOrder.first() as string;
+
+        const model = selectors.model(state, { contentRef });
+        if (model && model.type === "notebook") {
+          const cell = selectors.notebook.cellById(model, { id: firstCellId });
+          if (cell) {
+            outputs = cell.get("outputs", Immutable.List());
+          }
+        }
+      }
+    }
+
+    return {
+      firstCellId,
+      kernelStatus,
+      outputs,
+    };
+  };
+  return mapStateToProps;
+};
+
+const makeMapDispatchToProps = () => {
+  const mapDispatchToProps = (dispatch: Dispatch) => {
+    return {
+      addTransform: (transform: React.ComponentType & { MIMETYPE: string }) => {
+        return dispatch(
+          actions.addTransform({
+            mediaType: transform.MIMETYPE,
+            component: transform,
+          })
+        );
+      },
+      runCell: (contentRef: ContentRef, cellId: string) => {
+        return dispatch(
+          actions.executeCell({
+            contentRef,
+            id: cellId,
+          })
+        );
+      },
+      updateCell: (text: string, id: string, contentRef: ContentRef) => {
+        dispatch(actions.updateCellSource({ id, contentRef, value: text }));
+      },
+    };
+  };
+  return mapDispatchToProps;
+};
+
+export default connect(makeMapStateToProps, makeMapDispatchToProps)(SchemaAnalyzer);

src/Explorer/Notebook/SchemaAnalyzer/SchemaAnalyzerAdapter.tsx

@@ -0,0 +1,48 @@
+import { actions, createContentRef, createKernelRef, KernelRef } from "@nteract/core";
+import * as React from "react";
+import { Provider } from "react-redux";
+import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
+import {
+  NotebookComponentBootstrapper,
+  NotebookComponentBootstrapperOptions,
+} from "../NotebookComponent/NotebookComponentBootstrapper";
+import SchemaAnalyzer from "./SchemaAnalyzer";
+import { SchemaAnalyzerNotebook } from "./SchemaAnalyzerUtils";
+
+export class SchemaAnalyzerAdapter extends NotebookComponentBootstrapper implements ReactAdapter {
+  public parameters: unknown;
+  private kernelRef: KernelRef;
+
+  constructor(options: NotebookComponentBootstrapperOptions, private databaseId: string, private collectionId: string) {
+    super(options);
+
+    if (!this.contentRef) {
+      this.contentRef = createContentRef();
+      this.kernelRef = createKernelRef();
+
+      this.getStore().dispatch(
+        actions.fetchContent({
+          filepath: SchemaAnalyzerNotebook.path,
+          params: {},
+          kernelRef: this.kernelRef,
+          contentRef: this.contentRef,
+        })
+      );
+    }
+  }
+
+  public renderComponent(): JSX.Element {
+    const props = {
+      contentRef: this.contentRef,
+      kernelRef: this.kernelRef,
+      databaseId: this.databaseId,
+      collectionId: this.collectionId,
+    };
+
+    return (
+      <Provider store={this.getStore()}>
+        <SchemaAnalyzer {...props} />;
+      </Provider>
+    );
+  }
+}

src/Explorer/Notebook/SchemaAnalyzer/SchemaAnalyzerHeader.tsx

@@ -0,0 +1,101 @@
+import {
+  DefaultButton,
+  Icon,
+  IRenderFunction,
+  ITextFieldProps,
+  PrimaryButton,
+  Stack,
+  TextField,
+  TooltipHost,
+} from "@fluentui/react";
+import * as React from "react";
+
+type SchemaAnalyzerHeaderProps = {
+  isKernelIdle: boolean;
+  isKernelBusy: boolean;
+  onSampleSizeUpdated: (sampleSize: string) => void;
+  onAnalyzeButtonClick: (filter: string, sampleSize: string) => void;
+};
+
+export const DefaultFilter = "";
+export const DefaultSampleSize = "1000";
+const FilterPlaceholder = "{ field: 'value' }";
+const SampleSizePlaceholder = "1000";
+const MinSampleSize = 1;
+const MaxSampleSize = 5000;
+
+export const SchemaAnalyzerHeader = ({
+  isKernelIdle,
+  isKernelBusy,
+  onSampleSizeUpdated,
+  onAnalyzeButtonClick,
+}: SchemaAnalyzerHeaderProps): JSX.Element => {
+  const [filter, setFilter] = React.useState<string>(DefaultFilter);
+  const [sampleSize, setSampleSize] = React.useState<string>(DefaultSampleSize);
+
+  return (
+    <Stack horizontal tokens={{ childrenGap: 10 }}>
+      <Stack.Item grow>
+        <TextField
+          value={filter}
+          onChange={(event, newValue) => setFilter(newValue)}
+          label="Filter"
+          placeholder={FilterPlaceholder}
+          disabled={!isKernelIdle}
+        />
+      </Stack.Item>
+      <Stack.Item>
+        <TextField
+          value={sampleSize}
+          onChange={(event, newValue) => {
+            const num = Number(newValue);
+            if (!newValue || (num >= MinSampleSize && num <= MaxSampleSize)) {
+              setSampleSize(newValue);
+              onSampleSizeUpdated(newValue);
+            }
+          }}
+          label="Sample size"
+          onRenderLabel={onSampleSizeWrapDefaultLabelRenderer}
+          placeholder={SampleSizePlaceholder}
+          disabled={!isKernelIdle}
+        />
+      </Stack.Item>
+      <Stack.Item align="end">
+        <PrimaryButton
+          text={isKernelBusy ? "Analyzing..." : "Analyze"}
+          onClick={() => {
+            const sampleSizeToUse = sampleSize || DefaultSampleSize;
+            setSampleSize(sampleSizeToUse);
+            onAnalyzeButtonClick(filter, sampleSizeToUse);
+          }}
+          disabled={!isKernelIdle}
+          styles={{ root: { width: 120 } }}
+        />
+      </Stack.Item>
+      <Stack.Item align="end">
+        <DefaultButton
+          text="Reset"
+          disabled={!isKernelIdle}
+          onClick={() => {
+            setFilter(DefaultFilter);
+            setSampleSize(DefaultSampleSize);
+          }}
+        />
+      </Stack.Item>
+    </Stack>
+  );
+};
+
+const onSampleSizeWrapDefaultLabelRenderer = (
+  props: ITextFieldProps,
+  defaultRender: IRenderFunction<ITextFieldProps>
+): JSX.Element => {
+  return (
+    <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
+      <span>{defaultRender(props)}</span>
+      <TooltipHost content={`Number of documents to sample between ${MinSampleSize} and ${MaxSampleSize}`}>
+        <Icon iconName="Info" ariaLabel="Info" />
+      </TooltipHost>
+    </Stack>
+  );
+};

src/Explorer/Notebook/SchemaAnalyzer/SchemaAnalyzerSplashScreen.tsx

@@ -0,0 +1,39 @@
+import { FontIcon, PrimaryButton, Spinner, SpinnerSize, Stack, Text } from "@fluentui/react";
+import * as React from "react";
+
+type SchemaAnalyzerSplashScreenProps = {
+  isKernelIdle: boolean;
+  isKernelBusy: boolean;
+  onAnalyzeButtonClick: () => void;
+};
+
+export const SchemaAnalyzerSplashScreen = ({
+  isKernelIdle,
+  isKernelBusy,
+  onAnalyzeButtonClick,
+}: SchemaAnalyzerSplashScreenProps): JSX.Element => {
+  return (
+    <Stack horizontalAlign="center" tokens={{ childrenGap: 20, padding: 20 }}>
+      <Stack.Item>
+        <FontIcon iconName="Chart" style={{ fontSize: 100, color: "#43B1E5", marginTop: 40 }} />
+      </Stack.Item>
+      <Stack.Item>
+        <Text variant="xxLarge">Explore your schema</Text>
+      </Stack.Item>
+      <Stack.Item>
+        <Text variant="large">
+          Quickly visualize your schema to infer the frequency, types and ranges of fields in your data set.
+        </Text>
+      </Stack.Item>
+      <Stack.Item>
+        <PrimaryButton
+          styles={{ root: { fontSize: 18, padding: 30 } }}
+          text={isKernelBusy ? "Analyzing..." : "Analyze Schema"}
+          onClick={() => onAnalyzeButtonClick()}
+          disabled={!isKernelIdle}
+        />
+      </Stack.Item>
+      <Stack.Item>{isKernelBusy && <Spinner size={SpinnerSize.large} />}</Stack.Item>
+    </Stack>
+  );
+};

src/Explorer/Notebook/SchemaAnalyzer/SchemaAnalyzerUtils.ts

@@ -0,0 +1,44 @@
+import { Notebook } from "@nteract/commutable";
+import { IContent } from "@nteract/types";
+import * as InMemoryContentProviderUtils from "../NotebookComponent/ContentProviders/InMemoryContentProviderUtils";
+
+const notebookName = "schema-analyzer-component-notebook.ipynb";
+const notebookPath = InMemoryContentProviderUtils.toContentUri(notebookName);
+const notebook: Notebook = {
+  cells: [
+    {
+      cell_type: "code",
+      metadata: {},
+      execution_count: 0,
+      outputs: [],
+      source: "",
+    },
+  ],
+  metadata: {
+    kernelspec: {
+      displayName: "Mongo",
+      language: "mongocli",
+      name: "mongo",
+    },
+    language_info: {
+      file_extension: "ipynb",
+      mimetype: "application/json",
+      name: "mongo",
+      version: "1.0",
+    },
+  },
+  nbformat: 4,
+  nbformat_minor: 4,
+};
+
+export const SchemaAnalyzerNotebook: IContent<"notebook"> = {
+  name: notebookName,
+  path: notebookPath,
+  type: "notebook",
+  writable: true,
+  created: "",
+  last_modified: "",
+  mimetype: "application/x-ipynb+json",
+  content: notebook,
+  format: "json",
+};