Prepare species details view for print mode

ami/main/api/serializers.py

@@ -736,6 +736,7 @@ class Meta:
             "events_count",
             "occurrences",
             "gbif_taxon_key",
+            "last_detected",
             "fieldguide_id",
             "cover_image_url",
             "cover_image_credit",

ui/src/app.module.scss

@@ -28,14 +28,20 @@
   position: relative;
 }
 
-@media only screen and (max-width: $medium-screen-breakpoint) {
+@media (max-width: $medium-screen-breakpoint) {
   .main {
     padding: 24px 24px 96px;
   }
 }
 
-@media only screen and (max-width: $small-screen-breakpoint) {
+@media (max-width: $small-screen-breakpoint) {
   .main {
     padding: 16px 16px 80px;
   }
 }
+
+@media print {
+  .wrapper {
+    height: auto;
+  }
+}

ui/src/app.tsx

@@ -74,7 +74,7 @@ export const App = () => (
       />
     </Helmet>
     <div id={APP_CONTAINER_ID} className={styles.wrapper}>
-      <div id={INTRO_CONTAINER_ID}>
+      <div id={INTRO_CONTAINER_ID} className="no-print">
         <Header />
       </div>
       <Routes>

ui/src/components/blueprint-collection/blueprint-collection.module.scss

@@ -82,16 +82,23 @@
   }
 }
 
-@media only screen and (max-width: $small-screen-breakpoint) {
+@media (max-width: $small-screen-breakpoint) {
   .licenseInfoContent {
     text-align: left;
   }
 
   .blueprintContent {
-    flex-direction: row;
-
     &.empty {
       display: none;
     }
   }
 }
+
+@media print {
+  .blueprintContent {
+    display: grid;
+    align-items: start;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+  }
+}

ui/src/components/blueprint-collection/blueprint-collection.tsx

@@ -3,7 +3,7 @@ import { LicenseInfo } from 'components/license-info/license-info'
 import { Icon, IconType } from 'design-system/components/icon/icon'
 import { EyeIcon } from 'lucide-react'
 import { buttonVariants, Tooltip } from 'nova-ui-kit'
-import { useState } from 'react'
+import { ReactNode, useState } from 'react'
 import { Link } from 'react-router-dom'
 import styles from './blueprint-collection.module.scss'
 
@@ -16,26 +16,35 @@ export interface BlueprintItem {
   to?: string
 }
 
-export const BlueprintCollection = ({ items }: { items: BlueprintItem[] }) => (
-  <div
-    className={classNames(styles.blueprint, {
-      [styles.empty]: items.length === 0,
-    })}
-  >
-    {items.length > 0 && (
+export const BlueprintCollection = ({
+  children,
+  showLicenseInfo,
+}: {
+  children: ReactNode
+  showLicenseInfo?: boolean
+}) => (
+  <div className={classNames(styles.blueprint)}>
+    {showLicenseInfo ? (
       <div className={styles.licenseInfoContent}>
         <LicenseInfo />
       </div>
-    )}
-    <div className={styles.blueprintContent}>
-      {items.map((item) => (
-        <BlueprintItem key={item.id} item={item} />
-      ))}
-    </div>
+    ) : null}
+    <div className={styles.blueprintContent}>{children}</div>
   </div>
 )
 
-const BlueprintItem = ({ item }: { item: BlueprintItem }) => {
+export const BlueprintItem = ({
+  item,
+}: {
+  item: {
+    id: string
+    image: { src: string; width: number; height: number }
+    label: string
+    timeLabel: string
+    countLabel: string
+    to?: string
+  }
+}) => {
   const [size, setSize] = useState({
     width: item.image.width,
     height: item.image.height,

ui/src/components/filtering/filter-section.tsx

@@ -14,7 +14,7 @@ export const FilterSection = ({
   defaultOpen,
   title = 'Filters',
 }: FilterSectionProps) => (
-  <Box className="w-full h-min shrink-0 p-2 rounded-lg md:w-72 md:p-4 md:rounded-xl">
+  <Box className="w-full h-min shrink-0 p-2 rounded-lg md:w-72 md:p-4 md:rounded-xl no-print">
     <Collapsible.Root
       className="space-y-4"
       defaultOpen={window.innerWidth >= BREAKPOINTS.MD ? defaultOpen : false}

ui/src/components/gallery/gallery.module.scss

@@ -8,7 +8,6 @@
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   gap: 16px;
   width: 100%;
-  min-height: 320px;
   padding-top: 24px;
 
   &.loading {
@@ -28,7 +27,7 @@
   justify-content: center;
 }
 
-@media only screen and (max-width: $large-screen-breakpoint) {
+@media (max-width: $large-screen-breakpoint) {
   .gallery {
     grid-template-columns: 1fr 1fr 1fr !important;
   }

ui/src/data-services/models/species-details.ts

@@ -1,45 +1,29 @@
 import _ from 'lodash'
-import { getCompactTimespanString } from 'utils/date/getCompactTimespanString/getCompactTimespanString'
 import { ServerSpecies, Species } from './species'
 
 export type ServerSpeciesDetails = ServerSpecies & any // TODO: Update this type
 
 export class SpeciesDetails extends Species {
-  private readonly _occurrences: string[] = []
-
   public constructor(species: ServerSpeciesDetails) {
     super(species)
-    this._occurrences = this._species.occurrences.map((d: any) => `${d.id}`)
-  }
-
-  get occurrences(): string[] {
-    return this._occurrences
   }
 
-  getOccurrenceInfo(id: string) {
-    const occurrence = this._species.occurrences.find(
-      (d: any) => `${d.id}` === id
-    )
+  get exampleOccurrence() {
+    const occurrence = this._species.occurrences?.[0]
 
-    if (!occurrence || !occurrence.best_detection) {
+    if (!occurrence?.best_detection) {
       return
     }
 
     return {
-      id,
-      image: {
-        src: occurrence.best_detection.url,
-        width: occurrence.best_detection.width,
-        height: occurrence.best_detection.height,
-      },
-      label: `${occurrence.event.name}\n ${
-        occurrence.determination.name
-      } (${_.round(occurrence.determination_score, 4)})`,
-      timeLabel: getCompactTimespanString({
-        date1: new Date(occurrence.first_appearance_timestamp),
-        date2: new Date(occurrence.last_appearance_timestamp),
-      }),
-      countLabel: `${occurrence.detections_count}`,
+      id: occurrence.id,
+      image_url: occurrence.best_detection.url,
+      caption: this.isUnknown
+        ? 'Center of cluster'
+        : `${occurrence.determination.name} (${_.round(
+            occurrence.determination_score,
+            4
+          )})`,
     }
   }
 }

ui/src/data-services/models/species.ts

@@ -17,41 +17,60 @@ export class Species extends Taxon {
     }
   }
 
-  get images(): { src: string }[] {
-    return this._images
-  }
+  get coverImage() {
+    if (!this._species.cover_image_url) {
+      return undefined
+    }
 
-  get numDetections(): number {
-    return this._species.detections_count || null
-  }
+    if (!this._species.cover_image_credit) {
+      return {
+        url: this._species.cover_image_url,
+        caption: this.isUnknown
+          ? `${this.name} (most similar known taxon)`
+          : this.name,
+      }
+    }
 
-  get numOccurrences(): number {
-    return this._species.occurrences_count || null
+    return {
+      url: this._species.cover_image_url,
+      caption: this.isUnknown
+        ? `${this.name} (most similar known taxon), ${this._species.cover_image_credit}`
+        : `${this.name}, ${this._species.cover_image_credit}`,
+    }
   }
 
-  get trainingImagesLabel(): string {
-    return 'GBIF'
+  get isUnknown(): boolean {
+    return this._species.unknown_species
   }
 
-  get trainingImagesUrl(): string {
-    return `https://www.gbif.org/occurrence/gallery?advanced=1&verbatim_scientific_name=${this.name}`
+  get lastSeenLabel() {
+    if (!this._species.last_detected) {
+      return undefined
+    }
+
+    const date = new Date(this._species.last_detected)
+
+    return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
   }
 
-  get fieldguideId(): string | null {
-    return this._species.fieldguide_id || null
+  get numDetections(): number {
+    return this._species.detections_count ?? 0
   }
 
-  get fieldguideUrl(): string | undefined {
-    if (!this.fieldguideId) return undefined
-    return `https://leps.fieldguide.ai/categories?category=${this.fieldguideId}`
+  get numOccurrences(): number {
+    return this._species.occurrences_count ?? 0
   }
 
-  get coverImageUrl(): string | null {
-    return this._species.cover_image_url || null
+  get gbifUrl(): string {
+    return `https://www.gbif.org/occurrence/gallery?advanced=1&verbatim_scientific_name=${this.name}`
   }
 
-  get coverImageCredit(): string | null {
-    return this._species.cover_image_credit || null
+  get fieldguideUrl(): string | undefined {
+    if (!this._species.fieldguide_id) {
+      return undefined
+    }
+
+    return `https://leps.fieldguide.ai/categories?category=${this._species.fieldguide_id}`
   }
 
   get score(): number {

ui/src/design-system/components/card/card.module.scss

@@ -14,6 +14,7 @@
   position: relative;
   background-color: $color-generic-white;
   border-bottom: 1px solid $color-neutral-100;
+  overflow: hidden;
 }
 
 .square::after {
@@ -23,13 +24,12 @@
 }
 
 .image {
-  max-width: 100%;
-  max-height: 100%;
+  // max-width: 100%;
+  // max-height: 100%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  padding: 16px;
   box-sizing: border-box;
 }
 

ui/src/design-system/components/dialog/dialog.module.scss

@@ -108,14 +108,14 @@ $dialog-padding-medium: 32px;
   padding: 32px;
 }
 
-@media only screen and (max-width: $medium-screen-breakpoint) {
+@media (max-width: $medium-screen-breakpoint) {
   .dialog {
     max-width: calc(100% - (2 * $dialog-padding-medium));
     max-height: calc(100vh - (2 * $dialog-padding-medium));
   }
 }
 
-@media only screen and (max-width: $small-screen-breakpoint) {
+@media (max-width: $small-screen-breakpoint) {
   .dialog:not(.compact) {
     width: 100%;
     height: 100vh;
@@ -136,3 +136,13 @@ $dialog-padding-medium: 32px;
     padding: 0 16px;
   }
 }
+
+@media print {
+  .dialogContent {
+    box-shadow: none;
+  }
+
+  .dialogClose {
+    display: none;
+  }
+}

ui/src/design-system/components/image-carousel/image-carousel.module.scss

@@ -18,17 +18,13 @@
   border-radius: 8px;
   background-color: $color-neutral-50;
   border: 1px solid $color-neutral-100;
+  overflow: hidden;
 
   &.light {
     background-color: $color-generic-white;
   }
 }
 
-.image {
-  max-width: 100%;
-  max-height: 100%;
-}
-
 /* Slideshow styles */
 
 .row {
@@ -52,7 +48,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 10px;
   box-sizing: border-box;
   overflow: hidden;