2b:null 2c:["$","title",null,{"children":"Hello, Jupyter! | Bryan Gin-ge Chen | Observable"}] 31:T4d2,md`# Hello, Jupyter! *WIP, suggestions / forks / comments welcome!* See https://talk.observablehq.com/t/wip-observable-as-a-jupyter-kernel-frontend/2899 Links: - https://medium.com/@tomgrek/reactive-python-javascript-communication-in-jupyter-notebook-e2a879e25906 (intriguing, but never finished) - Basic docs: - https://jupyter-client.readthedocs.io/en/latest/messaging.html (see particularly [the IOPub section](https://jupyter-client.readthedocs.io/en/stable/messaging.html#messages-on-the-iopub-pub-sub-channel)) - https://github.com/jupyterlab/jupyterlab/tree/master/packages/services / http://jupyterlab.github.io/jupyterlab/services/ (github examples most helpful) - Output related (all these seem to be difficult to pull into Observable) - https://github.com/jupyterlab/jupyterlab/tree/master/packages/outputarea / http://jupyterlab.github.io/jupyterlab/outputarea/classes/outputarea.html - https://github.com/nteract/nteract/tree/master/packages/outputs / https://components.nteract.io/#section-nteractoutputs - Widgets? - https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Low%20Level.html - https://github.com/jupyter-widgets/ipywidgets/tree/4bbe07f28042b218f8566dd0df60e92e2b38b29b/examples/web3 `32:Tc58,async function output(code, div0, throwOnError) { function escape(str) { const escapeRE = /${escape(result)}`); div.value = result; break; } case 'text/html': { const result = html`

${content.data['text/html']}`; div.appendChild(result); div.value = result; break; } case 'image/svg+xml': { const image = html`

`; div.appendChild(image); break; } case 'image/png': case 'image/jpeg': { const image = html`

`; div.appendChild(image); break; } default: { div.appendChild( html`

${escape(
              JSON.stringify(content)
            )}`
          );
          div.value = content;
        }
      }
    }
  }

  const future = session.kernel.requestExecute({ code }, true);
  const div = div0 || html``;
  let errored;
  future.onIOPub = msg => {
    console.log(msg);
    switch (msg.msg_type) {
      case 'execute_input': {
        div.value = undefined;
        break;
      }
      case 'execute_result': {
        appendMIME(msg.content, div);
        break;
      }
      case 'stream': {
        if (msg.content.name === 'stdout') {
          div.appendChild(
            html`${escape(
              msg.content.text
            )}`
          );
          div.value = msg.content.text;
        } else {
          div.appendChild(
            html`${escape(
              JSON.stringify(msg.content)
            )}`
          );
          div.value = msg.content;
        }
        break;
      }
      case 'display_data': {
        appendMIME(msg.content, div);
        break;
      }
      case 'error': {
        if (throwOnError) {
          errored = msg.content;
        }
        // firefox with 75ch drops characters to the next line randomly...
        div.appendChild(
          html`${msg.content.traceback.map(
            s => {
              return ansi_up.ansi_to_html(s);
            }
          )}`
        );
        div.value = msg.content;
        // div.appendChild(
        //   html`${
        //     msg.content.ename
        //   }: ${msg.content.evalue.replace('<', '<')}`
        // );
        break;
      }
      default: {
        //
        // div.value = msg;
      }
    }
  };
  await future.done;
  if (errored)
    throw new Error(
      `${errored.ename}: ${errored.evalue}, traceback: ${errored.traceback}`
    );
  return div;
}33:T6f0,function cmEditor(opts0) {
  cmStyle;
  const height = opts0.height; //|| '500px';
  const cmDiv = html``;
  const div = html`${opts0.header}${cmDiv}`;
  const opts = Object.assign(
    {
      value: `a = 1
b = 1
print(a+b)`,
      lineNumbers: true,
      tabIndex: 0,
      lineWrapping: true,
      indentUnit: 4,
      // gutters: ["CodeMirror-linenumbers"],
      mode: 'python'
    },
    opts0
  );
  const editor = CodeMirror(cmDiv, opts);
  editor.on('change', () => {
    div.dispatchEvent(new CustomEvent('input'));
  });
  // ------------
  // KEY BINDINGS
  // ------------
  function tabHandler(cm) {
    // spaces instead of tabs
    cm.replaceSelection(Array(cm.getOption("indentUnit") + 1).join(" "));
  }
  function escHandler(cm) {
    if (!editor.state.completionActive) cm.setOption("extraKeys", navKeyMap);
  }
  function navEscHandler(cm) {
    if (!editor.state.completionActive) cm.setOption("extraKeys", keyMap);
  }
  const keyMap = {
    Tab: tabHandler,
    Esc: escHandler,
    "Ctrl-/": "toggleComment",
    "Shift-Enter": opts.execute
  };
  const navKeyMap = {
    Tab: false,
    "Shift-Tab": false,
    Esc: navEscHandler,
    "Ctrl-/": "toggleComment",
    "Shift-Enter": opts.execute
  };
  editor.setOption("extraKeys", keyMap);
  editor.on("focus", navEscHandler);

  setTimeout(() => {
    // editor.setSize('100%', '100');
    editor.refresh();
    // div.style.height = div.clientHeight + 'px';
  }, 0);

  div.value = {};
  Object.defineProperties(div.value, {
    editor: {
      get: () => editor,
      enumerable: true
    },
    value: {
      get: () => editor.getValue(),
      enumerable: true
    }
  });
  return div;
}34:T43b,md`## LICENSE

MIT`

/* Copyright 2020 Bryan Gin-ge Chen

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */35:[]
2f:{"id":"50c2f0ae47e769c0","slug":null,"title":"Hello, Jupyter!","thumbnail":"65c6c922b6375c0bba00038eeba94acf088b8b92338945de2cd7531a19bc8da8","access_level":"unlisted","create_time":"$D2019-09-04T02:35:31.403Z","update_time":"$D2020-03-11T22:32:07.725Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"d2fd23101beb2a61","login":"bryangingechen","name":"Bryan Gin-ge Chen","avatar_url":"https://avatars-next.observableusercontent.com/73f0dccc0b7fc5c845e6a52a58e01a2ae432cc529aaada0d10ab602137e603c0","tier":"starter_2024"},"version":436,"publish_version":436,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c13a1a27cf52564","login":"bryangingechen","name":"Bryan Gin-ge Chen","avatar_url":"https://avatars-next.observableusercontent.com/73f0dccc0b7fc5c845e6a52a58e01a2ae432cc529aaada0d10ab602137e603c0","tier":null}],"members":[{"type":"individual","id":"5c13a1a27cf52564","login":"bryangingechen","name":"Bryan Gin-ge Chen","avatar_url":"https://avatars-next.observableusercontent.com/73f0dccc0b7fc5c845e6a52a58e01a2ae432cc529aaada0d10ab602137e603c0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"80583d7c09f19038","slug":"inputs","title":"Ingredients","owner":{"id":"d2fd23101beb2a61","login":"bryangingechen","name":"Bryan Gin-ge Chen"}},"type":"notebook","body":{"title":"Hello, Jupyter!","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"md`## Connecting to Jupyter`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"jupyterlab_services = require('https://unpkg.com/@jupyterlab/services@5.0.0-alpha.0/dist/dist/index.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`In what follows, we'll start the Jupyter kernel server locally by running JupyterLab. If you only have the Jupyter Notebook installed, replace \\`lab\\` everywhere below with \\`notebook\\`. If you want to get extra fancy, you can set up the [Jupyter Kernel Gateway](https://github.com/jupyter/kernel_gateway) and use that instead too.\n\nTo set up, open your terminal emulator and run \n\\`\\`\\`bash\njupyter lab --generate-config\n\\`\\`\\` \n\nThen edit \\`~/.jupyter/jupyter_notebook_config.py\\` so that you have a line that reads:\n\\`\\`\\`python\nc.NotebookApp.allow_origin = 'https://bryangingechen.observableusercontent.com'\n\\`\\`\\`\n(If you fork this notebook, you'll need to change \\`bryangingechen\\` to \\`yourusername\\`.)\n\nNow you can start JupyterLab with:\n\\`\\`\\`bash\n> jupyter lab\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`It'll be a bit tougher if you want to use Firefox. You'll have to enable SSL because of [this bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1488740). You could then follow the instructions [here](https://letsencrypt.org/docs/certificates-for-localhost/) to create and self-sign a certificate for \\`localhost\\` and then start JupyterLab with:\n\\`\\`\\`bash\n> jupyter lab --certfile=/path/to/localhost.crt --keyfile=/path/to/localhost.key\n\\`\\`\\`\nThen make sure the following SSL checkbox is checked. (If you're using Chrome or Safari, you should be OK without using SSL. If you're using SSL in Chrome, it may be helpful to navigate to \\`chrome://flags\\` and enable \"Allow invalid certificates for resources loaded from localhost.\")`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"md`Once JupyterLab has started, you should see something like this in your shell:\n\\`\\`\\`bash\n[C HH:MM:SS.mmm LabApp]\n\n    To access the notebook, open this file in a browser:\n        file:///path/to/Jupyter/runtime/nbserver-XXXXXX-open.html\n    Or copy and paste one of these URLs:\n        https://localhost:8888/?token=some_long_hex_string\n     or https://127.0.0.1:8888/?token=some_long_hex_string\n\\`\\`\\`\nCopy the long hex string after \\`token=\\` and paste it into the text box below and hit \"Go\". This Observable notebook should then connect to your local Jupyter server and create a new kernel session named \\`observable_session\\`. You can press \"Go\" again to reset the server.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"viewof secure = checkbox(['use SSL (required for Firefox)'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"viewof token = {\n  const form = text({\n    placeholder: \"Token\",\n    description: \"Paste the Jupyter Lab token given in the terminal output\",\n    submit: \"Go\"\n  });\n  form.input.style.width = '500px';\n  form.input.style.maxWidth = '80%';\n  return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"viewof kernelName = {\n  const kernelSpecs = await jupyterlab_services.Kernel.getSpecs({\n    baseUrl: serverSettings.baseUrl,\n    init: serverSettings.init,\n    Request,\n    fetch,\n    token\n  });\n  console.log(kernelSpecs);\n  const options = [];\n  for (const name in kernelSpecs.kernelspecs) {\n    options.push({\n      label: kernelSpecs.kernelspecs[name].display_name,\n      value: name\n    });\n  }\n  const sel = select({\n    title: \"Jupyter kernel\",\n    description: \"Please choose an available kernel.\",\n    options,\n    value: kernelSpecs.default,\n    submit: \"Go\"\n  });\n  return sel;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"serverSettings = {\n  if (!token) throw new Error('Paste a valid token in the form above');\n  return {\n    Headers,\n    Request,\n    WebSocket,\n    fetch,\n    init: {\n      cache: 'no-store',\n      credentials: 'same-origin'\n    },\n    baseUrl: `http${secure ? 's' : ''}://localhost:8888`,\n    wsUrl: `ws${secure ? 's' : ''}://localhost:8888`,\n    token\n  };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"session = {\n  const session = await jupyterlab_services.Session.startNew({\n    kernelName,\n    path: 'observable_session',\n    serverSettings\n  });\n\n  invalidation.then(() => {\n    session.shutdown();\n  });\n\n  return session;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"md`## First examples`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"md`The \\`output\\` function takes as input a string (Python code to be executed) and an (optional) HTML element. It then sends the code to the Jupyter kernel and renders the response into the HTML element. (The rendering function is still a bit incomplete at the moment.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"output('3*3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"md`The Python output (usually a string) is placed in the HTML element's \\`value\\` property, enabling you to use \\`output\\` to create an Observable view element.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"viewof outputTest = output(`[(j*j,j^2) for j in range(15)]`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"outputTest","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"md`The function \\`pythonCell\\` can be used to create a basic CodeMirror editor that you can use to input syntax-highlighted Python code. Click the \"Execute!\" button or hit Shift-Enter to execute the code in the Jupyter kernel. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"pythonCell()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"md`The first argument to \\`pythonCell\\` should be an options object that is passed to [the CodeMirror constructor](https://codemirror.net/doc/manual.html#config). The most useful option is probably \\`value\\` which lets you set the initial code. The second argument to \\`pythonCell\\` is a flag: if true, the initial code is executed when the cell is run.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"viewof pCellVersion = pythonCell(\n  {\n    value: `import sys\nprint(sys.version)`\n  },\n  true\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"viewof pCellFor = pythonCell({\n  value: `for i in range(5):\n    print(i)`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"viewof pCellGraphic = pythonCell(\n  {\n    value: `import matplotlib\nimport matplotlib.pyplot as plt\nimport numpy as np\nfrom IPython.display import set_matplotlib_formats\nset_matplotlib_formats('png')\n# Data for plotting\nt = np.arange(0.0, 2.0, 0.01)\ns = 1 + np.sin(2 * np.pi * t)\n\nfig, ax = plt.subplots()\nax.plot(t, s)\n\nax.set(xlabel='time (s)', ylabel='voltage (mV)',\n       title='About as simple as it gets, folks')\nax.grid()\n\n# fig.savefig(\"test.png\")\nplt.show()`\n  },\n  true\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"md`## Reactive programming with a Python \"backend\"`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"viewof ra = reactiveOutput(\n  [],\n  `a = 50\na`,\n  (_, a) => Number(a),\n  `del a`\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"viewof rb = reactiveOutput(\n  [],\n  `b = 5\nb`,\n  (_, b) => Number(b),\n  `del b`\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"viewof rc = reactiveOutput(\n  [ra, rb],\n  `c = ${ra} + ${rb}\nc`,\n  (_, c) => Number(c),\n  `del c`\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"function pythonCell(opts, run) {\n  const header = html`