@sfgrp/taxonpages 0.1.0

package/src/modules/DwCFilter/utils/flattenParameters.js

@@ -0,0 +1,20 @@
+export function flattenParameters(obj, prefix = '') {
+  const result = {}
+
+  for (const key in obj) {
+    if (!obj.hasOwnProperty(key)) continue
+
+    const value = obj[key]
+    const newKey = prefix ? `${prefix}[${key}]` : key
+
+    if (Array.isArray(value)) {
+      result[`${newKey}[]`] = value
+    } else if (typeof value === 'object' && value !== null) {
+      Object.assign(result, flattenParameters(value, newKey))
+    } else {
+      result[newKey] = value
+    }
+  }
+
+  return result
+}

package/src/modules/DwCFilter/views/index.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="container mx-auto box-border">
+    <div class="px-4 md:px-0 mt-4 mb-6">
+      <h1 class="text-4xl font-bold">Search the Darwin Core</h1>
+      <h2>
+        Filter OTUs by scientific name, author, and distribution (Darwin Core)
+      </h2>
+    </div>
+    <ClientOnly>
+      <VSpinner
+        v-if="isLoading"
+        full-screen
+      />
+    </ClientOnly>
+    <FilterBar
+      v-model="parameters"
+      @search="() => loadList()"
+      @reset="reset"
+    />
+
+    <VCard>
+      <VCardContent>
+        <div class="flex flex-row justify-between items-center mb-4">
+          <div class="flex flex-col md:flex-row gap-3 md:items-center">
+            <VPagination
+              v-model="pagination.page"
+              :total="pagination.total"
+              :per="pagination.per"
+              @update:modelValue="
+                (page) => {
+                  loadList(page)
+                }
+              "
+            />
+            <VPaginationInfo :pagination="pagination" />
+          </div>
+          <DropdownMenu
+            :parameters="{ ...parameters, ...wildcardParam }"
+            :request="requestData"
+          />
+        </div>
+
+        <VTable>
+          <VTableHeader>
+            <VTableHeaderRow>
+              <VTableHeaderCell class="w-2" />
+              <VTableHeaderCell>OTU</VTableHeaderCell>
+            </VTableHeaderRow>
+          </VTableHeader>
+          <VTableBody>
+            <VTableBodyRow
+              v-for="item in list"
+              :key="item.id"
+            >
+              <VTableBodyCell class="pr-1">
+                <OtuModal
+                  :otu="item"
+                  :parameters="{ ...parameters, ...wildcardParam }"
+                />
+              </VTableBodyCell>
+              <VTableBodyCell class="break-all">
+                <RouterLink
+                  :to="{ name: 'otus-id', params: { id: item.id } }"
+                  v-html="item.object_tag"
+                />
+              </VTableBodyCell>
+            </VTableBodyRow>
+          </VTableBody>
+        </VTable>
+        <div class="flex flex-col md:flex-row gap-3 md:items-center mt-4">
+          <VPagination
+            v-model="pagination.page"
+            :total="pagination.total"
+            :per="pagination.per"
+            @select="
+              (page) => {
+                loadList(page)
+              }
+            "
+          />
+          <VPaginationInfo :pagination="pagination" />
+        </div>
+      </VCardContent>
+    </VCard>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, computed } from 'vue'
+import { makeAPIRequest } from '@/utils'
+import { useRoute, useRouter } from 'vue-router'
+import { flattenParameters } from '../utils/flattenParameters'
+import FilterBar from '../components/FilterBar.vue'
+import DropdownMenu from '../components/DropdownMenu.vue'
+import OtuModal from '../components/OtuModal/OtuModal.vue'
+
+const PER = 50
+
+const route = useRoute()
+const router = useRouter()
+
+const list = ref([])
+const isLoading = ref(false)
+const pagination = ref({ page: 1, total: 0, per: PER })
+const parameters = ref({})
+const requestData = ref()
+const wildcardParam = computed(() => ({
+  wildcard_attribute: Object.keys(parameters.value)
+}))
+
+function getPagination(headers) {
+  return {
+    page: Number(headers['pagination-page']),
+    per: Number(headers['pagination-per-page']),
+    total: Number(headers['pagination-total'])
+  }
+}
+
+function setParameters(data = {}) {
+  parameters.value = data
+}
+
+function setPagination(data = {}) {
+  pagination.value = {
+    page: Number(data.page) || 1,
+    total: 0,
+    per: PER
+  }
+}
+
+function setQuery() {
+  router.push({
+    query: { ...parameters.value, page: pagination.value.page }
+  })
+}
+
+function loadList(page = 1) {
+  isLoading.value = true
+
+  makeAPIRequest
+    .get('/otus/inventory/alphabetical', {
+      params: {
+        ...flattenParameters({
+          dwc_occurrence_query: {
+            ...parameters.value,
+            ...wildcardParam.value
+          }
+        }),
+        page,
+        per: PER
+      }
+    })
+    .then(({ data, headers, request }) => {
+      list.value = data
+      pagination.value = getPagination(headers)
+
+      requestData.value = {
+        data,
+        url: request.responseURL
+      }
+
+      setQuery()
+    })
+    .finally(() => {
+      isLoading.value = false
+    })
+}
+
+function reset() {
+  setParameters()
+  setPagination()
+  setQuery()
+  list.value = []
+}
+
+onMounted(() => {
+  const { page, ...params } = route.query
+
+  setParameters(params)
+  setPagination({ page })
+  loadList()
+})
+</script>

package/src/modules/ImageMatrix/components/ListImages.vue

@@ -0,0 +1,54 @@
+<template>
+  <GalleryThumbnailList
+    :images="images"
+    @select-index="
+      (index) => {
+        galleryIndex = index
+        isImageViewerOpen = true
+      }
+    "
+  />
+
+  <ImageViewer
+    v-if="isImageViewerOpen"
+    :index="galleryIndex"
+    :images="images"
+    :next="galleryIndex < props.images.length - 1"
+    :previous="galleryIndex > 0"
+    @select-index="galleryIndex = $event"
+    @next="nextImage()"
+    @previous="previousImage()"
+    @close="isImageViewerOpen = false"
+  />
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import GalleryThumbnailList from '@/components/Gallery/GalleryThumbnailList.vue'
+
+const props = defineProps({
+  images: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const isImageViewerOpen = ref(false)
+const galleryIndex = ref(0)
+const currentImage = computed(() => props.images[galleryIndex.value] || {})
+
+const previousImage = () => {
+  galleryIndex.value--
+}
+const nextImage = () => {
+  galleryIndex.value++
+}
+
+watch(
+  () => props.images,
+  () => {
+    galleryIndex.value = 0
+  },
+  { immediate: true }
+)
+</script>

package/src/modules/ImageMatrix/router/index.js

@@ -0,0 +1,7 @@
+export default [
+  {
+    name: 'image-matrices-id',
+    path: '/image_matrices/:id',
+    component: () => import('../views/id.vue')
+  }
+]

package/src/modules/ImageMatrix/services/Keys.js

@@ -0,0 +1,9 @@
+import { makeAPIRequest } from '@/utils'
+
+export class ObservationMatrixImage {
+  static find(id, params) {
+    return makeAPIRequest.get(`/observation_matrices/${id}/image_matrix`, {
+      params
+    })
+  }
+}

package/src/modules/ImageMatrix/utils/makeImageObject.js

@@ -0,0 +1,15 @@
+function makeOriginalImageUrl(imagePath) {
+  const { url, project_token } = __APP_ENV__
+
+  return `${url}/${imagePath?.substring(8)}?project_token=${project_token}`
+}
+
+export function makeImageObject(item) {
+  return {
+    depiction: {
+      label: item.figure_label
+    },
+    ...item.image,
+    original: makeOriginalImageUrl(item.image.original_png)
+  }
+}

package/src/modules/ImageMatrix/views/id.vue

@@ -0,0 +1,133 @@
+<template>
+  <VCard class="container mx-auto">
+    <VSpinner
+      v-if="isLoading"
+      full-screen
+    />
+    <VCardHeader>
+      <div class="flex flex-row justify-between items-center">
+        <h1>{{ observationMatrix.name }}</h1>
+        <VPagination
+          v-if="pagination"
+          :total="pagination.total"
+          v-model="pagination.page"
+          :per="PER"
+          @select="(page) => loadMatrix(matrixId, page)"
+        />
+      </div>
+    </VCardHeader>
+    <VCardContent>
+      <div class="image-matrix overflow-auto">
+        <VTable>
+          <caption class="sr-only">
+            Image matrix
+          </caption>
+          <VTableHeader>
+            <VTableHeaderRow class="bg-base-foreground">
+              <VTableBodyCell class="border-b" />
+              <VTableHeaderCell
+                v-for="{ id, label } in descriptors"
+                :key="id"
+                class="border-l border-b"
+                scope="col"
+              >
+                {{ label }}
+              </VTableHeaderCell>
+            </VTableHeaderRow>
+          </VTableHeader>
+          <VTableBody>
+            <VTableBodyRow v-for="item in list">
+              <VTableBodyCell class="border-b text-base-content h-20">
+                <RouterLink
+                  :to="{ name: 'otus-id', params: { id: item.id } }"
+                  v-html="item.label"
+                />
+              </VTableBodyCell>
+              <VTableBodyCell
+                v-for="images in item.depictions"
+                class="border-l border-b"
+              >
+                <ListImage :images="images" />
+              </VTableBodyCell>
+            </VTableBodyRow>
+          </VTableBody>
+        </VTable>
+      </div>
+    </VCardContent>
+  </VCard>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { makeImageObject } from '../utils/makeImageObject.js'
+import ListImage from '../components/ListImages.vue'
+import { ObservationMatrixImage } from '../services/Keys.js'
+
+const PER = 50
+
+const list = ref([])
+const isLoading = ref(false)
+const descriptors = ref([])
+const observationMatrix = ref({})
+const route = useRoute()
+const pagination = ref()
+
+const matrixId = route.params.id
+
+async function loadMatrix(id, page = 1) {
+  isLoading.value = true
+
+  try {
+    const { data } = await ObservationMatrixImage.find(id, {
+      page,
+      per: PER
+    })
+
+    observationMatrix.value = data.observation_matrix
+    descriptors.value = data.list_of_descriptors.map((item) => ({
+      label: item.name,
+      id: item.id
+    }))
+
+    pagination.value = {
+      page: data.pagination.pagination_page,
+      total: data.pagination.pagination_total,
+      per: data.pagination.pagination_per_page
+    }
+
+    list.value = data.depiction_matrix.map((item) => {
+      const obj = {
+        id: item.object.id,
+        type: item.object.type,
+        label: item.object.label,
+        depictions: []
+      }
+
+      for (let i = 0; i < descriptors.value.length; i++) {
+        const depictions = item.depictions[i].map((d) =>
+          makeImageObject({
+            ...d,
+            ...data.image_hash[d.image_id]
+          })
+        )
+
+        obj.depictions.push(depictions)
+      }
+
+      return obj
+    })
+  } catch {
+  } finally {
+    isLoading.value = false
+  }
+}
+
+loadMatrix(route.params.id)
+</script>
+
+<style scoped>
+.image-matrix {
+  max-height: calc(100vh - 12rem);
+}
+</style>

package/src/modules/bibliography/components/DropdownMenu.vue

@@ -0,0 +1,53 @@
+<template>
+  <Dropdown :items="menuOptions">
+    <template #button>
+      <IconHamburger class="text-base-soft h-4" />
+    </template>
+  </Dropdown>
+  <VModal
+    v-if="isModalVisible"
+    @close="isModalVisible = false"
+  >
+    <template #header>
+      <h3>JSON Data</h3>
+    </template>
+    <div
+      v-if="request"
+      class="p-5 font-normal"
+    >
+      <h3 class="pb-2 text-sm">
+        URL: <a :href="request.url">{{ request.url }}</a>
+      </h3>
+      <div class="relative">
+        <p
+          class="bg-base-background p-2 text-sm font-normal whitespace-pre-wrap"
+          v-html="JSON.stringify(request.data, null, 4)"
+        />
+        <VClipboard
+          class="absolute right-2 top-2 opacity-75"
+          :text="JSON.stringify(request.data, null, 2)"
+        />
+      </div>
+    </div>
+  </VModal>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  request: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const isModalVisible = ref(false)
+
+const menuOptions = computed(() => [
+  {
+    label: 'JSON Data',
+    action: () => (isModalVisible.value = true)
+  }
+])
+</script>

package/src/modules/bibliography/components/OtuModal.vue

@@ -0,0 +1,129 @@
+<template>
+  <IconPlusCircle
+    class="size-6 text-secondary-color cursor-pointer"
+    @click="() => (isModalVisible = true)"
+  />
+  <Teleport to="body">
+    <VModal
+      v-if="isModalVisible"
+      @close="() => (isModalVisible = false)"
+    >
+      <template #header>
+        <div class="text-sm">Bibliography - <span v-html="label" /></div>
+      </template>
+
+      <div class="md:max-h-[64vh] min-h-28 px-4 overflow-y-auto pb-4">
+        <ClientOnly>
+          <VSpinner v-if="isLoading" />
+        </ClientOnly>
+
+        <div
+          v-if="!isLoading && !list.length"
+          class="text-xl text-center my-8 w-full"
+        >
+          No records found.
+        </div>
+
+        <div v-if="list.length">
+          <VPagination
+            v-if="pagination.total > pagination.per"
+            class="py-4"
+            v-model="pagination.page"
+            :total="pagination.total"
+            :per="pagination.per"
+            @update:modelValue="
+              (page) => {
+                loadPage(page)
+              }
+            "
+          />
+
+          <VTable>
+            <VTableHeader>
+              <VTableHeaderRow>
+                <VTableHeaderCell>OTU</VTableHeaderCell>
+              </VTableHeaderRow>
+            </VTableHeader>
+            <VTableBody>
+              <VTableBodyRow
+                v-for="otu in list"
+                :key="otu.id"
+              >
+                <VTableBodyCell>
+                  <RouterLink
+                    :to="{ name: 'otus-id', params: { id: otu.id } }"
+                    v-html="otu.object_tag"
+                  />
+                </VTableBodyCell>
+              </VTableBodyRow>
+            </VTableBody>
+          </VTable>
+
+          <VPagination
+            v-if="pagination.total > pagination.per"
+            class="pt-4"
+            v-model="pagination.page"
+            :total="pagination.total"
+            :per="pagination.per"
+            @update:modelValue="
+              (page) => {
+                loadPage(page)
+              }
+            "
+          />
+        </div>
+      </div>
+    </VModal>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { makeAPIRequest } from '@/utils'
+import { getPagination } from '../utils/getPagination'
+
+const props = defineProps({
+  sourceId: {
+    type: Number,
+    required: true
+  },
+
+  label: {
+    type: String,
+    required: true
+  }
+})
+
+const pagination = ref({ page: 1, total: 0, per: 50 })
+
+const isLoading = ref(false)
+const isModalVisible = ref(false)
+const list = ref([])
+
+function loadPage(page = 1) {
+  isLoading.value = true
+  makeAPIRequest
+    .get('/otus', {
+      params: {
+        page,
+        per: 50,
+        'taxon_name_query[source_query][source_id][]': props.sourceId,
+        paginate: true
+      }
+    })
+    .then(({ data, headers }) => {
+      list.value = data
+      pagination.value = getPagination(headers)
+    })
+    .catch(() => {})
+    .finally(() => {
+      isLoading.value = false
+    })
+}
+
+watch(isModalVisible, (newVal) => {
+  if (newVal) {
+    loadPage()
+  }
+})
+</script>