Responsive resizing #55
Conversation
… encodeURI(JSON.stringify(ds)).
…due to a vertical shift which does not work for small sizes)
# Conflicts: # src/DataLoader.js # src/VariantViewer.js
|
Many thanks, we have been planning on adding this functionality for a while now! I will review your PR in the next few days. |
|
Sure, no problem with re-using the code. |
…can be rewritten by plugin user and then iframe would not be added to the html structure at all.
# Conflicts: # src/DataLoader.js
…t needed which might have caused flickering in Firefox
Category width always taken from artificially created category.
Initialization of data sources so that multiple plugin instances do not share their custom data sources.
…he layout by setting it to all elements)
|
Is there any chance of this still being added? It would be very helpful, even if labels and such get messed up at thinner widths. |
|
I think Xavier is working on a new component-based version of ProtVista which is quite impressive (but maybe not fully functional, yet?). But if you want to stick with this one, I am maintaining this "scaling" branch because I need it for MolArt |
|
@davidhoksza Yeah, I looked into the components, but the all-in-one approach is enticing. I will use your branch then, thanks! |
|
Hi @j-andrews7! Yes, please use @davidhoksza's branch as this is now only in basic maintenance. The new component-based version is not quite ready as we have been busy with other projects but will also include a "all-in-one" version for simplicity (we're currently aiming for the first release in Autumn). |
…s ordinary checkboxes
phantomjs cannot be installed using node 16
I implemented scaling of ProtVista so that it can be used as a responsive component with a varying width (which I needed in one project). In the example.html, one can find how it can be used either with fixed or dynamic width.
All the SVGs now take 100% width of their parent elements and when the component changes its size, scales in the individual components (BasicViewer, CategoryViewer, viewport) change accordingly and update of the position and length of all the elements is triggered.
To have SVGs 100% of the space right of categories names, I enclosed the rows into a div with the display set to table. So category names and tracks are now distinct cells of one row. This enables dynamic resize of the SVGs when the component changes its size.