provide 'compiled' js library or improve guidance

[MrTomRod]

I want to integrate this into my website, but it was quite annoying to do so:

• Install npm, node and yarn (I've never used any of them before)
• ran 'yarn build', but:
• got an error, had to npm install react-scripts, which took forever
• got an error, had to npm install react-dom
• got an error, had to npm install react
• got an error, had to yarn add workerize-loader, which took forever
• got an error, had to yarn add lodash
• then, it worked. But I ended up with ugly-named js files which I am unsure how to use:

tree abrowse/build
├── 6bc8976516bbabed843b.worker.js
├── 6bc8976516bbabed843b.worker.js.LICENSE.txt
├── 6bc8976516bbabed843b.worker.js.map
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── PF01601_full.txt
├── precache-manifest.af30cb89b07353510a274f9994be19d8.js
├── robots.txt
├── service-worker.js
└── static
    ├── css
    │   ├── main.de0a18cb.chunk.css
    │   └── main.de0a18cb.chunk.css.map
    └── js
        ├── 2.4133e705.chunk.js
        ├── 2.4133e705.chunk.js.LICENSE.txt
        ├── 2.4133e705.chunk.js.map
        ├── main.78e0e997.chunk.js
        ├── main.78e0e997.chunk.js.map
        ├── runtime-main.099d901a.js
        └── runtime-main.099d901a.js.map

How should I proceed?

[MrTomRod]

Does this library have an API similar to tree-align-view, i.e.:

  let mainDiv = document.getElementById ('main')
  let opts = {
    data: {
      stockholm:  /* can also use Fasta, Newick, or JSON */
        "U5LNM4_9BETC/366-630 AELT-ECDLDVLFKN-DA...\n"
      + "SPIKE_CVHN5/322-526  PNLP-DCDIDNWLNNVSV...\n"
      + "SPIKE_CVHSA/317-569  PNITNLCPFGEVFNATKF...\n",
      structure: {
        "SPIKE_CVHSA/317-569": {
          path: "pdb/5wrg.pdb",
          startPos: 317,
          chain: 'A'
        }
      }
    },
    config: {
      parent: mainDiv
    }
  }
  render (opts)

Or am I wasting my time and should look out for something else?

[ihh]

I am sorry you found it frustrating to have to install the React tools. It can be disconcerting but a fairly common view amongst developers is that the benefits of using React quickly outweigh the costs. I think if you type npm install it should install all those dependencies for you?

Yes, there is an API, it's not very well-documented yet though since this is a prototype. We do anticipate improving the documentation now that the project is funded. You need to pass in data (or links to data) when the object is instantiated. You can see some examples of loading in data here. You can also use the addDatasets method in App.js.

I can't tell you if you're wasting your time! I can tell you that this is an open source project that is <6 months old and is in prototype stage, pending funding. We do have some incoming funding now and so the kinks should be ironed out. In general though please remember that open source projects are not products you have bought. I understand the temptation to vent on a github issues page but you will generally get better results if you can keep your frustration and annoyance somewhat in check.

If you are looking for a more mature alignment viewer, you could try react-msa-viewer though please note that it is also a React component, so you will need to install a similar set of dependencies.

[ihh]

If you switch to the gh-pages branch, you will find compiled files in the build directory.

[MrTomRod]

Sorry for being an arse. I should know better, I'm in a similar situation.

About alternative libraries I'm currently using wilzbach/msa, but your library looks better an has tree support. I have a bad impression of plotly/react-msa-viewer because of the way their storybook looks - and doesn't work (crashes on Firefox and Chrome). Also, for my purposes, there is no advantage over wilzbach/msa.

About this issue It's true, abrowse and its dependencies are trivially easy to install with npm install abrowse!

It still isn't clear to me how to use your library from a vanilla JavaScript context. Your examples imply that you think I should use React, too. However, I'm using the Django framework and React isn't convenient in that context.

In abrowse/build of the gh-pages branch, it seems that the API function is located in main.e9992606.chunk.js, but it's inaccessible there.

I think your code would have to be compiled in some way to produce a JavaScript-native library. plotly/react-msa-viewer does this, I think using webpack.

Am I getting something wrong? Are you planning to support native javascript usage?

[ihh]

Yes there are ways to do this, I think you just "npm build" and then include the appropriate compiled chunk, but I'm not a frequent enough React user to know the best way to do this. I will defer to members of the JBrowse team for this - you can probably get some help here: https://gitter.im/GMOD/jbrowse2

[cmdcolin]

@MrTomRod I think what we are seeing is that the way that this repo is currently setup is that it is an instance of a create-react-app, it is not setup as a re-usable component. We will need to refactor this so that it is more of a re-usable component

[ihh]

hmmm, bummer. I have added an issue for this #18

[ihh]

@cmdcolin isn't it possible to hack something together with webpack or whatever

[MrTomRod]

Thanks for looking into this. I subscribed to #18 and will embed your library when it's ready. Close this issue if you want!

Btw, if you're interested, this is the tool I'm working on: OpenGenomeBrowser. (Unpublished.)

Here is where I would like to add abrowse, replacing wilzbach/msa. (This is a demo server, log in using username test and password testtesttest.)