diff --git a/public/images/Workflow1_FormFill.png b/public/images/Workflow1_FormFill.png new file mode 100644 index 0000000..0919bbd Binary files /dev/null and b/public/images/Workflow1_FormFill.png differ diff --git a/public/images/Workflow1_MainPage.png b/public/images/Workflow1_MainPage.png new file mode 100644 index 0000000..727bee9 Binary files /dev/null and b/public/images/Workflow1_MainPage.png differ diff --git a/public/images/Workflow2_FormFill.png b/public/images/Workflow2_FormFill.png new file mode 100644 index 0000000..1d6e9af Binary files /dev/null and b/public/images/Workflow2_FormFill.png differ diff --git a/public/images/Workflow2_MainPage.png b/public/images/Workflow2_MainPage.png new file mode 100644 index 0000000..edd2753 Binary files /dev/null and b/public/images/Workflow2_MainPage.png differ diff --git a/public/images/Workflow3_FormFill.png b/public/images/Workflow3_FormFill.png new file mode 100644 index 0000000..05f6805 Binary files /dev/null and b/public/images/Workflow3_FormFill.png differ diff --git a/public/images/Workflow3_MainPage.png b/public/images/Workflow3_MainPage.png new file mode 100644 index 0000000..9f90882 Binary files /dev/null and b/public/images/Workflow3_MainPage.png differ diff --git a/public/images/Workflow4_MainPage.png b/public/images/Workflow4_MainPage.png new file mode 100644 index 0000000..7f56c77 Binary files /dev/null and b/public/images/Workflow4_MainPage.png differ diff --git a/public/images/Workflow5_MainPage.png b/public/images/Workflow5_MainPage.png new file mode 100644 index 0000000..efbc64f Binary files /dev/null and b/public/images/Workflow5_MainPage.png differ diff --git a/public/images/Workflow6_MainPage.png b/public/images/Workflow6_MainPage.png new file mode 100644 index 0000000..f467cae Binary files /dev/null and b/public/images/Workflow6_MainPage.png differ diff --git a/public/images/Workflow7_MainPage.png b/public/images/Workflow7_MainPage.png new file mode 100644 index 0000000..1f73e46 Binary files /dev/null and b/public/images/Workflow7_MainPage.png differ diff --git a/src/App.tsx b/src/App.tsx index 0ba7a65..df461e7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,6 +5,7 @@ import Patient from './views/Patient/PatientView'; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; import CloseIcon from '@mui/icons-material/CloseOutlined'; +import HelpIcon from '@mui/icons-material/Help'; import { ReactElement, useCallback, useEffect, useState, MouseEvent } from 'react'; import { MemoizedTabPanel } from './TabDisplay'; import { IconButton } from '@mui/material'; @@ -146,6 +147,20 @@ function App(props: AppProps) { /> ); })} +
{ + window.open('/help', '_blank'); + }} + > + Help +
diff --git a/src/index.tsx b/src/index.tsx index c263ab8..afabd8b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,6 +6,7 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Register from './views/Smart/Register'; import Index from './views/Smart/Index'; import Launch from './views/Smart/Launch'; +import Help from './views/Help/Help'; const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); @@ -16,6 +17,8 @@ const launch = () => { } /> } /> } /> + } /> + } /> ); diff --git a/src/views/Help/Help.css b/src/views/Help/Help.css new file mode 100644 index 0000000..fb247b3 --- /dev/null +++ b/src/views/Help/Help.css @@ -0,0 +1,11 @@ +.help-box { + padding: 10px; + +} + +.help-view { + border-radius: 16px; + background-color: #ededed; + height: 500px; + padding:20px; +} \ No newline at end of file diff --git a/src/views/Help/Help.tsx b/src/views/Help/Help.tsx new file mode 100644 index 0000000..635c6f0 --- /dev/null +++ b/src/views/Help/Help.tsx @@ -0,0 +1,219 @@ +import { Grid, Paper, Stack, Box, Typography } from '@mui/material'; +import { memo, useState, useEffect } from 'react'; +import { useParams } from 'react-router-dom'; +import './Help.css'; +const helpDict = [ + { + name: 'REMS', + definition: + 'An acronym standing for Risk Evaluation and Mitigation Strategies. A medication with a REMS program has restrictions surrounding its prescriptions to ensure safe use of the medication and minimize side effects.' + }, + { + name: 'Questionnaire', + definition: + 'A FHIR Resource that contains a set of questions to be answered to determine if certain requirements and criteria are met.' + }, + { + name: 'ETASU', + definition: + 'An acronym standing for Element To Assure Safe Use. A REMS program will often have several ETASU, which are forms or actions that must be filled or taken before approval is given, to ensure that the risk of the medication is mitigated.' + }, + { + name: 'MCODE', + definition: + 'An acronym standing for Minimal Common Oncology Data Elements. It is an initiative intended to assemble a core set of structured data elements for oncology electronic health records.' + }, + { + name: 'REMS Administrator', + definition: + 'The group or entity responsible for managing the REMS program of one or more medications.' + }, + { + name: 'Turalio', + definition: + 'A REMS drug that treats tenosynovial giant cell tumor, but can cause severe liver complications.' + }, + { + name: 'Isotretinoin', + definition: + 'A REMS drug, also known as Accutane, that treats acne. It can cause severe birth defects. It has a REMS program called iPLEDGE.' + }, + { + name: 'TIRF', + definition: + 'Transmucosal Immediate-Release Fentanyl (TIRF) is a drug with a REMS program. Transmucosal fentanyl is a strong opioid agonist that is only approved for breakthrough cancer pain for patients receiving around-the-clock opioid therapy for persistent cancer pain.' + } +]; +const Help = () => { + const [selected, setSelected] = useState(''); + const { id } = useParams(); + + useEffect(() => { + document.title = 'Help page for SMART on FHIR REMS App'; + }); + + const renderWords = () => { + return ( + <> + {helpDict.map(word => { + return ( + { + setSelected(word.name); + }} + sx={{ + textAlign: 'left', + padding: '10px', + backgroundColor: 'antiquewhite', + marginBottom: '10px' + }} + > + {word.name} + {selected === word.name ? ( + {word.definition} + ) : ( + '' + )} + + ); + })} + + ); + }; + const renderWorkflowBox = (title: string, image: string) => { + return ( + + + + + {title} + + Example Image + + + + ); + }; + const renderMainView = () => { + if (id === 'form-help') { + return ( + + + + Form Help + + + + {renderWorkflowBox( + 'Fill out form by answering questions presented.  Questions with a red asterisk are required and must be answered before submitting.', + '/images/Workflow1_FormFill.png' + )} + {renderWorkflowBox( + 'Click the "Only Show Unfilled Fields" checkbox to filter out questions that have been already answered.', + '/images/Workflow2_FormFill.png' + )} + {renderWorkflowBox( + 'Click "Load Previous Form" to load an in-progress form that has been previously saved. Click "Save to EHR" to save the form to be finished later. Click "Submit to REMS Bundle" to submit the form to the REMS Administrator', + '/images/Workflow3_FormFill.png' + )} + + + ); + } else { + return ( + + + + Help + + + Glossary + + + + + + +

Workflow

+ + + {renderWorkflowBox( + 'Step 1: Open medication request dropdown', + '/images/Workflow1_MainPage.png' + )} + {renderWorkflowBox( + 'Step 2: Select a medication request for the in-context patient', + '/images/Workflow2_MainPage.png' + )} + {renderWorkflowBox( + 'Step 3: Click one of the forms to launch a SMART app', + '/images/Workflow3_MainPage.png' + )} + {renderWorkflowBox( + 'Step 4: Fill out the Questionnaire form in the SMART app', + '/images/Workflow4_MainPage.png' + )} + {renderWorkflowBox( + 'Step 5: Click the "Submit REMS Bundle" button once finished filling out form', + '/images/Workflow5_MainPage.png' + )} + {renderWorkflowBox( + 'Step 6: Upon successful submission, click the "Home" button to return to the main view', + '/images/Workflow6_MainPage.png' + )} + {renderWorkflowBox( + 'Step 7: Repeat steps 3-6 for any remaining forms', + '/images/Workflow7_MainPage.png' + )} + + + + + + +

Glossary

+
+ + {renderWords()} + + + + + ); + } + }; + return
{renderMainView()}
; +}; + +export default memo(Help); diff --git a/src/views/Questionnaire/SmartApp.tsx b/src/views/Questionnaire/SmartApp.tsx index 9d149b9..ea055c3 100644 --- a/src/views/Questionnaire/SmartApp.tsx +++ b/src/views/Questionnaire/SmartApp.tsx @@ -626,6 +626,16 @@ export function SmartApp(props: SmartAppProps) { const renderButtons = (ref: Element) => { const element = (