How to add NotebookApp component in a react app? #5539
-
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:
Additional context 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. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
@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.
https://github.com/nteract/nteract/blob/main/applications/web/redux/store.ts is a helpful example for this.
You'll need to have a Jupyter server that users can connect to. After that, it's a mix of using the
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. |
Beta Was this translation helpful? Give feedback.
@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.
https://github.com/nteract/nteract/blob/main/applications/web/redux/store.ts is a helpful example for this.
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 theLAUNCH_KERNEL_BY_NAME
actions to use them.