GMOD / jbrowse-components

Source code for JBrowse 2, a modern React-based genome browser
https://jbrowse.org/jb2
Apache License 2.0
207 stars 62 forks source link

Content cut off with VariantFeatureWidget - maybe a MUI change to scrolling? #4604

Open bbimber opened 1 week ago

bbimber commented 1 week ago

It is possible this is not an actual JBrowse bug, but I'm posting the question in case you encountered it. We have an app that extended LineageGenomeView. It includes a component that extends VariantFeatureWidget to make a customized popup window when the user clicks on a variant, very similar to your code:

https://github.com/GMOD/jbrowse-components/blob/b78531b75e9d2a10ede46c3fcace8749e43412cd/plugins/variants/src/VariantFeatureWidget/VariantFeatureWidget.tsx#L76

As of Jbrowse 2.15.0, we noticed that this popup dialog no longer scrolls properly. It extends below the page, with the content cut off and no way to see it. Apparently there were changes to MUI scrolling behavior that might be relevant: https://mui.com/material-ui/react-dialog/#scrolling-long-content.

Has this come up in your development? It is entirely possible we have something in our code that is the cause, not JBrowse itself.

cmdcolin commented 1 week ago

If I visit https://jbrowse.org/storybook/lgv/main/?path=/story/source-code-for-examples--one-linear-genome-view and open up the "1000genomes" vcf, the resulting dialog seems to be ok

if you have a link to your code i might be able to see if there are any differences

image the dialog in the screenshot properly scrolls

bbimber commented 1 week ago

Thanks for following up. There are many layers of potential reasons our embedded browser could differ, which we will inspect. Knowing it seems specific to us is good to know though. Here is the line where we create the widget. I dont see an obvious difference, but it does seem clear that our dialog (or Paper) expands vertically and does not get a scroll bar. I'll look into why.

https://github.com/LabKey/DiscvrLabKeyModules/blob/20a9f936b0603a357dc0b286713c24705a15d89b/jbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ExtendedVariantWidget/ExtendedVariantWidget.tsx#L410