Add support for personalising QC graph settings.

Preferences are read from the store and passed to graph components
via the `settings` prop. Component may changed their own settings
by emitting the `update:settings` signal.

lib/www/client/source/src/views/Graphs.vue

@@ -92,9 +92,14 @@
     </v-toolbar>
 
     <v-container>
-      <v-row v-for="(item, idx) in items" :key="idx">
+      <v-row v-for="(item, idx) in visibleItems" :key="idx">
         <v-col>
-          <component :is="item.component" :data="attributesFor(item)"></component>
+          <component
+            :is="item.component"
+            :data="attributesFor(item)"
+            :settings="preferencesFor(item.component)"
+            @update:settings="configure">
+          </component>
         </v-col>
       </v-row>
     </v-container>
@@ -124,6 +129,7 @@
 <script>
 
 import { mapActions, mapGetters } from 'vuex';
+import { preferencesλ } from '@/lib/utils.js';
 import DougalGraphGunsPressure from '@/components/graph-guns-pressure.vue';
 import DougalGraphGunsTiming from '@/components/graph-guns-timing.vue';
 import DougalGraphGunsDepth from '@/components/graph-guns-depth.vue';
@@ -142,32 +148,41 @@ export default {
   },
   
   data () {
-    return {
-      items: [
-        {
-          component: "DougalGraphGunsPressure",
-        },
-        {
-          component: "DougalGraphGunsTiming",
-        },
-        {
-          component: "DougalGraphGunsDepth",
-        },
-        {
-          component: "DougalGraphGunsHeatmap",
-        },
-        {
           component: "GraphArraysIJScatter",
           attributes: {
-          }
+    const items = [
+      {
+        component: "DougalGraphGunsPressure",
+      },
+      {
+        component: "DougalGraphGunsTiming",
+      },
+      {
+        component: "DougalGraphGunsDepth",
+      },
+      {
+        component: "DougalGraphGunsHeatmap",
+      },
+      {
         }
-      ],
+      }
+    ];
+    
+    return {
+      items,
       data: null,
       sequences: [],
       jumpToSequence: null,
+      aspects: items.map(i => i.component)
     };
   },
   
+  watch: {
+    preferences () {
+      this.configure(preferencesλ(this.preferences)(this.$options.name, {aspects: this.aspects}))
+    }
+  },
+  
   computed: {
     
     getRows() {
@@ -178,6 +193,10 @@ export default {
       return Array(this.cols).fill().map( (el, idx) => idx );
     },
     
+    visibleItems () {
+      return this.items.filter( i => this.aspects.includes(i.component) );
+    },
+    
     firstSequence () {
       return this.sequences[this.sequences.length-1]?.sequence;
     },
@@ -206,11 +225,20 @@ export default {
       return this.sequences[0]?.sequence;
     },
     
-    ...mapGetters(['user', 'writeaccess', 'loading', 'serverEvent'])
+    ...mapGetters(['user', 'preferences', 'writeaccess', 'loading', 'serverEvent'])
   },
   
   methods: {
     
+    configure (data) {
+      if ("aspects" in data) {
+        this.aspects = [...data.aspects];
+      }
+      for (const key in data) {
+        this.saveUserPreference([`${this.$options.name}.${key}`, data[key]]);
+      }
+    },
+    
     attributesFor (item) {
       return this.data
         ? Object.assign({
@@ -220,11 +248,15 @@ export default {
         : null;
     },
     
+    preferencesFor (key, defaults) {
+      return preferencesλ(this.preferences)(`${this.$options.name}.${key}`, defaults);
+    },
+    
     gotoSequence(seq) {
       this.$route.params.sequence = seq;
     },
     
-    ...mapActions(["api", "showSnack"])
+    ...mapActions(["api", "showSnack", "saveUserPreference"])
   },
   
   beforeRouteLeave (to, from, next) {