Fix overlapping timeline indicator
The selected data point indicator on timeline was often hidden behind
other data points. This CL changes its behaviour to ensure it is always
visible.
Test: yarn run dev
Bug:
Change-Id: Ide13e97ac7ab54e20cc6213be2ccdadce3d567a7
Merged-In: Ide13e97ac7ab54e20cc6213be2ccdadce3d567a7
diff --git a/tools/winscope/src/Timeline.vue b/tools/winscope/src/Timeline.vue
index e9525a4..6fd8400 100644
--- a/tools/winscope/src/Timeline.vue
+++ b/tools/winscope/src/Timeline.vue
@@ -14,7 +14,8 @@
-->
<template>
<svg width="2000" height="20" viewBox="-5,0,2010,20">
- <circle :cx="translate(c.timestamp)" cy="10" r="5" v-for="(c,i) in items" @click="onItemClick(c, i)" :class="itemClass(i)" />
+ <circle :cx="position(item)" cy="10" r="5" v-for="(item, idx) in items" @click="onItemClick(idx)" />
+ <circle :cx="position(selected)" cy="10" r="5" class="selected" />
</svg>
</template>
<script>
@@ -25,6 +26,9 @@
return {};
},
methods: {
+ position(item) {
+ return this.translate(item.timestamp);
+ },
translate(cx) {
var scale = [...this.scale];
if (scale[0] >= scale[1]) {
@@ -32,12 +36,9 @@
}
return (cx - scale[0]) / (scale[1] - scale[0]) * 2000;
},
- onItemClick(item, index) {
+ onItemClick(index) {
this.$emit('item-selected', index);
},
- itemClass(index) {
- return (this.selectedIndex == index) ? 'selected' : 'not-selected'
- },
},
computed: {
timestamps() {
@@ -45,6 +46,9 @@
return [0];
}
return this.items.map((e) => parseInt(e.timestamp));
+ },
+ selected() {
+ return this.items[this.selectedIndex];
}
},
}