Merge pull request #334 from bento-platform/fix/medical-actions-inter…

…vals fix: treatment dose intervals table
bento-platform · Dec 6, 2023 · 33d92dc · 33d92dc
2 parents 72c6f20 + ec67dbb
commit 33d92dc
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/src/components/explorer/IndividualMedicalActions.js b/src/components/explorer/IndividualMedicalActions.js
@@ -7,8 +7,9 @@ import { ontologyTermSorter, useIndividualPhenopacketDataIndex } from "./utils";
 import OntologyTerm, { conditionalOntologyRender } from "./OntologyTerm";
 import { EM_DASH } from "../../constants";
 import { RoutedIndividualContent, RoutedIndividualContentTable } from "./RoutedIndividualContent";
-import TimeElement, { renderTimeInterval } from "./TimeElement";
+import TimeElement, { TimeInterval } from "./TimeElement";
 import { Quantity } from "./IndividualMeasurements";
+import { uniqueId } from "lodash";
 
 const ACTION_TYPES = {
     "procedure": "Procedure",
@@ -59,16 +60,19 @@ const DOSE_INTERVAL_COLUMNS = [
                 quantity={doseInterval.quantity}
             />
         ),
+        key: "quantity",
     },
     {
         title: "Schedule Frequency",
         render: (_, doseInterval) => (
             <OntologyTerm term={doseInterval.schedule_frequency}/>
         ),
+        key: "schedule_frequency",
     },
     {
         title: "Interval",
-        render: (_, doseInterval) => renderTimeInterval(doseInterval.interval),
+        render: (_, doseInterval) => (<TimeInterval timeInterval={doseInterval.interval} br={true}/>),
+        key: "interval",
     },
 ];
 
@@ -82,14 +86,17 @@ export const Treatment = ({treatment}) => {
                 <OntologyTerm term={treatment.route_of_administration}/>
             </Descriptions.Item>
             <Descriptions.Item label="Dose Intervals">
-                {treatment?.dose_interval ? (
-                    <Table
-                        bordered={true}
-                        pagination={false}
-                        size="small"
-                        columns={DOSE_INTERVAL_COLUMNS}
-                        dataSource={treatment.dose_interval}
-                    />
+                {treatment?.dose_intervals ? (
+                    <div>
+                        <Table
+                            bordered={false}
+                            pagination={false}
+                            size="small"
+                            columns={DOSE_INTERVAL_COLUMNS}
+                            dataSource={treatment.dose_intervals}
+                            rowKey={() => uniqueId()}
+                        />
+                    </div>
                 ) : EM_DASH}
             </Descriptions.Item>
             <Descriptions.Item label="Drug Type">{treatment.drug_type}</Descriptions.Item>

diff --git a/src/components/explorer/TimeElement.js b/src/components/explorer/TimeElement.js
@@ -26,16 +26,18 @@ const getTimeElementTypeLabel = (timeElement) => {
     return [null, "NOT_SUPPORTED"];
 };
 
-const TimeInterval = ({timeInterval}) => {
+export const TimeInterval = ({timeInterval, br}) => {
     return (
         <span>
-            <strong>Start:</strong>{" "}<>{timeInterval.start}</>{" "}
+            <strong>Start:</strong>{" "}<>{timeInterval.start}</>
+            {br ? <br/> : " "}
             <strong>End:</strong>{" "}<>{timeInterval.end}</>
         </span>
     );
 };
 TimeInterval.propTypes = {
     timeInterval: PropTypes.object,
+    br: PropTypes.bool,
 };
 
 const InnerTimeElement = ({type, timeElement}) => {