search

rcsb / rcsb-saguaro

1D Feature Viewer
MIT License
38 stars 12 forks source link

Responsive viewer size #42

Open luk27official opened 10 months ago

luk27official commented 10 months ago

Hi, we are currently using RCSB 1D viewer in the PrankWeb project (GitHub, live demo). I would like to know if it is possible to add an option to make the 1D component responsive (i.e. the 1D viewer will fit into a fixed-size <div>).

Currently, as far as I know, we have to somehow compute the track sizes based on the actual window size, which kind-of works, but the final design does not look that nice, as the viewer contains some fixed-size components such as labels or the side menu. It would be great to have the opportunity not to do the sizing manually.

Thanks in advance, by the way the library is great.

bioinsilico commented 10 months ago

Hi @luk27official, thank you for using rcsb-saguaro library and feedback. If I understand correctly, you would like the 1D viewer to adapt its width to the parent container automatically and dynamically change when the parent component width changes. Is that correct?

luk27official commented 10 months ago

Hello, exactly, the adaptation is the main thing that would be nice to have implemented, setting the sizes manually is a bit tedious.

The dynamic change would be great as well, I have looked through the documentation and it seems like that maybe could be done via the updateBoardConfig method that would get called on any window resize? (but that is just my wild guess)

Anyway, we would appreciate both of these. Thank you.

cycle20 commented 9 months ago

Hi, I am working on a react component to mitigate this issue (and I see I am not alone with this problem). Probably my solution is a bunch of hacks and workarounds - I am not a front-end expert. You can check it and feel free to use it or review and give feedback. https://gist.github.com/cycle20/25dcd7db9e99462bbb8a93df0eebd8f5

Final usage after registering the custom element:

<tm-saguaro-1d  id="tms1d" elementId="xy" autoResize="true" rowTitleWidth="150" trackWidth="700" url="./zdh15_saguaro_7khm_A.json" side1="Inside" />

(registering: customElements.define("tm-saguaro-1d", TmFv1DElement);)

About autoResize. I need to handle Fenix (Android Firefox) case, when the autoresize does not work at all, since during the component rendering the parent element does not get its final width and it causes a shorter axis track. Only in Fenix; desktop firefox and chrome works well. So I have to disable autoResize on Fenix and provide fix widths. But I hope there will be an official solution soon ;)