Logo, patient text changes, minor header styling fixes (#9)

Author: achen2401

src/ui-client/public/images/logos/apps/leaf.png

@@ -39,7 +39,7 @@ export class Display extends React.PureComponent<Props> {
                 />
                 <Input 
                     changeHandler={changeHandler} propName={'uiDisplayPatientCount'} value={adminConcept!.uiDisplayPatientCount}
-                    label='Patient Count' type='number' subLabel='Total patient count displayed next to name'
+                    label='Participant Count' type='number' subLabel='Total participant count displayed next to name'
                 />
                 <Input 
                     changeHandler={changeHandler} propName={'uiDisplayUnits'} value={adminConcept!.uiDisplayUnits}

src/ui-client/src/components/Admin/ConceptEditor/Sections/Display.tsx

@@ -109,10 +109,10 @@ export class DatasetEditor extends React.PureComponent<Props,State> {
                                     {/* Explanation */}
                                     <WhatsThis 
                                         question={'What is a Dataset?'}
-                                        body={`Datasets are the row-level data (and associated SQL queries) for display in the Patient List. The 'Basic Demographics'
-                                               Dataset is a special required Dataset which populates the Visualize and inital Patient List screens. Additional Datasets 
+                                        body={`Datasets are the row-level data (and associated SQL queries) for display in the Participant List. The 'Basic Demographics'
+                                               Dataset is a special required Dataset which populates the Visualize and inital Participant List screens. Additional Datasets 
                                                can by added by specifying a SQL query (i.e., SELECT... FROM... WHERE...) to retrieve expected fields. Leaf will automatically 
-                                               compute per-patient summary statistics and append columns to the Patient List.`}
+                                               compute per-participant summary statistics and append columns to the Participant List.`}
                                     />
                                 </div>
                                 }
@@ -123,7 +123,7 @@ export class DatasetEditor extends React.PureComponent<Props,State> {
                                     data.datasets.demographicsDataset.unsaved && 
                                     !currentDataset &&
                                 <div className={`${c}-start`}>
-                                    <p>It looks like you haven't created a Basic Demographics query to populate the Visualize and Patient List screens.</p>
+                                    <p>It looks like you haven't created a Basic Demographics query to populate the Visualize and Participant List screens.</p>
                                     <p>
                                         <span className='link-span' onClick={this.handleInitialBasicDemographicsSetupClick}>
                                             Click here to start creating a SQL query to return demographics data.

src/ui-client/src/components/Admin/DatasetEditor/DatasetEditor.tsx

@@ -62,7 +62,7 @@ export class GlobalPanelFilterEditor extends React.PureComponent<Props,State> {
                     <WhatsThis 
                         question={'What is a Global Panel Filter?'}
                         body={`Global Panel Filters are additional logic that are added to users' queries which users have no control over, and can be 
-                               applied to users logged in for QI, Research, or in all cases. Global Panel Filters are typically used to exclude patients 
+                               applied to users logged in for QI, Research, or in all cases. Global Panel Filters are typically used to exclude participants 
                                who have not consented to having their data used for research (for users in Research mode), or excluding VIPs, etc.`}
                     />
                 </div>

src/ui-client/src/components/Admin/GlobalPanelFilterEditor/GlobalPanelFilterEditor.tsx

@@ -73,7 +73,7 @@ export class GlobalPanelFilterRow extends React.PureComponent<Props> {
                         </Container>
                         <p className={`${c}-subtext`}>
                             If 'true', the global panel filter will be used as part of the inclusion criteria for the query. If 'false', any 
-                            patients found will be excluded instead.
+                            participants found will be excluded instead.
                         </p>
                     </Col>
                 </Row>

src/ui-client/src/components/Admin/GlobalPanelFilterEditor/GlobalPanelFilterRow/GlobalPanelFilterRow.tsx

@@ -56,7 +56,7 @@ export class Identity extends React.PureComponent<Props> {
                     <Col md={6}>
                         <Input
                             changeHandler={changeHandler} propName={'totalPatients'} value={identity.totalPatients}
-                            label='Total Patients' subLabel='Approximate number of total patients' type='number'
+                            label='Total Participants' subLabel='Approximate number of total participants' type='number'
                         />
                         <Input 
                             changeHandler={changeHandler} propName={'primaryColor'} value={identity.primaryColor} forceValidation={forceValidation}

src/ui-client/src/components/Admin/NetworkAndIdentityEditor/Sections/Identity.tsx

@@ -126,7 +126,7 @@ class PanelFilterRow extends React.PureComponent<Props> {
                             </Container>
                             <p className={`${c}-subtext`}>
                                 If 'true', the panel filter concept will be used as part of the inclusion criteria for the query. If 'false', any 
-                                patients found will be excluded instead.
+                                participants found will be excluded instead.
                             </p>
                         </Col>
                     </Row>

src/ui-client/src/components/Admin/PanelFilterEditor/PanelFilterRow/PanelFilterRow.tsx

@@ -78,7 +78,7 @@ export default class CohortSql extends React.PureComponent<Props, State> {
                         <span className={`${c}-sql-count`}>
                             <span> - </span>
                             <strong>{d.countResults.value.toLocaleString()}</strong>
-                            <span> patients</span>
+                            <span> participants</span>
                         </span>
                         <span className={`${c}-sql-close`} onClick={toggle}>✖</span>
                     </div>

src/ui-client/src/components/CohortCountBox/CohortSql.tsx

@@ -25,8 +25,8 @@ export default class ApiTokenEntryForm extends React.PureComponent<Props> {
         return (
             <REDCapImportSection>
                 <p>
-                    The Leaf REDCap Project Import tool allows you to copy project data directly from REDCap into Leaf, linking patients in REDCap 
-                    to the same patients available in Leaf. Start by entering your REDCap Project API Token.
+                    The Leaf REDCap Project Import tool allows you to copy project data directly from REDCap into Leaf, linking participants in REDCap 
+                    to the same participants available in Leaf. Start by entering your REDCap Project API Token.
                 </p>
                 <p>
                     <strong>Your REDCap data will only be visible to you and other users already able to access the Project.</strong>

src/ui-client/src/components/DataImport/REDCap/Sections/ApiTokenEntryForm.tsx

@@ -30,8 +30,8 @@ export default class MrnFieldEntryForm extends React.PureComponent<Props> {
                     Great! Leaf successfully found your REDCap project.
                 </p>
                 <p>
-                    <strong>Next, select the REDCap field which represents patient identifiers (e.g., an MRN). </strong>
-                    <strong>Leaf will use these values to link patients in the clinical database to your REDCap patients.</strong>
+                    <strong>Next, select the REDCap field which represents participant identifiers (e.g., an MRN). </strong>
+                    <strong>Leaf will use these values to link participants in the clinical database to your REDCap participants.</strong>
                 </p>
                 <MrnFieldSearchBox 
                     redCap={redCap} 

src/ui-client/src/components/DataImport/REDCap/Sections/MrnFieldEntryForm.tsx

@@ -125,7 +125,7 @@ export default class LearnMoreButton extends React.PureComponent<Props,State> {
                                 interval={0} 
                                 axisLine={false} 
                                 tickLine={false} 
-                                label={{ value: 'Unique patients by Year', position: 'bottom', className:`${c}-axis-label` }}/>
+                                label={{ value: 'Unique participants by Year', position: 'bottom', className:`${c}-axis-label` }}/>
                             <Bar 
                                 barSize={28}
                                 dataKey="patientCount" 

src/ui-client/src/components/FindPatients/ConceptTree/LearnMoreButton.tsx

@@ -75,9 +75,9 @@ export default class NetworkHealthResponder extends React.PureComponent<Props> {
 
     private formatPatientCount = (totalPatients?: number): string => {
         if (!totalPatients) return '';
-        if (totalPatients < 1000) { return `${totalPatients} patients`; }
-        if (totalPatients < 10000) { return `${formatSmallNumber(totalPatients)} patients`; }
-        return `${formatLargeNumber(totalPatients)} patients`;
+        if (totalPatients < 1000) { return `${totalPatients} participants`; }
+        if (totalPatients < 10000) { return `${formatSmallNumber(totalPatients)} participants`; }
+        return `${formatLargeNumber(totalPatients)} participants`;
     }
 
     private handleClick = () => {

src/ui-client/src/components/Header/NetworkHealthResponder/NetworkHealthResponder.tsx

@@ -21,8 +21,8 @@ export default class CohortTooLargeBox extends React.PureComponent<Props> {
         return (
             <div className={className}>
                 <p>
-                    Whoops! Leaf can't show visualizations or patient lists for a cohort this large.
-                    Your Leaf administrator has only configured Leaf to display up to <span>{formatSmallNumber(cacheLimit)}</span> patients.
+                    Whoops! Leaf can't show visualizations or participant lists for a cohort this large.
+                    Your Leaf administrator has only configured Leaf to display up to <span>{formatSmallNumber(cacheLimit)}</span> participants.
                 </p>
             </div>
         );

src/ui-client/src/components/Other/CohortTooLargeBox/CohortTooLargeBox.tsx

@@ -127,14 +127,14 @@ export default class DatasetColumnSelector extends React.PureComponent<Props, St
         if (type === PatientListDatasetSummaryType.Quantitative) {
             return (
                 <p>This is a <span className={c}>numeric</span> dataset, and the columns here represent statistical summaries. 
-                    To drill down to actual raw data values, click on a patient in the patient list.
+                    To drill down to actual raw data values, click on a participant in the participant list.
                 </p>
             );
         }
         else {
             return (
                 <p>This is a <span className={c}>non-numeric</span> dataset, and the columns here show a count of the total rows of data and
-                    the earliest and most recent values. To drill down to actual raw data values, click on a patient in the patient list.
+                    the earliest and most recent values. To drill down to actual raw data values, click on a participant in the participant list.
                 </p>
             );
         }

src/ui-client/src/components/PatientList/DatasetColumnSelector.tsx

@@ -59,8 +59,8 @@ export default class REDCapExport extends React.PureComponent<Props,State> {
             {!isExporting &&
                 <div className={`${c}-description`}>
                     <p>
-                        The REDCap Project Creation tool allows you to create a brand-new REDCap Project based on the data in your Patient List. 
-                        Leaf will export all of your datasets and patient data, and only you will have access to the new Project.
+                        The REDCap Project Creation tool allows you to create a brand-new REDCap Project based on the data in your Participant List. 
+                        Leaf will export all of your datasets and participant data, and only you will have access to the new Project.
                     </p>
                     <p>
                         Your project will export to <a href={redcapInstanceUrl} target="_blank" rel='noopener noreferrer'>{redcapInstanceUrl}</a>

src/ui-client/src/components/PatientList/ExportDataModal/REDCap/REDCapExport.tsx

@@ -29,7 +29,7 @@ export const RowCount = (props: Props) => {
             <span className={`${c}-rowcount`}>{formatSmallNumber(totalPatients)} 
                 {!isIdentified &&
                 <span> de-identified</span>}
-                <span> patients</span>
+                <span> participants</span>
             </span> 
             <span> with </span>
             <span className={`${c}-rowcount`}>{formatSmallNumber(totalPatients + totalDatapoints)} rows</span>
@@ -38,29 +38,29 @@ export const RowCount = (props: Props) => {
             {/* Total Displayed Patients less than Total in Cohort */}
             {totalPatients !== totalCohortPatients &&
             <div className={`${c}-info`}>
-                <div className={`${c}-info-inner`}>Why can't I see data for all {formatSmallNumber(totalCohortPatients)} patients?
+                <div className={`${c}-info-inner`}>Why can't I see data for all {formatSmallNumber(totalCohortPatients)} participants?
 
                     {/* Single Node - export limit */}
                     {!isFederated && totalCohortPatients > exportLimit &&
                     <div className={`${c}-info-detail`}>
                         <span>Your administrator has limited viewing and exporting to </span>
-                        <span className={`${c}-info-emphasis`}>{formatSmallNumber(exportLimit)} patients at a time</span> 
+                        <span className={`${c}-info-emphasis`}>{formatSmallNumber(exportLimit)} participants at a time</span> 
                         <span>, which is less than the total number in your cohort.</span>
                     </div>
                     }
 
                     {/* Single Node - missing patients */}
                     {!isFederated && totalPatients < totalCohortPatients && totalCohortPatients < exportLimit &&
                     <div className={`${c}-info-detail`}>
-                        <span>The Leaf server returned demographic data for less patients than were included in the original cohort. </span>
-                        <span>This usually indicates that demographic data are missing for these patients.</span>
+                        <span>The Leaf server returned demographic data for less participants than were included in the original cohort. </span>
+                        <span>This usually indicates that demographic data are missing for these participants.</span>
                     </div>
                     }
 
                     {/* Federated */}
                     {isFederated &&
                     <div className={`${c}-info-detail`}>
-                        <span>One or more of the Leaf servers you are querying may be limiting the total amount of patients you are able to view.</span>
+                        <span>One or more of the Leaf servers you are querying may be limiting the total amount of participants you are able to view.</span>
                     </div>
                     }
                 </div>
@@ -77,8 +77,8 @@ export const RowCount = (props: Props) => {
                             This means that all dates have been randomly shifted a certain amount of time, and identifiers such as MRNs and names have been removed.
                         </p>
                         <p>
-                            Note: While the amount of time shifted is different between patients, the 
-                            <span className={`${c}-info-emphasis`}> date-shift value for a given patient is consistent</span>
+                            Note: While the amount of time shifted is different between participants, the 
+                            <span className={`${c}-info-emphasis`}> date-shift value for a given participant is consistent</span>
                             , so the relative age at an event is preserved.
                         </p>
                     </div>

src/ui-client/src/components/PatientList/RowCount.tsx

@@ -151,7 +151,7 @@ export default class AggregateTimelineChart extends React.Component<Props, State
                 <div className={c}>
                     <span className={`${c}-count`}>{count.toLocaleString()}</span>
                     <span className={`${c}-denom`}>/{denom.toLocaleString()}</span>
-                    <span> patients </span>
+                    <span> participants </span>
                     <span className={`${c}-subtext`}>(</span>
                     <span className={`${c}-percent`}>{pct}%</span>
                     <span className={`${c}-subtext`}>)</span>

src/ui-client/src/components/Timelines/AggregateTimelineChart.tsx

@@ -58,10 +58,10 @@ export default class TimelinesChartTitle extends React.Component<Props> {
 
                 {/* (limited to n patients) */}
                 {patientCount > exportLimit &&
-                <div className={`${emphClass} ${c}-cohort-limit`}>(limited to {exportLimit} patients)
+                <div className={`${emphClass} ${c}-cohort-limit`}>(limited to {exportLimit} participants)
                     <div className={`${c}-cohort-limit-info`}>
-                        <span>Your administrator has limited exports of patient data to</span> 
-                        <span className={emphClass}>{exportLimit} patients.</span>
+                        <span>Your administrator has limited exports of participant data to</span> 
+                        <span className={emphClass}>{exportLimit} participants.</span>
                         <br></br>
                         <span>Leaf extracted a</span>
                         <span className={emphClass}>simple random sample</span>

src/ui-client/src/components/Timelines/TimelinesChartTitle.tsx

@@ -75,7 +75,7 @@ export default class AggregateDemographics extends React.PureComponent<Props> {
                     <Col md={12} className="visualization-nih">
                         <SectionHeader 
                             headerText="NIH Race, Ethnicity, and Gender" 
-                            subText="Excludes patients missing gender or ethnicity information"
+                            subText="Excludes participants missing gender or ethnicity information"
                         />
                     </Col>
                     <Col lg={{ size: 8, order: 2, offset: 2 }} md={12}>

src/ui-client/src/components/Visualize/AggregateDemographics.tsx

@@ -149,7 +149,7 @@ class Attestation extends React.PureComponent<Props, State> {
 
                     {/* Top logo row (Leaf, ITHS, CD2H) */}
                     <div className={`${c}-leaf-logo-wrapper`}>
-                        <img alt='leaf-logo' className={`${c}-leaf-logo`} src={process.env.PUBLIC_URL + '/images/logos/apps/leaf.svg'} />
+                        <img alt='leaf-logo' className={`${c}-leaf-logo`} src={process.env.PUBLIC_URL + '/images/logos/apps/leaf.png'} />
                         <div className={`${c}-title`}>
                             leaf
                             <span className={`${c}-leaf-version`}>v{pkg.version}</span>

src/ui-client/src/containers/Attestation/Attestation.tsx

@@ -96,8 +96,8 @@ export default class ContactModal extends React.PureComponent<Props,State> {
                             type="textarea"
                             onChange={this.handleQuestionChange}
                             placeholder={
-                                "- How many patients have visited the emergency room and had a diagnosis of type 2 diabetes in the same visit?\n" +
-                                "- How many patients had medication orders for betapace and previously had an QT Interval over 500 in the past 12 months?\n" +
+                                "- How many participants have visited the emergency room and had a diagnosis of type 2 diabetes in the same visit?\n" +
+                                "- How many participants had medication orders for betapace and previously had an QT Interval over 500 in the past 12 months?\n" +
                                 "- How many have had a creatinine test greater than 1.2 in the past 30 days, and what were their previous diagnoses?"
                             }
                             spellCheck={false}