{"id":13738720,"url":"https://github.com/voila-dashboards/voila-gridstack","last_synced_at":"2025-04-09T05:09:01.499Z","repository":{"id":34908247,"uuid":"188910662","full_name":"voila-dashboards/voila-gridstack","owner":"voila-dashboards","description":"Dashboard template for Voilà based on GridStackJS","archived":false,"fork":false,"pushed_at":"2024-03-27T08:48:12.000Z","size":11208,"stargazers_count":228,"open_issues_count":20,"forks_count":48,"subscribers_count":16,"default_branch":"main","last_synced_at":"2024-04-13T20:47:46.847Z","etag":null,"topics":["dashboard","jupyter","jupyter-notebooks","jupyterlab","python-dashboard","voila","voila-dashboard"],"latest_commit_sha":null,"homepage":"https://voila-gridstack.readthedocs.io/en/latest/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/voila-dashboards.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-05-27T21:22:46.000Z","updated_at":"2024-04-20T17:47:06.616Z","dependencies_parsed_at":"2024-04-20T17:43:24.026Z","dependency_job_id":"b9e3ff88-6113-42e6-a8bc-d7b179966467","html_url":"https://github.com/voila-dashboards/voila-gridstack","commit_stats":{"total_commits":424,"total_committers":22,"mean_commits":"19.272727272727273","dds":0.7028301886792453,"last_synced_commit":"8910e8664142910af61340ace6f57c8acf4c4fb2"},"previous_names":[],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voila-dashboards%2Fvoila-gridstack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voila-dashboards%2Fvoila-gridstack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voila-dashboards%2Fvoila-gridstack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voila-dashboards%2Fvoila-gridstack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/voila-dashboards","download_url":"https://codeload.github.com/voila-dashboards/voila-gridstack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247980837,"owners_count":21027808,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dashboard","jupyter","jupyter-notebooks","jupyterlab","python-dashboard","voila","voila-dashboard"],"created_at":"2024-08-03T03:02:34.720Z","updated_at":"2025-04-09T05:09:01.479Z","avatar_url":"https://github.com/voila-dashboards.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","others"],"sub_categories":[],"readme":"# voila-gridstack\n\nA gridstack-based template for [![voila-gridstack](assets/voila.png)](https://github.com/voila-dashboards/voila).\n\n\u003ctable\u003e\n\u003cthead align=\"center\" cellspacing=\"10\"\u003e\n  \u003ctr\u003e\n    \u003cth align=\"center\" border=\"\"\u003eGitter channel\u003c/th\u003e\n    \u003cth align=\"center\" border=\"\"\u003eVoila\u003c/th\u003e\n    \u003cth align=\"center\" border=\"\"\u003eJupyterLab extension\u003c/th\u003e\n  \u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n  \u003ctr background=\"#FFF\"\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://gitter.im/QuantStack/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge\"\u003e\n        \u003cimg src=\"https://badges.gitter.im/Join%20Chat.svg\" alt=\"Join the Gitter Chat\"/\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://mybinder.org/v2/gh/voila-dashboards/voila-gridstack/stable?urlpath=voila/tree/examples/scotch_dashboard.ipynb\"\u003e\n        \u003cimg src=\"https://mybinder.org/badge_logo.svg\" alt=\"Voila GridStack on Binder\"/\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://mybinder.org/v2/gh/voila-dashboards/voila-gridstack/stable?urlpath=lab/tree/examples\"\u003e\n        \u003cimg src=\"https://mybinder.org/badge_logo.svg\" alt=\"JupyterLab on Binder\"/\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n## Installation\n\n`voila-gridstack` can be installed with the mamba package manager\n\n```\nmamba install -c conda-forge voila-gridstack\n```\n\nor from PyPI\n\n```\npip install voila-gridstack\n```\n\n## Format\n\nThe template uses metadata defined in the notebook file (`.ipynb`) to configure the layout.\nThe specification of the metadata was defined by a now defunct project `jupyter-dashboards`.\nThe specification is described in `jupyter-dashboards`\n[docs](https://jupyter-dashboards-layout.readthedocs.io/en/latest/metadata.html).\n\nThe voila renderer behaves as a \"display-only renderer without authoring capabilitiy\" as defined in\nthe specs. However, there are a few differences compared to the original implmentation:\n\n- if no metadata is found in the notebook voilà will render the notebook as `grid` layout,\n- it can not persist the state of the cells (i.e. the re-configuration of the layout will\n  be lost, when the user closes the voila page),\n- if the cell does not contain view configuration for the particular view type (`grid` or\n  `report`) or `hidden` attribute is not defined, voilà will treat it as **visible**.\n\n## Usage\n\nTo use the `gridstack` template, pass option `--template=gridstack` to the `voila` command line.\n\n![voila-gridstack](assets/voila-gridstack.gif)\n\nBy default the position of cells in the dashboard will be fixed. If you want them to be draggable\nand resizable, you can launch voila with the `show_handles` resource set to `True`:\n\n```\nvoila --template=gridstack examples/ --VoilaConfiguration.resources=\"{'gridstack': {'show_handles': True}}\"\n```\n\nNote, however, that the state of the dashboard can not be persisted in the notebook.\n\nYou can change the color scheme using the `theme` resource:\n\n```\nvoila examples/ --template=gridstack --theme=dark\n```\n\n## Development\n\nTo install the template from source:\n\n```bash\n# create a new `conda` environment\nconda create -n voila-gridstack -c conda-forge notebook python\n\n# activate the environment\nconda activate voila-gridstack\n\n# install the package in development mode\npython -m pip install -e .\n\n# start voila with the gridstack template\nvoila --template=gridstack\n```\n\n### Classic Notebook Extension\n\n![voila-gridstack](assets/classic-extension.gif)\n\n`voila-gridstack` provides an extension for the classic notebook to edit the gridstack layout from the notebook interface.\n\nTo install this extension in development mode:\n\n```bash\n# activate the environment\nconda activate voila-gridstack\n\n# link the local files\njupyter nbextension install --sys-prefix --symlink --overwrite --py voila_gridstack\n\n# enable the extension\njupyter nbextension enable --sys-prefix --py voila_gridstack\n\n# check the extension is installed and enabled\njupyter nbextension list\n\n# start the notebook\njupyter notebook\n```\n\nThen edit the files in `voila-gridstack/static` and reload the page to see the changes.\n\n### JupyterLab Extension\n\n![voila-gridstack](assets/jupyterlab-gridstack.gif)\n\nNote: You will need NodeJS to build the extension package.\n\nThe `jlpm` command is JupyterLab's pinned version of\n[yarn](https://yarnpkg.com/) that is installed with JupyterLab. You may use\n`yarn` or `npm` in lieu of `jlpm` below.\n\n```bash\n# activate the environment\nconda activate voila-gridstack\n\n# install JupyterLab\nmamba install -c conda-forge jupyterlab\n\n# Install package in development mode\npip install -e .\n\n# Link your development version of the extension with JupyterLab\njupyter labextension develop . --overwrite\n\n# Rebuild extension TypeScript source after making changes\njlpm run build\n```\n\nYou 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.\n\n```bash\n# Watch the source directory in one terminal, automatically rebuilding when needed\njlpm run watch\n# Run JupyterLab in another terminal\njupyter lab\n```\n\n## License\n\nWe use a shared copyright model that enables all contributors to maintain the\ncopyright on their contributions.\n\nThis software is licensed under the BSD-3-Clause license. See the\n[LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoila-dashboards%2Fvoila-gridstack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvoila-dashboards%2Fvoila-gridstack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoila-dashboards%2Fvoila-gridstack/lists"}