M
+
S
L
G
A
V
C
-
N
M

    import React, { Component } from 'react';
    import { Circle, Grid, Svg } from '@potion/element'
    import itsSet from 'its-set';
  
    export default class N extends Component {
  
      static displayName = 'M';
      state = {};

      render() {
        const { nodes, width, height } = this.props;

        return (
          <Svg height={height} width={width}>
            <Grid
              data={nodes}
              bands
              size={[width, height]}
              animate
              nodeEnter={d => ({ ...d, x: 0, y: 0, nodeWidth: 0, nodeHeight: 0 })}
            >{nodes => nodes.map(({ x, y, nodeWidth, nodeHeight, key }) => (
              <Circle
                cx={x + nodeWidth / 2}
                cy={y + nodeHeight / 2}
                r={10}
                fill={this.state.hoveredNode === key ? COLORS.PINK : COLORS.DARK_GREY}
                onMouseEnter={() => {
                  this.setState({ hoveredNode: key });
                }}
                onMouseOut={() => {
                  this.setState({ hoveredNode: null });
                }}
              />
            ))}</Grid>
          </Svg>
        );
      }
    }