From 71b14490705bfb069d6451b6ee97c6fe0ce3347d Mon Sep 17 00:00:00 2001
From: Ueli Kunz <ueli.kunz@srf.ch>
Date: Sun, 8 Sep 2024 22:19:55 +0200
Subject: [PATCH 1/9] require fewer clicks for time interval changes. apply
 bootstrap styles.

---
 src/components/InputTimeInterval.vue | 111 +++++++++++++++------------
 src/views/Timeline.vue               |   2 +-
 2 files changed, 62 insertions(+), 51 deletions(-)

diff --git a/src/components/InputTimeInterval.vue b/src/components/InputTimeInterval.vue
index 7b72ac2c..7cbd5399 100644
--- a/src/components/InputTimeInterval.vue
+++ b/src/components/InputTimeInterval.vue
@@ -1,55 +1,64 @@
 <template lang="pug">
 div
   div
-    b-alert(v-if="mode == 'range' && invalidDaterange", variant="warning", show)
+    b-alert(v-if="invalidDaterange", variant="warning", show)
       | The selected date range is invalid. The second date must be greater or equal to the first date.
-    b-alert(v-if="mode == 'range' && daterangeTooLong", variant="warning", show)
+    b-alert(v-if="daterangeTooLong", variant="warning", show)
       | The selected date range is too long. The maximum is {{ maxDuration/(24*60*60) }} days.
 
-  div.d-flex.justify-content-between.align-items-end
-    table
-      tr
-        th.pr-2
-          label(for="mode") Interval mode:
-        td
-          select(id="mode", v-model="mode")
-            option(value='last_duration') Last duration
-            option(value='range') Date range
-      tr(v-if="mode == 'last_duration'")
-        th.pr-2
-          label(for="duration") Show last:
-        td
-          select(id="duration", v-model="duration", @change="valueChanged")
-            option(:value="15*60") 15min
-            option(:value="30*60") 30min
-            option(:value="60*60") 1h
-            option(:value="2*60*60") 2h
-            option(:value="4*60*60") 4h
-            option(:value="6*60*60") 6h
-            option(:value="12*60*60") 12h
-            option(:value="24*60*60") 24h
-      tr(v-if="mode == 'range'")
-        th.pr-2 Range:
-        td
-          input(type="date", v-model="start")
-          input(type="date", v-model="end")
-          button(
-            class="btn btn-outline-dark btn-sm",
-            type="button",
-            :disabled="mode == 'range' && (invalidDaterange || emptyDaterange || daterangeTooLong)",
-            @click="valueChanged"
-          ) Update
+  table
+    tr
+      td.pr-2
+        label.col-form-label Show last:
+      td(colspan=2)
+        .btn-group(role="group")
+            input(type="radio", id="dur1", :value="15*60", v-model="duration", @change="applyLastDuration").sr-only
+            label(for="dur1").btn.btn-light.rounded-left &frac14;h
+            input(type="radio", id="dur2", :value="30*60", v-model="duration", @change="applyLastDuration").sr-only
+            label(for="dur2").btn.btn-light &frac12;h
+            input(type="radio", id="dur3", :value="1*60*60", v-model="duration", @change="applyLastDuration").sr-only
+            label(for="dur3").btn.btn-light 1h
+            input(type="radio", id="dur4", :value="2*60*60", v-model="duration", @change="applyLastDuration").sr-only
+            label(for="dur4").btn.btn-light 2h
+            input(type="radio", id="dur5", :value="3*60*60", v-model="duration", @change="applyLastDuration").sr-only
+            label(for="dur5").btn.btn-light 3h
+            input(type="radio", id="dur6", :value="4*60*60", v-model="duration", @change="applyLastDuration").sr-only
+            label(for="dur6").btn.btn-light 4h
+            input(type="radio", id="dur7", :value="6*60*60", v-model="duration", @change="applyLastDuration").sr-only
+            label(for="dur7").btn.btn-light 6h
+            input(type="radio", id="dur8", :value="12*60*60", v-model="duration", @change="applyLastDuration").sr-only
+            label(for="dur8").btn.btn-light 12h
+            input(type="radio", id="dur9", :value="24*60*60", v-model="duration", @change="applyLastDuration").sr-only
+            label(for="dur9").btn.btn-light 24h
+            input(type="radio", id="dur10", :value="48*60*60", v-model="duration", @change="applyLastDuration").sr-only
+            label(for="dur10").btn.btn-light 48h
 
-    div(style="text-align:right" v-if="showUpdate && mode=='last_duration'")
-      b-button.px-2(@click="update()", variant="outline-dark", size="sm")
-        icon(name="sync")
-        span.d-none.d-md-inline
-          |  Update
-      div.mt-1.small.text-muted(v-if="lastUpdate")
-        | Last update: #[time(:datetime="lastUpdate.format()") {{lastUpdate | friendlytime}}]
+    tr
+      td.pr-2
+        label.col-form-label Show from:
+      td
+        input.form-control.d-inline-block.p-1(type="date", v-model="start", style="height: auto; width: auto;")
+        label.col-form-label.pr-1.pl-2 to:
+        input.form-control.d-inline.p-1(type="date", v-model="end", style="height: auto; width: auto")
+      td.text-right
+        button(
+          class="btn btn-outline-dark btn-sm",
+          type="button",
+          :disabled="invalidDaterange || emptyDaterange || daterangeTooLong",
+          @click="applyRange"
+        ) Apply
+
+  div.mt-1.small.text-muted(v-if="lastUpdate", v-bind:title="lastUpdate")
+    | Last update: #[time(:datetime="lastUpdate.format()") {{lastUpdate | friendlytime}}]
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.btn-group {
+  input[type='radio']:checked + label {
+    background-color: #aaa;
+  }
+}
+</style>
 
 <script lang="ts">
 import moment from 'moment';
@@ -109,7 +118,7 @@ export default {
       const _lastUpdate = this.lastUpdate;
       this.lastUpdate = null;
       this.lastUpdate = _lastUpdate;
-    }, 1000);
+    }, 3000);
   },
   beforeDestroy() {
     clearInterval(this.lastUpdateTimer);
@@ -124,12 +133,14 @@ export default {
         this.$emit('input', this.value);
       }
     },
-    update() {
-      if (this.mode == 'last_duration') {
-        this.mode = ''; // remove cache on v-model, see explanation: https://github.com/ActivityWatch/aw-webui/pull/344/files#r892982094
-        this.mode = 'last_duration';
-        this.valueChanged();
-      }
+    applyRange() {
+      this.mode = 'range';
+      this.duration = 0;
+      this.valueChanged();
+    },
+    applyLastDuration() {
+      this.mode = 'last_duration';
+      this.valueChanged();
     },
   },
 };
diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index 077367e2..18353604 100644
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@@ -2,7 +2,7 @@
 div
   h2 Timeline
 
-  input-timeinterval(v-model="daterange", :defaultDuration="timeintervalDefaultDuration", :maxDuration="maxDuration").mb-2
+  input-timeinterval(v-model="daterange", :defaultDuration="timeintervalDefaultDuration", :maxDuration="maxDuration").mb-3
 
   // blocks
   div.d-inline-block.border.rounded.p-2.mr-2

From d15b9efaf6491eb6f9085c007499ce901f8832cc Mon Sep 17 00:00:00 2001
From: Ueli Kunz <ueli.kunz@srf.ch>
Date: Sun, 8 Sep 2024 22:22:17 +0200
Subject: [PATCH 2/9] notify user, that timeline was not updated / re-rendered
 on purpose (because there are no matching events to render). addresses issues
 reported in #395

---
 src/views/Timeline.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index 18353604..4bc133c0 100644
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@@ -5,8 +5,6 @@ div
   input-timeinterval(v-model="daterange", :defaultDuration="timeintervalDefaultDuration", :maxDuration="maxDuration").mb-3
 
   // blocks
-  div.d-inline-block.border.rounded.p-2.mr-2
-    | Events shown:  {{ num_events }}
   details.d-inline-block.bg-light.small.border.rounded.mr-2.px-2
     summary.p-2
       b Filters
@@ -26,7 +24,11 @@ div
             select(v-model="filter_client")
               option(:value='null') All
               option(v-for="client in clients", :value="client") {{ client }}
-  div(style="float: right; color: #999").d-inline-block.pt-3
+  div.d-inline-block.border.rounded.p-2.mr-2(v-if="num_events !== 0")
+    | Events shown: {{ num_events }}
+  b-alert.d-inline-block.p-2.mb-0(v-if="num_events === 0", variant="warning", show)
+    | No events match selected criteria. Timeline is not updated.
+  div.float-right.small.text-muted.pt-3
     | Drag to pan and scroll to zoom
 
   div(v-if="buckets !== null")
@@ -63,6 +65,8 @@ export default {
       const settingsStore = useSettingsStore();
       return Number(settingsStore.durationDefault);
     },
+    // TODO this does not match the actual vis-timeline.chartData which is rendered in the timeline.
+    //  chartData excludes short events.
     num_events() {
       return _.sumBy(this.buckets, 'events.length');
     },

From bf1bb12cdbd811a052ca4cd0c8e4a75e8614a447 Mon Sep 17 00:00:00 2001
From: Ueli Kunz <ueli.kunz@srf.ch>
Date: Mon, 9 Sep 2024 22:03:47 +0200
Subject: [PATCH 3/9] update lastUpdate timer display every 500ms

---
 src/components/InputTimeInterval.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/InputTimeInterval.vue b/src/components/InputTimeInterval.vue
index 7cbd5399..933393aa 100644
--- a/src/components/InputTimeInterval.vue
+++ b/src/components/InputTimeInterval.vue
@@ -112,13 +112,13 @@ export default {
     this.duration = this.defaultDuration;
     this.valueChanged();
 
-    // We want our lastUpdated text to update every ~3s
+    // We want our lastUpdated text to update every ~500ms
     // We can do this by setting it to null and then the previous value.
     this.lastUpdateTimer = setInterval(() => {
       const _lastUpdate = this.lastUpdate;
       this.lastUpdate = null;
       this.lastUpdate = _lastUpdate;
-    }, 3000);
+    }, 500);
   },
   beforeDestroy() {
     clearInterval(this.lastUpdateTimer);

From b1800e9665f5afa4a1cb0f66bdfb23283a575570 Mon Sep 17 00:00:00 2001
From: Ueli Kunz <ueli.kunz@srf.ch>
Date: Mon, 9 Sep 2024 22:04:46 +0200
Subject: [PATCH 4/9] use for loop to render duration buttons. replace sr-only
 by d-none.

---
 src/components/InputTimeInterval.vue | 41 ++++++++++++++--------------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/components/InputTimeInterval.vue b/src/components/InputTimeInterval.vue
index 933393aa..3a63ab0e 100644
--- a/src/components/InputTimeInterval.vue
+++ b/src/components/InputTimeInterval.vue
@@ -12,26 +12,15 @@ div
         label.col-form-label Show last:
       td(colspan=2)
         .btn-group(role="group")
-            input(type="radio", id="dur1", :value="15*60", v-model="duration", @change="applyLastDuration").sr-only
-            label(for="dur1").btn.btn-light.rounded-left &frac14;h
-            input(type="radio", id="dur2", :value="30*60", v-model="duration", @change="applyLastDuration").sr-only
-            label(for="dur2").btn.btn-light &frac12;h
-            input(type="radio", id="dur3", :value="1*60*60", v-model="duration", @change="applyLastDuration").sr-only
-            label(for="dur3").btn.btn-light 1h
-            input(type="radio", id="dur4", :value="2*60*60", v-model="duration", @change="applyLastDuration").sr-only
-            label(for="dur4").btn.btn-light 2h
-            input(type="radio", id="dur5", :value="3*60*60", v-model="duration", @change="applyLastDuration").sr-only
-            label(for="dur5").btn.btn-light 3h
-            input(type="radio", id="dur6", :value="4*60*60", v-model="duration", @change="applyLastDuration").sr-only
-            label(for="dur6").btn.btn-light 4h
-            input(type="radio", id="dur7", :value="6*60*60", v-model="duration", @change="applyLastDuration").sr-only
-            label(for="dur7").btn.btn-light 6h
-            input(type="radio", id="dur8", :value="12*60*60", v-model="duration", @change="applyLastDuration").sr-only
-            label(for="dur8").btn.btn-light 12h
-            input(type="radio", id="dur9", :value="24*60*60", v-model="duration", @change="applyLastDuration").sr-only
-            label(for="dur9").btn.btn-light 24h
-            input(type="radio", id="dur10", :value="48*60*60", v-model="duration", @change="applyLastDuration").sr-only
-            label(for="dur10").btn.btn-light 48h
+          template(v-for="(dur, idx) in durations")
+            input(
+              type="radio"
+              :id="'dur' + idx"
+              :value="dur.seconds"
+              v-model="duration"
+              @change="applyLastDuration"
+            ).d-none
+            label(:for="'dur' + idx" v-html="dur.label").btn.btn-light
 
     tr
       td.pr-2
@@ -86,6 +75,18 @@ export default {
       start: null,
       end: null,
       lastUpdate: null,
+      durations: [
+        { seconds: 0.25 * 60 * 60, label: '&frac14;h' },
+        { seconds: 0.5 * 60 * 60, label: '&frac12;h' },
+        { seconds: 60 * 60, label: '1h' },
+        { seconds: 2 * 60 * 60, label: '2h' },
+        { seconds: 3 * 60 * 60, label: '3h' },
+        { seconds: 4 * 60 * 60, label: '4h' },
+        { seconds: 6 * 60 * 60, label: '6h' },
+        { seconds: 12 * 60 * 60, label: '12h' },
+        { seconds: 24 * 60 * 60, label: '24h' },
+        { seconds: 48 * 60 * 60, label: '48h' },
+      ],
     };
   },
   computed: {

From 19a61fc3efc47cf46570566d3000d46cc3b1b002 Mon Sep 17 00:00:00 2001
From: Ueli Kunz <ueli.kunz@srf.ch>
Date: Mon, 9 Sep 2024 22:05:04 +0200
Subject: [PATCH 5/9] extra margin for small screens.

---
 src/views/Timeline.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index 4bc133c0..20b4eaed 100644
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@@ -26,7 +26,7 @@ div
               option(v-for="client in clients", :value="client") {{ client }}
   div.d-inline-block.border.rounded.p-2.mr-2(v-if="num_events !== 0")
     | Events shown: {{ num_events }}
-  b-alert.d-inline-block.p-2.mb-0(v-if="num_events === 0", variant="warning", show)
+  b-alert.d-inline-block.p-2.mb-0.mt-2(v-if="num_events === 0", variant="warning", show)
     | No events match selected criteria. Timeline is not updated.
   div.float-right.small.text-muted.pt-3
     | Drag to pan and scroll to zoom

From 994d551fd1359ab2f40d93f4af3064159fd0d749 Mon Sep 17 00:00:00 2001
From: Ueli Kunz <ueli.kunz@srf.ch>
Date: Wed, 11 Sep 2024 22:05:12 +0200
Subject: [PATCH 6/9] re-add sync button next to last update label. always show
 it, and label it "reload" instead of former "update".

---
 src/components/InputTimeInterval.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/InputTimeInterval.vue b/src/components/InputTimeInterval.vue
index 3a63ab0e..6f7b6379 100644
--- a/src/components/InputTimeInterval.vue
+++ b/src/components/InputTimeInterval.vue
@@ -37,8 +37,15 @@ div
           @click="applyRange"
         ) Apply
 
-  div.mt-1.small.text-muted(v-if="lastUpdate", v-bind:title="lastUpdate")
-    | Last update: #[time(:datetime="lastUpdate.format()") {{lastUpdate | friendlytime}}]
+  div.mt-1
+    div.d-inline-block.mr-2(v-if="showUpdate")
+      b-button.px-2(@click="update()", variant="outline-dark", size="sm")
+        icon(name="sync")
+        span.d-none.d-md-inline
+          |  Reload
+
+    div.d-inline-block.small.text-muted(v-if="lastUpdate", v-bind:title="lastUpdate")
+      | Last update: #[time(:datetime="lastUpdate.format()") {{lastUpdate | friendlytime}}]
 </template>
 
 <style scoped lang="scss">
@@ -134,6 +141,12 @@ export default {
         this.$emit('input', this.value);
       }
     },
+    update() {
+      const tmpMode = this.mode;
+      this.mode = '';
+      this.mode = tmpMode;
+      this.valueChanged();
+    },
     applyRange() {
       this.mode = 'range';
       this.duration = 0;

From fbc7e5015754b3dfb40f98589a5759557475f85d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bj=C3=A4reholt?= <erik.bjareholt@gmail.com>
Date: Sat, 5 Oct 2024 12:14:34 +0200
Subject: [PATCH 7/9] Apply suggestions from code review

---
 src/views/Timeline.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index 20b4eaed..2f5b6cdb 100644
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@@ -65,8 +65,7 @@ export default {
       const settingsStore = useSettingsStore();
       return Number(settingsStore.durationDefault);
     },
-    // TODO this does not match the actual vis-timeline.chartData which is rendered in the timeline.
-    //  chartData excludes short events.
+    // This does not match the chartData which is rendered in the timeline, as chartData excludes short events.
     num_events() {
       return _.sumBy(this.buckets, 'events.length');
     },

From 2ccd3c1657f5272abf8e1ecf1d23c9ec1fe07039 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bj=C3=A4reholt?= <erik@bjareho.lt>
Date: Sat, 5 Oct 2024 12:23:32 +0200
Subject: [PATCH 8/9] tests: fixed e2e test for new timeline inputs

---
 test/e2e/screenshot.test.js | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/test/e2e/screenshot.test.js b/test/e2e/screenshot.test.js
index 734c6870..468ffa8a 100644
--- a/test/e2e/screenshot.test.js
+++ b/test/e2e/screenshot.test.js
@@ -121,9 +121,6 @@ test.clientScripts({
 
 fixture(`Timeline view`).page(`${baseURL}/#/timeline`).requestHooks(HTTPLogger);
 
-const durationSelect = Selector('select#duration');
-const durationOption = durationSelect.find('option');
-
 test.clientScripts({
   content: logJsErrorCode,
 })('Screenshot the timeline view', async t => {
@@ -134,10 +131,9 @@ test.clientScripts({
   });
   await waitForLoading(t);
   await t
-    .click(durationSelect)
-    .click(durationOption.withText('12h'))
-    .expect(durationSelect.value)
-    .eql('43200');
+    .click(Selector('label').withText('12h'))
+    .expect(Selector('input[value="43200"]').checked)
+    .eql(true);
 
   await t.takeScreenshot({
     path: 'timeline.png',

From c41e6e1bf6918518a64209023bfe8c1201168792 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bj=C3=A4reholt?= <erik@bjareho.lt>
Date: Sat, 5 Oct 2024 12:59:48 +0200
Subject: [PATCH 9/9] fix: minor style improvements to new timeline

---
 src/components/InputTimeInterval.vue | 72 ++++++++++++++--------------
 src/visualizations/VisTimeline.vue   |  2 +-
 2 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/src/components/InputTimeInterval.vue b/src/components/InputTimeInterval.vue
index 6f7b6379..3ae61cf9 100644
--- a/src/components/InputTimeInterval.vue
+++ b/src/components/InputTimeInterval.vue
@@ -6,46 +6,44 @@ div
     b-alert(v-if="daterangeTooLong", variant="warning", show)
       | The selected date range is too long. The maximum is {{ maxDuration/(24*60*60) }} days.
 
-  table
-    tr
-      td.pr-2
-        label.col-form-label Show last:
-      td(colspan=2)
-        .btn-group(role="group")
-          template(v-for="(dur, idx) in durations")
-            input(
-              type="radio"
-              :id="'dur' + idx"
-              :value="dur.seconds"
-              v-model="duration"
-              @change="applyLastDuration"
-            ).d-none
-            label(:for="'dur' + idx" v-html="dur.label").btn.btn-light
+  div.d-flex.justify-content-between
+    table
+      tr
+        td.pr-2
+          label.col-form-label.col-form-label-sm Show last
+        td(colspan=2)
+          .btn-group(role="group")
+            template(v-for="(dur, idx) in durations")
+              input(
+                type="radio"
+                :id="'dur' + idx"
+                :value="dur.seconds"
+                v-model="duration"
+                @change="applyLastDuration"
+              ).d-none
+              label(:for="'dur' + idx" v-html="dur.label").btn.btn-light.btn-sm
 
-    tr
-      td.pr-2
-        label.col-form-label Show from:
-      td
-        input.form-control.d-inline-block.p-1(type="date", v-model="start", style="height: auto; width: auto;")
-        label.col-form-label.pr-1.pl-2 to:
-        input.form-control.d-inline.p-1(type="date", v-model="end", style="height: auto; width: auto")
-      td.text-right
-        button(
-          class="btn btn-outline-dark btn-sm",
-          type="button",
-          :disabled="invalidDaterange || emptyDaterange || daterangeTooLong",
-          @click="applyRange"
-        ) Apply
+      tr
+        td.pr-2
+          label.col-form-label.col-form-label-sm Show from
+        td
+          input.form-control.form-control-sm.d-inline-block.p-1(type="date", v-model="start", style="height: auto; width: auto;")
+          label.col-form-label.col-form-label-sm.px-2 to
+          input.form-control.form-control-sm.d-inline.p-1(type="date", v-model="end", style="height: auto; width: auto")
+        td.text-right
+          button.ml-2.btn.btn-outline-dark.btn-sm(
+            type="button",
+            :disabled="invalidDaterange || emptyDaterange || daterangeTooLong",
+            @click="applyRange"
+          ) Apply
 
-  div.mt-1
-    div.d-inline-block.mr-2(v-if="showUpdate")
-      b-button.px-2(@click="update()", variant="outline-dark", size="sm")
+    div.text-muted.d-none.d-md-block(style="text-align:right" v-if="showUpdate")
+      b-button.mt-2.px-2(@click="refresh()", variant="outline-dark", size="sm", style="opacity: 0.7")
         icon(name="sync")
         span.d-none.d-md-inline
-          |  Reload
-
-    div.d-inline-block.small.text-muted(v-if="lastUpdate", v-bind:title="lastUpdate")
-      | Last update: #[time(:datetime="lastUpdate.format()") {{lastUpdate | friendlytime}}]
+          | Refresh
+      div.mt-2.small(v-if="lastUpdate")
+        | Last update: #[time(:datetime="lastUpdate.format()") {{lastUpdate | friendlytime}}]
 </template>
 
 <style scoped lang="scss">
@@ -141,7 +139,7 @@ export default {
         this.$emit('input', this.value);
       }
     },
-    update() {
+    refresh() {
       const tmpMode = this.mode;
       this.mode = '';
       this.mode = tmpMode;
diff --git a/src/visualizations/VisTimeline.vue b/src/visualizations/VisTimeline.vue
index 14bee7de..899fa9f6 100644
--- a/src/visualizations/VisTimeline.vue
+++ b/src/visualizations/VisTimeline.vue
@@ -2,7 +2,7 @@
 div
   div#visualization
 
-  div.small.my-2(v-if="bucketsFromEither.length != 1")
+  div.small.text-muted.my-2(v-if="bucketsFromEither.length != 1")
     i Buckets with no events in the queried range will be hidden.
 
   div(v-if="editingEvent")