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 <[email protected]>

.jshintrc

@@ -28,4 +28,3 @@ All options are available in here: http://jshint.com/docs/options/
     "smarttabs": true,
     "white": true
 }
-e

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).

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) {