Hosting on a remote server

[brettChapman]

Hi

This is an amazing genome graph visualisation tool you have developed.

I'm currently trying to get it to run. I can run locally on my laptop with the demo dataset you have, but what I would like to do is run on the cluster where my genome alignments are running, and deploy from one of the nodes.

I have tried both methods you describe in the Readme, yarn start and through Docker:

Yarn gives me this error and when going to the nodes ip address with port 3000. It can't be reached from the browser:

yarn start

Compiled with warnings.

./src/Dashboard.tsx
[113, 11]: variable name must be in lowerCamelCase, snake_case or UPPER_CASE

./src/DashboardInner.tsx
[165, 23]: block is empty

./src/widgets/SVList.tsx
[11, 7]: variable name must be in lowerCamelCase, snake_case or UPPER_CASE
[58, 11]: variable name must be in lowerCamelCase, snake_case or UPPER_CASE

./src/widgets/Linear.tsx
[62, 43]: block is empty

./src/widgets/Circos.tsx
[63, 41]: expected parameter: 'k' to have a typedef
[67, 42]: expected parameter: 'k' to have a typedef
[71, 38]: expected parameter: 'k' to have a typedef
[79, 31]: expected parameter: 'd' to have a typedef
[79, 34]: expected parameter: 'step' to have a typedef
[131, 23]: expected parameter: 'd' to have a typedef
[131, 26]: expected parameter: 'i' to have a typedef
[155, 47]: expected parameter: 'i' to have a typedef
[226, 24]: expected parameter: 'd' to have a typedef
[232, 35]: expected parameter: 'd' to have a typedef
[235, 38]: expected parameter: 'd' to have a typedef
[239, 22]: expected parameter: 'd' to have a typedef
[294, 11]: variable name must be in lowerCamelCase, snake_case or UPPER_CASE
[335, 15]: variable name must be in lowerCamelCase, snake_case or UPPER_CASE

./src/widgets/Dnd.tsx
[9, 7]: variable name must be in lowerCamelCase, snake_case or UPPER_CASE
[20, 7]: variable name must be in lowerCamelCase, snake_case or UPPER_CASE
[24, 7]: variable name must be in lowerCamelCase, snake_case or UPPER_CASE
[81, 9]: variable name must be in lowerCamelCase, snake_case or UPPER_CASE

./src/widgets/GraphWrapper.tsx
[907, 1]: Exceeds maximum line length of 200
[229, 5]: expected parameter: 'colorOption' to have a typedef
[394, 11]: variable name must be in lowerCamelCase, snake_case or UPPER_CASE

./src/widgets/AutoComplete.tsx
[43, 11]: variable name must be in lowerCamelCase, snake_case or UPPER_CASE

./src/widgets/ChromosomeSelector.tsx
[25, 51]: block is empty

./src/widgets/PathRegionForm.tsx
[76, 11]: variable name must be in lowerCamelCase, snake_case or UPPER_CASE
[142, 11]: variable name must be in lowerCamelCase, snake_case or UPPER_CASE

./src/widgets/Tags.tsx
[24, 16]: expected parameter: 'tags' to have a typedef

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

Using Docker, I also can't reach the server from my browser:

ubuntu@node-0:~/MoMI-G$ docker run --init -p 8081:8081 momigteam/momig-backend
Unable to find image 'momigteam/momig-backend:latest' locally
latest: Pulling from momigteam/momig-backend
08cf77306a68: Pull complete
a0c1c1564765: Pull complete
90f45bc8df86: Pull complete
a4355860543c: Pull complete
47b3999ad7e4: Pull complete
2e0d72a9883e: Pull complete
Digest: sha256:7b3dc29eb884c71ae5bfb2db40a2cb1682bd79b308dde545360f2ed4d64650d8
Status: Downloaded newer image for momigteam/momig-backend:latest
[2020-07-09T07:11:39Z INFO graph_genome_browser_backend::vg] VG Version: v1.6.0-213-gc0c19fe

[2020-07-09T07:11:39Z INFO graph_genome_browser_backend::vg] VG minor version: 6
[2020-07-09T07:11:39Z INFO graph_genome_browser_backend::features] Parsing: "static/gencode.v27lift37.basic.annotation.gff3"
[2020-07-09T07:12:23Z INFO graph_genome_browser_backend::features] Parsing: "static/gencode.v27.basic.annotation.gff3"
6
Start server on 0.0.0.0:8081

Is there something I'm missing, perhaps I need to open a port through the clusters firewall or something?

In regards to my genome analysis and what I want to visualise:

I have aligned 3 barley genomes (4.7GBps each) using Cactus. I'm currently only looking at chromosome 1, as aligning the entire genome in one job with the resources I have is not possible. I only have a cluster with 16 cores and 64GB RAM per node. I've been running each chromosome per node in my cluster. I intend to merge the VG files later. I realise I will likely miss SV across chromosomes, but for now, this is acceptable.

I'm using VG v1.25.0. I've called variants to a VCF file from the graph, I've indexed my graph, and I have generated GFA files using Seqwish. I'm working with the PackedGraph format *.pg instead of *.vg as it's more memory efficient. I also have genome annotation files in GFF format and BED files so I can add tracks to visualise where the SV are within genes.

If I could get MoMIG running from my cluster, that would be a great start. I'll then begin testing it out with my dataset.

Thanks.

[6br]

Thank you for trying this tool.

1. yarn start runs the frontend server on localhost:3000, which cannot be accessed remotely. Instead, you can access to the server if yarn server starts on 0.0.0.0:3000. Is it possible to set HOST=0.0.0.0 on the environment variable? (or put .env on the project root and run echo "HOST=0.0.0.0" > .env).
2. Frontend needs to connect to the backend server at the same time as the backend docker server is running. The easiest way is to change the target of backend to localhost:8081, according to the docs https://momi-g.readthedocs.io/en/latest/quick_start.html#backend.

$ sed -e "s/\"target/\"target_/g"  -e "s/\_target/target/g" -i.bak package.json
$ docker run --init -p 8081:8081 momigteam/momig-backend # Run it on another shell. It takes a little long time -- please wait.
$ yarn start

Thank you for reporting about warnings. I'll remove all warnings in a few days.

[brettChapman]

Thanks for your help. The issue was there was no open port setup on the server. It is fixed now. I've set the open ports to HTTP and HTTPS and the port number to 8081.

Now when I use the following commands I get the server running and I can access it with no problems:

echo -e "HOST=0.0.0.0 \nPORT=8081" > .env
yarn
yarn start

However, when I then try to use the docker way of running the server using the following command I get a NoMatch error. I've replaced my servers IP number in the below error output with Xs for security reasons.

Do I need to setup my environment variables file differently? Thanks.

Also, is there a way I can hide my port number, so that I can simply provide the IP number with no :8081 to access the genome browser? Thanks.

docker run --init -p 8081:8081 momigteam/momig-backend
[2020-07-13T03:16:03Z INFO graph_genome_browser_backend::vg] VG Version: v1.6.0-213-gc0c19fe

[2020-07-13T03:16:03Z INFO graph_genome_browser_backend::vg] VG minor version: 6
[2020-07-13T03:16:03Z INFO graph_genome_browser_backend::features] Parsing: "static/gencode.v27lift37.basic.annotation.gff3"
[2020-07-13T03:16:48Z INFO graph_genome_browser_backend::features] Parsing: "static/gencode.v27.basic.annotation.gff3"
6
Start server on 0.0.0.0:8081
[2020-07-13T03:17:35Z INFO logger] GET http://XXX.XXX.XX.XXX:8081/ 404 Not Found (0.012092 ms)
[2020-07-13T03:17:35Z ERROR iron::iron] Error handling:
Request {
url: Url { generic_url: "http://XXX.XXX.XX.XXX:8081/" }
method: Get
remote_addr: V4(134.115.211.90:50539)
local_addr: V4(0.0.0.0:8081)
}
Error was: NoMatch

[6br]

Hi, thank you for trying MoMI-G.
Backend docker itself only provides API between frontend and backend. The definition of API is here https://gbapi4.docs.apiary.io/# .
Since the api server is intended to be accessed by the frontend, the backend server does not return human-friendly information.
We currently do not have a docker image which includes both frontend and backend.
So, running both frontend (using yarn) and backend (using docker run ) is needed. Because the backend needed to be accessed from frontend via ajax, ports of frontend and backend need to be open.
Is it possible to run yarn start and access to the frontend again?
In addition, if you changed the frontend's port from 3000 to 80 like PORT=80 yarn start, then the port number isn't needed to access there.
Or you can build file using yarn build and run a static server by setting the static_root as ./build directory.