• Stars
    star
    2,581
  • Rank 16,978 (Top 0.4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A library for creating directed graph editors

react-digraph

Demo

Overview

A React component which makes it easy to create a directed graph editor without implementing any of the SVG drawing or event handling logic.

Important v8.0.0 Information

Version 8.0.0 introduces multi-select nodes and edges using Ctrl-Shift-Mouse events (Cmd-Shift-mouse for Mac). This requires a breaking change. Instead of onSelectNode/Edge, you'll only provide one onSelect function callback and a selected object with { nodes: Map, and edges: Map } as the parameter format. The typings folder has the exact type definition for these attributes. When either edges or nodes are selected the onSelect function will fire with the object. You will have to handle all nodes and edges selected, or if there is only one then you will have to determine if it's a node or edge within the onSelect function.

To disable multi-select you can set allowMultiselect to false, which disables the Ctrl-Shift-mouse event, but we will still use the onSelect function. Both onSelectNode and onSelectEdge are deprecated.

Breaking changes:

  • onPasteSelected now accepts a SelectionT object for the first parameter
  • onPasteSelected now accepts an IPoint instead of a XYCoords array for the second parameter.
  • onDeleteSelected is added which takes a SelectionT parameter.
  • onSelect is added, which accepts SelectionT and Event parameters.
  • onUpdateNode accepts a Map of updated nodes in the second parameter (for example, if multiple nodes are moved).
  • selected is a new property to track selected nodes and edges. It is a SelectionT type.
  • canDeleteSelected takes the place of canDeleteNode and canDeleteEdge. It accepts a SelectionT type as a parameter.
  • onDeleteNode is removed
  • onDeleteEdge is removed
  • selectedNode is removed
  • selectedEdge is removed
  • canDeleteNode is removed
  • canDeleteEdge is removed
  • selectedNodes is removed
  • selectedEdges is removed

Installation

npm install --save react-digraph

If you don't have the following peerDependenies, make sure to install them:

npm install --save react react-dom

Usage

The default export is a component called GraphView; it provides a multitude of hooks for various graph editing operations and a set of controls for zooming. Typically, it should be wrapped in a higher order component that supplies various callbacks (onCreateNode, onCreateEdge etc...).

GraphView expects several properties to exist on your nodes and edges. If these types conflict with existing properties on your data, you must transform your data to re-key these properties under different names and to add the expected properties. All nodes and edges can have a type attribute set - nodes also support a subtype attribute. For a full description of node and edge properties, see the sections for INode and IEdge below.

Configuration for nodes and edges can be passed to GraphView via the nodeTypes, nodeSubtypes, and edgeTypes props. Custom SVG elements can be defined here for the node's type/subtype and the edge's type.

It is often convenient to combine these types into a configuration object that can be referred to elsewhere in the application and used to associate events fired from nodes/edges in the GraphView with other actions in the application. Here is an abbreviated example:

import {
  GraphView, // required
  Edge, // optional
  type IEdge, // optional
  Node, // optional
  type INode, // optional
  type LayoutEngineType, // required to change the layoutEngineType, otherwise optional
  BwdlTransformer, // optional, Example JSON transformer
  GraphUtils // optional, useful utility functions
} from 'react-digraph';

const GraphConfig =  {
  NodeTypes: {
    empty: { // required to show empty nodes
      typeText: "None",
      shapeId: "#empty", // relates to the type property of a node
      shape: (
        <symbol viewBox="0 0 100 100" id="empty" key="0">
          <circle cx="50" cy="50" r="45"></circle>
        </symbol>
      )
    },
    custom: { // required to show empty nodes
      typeText: "Custom",
      shapeId: "#custom", // relates to the type property of a node
      shape: (
        <symbol viewBox="0 0 50 25" id="custom" key="0">
          <ellipse cx="50" cy="25" rx="50" ry="25"></ellipse>
        </symbol>
      )
    }
  },
  NodeSubtypes: {},
  EdgeTypes: {
    emptyEdge: {  // required to show empty edges
      shapeId: "#emptyEdge",
      shape: (
        <symbol viewBox="0 0 50 50" id="emptyEdge" key="0">
          <circle cx="25" cy="25" r="8" fill="currentColor"> </circle>
        </symbol>
      )
    }
  }
}

const NODE_KEY = "id"       // Allows D3 to correctly update DOM

class Graph extends Component {

  constructor(props) {
    super(props);

    this.state = {
      graph: sample,
      selected: {}
    }
  }

  /* Define custom graph editing methods here */

  render() {
    const nodes = this.state.graph.nodes;
    const edges = this.state.graph.edges;
    const selected = this.state.selected;

    const NodeTypes = GraphConfig.NodeTypes;
    const NodeSubtypes = GraphConfig.NodeSubtypes;
    const EdgeTypes = GraphConfig.EdgeTypes;

    return (
      <div id='graph' style={styles.graph}>

        <GraphView  ref='GraphView'
                    nodeKey={NODE_KEY}
                    nodes={nodes}
                    edges={edges}
                    selected={selected}
                    nodeTypes={NodeTypes}
                    nodeSubtypes={NodeSubtypes}
                    edgeTypes={EdgeTypes}
                    allowMultiselect={true} // true by default, set to false to disable multi select.
                    onSelect={this.onSelect}
                    onCreateNode={this.onCreateNode}
                    onUpdateNode={this.onUpdateNode}
                    onDeleteNode={this.onDeleteNode}
                    onCreateEdge={this.onCreateEdge}
                    onSwapEdge={this.onSwapEdge}
                    onDeleteEdge={this.onDeleteEdge}/>
      </div>
    );
  }

}

A typical graph that would be stored in the Graph component's state looks something like this:

{
  "nodes": [
    {
      "id": 1,
      "title": "Node A",
      "x": 258.3976135253906,
      "y": 331.9783248901367,
      "type": "empty"
    },
    {
      "id": 2,
      "title": "Node B",
      "x": 593.9393920898438,
      "y": 260.6060791015625,
      "type": "empty"
    },
    {
      "id": 3,
      "title": "Node C",
      "x": 237.5757598876953,
      "y": 61.81818389892578,
      "type": "custom"
    },
    {
      "id": 4,
      "title": "Node C",
      "x": 600.5757598876953,
      "y": 600.81818389892578,
      "type": "custom"
    }
  ],
  "edges": [
    {
      "source": 1,
      "target": 2,
      "type": "emptyEdge"
    },
    {
      "source": 2,
      "target": 4,
      "type": "emptyEdge"
    }
  ]
}

For a detailed example, check out src/examples/graph.js. To run the example:

npm install
npm run example

A webpage will open in your default browser automatically.

  • To add nodes, hold shift and click on the grid.
  • To add edges, hold shift and click/drag to between nodes.
  • To delete a node or edge, click on it and press delete.
  • Click and drag nodes to change their position.
  • To select multiple nodes, press Ctrl+Shift then click and drag the mouse.
  • You may copy and paste selected nodes and edges with Ctrl+C and Ctrl+V
  • Note: On Mac computers, use Cmd instead of Ctrl.

All props are detailed below.

Props

Prop Type Required Notes
nodeKey string true Key for D3 to update nodes(typ. UUID).
nodes Array<INode> true Array of graph nodes.
edges Array<IEdge> true Array of graph edges.
allowCopyEdges boolean false (default false) Allow onCopySelected to be called when an edge is selected without any nodes.
allowMultiselect boolean false (default true) Use Ctrl-Shift-LeftMouse to draw a multiple selection box.
selected object true The currently selected graph entity.
nodeTypes object true Config object of available node types.
nodeSubtypes object true Config object of available node subtypes.
edgeTypes object true Config object of available edge types.
onSelect func false Called when nodes are selected when allowMultiselect is true. Is passed an object with nodes and edges included.
onCreateNode func true Called when a node is created.
onContextMenu func true Called when contextmenu event triggered.
onUpdateNode func true Called when a node is moved.
onCreateEdge func true Called when an edge is created.
onSwapEdge func true Called when an edge 'target' is swapped.
onBackgroundClick func false Called when the background is clicked.
onArrowClicked func false Called when the arrow head is clicked.
onUndo func false A function called when Ctrl-Z is activated. React-digraph does not keep track of actions, this must be implemented in the client website.
onCopySelected func false A function called when Ctrl-C is activated. React-digraph does not keep track of copied nodes or edges, the this must be implemented in the client website.
onPasteSelected func false A function called when Ctrl-V is activated. React-digraph does not keep track of copied nodes or edges, the this must be implemented in the client website.
canDeleteSelected func false takes the place of canDeleteNode and canDeleteEdge. It accepts a SelectionT type as a parameter. It is called before a node or edge is deleted. The function should return a boolean.
canCreateEdge func false Called before an edge is created.
canSwapEdge func false Called before an edge 'target' is swapped.
afterRenderEdge func false Called after an edge is rendered.
renderNode func false Called to render node geometry.
renderNodeText func false Called to render the node text
renderDefs func false Called to render SVG definitions.
renderBackground func false Called to render SVG background.
readOnly bool false Disables all graph editing interactions.
disableBackspace bool false Disables using backspace to delete the selected node.
maxTitleChars number false Truncates node title characters.
gridSize number false Overall grid size.
gridSpacing number false Grid spacing.
gridDotSize number false Grid dot size.
minZoom number false Minimum zoom percentage.
maxZoom number false Maximum zoom percentage.
nodeSize number false Node bbox size.
edgeHandleSize number false Edge handle size.
edgeArrowSize number false Edge arrow size in pixels. Default 8. Set to 0 to hide arrow.
zoomDelay number false Delay before zoom occurs.
zoomDur number false Duration of zoom transition.
showGraphControls boolean false Whether to show zoom controls.
layoutEngineType typeof LayoutEngineType false Uses a pre-programmed layout engine, such as 'SnapToGrid'
rotateEdgeHandle boolean false Whether to rotate edge handle with edge when a node is moved
centerNodeOnMove boolean false Whether the node should be centered on cursor when moving a node
initialBBox typeof IBBox false If specified, initial render graph using the given bounding box
graphConfig object false dagre graph setting configuration, which will override layout engine graph configuration - only apply to 'HorizontalTree'
nodeSizeOverridesAllowed boolean false Flag to toggle sizeOverride in nodes - only apply to 'HorizontalTree'
nodeLocationOverrides object false Nodes location overrides object - only apply to 'HorizontalTree'

onCreateNode

You have access to d3 mouse event in onCreateNode function.

  onCreateNode = (x, y, mouseEvent) => {
    // we can get the exact mouse position when click happens with this line
    const {pageX, pageY} = mouseEvent;
    // rest of the code for adding a new node ...
  };

Prop Types:

See prop types in the typings folder.

INode

Prop Type Required Notes
anyIDKey string true An id or key for nodes, same as the nodeKey prop
title string true Used in edges and to render the node text.
x number false X coordinate of the node.
y number false Y coordinate of the node.
type string false Node type, for displaying a custom SVG shape.
subtype string false Node subtype, for displaying a custom SVG shape.

title

The title attribute is used for the IDs in the SVG nodes in the graph.

IEdge

Prop Type Required Notes
source string true The title of the parent node.
target string true The title of the child node.
type string false Edge type, for displaying a custom SVG shape.
handleText string false Text to render on the edge.
handleTooltipText string false Used to render the SVG title element.
label_from string false Text to render along the edge with label_to.
label_to string false Text to render along the edge with label_from.

Imperative API

You can call these methods on the GraphView class using a ref.

Method Type Notes
panToNode (id: string, zoom?: boolean) => void Center the node given by id within the viewport, optionally zoom in to fit it.
panToEdge (source: string, target: string, zoom?: boolean) => void Center the edge between source and target node IDs within the viewport, optionally zoom in to fit it.

Deprecation Notes

Prop Type Required Notes
emptyType string true 'Default' node type.
getViewNode func true Node getter.
renderEdge func false Called to render edge geometry.
enableFocus bool false Adds a 'focus' toggle state to GraphView.
transitionTime number false Fade-in/Fade-out time.
primary string false Primary color.
light string false Light color.
dark string false Dark color.
style object false Style prop for wrapper.
gridDot number false Grid dot size.
graphControls boolean true Whether to show zoom controls.

More Repositories

1

react-vis

Data Visualization Components
JavaScript
8,653
star
2

baseweb

A React Component library implementing the Base design language
TypeScript
8,611
star
3

cadence

Cadence is a distributed, scalable, durable, and highly available orchestration engine to execute asynchronous long-running business logic in a scalable and resilient way.
Go
7,766
star
4

RIBs

Uber's cross-platform mobile architecture framework.
Kotlin
7,661
star
5

kraken

P2P Docker registry capable of distributing TBs of data in seconds
Go
5,817
star
6

prototool

Your Swiss Army Knife for Protocol Buffers
Go
5,053
star
7

causalml

Uplift modeling and causal inference with machine learning algorithms
Python
4,720
star
8

h3

Hexagonal hierarchical geospatial indexing system
C
4,566
star
9

NullAway

A tool to help eliminate NullPointerExceptions (NPEs) in your Java code with low build-time overhead
Java
3,517
star
10

AutoDispose

Automatic binding+disposal of RxJava streams.
Java
3,357
star
11

aresdb

A GPU-powered real-time analytics storage and query engine.
Go
2,981
star
12

piranha

A tool for refactoring code related to feature flag APIs
Java
2,219
star
13

orbit

A Python package for Bayesian forecasting with object-oriented design and probabilistic models under the hood.
Python
1,797
star
14

ios-snapshot-test-case

Snapshot view unit tests for iOS
Objective-C
1,763
star
15

petastorm

Petastorm library enables single machine or distributed training and evaluation of deep learning models from datasets in Apache Parquet format. It supports ML frameworks such as Tensorflow, Pytorch, and PySpark and can be used from pure Python code.
Python
1,742
star
16

needle

Compile-time safe Swift dependency injection framework
Swift
1,740
star
17

manifold

A model-agnostic visual debugging tool for machine learning
JavaScript
1,637
star
18

okbuck

OkBuck is a gradle plugin that lets developers utilize the Buck build system on a gradle project.
Java
1,536
star
19

UberSignature

Provides an iOS view controller allowing a user to draw their signature with their finger in a realistic style.
Objective-C
1,283
star
20

nanoscope

An extremely accurate Android method tracing tool.
HTML
1,239
star
21

tchannel

network multiplexing and framing protocol for RPC
Thrift
1,150
star
22

queryparser

Parsing and analysis of Vertica, Hive, and Presto SQL.
Haskell
1,067
star
23

fiber

Distributed Computing for AI Made Simple
Python
1,037
star
24

neuropod

A uniform interface to run deep learning models from multiple frameworks
C++
928
star
25

uReplicator

Improvement of Apache Kafka Mirrormaker
Java
894
star
26

pam-ussh

uber's ssh certificate pam module
Go
832
star
27

ringpop-go

Scalable, fault-tolerant application-layer sharding for Go applications
Go
813
star
28

h3-js

h3-js provides a JavaScript version of H3, a hexagon-based geospatial indexing system.
JavaScript
796
star
29

mockolo

Efficient Mock Generator for Swift
Swift
770
star
30

xviz

A protocol for real-time transfer and visualization of autonomy data
JavaScript
760
star
31

h3-py

Python bindings for H3, a hierarchical hexagonal geospatial indexing system
Python
751
star
32

streetscape.gl

Visualization framework for autonomy and robotics data encoded in XVIZ
JavaScript
702
star
33

react-view

React View is an interactive playground, documentation and code generator for your components.
TypeScript
686
star
34

nebula.gl

A suite of 3D-enabled data editing overlays, suitable for deck.gl
TypeScript
659
star
35

RxDogTag

Automatic tagging of RxJava 2+ originating subscribe points for onError() investigation.
Java
645
star
36

peloton

Unified Resource Scheduler to co-schedule mixed types of workloads such as batch, stateless and stateful jobs in a single cluster for better resource utilization.
Go
636
star
37

motif

A simple DI API for Android / Java
Kotlin
531
star
38

signals-ios

Typeful eventing
Objective-C
526
star
39

tchannel-go

Go implementation of a multiplexing and framing protocol for RPC calls
Go
479
star
40

grafana-dash-gen

grafana dash dash dash gen
JavaScript
473
star
41

marmaray

Generic Data Ingestion & Dispersal Library for Hadoop
Java
473
star
42

zanzibar

A build system & configuration system to generate versioned API gateways.
Go
451
star
43

clay

Clay is a framework for building RESTful backend services using best practices. It’s a wrapper around Flask.
Python
441
star
44

astro

Astro is a tool for managing multiple Terraform executions as a single command
Go
429
star
45

NEAL

πŸ”ŽπŸž A language-agnostic linting platform
OCaml
423
star
46

react-vis-force

d3-force graphs as React Components.
JavaScript
401
star
47

arachne

An always-on framework that performs end-to-end functional network testing for reachability, latency, and packet loss
Go
387
star
48

cadence-web

Web UI for visualizing workflows on Cadence
JavaScript
378
star
49

Python-Sample-Application

Python
375
star
50

rides-ios-sdk

Uber Rides iOS SDK (beta)
Swift
366
star
51

stylist

A stylist creates cool styles. Stylist is a Gradle plugin that codegens a base set of Android XML themes.
Kotlin
355
star
52

storagetapper

StorageTapper is a scalable realtime MySQL change data streaming, logical backup and logical replication service
Go
333
star
53

swift-concurrency

Concurrency utilities for Swift
Swift
323
star
54

RemoteShuffleService

Remote shuffle service for Apache Spark to store shuffle data on remote servers.
Java
316
star
55

cyborg

Display Android Vectordrawables on iOS.
Swift
300
star
56

rides-android-sdk

Uber Rides Android SDK (beta)
Java
287
star
57

h3-go

Go bindings for H3, a hierarchical hexagonal geospatial indexing system
Go
279
star
58

h3-java

Java bindings for H3, a hierarchical hexagonal geospatial indexing system
Java
258
star
59

h3-py-notebooks

Jupyter notebooks for h3-py, a hierarchical hexagonal geospatial indexing system
Jupyter Notebook
244
star
60

hermetic_cc_toolchain

Bazel C/C++ toolchain for cross-compiling C/C++ programs
Starlark
230
star
61

geojson2h3

Conversion utilities between H3 indexes and GeoJSON
JavaScript
214
star
62

artist

An artist creates views. Artist is a Gradle plugin that codegens a base set of Android Views.
Kotlin
210
star
63

tchannel-node

JavaScript
205
star
64

RxCentralBle

A reactive, interface-driven central role Bluetooth LE library for Android
Java
199
star
65

uberalls

Track code coverage metrics with Jenkins and Phabricator
Go
187
star
66

SwiftCodeSan

SwiftCodeSan is a tool that "sanitizes" code written in Swift.
Swift
172
star
67

rides-python-sdk

Uber Rides Python SDK (beta)
Python
170
star
68

doubles

Test doubles for Python.
Python
166
star
69

logtron

A logging MACHINE
JavaScript
158
star
70

cadence-java-client

Java framework for Cadence Workflow Service
Java
139
star
71

athenadriver

A fully-featured AWS Athena database driver (+ athenareader https://github.com/uber/athenadriver/tree/master/athenareader)
Go
138
star
72

cassette

Store and replay HTTP requests made in your Python app
Python
138
star
73

UBTokenBar

Flexible and extensible UICollectionView based TokenBar written in Swift
Swift
136
star
74

tchannel-java

A Java implementation of the TChannel protocol.
Java
133
star
75

bayesmark

Benchmark framework to easily compare Bayesian optimization methods on real machine learning tasks
Python
128
star
76

android-template

This template provides a starting point for open source Android projects at Uber.
Java
127
star
77

crumb

An annotation processor for breadcrumbing metadata across compilation boundaries.
Kotlin
122
star
78

py-find-injection

Look for SQL injection attacks in python source code
Python
119
star
79

rides-java-sdk

Uber Rides Java SDK (beta)
Java
102
star
80

startup-reason-reporter

Reports the reason why an iOS App started.
Objective-C
96
star
81

uber-poet

A mock swift project generator & build runner to help benchmark various module dependency graphs.
Python
94
star
82

cadence-java-samples

Java
93
star
83

charlatan

A Python library to efficiently manage and install database fixtures
Python
89
star
84

swift-abstract-class

Compile-time abstract class validation for Swift
Swift
83
star
85

simple-store

Simple yet performant asynchronous file storage for Android
Java
81
star
86

tchannel-python

Python implementation of the TChannel protocol.
Python
77
star
87

eight-track

Record and playback HTTP requests
JavaScript
70
star
88

client-platform-engineering

A collection of cookbooks, scripts and binaries used to manage our macOS, Ubuntu and Windows endpoints
Ruby
70
star
89

multidimensional_urlencode

Python library to urlencode a multidimensional dict
Python
67
star
90

lint-checks

A set of opinionated and useful lint checks
Kotlin
67
star
91

uncaught-exception

Handle uncaught exceptions.
JavaScript
66
star
92

swift-common

Common code used by various Uber open source projects
Swift
65
star
93

uberscriptquery

UberScriptQuery, a SQL-like DSL to make writing Spark jobs super easy
Java
58
star
94

sentry-logger

A Sentry transport for Winston
JavaScript
55
star
95

graph.gl

WebGL2-Powered Visualization Components for Graph Visualization
JavaScript
50
star
96

nanoscope-art

C++
48
star
97

assume-role-cli

CLI for AssumeRole is a tool for running programs with temporary credentials from AWS's AssumeRole API.
Go
47
star
98

airlock

A prober to probe HTTP based backends for health
JavaScript
47
star
99

mutornadomon

Easy-to-install monitor endpoint for Tornado applications
Python
46
star
100

kafka-logger

A kafka logger for winston
JavaScript
45
star