[Lorenz] Check/uncheck nodes in filter on double-click

A shortcut has been added to check/uncheck nodes in the filter on
double-click in the visualization. The behavior is the same as clicking
the button manually on the node details panel.

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

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

@@ -268,6 +268,13 @@ class HullColorManager {
  * @param {!GraphNode} node The node that was clicked.
  */
 
+/**
+ * A callback to be triggered whenever a node is double-clicked in the
+ * visualization.
+ * @callback OnNodeDoubleClickedCallback
+ * @param {!GraphNode} node The node that was double-clicked.
+ */
+
 /**
  * Returns the group a node is in, or `null` if the node shouldn't be grouped.
  * @callback GetNodeGroupCallback
@@ -299,6 +306,8 @@ class GraphView {
     this.getNodeGroup_ = null;
     /** @private @type {?OnNodeClickedCallback} */
     this.onNodeClicked_ = null;
+    /** @private @type {?OnNodeDoubleClickedCallback} */
+    this.onNodeDoubleClicked_ = null;
 
     const svg = d3.select('#graph-svg');
     const graphGroup = svg.append('g'); // Contains entire graph (for zoom/pan).
@@ -314,7 +323,8 @@ class GraphView {
         .scaleExtent([0.25, 10])
         .on('zoom', () =>
           graphGroup.attr('transform', d3.event.transform),
-        ));
+        ))
+        .on('dblclick.zoom', null);
 
     // The order of these groups decide the SVG paint order (since we append
     // sequentially), we want hulls below edges below nodes below labels.
@@ -390,6 +400,16 @@ class GraphView {
     this.onNodeClicked_ = onNodeClicked;
   }
 
+  /**
+   * Binds the event when a node is double-clicked in the graph to a given
+   * callback.
+   * @param {!OnNodeDoubleClickedCallback} onNodeDoubleClicked The callback to
+   *   bind to.
+   */
+  registerOnNodeDoubleClicked(onNodeDoubleClicked) {
+    this.onNodeDoubleClicked_ = onNodeDoubleClicked;
+  }
+
   /**
    * Assigns the node group accessor to a given function.
    * @param {!GetNodeGroupCallback} getNodeGroup The function to assign to.
@@ -690,6 +710,7 @@ class GraphView {
           return enter.append('circle')
               .attr('r', 5)
               .attr('stroke', node => getNodeColor(node))
+              .on('dblclick', node => this.onNodeDoubleClicked_(node))
               .on('mousedown', node => this.onNodeClicked_(node))
               .on('mouseenter', node => {
                 this.hoveredNodeManager_.setHoveredNode(node);

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

@@ -31,7 +31,8 @@
           :page-model="pageModel"
           :display-settings-data="displaySettingsData"
           :get-node-group="getNodeGroup"
-          @[CUSTOM_EVENTS.NODE_CLICKED]="graphNodeClicked"/>
+          @[CUSTOM_EVENTS.NODE_CLICKED]="graphNodeClicked"
+          @[CUSTOM_EVENTS.NODE_DOUBLE_CLICKED]="graphNodeDoubleClicked"/>
       <div id="node-details-container">
         <GraphDisplaySettings
             :display-settings-data="displaySettingsData"/>
@@ -198,6 +199,16 @@ const ClassGraphPage = {
     graphNodeClicked: function(node) {
       this.pageModel.selectedNodeDetailsData.selectedNode = node;
     },
+    /**
+     * @param {!GraphNode} node The double-clicked node.
+     */
+    graphNodeDoubleClicked: function(node) {
+      if (node.visualizationState.selectedByFilter) {
+        this.filterUncheckNode(node.id);
+      } else {
+        this.filterAddOrCheckNode(node.id);
+      }
+    },
   },
 };
 

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

@@ -62,6 +62,8 @@ const GraphVisualization = {
     this.graphView = new GraphView();
     this.graphView.registerOnNodeClicked(
         node => this.$emit(CUSTOM_EVENTS.NODE_CLICKED, node));
+    this.graphView.registerOnNodeDoubleClicked(
+        node => this.$emit(CUSTOM_EVENTS.NODE_DOUBLE_CLICKED, node));
     this.graphView.registerGetNodeGroup(this.getNodeGroup);
   },
 };

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

@@ -30,7 +30,8 @@
           ]"
           :page-model="pageModel"
           :display-settings-data="displaySettingsData"
-          @[CUSTOM_EVENTS.NODE_CLICKED]="graphNodeClicked"/>
+          @[CUSTOM_EVENTS.NODE_CLICKED]="graphNodeClicked"
+          @[CUSTOM_EVENTS.NODE_DOUBLE_CLICKED]="graphNodeDoubleClicked"/>
       <div id="node-details-container">
         <GraphDisplaySettings
             :display-settings-data="displaySettingsData"/>
@@ -174,6 +175,16 @@ const PackageGraphPage = {
     graphNodeClicked: function(node) {
       this.pageModel.selectedNodeDetailsData.selectedNode = node;
     },
+    /**
+     * @param {!GraphNode} node The double-clicked node.
+     */
+    graphNodeDoubleClicked: function(node) {
+      if (node.visualizationState.selectedByFilter) {
+        this.filterUncheckNode(node.id);
+      } else {
+        this.filterAddOrCheckNode(node.id);
+      }
+    },
   },
 };
 

tools/android/dependency_analysis/js/src/vue_custom_events.js

@@ -12,6 +12,7 @@ const CUSTOM_EVENTS = {
   FILTER_UNCHECK_ALL: 'filter-uncheck-all',
   FILTER_SUBMITTED: 'filter-submitted',
   NODE_CLICKED: 'node-clicked',
+  NODE_DOUBLE_CLICKED: 'node-double-clicked',
 };
 
 export {