search

hski-github / spotfire-sankey-diagram

Spotfire mods visualization for Sankey diagram
MIT License
4 stars 4 forks source link

Highlight with mouseover #12

Closed arnaudspotfire closed 3 years ago

arnaudspotfire commented 3 years ago

When mouseovering a flow or a categorie in axis, it would be nice if the flow could be highlighted with a border like we currently have in other Spotfire visualization.

Screen Shot 2021-05-21 at 14 58 56

hski-github commented 3 years ago

The approach using Reusing shapes: Tranforms from https://css-tricks.com/how-to-add-a-double-border-to-svg-shapes/ looks interesting. Or simply add another rect or path with bigger dimension and hide it by default and show it on mouseover event.

hski-github commented 3 years ago

@arnaudtibco @mrylande Is there some support from the mods framework to trigger such event? Simple JavaScript onmouseover event would be too quick, because like for tooltip some delay and waiting over the object should happen before it get highlighted. Should be maybe kind of triggered by the tooltip? And as a minor topic, do you know how to get or what is the default color for the line for highlighting?

arnaudspotfire commented 3 years ago

Hello @hski-github ! I do not know. I will ask the team. I also belive these types questions relates to the Mods API and could be asked directly from the Mods GitHub repo (https://github.com/TIBCOSoftware/spotfire-mods).

arnaudspotfire commented 3 years ago

Hello ! It is controlled by the theme. Tested a bit and seems to be set by the font color defined in 'Visualization general’.

Best regards, Arnaud

hski-github commented 3 years ago

https://stackoverflow.com/questions/21949343/show-a-div-only-when-user-hover-an-element-for-couple-seconds

https://css-tricks.com/almanac/properties/t/transition-delay/

hski-github commented 3 years ago

@arnaudtibco I have added outline on mouseover in pull request #23 resp. branch 'outline'. Would be great if you could have a look and test it.

arnaudspotfire commented 3 years ago

Hello ! I just tested it and I think it looks good. The outline looks perfect on non-rectangular bars but a bit blurry on rectangular bars. But I think this is acceptable from a UX perspective.

Screen Shot 2021-10-21 at 09 24 15 Screen Shot 2021-10-21 at 09 24 27

hski-github commented 3 years ago

Thank you for testing! 😊 I am taking font.color from the Mods API styling information and use 1 px stroke width and 1 px padding for the outline. This is just guessing. Could be useful to have more layout guidance from TIBCO about such things. And more detailed styling information in the Mods API.