From ed3a0e6637a8b21bcccfaa70ec12d2b97cdde6de Mon Sep 17 00:00:00 2001
From: BriannaVH <vanheckeb@merrimack.edu>
Date: Mon, 3 Jul 2023 12:35:33 -0400
Subject: [PATCH] Changed spacing, edited text, and fixed accessing issues

---
 app/src/components/DataRequirements.tsx | 18 ++++++++----------
 app/src/pages/[resourceType]/[id].tsx   | 12 ++++++------
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/app/src/components/DataRequirements.tsx b/app/src/components/DataRequirements.tsx
index a0bf03df..b7a7e7f0 100644
--- a/app/src/components/DataRequirements.tsx
+++ b/app/src/components/DataRequirements.tsx
@@ -24,9 +24,7 @@ function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.Dat
   const { classes } = useStyles();
   const codes: CodeInterface[] = [];
 
-  const codeFiltersWithVS = codeFilter?.filter(cf => {
-    return cf?.valueSet !== undefined;
-  });
+  const codeFiltersWithVS = codeFilter?.filter(cf => cf?.valueSet);
 
   codeFilter?.forEach(cf => {
     cf?.code?.forEach(c => {
@@ -38,8 +36,8 @@ function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.Dat
   return (
     <Center>
       <Paper className={classes.card} shadow="sm" p="md">
-        <Accordion variant="contained" radius="lg" defaultValue="customization">
-          <Accordion.Item value="customization">
+        <Accordion variant="contained" radius="lg" defaultValue="data-req-card">
+          <Accordion.Item value="data-req-card">
             <Accordion.Control>
               <Center>
                 <h2>{type} </h2>
@@ -76,12 +74,12 @@ function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.Dat
                     <List withPadding>
                       {dateFilter.map(date => (
                         <>
-                          <List.Item key={date?.valuePeriod?.start}>
+                          <List.Item key={date.valuePeriod?.start}>
                             <b> Start Date: </b>
-                            {date?.valuePeriod?.start} <br />
+                            {date.valuePeriod?.start} <br />
                           </List.Item>
-                          <List.Item key={date?.valuePeriod?.end}>
-                            <b> End Date: </b> {date?.valuePeriod?.end} <br />
+                          <List.Item key={date.valuePeriod?.end}>
+                            <b> End Date: </b> {date.valuePeriod?.end} <br />
                           </List.Item>
                         </>
                       ))}
@@ -107,7 +105,7 @@ function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.Dat
                           )}
                           {codeInterface.system && (
                             <List.Item key={codeInterface.system}>
-                              <b> System: </b> {codeInterface?.system} <br />
+                              <b> System: </b> {codeInterface.system} <br />
                             </List.Item>
                           )}
                           <br />
diff --git a/app/src/pages/[resourceType]/[id].tsx b/app/src/pages/[resourceType]/[id].tsx
index a6d782f8..51994aa8 100644
--- a/app/src/pages/[resourceType]/[id].tsx
+++ b/app/src/pages/[resourceType]/[id].tsx
@@ -170,15 +170,11 @@ export default function ResourceIDPage({ jsonData }: InferGetServerSidePropsType
               {parse(jsonData.text.div)}
             </Tabs.Panel>
           )}
-          {dataRequirements?.resourceType === 'Library' && dataRequirements?.dataRequirement && (
+          {dataRequirements?.dataRequirement && (
             <Tabs.Panel value="data-requirements">
               {dataRequirements?.dataRequirement.length > 0 && (
                 <>
                   <Space h="md" />
-                  <Text c="dimmed">
-                    {' '}
-                    Number of Requirements:<b> {dataRequirements?.dataRequirement.length} </b>
-                  </Text>
                   <Center>
                     <SegmentedControl
                       fullWidth
@@ -190,7 +186,6 @@ export default function ResourceIDPage({ jsonData }: InferGetServerSidePropsType
                       ]}
                     />
                   </Center>
-                  <Space h="md" />
                 </>
               )}
               {dataReqsView === 'raw' && (
@@ -199,6 +194,11 @@ export default function ResourceIDPage({ jsonData }: InferGetServerSidePropsType
                 </Prism>
               )}
               <ScrollArea.Autosize mah={height * 0.8} type="always">
+                <Space h="md" />
+                <Text c="dimmed">
+                  Number of Requirements:<b> {dataRequirements?.dataRequirement.length} </b>
+                </Text>
+                <Space h="md" />
                 {dataReqsView === 'formatted' &&
                   dataRequirements?.dataRequirement.map((data: fhir4.DataRequirement, index: any) => (
                     <DataReqs