import React, { Component } from 'react';
    import { Circle, Group, Pack, Svg } from '@potion/element'
  
    export default class A extends Component {
  
      constructor() {
        super();
        this.displayName = 'A';
        this.state = {};
      }
  
      render() {
        const { nodes, width, height } = this.props;
  
        return (
          <Svg height={height} width={width}>
            <Pack
              data={{ children: nodes }}
              size={[width, height]}
              includeRoot={false}
              nodeEnter={d => ({ ...d, r: 0 })}
              animate
            >{
              nodes =>
                nodes.map(({ x, y, r, data: { key } }) => (
                  <Group
                    key={key}
                    onMouseEnter={() => {
                      this.setState({ hoveredNode: key });
                    }}
                    onMouseOut={() => {
                      this.setState({ hoveredNode: null });
                    }}
                  >
                    <Circle
                      cx={x}
                      cy={y}
                      r={r}
                      fill={this.state.hoveredNode === key ? '#ff3a55' : '#20232a'}
                    />                        
                  </Group>
                ))
            }</Pack>
          </Svg>
        );
      }
    }