{"id":18332247,"url":"https://github.com/googlecolab/colab-cdn-widget-manager","last_synced_at":"2025-04-06T03:33:38.187Z","repository":{"id":44152359,"uuid":"392845066","full_name":"googlecolab/colab-cdn-widget-manager","owner":"googlecolab","description":null,"archived":false,"fork":false,"pushed_at":"2025-02-18T00:44:24.000Z","size":1039,"stargazers_count":21,"open_issues_count":33,"forks_count":7,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-03-21T16:21:20.939Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/googlecolab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-04T23:03:38.000Z","updated_at":"2025-01-09T23:55:14.000Z","dependencies_parsed_at":"2023-01-28T14:45:38.204Z","dependency_job_id":null,"html_url":"https://github.com/googlecolab/colab-cdn-widget-manager","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlecolab%2Fcolab-cdn-widget-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlecolab%2Fcolab-cdn-widget-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlecolab%2Fcolab-cdn-widget-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlecolab%2Fcolab-cdn-widget-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/googlecolab","download_url":"https://codeload.github.com/googlecolab/colab-cdn-widget-manager/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247430838,"owners_count":20937873,"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":[],"created_at":"2024-11-05T19:38:23.876Z","updated_at":"2025-04-06T03:33:37.354Z","avatar_url":"https://github.com/googlecolab.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Custom Widget Manager implementation for Google Colab\n\nA proposal for Google Colaboratory to support a pluggable Jupyter Widget Manager\nimplementation to allow users to arbitrary widgets from arbitrary sources.\n\nThis project includes an implementation of a widget manager which loads widgets from a\nCDN.\n\n## Pluggable Widget Manager API\n\nColab frontend should expose an API for users to specify what widget manager\nthey would like to use.\n\nThe API should be as minimal as possible and avoid being tied to specific Jupyter Widgers versions. The notebook author should have the flexibility to determine the Jupyter Widgets version they would like to use. Later viewers of the notebook will see the widgets rendered with the same Jupyter Widgets version as the original author.\n\n#### API Proposal\n\nExpose a global method for registering a custom widget manager:\n\n```typescript;\ngoogle.colab.widgets.installCustomManager(url: string, args: any): void\n```\n\nThis API can be invoked at any point by Javascript outputs to change the widget manager for all subsequent outputs. This API can be wrapped in a Python API to make it easier to invoke from a kernel.\n\nThe URL must resolve to an ES6 module exporting the WidgetManagerModule interface:\n\n```typescript\ninterface WidgetManagerModule {\n  createWidgetManager(\n    state: WidgetEnvironment,\n    arguments?: unknown\n  ): IWidgetManager;\n}\n\ninterface IWidgetManager {\n  render(modelId: string, container: Element): Promise\u003cvoid\u003e;\n}\n```\n\nAfter a custom widget manager has been registered and a Jupyter Widget is being rendered to the outputs then the custom widget manager module will be loaded, the widget manager will be created and all widgets within that window will be created with that manager.\n\nOnce a custom widget manager has been registered then a manager will be instantiated when any widgets need to be rendered in the notebook.\n\nThe full API details are included in Colab's [outputframe declaration file](https://github.com/googlecolab/colabtools/blob/07b38dfa2869780ff2128cf7c1ad4414d1b4109c/packages/outputframe/lib/index.d.ts#L154-L210).\n\n# Development\n\nInstall and run the development server:\n\n```shell\nnpm install\nnpm run server\n```\n\nThen from a notebook running in Google Colab:\n\n```python\nfrom IPython.display import Javascript\n\n# Specify the custom widget manager running locally\nfrom google.colab.output import _widgets\n_widgets._install_custom_widget_manager('http://127.0.0.1:9897/manager.dev.js')\n\nimport ipywidgets as widgets\n\nwidget = widgets.IntSlider(value=10)\ndisplay(widget)\n```\n\nThe development server will automatically rebuild the sources- no need to restart the server after local modifications. A full example is https://github.com/googlecolab/colab-cdn-widget-manager/blob/main/notebooks/ipympl.ipynb.\n\nTo run all tests:\n\n```\nnpm run tests\n```\n\nAlternatively functional tests can be executed and debugged with:\n\n```\nnpm run test:karma:dev\n```\n\nThen navigate to http://localhost:9876/.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglecolab%2Fcolab-cdn-widget-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgooglecolab%2Fcolab-cdn-widget-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglecolab%2Fcolab-cdn-widget-manager/lists"}