Implement a way to hide track labels #614

Closed
enuggetry opened this Issue Jun 26, 2015 · 10 comments

Comments

Projects
None yet
5 participants
@enuggetry
Contributor

enuggetry commented Jun 26, 2015

The JBrowse UI renders a track’s label in the genome browsing pane on top of its actual features. This may seem innocuous at first, but when browsing track names that are rather long, the label also extends in length, to the point where it may obscure [almost] all track features in the genome browser pane. This is a blocker issue in certain cases, and it has been previously reported on the JBrowse GitHub issue tracker. Currently, this issue remains unresolved.

Submitted by Mary Shimoyama

@enuggetry enuggetry self-assigned this Jun 26, 2015

@enuggetry

This comment has been minimized.

Show comment
Hide comment
@enuggetry

enuggetry Jun 26, 2015

Contributor

I implemented an EYE icon on the toolbar to toggle the track labels.
http://jbrowse.org/code/sandbox-112/?data=sample_data%2Fjson%2Fvolvox&loc=ctgA%3A7493..8218&tracks=DNA%2CTranscript%2Cmalformed_alignments%2CEST&highlight=

Apollo also has a mechanism.
Need to look into how resolve potential overlap of the two mechanisms when Apollo is present.

Contributor

enuggetry commented Jun 26, 2015

I implemented an EYE icon on the toolbar to toggle the track labels.
http://jbrowse.org/code/sandbox-112/?data=sample_data%2Fjson%2Fvolvox&loc=ctgA%3A7493..8218&tracks=DNA%2CTranscript%2Cmalformed_alignments%2CEST&highlight=

Apollo also has a mechanism.
Need to look into how resolve potential overlap of the two mechanisms when Apollo is present.

@cmdcolin

This comment has been minimized.

Show comment
Hide comment
@cmdcolin

cmdcolin Jun 30, 2015

Contributor

I like it

The track labels still re-appear if you scroll around a little bit which was a little weird, but maybe that is intended?

In our code, our "updateLabels" function is sort of like this

updateLabels: function() {
    if(!this._showLabels) {
        query('.track-label').style('visibility','hidden');
    }
    else {
        query('.track-label').style('visibility','visible');
    }
    this.browser.view.updateScroll();
},

We decided to use visibility:hidden instead of display:none because display:none takes the track label out of "flow" and makes the "rolling feature labels" bad

Also, we had to make a change in our draggableHTMLfeatures to support the rolling feature labels without the track labels there (we override updateFeatureLabelPosition here https://github.com/GMOD/Apollo/blob/master/client/apollo/js/View/Track/DraggableHTMLFeatures.js#L1303)

Contributor

cmdcolin commented Jun 30, 2015

I like it

The track labels still re-appear if you scroll around a little bit which was a little weird, but maybe that is intended?

In our code, our "updateLabels" function is sort of like this

updateLabels: function() {
    if(!this._showLabels) {
        query('.track-label').style('visibility','hidden');
    }
    else {
        query('.track-label').style('visibility','visible');
    }
    this.browser.view.updateScroll();
},

We decided to use visibility:hidden instead of display:none because display:none takes the track label out of "flow" and makes the "rolling feature labels" bad

Also, we had to make a change in our draggableHTMLfeatures to support the rolling feature labels without the track labels there (we override updateFeatureLabelPosition here https://github.com/GMOD/Apollo/blob/master/client/apollo/js/View/Track/DraggableHTMLFeatures.js#L1303)

@enuggetry

This comment has been minimized.

Show comment
Hide comment
@enuggetry

enuggetry Jun 30, 2015

Contributor

Yeah, the they reappear when there's any kind of movement or resizing.
This is partly a side effect of the way the original code positions for
those actions. But, I was shooting for the label to stay for 1 second
before rehiding. I thought this could be a reminder that those track
labels/menus were still there. However, the delay code introduced
additional anomalies that were harder to deal with. So, I left it as a
reasonable compromise to what I was trying to achieve. I may try to tweak
it to delay properly. The trick I believe is that while the effect is in
mid-animation, a move has to abort the anim in progress, otherwise, the
anim proceeds after getting repositioned. Then, the menus end up hiding
only half-way.

What remains is how we should integrate with Apollo. When, Apollo is
installed, which version do you want to use?
To trigger, there is a function that you call in browser.js called
showTrackLabels(cmd), where cmd is "show", "hide", "hide-if","toggle".
"hide-if" rehides if it was originally hidden.
Alternatively, Apollo can hide that "eye" button.

I haven't checked in yet.

On Tue, Jun 30, 2015 at 8:10 AM, Colin Diesh notifications@github.com
wrote:

I like it

The track labels still re-appear if you scroll around a little bit which
was a little weird, but maybe that is intended?

In our code, our "updateLabels" function is sort of like this

updateLabels: function() {
if(!this._showLabels) {
query('.track-label').style('visibility','hidden');
}
else {
query('.track-label').style('visibility','visible');
}
this.browser.view.updateScroll();
},

We decided to use visibility:hidden instead of display:none because
display:none takes the track label out of "flow" and makes the "rolling
feature labels" bad

Also, we had to make a change in our draggableHTMLfeatures to support the
rolling feature labels without the track labels there (we override
updateFeatureLabelPosition here
https://github.com/GMOD/Apollo/blob/master/client/apollo/js/View/Track/DraggableHTMLFeatures.js#L1303
)


Reply to this email directly or view it on GitHub
#614 (comment).

Contributor

enuggetry commented Jun 30, 2015

Yeah, the they reappear when there's any kind of movement or resizing.
This is partly a side effect of the way the original code positions for
those actions. But, I was shooting for the label to stay for 1 second
before rehiding. I thought this could be a reminder that those track
labels/menus were still there. However, the delay code introduced
additional anomalies that were harder to deal with. So, I left it as a
reasonable compromise to what I was trying to achieve. I may try to tweak
it to delay properly. The trick I believe is that while the effect is in
mid-animation, a move has to abort the anim in progress, otherwise, the
anim proceeds after getting repositioned. Then, the menus end up hiding
only half-way.

What remains is how we should integrate with Apollo. When, Apollo is
installed, which version do you want to use?
To trigger, there is a function that you call in browser.js called
showTrackLabels(cmd), where cmd is "show", "hide", "hide-if","toggle".
"hide-if" rehides if it was originally hidden.
Alternatively, Apollo can hide that "eye" button.

I haven't checked in yet.

On Tue, Jun 30, 2015 at 8:10 AM, Colin Diesh notifications@github.com
wrote:

I like it

The track labels still re-appear if you scroll around a little bit which
was a little weird, but maybe that is intended?

In our code, our "updateLabels" function is sort of like this

updateLabels: function() {
if(!this._showLabels) {
query('.track-label').style('visibility','hidden');
}
else {
query('.track-label').style('visibility','visible');
}
this.browser.view.updateScroll();
},

We decided to use visibility:hidden instead of display:none because
display:none takes the track label out of "flow" and makes the "rolling
feature labels" bad

Also, we had to make a change in our draggableHTMLfeatures to support the
rolling feature labels without the track labels there (we override
updateFeatureLabelPosition here
https://github.com/GMOD/Apollo/blob/master/client/apollo/js/View/Track/DraggableHTMLFeatures.js#L1303
)


Reply to this email directly or view it on GitHub
#614 (comment).

@enuggetry enuggetry added the MCW label Jun 30, 2015

@cmdcolin

This comment has been minimized.

Show comment
Hide comment
@cmdcolin

cmdcolin Jun 30, 2015

Contributor

We use a github clone of jbrowse checked out with the 1.11.6-release tag in webapollo builds

What remains is how we should integrate with Apollo.

Apollo could just remove our own implementation if it becomes a core jbrowse feature, or just not use it if we are using updated versions of jbrowse. It was only added recently to apollo, and we are glad to see it being added in jbrowse i think

Contributor

cmdcolin commented Jun 30, 2015

We use a github clone of jbrowse checked out with the 1.11.6-release tag in webapollo builds

What remains is how we should integrate with Apollo.

Apollo could just remove our own implementation if it becomes a core jbrowse feature, or just not use it if we are using updated versions of jbrowse. It was only added recently to apollo, and we are glad to see it being added in jbrowse i think

@nathandunn

This comment has been minimized.

Show comment
Hide comment
@nathandunn

nathandunn Jun 30, 2015

Contributor

Also if you look at the ucsc browser .. They do the same thing but with a hide able left hand side column for labels. I think it might be worth thinking about something like that and then adding info drop down that way as well in a similar animated style. Just some ideas. I think what you have is still a nice improvement and agree with what @cmdcolin said.

Contributor

nathandunn commented Jun 30, 2015

Also if you look at the ucsc browser .. They do the same thing but with a hide able left hand side column for labels. I think it might be worth thinking about something like that and then adding info drop down that way as well in a similar animated style. Just some ideas. I think what you have is still a nice improvement and agree with what @cmdcolin said.

enuggetry added a commit that referenced this issue Jul 2, 2015

Address #611
Clarify track search placeholder text
Clarify feature search placeholder text
Add search-info box to display search results
Reorg feature search & ref seq selector

Address #614
Implement hide "eye" button on navbar (toolbar), toggle all track labels on/off
@enuggetry

This comment has been minimized.

Show comment
Hide comment
@enuggetry

enuggetry Jul 2, 2015

Contributor

Introduced "eye" button to hide/show track labels.
screenshot_wed_jul_01_22 07 27

Contributor

enuggetry commented Jul 2, 2015

Introduced "eye" button to hide/show track labels.
screenshot_wed_jul_01_22 07 27

enuggetry added a commit that referenced this issue Jul 2, 2015

Address #614
Implement hide "eye" button on navbar (toolbar), toggle all track labels on/off
@halfwayBraindead

This comment has been minimized.

Show comment
Hide comment
@halfwayBraindead

halfwayBraindead Jul 21, 2015

I like the motivation behind what's been done thus far, but I've still got a nagging concern about this: doesn't the "eye" functionality somewhat defeat the purpose behind having track labels in the first place?

If a user wants to take a screenshot of their current view in JBrowse, say for a journal publication and/or article, then why would they omit track labels from the display? It doesn't seem very practical.

Wouldn't it be better to simply render the track label entirely above the actual track features, as GBrowse does? Is this too difficult to achieve in the JBrowse UI?

Here is an example of track labels completely obscuring track feature glyphs and labels in the JBrowse sandbox.

I like the motivation behind what's been done thus far, but I've still got a nagging concern about this: doesn't the "eye" functionality somewhat defeat the purpose behind having track labels in the first place?

If a user wants to take a screenshot of their current view in JBrowse, say for a journal publication and/or article, then why would they omit track labels from the display? It doesn't seem very practical.

Wouldn't it be better to simply render the track label entirely above the actual track features, as GBrowse does? Is this too difficult to achieve in the JBrowse UI?

Here is an example of track labels completely obscuring track feature glyphs and labels in the JBrowse sandbox.

@enuggetry

This comment has been minimized.

Show comment
Hide comment
@enuggetry

enuggetry Jul 21, 2015

Contributor

It's a good point, @halfwayBraindead. We'd probably have to provide extra horiz spacing between tracks to accommodate.

Contributor

enuggetry commented Jul 21, 2015

It's a good point, @halfwayBraindead. We'd probably have to provide extra horiz spacing between tracks to accommodate.

@monfortm

This comment has been minimized.

Show comment
Hide comment
@monfortm

monfortm Jul 22, 2015

Hi guys,

That's a nice thing here, indeed I also feel sometimes that labels get on
the way of what we want to see.
What about a fixed width label box ending with '...'. In the form or what
exists now, but displaying the full label only when hovering over ?

  • a configuration entry per tracks / per instance that will be like:
    "fixed_label_width" : True/False

About having it not on the data but just above the track, it's not fully
satisfying, since the limited vertical space on a screen is precious for
covisualisation... More configuration ? "label_on_track" : T/F, haha ;)

Cheers,

Matthias
​.​

Hi guys,

That's a nice thing here, indeed I also feel sometimes that labels get on
the way of what we want to see.
What about a fixed width label box ending with '...'. In the form or what
exists now, but displaying the full label only when hovering over ?

  • a configuration entry per tracks / per instance that will be like:
    "fixed_label_width" : True/False

About having it not on the data but just above the track, it's not fully
satisfying, since the limited vertical space on a screen is precious for
covisualisation... More configuration ? "label_on_track" : T/F, haha ;)

Cheers,

Matthias
​.​

@enuggetry

This comment has been minimized.

Show comment
Hide comment
@enuggetry

enuggetry Jul 22, 2015

Contributor

Thank Matthias,
I was thinking along the same lines.
I think we are serving multiple purposes, here. For some who are using the tool for analysis and editing, as with Apollo, the labels sort of get in the way; whereas, others use it for illustrative purposes and need them there all the time. So, making more flexible config options is a good idea.

Contributor

enuggetry commented Jul 22, 2015

Thank Matthias,
I was thinking along the same lines.
I think we are serving multiple purposes, here. For some who are using the tool for analysis and editing, as with Apollo, the labels sort of get in the way; whereas, others use it for illustrative purposes and need them there all the time. So, making more flexible config options is a good idea.

enuggetry added a commit that referenced this issue Sep 2, 2015

HideTrackLabels - refactor into a Jbrowse plugin.
It largely works but this version still has some kinks I need to work out.
Works with JB-1 1.11.6+
Ref Issue #614

enuggetry added a commit that referenced this issue Sep 2, 2015

Remove code specific to the hide track labels button.
This function can now be added using the HideTrackLabels Jbrowse plugin.
Ref Issue #614

@enuggetry enuggetry closed this Dec 2, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment