anvaka / pm

package managers visualization
https://anvaka.github.io/pm/
MIT License
1.57k stars 135 forks source link

help needed for deployment #24

Open GrenobeDataScience opened 6 years ago

GrenobeDataScience commented 6 years ago

Hi! My goal is to create something similar with your work on embeddings. After cloning the two repos, I have created a directory my_data under your project pm, containing labels.json links.bin and positions.bin as described. I have also changed the `src/config.js' to have:

export default {
  dataUrl: './my_data/'
};

However, when I start npm start, it automatically shows the Code Galaxies Visualization. I guess I am losing a path or something simple. How can I see my visualization?

anvaka commented 6 years ago

The web-server that serves local instance of pm has its own rules for static files routing - I do not recommend to put data in this project (because compilation will be slow).

Instead move your my_data folder outside, and then start a web server there. You can use http-server for this:

npm install -g http-server
http-server --cors

Note the IP address that will be printed in the console, and use that in your config.json file. Also note, that my_data should be a nested folder for your http-server. So that the link:

http://127.0.0.1:8080/my_data/manifest.json

resolves to the manifest file. Then you can local instance of pm in a new browser page

http://127.0.0.1:8081/#/galaxy/my_data?ml=150&s=1.75&l=1

Note the my_data part - it is used to lookup the graph.

Does this help?

Edit: Added note about visualization/folder nesting

balikasg commented 6 years ago

Probably I am still missing something. I did as you suggested, I am starting a server in the my_data directory and it starts correctly:

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.0.12:8080
Hit CTRL-C to stop the server

When visiting any of the two adresses in the browser, it prints the directory structure. Then, when I am copying-pasting either the http://127.0.0.1:8080 or http://192.168.0.12:8080 in the config.js of pm, and then npm start it still directs to Code Galaxies Visualization... BTW, the output of npm start looks like:

> pmviz@1.0.0 start /home/balikasg/Downloads/pm
> PORT=8081 node dev-server.js

Copying /home/balikasg/Downloads/pm/src/index.html to /home/balikasg/Downloads/pm/build/index.html
Dev Server listening at http://127.0.0.1:8081
Hash: 3dc2752394eee4e70eeb
Version: webpack 1.15.0
Time: 3949ms
anvaka commented 6 years ago

@balikasg - sorry about that. I updated my comment, describing how to access the visualization from pm and also corrected, that my_data needs to be nested.

balikasg commented 6 years ago

I tried it, but I am still losing something. I have two directories: word2vec-graph and pm. my_data is inside word2vec-graph. So when starting http-server from inside word2vec-graph, my_data is nested and http://127.0.0.1:8080/my_data/ shows the contents of the directory (labels, links, positions). There is no manifest.json in there because it was not generated. Then, the src/config.js of pm is:

export default {
    dataUrl: 'http://127.0.0.1:8080/'
};

When I am starting npm start it still directs to Code Galaxies Visualization while http://127.0.0.1:8081/#/galaxy/my_data?ml=150&s=1.75&l=1&_k=6kfsq4 shows just a black screen. I apologize for this long messages.

anvaka commented 6 years ago

Can you open Chrome's developer tools and share your network requests tab?

Parici75 commented 6 years ago

Hello, I have the same problem, I am unable to access my graph from the http-server.

Hereafter is a copy of my network request tab.

capture d ecran 2018-06-09 a 01 57 18

Many thanks in advance for the help.

mingghan commented 5 years ago

I faced the same issue and fortunately found the solution Here are the steps, which helped in my case:

  1. Be sure to write ip-address in src/config.js in this format: '//127.0.0.1:8080/'
  2. In my case name of the folder with data contained minus instead of underscore: graph-data, but it had to be written like this: graph_data
  3. Somehow positions.bin file is requested from this url: http://127.0.0.1:8080/graph_data/undefined/positions.bin, so I had to add a nested folder to my data folder, and name it undefined, literally. After that I moved all my data files into it

That's all, visualization is extremely beatiful, but the tool has very high entrance barrier for newbies like me. Anyway, it was worth it. Thank you, anvaka@

nicolasmeng commented 5 years ago

@mingghan And url like this? http://127.0.0.1:8080/#/galaxy/graph_data?ml=150&s=1.75&l=1

mingghan commented 5 years ago

And url like this? http://127.0.0.1:8080/#/galaxy/graph_data?ml=150&s=1.75&l=1

@nicolasmeng , yes. I actually made a notebook with step-by-step guide. You can check the final "Visualisation" part here: https://github.com/mingghan/word2vec_visualzation/blob/master/word2vec-notebook.ipynb

kuhungio commented 4 years ago

I'm confused where 'graph_data' come from. Can't find any config about this. I'd like to set my own path, any one solved it?

brienna commented 3 years ago

The file directory that worked for me:

- pm (cloned)
- my-pm-data-server
    - graph-data
        - manifest.json 
        - version-1/
            - labels.json
            - positions.bin
            - meta.json
            - links.bin

It really doesn't matter where pm and my-pm-data-server are, just make sure that you set up manifest.json appropriately, run npm start in pm and http-server --cors -p 9090 in my-pm-data-server, and update pm/src/config.js to point to http://127.0.0.1:9090/.