_renderInteractionLayer()

in showcases/graph/app.js [277:345]

• 54 lines of code
• 12 McCabe index (conditional complexity)

  _renderInteractionLayer(viewport, hovered, clicked) {
    // set flags used below to determine if SVG highlight elements should be rendered.
    // if truthy, each flag is replaced with the corresponding element to render.
    const elements = {
      hovered: hovered && hovered.object,
      clicked: clicked && clicked.object
    };
    const relatedElements = {
      hovered: hovered && hovered.relatedObjects,
      clicked: clicked && clicked.relatedObjects
    };
    const elementInfo = {
      hovered: hovered && hovered.object,
      clicked: clicked && clicked.object
    };

    // process related elements first, since they compare themselves to the focused elements.
    // related elements are:
    // - all links and nodes attached to a node; or
    // - the nodes at each end of a link.
    // see `graph-layout-layer::getPickingInfo()` for more information.
    Object.keys(relatedElements).forEach(k => {
      const els = relatedElements[k];
      if (!els || !els.length) {
        relatedElements[k] = null;
      } else {
        relatedElements[k] = [];
        els.forEach(el => {
          relatedElements[k].push(this._renderInteractionElement(el, `related ${k}`, viewport));
        });
      }
    });

    // process the focused (hovered / clicked) elements
    Object.keys(elements).forEach(k => {
      const el = elements[k];
      elements[k] = el ? this._renderInteractionElement(el, k, viewport) : null;
    });

    // render additional info about the focused elements (only nodes, not links)
    Object.keys(elementInfo).forEach(k => {
      const el = elementInfo[k];
      if (el && el.name) {
        elementInfo[k] = (
          <text x={el.x} y={el.y} dx={this._getNodeSize(el) + 10} dy={-10}>
            {el.name}
          </text>
        );
      } else {
        elementInfo[k] = null;
      }
    });

    // Note: node.x/y, calculated by d3 layout,
    // is measured from the center of the layout (of the viewport).
    // Therefore, we offset the <g> container to align.
    return (
      <svg width={viewport.width} height={viewport.height} className="interaction-overlay">
        <g transform={`translate(${viewport.width / 2},${viewport.height / 2})`}>
          {relatedElements.hovered}
          {elements.hovered}
          {relatedElements.clicked}
          {elements.clicked}
          {elementInfo.hovered}
          {elementInfo.clicked}
        </g>
      </svg>
    );
  }