@sfgrp/taxonpages 0.1.0

package/src/modules/otus/components/Breadcrumb/BreadcrumbDropdown.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="relative">
+    <div>
+      <button
+        class="inline-flex items-center text-sm hover:text-gray-900 text-primary-500 dark:hover:text-gray-500"
+        @click="dropdownOpen = !dropdownOpen"
+      >
+        <slot />
+        <svg
+          class="h-5 w-5 text-primary-500 print:hidden"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </button>
+
+      <div
+        v-if="dropdownOpen"
+        class="fixed inset-0 h-full w-full z-10"
+        @click="dropdownOpen = false"
+      />
+
+      <div
+        v-if="dropdownOpen"
+        class="absolute right-0 py-2 bg-white dark:bg-gray-900 rounded-md shadow-xl z-20"
+      >
+        <router-link
+          v-for="otu in list"
+          :key="otu.id"
+          class="block px-4 py-2 text-sm capitalize hover:bg-secondary-color hover:bg-opacity-5"
+          :to="{ name: 'otus-id', params: { id: otu.id } }"
+        >
+          {{ otu.name || key }}
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  list: {
+    type: Array,
+    required: true
+  }
+})
+
+const dropdownOpen = ref(false)
+</script>

package/src/modules/otus/components/CommonNames.vue

@@ -0,0 +1,14 @@
+<template>
+  <span>{{ commonNameLabel }}</span>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useOtuStore } from '../store/store'
+
+const store = useOtuStore()
+
+const commonNameLabel = computed(() =>
+  store.taxonomy.commonNames.map((item) => item.name).join('; ')
+)
+</script>

package/src/modules/otus/components/DWCDownload.vue

@@ -0,0 +1,33 @@
+<template>
+  <VButton
+    primary
+    class="text-sm flex items-center"
+    title="Download DwC Occurrences"
+    @click="
+      () => {
+        downloadCSV()
+      }
+    "
+  >
+    <IconDownload class="w-4 h-4 mr-1" />
+    DwC
+  </VButton>
+</template>
+
+<script setup>
+const { url, project_token } = __APP_ENV__
+
+const props = defineProps({
+  otu: {
+    type: Object,
+    required: true
+  }
+})
+
+function downloadCSV() {
+  window.open(
+    `${url}/otus/${props.otu.id}/inventory/dwc.csv?project_token=${project_token}`,
+    '_self'
+  )
+}
+</script>

package/src/modules/otus/components/DataMap.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <VButton
+      primary
+      class="text-sm md:flex items-center gap-1 hidden"
+      title="Links used to obtain the information present on this page in JSON format."
+      @click="isModalVisible = true"
+    >
+      <IconJson class="w-4 h-4" />
+      Datamap
+    </VButton>
+    <VModal
+      v-if="isModalVisible"
+      @close="isModalVisible = false"
+    >
+      <template #header>
+        <h3 class="font-medium">Datamap</h3>
+      </template>
+      <div class="p-4 pt-0">
+        <p class="text-sm mb-2">
+          The following links provide the information present on this page in
+          JSON format.
+        </p>
+
+        <VTable>
+          <VTableHeader>
+            <VTableHeaderRow>
+              <VTableHeaderCell> Request Key </VTableHeaderCell>
+              <VTableHeaderCell> URL </VTableHeaderCell>
+            </VTableHeaderRow>
+          </VTableHeader>
+          <VTableBody>
+            <VTableBodyRow
+              v-for="(item, key) in store.datamap"
+              :key="key"
+            >
+              <VTableBodyCell class="capitalize">{{
+                key.replaceAll(':', ' ')
+              }}</VTableBodyCell>
+              <VTableBodyCell
+                ><a :href="item">{{ item }}</a></VTableBodyCell
+              >
+            </VTableBodyRow>
+          </VTableBody>
+        </VTable>
+      </div>
+    </VModal>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useOtuPageRequestStore } from '../store/request'
+
+const isModalVisible = ref(false)
+const store = useOtuPageRequestStore()
+</script>

package/src/modules/otus/components/Export.vue

@@ -0,0 +1 @@
+<template />

package/src/modules/otus/components/ExternalResources.vue

@@ -0,0 +1,11 @@
+<template>
+  <VCard>
+    <h1>External resources</h1>
+    <ul class="text-sm">
+      <li />
+    </ul>
+  </VCard>
+</template>
+
+<script setup>
+</script>

package/src/modules/otus/components/Panel/PanelBiologicalAssociations/PanelBiologicalAssociations.vue

@@ -0,0 +1,184 @@
+<template>
+  <VCard>
+    <ClientOnly>
+      <VSpinner v-if="isLoading" />
+    </ClientOnly>
+    <VCardHeader>
+      Biological associations ({{ pagination.total }})
+    </VCardHeader>
+    <VCardContent class="min-h-[6rem] overflow-x-auto">
+      <VPagination
+        v-if="biologicalAssociations.length"
+        class="mb-4"
+        v-model="pagination.page"
+        :total="pagination.total"
+        :per="pagination.per"
+        @select="
+          (value) => {
+            loadBiologicalAssociations(value)
+          }
+        "
+      />
+      <VTable v-if="biologicalAssociations.length">
+        <VTableHeader class="normal-case">
+          <VTableHeaderRow>
+            <VTableHeaderCell colspan="5">Subject</VTableHeaderCell>
+            <VTableHeaderCell class="border-l-2 border-r-2">
+              Biological
+            </VTableHeaderCell>
+            <VTableHeaderCell colspan="5">Object</VTableHeaderCell>
+            <VTableHeaderCell class="border-l-2" />
+          </VTableHeaderRow>
+          <VTableHeaderRow>
+            <VTableHeaderCell>Order</VTableHeaderCell>
+            <VTableHeaderCell>Family</VTableHeaderCell>
+            <VTableHeaderCell>Genus</VTableHeaderCell>
+            <VTableHeaderCell>Label</VTableHeaderCell>
+            <VTableHeaderCell>Properties</VTableHeaderCell>
+            <VTableHeaderCell class="border-l-2 border-r-2"
+              >Relationship</VTableHeaderCell
+            >
+            <VTableHeaderCell>Properties</VTableHeaderCell>
+            <VTableHeaderCell>Order</VTableHeaderCell>
+            <VTableHeaderCell>Family</VTableHeaderCell>
+            <VTableHeaderCell>Genus</VTableHeaderCell>
+            <VTableHeaderCell>Label</VTableHeaderCell>
+            <VTableHeaderCell class="border-l-2">Citations</VTableHeaderCell>
+          </VTableHeaderRow>
+        </VTableHeader>
+        <VTableBody>
+          <VTableBodyRow
+            v-for="ba in biologicalAssociations"
+            :key="ba.id"
+          >
+            <VTableBodyCell> {{ ba.subjectOrder }}</VTableBodyCell>
+            <VTableBodyCell> {{ ba.subjectFamily }}</VTableBodyCell>
+            <VTableBodyCell> {{ ba.subjectGenus }}</VTableBodyCell>
+            <VTableBodyCell>
+              <template v-if="ba.subjectType === 'Otu'">
+                <RouterLink
+                  :to="{ name: 'otus-id', params: { id: ba.subjectId } }"
+                  v-html="ba.subjectLabel"
+                />
+              </template>
+              <template v-else>
+                {{ ba.subjectLabel }}
+              </template>
+            </VTableBodyCell>
+            <VTableBodyCell> {{ ba.biologicalPropertySubject }}</VTableBodyCell>
+            <VTableBodyCell class="border-l-2 border-r-2">
+              {{ ba.biologicalRelationship }}
+            </VTableBodyCell>
+            <VTableBodyCell> {{ ba.biologicalPropertyObject }}</VTableBodyCell>
+            <VTableBodyCell> {{ ba.objectOrder }}</VTableBodyCell>
+            <VTableBodyCell> {{ ba.objectFamily }}</VTableBodyCell>
+            <VTableBodyCell> {{ ba.objectGenus }}</VTableBodyCell>
+            <VTableBodyCell>
+              <template v-if="ba.objectType === 'Otu'">
+                <RouterLink
+                  :to="{ name: 'otus-id', params: { id: ba.objectId } }"
+                  v-html="ba.objectLabel"
+                />
+              </template>
+              <template v-else>
+                {{ ba.objectLabel }}
+              </template>
+            </VTableBodyCell>
+            <VTableBodyCell
+              class="border-l-2"
+              v-html="ba.citations"
+            />
+          </VTableBodyRow>
+        </VTableBody>
+      </VTable>
+      <VPagination
+        v-if="biologicalAssociations.length"
+        class="mt-4"
+        v-model="pagination.page"
+        :total="pagination.total"
+        :per="pagination.per"
+        @select="
+          (value) => {
+            loadBiologicalAssociations(value)
+          }
+        "
+      />
+      <div
+        v-if="!isLoading && !biologicalAssociations.length"
+        class="text-xl text-center my-8 w-full"
+      >
+        No records found.
+      </div>
+    </VCardContent>
+  </VCard>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { makeAPIRequest } from '@/utils'
+import { useOtuPageRequest } from '@/modules/otus/helpers/useOtuPageRequest.js'
+import { makeBiologicalAssociation } from './utils/makeBiologicalAssociation.js'
+
+const extend = [
+  'object',
+  'subject',
+  'biological_relationship',
+  'taxonomy',
+  'biological_relationship_types'
+]
+
+const props = defineProps({
+  otuId: {
+    type: Number,
+    required: true
+  },
+
+  per: {
+    type: Number,
+    default: 50
+  }
+})
+
+const biologicalAssociations = ref([])
+const isLoading = ref(false)
+const pagination = ref({
+  page: 1,
+  per: props.per,
+  total: 0
+})
+
+onMounted(() => {
+  loadBiologicalAssociations()
+})
+
+function loadBiologicalAssociations(page = 1) {
+  isLoading.value = true
+
+  useOtuPageRequest('panel:biological-associations', () =>
+    makeAPIRequest.get('/biological_associations/basic', {
+      params: {
+        'otu_query[coordinatify]': true,
+        'otu_query[otu_id][]': props.otuId,
+        per: pagination.value.per,
+        page,
+        extend
+      }
+    })
+  )
+    .then(async ({ data, headers }) => {
+      const items = data.map(makeBiologicalAssociation)
+
+      pagination.value = {
+        page: Number(headers['pagination-page']),
+        per: Number(headers['pagination-per-page']),
+        total: Number(headers['pagination-total'])
+      }
+
+      isLoading.value = false
+      biologicalAssociations.value = items
+    })
+    .catch(() => {
+      isLoading.value = false
+    })
+}
+</script>

package/src/modules/otus/components/Panel/PanelBiologicalAssociations/main.js

@@ -0,0 +1,6 @@
+import PanelBiologicalAssociations from './PanelBiologicalAssociations.vue'
+
+export default {
+  id: 'panel:biological-associations',
+  component: PanelBiologicalAssociations
+}

package/src/modules/otus/components/Panel/PanelBiologicalAssociations/utils/makeBiologicalAssociation.js

@@ -0,0 +1,30 @@
+function getBiologicalProperty(biologicalRelationshipTypes, type) {
+  return biologicalRelationshipTypes.find((r) => r.target === type)
+    ?.biological_property?.name
+}
+
+function parseRank(rank) {
+  return Array.isArray(rank) ? rank.filter(Boolean).join(' ') : rank
+}
+
+export function makeBiologicalAssociation(data) {
+  return {
+    id: data.id,
+    subjectId: data.subject.id,
+    subjectType: data.subject.type,
+    subjectOrder: data.subject.order,
+    subjectFamily: data.subject.family,
+    subjectGenus: data.subject.genus,
+    subjectLabel: data.subject.label,
+    biologicalPropertySubject: data.subject.properties,
+    biologicalRelationship: data.relationship,
+    biologicalPropertyObject: data.object.properties,
+    objectId: data.object.id,
+    objectType: data.object.type,
+    objectOrder: data.object.order,
+    objectFamily: data.object.family,
+    objectGenus: data.object.genus,
+    objectLabel: data.object.label,
+    citations: data.citations
+  }
+}

package/src/modules/otus/components/Panel/PanelContent/PanelContent.vue

@@ -0,0 +1,58 @@
+<template>
+  <VCard v-if="contents.length">
+    <ContentTopic
+      v-for="(text, title) in contentList"
+      :key="title"
+      :title="title"
+      :text-list="text"
+    />
+  </VCard>
+</template>
+
+<script setup>
+import { computed, ref, onBeforeMount, onBeforeUnmount } from 'vue'
+import { useOtuPageRequest } from '@/modules/otus/helpers/useOtuPageRequest'
+import TaxonWorks from '../../../services/TaxonWorks'
+import ContentTopic from './PanelContentTopic.vue'
+
+const props = defineProps({
+  otuId: {
+    type: Number,
+    required: true
+  }
+})
+
+const contents = ref([])
+const controller = new AbortController()
+
+const contentList = computed(() =>
+  contents.value.reduce((acc, current) => {
+    if (acc[current.name]) {
+      acc[current.name].push(current.text)
+    } else {
+      acc[current.name] = [current.text]
+    }
+
+    return acc
+  }, {})
+)
+
+onBeforeMount(() => {
+  useOtuPageRequest('panel:content', () =>
+    TaxonWorks.getOtuContent(props.otuId, {
+      params: {
+        extend: ['depiction']
+      },
+      signal: controller.signal
+    })
+  )
+    .then(({ data }) => {
+      contents.value = data
+    })
+    .catch((e) => {})
+})
+
+onBeforeUnmount(() => {
+  controller.abort()
+})
+</script>

package/src/modules/otus/components/Panel/PanelContent/PanelContentTopic.vue

@@ -0,0 +1,42 @@
+<template>
+  <VCardHeader class="border-t border-base-muted first:border-t-0">
+    {{ title }}
+  </VCardHeader>
+  <VCardContent class="panel-content-list">
+    <div
+      v-for="(text, index) in textList"
+      :key="index"
+      class="pt-1 text-sm"
+      v-html="text"
+    ></div>
+  </VCardContent>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+
+  textList: {
+    type: Array,
+    required: true
+  }
+})
+</script>
+
+<style>
+.panel-content-list {
+  ul {
+    margin: 1rem 0;
+    list-style: disc;
+    margin-left: 1rem;
+  }
+
+  ol {
+    list-style-type: decimal;
+    margin-left: 1rem;
+  }
+}
+</style>

package/src/modules/otus/components/Panel/PanelContent/main.js

@@ -0,0 +1,6 @@
+import PanelContent from './PanelContent.vue'
+
+export default {
+  id: 'panel:content',
+  component: PanelContent
+}

package/src/modules/otus/components/Panel/PanelDescendants/DescendantsSynonymList.vue

@@ -0,0 +1,21 @@
+<template>
+  <ul class="synonyms">
+    <li
+      v-for="synonym in props.list"
+      :key="synonym"
+    >
+      <span class="text-orange-500 mr-1">=</span>
+      <span v-html="synonym" />
+    </li>
+  </ul>
+</template>
+
+<script setup>
+
+const props = defineProps({
+  list: {
+    type: Array,
+    required: true
+  }
+})
+</script>

package/src/modules/otus/components/Panel/PanelDescendants/DescendantsTree.vue

@@ -0,0 +1,122 @@
+<template>
+  <li
+    v-if="Object.keys(taxonomy).length"
+    :key="taxonomy.otu_id"
+  >
+    <button-expand
+      v-if="!taxonomy.leaf_node"
+      v-model="isTreeVisible"
+      class="absolute -left-2.5"
+    />
+    <router-link
+      class="text-primary-500"
+      :to="{ name: 'otus-id', params: { id: taxonomy.otu_id } }"
+      v-html="taxonomy.name"
+    />
+    <DescendantsSynonymList
+      v-if="taxonomy.nomenclatural_synonyms.length"
+      class="pb-4"
+      :list="taxonomy.nomenclatural_synonyms"
+    />
+    <AnimationOpacity>
+      <ul
+        v-if="descendants.length"
+        class="tree"
+      >
+        <template
+          v-for="item in descendants"
+          :key="item.otu_id"
+        >
+          <AnimationOpacity>
+            <DescendantsTree
+              v-if="isTreeVisible"
+              :taxonomy="item"
+            />
+          </AnimationOpacity>
+        </template>
+      </ul>
+    </AnimationOpacity>
+  </li>
+</template>
+
+<script setup>
+import DescendantsTree from './DescendantsTree.vue'
+import DescendantsSynonymList from './DescendantsSynonymList.vue'
+import TaxonWorks from '../../../services/TaxonWorks'
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  taxonomy: {
+    type: Object,
+    required: true
+  },
+
+  level: {
+    type: Number,
+    default: 1
+  }
+})
+
+const isTreeVisible = ref(!!props.taxonomy.descendants.length)
+const descendants = ref([...props.taxonomy.descendants])
+
+watch(isTreeVisible, (newVal) => {
+  if (newVal) {
+    loadDescendants()
+  }
+})
+
+const loadDescendants = () => {
+  if (descendants.value.length) {
+    return
+  }
+  TaxonWorks.getTaxonomy(props.taxonomy.otu_id, {
+    params: {
+      max_descendants_depth: 1
+    }
+  })
+    .then(({ data }) => {
+      descendants.value = data.descendants
+    })
+    .catch(() => {})
+}
+</script>
+
+<style lang="scss" scoped>
+.tree {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  ul {
+    margin-left: 14px;
+  }
+
+  li {
+    position: relative;
+    margin: 0;
+    padding: 0px 6px;
+    border-left: 1px solid rgb(100, 100, 100);
+  }
+
+  li:last-child {
+    border-left: none;
+  }
+
+  li:before {
+    position: relative;
+    top: -0.3em;
+    height: 1em;
+    width: 12px;
+    color: white;
+    border-bottom: 1px solid rgb(100, 100, 100);
+    content: '';
+    display: inline-block;
+    left: -6px;
+  }
+
+  li:last-child:before {
+    border-left: 1px solid rgb(100, 100, 100);
+  }
+}
+</style>