Initial implementation of the Data page

Author: matthewma7

client/src/components/NavigationBar.vue

@@ -20,7 +20,7 @@ export default {
 </script>
 
 <template>
-  <v-app-bar app flat>
+  <v-app-bar app>
     <v-toolbar-title>
       <v-tooltip open-delay="2000" bottom>
         <template #activator="{ on }">

client/src/components/SamplesLocation.vue

@@ -107,12 +107,13 @@ export default {
       attribution="© OpenStreetMap contributors, © CARTO"
       :zIndex="0"
     />
-    <GeojsGeojsonLayer 
-      :zIndex="1" 
+    <GeojsGeojsonLayer
+      :zIndex="1"
       :geojson="sitesFeature"
       :featureStyle="{
-        point: {stroke: false }
-      }" />
+        point: { stroke: false }
+      }"
+    />
     <GeojsGeojsonLayer
       :zIndex="2"
       :geojson="selectedRegion"

client/src/components/Sunburst.vue

@@ -59,22 +59,33 @@ function treeSum(arr) {
 export default {
   name: "Sunburst",
   props: {
-    filteredTables: {
+    filter: {
       type: Object,
-      required: true
-    },
-    cmap: {
-      required: true
+      required: false
     }
+    // filteredTables: {
+    //   type: Object,
+    //   required: true
+    // },
+    // cmap: {
+    //   required: true
+    // }
   },
+  inject: ["girderRest"],
+  data: () => ({
+    initialized: false
+  }),
   computed: {
-    treeData() {
-      return this.filteredTables.table8.map(treeifyTable8);
-    },
     treeDataSum() {
+      if (!this.treeData) {
+        return null;
+      }
       return treeSum(this.treeData);
     },
     sunburstData() {
+      if (!this.treeDataSum) {
+        return null;
+      }
       const data = this.treeDataSum;
 
       return {
@@ -88,29 +99,46 @@ export default {
         }))
       };
     },
-    testData() {
-      return {
-        name: "root",
-        children: [
-          {
-            name: "A",
-            value: 3
-          },
-          {
-            name: "B",
-            value: 4
-          }
-        ]
+    sc10: d3.scale.category10,
+    cmap() {
+      return v => {
+        if (v === "") {
+          return "#ffffff";
+        }
+        return this.sc10(v);
       };
     }
   },
+  asyncComputed: {
+    async treeData() {
+      var { data: records } = await this.girderRest.get("record/filtered", {
+        params: {
+          fields: JSON.stringify(["table8"]),
+          filter: this.filter
+        }
+      });
+      return records.data
+        .map(record => record.table8)
+        .filter(d => d)
+        .map(treeifyTable8);
+    }
+  },
   watch: {
     sunburstData(data) {
-      this.debouncedUpdate(data);
+      if (data) {
+        if (!this.initialized) {
+          this.initialize();
+        } else {
+          this.debouncedUpdate(data);
+        }
+      }
     }
   },
-  mounted() {
-    this.$nextTick(() => {
+  // mounted() {
+  //   this.$nextTick(() => {});
+  // },
+  methods: {
+    initialize() {
       this.chart = Sunburst()
         .width(this.$el.offsetWidth)
         .height(this.$el.offsetHeight)
@@ -137,9 +165,8 @@ export default {
       this.update(this.sunburstData);
 
       this.chart(this.$el);
-    });
-  },
-  methods: {
+      this.initialized = true;
+    },
     update(data) {
       this.chart.data(data);
     }
@@ -154,6 +181,7 @@ export default {
 <style>
 .eco-sunburst {
   flex: 1;
+  padding: 5px;
 }
 
 textPath.text-contour {

client/src/components/WidgetContainer.vue

@@ -1,6 +1,8 @@
 <template functional>
   <div class="widget-container">
-    <div class="grey darken-2 white--text body-2 pl-2"><slot name="title"></slot></div>
+    <div class="grey darken-2 white--text body-2 pl-2">
+      <slot name="title"></slot>
+    </div>
     <div class="widget flex-grow-1">
       <slot />
     </div>
@@ -13,4 +15,4 @@
   display: flex;
   flex-direction: column;
 }
-</style>
+</style>

client/src/router.js

@@ -4,6 +4,7 @@ import Router from "vue-router";
 import girder from "./girder";
 import Login from "@/views/Login.vue";
 import Landing from "@/views/Landing.vue";
+import Data from "@/views/Data.vue";
 
 Vue.use(Router);
 
@@ -27,6 +28,12 @@ export default new Router({
       name: "Landing",
       component: Landing,
       beforeEnter
+    },
+    {
+      path: "/data",
+      name: "Data",
+      component: Data,
+      beforeEnter
     }
   ]
 });

client/src/store/index.js

@@ -1,7 +1,7 @@
 import Vue from "vue";
 import Vuex from "vuex";
 
-import girder from "@/girder";
+// import girder from "@/girder";
 
 Vue.use(Vuex);
 

client/src/util/colors.js

@@ -24,8 +24,13 @@ var colormap = {
       "freshwater lake",
       "epilimnion"
     ],
-    interpolateOranges: ["grassland biome", "farm", "sphagnum bog", "watershed"],
-    interpolateRdPu:["microbial mat"]
+    interpolateOranges: [
+      "grassland biome",
+      "farm",
+      "sphagnum bog",
+      "watershed"
+    ],
+    interpolateRdPu: ["microbial mat"]
   },
   material: {
     interpolateBlues: [
@@ -36,7 +41,7 @@ var colormap = {
       "hypersaline water"
     ],
     interpolateOranges: ["soil", "grassland soil", "farm soil"],
-    interpolateRdPu:["microbial mat material"]
+    interpolateRdPu: ["microbial mat material"]
   },
   biome: {
     interpolateBlues: [