Update DwC button, fix map label for aggregate maps, split nomenclatu…

…re panels
wbbaker · Jun 22, 2023 · 55ee6bb · 55ee6bb
1 parent 0a0e837
commit 55ee6bb
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 115 deletions.
diff --git a/src/components/Map/utils/geojsonOptions.js b/src/components/Map/utils/geojsonOptions.js
@@ -27,23 +27,32 @@ function getRelevantType(base) {
 
 export default (L) => ({
   onEachFeature: (feature, layer) => {
+    const labels = (feature.properties.base || [])
+      .map((item) => item.label)
+      .filter(Boolean)
+
+    if (!labels.length) {
+      return
+    }
+
     const label = `
-    <div class="max-h-32 overflow-y-auto text-xs">
-    <ul>
-    ${feature.properties.base
-      .map(
-        (item) =>
-          `
-          <li 
-            class="py-2 last:border-0 truncate border-b"
-            title="${item.label}"
-          >
-            ${item.label}
-          </li>
-          `
-      )
-      .join('')}
-      </ul></div>`
+      <div class="max-h-32 overflow-y-auto text-xs">
+        <ul>
+        ${labels
+          .map(
+            (label) =>
+              `
+              <li 
+                class="py-2 last:border-0 truncate border-b"
+                title="${label}"
+              >
+                ${label}
+              </li>
+              `
+          )
+          .join('')}
+        </ul>
+      </div>`
 
     layer.pm.setOptions(DEFAULT_OPTIONS)
     layer.pm.disable()

diff --git a/src/modules/otus/components/DWCDownload.vue b/src/modules/otus/components/DWCDownload.vue
@@ -2,16 +2,19 @@
   <VButton
     primary
     class="text-sm flex items-center"
-    @click="download"
+    @click="
+      () => {
+        downloadCSV()
+      }
+    "
   >
     <IconDownload class="w-4 h-4 mr-1" />
     DwC
   </VButton>
 </template>
 
 <script setup>
-import TaxonWorks from '../services/TaxonWorks'
-import { downloadTextFile } from '../utils/files'
+const { url, project_token } = __APP_ENV__
 
 const props = defineProps({
   otu: {
@@ -20,11 +23,10 @@ const props = defineProps({
   }
 })
 
-function download() {
-  TaxonWorks.getDwC(props.otu.id).then(({ data }) => {
-    downloadTextFile(data, 'text/csv', 'dwc_records')
-  })
+function downloadCSV() {
+  window.open(
+    `${url}/otus/${props.otu.id}/inventory/dwc?project_token=${project_token}`,
+    '_self'
+  )
 }
-
-downloadTextFile
 </script>
diff --git a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue
@@ -1,12 +1,59 @@
 <template>
-  <PanelNomenlcatureCitations :list="store.catalog.timeline" />
-  <PanelNomenclatureReferences :list="store.catalog.sources" />
+  <VCard>
+    <VCardHeader class="flex justify-between">
+      <h2 class="text-md">
+        Nomenclature ({{ store.catalog.timeline.length }})
+      </h2>
+      <PanelDropdown
+        :menu-options="menuOptions"
+        panel-key="taxonomy"
+      />
+    </VCardHeader>
+
+    <ul class="text-sm">
+      <CitationRow
+        v-for="citation in citationList.first"
+        :key="citation.label"
+        :citation="citation"
+      />
+
+      <PanelNomenclatureShowMore
+        v-if="!showAll && citationList.middle.length"
+        :count="citationList.middle.length"
+        @click="showAll = true"
+      />
+    </ul>
+    <AnimationOpacity>
+      <ul
+        class="text-sm"
+        v-show="showAll"
+      >
+        <CitationRow
+          v-for="citation in citationList.middle"
+          :key="citation.label"
+          :citation="citation"
+        />
+      </ul>
+    </AnimationOpacity>
+    <ul class="text-sm">
+      <CitationRow
+        v-for="citation in citationList.last"
+        :key="citation.label"
+        :citation="citation"
+      />
+    </ul>
+  </VCard>
 </template>
 
 <script setup>
+import { ref, computed } from 'vue'
+import { splitList } from './splitList'
 import { useOtuStore } from '@/modules/otus/store/store'
-import PanelNomenlcatureCitations from './PanelNomenclatureCitations.vue'
-import PanelNomenclatureReferences from './PanelNomenclatureReferences.vue'
+import CitationRow from './PanelCitationRow.vue'
+import PanelNomenclatureShowMore from './PanelNomenclatureShowMore.vue'
+import PanelDropdown from '../PanelDropdown.vue'
+
+const MAX_CITATIONS = 2
 
 const props = defineProps({
   otuId: {
@@ -31,4 +78,16 @@ const props = defineProps({
 })
 
 const store = useOtuStore()
+
+const showAll = ref(false)
+const citationList = computed(() =>
+  splitList(store.catalog.timeline, MAX_CITATIONS)
+)
+
+const menuOptions = computed(() => [
+  {
+    label: showAll.value ? 'Show less' : 'Show all',
+    action: () => (showAll.value = !showAll.value)
+  }
+])
 </script>
diff --git a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue
diff --git a/...enclature/PanelNomenclatureReferences.vue → ...eferences/PanelNomenclatureReferences.vue b/...enclature/PanelNomenclatureReferences.vue → ...eferences/PanelNomenclatureReferences.vue
@@ -1,7 +1,9 @@
 <template>
   <VCard>
     <VCardHeader class="flex justify-between">
-      <h2 class="text-md">Nomenclature references ({{ list.length }})</h2>
+      <h2 class="text-md">
+        Nomenclature references ({{ store.catalog.sources.length }})
+      </h2>
       <PanelDropdown
         :menu-options="menuOptions"
         panel-key="taxonomy"
@@ -41,22 +43,20 @@
 
 <script setup>
 import { computed, ref } from 'vue'
-import { splitList } from './splitList'
-import PanelNomenclatureShowMore from './PanelNomenclatureShowMore.vue'
+import { splitList } from '../PanelNomenclature/splitList'
+import { useOtuStore } from '@/modules/otus/store/store'
+import PanelNomenclatureShowMore from '../PanelNomenclature/PanelNomenclatureShowMore.vue'
 import PanelReferenceRow from './PanelReferenceRow.vue'
 import PanelDropdown from '../PanelDropdown.vue'
 
 const MAX_REFERENCES = 2
 
-const props = defineProps({
-  list: {
-    type: Array,
-    default: () => []
-  }
-})
+const store = useOtuStore()
 
 const showAll = ref(false)
-const referenceList = computed(() => splitList(props.list, MAX_REFERENCES))
+const referenceList = computed(() =>
+  splitList(store.catalog.sources, MAX_REFERENCES)
+)
 
 const menuOptions = computed(() => [
   {

diff --git a/...l/PanelNomenclature/PanelReferenceRow.vue → ...enclatureReferences/PanelReferenceRow.vue b/...l/PanelNomenclature/PanelReferenceRow.vue → ...enclatureReferences/PanelReferenceRow.vue
diff --git a/src/modules/otus/constants/overviewLayout.js b/src/modules/otus/constants/overviewLayout.js
@@ -3,6 +3,7 @@ import PanelGallery from '../components/Panel/PanelGallery/Gallery.vue'
 import PanelTypeSpecimen from '../components/Panel/PanelTypeSpecimen/PanelTypeSpecimen.vue'
 import PanelTypeDesignation from '../components/Panel/PanelTypeDesignation/PanelTypeDesignation.vue'
 import PanelNomenclature from '../components/Panel/PanelNomenclature/PanelNomenclature.vue'
+import PanelNomenclatureReference from '../components/Panel/PanelNomenclatureReferences/PanelNomenclatureReferences.vue'
 import PanelMap from '../components/Panel/PanelMap/PanelMap.vue'
 import PanelDescendants from '../components/Panel/PanelDescendants/Descendants.vue'
 import PanelContent from '../components/Panel/PanelContent/PanelContent.vue'
@@ -19,7 +20,8 @@ export const overviewLayout = {
       component: PanelTypeDesignation,
       available: [FAMILY_GROUP, GENUS_GROUP]
     },
-    { component: PanelNomenclature }
+    { component: PanelNomenclature },
+    { component: PanelNomenclatureReference }
   ],
 
   right: [

diff --git a/src/modules/otus/services/TaxonWorks.js b/src/modules/otus/services/TaxonWorks.js
@@ -65,10 +65,6 @@ export default class TaxonWorks {
     })
   }
 
-  static getDwC(otuId) {
-    return makeAPIRequest.get(`/otus/${otuId}/inventory/dwc`)
-  }
-
   static getCachedMap(id) {
     return makeAPIRequest.get(`/cached_maps/${id}`)
   }