From be7091c22547e6f1a69e8895e5b732f523ccff13 Mon Sep 17 00:00:00 2001
From: Victor Rocheleau <victor.rocheleau@mcgill.ca>
Date: Mon, 16 Oct 2023 17:26:13 +0000
Subject: [PATCH] TimeElement with spans

---
 .../explorer/IndividualBiosamples.js          |  4 +--
 src/components/explorer/TimeElement.js        | 34 +++++++++----------
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/components/explorer/IndividualBiosamples.js b/src/components/explorer/IndividualBiosamples.js
index 5f11baff0..172755027 100644
--- a/src/components/explorer/IndividualBiosamples.js
+++ b/src/components/explorer/IndividualBiosamples.js
@@ -33,8 +33,8 @@ const BiosampleProcedure = ({ resourcesTuple, procedure }) => (
         ) : null}
         {procedure.performed ? (
             <div>
-                <strong>Time Performed:</strong>{" "}
-                <TimeElement timeElement={procedure.performed}/>
+                <strong>Performed:</strong>{" "}
+                <TimeElement timeElement={procedure.performed} />
             </div>
         ): null}
     </div>
diff --git a/src/components/explorer/TimeElement.js b/src/components/explorer/TimeElement.js
index b8a0463c4..62c4e29d9 100644
--- a/src/components/explorer/TimeElement.js
+++ b/src/components/explorer/TimeElement.js
@@ -29,31 +29,29 @@ const getTimeElementTypeLabel = (timeElement) => {
 const renderTimeElement = (type, timeElement) => {
     switch (type) {
         case "age":
-            return <>{timeElement.age.iso8601duration}</>;
+            return <span>{timeElement.age.iso8601duration}</span>;
         case "gestational_age":
-            return <>
-                <strong>Weeks:</strong>{" "}{timeElement.gestationalAge.weeks}
+            return <span>
+                <strong>Weeks:</strong>{" "}{timeElement.gestationalAge.weeks}{" "}
                 <strong>Days:</strong>{" "}{timeElement.gestationalAge.days}
-            </>;
+            </span>;
         case "age_range":
-            return <>
-                <strong>Start:</strong>{" "}<>{timeElement.age_range.start.iso8601duration}</>
+            return <span>
+                <strong>Start:</strong>{" "}<>{timeElement.age_range.start.iso8601duration}</>{" "}
                 <strong>End:</strong>{" "}<>{timeElement.age_range.end.iso8601duration}</>
-            </>;
+            </span>;
         case "ontology_class":
-            return <>
-                <strong>ID:</strong>{" "}{timeElement.ontology_class.id}
+            return <span>
+                <strong>ID:</strong>{" "}{timeElement.ontology_class.id}{" "}
                 <strong>Label:</strong>{" "}{timeElement.ontology_class.label}
-            </>;
+            </span>;
         case "timestamp":
-            return <>
-                <strong>Timestamp:</strong>{" "}{timeElement.timestamp}
-            </>;
+            return <span>{timeElement.timestamp}</span>;
         case "interval":
-            return <>
-                <strong>Start:</strong>{" "}<>{timeElement.interval.start}</>
+            return <span>
+                <strong>Start:</strong>{" "}<>{timeElement.interval.start}</>{" "}
                 <strong>End:</strong>{" "}<>{timeElement.interval.end}</>
-            </>;
+            </span>;
         default:
             return EM_DASH;
     }
@@ -68,10 +66,10 @@ const TimeElement = ({timeElement}) => {
     }
 
     return (
-        <div>
+        <span>
             <strong>{label}: </strong>
             {renderTimeElement(timeType, timeElement)}
-        </div>
+        </span>
     );
 }