Add matrix and arc diagram

* matrix and arc options for networkFrame
* decorate generated lines/points with rIndex, oIndex, xIndex, yIndex, lineIndex where appropriate

Author: emeeks

src/components/NetworkFrame.js

@@ -30,9 +30,12 @@ import {
   drawEdges,
   topologicalSort,
   hierarchicalRectNodeGenerator,
+  matrixNodeGenerator,
   radialRectNodeGenerator,
   chordNodeGenerator,
   chordEdgeGenerator,
+  matrixEdgeGenerator,
+  arcEdgeGenerator,
   sankeyNodeGenerator,
   wordcloudNodeGenerator,
   circleNodeGenerator,
@@ -182,7 +185,7 @@ const customEdgeHashMutate = {
 }
 */
 
-function determineNodeIcon(baseCustomNodeIcon, networkSettings, size) {
+function determineNodeIcon(baseCustomNodeIcon, networkSettings, size, nodes) {
   if (baseCustomNodeIcon) return baseCustomNodeIcon
 
   const center = [size[0] / 2, size[1] / 2]
@@ -206,12 +209,14 @@ function determineNodeIcon(baseCustomNodeIcon, networkSettings, size) {
       return chordNodeGenerator(size)
     case "dagre":
       return hierarchicalRectNodeGenerator
+      case "matrix":
+      return matrixNodeGenerator(size, nodes, networkSettings)
   }
 
   return circleNodeGenerator
 }
 
-function determineEdgeIcon(baseCustomEdgeIcon, networkSettings, size, graph) {
+function determineEdgeIcon({ baseCustomEdgeIcon, networkSettings, size, graph, nodes }) {
   if (baseCustomEdgeIcon) return baseCustomEdgeIcon
   switch (networkSettings.type) {
     case "partition":
@@ -224,6 +229,10 @@ function determineEdgeIcon(baseCustomEdgeIcon, networkSettings, size, graph) {
       return () => null
     case "chord":
       return chordEdgeGenerator(size)
+    case "matrix":
+      return matrixEdgeGenerator(size, nodes)
+    case "arc":
+      return arcEdgeGenerator(size)
     case "dagre":
       if (graph) return dagreEdgeGenerator(graph.graph().rankdir)
   }
@@ -633,18 +642,6 @@ class NetworkFrame extends React.Component<Props, State> {
       margin
     })
 
-    const customNodeIcon = determineNodeIcon(
-      baseCustomNodeIcon,
-      networkSettings,
-      adjustedSize
-    )
-    const customEdgeIcon = determineEdgeIcon(
-      baseCustomEdgeIcon,
-      networkSettings,
-      adjustedSize,
-      graph
-    )
-
     networkSettings.graphSettings.nodes = nodes
     networkSettings.graphSettings.edges = edges
 
@@ -858,6 +855,22 @@ class NetworkFrame extends React.Component<Props, State> {
       })
     }
 
+    const customNodeIcon = determineNodeIcon(
+      baseCustomNodeIcon,
+      networkSettings,
+      adjustedSize,
+      projectedNodes
+    )
+
+    const customEdgeIcon = determineEdgeIcon(
+      { baseCustomEdgeIcon,
+      networkSettings,
+      size: adjustedSize,
+      nodes: projectedNodes,
+      graph }
+    )
+
+
     if (
       (networkSettings.type === "sankey" ||
         networkSettings.type === "flowchart") &&
@@ -1327,6 +1340,34 @@ class NetworkFrame extends React.Component<Props, State> {
             node.y = resetY(node.y)
           })
         })
+      } else if (networkSettings.type === "matrix") {
+
+        if (networkSettings.sort) {
+          projectedNodes = projectedNodes.sort(networkSettings.sort)
+        }
+
+        const gridSize = Math.min(...adjustedSize)
+
+        const stepSize = gridSize / (projectedNodes.length + 1)
+
+        projectedNodes.forEach((node, index) => {
+          node.x = 0
+          node.y = (index + 1)  * stepSize
+        })
+
+      }  else if (networkSettings.type === "arc") {
+
+        if (networkSettings.sort) {
+          projectedNodes = projectedNodes.sort(networkSettings.sort)
+        }
+
+        const stepSize = adjustedSize[0] / (projectedNodes.length + 2)
+
+        projectedNodes.forEach((node, index) => {
+          node.x = (index + 1) * stepSize
+          node.y = adjustedSize[1] / 2
+        })
+
       } else if (typeof networkSettings.type === "function") {
         networkSettings.type({
           nodes: projectedNodes,
@@ -1341,7 +1382,7 @@ class NetworkFrame extends React.Component<Props, State> {
 
       this.state.graphSettings.nodes = currentProps.nodes
       this.state.graphSettings.edges = currentProps.edges
-    }
+    } 
 
     //filter out user-defined nodes
     projectedNodes = projectedNodes.filter(filterRenderedNodes)
@@ -1383,6 +1424,7 @@ class NetworkFrame extends React.Component<Props, State> {
     }
     if (
       networkSettings.zoom !== false &&
+      networkSettings.type !== "matrix" &&
       networkSettings.type !== "wordcloud" &&
       networkSettings.type !== "chord" &&
       networkSettings.type !== "sankey" &&
@@ -1812,7 +1854,7 @@ class NetworkFrame extends React.Component<Props, State> {
       downloadFields,
       download,
       additionalDefs,
-      renderOrder
+      renderOrder = this.state.graphSettings && this.state.graphSettings.type === "matrix" ? [ "nodes", "edges" ] : ["edges", "nodes"]
     } = this.props
     const {
       backgroundGraphics,

src/components/data/dataFunctions.js

@@ -116,12 +116,12 @@ export const calculateDataExtent = ({
     projectedLines: Array<Object> = [],
     projectedAreas: Array<Object> = []
   if (points) {
-    xAccessor.forEach(actualXAccessor => {
-      yAccessor.forEach(actualYAccessor => {
+    xAccessor.forEach((actualXAccessor, xIndex) => {
+      yAccessor.forEach((actualYAccessor, yIndex) => {
         points.forEach((d, i) => {
           const x = actualXAccessor(d, i)
           const y = actualYAccessor(d, i)
-          const projectedPoint = { x, y, data: d }
+          const projectedPoint = { x, y, data: d, xIndex, yIndex }
           if (Array.isArray(y)) {
             projectedPoint[projectedYBottom] = Math.min(...y)
             projectedPoint[projectedYTop] = Math.max(...y)

src/components/svg/frameFunctions.js

@@ -217,15 +217,17 @@ export function keyAndObjectifyBarData({
   rAccessor: Array<Function> | Function
 }): Array<Object> {
   const decoratedData = []
-  oAccessor.forEach(actualOAccessor => {
-    rAccessor.forEach(actualRAccessor => {
+  oAccessor.forEach((actualOAccessor, oIndex) => {
+    rAccessor.forEach((actualRAccessor, rIndex) => {
       ;(data || []).forEach(d => {
         const appliedKey = renderKey(d, decoratedData.length)
         if (typeof d !== "object") {
           const expandedData = { value: d, renderKey: appliedKey }
           decoratedData.push({
             data: expandedData,
             value: actualRAccessor(expandedData),
+            rIndex,
+            oIndex,
             column:
               (appliedKey !== undefined &&
                 appliedKey.toString &&
@@ -237,6 +239,8 @@ export function keyAndObjectifyBarData({
           decoratedData.push({
             renderKey: appliedKey,
             data: d,
+            rIndex,
+            oIndex,
             value: actualRAccessor(d),
             column: actualOAccessor(d)
           })

src/components/svg/lineDrawing.js

@@ -119,11 +119,11 @@ export const projectLineData = ({
   }
   const projectedLine: Array<Object> = []
 
-  lineDataAccessor.forEach(actualLineAccessor => {
-    xAccessor.forEach(actualXAccessor => {
-      yAccessor.forEach(actualYAccessor => {
+  lineDataAccessor.forEach((actualLineAccessor, lineIndex) => {
+    xAccessor.forEach((actualXAccessor, xIndex) => {
+      yAccessor.forEach((actualYAccessor, yIndex) => {
         data.forEach((d: Object) => {
-          const originalLineData = { ...d }
+          const originalLineData = { ...d, xIndex, yIndex, lineIndex }
 
           originalLineData.data = actualLineAccessor(d).map((p, q) => {
             const originalCoords = {}