feat: continued working on category colors

Author: ErikBjare

package-lock.json

@@ -119,7 +119,7 @@
     "vis-util": "^4.3.2",
     "vue-awesome": "^3.5.1",
     "vue-chartjs": "^3.5.0",
-    "vue-d3-sunburst": "^1.0.1",
+    "vue-d3-sunburst": "^1.1.0",
     "vue-datetime": "^1.0.0-beta.13",
     "vue-property-decorator": "^8.5.1",
     "vuedraggable": "^2.24.3",

package.json

@@ -31,7 +31,7 @@ div
     div(v-if="type == 'top_titles'")
       aw-summary(:fields="$store.state.activity.window.top_titles",
                  :namefunc="e => e.data.title",
-                 :colorfunc="e => e.data.app",
+                 :colorfunc="e => e.data.title",
                  with_limit)
     div(v-if="type == 'top_domains'")
       aw-summary(:fields="$store.state.activity.browser.top_domains",

src/components/SelectableVisualization.vue

@@ -32,6 +32,9 @@ const getters = {
       v => v.join('>>>>') // Can be any separator that doesn't appear in the category names themselves
     );
   },
+  get_category: state => category_arr => {
+    return state.classes.find(c => _.isEqual(c.name, category_arr));
+  },
 };
 
 // actions

src/store/modules/categories.js

@@ -8,13 +8,13 @@ interface Rule {
   ignore_case?: boolean;
 }
 
-interface Category {
+export interface Category {
   id?: number;
   name: string[];
   name_pretty?: string;
   subname?: string;
   rule: Rule;
-  data?: object;
+  data?: any;
   depth?: number;
   parent?: string[];
   children?: Category[];
@@ -50,6 +50,7 @@ export const defaultCategories: Category[] = [
     rule: { type: 'regex', regex: 'Messenger|Telegram|Signal|WhatsApp|Rambox|Slack|Riot|Discord' },
   },
   { name: ['Comms', 'Email'], rule: { type: 'regex', regex: 'Gmail|Thunderbird|mutt|alpine' } },
+  { name: ['Uncategorized'], rule: { type: null }, data: { color: '#ccc' } },
 ];
 
 export function build_category_hierarchy(classes: Category[]): Category[] {
@@ -132,15 +133,23 @@ export function loadClassesForQuery(): [string[], Rule][] {
     });
 }
 
-export function matchString(str: string): Category | null {
-  console.log(loadClasses());
-  const matchingCats = loadClasses()
+function pickDeepest(categories: Category[]) {
+  return _.maxBy(categories, c => c.name.length);
+}
+
+export function matchString(str: string, categories: Category[] | null): Category | null {
+  if (!categories) {
+    console.log(
+      'Categories not passed, loading... (if you see this outside of a test, you should probably pass them)'
+    );
+    categories = loadClasses();
+  }
+  const matchingCats = categories
     .filter(c => c.rule.type == 'regex')
     .filter(c => {
       const re = RegExp(c.rule.regex, c.rule.ignore_case ? 'i' : '');
       return re.test(str);
     });
-  // TODO: Pick deepest
-  if (matchingCats.length > 0) return matchingCats[0];
+  if (matchingCats.length > 0) return pickDeepest(matchingCats);
   return null;
 }

src/util/classes.ts

@@ -1,14 +1,13 @@
-'use strict';
-
 import _ from 'lodash';
-import { matchString, loadClasses } from './classes';
+import { Category, matchString, loadClasses } from './classes';
 const Color = require('color');
 const d3 = require('d3');
 
 // See here for examples:
 //   https://bl.ocks.org/pstuffa/3393ff2711a53975040077b7453781a9
 
 const scale = d3.scaleOrdinal(['#90CAF9', '#FFE082', '#EF9A9A', '#A5D6A7']);
+const uncatColor = '#AAA';
 
 // Needed to prewarm the color table
 scale.domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);
@@ -60,28 +59,31 @@ export function getColorFromString(appname) {
   return customColors[appname] || scale(Math.abs(hashcode(appname) % 20));
 }
 
-function getColorFromCategory(c, allCats) {
-  if (c.data && c.data.color) {
+// TODO: Move into vuex?
+export function getColorFromCategory(c: Category, allCats: Category[]): string {
+  if (c && c.data && c.data.color) {
     return c.data.color;
-  } else if (c.name.slice(0, -1).length > 0) {
+  } else if (c && c.name.slice(0, -1).length > 0) {
     // If no color is set on category, traverse parents until one is found
     const parent = c.name.slice(0, -1);
     const parentCat = allCats.find(cc => _.isEqual(cc.name, parent));
-    return getColorFromCategory(parentCat);
+    return getColorFromCategory(parentCat, allCats);
   } else {
     // TODO: Fix reasonable fallback
-    return '#F0F';
+    return uncatColor;
   }
 }
 
-export function getCategoryColorFromString(str) {
+// TODO: Move into vuex?
+export function getCategoryColorFromString(str: string): string {
   // TODO: Don't load classes on every call
   const allCats = loadClasses();
-  const c = matchString(str);
+  const c = matchString(str, allCats);
   if (c !== null) {
     return getColorFromCategory(c, allCats);
   } else {
-    return getColorFromString(str);
+    // TODO: Fix reasonable fallback
+    return uncatColor;
   }
 }
 

src/util/color.js src/util/color.tssrc/util/color.js renamed to src/util/color.ts

@@ -2,7 +2,7 @@
 // We want to use another colorscheme than the default 'schemeAccent',
 // unfortunately it seems like the color-scheme prop is broken.
 // See this issue: https://github.com/David-Desmaisons/Vue.D3.sunburst/issues/11
-sunburst(:data="data")
+sunburst(:data="data", :colorScale="(s) => colorfunc(s)", :getCategoryForColor="categoryForColor", :colorScheme="null")
   // Add behaviors
   template(slot-scope="{ on, actions }")
     highlightOnHover(v-bind="{ on, actions }")
@@ -31,6 +31,7 @@ import {
   zoomOnClick,
 } from 'vue-d3-sunburst';
 import 'vue-d3-sunburst/dist/vue-d3-sunburst.css';
+import { getColorFromCategory } from '~/util/color';
 
 const example_data = {
   name: 'flare',
@@ -56,6 +57,8 @@ const example_data = {
   ],
 };
 
+const SEP = '>';
+
 export default {
   components: {
     breadcrumbTrail,
@@ -70,6 +73,19 @@ export default {
       default: () => example_data,
     },
   },
+  methods: {
+    categoryForColor: function (d) {
+      const category = d.parent ? d.parent.concat([d.name]) : [d.name];
+      return category.join(SEP);
+    },
+    colorfunc: function (s) {
+      if (s == 'All') return '#FFF';
+      const cat = this.$store.getters['categories/get_category'](s.split(SEP));
+      const allCats = this.$store.state.categories.classes;
+      const color = getColorFromCategory(cat, allCats);
+      return color;
+    },
+  },
 };
 </script>
 

src/visualizations/SunburstCategories.vue

@@ -27,7 +27,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import Color from 'color';
 import { buildTooltip } from '../util/tooltip.js';
-import { getColorFromString, getTitleAttr } from '../util/color.js';
+import { getColorFromString, getTitleAttr } from '../util/color';
 
 import { Timeline } from 'vis-timeline/esnext';
 import 'vis-timeline/styles/vis-timeline-graph2d.css';

src/visualizations/VisTimeline.vue

@@ -4,7 +4,7 @@ const d3 = require('d3');
 const Color = require('color');
 const _ = require('lodash');
 
-import { getCategoryColorFromString } from '../util/color.js';
+import { getCategoryColorFromString } from '../util/color';
 
 import { seconds_to_duration } from '../util/time.js';
 
@@ -58,9 +58,8 @@ function update(container, apps) {
     const width = (app.duration / longest_duration) * 100 + '%';
     const barHeight = 50;
     const textSize = 15;
-    const baseappcolor = app.color || getCategoryColorFromString(app.colorKey || app.name);
-    const appcolor = Color(baseappcolor).lighten(0.1).hex();
-    const hovercolor = Color(baseappcolor).darken(0.1).hex();
+    const appcolor = app.color || getCategoryColorFromString(app.colorKey || app.name);
+    const hovercolor = Color(appcolor).darken(0.1).hex();
 
     // The group representing an application in the barchart
     const eg = svg.append('g');

src/visualizations/summary.js

@@ -18,7 +18,7 @@ const d3 = require('d3');
 const moment = require('moment');
 
 import { seconds_to_duration } from '../util/time.js';
-const color = require('../util/color.js');
+const color = require('../util/color');
 
 // Dimensions of sunburst.
 const width = 750;