Fasta Viewer Imported Into React App Issue

[g12342jn]

Hello,

I am currently testing the use of MSA Viewers for the use in a react application.
After importing alignment.js to throw away project for testing, the view appears like this:

If I import the sample CD2.fasta data that is included in this repo, I then see this:

Could this be some css/stylization issue after importing?

I am also looking for some functionality where I can pass in a FASTA file as a prop to this component instead of allowing a user to do this via the import button. Is this possible?

Thanks,
Greg

[stephenshank]

Dear @g12342jn,

It does seem as though CSS is not being picked up. How are you importing JavaScript and CSS files? It's usually either

1. classical web development, i.e., sourcing JavaScript and CSS bundles with script and style tags, or
2. using your own module bundler like webpack (what we use)

This will help me to further troubleshoot.

Regarding your second question, there's a suite of components underneath the hood. Unfortunately there is no documentation at the moment. But you might want to use the Alignment component, which the FastaViewer component you are using mounts as a child component... see: https://github.com/veg/alignment.js/blob/master/src/app/FASTA.jsx.

You'd then have to write your own logic for how to get FASTA down to that component in your own parent component.

Best,
Stephen

[g12342jn]

Hello Stephen,

I used:
yarn create react-app

I think this defaults to webpack version 5, but that did not appear to play nicely, so I knocked it down to webpack version 4.44.2 by updating the package.json file line:
"react-scripts": "^4.0.0",

If you need any further information, please let me know and thanks again for the assistance.

Regards,
Greg

[stephenshank]

Dear Greg,

Thanks. It's been a while since I've used create-react-app, but I could use a refresher. You'll probably need to go with SASS integration:
https://create-react-app.dev/docs/adding-a-sass-stylesheet/

and I need to make sure that all the relevant .scss files are packaged for NPM. I will try to take a stab at this this week and will follow up.

FWIW I do try to make my JavaScript libraries agnostic to Webpack (or any bundler for that matter) by only Babeling React's JSX. However, it's been a while since I've done a release, so this issue is super helpful for me... with web technologies constantly changing, it's great to hear how users are trying to use this library in 2022.

Best,
Stephen

[g12342jn]

Stephen,

Thanks for the SASS integration info, I will test this out.

Would you be able to hop on a Google Meet this afternoon or some time this week? On there I can provide some additional information into this issue. I would also like to discuss exactly what I am trying to accomplish using alignment.js.

Thanks Again,
Greg

[g12342jn]

Stephen,

My current question pertains to the loadFNA function, under ../src/app/FNA.jsx:

loadFNA(text) { this.setState({ data: fnaParser(text, true), show_differences: "" }); }

I am interested in pulling out the .tree data so I can use it with the Tree component, however I noticed a difference in the returned object before and after the setState call in the function listed above:
loadFNA(text) { console.log('Before setState: ', fnaParser(text, true)) this.setState({ data: fnaParser(text, true), show_differences: "" }); console.log('After setState: ', this.state.data) }

I am wondering why the same call to the same data would produce two different results, I must be missing something and I am having trouble finding it. Would you be able to point me to where/why this might be occurring?

Your assistance with this is much appreciated.

Thanks,
Greg

[stephenshank]

Dear Greg,

That actually occurs when placenodes is called in react-phylotree, a dependency of alignment.js. This occurs during the render:

https://github.com/stephenshank/react-phylotree/blob/92996c3f79852e91eda42901708a2665be2cd8b6/src/phylotree.jsx#L124

max_x is simply a statistic that helps calculate where nodes should be placed on the tree.

I'm glad you're interested in this package and would be happy to jump on a call. Please feel free to reach out at [email protected].

Best,
Stephen