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

epiviz-navigation: Hover state not correctly maintained when navigation changes #16

Open
daattali opened this issue Feb 10, 2021 · 2 comments
Open

epiviz-navigation: Hover state not correctly maintained when navigation changes #16

daattali opened this issue Feb 10, 2021 · 2 comments

Comments

@daattali
Copy link
Contributor

When a hover state is induced on an epiviz-navigation element, and then the user changes the navigation eg. by pressing the left/right buttons or the zoom buttons, the hover remains in the same location on the chart even though the chart moved.

Reproducible example:

<html>

<script src="http://ghcdn.rawgit.org/epiviz/epiviz-chart/master/cdn/jquery/dist/jquery.js"></script>
<script src="http://ghcdn.rawgit.org/epiviz/epiviz-chart/master/cdn/jquery-ui/jquery-ui.js"></script>
<script src="http://ghcdn.rawgit.org/epiviz/epiviz-chart/master/cdn/renderingQueues/renderingQueue.js"></script>

<script src="http://ghcdn.rawgit.org/epiviz/epiviz-chart/master/cdn/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://ghcdn.rawgit.org/epiviz/epiviz-chart/master/cdn/epiviz-components.html">

<button id="clickme">Do hover</button>

<epiviz-data-source provider-type="epiviz.data.WebServerDataProvider" provider-id="umd" provider-url="https://epiviz-dev.cbcb.umd.edu/api/"></epiviz-data-source>

<epiviz-navigation chr="chr6" start=40076201 end=45076201 no-logo>
    <epiviz-genes-track id="test" slot="charts" dim-s='["genes"]'></epiviz-genes-track>
</epiviz-navigation>

<script>
document.getElementById('clickme').addEventListener('click', () => {
chart = document.querySelector("epiviz-navigation")
chart.dispatchEvent(
    new CustomEvent("hover", {
        detail: { 
            data: new epiviz.ui.charts.ChartObject("", 41000000, 42000000, undefined, undefined, undefined, undefined, undefined, "chr6")
        }
   })
);
});
</script>

</html>

Initially the hover is correctly shown on 4.1M-4.2M

image

But if I move, the chart updates without the hover area updating

image
@jkanche
Copy link
Member

jkanche commented Feb 10, 2021

thanks for finding this. hover is not meant to be a permanent highlight over the tracks, so it doesn't update when the track region changes.

the solution is to unhover and hover the region again.

@jkanche
Copy link
Member

jkanche commented Feb 10, 2021

I'll add an interface to highlight regions, so its tracked and responds to changes in navigation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jkanche @daattali