Kernel information rendering logic

JupyterLab
1

I am working on kernel demo development to show how the flow of information returned by the kernel is always displayed incorrectly, and how in jupyterlab the flow of information returned by the kernel uses the widget to make the message properly formatted.

Such as display tables
my：

企业微信截图_f8c77f36-a9b7-4e03-a395-6ae9b2249482(1)
企业微信截图_f8c77f36-a9b7-4e03-a395-6ae9b2249482(1)1166×1078 147 KB

Can you tell me what happens after you get the data stream

Thanks

2

I am not sure I am tracking, but some general pointers:

  • the message type for such things is usually display_data
    • these messages can contain a media type, the data itself (suitably encoded) and some optional metadata
      • without know more, it looks like the screenshot has a text/html media type? or it might have text/csv or something.
  • in the Lab client, this is handled by the rendermime stack, but these can be overloaded, per media type, by anything that extends the renderer interface, such as these bespoke ones.
    • in the case of a notebook/console, this is delivered from the cell model to the DOM as an output area
1 Like
3

For example, the display_data I get from the kernel is

{
  "header": {
    "msg_id": "e121263d-60f0-4f2f-bd16-aba12c6af5af",
    "session": "f26f4b902c70449ea466666771030e9e",
    "username": "username",
    "date": "2022-09-08T01:59:21.000904Z",
    "msg_type": "display_data",
    "version": "5.3"
  },
  "msg_id": "e121263d-60f0-4f2f-bd16-aba12c6af5af",
  "msg_type": "display_data",
  "parent_header": {
    "date": "2022-09-08T01:59:20.947000Z",
    "msg_id": "d560765d498c4321a5d58d52c8dcf452",
    "username": "username",
    "session": "f26f4b902c70449ea466666771030e9e",
    "msg_type": "execute_request",
    "version": "5.2"
  },
  "metadata": {},
  "content": {
    "data": {
      "text/html": "<table class=\"dataframe\">\n<caption>A data.frame: 150 × 5</caption>\n<thead>\n\t<tr><th scope=col>Sepal.Length</th><th scope=col>Sepal.Width</th><th scope=col>Petal.Length</th><th scope=col>Petal.Width</th><th scope=col>Species</th></tr>\n\t<tr><th scope=col>&lt;dbl&gt;</th><th scope=col>&lt;dbl&gt;</th><th scope=col>&lt;dbl&gt;</th><th scope=col>&lt;dbl&gt;</th><th scope=col>&lt;fct&gt;</th></tr>\n</thead>\n<tbody>\n\t<tr><td>5.1</td><td>3.5</td><td>1.4</td><td>0.2</td><td>setosa</td></tr>\n\t<tr><td>4.9</td><td>3.0</td><td>1.4</td><td>0.2</td><td>setosa</td></tr>\n\t<tr><td>4.7</td><td>3.2</td><td>1.3</td><td>0.2</td><td>setosa</td></tr>\n\t<tr><td>4.6</td><td>3.1</td><td>1.5</td><td>0.2</td><td>setosa</td></tr>\n\t<tr><td>5.0</td><td>3.6</td><td>1.4</td><td>0.2</td><td>setosa</td></tr>\n\t<tr><td>5.4</td><td>3.9</td><td>1.7</td><td>0.4</td><td>setosa</td></tr>\n\t<tr><td>4.6</td><td>3.4</td><td>1.4</td><td>0.3</td><td>setosa</td></tr>\n\t<tr><td>5.0</td><td>3.4</td><td>1.5</td><td>0.2</td><td>setosa</td></tr>\n\t<tr><td>4.4</td><td>2.9</td><td>1.4</td><td>0.2</td><td>setosa</td></tr>\n\t<tr><td>4.9</td><td>3.1</td><td>1.5</td><td>0.1</td><td>setosa</td></tr>\n\t<tr><td>5.4</td><td>3.7</td><td>1.5</td><td>0.2</td><td>setosa</td></tr>\n\t<tr><td>4.8</td><td>3.4</td><td>1.6</td><td>0.2</td><td>setosa</td></tr>\n\t<tr><td>4.8</td><td>3.0</td><td>1.4</td><td>0.1</td><td>setosa</td></tr>\n\t<tr><td>4.3</td><td>3.0</td><td>1.1</td><td>0.1</td><td>setosa</td></tr>\n\t<tr><td>5.8</td><td>4.0</td><td>1.2</td><td>0.2</td><td>setosa</td></tr>\n\t<tr><td>5.7</td><td>4.4</td><td>1.5</td><td>0.4</td><td>setosa</td></tr>\n\t<tr><td>5.4</td><td>3.9</td><td>1.3</td><td>0.4</td><td>setosa</td></tr>\n\t<tr><td>5.1</td><td>3.5</td><td>1.4</td><td>0.3</td><td>setosa</td></tr>\n\t<tr><td>5.7</td><td>3.8</td><td>1.7</td><td>0.3</td><td>setosa</td></tr>\n\t<tr><td>5.1</td><td>3.8</td><td>1.5</td><td>0.3</td><td>setosa</td></tr>\n\t<tr><td>5.4</td><td>3.4</td><td>1.7</td><td>0.2</td><td>setosa</td></tr>\n\t<tr><td>5.1</td><td>3.7</td><td>1.5</td><td>0.4</td><td>setosa</td></tr>\n\t<tr><td>4.6</td><td>3.6</td><td>1.0</td><td>0.2</td><td>setosa</td></tr>\n\t<tr><td>5.1</td><td>3.3</td><td>1.7</td><td>0.5</td><td>setosa</td></tr>\n\t<tr><td>4.8</td><td>3.4</td><td>1.9</td><td>0.2</td><td>setosa</td></tr>\n\t<tr><td>5.0</td><td>3.0</td><td>1.6</td><td>0.2</td><td>setosa</td></tr>\n\t<tr><td>5.0</td><td>3.4</td><td>1.6</td><td>0.4</td><td>setosa</td></tr>\n\t<tr><td>5.2</td><td>3.5</td><td>1.5</td><td>0.2</td><td>setosa</td></tr>\n\t<tr><td>5.2</td><td>3.4</td><td>1.4</td><td>0.2</td><td>setosa</td></tr>\n\t<tr><td>4.7</td><td>3.2</td><td>1.6</td><td>0.2</td><td>setosa</td></tr>\n\t<tr><td>⋮</td><td>⋮</td><td>⋮</td><td>⋮</td><td>⋮</td></tr>\n\t<tr><td>6.9</td><td>3.2</td><td>5.7</td><td>2.3</td><td>virginica</td></tr>\n\t<tr><td>5.6</td><td>2.8</td><td>4.9</td><td>2.0</td><td>virginica</td></tr>\n\t<tr><td>7.7</td><td>2.8</td><td>6.7</td><td>2.0</td><td>virginica</td></tr>\n\t<tr><td>6.3</td><td>2.7</td><td>4.9</td><td>1.8</td><td>virginica</td></tr>\n\t<tr><td>6.7</td><td>3.3</td><td>5.7</td><td>2.1</td><td>virginica</td></tr>\n\t<tr><td>7.2</td><td>3.2</td><td>6.0</td><td>1.8</td><td>virginica</td></tr>\n\t<tr><td>6.2</td><td>2.8</td><td>4.8</td><td>1.8</td><td>virginica</td></tr>\n\t<tr><td>6.1</td><td>3.0</td><td>4.9</td><td>1.8</td><td>virginica</td></tr>\n\t<tr><td>6.4</td><td>2.8</td><td>5.6</td><td>2.1</td><td>virginica</td></tr>\n\t<tr><td>7.2</td><td>3.0</td><td>5.8</td><td>1.6</td><td>virginica</td></tr>\n\t<tr><td>7.4</td><td>2.8</td><td>6.1</td><td>1.9</td><td>virginica</td></tr>\n\t<tr><td>7.9</td><td>3.8</td><td>6.4</td><td>2.0</td><td>virginica</td></tr>\n\t<tr><td>6.4</td><td>2.8</td><td>5.6</td><td>2.2</td><td>virginica</td></tr>\n\t<tr><td>6.3</td><td>2.8</td><td>5.1</td><td>1.5</td><td>virginica</td></tr>\n\t<tr><td>6.1</td><td>2.6</td><td>5.6</td><td>1.4</td><td>virginica</td></tr>\n\t<tr><td>7.7</td><td>3.0</td><td>6.1</td><td>2.3</td><td>virginica</td></tr>\n\t<tr><td>6.3</td><td>3.4</td><td>5.6</td><td>2.4</td><td>virginica</td></tr>\n\t<tr><td>6.4</td><td>3.1</td><td>5.5</td><td>1.8</td><td>virginica</td></tr>\n\t<tr><td>6.0</td><td>3.0</td><td>4.8</td><td>1.8</td><td>virginica</td></tr>\n\t<tr><td>6.9</td><td>3.1</td><td>5.4</td><td>2.1</td><td>virginica</td></tr>\n\t<tr><td>6.7</td><td>3.1</td><td>5.6</td><td>2.4</td><td>virginica</td></tr>\n\t<tr><td>6.9</td><td>3.1</td><td>5.1</td><td>2.3</td><td>virginica</td></tr>\n\t<tr><td>5.8</td><td>2.7</td><td>5.1</td><td>1.9</td><td>virginica</td></tr>\n\t<tr><td>6.8</td><td>3.2</td><td>5.9</td><td>2.3</td><td>virginica</td></tr>\n\t<tr><td>6.7</td><td>3.3</td><td>5.7</td><td>2.5</td><td>virginica</td></tr>\n\t<tr><td>6.7</td><td>3.0</td><td>5.2</td><td>2.3</td><td>virginica</td></tr>\n\t<tr><td>6.3</td><td>2.5</td><td>5.0</td><td>1.9</td><td>virginica</td></tr>\n\t<tr><td>6.5</td><td>3.0</td><td>5.2</td><td>2.0</td><td>virginica</td></tr>\n\t<tr><td>6.2</td><td>3.4</td><td>5.4</td><td>2.3</td><td>virginica</td></tr>\n\t<tr><td>5.9</td><td>3.0</td><td>5.1</td><td>1.8</td><td>virginica</td></tr>\n</tbody>\n</table>\n",
      "text/markdown": "\nA data.frame: 150 × 5\n\n| Sepal.Length &lt;dbl&gt; | Sepal.Width &lt;dbl&gt; | Petal.Length &lt;dbl&gt; | Petal.Width &lt;dbl&gt; | Species &lt;fct&gt; |\n|---|---|---|---|---|\n| 5.1 | 3.5 | 1.4 | 0.2 | setosa |\n| 4.9 | 3.0 | 1.4 | 0.2 | setosa |\n| 4.7 | 3.2 | 1.3 | 0.2 | setosa |\n| 4.6 | 3.1 | 1.5 | 0.2 | setosa |\n| 5.0 | 3.6 | 1.4 | 0.2 | setosa |\n| 5.4 | 3.9 | 1.7 | 0.4 | setosa |\n| 4.6 | 3.4 | 1.4 | 0.3 | setosa |\n| 5.0 | 3.4 | 1.5 | 0.2 | setosa |\n| 4.4 | 2.9 | 1.4 | 0.2 | setosa |\n| 4.9 | 3.1 | 1.5 | 0.1 | setosa |\n| 5.4 | 3.7 | 1.5 | 0.2 | setosa |\n| 4.8 | 3.4 | 1.6 | 0.2 | setosa |\n| 4.8 | 3.0 | 1.4 | 0.1 | setosa |\n| 4.3 | 3.0 | 1.1 | 0.1 | setosa |\n| 5.8 | 4.0 | 1.2 | 0.2 | setosa |\n| 5.7 | 4.4 | 1.5 | 0.4 | setosa |\n| 5.4 | 3.9 | 1.3 | 0.4 | setosa |\n| 5.1 | 3.5 | 1.4 | 0.3 | setosa |\n| 5.7 | 3.8 | 1.7 | 0.3 | setosa |\n| 5.1 | 3.8 | 1.5 | 0.3 | setosa |\n| 5.4 | 3.4 | 1.7 | 0.2 | setosa |\n| 5.1 | 3.7 | 1.5 | 0.4 | setosa |\n| 4.6 | 3.6 | 1.0 | 0.2 | setosa |\n| 5.1 | 3.3 | 1.7 | 0.5 | setosa |\n| 4.8 | 3.4 | 1.9 | 0.2 | setosa |\n| 5.0 | 3.0 | 1.6 | 0.2 | setosa |\n| 5.0 | 3.4 | 1.6 | 0.4 | setosa |\n| 5.2 | 3.5 | 1.5 | 0.2 | setosa |\n| 5.2 | 3.4 | 1.4 | 0.2 | setosa |\n| 4.7 | 3.2 | 1.6 | 0.2 | setosa |\n| ⋮ | ⋮ | ⋮ | ⋮ | ⋮ |\n| 6.9 | 3.2 | 5.7 | 2.3 | virginica |\n| 5.6 | 2.8 | 4.9 | 2.0 | virginica |\n| 7.7 | 2.8 | 6.7 | 2.0 | virginica |\n| 6.3 | 2.7 | 4.9 | 1.8 | virginica |\n| 6.7 | 3.3 | 5.7 | 2.1 | virginica |\n| 7.2 | 3.2 | 6.0 | 1.8 | virginica |\n| 6.2 | 2.8 | 4.8 | 1.8 | virginica |\n| 6.1 | 3.0 | 4.9 | 1.8 | virginica |\n| 6.4 | 2.8 | 5.6 | 2.1 | virginica |\n| 7.2 | 3.0 | 5.8 | 1.6 | virginica |\n| 7.4 | 2.8 | 6.1 | 1.9 | virginica |\n| 7.9 | 3.8 | 6.4 | 2.0 | virginica |\n| 6.4 | 2.8 | 5.6 | 2.2 | virginica |\n| 6.3 | 2.8 | 5.1 | 1.5 | virginica |\n| 6.1 | 2.6 | 5.6 | 1.4 | virginica |\n| 7.7 | 3.0 | 6.1 | 2.3 | virginica |\n| 6.3 | 3.4 | 5.6 | 2.4 | virginica |\n| 6.4 | 3.1 | 5.5 | 1.8 | virginica |\n| 6.0 | 3.0 | 4.8 | 1.8 | virginica |\n| 6.9 | 3.1 | 5.4 | 2.1 | virginica |\n| 6.7 | 3.1 | 5.6 | 2.4 | virginica |\n| 6.9 | 3.1 | 5.1 | 2.3 | virginica |\n| 5.8 | 2.7 | 5.1 | 1.9 | virginica |\n| 6.8 | 3.2 | 5.9 | 2.3 | virginica |\n| 6.7 | 3.3 | 5.7 | 2.5 | virginica |\n| 6.7 | 3.0 | 5.2 | 2.3 | virginica |\n| 6.3 | 2.5 | 5.0 | 1.9 | virginica |\n| 6.5 | 3.0 | 5.2 | 2.0 | virginica |\n| 6.2 | 3.4 | 5.4 | 2.3 | virginica |\n| 5.9 | 3.0 | 5.1 | 1.8 | virginica |\n\n",
      "text/latex": "A data.frame: 150 × 5\n\\begin{tabular}{lllll}\n Sepal.Length & Sepal.Width & Petal.Length & Petal.Width & Species\\\\\n <dbl> & <dbl> & <dbl> & <dbl> & <fct>\\\\\n\\hline\n\t 5.1 & 3.5 & 1.4 & 0.2 & setosa\\\\\n\t 4.9 & 3.0 & 1.4 & 0.2 & setosa\\\\\n\t 4.7 & 3.2 & 1.3 & 0.2 & setosa\\\\\n\t 4.6 & 3.1 & 1.5 & 0.2 & setosa\\\\\n\t 5.0 & 3.6 & 1.4 & 0.2 & setosa\\\\\n\t 5.4 & 3.9 & 1.7 & 0.4 & setosa\\\\\n\t 4.6 & 3.4 & 1.4 & 0.3 & setosa\\\\\n\t 5.0 & 3.4 & 1.5 & 0.2 & setosa\\\\\n\t 4.4 & 2.9 & 1.4 & 0.2 & setosa\\\\\n\t 4.9 & 3.1 & 1.5 & 0.1 & setosa\\\\\n\t 5.4 & 3.7 & 1.5 & 0.2 & setosa\\\\\n\t 4.8 & 3.4 & 1.6 & 0.2 & setosa\\\\\n\t 4.8 & 3.0 & 1.4 & 0.1 & setosa\\\\\n\t 4.3 & 3.0 & 1.1 & 0.1 & setosa\\\\\n\t 5.8 & 4.0 & 1.2 & 0.2 & setosa\\\\\n\t 5.7 & 4.4 & 1.5 & 0.4 & setosa\\\\\n\t 5.4 & 3.9 & 1.3 & 0.4 & setosa\\\\\n\t 5.1 & 3.5 & 1.4 & 0.3 & setosa\\\\\n\t 5.7 & 3.8 & 1.7 & 0.3 & setosa\\\\\n\t 5.1 & 3.8 & 1.5 & 0.3 & setosa\\\\\n\t 5.4 & 3.4 & 1.7 & 0.2 & setosa\\\\\n\t 5.1 & 3.7 & 1.5 & 0.4 & setosa\\\\\n\t 4.6 & 3.6 & 1.0 & 0.2 & setosa\\\\\n\t 5.1 & 3.3 & 1.7 & 0.5 & setosa\\\\\n\t 4.8 & 3.4 & 1.9 & 0.2 & setosa\\\\\n\t 5.0 & 3.0 & 1.6 & 0.2 & setosa\\\\\n\t 5.0 & 3.4 & 1.6 & 0.4 & setosa\\\\\n\t 5.2 & 3.5 & 1.5 & 0.2 & setosa\\\\\n\t 5.2 & 3.4 & 1.4 & 0.2 & setosa\\\\\n\t 4.7 & 3.2 & 1.6 & 0.2 & setosa\\\\\n\t ⋮ & ⋮ & ⋮ & ⋮ & ⋮\\\\\n\t 6.9 & 3.2 & 5.7 & 2.3 & virginica\\\\\n\t 5.6 & 2.8 & 4.9 & 2.0 & virginica\\\\\n\t 7.7 & 2.8 & 6.7 & 2.0 & virginica\\\\\n\t 6.3 & 2.7 & 4.9 & 1.8 & virginica\\\\\n\t 6.7 & 3.3 & 5.7 & 2.1 & virginica\\\\\n\t 7.2 & 3.2 & 6.0 & 1.8 & virginica\\\\\n\t 6.2 & 2.8 & 4.8 & 1.8 & virginica\\\\\n\t 6.1 & 3.0 & 4.9 & 1.8 & virginica\\\\\n\t 6.4 & 2.8 & 5.6 & 2.1 & virginica\\\\\n\t 7.2 & 3.0 & 5.8 & 1.6 & virginica\\\\\n\t 7.4 & 2.8 & 6.1 & 1.9 & virginica\\\\\n\t 7.9 & 3.8 & 6.4 & 2.0 & virginica\\\\\n\t 6.4 & 2.8 & 5.6 & 2.2 & virginica\\\\\n\t 6.3 & 2.8 & 5.1 & 1.5 & virginica\\\\\n\t 6.1 & 2.6 & 5.6 & 1.4 & virginica\\\\\n\t 7.7 & 3.0 & 6.1 & 2.3 & virginica\\\\\n\t 6.3 & 3.4 & 5.6 & 2.4 & virginica\\\\\n\t 6.4 & 3.1 & 5.5 & 1.8 & virginica\\\\\n\t 6.0 & 3.0 & 4.8 & 1.8 & virginica\\\\\n\t 6.9 & 3.1 & 5.4 & 2.1 & virginica\\\\\n\t 6.7 & 3.1 & 5.6 & 2.4 & virginica\\\\\n\t 6.9 & 3.1 & 5.1 & 2.3 & virginica\\\\\n\t 5.8 & 2.7 & 5.1 & 1.9 & virginica\\\\\n\t 6.8 & 3.2 & 5.9 & 2.3 & virginica\\\\\n\t 6.7 & 3.3 & 5.7 & 2.5 & virginica\\\\\n\t 6.7 & 3.0 & 5.2 & 2.3 & virginica\\\\\n\t 6.3 & 2.5 & 5.0 & 1.9 & virginica\\\\\n\t 6.5 & 3.0 & 5.2 & 2.0 & virginica\\\\\n\t 6.2 & 3.4 & 5.4 & 2.3 & virginica\\\\\n\t 5.9 & 3.0 & 5.1 & 1.8 & virginica\\\\\n\\end{tabular}\n",
      "text/plain": "    Sepal.Length Sepal.Width Petal.Length Petal.Width Species  \n1   5.1          3.5         1.4          0.2         setosa   \n2   4.9          3.0         1.4          0.2         setosa   \n3   4.7          3.2         1.3          0.2         setosa   \n4   4.6          3.1         1.5          0.2         setosa   \n5   5.0          3.6         1.4          0.2         setosa   \n6   5.4          3.9         1.7          0.4         setosa   \n7   4.6          3.4         1.4          0.3         setosa   \n8   5.0          3.4         1.5          0.2         setosa   \n9   4.4          2.9         1.4          0.2         setosa   \n10  4.9          3.1         1.5          0.1         setosa   \n11  5.4          3.7         1.5          0.2         setosa   \n12  4.8          3.4         1.6          0.2         setosa   \n13  4.8          3.0         1.4          0.1         setosa   \n14  4.3          3.0         1.1          0.1         setosa   \n15  5.8          4.0         1.2          0.2         setosa   \n16  5.7          4.4         1.5          0.4         setosa   \n17  5.4          3.9         1.3          0.4         setosa   \n18  5.1          3.5         1.4          0.3         setosa   \n19  5.7          3.8         1.7          0.3         setosa   \n20  5.1          3.8         1.5          0.3         setosa   \n21  5.4          3.4         1.7          0.2         setosa   \n22  5.1          3.7         1.5          0.4         setosa   \n23  4.6          3.6         1.0          0.2         setosa   \n24  5.1          3.3         1.7          0.5         setosa   \n25  4.8          3.4         1.9          0.2         setosa   \n26  5.0          3.0         1.6          0.2         setosa   \n27  5.0          3.4         1.6          0.4         setosa   \n28  5.2          3.5         1.5          0.2         setosa   \n29  5.2          3.4         1.4          0.2         setosa   \n30  4.7          3.2         1.6          0.2         setosa   \n⋮   ⋮            ⋮           ⋮            ⋮           ⋮        \n121 6.9          3.2         5.7          2.3         virginica\n122 5.6          2.8         4.9          2.0         virginica\n123 7.7          2.8         6.7          2.0         virginica\n124 6.3          2.7         4.9          1.8         virginica\n125 6.7          3.3         5.7          2.1         virginica\n126 7.2          3.2         6.0          1.8         virginica\n127 6.2          2.8         4.8          1.8         virginica\n128 6.1          3.0         4.9          1.8         virginica\n129 6.4          2.8         5.6          2.1         virginica\n130 7.2          3.0         5.8          1.6         virginica\n131 7.4          2.8         6.1          1.9         virginica\n132 7.9          3.8         6.4          2.0         virginica\n133 6.4          2.8         5.6          2.2         virginica\n134 6.3          2.8         5.1          1.5         virginica\n135 6.1          2.6         5.6          1.4         virginica\n136 7.7          3.0         6.1          2.3         virginica\n137 6.3          3.4         5.6          2.4         virginica\n138 6.4          3.1         5.5          1.8         virginica\n139 6.0          3.0         4.8          1.8         virginica\n140 6.9          3.1         5.4          2.1         virginica\n141 6.7          3.1         5.6          2.4         virginica\n142 6.9          3.1         5.1          2.3         virginica\n143 5.8          2.7         5.1          1.9         virginica\n144 6.8          3.2         5.9          2.3         virginica\n145 6.7          3.3         5.7          2.5         virginica\n146 6.7          3.0         5.2          2.3         virginica\n147 6.3          2.5         5.0          1.9         virginica\n148 6.5          3.0         5.2          2.0         virginica\n149 6.2          3.4         5.4          2.3         virginica\n150 5.9          3.0         5.1          1.8         virginica"
    },
    "metadata": {}
  },
  "buffers": [],
  "channel": "iopub"
}

How can i show a result like jupyterlab by calling a function? Can you write an example for me.

4

In an interactive client or in some viewing application? In what language?

A look through the well-documented codebase of jupyterlab, potentially with a local build with sourcemaps enabled for live debugging, can provide much more insight as to how the sausage is currently made, knowing it was meant to be extended.

5
  • The front-end of the tool I developed uses React + TS.
  • The kernel retrieves information for R and Python
    From the document, I know that data is processed through widgets and outputarea, but I still don’t know how the data is processed through these two parts. If you are clear, could you please write a data processing process for me.
    Thank you very much :wink: