jupyterlab / jupyterlab_apod Goto Github PK

JupyterLab extension tutorial answer key. Please see the tutorial at https://jupyterlab.readthedocs.io/en/stable/extension/extension_tutorial.html

License: BSD 3-Clause "New" or "Revised" License

TypeScript 59.52% CSS 3.26% JavaScript 13.02% Python 24.19%

jupyterlab

jupyterlab_apod's Introduction

jupyterlab_apod

Show a random NASA Astronomy Picture of the Day in a JupyterLab panel.

Requirements

JupyterLab >= 4.0.0

Install

To install the extension, execute:

pip install jupyterlab_apod

Uninstall

To remove the extension, execute:

pip uninstall jupyterlab_apod

Contributing

Development install

Note: You will need NodeJS to build the extension package.

The jlpm command is JupyterLab's pinned version of yarn that is installed with JupyterLab. You may use yarn or npm in lieu of jlpm below.

# Clone the repo to your local environment
# Change directory to the jupyterlab_apod directory
# 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 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.

# Watch the source directory in one terminal, automatically rebuilding when needed
jlpm watch
# Run JupyterLab in another terminal
jupyter lab

With the watch command running, every saved change will immediately be built locally and available in your running JupyterLab. Refresh JupyterLab to load the change in your browser (you may need to wait several seconds for the extension to be rebuilt).

By default, the jlpm build command generates the source maps for this extension to make it easier to debug using the browser dev tools. To also generate source maps for the JupyterLab core extensions, you can run the following command:

jupyter lab build --minimize=False

Development uninstall

pip uninstall jupyterlab_apod

In development mode, you will also need to remove the symlink created by jupyter labextension develop command. To find its location, you can run jupyter labextension list to figure out where the labextensions folder is located. Then you can remove the symlink named jupyterlab_apod within that folder.

Testing the extension

Frontend tests

This extension is using Jest for JavaScript code testing.

To execute them, execute:

jlpm
jlpm test

Integration tests

This extension uses Playwright for the integration tests (aka user level tests). More precisely, the JupyterLab helper Galata is used to handle testing the extension in JupyterLab.

More information are provided within the ui-tests README.

Packaging the extension

See RELEASE

jupyterlab_apod's People

Contributors

Stargazers

Watchers

Forkers

nscozzaro hubbucket-team blink1073 yhchang1120 tk-21st gmolabs datalayer-externals jtpio wfschmitt global-localhost global19 global19-atlassian-net isabella232 hercules261188 stjordanis william3johnson inferno-inc ericsnekbytes adamxy

jupyterlab_apod's Issues

Jupyterlab 2.0

Hi, is this extension compatible with Jupyterlab 2.0? Thanks

Widget Typescript errors

Description

When attempting to build the project, I am receiving Typescript errors.
I was following along with the tutorial, and the first time a Widget was introduced, it reported errors.
I decided to try and copy the final version from the repo and received the same error about the updated APODWidget

I pasted my error output in the CLI output below

Reproduce

Follow the steps from here: https://jupyterlab.readthedocs.io/en/stable/extension/extension_tutorial.html#extension-tutorial
Add the widget code to the activate section

Expected behavior

Context

Operating System and version: Ubunut 20.04 (wsl2)
Browser and version: Chrome
JupyterLab version: 3.61

Troubleshoot Output

Paste the output from running `jupyter troubleshoot` from the command line here.
You may want to sanitize the paths in the output.

Command Line Output

jlpm run build
yarn run v1.21.1
$ jlpm build:lib && jlpm build:labextension:dev
$ tsc --sourceMap
src/index.ts:111:30 - error TS2344: Type 'APODWidget' does not satisfy the constraint 'Widget'.
  Types of property 'title' are incompatible.
    Property 'iconRenderer' is missing in type 'import("/home/cw00dw0rd/development/jupyter-tutorial/jupyterlab_apod/node_modules/@lumino/widgets/types/title").Title' but required in type 'import("/home/cw00dw0rd/development/jupyter-tutorial/jupyterlab_apod/node_modules/@jupyterlab/apputils/node_modules/@lumino/widgets/types/title").Title'.
111   let widget: MainAreaWidget;

~~~~~~~~~~
node_modules/@jupyterlab/apputils/node_modules/@lumino/widgets/types/title.d.ts:100:5

100     iconRenderer: VirtualElement.IRenderer | undefined;

~~~~~~~~~~~~

'iconRenderer' is declared here.
src/index.ts:122:9 - error TS2322: Type 'MainAreaWidget' is not assignable to type 'MainAreaWidget'.

Type 'Widget' is missing the following properties from type 'APODWidget': img, summary, randomDate
122         widget = new MainAreaWidget({ content });

~~~~~~
src/index.ts:122:39 - error TS2322: Type 'APODWidget' is not assignable to type 'Widget'.
122         widget = new MainAreaWidget({ content });

~~~~~~~
node_modules/@jupyterlab/apputils/lib/mainareawidget.d.ts:100:9

100         content: T;

~~~~~~~

The expected type comes from property 'content' which is declared here on type 'IOptions'
src/index.ts:146:50 - error TS2344: Type 'APODWidget' does not satisfy the constraint 'Widget'.
146   let tracker = new WidgetTracker<MainAreaWidget>({

~~~~~~~~~~
Found 4 errors.
error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Browser Output

Paste the output from your browser Javascript console here, if applicable.

Open again after closing causes error

restorablepool.js:107 Uncaught (in promise) Error: A disposed object cannot be added.
at RestorablePool.add (restorablepool.js:107)
at WidgetTracker.add (widgettracker.js:111)
at execute (index.js:80)
at CommandRegistry.push.5TpB.CommandRegistry.execute (index.js:351)
at CommandPalette.push.eIPM.CommandPalette._execute (commandpalette.js:417)
at CommandPalette.push.eIPM.CommandPalette._evtClick (commandpalette.js:330)
at CommandPalette.push.eIPM.CommandPalette.handleEvent (commandpalette.js:211)

Extension builds and installs using conda but not elsewhere

I followed the tutorial to build a small test extension, which appears to build correctly and installs into a Jupyterlab environment in a conda env. Trying to install the same wheel in a JuptyerLab environment installed from pypi running inside a docker container does not work correctly.

Any ideas as to why this might be the case? (I am not a developer..)

Integrate this tutorial with https://github.com/jupyterlab/extension-examples

Would it make sense to move this tutorial to the extension examples repository?

I see a few advantages:

Common maintenance on all extension examples
Point all interested users to the extension examples to go beyond this tutorial
As the examples are managed using lerna, this tutorial can still be published in its own package.

Disadvantage:

Hard to keep commits that follows tutorial steps

extension does not show up

Hi,
I followed this instruction: https://jupyterlab.readthedocs.io/en/stable/developer/extension_tutorial.html
The extension has been installed. However, when I type "Astronomy" according to this image:
https://jupyterlab.readthedocs.io/en/stable/_images/extension_tutorial_complete.png,
the extension does not show up in the tutorial. So, how do I run this extension?

Make ILayoutRestorer optional

Following jupyterlab/jupyterlab#11677, this repo needs to be updated.

This repository needs to be updated to reflect the latest cookiecutter status

To reduce maintenance burden this merge https://github.com/jupyterlab/theme-cookiecutter

+1, since the theme cookiecutter can easily get out of sync and doesn't necessarily benefit from the improvements made to the ts cookiecutter here (for example CI and releaser config).

Some follow-up steps that come to mind:

Archive: https://github.com/jupyterlab/theme-cookiecutter
Update the extension tutorial
Update the apod repo

Originally posted by @jtpio in jupyterlab/extension-cookiecutter-ts#196 (comment)

Failed to fetch package metadata for 'jupyterlab_apod': <HTTPError 404: 'Not Found'>

I'm using JupyterLab 1.0.1 and at this point in the tutorial I'm able to open the tab once and it correctly shows the Astronomy Picture tab,

But if I close it and open again, it opens a blank tab:

In the terminal console it shows an error "Failed to fetch package metadata for 'jupyterlab_apod': <HTTPError 404: 'Not Found'> "
Please let me know how to possibly fix this error.