From a43756c5052e0f7e39e368f2187527ff413aee4e Mon Sep 17 00:00:00 2001
From: Zach Robin <zrobin144@gmail.com>
Date: Fri, 12 Apr 2024 04:36:31 -0700
Subject: [PATCH 1/4] button updates

---
 src/components/DisplayBox/DisplayBox.jsx | 147 +++++++++++++++--------
 1 file changed, 97 insertions(+), 50 deletions(-)

diff --git a/src/components/DisplayBox/DisplayBox.jsx b/src/components/DisplayBox/DisplayBox.jsx
index a8d9265..9dbd726 100644
--- a/src/components/DisplayBox/DisplayBox.jsx
+++ b/src/components/DisplayBox/DisplayBox.jsx
@@ -1,11 +1,21 @@
 import React, { useEffect, useState } from 'react';
 import './card-list.css';
-import { Button, Card, CardActions, CardContent, Typography } from '@mui/material';
+import { Button, Box, Card, CardActions, CardContent, Typography } from '@mui/material';
 import axios from 'axios';
 import ReactMarkdown from 'react-markdown';
 import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
 import { retrieveLaunchContext } from '../../util/util';
 import './displayBox.css';
+import ArrowForwardIosRoundedIcon from '@mui/icons-material/ArrowForwardIosRounded';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
+
+
 
 const DisplayBox = props => {
   const [state, setState] = useState({ smartLink: '', response: {} });
@@ -54,6 +64,8 @@ const DisplayBox = props => {
         const element = document.getElementById(buttonId);
         element.setAttribute('disabled', 'true');
         element.setAttribute('style', 'background-color:#4BB543;');
+        element.setAttribute('style', );
+
       }
 
       if (suggestion.label) {
@@ -182,7 +194,7 @@ const DisplayBox = props => {
     }
     if (!isDemoCard) {
       return (
-        <div className="card-source">
+        <div style={{ marginTop: '15px', textAlign: 'right' }} className="card-source">
           Source:{' '}
           <a
             className="source-link"
@@ -246,25 +258,26 @@ const DisplayBox = props => {
             card.suggestions.forEach((item, ind) => {
               var buttonId = 'suggestion_button-' + cardInd + '-' + ind;
               buttonList.push(buttonId);
-
               suggestionsSection.push(
-                <Button
-                  key={ind}
-                  onClick={() =>
-                    takeSuggestion(
-                      item,
-                      card.serviceUrl,
-                      buttonId,
-                      card.suggestions.length,
-                      cardInd,
-                      card.selectionBehavior
-                    )
-                  }
-                  variant="contained"
-                  id={buttonId}
-                >
-                  {item.label}
-                </Button>
+                <ListItem key={ind} sx={{ marginLeft: '-12px' }}>
+                  <Button fullWidth={true} sx={{textAlign:'left'}}
+                    onClick={() =>
+                      takeSuggestion(
+                        item,
+                        card.serviceUrl,
+                        buttonId,
+                        card.suggestions.length,
+                        cardInd,
+                        card.selectionBehavior
+                      )
+                    }
+                    variant="contained"
+                  
+                    id={buttonId} endIcon={<AddCircleOutlineRoundedIcon/>}
+                  >
+                    {item.label}
+                  </Button>
+                </ListItem>
               );
             });
           }
@@ -276,45 +289,79 @@ const DisplayBox = props => {
             linksSection = card.links.map((link, ind) => {
               if (link.type === 'smart') {
                 return (
-                  <Button key={ind} variant="outlined" onClick={e => launchLink(e, link)}>
-                    {link.label}
-                  </Button>
+                  <ListItem sx={{ marginLeft: '-12px' }}>
+                    <Button key={ind} variant="outlined" sx={{
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
+                      textAlign: 'left',
+                      width: '100%',
+                      marginBottom: '5px'
+                    }} ÍclassName="myButton" onClick={e => launchLink(e, link)} endIcon={<ArrowForwardIosRoundedIcon />}>
+                      {link.label}
+                    </Button>
+                  </ListItem>
                 );
               }
+            });
+          }
+
+          let documentationSection;
+          if (card.links) {
+            card.links = modifySmartLaunchUrls(card) || card.links;
+            documentationSection = card.links.map((link, ind) => {
               const pdfIcon = <PictureAsPdfIcon />;
-              return (
-                <Button key={ind} onClick={e => launchLink(e, link)} endIcon={pdfIcon}>
-                  {link.label}
-                </Button>
-              );
+              if (link.type === 'absolute') {
+                return (
+                  <ListItem>
+                    <Box key={ind} >
+                      <Button variant='text' sx={{
+                        alignItems: 'center',
+                        textAlign: 'left',
+                      }} fullWidth={true} onClick={e => launchLink(e, link)} endIcon={pdfIcon}>
+                        {link.label}
+                      </Button>
+                    </Box>
+                  </ListItem>
+                );
+              }
             });
           }
 
           const cardSectionHeaderStyle = { marginBottom: '2px', color: 'black' };
 
           const builtCard = (
-            <Card variant="outlined" key={cardInd} className="decision-card alert-info">
-              <React.Fragment>
-                <CardContent>
-                  <Typography style={cardSectionHeaderStyle} gutterBottom>
-                    Summary
-                  </Typography>
-                  <Typography variant="h5" component="div">
-                    {summarySection}
-                  </Typography>
-                  <br />
-                  <Typography style={cardSectionHeaderStyle} gutterBottom>
-                    Details
-                  </Typography>
-                  <Typography variant="div">{detailSection}</Typography>
-                  <br />
-                  <Typography variant="div" gutterBottom>
-                    {sourceSection}
-                  </Typography>
-                </CardContent>
-                <CardActions className={'links-section'}>{linksSection}</CardActions>
-                <CardActions>{suggestionsSection}</CardActions>
-              </React.Fragment>
+            <Card sx={{ alignItems: 'left', maxWidth:'560px'}} variant="outlined" key={cardInd} className="decision-card alert-info">
+              <Box sx={{margin:'0 auto 0', width:'90%' }}>
+                <React.Fragment>
+                  <CardContent>
+                    <Typography variant="h5" component="div">
+                      {summarySection}
+                    </Typography>
+                    <Typography  color="text.secondary" >
+                      Required Forms
+                    </Typography>
+                    <Typography variant="div">{detailSection}</Typography>
+                    <List className={'links-section'}>{linksSection}</List>
+                    <Typography sx={{ marginTop: '10px' }} color="text.secondary" >
+                      Add To Task List
+                    </Typography>
+                    <List>{suggestionsSection}</List>
+          
+                      <Accordion sx={{ display: 'block', marginLeft: '0', marginTop:'10px', width: '95%', backgroundColor: '#F3F6F9' }}>
+                        <AccordionSummary expandIcon={<KeyboardArrowDownRoundedIcon />} >
+                          <Typography sx={{ fontSize: 14 }} color="text.secondary">View documentation and guides</Typography>
+                        </AccordionSummary>
+                        <AccordionDetails>
+                            <List> {documentationSection}</List>
+                        </AccordionDetails>
+                      </Accordion>
+                    <Typography sx={{ display: 'block' }} variant="div" gutterBottom>
+                      {sourceSection}
+                    </Typography>
+                  </CardContent>
+                </React.Fragment>
+              </Box>
             </Card>
           );
 

From 44760648a606029d0e1bbfaef6642c5c648f9d20 Mon Sep 17 00:00:00 2001
From: Zach Robin <zrobin144@gmail.com>
Date: Fri, 17 May 2024 09:45:54 -0700
Subject: [PATCH 2/4] Updated headers to hide when no links returned

---
 src/components/DisplayBox/DisplayBox.jsx | 75 +++++++++++++++---------
 1 file changed, 46 insertions(+), 29 deletions(-)

diff --git a/src/components/DisplayBox/DisplayBox.jsx b/src/components/DisplayBox/DisplayBox.jsx
index 9dbd726..54f2744 100644
--- a/src/components/DisplayBox/DisplayBox.jsx
+++ b/src/components/DisplayBox/DisplayBox.jsx
@@ -6,7 +6,7 @@ import ReactMarkdown from 'react-markdown';
 import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
 import { retrieveLaunchContext } from '../../util/util';
 import './displayBox.css';
-import ArrowForwardIosRoundedIcon from '@mui/icons-material/ArrowForwardIosRounded';
+import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
@@ -64,7 +64,7 @@ const DisplayBox = props => {
         const element = document.getElementById(buttonId);
         element.setAttribute('disabled', 'true');
         element.setAttribute('style', 'background-color:#4BB543;');
-        element.setAttribute('style', );
+        element.setAttribute('style',);
 
       }
 
@@ -260,7 +260,7 @@ const DisplayBox = props => {
               buttonList.push(buttonId);
               suggestionsSection.push(
                 <ListItem key={ind} sx={{ marginLeft: '-12px' }}>
-                  <Button fullWidth={true} sx={{textAlign:'left'}}
+                  <Button fullWidth={true} sx={{ textAlign: 'left' }}
                     onClick={() =>
                       takeSuggestion(
                         item,
@@ -272,8 +272,7 @@ const DisplayBox = props => {
                       )
                     }
                     variant="contained"
-                  
-                    id={buttonId} endIcon={<AddCircleOutlineRoundedIcon/>}
+                    id={buttonId} endIcon={<AddCircleOutlineRoundedIcon />}
                   >
                     {item.label}
                   </Button>
@@ -283,12 +282,12 @@ const DisplayBox = props => {
           }
 
           // -- Links --
-          let linksSection;
+          let linksSection = [];
           if (card.links) {
             card.links = modifySmartLaunchUrls(card) || card.links;
-            linksSection = card.links.map((link, ind) => {
+            card.links.map((link, ind) => {
               if (link.type === 'smart') {
-                return (
+                linksSection.push(
                   <ListItem sx={{ marginLeft: '-12px' }}>
                     <Button key={ind} variant="outlined" sx={{
                       display: 'flex',
@@ -297,7 +296,7 @@ const DisplayBox = props => {
                       textAlign: 'left',
                       width: '100%',
                       marginBottom: '5px'
-                    }} ÍclassName="myButton" onClick={e => launchLink(e, link)} endIcon={<ArrowForwardIosRoundedIcon />}>
+                    }} ÍclassName="myButton" onClick={e => launchLink(e, link)} endIcon={<ArrowForwardRoundedIcon />}>
                       {link.label}
                     </Button>
                   </ListItem>
@@ -331,31 +330,49 @@ const DisplayBox = props => {
           const cardSectionHeaderStyle = { marginBottom: '2px', color: 'black' };
 
           const builtCard = (
-            <Card sx={{ alignItems: 'left', maxWidth:'560px'}} variant="outlined" key={cardInd} className="decision-card alert-info">
-              <Box sx={{margin:'0 auto 0', width:'90%' }}>
+            <Card sx={{ alignItems: 'left', maxWidth: '560px', minWidth:'560px' }} variant="outlined" key={cardInd} className="decision-card alert-info">
+              <Box sx={{ margin: '0 auto 0', width: '90%' }}>
                 <React.Fragment>
                   <CardContent>
                     <Typography variant="h5" component="div">
                       {summarySection}
                     </Typography>
-                    <Typography  color="text.secondary" >
-                      Required Forms
-                    </Typography>
-                    <Typography variant="div">{detailSection}</Typography>
-                    <List className={'links-section'}>{linksSection}</List>
-                    <Typography sx={{ marginTop: '10px' }} color="text.secondary" >
-                      Add To Task List
-                    </Typography>
-                    <List>{suggestionsSection}</List>
-          
-                      <Accordion sx={{ display: 'block', marginLeft: '0', marginTop:'10px', width: '95%', backgroundColor: '#F3F6F9' }}>
-                        <AccordionSummary expandIcon={<KeyboardArrowDownRoundedIcon />} >
-                          <Typography sx={{ fontSize: 14 }} color="text.secondary">View documentation and guides</Typography>
-                        </AccordionSummary>
-                        <AccordionDetails>
-                            <List> {documentationSection}</List>
-                        </AccordionDetails>
-                      </Accordion>
+
+
+                    {/* Forms */}
+                    {linksSection.length !== 0 ?
+                      <div>
+                        <Typography color="text.secondary" >
+                          Required Forms
+                        </Typography>
+                        <Typography variant="div">{detailSection}</Typography>
+                        <List className={'links-section'}>{linksSection}</List>
+                      </div>
+                      :
+                      <></>
+                    }
+
+                    {/* Suggestions */}
+                    {suggestionsSection.length !== 0 ?
+                      <div>
+                        <Typography sx={{ marginTop: '10px' }} color="text.secondary" >
+                          Suggestions
+                        </Typography>
+                        <List>{suggestionsSection}</List>
+                      </div>
+                      :
+                      <></>
+                    }
+
+                    {/* Documentation and Guides */}
+                    <Accordion sx={{ display: 'block', marginLeft: '0', marginTop: '10px', width: '94%', backgroundColor: '#F3F6F9' }}>
+                      <AccordionSummary expandIcon={<KeyboardArrowDownRoundedIcon />} >
+                        <Typography sx={{ fontSize: 14 }} color="text.secondary">View documentation and guides</Typography>
+                      </AccordionSummary>
+                      <AccordionDetails>
+                        <List> {documentationSection}</List>
+                      </AccordionDetails>
+                    </Accordion>
                     <Typography sx={{ display: 'block' }} variant="div" gutterBottom>
                       {sourceSection}
                     </Typography>

From ea212672db7ee634884a42ce7a73c8c22a747e40 Mon Sep 17 00:00:00 2001
From: Zach Robin <zrobin144@gmail.com>
Date: Mon, 20 May 2024 07:59:32 -0700
Subject: [PATCH 3/4] prettier + ability to hide guides if empty

---
 src/components/DisplayBox/DisplayBox.jsx | 108 +++++++++++++++--------
 1 file changed, 69 insertions(+), 39 deletions(-)

diff --git a/src/components/DisplayBox/DisplayBox.jsx b/src/components/DisplayBox/DisplayBox.jsx
index 54f2744..87975ec 100644
--- a/src/components/DisplayBox/DisplayBox.jsx
+++ b/src/components/DisplayBox/DisplayBox.jsx
@@ -15,8 +15,6 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
 
-
-
 const DisplayBox = props => {
   const [state, setState] = useState({ smartLink: '', response: {} });
   const { isDemoCard, fhirAccessToken, ehrLaunch, patientId, client, response } = props;
@@ -64,8 +62,7 @@ const DisplayBox = props => {
         const element = document.getElementById(buttonId);
         element.setAttribute('disabled', 'true');
         element.setAttribute('style', 'background-color:#4BB543;');
-        element.setAttribute('style',);
-
+        element.setAttribute('style');
       }
 
       if (suggestion.label) {
@@ -260,7 +257,9 @@ const DisplayBox = props => {
               buttonList.push(buttonId);
               suggestionsSection.push(
                 <ListItem key={ind} sx={{ marginLeft: '-12px' }}>
-                  <Button fullWidth={true} sx={{ textAlign: 'left' }}
+                  <Button
+                    fullWidth={true}
+                    sx={{ textAlign: 'left' }}
                     onClick={() =>
                       takeSuggestion(
                         item,
@@ -272,7 +271,8 @@ const DisplayBox = props => {
                       )
                     }
                     variant="contained"
-                    id={buttonId} endIcon={<AddCircleOutlineRoundedIcon />}
+                    id={buttonId}
+                    endIcon={<AddCircleOutlineRoundedIcon />}
                   >
                     {item.label}
                   </Button>
@@ -289,14 +289,21 @@ const DisplayBox = props => {
               if (link.type === 'smart') {
                 linksSection.push(
                   <ListItem sx={{ marginLeft: '-12px' }}>
-                    <Button key={ind} variant="outlined" sx={{
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      alignItems: 'center',
-                      textAlign: 'left',
-                      width: '100%',
-                      marginBottom: '5px'
-                    }} ÍclassName="myButton" onClick={e => launchLink(e, link)} endIcon={<ArrowForwardRoundedIcon />}>
+                    <Button
+                      key={ind}
+                      variant="outlined"
+                      sx={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        textAlign: 'left',
+                        width: '100%',
+                        marginBottom: '5px'
+                      }}
+                      ÍclassName="myButton"
+                      onClick={e => launchLink(e, link)}
+                      endIcon={<ArrowForwardRoundedIcon />}
+                    >
                       {link.label}
                     </Button>
                   </ListItem>
@@ -313,11 +320,17 @@ const DisplayBox = props => {
               if (link.type === 'absolute') {
                 return (
                   <ListItem>
-                    <Box key={ind} >
-                      <Button variant='text' sx={{
-                        alignItems: 'center',
-                        textAlign: 'left',
-                      }} fullWidth={true} onClick={e => launchLink(e, link)} endIcon={pdfIcon}>
+                    <Box key={ind}>
+                      <Button
+                        variant="text"
+                        sx={{
+                          alignItems: 'center',
+                          textAlign: 'left'
+                        }}
+                        fullWidth={true}
+                        onClick={e => launchLink(e, link)}
+                        endIcon={pdfIcon}
+                      >
                         {link.label}
                       </Button>
                     </Box>
@@ -330,7 +343,12 @@ const DisplayBox = props => {
           const cardSectionHeaderStyle = { marginBottom: '2px', color: 'black' };
 
           const builtCard = (
-            <Card sx={{ alignItems: 'left', maxWidth: '560px', minWidth:'560px' }} variant="outlined" key={cardInd} className="decision-card alert-info">
+            <Card
+              sx={{ alignItems: 'left', maxWidth: '560px', minWidth: '560px' }}
+              variant="outlined"
+              key={cardInd}
+              className="decision-card alert-info"
+            >
               <Box sx={{ margin: '0 auto 0', width: '90%' }}>
                 <React.Fragment>
                   <CardContent>
@@ -338,41 +356,53 @@ const DisplayBox = props => {
                       {summarySection}
                     </Typography>
 
-
                     {/* Forms */}
-                    {linksSection.length !== 0 ?
+                    {linksSection.length !== 0 ? (
                       <div>
-                        <Typography color="text.secondary" >
-                          Required Forms
-                        </Typography>
+                        <Typography color="text.secondary">Required Forms</Typography>
                         <Typography variant="div">{detailSection}</Typography>
                         <List className={'links-section'}>{linksSection}</List>
                       </div>
-                      :
+                    ) : (
                       <></>
-                    }
+                    )}
 
                     {/* Suggestions */}
-                    {suggestionsSection.length !== 0 ?
+                    {suggestionsSection.length !== 0 ? (
                       <div>
-                        <Typography sx={{ marginTop: '10px' }} color="text.secondary" >
+                        <Typography sx={{ marginTop: '10px' }} color="text.secondary">
                           Suggestions
                         </Typography>
                         <List>{suggestionsSection}</List>
                       </div>
-                      :
+                    ) : (
                       <></>
-                    }
+                    )}
 
                     {/* Documentation and Guides */}
-                    <Accordion sx={{ display: 'block', marginLeft: '0', marginTop: '10px', width: '94%', backgroundColor: '#F3F6F9' }}>
-                      <AccordionSummary expandIcon={<KeyboardArrowDownRoundedIcon />} >
-                        <Typography sx={{ fontSize: 14 }} color="text.secondary">View documentation and guides</Typography>
-                      </AccordionSummary>
-                      <AccordionDetails>
-                        <List> {documentationSection}</List>
-                      </AccordionDetails>
-                    </Accordion>
+                    {documentationSection.length !== 0 ? (
+                      <Accordion
+                        sx={{
+                          display: 'block',
+                          marginLeft: '0',
+                          marginTop: '10px',
+                          width: '94%',
+                          backgroundColor: '#F3F6F9'
+                        }}
+                      >
+                        <AccordionSummary expandIcon={<KeyboardArrowDownRoundedIcon />}>
+                          <Typography sx={{ fontSize: 14 }} color="text.secondary">
+                            View documentation and guides
+                          </Typography>
+                        </AccordionSummary>
+                        <AccordionDetails>
+                          <List> {documentationSection}</List>
+                        </AccordionDetails>
+                      </Accordion>
+                    ) : (
+                      <></>
+                    )}
+
                     <Typography sx={{ display: 'block' }} variant="div" gutterBottom>
                       {sourceSection}
                     </Typography>

From ac3ad711dc96f9df8f40812edb05f75556f83c2e Mon Sep 17 00:00:00 2001
From: Zach Robin <zrobin144@gmail.com>
Date: Mon, 20 May 2024 08:51:42 -0700
Subject: [PATCH 4/4] fixed issue with Turalio empty documents section

---
 src/components/DisplayBox/DisplayBox.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/DisplayBox/DisplayBox.jsx b/src/components/DisplayBox/DisplayBox.jsx
index 87975ec..04b37a9 100644
--- a/src/components/DisplayBox/DisplayBox.jsx
+++ b/src/components/DisplayBox/DisplayBox.jsx
@@ -312,13 +312,13 @@ const DisplayBox = props => {
             });
           }
 
-          let documentationSection;
+          let documentationSection = [];
+          const pdfIcon = <PictureAsPdfIcon />;
           if (card.links) {
             card.links = modifySmartLaunchUrls(card) || card.links;
-            documentationSection = card.links.map((link, ind) => {
-              const pdfIcon = <PictureAsPdfIcon />;
+            card.links.map((link, ind) => {
               if (link.type === 'absolute') {
-                return (
+                documentationSection.push(
                   <ListItem>
                     <Box key={ind}>
                       <Button