netflix / vizceral-react Goto Github PK

View Code? Open in Web Editor NEW

199.0 352.0 56.0 2.14 MB

License: Apache License 2.0

CSS 5.18% JavaScript 94.82%

vizceral-react's Introduction

Vizceral

From src/vizceral.jsx

This is a react wrapper around Vizceral.

Setup

Install package npm install vizceral-react --save

import vizceral-react to start using

import Vizceral from 'vizceral-react';
<Vizceral traffic={this.state.trafficData}
          view={this.state.currentView}
          showLabels={this.state.displayOptions.showLabels}
          physicsOptions={this.state.physicsOptions}
          filters={this.state.filters}
          viewChanged={this.viewChanged}
          objectHighlighted={this.objectHighlighted}
          nodeContextSizeChanged={this.nodeContextSizeChanged}
          matchesFound={this.matchesFound}
          match={this.state.searchTerm}
          modes={this.state.modes}
          definitions={this.state.definitions}
          styles={styles}
/>

Props

allowDraggingOfNodes

// Default: false
allowDraggingOfNodes: Boolean

Nodes can be repositioned through dragging if and only if this is true.

connectionHighlighted

// Default: () => {}
connectionHighlighted: Function

Callback for when a connection is highlighted. The highlighted connection is the only parameter.

definitions

// Default: {}
definitions: Object

Object map of definitions. Refer to github.com/Netflix/Vizceral/wiki/Configuration#definitions-for-data-to-display

filters

// Default: []
filters: Array

Array of filter definitions and current values to filter out nodes and connections. Refer to github.com/Netflix/Vizceral/wiki/Configuration#filters

match

// Default: ''
match: String

A search string to highlight nodes that match

matchesFound

// Default: () => {}
matchesFound: Function

Callback when nodes match the match string. The matches object { total, visible } is the only property.

modes

modes: Object

Map of modes to mode type, e.g. { detailedNode: 'volume' }

nodeContextSizeChanged

// Default: () => {}
nodeContextSizeChanged: Function

Callback for when the top level node context panel size changes. The updated dimensions is the only parameter.

nodeHighlighted

// Default: () => {}
nodeHighlighted: Function

Callback for when an object is highlighted. The highlighted object is the only parameter. object.type will be either 'node' or 'connection'

nodeUpdated

// Default: () => {}
nodeUpdated:

objectHighlighted

// Default: () => {}
objectHighlighted:

showLabels

// Default: true
showLabels: Boolean

Whether or not to show labels on the nodes.

styles

// Default: {}
styles: Object

Styles to override default properties.

targetFramerate

// Default: null
targetFramerate: Number

Target framerate for rendering engine

traffic

// Default: {}
traffic: Object

The traffic data. See github.com/Netflix/Vizceral/wiki/How-to-Use#graph-data-format for specification.

view

// Default: []
view:

viewChanged

// Default: () => {}
viewChanged: Function

Callback for when the view changed. The view array is the only property.

viewUpdated

// Default: () => {}
viewUpdated: Function

Callback for when the current view is updated.

vizceral-react's People

Contributors

Stargazers

Watchers

vizceral-react's Issues

new release needed ?

Hi @jrsquared, is it possible to publish a new release on npm with this fix that you recently merged on master db12de3 thanks !

Labels not being displayed on 'region' nodes

I've been having an issue with getting certain labels from being displayed. The nodes are named UNKNOWN REGION and USER BROWSER and behavior is correct when clicked however on region node view, the labels don't exist. I have checked my trafficData that is being sent in and it is formatted correctly. (For reference, I built my page off of vizceral-example)

All the data out of the nodes are outbound and upon inspection of css on page it shows that nodes are being rendered properly, except without dimensions/coordinates for their styles.

Request numbers are also being combined when they shouldn't be.

Rendered HTML:

<div class="context UNKNOWN-REGION" style="position: absolute; display: block;"></div>
<div class="context us-east-1" style="position: absolute; display: block; width: 139.455px; top: 473.614px; left: 736.873px; height: 90.6455px;"></div>
<div class="context us-west-2" style="position: absolute; display: block; width: 139.455px; top: 51.731px; left: 1287.25px; height: 90.6455px;"></div>
<div class="context user-browser" style="position: absolute; display: block;"></div>

Corresponding Vizceral Render:

Layout is reset when this.state.trafficData is set

It seems that the layout is reset when updated traffic data is set on this.state.trafficData, even when dragging of nodes is enabled and the set of nodes in the trafficData didn't change.

I would understand resetting the layout, if the set of nodes changes and a human didn't move the nodes around.

What do you think? Is dragging nodes really incompatible with continuously updating traffic data, or am I doing it wrong?

objectHovered method is not working

Hi, I am using this react component and I used objectHovered method but it's not working. I am using this event for regional nodes. objectHighlighted method is working though. Here is my code:


class App extends Component {

   constructor() {
      super();
       this.state={
          trafficData:nodes,
          allowDraggingOfNodes:true
        }
        this.objectHighlighted.bind(this);
        this.objectHovered.bind(this);
   }

   objectHighlighted(data){
    console.log(data);
   }
   objectHovered(data){
    console.log(data);
   }
  render() {
    console.log(this.state.trafficData);
    return (
      <div className="App" style={{height:800}}>
        <Vizceral traffic={this.state.trafficData}
                  allowDraggingOfNodes={this.state.allowDraggingOfNodes}
                  objectHighlighted={this.objectHighlighted}
                  objectHovered={this.objectHovered}
                  
        />

      </div>
    );
  }
}

Links in README.md are broken

DATAFORMATS.md doesn't seem to exist anymore (https://github.com/Netflix/vizceral-react/blob/master/README.md#definitions)

Cannot change background color

Hi,

According to https://github.com/Netflix/vizceral/wiki/Configuration, the styles could be changed by providing the styles props. Yet I found I could not change the page background by setting colorPageBackground or colorPageBackgroundTransparent.

I could change colorDonutInternalColor and some text colors though. Anything I'm missing ?

Thanks

Set up end-to-end tests?

Hi there 👋unless I'm mistaken, I didn't find end-to-end tests in vizceral-react. I maintain an open source library that creates Playwright/Jest tests and runs them in CI.

Would you like me to set up end-to-end tests on this project? Please let me know 😊- happy to set up tests on another project if you prefer!

Vizceral Canvas Height Always Set to 0

Hi, I've been having an issue where the canvas for Vizceral has a height of 0. I've looked at #2 but the fixes there did not seem to work for me.

I've set the parent divs to a specified size but the vizceral div's size always contains a height of 18 and width equal to the parent div. The size of the canvas has the width of the parent but a height of 0.

'use strict';

import _ from 'lodash';
import React from 'react';
import Vizceral from 'vizceral-react';
import request from 'superagent';
import './vizceralBoilerPlate.css';


class VizceralBoilerPlate extends React.Component {
  constructor (props) {
    super(props);

    this.state = {
      traffic: {
        nodes: [],
        connections: []
      },
    };
  }

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

  componentDidMount () {
    this.beginSampleData();
  }

  updateData (newTraffic) {
    console.log("updating data");
    const regionUpdateStatus = _.map(_.filter(newTraffic.nodes, n => n.name !== 'INTERNET'), (node) => {
      const updated = node.updated;
      return { region: node.name, updated: updated };
    });
    const lastUpdatedTime = _.max(_.map(regionUpdateStatus, 'updated'));
    this.setState({
      regionUpdateStatus: regionUpdateStatus,
      timeOffset: newTraffic.clientUpdateTime - newTraffic.serverUpdateTime,
      lastUpdatedTime: lastUpdatedTime,
      trafficData: newTraffic
    });
  }


  render () {
    console.log(this.state.trafficData);
    return (
      <div className="vizceral-container" style={{width:1024, height:800}}>
        <div className="service-traffic-map" style={{width:1024, height:800}}>
          <div style={{ position: 'absolute', top: '0px', right:'0px', bottom: '0px', left: '0px' }}>
            <Vizceral traffic={this.state.trafficData}
                      view={[]}
                      showLabels={true}
            />
          </div>
        </div>
      </div>
    );
  }
}

export default VizceralBoilerPlate

I'm not sure if I set something wrong or what, but I can't seem to get the height of the canvas to display the grid.

Thanks for any help!

Vizceral canvas always height = 0

I'm trying to get a minimal Vizceral component displaying in a React/Material UI application, but the canvas is always height = 0 (canvas height, not style height):

<div class="vizceral">
  <canvas width="1325" height="0" style="width: 100%; height: 100%; touch-action: manipulation; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: auto;"></canvas>
  <div class="vizceral-notice" style="display: none;"></div>
  <div class="context INTERNET" style="position: absolute; display: block;"></div>
  <div class="context us-west-2" style="position: absolute; display: block; width: 191.389px; left: 5.65776px; height: 124.403px; top: 151.243px;"></div>
</div>

If I go into via Chrome dev tools and change the height to 1000 (or any non-zero number), I get the nodes, but no animated traffic. I've been comparing my code to the example application, and cannot for the life of me figure out what the difference is.

Here's my code:

import React, {Component} from 'react'

import 'vizceral-react/dist/vizceral.css';
import Vizceral from 'vizceral-react';

const traffic = JSON.parse('{"connections":[{"source":"INTERNET","target":"us-west-2","metrics":{"normal":9000,"warning":500,"danger":500},"volume":10000}],"nodes":[{"renderer":"region","name":"INTERNET","nodes":[],"class":"normal","maxVolume":10000},{"renderer":"region","name":"us-west-2","nodes":[],"class":"normal","maxVolume":10000}],"name":"edge","renderer":"global"}');

export default class Welcome extends Component {
  render() {
    return (
      <div className="welcome-container">
        <div className="welcome">
          <Vizceral view={[]} showLabels={true} traffic={traffic} />
        </div>
      </div>
    )
  }
}

Is there another dependency that I need to explicitly install or something?

Here's mine, in case anything jumps out at you:

"dependencies": {
    "babel-polyfill": "^6.8.0",
    "isomorphic-fetch": "^2.2.1",
    "keymirror": "^0.1.1",
    "lodash": "^4.12.0",
    "material-ui": "^0.15.0",
    "moment": "^2.13.0",
    "mousetrap": "^1.5.3",
    "react": "^15.0.2",
    "react-dom": "^15.0.2",
    "react-redux": "^4.4.5",
    "react-router": "^2.4.0",
    "react-router-redux": "^4.0.4",
    "react-tap-event-plugin": "^1.0.0",
    "redux": "^3.5.2",
    "redux-form": "^5.2.3",
    "redux-logger": "^2.6.1",
    "redux-thunk": "^2.1.0",
    "validator": "^5.2.0",
    "vizceral-react": "^2.4.0"
  }

Thanks!

Remove requirement for each node to have an updated time for traffic data to be updated

https://github.com/Netflix/vizceral-react/blob/master/src/vizceral.jsx#L104

Add support for a top-level graph updated field and document it.

Not compatible with react 16 ?

My Error
Error when I try to import 'vizceral-react' (TypeError: _react2.default.PropTypes is undefined)

Solution:
As of React 15.5 PropTypes has been moved to it's own library => prop-types