feat(network): add support for canvas annotations

Author: plouc

packages/annotations/src/compute.ts

@@ -7,7 +7,6 @@ import {
 } from '@nivo/core'
 import { defaultProps } from './props'
 import {
-    AnnotationSpec,
     AnnotationPositionGetter,
     AnnotationDimensionsGetter,
     BoundAnnotation,
@@ -89,7 +88,7 @@ export const getLinkAngle = (
 }
 
 export const computeAnnotation = <Datum>(
-    annotation: Required<AnnotationSpec<Datum>>
+    annotation: BoundAnnotation<Datum>
 ): AnnotationInstructions => {
     const {
         x,

packages/annotations/src/hooks.ts

@@ -4,7 +4,7 @@ import {
     AnnotationDimensionsGetter,
     AnnotationMatcher,
     AnnotationPositionGetter,
-    AnnotationSpec,
+    BoundAnnotation,
 } from './types'
 
 /**
@@ -35,7 +35,7 @@ export const useAnnotations = <Datum>({
 export const useComputedAnnotations = <Datum>({
     annotations,
 }: {
-    annotations: Required<AnnotationSpec<Datum>>[]
+    annotations: BoundAnnotation<Datum>[]
 }) =>
     useMemo(
         () =>
@@ -48,5 +48,5 @@ export const useComputedAnnotations = <Datum>({
         [annotations]
     )
 
-export const useComputedAnnotation = <Datum>(annotation: Required<AnnotationSpec<Datum>>) =>
+export const useComputedAnnotation = <Datum>(annotation: BoundAnnotation<Datum>) =>
     useMemo(() => computeAnnotation<Datum>(annotation), [annotation])

packages/network/src/NetworkCanvas.tsx

@@ -1,9 +1,17 @@
 import { useCallback, useRef, useEffect, createElement, MouseEvent } from 'react'
 import { getDistance, getRelativeCursor, Container, useDimensions, useTheme } from '@nivo/core'
 import { useTooltip } from '@nivo/tooltip'
+import { useComputedAnnotations, renderAnnotationsToCanvas } from '@nivo/annotations'
 import { canvasDefaultProps } from './defaults'
-import { useNetwork } from './hooks'
-import { NetworkCanvasProps, InputNode, NodeTooltip, InputLink } from './types'
+import { useNetwork, useNodeAnnotations } from './hooks'
+import {
+    NetworkCanvasProps,
+    InputNode,
+    ComputedNode,
+    NodeTooltip,
+    InputLink,
+    NetworkSvgProps,
+} from './types'
 
 type InnerNetworkCanvasProps<Node extends InputNode, Link extends InputLink> = Omit<
     NetworkCanvasProps<Node, Link>,
@@ -39,6 +47,10 @@ const InnerNetworkCanvas = <Node extends InputNode, Link extends InputLink>({
     linkThickness = canvasDefaultProps.linkThickness,
     linkColor = canvasDefaultProps.linkColor,
 
+    annotations = canvasDefaultProps.annotations as NonNullable<
+        NetworkSvgProps<Node, Link>['annotations']
+    >,
+
     isInteractive = canvasDefaultProps.isInteractive,
     nodeTooltip = canvasDefaultProps.nodeTooltip as NodeTooltip<Node>,
     onClick,
@@ -70,6 +82,11 @@ const InnerNetworkCanvas = <Node extends InputNode, Link extends InputLink>({
         linkColor,
     })
 
+    const boundAnnotations = useNodeAnnotations<Node>(nodes!, annotations)
+    const computedAnnotations = useComputedAnnotations<ComputedNode<Node>>({
+        annotations: boundAnnotations,
+    })
+
     const theme = useTheme()
 
     useEffect(() => {
@@ -91,6 +108,11 @@ const InnerNetworkCanvas = <Node extends InputNode, Link extends InputLink>({
                 links.forEach(link => renderLink(ctx, link))
             } else if (layer === 'nodes' && nodes !== null) {
                 nodes.forEach(node => renderNode(ctx, node))
+            } else if (layer === 'annotations') {
+                renderAnnotationsToCanvas<ComputedNode<Node>>(ctx, {
+                    annotations: computedAnnotations as any,
+                    theme,
+                })
             } else if (typeof layer === 'function' && nodes !== null && links !== null) {
                 layer(ctx, {
                     // ...props,
@@ -112,6 +134,7 @@ const InnerNetworkCanvas = <Node extends InputNode, Link extends InputLink>({
         links,
         renderNode,
         renderLink,
+        computedAnnotations,
     ])
 
     const getNodeFromMouseEvent = useCallback(

packages/scatterplot/src/ScatterPlotCanvas.tsx

@@ -200,6 +200,7 @@ const InnerScatterPlotCanvas = <RawDatum extends ScatterPlotDatum>({
         debugMesh,
         voronoi,
         currentNode,
+        boundAnnotations,
     ])
 
     const { showTooltipFromEvent, hideTooltip } = useTooltip()

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

@@ -311,7 +311,7 @@ const props: ChartProperty[] = [
         flavors: allFlavors,
         createDefaults: {
             type: 'circle',
-            match: { id: '0' },
+            match: { id: 'Node 0' },
             note: 'New annotation',
             noteX: 160,
             noteY: 36,