feat: add Top Stopwatch Events view (#659)

In order for the stopwatch events to appear, one has to enable "Force
devmode" in the settings and have some stopwatch events.

The stopwatch events are merged with window events. If they overlap,
then the stopwatch events have precedence, so that no more than 24 h of
all events are logged per day.

Author: wojnilowicz

src/components/SelectableVisualization.vue

@@ -85,6 +85,11 @@ div
       vis-timeline(:buckets="timeline_buckets", :showRowLabels='true', :queriedInterval="timeline_daterange")
     div(v-if="type == 'score'")
       aw-score()
+    div(v-if="type == 'top_stopwatches'")
+      aw-summary(:fields="activityStore.stopwatch.top_stopwatches",
+                 :namefunc="e => e.data.label",
+                 :colorfunc="e => e.data.label",
+                 with_limit)
 </template>
 
 <style lang="scss">
@@ -152,6 +157,7 @@ export default {
         'custom_vis',
         'vis_timeline',
         'score',
+        'top_stopwatches',
       ],
       // TODO: Move this function somewhere else
       top_editor_files_namefunc: e => {
@@ -241,6 +247,10 @@ export default {
           title: 'Score',
           available: this.activityStore.category.available,
         },
+        top_stopwatches: {
+          title: 'Top Stopwatch Events',
+          available: this.activityStore.stopwatch.available,
+        },
       };
     },
     has_prerequisites() {

src/queries.ts

@@ -145,8 +145,8 @@ export function canonicalEvents(params: DesktopQueryParams | AndroidQueryParams)
       : '',
     params.bid_stopwatch
       ? `stopwatch_events = query_bucket("${params.bid_stopwatch}");
-         events = period_union(events, stopwatch_events);`
-      : '',
+         events = union_no_overlap(stopwatch_events, events);`
+      : 'stopwatch_events = [];',
     // Categorize
     params.categories ? `events = categorize(events, ${categories_str});` : '',
     // Filter out selected categories
@@ -357,6 +357,9 @@ export function fullDesktopQuery(params: DesktopQueryParams): string[] {
     browser_titles = sort_by_duration(browser_titles);
     browser_titles = limit_events(browser_titles, ${default_limit});
     browser_duration = sum_durations(browser_events);
+    stopwatch_events = merge_events_by_keys(stopwatch_events, ["label"]);
+    stopwatch_events = sort_by_duration(stopwatch_events);
+    stopwatch_events = limit_events(stopwatch_events, ${default_limit});
 
     RETURN = {
         "window": {
@@ -371,6 +374,9 @@ export function fullDesktopQuery(params: DesktopQueryParams): string[] {
             "urls": browser_urls,
             "titles": browser_titles,
             "duration": browser_duration
+        },
+        "stopwatch": {
+            "stopwatch_events": stopwatch_events
         }
     };`
   );

src/stores/activity.ts

@@ -116,6 +116,7 @@ interface State {
 
   stopwatch: {
     available: boolean;
+    top_stopwatches: IEvent[];
   };
 
   query_options?: QueryOptions;
@@ -181,6 +182,7 @@ export const useActivityStore = defineStore('activity', {
 
     stopwatch: {
       available: false,
+      top_stopwatches: [],
     },
 
     query_options: null,
@@ -376,6 +378,9 @@ export const useActivityStore = defineStore('activity', {
       });
       this.query_window_completed(data[0].window);
       this.query_browser_completed(data[0].browser);
+      if (include_stopwatch) {
+        this.query_stopwatch_completed(data[0].stopwatch);
+      }
     },
 
     async query_editor({ timeperiod }) {
@@ -720,6 +725,10 @@ export const useActivityStore = defineStore('activity', {
       this.browser.duration = data.duration;
     },
 
+    query_stopwatch_completed(this: State, data = { stopwatch_events: [] }) {
+      this.stopwatch.top_stopwatches = data.stopwatch_events;
+    },
+
     query_editor_completed(
       this: State,
       data = { duration: 0, files: [], languages: [], projects: [] }

src/views/activity/Activity.vue

@@ -65,7 +65,7 @@ div
         // WIP: https://github.com/ActivityWatch/aw-webui/pull/368
         | Include manually logged events (stopwatch)
         br
-        | #[b Note:] WIP, breaks aw-server-rust badly. Only shown in devmode.
+        | #[b Note:] WIP. Stopwatch events shadow other events, when overlapping with them. Only shown in devmode.
 
     div.col-md-6.mt-2.mt-md-0
       b-form-group(label="Show category" label-cols="5" label-cols-lg="4" style="font-size: 0.88em")

test/unit/__snapshots__/queries.test.node.js.snap

@@ -12,6 +12,7 @@ browser_events = [];
 audible_events = filter_keyvals(browser_events, "audible", [true]);
 not_afk = period_union(not_afk, audible_events);
 events = filter_period_intersect(events, not_afk);
+stopwatch_events = [];
 events = categorize(events, []);
 events = filter_keyvals(events, "$category", true);
 title_events = sort_by_duration(merge_events_by_keys(events, ["app", "title"]));
@@ -31,6 +32,9 @@ browser_titles = merge_events_by_keys(browser_events, ["title"]);
 browser_titles = sort_by_duration(browser_titles);
 browser_titles = limit_events(browser_titles, 100);
 browser_duration = sum_durations(browser_events);
+stopwatch_events = merge_events_by_keys(stopwatch_events, ["label"]);
+stopwatch_events = sort_by_duration(stopwatch_events);
+stopwatch_events = limit_events(stopwatch_events, 100);
 RETURN = {
         "window": {
             "app_events": app_events,
@@ -44,6 +48,9 @@ RETURN = {
             "urls": browser_urls,
             "titles": browser_titles,
             "duration": browser_duration
+        },
+        "stopwatch": {
+            "stopwatch_events": stopwatch_events
         }
     };"
 `;