From b4dc26fcb55f623212d70d87c5bd5b4421d36f69 Mon Sep 17 00:00:00 2001 From: Ino de Bruijn Date: Tue, 5 Apr 2016 17:18:52 -0400 Subject: [PATCH] Refactor clinical attributes from JS to CSS - Add clean function with rules for cleaning up clinical attribute data on front-end. Currently only some rounding is performed on surivial days and null values are removed. Removal of null values might no longer be necessary if this is added to the data importer instead. - Add derived clinical attribute function. There are some implied clinical attributes such as DERIVED_NORMALIZED_CASE_TYPE and DERIVED_SAMPLE_LOCATION which are basically clinical attributes derived from other ones. It might make sense to make these real clinical attributes in the database at some point. The DERIVED_NORMALIZED_CASE_TYPE now has 4 types: {primary, metastasis, recurrence, progressed}. Only the DERIVED_NORMALIZED_CASE_TYPE is shown on the page. - Move JS styling of clinical attributes to CSS, which is much easier to understand, plus it allows other instances of the portal to just change a css file. It works by making a span for each clincial attribute with the key/value info attached as attributes. The short study name is also included as an attribute such that study specific styling becomes possible. - Ordering of clinical attributes is done by setting an order attribute and using the inline-flex display. One peculiarity is that one can't use :first in the CSS rules when using flex, so an extra class attribute had to be added to allow not showing a comma for the first clinical attribute. - Update docs on custom patient view styling - GLEASON_SCORE_1 and GLEASON_SCORE_2 were never displayed in the first place, so that styling has been removed. - Update screenshot, minor pixel changes in text and size Signed-off-by: Ino de Bruijn --- .jshintrc | 1 - ...Customizing-your-instance-of-cBioPortal.md | 5 + .../jsp/patient_view/clinical_timeline.jsp | 4 +- .../WEB-INF/jsp/patient_view/patient_view.jsp | 350 ++---------------- .../css/patient-view/clinical-attributes.css | 143 +++++++ .../src/main/webapp/css/patient-view/main.css | 106 ++++++ .../util/ClinicalAttributesUtil.js | 203 ++++++++++ .../src/patient-view/util/PatientViewUtil.js | 27 ++ ...patient_view_lgg_ucsf_2014_case_id_P04.png | Bin 132076 -> 132252 bytes ...patient_view_lgg_ucsf_2014_case_id_P04.png | Bin 164444 -> 163823 bytes 10 files changed, 511 insertions(+), 328 deletions(-) create mode 100644 portal/src/main/webapp/css/patient-view/clinical-attributes.css create mode 100644 portal/src/main/webapp/css/patient-view/main.css create mode 100644 portal/src/main/webapp/js/src/patient-view/util/ClinicalAttributesUtil.js create mode 100644 portal/src/main/webapp/js/src/patient-view/util/PatientViewUtil.js diff --git a/.jshintrc b/.jshintrc index 85deb042a3e..e66d4d72ba9 100644 --- a/.jshintrc +++ b/.jshintrc @@ -28,4 +28,3 @@ All options are available in here: http://jshint.com/docs/options/ "smarttabs": true, "white": true } -e diff --git a/docs/Customizing-your-instance-of-cBioPortal.md b/docs/Customizing-your-instance-of-cBioPortal.md index a475cce27da..739b62f30ef 100644 --- a/docs/Customizing-your-instance-of-cBioPortal.md +++ b/docs/Customizing-your-instance-of-cBioPortal.md @@ -257,3 +257,8 @@ skin.documentation.markdown=false If your documentation contains a relative link, cBioPortal will assume it uses the same format and, when clicked, will try to interpret the page as such. If your documentation contains an absolute link, cBioPortal will open it in a new window when clicked. Please be aware that the links may be case-sensitive! E.g. https://github.com/cBioPortal/cbioportal/wiki/News.md is not the same as https://github.com/cBioPortal/cbioportal/wiki/news.md + +# Custom styling of the patient view's clinical data +The [Patient View](http://www.cbioportal.org/case.do?cancer_study_id=lgg_ucsf_2014&case_id=P04) shows several [clinical attributes](File-Formats.md#clinical-data) at the top of the page, e.g. `AGE`, `SEX`: +![test](../test/end-to-end/screenshots/firefox/patient_view_lgg_ucsf_2014_case_id_P04.png) +The order, styling and visibility of those [attributes](File-Formats.md#clinical-data) at the top can be changed by editing the [patient view's clinical attributes CSS file](../portal/src/main/webapp/css/patient-view/clinical-attributes.css). diff --git a/portal/src/main/webapp/WEB-INF/jsp/patient_view/clinical_timeline.jsp b/portal/src/main/webapp/WEB-INF/jsp/patient_view/clinical_timeline.jsp index 180829df094..e87755e4202 100644 --- a/portal/src/main/webapp/WEB-INF/jsp/patient_view/clinical_timeline.jsp +++ b/portal/src/main/webapp/WEB-INF/jsp/patient_view/clinical_timeline.jsp @@ -74,8 +74,8 @@ var caseId = caseIds[i]; var clinicalData = clinicalDataMap[caseId]; var compareAgainstIds = [caseId]; - var OtherSampleId = guessClinicalData(clinicalData,["OTHER_SAMPLE_ID"]); - if (OtherSampleId) { + var OtherSampleId = clinicalData["OTHER_SAMPLE_ID"]; + if (cbio.util.checkNullOrUndefined(OtherSampleId)) { compareAgainstIds = compareAgainstIds.concat(OtherSampleId); } var circle = d3.selectAll(".timelineSeries_0").filter(function (x) { diff --git a/portal/src/main/webapp/WEB-INF/jsp/patient_view/patient_view.jsp b/portal/src/main/webapp/WEB-INF/jsp/patient_view/patient_view.jsp index cf48a8935e7..4cdf9fc5bb2 100644 --- a/portal/src/main/webapp/WEB-INF/jsp/patient_view/patient_view.jsp +++ b/portal/src/main/webapp/WEB-INF/jsp/patient_view/patient_view.jsp @@ -125,7 +125,7 @@ boolean showDrugs = GlobalProperties.showDrugsTab(); boolean showSamplesTable = isPatientView; String userName = GlobalProperties.getAuthenticatedUserName(); -String darwinAccessURL = CheckDarwinAccess.checkAccess(request); +// String darwinAccessURL = CheckDarwinAccess.checkAccess(request); double[] genomicOverviewCopyNumberCnaCutoff = GlobalProperties.getPatientViewGenomicOverviewCnaCutoff(); @@ -302,94 +302,13 @@ if (patientViewError!=null) { + +