Label with family / order if lower ranks are not specified

src/modules/otus/components/Panel/PanelSpecimens/SpecimenSummary.vue

@@ -4,7 +4,6 @@ of a specimen, from the TaxonWorks api /otus/<ID>/inventory/dwc.json.
 For further reference see https://dwc.tdwg.org/terms/.
 -->
 <template>
-  <!--    <ul class="tree m-2 ml-6 list-disc">-->
   <div v-html="nameAndAuthor(specimen)"/>
   <ul class="tree ml-6 relative">
     <li class="my-2">{{ describeSpecimen(specimen) }}</li>
@@ -36,11 +35,16 @@ const props = defineProps({
 })
 
 function genusSpecies(specimen) {
-  return [specimen.genus,  specimen.specificEpithet].filter(Boolean).join(' ')
+  return [specimen.genus, specimen.specificEpithet].filter(Boolean).join(' ')
 }
 
 function nameAndAuthor(specimen) {
-  return [`<em>${genusSpecies(specimen)}</em>`, specimen.scientificNameAuthorship].filter(Boolean).join(' ')
+  // scientificName contains most specific available rank
+  // italicize the genus + species
+  return specimen.scientificName
+      .replace(genusSpecies(specimen), `<em>${genusSpecies(specimen)}</em>`)
+      .replace(specimen.family, `Family ${specimen.family}`)
+      .replace(specimen.order, `Order ${specimen.order}`)
 }
 
 /** Inspired by taxonpages-orthoptera PanelSpecimenRecords. */