From f15ff5530721d267e014bd18ccac4b337c8092bb Mon Sep 17 00:00:00 2001
From: Jeff Raymakers <jephly@gmail.com>
Date: Wed, 24 Feb 2021 11:20:37 -0800
Subject: [PATCH] fix(network): string type in node/linkComponent (#1078)

* fix(network): string type in node/linkComponent

* fix lint error

* make example look nicer
---
 .../src/sandboxes/visx-network/Example.tsx    | 45 ++++++++++++++++---
 packages/visx-network/src/Graph.tsx           |  2 -
 packages/visx-network/src/Links.tsx           |  1 -
 packages/visx-network/src/Nodes.tsx           |  1 -
 4 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/packages/visx-demo/src/sandboxes/visx-network/Example.tsx b/packages/visx-demo/src/sandboxes/visx-network/Example.tsx
index 4948e25d4..b9a83d5df 100644
--- a/packages/visx-demo/src/sandboxes/visx-network/Example.tsx
+++ b/packages/visx-demo/src/sandboxes/visx-network/Example.tsx
@@ -1,21 +1,33 @@
 import React from 'react';
-import { Graph } from '@visx/network';
+import { DefaultNode, Graph } from '@visx/network';
 
 export type NetworkProps = {
   width: number;
   height: number;
 };
 
-const nodes = [
+interface CustomNode {
+  x: number;
+  y: number;
+  color?: string;
+}
+
+interface CustomLink {
+  source: CustomNode;
+  target: CustomNode;
+  dashed?: boolean;
+}
+
+const nodes: CustomNode[] = [
   { x: 50, y: 20 },
-  { x: 200, y: 300 },
-  { x: 300, y: 40 },
+  { x: 200, y: 250 },
+  { x: 300, y: 40, color: '#26deb0' },
 ];
 
-const links = [
+const links: CustomLink[] = [
   { source: nodes[0], target: nodes[1] },
   { source: nodes[1], target: nodes[2] },
-  { source: nodes[2], target: nodes[0] },
+  { source: nodes[2], target: nodes[0], dashed: true },
 ];
 
 const graph = {
@@ -29,7 +41,26 @@ export default function Example({ width, height }: NetworkProps) {
   return width < 10 ? null : (
     <svg width={width} height={height}>
       <rect width={width} height={height} rx={14} fill={background} />
-      <Graph graph={graph} />
+      <Graph<CustomLink, CustomNode>
+        graph={graph}
+        top={20}
+        left={100}
+        nodeComponent={({ node: { color } }) =>
+          color ? <DefaultNode fill={color} /> : <DefaultNode />
+        }
+        linkComponent={({ link: { source, target, dashed } }) => (
+          <line
+            x1={source.x}
+            y1={source.y}
+            x2={target.x}
+            y2={target.y}
+            strokeWidth={2}
+            stroke="#999"
+            strokeOpacity={0.6}
+            strokeDasharray={dashed ? '8,4' : undefined}
+          />
+        )}
+      />
     </svg>
   );
 }
diff --git a/packages/visx-network/src/Graph.tsx b/packages/visx-network/src/Graph.tsx
index 69b1ce2ad..4c46b735d 100644
--- a/packages/visx-network/src/Graph.tsx
+++ b/packages/visx-network/src/Graph.tsx
@@ -17,12 +17,10 @@ type Props<Link, Node> = {
   graph?: GraphType<Link, Node>;
   /** Component for rendering a single Link. */
   linkComponent?:
-    | string
     | React.FunctionComponent<LinkProvidedProps<Link>>
     | React.ComponentClass<LinkProvidedProps<Link>>;
   /** Component for rendering a single Node. */
   nodeComponent?:
-    | string
     | React.FunctionComponent<NodeProvidedProps<Node>>
     | React.ComponentClass<NodeProvidedProps<Node>>;
   /** Top transform offset to apply to links and nodes. */
diff --git a/packages/visx-network/src/Links.tsx b/packages/visx-network/src/Links.tsx
index c78bc970e..7fdf013c2 100644
--- a/packages/visx-network/src/Links.tsx
+++ b/packages/visx-network/src/Links.tsx
@@ -8,7 +8,6 @@ export type LinkProps<Link> = {
   links?: Link[];
   /** Component for rendering a single link. */
   linkComponent:
-    | string
     | React.FunctionComponent<LinkProvidedProps<Link>>
     | React.ComponentClass<LinkProvidedProps<Link>>;
   /** Classname to add to each link parent g element. */
diff --git a/packages/visx-network/src/Nodes.tsx b/packages/visx-network/src/Nodes.tsx
index f1017bca9..4c167dc51 100644
--- a/packages/visx-network/src/Nodes.tsx
+++ b/packages/visx-network/src/Nodes.tsx
@@ -10,7 +10,6 @@ export type NodeProps<Node> = {
   nodes?: Node[];
   /** Component for rendering a single link. */
   nodeComponent:
-    | string
     | React.FunctionComponent<NodeProvidedProps<Node>>
     | React.ComponentClass<NodeProvidedProps<Node>>;
   /** Classname to add to each node parent g element. */