A guide about how to make it work

[pablocastilla]

Hi!

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

Thanks

[K2]

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]

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]

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]

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]

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]

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]

@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:

• I used http-server to serve the app by running http-server from WebMsagl folder.
• Then I accessed the samples from the browser.

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]

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]

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

• What I have done wrong:
  I thought that WebMsagl was a standalone folder, so I only worked with it, without the whole Project, and that causes http-server to triger "GET /Samples/BigGraph/boot.js" Error (404): "Not found" which I don't know the cause of it so far (Do you have any thoughts?).

• Steps to compile successfully (future readers):

1. Extract the Whole project
2. Compile WebMsagl/Scripts/src/ with tsc --target ES5 --module AMD *.ts.
3. On WebMsagl/Samples/BigGraph install Jquery defs with npm install --save @types/jquery
4. On the same folder run tsc --target ES5 --module AMD *.ts
5. Run http-server on WebMsagl.

[elbo-01]

But Clusters Sample is broken ... I think.

[FilippoPolo]

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]

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

[elbo-01]

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