feat: use category colors in the timeline view (#609)

* Use configured category colors in the timeline view
This currently uses a slightly different strategy from where colors are used elsewhere

* Some debug logging for color categories

* Rather go in one step from bucket+event to category color
This allows doing something different for afk

* Remove unused code added along the way

* Removed verbose logging

* Prettier spacing to please the linter

* docs: added note about incompatibility with certain category rules

---------

Co-authored-by: Erik Bjäreholt <[email protected]>

Author: davidfraser

src/util/color.ts

@@ -126,3 +126,21 @@ export function getTitleAttr(bucket: IBucket, e: IEvent) {
     return e.data.title;
   }
 }
+
+export function getCategoryColorFromEvent(bucket: IBucket, e: IEvent) {
+  if (bucket.type == 'currentwindow') {
+    // NOTE: this will not work/break category rules which reference `$` or `^`
+    return getCategoryColorFromString(e.data.app + ' ' + e.data.title);
+  } else if (bucket.type == 'web.tab.current') {
+    // NOTE: same as above
+    return getCategoryColorFromString(e.data.title + ' ' + e.data.url);
+  } else if (bucket.type == 'afkstatus') {
+    return getColorFromString(e.data.status);
+  } else if (bucket.type?.startsWith('app.editor')) {
+    return getCategoryColorFromString(e.data.file);
+  } else if (bucket.type?.startsWith('general.stopwatch')) {
+    return getCategoryColorFromString(e.data.label);
+  } else {
+    return getCategoryColorFromString(e.data.title);
+  }
+}

src/visualizations/VisTimeline.vue

@@ -38,7 +38,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import Color from 'color';
 import { buildTooltip } from '../util/tooltip.js';
-import { getColorFromString, getTitleAttr } from '../util/color';
+import { getTitleAttr, getCategoryColorFromEvent } from '../util/color';
 
 import { Timeline } from 'vis-timeline/esnext';
 import 'vis-timeline/styles/vis-timeline-graph2d.css';
@@ -116,7 +116,7 @@ export default {
             buildTooltip(bucket, e),
             new Date(e.timestamp),
             new Date(moment(e.timestamp).add(e.duration, 'seconds').valueOf()),
-            getColorFromString(getTitleAttr(bucket, e)),
+            getCategoryColorFromEvent(bucket, e),
             e,
           ]);
         });