Merge pull request #332 from MoTrPAC/331_JZ_Timecourse_Visualization_…

…Link Connects to #331. Graphical clustering timecourse visualization link.
MoTrPAC · May 3, 2024 · 1101b0c · 1101b0c
2 parents b4e7869 + 8b712bd
commit 1101b0c
Show file tree

Hide file tree

Showing 32 changed files with 192 additions and 6 deletions.
diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/ADRNL.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/ADRNL.jsx
@@ -153,6 +153,11 @@ function GraphicalAnalysisAdrenal() {
                   <img src={`${imageURL}/figure_6.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Adrenal"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/BAT.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/BAT.jsx
@@ -154,6 +154,11 @@ function GraphicalAnalysisBrownAdipose() {
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Brown Adipose"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/BLOOD.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/BLOOD.jsx
@@ -147,6 +147,11 @@ function GraphicalAnalysisBlood() {
                   <img src={`${imageURL}/figure_6.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Blood RNA"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/COLON.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/COLON.jsx
@@ -149,6 +149,11 @@ function GraphicalAnalysisColon() {
                   <img src={`${imageURL}/figure_6.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Colon"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/CORTEX.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/CORTEX.jsx
@@ -150,6 +150,11 @@ function GraphicalAnalysisCortex() {
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Cortex"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/HEART.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/HEART.jsx
@@ -149,6 +149,11 @@ function GraphicalAnalysisHeart() {
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_9.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Heart"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/HIPPOC.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/HIPPOC.jsx
@@ -154,6 +154,11 @@ function GraphicalAnalysisHippocampus() {
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Hippocampus"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/HYPOTH.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/HYPOTH.jsx
@@ -40,6 +40,7 @@ function GraphicalAnalysisHypothalamus() {
                 title="trajectory"
                 tissue="Hypothalamus"
                 plotType="Tree"
+                minClusterSize={1}
               />
             </div>
             <div className="section level3">
@@ -55,6 +56,7 @@ function GraphicalAnalysisHypothalamus() {
                 title="cluster"
                 tissue="Hypothalamus"
                 plotType="Histogram"
+                minClusterSize={1}
               />
             </div>
           </div>

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/KIDNEY.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/KIDNEY.jsx
@@ -145,6 +145,11 @@ function GraphicalAnalysisKidney() {
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_9.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Kidney"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/LIVER.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/LIVER.jsx
@@ -145,6 +145,11 @@ function GraphicalAnalysisLiver() {
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_9.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Liver"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/LUNG.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/LUNG.jsx
@@ -141,6 +141,11 @@ function GraphicalAnalysisLung() {
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_9.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Lung"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/PLASMA.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/PLASMA.jsx
@@ -143,6 +143,11 @@ function GraphicalAnalysisPlasma() {
                   <img src={`${imageURL}/figure_6.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Plasma"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
             </div>

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SKM_GN.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SKM_GN.jsx
@@ -155,6 +155,11 @@ function GraphicalAnalysisGastrocnemius() {
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_9.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Gastrocnemius"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SKM_VL.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SKM_VL.jsx
@@ -147,6 +147,11 @@ function GraphicalAnalysisVastusLateralis() {
                   <img src={`${imageURL}/figure_6.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Vastus Lateralis"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SMLINT.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SMLINT.jsx
@@ -147,6 +147,11 @@ function GraphicalAnalysisSmallIntestine() {
                   <img src={`${imageURL}/figure_6.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Small Intestine"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SPLEEN.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SPLEEN.jsx
@@ -143,6 +143,11 @@ function GraphicalAnalysisSpleen() {
                   <img src={`${imageURL}/figure_6.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Spleen"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/WAT_SC.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/WAT_SC.jsx
@@ -149,6 +149,11 @@ function GraphicalAnalysisWhiteAdipose() {
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_9.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="White Adipose"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/ADRNL.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/ADRNL.jsx
@@ -150,6 +150,11 @@ function MitoGraphicalAnalysisAdrenal() {
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Adrenal"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/BAT.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/BAT.jsx
@@ -150,6 +150,11 @@ function MitoGraphicalAnalysisBrownAdipose() {
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Brown Adipose"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/BLOOD.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/BLOOD.jsx
@@ -150,6 +150,11 @@ function MitoGraphicalAnalysisBlood() {
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Blood RNA"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/COLON.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/COLON.jsx
@@ -146,6 +146,11 @@ function MitoGraphicalAnalysisColon() {
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Colon"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/HEART.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/HEART.jsx
@@ -147,6 +147,11 @@ function MitoGraphicalAnalysisHeart() {
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_9.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Heart"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/KIDNEY.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/KIDNEY.jsx
@@ -146,6 +146,11 @@ function MitoGraphicalAnalysisKidney() {
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Kidney"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/LIVER.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/LIVER.jsx
@@ -147,6 +147,11 @@ function MitoGraphicalAnalysisLiver() {
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_9.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Liver"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/LUNG.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/LUNG.jsx
@@ -137,6 +137,11 @@ function MitoGraphicalAnalysisLung() {
                   <img src={`${imageURL}/figure_6.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Lung"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SKM_GN.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SKM_GN.jsx
@@ -150,6 +150,11 @@ function MitoGraphicalAnalysisGastrocnemius() {
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Gastrocnemius"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SKM_VL.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SKM_VL.jsx
@@ -150,6 +150,11 @@ function MitoGraphicalAnalysisVastusLateralis() {
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Vastus Lateralis"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SMLINT.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SMLINT.jsx
@@ -148,6 +148,11 @@ function MitoGraphicalAnalysisSmallIntestine() {
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Small Intestine"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
             </div>

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SPLEEN.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SPLEEN.jsx
@@ -147,6 +147,11 @@ function MitoGraphicalAnalysisSpleen() {
                   No significant enrichments for
                   SPLEEN:1w_F0_M0-&gt;2w_F0_M0-&gt;4w_F0_M0-&gt;8w_F1_M1
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="Spleen"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
             </div>

diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/WAT_SC.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/WAT_SC.jsx
@@ -150,6 +150,11 @@ function MitoGraphicalAnalysisWhiteAdipose() {
                   <img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
                   <img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
                 </p>
+                <DataVizLink
+                  title="timecourse"
+                  tissue="White Adipose"
+                  plotType="Trajectories"
+                />
                 <hr />
               </div>
               <div className="section level4">

diff --git a/src/AnalysisPage/GraphicalClustering/components/dataVizLink.jsx b/src/AnalysisPage/GraphicalClustering/components/dataVizLink.jsx
@@ -1,8 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-function DataVizLink({ title, tissue, plotType }) {
-  const url = `https://data-viz.motrpac-data.org/?tissues[${tissue}]=1&plot_type=${plotType}&topk=10`;
+function DataVizLink({ title, tissue, plotType, minClusterSize }) {
+  let topkStr = '';
+  let minClusterSizeStr = '';
+
+  // include 'topk' param for non-trajectory plots
+  if (plotType !== 'Trajectories') {
+    topkStr = '&topk=10';
+  }
+
+  // include 'min_cluster_size' param if minClusterSize is provided
+  if (minClusterSize && typeof (minClusterSize) === 'number') {
+    minClusterSizeStr = `&min_cluster_size=${minClusterSize}`;
+  }
+
+  const url = `https://data-viz.motrpac-data.org/?tissues[${tissue}]=1&plot_type=${plotType}${topkStr}${minClusterSizeStr}`;
 
   return (
     <p className="data-visualization-link-container text-center">
@@ -23,6 +36,11 @@ DataVizLink.propTypes = {
   title: PropTypes.string.isRequired,
   tissue: PropTypes.string.isRequired,
   plotType: PropTypes.string.isRequired,
+  minClusterSize: PropTypes.number,
+};
+
+DataVizLink.defaultProps = {
+  minClusterSize: null,
 };
 
 export default DataVizLink;