feat(jupyter): send Jupyter messaging metadata with `Deno.jupyter.broadcast` #20714

manzt · 2023-09-27T18:43:38Z

Will rebase following merge of #20710 in to main.

Exposes metadata to the Deno.jupyter.broadcast API.

await Deno.jupyter.broadcast(msgType, content, metadata);

The metadata is required for "comm_open" for with jupyter.widget target. With this PR I can successfully communicate with the anywidget frontend, sending frontend ESM via comms with updates :)

Example

Make sure you have anywidget installed:

pip install jupyterlab anywidget

import { display } from "https://deno.land/x/display/mod.ts";

let comm_id = crypto.randomUUID();

await Deno.jupyter.broadcast("comm_open", {
    "comm_id": comm_id,
    "target_name": "jupyter.widget",
    "data": { 
        "state": {
            "_model_module": "anywidget",
            "_model_name": "AnyModel",
            "_model_module_version": "0.6.5",
            "_view_module": "anywidget",
            "_view_name": "AnyView",
            "_view_module_version": "0.6.5",
            "_view_count": null,
        }
    }
}, {
    "version": "2.1.0"
});

// Create an anywidget module (export a "render" function) for the front end
// The `model` is synchronized with `update` messages sent from the comm_msg
let esm = `export ${async function render({ model, el }) {
  let { default: confetti } = await import ("https://esm.sh/canvas-confetti@1.6.0");
  model.on("change:value", () => confetti({ angle: model.get("value") }));
  confetti();
}.toString()}`;

// Send initial widget state
await Deno.jupyter.broadcast("comm_msg", {
    "comm_id": comm_id,
    "data": { "method": "update", "state": { "_esm": esm, "_anywidget_id": comm_id } }
});

display({
    "application/vnd.jupyter.widget-view+json": {
        "version_major": 2,
        "version_minor": 1,
        "model_id": comm_id,
    }
})

await Deno.jupyter.broadcast("comm_msg", {
    "comm_id": comm_id,
    "data": { "method": "update", "state": { "value": 50 } },
});

await new Promise(resolve => setTimeout(resolve, 1000));

await Deno.jupyter.broadcast("comm_msg", {
    "comm_id": comm_id,
    "data": { "method": "update", "state": { "value": 100 } },
});

await new Promise(resolve => setTimeout(resolve, 1000));

This is sooo cool!!

Screen.Recording.2023-09-27.at.2.44.30.PM.mov

CLAassistant · 2023-09-27T18:43:44Z

All committers have signed the CLA.

manzt · 2023-09-27T18:46:15Z

cc: @rgbkrk

manzt · 2023-09-27T18:51:46Z

I'm sure others are more familiar with the latest for how to serialize functions / modules to run clientside. Currently I have this hack:

// Create an anywidget module (export a "render" function) for the front end
// The `model` is synchronized with `update` messages sent from the comm_msg
let esm = `export ${async function render({ model, el }) {
  let { default: confetti } = await import ("https://esm.sh/canvas-confetti@1.6.0");
  model.on("change:value", () => confetti({ angle: model.get("value") }));
  confetti();
}.toString()}`;

But anywidget, just expects you to ship ESM that exports a function called render. The render function gives you access to a model which you can listen for and emit updates to state for objects that live in the kernel.

More details.

manzt · 2023-09-27T20:59:29Z

Works with updates to the frontend. Would be awesome to be able to listen for messages from the frontend as well (i.e. enabling 2-way data binding). Not sure that is implemented yet.

Screen.Recording.2023-09-27.at.4.58.53.PM.mov

rgbkrk · 2023-09-27T23:11:35Z

cli/js/40_jupyter.js

+  } = core.ensureFastOps();
+
+  globalThis.Deno.jupyter = {
+    async broadcast(msgType, content, metadata = {}) {


👍 for optional metadata

rgbkrk · 2023-09-27T23:24:06Z

This is awesome, I'm glad you were able to make this fly so quickly. Thank you!

rgbkrk · 2023-09-27T23:52:32Z

Would be awesome to be able to listen for messages from the frontend as well (i.e. enabling 2-way data binding). Not sure that is implemented yet.

That's #20592. It would be nice to have the Javascript API for it that we want to expose that is as close to one of the many web standard options (to be Deno-y).

You're making me realize we probably need to support the Jupyter message buffers as the final optional argument of this big broadcast message.

Roughly we're looking at an overall interface of:

type DenoJupyter = typeof Deno & {
  jupyter: {
    broadcast(
      msg_type: string,
      content: { [key: string]: object },
      metadata?: { [key: string]: object },
      buffers?: ArrayBuffer[]
    ): Promise<void>;
  };
};

manzt · 2023-09-28T14:01:00Z

It would be nice to have the Javascript API for it that we want to expose that is as close to one of the many web standard options (to be Deno-y).

Yes! I have some ideas.

You're making me realize we probably need to support the Jupyter message buffers as the final optional argument of this big broadcast message.

Indeed.

The other option would be to have a single object for other possible message data. Not sure if the other fields could be something we'd expose in the future.

type DenoJupyter = typeof Deno & {
  jupyter: {
    broadcast(
      msg_type: string,
      content: { [key: string]: object },
      extra?: {
        metadata?: Record<string, object>,
        buffers?: ArrayBuffer[]
      }
    ): Promise<void>;
  };
};

bartlomieju · 2023-09-28T14:52:05Z

I just merged #20710, can you please rebase the PR @manzt?

bartlomieju · 2023-09-28T14:53:02Z

The other option would be to have a single object for other possible message data. Not sure if the other fields could be something we'd expose in the future.

This seems like a reasonable solution to avoid balooning number of arguments this API accepts.

rgbkrk · 2023-09-28T14:58:35Z

Not sure if the other fields could be something we'd expose in the future.

parent_header is controlled by the Deno kernel, header we also shouldn't muck with.

Famous last words and all, the jupyter spec will not extend the body of the message beyond what is there with parent_header, header, content, metadata, and buffers.

I'm totally cool with extra though. 😄

manzt · 2023-09-28T18:10:26Z

I just merged #20710, can you please rebase the PR @manzt?

Done, @bartlomieju! (TIL git cherry-pick 😅)

I'm totally cool with extra though. 😄

Okay, how about we introduce extra in this PR, but just with optional metadata? Sound OK?

It's nice to have the explicit names (as well as the option to extend extra if necessary in the future for whatever reason).

Deno.jupyter.broadcast(
  "comm_open",
  {
    "comm_id": "blah",
    "data": {
      "method": "update",
      "state": { "value": null },
      "buffer_paths": [["value"]]
    }
  },
  {
    metadata: { "version": "2.1.0" },
    buffers: [new Uint8Array([1, 2, 3, 4, 5]).buffer]
  }
);

I doubt the API would explode with the positional arguments, but this way the ordering of arguments isn't important. Since metadata or buffers could be sent independently of each other, it's also nice to not need to pass explicit undefined to the API:

Deno.jupyter.broadcast(msgType, content, undefined, buffers);

vs

Deno.jupyter.broadcast(msgType, content, { buffers });

bartlomieju

Looks great, could you please update cli/tsc/dts/lib.deno.unstable.d.ts to match the new JS API?

manzt · 2023-09-28T20:44:22Z

done!

manzt · 2023-09-29T17:43:47Z

Implemented a mod.ts in anywidget @rgbkrk . (Think I might have messed up the denoland webhooks, since it's a monorepo and I'm not sure how to specify release for the packages/anywidget/mod.ts path).

import { widget } from "https://raw.githubusercontent.com/manzt/anywidget/main/packages/anywidget/mod.ts";

let model = await widget({
    // shared model between frontend and backend
    state: { value: 0 },
    // front-end render function
    render: ({ model, el }) => {
        let h1 = Object.assign(document.createElement("h1"), {
            innerText: "Value is " + model.get("value"),
        });
        model.on("change:value", () => {
            h1.innerText = "Value is " + model.get("value");
        });
        el.appendChild(h1);
    }
});

model

for (let i = 1; i <= 10; i++) {
    model.set("value", i);
    await new Promise(resolve => setTimeout(resolve, 500));
}

bartlomieju

LGTM, thank you @manzt, great improvement and I can't wait to see what you'll be able to do with it!

rgbkrk · 2023-10-01T01:43:38Z

Wrote a way to do imports with the anywidget in manzt/anywidget#311

…adcast` (#20714) Exposes [`metadata`](https://jupyter-client.readthedocs.io/en/latest/messaging.html#metadata) to the `Deno.jupyter.broadcast` API. ```js await Deno.jupyter.broadcast(msgType, content, metadata); ``` The metadata is required for [`"comm_open"`](https://github.com/jupyter-widgets/ipywidgets/blob/main/packages/schema/messages.md#instantiating-a-widget-object-1) for with `jupyter.widget` target.

manzt changed the title ~~feat(unstable): Add metadata to Deno.jupyter.broadcast~~ feat(unstable): send Jupyter messaging metadata with Deno.jupyter.broadcast Sep 27, 2023

manzt changed the title ~~feat(unstable): send Jupyter messaging metadata with Deno.jupyter.broadcast~~ feat(jupyter): send Jupyter messaging metadata with Deno.jupyter.broadcast Sep 27, 2023

rgbkrk reviewed Sep 27, 2023

View reviewed changes

manzt force-pushed the manzt/jupyter-metadata branch from 88fea55 to 6004cb2 Compare September 28, 2023 18:01

feat(unstable): add metadata to Deno.jupyter.broadcast.

675603a

manzt force-pushed the manzt/jupyter-metadata branch from 6004cb2 to 675603a Compare September 28, 2023 18:07

bartlomieju requested changes Sep 28, 2023

View reviewed changes

feat: add extra broadcast options and types

7bd420c

manzt added 2 commits September 28, 2023 16:46

chore: formatting

7685860

Merge branch 'main' into manzt/jupyter-metadata

b0d4d6b

bartlomieju approved these changes Sep 29, 2023

View reviewed changes

bartlomieju merged commit 7bcf121 into denoland:main Sep 29, 2023

manzt deleted the manzt/jupyter-metadata branch September 29, 2023 23:02

rgbkrk mentioned this pull request Oct 1, 2023

Deno Userland Jupyter Messaging library: comms #20592

Open

manzt mentioned this pull request Jul 6, 2024

feat(jupyter): add handling for comms #24250

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(jupyter): send Jupyter messaging metadata with `Deno.jupyter.broadcast` #20714

feat(jupyter): send Jupyter messaging metadata with `Deno.jupyter.broadcast` #20714

manzt commented Sep 27, 2023 •

edited

Loading

CLAassistant commented Sep 27, 2023 •

edited

Loading

manzt commented Sep 27, 2023

manzt commented Sep 27, 2023 •

edited

Loading

manzt commented Sep 27, 2023 •

edited

Loading

rgbkrk Sep 27, 2023

rgbkrk commented Sep 27, 2023 •

edited

Loading

rgbkrk commented Sep 27, 2023 •

edited

Loading

manzt commented Sep 28, 2023 •

edited

Loading

bartlomieju commented Sep 28, 2023

bartlomieju commented Sep 28, 2023

rgbkrk commented Sep 28, 2023 •

edited

Loading

manzt commented Sep 28, 2023 •

edited

Loading

bartlomieju left a comment

manzt commented Sep 28, 2023

manzt commented Sep 29, 2023

bartlomieju left a comment

rgbkrk commented Oct 1, 2023

feat(jupyter): send Jupyter messaging metadata with Deno.jupyter.broadcast #20714

feat(jupyter): send Jupyter messaging metadata with Deno.jupyter.broadcast #20714

Conversation

manzt commented Sep 27, 2023 • edited Loading

Example

CLAassistant commented Sep 27, 2023 • edited Loading

manzt commented Sep 27, 2023

manzt commented Sep 27, 2023 • edited Loading

manzt commented Sep 27, 2023 • edited Loading

rgbkrk Sep 27, 2023

Choose a reason for hiding this comment

rgbkrk commented Sep 27, 2023 • edited Loading

rgbkrk commented Sep 27, 2023 • edited Loading

manzt commented Sep 28, 2023 • edited Loading

bartlomieju commented Sep 28, 2023

bartlomieju commented Sep 28, 2023

rgbkrk commented Sep 28, 2023 • edited Loading

manzt commented Sep 28, 2023 • edited Loading

bartlomieju left a comment

Choose a reason for hiding this comment

manzt commented Sep 28, 2023

manzt commented Sep 29, 2023

bartlomieju left a comment

Choose a reason for hiding this comment

rgbkrk commented Oct 1, 2023

feat(jupyter): send Jupyter messaging metadata with `Deno.jupyter.broadcast` #20714

feat(jupyter): send Jupyter messaging metadata with `Deno.jupyter.broadcast` #20714

manzt commented Sep 27, 2023 •

edited

Loading

CLAassistant commented Sep 27, 2023 •

edited

Loading

manzt commented Sep 27, 2023 •

edited

Loading

manzt commented Sep 27, 2023 •

edited

Loading

rgbkrk commented Sep 27, 2023 •

edited

Loading

rgbkrk commented Sep 27, 2023 •

edited

Loading

manzt commented Sep 28, 2023 •

edited

Loading

rgbkrk commented Sep 28, 2023 •

edited

Loading

manzt commented Sep 28, 2023 •

edited

Loading