Refactor Digital Specimen overview: Data cards

.github/workflows/.trivyignore

@@ -24,4 +24,7 @@ CVE-2026-33416
 CVE-2026-33636
 
 # lodash-es is pinned as a dependency on a vulnerable version in formik and cannot be upgraded by us Apr-3-2026
-CVE-2026-4800
+CVE-2026-4800
+
+# Vulnerability in image dependency nghttp2-libs that is included in the image and we cannot fix May-6-2026
+CVE-2026-27135

package.json

@@ -29,13 +29,14 @@
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-query": "^5.90.20",
     "@tanstack/react-table": "^8.20.5",
-    "axios": "^1.15.0",
+    "axios": "^1.16.0",
     "bootstrap": "^5.3.3",
     "bootstrap-css": "^4.0.0-alpha.5",
     "classnames": "^2.5.1",
     "cytoscape": "3.30.4",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
+    "dompurify": "^3.4.2",
     "formik": "^2.4.9",
     "i18next": "^24.0.5",
     "intro.js": "^7.2.0",

src/components/Cards/DigitalSpecimenCard/DigitalSpecimenCard.scss

@@ -0,0 +1,33 @@
+.digital-specimen-card {
+    .ds-card-header {
+        margin-bottom: var(--spacing-m);
+    }
+    .ds-card-georeference {
+        width: 100%;
+        height: var(--general-card-width);
+        margin-block-end: var(--spacing-sm);
+    }
+    .ds-card-citation {
+        max-height: var(--citation-content-spacing);
+        width: 100%;
+        background-color: var(--indigo-2);
+        padding: var(--spacing-m);
+        margin-block-end: var(--spacing-sm);
+
+        p {
+            font-size: var(--sm-font-size);
+
+            a {
+                color: inherit;
+                text-decoration: underline;
+            }
+
+        }
+    }
+    .ds-card-body {
+        display: grid;
+        grid-template-columns: var(--general-card-height) 1fr;
+        gap: var(--spacing-sm) var(--spacing-m);
+        align-items: start;
+    }
+}

src/components/Cards/DigitalSpecimenCard/DigitalSpecimenCard.tsx

@@ -0,0 +1,81 @@
+/* Import components */
+import { CopyIcon, Pencil2Icon } from "@radix-ui/react-icons";
+import { Button, Card } from "@radix-ui/themes";
+import { LabelValuePair } from "components/LabelValuePair/LabelValuePair";
+import { OpenStreetMap } from "components/elements/customUI/CustomUI";
+
+/* Import styles */
+import './DigitalSpecimenCard.scss';
+
+type Props = {
+    cardHeader: string,
+    annotate?: boolean,
+    copy?: boolean,
+    fragment: any,
+    georeference?: boolean
+    citation?: boolean
+}
+
+export const DigitalSpecimenCard = ({ cardHeader, annotate, copy, fragment, georeference = false, citation = false }: Props) => {
+    const craftCitation = (fragment: any) => {
+        return (
+        <>
+            <a href={fragment['organisationId'].value}
+                target="_blank"
+                rel="noreferer"
+            >
+                {fragment['organisationName'].value ?? fragment['organisationId'].value}
+            </a>
+            {` (${new Date().getFullYear()}). `}
+            <a href="https://ror.org/02wddde16"
+                target="_blank"
+                rel="noreferer"
+            >
+                Distributed System of Scientific Collections
+            </a>
+            {`. [Dataset]. `}
+            <a href={fragment['digitalSpecimenId'].value}
+                target="_blank"
+                rel="noreferer"
+            >
+                {fragment['digitalSpecimenId'].value}
+            </a>
+        </>
+        )
+
+    }
+    return (
+        <Card className="digital-specimen-card">
+            <div className="ds-card-header">
+                <h2>{cardHeader}</h2>
+                { annotate &&
+                    <Button variant="ghost">
+                        Annotate
+                        <Pencil2Icon />
+                    </Button>
+                }
+                { copy && 
+                    <Button variant="ghost">
+                        Copy
+                        <CopyIcon />
+                    </Button>
+                }
+            </div>
+            { georeference &&
+                <div className="ds-card-georeference">
+                    <OpenStreetMap latitude={fragment?.['decimalLatitude'].value} longitude={fragment?.['decimalLongitude'].value} />
+                </div>
+            }
+            { citation &&
+                <div className="ds-card-citation">
+                    <p>{craftCitation(fragment)}</p>
+                </div>
+            }
+            <div className="ds-card-body">
+            {Object.entries(fragment).map(([key, item]: [string, any]) => (
+                <LabelValuePair key={key} item={item as { label: string; value: string; isHtml: boolean; type: string; hidden: boolean; }} />
+            ))}
+            </div>
+        </Card>
+    )
+}

src/components/Hero/Hero.scss

@@ -5,6 +5,12 @@ header {
         display: flex;
         justify-content: space-between;
         margin-block-end: var(--spacing-l);
+
+        #hero-top-buttons-right, #hero-top-buttons-left {
+            button {
+                margin-inline-end: var(--spacing-sm);
+            }
+        }
     }
     #hero-title {
         display: flex;
@@ -15,6 +21,11 @@ header {
             margin-block-start: var(--spacing-sm);
         }
     }
+    #hero-badges {
+        span {
+            margin-inline-end: var(--spacing-sm);
+        }
+    }
     #hero-content {
         display: flex;
         flex-direction: column;

src/components/Hero/Hero.tsx

@@ -3,7 +3,7 @@ import { useLayoutEffect, useRef, useState } from "react";
 import { format } from "date-fns";
 
 /* Import components */
-import { ArrowLeftIcon, ClipboardCopyIcon, CopyIcon, PlusIcon } from "@radix-ui/react-icons";
+import { ArrowLeftIcon, ClipboardCopyIcon, CopyIcon, Pencil2Icon, PlusIcon } from "@radix-ui/react-icons";
 import { Badge, Button, Dialog, Flex } from "@radix-ui/themes";
 import { useLocation, useNavigate } from "react-router-dom";
 
@@ -12,19 +12,22 @@ import './Hero.scss';
 
 /* Import utilities */
 import { RetrieveEnvVariable } from "app/Utilities";
+import { sanitizeHtmlWrapper } from "utils/Utils";
 
 /* Import hooks */
 import { useHasRole } from "hooks/roleChecker";
 import { useClipboard } from "hooks/useClipboard";
 
 type Props = {
     title: string;
-    description: string;
-    badge?: string[];
+    description?: string;
+    badge?: { content: string, type: "soft" | "solid" | "outline" | "surface", color: "sky" | "grass" }[];
     navigateTo?: { pathName: string; text: string };
     showShareButton?: boolean;
     details?: any;
     showCreateButton?: boolean;
+    isHtml?: boolean;
+    annotate?: boolean;
 }
 
 /**
@@ -38,7 +41,7 @@ type Props = {
  * @param create Boolean that indicates if the functionality for creating a VC should be working
  * @returns A JSX element that shows a Hero banner with information and possibly navigation
  */
-export const Hero = ( { title, description, badge, navigateTo, showShareButton, details, showCreateButton }: Props) => {
+export const Hero = ( { title, description, badge, navigateTo, showShareButton, details, showCreateButton, isHtml = false, annotate }: Props) => {
     /* Hooks */
     const navigate = useNavigate();
     const isAllowedToCreateVC = useHasRole('dissco-virtual-collection');
@@ -73,15 +76,21 @@ export const Hero = ( { title, description, badge, navigateTo, showShareButton,
     return (
         <header>
             <div id="hero-top-buttons">
-                <div>
+                <div id="hero-top-buttons-left">
                 {navigateTo &&
                     <Button variant="soft" className="navigation-link" onClick={() => navigate(navigateTo.pathName)}>
                         <ArrowLeftIcon />
                         {navigateTo.text}
                     </Button>
                 }
                 </div>
-                <div>
+                <div id="hero-top-buttons-right">
+                {annotate &&
+                    <Button variant="solid">
+                        Annotate
+                        <Pencil2Icon />
+                    </Button>
+                }
                 {showShareButton &&
                     <Button variant="solid" onClick={() => copy(currentUrl)}>
                         {hasCopied ? 'Copied!' : 'Share'}
@@ -90,14 +99,21 @@ export const Hero = ( { title, description, badge, navigateTo, showShareButton,
                 }
                 </div>
             </div>
-
-            {badge?.map((badge: string) => {
-                return (
-                    <Badge color="sky" variant="solid" key={badge}>{badge}</Badge>
-                )
-            })}
+
+            <div id="hero-badges">
+                {badge?.map(({ content, type, color }) => {
+                    if (!content) return null;
+                    return (
+                        <Badge color={color} variant={type} key={content}>{content}</Badge>
+                    )
+                })}
+            </div>
             <div id="hero-title">
-                <h1>{title}</h1>
+                {isHtml ? (
+                    <h1 dangerouslySetInnerHTML={{ __html: sanitizeHtmlWrapper(title) }} />
+                ) : (
+                    <h1>{ title }</h1>
+                )}
                 {showCreateButton &&
                     <Button variant="solid" disabled={!isAllowedToCreateVC}>
                         Create
@@ -106,6 +122,7 @@ export const Hero = ( { title, description, badge, navigateTo, showShareButton,
                 }
             </div>
             <div id="hero-content">
+                {description &&
                 <div className="description-container">
                     <p ref={descriptionRef} className="clamped-description">
                         {description}
@@ -136,6 +153,7 @@ export const Hero = ( { title, description, badge, navigateTo, showShareButton,
                         </Dialog.Root>
                     )}
                 </div>
+                }
 
                 {details &&
                 <>

src/components/LabelValuePair/LabelValuePair.scss

@@ -0,0 +1,39 @@
+.property-row-fragment {
+    display: contents;
+
+    .property-label {
+        font-size: var(--sm-font-size);
+        font-weight: var(--medium-font-weight);
+    }
+
+    .verbatim {
+        font-size: var(--xs-font-size);
+        color: var(--gray-a9);
+    }
+    .property-value {
+        font-size: var(--sm-font-size);
+        font-weight: var(--regular-font-weight);
+
+        a {
+            svg {
+                margin-inline-start: var(--spacing-xs);
+            }
+        }
+
+        .verbatim {
+            font-size: var(--xs-font-size);
+            color: var(--gray-a9);
+
+            span {
+                margin-inline-start: var(--spacing-sm);
+            }
+        }
+        .btn-as-link {
+            padding: 0;
+
+            svg {
+                margin-inline-start: var(--spacing-xs);
+            }
+        }
+    }
+}