diff --git a/modules/graph-gl/docs/api-reference/d3-layout.md b/modules/graph-gl/docs/api-reference/d3-layout.md
new file mode 100644
index 00000000..ccccdba3
--- /dev/null
+++ b/modules/graph-gl/docs/api-reference/d3-layout.md
@@ -0,0 +1,57 @@
+# D3 Force Layout
+
+
+
+
+
+
+This layout is an integration between [d3-force](https://github.com/d3/d3-force) and react-graph-gl to render the layout in a WebGL context.
+
+## Configurations
+
+You can set the custom configuration to the d3-force layout directed by passing a configuration object when instnatiating the layout object for GraphGL.
+
+```js
+
+```
+
+#### alpha (Number, optional)
+The target alpha of the layout for each iteration. If alpha is specified, sets the current alpha to the specified number in the range [0,1]. The default value is 0.3.
+
+#### resumeAlpha (Number, optional)
+The resumeAlpha can be used to “reheat” the simulation during interaction, such as when dragging a node, or to resume the simulation after temporarily pausing the layout.
+The default value is 0.1.
+
+#### nBodyStrength: (Number, optional)
+We use [many-body](https://github.com/d3/d3-force#many-body) as the charge force to apply force applies mutually amongst all nodes. It can be used to simulate gravity (attraction) if the `nBodyStrength` is positive, or electrostatic charge (repulsion) if the `nBodyStrength` is negative.
+The default value is -900.
+
+#### nBodyDistanceMin (Number, optional)
+Sets the minimum distance between nodes over which this force is considered. If distance is not 'nBodyDistanceMin', returns the current minimum distance, which defaults to 100.
+
+
+#### nBodyDistanceMax (Number, optional)
+Sets the maximum distance between nodes over which this force is considered. If distance is not 'nBodyDistanceMin', returns the current minimum distance, which defaults to 400.
+
+#### getCollisionRadius (Function, optional)
+The [collision force](https://github.com/d3/d3-force#collision) treats nodes as circles with a given radius, rather than points, and prevents nodes from overlapping. The `getCollisionRadius` expects a function as:
+```js
+getCollisionRadius: node => node.collisionRadius
+```
+The function will iterated each node and return the raidus for collision detection.
+If getCollisionRadius is not specified, it defaults to zero radius for all nodes.
+
+## Source
+
+ - [d3-force.js](TBD/blob/master/src/layouts/d3-force/index.js)
+
+ - [Storybook example](TBD/blob/master/stories/basic-layouts/stories.js#L56-L71)
diff --git a/modules/graph-gl/docs/api-reference/edge-style-flow.md b/modules/graph-gl/docs/api-reference/edge-style-flow.md
new file mode 100644
index 00000000..a00499b3
--- /dev/null
+++ b/modules/graph-gl/docs/api-reference/edge-style-flow.md
@@ -0,0 +1,27 @@
+# FLOW
+
+
+
+
+
+### `color` (String | Array | Function, optional)
+- Default: `[255, 255, 255, 255]`
+- The value can be hex code, color name, or color array `[r, g, b, a]` (each component is in the 0 - 255 range).
+- If a color value (hex code, color name, or array) is provided, it is used as the global color for all edges.
+- If a function is provided, it is called on each edge to retrieve its color.
+
+### `speed` (Number | Function, optional)
+- Default: `0`
+- Unit: number of moving segment pass through the line per second.
+- If a number is provided for `speed`, all the flow will have the same speed.
+- If an accessor function is provided, the function will be called to retrieve the speed for each flow.
+
+### `width` (Number | Function, optional)
+- Default: `1`
+- If a number is provided for `width`, all the flow will have the same width.
+- If an accessor function is provided, the function will be called to retrieve the width for each flow.
+
+### `tailLength` (Number | Function, optional)
+- Default: `1`
+- If a number is provided for `tailLength`, all the flow will have the same length for the fading tail.
+- If an accessor function is provided, the function will be called to retrieve the length of the fading tail for each flow.
diff --git a/modules/graph-gl/docs/api-reference/edge-style-label.md b/modules/graph-gl/docs/api-reference/edge-style-label.md
new file mode 100644
index 00000000..1eb727b6
--- /dev/null
+++ b/modules/graph-gl/docs/api-reference/edge-style-label.md
@@ -0,0 +1,34 @@
+# LABEL
+
+
+
+
+
+### `text` (String | Function, required)
+- The text of the label.
+- If a string is provided for `text`, all the edges will have the same text.
+- If an accessor function is provided, the function will be called to retrieve the text of each edge.
+
+### `color` (String | Array | Function, optional)
+- Default: `[255, 255, 255, 255]`
+- The value can be hex code, color name, or color array `[r, g, b, a]` (each component is in the 0 - 255 range).
+- If a color value (hex code, color name, or array) is provided, it is used as the global color for all edges.
+- If a function is provided, it is called on each edge to retrieve its color.
+
+### `fontSize` (Number | Function, optional)
+- Default: `12`
+- If a number is provided for `fontSize`, all the labels will have the same font size.
+- If an accessor function is provided, the function will be called to retrieve the font size of each label.
+
+### `textAnchor` (String | Function, optional)
+- Default: `middle`
+- The text anchor. Available options include 'start', 'middle' and 'end'.
+
+- If a string is provided, it is used as the text anchor for all edges.
+- If a function is provided, it is called on each edge to retrieve its text anchor.
+
+### `alignmentBaseline` (String | Function, optional)
+- Default: `center`
+The alignment baseline. Available options include 'top', 'center' and 'bottom'.
+- If a string is provided, it is used as the alignment baseline for all edges.
+- If a function is provided, it is called on each edge to retrieve its alignment baseline.
diff --git a/modules/graph-gl/docs/api-reference/edge-style.md b/modules/graph-gl/docs/api-reference/edge-style.md
new file mode 100644
index 00000000..a04001e4
--- /dev/null
+++ b/modules/graph-gl/docs/api-reference/edge-style.md
@@ -0,0 +1,33 @@
+# Edge Style
+
+### Usage
+
+```js
+edgeStyle={{
+ stroke: 'black',
+ strokeWidth: 2,
+ decorators: [
+ {
+ type: EDGE_DECORATOR_TYPE.LABEL,
+ text: edge => edge.id,
+ color: '#000',
+ fontSize: 18,
+ },
+ ],
+}}
+```
+
+### `stroke` (String | Array | Function, optional)
+- Default: `[255, 255, 255, 255]`
+- The value can be hex code, color name, or color array `[r, g, b, a]` (each component is in the 0 - 255 range).
+- If a color value (hex code, color name, or array) is provided, it is used as the global color for all edges.
+- If a function is provided, it is called on each rectangle to retrieve its color.
+
+### `strokeWidth` (Number | Function, optional)
+- Default: `0`
+The width of the outline of each rectangle.
+If a number is provided, it is used as the outline width for all edges.
+If a function is provided, it is called on each rectangle to retrieve its outline width.
+
+### `decorators` (Array, optional)
+A set of decorators on edges. Please see more detail in the ['Edge decorators'](/docs/api-reference/edge-style-label) chapter.
diff --git a/modules/graph-gl/docs/api-reference/edge.md b/modules/graph-gl/docs/api-reference/edge.md
new file mode 100644
index 00000000..6996fcd3
--- /dev/null
+++ b/modules/graph-gl/docs/api-reference/edge.md
@@ -0,0 +1,88 @@
+# Edge Class
+
+The `Edge` class is the base class of the edge, which provides a list of basic util functions to be used throughout the applications.
+
+
+## Constructor
+```js
+new Edge(props);
+```
+
+Parameters:
+- `props` (Object) - `Edge` properties.
+
+### Basic Properties
+##### `id` (String|Number, required)
+
+The `id` must be unique among all edges in the graph at a given time.
+
+
+##### `sourceId` (String|Number, required)
+The id of the source node.
+
+##### `targetId` (String|Number, required)
+The id of the target node.
+
+
+##### `directed` (Boolean, optional)
+
+- Default: `false`
+The edge has direction or not.
+
+
+##### `data` (Object, optional)
+
+- Default: `{}`
+
+The origin edge data.
+
+
+## getId()
+Return the ID of the edge.
+
+
+## getPropertyValue(key)
+Return of the value of the selected property key.
+
+##### `key` (String|Number, required)
+
+The property key.
+
+## getSourceNodeId()
+Get the ID of the source node.
+
+
+## getTargetNodeId()
+Get the ID of the target node.
+
+
+## isDirected()
+Return whether the edge is directed or not.
+
+
+## setData(data)
+
+Set the new edge data.
+
+##### `data` (Any, required)
+
+The new data of the edge.
+
+
+## setDataProperty(key, value)
+
+Update a data property.
+
+##### `key` (String, required)
+
+The key of the property
+
+##### `value` (Any, required)
+
+The value of the property.
+
+
+
+## Source
+
+[src/core/edge.js](TBD/blob/master/src/core/edge.js)
diff --git a/modules/graph-gl/docs/api-reference/graph.md b/modules/graph-gl/docs/api-reference/graph.md
new file mode 100644
index 00000000..905369d6
--- /dev/null
+++ b/modules/graph-gl/docs/api-reference/graph.md
@@ -0,0 +1,140 @@
+# Graph Class
+
+The `Graph` class is the base class of the graph.
+
+## Constructor
+```js
+new Graph(graph);
+```
+
+Parameters:
+
+##### `graph` (Graph, optional)
+
+## setGraphName()
+Set the name of the graph.
+
+## getGraphName()
+Get the name of the graph. Normally it can be used for dirty check.
+
+## addEdge(edge)
+
+Add a new edge to the graph.
+
+##### `edge` (Edge, required)
+Expect a Edge object to be added to the graph.
+
+## addNode(node)
+
+Add a new node to the graph.
+
+##### `node` (Node, required)
+Expect a Node object to be added to the graph.
+
+
+## batchAddEdges(edges)
+
+Batch add edges to the graph.
+
+##### `edges` (Edge[], required)
+Expect a list of Edge objects to be added to the graph.
+
+
+## batchAddNodes(nodes)
+
+Batch add nodes to the graph.
+
+##### `nodes` (Node[], required)
+Expect a list of Node objects to be added to the graph.
+
+## findEdge(edgeId)
+
+##### `edgeId` (String|Number, required)
+The target edge ID.
+
+Find the edge by edge ID.
+
+##### `edgeId` (String|Number, required)
+The target edge ID.
+
+## findNode(nodeId)
+
+Find the node by node ID.
+
+##### `nodeId` (String|Number, required)
+The target node ID.
+
+
+## getDegree(nodeId)
+
+Get the degree of the node by node ID.
+
+##### `nodeId` (String|Number, required)
+The target node ID.
+
+## getEdgeMap()
+
+Get the edge map of the graph. The key of the map is the ID of the edges.
+
+## getEdges()
+
+Get all the edges of the graph.
+
+
+## getConnectedEdges(nodeId)
+
+Return all the connected edges of a node by nodeID.
+
+##### `nodeId` (String|Number, required)
+The target node ID.
+
+
+## getNodeMap()
+
+Get the node map of the graph. The key of the map is the ID of the nodes.
+
+
+## getNodes()
+
+Get all the nodes of the graph.
+
+## getNodeSiblings(nodeId)
+
+Return all the sibling nodes of a node by nodeID.
+
+##### `nodeId` (String|Number, required)
+The target node ID.
+
+
+## isEmpty()
+
+Return true if the graph is empty.
+
+
+## removeEdge(edgeId)
+
+Remove an edge from the graph by the edge ID
+
+##### `edgeId` (String|Number, required)
+The target edge ID.
+
+
+## removeNode(nodeId)
+
+Remove a node from the graph by node ID
+
+##### `nodeId` (String|Number, required)
+The target node ID.
+
+
+## reset()
+
+Clean up everything in the graph.
+
+## resetEdges()
+
+Clean up all the edges in the graph.
+
+## resetNodes()
+
+Clean up all the nodes in the graph.
diff --git a/modules/graph-gl/docs/api-reference/graphgl.md b/modules/graph-gl/docs/api-reference/graphgl.md
new file mode 100644
index 00000000..d7e03ab6
--- /dev/null
+++ b/modules/graph-gl/docs/api-reference/graphgl.md
@@ -0,0 +1,92 @@
+# GraphGL
+
+
+
+
+
+### Usage
+
+```js
+import GraphGL, {
+ JSONLoader,
+ NODE_TYPE,
+ D3ForceLayout
+} from 'react-graph-gl';
+
+const App = ({data}) => {
+ const graph = JSONLoader({
+ json: data,
+ nodeParser: node => ({id: node.id}),
+ edgeParser: edge => ({
+ id: edge.id,
+ sourceId: edge.sourceId,
+ targetId: edge.targetId,
+ directed: true,
+ }),
+ });
+ return (
+
+ );
+}
+```
+
+### `graph` (Graph, required)
+The graph data will need to be processed through JSONLoader and converted into [`Graph`](docs/api-reference/graph) object. The expected data should be an object includes two arrays: `nodes` and `edges`. Each node require an unique `id`. Each edge should have `id` as edge ID, `sourceId` as the ID of the source node, and `targetId` as the ID of the target node. For example:
+```js
+const data = {
+ nodes: [
+ {id: '1'}, {id: '2'}, {id: '3'},
+ ],
+ edges: [
+ {id: 'e1', sourceId: '1', targetId: '2'},
+ {id: 'e2', sourceId: '1', targetId: '3'},
+ {id: 'e3', sourceId: '2', targetId: '3'},
+ ],
+};
+```
+
+Then, you can convert the data into `Graph` by `JSONLoader`:
+```js
+import {JSONLoader} from 'react-graph-gl';
+const graph = JSONLoader({json: data});
+```
+
+### `layout` (Layout, required)
+Use one of the layouts provided by react-graph-gl or create a new custom layout class by following the [instruction](/docs/advanced/custom-layout). For more detail, please see the [Layout](/docs/api-reference/layout) section.
+
+### `initialViewState` (Object, optional)
+For more detail, please see [here](/docs/api-reference/viewport).
+
+### `nodeStyle` (Array, required)
+
+A node is made of a set of layers. nodeStyle is a set of style objects to describe the style for each layer.
+For more detail, please see the explanation of nodeStyle at [here](docs/api-reference/node-style).
+
+### `nodeEvents` (Object, optional)
+For more detail, please see [here](/docs/api-reference/interactions).
+
+### `edgeStyle` (Object, required)
+
+For more detail, please see the explanation of edgeStyle at [here](docs/api-reference/edge-style)
+
+### `edgeEvents` (Object, optional)
+For more detail, please see [here](docs/api-reference/interactions).
+
+### Source
+[src/graphgl.js](TBD/master/src/graphgl.js)
diff --git a/modules/graph-gl/docs/api-reference/interactions.md b/modules/graph-gl/docs/api-reference/interactions.md
new file mode 100644
index 00000000..5bd916fe
--- /dev/null
+++ b/modules/graph-gl/docs/api-reference/interactions.md
@@ -0,0 +1,55 @@
+# Interactions
+
+In this chapter, you'll learn about how to interact with the graph.
+
+There are the porperties you can specify when using the GraphGL component:
+
+### `nodeEvents` (Object, optional)
+All events callbacks will be triggered with the following parameters:
+```js
+info: {
+ object: The object that was picked.
+ x: Mouse position x relative to the viewport.
+ y: Mouse position y relative to the viewport.
+ coordinate: Mouse position in viewport coordinate system.
+}
+```
+
+ - onClick: This callback will be called when the mouse clicks on a node. Default: `null`.
+ - onMouseEnter: This callback will be called when the mouse enter a node. Default: `null`.
+ - onHover: This callback will be called when the mouse hovers over a node. Default: `null`.
+ - onMouseLeave: This callback will be called when the mouse leaves a node. Default: `null`.
+ - onDrag: This callback will be called when draggin a node. Default: `null`.
+
+
+### `edgeEvents` (Object, optional)
+All events callbacks will be triggered with the following parameters:
+```js
+info: {
+ object: The object that was picked.
+ x: Mouse position x relative to the viewport.
+ y: Mouse position y relative to the viewport.
+ coordinate: Mouse position in viewport coordinate system.
+}
+```
+
+ - onClick: This callback will be called when the mouse clicks on an edge. Default: `null`.
+ - onHover: This callback will be called when the mouse hovers over an edge. Default: `null`.
+
+
+### `wheelSensitivity` (Number: 0 to 1, optional)
+Changes the scroll wheel sensitivity when zooming. This is a multiplicative modifier.
+So, a value between 0 and 1 reduces the sensitivity (zooms slower),
+and a value greater than 1 increases the sensitivity (zooms faster)
+
+### `enableZooming` (bool, optional)
+Whether zooming the graph is enabled
+
+### `enablePanning` (bool, optional)
+Whether panning the graph is enabled
+
+### `enableDragging` (bool, optional)
+Whether dragging the node is enabled
+
+### `resumeLayoutAfterDragging` (bool, optional)
+Resume layout calculation after dragging a node
diff --git a/modules/graph-gl/docs/api-reference/layout.md b/modules/graph-gl/docs/api-reference/layout.md
new file mode 100644
index 00000000..4ec2aa30
--- /dev/null
+++ b/modules/graph-gl/docs/api-reference/layout.md
@@ -0,0 +1,16 @@
+# Layout
+
+Use one of the layouts provided by react-graph-gl. Right now react-graph-gl provides D3-Force and Simple layout for basic usage.
+
+## SimpleLayout
+Please see [here](/docs/api-reference/simple-layout).
+
+## D3ForceLayout
+Please see [here](/docs/api-reference/d3-layout).
+
+## Create custom layout
+create a new custom layout class by following the [instruction](/docs/advanced/custom-layout)
+
+## Experimental layouts
+
+There are more experimental layouts under `src/experimental-layouts`, please reference to the experimental layout [gallery](docs/experimental).
diff --git a/modules/graph-gl/docs/api-reference/node-style-circle.md b/modules/graph-gl/docs/api-reference/node-style-circle.md
new file mode 100644
index 00000000..54d9d843
--- /dev/null
+++ b/modules/graph-gl/docs/api-reference/node-style-circle.md
@@ -0,0 +1,33 @@
+# CIRCLE
+
+
+
+
+
+### `fill` (String | Array | Function, optional)
+- Default: `#fff`
+- The value can be hex code, color name, or color array `[r, g, b, a]` (each component is in the 0 - 255 range).
+If a color value (hex code, color name, or array) is provided, it is used as the global color for all objects.
+If a function is provided, it is called on each rectangle to retrieve its color.
+
+### `radius` (Number | Function, optional)
+- Default: `1`
+- If a number is provided for `radius`, all the circles will have the same radius.
+If an accessor function is provided, the function will be called to retrieve the radius of each circle.
+
+### `stroke` (String | Array | Function, optional)
+- Default: `[0, 0, 0, 255]`
+- The value can be hex code, color name, or color array `[r, g, b, a]` (each component is in the 0 - 255 range).
+- If a color value (hex code, color name, or array) is provided, it is used as the global color for all objects.
+- If a function is provided, it is called on each rectangle to retrieve its color.
+
+### `strokeWidth` (Number | Function, optional)
+- Default: `0`
+- The width of the outline of each rectangle.
+- If a number is provided, it is used as the outline width for all rectangles.
+- If a function is provided, it is called on each rectangle to retrieve its outline width.
+
+
+## Source
+
+[Storybook example](TBD/master/stories/node-types/stories.js)
diff --git a/modules/graph-gl/docs/api-reference/node-style-label.md b/modules/graph-gl/docs/api-reference/node-style-label.md
new file mode 100644
index 00000000..c05bc0f8
--- /dev/null
+++ b/modules/graph-gl/docs/api-reference/node-style-label.md
@@ -0,0 +1,45 @@
+# LABEL
+
+
+
+
+
+### `text` (String | Function, required)
+- The text of the label.
+- If a string is provided for `text`, all the objects will have the same text.
+- If an accessor function is provided, the function will be called to retrieve the text of each object.
+
+### `color` (String | Array | Function, optional)
+- Default: `[0, 0, 0, 255]`
+- The value can be hex code, color name, or color array `[r, g, b, a]` (each component is in the 0 - 255 range).
+- If a color value (hex code, color name, or array) is provided, it is used as the global color for all objects.
+- If a function is provided, it is called on each object to retrieve its color.
+
+### `fontSize` (Number | Function, optional)
+- Default: `12`
+- If a number is provided for `fontSize`, all the labels will have the same font size.
+- If an accessor function is provided, the function will be called to retrieve the font size of each label.
+
+### `textAnchor` (String | Function, optional)
+- Default: `middle`
+- The text anchor. Available options include 'start', 'middle' and 'end'.
+
+- If a string is provided, it is used as the text anchor for all objects.
+- If a function is provided, it is called on each object to retrieve its text anchor.
+
+### `alignmentBaseline` (String | Function, optional)
+- Default: `center`
+The alignment baseline. Available options include 'top', 'center' and 'bottom'.
+- If a string is provided, it is used as the alignment baseline for all objects.
+- If a function is provided, it is called on each object to retrieve its alignment baseline.
+
+### `angle` (Number | Function, optional)
+- Default: `0`
+- The rotating angle of each text label, in degrees.
+- If a number is provided, it is used as the angle for all objects.
+- If a function is provided, it is called on each object to retrieve its angle.
+
+
+## Source
+
+[Storybook example](TBD/master/stories/node-types/stories.js)
diff --git a/modules/graph-gl/docs/api-reference/node-style-marker.md b/modules/graph-gl/docs/api-reference/node-style-marker.md
new file mode 100644
index 00000000..6a8a0c00
--- /dev/null
+++ b/modules/graph-gl/docs/api-reference/node-style-marker.md
@@ -0,0 +1,37 @@
+# MARKER
+
+
+
+
+
+### `marker` (String | Function, required)
+- Marker can be one of the following types:
+```js
+"location-marker-filled", "bell-filled", "bookmark-filled", "bookmark", "cd-filled", "cd", "checkmark",
+"circle-check-filled", "circle-check", "circle-filled", "circle-i-filled", "circle-i", "circle-minus-filled",
+"circle-minus", "circle-plus-filled", "circle-plus", "circle-questionmark-filled", "circle-questionmark",
+"circle-slash-filled", "circle-slash", "circle-x-filled", "circle-x", "circle", "diamond-filled", "diamond",
+"flag-filled", "flag", "gear", "heart-filled", "heart", "bell", "location-marker", "octagonal-star-filled",
+"octagonal-star", "person-filled", "person", "pin-filled", "pin", "plus-small", "plus", "rectangle-filled",
+"rectangle", "star-filled", "star", "tag-filled", "tag", "thumb-down-filled", "thumb-down", "thumb-up",
+"thumb_up-filled", "triangle-down-filled", "triangle-down", "triangle-left-filled", "triangle-left",
+"triangle-right-filled", "triangle-right", "triangle-up-filled", "triangle-up", "x-small", "x"
+```
+- If a string is provided for `marker`, all the objects will use the same marker.
+- If an accessor function is provided, the function will be called to retrieve the marker of each marker.
+
+### `size` (Number | Function, optional)
+- Default: `12`
+- If a number is provided for `size`, all the markers will have the same size.
+- If an accessor function is provided, the function will be called to retrieve the size of each marker.
+
+### `fill` (String | Array | Function, optional)
+- Default: `[0, 0, 0, 255]`
+- The value can be hex code, color name, or color array `[r, g, b, a]` (each component is in the 0 - 255 range).
+If a color value (hex code, color name, or array) is provided, it is used as the global color for all objects.
+- If a function is provided, it is called on each object to retrieve its color.
+
+
+## Source
+
+[Storybook example](TBD/master/stories/node-types/stories.js)
diff --git a/modules/graph-gl/docs/api-reference/node-style-rectangle.md b/modules/graph-gl/docs/api-reference/node-style-rectangle.md
new file mode 100644
index 00000000..dbdbeb6a
--- /dev/null
+++ b/modules/graph-gl/docs/api-reference/node-style-rectangle.md
@@ -0,0 +1,38 @@
+# RECTANGLE
+
+
+
+
+
+### `width` (Number | Function, required)
+- The width of the rectancle.
+- If a number is provided, it is used as the width for all objects.
+- If a function is provided, it is called on each object to retrieve its width.
+
+### `height` (Number | Function, required)
+- The height of the rectangle.
+- If a number is provided, it is used as the height for all objects.
+- If a function is provided, it is called on each object to retrieve its height.
+
+### `fill` (String | Array | Function, optional)
+- Default: `[0, 0, 0, 255]`
+- The value can be hex code, color name, or color array `[r, g, b, a]` (each component is in the 0 - 255 range).
+If a color value (hex code, color name, or array) is provided, it is used as the global color for all objects.
+- If a function is provided, it is called on each object to retrieve its color.
+
+### `stroke` (String | Array | Function, optional)
+- Default: `[0, 0, 0, 255]`
+- The value can be hex code, color name, or color array `[r, g, b, a]` (each component is in the 0 - 255 range).
+- If a color value (hex code, color name, or array) is provided, it is used as the global color for all objects.
+- If a function is provided, it is called on each rectangle to retrieve its color.
+
+### `strokeWidth` (Number | Function, optional)
+- Default: `0`
+The width of the outline of each rectangle.
+If a number is provided, it is used as the outline width for all rectangles.
+If a function is provided, it is called on each rectangle to retrieve its outline width.
+
+
+## Source
+
+[Storybook example](TBD/master/stories/node-types/stories.js)
diff --git a/modules/graph-gl/docs/api-reference/node-style.md b/modules/graph-gl/docs/api-reference/node-style.md
new file mode 100644
index 00000000..6d5f7e05
--- /dev/null
+++ b/modules/graph-gl/docs/api-reference/node-style.md
@@ -0,0 +1,36 @@
+# Node Style
+
+Node accessors control the way how users want to render nodes. Layers provide the flexibility that users can add several visual layers to represent a node, such as adding circles, icons, and text labels.
+
+### Usage
+Example of nodeStyle:
+```js
+
+```
+
+### `type` (String, required)
+
+- `Type` can only be `CIRCLE`, `MARKER`, `RECTANGLE`, or `LABEL`.
+- Different type of layer may requires different properties. See more details in the ['Node style'](/docs/api-reference/node-style-circle) chapter below.
+
+### `offset` (null | Array, optional)
+- Default: `null`
+- The offset distance from the position of the object.
+
+### `scaleWithZoom` (Boolean, optional)
+- Default: `true`
+- If `scaleWithZoom` is true, the size of the element will be scaled according to the zoom level.
+
+
+## Source
+
+[Storybook example](TBD/master/stories/node-types/stories.js)
diff --git a/modules/graph-gl/docs/api-reference/node.md b/modules/graph-gl/docs/api-reference/node.md
new file mode 100644
index 00000000..26209953
--- /dev/null
+++ b/modules/graph-gl/docs/api-reference/node.md
@@ -0,0 +1,103 @@
+# Node Class
+
+The `Node` class is the base class of the node, which provides a list of basic util functions to be used through out the applications.
+
+
+## Constructor
+```js
+new Node(props);
+```
+
+Parameters:
+- `props` (Object) - `Node` properties.
+
+### Basic Properties
+##### `id` (String|Number, required)
+
+The `id` must be unique among all nodes in the graph at a given time.
+
+##### `data` (Object, optional)
+
+- Default: `{}`
+
+The origin node data.
+
+
+## getConnectedEdges()
+Return all the connected edges.
+
+
+## getDegree()
+
+Return the degree of the node -- includes in-degree and out-degree
+
+
+## getId()
+
+Return the ID of the node.
+
+
+## getInDegree()
+
+Return the in-degree of the node.
+
+
+## getOutDegree()
+
+Return the out-degree of the node.
+
+
+## getPropertyValue(key)
+
+Return of the value of the selected property key.
+
+##### `key` (String|Number, required)
+
+The property key.
+
+
+## getSiblingIds()
+
+Return all the IDs of the sibling nodes.
+
+
+## setData(data)
+
+Set the new node data.
+
+##### `data` (Any, required)
+
+The new data of the node.
+
+
+## setDataProperty(key, value)
+
+Update a data property.
+
+##### `key` (String, required)
+
+The key of the property
+
+##### `value` (Any, required)
+
+The value of the property.
+
+
+## addConnectedEdges(edges)
+
+Add new connected edges to the node.
+
+
+## removeConnectedEdges(edges)
+
+Remove edges from `this._connectedEdges`
+
+
+## clearConnectedEdges()
+
+Clear `this._connectedEdges`
+
+
+## Source
+
+[src/core/node.js](TBD/master/src/core/node.js)
diff --git a/modules/graph-gl/docs/api-reference/simple-layout.md b/modules/graph-gl/docs/api-reference/simple-layout.md
new file mode 100644
index 00000000..dcd440e8
--- /dev/null
+++ b/modules/graph-gl/docs/api-reference/simple-layout.md
@@ -0,0 +1,33 @@
+# Simple Layout
+
+
+
+
+
+This example demonstrates how to render a pre-layoued graph using react-graph-gl.
+You can pre-compute the layout and have the position information in each node.
+By simply specifying the `nodePositionAccessor` through constructor, you'll be able to render the graph right away.
+
+## Configurations
+
+#### nodePositionAccessor
+The accessor to get the position ([x, y]) of the node.
+Example:
+```js
+ [
+ node.getPropertyValue('x'),
+ node.getPropertyValue('y'),
+ ]
+ })
+ }
+/>
+````
+
+## Source
+ - [simple-layout.js](TBD/master/src/layouts/simple-layout/index.js)
+
+ - [Storybook example](TBD/master/stories/basic-layouts/stories.js#L30-L45)
diff --git a/modules/graph-gl/docs/api-reference/viewport.md b/modules/graph-gl/docs/api-reference/viewport.md
new file mode 100644
index 00000000..cce2aacc
--- /dev/null
+++ b/modules/graph-gl/docs/api-reference/viewport.md
@@ -0,0 +1,21 @@
+# Viewport
+
+### initialViewState (Object, optional)
+
+```js
+initialViewState={{
+ target: [0, 0],
+ zoom: 1,
+}}
+```
+ - target ([x: Number, y: Number], optional): The target origin to the center of the view.
+ - zoom (Number, optional): The zoom level of the view.
+
+### `minZoom` (Number, optional)
+A minimum scale factor for zoom level of the graph.
+
+### `maxZoom` (Number, optional)
+A maximum scale factor for zoom level of the graph.
+
+### `viewportPadding` (Number, optional)
+Padding for fitting entire graph in the screen. (pixel)
diff --git a/modules/graph-gl/docs/table-of-contents.json b/modules/graph-gl/docs/table-of-contents.json
new file mode 100644
index 00000000..6cf068f2
--- /dev/null
+++ b/modules/graph-gl/docs/table-of-contents.json
@@ -0,0 +1,108 @@
+{
+ "id": "table-of-contents",
+ "chapters": [
+ {
+ "title": "Overview",
+ "entries": [
+ {
+ "entry": "docs/README"
+ },
+ {
+ "entry": "docs/version-policy"
+ }
+ ]
+ },
+ {
+ "title": "API Reference",
+ "chapters": [
+ {
+ "title": "GraphGL",
+ "entries": [
+ {
+ "entry": "docs/api-reference/graphgl"
+ },
+ {
+ "entry": "docs/api-reference/node-style"
+ },
+ {
+ "entry": "docs/api-reference/edge-style"
+ },
+ {
+ "entry": "docs/api-reference/interactions"
+ },
+ {
+ "entry": "docs/api-reference/viewport"
+ },
+ {
+ "entry": "docs/api-reference/layout"
+ }
+ ]
+ },
+ {
+ "title": "Node style",
+ "entries": [
+ {
+ "entry": "docs/api-reference/node-style-circle"
+ },
+ {
+ "entry": "docs/api-reference/node-style-rectangle"
+ },
+ {
+ "entry": "docs/api-reference/node-style-marker"
+ },
+ {
+ "entry": "docs/api-reference/node-style-label"
+ }
+ ]
+ },
+ {
+ "title": "Edge decorators",
+ "entries": [
+ {
+ "entry": "docs/api-reference/edge-style-label"
+ },
+ {
+ "entry": "docs/api-reference/edge-style-flow"
+ }
+ ]
+ },
+ {
+ "title": "Layouts",
+ "entries": [
+ {
+ "entry": "docs/api-reference/simple-layout"
+ },
+ {
+ "entry": "docs/api-reference/d3-layout"
+ }
+ ]
+ },
+ {
+ "title": "Core Data Structures",
+ "entries": [
+ {
+ "entry": "docs/api-reference/graph"
+ },
+ {
+ "entry": "docs/api-reference/node"
+ },
+ {
+ "entry": "docs/api-reference/edge"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "title": "Advanced",
+ "entries": [
+ {
+ "entry": "docs/advanced/custom-layout"
+ },
+ {
+ "entry": "docs/advanced/gallery"
+ }
+ ]
+ }
+ ]
+}
diff --git a/modules/graph-gl/docs/version-policy.md b/modules/graph-gl/docs/version-policy.md
new file mode 100644
index 00000000..6061a967
--- /dev/null
+++ b/modules/graph-gl/docs/version-policy.md
@@ -0,0 +1,3 @@
+# Versioning Policy
+
+TBD
diff --git a/modules/graph-gl/jest.config.js b/modules/graph-gl/jest.config.js
new file mode 100644
index 00000000..6d819d92
--- /dev/null
+++ b/modules/graph-gl/jest.config.js
@@ -0,0 +1,12 @@
+export default {
+ roots: ['./src'],
+ collectCoverageFrom: ['./src/**/*.js'],
+ setupFilesAfterEnv: ['./test/utils/setup-tests.js'],
+ testEnvironment: 'jsdom',
+ transform: {
+ '^.+\\.(js|jsx)$': 'babel-jest'
+ },
+ moduleNameMapper: {
+ '^d3-(.*)': '/../../node_modules/d3-$1/dist/d3-$1.js'
+ }
+};
diff --git a/modules/graph-gl/package.json b/modules/graph-gl/package.json
new file mode 100644
index 00000000..a086d3f5
--- /dev/null
+++ b/modules/graph-gl/package.json
@@ -0,0 +1,44 @@
+{
+ "name": "@deck.gl-community/graph-gl",
+ "version": "1.0.0",
+ "description": "WebGL2-Powered library for Graph Visualization",
+ "keywords": [
+ "graph",
+ "visualization",
+ "force-directed layout",
+ "gpu",
+ "deck.gl"
+ ],
+ "main": "dist/index.js",
+ "module": "dist/index.js",
+ "files": [
+ "dist",
+ "src"
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "@deck.gl/core": "^8.8.26",
+ "@deck.gl/layers": "^8.8.26",
+ "@luma.gl/core": "^8.5.18",
+ "cardinal-spline-js": "^2.3.10",
+ "color": "^4.2.3",
+ "core-js": "^3.29.0",
+ "d3": "^7.8.2",
+ "d3-array": "^3.2.2",
+ "d3-force": "^3.0.0",
+ "d3-format": "^3.1.0",
+ "d3-scale": "^4.0.2",
+ "global": "^4.4.0",
+ "lodash.isequal": "^4.5.0",
+ "lodash.pick": "^4.4.0",
+ "probe.gl": "^3.6.0"
+ },
+ "devDependencies": {
+ "@babel/preset-flow": "^7.18.6",
+ "@testing-library/jest-dom": "^5.16.5",
+ "babel-jest": "^29.4.3",
+ "eslint-plugin-jest": "^27.2.1",
+ "jest": "^29.2.2",
+ "jest-environment-jsdom": "^29.3.0"
+ }
+}
diff --git a/modules/graph-gl/scripts/install-pre-commit.sh b/modules/graph-gl/scripts/install-pre-commit.sh
new file mode 100755
index 00000000..8f4ced3c
--- /dev/null
+++ b/modules/graph-gl/scripts/install-pre-commit.sh
@@ -0,0 +1,3 @@
+#!/bin/sh
+cp 'scripts/pre-commit' '.git/hooks/pre-commit'
+echo "Installed!"
diff --git a/modules/graph-gl/scripts/pre-commit b/modules/graph-gl/scripts/pre-commit
new file mode 100755
index 00000000..8c028f6c
--- /dev/null
+++ b/modules/graph-gl/scripts/pre-commit
@@ -0,0 +1,6 @@
+#!/bin/sh
+jsfiles=$(git diff --cached --name-only --diff-filter=ACM | grep '\.jsx\?$' | tr '\n' ' ')
+[ -z "$jsfiles" ] && exit 0
+
+node_modules/.bin/prettier-eslint --write $jsfiles --eslint-config-path .eslintrc
+git add $jsfiles
diff --git a/modules/graph-gl/scripts/prettier-lint.sh b/modules/graph-gl/scripts/prettier-lint.sh
new file mode 100755
index 00000000..e8013b77
--- /dev/null
+++ b/modules/graph-gl/scripts/prettier-lint.sh
@@ -0,0 +1,15 @@
+#!/bin/sh
+
+# This script is only used in CI to verify that code is formatted with
+# prettier. For local use, install the commit hook. See the README for details.
+
+diffs=$(node_modules/.bin/prettier-eslint --write src/**/**/*.js website/**/**/*.js --eslint-config-path .eslintrc)
+[ -z "$diffs" ] && exit 0
+
+echo >&2 "Javascript files must be formatted with prettier."
+echo >&2 "Please install the commmit hook locally:"
+echo >&2 "./scripts/install-pre-commit.sh"
+echo >&2 "Alternatively, you can manually format the code with this command:"
+echo >&2 "node_modules/.bin/prettier-eslint --write "$diffs" --eslint-config-path .eslintrc.js"
+
+exit 1
diff --git a/modules/graph-gl/src/core/__tests__/__fixtures__/edge.json b/modules/graph-gl/src/core/__tests__/__fixtures__/edge.json
new file mode 100644
index 00000000..eef9c02c
--- /dev/null
+++ b/modules/graph-gl/src/core/__tests__/__fixtures__/edge.json
@@ -0,0 +1,8 @@
+{
+ "id": "edge1",
+ "sourceId": "node1",
+ "targetId": "node2",
+ "property1": 1,
+ "property2": true,
+ "property3": "sf"
+}
diff --git a/modules/graph-gl/src/core/__tests__/__fixtures__/graph1.json b/modules/graph-gl/src/core/__tests__/__fixtures__/graph1.json
new file mode 100644
index 00000000..5f950709
--- /dev/null
+++ b/modules/graph-gl/src/core/__tests__/__fixtures__/graph1.json
@@ -0,0 +1,15 @@
+{
+ "nodes": [
+ {"id": "Thenardier", "x": -100, "y": 100},
+ {"id": "Cosette", "x": 100, "y": 100},
+ {"id": "Javert", "x": 100, "y": -100},
+ {"id": "Fantine", "x": -100, "y": -100}
+ ],
+ "edges": [
+ {"id": "1", "sourceId": "Thenardier", "targetId": "Fantine"},
+ {"id": "2", "sourceId": "Cosette", "targetId": "Thenardier"},
+ {"id": "3", "sourceId": "Javert", "targetId": "Fantine"},
+ {"id": "4", "sourceId": "Javert", "targetId": "Thenardier"},
+ {"id": "5", "sourceId": "Javert", "targetId": "Cosette"}
+ ]
+}
diff --git a/modules/graph-gl/src/core/__tests__/__fixtures__/graph2.json b/modules/graph-gl/src/core/__tests__/__fixtures__/graph2.json
new file mode 100644
index 00000000..34aea071
--- /dev/null
+++ b/modules/graph-gl/src/core/__tests__/__fixtures__/graph2.json
@@ -0,0 +1,15 @@
+{
+ "nodes": [
+ {"name": "Thenardier", "x": -100, "y": 100},
+ {"name": "Cosette", "x": 100, "y": 100},
+ {"name": "Javert", "x": 100, "y": -100},
+ {"name": "Fantine", "x": -100, "y": -100}
+ ],
+ "edges": [
+ {"name": "1", "source": "Thenardier", "target": "Fantine"},
+ {"name": "2", "source": "Cosette", "target": "Thenardier"},
+ {"name": "3", "source": "Javert", "target": "Fantine"},
+ {"name": "4", "source": "Javert", "target": "Thenardier"},
+ {"name": "5", "source": "Javert", "target": "Cosette"}
+ ]
+}
diff --git a/modules/graph-gl/src/core/__tests__/__fixtures__/node.json b/modules/graph-gl/src/core/__tests__/__fixtures__/node.json
new file mode 100644
index 00000000..d3a1c6cb
--- /dev/null
+++ b/modules/graph-gl/src/core/__tests__/__fixtures__/node.json
@@ -0,0 +1 @@
+{"id": "node1", "property1": 1, "property2": true, "property3": "sf"}
diff --git a/modules/graph-gl/src/core/__tests__/base-layout.spec.js b/modules/graph-gl/src/core/__tests__/base-layout.spec.js
new file mode 100644
index 00000000..f5445614
--- /dev/null
+++ b/modules/graph-gl/src/core/__tests__/base-layout.spec.js
@@ -0,0 +1,5 @@
+describe('core/base-layout', () => {
+ it('nothing', () => {
+ expect(1).toBe(1);
+ });
+});
diff --git a/modules/graph-gl/src/core/__tests__/edge.spec.js b/modules/graph-gl/src/core/__tests__/edge.spec.js
new file mode 100644
index 00000000..4e7c0924
--- /dev/null
+++ b/modules/graph-gl/src/core/__tests__/edge.spec.js
@@ -0,0 +1,49 @@
+import SAMPLE_EDGE from './__fixtures__/edge.json';
+import Edge from '../edge';
+
+describe('core/edge', () => {
+ it('should have correctly functioning getters', () => {
+ const edge = new Edge({
+ id: 'edge1',
+ sourceId: 'node1',
+ targetId: 'node2',
+ directed: false,
+ data: SAMPLE_EDGE
+ });
+ expect(edge.getId()).toBe('edge1');
+ expect(edge.isDirected()).toBe(false);
+ expect(edge.getSourceNodeId()).toBe('node1');
+ expect(edge.getTargetNodeId()).toBe('node2');
+ expect(edge.getPropertyValue('property1')).toBe(1);
+ expect(edge.getPropertyValue('_directed')).toBe(false);
+ expect(edge.getPropertyValue('unknown')).toBeUndefined();
+ });
+
+ it('should have update existing edge internal data functioning getters', () => {
+ const edge = new Edge({
+ id: 'edge1',
+ sourceId: 'node1',
+ targetId: 'node2',
+ directed: false,
+ data: SAMPLE_EDGE
+ });
+ const newEdge = {
+ ...SAMPLE_EDGE,
+ property1: 2
+ };
+ edge.setData(newEdge);
+ expect(edge.getPropertyValue('property1')).toBe(2);
+ });
+
+ it('should have set new data property if it does not already exist', () => {
+ const edge = new Edge({
+ id: 'edge1',
+ sourceId: 'node1',
+ targetId: 'node2',
+ directed: false,
+ data: SAMPLE_EDGE
+ });
+ edge.setDataProperty('property4', 4);
+ expect(edge.getPropertyValue('property4')).toBe(4);
+ });
+});
diff --git a/modules/graph-gl/src/core/__tests__/graph-engine.spec.js b/modules/graph-gl/src/core/__tests__/graph-engine.spec.js
new file mode 100644
index 00000000..4bb02eba
--- /dev/null
+++ b/modules/graph-gl/src/core/__tests__/graph-engine.spec.js
@@ -0,0 +1,5 @@
+describe('core/graph-engine', () => {
+ it('nothing', () => {
+ expect(1).toBe(1);
+ });
+});
diff --git a/modules/graph-gl/src/core/__tests__/graph.spec.js b/modules/graph-gl/src/core/__tests__/graph.spec.js
new file mode 100644
index 00000000..8ebe3598
--- /dev/null
+++ b/modules/graph-gl/src/core/__tests__/graph.spec.js
@@ -0,0 +1,97 @@
+import SAMPLE_GRAPH1 from './__fixtures__/graph1.json';
+
+import Graph from '../graph';
+import Node from '../node';
+import Edge from '../edge';
+
+describe('core/graph', () => {
+ it('should work with empty named graph', () => {
+ const graph = new Graph();
+ graph.setGraphName('test');
+ expect(graph.getGraphName()).toBe('test');
+ });
+
+ it('should add edges in a batch', () => {
+ const graph = new Graph();
+ const glEdges = SAMPLE_GRAPH1.edges.map(
+ (e) =>
+ new Edge({
+ id: e.id,
+ sourceId: e.sourceId,
+ targetId: e.targetId,
+ directed: false,
+ data: {}
+ })
+ );
+ graph.batchAddEdges(glEdges);
+ // No edges will be added since those source/target
+ // nodes don't exist in the graph
+ expect(graph.getEdges()).toHaveLength(0);
+ });
+
+ it('should add nodes in a batch', () => {
+ const graph = new Graph();
+ const glNodes = SAMPLE_GRAPH1.nodes.map((n) => new Node({id: n.id, data: {}}));
+ graph.batchAddNodes(glNodes);
+ expect(graph.getNodes()).toHaveLength(glNodes.length);
+ const graph2 = new Graph(graph);
+ expect(graph2.getNodes()).toHaveLength(glNodes.length);
+ });
+
+ it('should find nodes and edges and do basic sanity tests', () => {
+ const graph = new Graph();
+ const glEdges = SAMPLE_GRAPH1.edges.map(
+ (e) =>
+ new Edge({
+ id: e.id,
+ sourceId: e.sourceId,
+ targetId: e.targetId,
+ directed: false,
+ data: {}
+ })
+ );
+ const glNodes = SAMPLE_GRAPH1.nodes.map((n) => new Node({id: n.id, data: {}}));
+ graph.batchAddNodes(glNodes);
+ graph.batchAddEdges(glEdges);
+
+ // find node
+ const foundNode = graph.findNode('Cosette');
+ expect(foundNode.getId()).toBe('Cosette');
+
+ // find edge
+ const foundEdge = graph.findEdge('1');
+ expect(foundEdge.getSourceNodeId()).toBe('Thenardier');
+ expect(foundEdge.getTargetNodeId()).toBe('Fantine');
+
+ // getConnectedEdges
+ const connectedEdges = graph.getConnectedEdges('Cosette');
+
+ expect(['2', '5']).toEqual(expect.arrayContaining(connectedEdges.map((e) => e.getId())));
+
+ // getNodeSiblings
+ const siblings = graph.getNodeSiblings('Cosette');
+ expect(['Thenardier', 'Javert']).toEqual(
+ expect.arrayContaining(siblings.map((n) => n.getId()))
+ );
+
+ // getDegree
+
+ expect(graph.getDegree('Cosette')).toBe(2);
+
+ // removeNode
+ graph.removeNode('Cosette');
+ expect(graph.getNodes()).toHaveLength(3);
+ expect(graph.getEdges()).toHaveLength(3);
+
+ // removeEdge
+ graph.removeEdge('1');
+ expect(graph.getNodes()).toHaveLength(3);
+ expect(graph.getEdges()).toHaveLength(2);
+
+ // reset
+ graph.reset();
+
+ // isEmpty
+ expect(graph.isEmpty()).toBeTruthy();
+ });
+});
diff --git a/modules/graph-gl/src/core/__tests__/interaction-manager.spec.js b/modules/graph-gl/src/core/__tests__/interaction-manager.spec.js
new file mode 100644
index 00000000..060105b9
--- /dev/null
+++ b/modules/graph-gl/src/core/__tests__/interaction-manager.spec.js
@@ -0,0 +1,189 @@
+import InteractionManager from '../interaction-manager';
+import Node from '../node';
+import Edge from '../edge';
+
+function generateIMProps(extraProps = {}) {
+ const engine = {
+ lockNodePosition: jest.fn(),
+ resume: jest.fn(),
+ unlockNodePosition: jest.fn()
+ };
+ const props = {
+ nodeEvents: {
+ onClick: jest.fn(),
+ onMouseEnter: jest.fn(),
+ onHover: jest.fn(),
+ onMouseLeave: jest.fn(),
+ onDrag: jest.fn()
+ },
+ edgeEvents: {
+ onClick: jest.fn(),
+ onHover: jest.fn()
+ },
+ engine,
+ enableDragging: true,
+ resumeLayoutAfterDragging: true
+ };
+ return {
+ props: {
+ ...props,
+ ...extraProps
+ },
+ notifyCallback: jest.fn()
+ };
+}
+
+describe('core/interaction-manager', () => {
+ it('click a node', () => {
+ const {props, notifyCallback} = generateIMProps();
+ const im = new InteractionManager(props, notifyCallback);
+ const clickedObj = {
+ object: new Node({id: 'test-node'}),
+ x: 1,
+ y: 1,
+ coordinate: [10, 10]
+ };
+ im.onClick(clickedObj);
+ expect(props.nodeEvents.onClick.mock.calls.length).toBe(1);
+ });
+
+ it('click an edge', () => {
+ const {props, notifyCallback} = generateIMProps();
+ const im = new InteractionManager(props, notifyCallback);
+ const clickedObj = {
+ object: new Edge({id: 'test-edge'}),
+ x: 1,
+ y: 1,
+ coordinate: [10, 10]
+ };
+ im.onClick(clickedObj);
+ expect(props.edgeEvents.onClick.mock.calls.length).toBe(1);
+ });
+
+ it('hover & leave a node', () => {
+ const {props, notifyCallback} = generateIMProps();
+ const im = new InteractionManager(props, notifyCallback);
+ const node = new Node({id: 'test-node'});
+ node.setState = jest.fn();
+
+ const clickedObj = {
+ object: node,
+ x: 1,
+ y: 1,
+ coordinate: [10, 10]
+ };
+ // hover the node
+ im.onHover(clickedObj);
+ expect(props.nodeEvents.onMouseEnter.mock.calls.length).toBe(1);
+ expect(props.nodeEvents.onHover.mock.calls.length).toBe(1);
+ expect(props.nodeEvents.onMouseLeave.mock.calls.length).toBe(0);
+ expect(clickedObj.object.setState.mock.calls.length).toBe(1);
+ // leave the node
+ im.onHover({});
+ expect(props.nodeEvents.onMouseEnter.mock.calls.length).toBe(1);
+ expect(props.nodeEvents.onHover.mock.calls.length).toBe(1);
+ expect(props.nodeEvents.onMouseLeave.mock.calls.length).toBe(1);
+ expect(clickedObj.object.setState.mock.calls.length).toBe(2);
+ });
+
+ it('drag a node', () => {
+ const {props, notifyCallback} = generateIMProps();
+ const im = new InteractionManager(props, notifyCallback);
+ const node = new Node({id: 'test-node'});
+ node.setState = jest.fn();
+
+ const clickedObj = {
+ object: node,
+ x: 1,
+ y: 1,
+ coordinate: [10, 10]
+ };
+ const event = {
+ stopImmediatePropagation: jest.fn()
+ };
+ // start dragging the node
+ im.onDragStart(clickedObj, event);
+ // dragging
+ im.onDrag(clickedObj, event);
+ expect(event.stopImmediatePropagation.mock.calls.length).toBe(1);
+ expect(props.engine.lockNodePosition.mock.calls.length).toBe(1);
+ expect(clickedObj.object.setState.mock.calls.length).toBe(1);
+ expect(notifyCallback.mock.calls.length).toBe(1);
+ expect(props.nodeEvents.onDrag.mock.calls.length).toBe(1);
+
+ // stop dragging the node
+ im.onDragEnd(clickedObj, event);
+ expect(props.engine.resume.mock.calls.length).toBe(1);
+ expect(clickedObj.object.setState.mock.calls.length).toBe(2);
+ expect(props.engine.unlockNodePosition.mock.calls.length).toBe(1);
+ });
+
+ it('test dragging a node when enableDragging = false & resumeLayoutAfterDragging = true', () => {
+ const {props, notifyCallback} = generateIMProps({
+ enableDragging: false
+ });
+ const im = new InteractionManager(props, notifyCallback);
+ const node = new Node({id: 'test-node'});
+ node.setState = jest.fn();
+
+ const clickedObj = {
+ object: node,
+ x: 1,
+ y: 1,
+ coordinate: [10, 10]
+ };
+ const event = {
+ stopImmediatePropagation: jest.fn()
+ };
+ // start dragging the node
+ im.onDragStart(clickedObj, event);
+ // dragging
+ im.onDrag(clickedObj, event);
+ expect(event.stopImmediatePropagation.mock.calls.length).toBe(0);
+ expect(props.engine.lockNodePosition.mock.calls.length).toBe(0);
+ expect(clickedObj.object.setState.mock.calls.length).toBe(0);
+ expect(notifyCallback.mock.calls.length).toBe(0);
+ expect(props.nodeEvents.onDrag.mock.calls.length).toBe(0);
+
+ // stop dragging the node
+ im.onDragEnd(clickedObj, event);
+ expect(props.engine.resume.mock.calls.length).toBe(0);
+ expect(clickedObj.object.setState.mock.calls.length).toBe(0);
+ expect(props.engine.unlockNodePosition.mock.calls.length).toBe(0);
+ });
+
+ it('test dragging a node when enableDragging = true & resumeLayoutAfterDragging = false', () => {
+ const {props, notifyCallback} = generateIMProps({
+ enableDragging: true,
+ resumeLayoutAfterDragging: false
+ });
+ const im = new InteractionManager(props, notifyCallback);
+ const node = new Node({id: 'test-node'});
+ node.setState = jest.fn();
+
+ const clickedObj = {
+ object: node,
+ x: 1,
+ y: 1,
+ coordinate: [10, 10]
+ };
+ const event = {
+ stopImmediatePropagation: jest.fn()
+ };
+ // start dragging the node
+ im.onDragStart(clickedObj, event);
+ // dragging
+ im.onDrag(clickedObj, event);
+ expect(event.stopImmediatePropagation.mock.calls.length).toBe(1);
+ expect(props.engine.lockNodePosition.mock.calls.length).toBe(1);
+ expect(clickedObj.object.setState.mock.calls.length).toBe(1);
+ expect(notifyCallback.mock.calls.length).toBe(1);
+ expect(props.nodeEvents.onDrag.mock.calls.length).toBe(1);
+
+ // stop dragging the node
+ im.onDragEnd(clickedObj, event);
+ expect(props.engine.resume.mock.calls.length).toBe(0);
+ expect(clickedObj.object.setState.mock.calls.length).toBe(2);
+ expect(props.engine.unlockNodePosition.mock.calls.length).toBe(1);
+ });
+});
diff --git a/modules/graph-gl/src/core/__tests__/node.spec.js b/modules/graph-gl/src/core/__tests__/node.spec.js
new file mode 100644
index 00000000..74285e91
--- /dev/null
+++ b/modules/graph-gl/src/core/__tests__/node.spec.js
@@ -0,0 +1,72 @@
+import SAMPLE_NODE from './__fixtures__/edge.json';
+
+import Node from '../node';
+import Edge from '../edge';
+
+const createEdges = (edges) => edges.map((e) => new Edge(e));
+
+describe('core/node', () => {
+ it('should work for non-directed', () => {
+ const node = new Node({id: 'node1', data: SAMPLE_NODE});
+ const edges1 = createEdges([
+ {id: 'edge1', sourceId: 'node1', targetId: 'node2'},
+ {id: 'edge2', sourceId: 'node3', targetId: 'node1'}
+ ]);
+ node.addConnectedEdges(edges1);
+ expect(node.getDegree()).toBe(2);
+ expect(node.getInDegree()).toBe(0);
+ expect(node.getOutDegree()).toBe(0);
+
+ node.removeConnectedEdges(edges1[0]);
+ expect(node.getDegree()).toBe(1);
+ expect(node.getInDegree()).toBe(0);
+ expect(node.getOutDegree()).toBe(0);
+
+ node.clearConnectedEdges();
+ expect(node.getDegree()).toBe(0);
+ expect(node.getInDegree()).toBe(0);
+ expect(node.getOutDegree()).toBe(0);
+ });
+
+ it('should work for directed', () => {
+ const node = new Node({id: 'node1', data: SAMPLE_NODE});
+
+ const edges2 = createEdges([
+ {id: 'edge1', sourceId: 'node1', targetId: 'node2', directed: true},
+ {id: 'edge2', sourceId: 'node3', targetId: 'node1', directed: true}
+ ]);
+ node.addConnectedEdges(edges2);
+ expect(node.getDegree()).toBe(2);
+ expect(node.getInDegree()).toBe(1);
+ expect(node.getOutDegree()).toBe(1);
+ expect([edges2[0], edges2[1]]).toEqual(expect.arrayContaining(node.getConnectedEdges()));
+ });
+
+ it('should have node id', () => {
+ const node = new Node({id: 'node1', data: SAMPLE_NODE});
+ expect(node.getId()).toBe('node1');
+ });
+
+ it('should have working getters and setters', () => {
+ const node = new Node({id: 'node1', data: SAMPLE_NODE});
+ const edges2 = createEdges([
+ {id: 'edge1', sourceId: 'node1', targetId: 'node2', directed: true},
+ {id: 'edge2', sourceId: 'node3', targetId: 'node1', directed: true}
+ ]);
+ node.addConnectedEdges(edges2);
+
+ // test getters
+ expect(['node2', 'node3']).toEqual(expect.arrayContaining(node.getSiblingIds()));
+
+ // test setters
+ const newNode = {
+ ...SAMPLE_NODE,
+ property1: 2
+ };
+ node.setData(newNode);
+ expect(node.getPropertyValue('property1')).toBe(2);
+
+ node.setDataProperty('property4', 4);
+ expect(node.getPropertyValue('property4')).toBe(4);
+ });
+});
diff --git a/modules/graph-gl/src/core/base-layout.js b/modules/graph-gl/src/core/base-layout.js
new file mode 100644
index 00000000..92c90ebe
--- /dev/null
+++ b/modules/graph-gl/src/core/base-layout.js
@@ -0,0 +1,95 @@
+import isEqual from 'lodash.isequal';
+import {EDGE_TYPE} from './constants';
+
+// All the layout classes are extended from this base layout class.
+export default class BaseLayout {
+ /**
+ * Constructor of BaseLayout
+ * @param {Object} options extra configuration options of the layout
+ */
+ constructor(options) {
+ // the name of the layout
+ this._name = 'BaseLayout';
+ // extra configuration options of the layout
+ this._options = {};
+ // registered callbacks
+ this._callbacks = {
+ onLayoutChange: () => {},
+ onLayoutDone: () => {},
+ onLayoutError: () => {}
+ };
+ }
+
+ /**
+ * Register event callbacks ({onLayoutChange, onLayoutDone, onLayoutError})
+ * @param {Object} callbacks
+ * {Function} callbacks.onLayoutChange:
+ * a callback will be triggered on every layout calculation iteration
+ * {Function} callbacks.onLayoutDone:
+ * a callback will be triggered when the layout calculation is done
+ * {Function} callbacks.onLayoutError:
+ * a callback will be triggered when the layout calculation goes wrong
+ */
+ registerCallbacks(callbacks) {
+ this._callbacks = callbacks;
+ }
+
+ /**
+ * unregister all event callbacks.
+ */
+ unregisterCallbacks() {
+ this._callbacks = {};
+ }
+
+ /**
+ * Check the equality of two layouts
+ * @param {Object} layout The layout to be compared.
+ * @return {Bool} True if the layout is the same as itself.
+ */
+ equals(layout) {
+ if (!layout || !(layout instanceof BaseLayout)) {
+ return false;
+ }
+ return this._name === layout._name && isEqual(this._options, layout._options);
+ }
+
+ /** virtual functions: will be implemented in the child class */
+
+ // first time to pass the graph data into this layout
+ initializeGraph(graph) {}
+ // update the existing graph
+ updateGraph(grpah) {}
+ // start the layout calculation
+ start() {}
+ // resume the layout calculation
+ resume() {}
+ // stop the layout calculation
+ stop() {}
+ // access the position of the node in the layout
+ getNodePosition(node) {
+ return [0, 0];
+ }
+ // access the layout information of the edge
+ getEdgePosition(edge) {
+ return {
+ type: EDGE_TYPE.LINE,
+ sourcePosition: [0, 0],
+ targetPosition: [0, 0],
+ controlPoints: []
+ };
+ }
+
+ /**
+ * Pin the node to a designated position, and the node won't move anymore
+ * @param {Object} node Node to be locked
+ * @param {Number} x x coordinate
+ * @param {Number} y y coordinate
+ */
+ lockNodePosition(node, x, y) {}
+
+ /**
+ * Unlock the node, the node will be able to move freely.
+ * @param {Object} node Node to be unlocked
+ */
+ unlockNodePosition(node) {}
+}
diff --git a/modules/graph-gl/src/core/constants.js b/modules/graph-gl/src/core/constants.js
new file mode 100644
index 00000000..7a13cdb1
--- /dev/null
+++ b/modules/graph-gl/src/core/constants.js
@@ -0,0 +1,49 @@
+// the interaction state of a node.
+export const NODE_STATE = {
+ DEFAULT: 'default',
+ HOVER: 'hover',
+ DRAGGING: 'dragging',
+ SELECTED: 'selected'
+};
+
+export const EDGE_STATE = {
+ DEFAULT: 'default',
+ HOVER: 'hover',
+ DRAGGING: 'dragging',
+ SELECTED: 'selected'
+};
+
+// node visual marker type
+export const NODE_TYPE = {
+ CIRCLE: 'CIRCLE',
+ RECTANGLE: 'RECTANGLE',
+ ICON: 'ICON',
+ LABEL: 'LABEL',
+ MARKER: 'MARKER'
+};
+
+// edge shape
+export const EDGE_TYPE = {
+ SPLINE_CURVE: 'SPLINE_CURVE',
+ LINE: 'LINE',
+ PATH: 'PATH'
+};
+
+// decorators on edges
+export const EDGE_DECORATOR_TYPE = {
+ LABEL: 'EDGE_LABEL',
+ FLOW: 'FLOW'
+};
+
+// the status of the layout
+export const LAYOUT_STATE = {
+ INIT: 'INIT',
+ START: 'START',
+ CALCULATING: 'CALCULATING',
+ DONE: 'DONE',
+ ERROR: 'ERROR'
+};
+
+// All the markers supported by node type MARKER
+import Markers from '../deckgl-layers/marker-layer/marker-list';
+export const MARKER_TYPE = Markers;
diff --git a/modules/graph-gl/src/core/edge.js b/modules/graph-gl/src/core/edge.js
new file mode 100644
index 00000000..da678186
--- /dev/null
+++ b/modules/graph-gl/src/core/edge.js
@@ -0,0 +1,126 @@
+// Basic data structure of an edge
+import {EDGE_STATE} from './constants';
+
+export default class Edge {
+ /**
+ * The constructor
+ * @param {String|Number} options.id - the unique ID of the edge
+ * @param {String|Number} options.sourceId - the ID of the source node
+ * @param {String|Number} options.targetId - the ID of the target node
+ * @param {Boolean} options.directed - whether the edge is directed or not
+ * @param {Any} options.data - origin data reference
+ */
+ constructor({id, sourceId, targetId, data, directed = false}) {
+ // the unique uuid of the edge
+ this.id = id;
+ // the ID of the source node
+ this._sourceId = sourceId;
+ // the ID of the target node
+ this._targetId = targetId;
+ // whether the edge is directed or not
+ this._directed = directed;
+ // origin data reference of the edge
+ this._data = data;
+ // check the type of the object when picking engine gets it.
+ this.isEdge = true;
+ // Nodes at either end of this edge.
+ this._connectedNodes = {};
+ // The edge state.
+ this.state = EDGE_STATE.DEFAULT;
+ }
+
+ /**
+ * Return the ID of the edge
+ * @return {String|Number} - the ID of the edge.
+ */
+ getId() {
+ return this.id;
+ }
+
+ /**
+ * Return whether the edge is directed or not.
+ * @return {Boolean} true if the edge is directed.
+ */
+ isDirected() {
+ return this._directed;
+ }
+
+ /**
+ * Get the ID of the source node.
+ * @return {String|Number} the ID of the source node.
+ */
+ getSourceNodeId() {
+ return this._sourceId;
+ }
+
+ /**
+ * Get the ID of the target node.
+ * @return {String|Number} the ID of the target node.
+ */
+ getTargetNodeId() {
+ return this._targetId;
+ }
+
+ /**
+ * Return of the value of the selected property key.
+ * @param {String} key - property key.
+ * @return {Any} - the value of the property.
+ */
+ getPropertyValue(key) {
+ // try to search the key within this object
+ if (this.hasOwnProperty(key)) {
+ return this[key];
+ }
+ // try to search the key in the original data reference
+ else if (this._data.hasOwnProperty(key)) {
+ return this._data[key];
+ }
+ // otherwise, not found
+ return undefined;
+ }
+
+ /**
+ * Set the origin data as a reference.
+ * @param {Any} data - the origin data.
+ */
+ setData(data) {
+ this._data = data;
+ }
+
+ /**
+ * Update a data property.
+ * @param {String} key - the key of the property
+ * @param {Any} value - the value of the property.
+ */
+ setDataProperty(key, value) {
+ this._data[key] = value;
+ }
+
+ /**
+ * Set edge state
+ * @param {String} state - one of EDGE_STATE
+ */
+ setState(state) {
+ this.state = state;
+ }
+
+ /**
+ * Get edge state
+ * @returns {string} state - one of EDGE_STATE
+ */
+ getState() {
+ return this.state;
+ }
+
+ addNode(node) {
+ this._connectedNodes[node.getId()] = node;
+ }
+
+ removeNode(node) {
+ delete this._connectedNodes[node.getId()];
+ }
+
+ getConnectedNodes() {
+ return Object.values(this._connectedNodes);
+ }
+}
diff --git a/modules/graph-gl/src/core/graph-engine.js b/modules/graph-gl/src/core/graph-engine.js
new file mode 100644
index 00000000..04baeb63
--- /dev/null
+++ b/modules/graph-gl/src/core/graph-engine.js
@@ -0,0 +1,114 @@
+import {SimpleLayout, LAYOUT_STATE} from '../index';
+
+// Graph engine controls the graph data and layout calculation
+export default class GraphEngine {
+ constructor() {
+ // graph data
+ this._graph = null;
+ // layout algorithm
+ this._layout = null;
+ // layout state
+ this._layoutState = LAYOUT_STATE.INIT;
+ // last layout update time stamp
+ this._lastUpdate = 0;
+ // event callbacks
+ this._callbacks = {
+ onLayoutChange: () => {},
+ onLayoutDone: () => {},
+ onLayoutError: () => {}
+ };
+ }
+
+ /** Getters */
+
+ getGraph = () => this._graph;
+
+ getLayout = () => this._layout;
+
+ getNodePosition = (node) => this._layout.getNodePosition(node);
+
+ getEdgePosition = (edge) => this._layout.getEdgePosition(edge);
+
+ getLayoutLastUpdate = () => this._lastUpdate;
+
+ getLayoutState = () => this._layoutState;
+
+ /** Operations on the graph */
+
+ lockNodePosition = (node, x, y) => {
+ this._layout.lockNodePosition(node, x, y);
+ };
+
+ unlockNodePosition = (node) => {
+ this._layout.unlockNodePosition(node);
+ };
+
+ clear = () => {
+ if (this._layout) {
+ this._layout.unregisterCallbacks();
+ }
+ this._graph = null;
+ this._layout = null;
+ this._layoutState = LAYOUT_STATE.INIT;
+ };
+
+ /** Event callbacks */
+
+ registerCallbacks = (callbacks) => {
+ this._callbacks = callbacks;
+ };
+
+ unregisterCallbacks = () => {
+ this._callbacks = {};
+ };
+
+ _onLayoutChange = () => {
+ this._lastUpdate = Date.now();
+ this._layoutState = LAYOUT_STATE.CALCULATING;
+ if (this._callbacks.onLayoutChange) {
+ this._callbacks.onLayoutChange();
+ }
+ };
+
+ _onLayoutDone = () => {
+ this._layoutState = LAYOUT_STATE.DONE;
+ if (this._callbacks.onLayoutDone) {
+ this._callbacks.onLayoutDone();
+ }
+ };
+
+ _onLayoutError = () => {
+ this._layoutState = LAYOUT_STATE.ERROR;
+ if (this._callbacks.onLayoutError) {
+ this._callbacks.onLayoutError();
+ }
+ };
+
+ /** Layout calculations */
+
+ run = (graph, layout = new SimpleLayout(), options) => {
+ this.clear();
+ this._graph = graph;
+ this._layout = layout;
+ this._layout.initializeGraph(graph);
+ this._layout.registerCallbacks({
+ onLayoutChange: this._onLayoutChange,
+ onLayoutDone: this._onLayoutDone,
+ onLayoutError: this._onLayoutError
+ });
+ this._layout.start();
+ this._layoutState = LAYOUT_STATE.START;
+ };
+
+ resume = () => {
+ if (this._layout) {
+ this._layout.resume();
+ }
+ };
+
+ stop = () => {
+ if (this._layout) {
+ this._layout.stop();
+ }
+ };
+}
diff --git a/modules/graph-gl/src/core/graph.js b/modules/graph-gl/src/core/graph.js
new file mode 100644
index 00000000..238e674e
--- /dev/null
+++ b/modules/graph-gl/src/core/graph.js
@@ -0,0 +1,306 @@
+import {log} from '../utils/log';
+
+// Basic graph data structure
+export default class Graph {
+ /**
+ * The constructor of the Graph class.
+ * @param {Object} graph - copy the graph if this exists.
+ */
+ constructor(graph = null) {
+ // list object of nodes/edges
+ this._nodeMap = {};
+ this._edgeMap = {};
+ // for identifying whether performing dirty check when streaming new data.
+ // If the name of the graph is not specified,
+ // will fall back to current time stamp.
+ this._name = Date.now();
+ // the last updated timestamp of the graph.
+ this._lastUpdate = 0;
+
+ // cached data: create array data from maps.
+ this._cache = {
+ nodes: [],
+ edges: []
+ };
+ this._lastCacheUpdate = -1;
+
+ // copy the graph if it exists in the parameter
+ if (graph) {
+ // start copying the graph
+ this._nodeMap = graph._nodeMap;
+ this._edgeMap = graph._edgeMap;
+ this._name = graph && graph.name;
+ }
+ }
+
+ /**
+ * update last update time stamp
+ */
+ _touchLastUpdate() {
+ // update last update time stamp
+ this._lastUpdate += 1;
+ }
+
+ /**
+ * update local data cache and _lastCacheUpdate.
+ */
+ _updateCache() {
+ // create array data from maps.
+ this._cache = {
+ nodes: Object.values(this._nodeMap),
+ edges: Object.values(this._edgeMap)
+ };
+ this._lastCacheUpdate = this._lastUpdate;
+ }
+
+ /**
+ * Set graph name
+ * @param {string} name
+ */
+ setGraphName(name) {
+ this._name = name;
+ }
+
+ /** Get the name of the graph. Default value is the time stamp when creating this graph.
+ * @return {string} graph name.
+ */
+ getGraphName() {
+ return this._name;
+ }
+
+ /**
+ * Add a new node to the graph.
+ * @param {Node} node - expect a Node object to be added to the graph.
+ */
+ addNode(node) {
+ // add it to the list and map
+ this._nodeMap[node.getId()] = node;
+ // update last update time stamp
+ this._touchLastUpdate();
+ }
+
+ /**
+ * Batch add nodes to the graph.
+ * @param {Node[]} nodes - a list of nodes to be added.
+ */
+ batchAddNodes(nodes) {
+ // convert an array of objects to an object
+ this._nodeMap = nodes.reduce(
+ (res, node) => {
+ res[node.getId()] = node;
+ return res;
+ },
+ {...this._nodeMap}
+ );
+ this._touchLastUpdate();
+ }
+
+ /**
+ * Get all the nodes of the graph.
+ * @return {Node[]} - get all the nodes in the graph.
+ */
+ getNodes() {
+ if (this._lastCacheUpdate !== this._lastUpdate) {
+ this._updateCache();
+ }
+ return this._cache.nodes;
+ }
+
+ /**
+ * Get the node map of the graph. The key of the map is the ID of the nodes.
+ * @return {Object} - a map of nodes keyed by node IDs.
+ */
+ getNodeMap() {
+ return this._nodeMap;
+ }
+
+ /**
+ * Find a node by id
+ * @param {String} nodeId The id of the node
+ * @return {Object} Node
+ */
+ findNode(nodeId) {
+ return this._nodeMap[nodeId];
+ }
+
+ /**
+ * Add a new edge to the graph.
+ * @param {Edge} edge - expect a Edge object to be added to the graph.
+ */
+ addEdge(edge) {
+ const sourceNode = this.findNode(edge.getSourceNodeId());
+ const targetNode = this.findNode(edge.getTargetNodeId());
+
+ if (!sourceNode || !targetNode) {
+ log.warn(`Unable to add edge ${edge.id}, source or target node is missing.`)();
+ return;
+ }
+
+ this._edgeMap[edge.getId()] = edge;
+ sourceNode.addConnectedEdges(edge);
+ targetNode.addConnectedEdges(edge);
+ this._touchLastUpdate();
+ }
+
+ /**
+ * Batch add edges to the graph
+ * @param {Edge[]} edges - a list of edges to be added.
+ */
+ batchAddEdges(edges) {
+ edges.forEach((edge) => this.addEdge(edge));
+ this._touchLastUpdate();
+ }
+
+ /**
+ * Remove a node from the graph by node ID
+ * @param {String|Number} nodeId - the ID of the target node.
+ */
+ removeNode(nodeId) {
+ const node = this.findNode(nodeId);
+ if (!node) {
+ log.warn(`Unable to remove node ${nodeId} - doesn't exist`)();
+ return;
+ }
+ // remove all edges connect to this node from map
+ node.getConnectedEdges().forEach((e) => {
+ delete this._edgeMap[e.getId()];
+ });
+ // remove the node from map
+ delete this._nodeMap[nodeId];
+ this._touchLastUpdate();
+ }
+
+ /**
+ * Get all the edges of the graph.
+ * @return {Edge[]} get all the edges in the graph.
+ */
+ getEdges() {
+ if (this._lastCacheUpdate !== this._lastUpdate) {
+ this._updateCache();
+ }
+ return this._cache.edges;
+ }
+
+ /**
+ * Get the edge map of the graph. The key of the map is the ID of the edges.
+ * @return {Object} - a map of edges keyed by edge IDs.
+ */
+ getEdgeMap() {
+ return this._edgeMap;
+ }
+
+ /**
+ * Remove an edge from the graph by the edge ID
+ * @param {String|Number} edgeId - the target edge ID.
+ */
+ removeEdge(edgeId) {
+ const edge = this.findEdge(edgeId);
+ if (!edge) {
+ log.warn(`Unable to remove edge ${edgeId} - doesn't exist`)();
+ return;
+ }
+ const sourceNode = this.findNode(edge.getSourceNodeId());
+ const targetNode = this.findNode(edge.getTargetNodeId());
+
+ delete this._edgeMap[edgeId];
+ sourceNode.removeConnectedEdges(edge);
+ targetNode.removeConnectedEdges(edge);
+ this._touchLastUpdate();
+ }
+
+ /**
+ * Find the edge by edge ID.
+ * @param {String|Number} id - the target edge ID
+ * @return {Edge} - the target edge.
+ */
+ findEdge(edgeId) {
+ return this._edgeMap[edgeId];
+ }
+
+ /**
+ * Return all the connected edges of a node by nodeID.
+ * @param {String|Number} nodeId - the target node ID
+ * @return {Edge[]} - an array of the connected edges.
+ */
+ getConnectedEdges(nodeId) {
+ const node = this.findNode(nodeId);
+ if (!node) {
+ log.warn(`Unable to find node ${nodeId} - doesn't exist`)();
+ return [];
+ }
+ return node.getConnectedEdges();
+ }
+
+ /**
+ * Return all the sibling nodes of a node by nodeID.
+ * @param {String|Number} nodeId - the target node ID
+ * @return {Node[]} - an array of the sibling nodes.
+ */
+ getNodeSiblings(nodeId) {
+ const node = this.findNode(nodeId);
+ if (!node) {
+ log.warn(`Unable to find node ${nodeId} - doesn't exist`)();
+ return [];
+ }
+ return node.getSiblingIds().map((siblingNodeId) => this.findNode(siblingNodeId));
+ }
+
+ /**
+ * Get the degree of a node.
+ * @param {String|Number} nodeId - the target node ID.
+ * @return {Number} - the degree of the node.
+ */
+ getDegree(nodeId) {
+ const node = this.findNode(nodeId);
+ if (!node) {
+ log.warn(`Unable to find node ${nodeId} - doesn't exist`)();
+ return 0;
+ }
+ return node.getDegree();
+ }
+
+ /**
+ * Clean up all the nodes in the graph.
+ */
+ resetNodes() {
+ this._nodeMap = {};
+ this._touchLastUpdate();
+ }
+
+ /**
+ * Clean up all the edges in the graph.
+ */
+ resetEdges() {
+ this._edgeMap = {};
+ this._touchLastUpdate();
+ }
+
+ /**
+ * Clean up everything in the graph.
+ */
+ reset() {
+ this.resetNodes();
+ this.resetEdges();
+ this._touchLastUpdate();
+ }
+
+ /**
+ * Return true if the graph is empty.
+ * @return {Boolean} Return true if the graph is empty.
+ */
+ isEmpty() {
+ return Object.keys(this._nodeMap).length === 0;
+ }
+
+ /**
+ * Check the equality of two graphs data by checking last update time stamp
+ * @param {Object} g Another graph to be compared against itself
+ * @return {Bool} True if the graph is the same as itself.
+ */
+ equals(g) {
+ if (!g || !(g instanceof Graph)) {
+ return false;
+ }
+ return this._lastUpdate === g._lastUpdate;
+ }
+}
diff --git a/modules/graph-gl/src/core/interaction-manager.js b/modules/graph-gl/src/core/interaction-manager.js
new file mode 100644
index 00000000..07e51b38
--- /dev/null
+++ b/modules/graph-gl/src/core/interaction-manager.js
@@ -0,0 +1,181 @@
+import {EDGE_STATE, NODE_STATE} from './constants';
+
+const NODE_TO_EDGE_STATE_MAP = {
+ [NODE_STATE.DEFAULT]: EDGE_STATE.DEFAULT,
+ [NODE_STATE.HOVER]: EDGE_STATE.HOVER,
+ [NODE_STATE.DRAGGING]: EDGE_STATE.DRAGGING,
+ [NODE_STATE.SELECTED]: EDGE_STATE.SELECTED
+};
+
+function shouldEdgeBeSelected(edge) {
+ return edge
+ .getConnectedNodes()
+ .some(
+ (node) => node.getState() === NODE_STATE.SELECTED && node.shouldHighlightConnectedEdges()
+ );
+}
+
+function setNodeState(node, state) {
+ node.setState(state);
+ if (node.shouldHighlightConnectedEdges()) {
+ node.getConnectedEdges().forEach((edge) => {
+ let newEdgeState = NODE_TO_EDGE_STATE_MAP[state];
+ if (shouldEdgeBeSelected(edge)) {
+ newEdgeState = EDGE_STATE.SELECTED;
+ }
+ edge.setState(newEdgeState);
+ });
+ }
+}
+
+export default class InteractionManager {
+ constructor(props, notifyCallback) {
+ this.updateProps(props);
+ this.notifyCallback = notifyCallback;
+
+ // internal state
+ this._lastInteraction = 0;
+ this._lastHoveredNode = null;
+ this._lastSelectedNode = null;
+ }
+
+ updateProps({
+ nodeEvents = {},
+ edgeEvents = {},
+ engine,
+ enableDragging,
+ resumeLayoutAfterDragging
+ }) {
+ this.nodeEvents = nodeEvents;
+ this.edgeEvents = edgeEvents;
+ this.engine = engine;
+ this.enableDragging = enableDragging;
+ this.resumeLayoutAfterDragging = resumeLayoutAfterDragging;
+ }
+
+ getLastInteraction() {
+ return this._lastInteraction;
+ }
+
+ onClick(info) {
+ const {object} = info;
+
+ if (!object) {
+ return;
+ }
+
+ if (object.isNode) {
+ if (object.isSelectable()) {
+ if (this._lastSelectedNode) {
+ setNodeState(this._lastSelectedNode, NODE_STATE.DEFAULT);
+ }
+ setNodeState(object, NODE_STATE.SELECTED);
+ this._lastSelectedNode = object;
+ this._lastInteraction = Date.now();
+ this.notifyCallback();
+ }
+
+ if (this.nodeEvents.onClick) {
+ this.nodeEvents.onClick(info);
+ }
+ }
+
+ if (object.isEdge && this.edgeEvents.onClick) {
+ this.edgeEvents.onClick(info);
+ }
+ }
+
+ _mouseLeaveNode() {
+ const lastHoveredNode = this._lastHoveredNode;
+
+ if (!(lastHoveredNode.isSelectable() && lastHoveredNode.getState() === NODE_STATE.SELECTED)) {
+ // reset the last hovered node's state
+ const newState =
+ this._lastSelectedNode != null && this._lastSelectedNode.id === this._lastHoveredNode?.id
+ ? NODE_STATE.SELECTED
+ : NODE_STATE.DEFAULT;
+ setNodeState(this._lastHoveredNode, newState);
+ }
+ // trigger the callback if exists
+ if (this.nodeEvents.onMouseLeave) {
+ this.nodeEvents.onMouseLeave(this._lastHoveredNode);
+ }
+ }
+
+ _mouseEnterNode(info) {
+ // set the node's state to hover
+ setNodeState(info.object, NODE_STATE.HOVER);
+ // trigger the callback if exists
+ if (this.nodeEvents.onMouseEnter) {
+ this.nodeEvents.onMouseEnter(info);
+ }
+ if (this.nodeEvents.onHover) {
+ this.nodeEvents.onHover(info);
+ }
+ }
+
+ onHover(info) {
+ if (!info.object) {
+ if (this._lastHoveredNode) {
+ this._mouseLeaveNode();
+ this._lastInteraction = Date.now();
+ this._lastHoveredNode = null;
+ this.notifyCallback();
+ }
+ return;
+ }
+
+ // hover over on a node
+ if (info.object.isNode) {
+ const isSameNode = this._lastHoveredNode && this._lastHoveredNode.id === info.object.id;
+ // stay in the same node
+ if (isSameNode) {
+ return;
+ }
+ if (this._lastHoveredNode) {
+ // reset the previous hovered node's state if not the same node
+ this._mouseLeaveNode();
+ }
+ // enter new node
+ this._mouseEnterNode(info);
+ this._lastInteraction = Date.now();
+ this._lastHoveredNode = info.object;
+ this.notifyCallback();
+ }
+ if (info.object.isEdge && this.edgeEvents.onHover) {
+ this.edgeEvents.onHover(info);
+ }
+ }
+
+ onDragStart(info, event) {
+ if (this.nodeEvents.onDragStart) {
+ this.nodeEvents.onDragStart(info);
+ }
+ }
+
+ onDrag(info, event) {
+ // only nodes are draggable
+ if (!info.object.isNode || !this.enableDragging) {
+ return;
+ }
+ event.stopImmediatePropagation();
+ this.engine.lockNodePosition(info.object, info.coordinate[0], info.coordinate[1]);
+ setNodeState(info.object, NODE_STATE.DRAGGING);
+ this._lastInteraction = Date.now();
+ this.notifyCallback();
+ if (this.nodeEvents.onDrag) {
+ this.nodeEvents.onDrag(info);
+ }
+ }
+
+ onDragEnd(info, event) {
+ if (!info.object.isNode || !this.enableDragging) {
+ return;
+ }
+ if (this.resumeLayoutAfterDragging) {
+ this.engine.resume();
+ }
+ setNodeState(info.object, NODE_STATE.DEFAULT);
+ this.engine.unlockNodePosition(info.object);
+ }
+}
diff --git a/modules/graph-gl/src/core/node.js b/modules/graph-gl/src/core/node.js
new file mode 100644
index 00000000..cb55b9c6
--- /dev/null
+++ b/modules/graph-gl/src/core/node.js
@@ -0,0 +1,191 @@
+import {NODE_STATE} from './constants';
+
+// Basic data structure of a node
+export default class Node {
+ /**
+ * The constructor of a node
+ * @param {String|Number} options.id - the unique ID of the node
+ * @param {Any} options.data - origin data reference
+ */
+ constructor({id, selectable = false, highlightConnectedEdges = false, data = {}}) {
+ this.id = id;
+ // keep a reference to origin data
+ this._data = data;
+ // derived properties
+ // list objects
+ this._connectedEdges = {};
+ // the interaction state of the node
+ this.state = NODE_STATE.DEFAULT;
+ // check the type of the object when picking engine gets it.
+ this.isNode = true;
+ // Can the node be selected?
+ this._selectable = selectable;
+ // Should the state of this node affect the state of the connected edges?
+ this._highlightConnectedEdges = highlightConnectedEdges;
+ }
+
+ /**
+ * Return the ID of the node
+ * @return {String|Number} - the ID of the node.
+ */
+ getId() {
+ return this.id;
+ }
+
+ /**
+ * Return the degree of the node -- includes in-degree and out-degree
+ * @return {Number} - the degree of the node.
+ */
+ getDegree() {
+ return Object.keys(this._connectedEdges).length;
+ }
+
+ /**
+ * Return the in-degree of the node.
+ * @return {Number} - the in-degree of the node.
+ */
+ getInDegree() {
+ const nodeId = this.getId();
+ return this.getConnectedEdges().reduce((count, e) => {
+ const isDirected = e.isDirected();
+ if (isDirected && e.getTargetNodeId() === nodeId) {
+ count += 1;
+ }
+ return count;
+ }, 0);
+ }
+
+ /**
+ * Return the out-degree of the node.
+ * @return {Number} - the out-degree of the node.
+ */
+ getOutDegree() {
+ const nodeId = this.getId();
+ return this.getConnectedEdges().reduce((count, e) => {
+ const isDirected = e.isDirected();
+ if (isDirected && e.getSourceNodeId() === nodeId) {
+ count += 1;
+ }
+ return count;
+ }, 0);
+ }
+
+ /**
+ * Return all the IDs of the sibling nodes.
+ * @return {String[]} [description]
+ */
+ getSiblingIds() {
+ const nodeId = this.getId();
+ return this.getConnectedEdges().reduce((siblings, e) => {
+ if (e.getTargetNodeId() === nodeId) {
+ siblings.push(e.getSourceNodeId());
+ } else {
+ siblings.push(e.getTargetNodeId());
+ }
+ return siblings;
+ }, []);
+ }
+
+ /**
+ * Return all the connected edges.
+ * @return {Object[]} - an array of the connected edges.
+ */
+ getConnectedEdges() {
+ return Object.values(this._connectedEdges);
+ }
+
+ /**
+ * Return of the value of the selected property key.
+ * @param {String} key - property key.
+ * @return {Any} - the value of the property or undefined (not found).
+ */
+ getPropertyValue(key) {
+ // try to search the key within this object
+ if (this.hasOwnProperty(key)) {
+ return this[key];
+ }
+ // try to search the key in the original data reference
+ else if (this._data.hasOwnProperty(key)) {
+ return this._data[key];
+ }
+ // otherwise, not found
+ return undefined;
+ }
+
+ /**
+ * Set the new node data.
+ * @param {Any} data - the new data of the node
+ */
+ setData(data) {
+ this._data = data;
+ }
+
+ /**
+ * Update a data property.
+ * @param {String} key - the key of the property
+ * @param {Any} value - the value of the property.
+ */
+ setDataProperty(key, value) {
+ this._data[key] = value;
+ }
+
+ /**
+ * Set node state
+ * @param {String} state - one of NODE_STATE
+ */
+ setState(state) {
+ this.state = state;
+ }
+
+ /**
+ * Get node state
+ * @returns {string} state - one of NODE_STATE
+ */
+ getState() {
+ return this.state;
+ }
+
+ /**
+ * Add connected edges to the node
+ * @param {Edge || Edge[]} edge an edge or an array of edges to be added to this._connectedEdges
+ */
+ addConnectedEdges(edge) {
+ const iterableEdges = Array.isArray(edge) ? edge : [edge];
+ this._connectedEdges = iterableEdges.reduce(
+ (res, e) => {
+ res[e.id] = e;
+ e.addNode(this);
+ return res;
+ },
+ {...this._connectedEdges}
+ );
+ }
+
+ /**
+ * Remove edges from this._connectedEdges
+ * @param {Edge | Edge[]} edge an edge or an array of edges to be removed from this._connectedEdges
+ */
+ removeConnectedEdges(edge) {
+ const iterableEdges = Array.isArray(edge) ? edge : [edge];
+ iterableEdges.forEach((e) => {
+ e.removeNode(this);
+ delete this._connectedEdges[e.id];
+ });
+ }
+
+ /**
+ * Clear this._connectedEdges
+ */
+ clearConnectedEdges() {
+ Object.values(this._connectedEdges).forEach((e) => e.removeNode(this));
+ this._connectedEdges = {};
+ }
+
+ isSelectable() {
+ return this._selectable;
+ }
+
+ shouldHighlightConnectedEdges() {
+ return this._highlightConnectedEdges;
+ }
+}
diff --git a/modules/graph-gl/src/deckgl-layers/flow-path-layer/flow-path-layer-fragment.glsl.js b/modules/graph-gl/src/deckgl-layers/flow-path-layer/flow-path-layer-fragment.glsl.js
new file mode 100644
index 00000000..62b7c83e
--- /dev/null
+++ b/modules/graph-gl/src/deckgl-layers/flow-path-layer/flow-path-layer-fragment.glsl.js
@@ -0,0 +1,66 @@
+// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+export default `\
+#define SHADER_NAME flow-path-layer-fragment-shader
+
+precision highp float;
+
+varying vec4 vColor;
+varying float segmentIndex;
+varying float speed;
+varying float offset;
+varying float pathLength;
+varying float tailLength;
+
+void main(void) {
+ gl_FragColor = vColor;
+
+ // use highlight color if this fragment belongs to the selected object.
+ gl_FragColor = picking_filterHighlightColor(gl_FragColor);
+
+ // use picking color if rendering to picking FBO.
+ gl_FragColor = picking_filterPickingColor(gl_FragColor);
+
+ if (speed == 0.0) {
+ gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+ } else {
+ // the portion of the visible segment (0 to 1) , ex: 0.3
+ // edge cases: pathLength = 0 or tailLength > pathLength
+ float segFragment = 0.0;
+ if (pathLength != 0.0) {
+ segFragment = tailLength / pathLength;
+ }
+ if (tailLength > pathLength) {
+ segFragment = 1.0;
+ }
+ float startSegmentIndex = mod(offset, 60.0) / 60.0;
+ // the end offset, cap to 1.0 (end of the line)
+ float endSegmentIndex = min(startSegmentIndex + segFragment, 1.0);
+ if (segmentIndex < startSegmentIndex || segmentIndex > endSegmentIndex) {
+ gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+ } else {
+ // fading tail
+ float portion = (segmentIndex - startSegmentIndex) / segFragment;
+ gl_FragColor[3] = portion;
+ }
+ }
+}
+`;
diff --git a/modules/graph-gl/src/deckgl-layers/flow-path-layer/flow-path-layer-vertex-tf.glsl.js b/modules/graph-gl/src/deckgl-layers/flow-path-layer/flow-path-layer-vertex-tf.glsl.js
new file mode 100644
index 00000000..27498220
--- /dev/null
+++ b/modules/graph-gl/src/deckgl-layers/flow-path-layer/flow-path-layer-vertex-tf.glsl.js
@@ -0,0 +1,11 @@
+export default `\
+#define SHADER_NAME flow-path-layer-vertex-tf-shader
+
+attribute float a_offset;
+attribute float a_speed;
+varying float v_offset;
+
+void main(void) {
+ v_offset = a_offset + a_speed;
+}
+`;
diff --git a/modules/graph-gl/src/deckgl-layers/flow-path-layer/flow-path-layer-vertex.glsl.js b/modules/graph-gl/src/deckgl-layers/flow-path-layer/flow-path-layer-vertex.glsl.js
new file mode 100644
index 00000000..27abdbe5
--- /dev/null
+++ b/modules/graph-gl/src/deckgl-layers/flow-path-layer/flow-path-layer-vertex.glsl.js
@@ -0,0 +1,90 @@
+// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+export default `\
+#define SHADER_NAME flow-path-layer-vertex-shader
+
+attribute vec3 positions;
+attribute vec3 instanceSourcePositions;
+attribute vec3 instanceTargetPositions;
+attribute vec4 instanceSourceTargetPositions64xyLow;
+attribute vec4 instanceColors;
+attribute vec3 instancePickingColors;
+attribute float instanceWidths;
+attribute float instanceSpeeds;
+attribute float instanceOffsets;
+attribute float instanceTailLengths;
+
+uniform float opacity;
+uniform float widthScale;
+uniform float widthMinPixels;
+uniform float widthMaxPixels;
+
+varying vec4 vColor;
+varying float segmentIndex;
+varying float speed;
+varying float pathLength;
+varying float tailLength;
+varying float offset;
+
+// offset vector by strokeWidth pixels
+// offset_direction is -1 (left) or 1 (right)
+vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction, float width) {
+ // normalized direction of the line
+ vec2 dir_screenspace = normalize(line_clipspace * project_uViewportSize);
+ // rotate by 90 degrees
+ dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);
+
+ vec2 offset_screenspace = dir_screenspace * offset_direction * width / 2.0;
+ vec2 offset_clipspace = project_pixel_size_to_clipspace(offset_screenspace);
+
+ return offset_clipspace;
+}
+
+void main(void) {
+ // Position
+ vec4 source = project_position_to_clipspace(instanceSourcePositions, instanceSourceTargetPositions64xyLow.xy, vec3(0.));
+ vec4 target = project_position_to_clipspace(instanceTargetPositions, instanceSourceTargetPositions64xyLow.zw, vec3(0.));
+
+ // Multiply out width and clamp to limits
+ float widthPixels = clamp(
+ project_size_to_pixel(instanceWidths * widthScale),
+ widthMinPixels, widthMaxPixels
+ );
+
+ // linear interpolation of source & target to pick right coord
+ segmentIndex = positions.x;
+ speed = instanceSpeeds;
+ tailLength = project_size_to_pixel(instanceTailLengths * widthScale);
+ offset = instanceOffsets;
+ pathLength = distance(instanceSourcePositions, instanceTargetPositions);
+ vec4 p = mix(source, target, segmentIndex);
+
+ // extrude
+ vec2 offset = getExtrusionOffset(target.xy - source.xy, positions.y, widthPixels);
+ gl_Position = p + vec4(offset, 0.0, 0.0);
+
+ // Color
+ vColor = vec4(instanceColors.rgb, instanceColors.a * opacity) / 255.;
+
+ // Set color to be rendered to picking fbo (also used to check for selection highlight).
+ picking_setPickingColor(instancePickingColors);
+}
+`;
diff --git a/modules/graph-gl/src/deckgl-layers/flow-path-layer/index.js b/modules/graph-gl/src/deckgl-layers/flow-path-layer/index.js
new file mode 100644
index 00000000..8878113a
--- /dev/null
+++ b/modules/graph-gl/src/deckgl-layers/flow-path-layer/index.js
@@ -0,0 +1,168 @@
+// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {Buffer, Transform} from '@luma.gl/core';
+import {LineLayer} from '@deck.gl/layers';
+import {window} from 'global';
+
+import vs from './flow-path-layer-vertex.glsl';
+import fs from './flow-path-layer-fragment.glsl';
+import tfvs from './flow-path-layer-vertex-tf.glsl';
+
+const defaultProps = {
+ ...LineLayer.defaultProps,
+ getWidth: {type: 'accessor', value: 1},
+ getSpeed: {type: 'accessor', value: 0}
+};
+
+export default class FlowPathLayer extends LineLayer {
+ getShaders() {
+ const projectModule = this.use64bitProjection() ? 'project64' : 'project32';
+ return {vs, fs, modules: [projectModule, 'picking']};
+ }
+
+ initializeState() {
+ super.initializeState();
+ this.getAttributeManager().addInstanced({
+ instanceSpeeds: {
+ size: 1,
+ transition: true,
+ accessor: 'getSpeed',
+ defaultValue: 0
+ },
+ instanceTailLengths: {
+ size: 1,
+ transition: true,
+ accessor: 'getTailLength',
+ defaultValue: 1
+ }
+ });
+ this.setupTransformFeedback();
+ this.setState({
+ ...this.state,
+ animation: window.requestAnimationFrame(this.animate.bind(this))
+ });
+ }
+
+ animate() {
+ const {transform} = this.state;
+ if (transform) {
+ transform.run();
+ transform.swap();
+ }
+ this.setState({
+ animation: window.requestAnimationFrame(this.animate.bind(this))
+ });
+ }
+
+ updateState({props, oldProps, changeFlags}) {
+ super.updateState({props, oldProps, changeFlags});
+ const {speedsBuffer} = this.state;
+
+ const speedChanged =
+ changeFlags.dataChanged ||
+ props.fp64 !== oldProps.fp64 ||
+ (changeFlags.updateTriggersChanged &&
+ (changeFlags.updateTriggersChanged.all || changeFlags.updateTriggersChanged.getSpeed));
+
+ if (speedChanged) {
+ const speeds = new Float32Array(props.data.length);
+ for (let i = 0; i < props.data.length; i++) {
+ speeds[i] =
+ typeof props.getSpeed === 'function' ? props.getSpeed(props.data[i]) : props.getSpeed;
+ }
+ speedsBuffer.subData({data: speeds});
+ }
+
+ if (props.fp64 !== oldProps.fp64) {
+ const {gl} = this.context;
+ if (this.state.model) {
+ this.state.model.delete();
+ }
+ this.setState({model: this._getModel(gl)});
+ this.getAttributeManager().invalidateAll();
+ }
+ }
+
+ finalizeState() {
+ super.finalizeState();
+ window.cancelAnimationFrame(this.state.animation);
+ }
+
+ setupTransformFeedback() {
+ const {gl} = this.context;
+ const elementCount = this.props.data && this.props.data.length;
+ if (elementCount) {
+ const instanceOffsets = new Float32Array(elementCount);
+ const instanceSpeeds = new Float32Array(elementCount);
+ const offsetBuffer = new Buffer(gl, instanceOffsets);
+ const speedsBuffer = new Buffer(gl, instanceSpeeds);
+
+ this.setState({
+ speedsBuffer,
+ transform: new Transform(gl, {
+ id: 'transform-offset',
+ vs: tfvs,
+ elementCount,
+ sourceBuffers: {
+ a_offset: offsetBuffer,
+ a_speed: speedsBuffer
+ },
+ feedbackMap: {
+ a_offset: 'v_offset'
+ }
+ })
+ });
+ }
+ }
+
+ draw({uniforms}) {
+ const {transform} = this.state;
+ if (!transform) {
+ return;
+ }
+
+ const {viewport} = this.context;
+ const {widthUnits, widthScale, widthMinPixels, widthMaxPixels} = this.props;
+
+ const widthMultiplier = widthUnits === 'pixels' ? viewport.distanceScales.metersPerPixel[2] : 1;
+
+ const offsetBuffer = transform.getBuffer('v_offset');
+ offsetBuffer.setAccessor({divisor: 1});
+
+ this.state.model
+ .setAttributes({
+ instanceOffsets: offsetBuffer
+ })
+ .setUniforms(
+ Object.assign({}, uniforms, {
+ widthScale: widthScale * widthMultiplier,
+ widthMinPixels,
+ widthMaxPixels
+ })
+ )
+ .draw();
+
+ offsetBuffer.setAccessor({divisor: 0});
+ }
+}
+
+FlowPathLayer.layerName = 'FlowPathLayer';
+FlowPathLayer.defaultProps = defaultProps;
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/atlas-data-url.js b/modules/graph-gl/src/deckgl-layers/marker-layer/atlas-data-url.js
new file mode 100644
index 00000000..2da1d553
--- /dev/null
+++ b/modules/graph-gl/src/deckgl-layers/marker-layer/atlas-data-url.js
@@ -0,0 +1,6 @@
+/* eslint-disable */
+export default {
+ dataURL:
+ 'data:image/png;base64,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'
+};
+/* eslint-enable */
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/index.js b/modules/graph-gl/src/deckgl-layers/marker-layer/index.js
new file mode 100644
index 00000000..07c6cbca
--- /dev/null
+++ b/modules/graph-gl/src/deckgl-layers/marker-layer/index.js
@@ -0,0 +1,2 @@
+// @noflow
+export {default} from './marker-layer';
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/marker-atlas.png b/modules/graph-gl/src/deckgl-layers/marker-layer/marker-atlas.png
new file mode 100644
index 00000000..0cd0486e
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/marker-atlas.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/marker-layer.js b/modules/graph-gl/src/deckgl-layers/marker-layer/marker-layer.js
new file mode 100644
index 00000000..1d1a6955
--- /dev/null
+++ b/modules/graph-gl/src/deckgl-layers/marker-layer/marker-layer.js
@@ -0,0 +1,33 @@
+// @noflow
+import {CompositeLayer} from '@deck.gl/core';
+import {IconLayer} from '@deck.gl/layers';
+
+import MarkerMapping from './marker-mapping';
+import AtlasDataURL from './atlas-data-url';
+
+export default class MarkerLayer extends CompositeLayer {
+ static layerName = 'MarkerLayer';
+
+ static defaultProps = {
+ id: 'MarkerLayer',
+ data: [],
+ getMarker: (d) => d.marker,
+ getColor: (d) => [0, 0, 0],
+ getSize: (d) => 10
+ };
+
+ renderLayers() {
+ const {getMarker, ...otherProps} = this.props;
+ return [
+ new IconLayer(
+ this.getSubLayerProps({
+ id: 'marker-layer',
+ iconAtlas: AtlasDataURL.dataURL,
+ iconMapping: MarkerMapping,
+ getIcon: getMarker,
+ ...otherProps
+ })
+ )
+ ];
+ }
+}
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/marker-list.js b/modules/graph-gl/src/deckgl-layers/marker-layer/marker-list.js
new file mode 100644
index 00000000..cffc5fbb
--- /dev/null
+++ b/modules/graph-gl/src/deckgl-layers/marker-layer/marker-list.js
@@ -0,0 +1,64 @@
+/* eslint-disable */
+export default {
+ 'location-marker-filled': 'location-marker-filled',
+ 'bell-filled': 'bell-filled',
+ 'bookmark-filled': 'bookmark-filled',
+ bookmark: 'bookmark',
+ 'cd-filled': 'cd-filled',
+ cd: 'cd',
+ checkmark: 'checkmark',
+ 'circle-check-filled': 'circle-check-filled',
+ 'circle-check': 'circle-check',
+ 'circle-filled': 'circle-filled',
+ 'circle-i-filled': 'circle-i-filled',
+ 'circle-i': 'circle-i',
+ 'circle-minus-filled': 'circle-minus-filled',
+ 'circle-minus': 'circle-minus',
+ 'circle-plus-filled': 'circle-plus-filled',
+ 'circle-plus': 'circle-plus',
+ 'circle-questionmark-filled': 'circle-questionmark-filled',
+ 'circle-questionmark': 'circle-questionmark',
+ 'circle-slash-filled': 'circle-slash-filled',
+ 'circle-slash': 'circle-slash',
+ 'circle-x-filled': 'circle-x-filled',
+ 'circle-x': 'circle-x',
+ circle: 'circle',
+ 'diamond-filled': 'diamond-filled',
+ diamond: 'diamond',
+ 'flag-filled': 'flag-filled',
+ flag: 'flag',
+ gear: 'gear',
+ 'heart-filled': 'heart-filled',
+ heart: 'heart',
+ bell: 'bell',
+ 'location-marker': 'location-marker',
+ 'octagonal-star-filled': 'octagonal-star-filled',
+ 'octagonal-star': 'octagonal-star',
+ 'person-filled': 'person-filled',
+ person: 'person',
+ 'pin-filled': 'pin-filled',
+ pin: 'pin',
+ 'plus-small': 'plus-small',
+ plus: 'plus',
+ 'rectangle-filled': 'rectangle-filled',
+ rectangle: 'rectangle',
+ 'star-filled': 'star-filled',
+ star: 'star',
+ 'tag-filled': 'tag-filled',
+ tag: 'tag',
+ 'thumb-down-filled': 'thumb-down-filled',
+ 'thumb-down': 'thumb-down',
+ 'thumb-up': 'thumb-up',
+ 'thumb_up-filled': 'thumb_up-filled',
+ 'triangle-down-filled': 'triangle-down-filled',
+ 'triangle-down': 'triangle-down',
+ 'triangle-left-filled': 'triangle-left-filled',
+ 'triangle-left': 'triangle-left',
+ 'triangle-right-filled': 'triangle-right-filled',
+ 'triangle-right': 'triangle-right',
+ 'triangle-up-filled': 'triangle-up-filled',
+ 'triangle-up': 'triangle-up',
+ 'x-small': 'x-small',
+ x: 'x'
+};
+/* eslint-enable */
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/marker-mapping.js b/modules/graph-gl/src/deckgl-layers/marker-layer/marker-mapping.js
new file mode 100644
index 00000000..d41fee52
--- /dev/null
+++ b/modules/graph-gl/src/deckgl-layers/marker-layer/marker-mapping.js
@@ -0,0 +1,424 @@
+/* eslint-disable */
+export default {
+ 'location-marker-filled': {
+ x: 0,
+ y: 0,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'bell-filled': {
+ x: 32,
+ y: 0,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'bookmark-filled': {
+ x: 0,
+ y: 32,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ bookmark: {
+ x: 32,
+ y: 32,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'cd-filled': {
+ x: 64,
+ y: 0,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ cd: {
+ x: 64,
+ y: 32,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ checkmark: {
+ x: 0,
+ y: 64,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'circle-check-filled': {
+ x: 32,
+ y: 64,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'circle-check': {
+ x: 64,
+ y: 64,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'circle-filled': {
+ x: 96,
+ y: 0,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'circle-i-filled': {
+ x: 96,
+ y: 32,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'circle-i': {
+ x: 96,
+ y: 64,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'circle-minus-filled': {
+ x: 0,
+ y: 96,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'circle-minus': {
+ x: 32,
+ y: 96,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'circle-plus-filled': {
+ x: 64,
+ y: 96,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'circle-plus': {
+ x: 96,
+ y: 96,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'circle-questionmark-filled': {
+ x: 128,
+ y: 0,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'circle-questionmark': {
+ x: 128,
+ y: 32,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'circle-slash-filled': {
+ x: 128,
+ y: 64,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'circle-slash': {
+ x: 128,
+ y: 96,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'circle-x-filled': {
+ x: 0,
+ y: 128,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'circle-x': {
+ x: 32,
+ y: 128,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ circle: {
+ x: 64,
+ y: 128,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'diamond-filled': {
+ x: 96,
+ y: 128,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ diamond: {
+ x: 128,
+ y: 128,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'flag-filled': {
+ x: 160,
+ y: 0,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ flag: {
+ x: 160,
+ y: 32,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ gear: {
+ x: 160,
+ y: 64,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'heart-filled': {
+ x: 160,
+ y: 96,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ heart: {
+ x: 160,
+ y: 128,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ bell: {
+ x: 0,
+ y: 160,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'location-marker': {
+ x: 32,
+ y: 160,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'octagonal-star-filled': {
+ x: 64,
+ y: 160,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'octagonal-star': {
+ x: 96,
+ y: 160,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'person-filled': {
+ x: 128,
+ y: 160,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ person: {
+ x: 160,
+ y: 160,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'pin-filled': {
+ x: 192,
+ y: 0,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ pin: {
+ x: 192,
+ y: 32,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'plus-small': {
+ x: 192,
+ y: 64,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ plus: {
+ x: 192,
+ y: 96,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'rectangle-filled': {
+ x: 192,
+ y: 128,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ rectangle: {
+ x: 192,
+ y: 160,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'star-filled': {
+ x: 0,
+ y: 192,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ star: {
+ x: 32,
+ y: 192,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'tag-filled': {
+ x: 64,
+ y: 192,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ tag: {
+ x: 96,
+ y: 192,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'thumb-down-filled': {
+ x: 128,
+ y: 192,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'thumb-down': {
+ x: 160,
+ y: 192,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'thumb-up': {
+ x: 192,
+ y: 192,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'thumb_up-filled': {
+ x: 224,
+ y: 0,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'triangle-down-filled': {
+ x: 224,
+ y: 32,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'triangle-down': {
+ x: 224,
+ y: 64,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'triangle-left-filled': {
+ x: 224,
+ y: 96,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'triangle-left': {
+ x: 224,
+ y: 128,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'triangle-right-filled': {
+ x: 224,
+ y: 160,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'triangle-right': {
+ x: 224,
+ y: 192,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'triangle-up-filled': {
+ x: 0,
+ y: 224,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'triangle-up': {
+ x: 32,
+ y: 224,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ 'x-small': {
+ x: 64,
+ y: 224,
+ width: 32,
+ height: 32,
+ mask: true
+ },
+ x: {
+ x: 96,
+ y: 224,
+ width: 32,
+ height: 32,
+ mask: true
+ }
+};
+/* eslint-enable */
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/bell-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/bell-filled.png
new file mode 100644
index 00000000..36ec1c7f
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/bell-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/bell.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/bell.png
new file mode 100644
index 00000000..321ce3ce
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/bell.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/bookmark-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/bookmark-filled.png
new file mode 100644
index 00000000..4de2bbcb
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/bookmark-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/bookmark.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/bookmark.png
new file mode 100644
index 00000000..d781884e
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/bookmark.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/cd-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/cd-filled.png
new file mode 100644
index 00000000..79caffea
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/cd-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/cd.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/cd.png
new file mode 100644
index 00000000..1a4131e3
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/cd.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/checkmark.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/checkmark.png
new file mode 100644
index 00000000..dc78fb44
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/checkmark.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-check-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-check-filled.png
new file mode 100644
index 00000000..392c39fd
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-check-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-check.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-check.png
new file mode 100644
index 00000000..cc7b8385
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-check.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-filled.png
new file mode 100644
index 00000000..d8e28036
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-i-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-i-filled.png
new file mode 100644
index 00000000..4c4431da
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-i-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-i.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-i.png
new file mode 100644
index 00000000..a0d6b7fb
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-i.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-minus-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-minus-filled.png
new file mode 100644
index 00000000..4f33f479
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-minus-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-minus.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-minus.png
new file mode 100644
index 00000000..46ce17cd
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-minus.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-plus-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-plus-filled.png
new file mode 100644
index 00000000..f7248540
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-plus-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-plus.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-plus.png
new file mode 100644
index 00000000..4866d5a2
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-plus.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-questionmark-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-questionmark-filled.png
new file mode 100644
index 00000000..b2c42ade
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-questionmark-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-questionmark.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-questionmark.png
new file mode 100644
index 00000000..31ea5403
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-questionmark.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-slash-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-slash-filled.png
new file mode 100644
index 00000000..296f5468
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-slash-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-slash.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-slash.png
new file mode 100644
index 00000000..d27e6113
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-slash.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-x-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-x-filled.png
new file mode 100644
index 00000000..94d373d6
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-x-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-x.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-x.png
new file mode 100644
index 00000000..99097021
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle-x.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle.png
new file mode 100644
index 00000000..b5f710d0
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/circle.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/diamond-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/diamond-filled.png
new file mode 100644
index 00000000..90376b60
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/diamond-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/diamond.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/diamond.png
new file mode 100644
index 00000000..8f982ee4
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/diamond.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/flag-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/flag-filled.png
new file mode 100644
index 00000000..aeba0740
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/flag-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/flag.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/flag.png
new file mode 100644
index 00000000..f312a3b9
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/flag.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/gear.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/gear.png
new file mode 100644
index 00000000..e1769c65
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/gear.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/heart-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/heart-filled.png
new file mode 100644
index 00000000..b9a7a9c9
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/heart-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/heart.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/heart.png
new file mode 100644
index 00000000..6659c80c
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/heart.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/location-marker-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/location-marker-filled.png
new file mode 100644
index 00000000..043bc0da
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/location-marker-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/location-marker.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/location-marker.png
new file mode 100644
index 00000000..e38fe919
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/location-marker.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/octagonal-star-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/octagonal-star-filled.png
new file mode 100644
index 00000000..94406e7f
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/octagonal-star-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/octagonal-star.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/octagonal-star.png
new file mode 100644
index 00000000..f37cc77d
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/octagonal-star.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/person-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/person-filled.png
new file mode 100644
index 00000000..dc2b1acf
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/person-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/person.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/person.png
new file mode 100644
index 00000000..280a2fbf
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/person.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/pin-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/pin-filled.png
new file mode 100644
index 00000000..86b2a0b5
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/pin-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/pin.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/pin.png
new file mode 100644
index 00000000..d5bfd99b
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/pin.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/plus-small.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/plus-small.png
new file mode 100644
index 00000000..f23c149f
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/plus-small.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/plus.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/plus.png
new file mode 100644
index 00000000..ce8a57c3
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/plus.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/rectangle-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/rectangle-filled.png
new file mode 100644
index 00000000..3c37d55c
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/rectangle-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/rectangle.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/rectangle.png
new file mode 100644
index 00000000..e6d14fe8
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/rectangle.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/star-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/star-filled.png
new file mode 100644
index 00000000..72e6ea54
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/star-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/star.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/star.png
new file mode 100644
index 00000000..9a0c8b32
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/star.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/tag-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/tag-filled.png
new file mode 100644
index 00000000..03209955
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/tag-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/tag.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/tag.png
new file mode 100644
index 00000000..429cda05
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/tag.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/thumb-down-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/thumb-down-filled.png
new file mode 100644
index 00000000..1ffbb78c
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/thumb-down-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/thumb-down.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/thumb-down.png
new file mode 100644
index 00000000..ea9489ba
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/thumb-down.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/thumb-up.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/thumb-up.png
new file mode 100644
index 00000000..d574dcc0
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/thumb-up.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/thumb_up-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/thumb_up-filled.png
new file mode 100644
index 00000000..f9a73f3f
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/thumb_up-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-down-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-down-filled.png
new file mode 100644
index 00000000..2b3cb515
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-down-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-down.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-down.png
new file mode 100644
index 00000000..b0fbccec
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-down.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-left-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-left-filled.png
new file mode 100644
index 00000000..3ea118db
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-left-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-left.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-left.png
new file mode 100644
index 00000000..e609fcd3
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-left.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-right-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-right-filled.png
new file mode 100644
index 00000000..0b062ab1
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-right-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-right.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-right.png
new file mode 100644
index 00000000..36b4e9ea
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-right.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-up-filled.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-up-filled.png
new file mode 100644
index 00000000..c6e2a635
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-up-filled.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-up.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-up.png
new file mode 100644
index 00000000..a0915e0f
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/triangle-up.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/x-small.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/x-small.png
new file mode 100644
index 00000000..ba66a5e0
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/x-small.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/markers/x.png b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/x.png
new file mode 100644
index 00000000..a04c1545
Binary files /dev/null and b/modules/graph-gl/src/deckgl-layers/marker-layer/markers/x.png differ
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/readme.md b/modules/graph-gl/src/deckgl-layers/marker-layer/readme.md
new file mode 100644
index 00000000..1e3c43c4
--- /dev/null
+++ b/modules/graph-gl/src/deckgl-layers/marker-layer/readme.md
@@ -0,0 +1,60 @@
+## Marker layer
+
+This layer provides the basic marker functionality. This marker layer provided by Deck.gl only has one marker (circle) while this layer provides numerous markers.
+
+## Properties
+
+Inherits from all [Icon Layer](http://deck.gl/#/documentation/deckgl-api-reference/layers/icon-layer) properties.
+
+### Render Options
+
+##### `getPosition` (Function, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
+
+- Default: `d => d.position`
+
+Method called to retrieve the position of each object, returns `[x, y]`.
+
+##### `getMarker` (Function, optional)
+
+- Default: `d => d.marker`
+
+Method called to retrieve the marker name of each object, returns string.
+
+Available markers:
+location-marker-filled, bell-filled, bookmark-filled, bookmark, cd-filled, cd, checkmark, circle-check-filled, circle-check, circle-filled, circle-i-filled, circle-i, circle-minus-filled, circle-minus, circle-plus-filled, circle-plus, circle-questionmark-filled, circle-questionmark, circle-slash-filled, circle-slash, circle-x-filled, circle-x, circle, diamond-filled, diamond, flag-filled, flag, gear, heart-filled, heart, bell, location-marker, octagonal-star-filled, octagonal-star, person-filled, person, pin-filled, pin, plus-small, plus, rectangle-filled, rectangle, star-filled, star, tag-filled, tag, thumb-down-filled, thumb-down, thumb-up, thumb_up-filled, triangle-down-filled, triangle-down, triangle-left-filled, triangle-left, triangle-right-filled, triangle-right, triangle-up-filled, triangle-up, x-small, x
+
+Or you can import the marker list file:
+
+```
+ import {Markers} from '@uber/mlvis-layers';
+```
+
+##### `getSize` (Function|Number, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
+
+- Default: `1`
+
+The height of each object, in pixels.
+
+- If a number is provided, it is used as the size for all objects.
+- If a function is provided, it is called on each object to retrieve its size.
+
+##### `getColor` (Function|Array, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
+
+- Default: `[0, 0, 0, 255]`
+
+The rgba color of each object, in `r, g, b, [a]`. Each component is in the 0-255 range.
+
+- If an array is provided, it is used as the color for all objects.
+- If a function is provided, it is called on each object to retrieve its color.
+
+## How to add new markers
+
+- The marker image has to be 32x32 pixels with transparent background in PNG format. The marker itself should be at the center of the image.
+
+- Add the new marker into `markers` folder. Note that the file name will be the name of the marker.
+
+- Go to folder 'scripts' and run `sh scripts/packing.sh` to generate four files: `marker-atlas.png`, `atlas-data-url.js`, `marker-list.js`, and `marker-mapping.js`.
+
+- Go back to the root level of this repo (mlvis-toolkit), and run `yarn prettier` to fix the linter errors.
+
+- Commit changes and create a diff for review (reviewer: `#mlvis`)
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/scripts/pack-images.js b/modules/graph-gl/src/deckgl-layers/marker-layer/scripts/pack-images.js
new file mode 100644
index 00000000..b6f87886
--- /dev/null
+++ b/modules/graph-gl/src/deckgl-layers/marker-layer/scripts/pack-images.js
@@ -0,0 +1,127 @@
+// @noflow
+/**
+ * Generate texture atlas from images
+ * ```
+ * npm install bin-pack ndarry get-pixels save-pixels datauri
+ * node pack-images
+ * ```
+ */
+
+var INPUT_DIR = process.argv[2];
+var OUTPUT_IMAGE = process.argv[3] + 'marker-atlas.png';
+var OUTPUT_MAPPING = process.argv[3] + 'marker-mapping.js';
+var OUTPUT_DATA_URL = process.argv[3] + 'atlas-data-url.js';
+var OUTPUT_LIST = process.argv[3] + 'marker-list.js';
+var IMAGE_PATTERN = /\.(png|jpg|jpeg|gif|bmp|tiff)$/i;
+
+var fs = require('fs'),
+ path = require('path'),
+ ndarray = require('ndarray'),
+ savePixels = require('save-pixels'),
+ getPixels = require('get-pixels'),
+ pack = require('bin-pack'),
+ Datauri = require('datauri');
+
+// Get all images in the input path
+const fileNames = fs.readdirSync(INPUT_DIR).filter((name) => IMAGE_PATTERN.test(name));
+
+Promise.all(fileNames.map((name) => readImage(path.resolve(INPUT_DIR, name)))).then((images) => {
+ // Images are loaded
+ const nodes = images.map((pixels, index) => ({
+ name: fileNames[index],
+ pixels,
+ width: pixels.shape[0],
+ height: pixels.shape[1]
+ }));
+
+ // Bin pack
+ const result = pack(nodes);
+ // console.log(result.items.length + ' items packed.');
+
+ // Convert to texture atlas
+ const outputJSON = {};
+ const outputImage = createImage(result.width, result.height);
+ result.items.forEach((item) => {
+ outputJSON[item.item.name.replace(IMAGE_PATTERN, '')] = {
+ x: item.x,
+ y: item.y,
+ width: item.width,
+ height: item.height,
+ mask: true
+ };
+ copyPixels(item.item.pixels, outputImage, item.x, item.y);
+ });
+
+ // Write to disk
+ writeMapping(OUTPUT_MAPPING, outputJSON);
+ writeImage(OUTPUT_IMAGE, outputImage, () => writeDataURL(OUTPUT_IMAGE, OUTPUT_DATA_URL));
+ writeList(OUTPUT_LIST, outputJSON);
+});
+
+/* Utils */
+
+function copyPixels(fromImage, toImage, x, y) {
+ const width = fromImage.shape[0],
+ height = fromImage.shape[1],
+ channels = fromImage.shape[2];
+
+ for (let i = 0; i < width; i++) {
+ for (let j = 0; j < height; j++) {
+ for (let k = 0; k < channels; k++) {
+ const value = fromImage.get(i, j, k);
+ toImage.set(i + x, j + y, k, value);
+ }
+ }
+ }
+}
+
+function writeMapping(filePath, content) {
+ const contentStr = JSON.stringify(content, null, 2);
+ exportJSFile(filePath, contentStr);
+}
+
+function createImage(width, height) {
+ return ndarray(new Uint8ClampedArray(width * height * 4), [width, height, 4]);
+}
+
+function writeDataURL(imagePath, outputFilePath) {
+ const datauri = new Datauri(imagePath);
+ const content = {dataURL: datauri.content};
+ const contentStr = JSON.stringify(content, null, 2);
+ exportJSFile(outputFilePath, contentStr);
+}
+
+function writeList(filePath, content) {
+ const markers = Object.keys(content);
+ const markerMap = markers.reduce((res, marker) => {
+ res[marker] = marker;
+ return res;
+ }, {});
+ const contentStr = JSON.stringify(markerMap, null, 2);
+ exportJSFile(filePath, contentStr);
+}
+
+function exportJSFile(filePath, contentStr) {
+ fs.writeFileSync(
+ filePath,
+ `/* eslint-disable */\nexport default ${contentStr};\n/* eslint-enable */\n`
+ );
+}
+
+function readImage(filePath) {
+ return new Promise(function (resolve, reject) {
+ getPixels(filePath, function (err, pixels) {
+ if (err) {
+ resolve(null);
+ } else {
+ resolve(pixels);
+ }
+ });
+ });
+}
+
+function writeImage(filePath, pixelArr, createDataURL) {
+ const file = fs.createWriteStream(filePath);
+ savePixels(pixelArr, 'png').pipe(file);
+ file.on('finish', createDataURL);
+}
diff --git a/modules/graph-gl/src/deckgl-layers/marker-layer/scripts/packing.sh b/modules/graph-gl/src/deckgl-layers/marker-layer/scripts/packing.sh
new file mode 100644
index 00000000..7e6b8898
--- /dev/null
+++ b/modules/graph-gl/src/deckgl-layers/marker-layer/scripts/packing.sh
@@ -0,0 +1,2 @@
+# npm install --save-dev bin-pack ndarray get-pixels save-pixels datauri
+node pack-images ../markers ../
diff --git a/modules/graph-gl/src/deckgl-layers/spline-layer.js b/modules/graph-gl/src/deckgl-layers/spline-layer.js
new file mode 100644
index 00000000..90c24708
--- /dev/null
+++ b/modules/graph-gl/src/deckgl-layers/spline-layer.js
@@ -0,0 +1,79 @@
+import {COORDINATE_SYSTEM, CompositeLayer} from '@deck.gl/core';
+import {PathLayer} from '@deck.gl/layers';
+import {getCurvePoints} from 'cardinal-spline-js';
+// const getCurvePoints = () => {};
+
+/* Constants */
+const defaultProps = {
+ id: 'spline-layer',
+ getData: (d) => d.points,
+ getAngle: (x) => 0,
+ fontSize: 24,
+ coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+ fp64: false
+};
+
+export default class SplineLayer extends CompositeLayer {
+ static layerName = 'SplineLayer';
+
+ initializeState() {
+ this.state = {typedEdgeData: []};
+ }
+
+ shouldUpdateState({changeFlags}) {
+ return changeFlags.dataChanged || changeFlags.propsChanged;
+ }
+
+ updateState({props, oldProps, changeFlags}) {
+ super.updateState({props, oldProps, changeFlags});
+ if (changeFlags.dataChanged || changeFlags.propsChanged) {
+ this.updateSplineData(props);
+ }
+ }
+
+ updateSplineData() {
+ const {data} = this.props;
+ const paths = data.reduce((res, d) => {
+ const sourcePosition = this.props.getSourcePosition(d);
+ const targetPosition = this.props.getTargetPosition(d);
+ const controlPoints = this.props.getControlPoints(d);
+
+ // Catmull-Rom curve
+ const serializedControlPoints = controlPoints.toString().split(',');
+
+ // NOTE: we might change the number of points according to the length.
+ // so we can render less segements.
+ // points = [x1, y1, x2, y2, ...];
+ const points = getCurvePoints(
+ [...sourcePosition, ...serializedControlPoints, ...targetPosition],
+ 0.5,
+ 10
+ );
+ // convert points to [[x1, y1], [x2, y2], ...]
+ const path = [];
+ for (let idx = 0; idx < points.length; idx += 2) {
+ path.push([points[idx], points[idx + 1]]);
+ }
+ res.push(path);
+ return res;
+ }, []);
+ this.setState({paths});
+ }
+
+ renderLayers() {
+ const {coordinateSystem, getColor, getWidth, id, updateTriggers} = this.props;
+ const {paths} = this.state;
+ return new PathLayer({
+ id: `${id}-splines`,
+ data: paths,
+ getPath: (d) => d,
+ getColor,
+ getWidth,
+ coordinateSystem,
+ updateTriggers
+ });
+ }
+}
+
+SplineLayer.layerName = 'SplineLayer';
+SplineLayer.defaultProps = defaultProps;
diff --git a/modules/graph-gl/src/deckgl-layers/zoomable-text-layer.js b/modules/graph-gl/src/deckgl-layers/zoomable-text-layer.js
new file mode 100644
index 00000000..365c50ed
--- /dev/null
+++ b/modules/graph-gl/src/deckgl-layers/zoomable-text-layer.js
@@ -0,0 +1,76 @@
+import {CompositeLayer} from '@deck.gl/core';
+import {TextLayer} from '@deck.gl/layers';
+
+export default class ZoomableTextLayer extends CompositeLayer {
+ static layerName = 'ZoomableTextLayer';
+
+ initializeState() {
+ this.state = {characterSet: []};
+ }
+
+ shouldUpdateState({props, changeFlags}) {
+ const {scaleWithZoom} = this.props;
+ if (!scaleWithZoom) {
+ return changeFlags.dataChanged || changeFlags.propsChanged;
+ }
+ return changeFlags.dataChanged || changeFlags.propsChanged || changeFlags.viewportChanged;
+ }
+
+ updateState({props, oldProps, changeFlags}) {
+ super.updateState({props, oldProps, changeFlags});
+ if (changeFlags.propsOrDataChanged) {
+ const {getText} = props;
+ let textLabels = [];
+ if (typeof getText === 'function') {
+ textLabels = props.data.map(getText);
+ } else {
+ textLabels = [getText];
+ }
+ const characterSet = new Set(textLabels.join(''));
+ const uniqueCharacters = Array.from(characterSet);
+ this.setState({characterSet: uniqueCharacters});
+ }
+ }
+
+ renderLayers() {
+ const {
+ data,
+ getPosition,
+ getColor,
+ getText,
+ getSize,
+ getTextAnchor,
+ getAlignmentBaseline,
+ getAngle,
+ scaleWithZoom,
+ updateTriggers
+ } = this.props;
+
+ const sizeUpdateTrigger = scaleWithZoom ? [getSize, this.context.viewport.zoom] : false;
+ // getText only expects function not plain value (string)
+ const newGetText = typeof getText === 'function' ? getText : () => getText;
+
+ return [
+ new TextLayer(
+ this.getSubLayerProps({
+ id: '__text-layer',
+ data,
+ sizeScale: scaleWithZoom ? Math.max(0, this.context.viewport.zoom) : 1,
+ characterSet: this.state.characterSet,
+ getPosition,
+ getColor,
+ getSize,
+ getTextAnchor,
+ getAlignmentBaseline,
+ getAngle,
+ getText: newGetText,
+ updateTriggers: {
+ getSize: sizeUpdateTrigger,
+ getAngle: [sizeUpdateTrigger, updateTriggers.getPosition],
+ ...updateTriggers
+ }
+ })
+ )
+ ];
+ }
+}
diff --git a/modules/graph-gl/src/index.js b/modules/graph-gl/src/index.js
new file mode 100644
index 00000000..ac504638
--- /dev/null
+++ b/modules/graph-gl/src/index.js
@@ -0,0 +1,32 @@
+// react-graph-gl core
+export {default as GraphEngine} from './core/graph-engine';
+export {default as Graph} from './core/graph';
+export {default as Node} from './core/node';
+export {default as Edge} from './core/edge';
+export {
+ NODE_STATE,
+ NODE_TYPE,
+ EDGE_TYPE,
+ EDGE_DECORATOR_TYPE,
+ LAYOUT_STATE,
+ MARKER_TYPE
+} from './core/constants';
+
+// react-graph-gl layouts
+export {default as BaseLayout} from './core/base-layout';
+export {default as D3ForceLayout} from './layouts/d3-force/index';
+export {default as SimpleLayout} from './layouts/simple-layout/index';
+
+// react-graph-gl loaders
+export {default as JSONLoader} from './loaders/json-loader';
+export {basicNodeParser} from './loaders/node-parsers';
+export {basicEdgeParser} from './loaders/edge-parsers';
+
+// react-graph-gl utils
+export {default as createGraph} from './utils/create-graph';
+export * from './utils/layer-utils';
+export * from './utils/log';
+
+// deck.gl components
+export {default as GraphLayer} from './layers/graph-layer';
+export {default as CompositeEdgeLayer} from './layers/composite-edge-layer';
diff --git a/modules/graph-gl/src/layers/composite-edge-layer.js b/modules/graph-gl/src/layers/composite-edge-layer.js
new file mode 100644
index 00000000..d9f69414
--- /dev/null
+++ b/modules/graph-gl/src/layers/composite-edge-layer.js
@@ -0,0 +1,83 @@
+import {COORDINATE_SYSTEM, CompositeLayer} from '@deck.gl/core';
+
+import {EDGE_TYPE} from '../index';
+import StraightLineEdge from './edge-layers/straight-line-edge';
+import PathEdge from './edge-layers/path-edge';
+import CurvedEdge from './edge-layers/curved-edge';
+
+const EDGE_LAYER_MAP = {
+ [EDGE_TYPE.LINE]: StraightLineEdge,
+ [EDGE_TYPE.PATH]: PathEdge,
+ [EDGE_TYPE.SPLINE_CURVE]: CurvedEdge
+};
+
+export default class EdgeLayer extends CompositeLayer {
+ static layerName = 'EdgeLayer';
+
+ static defautlProps = {
+ data: [],
+ pickable: true,
+ getLayoutInfo: (d) => ({
+ type: d.type,
+ sourcePosition: d.sourcePosition,
+ targetPosition: d.targetPosition,
+ controlPoints: []
+ }),
+ positionUpdateTrigger: 0
+ };
+
+ updateState({props, oldProps, changeFlags}) {
+ super.updateState({props, oldProps, changeFlags});
+ if (changeFlags.dataChanged) {
+ this.updateStateData(props);
+ }
+ }
+
+ updateStateData() {
+ const {data, getLayoutInfo} = this.props;
+ // bucket edges by types
+ const typedEdgeData = data.reduce(
+ (res, d) => {
+ const {type} = getLayoutInfo(d);
+ res[type] = res[type].concat(d);
+ return res;
+ },
+ {
+ [EDGE_TYPE.LINE]: [],
+ [EDGE_TYPE.PATH]: [],
+ [EDGE_TYPE.SPLINE_CURVE]: []
+ }
+ );
+ this.setState({typedEdgeData});
+ }
+
+ renderLayers() {
+ const {getLayoutInfo, pickable, positionUpdateTrigger, stylesheet} = this.props;
+
+ const {typedEdgeData} = this.state;
+
+ // render lines by types (straight line, path, curves)
+ return Object.entries(typedEdgeData).map((e) => {
+ const [type, edgeData] = e;
+ const Layer = EDGE_LAYER_MAP[type];
+ // invalid edge layer type
+ if (!Layer) {
+ return null;
+ }
+ return new Layer({
+ data: edgeData,
+ getLayoutInfo,
+ getColor: stylesheet.getDeckGLAccessor('getColor'),
+ getWidth: stylesheet.getDeckGLAccessor('getWidth'),
+ colorUpdateTrigger: stylesheet.getDeckGLAccessorUpdateTrigger('getColor'),
+ widthUpdateTrigger: stylesheet.getDeckGLAccessorUpdateTrigger('getWidth'),
+ positionUpdateTrigger,
+ pickable,
+ coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+ parameters: {
+ depthTest: false
+ }
+ });
+ });
+ }
+}
diff --git a/modules/graph-gl/src/layers/edge-layers/curved-edge.js b/modules/graph-gl/src/layers/edge-layers/curved-edge.js
new file mode 100644
index 00000000..d9e9b25c
--- /dev/null
+++ b/modules/graph-gl/src/layers/edge-layers/curved-edge.js
@@ -0,0 +1,83 @@
+import {CompositeLayer} from '@deck.gl/core';
+import {ScatterplotLayer, LineLayer} from '@deck.gl/layers';
+import SplineLayer from '../../deckgl-layers/spline-layer';
+
+const DEBUG = false;
+
+export default class CurvedEdge extends CompositeLayer {
+ static layerName = 'CurvedEdge';
+
+ renderLayers() {
+ const {
+ data,
+ getLayoutInfo,
+ positionUpdateTrigger = 0,
+ colorUpdateTrigger = 0,
+ widthUpdateTrigger = 0,
+ ...otherProps
+ } = this.props;
+ return [
+ DEBUG &&
+ new ScatterplotLayer(
+ this.getSubLayerProps({
+ id: '__control-points',
+ data,
+ getPosition: (e) => getLayoutInfo(e).controlPoints[0],
+ getColor: (d) => [190, 190, 190, 150],
+ getRadius: (d) => 5,
+ updateTriggers: {
+ getPosition: positionUpdateTrigger
+ },
+ ...otherProps
+ })
+ ),
+ DEBUG &&
+ new LineLayer(
+ this.getSubLayerProps({
+ id: '__first_segment',
+ data,
+ getSourcePosition: (e) => getLayoutInfo(e).sourcePosition,
+ getTargetPosition: (e) => getLayoutInfo(e).controlPoints[0],
+ getColor: (e) => [210, 210, 210, 150],
+ updateTriggers: {
+ getSourcePosition: positionUpdateTrigger,
+ getTargetPosition: positionUpdateTrigger
+ },
+ ...otherProps
+ })
+ ),
+ DEBUG &&
+ new LineLayer(
+ this.getSubLayerProps({
+ id: '__last_segment',
+ data,
+ getSourcePosition: (e) => getLayoutInfo(e).controlPoints[0],
+ getTargetPosition: (e) => getLayoutInfo(e).targetPosition,
+ getColor: (e) => [210, 210, 210, 150],
+ updateTriggers: {
+ getSourcePosition: positionUpdateTrigger,
+ getTargetPosition: positionUpdateTrigger
+ },
+ ...otherProps
+ })
+ ),
+ new SplineLayer(
+ this.getSubLayerProps({
+ id: '__spline_layer',
+ data,
+ getSourcePosition: (e) => getLayoutInfo(e).sourcePosition,
+ getTargetPosition: (e) => getLayoutInfo(e).targetPosition,
+ getControlPoints: (e) => getLayoutInfo(e).controlPoints,
+ updateTriggers: {
+ getSourcePosition: positionUpdateTrigger,
+ getTargetPosition: positionUpdateTrigger,
+ getControlPoints: positionUpdateTrigger,
+ getColor: colorUpdateTrigger,
+ getWidth: widthUpdateTrigger
+ },
+ ...otherProps
+ })
+ )
+ ];
+ }
+}
diff --git a/modules/graph-gl/src/layers/edge-layers/edge-label-layer.js b/modules/graph-gl/src/layers/edge-layers/edge-label-layer.js
new file mode 100644
index 00000000..11dfe585
--- /dev/null
+++ b/modules/graph-gl/src/layers/edge-layers/edge-label-layer.js
@@ -0,0 +1,44 @@
+import {CompositeLayer} from '@deck.gl/core';
+import ZoomableTextLayer from '../../deckgl-layers/zoomable-text-layer';
+
+export default class EdgeLabelLayer extends CompositeLayer {
+ static layerName = 'EdgeLabelLayer';
+
+ renderLayers() {
+ const {data, getLayoutInfo, positionUpdateTrigger = 0, stylesheet} = this.props;
+ return [
+ new ZoomableTextLayer(
+ this.getSubLayerProps({
+ id: 'edge-label-layer',
+ data,
+ getPosition: (e) => {
+ const {sourcePosition, targetPosition, controlPoints = []} = getLayoutInfo(e);
+ // consider all the points on this edge
+ const allPoints = [sourcePosition, targetPosition, ...controlPoints];
+ const sumX = allPoints.reduce((res, p) => res + p[0], 0);
+ const sumY = allPoints.reduce((res, p) => res + p[1], 0);
+ // find the centroid of those points
+ return [sumX / allPoints.length, sumY / allPoints.length];
+ },
+ getAngle: (e) => {
+ const {sourcePosition, targetPosition} = getLayoutInfo(e);
+ // sort the nodes from left to right
+ const [newSourcePosition, newTargetPosition] =
+ sourcePosition[0] < targetPosition[0]
+ ? [sourcePosition, targetPosition]
+ : [targetPosition, sourcePosition];
+ // angle in degrees
+ const deltaX = newTargetPosition[0] - newSourcePosition[0];
+ const deltaY = newTargetPosition[1] - newSourcePosition[1];
+ return (Math.atan2(deltaY, deltaX) * -180) / Math.PI;
+ },
+ ...stylesheet.getDeckGLAccessors(),
+ updateTriggers: {
+ ...stylesheet.getDeckGLUpdateTriggers(),
+ getPosition: positionUpdateTrigger
+ }
+ })
+ )
+ ];
+ }
+}
diff --git a/modules/graph-gl/src/layers/edge-layers/flow-layer.js b/modules/graph-gl/src/layers/edge-layers/flow-layer.js
new file mode 100644
index 00000000..73a36188
--- /dev/null
+++ b/modules/graph-gl/src/layers/edge-layers/flow-layer.js
@@ -0,0 +1,30 @@
+import {CompositeLayer} from '@deck.gl/core';
+
+import FlowPathLayer from '../../deckgl-layers/flow-path-layer/index';
+
+export default class FlowLayer extends CompositeLayer {
+ static layerName = 'FlowLayer';
+
+ renderLayers() {
+ const {data, getLayoutInfo, positionUpdateTrigger = 0, stylesheet} = this.props;
+ return [
+ new FlowPathLayer(
+ this.getSubLayerProps({
+ id: '__flow-layer',
+ data,
+ ...stylesheet.getDeckGLAccessors(),
+ getSourcePosition: (e) => getLayoutInfo(e).sourcePosition,
+ getTargetPosition: (e) => getLayoutInfo(e).targetPosition,
+ parameters: {
+ depthTest: false
+ },
+ updateTriggers: {
+ ...stylesheet.getDeckGLUpdateTriggers(),
+ getSourcePosition: positionUpdateTrigger,
+ getTargetPosition: positionUpdateTrigger
+ }
+ })
+ )
+ ];
+ }
+}
diff --git a/modules/graph-gl/src/layers/edge-layers/path-edge.js b/modules/graph-gl/src/layers/edge-layers/path-edge.js
new file mode 100644
index 00000000..53c2c9a5
--- /dev/null
+++ b/modules/graph-gl/src/layers/edge-layers/path-edge.js
@@ -0,0 +1,35 @@
+import {CompositeLayer} from '@deck.gl/core';
+import {PathLayer} from '@deck.gl/layers';
+
+export default class PathEdge extends CompositeLayer {
+ static layerName = 'PathEdge';
+
+ renderLayers() {
+ const {
+ data,
+ getLayoutInfo,
+ positionUpdateTrigger = 0,
+ colorUpdateTrigger = 0,
+ widthUpdateTrigger = 0,
+ ...otherProps
+ } = this.props;
+ return [
+ new PathLayer(
+ this.getSubLayerProps({
+ id: '__line-layer',
+ data,
+ getPath: (e) => {
+ const {sourcePosition, targetPosition, controlPoints} = getLayoutInfo(e);
+ return [sourcePosition, ...controlPoints, targetPosition];
+ },
+ updateTriggers: {
+ getColor: colorUpdateTrigger,
+ getPath: positionUpdateTrigger,
+ getWidth: widthUpdateTrigger
+ },
+ ...otherProps
+ })
+ )
+ ];
+ }
+}
diff --git a/modules/graph-gl/src/layers/edge-layers/straight-line-edge.js b/modules/graph-gl/src/layers/edge-layers/straight-line-edge.js
new file mode 100644
index 00000000..f3c2b664
--- /dev/null
+++ b/modules/graph-gl/src/layers/edge-layers/straight-line-edge.js
@@ -0,0 +1,34 @@
+import {CompositeLayer} from '@deck.gl/core';
+import {LineLayer} from '@deck.gl/layers';
+
+export default class StraightLineEdge extends CompositeLayer {
+ static layerName = 'StraightLineEdge';
+
+ renderLayers() {
+ const {
+ data,
+ getLayoutInfo,
+ positionUpdateTrigger = 0,
+ colorUpdateTrigger = 0,
+ widthUpdateTrigger = 0,
+ ...otherProps
+ } = this.props;
+ return [
+ new LineLayer(
+ this.getSubLayerProps({
+ id: '__line-layer',
+ data,
+ getSourcePosition: (e) => getLayoutInfo(e).sourcePosition,
+ getTargetPosition: (e) => getLayoutInfo(e).targetPosition,
+ updateTriggers: {
+ getColor: colorUpdateTrigger,
+ getSourcePosition: positionUpdateTrigger,
+ getTargetPosition: positionUpdateTrigger,
+ getWidth: widthUpdateTrigger
+ },
+ ...otherProps
+ })
+ )
+ ];
+ }
+}
diff --git a/modules/graph-gl/src/layers/graph-layer.js b/modules/graph-gl/src/layers/graph-layer.js
new file mode 100644
index 00000000..2e8cc905
--- /dev/null
+++ b/modules/graph-gl/src/layers/graph-layer.js
@@ -0,0 +1,209 @@
+import {COORDINATE_SYSTEM, CompositeLayer} from '@deck.gl/core';
+
+import Stylesheet from './style/style-sheet';
+import {NODE_TYPE, EDGE_DECORATOR_TYPE, mixedGetPosition} from '../index';
+import InteractionManager from '../core/interaction-manager';
+
+import {log} from '../utils/log';
+
+const defaultProps = {
+ // an array of styles for layers
+ nodeStyle: [],
+ nodeEvents: {
+ onMouseLeave: () => {},
+ onHover: () => {},
+ onMouseEnter: () => {},
+ onClick: () => {},
+ onDrag: () => {}
+ },
+ edgeStyle: {
+ color: 'black',
+ strokeWidth: 1,
+ // an array of styles for layers
+ decorators: []
+ },
+ edgeEvents: {
+ onClick: () => {},
+ onHover: () => {}
+ },
+ enableDragging: false
+};
+
+// node layers
+import CircleLayer from './node-layers/circle-layer';
+import ImageLayer from './node-layers/image-layer';
+import NodeLabelLayer from './node-layers/label-layer';
+import RectangleLayer from './node-layers/rectangle-layer';
+import ZoomableMarkerLayer from './node-layers/zoomable-marker-layer';
+
+const NODE_LAYER_MAP = {
+ [NODE_TYPE.RECTANGLE]: RectangleLayer,
+ [NODE_TYPE.ICON]: ImageLayer,
+ [NODE_TYPE.CIRCLE]: CircleLayer,
+ [NODE_TYPE.LABEL]: NodeLabelLayer,
+ [NODE_TYPE.MARKER]: ZoomableMarkerLayer
+};
+
+// edge layers
+import CompositeEdgeLayer from './composite-edge-layer';
+import EdgeLabelLayer from './edge-layers/edge-label-layer';
+import FlowLayer from './edge-layers/flow-layer';
+
+const EDGE_DECORATOR_LAYER_MAP = {
+ [EDGE_DECORATOR_TYPE.LABEL]: EdgeLabelLayer,
+ [EDGE_DECORATOR_TYPE.FLOW]: FlowLayer
+};
+
+const SHARED_LAYER_PROPS = {
+ coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+ parameters: {
+ depthTest: false
+ }
+};
+
+export default class GraphLayer extends CompositeLayer {
+ static defautlProps = {
+ pickable: true
+ };
+
+ constructor(props) {
+ super(props);
+ props.engine.registerCallbacks({
+ onLayoutChange: () => this.forceUpdate()
+ });
+ }
+
+ initializeState() {
+ const interactionManager = new InteractionManager(this.props, () => this.forceUpdate());
+ this.state = {interactionManager};
+ }
+
+ shouldUpdateState({changeFlags}) {
+ return changeFlags.dataChanged || changeFlags.propsChanged;
+ }
+
+ updateState({props}) {
+ this.state.interactionManager.updateProps(props);
+ }
+
+ finalize() {
+ this.props.engine.unregisterCallbacks();
+ }
+
+ forceUpdate() {
+ if (this.context && this.context.layerManager) {
+ this.setNeedsUpdate();
+ this.setChangeFlags({dataChanged: true});
+ }
+ }
+
+ createNodeLayers() {
+ const {engine, nodeStyle} = this.props;
+ if (!nodeStyle || !Array.isArray(nodeStyle) || nodeStyle.length === 0) {
+ return [];
+ }
+ return nodeStyle.filter(Boolean).map((style, idx) => {
+ const {pickable = true, ...restStyle} = style;
+ const LayerType = NODE_LAYER_MAP[style.type];
+ if (!LayerType) {
+ log.error(`Invalid node type: ${style.type}`)();
+ throw new Error(`Invalid node type: ${style.type}`);
+ }
+ const stylesheet = new Stylesheet(restStyle, {
+ stateUpdateTrigger: this.state.interactionManager.getLastInteraction()
+ });
+ const getOffset = stylesheet.getDeckGLAccessor('getOffset');
+ return new LayerType({
+ ...SHARED_LAYER_PROPS,
+ id: `node-rule-${idx}`,
+ data: engine.getGraph().getNodes(),
+ getPosition: mixedGetPosition(engine.getNodePosition, getOffset),
+ pickable,
+ positionUpdateTrigger: [
+ engine.getLayoutLastUpdate(),
+ engine.getLayoutState(),
+ stylesheet.getDeckGLAccessorUpdateTrigger('getOffset')
+ ].join(),
+ stylesheet
+ });
+ });
+ }
+
+ createEdgeLayers() {
+ const {edgeStyle, engine} = this.props;
+ const {decorators, ...restEdgeStyle} = edgeStyle;
+ const stylesheet = new Stylesheet(
+ {
+ type: 'Edge',
+ ...restEdgeStyle
+ },
+ {
+ stateUpdateTrigger: this.state.interactionManager.getLastInteraction()
+ }
+ );
+ const edgeLayer = new CompositeEdgeLayer({
+ ...SHARED_LAYER_PROPS,
+ id: 'edge-layer',
+ data: engine.getGraph().getEdges(),
+ getLayoutInfo: engine.getEdgePosition,
+ pickable: true,
+ positionUpdateTrigger: [engine.getLayoutLastUpdate(), engine.getLayoutState()].join(),
+ stylesheet
+ });
+ if (!decorators || !Array.isArray(decorators) || decorators.length === 0) {
+ return edgeLayer;
+ }
+
+ const decoratorLayers = decorators.filter(Boolean).map((style, idx) => {
+ const DecoratorLayer = EDGE_DECORATOR_LAYER_MAP[style.type];
+ // invalid decorator layer type
+ if (!DecoratorLayer) {
+ log.error(`Invalid edge decorator type: ${style.type}`)();
+ throw new Error(`Invalid edge decorator type: ${style.type}`);
+ }
+ const decoratorStylesheet = new Stylesheet(style, {
+ stateUpdateTrigger: this.state.interactionManager.getLastInteraction()
+ });
+ return new DecoratorLayer({
+ ...SHARED_LAYER_PROPS,
+ id: `edge-decorator-${idx}`,
+ data: engine.getGraph().getEdges(),
+ getLayoutInfo: engine.getEdgePosition,
+ pickable: true,
+ positionUpdateTrigger: [engine.getLayoutLastUpdate(), engine.getLayoutState()].join(),
+ stylesheet: decoratorStylesheet
+ });
+ });
+ return [edgeLayer, decoratorLayers];
+ }
+
+ onClick(info) {
+ this.state.interactionManager.onClick(info);
+ }
+
+ onHover(info) {
+ this.state.interactionManager.onHover(info);
+ }
+
+ onDragStart(info, event) {
+ this.state.interactionManager.onDragStart(info, event);
+ }
+
+ onDrag(info, event) {
+ this.state.interactionManager.onDrag(info, event);
+ }
+
+ onDragEnd(info, event) {
+ this.state.interactionManager.onDragEnd(info, event);
+ }
+
+ renderLayers() {
+ if (!this.props.engine.getGraph()) {
+ return [];
+ }
+ return [this.createEdgeLayers(), this.createNodeLayers()];
+ }
+}
+
+GraphLayer.layerName = 'GraphLayer';
+GraphLayer.defaultProps = defaultProps;
diff --git a/modules/graph-gl/src/layers/node-layers/circle-layer.js b/modules/graph-gl/src/layers/node-layers/circle-layer.js
new file mode 100644
index 00000000..ab631e23
--- /dev/null
+++ b/modules/graph-gl/src/layers/node-layers/circle-layer.js
@@ -0,0 +1,25 @@
+import {CompositeLayer} from '@deck.gl/core';
+import {ScatterplotLayer} from '@deck.gl/layers';
+
+export default class CircleLayer extends CompositeLayer {
+ static layerName = 'CircleLayer';
+
+ renderLayers() {
+ const {data, getPosition, stylesheet, positionUpdateTrigger = 0} = this.props;
+
+ return [
+ new ScatterplotLayer(
+ this.getSubLayerProps({
+ id: '__scatterplot-layer',
+ data,
+ getPosition,
+ ...stylesheet.getDeckGLAccessors(),
+ updateTriggers: {
+ getPosition: positionUpdateTrigger,
+ ...stylesheet.getDeckGLUpdateTriggers()
+ }
+ })
+ )
+ ];
+ }
+}
diff --git a/modules/graph-gl/src/layers/node-layers/image-layer.js b/modules/graph-gl/src/layers/node-layers/image-layer.js
new file mode 100644
index 00000000..47015357
--- /dev/null
+++ b/modules/graph-gl/src/layers/node-layers/image-layer.js
@@ -0,0 +1,25 @@
+import {CompositeLayer} from '@deck.gl/core';
+import {IconLayer} from '@deck.gl/layers';
+
+export default class ImageLayer extends CompositeLayer {
+ static layerName = 'ImageLayer';
+
+ renderLayers() {
+ const {data, getPosition, stylesheet, positionUpdateTrigger = 0} = this.props;
+
+ return [
+ new IconLayer(
+ this.getSubLayerProps({
+ id: '__icon-layer',
+ data,
+ getPosition,
+ ...stylesheet.getDeckGLAccessors(),
+ updateTriggers: {
+ getPosition: positionUpdateTrigger,
+ ...stylesheet.getDeckGLUpdateTriggers()
+ }
+ })
+ )
+ ];
+ }
+}
diff --git a/modules/graph-gl/src/layers/node-layers/label-layer.js b/modules/graph-gl/src/layers/node-layers/label-layer.js
new file mode 100644
index 00000000..63e2e404
--- /dev/null
+++ b/modules/graph-gl/src/layers/node-layers/label-layer.js
@@ -0,0 +1,25 @@
+import {CompositeLayer} from '@deck.gl/core';
+import ZoomableTextLayer from '../../deckgl-layers/zoomable-text-layer';
+
+export default class LabelLayer extends CompositeLayer {
+ static layerName = 'LabelLayer';
+
+ renderLayers() {
+ const {data, getPosition, stylesheet, positionUpdateTrigger = 0} = this.props;
+
+ return [
+ new ZoomableTextLayer(
+ this.getSubLayerProps({
+ id: '__text-layer',
+ data,
+ getPosition,
+ ...stylesheet.getDeckGLAccessors(),
+ updateTriggers: {
+ ...stylesheet.getDeckGLUpdateTriggers(),
+ getPosition: positionUpdateTrigger
+ }
+ })
+ )
+ ];
+ }
+}
diff --git a/modules/graph-gl/src/layers/node-layers/rectangle-layer.js b/modules/graph-gl/src/layers/node-layers/rectangle-layer.js
new file mode 100644
index 00000000..02cc1e52
--- /dev/null
+++ b/modules/graph-gl/src/layers/node-layers/rectangle-layer.js
@@ -0,0 +1,53 @@
+import {CompositeLayer} from '@deck.gl/core';
+import {PolygonLayer, SolidPolygonLayer} from '@deck.gl/layers';
+
+const generateRectangle = (node, {getWidth, getHeight, getPosition}) => {
+ const pos = getPosition(node);
+ const width = typeof getWidth === 'function' ? getWidth(node) : getWidth;
+ const height = typeof getWidth === 'function' ? getHeight(node) : getHeight;
+ const halfWidth = width / 2;
+ const halfHeight = height / 2;
+ return [
+ [pos[0] - halfWidth, pos[1] - halfHeight],
+ [pos[0] - halfWidth, pos[1] + halfHeight],
+ [pos[0] + halfWidth, pos[1] + halfHeight],
+ [pos[0] + halfWidth, pos[1] - halfHeight]
+ ];
+};
+
+export default class RectangleLayer extends CompositeLayer {
+ static layerName = 'RectangleLayer';
+
+ renderLayers() {
+ const {data, getPosition, stylesheet, positionUpdateTrigger = 0} = this.props;
+
+ const getFillColor = stylesheet.getDeckGLAccessor('getFillColor');
+ const getLineWidth = stylesheet.getDeckGLAccessor('getLineWidth');
+
+ return [
+ new PolygonLayer(
+ this.getSubLayerProps({
+ id: '__polygon-layer',
+ data,
+ getPolygon: (node) =>
+ generateRectangle(node, {
+ getPosition,
+ getWidth: stylesheet.getDeckGLAccessor('getWidth'),
+ getHeight: stylesheet.getDeckGLAccessor('getHeight')
+ }),
+ filled: Boolean(getFillColor),
+ stroked: Boolean(getLineWidth),
+ ...stylesheet.getDeckGLAccessors(),
+ updateTriggers: {
+ getPolygon: [
+ positionUpdateTrigger,
+ stylesheet.getDeckGLAccessorUpdateTrigger('getWidth'),
+ stylesheet.getDeckGLAccessorUpdateTrigger('getHeight')
+ ],
+ ...stylesheet.getDeckGLUpdateTriggers()
+ }
+ })
+ )
+ ];
+ }
+}
diff --git a/modules/graph-gl/src/layers/node-layers/zoomable-marker-layer.js b/modules/graph-gl/src/layers/node-layers/zoomable-marker-layer.js
new file mode 100644
index 00000000..6540a25f
--- /dev/null
+++ b/modules/graph-gl/src/layers/node-layers/zoomable-marker-layer.js
@@ -0,0 +1,45 @@
+import {CompositeLayer} from '@deck.gl/core';
+import MarkerLayer from '../../deckgl-layers/marker-layer/index';
+
+export default class ZoomableMarkerLayer extends CompositeLayer {
+ static layerName = 'ZoomableMarkerLayer';
+
+ shouldUpdateState({props, changeFlags}) {
+ const {stylesheet} = this.props;
+ const scaleWithZoom = stylesheet.getDeckGLAccessor('scaleWithZoom');
+ if (!scaleWithZoom) {
+ return changeFlags.somethingChanged;
+ }
+ return changeFlags.somethingChanged || changeFlags.viewportChanged;
+ }
+
+ renderLayers() {
+ const {data, getPosition, stylesheet, positionUpdateTrigger = 0} = this.props;
+
+ const getSize = stylesheet.getDeckGLAccessor('getSize');
+ const scaleWithZoom = stylesheet.getDeckGLAccessor('scaleWithZoom');
+ const sizeUpdateTrigger = scaleWithZoom ? [getSize, this.context.viewport.zoom] : false;
+ const oiginalGetMarker = stylesheet.getDeckGLAccessor('getMarker');
+ // getMarker only expects function not plain value (string)
+ const getMarker =
+ typeof oiginalGetMarker === 'function' ? oiginalGetMarker : () => oiginalGetMarker;
+
+ return [
+ new MarkerLayer(
+ this.getSubLayerProps({
+ id: 'zoomable-marker-layer',
+ data,
+ getPosition,
+ sizeScale: scaleWithZoom ? Math.max(0, this.context.viewport.zoom) : 1,
+ ...stylesheet.getDeckGLAccessors(),
+ getMarker,
+ updateTriggers: {
+ ...stylesheet.getDeckGLUpdateTriggers(),
+ getPosition: positionUpdateTrigger,
+ getSize: sizeUpdateTrigger
+ }
+ })
+ )
+ ];
+ }
+}
diff --git a/modules/graph-gl/src/layers/style/style-property.js b/modules/graph-gl/src/layers/style/style-property.js
new file mode 100644
index 00000000..d04de673
--- /dev/null
+++ b/modules/graph-gl/src/layers/style/style-property.js
@@ -0,0 +1,214 @@
+import Color from 'color';
+import {log} from '../../utils/log';
+
+/* Utils for type check */
+function getColor(value) {
+ if (typeof value === 'string') {
+ try {
+ const color = Color.rgb(value).array();
+ if (Number.isFinite(color[3])) {
+ color[3] *= 255;
+ }
+ return color;
+ } catch (error) {
+ return [0, 0, 0];
+ }
+ }
+ if (Array.isArray(value) && Number.isFinite(value[0])) {
+ return value;
+ }
+ return [0, 0, 0];
+}
+
+function getNumber(value) {
+ switch (typeof value) {
+ case 'string':
+ value = Number(value);
+ return isNaN(value) ? null : value;
+
+ case 'number':
+ return value;
+
+ default:
+ return null;
+ }
+}
+
+function getBool(value) {
+ switch (typeof value) {
+ case 'boolean':
+ return value;
+
+ case 'string':
+ return value.toLowerCase() !== 'false';
+
+ case 'number':
+ return Boolean(value);
+
+ default:
+ return null;
+ }
+}
+
+function getOffset(value) {
+ if (typeof value === 'function') {
+ return value;
+ }
+
+ if (!Array.isArray(value) || value.length !== 2) {
+ return null;
+ }
+ return value.map(getNumber);
+}
+
+const IDENTITY = (x) => x;
+const PROPERTY_FORMATTERS = {
+ opacity: getNumber,
+ zIndex: getNumber,
+
+ width: getNumber,
+ height: getNumber,
+ radius: getNumber,
+
+ fill: getColor,
+ stroke: getColor,
+ strokeWidth: getNumber,
+
+ // for marker
+ marker: String,
+ size: getNumber,
+
+ // text
+ color: getColor,
+ text: String,
+ fontSize: getNumber,
+ textAnchor: String,
+ alignmentBaseline: String,
+ angle: getNumber,
+
+ // edges
+ speed: getNumber,
+ tailLength: getNumber,
+
+ offset: getOffset,
+ scaleWithZoom: getBool
+};
+
+const DEFAULT_STYLES = {
+ opacity: 1,
+ zIndex: 0,
+
+ width: 0,
+ height: 0,
+ radius: 1,
+
+ fill: [0, 0, 0],
+ stroke: [0, 0, 0],
+ strokeWidth: 0,
+
+ marker: 'circle',
+ size: 12,
+
+ color: [0, 0, 0],
+ text: '',
+ fontSize: 12,
+ textAnchor: 'middle',
+ alignmentBaseline: 'center',
+ angle: 0,
+
+ speed: 0,
+ tailLength: 1,
+
+ offset: null,
+ scaleWithZoom: true
+};
+
+// code generation: generate a function as a layer accessor
+function generateAccessor(key, value) {
+ const formatter = PROPERTY_FORMATTERS[key] || IDENTITY;
+ // ex: key = 'fill', value = {defaut: 'red', hover: 'blue'}
+ // valueMap => {defaut: [255, 0, 0], hover: [0, 0, 255]}
+ const valueMap = Object.keys(value).reduce((res, key) => {
+ res[key] = value[key];
+ return res;
+ }, {});
+
+ return (node) => {
+ const statefulValue = valueMap[node.state];
+ if (!node.state || typeof statefulValue === 'undefined') {
+ return valueMap['default'] || DEFAULT_STYLES[key];
+ }
+ // else has stateful value
+ // check if the value is a function
+ if (typeof statefulValue === 'function') {
+ return formatter(statefulValue(node));
+ }
+ // or just a plain value
+ return formatter(statefulValue);
+ };
+}
+
+const VALUE_TYPE = {
+ ACCESSOR: 'ACCESSOR',
+ PLAIN_VALUE: 'PLAIN_VALUE'
+};
+
+export default class StyleProperty {
+ // for getting default style
+ static getDefault(key) {
+ return DEFAULT_STYLES[key];
+ }
+
+ // pass the key and value of the property
+ // and format the value properly.
+ constructor({key, value, updateTrigger}) {
+ this.key = key;
+ this._updateTrigger = false;
+
+ // statefule property, ex:
+ // fill: {default: 'red', hover: 'blue'}
+ // note that offset: [0, 1], the type of array is object, too.
+ if (typeof value === 'object' && !Array.isArray(value)) {
+ // generate accessor function
+ this._value = generateAccessor(key, value);
+ this._valueType = VALUE_TYPE.ACCESSOR;
+ this._updateTrigger = updateTrigger;
+ }
+ // default state property, but value = accessor
+ // fill: () => 'red'
+ else if (typeof value === 'function') {
+ const formatter = PROPERTY_FORMATTERS[key] || IDENTITY;
+ // the output of the function should be formated by
+ // the corresponding formatter again.
+ // Ex: colorAccessor might return '#f00', which needs to
+ // be formated as [255, 0, 0];
+ this._value = (d) => formatter(value(d));
+ this._valueType = VALUE_TYPE.ACCESSOR;
+ this._updateTrigger = value;
+ }
+ // default state property with plain value:
+ // fill: 'red'
+ else {
+ // format the value properly
+ const formatter = PROPERTY_FORMATTERS[key] || IDENTITY;
+ this._value = formatter(value);
+ this._valueType = VALUE_TYPE.PLAIN_VALUE;
+ this._updateTrigger = false;
+ }
+
+ // sanity check
+ if (this._value === null) {
+ log.warn(`Invalid ${key} value: ${value}`)();
+ throw new Error(`Invalid ${key} value: ${value}`);
+ }
+ }
+
+ // get the formatted value
+ getValue() {
+ return this._value;
+ }
+
+ getUpdateTrigger() {
+ return this._updateTrigger;
+ }
+}
diff --git a/modules/graph-gl/src/layers/style/style-sheet.js b/modules/graph-gl/src/layers/style/style-sheet.js
new file mode 100644
index 00000000..05cb116e
--- /dev/null
+++ b/modules/graph-gl/src/layers/style/style-sheet.js
@@ -0,0 +1,232 @@
+import StyleProperty from './style-property';
+
+import {NODE_TYPE, EDGE_DECORATOR_TYPE} from '../../index';
+import {log} from '../../utils/log';
+
+const COMMON_DECKGL_PROPS = {
+ getOffset: 'offset',
+ opacity: 'opacity'
+};
+
+const DECKGL_ACCESSOR_MAP = {
+ [NODE_TYPE.CIRCLE]: {
+ ...COMMON_DECKGL_PROPS,
+ getFillColor: 'fill',
+ getLineColor: 'stroke',
+ getLineWidth: 'strokeWidth',
+ getRadius: 'radius'
+ },
+
+ [NODE_TYPE.RECTANGLE]: {
+ ...COMMON_DECKGL_PROPS,
+ getWidth: 'width',
+ getHeight: 'height',
+ getFillColor: 'fill',
+ getLineColor: 'stroke',
+ getLineWidth: 'strokeWidth'
+ },
+
+ [NODE_TYPE.LABEL]: {
+ ...COMMON_DECKGL_PROPS,
+ getColor: 'color',
+ getText: 'text',
+ getSize: 'fontSize',
+ getTextAnchor: 'textAnchor',
+ getAlignmentBaseline: 'alignmentBaseline',
+ getAngle: 'angle',
+ scaleWithZoom: 'scaleWithZoom'
+ },
+
+ [NODE_TYPE.MARKER]: {
+ ...COMMON_DECKGL_PROPS,
+ getColor: 'fill',
+ getSize: 'size',
+ getMarker: 'marker',
+ scaleWithZoom: 'scaleWithZoom'
+ },
+
+ // --------- Edge related ---------
+ Edge: {
+ getColor: 'stroke',
+ getWidth: 'strokeWidth'
+ },
+ [EDGE_DECORATOR_TYPE.LABEL]: {
+ getColor: 'color',
+ getText: 'text',
+ getSize: 'fontSize',
+ getTextAnchor: 'textAnchor',
+ getAlignmentBaseline: 'alignmentBaseline',
+ scaleWithZoom: 'scaleWithZoom'
+ },
+ [EDGE_DECORATOR_TYPE.FLOW]: {
+ getColor: 'color',
+ getWidth: 'width',
+ getSpeed: 'speed',
+ getTailLength: 'tailLength'
+ }
+};
+
+const DECKGL_UPDATE_TRIGGERS = {
+ [NODE_TYPE.CIRCLE]: ['getFillColor', 'getRadius', 'getLineColor', 'getLineWidth'],
+ [NODE_TYPE.RECTANGLE]: ['getFillColor', 'getLineColor', 'getLineWidth'],
+ [NODE_TYPE.LABEL]: [
+ 'getColor',
+ 'getText',
+ 'getSize',
+ 'getTextAnchor',
+ 'getAlignmentBaseline',
+ 'getAngle'
+ ],
+ [NODE_TYPE.MARKER]: ['getColor', 'getSize', 'getMarker'],
+ Edge: ['getColor', 'getWidth'],
+ [EDGE_DECORATOR_TYPE.LABEL]: [
+ 'getColor',
+ 'getText',
+ 'getSize',
+ 'getTextAnchor',
+ 'getAlignmentBaseline'
+ ],
+ [EDGE_DECORATOR_TYPE.FLOW]: ['getColor', 'getWidth', 'getSpeed', 'getTailLength']
+};
+
+export default class Stylesheet {
+ constructor(style, updateTriggers) {
+ const {type: layerType, ...restStyle} = style;
+ if (!layerType || !(layerType in DECKGL_ACCESSOR_MAP)) {
+ throw new Error(`illegal type: ${layerType}`);
+ }
+ this.type = layerType;
+
+ // style = {
+ // type: 'circle',
+ // fill: 'red'
+ // radius: 5,
+ //
+ // ':hover': {
+ // fill: 'blue',
+ // stroke: 'red'
+ // }
+ // };
+ // step 1: extract 'rules': default, hover
+ // default: {fill: 'red', radius: 5};
+ // hover: {fill: 'blue', stroke: 'red'};
+ const rules = Object.keys(restStyle).reduce(
+ (res, key) => {
+ const isSelector = key.startsWith(':');
+ if (isSelector) {
+ const state = key.substring(1);
+ res[state] = restStyle[key];
+ return res;
+ }
+ res.default[key] = restStyle[key];
+ return res;
+ },
+ {
+ default: {}
+ }
+ );
+
+ // step 2: extract all unique attributes from rules
+ // attributes: ['fill', 'radius', 'stroke']
+ const attributes = Object.values(rules).reduce((res, rule) => {
+ const attrs = Object.keys(rule);
+ const set = new Set([...res, ...attrs]);
+ return Array.from(set);
+ }, []);
+ // step 3: create a attribute map as:
+ // attrMap = {
+ // fill: {default: 'red', hover: 'blue'},
+ // radius: {default: 5},
+ // stroke: {hover: 'red'},
+ // }
+ const attrMap = attributes.reduce((res, attr) => {
+ res[attr] = Object.entries(rules).reduce((acc, entry) => {
+ const [state, rule] = entry;
+ if (typeof rule[attr] !== 'undefined') {
+ acc[state] = rule[attr];
+ }
+ return acc;
+ }, {});
+ return res;
+ }, {});
+
+ // step 4: simplify the attribute map if only default exists for the attribute
+ // simplifiedStyleMap = {
+ // fill: {default: 'red', hover: 'blue'},
+ // radius: 5,
+ // stroke: {hover: 'red'},
+ // }
+ const simplifiedStyleMap = Object.entries(attrMap).reduce((res, entry) => {
+ const [attr, valueMap] = entry;
+ const onlyDefault = Object.keys(valueMap).length === 1 && valueMap.default !== undefined;
+ if (onlyDefault) {
+ res[attr] = valueMap.default;
+ return res;
+ }
+ res[attr] = valueMap;
+ return res;
+ }, {});
+
+ // step 5: create style property
+ // if the propety only maps to default state => return value only
+ // if the property maps to other states => return accessor function
+
+ // start to parse properties
+ this.properties = {};
+ for (const key in simplifiedStyleMap) {
+ this.properties[key] = new StyleProperty({
+ key,
+ value: simplifiedStyleMap[key],
+ updateTrigger: updateTriggers.stateUpdateTrigger
+ });
+ }
+ }
+
+ _getProperty(deckglAccessor) {
+ const map = DECKGL_ACCESSOR_MAP[this.type];
+ if (!map) {
+ throw new Error(`illegal type: ${this.type}`);
+ }
+ const styleProp = map[deckglAccessor];
+ if (!styleProp) {
+ log.error(`Invalid DeckGL accessor: ${deckglAccessor}`)();
+ throw new Error(`Invalid DeckGL accessor: ${deckglAccessor}`);
+ }
+ return this.properties[styleProp];
+ }
+
+ getDeckGLAccessor(deckglAccessor) {
+ const property = this._getProperty(deckglAccessor);
+ // get the value
+ if (property) {
+ return property.getValue();
+ }
+ // return default value
+ const styleProp = DECKGL_ACCESSOR_MAP[this.type][deckglAccessor];
+ return StyleProperty.getDefault(styleProp);
+ }
+
+ getDeckGLAccessorUpdateTrigger(deckglAccessor) {
+ const property = this._getProperty(deckglAccessor);
+ // get the value
+ if (property) {
+ return property.getUpdateTrigger();
+ }
+ return false;
+ }
+
+ getDeckGLAccessors() {
+ const accessorMap = DECKGL_ACCESSOR_MAP[this.type];
+ return Object.keys(accessorMap).reduce((res, accessor) => {
+ res[accessor] = this.getDeckGLAccessor(accessor);
+ return res;
+ }, {});
+ }
+
+ getDeckGLUpdateTriggers() {
+ return DECKGL_UPDATE_TRIGGERS[this.type].reduce((res, accessor) => {
+ res[accessor] = this.getDeckGLAccessorUpdateTrigger(accessor);
+ return res;
+ }, {});
+ }
+}
diff --git a/modules/graph-gl/src/layouts/d3-force/index.js b/modules/graph-gl/src/layouts/d3-force/index.js
new file mode 100644
index 00000000..931eb0bd
--- /dev/null
+++ b/modules/graph-gl/src/layouts/d3-force/index.js
@@ -0,0 +1,200 @@
+import BaseLayout from '../../core/base-layout';
+
+import {forceLink, forceSimulation, forceManyBody, forceCenter, forceCollide} from 'd3-force';
+
+import {EDGE_TYPE} from '../../index';
+
+const defaultOptions = {
+ alpha: 0.3,
+ resumeAlpha: 0.1,
+ nBodyStrength: -900,
+ nBodyDistanceMin: 100,
+ nBodyDistanceMax: 400,
+ getCollisionRadius: (d) => d.collisionRadius
+};
+
+export default class D3ForceLayout extends BaseLayout {
+ constructor(options) {
+ super(options);
+ this._name = 'D3';
+ this._options = {
+ ...defaultOptions,
+ ...options
+ };
+ // store graph and prepare internal data
+ this._d3Graph = {nodes: [], edges: []};
+ this._nodeMap = {};
+ this._edgeMap = {};
+ }
+
+ initializeGraph(graph) {
+ this._graph = graph;
+ this._nodeMap = {};
+ this._edgeMap = {};
+ // nodes
+ const d3Nodes = graph.getNodes().map((node) => {
+ const id = node.id;
+ const locked = node.getPropertyValue('locked') || false;
+ const x = node.getPropertyValue('x') || 0;
+ const y = node.getPropertyValue('y') || 0;
+ const collisionRadius = node.getPropertyValue('collisionRadius') || 0;
+ const d3Node = {
+ id,
+ x,
+ y,
+ fx: locked ? x : null,
+ fy: locked ? y : null,
+ collisionRadius
+ };
+ this._nodeMap[node.id] = d3Node;
+ return d3Node;
+ });
+ // edges
+ const d3Edges = graph.getEdges().map((edge) => {
+ const d3Edge = {
+ id: edge.id,
+ source: this._nodeMap[edge.getSourceNodeId()],
+ target: this._nodeMap[edge.getTargetNodeId()]
+ };
+ this._edgeMap[edge.id] = d3Edge;
+ return d3Edge;
+ });
+ this._d3Graph = {
+ nodes: d3Nodes,
+ edges: d3Edges
+ };
+ }
+
+ _generateSimulator() {
+ if (this._simulator) {
+ this._simulator.on('tick', null).on('end', null);
+ this._simulator = null;
+ }
+ const {alpha, nBodyStrength, nBodyDistanceMin, nBodyDistanceMax, getCollisionRadius} =
+ this._options;
+
+ const g = this._d3Graph;
+ this._simulator = forceSimulation(g.nodes)
+ .force(
+ 'edge',
+ forceLink(g.edges).id((n) => n.id)
+ )
+ .force(
+ 'charge',
+ forceManyBody()
+ .strength(nBodyStrength)
+ .distanceMin(nBodyDistanceMin)
+ .distanceMax(nBodyDistanceMax)
+ )
+ .force('center', forceCenter())
+ .force('collision', forceCollide().radius(getCollisionRadius))
+ .alpha(alpha);
+ // register event callbacks
+ this._simulator
+ .on('tick', this._callbacks.onLayoutChange)
+ .on('end', this._callbacks.onLayoutDone);
+ }
+
+ start() {
+ this._generateSimulator();
+ this._simulator.restart();
+ }
+
+ resume() {
+ const {resumeAlpha} = this._options;
+ this._simulator.alpha(resumeAlpha).restart();
+ }
+
+ stop() {
+ this._simulator.stop();
+ }
+
+ // for steaming new data on the same graph
+ updateGraph(graph) {
+ if (this._graph.getGraphName() !== graph.getGraphName()) {
+ // reset the maps
+ this._nodeMap = {};
+ this._edgeMap = {};
+ }
+ this._graph = graph;
+ // update internal layout data
+ // nodes
+ const newNodeMap = {};
+ const newD3Nodes = graph.getNodes().map((node) => {
+ const id = node.id;
+ const locked = node.getPropertyValue('locked') || false;
+ const x = node.getPropertyValue('x') || 0;
+ const y = node.getPropertyValue('y') || 0;
+ const fx = locked ? x : null;
+ const fy = locked ? y : null;
+ const collisionRadius = node.getPropertyValue('collisionRadius') || 0;
+
+ const oldD3Node = this._nodeMap[node.id];
+ const newD3Node = oldD3Node ? oldD3Node : {id, x, y, fx, fy, collisionRadius};
+ newNodeMap[node.id] = newD3Node;
+ return newD3Node;
+ });
+ this._nodeMap = newNodeMap;
+ this._d3Graph.nodes = newD3Nodes;
+ // edges
+ const newEdgeMap = {};
+ const newD3Edges = graph.getEdges().map((edge) => {
+ const oldD3Edge = this._edgeMap[edge.id];
+ const newD3Edge = oldD3Edge
+ ? oldD3Edge
+ : {
+ id: edge.id,
+ source: newNodeMap[edge.getSourceNodeId()],
+ target: newNodeMap[edge.getTargetNodeId()]
+ };
+ newEdgeMap[edge.id] = newD3Edge;
+ return newD3Edge;
+ });
+ this._edgeMap = newEdgeMap;
+ this._d3Graph.edges = newD3Edges;
+ }
+
+ getNodePosition = (node) => {
+ const d3Node = this._nodeMap[node.id];
+ if (d3Node) {
+ return [d3Node.x, d3Node.y];
+ }
+ return [0, 0];
+ };
+
+ getEdgePosition = (edge) => {
+ const d3Edge = this._edgeMap[edge.id];
+ const sourcePosition = d3Edge && d3Edge.source;
+ const targetPosition = d3Edge && d3Edge.target;
+ if (d3Edge && sourcePosition && targetPosition) {
+ return {
+ type: EDGE_TYPE.LINE,
+ sourcePosition: [sourcePosition.x, sourcePosition.y],
+ targetPosition: [targetPosition.x, targetPosition.y],
+ controlPoints: []
+ };
+ }
+ return {
+ type: EDGE_TYPE.LINE,
+ sourcePosition: [0, 0],
+ targetPosition: [0, 0],
+ controlPoints: []
+ };
+ };
+
+ lockNodePosition = (node, x, y) => {
+ const d3Node = this._nodeMap[node.id];
+ d3Node.x = x;
+ d3Node.y = y;
+ d3Node.fx = x;
+ d3Node.fy = y;
+ this._callbacks.onLayoutChange();
+ this._callbacks.onLayoutDone();
+ };
+
+ unlockNodePosition = (node) => {
+ const d3Node = this._nodeMap[node.id];
+ d3Node.fx = null;
+ d3Node.fy = null;
+ };
+}
diff --git a/modules/graph-gl/src/layouts/simple-layout/index.js b/modules/graph-gl/src/layouts/simple-layout/index.js
new file mode 100644
index 00000000..faad8546
--- /dev/null
+++ b/modules/graph-gl/src/layouts/simple-layout/index.js
@@ -0,0 +1,71 @@
+import BaseLayout from '../../core/base-layout';
+import {EDGE_TYPE} from '../../index';
+
+const defaultOptions = {
+ nodePositionAccessor: (node) => [node.getPropertyValue('x'), node.getPropertyValue('y')]
+};
+
+export default class SimpleLayout extends BaseLayout {
+ constructor(options) {
+ super(options);
+ this._name = 'SimpleLayout';
+ this._options = {
+ ...defaultOptions,
+ ...options
+ };
+ this._graph = null;
+ this._nodePositionMap = {};
+ }
+
+ initializeGraph(graph) {
+ this.updateGraph(graph);
+ }
+
+ _notifyLayoutComplete() {
+ this._callbacks.onLayoutChange();
+ this._callbacks.onLayoutDone();
+ }
+
+ start() {
+ this._notifyLayoutComplete();
+ }
+
+ resume() {
+ this._notifyLayoutComplete();
+ }
+
+ updateGraph(graph) {
+ this._graph = graph;
+ this._nodeMap = graph.getNodes().reduce((res, node) => {
+ res[node.getId()] = node;
+ return res;
+ }, {});
+ this._nodePositionMap = graph.getNodes().reduce((res, node) => {
+ res[node.getId()] = this._options.nodePositionAccessor(node);
+ return res;
+ }, {});
+ }
+
+ setNodePositionAccessor = (accessor) => {
+ this._options.nodePositionAccessor = accessor;
+ };
+
+ getNodePosition = (node) => this._nodePositionMap[node.getId()];
+
+ getEdgePosition = (edge) => {
+ const sourcePos = this._nodePositionMap[edge.getSourceNodeId()];
+ const targetPos = this._nodePositionMap[edge.getTargetNodeId()];
+ return {
+ type: EDGE_TYPE.LINE,
+ sourcePosition: sourcePos,
+ targetPosition: targetPos,
+ controlPoints: []
+ };
+ };
+
+ lockNodePosition = (node, x, y) => {
+ this._nodePositionMap[node.getId()] = [x, y];
+ this._callbacks.onLayoutChange();
+ this._callbacks.onLayoutDone();
+ };
+}
diff --git a/modules/graph-gl/src/loaders/__tests__/edge-parsers.spec.js b/modules/graph-gl/src/loaders/__tests__/edge-parsers.spec.js
new file mode 100644
index 00000000..9110aaff
--- /dev/null
+++ b/modules/graph-gl/src/loaders/__tests__/edge-parsers.spec.js
@@ -0,0 +1,13 @@
+import SAMPLE_EDGE from '../../core/__tests__/__fixtures__/edge.json';
+import {basicEdgeParser} from '../edge-parsers';
+
+describe('loaders/edge-parsers', () => {
+ it('should pass sanity', () => {
+ expect(basicEdgeParser(SAMPLE_EDGE)).toMatchObject({
+ id: 'edge1',
+ sourceId: 'node1',
+ targetId: 'node2',
+ directed: false
+ });
+ });
+});
diff --git a/modules/graph-gl/src/loaders/__tests__/json-loader.spec.js b/modules/graph-gl/src/loaders/__tests__/json-loader.spec.js
new file mode 100644
index 00000000..b6a5a463
--- /dev/null
+++ b/modules/graph-gl/src/loaders/__tests__/json-loader.spec.js
@@ -0,0 +1,34 @@
+import SAMPLE_GRAPH1 from '../../core/__tests__/__fixtures__/graph1.json';
+import SAMPLE_GRAPH2 from '../../core/__tests__/__fixtures__/graph2.json';
+import JSONLoader from '../json-loader';
+
+describe('loaders/node-parsers', () => {
+ it('should work with default parsers', () => {
+ const graph = JSONLoader({json: SAMPLE_GRAPH1});
+ expect(graph.getEdges().map((e) => e.getId())).toEqual(
+ expect.arrayContaining(SAMPLE_GRAPH1.edges.map((e) => e.id))
+ );
+ expect(graph.getNodes().map((n) => n.getId())).toEqual(
+ expect.arrayContaining(SAMPLE_GRAPH1.nodes.map((n) => n.id))
+ );
+ });
+
+ it('should work with custom parsers', () => {
+ const graph = JSONLoader({
+ json: SAMPLE_GRAPH2,
+ nodeParser: (node) => ({id: node.name}),
+ edgeParser: (edge) => ({
+ id: edge.name,
+ directed: false,
+ sourceId: edge.source,
+ targetId: edge.target
+ })
+ });
+ expect(graph.getEdges().map((n) => n.getId())).toEqual(
+ expect.arrayContaining(SAMPLE_GRAPH2.edges.map((e) => e.name))
+ );
+ expect(graph.getNodes().map((n) => n.getId())).toEqual(
+ expect.arrayContaining(SAMPLE_GRAPH2.nodes.map((n) => n.name))
+ );
+ });
+});
diff --git a/modules/graph-gl/src/loaders/__tests__/node-parsers.spec.js b/modules/graph-gl/src/loaders/__tests__/node-parsers.spec.js
new file mode 100644
index 00000000..d6352e8b
--- /dev/null
+++ b/modules/graph-gl/src/loaders/__tests__/node-parsers.spec.js
@@ -0,0 +1,10 @@
+import SAMPLE_NODE from '../../core/__tests__/__fixtures__/node.json';
+import {basicNodeParser} from '../node-parsers';
+
+describe('loaders/node-parsers', () => {
+ it('should pass sanity', () => {
+ expect(basicNodeParser(SAMPLE_NODE)).toMatchObject({
+ id: 'node1'
+ });
+ });
+});
diff --git a/modules/graph-gl/src/loaders/edge-parsers.js b/modules/graph-gl/src/loaders/edge-parsers.js
new file mode 100644
index 00000000..9df8662f
--- /dev/null
+++ b/modules/graph-gl/src/loaders/edge-parsers.js
@@ -0,0 +1,17 @@
+import {log} from '../utils/log';
+
+export function basicEdgeParser(edge) {
+ const {id, directed, sourceId, targetId} = edge;
+
+ if (sourceId === undefined || targetId === undefined) {
+ log.error('Invalid edge: sourceId or targetId is missing.')();
+ return null;
+ }
+
+ return {
+ id,
+ directed: directed || false,
+ sourceId,
+ targetId
+ };
+}
diff --git a/modules/graph-gl/src/loaders/json-loader.js b/modules/graph-gl/src/loaders/json-loader.js
new file mode 100644
index 00000000..9ea7f4ce
--- /dev/null
+++ b/modules/graph-gl/src/loaders/json-loader.js
@@ -0,0 +1,17 @@
+import {createGraph} from '../index';
+import {basicNodeParser} from './node-parsers';
+import {basicEdgeParser} from './edge-parsers';
+import {log} from '../utils/log';
+
+const JSONLoader = ({json, nodeParser = basicNodeParser, edgeParser = basicEdgeParser}) => {
+ const {name = 'default', nodes, edges} = json;
+ if (!nodes) {
+ log.error('Invalid graph: nodes is missing.')();
+ return null;
+ }
+
+ const graph = createGraph({name, nodes, edges, nodeParser, edgeParser});
+ return graph;
+};
+
+export default JSONLoader;
diff --git a/modules/graph-gl/src/loaders/node-parsers.js b/modules/graph-gl/src/loaders/node-parsers.js
new file mode 100644
index 00000000..0abcbeba
--- /dev/null
+++ b/modules/graph-gl/src/loaders/node-parsers.js
@@ -0,0 +1,9 @@
+import {log} from '../utils/log';
+
+export function basicNodeParser(node) {
+ if (node.id === undefined) {
+ log.error('Invalid node: id is missing.')();
+ return null;
+ }
+ return {id: node.id};
+}
diff --git a/modules/graph-gl/src/utils/__tests__/__fixtures__/graph.json b/modules/graph-gl/src/utils/__tests__/__fixtures__/graph.json
new file mode 100644
index 00000000..34aea071
--- /dev/null
+++ b/modules/graph-gl/src/utils/__tests__/__fixtures__/graph.json
@@ -0,0 +1,15 @@
+{
+ "nodes": [
+ {"name": "Thenardier", "x": -100, "y": 100},
+ {"name": "Cosette", "x": 100, "y": 100},
+ {"name": "Javert", "x": 100, "y": -100},
+ {"name": "Fantine", "x": -100, "y": -100}
+ ],
+ "edges": [
+ {"name": "1", "source": "Thenardier", "target": "Fantine"},
+ {"name": "2", "source": "Cosette", "target": "Thenardier"},
+ {"name": "3", "source": "Javert", "target": "Fantine"},
+ {"name": "4", "source": "Javert", "target": "Thenardier"},
+ {"name": "5", "source": "Javert", "target": "Cosette"}
+ ]
+}
diff --git a/modules/graph-gl/src/utils/__tests__/create-graph.spec.js b/modules/graph-gl/src/utils/__tests__/create-graph.spec.js
new file mode 100644
index 00000000..d33749d3
--- /dev/null
+++ b/modules/graph-gl/src/utils/__tests__/create-graph.spec.js
@@ -0,0 +1,23 @@
+import SAMPLE_GRAPH from './__fixtures__/graph';
+import createGraph from '../create-graph';
+
+describe('util/create-graph', () => {
+ it('test createGraph with custom parsers', () => {
+ const graph = createGraph({
+ nodes: SAMPLE_GRAPH.nodes,
+ edges: SAMPLE_GRAPH.edges,
+ nodeParser: (node) => ({id: node.name}),
+ edgeParser: (edge) => ({
+ id: edge.name,
+ directed: false,
+ sourceId: edge.source,
+ targetId: edge.target
+ })
+ });
+ const nodeIds = graph.getNodes().map((n) => n.getId());
+ expect(SAMPLE_GRAPH.nodes.map((n) => n.name)).toEqual(expect.arrayContaining(nodeIds));
+
+ const edgeIds = graph.getEdges().map((e) => e.getId());
+ expect(SAMPLE_GRAPH.edges.map((n) => n.name)).toEqual(expect.arrayContaining(edgeIds));
+ });
+});
diff --git a/modules/graph-gl/src/utils/create-graph.js b/modules/graph-gl/src/utils/create-graph.js
new file mode 100644
index 00000000..73ff4b38
--- /dev/null
+++ b/modules/graph-gl/src/utils/create-graph.js
@@ -0,0 +1,32 @@
+import {Edge, Node, Graph} from '../index';
+
+export default function createGraph({name, nodes, edges, nodeParser, edgeParser}) {
+ // create a new empty graph
+ const graph = new Graph();
+
+ const graphName = name || Date.now();
+ graph.setGraphName(graphName);
+
+ // add nodes
+ const glNodes = nodes.map((node) => {
+ const {id} = nodeParser(node);
+ return new Node({
+ id,
+ data: node
+ });
+ });
+ graph.batchAddNodes(glNodes);
+
+ const glEdges = edges.map((edge) => {
+ const {id, sourceId, targetId, directed} = edgeParser(edge);
+ return new Edge({
+ id,
+ sourceId,
+ targetId,
+ directed,
+ data: edge
+ });
+ });
+ graph.batchAddEdges(glEdges);
+ return graph;
+}
diff --git a/modules/graph-gl/src/utils/layer-utils.js b/modules/graph-gl/src/utils/layer-utils.js
new file mode 100644
index 00000000..7f355046
--- /dev/null
+++ b/modules/graph-gl/src/utils/layer-utils.js
@@ -0,0 +1,19 @@
+export const mixedGetPosition = (getPosition, getOffset) => {
+ if (!getOffset) {
+ return getPosition;
+ }
+
+ if (typeof getOffset === 'function') {
+ return (d) => {
+ const [x, y] = getPosition(d);
+ const [offX, offY] = getOffset(d);
+ return [x + offX, y + offY];
+ };
+ }
+
+ const [offX, offY] = getOffset;
+ return (d) => {
+ const [x, y] = getPosition(d);
+ return [x + offX, y + offY];
+ };
+};
diff --git a/modules/graph-gl/src/utils/log.js b/modules/graph-gl/src/utils/log.js
new file mode 100644
index 00000000..a6cf5b40
--- /dev/null
+++ b/modules/graph-gl/src/utils/log.js
@@ -0,0 +1,5 @@
+import {Log, COLOR} from 'probe.gl';
+
+export const log = new Log({id: 'react-graph-gl'}).enable();
+
+log.log({color: COLOR.CYAN}, 'Initialize react-graph-gl logger.')();
diff --git a/modules/graph-gl/test/utils/setup-tests.js b/modules/graph-gl/test/utils/setup-tests.js
new file mode 100644
index 00000000..aaaea8b4
--- /dev/null
+++ b/modules/graph-gl/test/utils/setup-tests.js
@@ -0,0 +1,2 @@
+// add some helpful assertions
+import '@testing-library/jest-dom/extend-expect';
diff --git a/modules/react-graph-gl/.babelrc b/modules/react-graph-gl/.babelrc
new file mode 100644
index 00000000..69ac263f
--- /dev/null
+++ b/modules/react-graph-gl/.babelrc
@@ -0,0 +1,21 @@
+{
+ "plugins": [
+ "@babel/plugin-proposal-class-properties"
+ ],
+ "presets": [
+ "@babel/preset-react",
+ [
+ "@babel/preset-env",
+ {
+ "useBuiltIns": "entry",
+ "corejs": "3.26.1"
+ }
+ ],
+ "@babel/preset-flow"
+ ],
+ "env": {
+ "test": {
+ "presets": [["@babel/preset-env"], "@babel/preset-react"]
+ }
+ }
+}
diff --git a/modules/react-graph-gl/.eslintrc b/modules/react-graph-gl/.eslintrc
new file mode 100644
index 00000000..1b205a05
--- /dev/null
+++ b/modules/react-graph-gl/.eslintrc
@@ -0,0 +1,22 @@
+{
+ "extends": [
+ "plugin:react/recommended",
+ "plugin:jest/recommended"
+ ],
+ "env": {
+ "jest": true,
+ "node": true
+ },
+ "settings": {
+ "react": {
+ "version" : "16.6.1"
+ }
+ },
+ "plugins": [
+ "eslint-plugin-react"
+ ],
+ "rules": {
+ "react/prop-types": 0,
+ "react/no-deprecated": 0
+ }
+}
diff --git a/modules/react-graph-gl/LICENSE b/modules/react-graph-gl/LICENSE
new file mode 100644
index 00000000..0ad87596
--- /dev/null
+++ b/modules/react-graph-gl/LICENSE
@@ -0,0 +1,20 @@
+Copyright (c) 2015 - 2021 Uber Technologies, Inc.
+Copyright (c) 2022 - 2023 react-graph-gl contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/modules/react-graph-gl/README.md b/modules/react-graph-gl/README.md
new file mode 100644
index 00000000..bbae6008
--- /dev/null
+++ b/modules/react-graph-gl/README.md
@@ -0,0 +1,118 @@
+
+
+
+
+# react-graph-gl
+
+## Abstract
+react-graph-gl is a React component for visualizing large graphs with several utility functions. It can build a highly customizable graph visualization through its composable API. The rendering is powered by deck.gl which is a WebGL based visualization framework. With react-graph-gl, users are enabled to build various type of graph/network applications with minimum efforts while having the capability to extend the existing styles and layouts.
+
+## Motivation
+Uber originally started this project as Graph.gl. After stopping efforts on Graph.gl, the OpenJS Foundation has resumed efforts.
+
+With react-graph-gl, developers are allowed to create graph visualization with minimum efforts while having the capability to override anything they want in the library.
+
+## Roadmap
+
+TBD, we've just started a reboot to update dependencies and modernize the codebase to reflect current React best practices.
+
+## Get Started
+```js
+import GraphGL, {
+ JSONLoader,
+ NODE_TYPE,
+ D3ForceLayout
+} from 'react-graph-gl';
+
+const App = ({data}) => {
+ const graph = JSONLoader({
+ json: data,
+ nodeParser: node => ({id: node.id}),
+ edgeParser: edge => ({
+ id: edge.id,
+ sourceId: edge.sourceId,
+ targetId: edge.targetId,
+ directed: true,
+ }),
+ });
+ return (
+
+ );
+}
+````
+
+
+## Setup Dev Environment
+
+#### Clone the repo:
+
+```
+git clone git@github.com:visgl/react-graph-gl.git
+```
+
+#### Install yarn
+
+```
+brew update
+brew install yarn
+```
+
+#### Install dependencies
+
+```
+yarn install
+```
+
+#### Local Development
+
+FIXME: storybook setup is currently broken and will be restored soon.
+
+You can write a story and open it in the storybook:
+```
+yarn storybook
+```
+Please create a new story in stories.js in one of the existing folder or make new folder if necessary.
+Each folder should have a readme file to explain what your story does.
+
+
+#### Testing
+
+```
+yarn test
+```
+
+To get coverage information, use:
+
+```
+yarn cover
+```
+
+#### Documentation
+
+You can add your documentation (markdown) in `docs/` folder and the new chapter in `docs/table-of-contents.json`.
+Open the local website:
+```
+yarn website
+```
+
+#### Contributing
+
+PRs and bug reports are welcome. Note that you once your PR is
+about to be merged, you will be asked to register as a contributor
+by filling in a short form.
diff --git a/modules/react-graph-gl/babel.config.js b/modules/react-graph-gl/babel.config.js
new file mode 100644
index 00000000..b7d31fc5
--- /dev/null
+++ b/modules/react-graph-gl/babel.config.js
@@ -0,0 +1 @@
+module.exports = {presets: ['@babel/preset-env']};
diff --git a/modules/react-graph-gl/jest.config.js b/modules/react-graph-gl/jest.config.js
new file mode 100644
index 00000000..6d819d92
--- /dev/null
+++ b/modules/react-graph-gl/jest.config.js
@@ -0,0 +1,12 @@
+export default {
+ roots: ['./src'],
+ collectCoverageFrom: ['./src/**/*.js'],
+ setupFilesAfterEnv: ['./test/utils/setup-tests.js'],
+ testEnvironment: 'jsdom',
+ transform: {
+ '^.+\\.(js|jsx)$': 'babel-jest'
+ },
+ moduleNameMapper: {
+ '^d3-(.*)': '/../../node_modules/d3-$1/dist/d3-$1.js'
+ }
+};
diff --git a/modules/react-graph-gl/package.json b/modules/react-graph-gl/package.json
new file mode 100644
index 00000000..511a38d4
--- /dev/null
+++ b/modules/react-graph-gl/package.json
@@ -0,0 +1,43 @@
+{
+ "name": "@deck.gl-community/react-graph-gl",
+ "version": "1.0.0",
+ "description": "WebGL2-Powered React Components for Graph Visualization",
+ "keywords": [
+ "graph",
+ "visualization",
+ "force-directed layout",
+ "gpu",
+ "deck.gl",
+ "react"
+ ],
+ "main": "dist/index.js",
+ "module": "dist/index.js",
+ "files": [
+ "dist",
+ "src"
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "@deck.gl-community/graph-gl": "^1.0.0",
+ "@deck.gl/core": "^8.8.26",
+ "@deck.gl/react": "^8.8.26",
+ "d3": "^7.8.2",
+ "d3-array": "^3.2.2",
+ "global": "^4.4.0",
+ "prop-types": "^15.8.1",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "styled-components": "^5.3.8"
+ },
+ "devDependencies": {
+ "@babel/preset-flow": "^7.18.6",
+ "@storybook/addon-knobs": "^6.4.0",
+ "@testing-library/jest-dom": "^5.16.5",
+ "@testing-library/react": "^13.4.0",
+ "babel-jest": "^29.4.3",
+ "eslint-plugin-jest": "^27.2.1",
+ "jest": "^29.2.2",
+ "jest-environment-jsdom": "^29.3.0",
+ "ngraph.generators": "^20.1.0"
+ }
+}
diff --git a/modules/react-graph-gl/scripts/install-pre-commit.sh b/modules/react-graph-gl/scripts/install-pre-commit.sh
new file mode 100755
index 00000000..8f4ced3c
--- /dev/null
+++ b/modules/react-graph-gl/scripts/install-pre-commit.sh
@@ -0,0 +1,3 @@
+#!/bin/sh
+cp 'scripts/pre-commit' '.git/hooks/pre-commit'
+echo "Installed!"
diff --git a/modules/react-graph-gl/scripts/pre-commit b/modules/react-graph-gl/scripts/pre-commit
new file mode 100755
index 00000000..8c028f6c
--- /dev/null
+++ b/modules/react-graph-gl/scripts/pre-commit
@@ -0,0 +1,6 @@
+#!/bin/sh
+jsfiles=$(git diff --cached --name-only --diff-filter=ACM | grep '\.jsx\?$' | tr '\n' ' ')
+[ -z "$jsfiles" ] && exit 0
+
+node_modules/.bin/prettier-eslint --write $jsfiles --eslint-config-path .eslintrc
+git add $jsfiles
diff --git a/modules/react-graph-gl/scripts/prettier-lint.sh b/modules/react-graph-gl/scripts/prettier-lint.sh
new file mode 100755
index 00000000..e8013b77
--- /dev/null
+++ b/modules/react-graph-gl/scripts/prettier-lint.sh
@@ -0,0 +1,15 @@
+#!/bin/sh
+
+# This script is only used in CI to verify that code is formatted with
+# prettier. For local use, install the commit hook. See the README for details.
+
+diffs=$(node_modules/.bin/prettier-eslint --write src/**/**/*.js website/**/**/*.js --eslint-config-path .eslintrc)
+[ -z "$diffs" ] && exit 0
+
+echo >&2 "Javascript files must be formatted with prettier."
+echo >&2 "Please install the commmit hook locally:"
+echo >&2 "./scripts/install-pre-commit.sh"
+echo >&2 "Alternatively, you can manually format the code with this command:"
+echo >&2 "node_modules/.bin/prettier-eslint --write "$diffs" --eslint-config-path .eslintrc.js"
+
+exit 1
diff --git a/modules/react-graph-gl/src/components/__tests__/long-press-button.spec.js b/modules/react-graph-gl/src/components/__tests__/long-press-button.spec.js
new file mode 100644
index 00000000..6ac8fdd6
--- /dev/null
+++ b/modules/react-graph-gl/src/components/__tests__/long-press-button.spec.js
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import {cleanup, fireEvent, render} from '@testing-library/react';
+import LongPressButton from '../../components/long-press-button.jsx';
+
+// NOTE: this line is important! It will clean up the jsdom properly.
+afterEach(cleanup);
+
+describe('LongPressButton', () => {
+ it('should record pressing ▲', () => {
+ const onClick = jest.fn();
+ const {getByText} = render({'▲'});
+ fireEvent.mouseDown(getByText('▲'));
+ expect(onClick).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/modules/react-graph-gl/src/components/__tests__/view-control.spec.js b/modules/react-graph-gl/src/components/__tests__/view-control.spec.js
new file mode 100644
index 00000000..6e2a5b8d
--- /dev/null
+++ b/modules/react-graph-gl/src/components/__tests__/view-control.spec.js
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {cleanup, fireEvent, render} from '@testing-library/react';
+import ViewControl from '../../components/view-control.jsx';
+
+// NOTE: this line is important! It will clean up the jsdom properly.
+afterEach(cleanup);
+
+describe('ViewControl', () => {
+ it('should pass sanity check for pan buttons presence', () => {
+ const {getByText} = render();
+ ['▲', '◀', '▶', '▼'].forEach((unicodeSymbol) => {
+ expect(getByText(unicodeSymbol)).toBeTruthy();
+ });
+ });
+
+ it('should record pressing ▲', () => {
+ const panBy = jest.fn();
+ const deltaPan = 11;
+ const {getByText} = render();
+ fireEvent.mouseDown(getByText('▲'));
+ expect(panBy).toHaveBeenCalledTimes(1);
+ });
+
+ it('should record pressing ¤ (recenter)', () => {
+ const fitBounds = jest.fn();
+ const {getByText} = render();
+ const reCenterButton = getByText('¤');
+ expect(reCenterButton).toBeDefined();
+ fireEvent.click(reCenterButton);
+ expect(fitBounds).toHaveBeenCalledTimes(1);
+ });
+
+ it('should record changes through verticalSlider', () => {
+ const zoomBy = jest.fn();
+ const {container} = render(
+
+ );
+ const verticalSlider = container.querySelector('input');
+ expect(verticalSlider).toBeTruthy();
+ fireEvent.change(verticalSlider, {target: {value: 8}});
+ expect(zoomBy).toHaveBeenLastCalledWith(7);
+ expect(zoomBy).toHaveBeenCalledTimes(1);
+ });
+
+ it('should record changes through clicking on the plus and minus button', () => {
+ const zoomBy = jest.fn();
+ const {container, getByText} = render(
+
+ );
+ const verticalSlider = container.querySelector('input');
+ const minusButton = getByText('-');
+ const plusButton = getByText('+');
+ expect(minusButton).toBeTruthy();
+ expect(plusButton).toBeTruthy();
+ expect(verticalSlider).toBeTruthy();
+ // Click minus once
+ fireEvent.mouseDown(minusButton);
+ expect(zoomBy).toHaveBeenLastCalledWith(-0.1);
+ // Click plus twice, this should reset the previous minus
+ fireEvent.mouseDown(plusButton);
+ fireEvent.mouseDown(plusButton);
+ expect(zoomBy).toHaveBeenLastCalledWith(0.1);
+ // 1 + 2 = 3 mousedowns in total, triggering 3 zoomBys.
+ expect(zoomBy).toHaveBeenCalledTimes(3);
+ });
+});
diff --git a/modules/react-graph-gl/src/components/long-press-button.jsx b/modules/react-graph-gl/src/components/long-press-button.jsx
new file mode 100644
index 00000000..6535ab4e
--- /dev/null
+++ b/modules/react-graph-gl/src/components/long-press-button.jsx
@@ -0,0 +1,30 @@
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import {window} from 'global';
+
+export default class LongPressButton extends PureComponent {
+ static propTypes = {
+ onClick: PropTypes.func.isRequired,
+ children: PropTypes.any.isRequired
+ };
+
+ // repeat onClick when long press
+ _repeat = () => {
+ this.props.onClick();
+ this.buttonPressTimer = window.setTimeout(this._repeat, 100);
+ };
+
+ // onMouseDown
+ _handleButtonPress = () => this._repeat();
+
+ // onMouseUp
+ _handleButtonRelease = () => window.clearTimeout(this.buttonPressTimer);
+
+ render() {
+ return (
+
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+