Visually group dependency visualization class nodes by buildtarget

A convex hull is now created around nodes within the same buildtarget,
expanded outwards slightly, and rendered on the visualization. Each
buildtarget is a different color, and nodes are colored according to
their buildtarget. This feature can be turned off with a radio button UI
element.

To support this feature, the original node colorings have been changed
to outline colors.

Bug: 1106121
Change-Id: Idbb89a5010fa56bc6ac083c65e98d77930796127
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2316790Reviewed-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@{#792033}

tools/android/dependency_analysis/js/src/class_view_consts.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * Different convex hull options.
+ * @enum {string}
+ */
+const HullDisplay = {
+  NONE: 'none',
+  BUILD_TARGET: 'build-target',
+};
+
+export {
+  HullDisplay,
+};

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

+<!-- Copyright 2020 The Chromium Authors. All rights reserved.
+     Use of this source code is governed by a BSD-style license that can be
+     found in the LICENSE file. -->
+
+<template>
+  <div id="hull-settings">
+    <label>Convex hull display:</label>
+    <div
+        v-for="hullDisplay in HullDisplay"
+        :key="hullDisplay">
+      <input
+          :id="hullDisplay"
+          v-model="internalSelectedHullDisplay"
+          type="radio"
+          name="hullDisplayRadioButtons"
+          :value="hullDisplay"
+          @change="updateSelectedHullDisplay">
+      <label :for="hullDisplay">
+        {{ hullDisplay }}
+      </label>
+    </div>
+  </div>
+</template>
+
+<script>
+import {HullDisplay} from '../class_view_consts.js';
+
+// @vue/component
+const ClassGraphHullSettings = {
+  props: {
+    selectedHullDisplay: String,
+  },
+  data: function() {
+    return {
+      internalSelectedHullDisplay: this.selectedHullDisplay,
+    };
+  },
+  computed: {
+    HullDisplay: () => HullDisplay,
+  },
+  methods: {
+    updateSelectedHullDisplay: function() {
+      this.$emit(
+          'update:selectedHullDisplay', this.internalSelectedHullDisplay);
+    },
+  },
+};
+
+export default ClassGraphHullSettings;
+</script>
+
+<style scoped>
+#hull-settings {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+}
+</style>

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

@@ -20,10 +20,13 @@
       <GraphVisualization
           :graph-update-triggers="graphUpdateTriggers"
           :page-model="pageModel"
+          :get-node-group="getNodeGroup"
           @[CUSTOM_EVENTS.NODE_CLICKED]="graphNodeClicked"/>
       <div id="node-details-container">
         <GraphDisplaySettings
             :display-settings-data="pageModel.displaySettingsData"/>
+        <ClassGraphHullSettings
+            :selected-hull-display.sync="hullDisplay"/>
         <GraphSelectedNodeDetails
             :selected-node-details-data="pageModel.selectedNodeDetailsData"
             @[CUSTOM_EVENTS.ADD_TO_FILTER_CLICKED]="addNodeToFilter"
@@ -40,13 +43,15 @@
 
 <script>
 import {CUSTOM_EVENTS} from '../vue_custom_events.js';
+import {HullDisplay} from '../class_view_consts.js';
 import {PagePathName, generateFilterFromUrl} from '../url_processor.js';
 
-import {GraphNode} from '../graph_model.js';
+import {ClassNode, GraphNode} from '../graph_model.js';
 import {PageModel} from '../page_model.js';
 import {parseClassGraphModelFromJson} from '../process_graph_json.js';
 
 import ClassDetailsPanel from './class_details_panel.vue';
+import ClassGraphHullSettings from './class_graph_hull_settings.vue';
 import GraphDisplaySettings from './graph_display_settings.vue';
 import GraphFilterInput from './graph_filter_input.vue';
 import GraphFilterItems from './graph_filter_items.vue';
@@ -56,10 +61,23 @@ import GraphSelectedNodeDetails from './graph_selected_node_details.vue';
 import GraphVisualization from './graph_visualization.vue';
 import PageUrlGenerator from './page_url_generator.vue';
 
+/**
+ * @param {!ClassNode} node The node to get the build target of.
+ * @return {?string} The build target of the node.
+ */
+function getNodeBuildTarget(node) {
+  if (node.buildTargets.length > 0) {
+    // A few classes have multiple targets, just take the first one.
+    return node.buildTargets[0];
+  }
+  return null;
+}
+
 // @vue/component
 const ClassGraphPage = {
   components: {
     ClassDetailsPanel,
+    ClassGraphHullSettings,
     GraphDisplaySettings,
     GraphFilterInput,
     GraphFilterItems,
@@ -78,6 +96,7 @@ const ClassGraphPage = {
    * @typedef {Object} ClassPageData
    * @property {PageModel} pageModel The data store for the page.
    * @property {PagePathName} pagePathName The pathname for the page.
+   * @property {!HullDisplay} hullDisplay The display mode of the graph's hulls.
    */
 
   /**
@@ -90,12 +109,22 @@ const ClassGraphPage = {
     return {
       pageModel,
       pagePathName: PagePathName.CLASS,
+      hullDisplay: HullDisplay.NONE,
     };
   },
   computed: {
     CUSTOM_EVENTS: () => CUSTOM_EVENTS,
+    getNodeGroup: function() {
+      switch (this.hullDisplay) {
+        case HullDisplay.BUILD_TARGET:
+          return getNodeBuildTarget;
+        default:
+          return () => null;
+      }
+    },
     graphUpdateTriggers: function() {
       return [
+        this.getNodeGroup,
         this.pageModel.displaySettingsData,
         this.pageModel.nodeFilterData.nodeList,
         this.pageModel.inboundDepthData.inboundDepth,

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

@@ -31,10 +31,16 @@ const GraphVisualization = {
      */
     graphUpdateTriggers: Array,
     pageModel: Object,
+    getNodeGroup: {
+      type: Function,
+      default: () => null,
+    },
+
   },
   watch: {
     graphUpdateTriggers: {
       handler: function() {
+        this.graphView.registerGetNodeGroup(this.getNodeGroup);
         this.graphView.updateGraphData(this.pageModel.getDataForD3());
         this.graphView.updateDisplaySettings(
             this.pageModel.displaySettingsData);
@@ -51,6 +57,7 @@ const GraphVisualization = {
     this.graphView = new GraphView();
     this.graphView.registerOnNodeClicked(
         node => this.$emit(CUSTOM_EVENTS.NODE_CLICKED, node));
+    this.graphView.registerGetNodeGroup(this.getNodeGroup);
   },
 };
 
@@ -63,7 +70,6 @@ export default GraphVisualization;
 }
 
 .graph-nodes circle {
-  stroke: #fff;
   stroke-width: 1.5px;
 }
 
@@ -77,8 +83,7 @@ export default GraphVisualization;
 }
 
 .graph-nodes circle.locked {
-  stroke: #000;
-  stroke-width: 3;
+  stroke-width: 3.5px;
 }
 </style>