charm trees

test.tsx

import React, { RefObject } from 'react'
import { storiesOf } from '@storybook/react'
import D3Playground from '.'
// import * as dagreD3 from 'dagre-d3'
import * as d3 from 'd3'
import * as d3dag from 'd3-dag'
import { LinkVerticalStep } from '@vx/shape'
import { lightpurple } from '../TreeGraph/colors'
// import NetworkGraph from '../NetworkGraph'
// import TreeGraph from '../TreeGraph';
// import TreeGraph from '../TreeGraph'
import CharmNode from './CharmNode'

const [height, width] = [600, 700]
const nodeRadius = 20

const xData = [
  { id: 'glc', label: 'Gathering Light Concentration' },
  { id: 'sse', label: 'Shining Starfall Execution' },
  {
    id: 'spsitvf',
    label: 'Single Point Shining Into the Void Form',
    parentIds: ['glc', 'sse'],
  },
  { id: 'fsf', label: 'Fatal Stroke Flash', parentIds: ['spsitvf'] },
  { id: 'vsw', label: 'Void-Slicing Wind', parentIds: ['spsitvf'] },
  { id: 'hssf', label: 'Horizon Swallowed Star Flash', parentIds: ['spsitvf'] },
  { id: 'lsf', label: 'Liquid Steel Flow', parentIds: ['fsf'] },
  { id: 'sdsb', label: 'Six-Demon Scabbard Binding', parentIds: ['hssf'] },
  {
    id: 'bnf',
    label: 'Blinding Nova Flare',
    parentIds: ['lsf', 'vsw', 'sdsb'],
  },
]

const dag = d3dag.dagStratify()(xData)

const coords = [
  d3dag.coordVert(),
  d3dag.coordMinCurve(),
  d3dag.coordGreedy(),
  d3dag.coordCenter(),
]

const layout = d3dag
  .sugiyama()
  .size([width, height])
  .layering(d3dag.layeringLongestPath())
  .coord(coords[3])

const TreeTest = () => {
    const t = layout(dag)
    const descendants = t.descendants()

    return (
      <svg
        id="testsvg"
        width={width}
        height={height}
        viewBox={`-${80} -${20} ${width + 2 * 80} ${height + 2 * 20}`}
      >
        {t.links().map((link: any, i: number) => {
          console.log(link)
          const percent = 1 / ((link.target.layer - link.source.layer) * 2)
          const sourcesFromLeftToRight = [...(link.source.children || [])].sort(
            c => c.x
          )
          const sinkParentsFromLeftToRight = [
            ...(link.target.data.parentIds.map((id: string) =>
              descendants.find((n: { id: string }) => id === n.id)
            ) || []),
          ].sort(c => c.x)
          const distanceFromSourceCenter =
            sourcesFromLeftToRight.indexOf(link.target) -
            (sourcesFromLeftToRight.length / 2 - 0.5)

          const distanceFromTargetCenter =
            sinkParentsFromLeftToRight.indexOf(link.source) -
            (sinkParentsFromLeftToRight.length / 2 - 0.5)

          console.log(
            sinkParentsFromLeftToRight.map(x => x.id),
            distanceFromTargetCenter
          )
          return (
            <LinkVerticalStep
              key={`link-${i}`}
              data={{
                ...link,
                source: {
                  ...link.source,
                  x: link.source.x + distanceFromSourceCenter * 20,
                },
                target: {
                  ...link.target,
                  x: link.target.x + distanceFromTargetCenter * 20,
                },
              }}
              stroke={lightpurple}
              strokeWidth="1"
              percent={percent}
              fill="none"
            />
          )
        })}
        {t
          .descendants()
          .map(
            (
              n: { x: number; y: number; data: { label: string } },
              i: number
            ) => (
              <foreignObject
                key={i}
                x={n.x - 80}
                y={n.y - 40}
                width="158"
                height="80"
              >
                <CharmNode data={n.data} />
              </foreignObject>
            )
          )}
      </svg>
    )
  }