Display buildtargets in dependency visualization class details panel

A new component has been made for class details, similar to how the
package graph has a panel for package details. This component contains
the link to the class' package and a list of the class' build targets.

Bug: 1106496
Change-Id: I71b34fa973256cf43984b351769ca95b2fb6bb93
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2303985Reviewed-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@{#789597}

tools/android/dependency_analysis/js/src/graph_model.js

@@ -80,11 +80,13 @@ class PackageNode extends GraphNode {
 
 /** A node representing a Java class. */
 class ClassNode extends GraphNode {
-  constructor(id, displayName, packageName) {
+  constructor(id, displayName, packageName, buildTargets) {
     super(id, displayName);
 
     /** @public {string} */
     this.packageName = packageName;
+    /** @public {!Array<string>} */
+    this.buildTargets = buildTargets;
   }
 }
 

tools/android/dependency_analysis/js/src/process_graph_json.js

@@ -60,7 +60,8 @@ function parsePackageGraphModelFromJson(jsonGraph) {
  */
 function parseClassGraphModelFromJson(jsonGraph) {
   const makeClassNode = nodeData => new ClassNode(
-      nodeData.name, shortenClassName(nodeData.name), nodeData.meta.package);
+      nodeData.name, shortenClassName(nodeData.name), nodeData.meta.package,
+      nodeData.meta.build_targets);
   return parseGraphModelFromJson(jsonGraph, makeClassNode);
 }
 

tools/android/dependency_analysis/js/src/vue_components/class_details_panel.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
+      v-if="selectedClass !== null"
+      class="class-details-panel">
+    <LinkToGraph
+        :filter="[selectedClass.packageName]"
+        :graph-type="PagePathName.PACKAGE"
+        :text="'View ' + selectedClass.packageName"/>
+    <div v-if="selectedClass.buildTargets.length > 0">
+      <div>Class buildtarget(s):</div>
+      <ul>
+        <li
+            v-for="buildTarget in selectedClass.buildTargets"
+            :key="buildTarget">
+          {{ buildTarget }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import {PagePathName} from '../url_processor.js';
+
+import LinkToGraph from './link_to_graph.vue';
+
+const ClassDetailsPanel = {
+  components: {
+    LinkToGraph,
+  },
+  props: {
+    selectedClass: Object,
+  },
+  computed: {
+    PagePathName: () => PagePathName,
+  },
+};
+
+export default ClassDetailsPanel;
+</script>
\ No newline at end of file

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

@@ -28,13 +28,8 @@
             :selected-node-details-data="pageModel.selectedNodeDetailsData"
             @[CUSTOM_EVENTS.ADD_TO_FILTER_CLICKED]="addNodeToFilter"
             @[CUSTOM_EVENTS.REMOVE_FROM_FILTER_CLICKED]="removeNodeFromFilter"/>
-        <LinkToGraph
-            v-if="pageModel.selectedNodeDetailsData.selectedNode !== null"
-            :filter="
-              [pageModel.selectedNodeDetailsData.selectedNode.packageName]"
-            :graph-type="PagePathName.PACKAGE"
-            :text="'View ' +
-              pageModel.selectedNodeDetailsData.selectedNode.packageName"/>
+        <ClassDetailsPanel
+            :selected-class="pageModel.selectedNodeDetailsData.selectedNode"/>
       </div>
     </div>
     <PageUrlGenerator
@@ -51,6 +46,7 @@ import {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 GraphFilterInput from './graph_filter_input.vue';
 import GraphFilterItems from './graph_filter_items.vue';
 import GraphInboundInput from './graph_inbound_input.vue';
@@ -62,6 +58,7 @@ import PageUrlGenerator from './page_url_generator.vue';
 
 const ClassGraphPage = {
   components: {
+    ClassDetailsPanel,
     GraphFilterInput,
     GraphFilterItems,
     GraphInboundInput,