# What is a \`model\` in JupyterLab?

**URL:** <https://discourse.jupyter.org/t/what-is-a-model-in-jupyterlab/8537>\
**Category:** JupyterLab\
**Created:** [March 29, 2021, 4:07pm UTC](https://discourse.jupyter.org/t/what-is-a-model-in-jupyterlab/8537 "2021-03-29T16:07:42Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![adpatter](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/adpatter/32/21229_2.png) [@adpatter](https://discourse.jupyter.org/u/adpatter)\
**Post date:** [March 29, 2021, 4:07pm UTC](https://discourse.jupyter.org/t/what-is-a-model-in-jupyterlab/8537/1 "2021-03-29T16:07:43Z")

</div>

In order to try to illustrate what I am inquiring about, the code below shows the number of outputs for a CodeCell. In the first console.log I am not using the `model` and in the second console.log I am using the `model` in order to get this length. I am trying to understand the `model` concept.

What is a `model`? I realize this might be an obtuse question. However, I am struggling to understand this concept, so I thought perhaps someone could shed light on it for me.

```
const extension: JupyterFrontEndPlugin<object> = {
  id: "etc-jupyterlab-telemetry:plugin",
  autoStart: true,
  requires: [INotebookTracker],
  activate: (app: JupyterFrontEnd, nbTracker: INotebookTracker) => {

    window.nbApp = app;

    console.log("JupyterLab extension etc-jupyterlab-telemetry is activated!");

    nbTracker.widgetAdded.connect(async (tracker: INotebookTracker, nbPanel: NotebookPanel) => {

      await nbPanel.revealed;

      nbPanel.content.widgets.forEach((cell: Cell<ICellModel>) => {
        if (cell.model.type === "code") {
          console.log((cell as CodeCell).outputArea.widgets.length); // Not Model output
          console.log((cell as CodeCell).model.outputs.length); // Model output
        }
      });
    });

    return {
    };
  }
};
```

---

<div class="post-metadata">

**Author:** ![adpatter](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/adpatter/32/21229_2.png) [@adpatter](https://discourse.jupyter.org/u/adpatter)\
**Post date:** [March 30, 2021, 2:28pm UTC](https://discourse.jupyter.org/t/what-is-a-model-in-jupyterlab/8537/2 "2021-03-30T14:28:12Z")

</div>

It appears that what distinguishes a `Cell` from a `CellModel` is that the `Cell` seems to represent the DOM node, or its visual representation, and the `CellModel` seems to represent the “data” contained by the cell.

---

<div class="post-metadata">

**Author:** ![bollwyvl](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/bollwyvl/32/904_2.png) [@bollwyvl](https://discourse.jupyter.org/u/bollwyvl)\
**Post date:** [March 30, 2021, 5:05pm UTC](https://discourse.jupyter.org/t/what-is-a-model-in-jupyterlab/8537/3 "2021-03-30T17:05:16Z")

</div>

Right. This model layer (aping, but not entirely implementing the [MVC pattern](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)) was added (vs just slamming stuff into the DOM with jQuery in `notebook`) so that a single _thing_ (whether it’s a single output, or a whole notebook) could be rendered in multiple places on the page and stay in sync. This is how _Create new View for Output_ and _Create New View for Notebook_ works.

Lumino doesn’t have a The One Model, so in Lab you’ll see a number of models, either `MimeModel`, `DocumentModel`, or `VDomModel`, or written whole-cloth with no `super` implementing signals themselves. Notebook and (its children) are always special!

Zooming in a bit, the `VDomModel` is used heavily in the React-derived widgets, and kinda fudges over that in classical React, the “model” is split into _props_, immutable, one-way content that a component must abide, and _state_, which the component can change. But then that community rapidly bifurcates into `redux`, `mobx`, etc. which encourage a single global “store” object, for which Lab doesn’t have an equivalent, for better or for worse.

---

<div class="post-metadata">

**Author:** ![0Hughman0](https://avatars.discourse-cdn.com/v4/letter/0/2bfe46/32.png) [@0Hughman0](https://discourse.jupyter.org/u/0Hughman0)\
**Post date:** [April 13, 2021, 9:25am UTC](https://discourse.jupyter.org/t/what-is-a-model-in-jupyterlab/8537/4 "2021-04-13T09:25:24Z")

</div>

I don’t know if I missed it somewhere, but I think it would be incredibly helpful for people developing extensions to provide a document that describes the `Widget`-`model` pattern. It seems this is the de-facto way to synchronise data between widgets but as far as I can tell is not mentioned in any of the examples/ docs.

It’s touched on in [Documents — JupyterLab 3.0.14 documentation](https://jupyterlab.readthedocs.io/en/stable/extension/documents.html), but this is written in a way that implies that models are particular to Documents and it doesn’t talk about them in more general terms.

If the Widget example ([extension-examples/index.ts at 8bc09d2839efed8078c9fbc43da0fd39a0b7d0a3 · jupyterlab/extension-examples · GitHub](https://github.com/jupyterlab/extension-examples/blob/8bc09d2839efed8078c9fbc43da0fd39a0b7d0a3/widgets/src/index.ts)) was modified to include a model - and even better extended to demonstrate syncing between multiple widgets, I think this would be incredibly instructive.

It seems to me that hooking into pre-existing JLab functionality is quite well supported/ documented, but re-using and extending it is quite challenging at present.

I’ve been taking quite a deep dive into the source for a cool extension I’m trying to make. Very happy to discuss all things further!