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

Jump to bottom

Connects to #282. Connects to #284. Data Hub native graphical cluster reports and full PASS1B-06 phenotype table. #283

Merged
merged 26 commits into from
Jan 30, 2024
Merged

Connects to #282. Connects to #284. Data Hub native graphical cluster reports and full PASS1B-06 phenotype table. #283

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
1bc7e19
Add TOC generator dependency
jimmyzhen Jan 16, 2024
b79de6f
Add new styling for refactored graphical clustering page UIs
jimmyzhen Jan 16, 2024
95a3674
Initial commit of components and images converted from pass1b-06 land…
jimmyzhen Jan 21, 2024
415f755
Minor style tweak for generated toc of the graphical clustering reports
jimmyzhen Jan 21, 2024
a84a2b9
Refactor to render native React components for graphical clustering r…
jimmyzhen Jan 21, 2024
064312e
Conditionalize display of page title and intro summary between landsc…
jimmyzhen Jan 22, 2024
4efe68c
Conditionalize the list of tissues for mito companion paper because 4…
jimmyzhen Jan 22, 2024
2cec3bb
Initial commit of components and images converted from pass1b-06 mito…
jimmyzhen Jan 22, 2024
dd1cd9e
Change all image sources to CDN from the app's assets
jimmyzhen Jan 22, 2024
615ef30
Change all image sources to CDN from the app's assets
jimmyzhen Jan 22, 2024
dcbf31d
Delete all graphical clustering images from app's assets now that the…
jimmyzhen Jan 22, 2024
adf0187
Delete no longer used open-iconic-bootstrap font library
jimmyzhen Jan 22, 2024
e11e4e4
Implement toc scroll event listener in parent component instead of in…
jimmyzhen Jan 22, 2024
2ea3e69
Merge branch 'dev' of github.com:MoTrPAC/motrpac-frontend into 282_JZ…
jimmyzhen Jan 22, 2024
e6a617a
Add external links to animal/adult/pediatric protocols
jimmyzhen Jan 22, 2024
50b71aa
Fix flickering of generated toc at fixed position when scrolling page…
jimmyzhen Jan 23, 2024
58bb30c
Load video from CDN instead of sourcing it from app's assets
jimmyzhen Jan 23, 2024
7ba4639
Remove in-app video asset after putting it on CDN
jimmyzhen Jan 23, 2024
f6297bd
Remove no longer needed animated gif
jimmyzhen Jan 23, 2024
07ceb95
Add component to render full pass1b-06 pheno table for paper in FUNCTION
jimmyzhen Jan 28, 2024
5cb322e
Extract tissue selection dropdown control into external component
jimmyzhen Jan 29, 2024
c617477
Extract common clustering intro into external component
jimmyzhen Jan 29, 2024
de4e6b2
Move tissue selection dropdown and clustering intro to external compo…
jimmyzhen Jan 29, 2024
a7028ff
Fix tissue selection dropdown at page top as well when scrolling page
jimmyzhen Jan 29, 2024
9712cd8
Add styling for fix position of tissue selection dropdown and max-hei…
jimmyzhen Jan 29, 2024
5b51896
Change mitochondria note in title to upper/lower case
jimmyzhen Jan 29, 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
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"react-tooltip": "^5.11.2",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"tocbot": "^4.25.0",
"victory": "36.4.1",
"vis-data": "^7.1.7",
"vis-network": "^9.1.8",
Expand Down
306 changes: 306 additions & 0 deletions src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/ADRNL.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,306 @@
import React, { useEffect } from 'react';
import * as tocbot from 'tocbot';
import {
tocbotConfig,
pass1b06GraphicalClusteringLandscapeImageLocation,
} from '../sharedLib';

function GraphicalAnalysisAdrenal() {
// initialize table of contents
useEffect(() => {
tocbot.init(tocbotConfig);
}, []);

// load plot images
const tissueImageFolder = 'adrenal';
const imageURL = `${pass1b06GraphicalClusteringLandscapeImageLocation}/${tissueImageFolder}`;

return (
<div className="container-fluid main-container">
<div className="row">
<div className="col-xs-12 col-sm-4 col-md-3">
<div className="tocify" id="TOC" />
</div>
<div className="toc-content col-xs-12 col-sm-8 col-md-9">
<div className="section level2">
<h2 id="graph-characteristics">Graph characteristics</h2>
<p>
Graphical analysis has replaced clustering as the primary method
of exploring main patterns in the PASS1B data. This approach is
more flexible and gives us better resolution.
</p>
<div className="section level3">
<h3 id="all-paths">All paths</h3>
<p>Tree of ALL differential analytes (all paths)</p>

<p>
<img src={`${imageURL}/figure_1.png`} width="100%" alt="" />
</p>
</div>
<div className="section level3">
<h3 id="top-clusters">Top clusters</h3>
<p>
A “cluster” is a path, node, or edge. Here we show the size and
ome distributions for selected clusters in this tissue.
</p>

<p>
<img src={`${imageURL}/figure_2.png`} width="100%" alt="" />
</p>
</div>
</div>
<div className="section level2">
<h2 id="top-5-trajectories">Top 5 trajectories</h2>
<p>
Here we show trees of the 5 largest trajectories (also called
paths) in this tissue, either with all differential features or
features split by ome group.
</p>
<div className="section level3">
<h3 id="all-omes">All omes</h3>

<p>
<img src={`${imageURL}/figure_3.png`} width="100%" alt="" />
</p>
</div>
<div className="section level3">
<h3 id="split-by-ome-group">Split by ome group</h3>

<p>
<img src={`${imageURL}/figure_4.png`} width="100%" alt="" />
</p>
</div>
</div>
<div className="section level2">
<h2 id="detailed-view-of-selected-clusters">
Detailed view of selected clusters
</h2>
<p>
Here we show highlighted trees, top pathway enrichments, network
view of <em>all</em> pathway enrichments, and sample-level
trajectories for each selected cluster (node, edge, or path).
</p>
<p>
<strong>Interactive networks of pathway enrichments</strong>
</p>
<p>
These networks summarize all significant pathway enrichments for a
set of differential analytes. Results from all omes are combined.
</p>
<p>
Each node is a pathway. Hover over a node to see the pathway name
(and parent pathway in parentheses), nominal enrichment p-value,
datasets in which this pathway was significantly enriched, and the
union of genes at the intersection of the input features and
pathway members. Larger nodes indicate that more datasets (e.g.
METAB;SKM-GN) were significantly enriched for this pathway.{' '}
<strong>
Pathways only enriched with metabolites are not shown because
edges are defined using genes, not KEGG IDs.
</strong>
</p>
<p>
Edges are drawn between nodes if there is a substantial overlap in
the intersection of the input features and pathway members for
both pathways. Hover over an edge to see the similarity score and
list of genes in the intersection.
</p>
<p>
Nodes are colored to visually separate groups of related pathway
enrichments. Each group has a label (rectangular node), which
corresponds to the most frequently occurring parent pathway in the
group. These labels are meant to help summarize groups of related
pathway enrichments.
</p>
<p>Explore these interactive plots!</p>
<ul>
<li>
Hover over nodes (pathways) and edges (intersection between
pathways) to see more information
<br />
</li>
<li>
Click nodes to highlight them and connected edges
<br />
</li>
<li>
Zoom in and out
<br />
</li>
<li>Click and drag nodes</li>
</ul>

<div className="section level3">
<h3 id="selected-paths">Selected paths</h3>

<div className="section level4">
<h4 id="adrnl1w_f-1_m1-2w_f-1_m0-4w_f-1_m0-8w_f-1_m0">
ADRNL:1w_F-1_M1-&gt;2w_F-1_M0-&gt;4w_F-1_M0-&gt;8w_F-1_M0
</h4>
<p>
<img src={`${imageURL}/figure_5.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_6.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_7.png`} width="100%" alt="" />
</p>
<hr />
</div>
<div className="section level4">
<h4 id="adrnl1w_f1_m-1-2w_f1_m0-4w_f1_m0-8w_f1_m0">
ADRNL:1w_F1_M-1-&gt;2w_F1_M0-&gt;4w_F1_M0-&gt;8w_F1_M0
</h4>
<p>
<img src={`${imageURL}/figure_8.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_9.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_10.png`} width="100%" alt="" />
</p>
<hr />
</div>
<div className="section level4">
<h4 id="adrnl1w_f0_m-1-2w_f1_m0-4w_f1_m0-8w_f1_m0">
ADRNL:1w_F0_M-1-&gt;2w_F1_M0-&gt;4w_F1_M0-&gt;8w_F1_M0
</h4>
<p>
<img src={`${imageURL}/figure_11.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_12.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_13.png`} width="100%" alt="" />
</p>
<hr />
</div>
<div className="section level4">
<h4 id="adrnl1w_f0_m0-2w_f0_m0-4w_f0_m0-8w_f0_m1">
ADRNL:1w_F0_M0-&gt;2w_F0_M0-&gt;4w_F0_M0-&gt;8w_F0_M1
</h4>
<p>
<img src={`${imageURL}/figure_14.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_15.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_16.png`} width="100%" alt="" />
</p>
<hr />
</div>
<div className="section level4">
<h4 id="adrnl1w_f0_m-1-2w_f0_m-1-4w_f0_m0-8w_f1_m0">
ADRNL:1w_F0_M-1-&gt;2w_F0_M-1-&gt;4w_F0_M0-&gt;8w_F1_M0
</h4>
<p>
<img src={`${imageURL}/figure_17.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_18.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_19.png`} width="100%" alt="" />
</p>
<hr />
</div>
</div>
<div className="section level3">
<h3 id="selected-nodes">Selected nodes</h3>

<div className="section level4">
<h4 id="adrnl4w_f-1_m0">ADRNL:4w_F-1_M0</h4>
<p>
<img src={`${imageURL}/figure_20.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_21.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_22.png`} width="100%" alt="" />
</p>
<hr />
</div>
<div className="section level4">
<h4 id="adrnl2w_f-1_m0">ADRNL:2w_F-1_M0</h4>
<p>
<img src={`${imageURL}/figure_23.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_24.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_25.png`} width="100%" alt="" />
</p>
<hr />
</div>
<div className="section level4">
<h4 id="adrnl8w_f-1_m-1">ADRNL:8w_F-1_M-1</h4>
<p>
<img src={`${imageURL}/figure_26.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_27.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_28.png`} width="100%" alt="" />
</p>
<hr />
</div>
<div className="section level4">
<h4 id="adrnl8w_f-1_m0">ADRNL:8w_F-1_M0</h4>
<p>
<img src={`${imageURL}/figure_29.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_30.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_31.png`} width="100%" alt="" />
</p>
<hr />
</div>
<div className="section level4">
<h4 id="adrnl8w_f-1_m1">ADRNL:8w_F-1_M1</h4>
<p>
<img src={`${imageURL}/figure_32.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_33.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_34.png`} width="100%" alt="" />
</p>
<hr />
</div>
<div className="section level4">
<h4 id="adrnl8w_f0_m-1">ADRNL:8w_F0_M-1</h4>
<p>
<img src={`${imageURL}/figure_35.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_36.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_37.png`} width="100%" alt="" />
</p>
<hr />
</div>
<div className="section level4">
<h4 id="adrnl8w_f0_m1">ADRNL:8w_F0_M1</h4>
<p>
<img src={`${imageURL}/figure_38.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_39.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_40.png`} width="100%" alt="" />
</p>
<hr />
</div>
<div className="section level4">
<h4 id="adrnl8w_f1_m0">ADRNL:8w_F1_M0</h4>
<p>
<img src={`${imageURL}/figure_41.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_42.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_43.png`} width="100%" alt="" />
</p>
<hr />
</div>
<div className="section level4">
<h4 id="adrnl8w_f1_m1">ADRNL:8w_F1_M1</h4>
<p>
<img src={`${imageURL}/figure_44.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_45.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_46.png`} width="100%" alt="" />
</p>
<hr />
</div>
</div>
<div className="section level3">
<h3 id="selected-edges">Selected edges</h3>

<div className="section level4">
<h4 id="adrnl2w_f-1_m04w_f-1_m0">ADRNL:2w_F-1_M0—4w_F-1_M0</h4>
<p>
<img src={`${imageURL}/figure_47.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_48.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_49.png`} width="100%" alt="" />
</p>
<hr />
</div>
<div className="section level4">
<h4 id="adrnl4w_f-1_m08w_f-1_m0">ADRNL:4w_F-1_M0—8w_F-1_M0</h4>
<p>
<img src={`${imageURL}/figure_50.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_51.png`} width="100%" alt="" />
<img src={`${imageURL}/figure_52.png`} width="100%" alt="" />
</p>
<hr />
</div>
</div>
</div>
</div>
</div>
</div>
);
}

export default GraphicalAnalysisAdrenal;
Loading
Loading