Added the ability to choose between two views in the data requirement…

…s tab - the raw data and the readable version of it
projecttacoma · Jun 27, 2023 · febad91 · febad91
1 parent f1be2eb
commit febad91
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 50 deletions.
diff --git a/app/src/components/DataRequirements.tsx b/app/src/components/DataRequirements.tsx
@@ -1,7 +1,9 @@
-import { Button, Center, Collapse, createStyles, em, getBreakpointValue, List, Paper, rem } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
-import { ArrowsMaximize, ArrowsMinimize } from 'tabler-icons-react';
-import { useState } from 'react';
+import { Accordion, Center, createStyles, em, getBreakpointValue, List, Paper, rem } from '@mantine/core';
+
+interface codeInterface {
+ code: string;
+ system: string;
+}
 
 const useStyles = createStyles(theme => ({
  card: {
@@ -14,58 +16,42 @@ const useStyles = createStyles(theme => ({
  }
 }));
 
-interface codeInterface {
- code: string;
- system: string;
-}
-
 /**
- * Component which takes in data requirements and then reformats it in a new div element
+ * Component which displays all data requirements of a specified resource and displays them
+ * as resource cards that contain all required information
  */
 function DataRequirements({ props }: any) {
- const [opened, { toggle }] = useDisclosure(false);
- // const [buttonIcon, setButtonicon] = useState(<ArrowsMaximize />);
  const { classes } = useStyles();
 
  const type = props.type;
  const extensions = props.extension;
  const dateFilters = props.dateFilter;
  const codeFilters = props.codeFilter;
  const codes: codeInterface[] = [];
+
  const valueSets = props.codeFilter.filter(function (x: any) {
  return x?.valueSet !== undefined;
  });
 
  codeFilters?.forEach((arr: { code: { code: any; system: any }[] }) => {
  arr?.code?.forEach((element: { code: any; system: any }) => {
- let code: codeInterface = { code: element?.code, system: element?.system };
+ const code: codeInterface = { code: element?.code, system: element?.system };
  codes.push(code);
  });
  });
 
  return (
- <>
- {/* <Center>
- <Paper className={classes.card} shadow="sm" p="md">
- <Group position="center" mb={5}>
- <Button onClick={toggle}>Toggle with linear transition</Button>
- </Group>
- </Paper>
- </Center> */}
-
- <Center>
- <Paper className={classes.card} shadow="sm" p="md">
- <div>
- {/* <Group> */}
- <Center>
- {/* <h2>Requirements</h2> */}
- <Button variant="default" color="green" size="lg" leftIcon={<ArrowsMaximize />} onClick={toggle}>
- Click to Expand
- </Button>
- </Center>
- {/* </Group> */}
- <Collapse in={opened} transitionDuration={500} transitionTimingFunction="linear">
- <br />
+ <Center>
+ <Paper className={classes.card} shadow="sm" p="md">
+ <Accordion variant="contained" radius="lg" defaultValue="customization">
+ <Accordion.Item value="customization">
+ <Accordion.Control>
+ {' '}
+ <Center>
+ <h2>{type} </h2>
+ </Center>
+ </Accordion.Control>
+ <Accordion.Panel>
  <List>
  <List.Item>
  <b>Type: </b>
@@ -98,7 +84,7 @@ function DataRequirements({ props }: any) {
  {dateFilters?.length > 0 && (
  <>
  <List.Item>
- <b>DateFilter(s):</b>
+ <b>DateFilter:</b>
  </List.Item>
  <List withPadding>
  {dateFilters?.map((item: any, index: any, index2: any) => (
@@ -123,7 +109,6 @@ function DataRequirements({ props }: any) {
  <List.Item>
  <b>CodeFilter(s):</b>
  </List.Item>
- {/* ))} */}
  {codes.length > 0 && (
  <List withPadding>
  <List.Item>
@@ -163,11 +148,11 @@ function DataRequirements({ props }: any) {
  </List>
  )}
  </List>
- </Collapse>
- </div>
- </Paper>
- </Center>
- </>
+ </Accordion.Panel>
+ </Accordion.Item>
+ </Accordion>
+ </Paper>
+ </Center>
  );
 }
 

diff --git a/app/src/pages/[resourceType]/[id].tsx b/app/src/pages/[resourceType]/[id].tsx
@@ -1,7 +1,7 @@
 import { Prism } from '@mantine/prism';
-import { Button, Divider, Group, Space, Stack, Tabs, Text } from '@mantine/core';
+import { Button, Center, Divider, Group, SegmentedControl, Space, Stack, Tabs, Text } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 import { FhirArtifact } from '@/util/types/fhir';
 import CQLRegex from '../../util/prismCQL';
@@ -20,6 +20,7 @@ import DataReqs from '@/components/DataRequirements';
  */
 export default function ResourceIDPage({ jsonData }: InferGetServerSidePropsType<typeof getServerSideProps>) {
  const resourceType = jsonData.resourceType;
+ const [value, setValue] = useState('raw');
 
  const decodedCql = useMemo(() => {
  return decode('text/cql', jsonData);
@@ -161,12 +162,29 @@ export default function ResourceIDPage({ jsonData }: InferGetServerSidePropsType
  )}
  {dataRequirements?.resourceType === 'Library' && dataRequirements?.dataRequirement != undefined && (
  <Tabs.Panel value="data-requirements">
- <Prism language="json" colorScheme="light">
- {JSON.stringify(dataRequirements, null, 2)}
- </Prism>
- {dataRequirements?.dataRequirement.map((item: any, index: any) => (
- <DataReqs key={index} props={item}></DataReqs>
- ))}
+ <Center>
+ {dataRequirements?.dataRequirement.length > 0 && (
+ <SegmentedControl
+ fullWidth
+ color="blue"
+ value={value}
+ onChange={setValue}
+ data={[
+ { label: 'Raw Data Requirements', value: 'raw' },
+ { label: 'Readable Data Requirements', value: 'readable' }
+ ]}
+ />
+ )}
+ </Center>
+ {value == 'raw' && (
+ <Prism language="json" colorScheme="light">
+ {JSON.stringify(dataRequirements, null, 2)}
+ </Prism>
+ )}
+ {value == 'readable' &&
+ dataRequirements?.dataRequirement.map((item: any, index: any) => (
+ <DataReqs key={index} props={item}></DataReqs>
+ ))}
  </Tabs.Panel>
  )}
  </Tabs>