Implement SvgLayersGroup and SvgEdgesLayer in plexus

[tiffon]

Which problem is this PR solving?

Adding the components for rendering edges to the budding layer functionality in plexus.

Short description of the changes

Add components for rendering edges to plexus:

• SvgDoc - An SVG document, this will be used by other components
• SvgLayersGroup – A group of layers, right now it only supports the edges layer
• SvgEdgesLayer – A layer of edges
• SvgDefEntry – The definition of markers, for arrow heads on the end of an edge (or at the start)
• SvgEdge – The edges, themselves

Also, add the util type TNonEmptyArray.

Examples from the demo

↓ Layer group version

Using a layer group to render visible edges and then a layer of edges above that layer with a wider but transparent stroke to catch mouse events over a larger UI element.

<LayeredDigraph
  zoom
  minimap
  className="DemoGraph--dag"
  layoutManager={new LayoutManager({ useDotEdges: true })}
  minimapClassName="Demo--miniMap"
  setOnGraph={layeredClassNameIsSmall}
  measurableNodesKey="nodes"
  layers={[
    {
      key: 'nodes-layers',
      layerType: 'html',
      layers: [
        {
          setOnNode,
          key: 'nodes',
          measurable: true,
          nodeRender: getLargeNodeLabel,
        },
      ],
    },
    {
      key: 'edges-layers',
      layerType: 'svg',
      defs: [{ localId: 'arrow-head' }],
      layers: [
        {
          key: 'edges',
          markerEndId: 'arrow-head',
          edges: true,
          setOnContainer: scaleProperty.strokeOpacity,
        },
        {
          key: 'edges-pointer-area',
          edges: true,
          setOnContainer: { style: { cursor: 'default', opacity: 0, strokeWidth: 4 } },
          setOnEdge: (...args) => ({
            onMouseOver: () => this.onEdgeEnter(args[0]),
            onMouseOut: () => this.onEdgeExit(args[0]),
          }),
        },
      ],
    },
  ]}
  {...largeDag}
/>

---

↓ Standalone layer version

Configuring the graph using an edge layer, directly, without a wrapping SvgLayersGroup.

Note: If there is more than one layer it's more efficient to use the group so the layers are transformed all at once instead of one at a time (for zoom).

Note: This version uses neato edges.

<LayeredDigraph
  zoom
  minimap
  className="DemoGraph--dag"
  layoutManager={new LayoutManager({ useDotEdges: false })}
  minimapClassName="Demo--miniMap"
  setOnGraph={layeredClassNameIsSmall}
  measurableNodesKey="nodes"
  layers={[
    {
      setOnNode,
      key: 'nodes',
      layerType: 'html',
      measurable: true,
      nodeRender: getLargeNodeLabel,
    },
    {
      key: 'edges-visible-path',
      defs: [{ localId: 'arrowHead' }],
      edges: true,
      layerType: 'svg',
      markerEndId: 'arrowHead',
      setOnContainer: [{ className: 'DdgGraph--edges' }, scaleProperty.strokeOpacity],
    },
  ]}
  {...largeDag}
/>

[codecov]

Codecov Report

Merging #419 into master will decrease coverage by 0.02%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master     #419      +/-   ##
==========================================
- Coverage    91.6%   91.58%   -0.03%     
==========================================
  Files         176      176              
  Lines        3991     3991              
  Branches      920      920              
==========================================
- Hits         3656     3655       -1     
- Misses        297      298       +1     
  Partials       38       38

Impacted Files	Coverage Δ
...s/jaeger-ui/src/components/SearchTracePage/url.tsx	80% <ø> (ø)	⬆️
...eViewer/TimelineHeaderRow/TimelineViewingLayer.tsx	88.13% <0%> (-1.7%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 33994f0...2a2ba4e. Read the comment docs.

[everett980]

Mostly minor points, but one more significant question about how a pure component wrapper would affect setOnEdge in SvgEdgesLayer.tsx. That question is about a TODO so it doesn't affect this PR per se, but may impact the next PR.

[everett980]

if you only want one arg, why not remove the rest from above and the [0] from here?

[everett980]

or does TS complain if the length of the prop doesn't match?

[tiffon]

Good call. Will do in the next PR.