From 48b8f516e5d42a5c1795daa57b8b023f936910c5 Mon Sep 17 00:00:00 2001
From: Beecher Baker <wbbaker@purdue.edu>
Date: Thu, 1 Aug 2024 16:05:40 -0400
Subject: [PATCH 01/13] add placeholder for Collectino Objects panel

---
 .../PanelCollectionObjects.vue                | 21 +++++++++++++++++++
 .../Panel/PanelCollectionObjects/main.js      |  6 ++++++
 2 files changed, 27 insertions(+)
 create mode 100644 src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
 create mode 100644 src/modules/otus/components/Panel/PanelCollectionObjects/main.js

diff --git a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
new file mode 100644
index 0000000..bd22427
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
@@ -0,0 +1,21 @@
+<template>
+  <VCard>
+    <ClientOnly>
+      <VSpinner
+        v-if="isLoading"
+        logo-class="w-8 h-8"
+        legend=""
+      />
+      <VCardHeader>
+        <h2 class="text-md">Collection Objects</h2>
+        <PanelDropdown panel-key="panel:collection-objects" />
+      </VCardHeader>
+    </ClientOnly>
+  </VCard>
+</template>
+
+<script setup>
+
+const isLoading = ref(false)
+</script>
+
diff --git a/src/modules/otus/components/Panel/PanelCollectionObjects/main.js b/src/modules/otus/components/Panel/PanelCollectionObjects/main.js
new file mode 100644
index 0000000..8b202c9
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelCollectionObjects/main.js
@@ -0,0 +1,6 @@
+import PanelCollectionObjects from "./PanelCollectionObjects.vue";
+
+export default {
+  id: 'panel:collection-objects',
+  component: PanelCollectionObjects
+}
\ No newline at end of file

From 276668a8ed36916b4aa0249954a52b4bbd6c1cb2 Mon Sep 17 00:00:00 2001
From: Beecher Baker <wbbaker@purdue.edu>
Date: Thu, 1 Aug 2024 16:10:44 -0400
Subject: [PATCH 02/13] add collection objects panel stub to layout

---
 .../Panel/PanelCollectionObjects/PanelCollectionObjects.vue    | 1 -
 src/modules/otus/constants/layouts/overview.js                 | 3 ++-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
index bd22427..09d7bd2 100644
--- a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
+++ b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
@@ -18,4 +18,3 @@
 
 const isLoading = ref(false)
 </script>
-
diff --git a/src/modules/otus/constants/layouts/overview.js b/src/modules/otus/constants/layouts/overview.js
index 4c16868..a5f52a2 100644
--- a/src/modules/otus/constants/layouts/overview.js
+++ b/src/modules/otus/constants/layouts/overview.js
@@ -7,7 +7,8 @@ export const DEFAULT_OVERVIEW_LAYOUT = {
           'panel:type',
           'panel:type-specimen',
           'panel:nomenclature',
-          'panel:nomenclature-references'
+          'panel:nomenclature-references',
+          'panel:collection-objects'
         ],
         [
           'panel:map',

From 4d4780861275c4c5f5d9b5e162bdbe398fc01538 Mon Sep 17 00:00:00 2001
From: Beecher Baker <wbbaker@purdue.edu>
Date: Thu, 1 Aug 2024 16:12:34 -0400
Subject: [PATCH 03/13] missing import

---
 .../Panel/PanelCollectionObjects/PanelCollectionObjects.vue     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
index 09d7bd2..815a41b 100644
--- a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
+++ b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
@@ -15,6 +15,8 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
+import PanelDropdown from '../PanelDropdown.vue'
 
 const isLoading = ref(false)
 </script>

From 85ddf14db9f67b5bc2da9c95afdf46ac83279dd9 Mon Sep 17 00:00:00 2001
From: Beecher Baker <wbbaker@purdue.edu>
Date: Thu, 1 Aug 2024 16:16:03 -0400
Subject: [PATCH 04/13] add card content placeholder

---
 .../PanelCollectionObjects/PanelCollectionObjects.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
index 815a41b..718c331 100644
--- a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
+++ b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
@@ -6,11 +6,14 @@
         logo-class="w-8 h-8"
         legend=""
       />
-      <VCardHeader>
-        <h2 class="text-md">Collection Objects</h2>
-        <PanelDropdown panel-key="panel:collection-objects" />
-      </VCardHeader>
     </ClientOnly>
+    <VCardHeader>
+      <h2 class="text-md">Collection Objects</h2>
+      <PanelDropdown panel-key="panel:collection-objects" />
+    </VCardHeader>
+    <VCardContent class="text-sm">
+      <p>Placeholder.</p>
+    </VCardContent>
   </VCard>
 </template>
 

From 41272da32f1be5c0a124e1dde7bf2bd6adcb9073 Mon Sep 17 00:00:00 2001
From: Beecher Baker <wbbaker@purdue.edu>
Date: Thu, 1 Aug 2024 16:17:19 -0400
Subject: [PATCH 05/13] header format

---
 .../Panel/PanelCollectionObjects/PanelCollectionObjects.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
index 718c331..edf0e2b 100644
--- a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
+++ b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
@@ -7,7 +7,7 @@
         legend=""
       />
     </ClientOnly>
-    <VCardHeader>
+    <VCardHeader class="flex justify-between">
       <h2 class="text-md">Collection Objects</h2>
       <PanelDropdown panel-key="panel:collection-objects" />
     </VCardHeader>

From b3875a03220a074acdc51016dd3396c85e1d6fb0 Mon Sep 17 00:00:00 2001
From: Beecher Baker <wbbaker@purdue.edu>
Date: Fri, 2 Aug 2024 11:50:47 -0400
Subject: [PATCH 06/13] simulate loading from API

---
 .../PanelCollectionObjects.vue                | 36 ++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
index edf0e2b..22e54f5 100644
--- a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
+++ b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
@@ -2,9 +2,9 @@
   <VCard>
     <ClientOnly>
       <VSpinner
-        v-if="isLoading"
-        logo-class="w-8 h-8"
-        legend=""
+          v-if="isLoading"
+          logo-class="w-8 h-8"
+          legend=""
       />
     </ClientOnly>
     <VCardHeader class="flex justify-between">
@@ -12,14 +12,40 @@
       <PanelDropdown panel-key="panel:collection-objects" />
     </VCardHeader>
     <VCardContent class="text-sm">
-      <p>Placeholder.</p>
+      <p v-html="content"/>
     </VCardContent>
   </VCard>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import PanelDropdown from '../PanelDropdown.vue'
 
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+
+const props = defineProps({
+  otuId: {
+    type: [String, Number],
+    required: true
+  }
+})
+
+const content = ref("Loading...")
 const isLoading = ref(false)
+
+watch(
+    () => props.otuId,
+    async () => {
+      if (!props.otuId) {
+        content.value = 'No OTU specified.'
+        return
+      }
+
+      isLoading.value = true
+      await sleep(2000)
+      content.value = `Collection objects content for ${props.otuId}.`
+      isLoading.value = false
+    },
+    {immediate: true}
+)
 </script>

From b989bf2a7dfbc7fdc653a3eb8a863b4e7cfcb196 Mon Sep 17 00:00:00 2001
From: Beecher Baker <wbbaker@purdue.edu>
Date: Fri, 2 Aug 2024 13:45:42 -0400
Subject: [PATCH 07/13] fetch actual CollectionObjects from API

---
 .../PanelCollectionObjects.vue                       | 12 +++++++++---
 src/modules/otus/services/TaxonWorks.js              |  6 ++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
index 22e54f5..b58000b 100644
--- a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
+++ b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
@@ -20,6 +20,8 @@
 <script setup>
 import { ref, watch } from 'vue'
 import PanelDropdown from '../PanelDropdown.vue'
+import { useOtuPageRequest } from "@/modules/otus/helpers/useOtuPageRequest.js"
+import TaxonWorks from "@/modules/otus/services/TaxonWorks.js"
 
 const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
 
@@ -42,9 +44,13 @@ watch(
       }
 
       isLoading.value = true
-      await sleep(2000)
-      content.value = `Collection objects content for ${props.otuId}.`
-      isLoading.value = false
+      useOtuPageRequest('panel:collection-objects', () =>
+        TaxonWorks.getCollectionObjects(props.otuId)
+      ).then(({data}) => {
+        content.value = `Collection objects for ${props.otuId}: ${JSON.stringify(data)}`
+      }).catch(
+          e => content.value = `Error: ${JSON.stringify(e)}`
+      ).finally(() => isLoading.value = false)
     },
     {immediate: true}
 )
diff --git a/src/modules/otus/services/TaxonWorks.js b/src/modules/otus/services/TaxonWorks.js
index 05a4f5a..8b00aeb 100644
--- a/src/modules/otus/services/TaxonWorks.js
+++ b/src/modules/otus/services/TaxonWorks.js
@@ -59,6 +59,12 @@ export default class TaxonWorks {
     return makeAPIRequest.get(`/otus/${otuId}/inventory/content`, opt)
   }
 
+  // Note that this could support multiple OTUs.
+  // The API takes a comma-separated list of OTU IDs.
+  static getCollectionObjects(otuId, opt) {
+    return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}`, opt)
+  }
+
   static getCachedMap(id) {
     return makeAPIRequest.get(`/cached_maps/${id}`)
   }

From ba7972d8fc783e797d1e26a4b3b05a33739a0b4a Mon Sep 17 00:00:00 2001
From: Beecher Baker <wbbaker@purdue.edu>
Date: Fri, 2 Aug 2024 17:34:56 -0400
Subject: [PATCH 08/13] add inventory/dwc.json API call

---
 .../PanelCollectionObjects.vue                | 48 +++++++++++++++----
 src/modules/otus/services/TaxonWorks.js       | 14 +++++-
 2 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
index b58000b..ce1f709 100644
--- a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
+++ b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
@@ -2,7 +2,7 @@
   <VCard>
     <ClientOnly>
       <VSpinner
-          v-if="isLoading"
+          v-if="isLoading.collectionObjects || isLoading.inventory"
           logo-class="w-8 h-8"
           legend=""
       />
@@ -12,7 +12,10 @@
       <PanelDropdown panel-key="panel:collection-objects" />
     </VCardHeader>
     <VCardContent class="text-sm">
-      <p v-html="content"/>
+      <h3>Collection Objects</h3>
+      <p v-html="collectionObjects"/>
+      <h3>Inventory</h3>
+      <p v-html="inventory"/>
     </VCardContent>
   </VCard>
 </template>
@@ -32,26 +35,51 @@ const props = defineProps({
   }
 })
 
-const content = ref("Loading...")
-const isLoading = ref(false)
+const collectionObjects = ref("Loading...")
+const inventory = ref("Loading...")
+const isLoading = ref({collectionObjects: false, inventory: false})
 
 watch(
     () => props.otuId,
     async () => {
       if (!props.otuId) {
-        content.value = 'No OTU specified.'
+        collectionObjects.value = 'No OTU specified.'
+        inventory.value = 'No OTU specified.'
         return
       }
 
-      isLoading.value = true
+      isLoading.value = {...isLoading.value, collectionObjects: true}
       useOtuPageRequest('panel:collection-objects', () =>
         TaxonWorks.getCollectionObjects(props.otuId)
       ).then(({data}) => {
-        content.value = `Collection objects for ${props.otuId}: ${JSON.stringify(data)}`
+        collectionObjects.value = `Collection objects for ${props.otuId}: ${JSON.stringify(data)}`
+        console.log({data})
       }).catch(
-          e => content.value = `Error: ${JSON.stringify(e)}`
-      ).finally(() => isLoading.value = false)
+          e => collectionObjects.value = `Error: ${e}`
+      ).finally(() => isLoading.value = {...isLoading.value, collectionObjects: false})
     },
     {immediate: true}
-)
+  )
+
+watch(
+    () => props.otuId,
+    async () => {
+      if (!props.otuId) {
+        inventory.value = 'No OTU specified.'
+        return
+      }
+
+      isLoading.value = {...isLoading.value, inventory: true}
+      useOtuPageRequest('panel:inventory', () =>
+        TaxonWorks.getInventory(props.otuId)
+      ).then(({data}) => {
+        inventory.value = `Inventory for ${props.otuId}: ${JSON.stringify(data)}`
+        console.log({data})
+      }).catch(
+          e => inventory.value = `Error: ${e}`
+      ).finally(() => isLoading.value = {...isLoading.value, inventory: false})
+    },
+    {immediate: true}
+  )
+
 </script>
diff --git a/src/modules/otus/services/TaxonWorks.js b/src/modules/otus/services/TaxonWorks.js
index 8b00aeb..88024fb 100644
--- a/src/modules/otus/services/TaxonWorks.js
+++ b/src/modules/otus/services/TaxonWorks.js
@@ -62,7 +62,19 @@ export default class TaxonWorks {
   // Note that this could support multiple OTUs.
   // The API takes a comma-separated list of OTU IDs.
   static getCollectionObjects(otuId, opt) {
-    return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}`, opt)
+    // See taxonworks/lib/collection_object/filter.rb Queries:CollectionObject:Filter for full list of options
+    /*
+        @with_buffered_collecting_event = boolean_param(params, :with_buffered_collecting_event)
+        @with_buffered_determinations = boolean_param(params, :with_buffered_determinations)
+        @with_buffered_other_labels = boolean_param(params, :with_buffered_other_labels)
+     */
+    return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}&with_buffered_determination=true`, opt)
+    // return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}&descendants=true`, opt)
+    // return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}`, opt)
+  }
+
+  static getInventory(otuId, opt) {
+    return makeAPIRequest.get(`/otus/${otuId}/inventory/dwc.json`, opt)
   }
 
   static getCachedMap(id) {

From 45b88a8e9db8d94c3c4317018761d016a2fccb64 Mon Sep 17 00:00:00 2001
From: Beecher Baker <wbbaker@purdue.edu>
Date: Tue, 6 Aug 2024 16:36:42 -0400
Subject: [PATCH 09/13] add details to Inventory panel and rename it from
 CollectionObjects panel

---
 .../PanelCollectionObjects.vue                |  85 ----------
 .../Panel/PanelCollectionObjects/main.js      |   6 -
 .../Panel/PanelInventory/PanelInventory.vue   | 160 ++++++++++++++++++
 .../components/Panel/PanelInventory/main.js   |   6 +
 .../otus/constants/layouts/overview.js        |   2 +-
 src/modules/otus/services/TaxonWorks.js       |   5 +-
 6 files changed, 170 insertions(+), 94 deletions(-)
 delete mode 100644 src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
 delete mode 100644 src/modules/otus/components/Panel/PanelCollectionObjects/main.js
 create mode 100644 src/modules/otus/components/Panel/PanelInventory/PanelInventory.vue
 create mode 100644 src/modules/otus/components/Panel/PanelInventory/main.js

diff --git a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
deleted file mode 100644
index ce1f709..0000000
--- a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <VCard>
-    <ClientOnly>
-      <VSpinner
-          v-if="isLoading.collectionObjects || isLoading.inventory"
-          logo-class="w-8 h-8"
-          legend=""
-      />
-    </ClientOnly>
-    <VCardHeader class="flex justify-between">
-      <h2 class="text-md">Collection Objects</h2>
-      <PanelDropdown panel-key="panel:collection-objects" />
-    </VCardHeader>
-    <VCardContent class="text-sm">
-      <h3>Collection Objects</h3>
-      <p v-html="collectionObjects"/>
-      <h3>Inventory</h3>
-      <p v-html="inventory"/>
-    </VCardContent>
-  </VCard>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-import PanelDropdown from '../PanelDropdown.vue'
-import { useOtuPageRequest } from "@/modules/otus/helpers/useOtuPageRequest.js"
-import TaxonWorks from "@/modules/otus/services/TaxonWorks.js"
-
-const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
-
-const props = defineProps({
-  otuId: {
-    type: [String, Number],
-    required: true
-  }
-})
-
-const collectionObjects = ref("Loading...")
-const inventory = ref("Loading...")
-const isLoading = ref({collectionObjects: false, inventory: false})
-
-watch(
-    () => props.otuId,
-    async () => {
-      if (!props.otuId) {
-        collectionObjects.value = 'No OTU specified.'
-        inventory.value = 'No OTU specified.'
-        return
-      }
-
-      isLoading.value = {...isLoading.value, collectionObjects: true}
-      useOtuPageRequest('panel:collection-objects', () =>
-        TaxonWorks.getCollectionObjects(props.otuId)
-      ).then(({data}) => {
-        collectionObjects.value = `Collection objects for ${props.otuId}: ${JSON.stringify(data)}`
-        console.log({data})
-      }).catch(
-          e => collectionObjects.value = `Error: ${e}`
-      ).finally(() => isLoading.value = {...isLoading.value, collectionObjects: false})
-    },
-    {immediate: true}
-  )
-
-watch(
-    () => props.otuId,
-    async () => {
-      if (!props.otuId) {
-        inventory.value = 'No OTU specified.'
-        return
-      }
-
-      isLoading.value = {...isLoading.value, inventory: true}
-      useOtuPageRequest('panel:inventory', () =>
-        TaxonWorks.getInventory(props.otuId)
-      ).then(({data}) => {
-        inventory.value = `Inventory for ${props.otuId}: ${JSON.stringify(data)}`
-        console.log({data})
-      }).catch(
-          e => inventory.value = `Error: ${e}`
-      ).finally(() => isLoading.value = {...isLoading.value, inventory: false})
-    },
-    {immediate: true}
-  )
-
-</script>
diff --git a/src/modules/otus/components/Panel/PanelCollectionObjects/main.js b/src/modules/otus/components/Panel/PanelCollectionObjects/main.js
deleted file mode 100644
index 8b202c9..0000000
--- a/src/modules/otus/components/Panel/PanelCollectionObjects/main.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import PanelCollectionObjects from "./PanelCollectionObjects.vue";
-
-export default {
-  id: 'panel:collection-objects',
-  component: PanelCollectionObjects
-}
\ No newline at end of file
diff --git a/src/modules/otus/components/Panel/PanelInventory/PanelInventory.vue b/src/modules/otus/components/Panel/PanelInventory/PanelInventory.vue
new file mode 100644
index 0000000..fffa445
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelInventory/PanelInventory.vue
@@ -0,0 +1,160 @@
+<template>
+  <VCard>
+    <ClientOnly>
+      <VSpinner
+          v-if="isLoading.collectionObjects || isLoading.inventory"
+          logo-class="w-8 h-8"
+          legend=""
+      />
+    </ClientOnly>
+    <VCardHeader class="flex justify-between">
+      <h2 class="text-md">Collection Objects</h2>
+      <PanelDropdown panel-key="panel:inventory" />
+    </VCardHeader>
+    <VCardContent class="text-sm">
+      <h3>Inventory</h3>
+      <p v-if="typeof inventory === 'string'" v-html="inventory"/>
+      <ul v-else class="tree ml-2">
+        <li v-for="inventoryItem in inventory" :key="inventoryItem.id" class="mt-1">
+          <details>
+            <summary class="cursor-pointer">
+              {{ makeInventoryLabel(inventoryItem) }}
+            </summary>
+            <ul class="m-2 ml-6 list-disc">
+              <li v-for="detail in makeInventoryDetails(inventoryItem)" v-html="detail" :key="detail.id"/>
+              <li>
+                <details>
+                  <summary class="cursor-pointer">Full Record</summary>
+                  <dl class="m-2 ml-6">
+                    <template v-for="entry in Object.entries(inventoryItem)">
+                      <dt>{{ entry[0] }}</dt>
+                      <dd class="ml-4 mb-2">{{ entry[1] }}</dd>
+                    </template>
+                  </dl>
+                </details>
+              </li>
+            </ul>
+          </details>
+        </li>
+      </ul>
+      <h3 class="pt-2">Collection Objects</h3>
+      <p v-if="typeof collectionObjects === 'string'" v-html="collectionObjects"/>
+      <ul v-else  class="tree ml-2">
+        <li v-for="collectionObject in collectionObjects" :key="collectionObject.id">
+          <details>
+            <summary>
+              {{ collectionObject.id }} — length {{JSON.stringify(collectionObject).length}}
+            </summary>
+            <ul class="m-2 ml-6 list-disc">
+              <li v-for="entry in Object.entries(collectionObject)" :key="entry.id">
+                <em>{{ entry[0] }}:</em> {{ entry[1] }}
+              </li>
+            </ul>
+            <p v-html="JSON.stringify(collectionObject, null, 1)"/>
+          </details>
+        </li>
+      </ul>
+    </VCardContent>
+  </VCard>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import PanelDropdown from '../PanelDropdown.vue'
+import { useOtuPageRequest } from "@/modules/otus/helpers/useOtuPageRequest.js"
+import TaxonWorks from "@/modules/otus/services/TaxonWorks.js"
+
+const props = defineProps({
+  otuId: {
+    type: [String, Number],
+    required: true
+  }
+})
+
+const collectionObjects = ref("Loading...")
+const inventory = ref("Loading...")
+const isLoading = ref({collectionObjects: false, inventory: false})
+
+/** Based on taxonpages-orthoptera PanelSpecimentRecords. */
+function makeInventoryLabel(item) {
+  return [
+    item.catalogNumber,
+    makeLocationDescription(item),
+    item.year,
+    // `length ${JSON.stringify(item).length}`,
+  ].filter(Boolean).join("; ")
+}
+
+function makeInventoryDetails(item) {
+  return [
+    makeInventoryCollectionDate(item),
+    item.recordedBy && `Recorded by ${item.recordedBy}`,
+    item.identifiedBy && `Identified by ${item.identifiedBy}, ${item.dateIdentified}`,
+    item.georeferencedBy && `Georeferenced by ${item.georeferencedBy}${makeGeoreferenceUncertainty(item)}`,
+    // CollectionObject #1234
+    item.dwc_occurrence_object_id && `${item.dwc_occurrence_object_type} #${item.dwc_occurrence_object_id}`,
+  ]
+}
+
+function makeLocationDescription(item) {
+  return [
+    item.country && item.country,
+    item.stateProvince && item.stateProvince,
+    item.county && `${item.county} County`,
+  ].filter(Boolean).join(", ")
+}
+
+function makeInventoryCollectionDate(item) {
+  if (!item.year) return null
+  const date = new Date(item.year, item.month, item.day)
+  return `Collected ${date.toLocaleDateString()}`
+}
+
+function makeGeoreferenceUncertainty(item) {
+  return item.coordinateUncertaintyInMeters && ` to within ${item.coordinateUncertaintyInMeters} meters`
+}
+
+watch(
+    () => props.otuId,
+    async () => {
+      if (!props.otuId) {
+        collectionObjects.value = 'No OTU specified.'
+        inventory.value = 'No OTU specified.'
+        return
+      }
+
+      isLoading.value = {...isLoading.value, collectionObjects: true}
+      useOtuPageRequest('panel:inventory', () =>
+        TaxonWorks.getCollectionObjects(props.otuId)
+      ).then(({data}) => {
+        collectionObjects.value = data
+        console.log(data)
+      }).catch(
+          e => collectionObjects.value = `Error: ${e}`
+      ).finally(() => isLoading.value = {...isLoading.value, collectionObjects: false})
+    },
+    {immediate: true}
+  )
+
+watch(
+    () => props.otuId,
+    async () => {
+      if (!props.otuId) {
+        inventory.value = 'No OTU specified.'
+        return
+      }
+
+      isLoading.value = {...isLoading.value, inventory: true}
+      useOtuPageRequest('panel:inventory', () =>
+        TaxonWorks.getInventory(props.otuId)
+      ).then(({data}) => {
+        inventory.value = data
+        console.log(data)
+      }).catch(
+          e => inventory.value = `Error: ${e}`
+      ).finally(() => isLoading.value = {...isLoading.value, inventory: false})
+    },
+    {immediate: true}
+  )
+
+</script>
diff --git a/src/modules/otus/components/Panel/PanelInventory/main.js b/src/modules/otus/components/Panel/PanelInventory/main.js
new file mode 100644
index 0000000..1c3a28a
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelInventory/main.js
@@ -0,0 +1,6 @@
+import PanelInventory from "./PanelInventory.vue";
+
+export default {
+  id: 'panel:inventory',
+  component: PanelInventory
+}
\ No newline at end of file
diff --git a/src/modules/otus/constants/layouts/overview.js b/src/modules/otus/constants/layouts/overview.js
index a5f52a2..bceeed6 100644
--- a/src/modules/otus/constants/layouts/overview.js
+++ b/src/modules/otus/constants/layouts/overview.js
@@ -8,7 +8,7 @@ export const DEFAULT_OVERVIEW_LAYOUT = {
           'panel:type-specimen',
           'panel:nomenclature',
           'panel:nomenclature-references',
-          'panel:collection-objects'
+          'panel:inventory'
         ],
         [
           'panel:map',
diff --git a/src/modules/otus/services/TaxonWorks.js b/src/modules/otus/services/TaxonWorks.js
index 88024fb..9c11a45 100644
--- a/src/modules/otus/services/TaxonWorks.js
+++ b/src/modules/otus/services/TaxonWorks.js
@@ -68,9 +68,10 @@ export default class TaxonWorks {
         @with_buffered_determinations = boolean_param(params, :with_buffered_determinations)
         @with_buffered_other_labels = boolean_param(params, :with_buffered_other_labels)
      */
-    return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}&with_buffered_determination=true`, opt)
+    // return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}&with_buffered_determination=true`, opt)
     // return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}&descendants=true`, opt)
-    // return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}`, opt)
+    return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}`, opt)
+    // return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}/dwc.json`, opt)
   }
 
   static getInventory(otuId, opt) {

From 673a51124cb46df8afc801d4189f46642a6228b7 Mon Sep 17 00:00:00 2001
From: Beecher Baker <wbbaker@purdue.edu>
Date: Tue, 6 Aug 2024 17:04:36 -0400
Subject: [PATCH 10/13] flip order and hide COs by default

---
 .../Panel/PanelInventory/PanelInventory.vue   | 67 ++++++++++++-------
 src/modules/otus/services/TaxonWorks.js       |  7 +-
 2 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/src/modules/otus/components/Panel/PanelInventory/PanelInventory.vue b/src/modules/otus/components/Panel/PanelInventory/PanelInventory.vue
index fffa445..a7380cd 100644
--- a/src/modules/otus/components/Panel/PanelInventory/PanelInventory.vue
+++ b/src/modules/otus/components/Panel/PanelInventory/PanelInventory.vue
@@ -8,10 +8,35 @@
       />
     </ClientOnly>
     <VCardHeader class="flex justify-between">
-      <h2 class="text-md">Collection Objects</h2>
+      <h2 class="text-md">
+        Inventory
+        <span v-if="Array.isArray(inventory)"> [{{inventory.length}}]</span>
+      </h2>
       <PanelDropdown panel-key="panel:inventory" />
     </VCardHeader>
     <VCardContent class="text-sm">
+      <details class="pb-4">
+        <summary class="cursor-pointer">
+          Collection Objects
+          <span v-if="Array.isArray(collectionObjects)"> [{{collectionObjects.length}}]</span>
+        </summary>
+        <p v-if="typeof collectionObjects === 'string'" v-html="collectionObjects"/>
+        <ul v-else  class="tree ml-2">
+          <li v-for="collectionObject in collectionObjects" :key="collectionObject?.id">
+            <details>
+              <summary class="cursor-pointer">
+                {{ collectionObject.id }} — length {{JSON.stringify(collectionObject).length}}
+              </summary>
+              <ul class="m-2 ml-6 list-disc">
+                <li v-for="entry in Object.entries(collectionObject)" :key="entry[0]">
+                  <em>{{ entry[0] }}:</em> {{ entry[1] }}
+                </li>
+              </ul>
+              <p v-html="JSON.stringify(collectionObject, null, 1)"/>
+            </details>
+          </li>
+        </ul>
+      </details>
       <h3>Inventory</h3>
       <p v-if="typeof inventory === 'string'" v-html="inventory"/>
       <ul v-else class="tree ml-2">
@@ -21,12 +46,12 @@
               {{ makeInventoryLabel(inventoryItem) }}
             </summary>
             <ul class="m-2 ml-6 list-disc">
-              <li v-for="detail in makeInventoryDetails(inventoryItem)" v-html="detail" :key="detail.id"/>
+              <li v-for="detail in makeInventoryDetails(inventoryItem)" v-html="detail" :key="detail?.id"/>
               <li>
                 <details>
-                  <summary class="cursor-pointer">Full Record</summary>
+                  <summary class="cursor-pointer">Full Record ({{Object.keys(inventoryItem).length}} items)</summary>
                   <dl class="m-2 ml-6">
-                    <template v-for="entry in Object.entries(inventoryItem)">
+                    <template v-for="entry in Object.entries(inventoryItem)" :key="entry[0]">
                       <dt>{{ entry[0] }}</dt>
                       <dd class="ml-4 mb-2">{{ entry[1] }}</dd>
                     </template>
@@ -37,23 +62,6 @@
           </details>
         </li>
       </ul>
-      <h3 class="pt-2">Collection Objects</h3>
-      <p v-if="typeof collectionObjects === 'string'" v-html="collectionObjects"/>
-      <ul v-else  class="tree ml-2">
-        <li v-for="collectionObject in collectionObjects" :key="collectionObject.id">
-          <details>
-            <summary>
-              {{ collectionObject.id }} — length {{JSON.stringify(collectionObject).length}}
-            </summary>
-            <ul class="m-2 ml-6 list-disc">
-              <li v-for="entry in Object.entries(collectionObject)" :key="entry.id">
-                <em>{{ entry[0] }}:</em> {{ entry[1] }}
-              </li>
-            </ul>
-            <p v-html="JSON.stringify(collectionObject, null, 1)"/>
-          </details>
-        </li>
-      </ul>
     </VCardContent>
   </VCard>
 </template>
@@ -89,11 +97,11 @@ function makeInventoryDetails(item) {
   return [
     makeInventoryCollectionDate(item),
     item.recordedBy && `Recorded by ${item.recordedBy}`,
-    item.identifiedBy && `Identified by ${item.identifiedBy}, ${item.dateIdentified}`,
+    makeIdentifiedByDesccription(item),
     item.georeferencedBy && `Georeferenced by ${item.georeferencedBy}${makeGeoreferenceUncertainty(item)}`,
     // CollectionObject #1234
     item.dwc_occurrence_object_id && `${item.dwc_occurrence_object_type} #${item.dwc_occurrence_object_id}`,
-  ]
+  ].filter(Boolean)
 }
 
 function makeLocationDescription(item) {
@@ -104,6 +112,13 @@ function makeLocationDescription(item) {
   ].filter(Boolean).join(", ")
 }
 
+function makeIdentifiedByDesccription(item) {
+  return [
+    item.identifiedBy && `Identified by ${item.identifiedBy}`,
+    item.dateIdentified,
+  ].filter(Boolean).join(", ")
+}
+
 function makeInventoryCollectionDate(item) {
   if (!item.year) return null
   const date = new Date(item.year, item.month, item.day)
@@ -128,7 +143,7 @@ watch(
         TaxonWorks.getCollectionObjects(props.otuId)
       ).then(({data}) => {
         collectionObjects.value = data
-        console.log(data)
+        console.log('CollectionObjects', data)
       }).catch(
           e => collectionObjects.value = `Error: ${e}`
       ).finally(() => isLoading.value = {...isLoading.value, collectionObjects: false})
@@ -146,10 +161,10 @@ watch(
 
       isLoading.value = {...isLoading.value, inventory: true}
       useOtuPageRequest('panel:inventory', () =>
-        TaxonWorks.getInventory(props.otuId)
+        TaxonWorks.getInventoryDarwinCore(props.otuId)
       ).then(({data}) => {
         inventory.value = data
-        console.log(data)
+        console.log('Inventory (Darwin Core)', data)
       }).catch(
           e => inventory.value = `Error: ${e}`
       ).finally(() => isLoading.value = {...isLoading.value, inventory: false})
diff --git a/src/modules/otus/services/TaxonWorks.js b/src/modules/otus/services/TaxonWorks.js
index 9c11a45..9a29d57 100644
--- a/src/modules/otus/services/TaxonWorks.js
+++ b/src/modules/otus/services/TaxonWorks.js
@@ -62,7 +62,9 @@ export default class TaxonWorks {
   // Note that this could support multiple OTUs.
   // The API takes a comma-separated list of OTU IDs.
   static getCollectionObjects(otuId, opt) {
-    // See taxonworks/lib/collection_object/filter.rb Queries:CollectionObject:Filter for full list of options
+    return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}`, opt)
+    // See taxonworks/lib/collection_object/filter.rb Queries:CollectionObject:Filter for full list of options.
+    // However, none seems to change the result.
     /*
         @with_buffered_collecting_event = boolean_param(params, :with_buffered_collecting_event)
         @with_buffered_determinations = boolean_param(params, :with_buffered_determinations)
@@ -70,11 +72,10 @@ export default class TaxonWorks {
      */
     // return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}&with_buffered_determination=true`, opt)
     // return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}&descendants=true`, opt)
-    return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}`, opt)
     // return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}/dwc.json`, opt)
   }
 
-  static getInventory(otuId, opt) {
+  static getInventoryDarwinCore(otuId, opt) {
     return makeAPIRequest.get(`/otus/${otuId}/inventory/dwc.json`, opt)
   }
 

From 8c90e72baa5aff5f14c29366c6fd7607da3ed222 Mon Sep 17 00:00:00 2001
From: Beecher Baker <wbbaker@purdue.edu>
Date: Tue, 20 Aug 2024 11:45:47 -0400
Subject: [PATCH 11/13] inventory panel: remove CollectionObjects api results;
 relabel 'In the Collection'

---
 .../PanelDescendants/PanelDescendants.vue     |  4 +-
 .../Panel/PanelInventory/PanelInventory.vue   | 73 ++++---------------
 src/modules/otus/services/TaxonWorks.js       |  2 +-
 3 files changed, 16 insertions(+), 63 deletions(-)

diff --git a/src/modules/otus/components/Panel/PanelDescendants/PanelDescendants.vue b/src/modules/otus/components/Panel/PanelDescendants/PanelDescendants.vue
index d075a88..eece489 100644
--- a/src/modules/otus/components/Panel/PanelDescendants/PanelDescendants.vue
+++ b/src/modules/otus/components/Panel/PanelDescendants/PanelDescendants.vue
@@ -26,8 +26,8 @@
             taxonomy &&
             !taxonomy.nomenclatural_synonyms.length &&
             !taxonomy.descendants.length
-          ">
-            No descendants.
+          " >
+            No descendants of <span v-html="taxonomy.name"/>.
           </p>
         </AnimationOpacity>
       </ul>
diff --git a/src/modules/otus/components/Panel/PanelInventory/PanelInventory.vue b/src/modules/otus/components/Panel/PanelInventory/PanelInventory.vue
index a7380cd..f5a4e3b 100644
--- a/src/modules/otus/components/Panel/PanelInventory/PanelInventory.vue
+++ b/src/modules/otus/components/Panel/PanelInventory/PanelInventory.vue
@@ -2,45 +2,22 @@
   <VCard>
     <ClientOnly>
       <VSpinner
-          v-if="isLoading.collectionObjects || isLoading.inventory"
+          v-if="isLoading"
           logo-class="w-8 h-8"
           legend=""
       />
     </ClientOnly>
     <VCardHeader class="flex justify-between">
       <h2 class="text-md">
-        Inventory
-        <span v-if="Array.isArray(inventory)"> [{{inventory.length}}]</span>
+        In the Collection
+        <span v-if="Array.isArray(inventoryDWC)"> [{{ inventoryDWC.length }}]</span>
       </h2>
       <PanelDropdown panel-key="panel:inventory" />
     </VCardHeader>
     <VCardContent class="text-sm">
-      <details class="pb-4">
-        <summary class="cursor-pointer">
-          Collection Objects
-          <span v-if="Array.isArray(collectionObjects)"> [{{collectionObjects.length}}]</span>
-        </summary>
-        <p v-if="typeof collectionObjects === 'string'" v-html="collectionObjects"/>
-        <ul v-else  class="tree ml-2">
-          <li v-for="collectionObject in collectionObjects" :key="collectionObject?.id">
-            <details>
-              <summary class="cursor-pointer">
-                {{ collectionObject.id }} — length {{JSON.stringify(collectionObject).length}}
-              </summary>
-              <ul class="m-2 ml-6 list-disc">
-                <li v-for="entry in Object.entries(collectionObject)" :key="entry[0]">
-                  <em>{{ entry[0] }}:</em> {{ entry[1] }}
-                </li>
-              </ul>
-              <p v-html="JSON.stringify(collectionObject, null, 1)"/>
-            </details>
-          </li>
-        </ul>
-      </details>
-      <h3>Inventory</h3>
-      <p v-if="typeof inventory === 'string'" v-html="inventory"/>
+      <p v-if="typeof inventoryDWC === 'string'" v-html="inventoryDWC"/>
       <ul v-else class="tree ml-2">
-        <li v-for="inventoryItem in inventory" :key="inventoryItem.id" class="mt-1">
+        <li v-for="inventoryItem in inventoryDWC" :key="inventoryItem.id" class="mt-1">
           <details>
             <summary class="cursor-pointer">
               {{ makeInventoryLabel(inventoryItem) }}
@@ -79,9 +56,8 @@ const props = defineProps({
   }
 })
 
-const collectionObjects = ref("Loading...")
-const inventory = ref("Loading...")
-const isLoading = ref({collectionObjects: false, inventory: false})
+const inventoryDWC = ref("Loading...")
+const isLoading = ref(false)
 
 /** Based on taxonpages-orthoptera PanelSpecimentRecords. */
 function makeInventoryLabel(item) {
@@ -133,41 +109,18 @@ watch(
     () => props.otuId,
     async () => {
       if (!props.otuId) {
-        collectionObjects.value = 'No OTU specified.'
-        inventory.value = 'No OTU specified.'
+        inventoryDWC.value = 'No OTU specified.'
         return
       }
 
-      isLoading.value = {...isLoading.value, collectionObjects: true}
+      isLoading.value = true
       useOtuPageRequest('panel:inventory', () =>
-        TaxonWorks.getCollectionObjects(props.otuId)
+        TaxonWorks.getOtuInventoryDarwinCore(props.otuId)
       ).then(({data}) => {
-        collectionObjects.value = data
-        console.log('CollectionObjects', data)
+        inventoryDWC.value = data
       }).catch(
-          e => collectionObjects.value = `Error: ${e}`
-      ).finally(() => isLoading.value = {...isLoading.value, collectionObjects: false})
-    },
-    {immediate: true}
-  )
-
-watch(
-    () => props.otuId,
-    async () => {
-      if (!props.otuId) {
-        inventory.value = 'No OTU specified.'
-        return
-      }
-
-      isLoading.value = {...isLoading.value, inventory: true}
-      useOtuPageRequest('panel:inventory', () =>
-        TaxonWorks.getInventoryDarwinCore(props.otuId)
-      ).then(({data}) => {
-        inventory.value = data
-        console.log('Inventory (Darwin Core)', data)
-      }).catch(
-          e => inventory.value = `Error: ${e}`
-      ).finally(() => isLoading.value = {...isLoading.value, inventory: false})
+          e => inventoryDWC.value = `Error: ${e}`
+      ).finally(() => isLoading.value = false)
     },
     {immediate: true}
   )
diff --git a/src/modules/otus/services/TaxonWorks.js b/src/modules/otus/services/TaxonWorks.js
index 9a29d57..b7197c5 100644
--- a/src/modules/otus/services/TaxonWorks.js
+++ b/src/modules/otus/services/TaxonWorks.js
@@ -75,7 +75,7 @@ export default class TaxonWorks {
     // return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}/dwc.json`, opt)
   }
 
-  static getInventoryDarwinCore(otuId, opt) {
+  static getOtuInventoryDarwinCore(otuId, opt) {
     return makeAPIRequest.get(`/otus/${otuId}/inventory/dwc.json`, opt)
   }
 

From 0ff0f3d8f6b61361e84e57310c31b4a9ecbde09c Mon Sep 17 00:00:00 2001
From: Beecher Baker <wbbaker@purdue.edu>
Date: Tue, 20 Aug 2024 11:57:20 -0400
Subject: [PATCH 12/13] rename PanelInventory to PanelSpecimens

---
 src/modules/otus/components/Panel/PanelInventory/main.js    | 6 ------
 .../PanelSpecimens.vue}                                     | 4 ++--
 src/modules/otus/components/Panel/PanelSpecimens/main.js    | 6 ++++++
 src/modules/otus/constants/layouts/overview.js              | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)
 delete mode 100644 src/modules/otus/components/Panel/PanelInventory/main.js
 rename src/modules/otus/components/Panel/{PanelInventory/PanelInventory.vue => PanelSpecimens/PanelSpecimens.vue} (97%)
 create mode 100644 src/modules/otus/components/Panel/PanelSpecimens/main.js

diff --git a/src/modules/otus/components/Panel/PanelInventory/main.js b/src/modules/otus/components/Panel/PanelInventory/main.js
deleted file mode 100644
index 1c3a28a..0000000
--- a/src/modules/otus/components/Panel/PanelInventory/main.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import PanelInventory from "./PanelInventory.vue";
-
-export default {
-  id: 'panel:inventory',
-  component: PanelInventory
-}
\ No newline at end of file
diff --git a/src/modules/otus/components/Panel/PanelInventory/PanelInventory.vue b/src/modules/otus/components/Panel/PanelSpecimens/PanelSpecimens.vue
similarity index 97%
rename from src/modules/otus/components/Panel/PanelInventory/PanelInventory.vue
rename to src/modules/otus/components/Panel/PanelSpecimens/PanelSpecimens.vue
index f5a4e3b..b9f2ad7 100644
--- a/src/modules/otus/components/Panel/PanelInventory/PanelInventory.vue
+++ b/src/modules/otus/components/Panel/PanelSpecimens/PanelSpecimens.vue
@@ -12,7 +12,7 @@
         In the Collection
         <span v-if="Array.isArray(inventoryDWC)"> [{{ inventoryDWC.length }}]</span>
       </h2>
-      <PanelDropdown panel-key="panel:inventory" />
+      <PanelDropdown panel-key="panel:specimens" />
     </VCardHeader>
     <VCardContent class="text-sm">
       <p v-if="typeof inventoryDWC === 'string'" v-html="inventoryDWC"/>
@@ -114,7 +114,7 @@ watch(
       }
 
       isLoading.value = true
-      useOtuPageRequest('panel:inventory', () =>
+      useOtuPageRequest('panel:specimens', () =>
         TaxonWorks.getOtuInventoryDarwinCore(props.otuId)
       ).then(({data}) => {
         inventoryDWC.value = data
diff --git a/src/modules/otus/components/Panel/PanelSpecimens/main.js b/src/modules/otus/components/Panel/PanelSpecimens/main.js
new file mode 100644
index 0000000..78f9d7f
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelSpecimens/main.js
@@ -0,0 +1,6 @@
+import PanelSpecimens from "./PanelSpecimens.vue";
+
+export default {
+  id: 'panel:specimens',
+  component: PanelSpecimens
+}
\ No newline at end of file
diff --git a/src/modules/otus/constants/layouts/overview.js b/src/modules/otus/constants/layouts/overview.js
index bceeed6..66b3fce 100644
--- a/src/modules/otus/constants/layouts/overview.js
+++ b/src/modules/otus/constants/layouts/overview.js
@@ -8,7 +8,7 @@ export const DEFAULT_OVERVIEW_LAYOUT = {
           'panel:type-specimen',
           'panel:nomenclature',
           'panel:nomenclature-references',
-          'panel:inventory'
+          'panel:specimens'
         ],
         [
           'panel:map',

From 05fda1a5a5eaafc69a9b92d988ab4cce9bca5b58 Mon Sep 17 00:00:00 2001
From: Beecher Baker <wbbaker@purdue.edu>
Date: Thu, 22 Aug 2024 16:28:38 -0400
Subject: [PATCH 13/13] move specimen description to its own component

---
 .../Panel/PanelSpecimens/PanelSpecimens.vue   | 69 +---------------
 .../Panel/PanelSpecimens/SpecimenSummary.vue  | 81 +++++++++++++++++++
 2 files changed, 84 insertions(+), 66 deletions(-)
 create mode 100644 src/modules/otus/components/Panel/PanelSpecimens/SpecimenSummary.vue

diff --git a/src/modules/otus/components/Panel/PanelSpecimens/PanelSpecimens.vue b/src/modules/otus/components/Panel/PanelSpecimens/PanelSpecimens.vue
index b9f2ad7..ef3be2a 100644
--- a/src/modules/otus/components/Panel/PanelSpecimens/PanelSpecimens.vue
+++ b/src/modules/otus/components/Panel/PanelSpecimens/PanelSpecimens.vue
@@ -17,26 +17,8 @@
     <VCardContent class="text-sm">
       <p v-if="typeof inventoryDWC === 'string'" v-html="inventoryDWC"/>
       <ul v-else class="tree ml-2">
-        <li v-for="inventoryItem in inventoryDWC" :key="inventoryItem.id" class="mt-1">
-          <details>
-            <summary class="cursor-pointer">
-              {{ makeInventoryLabel(inventoryItem) }}
-            </summary>
-            <ul class="m-2 ml-6 list-disc">
-              <li v-for="detail in makeInventoryDetails(inventoryItem)" v-html="detail" :key="detail?.id"/>
-              <li>
-                <details>
-                  <summary class="cursor-pointer">Full Record ({{Object.keys(inventoryItem).length}} items)</summary>
-                  <dl class="m-2 ml-6">
-                    <template v-for="entry in Object.entries(inventoryItem)" :key="entry[0]">
-                      <dt>{{ entry[0] }}</dt>
-                      <dd class="ml-4 mb-2">{{ entry[1] }}</dd>
-                    </template>
-                  </dl>
-                </details>
-              </li>
-            </ul>
-          </details>
+        <li v-for="specimen in inventoryDWC" :key="specimen.id" class="mt-1">
+          <SpecimenSummary :specimen="specimen"/>
         </li>
       </ul>
     </VCardContent>
@@ -48,6 +30,7 @@ import { ref, watch } from 'vue'
 import PanelDropdown from '../PanelDropdown.vue'
 import { useOtuPageRequest } from "@/modules/otus/helpers/useOtuPageRequest.js"
 import TaxonWorks from "@/modules/otus/services/TaxonWorks.js"
+import SpecimenSummary from "@/modules/otus/components/Panel/PanelSpecimens/SpecimenSummary.vue"
 
 const props = defineProps({
   otuId: {
@@ -59,52 +42,6 @@ const props = defineProps({
 const inventoryDWC = ref("Loading...")
 const isLoading = ref(false)
 
-/** Based on taxonpages-orthoptera PanelSpecimentRecords. */
-function makeInventoryLabel(item) {
-  return [
-    item.catalogNumber,
-    makeLocationDescription(item),
-    item.year,
-    // `length ${JSON.stringify(item).length}`,
-  ].filter(Boolean).join("; ")
-}
-
-function makeInventoryDetails(item) {
-  return [
-    makeInventoryCollectionDate(item),
-    item.recordedBy && `Recorded by ${item.recordedBy}`,
-    makeIdentifiedByDesccription(item),
-    item.georeferencedBy && `Georeferenced by ${item.georeferencedBy}${makeGeoreferenceUncertainty(item)}`,
-    // CollectionObject #1234
-    item.dwc_occurrence_object_id && `${item.dwc_occurrence_object_type} #${item.dwc_occurrence_object_id}`,
-  ].filter(Boolean)
-}
-
-function makeLocationDescription(item) {
-  return [
-    item.country && item.country,
-    item.stateProvince && item.stateProvince,
-    item.county && `${item.county} County`,
-  ].filter(Boolean).join(", ")
-}
-
-function makeIdentifiedByDesccription(item) {
-  return [
-    item.identifiedBy && `Identified by ${item.identifiedBy}`,
-    item.dateIdentified,
-  ].filter(Boolean).join(", ")
-}
-
-function makeInventoryCollectionDate(item) {
-  if (!item.year) return null
-  const date = new Date(item.year, item.month, item.day)
-  return `Collected ${date.toLocaleDateString()}`
-}
-
-function makeGeoreferenceUncertainty(item) {
-  return item.coordinateUncertaintyInMeters && ` to within ${item.coordinateUncertaintyInMeters} meters`
-}
-
 watch(
     () => props.otuId,
     async () => {
diff --git a/src/modules/otus/components/Panel/PanelSpecimens/SpecimenSummary.vue b/src/modules/otus/components/Panel/PanelSpecimens/SpecimenSummary.vue
new file mode 100644
index 0000000..5e4250c
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelSpecimens/SpecimenSummary.vue
@@ -0,0 +1,81 @@
+<!--
+A text summary of a Darwin Core representation of a specimen,
+from the TaxonWorks api /otus/<ID>/inventory/dwc.json.
+For further reference see https://dwc.tdwg.org/terms/.
+-->
+<template>
+  <details>
+    <summary class="cursor-pointer">
+      {{ describeSpecimen(specimen) }}
+    </summary>
+    <ul class="m-2 ml-6 list-disc">
+      <li v-for="detail in describeDetails(specimen)" v-html="detail" :key="detail?.id"/>
+      <li>
+        <details>
+          <summary class="cursor-pointer">Full Record ({{Object.keys(specimen).length}} items)</summary>
+          <dl class="m-2 ml-6">
+            <template v-for="entry in Object.entries(specimen)" :key="entry[0]">
+              <dt>{{ entry[0] }}</dt>
+              <dd class="ml-4 mb-2">{{ entry[1] }}</dd>
+            </template>
+          </dl>
+        </details>
+      </li>
+    </ul>
+  </details>
+</template>
+
+<script setup>
+const props = defineProps({
+  specimen: {
+    type: Object,  // Darwin Core schema -- see above for references
+    required: true,
+  }
+})
+
+/** Based on taxonpages-orthoptera PanelSpecimenRecords. */
+function describeSpecimen(specimen) {
+  return [
+    specimen.catalogNumber,
+    describeLocation(specimen),
+    specimen.year,
+    // `length ${JSON.stringify(item).length}`,
+  ].filter(Boolean).join("; ")
+}
+
+function describeDetails(specimen) {
+  return [
+    describeCollectionDate(specimen),
+    specimen.recordedBy && `Recorded by ${specimen.recordedBy}`,
+    describeIdentifiedBy(specimen),
+    specimen.georeferencedBy && `Georeferenced by ${specimen.georeferencedBy}${describeGeoreferenceUncertainty(specimen)}`,
+    // CollectionObject #1234
+    specimen.dwc_occurrence_object_id && `${specimen.dwc_occurrence_object_type} #${specimen.dwc_occurrence_object_id}`,
+  ].filter(Boolean)
+}
+
+function describeLocation(specimen) {
+  return [
+    specimen.country && specimen.country,
+    specimen.stateProvince && specimen.stateProvince,
+    specimen.county && `${specimen.county} County`,
+  ].filter(Boolean).join(", ")
+}
+
+function describeIdentifiedBy(specimen) {
+  return [
+    specimen.identifiedBy && `Identified by ${specimen.identifiedBy}`,
+    specimen.dateIdentified,
+  ].filter(Boolean).join(", ")
+}
+
+function describeCollectionDate(specimen) {
+  if (!specimen.year) return null
+  const date = new Date(specimen.year, specimen.month, specimen.day)
+  return `Collected ${date.toLocaleDateString()}`
+}
+
+function describeGeoreferenceUncertainty(specimen) {
+  return specimen.coordinateUncertaintyInMeters && ` to within ${specimen.coordinateUncertaintyInMeters} meters`
+}
+</script>
\ No newline at end of file