From 36f80b0bb1468797ae6282d551a4d7c1630fa0e0 Mon Sep 17 00:00:00 2001
From: Priyanka <priyankaspatel@google.com>
Date: Tue, 14 Sep 2021 16:07:34 +0000
Subject: [PATCH] Minor display changes for transitions and errors.

Split the transitions and errors search into separate tabs in the search
bar. Shortened the error tooltip on trace views.

Bug: b/199891856

Test: upload any trace with errors and transitions (see bug for
example).

Change-Id: I9bde012761bcd83933ffb269442e49133b3b75e5
---
 tools/winscope/src/App.vue                | 15 +++++-
 tools/winscope/src/DefaultTreeElement.vue |  8 ++-
 tools/winscope/src/Searchbar.vue          | 60 ++++++++++++++++-------
 tools/winscope/src/utils/consts.js        |  3 +-
 4 files changed, 65 insertions(+), 21 deletions(-)

diff --git a/tools/winscope/src/App.vue b/tools/winscope/src/App.vue
index 78e3dec25..95aa8a7d1 100644
--- a/tools/winscope/src/App.vue
+++ b/tools/winscope/src/App.vue
@@ -165,12 +165,23 @@ export default {
     },
     /** Set flicker mode check for if there are tag/error traces uploaded*/
     shouldUpdateTagAndErrorTraces() {
-      return this.tagFiles.length > 0 || this.errorFiles.length > 0;
+      return this.hasTagTrace() || this.hasErrorTrace();
+    },
+    hasTagTrace() {
+      return this.tagFiles.length > 0;
+    },
+    hasErrorTrace() {
+      return this.errorFiles.length > 0;
     },
     /** Activate flicker search tab if tags/errors uploaded*/
     updateSearchTypes() {
       this.searchTypes = [SEARCH_TYPE.TIMESTAMP];
-      if (this.tagAndErrorTraces) this.searchTypes.push(SEARCH_TYPE.TAG);
+      if (this.hasTagTrace()) {
+        this.searchTypes.push(SEARCH_TYPE.TRANSITIONS);
+      }
+      if (this.hasErrorTrace()) {
+        this.searchTypes.push(SEARCH_TYPE.ERRORS);
+      }
     },
     /** Filter data view files by current show settings*/
     updateShowFileTypes() {
diff --git a/tools/winscope/src/DefaultTreeElement.vue b/tools/winscope/src/DefaultTreeElement.vue
index 96c7dcf09..ac03f9b8f 100644
--- a/tools/winscope/src/DefaultTreeElement.vue
+++ b/tools/winscope/src/DefaultTreeElement.vue
@@ -52,7 +52,7 @@
     </div>
     <div class="flicker-tags" v-for="error in errors" :key="error.message">
       <Arrow class="error-arrow"/>
-      <md-tooltip md-direction="right"> Error: {{error.message}} </md-tooltip>
+      <md-tooltip md-direction="right"> {{errorTooltip(error.message)}} </md-tooltip>
     </div>
   </span>
 </template>
@@ -80,6 +80,12 @@ export default {
     transitionTooltip(transition) {
       return transitionMap.get(transition).desc;
     },
+    errorTooltip(errorMessage) {
+      if (errorMessage.length>100) {
+        return `Error: ${errorMessage.substring(0,100)}...`;
+      }
+      return `Error: ${errorMessage}`;
+    },
   },
   components: {
     Arrow,
diff --git a/tools/winscope/src/Searchbar.vue b/tools/winscope/src/Searchbar.vue
index efc8f0a2a..3c06a28e7 100644
--- a/tools/winscope/src/Searchbar.vue
+++ b/tools/winscope/src/Searchbar.vue
@@ -27,19 +27,19 @@
           />
         </md-field>
         <md-button
-            class="md-dense md-primary search-timestamp-button"
-            @click="updateSearchForTimestamp"
-          >
-            Go to timestamp
-          </md-button>
+          class="md-dense md-primary search-timestamp-button"
+          @click="updateSearchForTimestamp"
+        >
+          Go to timestamp
+        </md-button>
       </div>
 
-      <div class="dropdown-content" v-if="isTagSearch()">
+      <div class="dropdown-content" v-if="isTransitionSearch()">
         <table>
           <tr class="header">
             <th style="width: 10%">Global Start</th>
             <th style="width: 10%">Global End</th>
-            <th style="width: 80%">Description</th>
+            <th style="width: 80%">Transition</th>
           </tr>
 
           <tr v-for="item in filteredTransitionsAndErrors" :key="item.id">
@@ -67,7 +67,29 @@
             >
               {{ transitionDesc(item.transition) }}
             </td>
+          </tr>
+        </table>
+        <md-field md-inline class="search-input">
+          <label>
+            Filter by transition name. Click to navigate to closest
+            timestamp in active timeline.
+          </label>
+          <md-input
+            v-model="searchInput"
+            v-on:focus="updateInputMode(true)"
+            v-on:blur="updateInputMode(false)"
+          />
+        </md-field>
+      </div>
 
+      <div class="dropdown-content" v-if="isErrorSearch()">
+        <table>
+          <tr class="header">
+            <th style="width: 10%">Timestamp</th>
+            <th style="width: 90%">Error Message</th>
+          </tr>
+
+          <tr v-for="item in filteredTransitionsAndErrors" :key="item.id">
             <td
               v-if="!isTransition(item)"
               class="inline-time"
@@ -75,21 +97,20 @@
             >
               {{ errorDesc(item.timestamp) }}
             </td>
-            <td v-if="!isTransition(item)">-</td>
             <td
               v-if="!isTransition(item)"
               class="inline-error"
               @click="setCurrentTimestamp(item.timestamp)"
             >
-              Error: {{item.message}}
+              {{item.message}}
             </td>
           </tr>
         </table>
         <md-field md-inline class="search-input">
-          <label
-            >Filter by transition or error message. Click to navigate to closest
-            timestamp in active timeline.</label
-          >
+          <label>
+            Filter by error message. Click to navigate to closest
+            timestamp in active timeline.
+          </label>
           <md-input
             v-model="searchInput"
             v-on:focus="updateInputMode(true)"
@@ -141,7 +162,8 @@ export default {
       var tags = [];
       var filter = this.searchInput.toUpperCase();
       this.presentTags.forEach((tag) => {
-        if (tag.transition.includes(filter)) tags.push(tag);
+        const tagTransition = tag.transition.toUpperCase();
+        if (tagTransition.includes(filter)) tags.push(tag);
       });
       return tags;
     },
@@ -150,7 +172,8 @@ export default {
       var tagsAndErrors = [...this.filteredTags()];
       var filter = this.searchInput.toUpperCase();
       this.presentErrors.forEach((error) => {
-        if (error.message.includes(filter)) tagsAndErrors.push(error);
+        const errorMessage = error.message.toUpperCase();
+        if (errorMessage.includes(filter)) tagsAndErrors.push(error);
       });
       // sort into chronological order
       tagsAndErrors.sort((a, b) => (a.timestamp > b.timestamp ? 1 : -1));
@@ -206,8 +229,11 @@ export default {
       this.setCurrentTimestamp(closestTimestamp);
     },
 
-    isTagSearch() {
-      return this.searchType === SEARCH_TYPE.TAG;
+    isTransitionSearch() {
+      return this.searchType === SEARCH_TYPE.TRANSITIONS;
+    },
+    isErrorSearch() {
+      return this.searchType === SEARCH_TYPE.ERRORS;
     },
     isTimestampSearch() {
       return this.searchType === SEARCH_TYPE.TIMESTAMP;
diff --git a/tools/winscope/src/utils/consts.js b/tools/winscope/src/utils/consts.js
index 52124ce90..2420eecd8 100644
--- a/tools/winscope/src/utils/consts.js
+++ b/tools/winscope/src/utils/consts.js
@@ -34,7 +34,8 @@ const NAVIGATION_STYLE = {
 };
 
 const SEARCH_TYPE = {
-  TAG: 'Transitions and Errors',
+  TRANSITIONS: 'Transitions',
+  ERRORS: 'Errors',
   TIMESTAMP: 'Timestamp',
 };