feat(dendogram): add support for custom svg layers

plouc · May 2, 2024 · 5ac5a4d · 5ac5a4d
1 parent fb854f5
commit 5ac5a4d
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 21 deletions.
diff --git a/packages/dendogram/src/Dendogram.tsx b/packages/dendogram/src/Dendogram.tsx
@@ -1,6 +1,6 @@
-import { createElement, Fragment, ReactNode } from 'react'
+import { createElement, Fragment, ReactNode, useMemo } from 'react'
 import { Container, useDimensions, SvgWrapper } from '@nivo/core'
-import { DefaultDatum, LayerId, DendogramSvgProps } from './types'
+import { DefaultDatum, LayerId, DendogramSvgProps, CustomLayerProps } from './types'
 import { svgDefaultProps } from './defaults'
 import { useDendogram } from './hooks'
 import { Links } from './Links'
@@ -18,8 +18,9 @@ const InnerDendogram = <Datum extends object>({
     data,
     identity,
     nodeComponent = svgDefaultProps.nodeComponent,
+    linkComponent = svgDefaultProps.linkComponent,
     layout = svgDefaultProps.layout,
-    layers = svgDefaultProps.layers as LayerId[],
+    layers = svgDefaultProps.layers,
     isInteractive = svgDefaultProps.isInteractive,
     onNodeMouseEnter,
     onNodeMouseMove,
@@ -52,7 +53,7 @@ const InnerDendogram = <Datum extends object>({
     }
 
     if (layers.includes('links')) {
-        layerById.links = <Links key="links" links={links} />
+        layerById.links = <Links<Datum> key="links" links={links} linkComponent={linkComponent} />
     }
 
     if (layers.includes('nodes')) {
@@ -71,10 +72,15 @@ const InnerDendogram = <Datum extends object>({
         )
     }
 
-    const customLayerProps = {} /*useCustomLayerProps<D>({
-        cells,
-        computedData,
-    })*/
+    const customLayerProps: CustomLayerProps<Datum> = useMemo(
+        () => ({
+            nodes,
+            links,
+            innerWidth,
+            innerHeight,
+        }),
+        [nodes, links, innerWidth, innerHeight]
+    )
 
     return (
         <SvgWrapper

diff --git a/packages/dendogram/src/Link.tsx b/packages/dendogram/src/Link.tsx
@@ -1,10 +1,6 @@
-import { ComputedLink } from './types'
+import { LinkComponentProps } from './types'
 
-interface LinkProps<Datum extends object> {
-    link: ComputedLink<Datum>
-}
-
-export const Link = <Datum extends object>({ link }: LinkProps<Datum>) => {
+export const Link = <Datum extends object>({ link }: LinkComponentProps<Datum>) => {
     // console.log(link)
 
     return (

diff --git a/packages/dendogram/src/Links.tsx b/packages/dendogram/src/Links.tsx
@@ -1,8 +1,9 @@
-import { ComputedLink } from './types'
+import { ComputedLink, LinkComponent } from './types'
 import { Link } from './Link'
 
 interface LinksProps<Datum extends object> {
     links: ComputedLink<Datum>[]
+    linkComponent: LinkComponent<Datum>
 }
 
 export const Links = <Datum extends object>({ links }: LinksProps<Datum>) => {

diff --git a/packages/dendogram/src/Nodes.tsx b/packages/dendogram/src/Nodes.tsx
@@ -1,11 +1,11 @@
 import { createElement } from 'react'
 import { useTransition } from '@react-spring/web'
 import { useMotionConfig } from '@nivo/core'
-import { ComputedNode, NodeMouseEventHandler, DendogramSvgProps, NodeTooltip } from './types'
+import { ComputedNode, NodeComponent, NodeMouseEventHandler, NodeTooltip } from './types'
 
 interface NodesProps<Datum extends object> {
     nodes: ComputedNode<Datum>[]
-    nodeComponent: Exclude<DendogramSvgProps<Datum>['nodeComponent'], undefined>
+    nodeComponent: NodeComponent<Datum>
     isInteractive: boolean
     onMouseEnter?: NodeMouseEventHandler<Datum>
     onMouseMove?: NodeMouseEventHandler<Datum>

diff --git a/packages/dendogram/src/defaults.ts b/packages/dendogram/src/defaults.ts
@@ -1,15 +1,23 @@
+import { CommonProps, DendogramSvgProps } from './types'
 import { Node } from './Node'
+import { Link } from './Link'
 
-export const commonDefaultProps: any = {
+export const commonDefaultProps: Pick<
+    CommonProps<any>,
+    'identity' | 'layout' | 'isInteractive' | 'role' | 'animate' | 'motionConfig'
+> = {
+    identity: 'id',
     layout: 'top-to-bottom',
-    layers: ['links', 'nodes', 'labels'],
     isInteractive: true,
     role: 'img',
     animate: true,
     motionConfig: 'gentle',
 }
 
-export const svgDefaultProps = {
+export const svgDefaultProps: typeof commonDefaultProps &
+    Required<Pick<DendogramSvgProps<any>, 'layers' | 'nodeComponent' | 'linkComponent'>> = {
     ...commonDefaultProps,
+    layers: ['links', 'nodes', 'labels'],
     nodeComponent: Node,
+    linkComponent: Link,
 }
diff --git a/packages/dendogram/src/types.ts b/packages/dendogram/src/types.ts
@@ -64,6 +64,19 @@ export type NodeMouseEventHandler<Datum extends object> = (
     event: MouseEvent
 ) => void
 
+export interface LinkComponentProps<Datum extends object> {
+    link: ComputedLink<Datum>
+}
+export type LinkComponent<Datum extends object> = FunctionComponent<LinkComponentProps<Datum>>
+
+export interface CustomLayerProps<Datum extends object> {
+    nodes: ComputedNode<Datum>[]
+    links: ComputedLink<Datum>[]
+    innerWidth: number
+    innerHeight: number
+}
+export type CustomSvgLayer<Datum extends object> = FunctionComponent<CustomLayerProps<Datum>>
+
 export interface DendogramDataProps<Datum extends object> {
     data: Datum
 }
@@ -93,8 +106,9 @@ export interface CommonProps<Datum extends object> extends MotionProps {
 export type DendogramSvgProps<Datum extends object> = DendogramDataProps<Datum> &
     Dimensions &
     Partial<CommonProps<Datum>> & {
-        layers?: LayerId[]
+        layers?: (LayerId | CustomSvgLayer<Datum>)[]
         nodeComponent?: NodeComponent<Datum>
+        linkComponent?: LinkComponent<Datum>
     }
 
 export type ResponsiveDendogramSvgProps<Datum extends object> = Omit<