Filtering features for Data page

client/src/components/AddFilter.vue

@@ -0,0 +1,202 @@
+<script>
+import _ from "lodash";
+
+import NumericChart from "@/components/NumericChart";
+import additionalFilterProperties from "./additionalFilterProperties.js";
+
+export default {
+  name: "AddFilter",
+  components: {
+    NumericChart
+  },
+  inject: ["girderRest"],
+  props: {
+    filter: {
+      type: Object,
+      required: false
+    },
+    visible: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data: () => ({
+    selectedField: null,
+    valueRange: [],
+    includeFilter: true
+  }),
+  computed: {
+    fields: () => [{ value: null, text: "" }, ...additionalFilterProperties],
+    cleanFilter() {
+      var filter = { ...this.filter };
+      delete filter[this.selectedField];
+      return filter;
+    },
+    filter_() {
+      var filter = {};
+      if (
+        this.valueRange[0] !== this.fieldMeta.min ||
+        this.valueRange[1] !== this.fieldMeta.max
+      ) {
+        filter[this.selectedField] = {
+          $gt: this.valueRange[0],
+          $lt: this.valueRange[1]
+        };
+      }
+      if (this.includeFilter) {
+        filter = { ...this.cleanFilter, ...filter };
+      }
+      return filter;
+    }
+  },
+  asyncComputed: {
+    async fieldMeta() {
+      if (!this.selectedField) {
+        return null;
+      }
+      var { data: result } = await this.girderRest.get("meta/field_meta", {
+        params: {
+          field: this.selectedField
+        }
+      });
+      return result;
+    },
+    async records() {
+      if (!this.selectedField || !this.fieldMeta) {
+        return null;
+      }
+      var { data: result } = await this.girderRest.get("record/filtered", {
+        params: {
+          fields: JSON.stringify([this.selectedField]),
+          filter: this.filter_
+        }
+      });
+      return result.data.map(data => {
+        var properties = this.selectedField.split(".");
+        var value = data;
+        for (let property of properties) {
+          value = value[property];
+        }
+        return {
+          _id: data._id,
+          value: value ? value : 0
+        };
+      });
+    }
+  },
+  watch: {
+    fieldMeta(fieldMeta) {
+      if (!fieldMeta) {
+        return;
+      }
+      this.valueRange = [fieldMeta.min, fieldMeta.max];
+    },
+    visible(value) {
+      if (!value) {
+        this.selectedField = null;
+        this.valueRange = [];
+        this.includeFilter = true;
+      }
+    }
+  },
+  methods: {
+    updateValueRange(value) {
+      this.valueRange = value;
+    }
+  }
+};
+</script>
+
+<template>
+  <v-card>
+    <v-card-title>
+      Add filter
+    </v-card-title>
+    <v-card-text>
+      <v-row>
+        <v-col cols="4">
+          <v-select
+            :items="fields"
+            label="Field"
+            v-model="selectedField"
+            hide-details
+          ></v-select>
+        </v-col>
+      </v-row>
+      <transition name="fade">
+        <div v-if="records" class="transition-container">
+          <v-row no-gutters>
+            <v-col class="flex-grow-0" style="min-width:60px;">
+              <v-range-slider
+                class="two-line mt-2"
+                vertical
+                :value="valueRange"
+                @change="updateValueRange"
+                :max="fieldMeta.max"
+                :min="fieldMeta.min"
+                hide-details
+                height="360px"
+              />
+            </v-col>
+            <v-col>
+              <NumericChart
+                style="height:400px"
+                :records="records"
+                :max="fieldMeta.max"
+                :min="fieldMeta.min"
+              />
+            </v-col>
+          </v-row>
+          <v-checkbox
+            dense
+            hide-details
+            v-model="includeFilter"
+            label="Include current filters"
+          ></v-checkbox>
+        </div>
+      </transition>
+    </v-card-text>
+    <v-card-actions>
+      <v-spacer />
+      <v-btn
+        text
+        color="primary"
+        :disabled="
+          !selectedField ||
+            !fieldMeta ||
+            (valueRange[0] === fieldMeta.min && valueRange[1] === fieldMeta.max)
+        "
+        @click="$emit('add', { [selectedField]: filter_[selectedField] })"
+        >Add</v-btn
+      >
+    </v-card-actions>
+  </v-card>
+</template>
+
+<style lang="scss" scoped>
+.transition-container {
+  height: 440px;
+}
+</style>
+
+<style lang="scss">
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.3s ease-in-out;
+  overflow: hidden;
+}
+.fade-enter,
+.fade-leave-to {
+  height: 0px !important;
+  opacity: 0;
+}
+
+.v-input__slider.two-line {
+  .v-input__slot {
+    height: 360px;
+    .v-slider {
+      height: 100%;
+    }
+  }
+}
+</style>

client/src/components/BiomeTreemap.vue

@@ -157,10 +157,11 @@ export default {
               if (d.y1 - d.y0 < 14) {
                 return;
               }
-              if (d.x1 - d.x0 < d.data.name.length * 10) {
+              var name = d.data.name.replace(" biome", "");
+              if (d.x1 - d.x0 < name.length * 10) {
                 return;
               }
-              return d.data.name;
+              return name;
             });
             leaves.select(".leaf-value").text(d => d.data.value);
           },

client/src/components/DataInsight.vue

@@ -0,0 +1,85 @@
+<script>
+import Sunburst from "@/components/Sunburst";
+import NumericChart from "@/components/NumericChart";
+import additionalFilterProperties from "@/components/additionalFilterProperties";
+
+export default {
+  name: "DataInsight",
+  inject: ["girderRest"],
+  components: {
+    Sunburst,
+    NumericChart
+  },
+  props: ["filter"],
+  data: () => ({ selectedField: "table8" }),
+  computed: {
+    properties() {
+      return [
+        { value: "table8", text: "Sunburst" },
+        ...additionalFilterProperties
+      ];
+    }
+  },
+  asyncComputed: {
+    async records() {
+      if (!this.selectedField || this.selectedField === "table8") {
+        return null;
+      }
+      var { data: result } = await this.girderRest.get("record/filtered", {
+        params: {
+          fields: JSON.stringify([this.selectedField]),
+          filter: this.filter
+        }
+      });
+      return result.data.map(data => {
+        var properties = this.selectedField.split(".");
+        var value = data;
+        for (let property of properties) {
+          value = value[property];
+        }
+        return {
+          _id: data._id,
+          value: value ? value : 0
+        };
+      });
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="data-insight">
+    <v-select
+      class="property-select"
+      :items="properties"
+      v-model="selectedField"
+      hide-details
+    ></v-select>
+    <Sunburst :filter="filter" v-if="selectedField==='table8'" />
+    <div class="chart-container" v-else>
+    <NumericChart
+      v-if="records"
+      :records="records"
+    />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.data-insight {
+  height: 100%;
+
+  .property-select {
+    position: absolute;
+    right: 20px;
+    width: 200px;
+    z-index: 1;
+  }
+
+  .chart-container {
+    height: 100%;
+    padding: 5px;
+    padding-top:30px;
+  }
+}
+</style>