# All files / src/components NodeDetails.jsx

18.18% Statements 4/22
0% Branches 0/27
0% Functions 0/1
20% Lines 4/20

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96

    1x

    1x

    1x
    1x

     import React from 'react';

    import { nodeShape, scaleShape } from '../propShapes';
    import { ancestorsFromNode } from '../utils/graph-utils';
    import { oneDecimal } from '../utils/scale-utils';

    import {
      ELAPSED_MS_ROOT,
      ELAPSED_MS,
      EVENT_COUNT,
    } from '../constants';

    import NodeSequence from './NodeSequence';

    const propTypes = {
      node: nodeShape,
      root: nodeShape,
      timeScale: scaleShape.isRequired,
      colorScale: scaleShape.isRequired,
    };

    const defaultProps = {
      node: null,
      root: null,
    };

    function NodeDetails({
      node,
      root,
      timeScale,
      colorScale,
    }) {
      if (!node || !root) return null;

      const sequence = ancestorsFromNode(node);
      const hasNegativeDepth = sequence[0].depth < 0 || sequence[sequence.length - 1].depth < 0;
      const currNodeIndex = hasNegativeDepth ? 0 : sequence.length - 1;
      const separator = hasNegativeDepth ? ' < ' : ' > ';
      const subSequenceIndex = hasNegativeDepth ? [0, 2] : [-2];
      if (hasNegativeDepth) sequence.reverse();

      const Sequence = (
        <NodeSequence
          nodeArray={sequence}
          currNodeIndex={currNodeIndex}
          separator={separator}
          colorScale={colorScale}
        />
      );

      const SubSequence = sequence.length <= 2 ? null : (
        <NodeSequence
          nodeArray={sequence.slice(...subSequenceIndex)}
          currNodeIndex={hasNegativeDepth ? 0 : 1}
          separator={separator}
          colorScale={colorScale}
        />
      );

      const currNode = sequence[currNodeIndex];
      const nodeEvents = currNode[EVENT_COUNT];
      const percentOfPrev =
        `${oneDecimal((nodeEvents / (currNode.parent || currNode)[EVENT_COUNT]) * 100)}%`;
      const percentOfRoot = `${oneDecimal((nodeEvents / root[EVENT_COUNT]) * 100)}%`;

      const elapsedToNode = timeScale.format(currNode[ELAPSED_MS]);
      const elapsedToRoot = timeScale.format(currNode[ELAPSED_MS_ROOT]);

      return (
        <div>
          {SubSequence}
          {SubSequence &&
            <div>
              <div><strong>{nodeEvents}</strong> events</div>
              <div><strong>{elapsedToNode}</strong> mean elapsed time</div>
              <div><strong>{percentOfPrev}</strong> of previous</div>
              <br />
            </div>}

          {Sequence}
          <div>
            {!SubSequence && <div><strong>{nodeEvents}</strong> events</div>}
            {!SubSequence && currNode.depth !== 0 &&
              <div><strong>{percentOfPrev}</strong> of previous</div>}
            <div><strong>{percentOfRoot}</strong> of root</div>
            <div><strong>{elapsedToRoot}</strong> mean elapsed time to root</div>
          </div>
        </div>
      );
    }

    NodeDetails.propTypes = propTypes;
    NodeDetails.defaultProps = defaultProps;

    export default NodeDetails;