Update the analyzer timeline picker (#3001)

* Update the analyzer timeline picker * Replace v-panel with divs.
google · Dec 6, 2023 · a3a214c · a3a214c
1 parent 33bd484
commit a3a214c
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 53 deletions.
diff --git a/timesketch/frontend-ng/src/components/Analyzer/TimelineChip.vue b/timesketch/frontend-ng/src/components/Analyzer/TimelineChip.vue
@@ -14,15 +14,39 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <template>
-  <v-chip class="timeline-chip" :style="getTimelineStyle()"
-  @click:close="$emit('click:close')"
-  :close="close"
+  <ts-timeline-component
+    :timeline="timeline"
   >
-    <span class="timeline-name-ellipsis">{{ timeline.name }}</span>
-  </v-chip>
+    <template v-slot:processed="slotProps">
+      <v-chip
+        :style="timelineStyle"
+        class="timeline-chip"
+        :ripple="false"
+        :close="close"
+        @click:close="$emit('click:close')"
+      >
+        <div class="chip-content">
+          <v-icon left :color="slotProps.timelineChipColor" size="26" class="ml-n2"> mdi-circle </v-icon>
+          <v-tooltip bottom :disabled="timeline.name.length < 30" open-delay="200">
+            <template v-slot:activator="{ on: onTooltip, attrs }">
+              <span
+                class="timeline-name-ellipsis"
+                v-bind="attrs"
+                v-on="onTooltip"
+                >{{ timeline.name }}</span
+              >
+            </template>
+            <span>{{ timeline.name }}</span>
+          </v-tooltip>
+        </div>
+      </v-chip>
+    </template>
+  </ts-timeline-component>
 </template>
 
 <script>
+import TsTimelineComponent from '../Explore/TimelineComponent'
+
 export default {
   props: {
     timeline: Object,
@@ -31,38 +55,32 @@ export default {
       default: false
     }
   },
-  data() {
-    return {
-    }
+  components: {
+    TsTimelineComponent,
   },
   computed: {
-    sketch() {
-      return this.$store.state.sketch
-    },
-  },
-  methods: {
-    getTimelineStyle() {
+    timelineStyle() {
       return {
-        'background-color': this.normalizeBgColor(this.timeline.color),
-      };
+        backgroundColor: this.$vuetify.theme.dark ? '#4d4d4d' : '#e6e6e6',
+      }
     },
-    normalizeBgColor(bgColor) {
-      return bgColor.startsWith('#') ? bgColor : `#${bgColor}`;
-    }
   },
 }
 </script>
 
+<!-- CSS scoped to this component only -->
 <style scoped lang="scss">
 .timeline-chip {
-  text-decoration: 'none';
-  opacity: '100%';
-}
-.theme--dark.timeline-chip {
-  filter: grayscale(25%);
-  color: #333333;
-}
-.timeline-chip .theme--dark.v-icon{
-  color: #333333;
+  .chip-content {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    width: 300px;
+  }
+
+  .timeline-name-ellipsis {
+    width: 300px;
+  }
 }
 </style>
diff --git a/timesketch/frontend-ng/src/components/Analyzer/TimelineSearch.vue b/timesketch/frontend-ng/src/components/Analyzer/TimelineSearch.vue
@@ -25,7 +25,7 @@ limitations under the License.
     </v-btn>
     <v-autocomplete
       v-model="selectedTimelines"
-      :items="allTimelines"
+      :items="allReadyTimelines"
       outlined
       label="Select timelines for analysis"
       item-text="name"
@@ -34,20 +34,21 @@ limitations under the License.
       class="center-label-height"
     >
       <template v-slot:selection="data">
-        <ts-timeline-chip
+        <ts-analyzer-timeline-chip
+          class="mr-1"
           :timeline="data.item"
           :close="true"
           @click:close="remove(data.item)"
-        ></ts-timeline-chip>
+        ></ts-analyzer-timeline-chip>
       </template>
       <template v-slot:item="data">
         <v-list-item-content>
           <div>
-              <ts-timeline-chip
+              <ts-analyzer-timeline-chip
                 :timeline="data.item"
                 :close="selectedTimelines.includes(data.item.id)"
                 @click:close="remove(data.item)"
-              ></ts-timeline-chip>
+              ></ts-analyzer-timeline-chip>
           </div>
         </v-list-item-content>
       </template>
@@ -56,11 +57,11 @@ limitations under the License.
 </template>
 
 <script>
-import TsTimelineChip from '../Analyzer/TimelineChip'
+import TsAnalyzerTimelineChip from '../Analyzer/TimelineChip'
 
 export default {
   components:{
-    TsTimelineChip,
+    TsAnalyzerTimelineChip,
   },
   props: ['analyzerTimelineId'],
   data() {
@@ -72,7 +73,7 @@ export default {
     sketch() {
       return this.$store.state.sketch
     },
-    allTimelines() {
+    allReadyTimelines() {
       // Sort alphabetically based on timeline name.
       const timelines = this.sketch.timelines.filter(
         tl => tl.status[0].status === 'ready'
@@ -101,7 +102,7 @@ export default {
       this.selectedTimelines = this.selectedTimelines.filter(tl => tl!== timeline.id);
     },
     selectAll () {
-      this.selectedTimelines = [...this.allTimelines.map(tl => tl.id)];
+      this.selectedTimelines = [...this.allReadyTimelines.map(tl => tl.id)];
     },
     unselectAll () {
       this.selectedTimelines = [];
@@ -111,7 +112,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped lang="scss">
   /*
     Enforce a centered positioning of the append-icon. We can remove this once
     Vuetify provides a clean way of centering it.

diff --git a/timesketch/frontend-ng/src/views/Explore.vue b/timesketch/frontend-ng/src/views/Explore.vue
@@ -128,10 +128,13 @@ limitations under the License.
       </div>
 
       <!-- Timeline picker -->
-      <v-expansion-panels v-model="timelinePanel" class="mt-4" multiple flat>
-        <v-expansion-panel active-class="expanded">
-          <v-expansion-panel-header class="pl-0">
-            <span class="timeline-header">
+      <div>
+        <v-toolbar flat dense style="background-color: transparent">
+          <v-btn small icon @click="showTimelines = !showTimelines">
+            <v-icon v-if="showTimelines" title="Hide Timelines">mdi-chevron-up</v-icon>
+            <v-icon v-else title="Show Timelines">mdi-chevron-down</v-icon>
+          </v-btn>
+          <span class="timeline-header">
               <ts-upload-timeline-form-button btn-type="small"></ts-upload-timeline-form-button>
               <v-dialog v-model="addManualEvent" width="600">
                 <template v-slot:activator="{ on, attrs }">
@@ -154,22 +157,18 @@ limitations under the License.
                 <v-icon left small>mdi-eye-off</v-icon>
                 <span>Unselect all</span>
               </v-btn>
-              <v-spacer></v-spacer>
-              <v-btn small text rounded color="secondary" :ripple="false">
-                <span v-if="0 in timelinePanel">Hide Timelines</span>
-                <span v-else>Show Timelines</span>
-              </v-btn>
             </span>
-          </v-expansion-panel-header>
-          <v-expansion-panel-content>
+        </v-toolbar>
+        <v-expand-transition>
+          <div v-show="showTimelines">
             <ts-timeline-picker
               :current-query-filter="currentQueryFilter"
               :count-per-index="countPerIndex"
               :count-per-timeline="countPerTimeline"
             ></ts-timeline-picker>
-          </v-expansion-panel-content>
-        </v-expansion-panel>
-      </v-expansion-panels>
+          </div>
+        </v-expand-transition>
+      </div>
 
       <!-- Time filter chips -->
       <div>
@@ -378,7 +377,7 @@ export default {
         { tag: 'suspicious', color: 'orange', textColor: 'white', label: 'mdi-help-circle-outline' },
         { tag: 'good', color: 'green', textColor: 'white', label: 'mdi-check-circle-outline' },
       ],
-      timelinePanel: [0],
+      showTimelines: true,
     }
   },
   computed: {