31:[] 2f:{"title":"MARGO web API - early demo","cells":[{"id":0,"value":"md`# MARGO web API - early demo\n\nSee [\\`ClimateMARGO.jl\\`](https://github.com/hdrake/ClimateMARGO.jl) for more info.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"md`---\n\n> This notebook defines the **MARGO API** as a reusable component.\n> \n> See [\\`@olivier_plas/margo-plots\\`](https://observablehq.com/@olivier_plas/margo-plots) for a demo!\n\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"md`## Basic usage`","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"md`We define our input parameters:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"T_max = 2.0","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"md`Here is the optimized control strategy:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"model = margo_client.sendreceive(\"opt_controls_temp\", {\n T_max: T_max\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"md`_Try changing the parameters to see live updates!_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"md`# How does it work?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"md`A heroku server is running \\`ClimateMARGO.jl\\`, and a communication layer (based on \\`Pluto.jl\\`) makes Julia methods available in this JavaScript notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"md`> The Julia + JS source code is available at [\\`fonsp/MargoAPI.jl\\`](https://github.com/fonsp/MargoAPI.jl).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"md`**Here's a summary of the Julia code running on heroku**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"julia`using ClimateMARGO\n\n# the main margo function\n# has only to parameters for now, but this will be _all parameters_ soon\n@expose function opt_controls_temp(;dt=20, T_max)\n t = 2020.0:dt:2200.0\n model = ClimateModel(; t=collect(t), dt=step(t))\n\n optimize_controls!(model; temp_goal=T_max)\n\n return Dict(\n :model => model,\n :computed => extra_info(model)\n )\nend`","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"md`**A summary of the JavaScript code running in your browser**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"js`model = margo_client.sendreceive(\"opt_controls_temp\", {\n T_max: T_max\n})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"md`---\n\n# What's next?\n\nThis is JavaScript, so fine-tuned UI, smooth transitions, etc. are all possible! Today it's just a proof-of-concept visualisation, but more (nice looking) plotting methods are coming soon.\n\nIn the next 4 weeks, I will work on a general version of this visualization: _an author_ can pick which variables are interactive (e.g. sliders), and which plots should be shown.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"md`---\n\n# How to connect to the API:\n(It's public!)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"md`**From another observable notebook:**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"js`import { margo_client } from \"@olivier_plas/margo-web-api\" `","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"margo_url = new URL(\"https://margo-api-test-1.herokuapp.com\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"margo_url_ws = {\n const u = new URL(margo_url);\n u.protocol = u.protocol.replace(\"http\", \"ws\");\n return u;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"md`import the API module for JS:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"margo_api = import(new URL(\"/connection.mjs\", margo_url))","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"md`open up a connection:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"margo_client = margo_api.margo_client(margo_url_ws)","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"md`### Syntax highlighting:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"function julia(codes, ...fillers) {\n const formatted = hljs.highlight(\"Julia\", String.raw(codes, ...fillers))\n .value;\n return html`

${formatted}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"function js(codes, ...fillers) {\n const formatted = hljs.highlight(\"Javascript\", String.raw(codes, ...fillers))\n .value;\n return html`

${formatted}

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"hljs = require('https://bundle.run/highlight.js@10.1.0')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}