# Jlab extension newbie naive questions

**URL:** <https://discourse.jupyter.org/t/jlab-extension-newbie-naive-questions/1535>\
**Category:** JupyterLab\
**Created:** [July 2, 2019, 10:24am UTC](https://discourse.jupyter.org/t/jlab-extension-newbie-naive-questions/1535 "2019-07-02T10:24:47Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![parmentelat](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/parmentelat/32/813_2.png) [@parmentelat](https://discourse.jupyter.org/u/parmentelat)\
**Post date:** [July 2, 2019, 10:24am UTC](https://discourse.jupyter.org/t/jlab-extension-newbie-naive-questions/1535/1 "2019-07-02T10:24:47Z")

</div>

Hi

I’m trying to make progress on porting the RISE slideshow extension to jlab; I started from the [jupyterlab-apod tuto](https://jupyterlab.readthedocs.io/en/latest//developer/extension_tutorial.html)

I have a couple upfront questions, on which any hint or feedback would be _most appreciated_

Note: sorry for shoving all my issues into a single thread, I can split that later on if some of these topics deserve a larger horizon

- A. **toolbar button** : I figured how to insert a toolbar button at either the beginning or end, but that does not seem right; leftmost entries should IMHO remain the standard ones, and OTOH - or on the other end;) - pushing it rightmost sucks too; I would wish to insert it as the rightmost button in the left area, right after the `Markdown` dropdown in the screenshot below; how should I go about doing that ?

- B. **devel tools** : I struggled quite a bit at first to get a watch mode to behave as expected; one thing that I believe is missing from the tutorial is that I essentially ended up running _two_ watching processes,  
one doing `jupyter lab --watch` and one doing `jlpm watch`; if I’m right that it’s the way to go, then the tutorial could probably be improved to reflect that

- C. **devel tools - bis** : I was playing with the idea of using [relative dependencies](https://docs.npmjs.com/files/package.json#local-paths) in my `package.json`; use case here is that we would like to isolate the dirty patches that we do on top of the mainstream `reveal.js` into a npm package of its own, but would like to avoid the need to formally publish it at each devel cycle; I have not been able to get that to work so far, does anybody know if that’s a known limitation to this `jlpm` thing, or on the contrary is that supposed to just work fine ? I need to add that I’m more of a Python guy and am totally new to this tsc/yarn thingy, so I very well may have screwed up somewhere…

- D. **extension design** : on a much more general level, the classic notebook extension is by definition not able to create extra tabs; so when triggering on slideshow mode, the notebook content is **replaced** with a reveal-empowered slideshow; now in the context of jlab, we **could** envision this feature as a dual-tab gadget; I mean, quite similar to, for example, a markdown preview in vscode.

sorry again for mixing all this into a single thread; thanks very much in anticipation for _any_ clue about these questions

---

<div class="post-metadata">

**Author:** ![blink1073](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/blink1073/32/791_2.png) [@blink1073](https://discourse.jupyter.org/u/blink1073)\
**Post date:** [July 20, 2019, 10:54am UTC](https://discourse.jupyter.org/t/jlab-extension-newbie-naive-questions/1535/2 "2019-07-20T10:54:25Z")

</div>

Hi @parmentelat, some answers:

A. panel.toolbar.insertItem(0, ‘myButtonName’, button);  
B. There is a sentence in the APOD guide that says “If you wish to avoid running `jlpm run build` after each change, you can open a third terminal, and run the `jlpm run watch` command from your extension directory, which will automatically compile the TypeScript files as they change.”  
C. You can use `jupyter labextension link` on non-extension packages  
D. You can add a sibling widget if you have the parent widget’s `context` object.

> <https://github.com/jupyterlab/jupyterlab/blob/da8e7bda5eebd22319f59e5abbaaa9917872a7e8/packages/notebook-extension/src/index.ts#L1624>

Cheers!

---

<div class="post-metadata">

**Author:** ![parmentelat](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/parmentelat/32/813_2.png) [@parmentelat](https://discourse.jupyter.org/u/parmentelat)\
**Post date:** [July 20, 2019, 3:59pm UTC](https://discourse.jupyter.org/t/jlab-extension-newbie-naive-questions/1535/3 "2019-07-20T15:59:11Z")

</div>

thanks again Steven

about A. my understanding was that your sentence would create a button in the leftmost position in the toolbar, is that right ?

thanks for the useful tips in any case, I’m sure this will turn out invaluable when we push again on this matter

---

<div class="post-metadata">

**Author:** ![damianavila](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/damianavila/32/46_2.png) [@damianavila](https://discourse.jupyter.org/u/damianavila)\
**Post date:** [November 1, 2020, 5:35pm UTC](https://discourse.jupyter.org/t/jlab-extension-newbie-naive-questions/1535/4 "2020-11-01T17:35:32Z")

</div>

@parmentelat, sorry for resurrecting this old thread, but for the icon stuff, next to the cell type button/dropdown I came up with this snippet:

```
// Getting the index iteratively is less resource consuming, but this is far more readable
// and we only need to get the index at the loading of the extension...
let cellTypeButton = panel.toolbar.node.getElementsByClassName("jp-Notebook-toolbarCellType")[0]
let index = Array.from(cellTypeButton.parentNode.children).indexOf(cellTypeButton)

panel.toolbar.insertItem(index + 1,'rise', button);
return new DisposableDelegate(() => {
  button.dispose();
});

```

Surely @blink1073 has better ideas, but this seems to be working OK.