How to add NotebookApp component in a react app?

[pragyagarg642]

We want to embed notebook app component (@nteract/notebook-app-component) in our react application to create/ open a basic notebook with kernel attached, but there isn't much documentation available around how to use it. Docs could show a complete usage example with below things:

1. How to configure redux store?
2. How to configure kernels?
3. How to sync state between notebook and react parent component?

Additional context
Below is a sample code snippet, but it doesn't help in attaching kernels or even open a notebook.

import React from "react";
import ReactDOM from "react-dom";
import {Provider} from "react-redux";
import NotebookApp from "@nteract/notebook-app-component";
import {applyMiddleware, createStore} from "redux";
import { createContentRef } from "@nteract/core";
import {reducer, initialState, contentRef} from "./json-reducer";
import {createEpicMiddleware} from "redux-observable";
import {contents} from "rx-jupyter";

const epicMiddleware = createEpicMiddleware({dependencies: contents.JupyterContentProvider})
const store = createStore(reducer, initialState, applyMiddleware(epicMiddleware))

const App = () => (
    <Provider store={store}>
        <NotebookApp
            contentRef={contentRef}
        />
    </Provider>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App/>, rootElement);

json-reducer code

import * as Immutable from "immutable";
import { makeEntitiesRecord, makeContentsRecord } from "@nteract/core";
import { createContentRef, createKernelspecsRef, makeNotebookContentRecord } from "@nteract/core";

export const contentRef = createContentRef();
const kernelspecsRef = createKernelspecsRef();

const initialRefs = Immutable.Map().set(
  contentRef,
  makeNotebookContentRecord()
);

export const initialState = {
  core: makeStateRecord({
    currentKernelspecsRef: kernelspecsRef,
    entities: makeEntitiesRecord({
      contents: makeContentsRecord({
        byRef: initialRefs
      })
    })
  }),
  config: Immutable.Map({
    theme: "light"
  })
};

export const reducer = (state, action) => {
  const newState = { ...state };
  switch (action.type) {
    case "CREATE": {
      // we create a new object
      newState[action.payload.id] = action.payload;
      return newState;
    }
    // case "RETRIEVE": let selection = state[id];
    case "UPDATE": {
      // we do nothing if the object does not exist
      if (!Object.keys(state).includes(action.payload.id)) {
        return state;
      }
      let newObject = Object.assign(action.payload.id);
      if (action.payload.event) {
        // we update a property
        let { name, value } = action.payload.event.target;
        newObject[name] = value;
      } else {
        // we replace the object
        newObject = action.payload;
      }
      newState[action.payload.id] = newObject;
      return newState;
    }
    case "DELETE": {
      // we delete the objext
      if (!action.payload.id) {
        delete newState[action.payload];
      } else delete newState[action.payload.id];
      return newState;
    }
    default: {
      console.warn("Unhandled Action of type ", action.type);
      console.log(action.payload);
      return newState;
    }
  }
};

Please assist. Thank you.

[captainsafia]

@pragyagarg642 Document is ongoing for this. I'd recommend reviewing the content over at docs.nteract.io to build a general understanding of the components.

I'd also take a look at web app implementation in https://github.com/nteract/nteract/tree/main/applications/web for guidance.

How to configure redux store?

https://github.com/nteract/nteract/blob/main/applications/web/redux/store.ts is a helpful example for this.

How to configure kernels?

You'll need to have a Jupyter server that users can connect to. After that, it's a mix of using the FETCH_KERNELSPECS actions to get the available kernels and the LAUNCH_KERNEL_BY_NAME actions to use them.

How to sync state between notebook and react parent component?

The Redux store is the source of truth and can be used to sync data. You can also use constructs like React props/state to share data.

[pragyagarg642]

Thanks @captainsafia, this helps.

[pragyagarg642]

Hi @captainsafia, I'm getting empty and non-editable code cells when I add notebook app component in my react app. It is same as the issue #5342. Is this a bug or am I missing something?
Thanks in advance!

[captainsafia]

Can you share what your code looks like? The bug above is related to an issue with the way ContentRefs are set up in the notebooks.

To debug this, you can install Redux DevTools are verify that the correct ContentRefs are stored in the Redux store and also used when fetching/loading the contents.

[pragyagarg642]

We're reusing nteract web app's code only for creating notebook component, the only difference is we're using jupyter server instead of binder server. I'll try and debug it. Thanks for the reply!