Merge pull request #82 from Integrative-Transcriptomics/update_wording_upsetplot

Adds help icon for dropdownboxes

Author: mwittep

server_tsspredator/server_visualization_processing.py

@@ -214,7 +214,9 @@ def from_bedgraph_to_bw(inputDir, genome, fileType, strand, resultsDir, file, df
     adaptedFile = file.replace("_avg.bigwig", "_adapted.bigwig")
     df.to_csv(adaptedFile, sep='\t', index=False, header=False)
     outputBigWig = os.path.join(resultsDir, f'{genome}_{fileType}{strand}.bw')
-    serverLocation = os.getenv('TSSPREDATOR_SERVER_LOCATION', os.path.join(os.getcwd(), "server_tsspredator"))
+    current_location = os.getcwd()
+    serverLocation = os.path.join(current_location, "server_tsspredator") if not current_location.endswith("server_tsspredator") else current_location
+    serverLocation = os.getenv('TSSPREDATOR_SERVER_LOCATION', current_location)
     bedGraphPath = os.path.join(serverLocation, 'bedGraphToBigWig')
     result = subprocess.run([bedGraphPath, adaptedFile, chromSizes, outputBigWig], 
                                 stdout=subprocess.PIPE, 

src/components/Main/ParameterInputField.jsx

@@ -228,6 +228,8 @@ function FormConfig({
           >
 
           <SingleSelectDropdown
+                  helpText={`Predefined set of parameters for the TSS prediction. The parameters can be adjusted in the parameter section.`}
+
             label='Prediction parameters Preset'
             value={parameterPreset}
             onChange={(value) => {

src/components/Result.jsx

@@ -239,6 +239,8 @@ function Result() {
                 { value: "detected", label: "All detected TSSs" },
               ]}
               style={{ maxWidth: "30vw"}}
+              helpText={`Show only enriched TSSs or all detected TSSs in the UpSet plot and the Genome Viewer`}
+
             />
 
             <div className='result-margin-left'>

src/components/Result/GenomeViewer.jsx

@@ -49,6 +49,8 @@ function GenomeViewer({ filePath, dataGosling, filter, gosRef, widthTrack, nameG
         <div className='gosling-component'>
             <div className='genome-viewer-select' style={{ paddingBottom: "1.5em" }}>
                 <SingleSelectDropdown
+                        helpText={`Two different views are available: Single View shows the genome viewer grouped vertically by Genome/Condition, while the Aligned View aligns the strands vertically and the genomes/conditions on each row.`}
+
                     label="Change Genome Viewer Modus:"
                     value={currentType}
                     onChange={(value) => setCurrentType(value)}

src/components/Result/SingleSelect.jsx

@@ -1,7 +1,9 @@
 import React, { useState, useRef, useEffect } from "react";
 import "../../css/DropDown.css"; // Import the same CSS for styling
+import { Info } from "lucide-react"; // Using lucide-react for the info icon
 
-function SingleSelectDropdown({ value, onChange, options, label, textColor = "black", style, headerStyle }) {
+
+function SingleSelectDropdown({ value, onChange, options, label, textColor = "black", style, headerStyle, helpText }) {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedOption, setSelectedOption] = useState(value);
   const dropdownRef = useRef(null);
@@ -34,10 +36,19 @@ function SingleSelectDropdown({ value, onChange, options, label, textColor = "bl
 
   return (
     <div className="custom-dropdown"
-      style={{ margin: "0 1em ", color: textColor, ...style }}
+      style={{ margin: "0 1em ", color: textColor, ...style,}}
       ref={dropdownRef}>
+        <div style={{display:"flex"}}>
+
+        <div className="info-icon-container" style={{marginRight:"0.5em"}}>
+          <Info style={{color:"orange"}} size={24} className="info-icon" />
+          <div className="tooltip">{helpText}</div>
+        </div>
       <h3 className="select-header" style={headerStyle}
-      >{label}</h3>
+      >{label}
+      
+      </h3>
+      </div>
       <div className="dropdown-header" onClick={toggleDropdown}>
         {options.find((opt) => opt.value === selectedOption)?.label || "Select..."}
         <span className="dropdown-arrow">▼</span>

src/components/Result/UpSet.jsx

@@ -33,6 +33,7 @@ function UpSet({ showUpSet, allGenomes, filterForPlots, tableColumns, tableData,
   const [plotSettings, setPlotSettings] = useState({
     classUpsetPlot: "tssClass",
     type: "all",
+    countType: "position"
   });
 
   const handleClassUpsetPlotChange = (value) => {
@@ -41,6 +42,10 @@ function UpSet({ showUpSet, allGenomes, filterForPlots, tableColumns, tableData,
 
   const handleTypeChange = (value) => {
     setPlotSettings((prev) => ({ ...prev, type: value }));
+  }; 
+  
+  const handleCountTSS = (value) => {
+    setPlotSettings((prev) => ({ ...prev, countType: value }));
   };
 
 
@@ -71,7 +76,7 @@ function UpSet({ showUpSet, allGenomes, filterForPlots, tableColumns, tableData,
    * for upset plot: count frequncy of each tss class
    * and get all genome/condition names
    */
-    const TSSperPosition = (rows, columns, typeIntersection = "all") => {
+    const TSSperPosition = (rows, columns) => {
       // get column indices
       const primaryIdx = columns.findIndex((col) => col["header"] === "Primary");
       const secondaryIdx = columns.findIndex((col) => col["header"] === "Secondary");
@@ -84,10 +89,8 @@ function UpSet({ showUpSet, allGenomes, filterForPlots, tableColumns, tableData,
 
 
       // save frequency of classes for a TSS (upset plot)
-      let tssByClass = {};
       let tssWithMultipleClasses = {};
       // For the condition
-      let tssByCondition = {};
       let tssWithMultipleConditions = {};
 
       rows.forEach((row) => {
@@ -119,16 +122,6 @@ function UpSet({ showUpSet, allGenomes, filterForPlots, tableColumns, tableData,
             tssWithMultipleConditions[tmpTuple][tmpClass] = [genomeName]
           }
 
-          if (genomeName in tssByCondition) {
-            if (!tssByCondition[genomeName].includes(tmpTuple)) {
-              tssByCondition[genomeName].push(tmpTuple);
-            } else if (typeIntersection === "dedup") {
-              return; // Exit the current iteration of the loop
-            }
-          } else {
-            tssByCondition[genomeName] = [tmpTuple];
-          }
-
           // add tss to tssWithMultipleClasses
           if (tmpTuple in tssWithMultipleClasses) {
             // Add once to set
@@ -147,19 +140,6 @@ function UpSet({ showUpSet, allGenomes, filterForPlots, tableColumns, tableData,
             tssWithMultipleClasses[tmpTuple][genomeName] = [tmpClass]
           }
 
-
-
-          // add tss to tssByClass
-          if (tmpClass in tssByClass) {
-            if (!tssByClass[tmpClass].includes(tmpTuple)) {
-              tssByClass[tmpClass].push(tmpTuple);
-            } else if (typeIntersection === "dedup") {
-              return; // Exit the current iteration of the loop
-            }
-          } else {
-            tssByClass[tmpClass] = [tmpTuple];
-          }
-
         }
       });
       if (plotSettings.classUpsetPlot === "tssClass") {
@@ -175,9 +155,6 @@ function UpSet({ showUpSet, allGenomes, filterForPlots, tableColumns, tableData,
       // create new plots
       processedData = TSSperPosition(tableData, tableColumns);
     }
-    else if (selectedDataToShow === "dedup") {
-      processedData = TSSperPosition(tableData, tableColumns, selectedDataToShow);
-    }
     else {
       const genomeIdx = tableColumns.findIndex(
         (col) => col["header"] === "Genome" || col["header"] === "Condition"
@@ -212,7 +189,7 @@ function UpSet({ showUpSet, allGenomes, filterForPlots, tableColumns, tableData,
       color_tss[x] = COLORS_TSS[i]
     })
     let elems;
-    if (plotSettings.type === "all") {
+    if (plotSettings.countType === "classification") {
       elems = Object.entries(processedData).reduce((accum, curr) => {
         let tssName = curr[0]
         let mapGenomes = Object.entries(curr[1]).filter(x => x[0] !== "set").map((other) => {
@@ -240,7 +217,7 @@ function UpSet({ showUpSet, allGenomes, filterForPlots, tableColumns, tableData,
     }
     else {
       filteredSet = sets.filter(x => !ORDER_TSS_CLASSES.includes(x.name))
-      if (!["all", "dedup"].includes(plotSettings.type)) {
+      if (plotSettings.type !== "all") {
         filteredSet.forEach(x => x.color = color_tss[plotSettings.type])
       }
 
@@ -268,21 +245,26 @@ function UpSet({ showUpSet, allGenomes, filterForPlots, tableColumns, tableData,
     width: "100%"
   }} className={showUpSet ? '' : 'hidden'}>
     <div className="upset-settings">
+    <SingleSelectDropdown
+        label="Categories to Analyze"
+        value={plotSettings.classUpsetPlot}
+        onChange={(value) => handleClassUpsetPlotChange(value)}
+        options={[
+          { value: "tssClass", label: "TSS classes" },
+          { value: "conditions", label: "Conditions/Genomes" },
+        ]}
+        helpText={`This option defines the axes of the UpSet plot.`}
+
+      />
+
       <SingleSelectDropdown
         label="Show UpSet Plot for"
         value={plotSettings.type}
         onChange={(value) => handleTypeChange(value)}
         options={[
           {
             value: "all",
-            label: `Union of all TSS across ${plotSettings.classUpsetPlot === "tssClass"
-                ? "Conditions/Genomes"
-                : "TSS classes"
-              }`,
-          },
-          {
-            value: "dedup",
-            label: `Intersection of all TSS across ${plotSettings.classUpsetPlot === "tssClass"
+            label: `All ${plotSettings.classUpsetPlot === "tssClass"
                 ? "Conditions/Genomes"
                 : "TSS classes"
               }`,
@@ -292,17 +274,33 @@ function UpSet({ showUpSet, allGenomes, filterForPlots, tableColumns, tableData,
             : [...ORDER_TSS_CLASSES]
           ).map((col) => ({ value: col, label: col })),
         ]}
+        helpText={`Either show data for all ${plotSettings.classUpsetPlot === "tssClass" ? "Conditions/Genomes" : "TSS classes"} or for specific ones`}
       />
       <SingleSelectDropdown
-        label="Categories to Analyze"
-        value={plotSettings.classUpsetPlot}
-        onChange={(value) => handleClassUpsetPlotChange(value)}
+        label={`A TSSs is defined by its`}
+        value={plotSettings.countType}
+        onChange={(value) => handleCountTSS(value)}
+        helpText={`A TSS can be associated with multiple ${plotSettings.classUpsetPlot === "tssClass"
+                ? "Conditions/Genomes"
+                : "TSS classes"
+              }. However, the genomic position is the same. This option defines how to count the TSSs, either as unique genomic positions or account also for the classification. 
+              Please consider that for the case that a TSS is classified twice as internal or antisense, it will only be counted once.`}
+
         options={[
-          { value: "tssClass", label: "TSS classes" },
-          { value: "conditions", label: "Conditions/Genomes" },
+          {
+            value: "position",
+            label: `Location`,
+          },
+          {
+            value: "classification",
+            label: `Location and ${plotSettings.classUpsetPlot === "tssClass"
+              ? "Conditions/Genomes"
+              : "TSS classes"
+            }`,
+          }
         ]}
       />
-
+     
 
     </div>
 

src/css/MasterTable.css

@@ -176,8 +176,8 @@ table thead {
 }
 
 .info-icon-container {
-  position: relative;
-  display: flex;
+  /* position: relative; */
+  /* display: flex; */
   /* margin-right: 8px; */
   cursor: pointer;
 }

src/css/Result.css

@@ -186,9 +186,11 @@ select[multiple] option:checked {
 
 .upset-settings {
   display: flex;
+  /* align items to bottom of div */
+  align-items: flex-end;
   flex-direction: row;
   justify-content: space-between;
-  align-items: center;
+  align-items: bottom;
   width: 80%;
   margin-top: 1%;
   margin-bottom: 1%;