[Lorenz] Shorten displayed names in filter input + list

Package names are now shortened like they are in the SVG. Class names
(for example, "packageName.className") are shortened as "className
(shortenedPackageName)". The filter input's dropdown is now sorted by
these shortened names instead of the original ones.

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

tools/android/dependency_analysis/js/src/chrome_hooks.js

@@ -22,7 +22,20 @@ function shortenClassName(name) {
   return name.substring(name.lastIndexOf('.') + 1);
 }
 
+/**
+ * Shortens a class name, including its package in parentheses at the end.
+ * @param {string} name The full class name to shorten.
+ * @return {string} The shortened class name.
+ */
+function shortenClassNameWithPackage(name) {
+  const lastDotIdx = name.lastIndexOf('.');
+  const packageName = name.substring(0, lastDotIdx);
+  const className = name.substring(lastDotIdx + 1);
+  return `${className} (${shortenPackageName(packageName)})`;
+}
+
 export {
   shortenPackageName,
   shortenClassName,
+  shortenClassNameWithPackage,
 };

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

@@ -7,9 +7,11 @@
     <div id="page-controls">
       <GraphFilterInput
           :node-ids="pageModel.getNodeIds()"
+          :shorten-name="filterShortenName"
           @[CUSTOM_EVENTS.FILTER_SUBMITTED]="filterAddOrCheckNode"/>
       <GraphFilterItems
           :node-filter-data="displaySettingsData.nodeFilterData"
+          :shorten-name="filterShortenName"
           @[CUSTOM_EVENTS.FILTER_REMOVE]="filterRemoveNode"
           @[CUSTOM_EVENTS.FILTER_CHECK_ALL]="filterCheckAll"
           @[CUSTOM_EVENTS.FILTER_UNCHECK_ALL]="filterUncheckAll"/>
@@ -58,6 +60,7 @@ import {ClassNode, GraphNode} from '../graph_model.js';
 import {PageModel} from '../page_model.js';
 import {ClassDisplaySettingsData} from '../display_settings_data.js';
 import {parseClassGraphModelFromJson} from '../process_graph_json.js';
+import {shortenClassNameWithPackage} from '../chrome_hooks.js';
 
 import ClassDetailsPanel from './class_details_panel.vue';
 import ClassGraphHullSettings from './class_graph_hull_settings.vue';
@@ -163,6 +166,7 @@ const ClassGraphPage = {
       const pageUrl = urlProcessor.getUrl(document.URL, PagePathName.CLASS);
       history.replaceState(null, '', pageUrl);
     },
+    filterShortenName: shortenClassNameWithPackage,
     filterRemoveNode: function(nodeName) {
       this.displaySettingsData.nodeFilterData.removeNode(nodeName);
     },

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

@@ -9,6 +9,7 @@
         id="filter-input"
         ref="autocomplete"
         :search="search"
+        :get-result-value="getResultValue"
         @submit="onSelectOption"/>
   </div>
 </template>
@@ -24,17 +25,35 @@ const GraphFilterInput = {
     Autocomplete,
   },
   props: {
-    'nodeIds': Array,
+    nodeIds: Array,
+    shortenName: Function,
+  },
+  data: function() {
+    return {
+      // Sorts the nodes by their shortened names, which will be displayed.
+      // this.shortenName() is cached to improve performance (~150 ms at load).
+      nodeIdsSortedByShortNames: this.nodeIds
+          .map(name => ({
+            realName: name,
+            shortName: this.shortenName(name),
+          }))
+          .sort((a, b) => a.shortName.localeCompare(b.shortName))
+          .map(nameObj => nameObj.realName),
+    };
   },
   methods: {
+    getResultValue: function(result) {
+      return this.shortenName(result);
+    },
+
     search: function(searchTerm) {
-      return this.nodeIds.filter(name => {
+      return this.nodeIdsSortedByShortNames.filter(name => {
         return name.toLowerCase().includes(searchTerm.toLowerCase());
       });
     },
 
     onSelectOption(nodeNameToAdd) {
-      if (!this.nodeIds.includes(nodeNameToAdd)) {
+      if (!this.nodeIdsSortedByShortNames.includes(nodeNameToAdd)) {
         return;
       }
       this.$emit(CUSTOM_EVENTS.FILTER_SUBMITTED, nodeNameToAdd);

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

@@ -23,7 +23,7 @@
           <input
               v-model="node.checked"
               type="checkbox">
-          <div>{{ node.name }}</div>
+          <div>{{ shortenName(node.name) }}</div>
         </div>
       </li>
     </ul>
@@ -37,6 +37,7 @@ import {CUSTOM_EVENTS} from '../vue_custom_events.js';
 const GraphFilterItems = {
   props: {
     nodeFilterData: Object,
+    shortenName: Function,
   },
   data: function() {
     return this.nodeFilterData;

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

@@ -7,9 +7,11 @@
     <div id="page-controls">
       <GraphFilterInput
           :node-ids="pageModel.getNodeIds()"
+          :shorten-name="filterShortenName"
           @[CUSTOM_EVENTS.FILTER_SUBMITTED]="filterAddOrCheckNode"/>
       <GraphFilterItems
           :node-filter-data="displaySettingsData.nodeFilterData"
+          :shorten-name="filterShortenName"
           @[CUSTOM_EVENTS.FILTER_REMOVE]="filterRemoveNode"
           @[CUSTOM_EVENTS.FILTER_CHECK_ALL]="filterCheckAll"
           @[CUSTOM_EVENTS.FILTER_UNCHECK_ALL]="filterUncheckAll"/>
@@ -26,7 +28,6 @@
       <GraphVisualization
           :graph-update-triggers="[
             displaySettingsData,
-            displaySettingsData.nodeFilterData.filterList,
           ]"
           :page-model="pageModel"
           :display-settings-data="displaySettingsData"
@@ -54,6 +55,7 @@ import {GraphNode} from '../graph_model.js';
 import {PageModel} from '../page_model.js';
 import {PackageDisplaySettingsData} from '../display_settings_data.js';
 import {parsePackageGraphModelFromJson} from '../process_graph_json.js';
+import {shortenPackageName} from '../chrome_hooks.js';
 
 import GraphDisplaySettings from './graph_display_settings.vue';
 import GraphFilterInput from './graph_filter_input.vue';
@@ -139,6 +141,7 @@ const PackageGraphPage = {
       const pageUrl = urlProcessor.getUrl(document.URL, PagePathName.PACKAGE);
       history.replaceState(null, '', pageUrl);
     },
+    filterShortenName: shortenPackageName,
     filterRemoveNode: function(nodeName) {
       this.displaySettingsData.nodeFilterData.removeNode(nodeName);
     },