Display un/coverage by group

projecttacoma · May 11, 2024 · 8824ddc · 8824ddc
1 parent 0c0b0d2
commit 8824ddc
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 22 deletions.
diff --git a/components/calculation/PopulationCalculation.tsx b/components/calculation/PopulationCalculation.tsx
@@ -66,17 +66,16 @@ export default function PopulationCalculation() {
     });
 
     if (measureBundle.content) {
-      const { results, coverageHTML, groupClauseUncoverageHTML } = await Calculator.calculate(
+      const { results, groupClauseCoverageHTML, groupClauseUncoverageHTML } = await Calculator.calculate(
         measureBundle.content,
         patientBundles,
         options
       );
-      if (coverageHTML) {
-        setClauseCoverageHTML(coverageHTML);
+      if (groupClauseCoverageHTML) {
+        setClauseCoverageHTML(JSON.stringify(groupClauseCoverageHTML));
       }
       if (groupClauseUncoverageHTML) {
-        // TODO: use groupClauseUncoverageHTML key (the group id) to separate this HTML into multiple tabs (or similar)
-        setClauseUncoverageHTML(Object.values(groupClauseUncoverageHTML).join('<br>'));
+        setClauseUncoverageHTML(JSON.stringify(groupClauseUncoverageHTML));
       }
       return results;
     } else return;

diff --git a/pages/[measureId]/coverage.tsx b/pages/[measureId]/coverage.tsx
@@ -1,43 +1,77 @@
-import { Container, Group, ScrollArea, Tabs } from '@mantine/core';
+import { Container, Group, ScrollArea, SegmentedControl, Tabs } from '@mantine/core';
 import parse from 'html-react-parser';
 import { useRouter } from 'next/router';
 import BackButton from '../../components/BackButton';
 import classes from './coverage.module.css';
+import { useState } from 'react';
 
 const ClauseCoveragePage = () => {
   const router = useRouter();
   const { clauseCoverageHTML, clauseUncoverageHTML, measureId } = router.query;
+  const [covValue, setCovValue] = useState('coverage');
+  const [activeTab, setActiveTab] = useState<string | null>('0');
 
   if (
     typeof clauseCoverageHTML === 'string' &&
     clauseCoverageHTML.length > 0 &&
     typeof clauseUncoverageHTML === 'string' &&
     clauseUncoverageHTML.length > 0
   ) {
+    const coverageRecord: Record<string, string> = JSON.parse(clauseCoverageHTML);
+    const uncoverageRecord: Record<string, string> = JSON.parse(clauseUncoverageHTML);
+
     return (
       <Container size={'90%'}>
         <Group>
           <BackButton />
           <h2>Clause coverage for measure bundle: {`${measureId}`}</h2>
         </Group>
-        <Tabs defaultValue="coverage" classNames={classes}>
-          <Tabs.List grow>
-            <Tabs.Tab value="coverage">Coverage</Tabs.Tab>
-            <Tabs.Tab value="uncoverage">Uncoverage</Tabs.Tab>
+          <SegmentedControl
+            value={covValue}
+            onChange={setCovValue}
+            data={[
+              { label: 'Coverage', value: 'coverage' },
+              { label: 'Uncoverage', value: 'uncoverage' }
+            ]}
+          />
+        {covValue === 'coverage' ? 
+        <div>
+          <Tabs value={activeTab} onTabChange={setActiveTab} classNames={classes}>
+            <Tabs.List className={classes.tabsList}>
+              {Object.keys(coverageRecord).map((key, index) => (
+                <Tabs.Tab value={index.toString()} key={key}>
+                  {key}
+                </Tabs.Tab>
+              ))}
+            </Tabs.List>
+            {Object.keys(coverageRecord).map((key, index) => (
+                <Tabs.Panel value={index.toString()} key={key} className={classes.tabsPanel}>
+                  <ScrollArea>
+                    <div>{parse(coverageRecord[key])}</div>
+                  </ScrollArea>
+                </Tabs.Panel>
+              ))}
+          </Tabs>
+        </div> : 
+        <div>
+        <Tabs value={activeTab} onTabChange={setActiveTab} classNames={classes}>
+          <Tabs.List className={classes.tabsList}>
+            {Object.keys(uncoverageRecord).map((key, index) => (
+              <Tabs.Tab value={index.toString()} key={key}>
+                {key}
+              </Tabs.Tab>
+            ))}
           </Tabs.List>
-
-          <Tabs.Panel value="coverage">
-            <ScrollArea>
-              <div>{parse(clauseCoverageHTML)}</div>
-            </ScrollArea>
-          </Tabs.Panel>
-
-          <Tabs.Panel value="uncoverage">
-            <ScrollArea>
-              <div>{parse(clauseUncoverageHTML)}</div>
-            </ScrollArea>
-          </Tabs.Panel>
+          {Object.keys(uncoverageRecord).map((key, index) => (
+              <Tabs.Panel value={index.toString()} key={key} className={classes.tabsPanel}>
+                <ScrollArea>
+                  <div>{parse(uncoverageRecord[key])}</div>
+                </ScrollArea>
+              </Tabs.Panel>
+            ))}
         </Tabs>
+      </div>
+        }
       </Container>
     );
   } else {