Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Connects to #331. Graphical clustering timecourse visualization link. #332

Merged
merged 5 commits into from
May 3, 2024
Merged

Connects to #331. Graphical clustering timecourse visualization link. #332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e459549
Add timecourse trajectory links to data-viz tool
jimmyzhen May 2, 2024
6e1f9c0
Add prop to support data-viz plots with small minimum cluster size
jimmyzhen May 2, 2024
78bf2f3
Add support for more params to be used for linking out to data-viz po…
jimmyzhen May 2, 2024
0023fad
Add timecourse trajectory visualization links to graphical analysis r…
jimmyzhen May 2, 2024
8b712bd
Add announcement item for companion paper
jimmyzhen May 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/ADRNL.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/BAT.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/BLOOD.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/COLON.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/CORTEX.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/HEART.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/HIPPOC.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 2 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/HYPOTH.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ function GraphicalAnalysisHypothalamus() {
title="trajectory"
tissue="Hypothalamus"
plotType="Tree"
minClusterSize={1}
/>
</div>
<div className="section level3">
Expand All @@ -55,6 +56,7 @@ function GraphicalAnalysisHypothalamus() {
title="cluster"
tissue="Hypothalamus"
plotType="Histogram"
minClusterSize={1}
/>
</div>
</div>
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/KIDNEY.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/LIVER.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/LUNG.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/PLASMA.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SKM_GN.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SKM_VL.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SMLINT.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SPLEEN.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/WAT_SC.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/ADRNL.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/BAT.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/BLOOD.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/COLON.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/HEART.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/KIDNEY.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/LIVER.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/LUNG.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SKM_GN.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SKM_VL.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SMLINT.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SPLEEN.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 5 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/WAT_SC.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
22 changes: 20 additions & 2 deletions src/AnalysisPage/GraphicalClustering/components/dataVizLink.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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;
Loading
Loading