Refactor of Digital Specimen overview components

.github/workflows/.trivyignore

@@ -21,4 +21,7 @@ CVE-2026-33671
 
 # Vulnerability in image dependency libpng that is included in the image and we cannot fix Apr-1-2026
 CVE-2026-33416
-CVE-2026-33636
+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

package.json

@@ -29,22 +29,22 @@
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-query": "^5.90.20",
     "@tanstack/react-table": "^8.20.5",
-    "axios": "^1.13.5",
+    "axios": "^1.15.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",
-    "formik": "^2.4.6",
+    "formik": "^2.4.9",
     "i18next": "^24.0.5",
     "intro.js": "^7.2.0",
     "intro.js-react": "^1.0.0",
     "json-schema-to-typescript": "^15.0.3",
     "jsonpath": "^1.1.1",
     "keycloak-js": "^26.0.7",
     "leaflet": "^1.9.4",
-    "lodash": "^4.17.21",
+    "lodash": "^4.18.1",
     "moment": "^2.30.1",
     "msw": "^2.6.7",
     "openseadragon": "^5.0.0",

src/components/Cards/DigitalSpecimenCard/DigitalSpecimenCard.scss

@@ -0,0 +1,33 @@
+.digital-specimen-card {
+    .ds-card-header {
+        margin-bottom: 16px;
+    }
+    .ds-card-georeference {
+        width: 100%;
+        height: 320px;
+        margin-block-end: 8px;
+    }
+    .ds-card-citation {
+        max-height: 92px;
+        width: 100%;
+        background-color: #F2F3F8;
+        padding: 16px;
+        margin-block-end: 8px;
+
+        p {
+            font-size: 14px;
+
+            a {
+                color: black;
+                text-decoration: underline;
+            }
+
+        }
+    }
+    .ds-card-body {
+        display: grid;
+        grid-template-columns: 200px 1fr;
+        gap: 8px 16px;
+        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);
+
+        div {
+            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";
 
@@ -19,12 +19,14 @@ 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 +40,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');
@@ -82,6 +84,12 @@ export const Hero = ( { title, description, badge, navigateTo, showShareButton,
                 }
                 </div>
                 <div>
+                {annotate &&
+                    <Button variant="solid">
+                        Annotate
+                        <Pencil2Icon />
+                    </Button>
+                }
                 {showShareButton &&
                     <Button variant="solid" onClick={() => copy(currentUrl)}>
                         {hasCopied ? 'Copied!' : 'Share'}
@@ -90,14 +98,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: title }} />
+                ) : (
+                    <h1>{ title }</h1>
+                )}
                 {showCreateButton &&
                     <Button variant="solid" disabled={!isAllowedToCreateVC}>
                         Create
@@ -106,6 +121,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 +152,7 @@ export const Hero = ( { title, description, badge, navigateTo, showShareButton,
                         </Dialog.Root>
                     )}
                 </div>
+                }
 
                 {details &&
                 <>