[Lorenz] Enforce a minimum in/outbound depth of 0

Inbound and outbound depths must be >= 0. Previously, users could select
values less than 0, this is no longer the case.

Bug: 1102546
Change-Id: I479984448987a30d0b699bcae55336de840aff8f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2340364
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@{#795682}

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

@@ -20,11 +20,13 @@
       <NumericInput
           description="Change inbound (blue) depth:"
           input-id="inbound-input"
-          :input-value.sync="displaySettingsData.inboundDepth"/>
+          :input-value.sync="displaySettingsData.inboundDepth"
+          :min-value="0"/>
       <NumericInput
           description="Change outbound (yellow) depth:"
           input-id="outbound-input"
-          :input-value.sync="displaySettingsData.outboundDepth"/>
+          :input-value.sync="displaySettingsData.outboundDepth"
+          :min-value="0"/>
     </div>
     <div id="graph-and-node-details-container">
       <GraphVisualization

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

@@ -29,14 +29,24 @@ const NumericInput = {
     description: String,
     inputId: String,
     inputValue: Number,
+    minValue: Number,
   },
   computed: {
     internalInputValue: {
       get: function() {
         return this.inputValue;
       },
-      set: function(newValue) {
-        this.$emit('update:inputValue', newValue);
+      set: function(newValue, oldValue) {
+        const validNewValue = Math.max(this.minValue, newValue);
+        this.$emit('update:inputValue', validNewValue);
+        // If `inputValue` is currently `minValue` and the user submits input <
+        // `minValue`, `inputValue` will be updated to `minValue` (which, since
+        // it already was `minValue`, does not trigger a rerender from Vue's
+        // reactivity system). In these cases, we need to force an update to
+        // sync the UI with the data.
+        if (validNewValue === oldValue) {
+          this.$forceUpdate();
+        }
       },
     },
   },

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

@@ -20,11 +20,13 @@
       <NumericInput
           description="Change inbound (blue) depth:"
           input-id="inbound-input"
-          :input-value.sync="displaySettingsData.inboundDepth"/>
+          :input-value.sync="displaySettingsData.inboundDepth"
+          :min-value="0"/>
       <NumericInput
           description="Change outbound (yellow) depth:"
           input-id="outbound-input"
-          :input-value.sync="displaySettingsData.outboundDepth"/>
+          :input-value.sync="displaySettingsData.outboundDepth"
+          :min-value="0"/>
     </div>
     <div id="graph-and-node-details-container">
       <GraphVisualization