[Lorenz] Add presets for graph display settings

Two presets have been added, based off some combinations of settings
found to be useful. More granular customization has been moved to an
expandable "advanced settings" panel.

Bug: 1112940
Change-Id: I3aae3635642a8cc74526ec4e1e8c0b6bfc898cab
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2337413Reviewed-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@{#795963}

tools/android/dependency_analysis/js/src/display_settings_data.js

@@ -15,6 +15,32 @@ const GraphEdgeColor = {
   BLUE_TO_RED: 'blue-to-red',
 };
 
+/**
+ * Various different display setting presets.
+ * @enum {string}
+ */
+const DisplaySettingsPreset = {
+  CUSTOM: 'Custom',
+  COLOR_ON_HOVER: 'Red-blue on hover',
+  GREY_VIEW: 'Constant grey gradient',
+};
+
+// A map from DisplaySettingsPreset to display setting objects. The keys in each
+// object should correspond to properties of NodeFilterData.
+const PRESET_SETTINGS = {
+  [DisplaySettingsPreset.CUSTOM]: {}, // Applying the custom preset is a no-op.
+  [DisplaySettingsPreset.COLOR_ON_HOVER]: {
+    'curveEdges': true,
+    'colorOnlyOnHover': true,
+    'graphEdgeColor': GraphEdgeColor.BLUE_TO_RED,
+  },
+  [DisplaySettingsPreset.GREY_VIEW]: {
+    'curveEdges': false,
+    'colorOnlyOnHover': false,
+    'graphEdgeColor': GraphEdgeColor.GREY_GRADIENT,
+  },
+};
+
 /**
  * Underlying data for node filtering. The UI shows a "filter list" that
  * displays nodes of interest, and each can be toggled on/off using a checkbox.
@@ -104,6 +130,8 @@ class NodeFilterData {
 class DisplaySettingsData {
   /** Sets up default values for display settings. */
   constructor() {
+    /** @public {!DisplaySettingsPreset} */
+    this.displaySettingsPreset = DisplaySettingsPreset.CUSTOM;
     /** @public {!NodeFilterData} */
     this.nodeFilterData = new NodeFilterData();
     /** @public {number} */
@@ -118,11 +146,22 @@ class DisplaySettingsData {
     this.graphEdgeColor = GraphEdgeColor.GREY_GRADIENT;
   }
 
+  /**
+   * Applies a preset by copying all its properties to the current display
+   * settings, overwriting existing values.
+   * @param {string} presetName The key of the preset to apply.
+   */
+  applyPreset(presetName) {
+    Object.assign(this, PRESET_SETTINGS[presetName]);
+  }
+
   /**
    * Updates a UrlProcessor with all contained data.
    * @param {!UrlProcessor} urlProcessor The UrlProcessor to update.
    */
   updateUrlProcessor(urlProcessor) {
+    urlProcessor.append(URL_PARAM_KEYS.DISPLAY_SETTINGS_PRESET,
+        this.displaySettingsPreset);
     urlProcessor.append(URL_PARAM_KEYS.INBOUND_DEPTH, this.inboundDepth);
     urlProcessor.append(URL_PARAM_KEYS.OUTBOUND_DEPTH, this.outboundDepth);
     urlProcessor.append(URL_PARAM_KEYS.CURVE_EDGES, this.curveEdges);
@@ -143,6 +182,8 @@ class DisplaySettingsData {
    * @param {!UrlProcessor} urlProcessor The UrlProcessor to read from.
    */
   readUrlProcessor(urlProcessor) {
+    this.displaySettingsPreset = urlProcessor.getString(
+        URL_PARAM_KEYS.DISPLAY_SETTINGS_PRESET, this.displaySettingsPreset);
     this.inboundDepth = urlProcessor.getInt(
         URL_PARAM_KEYS.INBOUND_DEPTH, this.inboundDepth);
     this.outboundDepth = urlProcessor.getInt(
@@ -204,7 +245,8 @@ class ClassDisplaySettingsData extends DisplaySettingsData {
 class PackageDisplaySettingsData extends DisplaySettingsData {}
 
 export {
-  GraphEdgeColor,
   ClassDisplaySettingsData,
+  DisplaySettingsPreset,
+  GraphEdgeColor,
   PackageDisplaySettingsData,
 };

tools/android/dependency_analysis/js/src/url_processor.js

@@ -14,6 +14,7 @@ const PagePathName = {
 // Keys for identifying URL params.
 const URL_PARAM_KEYS = {
   // Common keys:
+  DISPLAY_SETTINGS_PRESET: 'dsp',
   FILTER_NAMES: 'fn',
   FILTER_CHECKED: 'fc',
   INBOUND_DEPTH: 'ibd',

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

@@ -7,7 +7,8 @@
     <label>Convex hull display:</label>
     <div
         v-for="hullDisplay in HullDisplay"
-        :key="hullDisplay">
+        :key="hullDisplay"
+        @change="displayOptionChanged">
       <input
           :id="hullDisplay"
           v-model="internalSelectedHullDisplay"
@@ -22,6 +23,7 @@
 </template>
 
 <script>
+import {CUSTOM_EVENTS} from '../vue_custom_events.js';
 import {HullDisplay} from '../class_view_consts.js';
 
 // @vue/component
@@ -40,6 +42,11 @@ const ClassGraphHullSettings = {
       },
     },
   },
+  methods: {
+    displayOptionChanged: function() {
+      this.$emit(CUSTOM_EVENTS.DISPLAY_OPTION_CHANGED);
+    },
+  },
 };
 
 export default ClassGraphHullSettings;

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

@@ -40,10 +40,17 @@
           @[CUSTOM_EVENTS.NODE_CLICKED]="graphNodeClicked"
           @[CUSTOM_EVENTS.NODE_DOUBLE_CLICKED]="graphNodeDoubleClicked"/>
       <div id="node-details-container">
-        <GraphDisplaySettings
-            :display-settings-data="displaySettingsData"/>
-        <ClassGraphHullSettings
-            :selected-hull-display.sync="displaySettingsData.hullDisplay"/>
+        <GraphDisplayPanel
+            :display-settings-data="displaySettingsData"
+            :display-settings-preset.sync="
+              displaySettingsData.displaySettingsPreset">
+          <GraphDisplaySettings
+              :display-settings-data="displaySettingsData"
+              @[CUSTOM_EVENTS.DISPLAY_OPTION_CHANGED]="displayOptionChanged"/>
+          <ClassGraphHullSettings
+              :selected-hull-display.sync="displaySettingsData.hullDisplay"
+              @[CUSTOM_EVENTS.DISPLAY_OPTION_CHANGED]="displayOptionChanged"/>
+        </GraphDisplayPanel>
         <GraphSelectedNodeDetails
             :selected-node-details-data="pageModel.selectedNodeDetailsData"
             @[CUSTOM_EVENTS.DETAILS_CHECK_NODE]="filterAddOrCheckNode"
@@ -62,12 +69,16 @@ import {PagePathName, UrlProcessor} from '../url_processor.js';
 
 import {ClassNode, GraphNode} from '../graph_model.js';
 import {PageModel} from '../page_model.js';
-import {ClassDisplaySettingsData} from '../display_settings_data.js';
+import {
+  ClassDisplaySettingsData,
+  DisplaySettingsPreset,
+} 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';
+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';
@@ -92,6 +103,7 @@ const ClassGraphPage = {
   components: {
     ClassDetailsPanel,
     ClassGraphHullSettings,
+    GraphDisplayPanel,
     GraphDisplaySettings,
     GraphFilterInput,
     GraphFilterItems,
@@ -163,6 +175,10 @@ const ClassGraphPage = {
     }
   },
   methods: {
+    displayOptionChanged: function() {
+      this.displaySettingsData.displaySettingsPreset =
+        DisplaySettingsPreset.CUSTOM;
+    },
     updateDocumentUrl() {
       const urlProcessor = UrlProcessor.createForOutput();
       this.displaySettingsData.updateUrlProcessor(urlProcessor);

tools/android/dependency_analysis/js/src/vue_components/graph_display_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 id="display-panel">
+    <div id="preset-container">
+      <select
+          v-model="internalDisplaySettingsPreset"
+          @change="applySelectedPreset">
+        <option
+            v-for="presetName in DisplaySettingsPreset"
+            :key="presetName"
+            :value="presetName">
+          {{ presetName }}
+        </option>
+      </select>
+      <button @click="settingsExpanded = !settingsExpanded">
+        {{ settingsExpanded ? 'Collapse' : 'Expand' }} Advanced Settings
+      </button>
+    </div>
+    <slot v-if="settingsExpanded"/>
+  </div>
+</template>
+
+<script>
+import {DisplaySettingsPreset} from '../display_settings_data.js';
+
+// @vue/component
+const GraphDisplaySettings = {
+  props: {
+    displaySettingsData: Object,
+    displaySettingsPreset: String,
+  },
+  data: function() {
+    return {
+      settingsExpanded: false,
+    };
+  },
+  computed: {
+    DisplaySettingsPreset: () => DisplaySettingsPreset,
+    internalDisplaySettingsPreset: {
+      get: function() {
+        return this.displaySettingsPreset;
+      },
+      set: function(newValue) {
+        this.$emit('update:displaySettingsPreset', newValue);
+      },
+    },
+  },
+  methods: {
+    applySelectedPreset() {
+      // nextTick is needed here since we need to wait for the parent/child data
+      // sync on `displaySettingsPreset` to finish.
+      this.$nextTick(() => this.displaySettingsData.applyPreset(
+          this.internalDisplaySettingsPreset));
+    },
+  },
+};
+
+export default GraphDisplaySettings;
+</script>
+
+<style scoped>
+#preset-container {
+  display: flex;
+  flex-direction: row;
+}
+
+#display-panel {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+}
+</style>

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

@@ -8,20 +8,23 @@
       <input
           id="curve-edges"
           v-model="displaySettingsData.curveEdges"
-          type="checkbox">
+          type="checkbox"
+          @change="displayOptionChanged">
       <label for="curve-edges">Curve graph edges</label>
     </div>
     <div>
       <input
           id="color-on-hover"
           v-model="displaySettingsData.colorOnlyOnHover"
-          type="checkbox">
+          type="checkbox"
+          @change="displayOptionChanged">
       <label for="color-on-hover">Color graph edges only on node hover</label>
     </div>
     <label for="graph-edge-color">Graph edge color scheme:</label>
     <select
         id="graph-edge-color"
-        v-model="displaySettingsData.graphEdgeColor">
+        v-model="displaySettingsData.graphEdgeColor"
+        @change="displayOptionChanged">
       <option
           v-for="edgeColor in GraphEdgeColor"
           :key="edgeColor"
@@ -33,6 +36,7 @@
 </template>
 
 <script>
+import {CUSTOM_EVENTS} from '../vue_custom_events.js';
 import {GraphEdgeColor} from '../display_settings_data.js';
 
 // @vue/component
@@ -43,6 +47,11 @@ const GraphDisplaySettings = {
   computed: {
     GraphEdgeColor: () => GraphEdgeColor,
   },
+  methods: {
+    displayOptionChanged: function() {
+      this.$emit(CUSTOM_EVENTS.DISPLAY_OPTION_CHANGED);
+    },
+  },
 };
 
 export default GraphDisplaySettings;

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

@@ -38,8 +38,14 @@
           @[CUSTOM_EVENTS.NODE_CLICKED]="graphNodeClicked"
           @[CUSTOM_EVENTS.NODE_DOUBLE_CLICKED]="graphNodeDoubleClicked"/>
       <div id="node-details-container">
-        <GraphDisplaySettings
-            :display-settings-data="displaySettingsData"/>
+        <GraphDisplayPanel
+            :display-settings-data="displaySettingsData"
+            :display-settings-preset.sync="
+              displaySettingsData.displaySettingsPreset">
+          <GraphDisplaySettings
+              :display-settings-data="displaySettingsData"
+              @[CUSTOM_EVENTS.DISPLAY_OPTION_CHANGED]="displayOptionChanged"/>
+        </GraphDisplayPanel>
         <GraphSelectedNodeDetails
             :selected-node-details-data="pageModel.selectedNodeDetailsData"
             @[CUSTOM_EVENTS.DETAILS_CHECK_NODE]="filterAddOrCheckNode"
@@ -57,10 +63,14 @@ import {PagePathName, UrlProcessor} from '../url_processor.js';
 
 import {GraphNode} from '../graph_model.js';
 import {PageModel} from '../page_model.js';
-import {PackageDisplaySettingsData} from '../display_settings_data.js';
+import {
+  PackageDisplaySettingsData,
+  DisplaySettingsPreset,
+} from '../display_settings_data.js';
 import {parsePackageGraphModelFromJson} from '../process_graph_json.js';
 import {shortenPackageName} from '../chrome_hooks.js';
 
+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';
@@ -72,6 +82,7 @@ import PackageDetailsPanel from './package_details_panel.vue';
 // @vue/component
 const PackageGraphPage = {
   components: {
+    GraphDisplayPanel,
     GraphDisplaySettings,
     GraphFilterInput,
     GraphFilterItems,
@@ -138,6 +149,10 @@ const PackageGraphPage = {
     }
   },
   methods: {
+    displayOptionChanged: function() {
+      this.displaySettingsData.displaySettingsPreset =
+        DisplaySettingsPreset.CUSTOM;
+    },
     updateDocumentUrl() {
       const urlProcessor = UrlProcessor.createForOutput();
       this.displaySettingsData.updateUrlProcessor(urlProcessor);

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

@@ -7,6 +7,8 @@
 const CUSTOM_EVENTS = {
   DETAILS_CHECK_NODE: 'details-check-node',
   DETAILS_UNCHECK_NODE: 'details-uncheck-node',
+  DISPLAY_OPTION_CHANGED: 'display-option-changed',
+  DISPLAY_PRESET_SELECTED: 'display-preset-selected',
   FILTER_REMOVE: 'filter-remove',
   FILTER_CHECK_ALL: 'filter-check-all',
   FILTER_UNCHECK_ALL: 'filter-uncheck-all',