Skip to content

Commit

Permalink
add patient styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@inodb
inodb committed Jan 20, 2017
1 parent 85ec5fd commit 136eebc
Show file tree
Hide file tree
Showing 4 changed files with 9 additions and 178 deletions.
144 changes: 0 additions & 144 deletions src/globalStyles/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,147 +50,3 @@ th.reactable-header-sort-asc:after {
.mainTabs > .tab-content {
padding-top:20px;
}

/* Do not display clinical attributes on default */
.clinical-attribute {
display: none;
order: 999;
}
/* Show only following attributes */
.clinical-attribute[attr-id="SEX"],
.clinical-attribute[attr-id="GENDER"],
.clinical-attribute[attr-id="AGE"],
.clinical-attribute[attr-id="OS_STATUS"],
.clinical-attribute[attr-id="OS_MONTHS"],
.clinical-attribute[attr-id="DFS_STATUS"],
.clinical-attribute[attr-id="DFS_MONTHS"],
.clinical-attribute[attr-id="CANCER_TYPE"],
#more-patient-info .clinical-attribute[attr-id="CANCER_TYPE_DETAILED"],
.clinical-attribute[attr-id="KNOWN_MOLECULAR_CLASSIFIER"],
.clinical-attribute[attr-id="GLEASON_SCORE"],
.clinical-attribute[attr-id="HISTOLOGY"],
.clinical-attribute[attr-id="TUMOR_STAGE_2009"],
.clinical-attribute[attr-id="TUMOR_GRADE"],
.clinical-attribute[attr-id="ETS_RAF_SPINK1_STATUS"],
.clinical-attribute[attr-id="TMPRSS2_ERG_FUSION_STATUS"],
.clinical-attribute[attr-id="ERG_FUSION_ACGH"],
.clinical-attribute[attr-id="SERUM_PSA"],
.clinical-attribute[attr-id="DRIVER_MUTATIONS"],
.clinical-attribute[attr-id="SAMPLE_CLASS"],
.clinical-attribute[attr-id="DERIVED_NORMALIZED_CASE_TYPE"],
.clinical-attribute[attr-id="DERIVED_SAMPLE_LOCATION"] {
display: inline;
order: 6;
}
/* Hide following attributes for samples */
/* Show comma before clinical attributes, except first one */
.clinical-attribute:not(.first-order):before {
content: ", ";
color: #428bca;
}
/* Order clinical attributes */
/* Order sample+patient clinical attributes */
.clinical-attribute[attr-id="PATIENT_DISPLAY_NAME"],
.clinical-attribute[attr-id="SAMPLE_DISPLAY_NAME"] {
order: 0;
}
/* Order patient clinical attributes */
#more-patient-info .clinical-attribute[attr-id="SEX"],
#more-patient-info .clinical-attribute[attr-id="GENDER"] {
order: 1;
}
#more-patient-info .clinical-attribute[attr-id="AGE"] {
order: 2;
}
#more-patient-info .clinical-attribute[attr-id="CANCER_TYPE"] {
order: 3;
}
#more-patient-info .clinical-attribute[attr-id="CANCER_TYPE_DETAILED"] {
order: 4;
}
#more-patient-info .clinical-attribute[attr-id="KNOWN_MOLECULAR_CLASSIFIER"] {
order: 5;
}
#more-patient-info .clinical-attribute[attr-id="HISTOLOGY"] {
order: 6;
}
#more-patient-info .clinical-attribute[attr-id="OS_STATUS"] {
order: 7;
}
#more-patient-info .clinical-attribute[attr-id="OS_MONTHS"] {
order: 8;
}
#more-patient-info .clinical-attribute[attr-id="DFS_STATUS"] {
order: 9;
}
#more-patient-info .clinical-attribute[attr-id="DFS_MONTHS"] {
order: 10;
}
/* Order sample clinical attributes */
.more-sample-info .clinical-attribute[attr-id="DERIVED_NORMALIZED_CASE_TYPE"] {
order: 1;
text-transform: capitalize;
}
.more-sample-info .clinical-attribute[attr-id="DERIVED_SAMPLE_LOCATION"] {
order: 2;
}
/* attributes with opening parenthesis */
.clinical-attribute[attr-id="OS_MONTHS"]:before,
.clinical-attribute[attr-id="DFS_MONTHS"]:before,
.clinical-attribute[attr-id="CANCER_TYPE_DETAILED"]:before,
.clinical-attribute[attr-id="PATIENT_DISPLAY_NAME"]:before,
.clinical-attribute[attr-id="DERIVED_SAMPLE_LOCATION"]:before,
.clinical-attribute[attr-id="SAMPLE_DISPLAY_NAME"]:before {
content: "\00a0(";
color: #428bca;
}
/* attributes with a closing parenthesis */
.clinical-attribute[attr-id="CANCER_TYPE_DETAILED"]:after,
.clinical-attribute[attr-id="PATIENT_DISPLAY_NAME"]:after,
.clinical-attribute[attr-id="DERIVED_SAMPLE_LOCATION"]:after,
.clinical-attribute[attr-id="SAMPLE_DISPLAY_NAME"]:after {
content: ")";
}
/* text before an attribute */
.clinical-attribute[attr-id="SERUM_PSA"]:before {
content: ", Serum PSA: ";
}
.clinical-attribute[attr-id="ERG_FUSION_ACGH"]:before {
content: ", ERG-fusion aCGH: ";
}
.clinical-attribute[attr-id="TMPRSS2_ERG_FUSION_STATUS"]:before {
content: ", TMPRSS2-ERG Fusion: ";
}
.clinical-attribute[attr-id="GLEASON"]:before {
content: ", Gleason: ";
}
/* text after an attribute */
.clinical-attribute[attr-id="OS_MONTHS"]:after,
.clinical-attribute[attr-id="DFS_MONTHS"]:after {
content: " months)";
}
.clinical-attribute[attr-id="AGE"]:after {
content: " years old";
}
/* attributes with special colors */
.clinical-attribute[attr-id="OS_STATUS"][attr-value="DECEASED"],
.clinical-attribute[attr-id="OS_STATUS"][attr-value="DEAD"],
.clinical-attribute[attr-id="DFS_STATUS"] {
color: #f00;
}
.clinical-attribute[attr-id="OS_STATUS"][attr-value="LIVING"],
.clinical-attribute[attr-id="OS_STATUS"][attr-value="ALIVE"],
.clinical-attribute[attr-id="DFS_STATUS"][attr-value="DiseaseFree"],
.clinical-attribute[attr-id="DFS_STATUS"][attr-value="Yes"] {
color: rgb(0, 128, 0);
}
.clinical-attribute[attr-id="DERIVED_NORMALIZED_CASE_TYPE"][attr-value='Primary'] {
color: black;
}
.clinical-attribute[attr-id="DERIVED_NORMALIZED_CASE_TYPE"][attr-value="Progressed"],
.clinical-attribute[attr-id="DERIVED_NORMALIZED_CASE_TYPE"][attr-value="Recurrence"] {
color: orange;
}
.clinical-attribute[attr-id="DERIVED_NORMALIZED_CASE_TYPE"][attr-value="Metastasis"] {
color: red;
}
6 changes: 5 additions & 1 deletion src/pages/patientView/PatientViewPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,12 @@ import renderIf from 'render-if';
import { If, Then, Else } from 'react-if';
import queryString from "query-string";
import SelectCallback = ReactBootstrap.SelectCallback;
import Spinner from "react-spinkit";
import SampleManager from './sampleManager';
import PatientHeader from './patientHeader/PatientHeader';
import SyntheticEvent = __React.SyntheticEvent;

import './patientHeader/style/ClinicalAttributes.scss';

export interface IPatientViewPageProps {
store?: RootState;
samples?: ClinicalDataBySampleId[];
Expand Down Expand Up @@ -170,6 +172,8 @@ export default class PatientViewPage extends React.Component<IPatientViewPagePro

return (
<div>

<PatientHeader patient={this.props.patient} />

<If condition={sampleHeader}>
<div style={{marginBottom:20}}>
Expand Down
35 changes: 3 additions & 32 deletions src/pages/patientView/patientHeader/PatientHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import * as _ from 'underscore';
import {OverlayTrigger, Popover} from 'react-bootstrap';

import ClinicalInformationPatientTable from '../clinicalInformation/ClinicalInformationPatientTable';
import SampleInline from './SampleInline';
import { ClinicalDataBySampleId } from "../../../shared/api/api-types-extended";
import {ClinicalInformationData} from "../Connector";
import {getSpans} from '../clinicalInformation/lib/clinicalAttributesUtil.js';

Expand All @@ -17,24 +15,13 @@ export default class PatientHeader extends React.Component<IPatientHeaderProps,

return (
<div className={styles.patientHeader}>
<div>
<i className="fa fa-female fa-2 genderIcon hidden" aria-hidden="true"></i>
{this.props.patient && this.getOverlayTriggerPatient(this.props.patient)}
</div>
{this.props.samples && this.props.samples.map((s, n) => this.getOverlayTriggerSample(s, n))}
<i className="fa fa-female fa-2 genderIcon hidden" aria-hidden="true"></i>
{this.props.patient && this.getOverlayTriggerPatient(this.props.patient)}
</div>
);

}

private getPopoverSample(sample: ClinicalDataBySampleId, sampleNumber: number) {
return (
<Popover key={sampleNumber} id={'popover-sample-' + sampleNumber}>
<ClinicalInformationPatientTable showTitleBar={false} data={sample.clinicalData} />
</Popover>
);
}

private getPopoverPatient(patient: ClinicalInformationData['patient']) {
return patient && (
<Popover key={patient.id} id={'popover-sample-' + patient.id}>
Expand All @@ -54,27 +41,11 @@ export default class PatientHeader extends React.Component<IPatientHeaderProps,
>
<span>
{patient.id}
<span dangerouslySetInnerHTML={{__html:
<span className='clinical-spans' dangerouslySetInnerHTML={{__html:
getSpans(_.object(patient.clinicalData.map((x) => [x.clinicalAttributeId, x.value])), 'lgg_ucsf_2014')}}>
</span>
</span>
</OverlayTrigger>
);
}

private getOverlayTriggerSample(sample: ClinicalDataBySampleId, sampleNumber: number) {
return (
<OverlayTrigger
delayHide={100}
key={sampleNumber}
trigger={['hover', 'focus']}
placement='bottom'
overlay={this.getPopoverSample(sample, sampleNumber + 1)}
>
<span>
<SampleInline sample={sample} sampleNumber={sampleNumber + 1} showClinical={true} />
</span>
</OverlayTrigger>
);
}
}
2 changes: 1 addition & 1 deletion src/pages/patientView/patientHeader/SampleInline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default class SampleInline extends React.Component<ISampleInlineProps, {}
<span style={{paddingRight: '10px'}}>
<SampleLabelHTML color={'black'} label={(sampleNumber).toString()} />
{' ' + sample.id}
<span dangerouslySetInnerHTML={{__html:
<span className="clinical-spans" dangerouslySetInnerHTML={{__html:
getSpans(_.object(sample.clinicalData.map((x) => [x.clinicalAttributeId, x.value])), 'lgg_ucsf_2014')}}>
</span>
</span>
Expand Down

0 comments on commit 136eebc

Please sign in to comment.