Permalink anchor UI

[wking]

The “navigate by clicking on nodes” idea has come up a few times (#2, #17, #30), but the current implementation is based on dragging the viewBox around. As I mentioned in #17, cards are a bit crowded to make the background that click-to-center target. #30 proposed using the issue title, but I don't think that's particularly intuitive. Stealing a bit of space by following the dep-indicator pattern with an explicit link symbol gives us something like this:

That starts to look a bit warty, but it is fairly clear. You could also inline the link:

but having it float inside the card makes it feel like issue information, and less like part of the graph UI.

I'm leaning towards the warty lower-left circle, but would be happy to switch to something else if someone has a cleaner idea :).

[jbenet]

• in the cases i've shown depviz to others, people have always wanted to navigate to re-center on a card by clicking on it (background or the title. they actually expect the vicinity, and anywhere on the card to work -- except obvious other things: a user picture, comments' number, etc)
• I (and others) would expect the "link circle" icon to copy a link to depviz centered on that issue to clipboard (but not recenter)
• I (and others) would expect the github icon to link me to the github.com website version of this task. (not https://github.com)

I strongly think we should:

• make the whole card a link, to #<depviz-uri> (i.e. to navigate to that one)
  • we can visually signal this by making the card grow a little (border increase by 1-2px?), or be displaced a little (few pixels up, or something). something active that invites the user to click through.
• make the github icon link to the issue on github
• the title could be either github or recenter. i can see cases for both.
• add the link icon which should appear on-hover only, as a way to copy that task's depviz link to clipboard. (but not to navigate/recenter)
• in all cases, we should tolerate clicking on a small margin around the object. (Eg small author pictures)
• and can use tooltips to explain where links go (either just alts, or proper bootstrap tooltips.

[jbenet]

(for those with email: updated comment above)

[victorb]

the title could be either github or recenter. i can see cases for both.

Since there is a dedicated github icon, that would lead to the issue on github, I think that would be confusing. Better to have it recenter the card, like most of the cards interaction area would be doing.

Otherwise, all those changes would be great for Depviz.

For reference, this is how Waffle does it:

1. Clickable area that opens up the issue in Waffle
2. Clickable area that opens up the issue in Github

Note that the entire card is not clickable, just those three areas. I think that's a mistake.

[Kubuxu]

Entire cards are draggable which is probably why they are not clickable.

[wking]

On Sun, Dec 04, 2016 at 09:29:05PM -0800, Juan Benet wrote: - I (and others) would expect the "link circle" icon to copy a link to depviz centered on that issue to clipboard (but not recenter)

Is there an alternative symbol you'd prefer? Maybe ⚓ (U+2693 ANCHOR)? 📌 (U+1F4CC PUSHPIN)? # (U+0023 NUMBER SIGN)? Or is the only option for “center on this card and update the window location” the card background? “Hover” is less accessible on touch UIs, so I'd rather not have too much implicit behavior like “the whole card does …”. But we can always document it on the landing page if we do need to make the whole card do something.

[victorb]

@Kubuxu

Entire cards are draggable which is probably why they are not clickable.

No, that would be two different actions, look at how Trello handles having both without problems for example.

Is there an alternative symbol you'd prefer? Maybe ⚓ (U+2693 ANCHOR)? 📌 (U+1F4CC PUSHPIN)? # (U+0023 NUMBER SIGN)?

For copy, there is a establish icon, the holy pasteboard icon, emoji: 📋 unicode: 📋 (U+1F4CB) but would be better to move into proper icons rather than unicode symbols actually. For example: http://www.flaticon.com/search?word=copy

But we can always document it on the landing page if we do need to make the whole card do something

In general, I think we should have the idea that if something becomes so complex without it's actually being real complex (think rocket science), we should make the features and actions easy enough to be self-describing.

[jbenet]

In general, I think we should have the idea that if something becomes so complex without it's actually being real complex (think rocket science), we should make the features and actions easy enough to be self-describing.

agreed.

though i think clicking/touching through on the card is super obvious. it's the first thing people try.