31:T7c7,md`${chapter('1 Introduction')} *Jupyter* is a very popular notebook widely used in data science with its well known scientific stack ([numpy](https://numpy.org/), [scipy](https://www.scipy.org/), [pandas](https://pandas.pydata.org/), [matplotlib](https://matplotlib.org/), etc) but also in data production pipelines with the extremly useful [papermill](https://papermill.readthedocs.io/en/latest/)/[scrapbook](https://github.com/nteract/scrapbook) packages. *ObservableHQ* is a suprisingly powerful and versatile new kind of notebook. It shines at visualisation and improves *really* fast - which is possible because it is essentially a web site, and encouraged by its social design. I tend to see *Jupyter* as a good old workhorse, steady and reliable, as long as it only operates in the kernel. You can give it long running tasks and build heavy pipelines, and its main Python packages are at least as proven as *Jupyter* itself. On the other hand, I would describe *ObservableHQ* as a new thoroughbred racing horse: light-weight (it does not carry a kernel), crispily reactive, with unfiltered access to all browser APIs, tempting but awe-inspiring at times (especially long sequences of d3-ninja !) Arguably *Jupyter* is a gateway to the vast Python ecosystem and *ObservableHQ* to the no less vast JavaScript universe. Clearly their strengths are quite different, so it is only natural to try and bridge the gap between these 2 distinct worlds. The *JOB* is an attempt to do so, based on the following approach: + standard based: + communication protocol (GraphQL) + reference implementation (Apollo) + industry standard (Redis) + minimalism: + simple GraphQL schema: few units actions + transparent mapping to Redis operations + mostly wrapping of widely used libs + simplicity: + independent of Jupyter stack + avoid *Jupyter* frontend/kernel (complex) interface and specifics I have written it for my own use, but maybe it can be useful to other people. `32:T4c2,md`${chapter('3.1 Connection')} First both *Jupyter* and *ObservableHQ* notebooks must connect to the JOB server for the communication to be possible. In a typical workflow, the Jupyter notebook initiates the connection because Jupyter kernels are ephemeral and have changing urls while ObservableHQ notebooks are "eternal" with a fixed url. Worflow: + A user opens a *Jupyter* notebook and runs the following commands: ~~~py from job_client_graphql import Client pages = { 'demo-intro': 'https://observablehq.com/@oscar6echo/job-demo-intro' } s = Client( server_url='http://localhost:4000/graphql', default_channel='my-channel', password='mysecret', pages=pages ) s.show_btn_page('demo-intro') ~~~ + \`Client()\` connects the Python kernel to the JOB server + \`show_btn_page()\` create a button with the chosen *ObservableHQ* notebook with relevant urlParams: + \`host\`: JOB server hostname + \`port\`: JOB server port + \`path\`: JOB server path + \`ssl\`: JOB server ssl - \`true\` resp. \`false\` for \`https\` resp. \`http\` + Upon button click, the *ObservableHQ* notebook: + opens in a new tab + runs with urlParams as input + connects to the JOB server `33:T59a,md`${chapter('3.2 GraphQL Schema')} Now that both notebooks are connected, let see how exactly each can transmit/receive data. The JOB server is an Apollo GraphqQL server. As such it is: + defined by its [GraphQL schema](https://graphql.org/learn/schema/) and [resolvers](https://graphql.org/learn/execution/) + quasi self-documented via its [GraphQL Playground](https://www.apollographql.com/docs/apollo-server/testing/graphql-playground/) Here is the Schema: ~~~gql type VAR { name: String! value: String } type KEY { channel: String! name: String! } type HISTO { value: String timestamp: String! } type Query { checkPassword(password: String!): Boolean read(channel: String!, name: String!): VAR readHisto(channel: String!, name: String!, start: Int!, end: Int!): [HISTO] } type Mutation { write(channel: String!, name: String!, value: String, add_histo: Boolean, expiry: Int): KEY publish(channel: String!, name: String!, value: String): KEY publishWrite(channel: String!, name: String!, value: String, add_histo: Boolean, expiry: Int): KEY } type Subscription { subscribe(channel: String!, pattern: Boolean): VAR! } ~~~ And below is a visual description of the resolvers. Each action (of type [Query, Mutation](https://graphql.org/learn/queries/), or [Subscription](https://graphql.org/blog/subscriptions-in-graphql-and-relay/)) is mapped to a Redis command. `34:T5a0,{ const s = '|'; // ie. | const get = '[GET](https://redis.io/commands/get)'; const lrange = '[LRANGE](https://redis.io/commands/lrange)'; const set = '[SET](https://redis.io/commands/set)'; const publish = '[PUBLISH](https://redis.io/commands/publish)'; const subscribe = '[SUBSCRIBE](https://redis.io/commands/subscribe)'; const psubscribe = '[PSUBSCRIBE](https://redis.io/commands/psubscribe)'; return md`The mapping Action => Redis command is: | Action | Action Params | Redis Command | Redis Params | | ---------- | --------------------------------------------------------| ------------------------------- | | read | channel, name | ${get} | channel:name | | readHisto | channel, name, value, start, end | ${lrange} | channel:name${s}histo start end | | write | channel, name, value, add_histo, expiry | ${set} | channel:name value expiry | | | additionally if add_histo=true | ${set} | channel:name${s}histo value | | publish | channel, name, value | ${publish} | channel {name, value} | | subscribe | channel, pattern=false | ${subscribe} | channel | | subscribe | channel, pattern=true | ${psubscribe} | channel | `; }35:T52b,md`${chapter('3.4.1.3 Kubernetes')} See [official documentation](https://kubernetes.io/docs/tasks/tools/install-kubectl/) to install. Assuming \`minikube\` and \`kubectl\` are installed. ~~~bash # move to docker/ folder cd job-server-js-graphql/docker # enter minikube context eval $(minikube -p minikube docker-env) # build image . ./scripts/build-job-server.sh # pull images docker pull redis:latest docker pull rediscommander/redis-commander # run . ./scripts/create-secret.sh . ./scripts/create-configmap.sh . ./scripts/deploy.sh ~~~ Then you should see: + Redis on \`localhost:6479\`: Type \`redis-cli\` to connect - if you chose to expose it + GraphQL playground on \`localhost:4100\`: Open browser to this address + Redis Commander on \`localhost:8082\`: Open browser to this address If you append these 2 lines to your \`/etc/hosts\` file: ~~~bash # replace 192.168.39.46 by $(minikube ip) 192.168.39.46 gql.minikube.local 192.168.39.46 gui.minikube.local ~~~ then you can use: + \`gql.minikube.local\` for GraphQL server + \`gui.minikube.local\` for Redis Commander *NOTE*: For more detailed install, build, and run instructions in the Docker and Kubernetes cases see the [job-server-js-graphql/docker README](https://github.com/jupyter-observablehq-bridge/job-server-js-graphql/tree/master/docker) `36:T4b7,mermaidB`sequenceDiagram Note over JPY notebook: Secrets=alert,key JPY notebook ->> JOB server: GraphQL Connect Note over JPY notebook: Click Open OHQ JPY notebook ->> JOB server: Subscribe to channel=alert JPY notebook -->> OHQ notebook: Open w/ urlParams(host, port, path, channel, alert, key) Note over OHQ notebook: Init from urlParams OHQ notebook ->> JOB server: GraphQL Connect Note over OHQ notebook: Click Open Auth OHQ notebook -->> Auth page: Open w/ urlParams(scope1, scope2..) Note over Auth page: Perform Auth Auth page ->> OHQ notebook: postMessage(creds1, creds2..) Note over OHQ notebook: OHQ has creds OHQ notebook ->> JOB server: publish(channel=alert) OHQ notebook ->> JOB server: write(alert, key, creds, exp=1) Note over JOB server: JOB has creds loop Every X minute Auth page ->> OHQ notebook: postMessage(new creds) end JOB server ->> JPY notebook: msg on channel=alert Note over JPY notebook: Subscr. callback JPY notebook ->> JOB server: read(alert, key) Note over JPY notebook: JPY has creds JPY notebook ->> JOB server: write(alert, key, null) Note over JOB server: creds erased `37:T491,md` Indeed *ObservableHQ* notebooks are special web pages after all. While [Observable's not [exactly] JavaScript](https://observablehq.com/@observablehq/observables-not-javascript), it's pretty close ! And it is easy to: + port notebook code to a standard JS (e.g. [Vue](https://vuejs.org/), [React](https://reactjs.org/)) page + [download and embed notebooks](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks) - this [@jashkenas/handy-embed-code-generator](https://observablehq.com/@jashkenas/handy-embed-code-generator) notebook even does it automatically ! A *Jupyter* user may be curious to compare with [ipywidgets](https://ipywidgets.readthedocs.io/en/latest/), which basically enable JS<->Python communication *inside* a notebook. Ipywidgets are great because they offer Jupyter users (typically little versed in the event driven world of JS) easy and immediate access to interactivity. The [core widgets](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html) are enough for many users. Also some well crafted [advanced widgets](https://jupyter.org/widgets) are on par with what you could do on *ObersvableHQ*. ` 38:T670,sequence = ({ checkPassword: `sequenceDiagram notebook ->> GQL server: checkPassword(pwd) GQL server ->> notebook: BOOL `, read: `sequenceDiagram notebook ->> GQL server: read(channel, name) GQL server ->> REDIS: get("channel:name") REDIS ->> GQL server: VAR GQL server ->> notebook: VAR `, readHisto: `sequenceDiagram notebook ->> GQL server: readHisto(channel, name, start, end) GQL server ->> REDIS: lrange("channel:name|histo", start, end) REDIS ->> GQL server: HISTO GQL server ->> notebook: HISTO `, write: `sequenceDiagram notebook ->> GQL server: write(channel, name, value, add_histo, expiry) GQL server ->> REDIS: set("channel:name", value, ex=expiry) opt add_histo=true GQL server ->> REDIS: lpush("channel:name|histo", {value, timestamp}) end GQL server ->> notebook: KEY `, publish: `sequenceDiagram notebook ->> GQL server: publish(channel, name, value) GQL server ->> REDIS: pub(channel, {name, value}) REDIS ->> GQL server: KEY GQL server ->> notebook: KEY `, publishWrite: `sequenceDiagram notebook ->> GQL server: write(channel, name, value, add_histo, expiry) GQL server ->> REDIS: pub(channel, {name, value}) GQL server ->> REDIS: set("channel:name", value, ex=expiry) opt add_histo=true GQL server ->> REDIS: lpush("channel:name|histo", {value, timestamp}) end GQL server ->> notebook: KEY `, subscribe: `sequenceDiagram notebook ->> GQL server: subscribe(channel, pattern) GQL server ->> REDIS: subscribe(channel, pattern) REDIS ->> GQL server: VAR GQL server ->> notebook: VAR ` })39:[{"id":"f0c318e6c0ce78e2cc33212ecaaa47af2105c7817a793fd2c99217c830c0fa7ffa3c00d8014830d23ce6887909f48d00db5163e97ff03d54e0eedd8434554295","href":"https://static.observableusercontent.com/files/f0c318e6c0ce78e2cc33212ecaaa47af2105c7817a793fd2c99217c830c0fa7ffa3c00d8014830d23ce6887909f48d00db5163e97ff03d54e0eedd8434554295","name":"peek-redis-commander.gif","type":"image/gif","lastModified":1589470389907.54,"size":187947},{"id":"0e02a1f10da30ee517d4e4e314ffb0d4d2d4faaae61237e40da1721cd3336742fdc176cab32cf1bb6fa9f83b2accf65b6a32d52441cbf27d9e1b45245382cf46","href":"https://static.observableusercontent.com/files/0e02a1f10da30ee517d4e4e314ffb0d4d2d4faaae61237e40da1721cd3336742fdc176cab32cf1bb6fa9f83b2accf65b6a32d52441cbf27d9e1b45245382cf46","name":"peek-redis-cli.gif","type":"image/gif","lastModified":1589470389860.178,"size":67785},{"id":"6bb824847a1999f54ac12f5da0b957963c1a6a0ffc19cae8a8759c84a30fc26782c05dd048eaac919a3372d478d05fe6bf06b634618d17c690c94a1dbc8130ca","href":"https://static.observableusercontent.com/files/6bb824847a1999f54ac12f5da0b957963c1a6a0ffc19cae8a8759c84a30fc26782c05dd048eaac919a3372d478d05fe6bf06b634618d17c690c94a1dbc8130ca","name":"peek-demo-page.gif","type":"image/gif","lastModified":1589569833392.58,"size":236256},{"id":"ad34be7404e7c3696acbd8c4527be59098633da4be83638d4903b8db5c93529a3e6b1452e7517bbb3ccc9ff1e6ca4f6506f1b199c849fb8c111b49acef556730","href":"https://static.observableusercontent.com/files/ad34be7404e7c3696acbd8c4527be59098633da4be83638d4903b8db5c93529a3e6b1452e7517bbb3ccc9ff1e6ca4f6506f1b199c849fb8c111b49acef556730","name":"peek-yarn-sim.gif","type":"image/gif","lastModified":1589471727508.632,"size":129932},{"id":"adeb00586909a6c618b3ddce4226408115ad64ed160519d15b84bafc00d3c1a38f2240bf3d74e516eabf15dfb69b175dddfc23fdd1da5a1493fbc8fd3eb738a1","href":"https://static.observableusercontent.com/files/adeb00586909a6c618b3ddce4226408115ad64ed160519d15b84bafc00d3c1a38f2240bf3d74e516eabf15dfb69b175dddfc23fdd1da5a1493fbc8fd3eb738a1","name":"peek-hw.mp4","type":"video/mp4","lastModified":1589576339290.497,"size":3786633},{"id":"cacbea307936d8456088762747f23353224bddf9fc00257d097fb7cd8288384de7d25bfa38f59e095ece6758dc697432f96c4bf3392cf4eacfcf5d57be22d79d","href":"https://static.observableusercontent.com/files/cacbea307936d8456088762747f23353224bddf9fc00257d097fb7cd8288384de7d25bfa38f59e095ece6758dc697432f96c4bf3392cf4eacfcf5d57be22d79d","name":"peek-hc@1.mp4","type":"video/mp4","lastModified":1589743334236.356,"size":2649261},{"id":"429a0fc98992e751332c88f28b0cde7cb4cefe075a43a2317e28eb1a67ddf5704a00e9b89ff0ed6a966963f3f15e09cfaecacb866383343282fb96399fa6a247","href":"https://static.observableusercontent.com/files/429a0fc98992e751332c88f28b0cde7cb4cefe075a43a2317e28eb1a67ddf5704a00e9b89ff0ed6a966963f3f15e09cfaecacb866383343282fb96399fa6a247","name":"peek-aggrid.mp4","type":"video/mp4","lastModified":1589749065074.126,"size":3158958},{"id":"4b5fcb4eca583c14afdd1f41fc3d9d6d18082b93a76708e5aec958257d514a69cbec6207ae8237c7f30801ebaf6af8442e306f8306c12d891e0f86d112e208ec","href":"https://static.observableusercontent.com/files/4b5fcb4eca583c14afdd1f41fc3d9d6d18082b93a76708e5aec958257d514a69cbec6207ae8237c7f30801ebaf6af8442e306f8306c12d891e0f86d112e208ec","name":"peek-upload.mp4","type":"video/mp4","lastModified":1589754831610.58,"size":5253703},{"id":"5d8885c39f32e8b1b617f19dce428d0ddb2e92314a13156d66e1695e7a0c442a0c484ea98491f7abc43cb74ef40997bf520d61c17b6197281e11ed0afc6766bc","href":"https://static.observableusercontent.com/files/5d8885c39f32e8b1b617f19dce428d0ddb2e92314a13156d66e1695e7a0c442a0c484ea98491f7abc43cb74ef40997bf520d61c17b6197281e11ed0afc6766bc","name":"job-thumbnail.svg","type":"image/svg+xml","lastModified":1589280680123.871,"size":14017},{"id":"19b83e470b960279fd50c700d367329ee5458fc6bb44f2cb432acbd91d59a602d8d1247f9a336599da0acc0b12ce597d15d42f2dab06be87d2588b642f146c88","href":"https://static.observableusercontent.com/files/19b83e470b960279fd50c700d367329ee5458fc6bb44f2cb432acbd91d59a602d8d1247f9a336599da0acc0b12ce597d15d42f2dab06be87d2588b642f146c88","name":"maarten-van-den-heuvel-golden-gate.jpg","type":"image/jpeg","lastModified":1590957889763.094,"size":3201681},{"id":"fe7c5feeb005296949edf9d7ac53320dcf2b8df21590f47a01d5ceed2d0cb88932461d446807c71558a7e5904efb9af640f60638bb90b94ba24b541cb68ff11e","href":"https://static.observableusercontent.com/files/fe7c5feeb005296949edf9d7ac53320dcf2b8df21590f47a01d5ceed2d0cb88932461d446807c71558a7e5904efb9af640f60638bb90b94ba24b541cb68ff11e","name":"peek-auth.mp4","type":"video/mp4","lastModified":1589913640028.566,"size":1479008},{"id":"34257e5936927a76ed6320b2d2fa0dddae0170c6a5b4fac19699e27dfe67211d68229323ea750b06c70e24466875bcddc49c2625026a258f856a8e1cfdae88f8","href":"https://static.observableusercontent.com/files/34257e5936927a76ed6320b2d2fa0dddae0170c6a5b4fac19699e27dfe67211d68229323ea750b06c70e24466875bcddc49c2625026a258f856a8e1cfdae88f8","name":"peek-gql-playground.gif","type":"image/gif","lastModified":1589470389917.547,"size":285162},{"id":"921224d9de64613db75a53096e62767c19339debe22873573ea83dcfb81424e8fccc888796838b29f669229e752da3a90a7f307e7d250f0301bac0f81dc9afdd","href":"https://static.observableusercontent.com/files/921224d9de64613db75a53096e62767c19339debe22873573ea83dcfb81424e8fccc888796838b29f669229e752da3a90a7f307e7d250f0301bac0f81dc9afdd","name":"emoji-tools@1.png","type":"image/png","lastModified":1589968930647.067,"size":7330},{"id":"3762575ac499f638be4b56d8b69e93196fe9a5f024c78916c4c7e62a26fc7d27c5808640acc55a3a19c5b6a2207c18ba6ddc23151d9cd5e0168fc4dfc56cfe0c","href":"https://static.observableusercontent.com/files/3762575ac499f638be4b56d8b69e93196fe9a5f024c78916c4c7e62a26fc7d27c5808640acc55a3a19c5b6a2207c18ba6ddc23151d9cd5e0168fc4dfc56cfe0c","name":"emoji-the_conductor.png","type":"image/png","lastModified":1589968422496.105,"size":58952},{"id":"5e41370d9c5913c05254f02adef3215abadbcf9f504a0d504722001f171d530094d2df9efbb3f80a3aacf2e98c4101b1785181eabdb120b017d27f0c005bd833","href":"https://static.observableusercontent.com/files/5e41370d9c5913c05254f02adef3215abadbcf9f504a0d504722001f171d530094d2df9efbb3f80a3aacf2e98c4101b1785181eabdb120b017d27f0c005bd833","name":"peek-sliders.mp4","type":"video/mp4","lastModified":1589734898145.617,"size":2155670}] 2f:{"title":"Jupyter-ObservableHQ Bridge","cells":[{"id":692,"value":"md`# Jupyter-ObservableHQ Bridge\nOr simply *JOB*.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"loadSvg(await FileAttachment('job-thumbnail.svg').text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"value":"// adapted from https://observablehq.com/@bryangingechen/toc\nGenerators.observe(notify => {\n let headings = [];\n\n function observed() {\n const hAll = Array.from(document.querySelectorAll('h1,h2,h3,h4,h5,h6'));\n const h = hAll.slice(1);\n if (h.length !== headings.length || h.some((h, i) => headings[i] !== h)) {\n notify(\n html`Table of Contents

' : '
';\n return Object.assign(\n html`${listTag}${DOM.text(h.textContent)}`,\n { onclick: e => (e.preventDefault(), h.scrollIntoView()) }\n );\n })}`\n );\n }\n }\n\n const observer = new MutationObserver(observed);\n observer.observe(document.body, { childList: true, subtree: true });\n observed();\n return () => observer.disconnect();\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1694,"value":"md`
\n \n
Golden Gate, an iconic bridge - [Maarten van den Heuvel](https://unsplash.com/photos/gZXx8lKAb7Y)
\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`${chapter('2 Overview')}\n\nJOB is a server enabling 2-way real time communication between: \n+ a Jupyter Python kernel \n+ an ObservableHQ notebook\n\nThe server has 3 parts:\n+ an [Apollo GraphQL server](https://www.apollographql.com/docs/apollo-server/)\n+ a [Redis](https://redis.io/) (dB, cache, message broker)\n+ *optional*: a [Redis Commander](http://joeferner.github.io/redis-commander/) for Redis admin GUI\n\nAnd it has 3 client libraries:\n+ a JavaScript client lib to communicate with the Apollo server\n+ an equivalient Python client lib to communicate with the Apollo server\n+ *optional*: a Python client lib to communicate straight to the Redis\n\nThe server 3 components are available as a .yaml files and scripts for:\n+ Docker-Compose\n+ Kubernetes \n\nThe client librairies are available on [npm](https://www.npmjs.com/) and [pypi](https://pypi.org/). \nAll source code is grouped under github organisation [jupyter-observablehq](https://github.com/jupyter-observablehq-bridge).\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"md`${chapter('3 Architecture')}\n\nIn the diagram below:\n+ **JPY** is the *Jupyter* notebook, with its\n + frontend of any type: classic, [JupyterLab](https://jupyterlab.readthedocs.io/en/stable/) (v1/2), [VS Code](https://code.visualstudio.com/docs/python/jupyter-support), [nteract](https://github.com/nteract/nteract/tree/master/applications/jupyter-extension), etc\n + **kernel-PY**: Python kernel\n+ **OHQ-JS** is an *ObservableHQ* notebook, obviously running JavaScript\n+ **GQL-server** is the GraphQL Apollo JOB server\n+ **REDIS** is the JOB Redis\n+ **GUI** is the JOB GUI ie. a Redis Commander\n\nThe Python kernel and the *ObservableHQ* notebook can interact with the JOB server [GraphQL](https://graphql.org/) endpoint. \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"mermaidA`\ngraph LR\n subgraph JPY\n frontend --> kernel-PY\n end\n subgraph JOB\n kernel-PY -->|actions| GQL-server\n GQL-server --> REDIS\n GUI --> REDIS\n end\n OHQ-JS -->|actions| GQL-server\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"md`*JOB Architecture*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"md`Alternatively the Python kernel can interact directly with the JOB Redis. \nThis is convenient for local use, but unecessarily complex for a remote setup. \nSee further down.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"mermaidA`\ngraph LR\n subgraph JPY\n frontend --> kernel-PY\n end\n subgraph JOB\n kernel-PY -->|actions| REDIS\n GQL-server --> REDIS\n GUI --> REDIS\n end\n OHQ-JS -->|actions| GQL-server\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"md`*JOB alternative Architecture*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"mermaidA`sequenceDiagram\n JPY notebook ->> JOB server: GraphQL Connect\n Note over JPY notebook: Click Open OHQ \n JPY notebook -->> OHQ notebook: Open with urlParams(host, port, path, channel)\n Note over OHQ notebook: Init from urlParams \n OHQ notebook ->> JOB server: GraphQL Connect \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"md`*JOB typical init workflow*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"md`${chapter('3.3 GraphQL Resolvers')}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"viewof action = {\n const states = [\n 'checkPassword',\n 'read',\n 'readHisto',\n 'write',\n 'publish',\n 'publishWrite',\n 'subscribe'\n ];\n const buttons = states.map(\n (e, i) => ``\n );\n const form = html`\n
${buttons}
\n`;\n const update = e => {\n form.value = e;\n form.dispatchEvent(new CustomEvent('input'));\n };\n states.map((e, i) => {\n form[i].onclick = () => update(e);\n });\n\n // init\n update('read');\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"mermaidA`${sequence[action]}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"md`*Action:* **${action}**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1211,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"md`${chapter('3.4 Modules')}\n\nJOB has several modules, each with a relatively self explanatory name. \nAll are hosted on github under the [jupyter-observablehq-bridge](https://github.com/jupyter-observablehq-bridge) organisation:\n\n+ [job-server-js-graphql](https://github.com/jupyter-observablehq-bridge/job-server-js-graphql): JOB GraphQL [Apollo server](https://www.apollographql.com/docs/apollo-server/)\n+ [job-client-js-graphql](https://github.com/jupyter-observablehq-bridge/job-client-js-graphql): JOB Javascript client - based on [Apollo client](https://www.apollographql.com/client/)\n+ [job-client-py-graphql](https://github.com/jupyter-observablehq-bridge/job-client-js-graphql): JOB Python GraphQL client\n+ [job-client-py-redis](https://github.com/jupyter-observablehq-bridge/job-client-py-redis): JOB Python Redis client\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1021,"value":"md`${chapter('3.4.1 JOB GraphQL Server')}\n\nThe JOB server is available in 3 packagings:\n+ Native:\n + Install and run Redis locally\n + Download, install and run the GraphQL server locally\n + *Optional*: Download, install and run a Redis Commander locally\n+ [Docker Compose](https://docs.docker.com/compose/):\n + Launch recipe with 3 containers\n+ [Kubernetes](https://kubernetes.io/):\n + Launch 3 containers as a kube application\n\nIn my opinion:\n+ the Native run is good for development\n+ the Docker Compose run is convenient for local use - own machine and LAN\n+ the Kubernetes is designed for cloud deployment - works on Minikube too\n\nBelow are the minimal commands to launch the JOB server in each case.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"md`${chapter('3.4.1.1 Native')}\nThe 3 parts must be managed separately: Redis, GraphQL server, Redis Commander:\n\n+ Redis\n\nSee the [REDIS official quickstart](https://redis.io/topics/quickstart), or say [this page](https://tecadmin.net/install-redis-on-debian/) if you are on a Debian Linux.\n\n+ JOB server\n\n~~~bash\n# download\ngit clone https://github.com/jupyter-observablehq-bridge/job-server-js-graphql.git\n# install\ncd job-server-js-graphql\nyarn install\n# run\nyarn run start-local\n~~~\n\n+ redis-commander\n\n~~~bash\n# install\nnpm install -g redis-commander\n# run\nredis-commander\n~~~\n\nThen you should see:\n+ Redis on \\`localhost:6379\\`: Type \\`redis-cli\\` to connect\n+ GraphQL playground on \\`localhost:4000\\`: Open browser to this address\n+ Redis Commander on \\`localhost:8081\\`: Open browser to this address\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"value":"md`\n${chapter('3.4.1.2 Docker Compose')}\n\nSee [official documentation](https://docs.docker.com/compose/install/) to install. \nAssuming Docker is installed.\n\n~~~bash\n# go to docker/ folder\ncd job-server-js-graphql/docker\n# build image\n. ./scripts/build-job-server.sh\n# pull images\ndocker pull redis:latest\ndocker pull rediscommander/redis-commander\n# run\ncd compose\ndocker-compose up\n~~~\n\nThen you should see:\n+ Redis on \\`localhost:6479\\`: Type \\`redis-cli\\` to connect\n+ GraphQL playground on \\`localhost:4001\\`: Open browser to this address\n+ Redis Commander on \\`localhost:8082\\`: Open browser to this address\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"md`${chapter('3.4.2 JavaScript GraphQL Client')}\n\nSee:\n+ github repo [jupyter-observablehq-bridge/job-client-js-graphql](https://github.com/jupyter-observablehq-bridge/job-client-js-graphql).\n+ npmjs [@oscar6echo/job-client-graphql](https://www.npmjs.com/package/@oscar6echo/job-client-graphql).\n\nIn short:\n+ The package is a thin wrapper on the [Apollo Client](https://www.apollographql.com/client). \n+ It is available in browser ([UMD](https://github.com/umdjs/umd) bundle) and node ([UMD](https://github.com/umdjs/umd) and [ESM](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/)) versions\n+ It has functions for each action:\n + checkPassword\n + read\n + readHisto\n + write\n + publish\n + publishWrite\n + subscribe\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"md`${chapter('3.4.2 Python GraphQL Client')}\n\nTo install:\n~~~bash\npip install job-client-graphql\n~~~\n\nSee github repo [jupyter-observablehq-bridge/job-client-py-graphql](https://github.com/jupyter-observablehq-bridge/job-client-py-graphql).\n\nThis package aims at being exactly equivalent to the the JavaScript client. \nIn particular:\n+ Queries, mutations are performed over \\`http\\`\n + using [asyncio](https://docs.python.org/3/library/asyncio.html) and [aiohttp](https://docs.aiohttp.org/en/stable/)\n+ Subscriptions are performed over \\`ws\\`\n + in separate thread so as to be non-blocking\n+ GraphQL web socket implementation is based on an Apollo doc:\n + [GraphQL over WebSocket Protocol](https://github.com/apollographql/subscriptions-transport-ws/blob/master/PROTOCOL.md)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1203,"value":"md`See *Jupyter* notebook [demo-job-hello-world](https://github.com/jupyter-observablehq-bridge/notebooks-jupyter/blob/master/demo-job-hello-world.ipynb) for the commands to:\n+ instantiate the client\n+ run the actions \n\nFor a screenshot of the *Jupyter* notebook and its *ObservableHQ* counterpart see section 5.1.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"md`${chapter('3.4.3 Python Redis Client')}\n\nTo install:\n~~~bash\npip install job-client-redis\n~~~\n\nSee github repo [jupyter-observablehq-bridge/job-client-py-redis](https://github.com/jupyter-observablehq-bridge/job-client-py-redis).\n\nThis package has the exact same API as the Python GraphQL client. \nIt is built on Python [redis-py](https://github.com/andymccurdy/redis-py) package.\n\nIt requires the Redis container to be exposed to be used - obviously - which is fine for a local deployment, but maybe unecessary complex in the general case. Indeed both the GraphQL server and the Redis would need be protected in this case.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"md`${chapter('3.4.4 Multi ID Provider Auth page')}\n\nSee github repo [jupyter-observablehq-bridge/multi-id-provider-auth-page](https://github.com/jupyter-observablehq-bridge/multi-id-auth-page).\n\nThe multi ID provider authentication page is used in an example for how to delegate authentication from an *ObservableHQ* notebook to a regular web page. \nIt is built with [Vue](https://vuejs.org/) and has 2 ID providers:\n+ [Google](https://developers.google.com/identity/sign-in/web/sign-in)\n+ SG Connect (corporate)\n\n*NOTE*: This SPA is modular but does *not* need building. \nThis is one of many benefits of [Vue](https://vuejs.org/) 👍\n\nSee the Authentication and Examples sections below.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"md`${chapter('4 Authentication')}\n\nAuthentication is a special case, described in the sequence diagram below. \n\nIn short:\n+ In the **JPY notebook** 2 more params are necessary in \\`Client()\\` initialization: \\`alert\\` and \\`key\\`\n+ These params are passed to an **OHQ notebook**\n+ The **OHQ notebook** displays a button to open an **Auth page**\n+ the **Auth page** manages the authentication, typically using ID providers libs.\n+ Upon successful authentication, the credentials \\`posMessage()\\` back\n+ the **OHQ notebook**\n + publishes a conventional message {channel=alert, name=new-token}\n + writes the credentials on {channel=alert, name=key}\n+ Because the **JPY notebook** has subscribed to channel=alert it is notified, then\n + read the credential on {channel=alert, name=key}\n + delete (overwrites) the credentials\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1189,"value":"md`*Authentication flow*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1418,"value":"md`${chapter('5 Examples')}\n\nAll examples below are assumed to be run with the Docker compose packaging described above ie.:\n+ Launch all 3 containers in one go:\n~~~bash\n# go to compose folder\ncd job-server-js-graphql/docker/compose\ndocker-compose up\n~~~\n\n+ Check the following services are up and running:\n + Redis on \\`localhost:6479\\` protected with password \"mysecret\"\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1421,"value":"viewof e1 = btnToggle(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1423,"value":"{\n const img = md`*redis-cli*`;\n const text = md`*redis-cli animated gif*`;\n return e1 ? img : text;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1434,"value":"md`\n + GraphQL server on \\`localhost:4001\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1437,"value":"viewof e2 = btnToggle(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1439,"value":"{\n const title = 'GraphQL Playground';\n const img = md`*${title}*`;\n const text = md`*${title} animated gif*`;\n return e2 ? img : text;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1452,"value":"md`\n + *Optional*: Redis Commander on \\`localhost:8082\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1456,"value":"viewof e3 = btnToggle()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1458,"value":"{\n const title = 'Redis Commander';\n const img = md`*${title}*`;\n const text = md`*${title} animated gif*`;\n return e3 ? img : text;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1465,"value":"md`+ *Test*: Launch a random write/publish on the Redis:\n~~~bash\n# go to job server folder\ncd job-server-js-graphql\nyarn sim\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1467,"value":"viewof e4 = btnToggle()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1473,"value":"{\n const title = 'Random write & publish';\n const img = md`\n*${title}*`;\n const text = md`*${title} animated gif*`;\n return e4 ? img : text;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"md`\n+ *Test*: Open demo client web page:\n~~~bash\n# go to demo-page folder in job client folder\ncd job-client-js-graphql/test/demo-page\npython -m http.server 8090\n# open browser to localhost:8090\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1482,"value":"viewof e5 = btnToggle()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1484,"value":"{\n const title = 'Demo client web page';\n const img = md`\n*${title}*`;\n const text = md`*${title} animated gif*`;\n return e5 ? img : text;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1521,"value":"md`If you have the set up described above you should experience something quite similar to the videos below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":828,"value":"md`${chapter('5.1 Hello World')}\n\nTo run this first example, open *Jupyter* notebook [demo-job-hello-world](https://github.com/jupyter-observablehq-bridge/notebooks-jupyter/blob/master/demo-job-hello-world.ipynb). It will in turn open companion *ObservableHQ* notebook [@oscar6echo/job-example-hello-world](https://observablehq.com/@oscar6echo/job-example-hello-world) with the proper urlParams.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1379,"value":"viewof s1 = btnToggle()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1400,"value":"{\n const text = md`*Jupyter and ObservableHQ hello-world companion notebooks video*`;\n const video = html``;\n return s1 ? video : text;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"md`${chapter('5.2 Slider')}\n\nTo run the sliders example, open *Jupyter* notebook [demo-job-slider-2d](https://github.com/jupyter-observablehq-bridge/notebooks-jupyter/blob/master/demo-job-slider-2d.ipynb). It will in turn open companion *ObservableHQ* notebook [@oscar6echo/job-example-sliders](https://observablehq.com/@oscar6echo/job-example-sliders) with the proper urlParams.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1514,"value":"viewof s2 = btnToggle()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1512,"value":"{\n const text = md`*Jupyter and ObservableHQ hello-world companion notebooks video*`;\n const video = html``;\n return s2 ? video : text;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"md`${chapter('5.3 Highcharts')}\n\nTo run the Highcharts example, open *Jupyter* notebook [demo-job-highcharts](https://github.com/jupyter-observablehq-bridge/notebooks-jupyter/blob/master/demo-job-highcharts.ipynb). It will in turn open companion *ObservableHQ* notebook [@oscar6echo/job-example-highcharts](https://observablehq.com/@oscar6echo/job-example-highcharts) with the proper urlParams.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1531,"value":"viewof s3 = btnToggle()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1533,"value":"{\n const text = md`*Jupyter and ObservableHQ hello-world companion notebooks video*`;\n const video = html``;\n return s3 ? video : text;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":945,"value":"md`${chapter('5.4 AgGrid')}\n\nTo run the AgGrid example, open *Jupyter* notebook [demo-job-aggrid](https://github.com/jupyter-observablehq-bridge/notebooks-jupyter/blob/master/demo-job-aggrid.ipynb). It will in turn open companion *ObservableHQ* notebook [@oscar6echo/job-example-aggrid](https://observablehq.com/@oscar6echo/job-example-aggrid) with the proper urlParams.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1544,"value":"viewof s4 = btnToggle()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1546,"value":"{\n const text = md`*Jupyter and ObservableHQ hello-world companion notebooks video*`;\n const video = html``;\n return s4 ? video : text;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"md`${chapter('5.5 File Upload')}\n\nTo run the file upload example, open *Jupyter* notebook [demo-job-upload-file](https://github.com/jupyter-observablehq-bridge/notebooks-jupyter/blob/master/demo-job-upload-file.ipynb). It will in turn open companion *ObservableHQ* notebook [@oscar6echo/job-example-upload-file](https://observablehq.com/@oscar6echo/job-example-upload-file) with the proper urlParams.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1552,"value":"viewof s5 = btnToggle()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1554,"value":"{\n const text = md`*Jupyter and ObservableHQ hello-world companion notebooks video*`;\n const video = html``;\n return s5 ? video : text;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":949,"value":"md`${chapter('5.6 Authentication')}\n\nTo run the authentication example, open *Jupyter* notebook [demo-job-auth](https://github.com/jupyter-observablehq-bridge/notebooks-jupyter/blob/master/demo-job-auth.ipynb). It will in turn open companion *ObservableHQ* notebook [@oscar6echo/job-example-auth](https://observablehq.com/@oscar6echo/job-example-auth) with the proper urlParams. It will in turn delegate authentication to a regular web page which can implement several authentication methods ([example](https://jupyter-observablehq-bridge.github.io/multi-id-auth-page), [source](https://github.com/jupyter-observablehq-bridge/multi-id-auth-page)). \nSee section 4.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1565,"value":"viewof s6 = btnToggle()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1567,"value":"{\n const text = md`*Jupyter and ObservableHQ hello-world companion notebooks (and auth page) video*`;\n const video = html``;\n return s6 ? video : text;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1617,"value":"md`${chapter('6 Discussion')}\n\nIf you have read this far, hopefully you should have a relatively clear understanding of:\n+ how the JOB works\n+ the sort of *Jupyter*-*ObservableHQ* communication it enables\n\nTo delve further I would suggest to read the [source code](https://github.com/jupyter-observablehq-bridge). You will see that except for the [job-client-py-graphql](https://github.com/jupyter-observablehq-bridge/job-client-py-graphql) Python package, all other JS or Python repos are thin wrappers on widely used, presumably robust, pieces of software. And I wrote it only because I could not find a sufficiently versatile GraphQL client in Python.\n\nI wrote the JOB with *Jupyter* and *ObservableHQ* distinct strenghts in mind and an idea to somehow try and combine them. But the JOB can be used in two/multi-way communication between any two entities among:\n+ *Jupyter* Python kernels\n+ *ObservableHQ*\n+ regular web page \n\nThat's many combinations..\n\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1620,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1561,"value":"md`\nOn the other hand, Ipywidets are deeply embeded into the *Jupyter* stack so they may not work depending on the frontend type and/or version. For the same reason they are complex to write and maintain. First the Python/JS API is always a tradeoff between flexibility and complexity. Second you usually want give access to Web APIs or JS libraries. So adding/maintaing an extra layer is extra work which may in time turn into a liability as JS libs **and** *Jupyter* new versions are released. More importantly for a user, writing JS config as a Python string is a bit cumbersome. I know from experience using/writing/contributing to several custom widgets: [ipyupload](https://gitlab.com/oscar6echo/ipyupload), [ipyauth](https://oscar6echo.gitlab.io/ipyauth/), [ipyaggrid](https://dgothrek.gitlab.io/ipyaggrid/), [ipyhc](https://ipyhc.gitlab.io/). By the way the examples above do the same for a small fraction of the effort, and are a lot easier for a third party to understand/adapt.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1675,"value":"md`\nThe crux of the matter, I believe, is whether users are expected/requested to write JS themselves in a \"business\" (i.e. non specialist) context - which admittedly is a significantly higher bar than scripting in Python. To start with, the amount of scaffolding before hello-world is particularly daunting. Fortunately *ObservableHQ* has changed all that! 🎉 \nAnd it is a breeze to search existing notebooks for inspiration. 😃\n\nIn short for frequent users, and even more so for teams in which people can specialize, the tradeoff has shifted towards direct use of JavaScript for many tasks - I would argue. 🤔\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1643,"value":"md`*The right tool depends on the job*\n
\n \n
Image [PNG BARN](https://www.pngbarn.com/png-image-vcjsa)
\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1627,"value":"md`\nAnother major difference is that ipywidgets are embedded in *Jupyter* notebooks, while with JOB connected *ObservableHQ* notebooks or web pages (\"JOB clients\") are not. This can be seen as:\n+ a drawback in cases where a notebook \"linearity\" is important - typically when it tells a story step-by-step\n+ an advantage as they allow full use of screen real estate - indeed JOB clients are multi-tab/window/browser/screen/machine 🖥️ 🖥️ 🖥️ 🖥️ \n\nArguably, having separate tailored input/result windows makes sense, especially in a production context. Then one JOB client, maybe a *Jupyter* notebook, acts as a \"conductor\". \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1655,"value":"md`
\n \n
Image [Finland Toolbox](https://toolbox.finland.fi/finland-images/the-conductor/)
\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1624,"value":"md`\nIncidentally the use of [Redis](https://redis.io/) for messaging allows persistence for free. Notebooks are typically ephemeral. *Jupyter* kernels are often restarted, *ObservableHQ* notebooks are often reloaded - or is it just me ?? So these environment could use some caching (except for [vaex-sized kind of datasets](https://towardsdatascience.com/how-to-analyse-100s-of-gbs-of-data-on-your-laptop-with-python-f83363dda94)). \nBesides Redis allows much more than what JOB does. It should be easy to expand it. \n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1685,"value":"md`\nRegarding deployment, maybe the most natural is localhost for one user, or LAN for a small team. Both are free as they use local hardware. But for cloud deployment, it should be stressed that Kubernetes managed services ([GKE](https://cloud.google.com/kubernetes-engine), [AKS](https://azure.microsoft.com/fr-fr/services/kubernetes-service/), [EKS](https://aws.amazon.com/eks/)) are relatively expensive if they run all day. Second, I have not tested the delay induced by the round trip to server.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1671,"value":"md`\nFor a purely exploratory project, writing so much about it is certainly beyond reasonable. But at the very least it shows that *ObservableHQ* is a fine medium for documentation. 📜\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1681,"value":"md`\nJOB done? 😄 \nOf course not! Surely quite a lot could be improved... \nFeedback welcome.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`---\n${chapter('7 Annex')}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1302,"value":"btnToggle = function(init = false) {\n let show = init;\n const btnText = () => (show ? 'Hide' : 'Show');\n const button = html``;\n const form = html`
${button}
`;\n const toggle = () => {\n show = !show;\n button.innerHTML = btnText();\n };\n const emit = () => {\n form.value = show;\n form.dispatchEvent(new CustomEvent('input'));\n };\n form.toggle.onclick = () => {\n toggle();\n emit();\n };\n emit();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"function mermaidA(...args) {\n mermaidPkg.initialize(mermaidConf.A);\n let div = document.createElement('div');\n div.innerHTML = mermaidPkg.mermaidAPI.render(\n `mermaid-${guid()}`,\n String.raw(...args)\n );\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":869,"value":"function mermaidB(...args) {\n mermaidPkg.initialize(mermaidConf.B);\n let div = document.createElement('div');\n div.innerHTML = mermaidPkg.mermaidAPI.render(\n `mermaid-${guid()}`,\n String.raw(...args)\n );\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"mermaidConf = {\n const A = {\n theme: 'neutral',\n themeCSS: \".label foreignObject { overflow: visible; font-size:14px }\",\n startOnLoad: false,\n // securityLevel: 'loose',\n flowchart: {\n useMaxWidth: true\n // htmlLabels: true\n },\n sequence: {\n showSequenceNumbers: true,\n messageMargin: 35,\n bottomMarginAdj: 1,\n width: 150,\n actorMargin: 250\n }\n };\n\n const B = { ...A };\n B.sequence.actorMargin = 150;\n\n return { A, B };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"// https://www.tutorialspoint.com/how-to-create-guid-uuid-in-javascript\nfunction guid() {\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n var r = (Math.random() * 16) | 0,\n v = c == 'x' ? r : (r & 0x3) | 0x8;\n return v.toString(16);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"function loadSvg(text, width, height) {\n const document = new DOMParser().parseFromString(text, \"image/svg+xml\");\n const svg = d3.select(document.documentElement).remove();\n svg.attr('width', width).attr('height', height);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"chapter = headline => {\n const [, index, title] = headline.match(/^((?:[0-9]*\\.?)*)\\s*(.*)$/);\n const level = index.split(\".\").filter(s => s.length !== 0).length - 1;\n const nb = `${index}`;\n return `${\"#\".repeat(level + 1)} ${nb} ${title}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"mermaidPkg = require('mermaid@8.4.4/dist/mermaid.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}