[Lorenz] Add info icon that opens metadata popup to Dependency Viewer

Bug: 1115268
Change-Id: I700c54adf07c1388dc9a4d9b589dc937bec8165e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2506121
Commit-Queue: Henrique Nakashima <hnakashima@chromium.org>
Reviewed-by: Samuel Huang <huangs@chromium.org>
Cr-Commit-Position: refs/heads/master@{#822765}

tools/android/dependency_analysis/js/package.json

@@ -12,6 +12,7 @@
     "@trevoreyre/autocomplete-vue": "^2.2.0",
     "d3": "^5.16.0",
     "vue": "^2.6.11",
+    "vue-js-modal": "^2.0.0-rc.6",
     "vue-material": "^1.0.0-beta-14"
   },
   "devDependencies": {

tools/android/dependency_analysis/js/src/class_view.js

@@ -22,6 +22,8 @@ import {
 
 import 'vue-material/dist/vue-material.min.css';
 
+import VModal from 'vue-js-modal';
+
 document.addEventListener('DOMContentLoaded', () => {
   loadGraph().then(data => {
     Vue.use(MdButton);
@@ -34,6 +36,8 @@ document.addEventListener('DOMContentLoaded', () => {
     Vue.use(MdRadio);
     Vue.use(MdSubheader);
 
+    Vue.use(VModal, {dialog: true});
+
     new Vue({
       el: '#class-graph-page',
       render: createElement => createElement(
@@ -41,6 +45,7 @@ document.addEventListener('DOMContentLoaded', () => {
           {
             props: {
               graphJson: data.class_graph,
+              graphMetadata: data.build_metadata,
             },
           },
       ),

tools/android/dependency_analysis/js/src/package_view.js

@@ -22,6 +22,8 @@ import {
 
 import 'vue-material/dist/vue-material.min.css';
 
+import VModal from 'vue-js-modal';
+
 document.addEventListener('DOMContentLoaded', () => {
   loadGraph().then(data => {
     Vue.use(MdButton);
@@ -34,6 +36,8 @@ document.addEventListener('DOMContentLoaded', () => {
     Vue.use(MdRadio);
     Vue.use(MdSubheader);
 
+    Vue.use(VModal, {dialog: true});
+
     new Vue({
       el: '#package-graph-page',
       render: createElement => createElement(
@@ -41,6 +45,7 @@ document.addEventListener('DOMContentLoaded', () => {
           {
             props: {
               graphJson: data.package_graph,
+              graphMetadata: data.build_metadata,
             },
           },
       ),

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

@@ -4,12 +4,21 @@
 
 <template>
   <div id="page-container">
+    <v-dialog />
     <div id="title-and-graph-container">
+      <div
+          id="title-and-metadata">
         <div
             id="title"
             class="md-headline">
           Clank Dependency Viewer - Class Graph
         </div>
+        <div
+            id="graph-metadata-info">
+          <GraphMetadataInfo
+              :graph-metadata="graphMetadata"/>
+        </div>
+      </div>
       <GraphVisualization
           :graph-update-triggers="[
             getNodeGroup,
@@ -101,6 +110,7 @@ import GraphDisplayPanel from './graph_display_panel.vue';
 import GraphDisplaySettings from './graph_display_settings.vue';
 import GraphFilterInput from './graph_filter_input.vue';
 import GraphFilterItems from './graph_filter_items.vue';
+import GraphMetadataInfo from './graph_metadata_info.vue';
 import GraphSelectedNodeDetails from './graph_selected_node_details.vue';
 import GraphVisualization from './graph_visualization.vue';
 import NumericInput from './numeric_input.vue';
@@ -134,12 +144,14 @@ const ClassGraphPage = {
     GraphDisplaySettings,
     GraphFilterInput,
     GraphFilterItems,
+    GraphMetadataInfo,
     GraphSelectedNodeDetails,
     GraphVisualization,
     NumericInput,
   },
   props: {
     graphJson: Object,
+    graphMetadata: Object,
   },
 
   /**
@@ -291,7 +303,15 @@ export default ClassGraphPage;
 </style>
 
 <style scoped>
-#title {
+
+#title-and-metadata {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+#title, #graph-metadata-info {
   padding: 10px;
 }
 

tools/android/dependency_analysis/js/src/vue_components/graph_metadata_info.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>
+  <MdButton
+      id="info-button"
+      class="md-icon-button md-dense"
+      @click="openMetadataModal">
+    <MdIcon>info</MdIcon>
+  </MdButton>
+</template>
+
+<script>
+
+// @vue/component
+const GraphMetadataInfo = {
+  props: {
+    graphMetadata: Object,
+  },
+  methods: {
+    openMetadataModal: function() {
+      this.$modal.show('dialog', {
+        title: 'Graph Metadata',
+        text: `<p>Commit Hash: ${this.graphMetadata.commit_hash}</p>` +
+            `<p>Commit Time: ${this.graphMetadata.commit_time}</p>` +
+            `<p>Cr-Commit-Position: ${this.graphMetadata.commit_cr_position}` +
+            `</p>`,
+        buttons: [
+          {
+            title: 'Close',
+            handler: () => {
+              this.$modal.hide('dialog')
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+
+export default GraphMetadataInfo;
+</script>
+
+<style scoped>
+</style>

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

@@ -4,12 +4,21 @@
 
 <template>
   <div id="page-container">
+    <v-dialog />
     <div id="title-and-graph-container">
+      <div
+          id="title-and-metadata">
         <div
             id="title"
             class="md-headline">
           Clank Dependency Viewer - Package Graph
         </div>
+        <div
+            id="graph-metadata-info">
+          <GraphMetadataInfo
+              :graph-metadata="graphMetadata"/>
+        </div>
+      </div>
       <GraphVisualization
           :graph-update-triggers="[
             displaySettingsData,
@@ -93,6 +102,7 @@ import GraphDisplayPanel from './graph_display_panel.vue';
 import GraphDisplaySettings from './graph_display_settings.vue';
 import GraphFilterInput from './graph_filter_input.vue';
 import GraphFilterItems from './graph_filter_items.vue';
+import GraphMetadataInfo from './graph_metadata_info.vue';
 import GraphSelectedNodeDetails from './graph_selected_node_details.vue';
 import GraphVisualization from './graph_visualization.vue';
 import NumericInput from './numeric_input.vue';
@@ -105,6 +115,7 @@ const PackageGraphPage = {
     GraphDisplaySettings,
     GraphFilterInput,
     GraphFilterItems,
+    GraphMetadataInfo,
     GraphSelectedNodeDetails,
     GraphVisualization,
     NumericInput,
@@ -112,6 +123,7 @@ const PackageGraphPage = {
   },
   props: {
     graphJson: Object,
+    graphMetadata: Object,
   },
 
   /**
@@ -249,7 +261,15 @@ export default PackageGraphPage;
 </style>
 
 <style scoped>
-#title {
+
+#title-and-metadata {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+#title, #graph-metadata-info {
   padding: 10px;
 }