Merge pull request #116 from DiSSCo/UseHTMLLabelInIDCard

Implement nomenclatural HTML label in Digital Specimen ID Carf
DiSSCo · Oct 30, 2024 · 9cc446d · 9cc446d
2 parents 2be5075 + 49aaa05
commit 9cc446d
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 13 deletions.
diff --git a/src/app/Hooks.ts b/src/app/Hooks.ts
@@ -420,7 +420,7 @@ const useSearchFilters = () => {
      * Function to set the search filters based upon a search filters object
      * @param searchFilters An object containing search filter names as keys and values
      */
-    const SetSearchFilters = (searchFilters: { [name: string]: string | string[] | boolean }) => {
+    const SetSearchFilters = (searchFilters: { [name: string]: string | string[] | boolean }) => {        
         Object.entries(searchFilters).forEach(([name, searchFilter]) => {
             /* Remove all params from this name */
             searchParams.delete(name);

diff --git a/src/app/config/idCard/DigitalSpecimenIdCardConfig.ts b/src/app/config/idCard/DigitalSpecimenIdCardConfig.ts
@@ -11,10 +11,6 @@ const DigitalSpecimenIdCardConfig = ({ digitalSpecimen }: { digitalSpecimen: Dig
     link?: string
 }[] => {
     return [
-        {
-            label: 'Specimen name',
-            jsonPath: "$['ods:specimenName']"
-        },
         {
             label: `Physical specimen ID (${digitalSpecimen["ods:physicalSpecimenIDType"]})`,
             jsonPath: "$['ods:normalisedPhysicalSpecimenID']",

diff --git a/src/components/digitalSpecimen/DigitalSpecimen.tsx b/src/components/digitalSpecimen/DigitalSpecimen.tsx
@@ -161,6 +161,7 @@ const DigitalSpecimen = () => {
                             <Footer />
                         </div>
                     </Col>
+                {digitalSpecimen &&
                     <div className={`${annotationSidePanelClass} h-100 tr-smooth`}>
                         <AnnotationSidePanel superClass={digitalSpecimen}
                             schema={DigitalSpecimenSchema}
@@ -171,6 +172,7 @@ const DigitalSpecimen = () => {
                             HideAnnotationSidePanel={() => setAnnotationMode(false)}
                         />
                     </div>
+                }
                 </Row>
             </Container>
         </div>

diff --git a/src/components/digitalSpecimen/components/idCard/IdCard.tsx b/src/components/digitalSpecimen/components/idCard/IdCard.tsx
@@ -12,6 +12,7 @@ import { useTrigger } from 'app/Hooks';
 /* Import Types */
 import { DigitalMedia } from 'app/types/DigitalMedia';
 import { DigitalSpecimen } from 'app/types/DigitalSpecimen';
+import { Identification } from 'app/types/Identification';
 
 
 /* Props Type */
@@ -61,6 +62,20 @@ const IdCard = (props: Props) => {
         };
     }, []);
 
+    /**
+     * Function to get the HTML label of the first accepted identification within the specimen, if not present, provide generic specimen name
+     * @returns HTML label or specimen name string
+     */
+    const GetSpecimenNameHTMLLabel = () => {
+        const acceptedIdentification: Identification | undefined = digitalSpecimen['ods:hasIdentification']?.find(identification => identification['ods:isVerifiedIdentification']);
+
+        if (acceptedIdentification) {
+            return acceptedIdentification['ods:hasTaxonIdentification']?.[0]['ods:scientificNameHtmlLabel'] ?? digitalSpecimen['ods:specimenName'] ?? '';
+        } else {
+            return digitalSpecimen['ods:specimenName'] ?? '';
+        }
+    };
+
     return (
         <div className="h-100 d-flex flex-column">
             {/* First digital media image of digital specimen, if present */}
@@ -78,6 +93,16 @@ const IdCard = (props: Props) => {
                 <Col>
                     <Card className="h-100 bgc-white px-3 py-3">
                         <div className="h-100 d-flex flex-column justify-content-between">
+                            {/* Nomenclatural name (HTML label) */}
+                            <Row>
+                                <Col className="fs-4">
+                                    <p className="fw-lightBold">Specimen Name</p>
+                                    <p className="textOverflow"
+                                        dangerouslySetInnerHTML={{ __html: GetSpecimenNameHTMLLabel() }}
+                                    />
+                                </Col>
+                            </Row>
+                            {/* ID card properties */}
                             {DigitalSpecimenIdCardConfig({ digitalSpecimen }).map(idCardField => {
                                 return (
                                     <Row key={idCardField.label}>

diff --git a/src/components/elements/annotationSidePanel/AnnotationSidePanel.tsx b/src/components/elements/annotationSidePanel/AnnotationSidePanel.tsx
@@ -23,7 +23,7 @@ import { LoadingScreen } from '../customUI/CustomUI';
 
 /* Props Type */
 type Props = {
-    superClass: SuperClass | undefined,
+    superClass: SuperClass,
     schema: Dict,
     GetAnnotations: Function,
     GetMASs: Function,

diff --git a/src/components/elements/annotationSidePanel/components/AnnotationsOverview.tsx b/src/components/elements/annotationSidePanel/components/AnnotationsOverview.tsx
@@ -32,7 +32,7 @@ type Props = {
     schemaTitle: string,
     SetFilterSortValues: Function,
     StartAnnotationWizard: Function,
-    RefreshAnnotations: Function
+    RefreshAnnotations: Function,
     OpenMASMenu: Function
 };
 

diff --git a/src/components/search/components/searchFiltersMenu/SearchFiltersMenu.tsx b/src/components/search/components/searchFiltersMenu/SearchFiltersMenu.tsx
@@ -92,7 +92,7 @@ const SearchFiltersMenu = () => {
         /* Add to inital form search query if allowed for this filter */
         if (searchFilter.searchable) {
             initialFormValues.search[key] = '';
-        };
+        }
     });
 
     return (

diff --git a/src/components/search/components/searchFiltersMenu/components/BlockFilter.tsx b/src/components/search/components/searchFiltersMenu/components/BlockFilter.tsx
@@ -36,15 +36,15 @@ const BlockFilter = (props: Props) => {
         Object.keys(aggregations).forEach(key => {
             blockFilterItems.push(key);
         })
-    };
+    }
 
     /* Construct from selected values by replacing the aggregation ones */
     fieldValues.forEach(fieldValue => {
         const index: number = blockFilterItems.findIndex(blockFilterItem => blockFilterItem === fieldValue);
 
         if (index >= 0) {
             blockFilterItems.splice(index, 1, fieldValue);
-        };
+        }
     });
 
     /**
@@ -61,7 +61,7 @@ const BlockFilter = (props: Props) => {
             Remove(index);
         } else {
             Push(blockFilterItem);
-        };
+        }
 
         SubmitForm();
     };

diff --git a/src/components/search/components/searchFiltersMenu/components/BooleanFilter.tsx b/src/components/search/components/searchFiltersMenu/components/BooleanFilter.tsx
@@ -44,7 +44,7 @@ const BooleanFilter = (props: Props) => {
                         className={`${BooleanFilterClass('true')} w-100 py-1 b-primary br-corner`}
                         OnClick={() => {
                             /* Set the field value to true */
-                            SetFieldValue?.(namePrefix ? `${namePrefix}.` : '' + `${name}[0]`, fieldValues[0] !== 'true' ? 'true' : undefined);
+                            SetFieldValue?.((namePrefix ? `${namePrefix}.` : '') + `${name}[0]`, fieldValues[0] !== 'true' ? 'true' : undefined);
 
                             /* Submit form */
                             SubmitForm();
@@ -59,7 +59,7 @@ const BooleanFilter = (props: Props) => {
                         className={`${BooleanFilterClass('false')} w-100 b-primary py-1 br-corner`}
                         OnClick={() => {
                             /* Set the field value to false */
-                            SetFieldValue?.(namePrefix ? `${namePrefix}.` : '' + `${name}[0]`, fieldValues[0] !== 'false' ? 'false' : undefined);
+                            SetFieldValue?.((namePrefix ? `${namePrefix}.` : '') + `${name}[0]`, fieldValues[0] !== 'false' ? 'false' : undefined);
 
                             /* Submit form */
                             SubmitForm();