feat(network): remove nodeBlendMode as it doesn't play well with link…

… endings underneath

packages/generators/src/network.ts

@@ -14,32 +14,40 @@ type ExtraNode = {
 }
 
 export const generateNetworkData = ({
-    rootNodeSize = 24,
-    minMidNodes = 6,
-    maxMidNodes = 16,
-    midNodeSize = 16,
-    minLeaves = 4,
-    maxLeaves = 16,
-    leafSize = 8,
+    rootSize = 32,
+    midSize = 24,
+    leafSize = 12,
+    minMidNodes = 5,
+    maxMidNodes = 11,
+    minLeaves = 3,
+    maxLeaves = 9,
+}: {
+    rootSize?: number
+    midSize?: number
+    leafSize?: number
+    minMidNodes?: number
+    maxMidNodes?: number
+    minLeaves?: number
+    maxLeaves?: number
 } = {}) => {
     const rootNode = {
-        id: '0',
+        id: 'Node 0',
         height: 2,
-        size: rootNodeSize,
+        size: rootSize,
         color: 'rgb(244, 117, 96)',
     }
     let nodes = Array.from({ length: random(minMidNodes, maxMidNodes) }, (_, k) => ({
-        id: `${k + 1}`,
+        id: `Node ${k + 1}`,
         height: 1,
-        size: midNodeSize,
+        size: midSize,
         color: 'rgb(97, 205, 187)',
     }))
 
     const links: Link[] = []
     const extraNodes: ExtraNode[] = []
     nodes.forEach(source => {
         links.push({
-            source: '0',
+            source: 'Node 0',
             target: source.id,
             distance: 80,
         })

packages/network/src/Network.tsx

@@ -36,7 +36,6 @@ const InnerNetwork = <Node extends InputNode, Link extends InputLink>({
     activeNodeSize = svgDefaultProps.activeNodeSize,
     inactiveNodeSize = svgDefaultProps.inactiveNodeSize,
     nodeColor = svgDefaultProps.nodeColor,
-    nodeBlendMode = svgDefaultProps.nodeBlendMode,
     nodeBorderWidth = svgDefaultProps.nodeBorderWidth,
     nodeBorderColor = svgDefaultProps.nodeBorderColor,
 
@@ -120,11 +119,10 @@ const InnerNetwork = <Node extends InputNode, Link extends InputLink>({
 
     if (layers.includes('nodes') && nodes !== null) {
         layerById.nodes = (
-            <NetworkNodes<Node, Link>
+            <NetworkNodes<Node>
                 key="nodes"
                 nodes={nodes}
                 nodeComponent={nodeComponent}
-                blendMode={nodeBlendMode}
                 onClick={isInteractive ? onClick : undefined}
                 onMouseEnter={isInteractive ? handleNodeHover : undefined}
                 onMouseMove={isInteractive ? handleNodeHover : undefined}

packages/network/src/NetworkNode.tsx

@@ -1,24 +1,22 @@
 import { memo } from 'react'
 import { animated, to } from '@react-spring/web'
-import { InputLink, InputNode, NodeProps } from './types'
+import { InputNode, NodeProps } from './types'
 
-const NonMemoizedNetworkNode = <Node extends InputNode, Link extends InputLink>({
+const NonMemoizedNetworkNode = <Node extends InputNode>({
     node,
     animated: animatedProps,
-    blendMode,
     onClick,
     onMouseEnter,
     onMouseMove,
     onMouseLeave,
-}: NodeProps<Node, Link>) => (
+}: NodeProps<Node>) => (
     <animated.circle
         data-testid={`node.${node.id}`}
         transform={to([animatedProps.x, animatedProps.y, animatedProps.scale], (x, y, scale) => {
             return `translate(${x},${y}) scale(${scale})`
         })}
         r={to([animatedProps.size], size => size / 2)}
         fill={animatedProps.color}
-        style={{ mixBlendMode: blendMode }}
         strokeWidth={animatedProps.borderWidth}
         stroke={animatedProps.borderColor}
         opacity={animatedProps.opacity}

packages/network/src/NetworkNodes.tsx

@@ -1,19 +1,11 @@
 import { createElement, MouseEvent, useMemo } from 'react'
 import { useTransition } from '@react-spring/web'
 import { useMotionConfig } from '@nivo/core'
-import {
-    InputNode,
-    ComputedNode,
-    NodeAnimatedProps,
-    NodeComponent,
-    NetworkSvgProps,
-    InputLink,
-} from './types'
+import { InputNode, ComputedNode, NodeAnimatedProps, NodeComponent } from './types'
 
-interface NetworkNodesProps<Node extends InputNode, Link extends InputLink> {
+interface NetworkNodesProps<Node extends InputNode> {
     nodes: ComputedNode<Node>[]
-    nodeComponent: NodeComponent<Node, Link>
-    blendMode: NonNullable<NetworkSvgProps<Node, Link>['nodeBlendMode']>
+    nodeComponent: NodeComponent<Node>
     onClick?: (node: ComputedNode<Node>, event: MouseEvent) => void
     onMouseEnter?: (node: ComputedNode<Node>, event: MouseEvent) => void
     onMouseMove?: (node: ComputedNode<Node>, event: MouseEvent) => void
@@ -59,15 +51,14 @@ const getExitTransition =
         opacity: 0,
     })
 
-export const NetworkNodes = <Node extends InputNode, Link extends InputLink>({
+export const NetworkNodes = <Node extends InputNode>({
     nodes,
     nodeComponent,
-    blendMode,
     onClick,
     onMouseEnter,
     onMouseMove,
     onMouseLeave,
-}: NetworkNodesProps<Node, Link>) => {
+}: NetworkNodesProps<Node>) => {
     const { animate, config: springConfig } = useMotionConfig()
 
     const [enterTransition, regularTransition, exitTransition] = useMemo(
@@ -93,7 +84,6 @@ export const NetworkNodes = <Node extends InputNode, Link extends InputLink>({
                     key: node.id,
                     node,
                     animated: transitionProps,
-                    blendMode,
                     onClick,
                     onMouseEnter,
                     onMouseMove,

packages/network/src/defaults.ts

@@ -54,7 +54,6 @@ export const svgDefaultProps = {
     nodeComponent: NetworkNode as NonNullable<
         NetworkSvgProps<InputNode, InputLink>['nodeComponent']
     >,
-    nodeBlendMode: 'normal' as NonNullable<NetworkSvgProps<InputNode, InputLink>['nodeBlendMode']>,
     linkComponent: NetworkLink as NonNullable<
         NetworkSvgProps<InputNode, InputLink>['linkComponent']
     >,

packages/network/src/types.ts

@@ -43,18 +43,15 @@ export interface NodeAnimatedProps {
     scale: number
 }
 
-export interface NodeProps<Node extends InputNode, Link extends InputLink> {
+export interface NodeProps<Node extends InputNode> {
     node: ComputedNode<Node>
     animated: AnimatedProps<NodeAnimatedProps>
-    blendMode: NonNullable<NetworkSvgProps<Node, Link>['nodeBlendMode']>
     onClick?: (node: ComputedNode<Node>, event: MouseEvent) => void
     onMouseEnter?: (node: ComputedNode<Node>, event: MouseEvent) => void
     onMouseMove?: (node: ComputedNode<Node>, event: MouseEvent) => void
     onMouseLeave?: (node: ComputedNode<Node>, event: MouseEvent) => void
 }
-export type NodeComponent<Node extends InputNode, Link extends InputLink> = FunctionComponent<
-    NodeProps<Node, Link>
->
+export type NodeComponent<Node extends InputNode> = FunctionComponent<NodeProps<Node>>
 export type NodeCanvasRenderer<Node extends InputNode> = (
     ctx: CanvasRenderingContext2D,
     node: ComputedNode<Node>
@@ -181,8 +178,7 @@ export type NetworkSvgProps<Node extends InputNode, Link extends InputLink> = Pa
     NetworkDataProps<Node, Link> &
     Dimensions & {
         layers?: (LayerId | CustomLayer<Node, Link>)[]
-        nodeComponent?: NodeComponent<Node, Link>
-        nodeBlendMode?: CssMixBlendMode
+        nodeComponent?: NodeComponent<Node>
         linkComponent?: LinkComponent<Node, Link>
         linkBlendMode?: CssMixBlendMode
     }

website/src/data/components/network/meta.yml

@@ -34,7 +34,6 @@ NetworkCanvas:
   package: '@nivo/network'
   tags:
     - canvas
-    - experimental
   stories:
     - label: Custom node tooltip
       link: networkcanvas--custom-node-tooltip

website/src/data/components/network/props.ts

@@ -197,13 +197,6 @@ const props: ChartProperty[] = [
         flavors: allFlavors,
         defaultValue: defaults.nodeColor,
     },
-    blendMode({
-        group: 'Nodes',
-        key: 'nodeBlendMode',
-        target: 'nodes',
-        flavors: ['svg'],
-        defaultValue: svgDefaultProps.nodeBlendMode,
-    }),
     {
         key: 'nodeBorderWidth',
         group: 'Nodes',

website/src/pages/network/canvas.tsx

@@ -28,7 +28,10 @@ const initialProperties = Object.freeze({
     inactiveNodeSize: defaults.inactiveNodeSize,
     nodeColor: (node: any) => node.color,
     nodeBorderWidth: 1,
-    nodeBorderColor: { theme: 'background' },
+    nodeBorderColor: {
+        from: 'color',
+        modifiers: [['darker', 0.8]],
+    },
 
     linkThickness: dynamicLinkThicknessValue,
     linkColor: defaults.linkColor,
@@ -38,7 +41,13 @@ const initialProperties = Object.freeze({
     isInteractive: true,
 })
 
-const generateData = () => generateNetworkData()
+const generateData = () =>
+    generateNetworkData({
+        minMidNodes: 9,
+        maxMidNodes: 15,
+        minLeaves: 7,
+        maxLeaves: 12,
+    })
 
 const NetworkCanvas = () => {
     const {
@@ -66,14 +75,7 @@ const NetworkCanvas = () => {
             initialProperties={initialProperties}
             defaultProperties={defaults}
             propertiesMapper={mapper}
-            generateData={() =>
-                generateData({
-                    rootNodeRadius: 10,
-                    maxMidNodes: 32,
-                    midNodeRadius: 6,
-                    leafRadius: 3,
-                })
-            }
+            generateData={generateData}
             getDataSize={data => data.nodes.length}
             image={image}
         >

website/src/pages/network/index.tsx

@@ -31,7 +31,6 @@ const initialProperties = Object.freeze({
     activeNodeSize: dynamicActiveNodeSizeValue,
     inactiveNodeSize: defaults.inactiveNodeSize,
     nodeColor: (node: any) => node.color,
-    nodeBlendMode: 'normal',
     nodeBorderWidth: 1,
     nodeBorderColor: {
         from: 'color',