Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Edits to Scope of Clinical Focus venn diagram #38

Merged
merged 4 commits into from
Dec 4, 2023
Merged

Edits to Scope of Clinical Focus venn diagram #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fac7c0f
Add mouseovers to bottom arrows in Scope of CF diagram
vpsx Nov 30, 2023
a681083
Change Scope of Focus diagram colors
vpsx Nov 30, 2023
30b076d
Add SectionedHeader for Scope of Focus diagram
vpsx Nov 30, 2023
d4fea02
Resize How to Become header to match Scope of Focus
vpsx Nov 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 60 additions & 5 deletions packages/client/src/components/ScopeOfClinicalFocus.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { useEffect, useRef, useState } from 'react';
import { Box, Paper, Popper } from '@mui/material';

import { theme } from '../theme.jsx';
import { alpha } from '@mui/material/styles';

export function ScopeOfClinicalFocus() {
// The interactive venn diagram as currently designed/requested
// does not make it very obvious that one can hover over the diagram text
Expand Down Expand Up @@ -69,13 +72,32 @@ export function ScopeOfClinicalFocus() {
<li>Coping Skills Training</li>
</ul>
);
const culturallyResponsiveText = <p>Placeholder text for culturally responsive treatments</p>;
const culturallyAdaptedText = <p>Placeholder text for culturally adapted treatments</p>;
const culturallySpecificText = <p>Placeholder text for culturally specific and emergent supports</p>;

return (
<Box>
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<svg width="900" height="450" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="300" cy="161" rx="270" ry="160" fill="#78cee944" stroke="#00556f" strokeWidth="1" />
<ellipse cx="600" cy="161" rx="270" ry="160" fill="#78cee944" stroke="#00556f" strokeWidth="1" />
<ellipse
cx="300"
cy="161"
rx="270"
ry="160"
fill={alpha(theme.palette.blue.main, 0.5)}
stroke={theme.palette.blue.main}
strokeWidth="1"
/>
<ellipse
cx="600"
cy="161"
rx="270"
ry="160"
fill={alpha(theme.palette.purple.main, 0.5)}
stroke={theme.palette.purple.main}
strokeWidth="1"
/>

<text textAnchor="middle" x="220" y="80" fontSize="18" fontWeight="bold">
Posttraumatic Stress Disorder
Expand Down Expand Up @@ -141,9 +163,21 @@ export function ScopeOfClinicalFocus() {
Techniques
</text>

<path d="M 30 340 h 255 l 50 50 l -50 50 h -255 l 50 -50 l -50 -50 z" fill="#78cee9ff" />
<path d="M 300 340 h 255 l 50 50 l -50 50 h -255 l 50 -50 l -50 -50 z" fill="#78cee9ff" />
<path d="M 570 340 h 255 l 50 50 l -50 50 h -255 l 50 -50 l -50 -50 z" fill="#78cee9ff" />
<path
d="M 30 340 h 255 l 50 50 l -50 50 h -255 l 50 -50 l -50 -50 z"
fill={alpha(theme.palette.yellow.main, 0.5)}
stroke={theme.palette.yellow.main}
/>
<path
d="M 300 340 h 255 l 50 50 l -50 50 h -255 l 50 -50 l -50 -50 z"
fill={alpha(theme.palette.yellow.main, 0.5)}
stroke={theme.palette.yellow.main}
/>
<path
d="M 570 340 h 255 l 50 50 l -50 50 h -255 l 50 -50 l -50 -50 z"
fill={alpha(theme.palette.yellow.main, 0.5)}
stroke={theme.palette.yellow.main}
/>

<text textAnchor="middle" x="180" y="380" fontSize="18">
Culturally Responsive
Expand All @@ -165,6 +199,27 @@ export function ScopeOfClinicalFocus() {
<text textAnchor="middle" x="720" y="410" fontSize="18">
Emergent Supports
</text>

{/* For the mouseover/mouseout on the bottom arrows, use transparent overlays,
bc otherwise moving cursor over the text triggers a mouseOut*/}
<path
d="M 30 340 h 255 l 50 50 l -50 50 h -255 l 50 -50 l -50 -50 z"
fill="transparent"
onMouseOver={handleMouseOver(culturallyResponsiveText)}
onMouseOut={handleMouseOut}
/>
<path
d="M 300 340 h 255 l 50 50 l -50 50 h -255 l 50 -50 l -50 -50 z"
fill="transparent"
onMouseOver={handleMouseOver(culturallyAdaptedText)}
onMouseOut={handleMouseOut}
/>
<path
d="M 570 340 h 255 l 50 50 l -50 50 h -255 l 50 -50 l -50 -50 z"
fill="transparent"
onMouseOver={handleMouseOver(culturallySpecificText)}
onMouseOut={handleMouseOut}
/>
</svg>
<Popper id="venn-popper" open={Boolean(anchorEl)} anchorEl={anchorEl}>
<Paper>{popperText}</Paper>
Expand Down
18 changes: 16 additions & 2 deletions packages/client/src/pages/TreatmentsServices.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -574,14 +574,28 @@ function TreatmentsAndServices() {
);
}

function ScopeOfClinicalFocusPanel() {
return (
<>
<SectionedHeader
title="Scope of Clinical Focus"
text="We use a combination of the following strategies to support our patients in the continuum of trauma and discrimination related concerns."
/>
<Box sx={{ margin: '3rem 0' }}>
<ScopeOfClinicalFocus />
</Box>
</>
);
}

function HowToBecomeARestorePatient() {
const { loading, error, data } = useQuery(GET_HOWTOBECOME);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error : {error.message}</p>;

return (
<>
<Typography variant="h4">How to Become a RESTORE Patient</Typography>
<Typography variant="h3">How to Become a RESTORE Patient</Typography>
<Paper sx={{ margin: '1rem 0', padding: '1rem', border: 'solid', borderRadius: '0.5em' }}>
<ReactMarkdown>{data.howToBecomeARestorePatient.data.attributes.Body}</ReactMarkdown>
</Paper>
Expand Down Expand Up @@ -673,7 +687,7 @@ export default function Services() {
<MeasurementBasedCare />
<TreatmentsAndServices />
<br />
<ScopeOfClinicalFocus />
<ScopeOfClinicalFocusPanel />
<br />
<HowToBecomeARestorePatient />
</>
Expand Down