Mostly UI updates (#495)

* - Added responsiveness to heatmap legend
- Heatmap itself is still not responsive (a work in progress)
- Heatmap no longer extends rightward beyond width of tabs
- Updated some aesthetics of heatmap section (font sizes, labels' text)
- Updated comments to be more instructive

* Update violin plots' formatting
- Shortened and centered title
- Added expression value to y-axis
- Updated font sizes

* Add text to display number of samples in final cohort

* - Added responsiveness to heatmap legend
- Heatmap itself is still not responsive (a work in progress)
- Heatmap no longer extends rightward beyond width of tabs
- Updated some aesthetics of heatmap section (font sizes, labels' text)
- Updated comments to be more instructive

* Update violin plots' formatting
- Shortened and centered title
- Added expression value to y-axis
- Updated font sizes

* Add text to display number of samples in final cohort

* Update min and max values displayed in violin plots
- Because, previously, these were getting cut off in the visualization

* Decrease top margin of violin plots section

* Represent clinical features with numerical values as histograms in data explore section
- Previously, many of these clinical features were represented as pie charts, which made the values difficult to read

* Remove 'FPPP' from tumor types dropdown
- It does not contain any patient barcodes/expression data

* DIsable certain options from clinical feature dropdown
- Removed 'date' and 'tool' because they yield the same value across all tumor types
- Removed 'tcga_participant_barcode' because it does not align with the purpose of the data explore section at the moment

* Remove 'date', 'tcga_participant_barcode', and 'tool' from sample track/partition lists for heatmap and violin plots
- For same reason as why they were removed from clinical feature select dropdown

* Increase font size of heatmap sample track labels

* Revise based on Kevin's review

main/js/afterSubmit.js

@@ -193,7 +193,40 @@ const buildViolinPlot = function(geneQuery, expressionData) {
   var violinLoaderDiv = document.getElementById("violinLoaderDiv");
   violinLoaderDiv.classList.remove("loader");
 
-  //Setup Materialize Grid
+  ///////////////////////////////////
+  // DISPLAY NUMBER OF SAMPLES IN COHORT
+  ///////////////////////////////////
+
+  var meme = document.getElementById("violinLoaderDiv");  
+
+  var numCohortBarcodes2 = document.createElement("div");
+  numCohortBarcodes2.id = "numCohortBarcodes2";
+  numCohortBarcodes2.className = "row";
+
+  meme.appendChild(numCohortBarcodes2);
+
+  let displayNumberSamplesInCohort = function () {
+      let existingPara = document.getElementById("numSamplesInCohortText2");
+      if (existingPara) {
+          existingPara.remove();
+      }
+      // build label:
+      let para = document.createElement("p");
+      // Style the paragraph
+      para.style.textAlign = 'center';
+      para.style.color = '#4db6ac';
+      para.style.fontFamily = 'Georgia, "Times New Roman", Times, serif';
+      para.id = "numSamplesInCohortText2";
+
+      para.innerText = "Number of samples in cohort: " + (d3.map(expressionData, d => d.tcga_participant_barcode).keys()).length;
+      numCohortBarcodes2.appendChild(para);
+  };
+
+  displayNumberSamplesInCohort()
+
+  ///////////////////////////////////
+
+  // Setup Materialize Grid
   addDivInside("violinGridRow", violinLoaderDiv.id);
   var gridRow = document.getElementById("violinGridRow");
   gridRow.classList.add("row");

main/js/fillSelectBoxes.js

@@ -13,17 +13,18 @@
  */
 const fillCancerTypeSelectBox = async function () {
   const cancerTypesQuery = await firebrowse.fetchCohorts();
-  cancerTypesQuery.sort();
+  const cancerTypesQueryNoFPPP = cancerTypesQuery.reduce((acc, item) => item.cohort !== 'FPPP' ? [...acc, item] : acc, []);
+  cancerTypesQueryNoFPPP.sort();
   let selectBox = document.getElementById("cancerTypeMultipleSelection");
-  for (let i = 0; i < cancerTypesQuery.length; i++) {
+  for (let i = 0; i < cancerTypesQueryNoFPPP.length; i++) {
     let currentOption = document.createElement("option");
-    currentOption.value = cancerTypesQuery[i]["cohort"];
+    currentOption.value = cancerTypesQueryNoFPPP[i]["cohort"];
     currentOption.text =
       "(" +
-      cancerTypesQuery[i]["cohort"] +
+      cancerTypesQueryNoFPPP[i]["cohort"] +
       ") " +
-      cancerTypesQuery[i]["description"];
-    currentOption.id = cancerTypesQuery[i]["cohort"];
+      cancerTypesQueryNoFPPP[i]["description"];
+    currentOption.id = cancerTypesQueryNoFPPP[i]["cohort"];
     selectBox.appendChild(currentOption);
   }
   let cancerTypeSelectedOptions = localStorage
@@ -88,29 +89,29 @@ let displayNumberSamples = async function () {
     };
     orderedCountQuery = orderThings(formatted_numbersOfSamples, myCohort, 'cohort')
     // build label:
-    let string = "";
+    let numSamplesLabel = "";
     let para;
     for (let i = 0; i < orderedCountQuery.length; i++) {
-      if (string == "") {
-        string += orderedCountQuery[i].cohort + ": " + orderedCountQuery[i].mrnaseq;
+      if (numSamplesLabel == "") {
+        numSamplesLabel += orderedCountQuery[i].cohort + ": " + orderedCountQuery[i].mrnaseq;
         para = document.createElement("P");
         para.setAttribute(
           "style",
           'text-align: center; color: #4db6ac; font-family: Georgia, "Times New Roman", Times, serif'
         );
         para.setAttribute("id", "numSamplesText");
-        para.innerText = "Number of samples: " + string;
+        para.innerText = "Number of samples: " + numSamplesLabel;
         cancerQuerySelectBox.appendChild(para);
       } else {
         document.getElementById("numSamplesText").remove();
-        string += ", " + orderedCountQuery[i].cohort +
+        numSamplesLabel += ", " + orderedCountQuery[i].cohort +
                  ": " + orderedCountQuery[i].mrnaseq;
         para.setAttribute(
           "style",
           'text-align: center; color: #4db6ac; font-family: Georgia, "Times New Roman", Times, serif'
         );
         para.setAttribute("id", "numSamplesText");
-        para.innerText = "Number of samples: " + string;
+        para.innerText = "Number of samples: " + numSamplesLabel;
         cancerQuerySelectBox.appendChild(para);
       }
     }
@@ -298,7 +299,10 @@ let fillClinicalSelectBox = async function () {
         }
       }
     }
-
+
+    const unwantedKeys = new Set(['date', 'tcga_participant_barcode', 'tool']);
+    clinicalKeys[0] = clinicalKeys[0].filter(item => !unwantedKeys.has(item));
+
     let intersectedFeatures;
     if(clinicalKeys.length > 1)
       for(let i = 0; i < clinicalKeys.length - 1; i++) {
@@ -330,17 +334,39 @@ let fillClinicalSelectBox = async function () {
       let temp = {name: currentFeature, type: "", isSelected: false};
 
       let checkIfClinicalFeatureArrayIsNumeric = async function() {
-        var numbers = /^[0-9/.]+$/;
-        var continuousMap = allClinicalData.map(x => {
-          try {
-            x[currentFeature].match(numbers)
-          } catch(error) {} // Ignore error
-        });
-        var nullCount = continuousMap.filter(x => x == null).length;
-        var totalCount = continuousMap.length;
-        var percentContinuous = nullCount / totalCount;
-        let continuousFeaturesArr = ["days_to_death", "cervix_suv_results", "days_to_last_followup", "date_of_initial_pathologic_diagnosis", "number_of_lymph_nodes", "years_to_birth", "karnofsky_performance_score"]; // Array of features that should be considered continuous
-        if((percentContinuous < 0.75 && (currentFeature != 'vital_status')) || continuousFeaturesArr.includes(currentFeature))
+        const CONTINUOUS_FEATURES = [
+          "age_began_smoking_in_years",
+          "age_at_diagnosis",
+          "cervix_suv_results",
+          "date_of_initial_pathologic_diagnosis",
+          "days_to_death",
+          "days_to_last_followup", 
+          "days_to_last_known_alive",
+          "days_to_psa",
+          "days_to_submitted_specimen_dx",
+          "gleason_score",
+          "height_cm_at_diagnosis",
+          "initial_pathologic_dx_year",
+          "karnofsky_performance_score",
+          "lymph_nodes_examined",
+          "lymph_nodes_examined_he_count",
+          "number_of_lymph_nodes",
+          "number_pack_years_smoked",
+          "pregnancies_count_ectopic",
+          "pregnancies_count_live_birth",
+          "pregnancies_count_stillbirth",
+          "pregnancies_count_total",
+          "pregnancy_spontaneous_abortion_count",
+          "pregnancy_therapeutic_abortion_count",
+          "psa_value",
+          "tobacco_smoking_history",
+          "tobacco_smoking_pack_years_smoked",
+          "tobacco_smoking_year_stopped",
+          "weight_kg_at_diagnosis",
+          "years_to_birth",
+          "year_of_tobacco_smoking_onset"
+        ]; // Array of features that should be considered continuous
+        if(CONTINUOUS_FEATURES.includes(currentFeature))
           temp.type = "continuous";
         else
           temp.type = "categorical";