No results displayed

[rwiegan]

To bypass my problem mentioned in #48 I used ng serve --host 0.0.0.0 to access the app from my local network.

My pipeline call was: python bin/tf_analyzer.py -g mm9 -b liver -t gata4 polr2a -c chr1 --visualize

I get the following result:

I know for sure that there should be some results.

[Jasmin-Walter]

In order to view the results you have to run the python skript visualization_app_api_start.py within bin/skripts and ng serve within visualization simultaneously. visualization_app_api_start.py genrates the tree for the data (on localhost 5000) and ng serve starts the visualization of said tree (on localhost 4200).

[rwiegan]

I added the --host 0.0.0.0 to the tf_analyzer script itself. Shouldn't that work or am I missing something?

[nknoppik]

Can you maybe Check the browser console if there are any error logs? The problem is, that the visualization cant get the data from the api call, but to figure out what the Problem is I need the browser console Logs.

[nknoppik]

I checked the issue #48 again and I think it's something wrong with the flask api server too

[rwiegan]

Okay seems like the issue is the missing access to port 5000.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/getTreeData. (Reason: CORS request did not succeed).

ERROR Error: Could not find a tree control for the tree.
    Angular 7
    GraphHomeComponent_Template graph-home.component.html:29
    Angular 23
    RxJS 5
    Angular 8

My next idea was to add host="0.0.0.0" as parameter to the app.run call. Well, that had no impact at all...

[nknoppik]

When you added host="0.0.0.0" as parameter to the app.run call. Start the flask api with python bin/scripts/visualization_app_api_start.py. Then you should see in the terminal on wich port the flask api is hosted or if there are any issues. You can also check this with for example netstat -tulpen to see on wich port the flask api is hosted.

If this port is NOT 5000, enter this http://localhost:MYPORT"/getTreeData with your into the url line in your browser and see if you get a json object as return. If this works, you need to change the port if the api call that angular is doing. For this you need to got to visualization/src/app/service/, open the flask-api.service.ts and change the port in line 20 private api_adress = "http://localhost:5000/" to your own port the flask api is hosted at.

When you changed this too, all should normally work correctly.

[rwiegan]

But accessing the VisualizationApp still shows no results. 0 Biosources and 0 TFs

[rwiegan]

I think the problem is here: Since I want to access it via a different machine it cannot find the tree at localhost:5000. Instead, it should look at [My_VM_IP]:5000.

How can I change that or could you provide an option to change that?

[rwiegan]

An alternative would be to write more precise instructions on how to use ssh to access the APP.

[nknoppik]

To change that you can change the variable api_adress = "http://localhost:5000/" to you [My_VM_IP]:5000. Its invisualization/src/app/service/flask-api.service.ts in line 20.

[nknoppik]

Instructions how to change the ports and hosts for angular and flask are written and on the way into the wiki.

[rwiegan]

Ports/address already in use when running web app

The web application currently listens on ports 4200 and 5000. Ensure that no other program is using them (e.g. with netstat on Linux) before running the TF Analyzer.
Changing Ports and URL:

Ports for Angular and Flask can be adjusted if it is not possible to free up the used port. However this requires modifying the sourcode, so it is reccommended to free up the port if possible.

For Flask:

In the file bin/scripts/visualization_app_api_start.py in line 36 Change the port in app.run(debug=True, port=5000) to the port you want.

You can also change the host by changing that to app.run(host="YourHost", debug=True, port=5000)

For angular:

In the file bin/tf_analyzer.py in lines 131 and 271 Change subprocess.call(['ng', 'serve'] to subprocess.call(['ng', 'serve', '--port', 'YOURPORT'].

You can also change the host by changing ['ng', 'serve'] to ['ng', 'serve', '--host', 'YourHost']

If you change the port for the Flask api, make sure that you change the url for the html request in angular:

You can do this in the file visualization/src/app/service/flask-api.service.ts in line 20: private api_adress = "http://localhost:5000/". Here change :5000 to the port your flask api is hosted on.

In general, I would not recommend telling the user that they have to do some changes in the source code. Why don't you provide a parameter where the IP and the Ports can be set? The defaults would remain localhost, 4200, and 5000.

[nknoppik]

Yes, that could have been possible, but I just didn't thought about, that it's maybe necessary to change host or port adresses. Also it would have been needed to write a script that changes the source code of the visualization app in the .ts file, because it wouldn't be possible to directly provide the the host adress or port where the flask api is hosted on here.

[nknoppik]

For changing the ports or host for the angular app, there would be simpler ways to do this wich I could still add, then you need to change a .json file instead of changing something in the tf_analyzer. But The changing for the flask api would remain the same and also the changing of the var in the .ts file.