Celltags in core

[markellekelly]

Adds celltags to core JupyterLab. 🎉

References

Addresses #6952 and jupyterlab/jupyterlab-celltags#179.

Code changes

Creates celltags and celltags-extension packages.

User-facing changes

Adds cell tag area to the notebook tools panel.
Users can:

• Add tags to individual cells
• Remove tags from individual cells
• View tags in active cell
• View tags in notebook

Backwards-incompatible changes

None

Pinging @vidartf, @telamonian, @choldgraf, @isabela-pf for review and testing.

[jupyterlab-dev-mode]

Thanks for making a pull request to JupyterLab!

To try out this branch on binder, follow this link:

[choldgraf]

I think this is a great idea! I'd love to have tags work "out of the box" for jupyter book users.

Is it a copy-over from the celltags repo, or a re-implementation?

[Zsailer]

@choldgraf this is a reimplementation.

I'll let @markellekelly provide more details. She and @isabela-pf did some user testing on the old jupyterlab/jupyterlab-celltags and found the old UI needed some simplifying. While exploring a new UI/UX, @markellekelly also took this opportunity to simplify the extension's code/logic. I think this refactoring will help with future maintenance :)

[choldgraf]

I am all for a re-implementation :-)

I had a few suggestions, these are now here: #7449

here's a good place to iterate on issues / feedback / etc if this gets into core? The jupyterlab/jupyterlab repo?

[vidartf]

In the old notebook tag system, you'd see a little word for each tag within the cell header, which made it easy to quickly skim them and see what tags were where.

FYI: That is only if you've selected the tags cell headers.

Where's a good place to iterate on issues / feedback / etc if this gets into core? The jupyterlab/jupyterlab repo?

This will be the place for working on this (monorepo, yay). You seem to indicate your feature requests should happen after this PR, which I wholeheartedly agree with. 👍

[vidartf]

PS: Doing a quick scan of the code, it generally looks nice an clean 👍 One task that should ideally be done before merging is to add docstrings to all the public (and protected?) methods and functions.

[choldgraf]

Thanks @vidartf for the clarification - and yep both of those are future feature suggestions, shouldn't block on this PR. I'll spin them off into a separate issue.

Edit: here's the issue: #7449

[telamonian]

@markellekelly

Kudos on adding dark mode styling. However, c6621b5 does not represent the right approach to dark mode theming, for the icons or otherwise. The commit should be reverted.

In jlab core, icons need to be added such that they show up in the DOM as svg nodes, not as CSS background images. This allows us to use CSS variables to directly change the styling of an icon along with the theme. Here's how you do that:

• Move your "check" icon over to ui-components/style/icons/toolbar/check.svg
  • just move the light mode version of the icon. Delete the dark mode version
  • don't include the icon size in the name
  • there's already an ui-components/style/icons/toolbar/add.svg, so you can just delete your "add" icon
• Open check.svg in a text editor and add class="jp-icon3" to it's inner <path .../>.
  • there's lots of examples of svgs appropriately annotated with class in ui-components
• In your actual code (eg in the buildTag functions), import defaultIconRegistry from ui-components and create your icons using the defaultIconRegistry.icon method
  • here's an example use:
    

    jupyterlab/packages/apputils-extension/src/index.ts

    Lines 168 to 173 in 172e664

    	defaultIconRegistry.icon({
    	name: 'jupyter-favicon',
    	container: logo,
    	center: true,
    	kind: 'splash'
    	});

  • given that your icon file is named check.svg, the name argument for .icon should just be 'check'
  • center and kind are optional arguments that control the resulting icon's style. For your case, you should probably not use these. Instead, .icon is able to take any standard CSS property as an argument, so you can style your icon that way
    • alternatively, you can look at ui-components/src/style/icon.ts for the valid values of kind, and possibly set up your own in that same file (this uses the typestyle package to set CSS from a .ts file)

Assuming everything is set up correctly, your icons will get loaded in as <svg .../> elements that will, due to the class="jp-icon3" annotation (you can see the related CSS selector here), change color automatically whenever the theme changes from light-to-dark/dark-to-light.

[telamonian]

For general non-icon light mode/dark mode styling, importing/requiring the theme manager is also the wrong approach. Instead, you can just prefix the selector of any light mode specific CSS with

[data-jp-theme-light='true']

and prefix the selector of any dark mode specific CSS with

[data-jp-theme-light='false']

Here's an existing example of this in jlab core:

jupyterlab/packages/rendermime/style/base.css

Lines 420 to 426 in 172e664

	/* Change color behind transparent images if they need it... */
	[data-jp-theme-light='false'] .jp-RenderedImage img.jp-needs-light-background {
	background-color: var(--jp-inverse-layout-color1);
	}
	[data-jp-theme-light='true'] .jp-RenderedImage img.jp-needs-dark-background {
	background-color: var(--jp-inverse-layout-color1);
	}

[markellekelly]

@telamonian thanks!! should be fixed now

[markellekelly]

Note: due to onActiveCellMetadataChanged not detecting changes within the 'tags' list (only changes in whether it exists), the separate celltags extension and in-panel cell metadata editor do not always update to reflect changes in tags immediately.

[Zsailer]

Tested out this extension today.

I'm seeing a couple issues:

1. When creating a tag, I click on the starter tag and the text area for naming the tag doesn't immediately come into focus. I have to double click to start typing. A single click puts me in a weird state where typing doesn't do anything.
2. If I type a long name into a tag, the tag's size increases (as you'd expect). When you backspace multiple times to remove the text, the tag doesn't decrease in size. This leads to a long tag without any text (until new text is added again).

[Zsailer]

@markellekelly, can you check the box on the right side of the PR to allow maintainers to edit your branch directly?

Just kidding, I was being dumb 😆

[Zsailer]

Thanks for making those changes, @markellekelly.

A couple of new issues 😆

1. After naming my tag, the "+" button doesn't add a tag. I have to hit enter.
2. Tags with spaces in the name create multiple tags—one for each word.

[markellekelly]

@Zsailer I changed the "+" button to serve as an alternative to hitting Enter. Separating tags by spaces and commas is currently the intended behavior, but I can change this if people find it confusing or inconvenient.

[Zsailer]

Great, thanks @markellekelly. I'll work with @telamonian to review this in the coming days. Thanks for all your hard work!

[blink1073]

Thanks so much @markellekelly!

[choldgraf]

Yessss this is very exciting!

[telamonian]

@markellekelly Nice work!