Fixed typescript errors, added scrollpane, and added data reqs count

projecttacoma · Jun 30, 2023 · e067543 · e067543
1 parent 628b7e3
commit e067543
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 58 deletions.
diff --git a/app/src/components/DataRequirements.tsx b/app/src/components/DataRequirements.tsx
@@ -1,6 +1,6 @@
 import { Accordion, Center, createStyles, em, getBreakpointValue, List, Paper, rem } from '@mantine/core';
 
-interface codeInterface {
+interface CodeInterface {
  code: string | undefined;
  system: string | undefined;
 }
@@ -22,15 +22,15 @@ const useStyles = createStyles(theme => ({
  */
 function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.DataRequirement) {
  const { classes } = useStyles();
- const codes: codeInterface[] = [];
+ const codes: CodeInterface[] = [];
 
- const valueSets = codeFilter?.filter(function (x: fhir4.DataRequirementCodeFilter) {
- return x?.valueSet !== undefined;
+ const codeFiltersWithVS = codeFilter?.filter(cf => {
+ return cf?.valueSet !== undefined;
  });
 
- codeFilter?.forEach((arr: fhir4.DataRequirementCodeFilter) => {
- arr?.code?.forEach((element: fhir4.Coding) => {
- const code: codeInterface = { code: element?.code, system: element?.system };
+ codeFilter?.forEach(cf => {
+ cf?.code?.forEach(c => {
+ const code: CodeInterface = { code: c.code, system: c.system };
  codes.push(code);
  });
  });
@@ -41,7 +41,6 @@ function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.Dat
  <Accordion variant="contained" radius="lg" defaultValue="customization">
  <Accordion.Item value="customization">
  <Accordion.Control>
- {' '}
  <Center>
  <h2>{type} </h2>
  </Center>
@@ -53,18 +52,16 @@ function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.Dat
  <br />
  </List.Item>
  <List withPadding>
- {extension?.map((item: any, index: any, index2: any) => (
+ {extension?.map(e => (
  <>
- {item?.url != undefined && (
- <List.Item key={index}>
- <b> URL: </b>
- {item.url}{' '}
- </List.Item>
- )}
- {item?.valueString != undefined && (
- <List.Item key={index2}>
+ <List.Item>
+ <b>URL:</b>
+ {e.url}
+ </List.Item>
+ {e?.valueString && (
+ <List.Item>
  <b> ValueString: </b>
- {item.valueString}{' '}
+ {e.valueString}
  </List.Item>
  )}
  <br />
@@ -77,14 +74,14 @@ function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.Dat
  <b>DateFilter(s):</b>
  </List.Item>
  <List withPadding>
- {dateFilter?.map((item: fhir4.DataRequirementDateFilter, index: any, index2: any) => (
+ {dateFilter?.map(data => (
  <>
- <List.Item key={index}>
+ <List.Item>
  <b> Start Date: </b>
- {item?.valuePeriod?.start} <br />
+ {data?.valuePeriod?.start} <br />
  </List.Item>
- <List.Item key={index2}>
- <b> End Date: </b> {item?.valuePeriod?.end} <br />
+ <List.Item>
+ <b> End Date: </b> {data?.valuePeriod?.end} <br />
  </List.Item>
  </>
  ))}
@@ -101,16 +98,16 @@ function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.Dat
  <b>Code(s):</b>
  </List.Item>
  <List withPadding>
- {codes?.map((item: any, index: any, index2: any) => (
+ {codes.map(codeInterface => (
  <>
- {item?.code && (
- <List.Item key={index}>
- <b> Code: </b> {item?.code} <br />
+ {codeInterface.code && (
+ <List.Item>
+ <b> Code: </b> {codeInterface?.code} <br />
  </List.Item>
  )}
- {item?.system && (
- <List.Item key={index2}>
- <b> System: </b> {item?.system} <br />
+ {codeInterface.system && (
+ <List.Item>
+ <b> System: </b> {codeInterface?.system} <br />
  </List.Item>
  )}
  <br />
@@ -119,15 +116,15 @@ function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.Dat
  </List>
  </List>
  )}
- {valueSets && valueSets.length > 0 && (
+ {codeFiltersWithVS && codeFiltersWithVS.length > 0 && (
  <List withPadding>
  <List.Item>
  <b>Value Set(s):</b>
  </List.Item>
  <List withPadding>
- {valueSets?.map((item: any, index3: any) => (
- <List.Item key={index3}>
- {item?.valueSet} <br />
+ {codeFiltersWithVS.map(c => (
+ <List.Item>
+ {c.valueSet} <br />
  </List.Item>
  ))}
  </List>

diff --git a/app/src/pages/[resourceType]/[id].tsx b/app/src/pages/[resourceType]/[id].tsx
@@ -1,5 +1,5 @@
 import { Prism } from '@mantine/prism';
-import { Button, Center, Divider, Group, SegmentedControl, Space, Stack, Tabs, Text } from '@mantine/core';
+import { Button, Center, Divider, Group, SegmentedControl, ScrollArea, Space, Stack, Tabs, Text } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import React, { useEffect, useMemo, useState } from 'react';
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
@@ -21,6 +21,7 @@ import DataReqs from '@/components/DataRequirements';
 export default function ResourceIDPage({ jsonData }: InferGetServerSidePropsType<typeof getServerSideProps>) {
  const resourceType = jsonData.resourceType;
  const [dataReqsView, setDataReqsView] = useState('raw');
+ const [height, setWindowHeight] = useState(0);
 
  const decodedCql = useMemo(() => {
  return decode('text/cql', jsonData);
@@ -41,6 +42,15 @@ export default function ResourceIDPage({ jsonData }: InferGetServerSidePropsType
  /* eslint-enable @typescript-eslint/no-explicit-any */
  }, []);
 
+ useEffect(() => {
+ const handleResize = () => {
+ setWindowHeight(window.innerHeight);
+ };
+ handleResize();
+ window.addEventListener('resize', handleResize);
+ return window.removeEventListener('resize', handleResize);
+ }, []);
+
  const {
  data: dataRequirements,
  refetch,
@@ -162,34 +172,43 @@ export default function ResourceIDPage({ jsonData }: InferGetServerSidePropsType
  )}
  {dataRequirements?.resourceType === 'Library' && dataRequirements?.dataRequirement && (
  <Tabs.Panel value="data-requirements">
- <Center>
- {dataRequirements?.dataRequirement.length > 0 && (
- <SegmentedControl
- fullWidth
- value={dataReqsView}
- onChange={setDataReqsView}
- data={[
- { label: 'Raw Data Requirements', value: 'raw' },
- { label: 'Readable Data Requirements', value: 'readable' }
- ]}
- />
- )}
- </Center>
+ {dataRequirements?.dataRequirement.length > 0 && (
+ <>
+ <Space h="md" />
+ <Text c="dimmed">
+ {' '}
+ Number of Requirements:<b> {dataRequirements?.dataRequirement.length} </b>
+ </Text>
+ <Center>
+ <SegmentedControl
+ fullWidth
+ value={dataReqsView}
+ onChange={setDataReqsView}
+ data={[
+ { label: 'Raw Data Requirements', value: 'raw' },
+ { label: 'Formatted Data Requirements', value: 'formatted' }
+ ]}
+ />
+ </Center>
+ <Space h="md" />
+ </>
+ )}
  {dataReqsView === 'raw' && (
  <Prism language="json" colorScheme="light">
  {JSON.stringify(dataRequirements, null, 2)}
  </Prism>
  )}
- {dataReqsView === 'readable' &&
- dataRequirements?.dataRequirement.map((item: fhir4.DataRequirement, index: any) => (
- <DataReqs
- key={index}
- type={item?.type}
- codeFilter={item?.codeFilter}
- dateFilter={item?.dateFilter}
- extension={item?.extension}
- ></DataReqs>
- ))}
+ <ScrollArea.Autosize mah={height * 0.8} type="always">
+ {dataReqsView === 'formatted' &&
+ dataRequirements?.dataRequirement.map(data => (
+ <DataReqs
+ type={data.type}
+ codeFilter={data.codeFilter}
+ dateFilter={data.dateFilter}
+ extension={data.extension}
+ />
+ ))}
+ </ScrollArea.Autosize>
  </Tabs.Panel>
  )}
  </Tabs>