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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Add support for clickable links #712

Closed
jjbrosnan opened this issue Aug 8, 2022 · 13 comments · Fixed by #1088 or deephaven/deephaven-core#3524
Closed

Add support for clickable links #712

jjbrosnan opened this issue Aug 8, 2022 · 13 comments · Fixed by #1088 or deephaven/deephaven-core#3524
Assignees
@emilyhuxng
Labels
enhancement New feature or request
Milestone
Backlog

Comments

@jjbrosnan
Copy link

As both a user and stakeholder, I'd be very interested in a new Markdown column type that can hold clickable links. Basically, the column could show text like Clink this link! or News article headline!. A user could hover their mouse over a cell, which would show the URL to which the link leads. If the user clicks on a cell, it opens a new tab/window/whatever in the browser to take them there.
@jjbrosnan jjbrosnan added feature request triage Issue requires triage enhancement New feature or request labels Aug 8, 2022
@dsmmcken dsmmcken transferred this issue from deephaven/deephaven-core Aug 8, 2022
@devinrsmith
Copy link
Member

I'm not sure we want a new column "type" - do we have a way to attach metadata to a column? @nbauernfeind @rcaudy?

Is this feature specifically targeted at supporting click-able links? Or, do we image a cell could contain a whole markdown document that could be opened and rendered?

@jjbrosnan
Copy link
Author

The original intent of this PR is to support clickable links to the web. However, if possible, the second option would be pretty awesome too. That should likely be covered in a separate ticket.

@devinrsmith
Copy link
Member

Some sort of metadata that allows client to know "this content is a URL" seems more appropriate than "markdown". Unless the intent is to make it "pretty" and support a "markdown" link syntax: [pretty text](https://example.com).

@vbabich vbabich added this to the Backlog milestone Aug 10, 2022
@vbabich vbabich removed the triage Issue requires triage label Aug 10, 2022
@dsmmcken dsmmcken changed the title Add support for markdown columns Add support for clickable links Jan 20, 2023
@dsmmcken
Copy link
Contributor

Not full markdown, but just [pretty text](https://example.com) might be nice for being able to have links that are labeled with text and not just an ugly url. Something to decide is the behaviour of the click which normally selects the cell. Particularly for cells that are part of an input table.

Google sheets approach is a zero-delay tooltip that displays this lovely popover. It fetches the page title, favicon and meta description for the link as well which is extra nice (would require a server side micro-service to do so). The link in the cell is not directly clickable as link, it still selects the cell for editing. The tooltip comes up immediately on cell hover, and the links it it are clickable. Links are auto-detected and can support arbitrary number of links per cell.
image

In contrast, excel only allows one link per cell, and the whole cell text will link to the first url given in a cell. Hovering the URL changes cursor, and clicking follows the link. The cell is still selectable if there is extra space to the right of the url in the cell and a few pixels at the top of the cell are also selectable. Additionally, you get this tooltip (with normal tooltip delay), stating "Click once to follow, click and hold to select cell" on hover. Ctrl+click/shift+click operations act as selections and not follow.
image

@dsmmcken
Copy link
Contributor

  • Direction: Excel style style for selection and clicking, tooltip with a similar text as excel. Test on both regular and input tables, where cells are selected individually, and user can enter a URL into a cell.
  • Expect the we can detect multiple links, and hit box detection based on which one you click.
  • Link detection should be automatic, and non-render blocking (maybe async if necessary or maybe just on the truncated value).
  • Style link as $primary + underline, with cursor: pointer on cell hover.
  • Links open in a new tab.
  • Soft requirement: expectation that it would work for multiple protocols, maybe a deephaven:// url could be useful for something? so don't detect just http(s)://

@emilyhuxng emilyhuxng self-assigned this Feb 8, 2023
@emilyhuxng
Copy link
Contributor

@dsmmcken What should be highlighted if a link is cut off? For example, 'github.co...'

@dsmmcken
Copy link
Contributor

dsmmcken commented Feb 9, 2023 •
edited
Loading

highlighted? Do you mean underlined? Following browser behaviour for underlining when there are ellipsis, the underline doesn't extend under the dots but does take the link color.

@emilyhuxng
Copy link
Contributor

emilyhuxng commented Feb 14, 2023 •
edited
Loading

@dsmmcken For input tables, if a cell contains a link, should double click still edit the cell?

Should the tooltip show the full link or the truncated link?

@dsmmcken
Copy link
Contributor

if a cell contains a link, should double click still edit the cell?

Good question. The first click would open a link in a new tab and would switch to that tab, blurring the original cell and exiting edit mode right? So that wouldn't work would it? Can you still detect the double click and cancel navigating to the link in that case?

Excel opens tabs into the background and also enters edit mode on a double click on a cell with a link, which we can really do because following the link browser steals focus into a new tab.

@dsmmcken
Copy link
Contributor

Should the tooltip show the full link or the truncated link?

Full

@emilyhuxng
Copy link
Contributor

emilyhuxng commented Feb 14, 2023 •
edited
Loading

Yes, the first click opens the link. It might be possible if we add a tiny delay before processing the first mousedown event?

Excel opens tabs into the background and also enters edit mode on a double click on a cell with a link, which we can really do because following the link browser steals focus into a new tab.

Right, I looked it up and there isn't an elegant way to keep the focus on the current tab.

@dsmmcken
Copy link
Contributor

I am not a fan of the delay approach.

Maybe we make the click hold behaviour enter select + enter edit mode if it's an input table?

@emilyhuxng
Copy link
Contributor

Alright, I'll try that.

@emilyhuxng emilyhuxng mentioned this issue Feb 15, 2023
Merged
@emilyhuxng emilyhuxng mentioned this issue Mar 3, 2023
Closed
emilyhuxng added a commit that referenced this issue Mar 9, 2023
@emilyhuxng @mofojed
feat: Add support for clickable links (#1088)
f7f918e 
Closes #712 

Installed LinkifyJs for link detection. Refer to original issue for
details.

```from deephaven import input_table
from deephaven import dtypes as dht, input_table

my_col_defs = {
    "Integers": dht.int32,
    "Doubles": dht.double,
    "Strings": dht.string,
    "Strings2": dht.string,
}

result = input_table(col_defs=my_col_defs)
```

Run this snippet to create an empty input table and enter links into the
cells.

Bundle size is 314.21 KB on the `main` branch and 322.4 KB on this
branch.

---------

Co-authored-by: Mike Bender <mofojed@users.noreply.github.com>
@mofojed mofojed mentioned this issue Mar 10, 2023
Merged
mofojed pushed a commit to deephaven/deephaven-core that referenced this issue Mar 13, 2023
@github-actions @deephaven-internal
Update web version 0.32.0 (#3524)
660a356 
Release notes https://github.com/deephaven/web-client-ui/releases/tag/v0.32.0

**Features**
- Add support for clickable links (deephaven/web-client-ui#1088) ([f7f918e](deephaven/web-client-ui@f7f918e)), closes deephaven/web-client-ui#712

[create-pull-request] automated change

Co-authored-by: deephaven-internal <deephaven-internal@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@emilyhuxng emilyhuxng

Labels
enhancement New feature or request
Projects
None yet
Milestone
Backlog
6 participants
@dsmmcken @vbabich @mofojed @devinrsmith @emilyhuxng @jjbrosnan