Added support for taking screenshot during Notebook publish to Gallery (#108)

* Added support for taking screenshot

- Screenshot is taken using html2canvas package
- Converted to base 64 and uploaded to metadata
- For Using first display output
  - Notebok object is passed instead of string, to publish pane
  - The first cell with output present is parsed out
  - The dom is also parsed to get corresponding div element to take screenshot of the first output

* fixed bug

* Addressed PR comments

- FIxed bug that didn't capture screenshot when mutiple notebook tabs are opened

* removed unnecessary dependencies

* fixed compile issues

* more edits

src/Explorer/Notebook/NotebookComponent/NotebookComponentAdapter.tsx

@@ -8,6 +8,7 @@ import { actions, createContentRef, createKernelRef, selectors } from "@nteract/
 import VirtualCommandBarComponent from "./VirtualCommandBarComponent";
 import { NotebookContentItem } from "../NotebookContentItem";
 import { NotebookComponentBootstrapper } from "./NotebookComponentBootstrapper";
+import { CdbAppState } from "./types";
 
 export interface NotebookComponentAdapterOptions {
   contentItem: NotebookContentItem;
@@ -18,6 +19,7 @@ export interface NotebookComponentAdapterOptions {
 
 export class NotebookComponentAdapter extends NotebookComponentBootstrapper implements ReactAdapter {
   private onUpdateKernelInfo: () => void;
+  public getNotebookParentElement: () => HTMLElement;
   public parameters: any;
 
   constructor(options: NotebookComponentAdapterOptions) {
@@ -44,6 +46,11 @@ export class NotebookComponentAdapter extends NotebookComponentBootstrapper impl
         })
       );
     }
+
+    this.getNotebookParentElement = () => {
+      const cdbAppState = this.getStore().getState() as CdbAppState;
+      return cdbAppState.cdb.currentNotebookParentElements.get(this.contentRef);
+    };
   }
 
   protected renderExtraComponent = (): JSX.Element => {

src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx

@@ -17,7 +17,7 @@ import {
 } from "@nteract/core";
 import * as Immutable from "immutable";
 import { Provider } from "react-redux";
-import { CellType, CellId, toJS } from "@nteract/commutable";
+import { CellType, CellId, ImmutableNotebook } from "@nteract/commutable";
 import { Store, AnyAction } from "redux";
 
 import "./NotebookComponent.less";
@@ -71,14 +71,14 @@ export class NotebookComponentBootstrapper {
     );
   }
 
-  public getContent(): { name: string; content: string } {
+  public getContent(): { name: string; content: string | ImmutableNotebook } {
     const record = this.getStore()
       .getState()
       .core.entities.contents.byRef.get(this.contentRef);
-    let content: string;
+    let content: string | ImmutableNotebook;
     switch (record.model.type) {
       case "notebook":
-        content = JSON.stringify(toJS(record.model.notebook));
+        content = record.model.notebook;
         break;
       case "file":
         content = record.model.text;

src/Explorer/Notebook/NotebookComponent/actions.ts

@@ -84,3 +84,22 @@ export const traceNotebookTelemetry = (payload: {
     payload
   };
 };
+
+export const UPDATE_NOTEBOOK_PARENT_DOM_ELTS = "UPDATE_NOTEBOOK_PARENT_DOM_ELTS";
+export interface UpdateNotebookParentDomEltAction {
+  type: "UPDATE_NOTEBOOK_PARENT_DOM_ELTS";
+  payload: {
+    contentRef: ContentRef;
+    parentElt: HTMLElement;
+  };
+}
+
+export const UpdateNotebookParentDomElt = (payload: {
+  contentRef: ContentRef;
+  parentElt: HTMLElement;
+}): UpdateNotebookParentDomEltAction => {
+  return {
+    type: UPDATE_NOTEBOOK_PARENT_DOM_ELTS,
+    payload
+  };
+};

src/Explorer/Notebook/NotebookComponent/reducers.ts

@@ -82,6 +82,19 @@ export const cdbReducer = (state: CdbRecord, action: Action) => {
       });
       return state;
     }
+
+    case cdbActions.UPDATE_NOTEBOOK_PARENT_DOM_ELTS: {
+      const typedAction = action as cdbActions.UpdateNotebookParentDomEltAction;
+      var parentEltsMap = state.get("currentNotebookParentElements");
+      const contentRef = typedAction.payload.contentRef;
+      const parentElt = typedAction.payload.parentElt;
+      if (parentElt) {
+        parentEltsMap.set(contentRef, parentElt);
+      } else {
+        parentEltsMap.delete(contentRef);
+      }
+      return state.set("currentNotebookParentElements", parentEltsMap);
+    }
   }
   return state;
 };

src/Explorer/Notebook/NotebookComponent/types.ts

@@ -1,5 +1,5 @@
 import * as Immutable from "immutable";
-import { AppState } from "@nteract/core";
+import { AppState, ContentRef } from "@nteract/core";
 
 import { Notebook } from "../../../Common/Constants";
 import { CellId } from "@nteract/commutable";
@@ -9,6 +9,7 @@ export interface CdbRecordProps {
   defaultExperience: string | undefined;
   kernelRestartDelayMs: number;
   hoveredCellId: CellId | undefined;
+  currentNotebookParentElements: Map<ContentRef, HTMLElement>;
 }
 
 export type CdbRecord = Immutable.RecordOf<CdbRecordProps>;
@@ -21,5 +22,6 @@ export const makeCdbRecord = Immutable.Record<CdbRecordProps>({
   databaseAccountName: undefined,
   defaultExperience: undefined,
   kernelRestartDelayMs: Notebook.kernelRestartInitialDelayMs,
-  hoveredCellId: undefined
+  hoveredCellId: undefined,
+  currentNotebookParentElements: new Map<ContentRef, HTMLElement>()
 });