Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Celltags in core #7407

Merged
merged 21 commits into from Dec 12, 2019
Merged

Celltags in core #7407

merged 21 commits into from Dec 12, 2019

Conversation

markellekelly
Copy link
Member

@markellekelly markellekelly commented Oct 24, 2019

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

image

Backwards-incompatible changes

None

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

@jupyterlab-dev-mode
Copy link

@jupyterlab-dev-mode jupyterlab-dev-mode bot commented Oct 24, 2019

Thanks for making a pull request to JupyterLab!

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

@choldgraf
Copy link
Contributor

@choldgraf choldgraf commented Oct 24, 2019

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
Copy link
Member

@Zsailer Zsailer commented Oct 24, 2019

@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
Copy link
Contributor

@choldgraf choldgraf commented Oct 24, 2019

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
Copy link
Member

@vidartf vidartf commented Oct 31, 2019

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
Copy link
Member

@vidartf vidartf commented Oct 31, 2019

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
Copy link
Contributor

@choldgraf choldgraf commented Oct 31, 2019

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
Copy link
Member

@telamonian telamonian commented Nov 3, 2019

@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:
      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
Copy link
Member

@telamonian telamonian commented Nov 3, 2019

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:

/* 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
Copy link
Member Author

@markellekelly markellekelly commented Nov 4, 2019

@telamonian thanks!! should be fixed now

packages/celltags/package.json Outdated Show resolved Hide resolved
@markellekelly markellekelly changed the title [WIP] Celltags in core Celltags in core Dec 3, 2019
@markellekelly
Copy link
Member Author

@markellekelly markellekelly commented Dec 3, 2019

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
Copy link
Member

@Zsailer Zsailer commented Dec 5, 2019

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
Copy link
Member

@Zsailer Zsailer commented Dec 5, 2019

@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
Copy link
Member

@Zsailer Zsailer commented Dec 6, 2019

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鈥攐ne for each word.

@Zsailer Zsailer self-requested a review Dec 6, 2019
@Zsailer Zsailer added this to the 2.0 milestone Dec 6, 2019
@markellekelly
Copy link
Member Author

@markellekelly markellekelly commented Dec 6, 2019

@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
Copy link
Member

@Zsailer Zsailer commented Dec 7, 2019

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

Copy link
Member

@blink1073 blink1073 left a comment

Thanks so much @markellekelly!

@blink1073 blink1073 merged commit 0d23a53 into jupyterlab:master Dec 12, 2019
10 checks passed
@choldgraf
Copy link
Contributor

@choldgraf choldgraf commented Dec 12, 2019

Yessss this is very exciting!

@telamonian
Copy link
Member

@telamonian telamonian commented Dec 12, 2019

@markellekelly Nice work!

@lock lock bot added the status:resolved-locked label Jan 12, 2020
@lock lock bot locked as resolved and limited conversation to collaborators Jan 12, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement status:resolved-locked
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

7 participants