netflix / vizceral-example Goto Github PK

Example Vizceral app

License: Apache License 2.0

CSS 18.79% JavaScript 79.05% HTML 1.89% Dockerfile 0.27%

vizceral-example's Introduction

Vizceral Example

This is a sample application using the React wrapper around the vizceral graph. For more details about using vizceral in your own projects with your own data, refer to the above repositories.

Setup

Get source, install deps, and run demo server.

git clone [email protected]:Netflix/vizceral-example.git
cd vizceral-example
npm install
npm run dev

Open localhost:8080 in your browser.

Using Docker

If you don't have a node environment setup or would like to run this example on a platform, there is a Dockerfile for experimental usage.

$ docker build -t <name>/vizceral-example .

$ docker run -p 41911:8080 -d <name>/vizceral-example

Then you should be able to navigate to http://localhost:41911

vizceral-example's People

Contributors

Stargazers

Watchers

Forkers

jolexa juhap aldomatic urtens adrianco nico01f leoipreo m3r00t mayblue9 ghoranyi erotica lhayhurst btorretta nanderoo localtest eformat ampg99 seomoz containerz digideskio containersolutions josephruscio spscommerce jackskellington27 neontreesolutions si022833 cmtatro simonasrazm pnuckowski ahuwaa younjinjeong gairadzi gpegel g711ab alexxnica vonage anfanycw jamesgunja aranajhonny asqrd-esqrd mariuscoto archsaber akumar-nisum-com kryndex yannlambret nab0310 leilaelorfi vittvolt teekaay wongjonathan maniacs-oss luman75 louwersj mrmarss blackducksoftware vshamgin rooftopsparrow davidjbolt prabhurangan anokun7 meplay adityapani newpma chris-fans amedia rishi167 yabingl enns tullioravazzani elicherla01 ethiansjh hemal7735 jeqo mattiascaricato hiyangw rwprice sijojosan21 d4tocchini thejumpcloud defensoriapublicars trojanwolf filipecosta90 payashrm murathalici benzvan joshuansu0897 vfal-dev1 yisraelu cglewis 4n3w nkelly75 thehackercat rborgese fizalihsan jlouis94 vinigarg addepar dav1dc-pcf albertlieyingadrian sung1262

vizceral-example's Issues

Number of service versus number filtered is incorrect

It took another day to compare the behavior between version 3.x.x and 4.x.x to make sure it was actually behaving correctly in ver 3.x (it was) and not just something I'd never noticed till running into issue #17. This issue becomes very clear when following the steps to re-produce issue #17. Particularly, it played a big roll in why I had the impression that the entire browser is hung, since the graph is "frozen" and the number of filtered items is zero.

After quite a bit of careful examination I found that...
Under ver 3, when the RPS filter was changed or reset the filter change occurred first (i.e. vizceral _relayout was executed), followed by what I at this point can only assume was the render causing the Locator component to re-render which allowed it to pick up the correct numbers from the nodeCounts out of the state. However, I could find nothing particularly enforcing this order of events in response to filter changes, but for whatever reason it seems to be very deterministic in this _relayout, re-render sequence regardless of restarting the dev-server or even closing all browser instances then opening up a clean browser, etc.

Under ver 4, the order is to re-render the Locator component before passing through _relayout. I'm not all that comfortable with React, but I tried a few things to see if I could simply cause the re-render to delay till the filters had been applied.

I wish I could be more helpful or could have at least found a definitive difference between the last ver 3 and the current newest ver 4 to cause the difference but there just doesn't appear to be one.

Just follow the steps for re-producing issue #17 but being sure to watch the "# service / # filtered" info by the search window.

Reset Layout Does Not Work?

Hi, I've been playing around with the example and noticed that the reset layout does not move the nodes to the original position. I tried dragging the nodes around and pressing the reset layout button which only seemed to shift the label.

Is this a bug or something that has not been fully implemented yet?

Thanks!

Problems when building for production

Hi all,

Is there anything we need to know when building for production?

just tried a regular webpack
it builds ok but when I try to open i get this i.setValue is not a function

can anyone help me?

Regards,C.

Running the docker example return "Invalid Host header"

navigating to localhost:41911 returns Invalid Host header

connect setinterval with beginsampleData()

hi, so i want to introduce an interval each second in the trafficFlow.jsx, and connect this interval with beginSampleData() function, @jrsquared i tried to do that in the componentDidMount() function but it did not work, nothing change and there is no call of the beginSampleData each second, i would greatly appreciate some direction.

Clusters table in details subpanel incorrectly populated

The good news is the clusters table now works in the detail view. The bad news is the contents are wrong. It is a simple typo-style fix.

In detailsPanelNode.jsx, line 54
<DetailsSubpanelClusters discovery={node.metadata.discovery} clusters={node.nodes} region={this.state.region} />
simply needs clusters={nodes.nodes} changed to clusters={nodes.clusters}

Thanks.

Submit vizceral-example to NPM

Please submit this repo as an NPM package for installation via 'npm install vizceral-example'. Thank you.

Case insensitive filtering (that respects displayName?)

Regional View

Hi, thank you for open sourcing this! Really awesome (and sexy looking!) utility.

Dumb question -- does the example come with the regional view? I've poked around the source and also installed locally (install instructions worked perfectly, thank you!) and it looks like the node drill down from the Global view isn't either enabled or coded up.

Thank you!

Integrating visceral

@jrsquared I need your help to integrate Visceral to my project,
i read the post "Getting started" and i still have an issue about the JSON to be feed into updatedata(),
indeed i make a http request to get a json object then i transform this json object into JSON which is understood by update data but when i inject it, it's doesn't work... here my html file :

html.txt

I get the new json object from the scope of my controller and i injected to updatedata(scope), and it didn't work and no error went out and Vizceral canvas always height = 0
thanks in advance for your response,

Unable to run an app on kubernetes

Steps to reproduce:

Create and publish the container to the registry.
Create a deployment:

kubectl run viz-ui --image=<whoami>/vizceral-example:latest --replicas=1 --port=8080
kubectl expose deployment viz-ui --port=8080 --type=LoadBalancer

curl -v http://192.168.99.100:<exposed-port>
*   Trying 192.168.99.100...
* TCP_NODELAY set
* Connected to 192.168.99.100 (192.168.99.100) port 31865 (#0)
> GET / HTTP/1.1
> Host: 192.168.99.100:31865
> User-Agent: curl/7.54.0
> Accept: */*
> 
< HTTP/1.1 200 OK
< X-Powered-By: Express
< Content-Type: text/html; charset=utf-8
< Content-Length: 19
< ETag: W/"13-OxsTL6IB85fkJxv9HO8uum0slCI"
< Date: Mon, 16 Apr 2018 11:56:43 GMT
< Connection: keep-alive
< 
* Connection #0 to host 192.168.99.100 left intact
Invalid Host header

adjust label size

Hi Folks!

Can I adjust the label size?

See following screenshot:

Thanks for help!

Example doesn't work with v3.0.3 vizceral

I was playing around with the latest vizceral, and nothing seems to work anymore.

Integrating Vizceral with your ecosystem

Are there steps/documentation that explains how to integrate Vizceral into your existing ecosystem.

Rgs
Anand

Interface from Go to Vizceral json format found inconsistencies

I just built a first rough pass at a go package that maps the vizceral format
https://github.com/adrianco/go-vizceral

I ran into an issue where "metadata" is sometimes "streaming": true, and sometimes "streaming": 1 in the example file, which causes an error when marshal/unmarshal from go. I edited a copy of the example file to use "streaming": 1 everywhere, but it would be better to fix upstream wherever this data was generated.

Missing Dockerfile?

When trying to build the project from Docker I got the following error:

akessner@ubuntuFirst:~$ docker build -t akessner/vizceral-example .
unable to prepare context: unable to evaluate symlinks in Dockerfile path: lstat /home/akessner/Dockerfile: no such file or directory

Docker's hello world works fine.
Creating the file complains that it is empty.

What should be in the Dockerfile?

Failure to open details panel if cluster property not defined

I noticed that even in the simple sample data the details panel will not open for any non-internet node. The problem is the code assumes the cluster property is always there on a node (badge: this.state.clusters.length). While in the example it is not. Also noticed the cluster property is not even defined in the main vizceral wiki (should also be updated if possible).
After I added an empty cluster property to my nodes, I can open the details pane. But I still see some strange behavior - the incoming and outgoing sections get collapsed back on each data update. If you have frequent data updates, it is very annoying as it continuously closes.

Style of The Region Node

can anybody help me to resize the size of the region node ? the node that "renderer":"region"

region Loading

Hi Guys , I have a issue about the display of the nodes. Certain nodes display correctly but some nodes have as a description " region loading " .Thanks for your explanation and help .

Compile fails on current master

After pulling in the latest changes, I'm getting this compiler error when trying to run npm run dev:

ERROR in ./src/app.jsx
Module build failed: Error: Cannot find module './_an-object' (While processing preset: "c:\\Users\\trond\\Documents\\projects\\vizceral-example\\node_modules\\babel-preset-es2015\\lib\\index.js")
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (c:\Users\trond\Documents\projects\vizceral-example\node_modules\babel-preset-es2015\node_modules\babel-plugin-transform-regenerator\node_modules\babel-runtime\node_modules\core-js\library\modules\_object-dp.js:1:84)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (c:\Users\trond\Documents\projects\vizceral-example\node_modules\babel-preset-es2015\node_modules\babel-plugin-transform-regenerator\node_modules\babel-runtime\node_modules\core-js\library\modules\_hide.js:1:80)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)

Unable to run vizceral-example

Justin,

I am attempting to run vizceral/example within an Ubuntu 14.04 VM
and have followed setup steps outlined here :

https://github.com/Netflix/vizceral
https://github.com/Netflix/vizceral-example

Accessing localhost:8080, however, results in the following errors :

[568] ./src/components/updateStatus.css 940 bytes {0} [built] [1 error]

ERROR in ./~/css-loader!./src/app.css
Module build failed: ReferenceError: Promise is not defined
at LazyResult.async (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:227:31)
at LazyResult.then (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:131:21)
at processCss (/home/user/Vizceral-Example/node_modules/css-loader/lib/processCss.js:200:5)
at Object.module.exports (/home/user/Vizceral-Example/node_modules/css-loader/lib/loader.js:24:2)
@ ./src/app.css 4:14-74

ERROR in ./~~/css-loader!./~~/bootstrap/dist/css/bootstrap.css
Module build failed: ReferenceError: Promise is not defined
at LazyResult.async (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:227:31)
at LazyResult.then (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:131:21)
at processCss (/home/user/Vizceral-Example/node_modules/css-loader/lib/processCss.js:200:5)
at Object.module.exports (/home/user/Vizceral-Example/node_modules/css-loader/lib/loader.js:24:2)
@ ./~/bootstrap/dist/css/bootstrap.css 4:14-73

ERROR in ./~/css-loader!./src/components/trafficFlow.css
Module build failed: ReferenceError: Promise is not defined
at LazyResult.async (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:227:31)
at LazyResult.then (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:131:21)
at processCss (/home/user/Vizceral-Example/node_modules/css-loader/lib/processCss.js:200:5)
at Object.module.exports (/home/user/Vizceral-Example/node_modules/css-loader/lib/loader.js:24:2)
@ ./src/components/trafficFlow.css 4:14-85

ERROR in ./~~/css-loader!./~~/vizceral-react/dist/vizceral.css
Module build failed: ReferenceError: Promise is not defined
at LazyResult.async (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:227:31)
at LazyResult.then (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:131:21)
at processCss (/home/user/Vizceral-Example/node_modules/css-loader/lib/processCss.js:200:5)
at Object.module.exports (/home/user/Vizceral-Example/node_modules/css-loader/lib/loader.js:24:2)
@ ./~/vizceral-react/dist/vizceral.css 4:14-69

ERROR in ./~/css-loader!./src/components/breadcrumbs.css
Module build failed: ReferenceError: Promise is not defined
at LazyResult.async (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:227:31)
at LazyResult.then (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:131:21)
at processCss (/home/user/Vizceral-Example/node_modules/css-loader/lib/processCss.js:200:5)
at Object.module.exports (/home/user/Vizceral-Example/node_modules/css-loader/lib/loader.js:24:2)
@ ./src/components/breadcrumbs.css 4:14-85

ERROR in ./~/css-loader!./src/components/physicsOptions.css
Module build failed: ReferenceError: Promise is not defined
at LazyResult.async (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:227:31)
at LazyResult.then (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:131:21)
at processCss (/home/user/Vizceral-Example/node_modules/css-loader/lib/processCss.js:200:5)
at Object.module.exports (/home/user/Vizceral-Example/node_modules/css-loader/lib/loader.js:24:2)
@ ./src/components/physicsOptions.css 4:14-88

ERROR in ./~/css-loader!./src/components/controls.css
Module build failed: ReferenceError: Promise is not defined
at LazyResult.async (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:227:31)
at LazyResult.then (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:131:21)
at processCss (/home/user/Vizceral-Example/node_modules/css-loader/lib/processCss.js:200:5)
at Object.module.exports (/home/user/Vizceral-Example/node_modules/css-loader/lib/loader.js:24:2)
@ ./src/components/controls.css 4:14-82

ERROR in ./~/css-loader!./src/components/detailsPanel.css
Module build failed: ReferenceError: Promise is not defined
at LazyResult.async (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:227:31)
at LazyResult.then (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:131:21)
at processCss (/home/user/Vizceral-Example/node_modules/css-loader/lib/processCss.js:200:5)
at Object.module.exports (/home/user/Vizceral-Example/node_modules/css-loader/lib/loader.js:24:2)
@ ./src/components/detailsPanel.css 4:14-86

ERROR in ./~/css-loader!./src/components/loadingCover.css
Module build failed: ReferenceError: Promise is not defined
at LazyResult.async (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:227:31)
at LazyResult.then (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:131:21)
at processCss (/home/user/Vizceral-Example/node_modules/css-loader/lib/processCss.js:200:5)
at Object.module.exports (/home/user/Vizceral-Example/node_modules/css-loader/lib/loader.js:24:2)
@ ./src/components/loadingCover.css 4:14-86

ERROR in ./~/css-loader!./src/components/locator.css
Module build failed: ReferenceError: Promise is not defined
at LazyResult.async (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:227:31)
at LazyResult.then (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:131:21)
at processCss (/home/user/Vizceral-Example/node_modules/css-loader/lib/processCss.js:200:5)
at Object.module.exports (/home/user/Vizceral-Example/node_modules/css-loader/lib/loader.js:24:2)
@ ./src/components/locator.css 4:14-81

ERROR in ./~/css-loader!./src/components/optionsPanel.css
Module build failed: ReferenceError: Promise is not defined
at LazyResult.async (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:227:31)
at LazyResult.then (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:131:21)
at processCss (/home/user/Vizceral-Example/node_modules/css-loader/lib/processCss.js:200:5)
at Object.module.exports (/home/user/Vizceral-Example/node_modules/css-loader/lib/loader.js:24:2)
@ ./src/components/optionsPanel.css 4:14-86

ERROR in ./~/css-loader!./src/components/updateStatus.css
Module build failed: ReferenceError: Promise is not defined
at LazyResult.async (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:227:31)
at LazyResult.then (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:131:21)
at processCss (/home/user/Vizceral-Example/node_modules/css-loader/lib/processCss.js:200:5)
at Object.module.exports (/home/user/Vizceral-Example/node_modules/css-loader/lib/loader.js:24:2)
@ ./src/components/updateStatus.css 4:14-86

ERROR in ./~~/css-loader!./~~/react-virtualized/styles.css
Module build failed: ReferenceError: Promise is not defined
at LazyResult.async (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:227:31)
at LazyResult.then (/home/user/Vizceral-Example/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:131:21)
at processCss (/home/user/Vizceral-Example/node_modules/css-loader/lib/processCss.js:200:5)
at Object.module.exports (/home/user/Vizceral-Example/node_modules/css-loader/lib/loader.js:24:2)
@ .//react-virtualized/styles.css 4:14-64
Child html-webpack-plugin for "index.html":
chunk {0} index.html 1.49 kB [rendered]
[0] .//html-webpack-plugin/lib/loader.js!./src/index.html 1.49 kB {0} [built]
webpack: bundle is now VALID.

Not entirely sure if this is applicable (I'm rather new to the realm of NodeJS), but :

user@user-VirtualBox:~/Vizceral$ npm version
{ vizceral: '4.3.0',
npm: '3.3.6',
ares: '1.10.1-DEV',
http_parser: '2.5.0',
icu: '56.1',
modules: '47',
node: '5.0.0',
openssl: '1.0.2d',
uv: '1.7.5',
v8: '4.6.85.28',
zlib: '1.2.8' }

user@user-VirtualBox:~/Vizceral$ nvm ls
v4.0.0
-> v5.0.0
system

Please advise.

Docker example runs as root, can that be changed?

Hi!

The docker example docker run -p 41911:8080 -d <name>/vizceral-example runs code as root. Are there plans to turn that to an unpriviliged user with --cap-drop=ALL on top? That would be nice.

Thanks and best, Sebastian

Dockerfile for production image

How would you create a Dockerfile for a production image? I tried to build this and then serve it with Nginx but there were bugs with the library building I think.
Anyway, I added an issue here but I think there is a place someone could help me.

[Fixed] Error: digital envelope routines::unsupported

Hi folks, I noticed there is a version not supported issue when your nodejs is upper 18.x.
It would cause the error below:

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (E:\GithubProject\fork\netflix\vizceral-example\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (E:\GithubProject\fork\netflix\vizceral-example\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (E:\GithubProject\fork\netflix\vizceral-example\node_modules\webpack\lib\NormalModule.js:471:10)
    at E:\GithubProject\fork\netflix\vizceral-example\node_modules\webpack\lib\NormalModule.js:503:5
    at E:\GithubProject\fork\netflix\vizceral-example\node_modules\webpack\lib\NormalModule.js:358:12
    at E:\GithubProject\fork\netflix\vizceral-example\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (E:\GithubProject\fork\netflix\vizceral-example\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at Array.<anonymous> (E:\GithubProject\fork\netflix\vizceral-example\node_modules\loader-runner\lib\LoaderRunner.js:205:4) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Running smoothly by downgrading nodejs to 16.x.

Can't install example

getting:

Module parse failed: /Users/brian.cronrath/node_modules/vizceral-example/src/app.jsx Unexpected token (14:4)
You may need an appropriate loader to handle this file type.

Anyone know how I can resolve?

Sub Nodes/Clusters search is broken

I was trying to better understand the concepts of Vizceral when I found that clusters were replaced by sub nodes (Netflix/vizceral@6e3c5db)

It seems that the sub nodes/clusters search is not working anymore.

Steps to reproduce:

npm run dev
Load http://localhost:8080
Click on us-east-1
Search for tetrabrach

Expected behavior: The node viraemic should be highlighted

What is name in docker commands? Docker commands shared isn't working for me.

No longer building on Docker for Windows

Hey guys, love the project. looks like the latest bump caused it to stop building (for me anyway)

error:

npm ERR! Linux 4.4.20-moby
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "install"
npm ERR! node v6.7.0
npm ERR! npm v3.10.8
npm ERR! code EAI_AGAIN
npm ERR! errno EAI_AGAIN
npm ERR! syscall getaddrinfo

npm ERR! getaddrinfo EAI_AGAIN registry.npmjs.org:443
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! /usr/src/app/npm-debug.log

docker info:
Runtimes: runc
Default Runtime: runc
Security Options: seccomp
Kernel Version: 4.4.20-moby
Operating System: Alpine Linux v3.4
OSType: linux
Architecture: x86_64
CPUs: 2
Total Memory: 1.92 GiB
Name: moby

Previous graph content remains if active filters end up filtering all nodes or connections or both

I've still been monkeying with my own filters for my data and came across a disconcerting edge case. If the filter(s) that are "active" just so happen to filter every node or connection or both away the graph never "updates" or blanks as I was expecting.

What causes it to be particularly disconcerting is that the particles stop and so it appears that the display has frozen. I've attached a JSON file that if you set the RPS filter in vizceral-example to "high" it will filter all of the connections away. If you move it one step lower (to the right from "high") then one of the two connections will be filtered and you will see the graph update (so long as you set the RPS filter to "high", then moved it to a lower setting).

I searched and searched for something that was causing the graph to not re-layout, but couldn't find anything that seemed to behave any different between everything-filtered, partially-filtered, and nothing-filtered.

If you use the attach file as the "sample_data.json" with the stock vizceral-example to reproduce the issue.

Thanks for your great work.
everything_filtered_out_data.txt

Node names containing a colon cause DOM Exception during navigation

This is an odd one and it isn't actually a bug in vizceral-example.

If the node name contains a colon and you double-click to zoom into the detailed node view window.history.pushState will throw a DOMException and lock up the page.

I eventually figured out that if you simply prepend a forward slash to the URL window.history.pushState will happily accept URLs with colons. For some reason, window.history.pushState will place the forward slash between pieces of the URL auto-magically unless there is a colon, then it doesn't insert the forward slash. Adding a hard coded forward slash fixes this.

PR #48 "fixes" this... well compensates for it. The issue is in window.history.pushState.

Updating traffic layout when data has changed

My backend serves data using some endpoint, but when data is changed these changes are not reflected in a layout. New nodes don't appear and if metric values are changed I don't see this.
I have to click on a breadcrumb, change the view or refresh the whole page to see the new data.

How to do that automatically? I can see that render() function is called each time the data are changed, but this doesn't trigger any change in a view. Why?

updateData

Hi, so I have introduced an interval each second in the trafficFlow.jsx. I connected this interval with the beginSampleData function, which I also did some slight modification to no longer clear this.traffic. As a result the sample_data.json is read into a json object, which is then passed to updateData(). I noticed that the "last updated" parameter gets updated with each time I write a new value to the json file, but when "metrics" are altered, the animation does not change/update in realtime to reflect the traffic change. I feel I am missing something, and would greatly appreciate some more direction.

Unsupported engine

Hello,

Just tried to build a Docker image from this repository and I'm getting this warning along with other NPM warnings about deprecated Node.js packages.

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '[email protected]',
npm WARN EBADENGINE   required: { node: '~4.4.0' },
npm WARN EBADENGINE   current: { node: 'v17.6.0', npm: '8.5.1' }
npm WARN EBADENGINE }

Please can you check it out and also approve and merge Dependabot PRs?

On clicking the nodes getting some error in console

detailsSubpanelSubNodes.jsx:26 Uncaught TypeError: Cannot read property 'length' of undefined
at DetailsSubpanelSubNodes.render (detailsSubpanelSubNodes.jsx:26)
at ReactCompositeComponent.js:793
at measureLifeCyclePerf (ReactCompositeComponent.js:73)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:792)
at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:819)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:359)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
at Object.mountComponent (ReactReconciler.js:43)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
render @ detailsSubpanelSubNodes.jsx:26
(anonymous) @ ReactCompositeComponent.js:793
measureLifeCyclePerf @ ReactCompositeComponent.js:73
_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:792
_renderValidatedComponent @ ReactCompositeComponent.js:819
performInitialMount @ ReactCompositeComponent.js:359
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
mountChildren @ ReactMultiChild.js:234
_createInitialChildren @ ReactDOMComponent.js:701
mountComponent @ ReactDOMComponent.js:520
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
updateChildren @ ReactChildReconciler.js:119
_reconcilerUpdateChildren @ ReactMultiChild.js:204
_updateChildren @ ReactMultiChild.js:308
updateChildren @ ReactMultiChild.js:295
_updateDOMChildren @ ReactDOMComponent.js:944
updateComponent @ ReactDOMComponent.js:758
receiveComponent @ ReactDOMComponent.js:720
receiveComponent @ ReactReconciler.js:122
updateChildren @ ReactChildReconciler.js:107
_reconcilerUpdateChildren @ ReactMultiChild.js:204
_updateChildren @ ReactMultiChild.js:308
updateChildren @ ReactMultiChild.js:295
_updateDOMChildren @ ReactDOMComponent.js:944
updateComponent @ ReactDOMComponent.js:758
receiveComponent @ ReactDOMComponent.js:720
receiveComponent @ ReactReconciler.js:122
_updateRenderedComponent @ ReactCompositeComponent.js:751
_performComponentUpdate @ ReactCompositeComponent.js:721
updateComponent @ ReactCompositeComponent.js:642
performUpdateIfNecessary @ ReactCompositeComponent.js:558
performUpdateIfNecessary @ ReactReconciler.js:154
runBatchedUpdates @ ReactUpdates.js:148
perform @ Transaction.js:141
perform @ Transaction.js:141
perform @ ReactUpdates.js:87
flushBatchedUpdates @ ReactUpdates.js:170
closeAll @ Transaction.js:207
perform @ Transaction.js:154
batchedUpdates @ ReactDefaultBatchingStrategy.js:60
enqueueUpdate @ ReactUpdates.js:198
enqueueUpdate @ ReactUpdateQueue.js:22
enqueueSetState @ ReactUpdateQueue.js:216
ReactComponent.setState @ ReactBaseClasses.js:62
TrafficFlow._this.objectHighlighted @ trafficFlow.jsx:129
EventEmitter.emit @ vizceral.js:61198
(anonymous) @ vizceral.js:363
EventEmitter.emit @ vizceral.js:61198
(anonymous) @ vizceral.js:66531
highlightObject @ vizceral.js:66532
handleIntersectedObjectClick @ vizceral.js:75302
onDocumentClick @ vizceral.js:514
(anonymous) @ vizceral.js:289
emit @ vizceral.js:71555
emit @ vizceral.js:71164
tryEmit @ vizceral.js:70591
(anonymous) @ vizceral.js:71141
boundFn @ vizceral.js:69222
setTimeout (async)
setTimeoutContext @ vizceral.js:69062
process @ vizceral.js:71139
recognize @ vizceral.js:70633
recognize @ vizceral.js:71404
inputHandler @ vizceral.js:69553
PEhandler @ vizceral.js:69945
Input.domHandler @ vizceral.js:69466

Charts not displaying in Internet Explorer v11

Canvas is failed to display in IE browser. It is working fine in Chrome and Firefox.
IE browser showing error at this.boundingRect = this.renderer.domElement.getBoundingClientRect();

{	    key: 'updateBoundingRectCache',
	    value: function updateBoundingRectCache() {
	      this.boundingRect = this.renderer.domElement.getBoundingClientRect();
	    }

I want to know whether Vizceral supports in Internet Explorer browser, if it supports what is the solution to above error

Thanks in advance

Rerender region

I'm trying to dynamically update data. While providing 2 different JSON files with data (first sample_data.json, then sample_data_simple.json after 5 seconds), I expect region view to remove regions which are not present within updatedTraffic. How can I force Vizceral to update regions correctly?

Babel/JSX

For me the the babel/react loader seems to be not working. I followed the README and did "npm install" followed by "npm run dev" using npm version 3.10.6 (and node version 4.2.6, if that's relevant). I got an error saying that was invalid syntax in "app.jsx". Any tips? Is there something missing in dependencies in package.json?

vizceral npm build errors

npm run build:js

[email protected] build:js /opensource/vizceral-example/node_modules/vizceral
webpack --bail && webpack --bail -p

Hash: 4b7e17546eabf6279017
Version: webpack 1.15.0
Time: 88ms
Asset Size Chunks Chunk Names
vizceral.js 31.7 kB 0 [emitted] main
vizceral.js.map 36.2 kB 0 [emitted] main
+ 1 hidden modules
Hash: e6304a35cf944a95ce14
Version: webpack 1.15.0
Time: 100ms
Asset Size Chunks Chunk Names
vizceral.min.js 31.7 kB 0 [emitted] main
+ 1 hidden modules

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

What are the requirements for the endpoint response to make it work for .updateData?

So, i'm trying to implement simple thing - instead of relying on static JSON file call external service to return JSON object.

So, i have an endpoint that returns the following JSON:

{
    "connections": [
        {
            "class": "normal",
            "metrics": {
                "danger": 10,
                "normal": 3000
            },
            "source": "event-source",
            "target": "INTERNET"
        },
        {
            "class": "normal",
            "metrics": {
                "danger": 10,
                "normal": 3000
            },
            "source": "INTERNET",
            "target": "service-A"
        },
        {
            "class": "normal",
            "metrics": {
                "danger": 10,
                "normal": 3000
            },
            "source": "service-A",
            "target": "INTERNET"
        },
        {
            "class": "normal",
            "metrics": {
                "danger": 10,
                "normal": 3000
            },
            "source": "service-A",
            "target": "service-B"
        },
        {
            "class": "normal",
            "metrics": {
                "danger": 10,
                "normal": 3000
            },
            "source": "INTERNET",
            "target": "event-target"
        },
        {
            "class": "normal",
            "metrics": {
                "danger": 10,
                "normal": 3000
            },
            "source": "event-target",
            "target": "event-subscriber"
        },
        {
            "class": "normal",
            "metrics": {
                "danger": 10,
                "normal": 3000
            },
            "source": "service-B",
            "target": "event-target"
        }
    ],
    "name": "edge",
    "nodes": [
        {
            "class": "normal",
            "displayName": "INTERNET",
            "name": "INTERNET",
            "renderer": "focusedChild"
        },
        {
            "class": "normal",
            "displayName": "EventSource",
            "name": "event-source",
            "renderer": "focusedChild"
        },
        {
            "class": "normal",
            "connections": [
                {
                    "class": "normal",
                    "metrics": {
                        "danger": 10,
                        "normal": 3000
                    },
                    "source": "INTERNET",
                    "target": "service-B"
                }
            ],
            "displayName": "ServiceA",
            "name": "service-A",
            "nodes": [
                {
                    "class": "normal",
                    "displayName": "INTERNET",
                    "name": "INTERNET",
                    "renderer": "focusedChild"
                },
                {
                    "class": "normal",
                    "displayName": "ServiceB",
                    "name": "service-B",
                    "renderer": "focusedChild"
                }
            ],
            "renderer": "focusedChild"
        },
        {
            "class": "normal",
            "displayName": "Service-A",
            "name": "service-A",
            "renderer": "focusedChild"
        },
        {
            "class": "normal",
            "displayName": "EventTarget",
            "name": "event-target",
            "renderer": "focusedChild"
        },
        {
            "class": "normal",
            "displayName": "EventSubscriber",
            "name": "event-subscriber",
            "renderer": "focusedChild"
        }
    ],
    "renderer": "global"
}

cURL output:

* TCP_NODELAY set
* Connected to localhost (::1) port 8080 (#0)
> GET /vizceral-config HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.54.0
> Accept: */*
> 
< HTTP/1.1 200 OK
< Content-Length: 1729
< Content-Type: application/json; charset=utf-8
< Date: Sat, 14 Apr 2018 20:40:17 GMT
<

My code looks like this:

  beginSampleData () {
    this.traffic = { nodes: [], connections: [] };
    request.get(`https://<service-url>/vizceral-config`)
        .set('Accept', 'application/json')
        .end((err, res) => {
            if (res && res.status === 200) {
                this.traffic.clientUpdateTime = Date.now();
                this.updateData(res.body);
            }
        });
    }

  update () {
      request.get(`https://<service-url>/vizceral-config`)
          .set('Accept', 'application/json')
          .end((err, res) => {
              if (res && res.status === 200) {
                  this.traffic.clientUpdateTime = Date.now();
                  this.updateData(res.body);
              }
          });
    }

  componentDidMount () {
      this.checkInitialRoute();
      this.beginSampleData();

      // Listen for changes to the stores
      filterStore.addChangeListener(this.filtersChanged);
      this.timer = setInterval(this.update.bind(this), 100000);
  }

  componentWillUnmount () {
      filterStore.removeChangeListener(this.filtersChanged);
      clearInterval(this.timer);
  }

But i'm facing the problem, i can't get graph visualized, it stucks loading the graph for some reason:

I do see that vizceral app sends the request to the endpoint and it responds back with appropriate response (you can see that above). However, can't get graph visualized.

Looking forward to get help on this, thanks.

Blank screen with no nodes

Hi,

I followed the instructions as specified in the Github site. The server was started using

npm run dev

On going to the localhost link, i see a black screen which has the top pane with VIZCERAL, Feedback, Global, Filters, Display.

There are no nodes displayed.

Is there anything to be done to display the nodes from sample json?

Regards
Anand