onMouseOver: action()

in stories/index.js [40:115]

• 71 lines of code
• 1 McCabe index (conditional complexity)

    onMouseOver: action(`hovered <${child.type.name} />`),
    onMouseOut: action(`blurred <${child.type.name} />`),
  });
}

const twoChildren = [
  <ForceGraphNode node={{ id: 'first-node' }} fill="#11939A" />,
  <ForceGraphNode node={{ id: 'second-node' }} fill="#47d3d9" />,
  <ForceGraphLink link={{ source: 'first-node', target: 'second-node' }} />,
].map(attachEvents);

const twoChildrenArrow = [
  <ForceGraphNode node={{ id: 'first-node' }} fill="#11939A" />,
  <ForceGraphNode node={{ id: 'second-node' }} fill="#47d3d9" />,
  <ForceGraphArrowLink targetRadius={2} link={{ source: 'first-node', target: 'second-node' }} />,
].map(attachEvents);

const tenChildren = [
  <ForceGraphNode node={{ id: 'first-node', radius: 5 }} fill="#11939A" />,
  <ForceGraphNode node={{ id: 'second-node', radius: 10 }} fill="#47d3d9" />,
  <ForceGraphNode node={{ id: 'third-node', radius: 15 }} fill="#11939A" />,
  <ForceGraphNode node={{ id: 'fourth-node', radius: 15 }} fill="#47d3d9" />,
  <ForceGraphNode node={{ id: 'fifth-node', radius: 5 }} fill="#11939A" />,
  <ForceGraphNode node={{ id: 'sixth-node', radius: 15 }} fill="#47d3d9" />,
  <ForceGraphNode node={{ id: 'seventh-node', radius: 10 }} fill="#11939A" />,
  <ForceGraphNode node={{ id: 'eighth-node', radius: 5 }} fill="#47d3d9" />,
  <ForceGraphNode node={{ id: 'ninth-node', radius: 5 }} fill="#11939A" />,
  <ForceGraphNode node={{ id: 'tenth-node', radius: 5 }} fill="#47d3d9" />,
  <ForceGraphLink link={{ source: 'first-node', target: 'second-node' }} />,
  <ForceGraphLink link={{ source: 'third-node', target: 'second-node' }} />,
  <ForceGraphLink link={{ source: 'third-node', target: 'fourth-node' }} />,
  <ForceGraphLink link={{ source: 'fifth-node', target: 'fourth-node' }} />,
  <ForceGraphLink link={{ source: 'fifth-node', target: 'fourth-node' }} />,
  <ForceGraphLink link={{ source: 'sixth-node', target: 'fourth-node' }} />,
  <ForceGraphLink link={{ source: 'seventh-node', target: 'fourth-node' }} />,
  <ForceGraphLink link={{ source: 'eighth-node', target: 'fourth-node' }} />,
  <ForceGraphLink link={{ source: 'ninth-node', target: 'tenth-node' }} />,
  <ForceGraphLink link={{ source: 'tenth-node', target: 'fifth-node' }} />,
].map(attachEvents);

const tenChildrenArrows = [
  <ForceGraphNode node={{ id: 'first-node'}} fill="#11939A" />,
  <ForceGraphNode node={{ id: 'second-node'}} fill="#47d3d9" />,
  <ForceGraphNode node={{ id: 'third-node'}} fill="#11939A" />,
  <ForceGraphNode node={{ id: 'fourth-node'}} fill="#47d3d9" />,
  <ForceGraphNode node={{ id: 'fifth-node'}} fill="#11939A" />,
  <ForceGraphNode node={{ id: 'sixth-node'}} fill="#47d3d9" />,
  <ForceGraphNode node={{ id: 'seventh-node'}} fill="#11939A" />,
  <ForceGraphNode node={{ id: 'eighth-node'}} fill="#47d3d9" />,
  <ForceGraphNode node={{ id: 'ninth-node'}} fill="#11939A" />,
  <ForceGraphNode node={{ id: 'tenth-node'}} fill="#47d3d9" />,
  <ForceGraphArrowLink link={{ source: 'first-node', target: 'second-node' }} />,
  <ForceGraphArrowLink link={{ source: 'third-node', target: 'second-node' }} />,
  <ForceGraphArrowLink link={{ source: 'third-node', target: 'fourth-node' }} />,
  <ForceGraphArrowLink link={{ source: 'fifth-node', target: 'fourth-node' }} />,
  <ForceGraphArrowLink link={{ source: 'fifth-node', target: 'fourth-node' }} />,
  <ForceGraphArrowLink link={{ source: 'sixth-node', target: 'fourth-node' }} />,
  <ForceGraphArrowLink link={{ source: 'seventh-node', target: 'fourth-node' }} />,
  <ForceGraphArrowLink link={{ source: 'eighth-node', target: 'fourth-node' }} />,
  <ForceGraphArrowLink link={{ source: 'ninth-node', target: 'tenth-node' }} />,
  <ForceGraphArrowLink link={{ source: 'tenth-node', target: 'fifth-node' }} />,
].map(attachEvents);

storiesOf('<ForceGraph />', module)
  .add('two nodes', () => (
    <ForceGraph>{twoChildren}</ForceGraph>
  ))
  .add('10 nodes', () => (
    <ForceGraph>{tenChildren}</ForceGraph>
  ))
  .add('10 nodes (animated)', () => (
    <ForceGraph simulationOptions={{ animate: true }}>{tenChildren}</ForceGraph>
  ))
  .add('10 nodes (strength on x and y)', () => (
    <ForceGraph
      simulationOptions={{