Responsive Dendrogram

[RuslanBuzadj]

Help!!)) How can I create a responsive Dendrogram so that when I decrease or increase the size of the svg text and the rectangle around the text will decrease proportionally, I tried to do this with scale but it didn't work out so well.

import { Group } from '@visx/group'
import { Cluster, hierarchy } from '@visx/hierarchy'
import { HierarchyPointNode } from '@visx/hierarchy/lib/types'
import { MarkerArrow } from '@visx/marker'
import { ScaleSVG, useParentSize } from '@visx/responsive'
import { LinkHorizontalStep } from '@visx/shape'
import { useLayoutEffect, useMemo, useRef, useState } from 'react'

interface NodeShape {
name: string
children?: NodeShape[]
_width?: number
}

const clusterData: NodeShape = {
name: '192.129.1.1',
children: [
{
name: '192.129.1.1',
children: [
{ name: '192.129.1.1' },
{ name: '192.129.1.1' },
{
name: 'C',
children: [
{
name: '192.129.1.1',
},
],
},
],
},
{
name: 'some 192.129.1.1',
children: [
{ name: '192.129.1.1' },
{ name: '192.129.1.1' },
{ name: '192.129.1.1' },
],
},
{
name: '192.129.1.1',
children: [
{
name: '192.129.1.1',
},
],
},
],
}

function Node({
node,
onWidthMeasured,
}: {
node: HierarchyPointNode
onWidthMeasured: (name: string, width: number) => void
}) {

const textPadding = 10
const height = 20

const textRef = useRef<SVGTextElement | null>(null)
const [width, setTextWidth] = useState(40) // default width
const isParent = !!node.data?.children

useLayoutEffect(() => {
    if (textRef.current) {
        const { width } = textRef.current.getBBox()
        setTextWidth(width + textPadding)
        onWidthMeasured(node.data.name, width + textPadding)
    }
}, [node])

const centerX = !isParent ? -width + textPadding : -width / 2
const centerY = -height / 2
const textDX = !isParent ? textPadding / 2 : 0

return (
    <Group
        top={node.x}
        left={node.y}
    >
        <rect
            key={width}
            height={height}
            width={width}
            x={centerX}
            y={centerY}
            fill="white"
            stroke={'var(--muted-foreground)'}
            strokeWidth={1}
        />
        <text
            ref={textRef}
            dx={textDX}
            dy=".33em"
            fontSize={9}
            // fontFamily="Arial"
            textAnchor={!isParent ? 'end' : 'middle'}
            fill={'var(--muted-foreground)'}
            style={{ pointerEvents: 'none' }}
        >
            {node.data.name}
        </text>
    </Group>
)

}

const defaultMargin = { top: 10, left: 8, right: 0, bottom: 10 }

export type TreeProps = {
margin?: { top: number; right: number; bottom: number; left: number }
}

const DiscoveredMapChart = ({ margin = defaultMargin }: TreeProps) => {
const { parentRef, width, height } = useParentSize({ debounceTime: 150 })

const [nodeWidths, setNodeWidths] = useState<Record<string, number>>({})
const data = useMemo(() => hierarchy<NodeShape>(clusterData), [])
const xMax = width - margin.left - margin.right
const yMax = height - margin.top - margin.bottom

return (
    <div className="w-full aspect-square overflow-hidden">
        <div
            ref={parentRef}
            className="w-full h-full"
        >
            {width < 10 ? null : (
                <ScaleSVG
                    width={width}
                    height={height}
                >
                    {/* <svg
                    //     width={width}
                    //     height={height}
                    //     viewBox={`0 0 ${width} ${height}`}
                    //     preserveAspectRatio="xMidYMid meet"
                    // > */}
                        <MarkerArrow
                            id="marker-arrow"
                            fill="#374469"
                            size={8}
                            stroke="none"
                            refX={0}
                        />
                        <Cluster<NodeShape>
                            root={data}
                            size={[xMax, yMax]}
                        >
                            {cluster => {
                                return (
                                    <Group
                                        left={margin.left}
                                        top={margin.top}
                                    >
                                        {cluster.links().map((link, i) => {
                                            const targetName =
                                                link.target.data.name
                                            const targetWidth =
                                                nodeWidths[targetName] || 40

                                            const target = {
                                                ...link.target,
                                                y:
                                                    link.target.y -
                                                    targetWidth,
                                            }

                                            return (
                                                <LinkHorizontalStep
                                                    key={`cluster-link-${i}`}
                                                    data={{
                                                        source: link.source,
                                                        target,
                                                    }}
                                                    stroke={
                                                        'var(--muted-foreground)'
                                                    }
                                                    strokeWidth={1}
                                                    fill="none"
                                                    markerEnd="url(#marker-arrow)"
                                                />
                                            )
                                        })}
                                        {cluster
                                            .descendants()
                                            .map((node, i) => {
                                                return (
                                                    <Node
                                                        key={`cluster-node-${i}`}
                                                        node={node}
                                                        onWidthMeasured={(
                                                            name,
                                                            width,
                                                        ) => {
                                                            setNodeWidths(
                                                                prev => ({
                                                                    ...prev,
                                                                    [name]: width,
                                                                }),
                                                            )
                                                        }}
                                                    />
                                                )
                                            })}
                                    </Group>
                                )
                            }}
                        </Cluster>
                    {/* </svg> */}
                </ScaleSVG>
            )}
        </div>
    </div>
)

}

export default DiscoveredMapChart