feat: continued work on Calendar visualization

Author: ErikBjare

src/queries.ts

@@ -460,4 +460,5 @@ export default {
   activityQueryAndroid,
   categoryQuery,
   editorActivityQuery,
+  canonicalEvents,
 };

src/visualizations/Calendar.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
 div.mx-3
   b-form
-    b-form-group(label="Bucket:")
-      select(v-model="selectedBucket")
-        option(v-for="bucket in buckets", :value="bucket.id") {{ bucket.id }}
+    b-form-group(label="Host:")
+      select(v-model="selectedHost")
+        option(v-for="host in hostnames" :value="host") {{ host }}
     b-form-group(label="Show:")
       select(v-model="view")
         option(value="timeGridDay") Day
@@ -15,26 +15,38 @@ div.mx-3
 </template>
 
 <script>
-import { getTitleAttr, getColorFromString } from '../util/color';
 import moment from 'moment';
 import _ from 'lodash';
 import FullCalendar from '@fullcalendar/vue';
 import timeGridPlugin from '@fullcalendar/timegrid';
 
+import queries from '~/queries';
+import { getTitleAttr, getColorFromString } from '../util/color';
+import { useCategoryStore } from '~/stores/categories';
+
 // TODO: Use canonical timeline query, with flooding and categorization
 // TODO: Checkbox for toggling category-view, where adjacent events with same category are merged and the events are labeled by category
 // TODO: Use the recommended way of dynamically getting events: https://fullcalendar.io/docs/events-function
 export default {
   components: {
-    FullCalendar, // make the <FullCalendar> tag available
+    FullCalendar,
   },
   props: {
     buckets: { type: Array },
   },
   data() {
-    return { fitToActive: false, selectedBucket: null, view: 'timeGridDay' };
+    return {
+      events: [],
+      fitToActive: false,
+      selectedHost: 'erb-m2.localdomain',
+      view: 'timeGridWeek',
+    };
   },
   computed: {
+    hostnames: function () {
+      if (this.buckets == null) return [];
+      return _.uniq(this.buckets.map(b => b.hostname).filter(h => h != null));
+    },
     calendarOptions: function () {
       const events = this.events;
       const first = _.minBy(events, e => e.start);
@@ -67,7 +79,108 @@ export default {
         },
       };
     },
-    events: function () {
+    queryOptions: function () {
+      return {
+        hostname: this.selectedHost,
+        filter_afk: true,
+        start: moment().startOf('week').format(),
+        stop: moment().endOf('week').format(),
+      };
+    },
+  },
+  watch: {
+    view: function (to) {
+      const calendar = this.$refs.fullCalendar.getApi();
+      calendar.changeView(to);
+    },
+    selectedHost: async function () {
+      console.log('selectedHost changed');
+      this.events = await this.loadEventsCanonical();
+    },
+  },
+  mounted: async function () {
+    this.events = await this.loadEventsCanonical();
+  },
+  methods: {
+    onEventClick: function (arg) {
+      // TODO: Open event inspector/editor here
+      alert('event click! ' + JSON.stringify(arg.event));
+    },
+    loadEventsCanonical: async function () {
+      console.log('loadEventsCanonical');
+      console.log(this.queryOptions.hostname);
+      if (this.queryOptions.hostname == null) return [];
+
+      const categoryStore = useCategoryStore();
+      categoryStore.load();
+      const categories = categoryStore.classes_for_query;
+
+      let query = queries.canonicalEvents({
+        bid_window: 'aw-watcher-window_' + this.queryOptions.hostname,
+        bid_afk: 'aw-watcher-afk_' + this.queryOptions.hostname,
+        filter_afk: this.queryOptions.filter_afk,
+        categories,
+      });
+      query += 'RETURN = events;';
+      console.log(query);
+      query = query.split(';').map(s => s.trim() + ';');
+
+      const timeperiods = [
+        moment(this.queryOptions.start).format() + '/' + moment(this.queryOptions.stop).format(),
+      ];
+      console.log('Querying');
+      const data = await this.$aw.query(timeperiods, query);
+      console.log(data);
+      let events = _.orderBy(data[0], ['timestamp'], ['desc']);
+      console.log('events', events);
+
+      // process events, merging adjacent events with same category
+      const mergedEvents = [];
+      let lastEvent = null;
+      for (let i = 0; i < events.length; i++) {
+        const event = events[i];
+        if (lastEvent == null) {
+          lastEvent = event;
+          continue;
+        }
+        // if adjacent with less than 10 seconds between, merge
+        const isAdjacent =
+          moment(event.timestamp).diff(
+            moment(lastEvent.timestamp).add(lastEvent.duration, 'seconds'),
+            'seconds'
+          ) < 10;
+        if (
+          isAdjacent &&
+          event.data['$category'].join(' > ') == lastEvent.data['$category'].join(' > ')
+        ) {
+          lastEvent.duration += event.duration;
+        } else {
+          mergedEvents.push(lastEvent);
+          lastEvent = event;
+        }
+      }
+      if (lastEvent != null) mergedEvents.push(lastEvent);
+
+      console.log(mergedEvents);
+
+      events = _.filter(mergedEvents, e => e.duration > 60);
+      const bucket = {
+        id: 'Canonical',
+        hostname: this.queryOptions.hostname,
+        type: 'currentwindow',
+      };
+      events = _.map(events, e => {
+        return {
+          title: e.data['$category'].join(' > '),
+          start: moment(e.timestamp).format(),
+          end: moment(e.timestamp).add(e.duration, 'seconds').format(),
+          // TODO: this isn't the correct way to get the category color
+          backgroundColor: getColorFromString(e.data['$category'].join(' > ')),
+        };
+      });
+      return events;
+    },
+    loadEventsBucket: function () {
       // NOTE: This returns FullCalendar events, not ActivityWatch events.
       if (this.buckets == null) return [];
 
@@ -88,17 +201,5 @@ export default {
       return events;
     },
   },
-  watch: {
-    view: function (to) {
-      const calendar = this.$refs.fullCalendar.getApi();
-      calendar.changeView(to);
-    },
-  },
-  methods: {
-    onEventClick: function (arg) {
-      // TODO: Open event inspector/editor here
-      alert('event click! ' + JSON.stringify(arg.event));
-    },
-  },
 };
 </script>