Feature request: highlight on double-click and bounding box outline

[dburkhardt]

Hi, I was really excited to see this plugin. I have two questions:

First, is it possible to highlight only when the whole word has been highlighted instead of highlighting the current word wherever the cursor is?

Next, is it possible to change the highlighting from a background color to a light bounding box? E.g.

[jcb91]

Apologies, I've just remembered this issue!

The first (not highlighting words that the cursor is just next to) should already work by setting the relevant option as noted in the readme:

• highlight_selected_word.show_token - Token (regex) to identify word characters, used to determine what to highlight when nothing is selected. If blank, nothing is highlighted when nothing is selected.

(emphasis added)

For the second, yes, I think it would be possible (it should be a case of just setting different css rules), but I haven't made a way to easily configure it yet. You can see the base css which gets applied in this file, but the rules get modified by the javascript in order to make the colours configurable. I'm not sure how much it makes sense to add in terms of extra config options, would a simple outline/fill switch checkbox be sufficient, or do you think it'd need an outline color + fill color for each of the currently-selected and unselected cells?

[dburkhardt]

Thanks for the response! I set the show_token parameter to '', but it still highlights when I click the work. What do you mean by blank? and now it works as you described.

As for the bounding box, I think that the outline one/off would be okay as long as there's some mechanism to detect if the user has a dark theme enabled. Because then a light grey bounding box might not work as well as a white one.

Thanks for the help, this is a really useful tool!

[jcb91]

As for the bounding box, I think that the outline one/off would be okay as long as there's some mechanism to detect if the user has a dark theme enabled. Because then a light grey bounding box might not work as well as a white one.

Ok, in that case, I think the simplest solution is to just use the existing (configurable) highlight colors, but use them for either outlining or background, depending on the new setting. That way the user can decide what color is appropriate for their use without having complicated auto-detection. I've pushed an attempt at this to the outlines branch, in PR #18

Thanks for the help, this is a really useful tool!

You're welcome, glad to hear it's useful :smile: :+1:

[jcb91]

Also, I've just noticed the double-click reference in this issue title, which I haven't addressed, what was the intention there?

[hiiwave]

I guess what he means by double click is equivalent to selecting the whole word. Just as when we'd like to select a whole word, we usually double click on that word instead of moving cursor to select it.

[jcb91]

Ah, I see! So in that case, I guess this is already handled (unless I've misunderstood something!).

[hiiwave]

I just tried the new feature suggested. The outline box displays well, though I found that the color was not the same as what I set for the background color setting. The difference between the following two pictures is only enabling the checkbox: Highlight words using just an outline, rather than the background color Did I misunderstand anything?

[jcb91]

ach, true, I didn't try it with non-default colors! I'd switched the css to set outline rather than border, but failed to alter the js which alters the color accordingly. Should be fixed, now.

[hiiwave]

Looks good to me now. I'm just curious about a tiny technical issue. Why does it work by using outlineColor in main.js but the property name should be outline-color in main.css? Thanks :)

[hiiwave]

I've also tried adding a round corner on the outline, but it seems that there's no elegant way to do this by current css rule. (There is no such thing like border-radius for outline. However using border instead of outline introduces unpleasant horizontal move as you've discovered.) Just FYI. 😄

[jcb91]

I forget where I learned about it, but essentially CSS properties named with hyphens can be set from JavaScript using camelcase names. I think jquery implements something similar with its .data function...

[jcb91]

Haha yeah, I also tried rounded corners! The horizontal movement should be avoidable by using bounding-box (I think that's the name?) to move the border inside the element, but it only works on elements with a defined height. The other alternative would be to try a shadow effect, I think...

[dburkhardt]

Sorry to be MIA, but this looks like exactly what I was asking about. I'm having trouble installing the update manually. I cloned the git 'outlines' branch, ran setup.py install --user and then find a file (not directory) /home/dan/.local/lib/python3.6/site-packages/jupyter_highlight_selected_word-0.0.11-py3.6.egg. But when I try to run jupyter nbextension install --user --py jupyter_highlight_selected_word I get the following error:

Installing /home/dan/.local/lib/python3.6/site-packages/jupyter_highlight_selected_word-0.0.11-py3.6.egg/jupyter_highlight_selected_word/static/highlight_selected_word -> highlight_selected_word
Traceback (most recent call last):
  File "/usr/bin/jupyter-nbextension", line 6, in <module>
    main()
  File "/usr/lib/python3.6/site-packages/jupyter_core/application.py", line 267, in launch_instance
    return super(JupyterApp, cls).launch_instance(argv=argv, **kwargs)
  File "/usr/lib/python3.6/site-packages/traitlets/config/application.py", line 658, in launch_instance
    app.start()
  File "/usr/lib/python3.6/site-packages/notebook/nbextensions.py", line 900, in start
    super(NBExtensionApp, self).start()
  File "/usr/lib/python3.6/site-packages/jupyter_core/application.py", line 256, in start
    self.subapp.start()
  File "/usr/lib/python3.6/site-packages/notebook/nbextensions.py", line 678, in start
    self.install_extensions()
  File "/usr/lib/python3.6/site-packages/notebook/nbextensions.py", line 657, in install_extensions
    **kwargs
  File "/usr/lib/python3.6/site-packages/notebook/nbextensions.py", line 225, in install_nbextension_python
    destination=dest, logger=logger
  File "/usr/lib/python3.6/site-packages/notebook/nbextensions.py", line 199, in install_nbextension
    _maybe_copy(src, full_dest, logger=logger)
  File "/usr/lib/python3.6/site-packages/notebook/nbextensions.py", line 955, in _maybe_copy
    if _should_copy(src, dest, logger=logger):
  File "/usr/lib/python3.6/site-packages/notebook/nbextensions.py", line 931, in _should_copy
    if os.stat(src).st_mtime - os.stat(dest).st_mtime > 1e-6:
NotADirectoryError: [Errno 20] Not a directory: '/home/dan/.local/lib/python3.6/site-packages/jupyter_highlight_selected_word-0.0.11-py3.6.egg/jupyter_highlight_selected_word/static/highlight_selected_word'

suggesting it looks like there's supposed to be a directory created? Sorry I'm new to python development, can either of you please point me in the right direction?

[hiiwave]

Please try the following:

git clone https://github.com/jcb91/jupyter_highlight_selected_word.git
pip install -e jupyter_highlight_selected_word
jupyter nbextension install --py jupyter_highlight_selected_word
jupyter nbextension enable highlight_selected_word/main

[dburkhardt]

Great, thanks @hiiwave! I like this new outline solution. The rounded corners would be my preference, but this is nicer for me than the highlighting everywhere.

[dburkhardt]

I'm finding when multiple 'words' are selected, the bounding box wraps each 'word' in the selection as opposed to a single box around the entire selection. See above. Is this possible to resolve?

[jcb91]

Hmm, nothing is ever simple, eh? Could you post your values of the various settings?

[dburkhardt]

from notebook.json

{
  "load_extensions": {
    "highlight_selected_word/main": true
  },
  "highlight_selected_word": {
    "enable_on_load": true,
    "highlight_color": "#7a9eb1",
    "delay": 500,
    "code_cells_only": true,
    "show_token": "",
    "outlines_only": true,
    "highlight_color_blurred": "#7a9eb1",
  }
}