search

microsoft / automatic-graph-layout

A set of tools for graph layout and viewing
Other
1.36k stars 305 forks source link

A guide about how to make it work #125

Open pablocastilla opened 7 years ago

pablocastilla commented 7 years ago

Hi!

Great code! The only thing I miss is a guide to make it work, specially in the web part.

Thanks

K2 commented 7 years ago

Totally agree, I'll share the code once I get it working, had some really exciting graphmaps before when triangle was used, but then my engine broke triangle (it's super old and crashed a lot anyhow), yeah now the API is a bit different and I keep crashing with null references looking for an unset TileDirectory :(

levnach commented 7 years ago

Filippo Polo has added a new WebMsagl.sln solution and a paragraph with some instructions on how to use it to README.md. The new version of Grapmaps still needs some work.

saulshanabrook commented 5 years ago

Anyone have pointers on where to start here? I want to render some incremental graphs in my browser. Is this software distributed on NPM?

FilippoPolo commented 5 years ago

The Javascript version currently lives in the MsaglSharpKit/WebMsagl folder, and it's a VS TypeScript project. It was originally developed for internal use, and right now it is not packaged. In order to use it you'll need to get a copy of it. We are currently discussing an NPM distribution.

Regarding where to start, the best thing you can do is run the samples, which can be found in MsaglSharpKit/WebMsagl/Samples. You'll need to run the TypeScript compiler, of course; if you use Visual Studio, the IDE will do it for you (the relevant solution is WebMsagl/WebMsagl.sln), but running TSC normally should also work.

The samples show how to use most of the features of WebMsagl; they import the library via RequireJS. The basic concept is that you create a GGraph object, which provides methods to create a graph (addEdge, addNode) and run layout on it (you register one or more callbacks, and then start layout). Then you pass it to a "graph control", which is basically a rendering layer; there's one that targets Canvas and another that targets SVG (recommended), and both of those have an IDD variant that adds zoom & pan capabilities.

If we get to do a proper distribution, I'll add more documentation.

elbo-01 commented 5 years ago

Hello @FilippoPolo , Can you please explain in a quick steps How to compile those Samples using TSC? I don't have enough experience with this kind of setups "Typescipt+RequireJS". for example (BigGraph sample): I run tsc boot.ts app.ts but some errors popped out regarding Jquery library definitions missing, so I run npm i @types/jquery and compilation succeded but when i run it using node I get some errors again (maybe i misunderstand the setup).

FilippoPolo commented 5 years ago

Hi @elbo-01 ,

I ran npm install --save @types/jquery in the folder containing the sources, and after that it built with tsc. Then it worked correctly when serving index.html from a web server, using the WebMsagl folder as the root folder.

I'm afraid we never used this within node, but I can try to help. What errors are you getting?

elbo-01 commented 5 years ago

@FilippoPolo Thanks, I forgot serving the app from a web server, nevertheless still doesn't work correctly (no graphs shows up), but the basic content of index.html is there. So my Node setup is rather simple:

http-server output:

[Fri Oct 11 2019 10:52:26 GMT+0100 (+01)] "GET /WebMsagl/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:69.0) Gecko/20100101 Firefox/69.0" [Fri Oct 11 2019 10:52:29 GMT+0100 (+01)] "GET /WebMsagl/Samples/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:69.0) Gecko/20100101 Firefox/69.0" [Fri Oct 11 2019 10:52:30 GMT+0100 (+01)] "GET /WebMsagl/Samples/BigGraph/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:69.0) Gecko/20100101 Firefox/69.0" [Fri Oct 11 2019 10:52:31 GMT+0100 (+01)] "GET /WebMsagl/Samples/samples.css" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:69.0) Gecko/20100101 Firefox/69.0" [Fri Oct 11 2019 10:52:31 GMT+0100 (+01)] "GET /WebMsagl/Samples/BigGraph/styles.css" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:69.0) Gecko/20100101 Firefox/69.0" [Fri Oct 11 2019 10:52:31 GMT+0100 (+01)] "GET /Samples/BigGraph/boot.js" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:69.0) Gecko/20100101 Firefox/69.0" [Fri Oct 11 2019 10:52:31 GMT+0100 (+01)] "GET /Samples/BigGraph/boot.js" Error (404): "Not found"

So I don't Know Why It doesn't find boot.js even though It's there.

FilippoPolo commented 5 years ago

I've just tried; I'm running http-server with WebMsagl as root folder, then I load:

http://127.0.0.1:8080/Samples/BigGraph/index.html

Also, you need to run TSC on both the Samples folder and the Scripts/src folder. Add the following switches: --target ES5 --module AMD. Or it won't play nice with RequireJS. Again, apologies for this being more complicated than it should; I hope I can find the time to sort it out properly.

elbo-01 commented 5 years ago

OK!! Finally It works!! ... Thank you @FilippoPolo ,

elbo-01 commented 5 years ago

But Clusters Sample is broken ... I think.

FilippoPolo commented 5 years ago

I'm glad you were able to get it working! When I'll be able to package it properly, hopefully none of those problems will apply.

Clusters is the very latest feature we added. I'll verify.

FilippoPolo commented 5 years ago

The Clusters sample is working correctly for me, using the same steps as above.

elbo-01 commented 5 years ago

Yes you are right!!, it's working now. Thank you for your time.