From 382308f378910060797eadce69e9e4ebef5723e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bj=C3=A4reholt?= <erik@bjareho.lt>
Date: Fri, 30 Oct 2020 12:04:20 +0100
Subject: [PATCH 01/11] feat: started working on customizable views

---
 src/components/SelectableVisualization.vue | 22 ++++++
 src/route.js                               | 10 ++-
 src/store/modules/settings.js              | 42 +++++++++++
 src/util/transforms.js                     | 38 ++++++++++
 src/views/activity/Activity.vue            | 26 ++++---
 src/views/activity/ActivitySummary.vue     | 87 +---------------------
 src/views/activity/ActivityView.vue        | 41 ++++++++++
 7 files changed, 169 insertions(+), 97 deletions(-)
 create mode 100644 src/util/transforms.js
 create mode 100644 src/views/activity/ActivityView.vue

diff --git a/src/components/SelectableVisualization.vue b/src/components/SelectableVisualization.vue
index 19a78935..2e47d980 100644
--- a/src/components/SelectableVisualization.vue
+++ b/src/components/SelectableVisualization.vue
@@ -54,6 +54,8 @@ div
     aw-categorytree(:events="$store.state.activity.category.top")
   div(v-if="type == 'category_sunburst'")
     aw-sunburst-categories(:data="top_categories_hierarchy", style="height: 20em")
+  div(v-if="type == 'timeline_barchart'")
+    aw-timeline-barchart(:datasets="datasets", style="height: 100")
 
 </template>
 
@@ -70,8 +72,11 @@ div
 </style>
 
 <script>
+import { split_by_hour_into_data } from '~/util/transforms';
+
 // TODO: Move this somewhere else
 import { build_category_hierarchy } from '~/util/classes';
+
 function pick_subname_as_name(c) {
   c.name = c.subname;
   c.children = c.children.map(pick_subname_as_name);
@@ -97,6 +102,7 @@ export default {
         'top_editor_files',
         'top_editor_languages',
         'top_editor_projects',
+        'timeline_barchart',
       ],
       // TODO: Move this function somewhere else
       top_editor_files_namefunc: e => {
@@ -163,6 +169,11 @@ export default {
           title: 'Category Sunburst',
           available: this.$store.state.activity.category.available,
         },
+        timeline_barchart: {
+          title: 'Timeline (barchart)',
+          // TODO
+          //available: this.$store.state.activity.category.available,
+        },
       };
     },
     top_categories_hierarchy: function () {
@@ -180,6 +191,17 @@ export default {
         return null;
       }
     },
+    datasets: function () {
+      // TODO: Move elsewhere
+      const data = split_by_hour_into_data(this.$store.state.activity.active.events);
+      return [
+        {
+          label: 'Total time',
+          backgroundColor: '#6699ff',
+          data,
+        },
+      ];
+    },
   },
 };
 </script>
diff --git a/src/route.js b/src/route.js
index 48cc6466..13698eaf 100644
--- a/src/route.js
+++ b/src/route.js
@@ -5,6 +5,7 @@ const Home = () => import('./views/Home.vue');
 
 // Activity views for desktop
 const Activity = () => import('./views/activity/Activity.vue');
+const ActivityView = () => import('./views/activity/ActivityView.vue');
 const ActivitySummary = () => import('./views/activity/ActivitySummary.vue');
 const ActivityWindow = () => import('./views/activity/ActivityWindow.vue');
 const ActivityBrowser = () => import('./views/activity/ActivityBrowser.vue');
@@ -28,6 +29,13 @@ const router = new VueRouter({
       component: Activity,
       props: true,
       children: [
+        {
+          path: 'view/:view_id?',
+          meta: { subview: 'view' },
+          name: 'activity-view',
+          component: ActivityView,
+          props: true,
+        },
         {
           path: 'summary',
           meta: { subview: 'summary' },
@@ -58,7 +66,7 @@ const router = new VueRouter({
         // (needs to be last since otherwise it'll always match first)
         {
           path: '',
-          redirect: 'summary',
+          redirect: 'view/',
         },
       ],
     },
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 707410d4..2c2b6fe0 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -6,8 +6,40 @@ import {
   build_category_hierarchy,
 } from '~/util/classes';
 
+const defaultViews = [
+  {
+    id: 'summary',
+    name: 'Summary',
+    elements: [
+      { type: 'top_apps', size: 3 },
+      { type: 'top_titles', size: 3 },
+      { type: 'top_domains', size: 3 },
+      { type: 'top_categories', size: 3 },
+      { type: 'category_tree', size: 3 },
+      { type: 'category_sunburst', size: 3 },
+    ],
+  },
+  {
+    id: 'window',
+    name: 'Window',
+    elements: [
+      { type: 'top_apps', size: 3 },
+      { type: 'top_titles', size: 3 },
+    ],
+  },
+  {
+    id: 'browser',
+    name: 'Browser',
+    elements: [
+      { type: 'top_domains', size: 3 },
+      { type: 'top_urls', size: 3 },
+    ],
+  },
+];
+
 // initial state
 const _state = {
+  views: [],
   classes: [],
   classes_unsaved_changes: false,
 };
@@ -37,6 +69,7 @@ const getters = {
 // actions
 const actions = {
   async load({ commit }) {
+    commit('loadViews');
     commit('loadClasses', await loadClasses());
   },
   async save({ state, commit }) {
@@ -48,6 +81,15 @@ const actions = {
 
 // mutations
 const mutations = {
+  loadViews(state) {
+    const views_json = localStorage.views;
+    if (views_json && views_json.length >= 1) {
+      state.views = JSON.parse(views_json);
+    } else {
+      state.views = defaultViews;
+    }
+    console.log('Loaded views:', state.views);
+  },
   loadClasses(state, classes) {
     let i = 0;
     state.classes = classes.map(c => Object.assign(c, { id: i++ }));
diff --git a/src/util/transforms.js b/src/util/transforms.js
new file mode 100644
index 00000000..7c5b830a
--- /dev/null
+++ b/src/util/transforms.js
@@ -0,0 +1,38 @@
+import _ from 'lodash';
+import moment from 'moment';
+
+// TODO: Move somewhere else, possibly turn into a serverside transform
+export function split_by_hour_into_data(events) {
+  if (events === undefined || events === null || events.length == 0) return [];
+  const d = moment(events[0].timestamp).startOf('day');
+  return _.range(0, 24).map(h => {
+    let duration = 0;
+    const d_start = d.clone().hour(h);
+    const d_end = d.clone().hour(h + 1);
+    // This can be made faster by not checking every event per hour, but since number of events is small anyway this and this is a lot shorter and easier to read it doesn't really matter.
+    events.map(e => {
+      const e_start = moment(e.timestamp);
+      const e_end = e_start.clone().add(e.duration, 'seconds');
+      if (
+        e_start.isBetween(d_start, d_end) ||
+        e_end.isBetween(d_start, d_end) ||
+        d_start.isBetween(e_start, e_end)
+      ) {
+        if (d_start < e_start && e_end < d_end) {
+          // If entire event is contained within the hour
+          duration += e.duration;
+        } else if (d_start < e_start) {
+          // If start of event is within the hour, but not the end
+          duration += (d_end - e_start) / 1000;
+        } else if (e_end < d_end) {
+          // If end of event is within the hour, but not the start
+          duration += (e_end - d_start) / 1000;
+        } else {
+          // Happens if event covers entire hour and more
+          duration += 3600;
+        }
+      }
+    });
+    return duration / 60 / 60;
+  });
+}
diff --git a/src/views/activity/Activity.vue b/src/views/activity/Activity.vue
index 277987e9..e37656ed 100644
--- a/src/views/activity/Activity.vue
+++ b/src/views/activity/Activity.vue
@@ -36,19 +36,18 @@ div
 
   aw-periodusage(:periodusage_arr="periodusage", @update="setDate")
 
-  ul.row.nav.nav-tabs.mt-3.pl-3
-    li.nav-item
-      router-link.nav-link(:to="{ name: 'activity-summary', params: $route.params }")
-        h6 Summary
-    li.nav-item
-      router-link.nav-link(:to="{ name: 'activity-window', params: $route.params }")
-        h6 Window
-    li.nav-item
-      router-link.nav-link(:to="{ name: 'activity-browser', params: $route.params }")
-        h6 Browser
+  ul.row.nav.nav-tabs.mt-3.px-3
+    li.nav-item(v-for="view in views")
+      router-link.nav-link(:to="{ name: 'activity-view', params: {...$route.params, view_id: view.id}}")
+        h6 {{view.name}}
     li.nav-item
       router-link.nav-link(:to="{ name: 'activity-editor', params: $route.params }")
         h6 Editor
+    li.nav-item(style="margin-left: auto")
+      a.nav-link(@click="addView")
+        h6
+          icon(name="plus")
+          span New view
 
   div
     router-view
@@ -110,6 +109,7 @@ import _ from 'lodash';
 import 'vue-awesome/icons/arrow-left';
 import 'vue-awesome/icons/arrow-right';
 import 'vue-awesome/icons/sync';
+import 'vue-awesome/icons/plus';
 
 export default {
   name: 'Activity',
@@ -135,6 +135,9 @@ export default {
     };
   },
   computed: {
+    views: function () {
+      return this.$store.state.settings.views;
+    },
     _date: function () {
       return this.date || get_today();
     },
@@ -205,6 +208,9 @@ export default {
   },
 
   methods: {
+    addView: function () {
+      alert('Not implemented yet');
+    },
     previousPeriod: function () {
       return moment(this._date).subtract(1, `${this.periodLength}s`).format('YYYY-MM-DD');
     },
diff --git a/src/views/activity/ActivitySummary.vue b/src/views/activity/ActivitySummary.vue
index 86a80f5c..a175f135 100644
--- a/src/views/activity/ActivitySummary.vue
+++ b/src/views/activity/ActivitySummary.vue
@@ -7,57 +7,10 @@ div
   aw-devonly(v-if="periodLength === 'day'" reason="Not ready for production, still experimenting")
     div.row.mb-4
       div.col-md-12
-        aw-timeline-barchart(:height="100", :datasets="datasets")
+        aw-selectable-vis(:id="index" type="timeline_barchart")
 </template>
 
 <script>
-import _ from 'lodash';
-import moment from 'moment';
-
-import { build_category_hierarchy } from '~/util/classes';
-
-function pick_subname_as_name(c) {
-  c.name = c.subname;
-  c.children = c.children.map(pick_subname_as_name);
-  return c;
-}
-
-// TODO: Move somewhere else, possibly turn into a serverside transform
-function split_by_hour_into_data(events) {
-  if (events === undefined || events === null || events.length == 0) return [];
-  const d = moment(events[0].timestamp).startOf('day');
-  return _.range(0, 24).map(h => {
-    let duration = 0;
-    const d_start = d.clone().hour(h);
-    const d_end = d.clone().hour(h + 1);
-    // This can be made faster by not checking every event per hour, but since number of events is small anyway this and this is a lot shorter and easier to read it doesn't really matter.
-    events.map(e => {
-      const e_start = moment(e.timestamp);
-      const e_end = e_start.clone().add(e.duration, 'seconds');
-      if (
-        e_start.isBetween(d_start, d_end) ||
-        e_end.isBetween(d_start, d_end) ||
-        d_start.isBetween(e_start, e_end)
-      ) {
-        if (d_start < e_start && e_end < d_end) {
-          // If entire event is contained within the hour
-          duration += e.duration;
-        } else if (d_start < e_start) {
-          // If start of event is within the hour, but not the end
-          duration += (d_end - e_start) / 1000;
-        } else if (e_end < d_end) {
-          // If end of event is within the hour, but not the start
-          duration += (e_end - d_start) / 1000;
-        } else {
-          // Happens if event covers entire hour and more
-          duration += 3600;
-        }
-      }
-    });
-    return duration / 60 / 60;
-  });
-}
-
 export default {
   name: 'Activity',
   props: {
@@ -71,44 +24,6 @@ export default {
       views: this.loadSummaryFavoriteViews(),
     };
   },
-  computed: {
-    top_apps: function () {
-      return this.$store.state.activity.window.top_apps;
-    },
-    top_titles: function () {
-      return this.$store.state.activity.window.top_titles;
-    },
-    top_categories: function () {
-      return this.$store.state.activity.category.top;
-    },
-    top_domains: function () {
-      return this.$store.state.activity.browser.top_domains;
-    },
-    top_categories_hierarchy: function () {
-      if (this.top_categories) {
-        const categories = this.top_categories.map(c => {
-          return { name: c.data.$category, size: c.duration };
-        });
-
-        return {
-          name: 'All',
-          children: build_category_hierarchy(categories).map(c => pick_subname_as_name(c)),
-        };
-      } else {
-        return null;
-      }
-    },
-    datasets: function () {
-      const data = split_by_hour_into_data(this.$store.state.activity.active.events);
-      return [
-        {
-          label: 'Total time',
-          backgroundColor: '#6699ff',
-          data,
-        },
-      ];
-    },
-  },
   methods: {
     onTypeChange(id, type) {
       this.views[id] = type;
diff --git a/src/views/activity/ActivityView.vue b/src/views/activity/ActivityView.vue
new file mode 100644
index 00000000..74659070
--- /dev/null
+++ b/src/views/activity/ActivityView.vue
@@ -0,0 +1,41 @@
+<template lang="pug">
+div
+  div.row.mb-4
+    div.col-md-6.col-lg-4.p-3(v-for="el, index in view.elements")
+      aw-selectable-vis(:id="index" :type="el.type" @onTypeChange="onTypeChange")
+
+  div
+    icon(name="plus")
+    span Add visualization to view
+</template>
+
+<script>
+export default {
+  name: 'ActivityView',
+  props: {
+    view_id: { type: String, default: 'default' },
+    periodLength: {
+      type: String,
+      default: 'day',
+    },
+  },
+  computed: {
+    view: function () {
+      if (this.view_id == 'default') {
+        return this.$store.state.settings.views[0];
+      } else {
+        return this.$store.state.settings.views.find(v => v.id == this.view_id);
+      }
+    },
+  },
+  methods: {
+    onTypeChange(id, type) {
+      // TODO: Use vuex store
+      console.log(this.$store.state.settings.views);
+      //this.elements[id] = type;
+      // Needed to emit the change to the child component
+      //this.$set(this.elements, this.elements);
+    },
+  },
+};
+</script>

From 783733b50a1eefbc2acccbeb011d8baf32424b72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bj=C3=A4reholt?= <erik@bjareho.lt>
Date: Fri, 30 Oct 2020 12:20:57 +0100
Subject: [PATCH 02/11] feat: continued work on customizable views, fixing a
 few bugs

---
 src/components/SelectableVisualization.vue |  1 +
 src/route.js                               | 23 ---------
 src/store/modules/settings.js              |  5 ++
 src/views/activity/ActivityBrowser.vue     | 56 ---------------------
 src/views/activity/ActivitySummary.vue     | 57 ----------------------
 src/views/activity/ActivityView.vue        | 17 ++++---
 src/views/activity/ActivityWindow.vue      | 53 --------------------
 7 files changed, 15 insertions(+), 197 deletions(-)
 delete mode 100644 src/views/activity/ActivityBrowser.vue
 delete mode 100644 src/views/activity/ActivitySummary.vue
 delete mode 100644 src/views/activity/ActivityWindow.vue

diff --git a/src/components/SelectableVisualization.vue b/src/components/SelectableVisualization.vue
index 2e47d980..3d1d62ec 100644
--- a/src/components/SelectableVisualization.vue
+++ b/src/components/SelectableVisualization.vue
@@ -172,6 +172,7 @@ export default {
         timeline_barchart: {
           title: 'Timeline (barchart)',
           // TODO
+          available: true,
           //available: this.$store.state.activity.category.available,
         },
       };
diff --git a/src/route.js b/src/route.js
index 13698eaf..3052c1c3 100644
--- a/src/route.js
+++ b/src/route.js
@@ -6,9 +6,6 @@ const Home = () => import('./views/Home.vue');
 // Activity views for desktop
 const Activity = () => import('./views/activity/Activity.vue');
 const ActivityView = () => import('./views/activity/ActivityView.vue');
-const ActivitySummary = () => import('./views/activity/ActivitySummary.vue');
-const ActivityWindow = () => import('./views/activity/ActivityWindow.vue');
-const ActivityBrowser = () => import('./views/activity/ActivityBrowser.vue');
 const ActivityEditor = () => import('./views/activity/ActivityEditor.vue');
 
 const Buckets = () => import('./views/Buckets.vue');
@@ -36,26 +33,6 @@ const router = new VueRouter({
           component: ActivityView,
           props: true,
         },
-        {
-          path: 'summary',
-          meta: { subview: 'summary' },
-          name: 'activity-summary',
-          component: ActivitySummary,
-          props: true,
-        },
-        {
-          path: 'window',
-          meta: { subview: 'window' },
-          name: 'activity-window',
-          component: ActivityWindow,
-          props: true,
-        },
-        {
-          path: 'browser',
-          meta: { subview: 'browser' },
-          name: 'activity-browser',
-          component: ActivityBrowser,
-        },
         {
           path: 'editor',
           meta: { subview: 'editor' },
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 2c2b6fe0..19fdc89a 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -90,6 +90,11 @@ const mutations = {
     }
     console.log('Loaded views:', state.views);
   },
+  editView(state, { view_id, el_id, type }) {
+    console.log(view_id, el_id, type);
+    console.log(state.views);
+    state.views.find(v => v.id == view_id).elements[el_id].type = type;
+  },
   loadClasses(state, classes) {
     let i = 0;
     state.classes = classes.map(c => Object.assign(c, { id: i++ }));
diff --git a/src/views/activity/ActivityBrowser.vue b/src/views/activity/ActivityBrowser.vue
deleted file mode 100644
index a010be09..00000000
--- a/src/views/activity/ActivityBrowser.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template lang="pug">
-div.mt-3
-  // TODO: Add back option to select a specific browser bucket
-  div(v-if="browserBuckets.length <= 0")
-    h6 No browser buckets available
-    small
-      | This feature requires a browser watcher.
-      | You can find a list of all watchers in #[a(href="https://activitywatch.readthedocs.io/en/latest/watchers.html") the documentation].
-
-  div(v-if="browserBuckets.length > 0")
-    h6 Active browser time: {{ $store.state.activity.browser.duration | friendlyduration }}
-
-    div.row
-      div.col-md-6
-        h5 Top Browser Domains
-        div(v-if="browserBuckets")
-          aw-summary(:fields="$store.state.activity.browser.top_domains", :namefunc="e => e.data.$domain", :colorfunc="e => e.data.$domain", with_limit)
-
-      div.col-md-6
-        h5 Top Browser URLs
-        div(v-if="browserBuckets")
-          aw-summary(:fields="$store.state.activity.browser.top_urls", :namefunc="e => e.data.url", :colorfunc="e => e.data.$domain", with_limit)
-
-  //div(v-if="periodLength === 'day'")
-    br
-    hr
-    b-form-checkbox(v-model="timelineShowAFK")
-      | Show AFK time
-    aw-timeline-inspect(:chunks="$store.state.activity.web_chunks", :show_afk='timelineShowAFK', :chunkfunc='e => e.data.$domain', :eventfunc='e => e.data.url')
-  br
-</template>
-
-<script>
-export default {
-  name: 'Activity',
-  props: {
-    periodLength: {
-      type: String,
-      default: 'day',
-    },
-  },
-  data: () => {
-    return {
-      filterAFK: true,
-      timelineShowAFK: true,
-      // browserBucketSelected: 'all',
-      top_web_count: 5,
-    };
-  },
-  computed: {
-    browserBuckets: function () {
-      return this.$store.state.activity.buckets.browser;
-    },
-  },
-};
-</script>
diff --git a/src/views/activity/ActivitySummary.vue b/src/views/activity/ActivitySummary.vue
deleted file mode 100644
index a175f135..00000000
--- a/src/views/activity/ActivitySummary.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template lang="pug">
-div
-  div.row.mb-4
-    div.col-md-6.col-lg-4.p-3(v-for="view, index in views")
-      aw-selectable-vis(:id="index" :type="view" @onTypeChange="onTypeChange")
-
-  aw-devonly(v-if="periodLength === 'day'" reason="Not ready for production, still experimenting")
-    div.row.mb-4
-      div.col-md-12
-        aw-selectable-vis(:id="index" type="timeline_barchart")
-</template>
-
-<script>
-export default {
-  name: 'Activity',
-  props: {
-    periodLength: {
-      type: String,
-      default: 'day',
-    },
-  },
-  data: function () {
-    return {
-      views: this.loadSummaryFavoriteViews(),
-    };
-  },
-  methods: {
-    onTypeChange(id, type) {
-      this.views[id] = type;
-      // Needed to emit the change to the child component
-      this.$set(this.views, this.views);
-      this.saveSummaryFavoriteViews();
-    },
-
-    saveSummaryFavoriteViews() {
-      localStorage.activity_summary_favorite_views = JSON.stringify(this.views);
-      console.log('Saved summary favorite types', localStorage.activity_summary_favorite_views);
-    },
-
-    loadSummaryFavoriteViews() {
-      const favorite_views = localStorage.activity_summary_favorite_views;
-      if (favorite_views) {
-        return JSON.parse(favorite_views);
-      } else {
-        return [
-          'top_apps',
-          'top_titles',
-          'top_domains',
-          'top_categories',
-          'category_tree',
-          'category_sunburst',
-        ];
-      }
-    },
-  },
-};
-</script>
diff --git a/src/views/activity/ActivityView.vue b/src/views/activity/ActivityView.vue
index 74659070..94afd55f 100644
--- a/src/views/activity/ActivityView.vue
+++ b/src/views/activity/ActivityView.vue
@@ -1,10 +1,10 @@
 <template lang="pug">
-div
+div(v-if="view")
   div.row.mb-4
     div.col-md-6.col-lg-4.p-3(v-for="el, index in view.elements")
       aw-selectable-vis(:id="index" :type="el.type" @onTypeChange="onTypeChange")
 
-  div
+  b-button(@click="addVisualization")
     icon(name="plus")
     span Add visualization to view
 </template>
@@ -29,12 +29,13 @@ export default {
     },
   },
   methods: {
-    onTypeChange(id, type) {
-      // TODO: Use vuex store
-      console.log(this.$store.state.settings.views);
-      //this.elements[id] = type;
-      // Needed to emit the change to the child component
-      //this.$set(this.elements, this.elements);
+    addVisualization: function () {
+      alert('not implemented');
+    },
+    async onTypeChange(id, type) {
+      const view_id =
+        this.view_id == 'default' ? this.$store.state.settings.views[0].id : this.view_id;
+      await this.$store.commit('settings/editView', { view_id: view_id, el_id: id, type });
     },
   },
 };
diff --git a/src/views/activity/ActivityWindow.vue b/src/views/activity/ActivityWindow.vue
deleted file mode 100644
index bf112b19..00000000
--- a/src/views/activity/ActivityWindow.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template lang="pug">
-div.mt-3
-  div.row.mb-6
-    div.col-md-6
-      h5 Top Applications
-      aw-summary(:fields="top_apps", :namefunc="e => e.data.app", :colorfunc="e => e.data.app", with_limit)
-    div.col-md-6
-      h5 Top Window Titles
-      aw-summary(:fields="top_titles", :namefunc="e => e.data.title", :colorfunc="e => e.data.app", with_limit)
-
-  div(v-if="periodLength == 'day'")
-    aw-sunburst-clock(:date="date", :afkBucketId="bucket_id_afk", :windowBucketId="bucket_id_window")
-  div(v-else)
-    | Nothing to show here for the current period length: {{ periodLength }}
-</template>
-
-<script>
-import { get_today } from '~/util/time';
-
-export default {
-  name: 'Activity',
-  props: {
-    date: {
-      type: String,
-      default: get_today(),
-    },
-    periodLength: {
-      type: String,
-      default: 'day',
-    },
-    host: String,
-  },
-  data: () => {
-    return {
-      timelineShowAFK: true,
-    };
-  },
-  computed: {
-    top_apps: function () {
-      return this.$store.state.activity.window.top_apps;
-    },
-    top_titles: function () {
-      return this.$store.state.activity.window.top_titles;
-    },
-    bucket_id_window: function () {
-      return this.$store.state.activity.buckets.window[0];
-    },
-    bucket_id_afk: function () {
-      return this.$store.state.activity.buckets.afk[0];
-    },
-  },
-};
-</script>

From 6578e7f217f4fe02d9c0b3d76a1e8d7c4ec8d18c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bj=C3=A4reholt?= <erik@bjareho.lt>
Date: Fri, 30 Oct 2020 12:34:03 +0100
Subject: [PATCH 03/11] feat: added ability to add new views and visualizations

---
 src/store/modules/settings.js       | 6 ++++++
 src/views/activity/Activity.vue     | 5 ++++-
 src/views/activity/ActivityView.vue | 4 +++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 19fdc89a..899dfe74 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -90,11 +90,17 @@ const mutations = {
     }
     console.log('Loaded views:', state.views);
   },
+  addView(state, { view_id }) {
+    state.views.push({ id: view_id, name: view_id, elements: [] });
+  },
   editView(state, { view_id, el_id, type }) {
     console.log(view_id, el_id, type);
     console.log(state.views);
     state.views.find(v => v.id == view_id).elements[el_id].type = type;
   },
+  addVisualization(state, { view_id, type }) {
+    state.views.find(v => v.id == view_id).elements.push({ type: type });
+  },
   loadClasses(state, classes) {
     let i = 0;
     state.classes = classes.map(c => Object.assign(c, { id: i++ }));
diff --git a/src/views/activity/Activity.vue b/src/views/activity/Activity.vue
index e37656ed..62d52d11 100644
--- a/src/views/activity/Activity.vue
+++ b/src/views/activity/Activity.vue
@@ -209,7 +209,10 @@ export default {
 
   methods: {
     addView: function () {
-      alert('Not implemented yet');
+      // TODO: Open modal to ask for options like id, and name
+      this.$store.commit('settings/addView', {
+        view_id: this.$store.state.settings.views.length + 1,
+      });
     },
     previousPeriod: function () {
       return moment(this._date).subtract(1, `${this.periodLength}s`).format('YYYY-MM-DD');
diff --git a/src/views/activity/ActivityView.vue b/src/views/activity/ActivityView.vue
index 94afd55f..b57d3291 100644
--- a/src/views/activity/ActivityView.vue
+++ b/src/views/activity/ActivityView.vue
@@ -30,7 +30,9 @@ export default {
   },
   methods: {
     addVisualization: function () {
-      alert('not implemented');
+      const view_id =
+        this.view_id == 'default' ? this.$store.state.settings.views[0].id : this.view_id;
+      this.$store.commit('settings/addVisualization', { view_id, type: 'top_apps' });
     },
     async onTypeChange(id, type) {
       const view_id =

From 50e2c0dcc6506dffc50e12530027a9ff9d006bd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bj=C3=A4reholt?= <erik@bjareho.lt>
Date: Sun, 1 Nov 2020 12:41:38 +0100
Subject: [PATCH 04/11] test: fixed e2e screenshot test

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

diff --git a/test/e2e/screenshot.test.js b/test/e2e/screenshot.test.js
index 068b27e0..24a6f5ac 100644
--- a/test/e2e/screenshot.test.js
+++ b/test/e2e/screenshot.test.js
@@ -14,10 +14,13 @@ test('Take a screenshot of the activity view', async t => {
     // The resolution is the one used by the testcafe-action:
     //   https://github.com/DevExpress/testcafe-action/blob/0989d5f8ad852d71298ce3b770442cdec309d479/index.js#L59-L60
     //.resizeWindow(1280, 720)
-    .click('#load-demo')
-    // TODO: Figure out how to click all hide-devonly buttons instead of hardcoding number of clicks
-    .click('.hide-devonly')
-    .click('.hide-devonly');
+    .click('#load-demo');
+
+  // Hide all devonly-elements
+  const $hidedevonly = Selector('.hide-devonly');
+  for (let i = 0; i < $hidedevonly.count; i++) {
+    await t.click($hidedevonly.nth(i));
+  }
 
   // Closes the 'Network Error' message if running without aw-server
   const $close = Selector('.close');

From 1beade254983c6253bb7db647046f578d7cc21b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bj=C3=A4reholt?= <erik@bjareho.lt>
Date: Sun, 1 Nov 2020 12:43:15 +0100
Subject: [PATCH 05/11] feat: added buttons to edit/save view, made
 ActivityView delegate to ActivityEditor if view_id is 'editor'

---
 src/components/SelectableVisualization.vue | 12 ++++--
 src/route.js                               |  7 ----
 src/store/modules/settings.js              | 10 +++++
 src/views/activity/Activity.vue            | 19 +++++++---
 src/views/activity/ActivityEditor.vue      |  2 +-
 src/views/activity/ActivityView.vue        | 44 +++++++++++++++++++---
 6 files changed, 72 insertions(+), 22 deletions(-)

diff --git a/src/components/SelectableVisualization.vue b/src/components/SelectableVisualization.vue
index 3d1d62ec..8d40184a 100644
--- a/src/components/SelectableVisualization.vue
+++ b/src/components/SelectableVisualization.vue
@@ -1,12 +1,14 @@
 <template lang="pug">
 div
   h5 {{ visualizations[type].title }}
-  div
-    b-dropdown.vis-style-dropdown-btn(size="sm" variant="outline-secondary")
+  div(v-if="editable").vis-style-dropdown-btn
+    b-dropdown.mr-1(size="sm" variant="outline-secondary")
       template(v-slot:button-content)
         icon(name="cog")
       b-dropdown-item(v-for="t in types" :key="t" variant="outline-secondary" @click="$emit('onTypeChange', id, t)" v-bind:disabled="!visualizations[t].available")
         | {{ visualizations[t].title }}
+    b-button.p-0(size="sm", variant="outline-danger" @click="$emit('onRemove', id)")
+      icon(name="times")
 
   div(v-if="type == 'top_apps'")
     aw-summary(:fields="$store.state.activity.window.top_apps",
@@ -65,13 +67,16 @@ div
   top: 0.8em;
   right: 0.8em;
 
-  > .btn {
+  .btn {
     border: 0px;
   }
 }
 </style>
 
 <script>
+import 'vue-awesome/icons/cog';
+import 'vue-awesome/icons/times';
+
 import { split_by_hour_into_data } from '~/util/transforms';
 
 // TODO: Move this somewhere else
@@ -88,6 +93,7 @@ export default {
   props: {
     id: Number,
     type: String,
+    editable: { type: Boolean, default: true },
   },
   data: function () {
     return {
diff --git a/src/route.js b/src/route.js
index 3052c1c3..e5b2db8a 100644
--- a/src/route.js
+++ b/src/route.js
@@ -6,7 +6,6 @@ const Home = () => import('./views/Home.vue');
 // Activity views for desktop
 const Activity = () => import('./views/activity/Activity.vue');
 const ActivityView = () => import('./views/activity/ActivityView.vue');
-const ActivityEditor = () => import('./views/activity/ActivityEditor.vue');
 
 const Buckets = () => import('./views/Buckets.vue');
 const Bucket = () => import('./views/Bucket.vue');
@@ -33,12 +32,6 @@ const router = new VueRouter({
           component: ActivityView,
           props: true,
         },
-        {
-          path: 'editor',
-          meta: { subview: 'editor' },
-          name: 'activity-editor',
-          component: ActivityEditor,
-        },
         // Unspecified should redirect to summary view is the summary view
         // (needs to be last since otherwise it'll always match first)
         {
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 899dfe74..fed7867b 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -35,6 +35,13 @@ const defaultViews = [
       { type: 'top_urls', size: 3 },
     ],
   },
+  {
+    id: 'editor',
+    name: 'Editor',
+    elements: [
+      // TODO: Migrate ActivityEditor to ActivityView
+    ],
+  },
 ];
 
 // initial state
@@ -101,6 +108,9 @@ const mutations = {
   addVisualization(state, { view_id, type }) {
     state.views.find(v => v.id == view_id).elements.push({ type: type });
   },
+  removeVisualization(state, { view_id, el_id }) {
+    state.views.find(v => v.id == view_id).elements.splice(el_id, 1);
+  },
   loadClasses(state, classes) {
     let i = 0;
     state.classes = classes.map(c => Object.assign(c, { id: i++ }));
diff --git a/src/views/activity/Activity.vue b/src/views/activity/Activity.vue
index 62d52d11..043055bb 100644
--- a/src/views/activity/Activity.vue
+++ b/src/views/activity/Activity.vue
@@ -38,26 +38,26 @@ div
 
   ul.row.nav.nav-tabs.mt-3.px-3
     li.nav-item(v-for="view in views")
-      router-link.nav-link(:to="{ name: 'activity-view', params: {...$route.params, view_id: view.id}}")
+      router-link.nav-link(:to="{ name: 'activity-view', params: {...$route.params, view_id: view.id}}" :class="{'router-link-exact-active': currentView.id == view.id}")
         h6 {{view.name}}
-    li.nav-item
-      router-link.nav-link(:to="{ name: 'activity-editor', params: $route.params }")
-        h6 Editor
+
     li.nav-item(style="margin-left: auto")
       a.nav-link(@click="addView")
         h6
           icon(name="plus")
-          span New view
+          span.d-none.d-md-inline
+            | New view
 
   div
     router-view
 
   div
+    hr
     h5 Options
 
     div.row
       div.col-md-6
-        b-form-group(label="Show category" label-cols="5" label-cols-lg="4")
+        b-form-group(label="Show/filter category" label-cols="5" label-cols-lg="4")
           b-form-select(v-model="filterCategory", :options="categories")
 
     aw-devonly
@@ -110,6 +110,9 @@ import 'vue-awesome/icons/arrow-left';
 import 'vue-awesome/icons/arrow-right';
 import 'vue-awesome/icons/sync';
 import 'vue-awesome/icons/plus';
+import 'vue-awesome/icons/edit';
+import 'vue-awesome/icons/times';
+import 'vue-awesome/icons/save';
 
 export default {
   name: 'Activity',
@@ -138,6 +141,9 @@ export default {
     views: function () {
       return this.$store.state.settings.views;
     },
+    currentView: function () {
+      return this.views.find(v => v.id == this.$route.params.view_id) || this.views[0];
+    },
     _date: function () {
       return this.date || get_today();
     },
@@ -210,6 +216,7 @@ export default {
   methods: {
     addView: function () {
       // TODO: Open modal to ask for options like id, and name
+      // FIXME: view_id is not guaranteed to be unique
       this.$store.commit('settings/addView', {
         view_id: this.$store.state.settings.views.length + 1,
       });
diff --git a/src/views/activity/ActivityEditor.vue b/src/views/activity/ActivityEditor.vue
index e75ec933..74beafe2 100644
--- a/src/views/activity/ActivityEditor.vue
+++ b/src/views/activity/ActivityEditor.vue
@@ -36,7 +36,7 @@ div.mt-3
 import moment from 'moment';
 
 export default {
-  name: 'Activity',
+  name: 'ActivityEditor',
   props: {
     periodLength: {
       type: String,
diff --git a/src/views/activity/ActivityView.vue b/src/views/activity/ActivityView.vue
index b57d3291..8fa2c98d 100644
--- a/src/views/activity/ActivityView.vue
+++ b/src/views/activity/ActivityView.vue
@@ -1,17 +1,36 @@
 <template lang="pug">
 div(v-if="view")
-  div.row.mb-4
+  div(v-if="view.id == 'editor'")
+    ActivityEditor
+
+  div.row
     div.col-md-6.col-lg-4.p-3(v-for="el, index in view.elements")
-      aw-selectable-vis(:id="index" :type="el.type" @onTypeChange="onTypeChange")
+      aw-selectable-vis(:id="index" :type="el.type" @onTypeChange="onTypeChange" @onRemove="onRemove" :editable="editing")
+
+    div.col-md-6.col-lg-4.p-3(v-if="editing")
+      b-button(@click="addVisualization" variant="outline-dark" block size="lg")
+        icon(name="plus")
+        span Add visualization
 
-  b-button(@click="addVisualization")
-    icon(name="plus")
-    span Add visualization to view
+  div.d-flex.flex-row-reverse.mt-2
+    div(v-if="editing")
+      b-button(variant="success" @click="save(); editing = !editing;")
+        icon(name="save")
+        span Save
+      b-button.ml-2(variant="outline-dark" @click="cancel(); editing = !editing;")
+        icon(name="times")
+        span Cancel
+    b-button(v-else variant="outline-dark" size="sm" @click="editing = !editing")
+      icon(name="edit")
+      span Edit view
 </template>
 
 <script>
+import ActivityEditor from '~/views/activity/ActivityEditor';
+
 export default {
   name: 'ActivityView',
+  components: { ActivityEditor: ActivityEditor },
   props: {
     view_id: { type: String, default: 'default' },
     periodLength: {
@@ -19,6 +38,9 @@ export default {
       default: 'day',
     },
   },
+  data() {
+    return { editing: false };
+  },
   computed: {
     view: function () {
       if (this.view_id == 'default') {
@@ -29,6 +51,12 @@ export default {
     },
   },
   methods: {
+    save() {
+      alert('Not implemented');
+    },
+    cancel() {
+      alert('Not implemented');
+    },
     addVisualization: function () {
       const view_id =
         this.view_id == 'default' ? this.$store.state.settings.views[0].id : this.view_id;
@@ -39,6 +67,12 @@ export default {
         this.view_id == 'default' ? this.$store.state.settings.views[0].id : this.view_id;
       await this.$store.commit('settings/editView', { view_id: view_id, el_id: id, type });
     },
+    async onRemove(id) {
+      console.log('rem');
+      const view_id =
+        this.view_id == 'default' ? this.$store.state.settings.views[0].id : this.view_id;
+      await this.$store.commit('settings/removeVisualization', { view_id: view_id, el_id: id });
+    },
   },
 };
 </script>

From 2788c14e2a7c97fad2ff9067446901d0696c34fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bj=C3=A4reholt?= <erik@bjareho.lt>
Date: Sun, 1 Nov 2020 13:01:14 +0100
Subject: [PATCH 06/11] refactor: split 'settings' Vuex store into 'categories'
 and 'views'

---
 src/components/CategoryEditTree.vue           |  8 +-
 src/store/index.js                            |  6 +-
 .../modules/{settings.js => categories.js}    | 63 -------------
 src/store/modules/views.js                    | 91 +++++++++++++++++++
 src/views/activity/Activity.vue               | 13 +--
 src/views/activity/ActivityView.vue           | 16 ++--
 src/views/settings/CategorizationSettings.vue | 14 +--
 7 files changed, 121 insertions(+), 90 deletions(-)
 rename src/store/modules/{settings.js => categories.js} (62%)
 create mode 100644 src/store/modules/views.js

diff --git a/src/components/CategoryEditTree.vue b/src/components/CategoryEditTree.vue
index 74ef4fd3..b0addce7 100644
--- a/src/components/CategoryEditTree.vue
+++ b/src/components/CategoryEditTree.vue
@@ -78,7 +78,7 @@ export default {
   },
   computed: {
     allCategories: function () {
-      const categories = this.$store.getters['settings/all_categories'];
+      const categories = this.$store.getters['categories/all_categories'];
       const entries = categories.map(c => {
         return { text: c.join('->'), value: c };
       });
@@ -94,7 +94,7 @@ export default {
   },
   methods: {
     addSubclass: function (parent) {
-      this.$store.commit('settings/addClass', {
+      this.$store.commit('categories/addClass', {
         name: parent.name.concat(['New class']),
         rule: { type: 'regex', regex: 'FILL ME' },
       });
@@ -103,7 +103,7 @@ export default {
       // TODO: Show a confirmation dialog
       // TODO: Remove children as well?
       // TODO: Move button to edit modal?
-      this.$store.commit('settings/removeClass', _class);
+      this.$store.commit('categories/removeClass', _class);
     },
     showEditModal() {
       this.$refs.edit.show();
@@ -130,7 +130,7 @@ export default {
         name: this.editing.parent.concat(this.editing.name),
         rule: this.editing.rule.type !== null ? this.editing.rule : { type: null },
       };
-      this.$store.commit('settings/updateClass', new_class);
+      this.$store.commit('categories/updateClass', new_class);
 
       // Hide the modal manually
       this.$nextTick(() => {
diff --git a/src/store/index.js b/src/store/index.js
index 41ba746f..43a4dd8b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2,7 +2,8 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import activity from './modules/activity';
 import buckets from './modules/buckets';
-import settings from './modules/settings';
+import categories from './modules/categories';
+import views from './modules/views';
 //import createLogger from '../../../src/plugins/logger';
 
 Vue.use(Vuex);
@@ -13,7 +14,8 @@ export default new Vuex.Store({
   modules: {
     activity,
     buckets,
-    settings,
+    categories,
+    views,
   },
   strict: debug,
   //  plugins: debug ? [createLogger()] : [],
diff --git a/src/store/modules/settings.js b/src/store/modules/categories.js
similarity index 62%
rename from src/store/modules/settings.js
rename to src/store/modules/categories.js
index fed7867b..707410d4 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/categories.js
@@ -6,47 +6,8 @@ import {
   build_category_hierarchy,
 } from '~/util/classes';
 
-const defaultViews = [
-  {
-    id: 'summary',
-    name: 'Summary',
-    elements: [
-      { type: 'top_apps', size: 3 },
-      { type: 'top_titles', size: 3 },
-      { type: 'top_domains', size: 3 },
-      { type: 'top_categories', size: 3 },
-      { type: 'category_tree', size: 3 },
-      { type: 'category_sunburst', size: 3 },
-    ],
-  },
-  {
-    id: 'window',
-    name: 'Window',
-    elements: [
-      { type: 'top_apps', size: 3 },
-      { type: 'top_titles', size: 3 },
-    ],
-  },
-  {
-    id: 'browser',
-    name: 'Browser',
-    elements: [
-      { type: 'top_domains', size: 3 },
-      { type: 'top_urls', size: 3 },
-    ],
-  },
-  {
-    id: 'editor',
-    name: 'Editor',
-    elements: [
-      // TODO: Migrate ActivityEditor to ActivityView
-    ],
-  },
-];
-
 // initial state
 const _state = {
-  views: [],
   classes: [],
   classes_unsaved_changes: false,
 };
@@ -76,7 +37,6 @@ const getters = {
 // actions
 const actions = {
   async load({ commit }) {
-    commit('loadViews');
     commit('loadClasses', await loadClasses());
   },
   async save({ state, commit }) {
@@ -88,29 +48,6 @@ const actions = {
 
 // mutations
 const mutations = {
-  loadViews(state) {
-    const views_json = localStorage.views;
-    if (views_json && views_json.length >= 1) {
-      state.views = JSON.parse(views_json);
-    } else {
-      state.views = defaultViews;
-    }
-    console.log('Loaded views:', state.views);
-  },
-  addView(state, { view_id }) {
-    state.views.push({ id: view_id, name: view_id, elements: [] });
-  },
-  editView(state, { view_id, el_id, type }) {
-    console.log(view_id, el_id, type);
-    console.log(state.views);
-    state.views.find(v => v.id == view_id).elements[el_id].type = type;
-  },
-  addVisualization(state, { view_id, type }) {
-    state.views.find(v => v.id == view_id).elements.push({ type: type });
-  },
-  removeVisualization(state, { view_id, el_id }) {
-    state.views.find(v => v.id == view_id).elements.splice(el_id, 1);
-  },
   loadClasses(state, classes) {
     let i = 0;
     state.classes = classes.map(c => Object.assign(c, { id: i++ }));
diff --git a/src/store/modules/views.js b/src/store/modules/views.js
new file mode 100644
index 00000000..b70988ff
--- /dev/null
+++ b/src/store/modules/views.js
@@ -0,0 +1,91 @@
+const defaultViews = [
+  {
+    id: 'summary',
+    name: 'Summary',
+    elements: [
+      { type: 'top_apps', size: 3 },
+      { type: 'top_titles', size: 3 },
+      { type: 'top_domains', size: 3 },
+      { type: 'top_categories', size: 3 },
+      { type: 'category_tree', size: 3 },
+      { type: 'category_sunburst', size: 3 },
+    ],
+  },
+  {
+    id: 'window',
+    name: 'Window',
+    elements: [
+      { type: 'top_apps', size: 3 },
+      { type: 'top_titles', size: 3 },
+    ],
+  },
+  {
+    id: 'browser',
+    name: 'Browser',
+    elements: [
+      { type: 'top_domains', size: 3 },
+      { type: 'top_urls', size: 3 },
+    ],
+  },
+  {
+    id: 'editor',
+    name: 'Editor',
+    elements: [
+      // TODO: Migrate ActivityEditor to ActivityView
+    ],
+  },
+];
+
+// initial state
+const _state = {
+  views: [],
+};
+
+// getters
+const getters = {};
+
+// actions
+const actions = {
+  async load({ commit }) {
+    commit('loadViews');
+  },
+  // TODO
+  //async save({ state, commit }) {
+  //  ...
+  //},
+};
+
+// mutations
+const mutations = {
+  loadViews(state) {
+    const views_json = localStorage.views;
+    if (views_json && views_json.length >= 1) {
+      state.views = JSON.parse(views_json);
+    } else {
+      state.views = defaultViews;
+    }
+    console.log('Loaded views:', state.views);
+  },
+  addView(state, { view_id }) {
+    state.views.push({ id: view_id, name: view_id, elements: [] });
+  },
+  editView(state, { view_id, el_id, type }) {
+    console.log(view_id, el_id, type);
+    console.log(state.views);
+    state.views.find(v => v.id == view_id).elements[el_id].type = type;
+  },
+  addVisualization(state, { view_id, type }) {
+    state.views.find(v => v.id == view_id).elements.push({ type: type });
+  },
+  removeVisualization(state, { view_id, el_id }) {
+    state.views.find(v => v.id == view_id).elements.splice(el_id, 1);
+  },
+};
+
+export default {
+  namespaced: true,
+  state: _state,
+  getters,
+  actions,
+  mutations,
+};
diff --git a/src/views/activity/Activity.vue b/src/views/activity/Activity.vue
index 043055bb..1c3da56c 100644
--- a/src/views/activity/Activity.vue
+++ b/src/views/activity/Activity.vue
@@ -139,7 +139,7 @@ export default {
   },
   computed: {
     views: function () {
-      return this.$store.state.settings.views;
+      return this.$store.state.views.views;
     },
     currentView: function () {
       return this.views.find(v => v.id == this.$route.params.view_id) || this.views[0];
@@ -151,7 +151,7 @@ export default {
       return this.$route.meta.subview;
     },
     categories: function () {
-      const cats = this.$store.getters['settings/all_categories'];
+      const cats = this.$store.getters['categories/all_categories'];
       const entries = cats.map(c => {
         return { text: c.join(' > '), value: c };
       });
@@ -162,7 +162,7 @@ export default {
     },
     filterCategories: function () {
       if (this.filterCategory) {
-        const cats = this.$store.getters['settings/all_categories'];
+        const cats = this.$store.getters['categories/all_categories'];
         const isChild = p => c => c.length > p.length && _.isEqual(p, c.slice(0, p.length));
         const children = _.filter(cats, isChild(this.filterCategory));
         return [this.filterCategory].concat(children);
@@ -209,7 +209,8 @@ export default {
   },
 
   mounted: async function () {
-    this.$store.dispatch('settings/load');
+    this.$store.dispatch('views/load');
+    this.$store.dispatch('categories/load');
     await this.refresh();
   },
 
@@ -217,8 +218,8 @@ export default {
     addView: function () {
       // TODO: Open modal to ask for options like id, and name
       // FIXME: view_id is not guaranteed to be unique
-      this.$store.commit('settings/addView', {
-        view_id: this.$store.state.settings.views.length + 1,
+      this.$store.commit('views/addView', {
+        view_id: this.$store.state.views.views.length + 1,
       });
     },
     previousPeriod: function () {
diff --git a/src/views/activity/ActivityView.vue b/src/views/activity/ActivityView.vue
index 8fa2c98d..7bb16062 100644
--- a/src/views/activity/ActivityView.vue
+++ b/src/views/activity/ActivityView.vue
@@ -44,9 +44,9 @@ export default {
   computed: {
     view: function () {
       if (this.view_id == 'default') {
-        return this.$store.state.settings.views[0];
+        return this.$store.state.views.views[0];
       } else {
-        return this.$store.state.settings.views.find(v => v.id == this.view_id);
+        return this.$store.state.views.views.find(v => v.id == this.view_id);
       }
     },
   },
@@ -59,19 +59,19 @@ export default {
     },
     addVisualization: function () {
       const view_id =
-        this.view_id == 'default' ? this.$store.state.settings.views[0].id : this.view_id;
-      this.$store.commit('settings/addVisualization', { view_id, type: 'top_apps' });
+        this.view_id == 'default' ? this.$store.state.views.views[0].id : this.view_id;
+      this.$store.commit('views/addVisualization', { view_id, type: 'top_apps' });
     },
     async onTypeChange(id, type) {
       const view_id =
-        this.view_id == 'default' ? this.$store.state.settings.views[0].id : this.view_id;
-      await this.$store.commit('settings/editView', { view_id: view_id, el_id: id, type });
+        this.view_id == 'default' ? this.$store.state.views.views[0].id : this.view_id;
+      await this.$store.commit('views/editView', { view_id: view_id, el_id: id, type });
     },
     async onRemove(id) {
       console.log('rem');
       const view_id =
-        this.view_id == 'default' ? this.$store.state.settings.views[0].id : this.view_id;
-      await this.$store.commit('settings/removeVisualization', { view_id: view_id, el_id: id });
+        this.view_id == 'default' ? this.$store.state.views.views[0].id : this.view_id;
+      await this.$store.commit('views/removeVisualization', { view_id: view_id, el_id: id });
     },
   },
 };
diff --git a/src/views/settings/CategorizationSettings.vue b/src/views/settings/CategorizationSettings.vue
index 30fcd3f1..1f1f904d 100644
--- a/src/views/settings/CategorizationSettings.vue
+++ b/src/views/settings/CategorizationSettings.vue
@@ -37,27 +37,27 @@ export default {
     CategoryEditTree,
   },
   computed: {
-    ...mapGetters('settings', ['classes_hierarchy']),
-    ...mapState('settings', ['classes_unsaved_changes']),
+    ...mapGetters('categories', ['classes_hierarchy']),
+    ...mapState('categories', ['classes_unsaved_changes']),
   },
   mounted() {
-    this.$store.dispatch('settings/load');
+    this.$store.dispatch('categories/load');
   },
   methods: {
     addClass: function () {
-      this.$store.commit('settings/addClass', {
+      this.$store.commit('categories/addClass', {
         name: ['New class'],
         rule: { type: 'regex', regex: 'FILL ME' },
       });
     },
     saveClasses: async function () {
-      await this.$store.dispatch('settings/save');
+      await this.$store.dispatch('categories/save');
     },
     resetClasses: async function () {
-      await this.$store.dispatch('settings/load');
+      await this.$store.dispatch('categories/load');
     },
     restoreDefaultClasses: async function () {
-      await this.$store.commit('settings/restoreDefaultClasses');
+      await this.$store.commit('categories/restoreDefaultClasses');
     },
   },
 };

From ef52f1e45dfe5e24f22136a31da2dfd96a80be9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bj=C3=A4reholt?= <erik@bjareho.lt>
Date: Sun, 1 Nov 2020 13:11:32 +0100
Subject: [PATCH 07/11] feat: implemented save/cancel when editing view

---
 src/store/modules/views.js          | 9 +++++----
 src/views/activity/ActivityView.vue | 8 ++++----
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/store/modules/views.js b/src/store/modules/views.js
index b70988ff..e59450aa 100644
--- a/src/store/modules/views.js
+++ b/src/store/modules/views.js
@@ -49,10 +49,11 @@ const actions = {
   async load({ commit }) {
     commit('loadViews');
   },
-  // TODO
-  //async save({ state, commit }) {
-  //  ...
-  //},
+  async save({ state, commit }) {
+    localStorage.views = JSON.stringify(state.views);
+    // After save, reload views
+    commit('loadViews');
+  },
 };
 
 // mutations
diff --git a/src/views/activity/ActivityView.vue b/src/views/activity/ActivityView.vue
index 7bb16062..6d67e881 100644
--- a/src/views/activity/ActivityView.vue
+++ b/src/views/activity/ActivityView.vue
@@ -17,7 +17,7 @@ div(v-if="view")
       b-button(variant="success" @click="save(); editing = !editing;")
         icon(name="save")
         span Save
-      b-button.ml-2(variant="outline-dark" @click="cancel(); editing = !editing;")
+      b-button.ml-2(variant="outline-dark" @click="discard(); editing = !editing;")
         icon(name="times")
         span Cancel
     b-button(v-else variant="outline-dark" size="sm" @click="editing = !editing")
@@ -52,10 +52,10 @@ export default {
   },
   methods: {
     save() {
-      alert('Not implemented');
+      this.$store.dispatch('views/save');
     },
-    cancel() {
-      alert('Not implemented');
+    discard() {
+      this.$store.dispatch('views/load');
     },
     addVisualization: function () {
       const view_id =

From 129fdd9f2b35ec5c9c71f9d948a92f5740bd62ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bj=C3=A4reholt?= <erik@bjareho.lt>
Date: Sun, 1 Nov 2020 13:47:43 +0100
Subject: [PATCH 08/11] feat: added delete view and restore views to default

---
 src/store/modules/views.js                    |  8 +++
 src/views/activity/ActivityView.vue           | 57 +++++++++++++------
 src/views/settings/CategorizationSettings.vue |  2 +
 3 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/src/store/modules/views.js b/src/store/modules/views.js
index e59450aa..dd572c6d 100644
--- a/src/store/modules/views.js
+++ b/src/store/modules/views.js
@@ -67,9 +67,17 @@ const mutations = {
     }
     console.log('Loaded views:', state.views);
   },
+  restoreDefaults(state) {
+    state.views = defaultViews;
+  },
   addView(state, { view_id }) {
     state.views.push({ id: view_id, name: view_id, elements: [] });
   },
+  removeView(state, { view_id }) {
+    const idx = state.views.map(v => v.id).indexOf(view_id);
+    console.log(idx);
+    state.views.splice(idx, 1);
+  },
   editView(state, { view_id, el_id, type }) {
     console.log(view_id, el_id, type);
     console.log(state.views);
diff --git a/src/views/activity/ActivityView.vue b/src/views/activity/ActivityView.vue
index 6d67e881..94021787 100644
--- a/src/views/activity/ActivityView.vue
+++ b/src/views/activity/ActivityView.vue
@@ -12,20 +12,33 @@ div(v-if="view")
         icon(name="plus")
         span Add visualization
 
-  div.d-flex.flex-row-reverse.mt-2
-    div(v-if="editing")
-      b-button(variant="success" @click="save(); editing = !editing;")
-        icon(name="save")
-        span Save
-      b-button.ml-2(variant="outline-dark" @click="discard(); editing = !editing;")
+  div(v-if="editing").mt-2
+    div.d-flex.flex-row-reverse
+      b-button(variant="outline-dark" @click="discard(); editing = !editing;")
         icon(name="times")
         span Cancel
-    b-button(v-else variant="outline-dark" size="sm" @click="editing = !editing")
+      b-button.mr-2(variant="success" @click="save(); editing = !editing;")
+        icon(name="save")
+        span Save
+    div.mt-2.d-flex.flex-row-reverse
+      b-button(variant="warning" size="sm" @click="restoreDefaults();")
+        icon(name="undo")
+        span Restore defaults
+      b-button.mr-2(variant="danger" size="sm" @click="remove();")
+        icon(name="trash")
+        span Remove
+  div(v-else).d-flex.flex-row-reverse.mt-2
+    b-button(variant="outline-dark" size="sm" @click="editing = !editing")
       icon(name="edit")
       span Edit view
 </template>
 
 <script>
+import 'vue-awesome/icons/save';
+import 'vue-awesome/icons/times';
+import 'vue-awesome/icons/trash';
+import 'vue-awesome/icons/undo';
+
 import ActivityEditor from '~/views/activity/ActivityEditor';
 
 export default {
@@ -57,21 +70,31 @@ export default {
     discard() {
       this.$store.dispatch('views/load');
     },
+    remove() {
+      this.$store.commit('views/removeView', { view_id: this.view.id });
+      // If we're on an URL that'll be invalid after removing the view, navigate to the main/default view
+      if (!this.$route.path.includes('default')) {
+        this.$router.replace('./default');
+      }
+    },
+    restoreDefaults() {
+      this.$store.commit('views/restoreDefaults');
+      alert(
+        "All views have been restored to defaults. Changes won't be saved until you click 'Save'."
+      );
+      // If we're on an URL that might become invalid, navigate to the main/default view
+      if (!this.$route.path.includes('default')) {
+        this.$router.replace('./default');
+      }
+    },
     addVisualization: function () {
-      const view_id =
-        this.view_id == 'default' ? this.$store.state.views.views[0].id : this.view_id;
-      this.$store.commit('views/addVisualization', { view_id, type: 'top_apps' });
+      this.$store.commit('views/addVisualization', { view_id: this.view.id, type: 'top_apps' });
     },
     async onTypeChange(id, type) {
-      const view_id =
-        this.view_id == 'default' ? this.$store.state.views.views[0].id : this.view_id;
-      await this.$store.commit('views/editView', { view_id: view_id, el_id: id, type });
+      await this.$store.commit('views/editView', { view_id: this.view.id, el_id: id, type });
     },
     async onRemove(id) {
-      console.log('rem');
-      const view_id =
-        this.view_id == 'default' ? this.$store.state.views.views[0].id : this.view_id;
-      await this.$store.commit('views/removeVisualization', { view_id: view_id, el_id: id });
+      await this.$store.commit('views/removeVisualization', { view_id: this.view.id, el_id: id });
     },
   },
 };
diff --git a/src/views/settings/CategorizationSettings.vue b/src/views/settings/CategorizationSettings.vue
index 1f1f904d..5fdbe3b6 100644
--- a/src/views/settings/CategorizationSettings.vue
+++ b/src/views/settings/CategorizationSettings.vue
@@ -4,6 +4,7 @@ div
     div Categorization
   div.float-right
     b-btn.ml-1(@click="restoreDefaultClasses", variant="outline-warning" size="sm")
+      icon(name="undo")
       | Restore defaults
   div
     | Rules for categorizing events. An event can only have one category. If several categories match, the deepest one will be chosen.
@@ -30,6 +31,7 @@ div
 <script>
 import { mapState, mapGetters } from 'vuex';
 import CategoryEditTree from '~/components/CategoryEditTree.vue';
+import 'vue-awesome/icons/undo';
 
 export default {
   name: 'CategorizationSettings',

From a0ec9a530d98d46c5b26624337efb49d04f2ac87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bj=C3=A4reholt?= <erik@bjareho.lt>
Date: Mon, 2 Nov 2020 12:44:19 +0100
Subject: [PATCH 09/11] feat: added new view modal

---
 src/store/modules/views.js      |  4 +--
 src/views/activity/Activity.vue | 64 ++++++++++++++++++++++++++++-----
 2 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/src/store/modules/views.js b/src/store/modules/views.js
index dd572c6d..eb7d6628 100644
--- a/src/store/modules/views.js
+++ b/src/store/modules/views.js
@@ -70,8 +70,8 @@ const mutations = {
   restoreDefaults(state) {
     state.views = defaultViews;
   },
-  addView(state, { view_id }) {
-    state.views.push({ id: view_id, name: view_id, elements: [] });
+  addView(state, view) {
+    state.views.push({ ...view, elements: [] });
   },
   removeView(state, { view_id }) {
     const idx = state.views.map(v => v.id).indexOf(view_id);
diff --git a/src/views/activity/Activity.vue b/src/views/activity/Activity.vue
index 1c3da56c..be49cf3d 100644
--- a/src/views/activity/Activity.vue
+++ b/src/views/activity/Activity.vue
@@ -42,12 +42,19 @@ div
         h6 {{view.name}}
 
     li.nav-item(style="margin-left: auto")
-      a.nav-link(@click="addView")
+      a.nav-link(@click="$refs.new_view.show()")
         h6
           icon(name="plus")
           span.d-none.d-md-inline
             | New view
 
+  b-modal(id="new_view" ref="new_view" title="New view" @show="resetModal" @hidden="resetModal" @ok="handleOk")
+    div.my-1
+      b-input-group.my-1(prepend="ID")
+        b-form-input(v-model="new_view.id")
+      b-input-group.my-1(prepend="Name")
+        b-form-input(v-model="new_view.name")
+
   div
     router-view
 
@@ -83,6 +90,7 @@ $bordercolor: #ddd;
       border-bottom: none;
       border-radius: 0.5rem 0.5rem 0 0;
       color: #111 !important;
+      cursor: pointer;
 
       &:hover {
         background-color: #f8f8f8;
@@ -135,6 +143,7 @@ export default {
     return {
       today: get_today(),
       filterCategory: null,
+      new_view: {},
     };
   },
   computed: {
@@ -215,13 +224,6 @@ export default {
   },
 
   methods: {
-    addView: function () {
-      // TODO: Open modal to ask for options like id, and name
-      // FIXME: view_id is not guaranteed to be unique
-      this.$store.commit('views/addView', {
-        view_id: this.$store.state.views.views.length + 1,
-      });
-    },
     previousPeriod: function () {
       return moment(this._date).subtract(1, `${this.periodLength}s`).format('YYYY-MM-DD');
     },
@@ -268,6 +270,52 @@ export default {
     load_demo: async function () {
       await this.$store.dispatch('activity/load_demo');
     },
+
+    checkFormValidity() {
+      // All checks must be false for check to pass
+      const checks = {
+        // Check if view id is unique
+        'ID is not unique': this.$store.state.views.views.map(v => v.id).includes(this.new_view.id),
+        'Missing name': this.new_view.name === '',
+      };
+      const errors = Object.entries(checks)
+        .filter(([_k, v]) => v)
+        .map(([k, _v]) => k);
+      const valid = errors.length == 0;
+      if (!valid) {
+        alert(`Invalid form input: ${errors}`);
+      }
+      return valid;
+    },
+
+    handleOk(event) {
+      // Prevent modal from closing
+      event.preventDefault();
+      // Trigger submit handler
+      this.handleSubmit();
+    },
+
+    handleSubmit() {
+      // Exit when the form isn't valid
+      const valid = this.checkFormValidity();
+      if (!valid) {
+        return;
+      }
+
+      this.$store.commit('views/addView', { id: this.new_view.id, name: this.new_view.name });
+
+      // Hide the modal manually
+      this.$nextTick(() => {
+        this.$refs.new_view.hide();
+      });
+    },
+
+    resetModal() {
+      this.new_view = {
+        id: '',
+        name: '',
+      };
+    },
   },
 };
 </script>

From 94f0959c3c84f78829605a918e6f7b6930a66d4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bj=C3=A4reholt?= <erik@bjareho.lt>
Date: Mon, 2 Nov 2020 13:10:09 +0100
Subject: [PATCH 10/11] feat: refactored ActivityEditor into ActivityView,
 added better info when missing data

---
 src/components/SelectableVisualization.vue | 13 +++-
 src/store/modules/views.js                 |  4 +-
 src/views/activity/ActivityEditor.vue      | 85 ----------------------
 src/views/activity/ActivityView.vue        |  6 --
 4 files changed, 14 insertions(+), 94 deletions(-)
 delete mode 100644 src/views/activity/ActivityEditor.vue

diff --git a/src/components/SelectableVisualization.vue b/src/components/SelectableVisualization.vue
index 8d40184a..84e59254 100644
--- a/src/components/SelectableVisualization.vue
+++ b/src/components/SelectableVisualization.vue
@@ -5,11 +5,17 @@ div
     b-dropdown.mr-1(size="sm" variant="outline-secondary")
       template(v-slot:button-content)
         icon(name="cog")
-      b-dropdown-item(v-for="t in types" :key="t" variant="outline-secondary" @click="$emit('onTypeChange', id, t)" v-bind:disabled="!visualizations[t].available")
-        | {{ visualizations[t].title }}
+      b-dropdown-item(v-for="t in types" :key="t" variant="outline-secondary" @click="$emit('onTypeChange', id, t)")
+        | {{ visualizations[t].title }} #[span.small(v-if="!visualizations[t].available" style="color: #A50") (no data)]
     b-button.p-0(size="sm", variant="outline-danger" @click="$emit('onRemove', id)")
       icon(name="times")
 
+  // Check data prerequisites
+  div(v-if="!has_prerequisites")
+    b-alert.small.px-2.py-1(show variant="warning")
+      | This feature is missing data from a required watcher.
+      | You can find a list of all watchers in #[a(href="https://activitywatch.readthedocs.io/en/latest/watchers.html") the documentation].
+
   div(v-if="type == 'top_apps'")
     aw-summary(:fields="$store.state.activity.window.top_apps",
                :namefunc="e => e.data.app",
@@ -183,6 +189,9 @@ export default {
         },
       };
     },
+    has_prerequisites() {
+      return this.visualizations[this.type].available;
+    },
     top_categories_hierarchy: function () {
       const top_categories = this.$store.state.activity.category.top;
       if (top_categories) {
diff --git a/src/store/modules/views.js b/src/store/modules/views.js
index eb7d6628..4efaf2d8 100644
--- a/src/store/modules/views.js
+++ b/src/store/modules/views.js
@@ -31,7 +31,9 @@ const defaultViews = [
     id: 'editor',
     name: 'Editor',
     elements: [
-      // TODO: Migrate ActivityEditor to ActivityView
+      { type: 'top_editor_files', size: 3 },
+      { type: 'top_editor_projects', size: 3 },
+      { type: 'top_editor_languages', size: 3 },
     ],
   },
 ];
diff --git a/src/views/activity/ActivityEditor.vue b/src/views/activity/ActivityEditor.vue
deleted file mode 100644
index 74beafe2..00000000
--- a/src/views/activity/ActivityEditor.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template lang="pug">
-div.mt-3
-  // TODO: Add back option to choose a specific editor bucket
-  div(v-if="editorBuckets.length <= 0")
-    h6 No editor buckets available
-    small
-      | This feature requires a editor watcher.
-      | You can find a list of editor watchers in #[a(href="https://activitywatch.readthedocs.io/en/latest/watchers.html") the documentation].
-
-  div(v-if="editorBuckets.length")
-    h6 Active editor time: {{ $store.state.activity.editor.duration | friendlyduration }}
-    div.row(style="padding-top: 0.5em;")
-      div.col-md-4
-        h5 Top file activity
-        aw-summary(:fields="$store.state.activity.editor.top_files",
-                   :namefunc="top_editor_files_namefunc",
-                   :hoverfunc="top_editor_files_hoverfunc",
-                   :colorfunc="top_editor_files_colorfunc", with_limit)
-
-      div.col-md-4
-        h5 Top language activity
-        aw-summary(:fields="$store.state.activity.editor.top_languages",
-                   :namefunc="top_editor_languages_namefunc",
-                   :colorfunc="top_editor_languages_colorfunc", with_limit)
-
-      div.col-md-4
-        h5 Top project activity
-        aw-summary(:fields="$store.state.activity.editor.top_projects",
-                   :namefunc="top_editor_projects_namefunc",
-                   :hoverfunc="top_editor_projects_hoverfunc",
-                   :colorfunc="top_editor_projects_colorfunc", with_limit)
-  br
-</template>
-
-<script>
-import moment from 'moment';
-
-export default {
-  name: 'ActivityEditor',
-  props: {
-    periodLength: {
-      type: String,
-      default: 'day',
-    },
-  },
-  data: () => {
-    return {
-      top_editor_files_namefunc: e => {
-        let f = e.data.file || '';
-        f = f.split('/');
-        f = f[f.length - 1];
-        return f;
-      },
-      top_editor_files_hoverfunc: e => {
-        return 'file: ' + e.data.file + '\n' + 'project: ' + e.data.project;
-      },
-      top_editor_files_colorfunc: e => e.data.language,
-
-      top_editor_languages_namefunc: e => e.data.language,
-      top_editor_languages_colorfunc: e => e.data.language,
-
-      top_editor_projects_namefunc: e => {
-        let f = e.data.project || '';
-        f = f.split('/');
-        f = f[f.length - 1];
-        return f;
-      },
-      top_editor_projects_hoverfunc: e => e.data.project,
-      top_editor_projects_colorfunc: e => e.data.project,
-    };
-  },
-
-  computed: {
-    editorBuckets: function () {
-      return this.$store.state.activity.buckets.editor;
-    },
-    dateEnd: function () {
-      return moment(this.date).add(1, 'days').format();
-    },
-    dateShort: function () {
-      return moment(this.date).format('YYYY-MM-DD');
-    },
-  },
-};
-</script>
diff --git a/src/views/activity/ActivityView.vue b/src/views/activity/ActivityView.vue
index 94021787..d6c02cdc 100644
--- a/src/views/activity/ActivityView.vue
+++ b/src/views/activity/ActivityView.vue
@@ -1,8 +1,5 @@
 <template lang="pug">
 div(v-if="view")
-  div(v-if="view.id == 'editor'")
-    ActivityEditor
-
   div.row
     div.col-md-6.col-lg-4.p-3(v-for="el, index in view.elements")
       aw-selectable-vis(:id="index" :type="el.type" @onTypeChange="onTypeChange" @onRemove="onRemove" :editable="editing")
@@ -39,11 +36,8 @@ import 'vue-awesome/icons/times';
 import 'vue-awesome/icons/trash';
 import 'vue-awesome/icons/undo';
 
-import ActivityEditor from '~/views/activity/ActivityEditor';
-
 export default {
   name: 'ActivityView',
-  components: { ActivityEditor: ActivityEditor },
   props: {
     view_id: { type: String, default: 'default' },
     periodLength: {

From d4f2b3c241e0620b53a3450b8a8931089b367afc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bj=C3=A4reholt?= <erik@bjareho.lt>
Date: Mon, 2 Nov 2020 13:10:44 +0100
Subject: [PATCH 11/11] fix: added (commented out) sunburst_clock to
 SelectableVisualization.vue

---
 src/components/SelectableVisualization.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/SelectableVisualization.vue b/src/components/SelectableVisualization.vue
index 84e59254..ae3eaf71 100644
--- a/src/components/SelectableVisualization.vue
+++ b/src/components/SelectableVisualization.vue
@@ -64,7 +64,9 @@ div
     aw-sunburst-categories(:data="top_categories_hierarchy", style="height: 20em")
   div(v-if="type == 'timeline_barchart'")
     aw-timeline-barchart(:datasets="datasets", style="height: 100")
-
+  // TODO: Broke when we switched to customizable views (since it doesn't use vuex to request data)
+  //div(v-if="type == 'sunburst_clock'")
+    aw-sunburst-clock(:date="date", :afkBucketId="bucket_id_afk", :windowBucketId="bucket_id_window")
 </template>
 
 <style lang="scss">
@@ -185,8 +187,14 @@ export default {
           title: 'Timeline (barchart)',
           // TODO
           available: true,
-          //available: this.$store.state.activity.category.available,
         },
+        /*
+        sunburst_clock: {
+          title: 'Sunburst clock',
+          // TODO
+          available: true,
+        },
+        */
       };
     },
     has_prerequisites() {