netflix / vizceral Goto Github PK

WebGL visualization for displaying animated traffic graphs

License: Apache License 2.0

JavaScript 100.00%

graph traffic visualization webgl monitoring

vizceral's Introduction

vizceral

vizceral is a component for displaying traffic data on a webgl canvas. If a graph of nodes and edges with data about traffic volume is provided, it will render a traffic graph animating the connection volume between nodes.

This component can take multiple traffic graphs and will generate a 'global' graph showing all incoming traffic into each of the 'regions', with support for cross-region traffic.

There are three levels of information, global, regional, and service-level, with clicking or double-clicking on a node bringing you one level deeper.

Not actively maintained

We are not using this internally at Netflix at this time and the project is not actively being worked on. We occasionally look at the repo and will review PRs as time permits.

Using

See the wiki for full documentation.

Developing Locally

To see your changes to vizceral locally, you'll need to link the package with bower:

$ git clone https://github.com/Netflix/vizceral.git
$ cd vizceral
$ npm link
$ npm run dev
$ cd /path/to/project-using-vizceral
$ npm link vizceral

Contributing

Clone this repo
Create a branch: git checkout -b your-feature
Make some changes
Test your changes by running your local version
Push your branch and open a Pull Request

Supported Browsers

Current development focuses on most recent version of Chrome. Minor sanity checking for the latest versions of Safari and Firefox.

TODO

Unit Tests
Modular layout algorithms
- Smarter current layout algorithm
Cross-browser support / testing
Create predefined locations and design styles to modularly represent custom metadata
Implement redesigned third-level view

License

Code released under the Apache 2.0 license.

vizceral's People

Contributors

Stargazers

Watchers

Forkers

lorin chemicl nagyistge deejay1 rbramwell leoipreo fengweijp sbilly monfera zhangxiaoguang-baidu erotica mayblue9 garpert mukteshkrmishra simonthiele happy-ferret yffud dlevison defect nanderoo deki0r icaas deleskie ampg99 mweagle wahahajun denverwilliams tanged containersolutions empia snoweel mreddy8182 psastras rainslytherin jolexa dldinternet ga52can abesto rugby110 wyzssw redavis22 olivierh59500 lightpriest wangyx0055 asqrd-esqrd ergestnako ahuwaa younjinjeong sjanulonoks zhaoyunjiong bgzxz pnuckowski alexxnica cathywife needf timopek cagriy ccortezb evaluation-alex chrisjchandler nitinreddy3 spuds51 surajpokhriyal25 karthi2016 ndanderson kryndex laughnan baransu evoxmusic somanwal theundefined 3quanfeng yilab mgcool archsaber mastermind1981 miketmartin stevenlol akumar-nisum-com ugo5 richvred chen0031 craigcalef singhin swachalit dolbyover ideaflare masterxavierfox pdkyll opavader agaurav electronul zfl926 nab0310 mdzahidhasan leeclarke leilaelorfi enricomariafusi kjs850 hneralla

vizceral's Issues

Getting "Region Loading" whenever a region does not have source of internet.

Is this by design for the Vizceral tool? Basically what I am observing is that let's say I have a connections array telling me something like this:

Source Destination
INTERNET Region A
INTERNET Region B
Region C Region A

In this case Region C just displays as "Region Loading" but still shows the dots flowing from C to A. Is this by design that INTERNET should always be the source to a region in order for it to be displayed? Or perhaps is there something else I can look into? I've double checked that Region C is included in the Nodes array as well.

Trouble creating a minimum example

First off, thanks for you recent talk at Monitorama about Visceral and also thanks for making it available as Open Source!

I'm attempting to evaluate Visceral, but I'm having trouble finding a minimum example that gives me all the features.

The DATAFORMATS.md example emits a lot of warnings (because a "class": "normal" needs to be on the us-west-2 node and then it just sits and never displays anything:

Here's the JSON I got after copying and properly formatting the DATAFORMATS.md example:

{
  "renderer": "global",
  "name": "edge",
  "nodes": [
    {
      "renderer": "region",
      "name": "us-west-2",
      "class": "normal",
      "updated": 1462471847,
      "maxVolume": 100000,
      "nodes": [
        {
          "name": "INTERNET"
        },
        {
          "name": "apiproxy-prod",
          "notices": [
            {
              "title": "Notice about something",
              "link": "http://link/to/relevant/thing",
              "severity": 1
            }
          ],
          "class": "normal",
          "metadata": {},
          "nodes": [],
          "connections": []
        }
      ],
      "connections": [
        {
          "source": "INTERNET",
          "target": "apiproxy-prod",
          "metrics": {
            "normal": 5000,
            "danger": 5,
            "warning": 0
          },
          "notices": [
            {
              "title": "Notice about something",
              "subtitle": "Subtitle",
              "link": "http://link/to/relevant/thing",
              "severity": 1
            }
          ],
          "metadata": {},
          "class": "normal"
        }
      ]
    }
  ]
}

The sample_data included in the React component works fine, but it's really, really large and very difficult to get a sense of what's there. I've managed to make my own that works, but has no particle drawing.

{
  "renderer": "global",
  "name": "edge",
  "nodes": [
    {
      "renderer": "region",
      "name": "INTERNET",
      "updated": 1466838417510,
      "nodes": [
      ],
      "class": "normal"
    },
    {
      "renderer": "region",
      "name": "us-east-1",
      "class": "normal",
      "updated": 1466838546805,
      "nodes": [
        {
          "name": "INTERNET",
          "class": "normal"
        },
        {
          "name": "proxy-prod",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        }
      ],
      "connections": [
        {
          "source": "INTERNET",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 0.646,
            "normal": 31.12
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 0.582,
            "normal": 218.972
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "normal": 11.072
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "proxy-prod",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        }
      ]
    }
  ],
  "connections": [
    {
      "source": "INTERNET",
      "target": "us-east-1",
      "metrics": {
        "normal": 26037.626,
        "danger": 92.37
      },
      "notices": [

      ],
      "class": "normal"
    }
  ]
}

I thought perhaps not having maxVolume was the reason, but when I try and add it things just silently fail.

Can you perhaps provide or help me create a minimal configuration that demonstrates all the necessary parts to make this work? I'm happy to help, guinea pig or other wise chip in.

Thanks again!

How to get nodes to layer themselves

I am really enjoying Vizceral but still coming up to speed. Seems most of my questions seem to be undocumented but the big question I am trying to get past is is how to get my nodes to layer themselves better.

Seems I have nodes which are either "left" or Right of the screen.

Since I am not a great programmer, I borrowed the project https://github.com/voelzmo/vizceral-release
as it was designed around ElasticSearch/PacketBeat. Which is exactly what I wanted to create, now I am hacking it to be what I need to demonstrate it to my department.

Here is my data that builds the display (of course obfuscated) , I am sure I am missing something, is there a Layer/Weight/XYZ positioning field, that I need to add?

{
	"renderer": "global",
	"name": "edge",
	"maxVolume": 100000,
	"nodes": [{
		"renderer": "region",
		"layout": "ltrTree",
		"name": "INTERNET",
		"updated": 1493228879510,
		"metadata": {},
		"maxVolume": 1000000
	}, {
		"renderer": "region",
		"layout": "ltrTree",
		"name": "NewYorkColo",
		"updated": 1493228879510,
		"metadata": {},
		"maxVolume": 100000,
		"nodes": [{
			"name": "INTERNET"
		}, {
			"name": "1.2.6.191:12345",
			"metadata": {},
			"renderer": "focusedChild",
			"displayName": "server11lx-searchengine-instance12345"
		}, {
			"name": "10.32.47.25:12345",
			"metadata": {},
			"renderer": "focusedChild",
			"displayName": "server15lx-searchengine-instance12345"
		}, {
			"name": "1.2.30.155:12345",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "1.2.30.156:12345",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "10.32.42.103:12345",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "1.2.6.192:12345",
			"metadata": {},
			"renderer": "focusedChild",
			"displayName": "server12lx-searchengine-instance12345"
		}, {
			"name": "1.2.6.190:12345",
			"metadata": {},
			"renderer": "focusedChild",
			"displayName": "server10lx-searchengine-instance12345"
		}, {
			"name": "1.2.6.195:12345",
			"metadata": {},
			"renderer": "focusedChild",
			"displayName": "server15lx-searchengine-instance12345"
		}, {
			"name": "1.2.6.193:12345",
			"metadata": {},
			"renderer": "focusedChild",
			"displayName": "server13lx-searchengine-instance12345"
		}, {
			"name": "1.2.6.194:12345",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "1.1.4.145:88",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "1.1.4.42:88",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "1.1.4.41:88",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "1.1.4.43:88",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "1.1.4.3:88",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "1.1.4.2:88",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "10.32.42.103:88",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "1.1.4.102:88",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "1.1.102.233:88",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "1.1.103.49:88",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "1.1.103.79:88",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "1.1.100.163:88",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "52.0.38.144:88",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "1.1.4.143:88",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "34.199.167.110:88",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "1.1.4.142:88",
			"metadata": {},
			"renderer": "focusedChild"
		}, {
			"name": "1.1.4.146:88",
			"metadata": {},
			"renderer": "focusedChild"
		}],
		"connections": [{
			"source": "10.32.47.25:12345",
			"target": "1.2.6.191:12345",
			"metrics": {
				"normal": 5932,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.2.30.155:12345",
			"target": "1.2.6.191:12345",
			"metrics": {
				"normal": 0,
				"danger": 52
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.2.30.156:12345",
			"target": "1.2.6.191:12345",
			"metrics": {
				"normal": 0,
				"danger": 49
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.42.103:12345",
			"target": "1.2.6.191:12345",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.47.25:12345",
			"target": "10.32.47.25:12345",
			"metrics": {
				"normal": 5932,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.2.30.155:12345",
			"target": "10.32.47.25:12345",
			"metrics": {
				"normal": 0,
				"danger": 52
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.2.30.156:12345",
			"target": "10.32.47.25:12345",
			"metrics": {
				"normal": 0,
				"danger": 49
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.42.103:12345",
			"target": "10.32.47.25:12345",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.47.25:12345",
			"target": "1.2.6.192:12345",
			"metrics": {
				"normal": 5936,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.2.30.155:12345",
			"target": "1.2.6.192:12345",
			"metrics": {
				"normal": 0,
				"danger": 53
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.2.30.156:12345",
			"target": "1.2.6.192:12345",
			"metrics": {
				"normal": 0,
				"danger": 46
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.42.103:12345",
			"target": "1.2.6.192:12345",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.47.25:12345",
			"target": "1.2.6.190:12345",
			"metrics": {
				"normal": 5500,
				"danger": 1
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.2.30.155:12345",
			"target": "1.2.6.190:12345",
			"metrics": {
				"normal": 0,
				"danger": 53
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.2.30.156:12345",
			"target": "1.2.6.190:12345",
			"metrics": {
				"normal": 0,
				"danger": 49
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.47.25:12345",
			"target": "1.2.6.195:12345",
			"metrics": {
				"normal": 5701,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.2.30.156:12345",
			"target": "1.2.6.195:12345",
			"metrics": {
				"normal": 0,
				"danger": 51
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.2.30.155:12345",
			"target": "1.2.6.195:12345",
			"metrics": {
				"normal": 0,
				"danger": 48
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.42.103:12345",
			"target": "1.2.6.195:12345",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.47.25:12345",
			"target": "1.2.6.193:12345",
			"metrics": {
				"normal": 5539,
				"danger": 3
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.2.30.155:12345",
			"target": "1.2.6.193:12345",
			"metrics": {
				"normal": 0,
				"danger": 53
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.2.30.156:12345",
			"target": "1.2.6.193:12345",
			"metrics": {
				"normal": 0,
				"danger": 49
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.42.103:12345",
			"target": "1.2.6.193:12345",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.47.25:12345",
			"target": "1.2.6.194:12345",
			"metrics": {
				"normal": 6084,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.2.30.156:12345",
			"target": "1.2.6.194:12345",
			"metrics": {
				"normal": 0,
				"danger": 50
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.2.30.155:12345",
			"target": "1.2.6.194:12345",
			"metrics": {
				"normal": 0,
				"danger": 48
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.42.103:12345",
			"target": "1.2.6.194:12345",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.42:88",
			"target": "1.1.4.145:88",
			"metrics": {
				"normal": 1957,
				"danger": 12
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.41:88",
			"target": "1.1.4.145:88",
			"metrics": {
				"normal": 1664,
				"danger": 18
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.43:88",
			"target": "1.1.4.145:88",
			"metrics": {
				"normal": 1569,
				"danger": 6
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.3:88",
			"target": "1.1.4.145:88",
			"metrics": {
				"normal": 14,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.2:88",
			"target": "1.1.4.145:88",
			"metrics": {
				"normal": 12,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.42.103:88",
			"target": "1.1.4.145:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.145:88",
			"target": "1.1.4.102:88",
			"metrics": {
				"normal": 134,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.145:88",
			"target": "1.1.102.233:88",
			"metrics": {
				"normal": 10,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.145:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 8,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.145:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 5,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.145:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 4,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.145:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.42:88",
			"target": "1.1.4.102:88",
			"metrics": {
				"normal": 1957,
				"danger": 12
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.41:88",
			"target": "1.1.4.102:88",
			"metrics": {
				"normal": 1664,
				"danger": 18
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.43:88",
			"target": "1.1.4.102:88",
			"metrics": {
				"normal": 1569,
				"danger": 6
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.3:88",
			"target": "1.1.4.102:88",
			"metrics": {
				"normal": 14,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.2:88",
			"target": "1.1.4.102:88",
			"metrics": {
				"normal": 12,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.42.103:88",
			"target": "1.1.4.102:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "1.1.4.102:88",
			"metrics": {
				"normal": 134,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "1.1.102.233:88",
			"metrics": {
				"normal": 10,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 8,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 5,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 4,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.42:88",
			"target": "1.1.102.233:88",
			"metrics": {
				"normal": 1957,
				"danger": 12
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.41:88",
			"target": "1.1.102.233:88",
			"metrics": {
				"normal": 1664,
				"danger": 18
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.43:88",
			"target": "1.1.102.233:88",
			"metrics": {
				"normal": 1569,
				"danger": 6
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.3:88",
			"target": "1.1.102.233:88",
			"metrics": {
				"normal": 14,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.2:88",
			"target": "1.1.102.233:88",
			"metrics": {
				"normal": 12,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.42.103:88",
			"target": "1.1.102.233:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "1.1.102.233:88",
			"metrics": {
				"normal": 10,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 8,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 5,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 4,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.42:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 1957,
				"danger": 12
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.41:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 1664,
				"danger": 18
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.43:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 1569,
				"danger": 6
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.3:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 14,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.2:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 12,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.42.103:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.49:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 8,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.49:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 5,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.49:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 4,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.49:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.42:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 1957,
				"danger": 12
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.41:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 1664,
				"danger": 18
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.43:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 1569,
				"danger": 6
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.3:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 14,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.2:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 12,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.42.103:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.79:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 5,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.79:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 4,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.79:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.42:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 1957,
				"danger": 12
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.41:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 1664,
				"danger": 18
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.43:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 1569,
				"danger": 6
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.3:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 14,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.2:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 12,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.42.103:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.100.163:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 4,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.100.163:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.42:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 1957,
				"danger": 12
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.41:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 1664,
				"danger": 18
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.43:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 1569,
				"danger": 6
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.3:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 14,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.2:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 12,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.42.103:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "52.0.38.144:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.42:88",
			"target": "1.1.4.143:88",
			"metrics": {
				"normal": 1595,
				"danger": 2
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.43:88",
			"target": "1.1.4.143:88",
			"metrics": {
				"normal": 1447,
				"danger": 1
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.41:88",
			"target": "1.1.4.143:88",
			"metrics": {
				"normal": 1375,
				"danger": 3
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.2:88",
			"target": "1.1.4.143:88",
			"metrics": {
				"normal": 14,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.3:88",
			"target": "1.1.4.143:88",
			"metrics": {
				"normal": 13,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.42.103:88",
			"target": "1.1.4.143:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.143:88",
			"target": "1.1.4.102:88",
			"metrics": {
				"normal": 73,
				"danger": 1
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.143:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 4,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.143:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 3,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.143:88",
			"target": "1.1.102.233:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.143:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.143:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.143:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 4,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 3,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "1.1.102.233:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.100.163:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 3,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.100.163:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "52.0.38.144:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 4,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 3,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.42:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 1595,
				"danger": 2
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.43:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 1447,
				"danger": 1
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.41:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 1375,
				"danger": 3
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.2:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 14,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.3:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 13,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.42.103:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "34.199.167.110:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "34.199.167.110:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "34.199.167.110:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.49:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 4,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.49:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 3,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.49:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.79:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 4,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.79:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 3,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.41:88",
			"target": "1.1.4.142:88",
			"metrics": {
				"normal": 1410,
				"danger": 4
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.43:88",
			"target": "1.1.4.142:88",
			"metrics": {
				"normal": 1384,
				"danger": 5
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.42:88",
			"target": "1.1.4.142:88",
			"metrics": {
				"normal": 1309,
				"danger": 4
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.3:88",
			"target": "1.1.4.142:88",
			"metrics": {
				"normal": 14,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.2:88",
			"target": "1.1.4.142:88",
			"metrics": {
				"normal": 12,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.42.103:88",
			"target": "1.1.4.142:88",
			"metrics": {
				"normal": 3,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.142:88",
			"target": "1.1.4.102:88",
			"metrics": {
				"normal": 74,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.142:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 7,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.142:88",
			"target": "1.1.102.233:88",
			"metrics": {
				"normal": 5,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.142:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 5,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.142:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.142:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.142:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 7,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "1.1.102.233:88",
			"metrics": {
				"normal": 5,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 5,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.100.163:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.100.163:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 7,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 5,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.49:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 7,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.49:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.49:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "34.199.167.110:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 5,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "34.199.167.110:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "52.0.38.144:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.79:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 7,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.79:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.43:88",
			"target": "1.1.4.146:88",
			"metrics": {
				"normal": 1481,
				"danger": 8
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.41:88",
			"target": "1.1.4.146:88",
			"metrics": {
				"normal": 1396,
				"danger": 8
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.42:88",
			"target": "1.1.4.146:88",
			"metrics": {
				"normal": 1087,
				"danger": 5
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.3:88",
			"target": "1.1.4.146:88",
			"metrics": {
				"normal": 14,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.2:88",
			"target": "1.1.4.146:88",
			"metrics": {
				"normal": 12,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "10.32.42.103:88",
			"target": "1.1.4.146:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.146:88",
			"target": "1.1.4.102:88",
			"metrics": {
				"normal": 95,
				"danger": 1
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.146:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 8,
				"danger": 1
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.146:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 8,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.146:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 5,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.146:88",
			"target": "1.1.102.233:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.146:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.146:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 8,
				"danger": 1
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 8,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 5,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "1.1.102.233:88",
			"metrics": {
				"normal": 2,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.4.102:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.49:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 8,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.49:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 5,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.49:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.100.163:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.100.163:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.79:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 8,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.103.79:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 8,
				"danger": 1
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "1.1.100.163:88",
			"metrics": {
				"normal": 8,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 5,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "1.1.102.233:88",
			"target": "52.0.38.144:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "34.199.167.110:88",
			"target": "1.1.103.49:88",
			"metrics": {
				"normal": 8,
				"danger": 1
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "34.199.167.110:88",
			"target": "1.1.103.79:88",
			"metrics": {
				"normal": 5,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}, {
			"source": "52.0.38.144:88",
			"target": "34.199.167.110:88",
			"metrics": {
				"normal": 1,
				"danger": 0
			},
			"metadata": {
				"request_type": "http"
			}
		}]
	}],
	"connections": [{
		"source": "INTERNET",
		"target": "NewYorkColo",
		"metrics": {
			"normal": 100
		},
		"notices": [],
		"class": "normal"
	}]
}

event api for mouseover

Even though connection & node are getting visually highlighted on mouseover but there is no event API to capture it.
Can the same be also included in objectHighlighted or in a new API ?

When a node is clicked, a connection is selected

When clicking on a node, there is a good change that the node is not selected, but the connection. It looks like the click event for the connection is fired because that is the one which is selected.

Mouse over breaks on scroll

I managed to get a bunch of nodes and edges to populate over a canvas. Now that this has been accomplished my browser activates an auto horizontal scroll so I can scroll to the right to see all my nodes. I made the canvas large (5000px) for now. The problem I'm having is that when I scroll to the right the node hover feature is disabled. I just hover over nodes and nothing happens! Please provide some direction or a resolution on the mouse over updates, as this seems like a legitimate bug.

Integration with AWS

Hi all
where config for integration with AWS, for example region singapore

[feature request] Particle shapes

We are using Vizceral and an expanded version of the React example app with a lot of success. One item that would be a great benefit for our enterprise is to be able to provide different particle shapes which indicate types of traffic, while still allowing the particle coloring. With additional filters which we have introduced it would allow us to more quickly understand the scope of a problem and usage patterns. Example 'E' and 'I" flying around to indicate internal vs external requests :)

Thanks
Ryan

Memory leak when using Vizceral's updateData function

I have a single vizceral graph which i am auto-refreshing using updateData() function on same vizceral object. I see some memory leak every time I refresh. I see the memory size keeps on increasing with every refresh. I see that count of Float32Array, BufferAttribute, WebGlBuffer and few other objects keep getting increased. Can I do something to avoid it? Is this issue Vizceral related?

        $scope.$watch('esResponse', function (resp) {
            if (resp) {
                if (!viz) {
                    var canvas = "<canvas id='vizceral'></canvas>";
                    angular.element('#vizceral-parent').append(canvas);
                    viz = new Vizceral.default(document.getElementById('vizceral'));
                }
                configureVizceral(viz);               // Configures vizceral object using updateStyles() function
                loadVizceral(resp);
            }
        });

function loadVizceral(resp) {
            var responseJson = $scope.createVizceralJson(resp.Response.Tables[0]);
            viz.updateData(responseJson);
            viz.setOptions({ 'allowDraggingOfNodes': $scope.vis.params.allowDraggingOfNodes, 'showLabels': $scope.vis.params.showLabels });
            viz.setView();
            window.cancelAnimationFrame(viz.requestId);
            viz.requestId = undefined;
            viz.animate();
        }

redundant || in trafficGraph's getNode

the return line here

vizceral/src/base/trafficGraph.js

Line 98 in bacb046

return nodes[0] || this.nodes[nodeName];

does:

return nodes[0] || this.nodes[nodeName];

but at that point this.nodes[nodeName] is undefined because of the check here

vizceral/src/base/trafficGraph.js

Line 94 in bacb046

if (this.nodes[nodeName]) { return this.nodes[nodeName]; }

a solution would be to just do

return nodes[0];

this.loadingSpinner is undefined when calling updatedata() with the new json

hi, i want to call the updatedata() function every time i have new data from my backend server, my code is almost working when i have new data the canvas is updated but no visualisation and i got this error :

this.loadingSpinner is undefined:
TypeError: this.loadingSpinner.rotateOnAxis is undefined

when i checked vizceral.js and comment this part of the update() (
// If things are still loading, rotate the circle
if (!this.loaded) {
this.loadingSpinner.rotateOnAxis(zAxis, -0.05);
})
it works but i have a lot of region loading and overlap of nodes,

Only one global node

Because our global view represents Erlang cluster, there are situations when we have only one node. With this setup our global view is empty. Is there any way we can show only one node on global view?

Cannot change background color

Hi,

I found I was only able to change the color of the donuts and texts. The backgroud color remains as the default (45, 45, 45). Anyone knows if it is a bug?

Thanks a lot

showNotice assumes noticeElement has at least one child

here https://github.com/Netflix/vizceral/blob/master/src/notices.js#L30 it calls noticeListElement.hasChildNodes() assuming noticeElement.firstChild (https://github.com/Netflix/vizceral/blob/master/src/notices.js#L25) returns something, noticeElement may not have any child and in that case the while condition will throw an error.

I can provide a PR with a check before the while if it's ok.

Required INTERNET node

We're using Vizceral for displaying communication between nodes in cluster, and processes in node on Erlang VM. Because cluster can have internal communication without internet input/output is there possibility to replace required INTERNET node with any other node which can be clicked?

Maybe I missed some part about it in documentation. If it's not possible right now maybe you can point me into right direction with that so I can try to come up with some solution to this problem.

Nodes in global view cannot send and receive data

I'm using this for my data:

{ name: 'root', renderer: 'global', maxVolume: 500, nodes: [{ name: '1' }, { name: '2' } ], connections: [{ source: '1', target: '2', metrics: { normal: 100, warning: 95, danger: 5 } }, { source: '2', target: '1', metrics: { normal: 100, warning: 95, danger: 5 } } ] }

The result is the attached screenshot. Am I doing something wrong?

ECS-5 Distribution

@jrsquared can you provide a transpiled copy of the distributed sources from ECMAScript-6 to ECMAScript-5? I would greatly appreciate this (older browser compatibility). Also thank you so much for maintaining vizceral. I really appreciate all your hard work. See note:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

I realize I can do this with babel but was concerned about doing so because you are using AMD and Webpack and it looks like you're doing some custom stuff in your source.

Traffic with no global level (region and focusedChild renders only) breaks focused zoom behavior

This issue was found while following along with the conversation in issue #57, which contains a post that duplicates most of what is here to keep it synced with the conversation that "birthed it", but is a separate issue. Since, this is to open the issue it has the context needed to reproduce it paraphrased here.

The data format structure shows a renderer: global as the top most parent in the traffic data JSON, but apparently this is not required. You can actually start with a renderer: region, which is my desired use case. That is a region which is the parent of a collection of nodes that use renderer: focusedChild and the connections between these child nodes (children of the region).

When you load and graph a JSON structure that has no global level....
---------<begin duplicate content from issue #57 post>-----------
It does kind of work, but there is something crazy happens with event attachments or something. I took my usual test JSON file which consist of one region, an Internet node and a single connection between them at the global, while the region is has about 30+ nodes interconnected. I deleted the global render chunk so that only the region node and its children remained.

It graphed just like expected (ltrTree), but none of the child nodes can be zoomed into. In fact, when I lathered the whole thing up with breakpoints I only get a breakpoint on the single click which opens the details panel, but nothing at all for the double-click that should zoom to the detail level.

Nodes aligned in a vertical line even with connections between them

Seems like quite often I get all the nodes aligned in a vertical line, even though there are connections between them. This doesn't seem to happen in the examples. What are some parameters I could tweak to make it better?

nodes lining up into two columns

I followed the instructions from Getting-Started, specifically the HTML/ES5 section.

The problem is that my nodes at the region level, are lining up into two columns. One column all the way to the left and one all the way to the right. This causes a problem because all the nodes on the right column have connections with each other and its hard to tell where those connections are connecting to, due to everything overlapping in that one column. Is there a way to force the nodes to cascade like in this example?

[FEATURE] customize a specific node

Is it possible to customize a specific node css style ?
For example, INTERNET node is special, so I would like it to be more apparent.

Request for advice/help with debugging

@jrsquared,
I have been trying to understand how the left-to-right tree layout works in hope of figuring out why when sometimes when I drill down to level-3 (focusedChild style) the node drilled into has all of its incoming and outgoing connected nodes stacked directly on top of the node (i.e., all the little circle nodes are stacked on top of the donut graph node), but for the life of me I cannot find a way to debug in to the ltrTreeLayout code from my top-level wrapper.

The vizceral-example is the bases of my top-layer, then I make use of vizceral-react and vizceral all locally linked using npm. I've made sure to generate source-maps and load them in to Chrome, but they only point to the vizceral-react "bundle" and I can't seem to get all the way down into the vizceral library bundle.

I've even tried configuring VS code as the debugging interface/iDE, but at this point after 5 frustrating days of failed configurations and settings in VS code and webpack. I'm ready to stop being stubborn and ask for help.

What do you use for debugging (i.e. an IDE?, a browser?, something else entirely?)
How would you debug, specifically set breakpoints, in ltrTreeLayout?
Is it even possible to set a breakpoint that can be reached in say ltrTreeLayout or ltrTreeLayoutWorker when running vizceral-example as the top-level?
Do you "disable" the web-worker so that the position setting code isn't webpack'ed into an obfuscated nightmare?

Any advice would be greatly appreciated.

Thanks

Is there a way to keep moving nodes inside the canvas boundaries?

I am trying to make the moving nodes not go beyond the canvas width and height. I initially thought I can restrict the node position to be in this boundary {-canvas.width/2, canvas.width/2} and {-canvas.height/2, canvas.height/2} but the position of nodes seem different than what I expected.

Can someone please guide me on how should I proceed? I tried using this.vizceral.currentGraph.layoutDimensions, but looks like this is also not the right dimensions for full canvas. Where are the correct the height and width dimension of vizceral stored which can be used to create canvas boundary?

Thanks

Vanilla JS Example - new TypeError

@jrsquared
Just pulled down Vizceral 3.0.5 and transpiled via npm the sources to ECMAScript 5. Receiving the following error in Firefox 40 (Firebug):

TypeError: childrenIds.includes is not a function

return childrenIds.includes(c.id);

This is coming from line 67827

What I did was hack the transpiled source for that line.

BEFORE:
return childrenIds.includes(c.id);

AFTER:
return function( ) {return childrenIds.includes(c.id));

I'm not sure where to make this change in the source but the hack works for me as a temporary solution. Just wanted to put this on your radar.

Memory leak within canvas

This may be a core JavaScript issue but I have a bunch of Vizceral graphs that I'm loading one at a time via a drop down menu. The problem is when each graph loads, it sets the current Vizceral object to null in hopes of the JS garbage collector picking it up. There seems to be a memory leak, where the memory occupied by Vizceral is still present and this is eating up the browser memory. I am running on Mozilla Firefox 40 and I know this utilizes Spider Monkey as opposed to the V8 JS engine in Google Chrome. Thoughts? Is this a JS issue and not Vizceral related?

Release notes?

Hey, thanks for vizceral, it's amazing tool which I love to use.
However, it has been pretty tricky to figure out what changed compared to the last release. Especially in situation where you e.g. released 4.2.3 and 4.3 on the same day. What lead to a micro bump followed by a minor bump? What were the breaking changes between say 3.x and 4.x?

Could you please maintain a changelog/releasenotes, so I don't have to dig through individual commits?

Thanks!

Extract tree layout

Hi!

Your Tree Layout implementation looks nice. Could you please extract it as a separate library?

Thanks!

How to save relative position of nodes if changed by user?

Hello!

I have a question regarding the positioning of nodes. Suppose, someone changes the position of nodes on global or detailed view, is it possible to save the relative position of nodes so that resizing etc keeps the order same? Is it possible to save that state, so that if user reloads the browser it remains same?

Thanks a lot for your help in advance! Vizceral tool is pretty cool and works great for our scenario.

Vizceral Transpile Breaks on Lodash

With the latest 3.0.6 I run the following:

npm install && npm run build

And am receiving this error:

ERROR in vizceral.min.js from UglifyJS
SnytaxError: Unexpected token: name (_) [./src/vizceral.js:18,0]

Stacked nodes at the detail nodes zoom level, entryNodeMap issue

There is an issue that I have finally traced back to a single root cause.

The issue is most obvious at the detail node "zoom" level, but may also exist in the region level, but I haven't specifically looked for it there.

The problem in the detail node zoom level is that all the nodes end up stacked on top of each other in the center. It doesn't happen to every node that is drilled down to the detail zoom level. This is the key. It turns out that bi-directional nodes get eliminated from the _enteryNodeMap (created in ltrTreeGraph.js) and so never get a rank or position.

The issue is even worse if all of the incoming connections have a outgoing connection (i.e. are bi-directional) then none of the nodes get placed. Every single one is stacked one on top of the other in the center.

I suggest that any that the source node of any incoming connection/edge should remain in the _entryNodeMap regardless of whether it is a bi-directional connect... but I don't know what the consequences might be.

I've created a JSON data set that shows three possible results you can get when going to node detail level.

Go into the soup-sandwich region view and drill into:

AAA -- this detail view is perfect, it also has NO bi-directional connections
ZOOM-ME -- this detail view is the worst case with all nodes stacked. The "trigger" is that all of the incoming connections are bi-directional.
ZOOM-ME-2nd -- this detail view is half-and-half. It has 2 incoming connections and only one is bi-directional, so only one node is stacked in the center.

Thanks!

Rename file ending from TXT to JSON
[bi-directional-cnct-example_v2_json.txt] <-- UPDATED: to proper focusedChild, was just focused
bi-directional-cnct-example_v2_json.txt

Nodes outside view port when physics layout enabled

It appears that when using the recently merged physics layout option @jbrekelmans that nodes can end up outside the view port of the canvas.

Using vizceral ver 4.2.1, vizceral-react ver 4.2.0, and vizceral-example commit 0a17500211f12130cffb4b88145ad503ca6169bc (Note: vizceral-example needs a version tick in package.json), and the sample_data.json that is in that same vizceral-example commit.

It seems that the physics based layout is "skipping" a updatePosition call or needs something like the recalculateOrbitSize() call that was added in 386ee4e in globalTrafficGraph.js, but has moved to the ringCenterLayout in the latest commit.

Thanks for all the fixes and improvements @jbrekelmans and @jrsquared. My own work has seen immediate improved performance thanks to your efforts.

What's the roadmap for Vizceral features / additions for the foreseeable future?

ltrTreeLayouter gravitates leaves to the right

tl;dr: I was going through the source code and commits and couldn't find if the leaves gravitating to the right is desired or not.

It's actually more of a question. I created a graph and I noticed that on the region view (ltrTreeLayout), the leaves gravitate to the right. A render is better here (labels redacted):

The leaves in question are circled in red. I would expect them to appear on +1 level of their parent. I modified the ltrTreeLayouter.js code to produce the following for the same traffic.json:

My first assumption, as for the intuitive aspect of vizceral, is that it's a matter of personal preference. So I guess my question is, is it on purpose? And if it is, is there a way to override the rendering functions with our own (instead of changing vizceral's source)? If it's not, I'll happily send a PR with the modification.

Particle Release Bug

I have found a bug regarding the release of particles. It is most noticeable the first time you enter a region. Specifically look at the high volume connections. It causes clumps of particles to be released.

I've attached a test case (JSON) file that exhibits this behavior. The maxVolume region is 5505. The highest volume connection is 4375 and the next highest volume is 345. Visually, the 4375 connection appears to not be carrying as much volume as the 345 connection for first 30 seconds or so.

Additionally, if you comment out the addition of the random value to the velocities of each particle in /src/base/connectionView.js so that all particles have the same velocity the release bug is much more easily seen. In fact, the high volume (4375) connection never appears as even a slightly continuous release of particles. It just burst out a clump of particles approximately ever 7.5 seconds, while the 345 connection is a solid stream of particles. It was when I gave all particles the same velocity that I actually found this bug. I need my end-users to stop thinking that some packets are "faster" than others when interpreting the Vizceral traffic display.

AFTER THOUGHT: After writing all this I realized that I could make it easier to debug and see the release bug by making an even simpler "slower" JSON test file. So I've attached a that file and a quick description of it. I wish I had started with it, so I suggest if you're following along that you use it. The release bug is very noticeable when using this file and static velocities.

I read the comments in connectionView.js for updateVolume() about not using a logarithmic scale for particle release/density and was trying to follow with why the times used where selected...
The first value is the volume and the second the max-particles-released-per-tick, right?

    this.rateMap = [
      [0, 0],
      [Number.MIN_VALUE, secondsPerReleaseToReleasesPerTick(10)],
      [1, secondsPerReleaseToReleasesPerTick(7)],
      [10, secondsPerReleaseToReleasesPerTick(5)],
    ];
    if (maxVolume > 0) {
      this.rateMap.push([100, 100 * linearRatio]);
    }
    if (maxVolume > 100) {
      this.rateMap.push([maxVolume, maxReleasesPerTick]);
    }

In my reasoning, I can see the granularity of rateMap as being a reason why higher volume connections are likely indistinguishable visually, but I wouldn't expect it to result in high volume connections not releasing particles on every tick. Still even with another entry in the rateMap for say half the of the maxVolume it doesn't seem likely to address the particle clumping on release. I didn't try adding another entry to rateMap as I can't figure out the pattern (?) to the secondsPerReleaseToreleasesPerTick() input.

Why 0 seconds, 10 seconds, 7, seconds, and 5 seconds?
Why the use of the linear ratio for just if the volume is 100?
Why use the linear interpolation (interpolateY in mapVolume) instead of the linear ratio?

Side Note

It appears to me that secondsPerReleaseToReleasesPerTick requires that the frame rate be 60fps, but targetFrameRate could cause this to be something totally different. I'm kind of basing this on assumptions based on rptToRPS being short for "release per tick to release per second" and rptToSPR being "release per tick to seconds per release", so I'm more asking for clarification than anything.
In all my testing/debugging I have made sure the targetFrameRate was set to 60.

Empirically, for the provided test data, I have found that the break point of where a noticeable gap shows up is around 600 (at 600 no noticeable gap, at 700 there IS a noticeable gap). This with the random velocities! It does not hold true for constant velocities! When using constant velocities the behavior is still clumped, but it is interesting to note that if you vary the volume the closer you get to 100, the longer the clumps are, e.g. the 4375 clump is quite short in length, but if you set the next highest volume to say 500 the clump is about 9/10ths of the length of the connection itself. And at 400 it is just barely not long enough or the next release not soon enough to appear as a continuous stream of particles when using static velocities.

For the provided test data, the particle release "parameters" are:

Volume	Releases per Second	Releases per Tick	Seconds per Release
4375	905.9945	15.0999	0.001103
345	71.4441	1.190736	0.013997
1	0.14285	0.002381	7

The rateMap is:

Index	[x, y]
0	[ 0, 0]
1	[5*10^-324, 0.0016667]
2	[1, 0.0023809]
3	[10, 0.0033333]
4	[100, 0.3451407]
5	[5505, 19]

So for the 4375, the releases per tick seem reasonable since in rateMap 5505 gets 19 releases per tick, but it sure doesn't do that.

FILES

particle_release_bug.txt <-- Change file ending to JSON

particle_release_bug_second.txt<-- Change file ending to JSON
This file only has 6 nodes, and 5 connections. The maxVolume is only 60 and the connection volumes are 1, 7, 10, 25, and 45. The highest volume connections are still released as clumps, but you can also clearly see that the 1-RPS connection often looks/releases faster than the 7-RPS and 10-RPS connections.

I know you (@jrsquared) are busy, so I'm more than happy to run this down. But I'm at the point where I need guidance and information from the author(s). Stuff like what in the general concept of how the nextFreeParticleIndex is supposed to work and how it get to be a -1 and when it is -1 how it ever becomes positive again.

Whether to support the layout of the specified node level?

Hey，On the layout of the node, I would like to specify the part of the node layout at the same level, whether to do？

Selecting a directed edge

I am unable to find a way to specify the direction when selecting an edge. If there is traffic from A -> B, and also from B -> A, looks like it chooses the direction with more traffic.

How about adding the capability to specify the direction depending upon which half of the edge was clicked?

Some nodes disappear at 230 services

Somehow nodes disappear, when the total count of visible services reaches to about 230 and if there are colored nodes (e.g. warning).
The node (the circle with label) becomes visible, if I highlight another node or connection. I attached the data JSON and screenshots of the problem.

Sample JSON: viz-bug-sample_data.json.txt

Some nodes are not visible (most of class warning):

After a highlight of other nodes, they become visible but only while dimmed:

Is the problem in the data or is it a visualisation problem/bug?
How could I research further on this bug, maybe you could point me into some direction?

Thank you very much for this fine framework and all of your efforts!

Extending vizceral

Frankly I may have no idea what I'm doing, but it seems to me like vizceral installed from npm isn't exporting it's subclasses, therefore it's hard to write custom functionality like custom renderers without resorting to copying the entire vizceral codebase to my own project.

After several hours on the web I finally gave up and I'm writing this "issue", because maybe I'm doing something wrong, but trying to import something like the Connection class by doing import Connection from 'Vizceral/base/connection'; (or variants of it) it always ends up with something like Module not found: Error: Cannot resolve module 'Vizceral/base/connection'

Exporting the specific classes from vizceral.js works but needs to change the upstream files in my own repo.
Is this intended behaviour or am I doing something wrong here?

4 nodes on global view goes to edge of screen

I'm using the vizceral example project and below is a sample json file that shows it.
I figured since the example file uses vizceral as a base, it makes more sense that this is a display problem with the base project than the example itself.

{
  "renderer": "global",
  "name": "edge",
  "nodes": [
    {
      "renderer": "region",
      "name": "INTERNET",
      "updated": 1466838417510,
      "nodes": [
      ],
      "class": "normal"
    },
    {
      "renderer": "region",
      "name": "node1",
      "updated": 1466838417510,
      "maxVolume": 50000,
      "class": "normal",
      "nodes": [
        {
          "name": "INTERNET",
          "class": "normal"
        },
        {
          "name": "test1node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test2node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test3node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test4node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test5node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test6node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test7node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test8node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        }
      ],
      "connections": [
        {
          "source": "INTERNET",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 0.646,
            "normal": 31.12
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test1node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test2node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test3node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test4node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test5node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test6node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test7node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test8node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        }
      ],
      "class": "normal"
    },
    {
      "renderer": "region",
      "name": "node2",
      "updated": 1466838417510,
      "maxVolume": 50000,
      "class": "normal",
      "nodes": [
        {
          "name": "INTERNET",
          "class": "normal"
        },
        {
          "name": "test1node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test2node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test3node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test4node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test5node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test6node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test7node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test8node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        }
      ],
      "connections": [
        {
          "source": "INTERNET",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 0.646,
            "normal": 31.12
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test1node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test2node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test3node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test4node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test5node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test6node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test7node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test8node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        }
      ],
      "class": "normal"
    },
    {
      "renderer": "region",
      "name": "node4",
      "updated": 1466838417510,
      "maxVolume": 50000,
      "class": "normal",
      "nodes": [
        {
          "name": "INTERNET",
          "class": "normal"
        },
        {
          "name": "test1node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test2node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test3node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test4node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test5node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test6node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test7node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test8node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        }
      ],
      "connections": [
        {
          "source": "INTERNET",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 0.646,
            "normal": 31.12
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test1node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test2node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test3node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test4node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test5node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test6node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test7node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test8node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        }
      ],
      "class": "normal"
    },
    {
      "renderer": "region",
      "name": "node3",
      "maxVolume": 50000,
      "class": "normal",
      "updated": 1466838546805,
      "nodes": [
        {
          "name": "INTERNET",
          "class": "normal"
        },
        {
          "name": "test1node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test2node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test3node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test4node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test5node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test6node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test7node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        },
        {
          "name": "test8node",
          "metadata": {
            "streaming": true
          },
          "class": "normal"
        }
      ],
      "connections": [
        {
          "source": "INTERNET",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 0.646,
            "normal": 31.12
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test1node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 15598.906
          },
          "status": {
            "danger": 281.33,
            "normal": 65364.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test2node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 3472.906
          },
          "status": {
            "danger": 281.33,
            "normal": 6437.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test3node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 542.906
          },
          "status": {
            "danger": 281.33,
            "normal": 789.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test4node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 6436.906
          },
          "status": {
            "danger": 281.33,
            "normal": 734.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test5node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 7347.906
          },
          "status": {
            "danger": 281.33,
            "normal": 64.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test6node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 431.906
          },
          "status": {
            "danger": 281.33,
            "normal": 987.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test7node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 5278.906
          },
          "status": {
            "danger": 281.33,
            "normal": 523.56
          },
          "class": "normal"
        },
        {
          "source": "INTERNET",
          "target": "test8node",
          "metadata": {
            "streaming": true
          },
          "metrics": {
            "danger": 116.524,
            "normal": 545.906
          },
          "status": {
            "danger": 281.33,
            "normal": 6345.56
          },
          "class": "normal"
        }
      ]
    }
  ],
  "connections": [
    {
      "source": "INTERNET",
      "target": "node3",
      "metrics": {
        "normal": 664.626,
        "danger": 92.37
      },
      "notices": [

      ],
      "class": "normal"
    },
    {
        "source": "INTERNET",
        "target": "node1",
        "metrics": {
            "normal": 6546.45599999999,
            "danger": 25.083999999999996,
            "warning": 0.022
        },
        "notices": [],
        "class": "normal"
    }, {
        "source": "INTERNET",
        "target": "node2",
        "metrics": {
            "normal": 8751.626,
            "danger": 92.36999999999999
        },
        "notices": [],
        "class": "normal"
    }, {
        "source": "INTERNET",
        "target": "node4",
        "metrics": {
            "normal": 9287.85,
            "danger": 18.774000000000004,
            "warning": 0.004
        },
        "notices": [],
        "class": "normal"
    }
  ]
}

filterGraph's getNode assumes all nodes have a nodes array attribute

here

vizceral/src/base/trafficGraph.js

Line 97 in bacb046

 const nodes = _.filter(this.nodes, node => _.includes(node.nodes.map(n => n.name), nodeName)); 

one solution would be to document that it's required, the other to check that node.nodes is an array.

the data here https://github.com/Netflix/vizceral-example/blob/master/src/sample_data.json seems to have some nodes withouth a nodes attribute and on click it throws an error.

Less CPU consumption?

Hi guys,
Thanks for opensourcing such a great visualisation tool!
Is there a way to reduce the amount of CPU cycles needed for running it?
Chrome on OSX takes 300% running the example and my fan goes crazy.

Position object is not working in first updateData method.

Hi, I want to fox the position of nodes so I am adding position:{x:value , y:value} in my regional nodes. I am refreshing my data using socket io every 3 seconds for new values in connections but my nodes and connections remains same. I am using vizceral-react for this project. Now the problem I am facing is that when first time I add data in my react component, nodes position randomly selected but after next iteration it uses my nodes position. I don't know why this is happing. This is my code.


 class App extends Component {

    constructor() {
      super();
       this.state={
         
         isShow:false,
          allowDraggingOfNodes:true
        }
          socket.on('event',function(data){
            self.setState({ trafficData: data, isShow:true });
          });
    }
render() {
    
    return (
      <div>
             <Vizceral traffic={this.state.trafficData}
                  allowDraggingOfNodes={this.state.allowDraggingOfNodes}
               />
       </div>
          
    );
  }
}

Every time I send my data with positions. This issue is common in simple javascript also thats why I created issue here.

notices assumes .connection-notice exists

here

vizceral/src/notices.js

Line 59 in bacb046

noticeElement.style.display = 'none';

and in other places the code operates on noticeElement assuming there is at least a node with the class .connection-notice

one solution is to check if the result of querySelector is defined, the other is to document that it's required to have a tag with that class.

I can provide the patch for this change if you prefer so.

Vanilla JS Example

@jrsquared I'm making progress since the latest webpack.config.js update you released a few days ago. Also your response to issue 12 was cut short. I'm not sure what happened but I'm seeing:

...
I am going to close this bug since vizceral is outputting transpiled javascript. If you are still having trouble using vizceral with a

I would really like to know what the last part of that sentence said! 👍

I realized that my scripts were loading before the page finished loading. I have corrected this and have:

<html>
  <head>
    <script src="./lib/vizceral_ecs6.js"></script>
    <script>
      function run( ) {
        var viz = window.Vizceral(document.getElementById('test'));
        viz.updateData({name: 'us-west-2', renderer: 'global', nodes: [{name: 'a'},{name: 'b'}], connections: [{source: 'a', target: 'b'}]});
        viz.setView();
     }
  }
  </script>
  </head>
  <body onload='javascript:run( )'>
    <canvas id='test'></canvas>
  </body>
</html>

In Firefox I'm seeing Vizceral is attached to the window:

Object{ default=Vizceral }

That's promising!

If I expand this object I'm seeing a default property such that:

default -> Vizceral(canvas)

But the error remains:

TypeError: window.Vizceral is not a function

You can certainly ignore or drop this issue, as it's more of a request but if you have time please provide an example of importing Vizceral(somecanvas) via the <script> tag. Ideally the example could be based off of what is already in this post as this is a trivial snippet of html and JS. I'm super close and I'm confident others would benefit from seeing this example, especially for those of us running in older browsers. Thank you.

Historical graph?

Hi,

The screenshot in the blog post about the open source of Vizceral shows also a historical graph for each node ( https://2.bp.blogspot.com/-R3OvpmfJPAk/V5-ds9USmQI/AAAAAAAAAmE/ri3UgSwrcc8uw8hglR2rPWIiK5rFSJ-agCLcB/s1600/global%2Bgraph.png ).

Is there a way to enable it? (I've converted the example app to show our data - pretty cool thing by the way, thank you for this! - but that graph is not showing).

"Extra" objectHighlighted event emitted during updateDate...?

I'm chasing a bit of logic to allow me to close the details panel in vizceral-example and yet keep the selected node highlighted without the detail panel popping back out on the next update/render cycle that propagates through.

I thought I had found the perfect existing signal to simple add on as a second argument to be emitted whenever the objectHighlighted event is emitted, which was force found in the highlightedObject function found in trafficGraph.js.

But there is one hick-up. When the updating cycle is going and there is new traffic data call stack works out to be:

updateData (vizceral.js) -> updateGraph (vizceral.js) -> setState (trafficGraph.js) -> emitObjectUpdated (trafficGraph.js) -> which emits the objectHighlighted event

As these functions return the setState call completes and the next piece of updateGraph executes:

updateData (vizceral.js) -> updateGraph (vizceral.js) -> validateLayout (trafficGraph.js) -> updateView (trafficGraph.js) -> highlightedObject (trafficGraph.js) -> which emits the objectHighlighted event for the 2nd time since updateGraph was called.

It is that the objectHighlighted event is fired twice that is causing me trouble. The highlightedObject function always So my questions is,

Why does the second "path" to emitting the objectHighlighed event in updateGraph (i.e. the validateLayout call), call the highlightedObject function since setState seems to have already taken care of that?

Hmmm, now that I've read my own question I think it isn't the best question. This one is probably the better question.

Why does the setState of trafficGraph.js even need to emit the objectHighlighed event? So far, I haven't found a situation where the state of a "graph" object is more than the traffic data, e.g. nodes, connections, render, layout, updated, etc. and possibly an entryNode key.

Or should I do something totally different. Chasing this rabbit trail stems from trying to be able to single-click a node in the vizceral-example to open the detail panel, then close the detail panel but keeping the clicked node highlighted. This works fine until the traffic data updates and ultimately causes the objectHighlighted events to fire in vizceral.js.

Thoughts? Suggestions?

Method missing

It seems like method setHighlightedObject is missing. It is used in zoomOutViewLevel

Could it be this.currentGraph.highlightObject(undefined) instead?

Particles flickering

When we have bi-directional connection between two nodes and one of them is another color (warrning, error) there is flickering between layers. There is probably the same thing with normal particles but because of the same neutral color it's not visible.

This may happend because of texture overlay on the same axis.

Here is an example: https://youtu.be/-AvscsVSyck

Minimal Distribution

@jrsquared I'm using Angular 1.5 and can't seem to apply your example directly in the source. This fails:
var canvas = angular.element('#canvasOnWebPage'); var my_canvas = new Vizceral(canvas);
I don't want to: import Vizceral from 'vizceral' Is there a way to just link directly into a page with the script tag along with all the other Angular dependencies? Seems that your vis.js is wrapped with webpack. Is this absolutely necessary or can webpack and CommonJS be removed? I suppose this is more of a feature request. 👍 Also thank you so much for working on this. The open source community really appreciates your efforts!

Node and connection select-ability broken after update to 4.0.2

I've been working from the vizceral-example project and have really appreciated the last couple of weeks of updates, especially the more in-depth documentation. At any rate, I am just experimenting with adding some of my own filters and so my work is basically stock. I changed the package.json for vizceral-example to require use the vizceral-react ver ~4.0.0, which pulls vizceral ver ~4.0.0.

This caused the "click-ability" of the nodes and connections in a region view to no longer even be an option. I tried a clean clone of vizceral-example and via "npm list vizceral" which reports:

└─┬ [email protected]
  └── [email protected]

When I change the package.json of vizceral-example to using [email protected] (output from "npm link vizceral")

└─┬ [email protected]
  └── [email protected]

The only "clickable" items are those in the global view. Once in the region view no connection or node is clickable.

Thanks for the great work and a beautiful tool.

netflix / vizceral Goto Github PK

vizceral's Introduction

vizceral

Not actively maintained

Using

Developing Locally

Contributing

Supported Browsers

TODO

License

vizceral's People

Contributors

Stargazers

Watchers

Forkers

vizceral's Issues

FILES

Recommend Projects

Recommend Topics

Recommend Org