Added year picker

app/javascript/vue/tasks/otu/browse/components/NomenclatureHistory.vue

@@ -39,11 +39,12 @@
         </li>
       </ul>
       <h3>References</h3>
-      <ul class="taxonomic_history">
-        <template v-for="source in nomenclature.sources">
+      <ul
+        v-if="nomenclature"
+        class="taxonomic_history">
+        <template v-for="item in nomenclature.sources.list">
         <li 
-          v-for="item in source"
-          v-show="filterSource(source)">
+          v-show="filterSource(item)">
           <span v-html="item.cached"/>
         </li>
         </template>
@@ -56,14 +57,30 @@
       <div
         class="flex-separate"
         slot="body">
-        <div
-          v-for="(section, key) in filterSections"
-          :key="key">
-          <h4 class="capitalize separate-bottom">{{ key }}</h4>
+        <div>
+          <h4 class="capitalize separate-bottom">Time</h4>
+          <ul class="no_bullets">
+            <li
+              class="separate-right"
+              v-for="(item, key) in filterSections.time"
+              :key="key">
+              <label>
+                <input
+                  v-model="item.value"
+                  type="checkbox"/>
+                {{ item.label }}
+              </label>
+            </li>
+          </ul>
+          <h4 class="capitalize separate-bottom">Year</h4>
+          <year-picker :years="nomenclature.sources.year_metadata"/>
+        </div>
+        <div>
+          <h4 class="capitalize separate-bottom">Topic</h4>
           <ul class="no_bullets">
             <li
-              v-for="item in section"
-              :key="item.key"
+              v-for="(item, key) in filterSections.topic"
+              :key="key"
               class="separate-right">
               <label>
                 <input
@@ -74,6 +91,22 @@
             </li>
           </ul>
         </div>
+        <div>
+          <h4 class="capitalize separate-bottom">Metadata</h4>
+          <ul class="no_bullets">
+            <li
+              class="separate-right"
+              v-for="(item, key) in filterSections.metadata"
+              :key="key">
+              <label>
+                <input
+                  v-model="item.value"
+                  type="checkbox"/>
+                {{ item.label }}
+              </label>
+            </li>
+          </ul>
+        </div>
       </div>
     </modal-component>
   </section-panel>
@@ -85,12 +118,14 @@ import SectionPanel from './shared/sectionPanel'
 import { GetNomenclatureHistory } from '../request/resources.js'
 import SwitchComponent from 'components/switch'
 import ModalComponent from 'components/modal'
+import YearPicker from './nomenclature/yearsPick'
 
 export default {
   components: {
     SectionPanel,
     SwitchComponent,
-    ModalComponent
+    ModalComponent,
+    YearPicker
   },
   props: {
     otu: {
@@ -225,7 +260,7 @@ export default {
         })
     },
     filterSource(source) {
-      let globalIds = source[Object.keys(source)[0]].objects
+      let globalIds = source.objects
       return this.nomenclature.items.find(item => {
         if (this.checkFilter(item)) {
           return globalIds.includes(item.data_attributes['history-object-id'])

app/javascript/vue/tasks/otu/browse/components/nomenclature/yearsPick.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="year-box">
+    <ul class="no_bullets">
+      <li
+        class="full_width year-line"
+        v-for="(value, year) in years"
+        :key="year"
+        :style="{
+          background: `linear-gradient(to right, #5D9ECE ${getSize(value)}%, transparent ${getSize(value)}% ${100-getSize(value)}%)`
+          }">
+        <div
+          class="full_width year-string"
+          :style="{
+            background: `linear-gradient(to right, white ${getSize(value)}%, black ${getSize(value)}% ${100-getSize(value)}%)`,
+            '-webkit-background-clip': 'text',
+            '-webkit-text-fill-color': 'transparent'
+          }"
+          >{{ year }}</div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    years: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      max: undefined
+    }
+  },
+  watch: {
+    years: {
+      handler(newVal) {
+        this.setYears(newVal)
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    setYears (years) {
+      this.max = Math.max(...Object.values(years))
+    },
+    getSize (value) {
+      return (value / this.max) * 100
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .year-box {
+    overflow-y: scroll;
+    overflow-x: hidden;
+    max-height: 400px;
+  }
+  .year-line {
+    margin: 4px;
+    border-radius: 4px;
+    padding-right: 4px;
+    cursor: pointer;
+  }
+  .year-string {
+    padding-left: 4px;
+    padding-right: 0px;
+
+  }
+</style>