[Lorenz] Add names to class graph buildtarget groupings

Convex hull buildtarget groupings in the class graph now contain a label
above their highest node with the name of the target.

Change-Id: I11509290940fc2540cbaf987d29b6cca7d58ecc0
Bug: 1109274
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2340067Reviewed-by: Mohamed Heikal <mheikal@chromium.org>
Reviewed-by: Samuel Huang <huangs@chromium.org>
Commit-Queue: James Long <yjlong@google.com>
Cr-Commit-Position: refs/heads/master@{#796171}

tools/android/dependency_analysis/js/src/graph_view.js

@@ -342,6 +342,10 @@ class GraphView {
     this.nodeGroup_ = graphGroup.append('g')
         .classed('graph-nodes', true);
     /** @private {*} */
+    this.hullLabelGroup_ = graphGroup.append('g')
+        .classed('graph-hull-labels', true)
+        .attr('pointer-events', 'none');
+    /** @private {*} */
     this.labelGroup_ = graphGroup.append('g')
         .classed('graph-labels', true)
         .attr('pointer-events', 'none');
@@ -559,6 +563,8 @@ class GraphView {
    * @typedef {Object} HullData
    * @property {string} key The unique key for the hull.
    * @property {string} color The color to display the hull as.
+   * @property {!Array<number>} labelPosition An [x, y] point representing where
+   *     this hull's label should be rendered.
    * @property {!Array<!Array<number>>} points A list of [x, y] points making up
    *     the hull.
    */
@@ -583,9 +589,18 @@ class GraphView {
         const [expandX, expandY] = resizeVector(deltaX, deltaY, HULL_EXPANSION);
         return [nodeX + expandX, nodeY + expandY];
       });
+      // A decent heuristic is for the hull's label to be displayed above its
+      // highest node. Recall that on an SVG, lower y-values are higher.
+      let highestPoint = [0, Number.POSITIVE_INFINITY];
+      for (const point of expandedPolygon) {
+        if (point[1] < highestPoint[1]) {
+          highestPoint = point;
+        }
+      }
       resultHulls.push({
         key,
         color: this.hullColorManager_.getColorForHull(key),
+        labelPosition: highestPoint,
         points: expandedPolygon,
       });
     }
@@ -599,6 +614,18 @@ class GraphView {
    *     the current data.
    */
   updateHullData(hullData) {
+    this.hullLabelGroup_.selectAll('text')
+      .data(hullData, hull => hull.key)
+      .join(enter => enter.append('text')
+          .text(hull => hull.key)
+          .attr('fill', hull => hull.color)
+          .attr('dy', -8)
+          .attr('x', hull => hull.labelPosition[0])
+          .attr('y', hull => hull.labelPosition[1]),
+        update => update
+          .attr('x', hull => hull.labelPosition[0])
+          .attr('y', hull => hull.labelPosition[1]));
+
     // The SVG path generator for the hull outlines.
     const getHullLine = d3.line().curve(d3.curveCatmullRomClosed.alpha(0.75));
     this.hullGroup_.selectAll('path')

tools/android/dependency_analysis/js/src/vue_components/graph_visualization.vue

@@ -72,6 +72,14 @@ export default GraphVisualization;
 </script>
 
 <style>
+.graph-hull-labels text {
+  dominant-baseline: baseline;
+  font-family: sans-serif;
+  font-size: 10px;
+  font-weight: bold;
+  text-anchor: middle;
+}
+
 .graph-edges path.non-hovered-edge {
   opacity: 0.4;
 }