Node / Link angle

[benagricola]

Hey,

This is really cool, looks like exactly what we need for graphing our network. I've been testing it out and it looks like you can change the the 'angle' of the links as they leave a node by dragging in 'settings' mode.

However it looks like these angles aren't saved anywhere in the config so this isn't persistent.

Is it possible to set the angle used for a certain link at both nodeA and nodeB sides and have this persist? (this may already be possible but I've not managed to trigger it using any of the documented settings).

[otm]

Look in spec/example.json, there is a onSave section in the JSON.

       "onSave": {
		"method": "post",
		"url": "update.php",
		"data": {
			"id": "weathermap.json"		
		}
	},

With the configuration above will trigger a POST requestl be sent to update.php with the query parameters in data. So in the example it will POST the JSON to /update.php?id=weathermap.json.

The reason it was built this way was that it should be easy to embed it to whatever backend is used. There is more information in the documentation, see https://github.com/otm/networkmap.js#saving-changes

Also, there is a crude example in spec/update.php that show a minimum PHP implementation that handles the save API by saving the file to disk. So it will be loaded again. If you are trying this out with Apache or Nginx with the example above the update.php needs to reside in the web root and that most sane configurations of web servers will not let you save the file. It is just included as an example, the best is to write your on implementation and save it in a database, S3 or some other data store.

Some extra explanation that can be good

Also, if you want to integrate it with Prometheus, Influx or some other system you only need to register a data source and load the data. See https://github.com/otm/networkmap.js#requests

There is no UI to create/delete networkmaps, only to edit and to save them. So you need to provide that by your self, the bare minimum weathermap JSON would look something like this:

{
	"editable": true,
	"onSave": {
		"method": "post",
		"url": "http://example.com/api/save",
		"data": {
			"id": "ìd-of-your-choice"		
		}
	},
	"nodes": [],
	"links": []
}

If you do not want to generate the JSON server side you can also integrate your on custome UI for adding Nodes and Links. That is done by implementing the settingsManager.add and settingsManager.addLink, there is skeleton implementations in src/renderer. There are predefined widgets in src/widgets (this was developed pre angular/react), but anything goes as the project is vanilla JS. Depending on you JS knowlage, the settingsManager.addLink.js also includes a state machine implementation.

• render is called when it's time to render HTML, it should return a DOM node.
• purge is called when the previously displayed UI is removed, used for cleaning up event handlers if needed.
• toElement is should return a DOM node.

If you do your own implementations you register them in the following way:

networkMap.SettingsManager.registerAction('add', new CustomAdd());
networkMap.SettingsManager.registerAction('addLink', new CustomAddLink());

Actually, all UI components can be replaced in this way. For instance, in one implementation instead of the utilization labels we displayed a graph showing the data traffic with a graphical representation.

I hope the explains it a bit more.

Ps. Are you able to discuss the data source you are planning to implement? For instance Prometheus, Graphite, Influx...

[benagricola]

@otm Cheers for the info :) At the moment i'm just writing a proof of concept which pulls data from Observium's database (since this currently has the most complete view of devices and links), but this may change if we find it viable.

I have an implementation of update.php and this does save the JSON for nodes and links (including sublinks), but does not seem to save any information with regards to link angle at either end of the link.

It looks like whether a link leaves or enters a node horizontally or vertically is decided when rendering based on the vertical or horizontal distance between nodeA and nodeB. In settings mode it's possible to drag the end of the link manually to set the angle but this doesn't appear in the output.

Do you have any idea what property this is? I assume it can somehow be pulled out of the SVG library tools?

[benagricola]

I did some further digging and found out that this is the userDefined settings in Link.Module.Edge - which doesn't exist unless it's actually set by a user, and as far as I can tell isn't serialised on save.

Using the following structure though I managed to set the pointerDirection:

{
   "nodeA":{
      "id":"node-a",
      "sublinks":[
	  ...
      ],
      "edge":{
         "point":{
            "x":"0",
            "y":"0"
         },
         "pointer":{
            "x":"0",
            "y":"0"
         },
         "direction":{
            "x":"0",
            "y":"-1"
         }
      }
   },
   "nodeB":{
      "id":"node-b",
      "sublinks":[
      ...
      ],
      "edge":{
         "direction":{
            "x":"0",
            "y":"-1"
         },
         "point":{
            "x":"0",
            "y":"0"
         },
         "pointer":{
            "x":"0",
            "y":"0"
         }
      }
   }
}

However - the way this is implemented means that pointer and point must be overridden at the same time, and cannot be set automatically.

Is it possible for these to not be overridden if they don't exist in the input userDefined?

[otm]

I, sorry for the very verbose answer.

So you have found all the relevant code.

It should be saved by this line: https://github.com/otm/networkmap.js/blob/master/src/sublink.js#L99

At the moment you need to keep the entire edge object, pointer and point are used in different situations. One for drawing the "shadow path" (visible when dragging the node) and the other when actually rendering the link. I can be terrible wrong about this, as I have not worked with this code for quite some time.

Also, from the top of my head, so it might be easily fixed by patching the getEdge method. See https://github.com/otm/networkmap.js/blob/master/src/link.module.edge.js#L68

The naming and documentation of the inner workings here is not brilliant.... :)

[benagricola]

Luckily the code is nice and easy to read 👍

Yep, I've modified my copy to allow setting userDefined.direction without overriding the other values, and then using Object.append(this.defaults, this.userDefined) in getEdge().

This seems to allow setting values so I need to play with the settings now to make the graph look correct!

Once I've cleaned up the code I'll put in a Pull request.