add dash-ngl #496
add dash-ngl #496
Conversation
IvoLeist
requested review from
alexcjohnson,
Marc-Andre-Rivet and
shammamah-zz
as code owners
tests/dashbio_demos/dash-ngl/app.py
Outdated
| style={"backgroundColor": "#3aaab2", "height": "7vh"}, | ||
| ), | ||
| viewer, | ||
| # if you use dcc.Loading viewer the app goes into a mount loop! |
There was a problem hiding this comment.
Could you please elaborate on this?
There was a problem hiding this comment.
Interesting this bug magically vanished at least on my laptop (Brave)*
I am going to add dcc.Loading in another commit.
*It might still not work on my office machine (Chromium)
going to try that on Monday
There was a problem hiding this comment.
@shammamah unfortunately the bug did not vanish completely the mount loop which leads to crashing the app is gone. However, I realized that my feature: enabling reload from browser when molecule was selected before is not working since the component gets remounted after every new selection.
If you want to test on your own I updated my dash_ngl component
just uncomment dcc.Loading and you will see the component did mount
console.logs appearing after each new selection :-/
|
Please also make sure to run |
|
Just added another commit adressing @shammamah 's concern. Do not wonder regarding the ci failure it is supposed to fail since |
src/lib/components/DashNgl.react.js
Outdated
| loadStructure(stage, filename, chain, color, xOffset) { | ||
| console.log('load from browser'); | ||
| // console.log(filename) | ||
| const stageObj = stage.getComponentsByName(filename).list[0]; |
There was a problem hiding this comment.
Could you please explain what filename is here, exactly/what the getComponentsByName function does?
There was a problem hiding this comment.
filename is literally the filename how it is named in the data folder (e.g. 6CHG.pdb). It is taken from the information coming from the backend to the frontend. These are collected in componentDidUpdate:
const {data, stageParameters} = this.props;
And the filename is attached in the loadData method to the stageObj see code snippet below
loadFile(stringBlob, {ext: data.ext, defaultRepresentation: false}).then(stageObj => {
stageObj.name = data.filename;
This naming of the stageObj. is then the basis for the method loadStructure with its getComponentsByName function
Maybe this snippet makes the whole process more clear:
https://github.com/arose/ngl/blob/e8713514cfa7100a8313b3ff34a3c94b4125ced4/examples/scripts/component/getByName.js
The idea behind all this as soon as someone picks a molecule it is loaded and saved in the stageObj. which isn't cleared as long the user does not reload the page. So if the user selects some different molecules but from time to time comes back to its very first selection. it's structure is still loaded in the application so there is no need for another backend call.
This is really important for our specific use case since we want the webserver calls as low as possible and so far it did not lead to too high ram usage of the browser. However I am not sure if that approach would be suitable for mobile users as well.
Up to now we did not any stress tests yet. Meaning how much structures I can load into the stage till this system breaks would be interesting to get to know the limitations. 🗡️
|
@shammamah I just finished my first python test :) |
mostly comments improved only one JS code change Co-Authored-By: Shammamah Hossain <shammamah.hossain@gmail.com>
|
@IvoLeist That's great to hear! You should be able to run it locally with |
|
@shammamah sorry to bother you again but unfortunately I am still stuck with local testing... |
|
@IvoLeist No worries! |
|
@shammamah |
|
Ah, I see what's going on! Try escaping the square brackets: https://stackoverflow.com/questions/30539798/zsh-no-matches-found-requestssecurity So run |
|
@shammamah thanks for the quick google. almost there... :) Now it fails because it does not find dash_bio ?
|
|
This might be due to the |
|
@shammamah ah with this pip/pip3 it is so confusing :D The local test run in 54 errors most of them related to the selenium driver |
|
@shammamah update chromedriver was easy to get But there is unfortunately a new error...
Edit: Edit2: |
|
@IvoLeist Oops, I misled you... you should just be running The Sorry about that - could you just try running |
|
Re: this:
The best answer I can give you is that we just haven't had the time/resources to seriously look into it. We do know that a lot of people use conda, though! |
There was a problem hiding this comment.
Added a few things -- the viewport issue should be resolved now. I used the setSize function from here: http://nglviewer.org/ngl/api/class/src/stage/stage.js~Stage.html#instance-method-setSize
removed unnecessary square brackets from Output Co-Authored-By: Shammamah Hossain <shammamah.hossain@gmail.com>
| viewportStyle: PropTypes.exact({ | ||
| width: PropTypes.string, | ||
| height: PropTypes.string, | ||
| }), |
There was a problem hiding this comment.
Can we break this out into two props, width and height, each of which is just a number? The current implementation expects a CSS string, which is indeed more flexible but it's harder to use for non-web-devs. If you think this flexibility is important we could support both, like widthStr = isNumeric(width) ? (width + 'px') : width (using my favorite fast-isnumeric 😉 so 500 and '500' count as numbers, ie pixels, but any other string is a CSS size string) or we can start with just numbers and include strings later if there's interest.
Co-authored-by: Alex Johnson <johnson.alex.c@gmail.com>
|
Apparently the component works without it, but we should add |
Co-authored-by: Alex Johnson <johnson.alex.c@gmail.com>
…nto add-dash-ngl
About
Description of changes
as discussed with @rpkyle he wanted me to do a PR to add my
dash component https://github.com/IvoLeist/dash_ngl
to dash-bio to replace moleculeViewer3d
It is inspired by the shortcomings of https://dash.plot.ly/dash-bio/molecule3dviewer which does not support .cif files and has issues in showing a merged pdb structure: any protein + DNA #467
Features
Limitations
So far only 2-3 structures at the same time are supportedzipped files are not (yet) supported