# @voila-dashboards/jupyterlab-gridstack > A gridstack-based template for [![voila-gridstack](assets/voila.png)](https://github.com/voila-dashboards/voila). Latest version **0.4.0** (published 2024-02-06) · BSD-3-Clause license · 0 weekly downloads ## Install ```sh npm install @voila-dashboards/jupyterlab-gridstack pnpm add @voila-dashboards/jupyterlab-gridstack yarn add @voila-dashboards/jupyterlab-gridstack bun add @voila-dashboards/jupyterlab-gridstack ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; has provenance; high quality score. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.4.0 | | Published | 2024-02-06 | | First published | 2021-01-07 | | Weekly downloads | 0 | | License | BSD-3-Clause | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 27 | | Unpacked size | 130.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 238 | | Author | Voila Development Team | | Maintainers | voila-bot, trungleduc, jtpio, maartenbreddels, martinrenou, sylvaincorlay, hbcarlos | | Keywords | jupyter, jupyterlab, jupyterlab-extension | ## Links - npm: https://www.npmjs.com/package/@voila-dashboards/jupyterlab-gridstack - Repository: https://github.com/voila-dashboards/voila-gridstack - Issues: https://github.com/voila-dashboards/voila-gridstack/issues - npm.io page: https://npm.io/package/@voila-dashboards/jupyterlab-gridstack ## Dependencies (27) - [yjs](https://npm.io/package/yjs.md) ^13.5.17 - [react](https://npm.io/package/react.md) ^18.2.0 - [gridstack](https://npm.io/package/gridstack.md) ^7.3.0 - [react-dom](https://npm.io/package/react-dom.md) ^18.2.0 - [@jupyter/ydoc](https://npm.io/package/@jupyter/ydoc.md) ^1.0.2 - [@lumino/widgets](https://npm.io/package/@lumino/widgets.md) ^2.0.0 - [@lumino/commands](https://npm.io/package/@lumino/commands.md) ^2.0.0 - [@lumino/dragdrop](https://npm.io/package/@lumino/dragdrop.md) ^2.0.0 - [@jupyterlab/cells](https://npm.io/package/@jupyterlab/cells.md) ^4.0.0 - [@lumino/algorithm](https://npm.io/package/@lumino/algorithm.md) ^2.0.0 - [@lumino/coreutils](https://npm.io/package/@lumino/coreutils.md) ^2.0.0 - [@lumino/messaging](https://npm.io/package/@lumino/messaging.md) ^2.0.0 - [@lumino/signaling](https://npm.io/package/@lumino/signaling.md) ^2.0.0 - [@lumino/disposable](https://npm.io/package/@lumino/disposable.md) ^2.0.0 - [@jupyterlab/apputils](https://npm.io/package/@jupyterlab/apputils.md) ^4.0.0 - [@jupyterlab/mainmenu](https://npm.io/package/@jupyterlab/mainmenu.md) ^4.0.0 - [@jupyterlab/notebook](https://npm.io/package/@jupyterlab/notebook.md) ^4.0.0 - [@jupyter-widgets/base](https://npm.io/package/@jupyter-widgets/base.md) ^6.0.6 - [@jupyterlab/coreutils](https://npm.io/package/@jupyterlab/coreutils.md) ^6.0.0 - [@jupyterlab/codeeditor](https://npm.io/package/@jupyterlab/codeeditor.md) ^4.0.0 - [@jupyterlab/outputarea](https://npm.io/package/@jupyterlab/outputarea.md) ^4.0.0 - [@jupyterlab/rendermime](https://npm.io/package/@jupyterlab/rendermime.md) ^4.0.0 - [@jupyterlab/application](https://npm.io/package/@jupyterlab/application.md) ^4.0.0 - [@jupyterlab/docregistry](https://npm.io/package/@jupyterlab/docregistry.md) ^4.0.0 - [@jupyterlab/observables](https://npm.io/package/@jupyterlab/observables.md) ^5.0.7 - [@jupyterlab/ui-components](https://npm.io/package/@jupyterlab/ui-components.md) ^4.0.0 - [@jupyter-widgets/jupyterlab-manager](https://npm.io/package/@jupyter-widgets/jupyterlab-manager.md) ^5.0.9 ## Recent versions - 0.4.0 (latest) — 2024-02-06 - 0.4.0-a0 — 2023-04-18 - 0.3.1 — 2022-12-29 - 0.3.0 — 2022-03-30 - 0.3.0-beta.1 — 2022-01-12 - 0.3.0-beta.0 — 2022-01-06 - 0.3.0-alpha.2 — 2022-01-02 - 0.3.0-alpha.1 — 2021-12-28 - 0.3.0-alpha.0 — 2021-11-03 - 0.2.0 — 2021-04-09 - 0.1.0 — 2021-01-07 ## README # voila-gridstack A gridstack-based template for [![voila-gridstack](assets/voila.png)](https://github.com/voila-dashboards/voila).
Gitter channel Voila JupyterLab extension
Join the Gitter Chat Voila GridStack on Binder JupyterLab on Binder
## Installation `voila-gridstack` can be installed with the mamba package manager ``` mamba install -c conda-forge voila-gridstack ``` or from PyPI ``` pip install voila-gridstack ``` ## Format The template uses metadata defined in the notebook file (`.ipynb`) to configure the layout. The specification of the metadata was defined by a now defunct project `jupyter-dashboards`. The specification is described in `jupyter-dashboards` [docs](https://jupyter-dashboards-layout.readthedocs.io/en/latest/metadata.html). The voila renderer behaves as a "display-only renderer without authoring capabilitiy" as defined in the specs. However, there are a few differences compared to the original implmentation: - if no metadata is found in the notebook voilà will render the notebook as `grid` layout, - it can not persist the state of the cells (i.e. the re-configuration of the layout will be lost, when the user closes the voila page), - if the cell does not contain view configuration for the particular view type (`grid` or `report`) or `hidden` attribute is not defined, voilà will treat it as **visible**. ## Usage To use the `gridstack` template, pass option `--template=gridstack` to the `voila` command line. ![voila-gridstack](assets/voila-gridstack.gif) By default the position of cells in the dashboard will be fixed. If you want them to be draggable and resizable, you can launch voila with the `show_handles` resource set to `True`: ``` voila --template=gridstack examples/ --VoilaConfiguration.resources="{'gridstack': {'show_handles': True}}" ``` Note, however, that the state of the dashboard can not be persisted in the notebook. You can change the color scheme using the `theme` resource: ``` voila examples/ --template=gridstack --theme=dark ``` ## Development To install the template from source: ```bash # create a new `conda` environment conda create -n voila-gridstack -c conda-forge notebook python # activate the environment conda activate voila-gridstack # install the package in development mode python -m pip install -e . # start voila with the gridstack template voila --template=gridstack ``` ### Classic Notebook Extension ![voila-gridstack](assets/classic-extension.gif) `voila-gridstack` provides an extension for the classic notebook to edit the gridstack layout from the notebook interface. To install this extension in development mode: ```bash # activate the environment conda activate voila-gridstack # link the local files jupyter nbextension install --sys-prefix --symlink --overwrite --py voila_gridstack # enable the extension jupyter nbextension enable --sys-prefix --py voila_gridstack # check the extension is installed and enabled jupyter nbextension list # start the notebook jupyter notebook ``` Then edit the files in `voila-gridstack/static` and reload the page to see the changes. ### JupyterLab Extension ![voila-gridstack](assets/jupyterlab-gridstack.gif) Note: You will need NodeJS to build the extension package. The `jlpm` command is JupyterLab's pinned version of [yarn](https://yarnpkg.com/) that is installed with JupyterLab. You may use `yarn` or `npm` in lieu of `jlpm` below. ```bash # activate the environment conda activate voila-gridstack # install JupyterLab mamba install -c conda-forge jupyterlab # Install package in development mode pip install -e . # Link your development version of the extension with JupyterLab jupyter labextension develop . --overwrite # Rebuild extension TypeScript source after making changes jlpm run build ``` You can watch the source directory and run JupyterLab at the same time in different terminals to watch for changes in the extension's source and automatically rebuild the extension. ```bash # Watch the source directory in one terminal, automatically rebuilding when needed jlpm run watch # Run JupyterLab in another terminal jupyter lab ``` ## License We use a shared copyright model that enables all contributors to maintain the copyright on their contributions. This software is licensed under the BSD-3-Clause license. See the [LICENSE](LICENSE) file for details. --- _Source: https://npm.io/package/@voila-dashboards/jupyterlab-gridstack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._