Git Product home page Git Product logo

Comments (5)

rrickyp avatar rrickyp commented on May 31, 2024 1

Great, thanks a lot man

from jupyter-ui.

echarles avatar echarles commented on May 31, 2024

Hi @rrickyp Are you getting the content from the server or loading it locally with eg. import ./notebook.json?

If locally, you can manipulate it like any other json object. There are also types you can use from the@juptyeralb/nbformat package.

If you load the notebook remotely, can you share more details (is it via the Notebook component, or via the services, or...)

from jupyter-ui.

rrickyp avatar rrickyp commented on May 31, 2024

So, I load the notebook like this

import notebook from "./samples/NotebookExample1.ipynb.json";
const NOTEBOOK_UID = 'notebook-1';
const Jup:NextPageWithLayout = ()=> {
  return (
    <div>
    <Jupyter
        jupyterServerHttpUrl="https://oss.datalayer.tech/api/jupyter"
        jupyterServerWsUrl="wss://oss.datalayer.tech/api/jupyter"
        jupyterToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
            >
      <Typography sx={{
          color: "white"
        }}>A Jupyter Notebook</Typography>
      <Notebook ipywidgets="classic"
      nbformat={notebook as INotebookContent} 
      uid={NOTEBOOK_UID}
      Toolbar={NotebookToolbar}


      />
    </Jupyter>
      </div>
  )
}

this is the NotebookExample1.ipynb.json

{
 "cells": [
  {
    "cell_type": "code",
    "execution_count": 1,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "text/plain": [
        "2"
       ]
      },
      "execution_count": 1,
      "metadata": {},
      "output_type": "execute_result"
     }
    ],
    "source": [
     "1+1"
    ]
   }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python (ipykernel)",
   "language": "python",
   "name": "python"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.10.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}

and if we add cell for example 2+2 and execute it, it should become like this:

{
 "cells": [
  {
    "cell_type": "code",
    "execution_count": 1,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "text/plain": [
        "2"
       ]
      },
      "execution_count": 1,
      "metadata": {},
      "output_type": "execute_result"
     }
    ],
    "source": [
     "1+1"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": 1,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "text/plain": [
        "4"
       ]
      },
      "execution_count": 1,
      "metadata": {},
      "output_type": "execute_result"
     }
    ],
    "source": [
     "2+2"
    ]
   },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python (ipykernel)",
   "language": "python",
   "name": "python"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.10.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}

but how to get the change?

from jupyter-ui.

echarles avatar echarles commented on May 31, 2024

OK, so you need to get back the notebook model after use changes it. https://github.com/datalayer/jupyter-ui/blob/main/packages/react/src/examples/NotebookModelChange.tsx shows you how to do that. The state will be updated an you can read it back with const notebookModel = selectNotebookModel(NOTEBOOK_UID);

from jupyter-ui.

echarles avatar echarles commented on May 31, 2024

Closing as answered.

from jupyter-ui.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.