diff --git a/package.json b/package.json index 5c94bca5..155b01bf 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/ADRNL.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/ADRNL.jsx new file mode 100644 index 00000000..f58acabd --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/ADRNL.jsx @@ -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 ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+ +

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+ +

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+ +

+ +

+
+
+

Split by ome group

+ +

+ +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+ +
+

Selected paths

+ +
+

+ ADRNL:1w_F-1_M1->2w_F-1_M0->4w_F-1_M0->8w_F-1_M0 +

+

+ + + +

+
+
+
+

+ ADRNL:1w_F1_M-1->2w_F1_M0->4w_F1_M0->8w_F1_M0 +

+

+ + + +

+
+
+
+

+ ADRNL:1w_F0_M-1->2w_F1_M0->4w_F1_M0->8w_F1_M0 +

+

+ + + +

+
+
+
+

+ ADRNL:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F0_M1 +

+

+ + + +

+
+
+
+

+ ADRNL:1w_F0_M-1->2w_F0_M-1->4w_F0_M0->8w_F1_M0 +

+

+ + + +

+
+
+
+
+

Selected nodes

+ +
+

ADRNL:4w_F-1_M0

+

+ + + +

+
+
+
+

ADRNL:2w_F-1_M0

+

+ + + +

+
+
+
+

ADRNL:8w_F-1_M-1

+

+ + + +

+
+
+
+

ADRNL:8w_F-1_M0

+

+ + + +

+
+
+
+

ADRNL:8w_F-1_M1

+

+ + + +

+
+
+
+

ADRNL:8w_F0_M-1

+

+ + + +

+
+
+
+

ADRNL:8w_F0_M1

+

+ + + +

+
+
+
+

ADRNL:8w_F1_M0

+

+ + + +

+
+
+
+

ADRNL:8w_F1_M1

+

+ + + +

+
+
+
+
+

Selected edges

+ +
+

ADRNL:2w_F-1_M0—4w_F-1_M0

+

+ + + +

+
+
+
+

ADRNL:4w_F-1_M0—8w_F-1_M0

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default GraphicalAnalysisAdrenal; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/BAT.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/BAT.jsx new file mode 100644 index 00000000..e1c9957c --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/BAT.jsx @@ -0,0 +1,280 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringLandscapeImageLocation, +} from '../sharedLib'; + +function GraphicalAnalysisBrownAdipose() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'brown_adipose'; + const imageURL = `${pass1b06GraphicalClusteringLandscapeImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+ +

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+ +

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+ +

+ +

+
+
+

Split by ome group

+ +

+ + +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+ +
+

Selected paths

+ +
+

+ BAT:1w_F-1_M0->2w_F-1_M0->4w_F-1_M0->8w_F0_M1 +

+

+ + + +

+
+
+
+

+ BAT:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F-1_M-1 +

+

+ + + +

+
+
+
+

+ BAT:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F0_M-1 +

+

+ + + +

+
+
+
+

+ BAT:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ BAT:1w_F-1_M0->2w_F-1_M0->4w_F-1_M1->8w_F0_M1 +

+

+ + + +

+
+
+
+
+

Selected nodes

+ +
+

BAT:8w_F-1_M-1

+

+ + + +

+
+
+
+

BAT:8w_F-1_M0

+

+ + + +

+
+
+
+

BAT:8w_F-1_M1

+

+ + + No significant enrichments for BAT:8w_F-1_M1 +

+
+
+
+

BAT:8w_F0_M-1

+

+ + + +

+
+
+
+

BAT:8w_F0_M1

+

+ + + +

+
+
+
+

BAT:8w_F1_M0

+

+ + + +

+
+
+
+

BAT:8w_F1_M1

+

+ + + +

+
+
+
+
+

Selected edges

+ +
+

BAT:1w_F-1_M0—2w_F-1_M0

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default GraphicalAnalysisBrownAdipose; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/BLOOD.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/BLOOD.jsx new file mode 100644 index 00000000..88a469c1 --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/BLOOD.jsx @@ -0,0 +1,280 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringLandscapeImageLocation, +} from '../sharedLib'; + +function GraphicalAnalysisBlood() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'blood'; + const imageURL = `${pass1b06GraphicalClusteringLandscapeImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ BLOOD:1w_F0_M1->2w_F0_M1->4w_F0_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ BLOOD:1w_F0_M1->2w_F0_M1->4w_F0_M1->8w_F0_M1 +

+

+ + + +

+
+
+
+

+ BLOOD:1w_F-1_M0->2w_F-1_M0->4w_F-1_M0->8w_F0_M1 +

+

+ + + +

+
+
+
+

+ BLOOD:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F0_M1 +

+

+ + + +

+
+
+
+

+ BLOOD:1w_F-1_M0->2w_F-1_M0->4w_F-1_M0->8w_F-1_M1 +

+

+ + + +

+
+
+
+
+

Selected nodes

+
+

BLOOD:1w_F0_M1

+

+ + + +

+
+
+
+

BLOOD:2w_F0_M1

+

+ + + +

+
+
+
+

BLOOD:8w_F-1_M-1

+

+ + + +

+
+
+
+

BLOOD:8w_F-1_M1

+

+ + + +

+
+
+
+

BLOOD:8w_F0_M-1

+

+ + + +

+
+
+
+

BLOOD:8w_F0_M1

+

+ + + +

+
+
+
+

BLOOD:8w_F1_M1

+

+ + + +

+
+
+
+
+

Selected edges

+
+

BLOOD:1w_F0_M1—2w_F0_M1

+

+ + + +

+
+
+
+

BLOOD:2w_F0_M1—4w_F0_M1

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default GraphicalAnalysisBlood; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/COLON.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/COLON.jsx new file mode 100644 index 00000000..5e2f9107 --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/COLON.jsx @@ -0,0 +1,270 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringLandscapeImageLocation, +} from '../sharedLib'; + +function GraphicalAnalysisColon() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'colon'; + const imageURL = `${pass1b06GraphicalClusteringLandscapeImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+ +

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+ +

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+ +

+ +

+
+
+

Split by ome group

+ +

+ +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+ +
+

Selected paths

+ +
+

+ COLON:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ COLON:1w_F-1_M0->2w_F-1_M0->4w_F0_M0->8w_F1_M0 +

+

+ + + +

+
+
+
+

+ COLON:1w_F1_M0->2w_F1_M1->4w_F1_M0->8w_F0_M0 +

+

+ + + +

+
+
+
+

+ COLON:1w_F1_M0->2w_F1_M0->4w_F1_M0->8w_F0_M0 +

+

+ + + +

+
+
+
+

+ COLON:1w_F1_M0->2w_F1_M0->4w_F0_M0->8w_F-1_M0 +

+

+ + + +

+
+
+
+
+

Selected nodes

+ +
+

COLON:8w_F-1_M-1

+

+ + + +

+
+
+
+

COLON:8w_F-1_M0

+

+ + + +

+
+
+
+

COLON:8w_F0_M-1

+

+ + + +

+
+
+
+

COLON:8w_F0_M1

+

+ + + +

+
+
+
+

COLON:8w_F1_M0

+

+ + + +

+
+
+
+

COLON:8w_F1_M1

+

+ + + +

+
+
+
+
+

Selected edges

+ +
+

COLON:1w_F-1_M0—2w_F-1_M0

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default GraphicalAnalysisColon; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/CORTEX.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/CORTEX.jsx new file mode 100644 index 00000000..c39a310d --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/CORTEX.jsx @@ -0,0 +1,276 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringLandscapeImageLocation, +} from '../sharedLib'; + +function GraphicalAnalysisCortex() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'cortex'; + const imageURL = `${pass1b06GraphicalClusteringLandscapeImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+ +

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+ +

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+ +

+ +

+
+
+

Split by ome group

+ +

+ + +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+ +
+

Selected paths

+ +
+

+ CORTEX:1w_F1_M1->2w_F0_M1->4w_F0_M1->8w_F0_M0 +

+

+ + + +

+
+
+
+

+ CORTEX:1w_F1_M1->2w_F0_M1->4w_F0_M1->8w_F0_M1 +

+

+ + + +

+
+
+
+

+ CORTEX:1w_F1_M1->2w_F1_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+
+

Selected nodes

+ +
+

CORTEX:1w_F1_M1

+

+ + + +

+
+
+
+

CORTEX:2w_F0_M1

+

+ + + +

+
+
+
+

CORTEX:8w_F-1_M-1

+

+ + + +

+
+
+
+

CORTEX:8w_F-1_M0

+

+ + + No significant enrichments for CORTEX:8w_F-1_M0 +

+
+
+
+

CORTEX:8w_F0_M-1

+

+ + + +

+
+
+
+

CORTEX:8w_F0_M1

+

+ + + +

+
+
+
+

CORTEX:8w_F1_M0

+

+ + + +

+
+
+
+

CORTEX:8w_F1_M1

+

+ + + +

+
+
+
+
+

Selected edges

+ +
+

CORTEX:2w_F0_M1—4w_F0_M1

+

+ + + +

+
+
+
+

CORTEX:1w_F1_M1—2w_F0_M1

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default GraphicalAnalysisCortex; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/HEART.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/HEART.jsx new file mode 100644 index 00000000..e71f0c9a --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/HEART.jsx @@ -0,0 +1,288 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringLandscapeImageLocation, +} from '../sharedLib'; + +function GraphicalAnalysisHeart() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'heart'; + const imageURL = `${pass1b06GraphicalClusteringLandscapeImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+ +

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+ +

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ + + +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+ +
+

Selected paths

+ +
+

+ HEART:1w_F1_M1->2w_F1_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ HEART:1w_F-1_M-1->2w_F-1_M-1->4w_F-1_M-1->8w_F-1_M-1 +

+

+ + + +

+
+
+
+

+ HEART:1w_F0_M1->2w_F0_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ HEART:1w_F0_M1->2w_F0_M1->4w_F0_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ HEART:1w_F0_M-1->2w_F0_M-1->4w_F-1_M-1->8w_F-1_M-1 +

+

+ + + +

+
+
+
+
+

Selected nodes

+ +
+

HEART:8w_F1_M1

+

+ + + +

+
+
+
+

HEART:4w_F1_M1

+

+ + + +

+
+
+
+

HEART:8w_F-1_M-1

+

+ + + +

+
+
+
+

HEART:8w_F-1_M0

+

+ + + +

+
+
+
+

HEART:8w_F0_M-1

+

+ + + +

+
+
+
+

HEART:8w_F0_M1

+

+ + + +

+
+
+
+

HEART:8w_F1_M0

+

+ + + +

+
+
+
+
+

Selected edges

+ +
+

HEART:4w_F1_M1—8w_F1_M1

+

+ + + +

+
+
+
+

HEART:2w_F1_M1—4w_F1_M1

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default GraphicalAnalysisHeart; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/HIPPOC.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/HIPPOC.jsx new file mode 100644 index 00000000..3e60cc7d --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/HIPPOC.jsx @@ -0,0 +1,249 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringLandscapeImageLocation, +} from '../sharedLib'; + +function GraphicalAnalysisHippocampus() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'hippocampus'; + const imageURL = `${pass1b06GraphicalClusteringLandscapeImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+ +

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+ +

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+ +

+ +

+
+
+

Split by ome group

+ +

+ + +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+ +
+

Selected paths

+ +
+

+ HIPPOC:1w_F0_M-1->2w_F0_M-1->4w_F0_M-1->8w_F0_M-1 +

+

+ + + +

+
+
+
+

+ HIPPOC:1w_F0_M1->2w_F0_M1->4w_F0_M1->8w_F0_M1 +

+

+ + + +

+
+
+
+
+

Selected nodes

+ +
+

HIPPOC:2w_F0_M1

+

+ + + +

+
+
+
+

HIPPOC:8w_F-1_M0

+

+ + + No significant enrichments for HIPPOC:8w_F-1_M0 +

+
+
+
+

HIPPOC:8w_F0_M-1

+

+ + + +

+
+
+
+

HIPPOC:8w_F0_M1

+

+ + + +

+
+
+
+

HIPPOC:8w_F1_M0

+

+ + + +

+
+
+
+

HIPPOC:8w_F1_M1

+

+ + + +

+
+
+
+
+

Selected edges

+ +
+

HIPPOC:1w_F0_M1—2w_F0_M1

+

+ + + +

+
+
+
+

+ HIPPOC:1w_F0_M-1—2w_F0_M-1 +

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default GraphicalAnalysisHippocampus; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/HYPOTH.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/HYPOTH.jsx new file mode 100644 index 00000000..b41e5b3a --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/HYPOTH.jsx @@ -0,0 +1,135 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringLandscapeImageLocation, +} from '../sharedLib'; + +function GraphicalAnalysisHypothalamus() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'hypothalamus'; + const imageURL = `${pass1b06GraphicalClusteringLandscapeImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+
+
+
+ ); +} + +export default GraphicalAnalysisHypothalamus; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/KIDNEY.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/KIDNEY.jsx new file mode 100644 index 00000000..3b8f6af8 --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/KIDNEY.jsx @@ -0,0 +1,267 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringLandscapeImageLocation, +} from '../sharedLib'; + +function GraphicalAnalysisKidney() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'kidney'; + const imageURL = `${pass1b06GraphicalClusteringLandscapeImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ + + +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ KIDNEY:1w_F1_M1->2w_F1_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ KIDNEY:1w_F-1_M-1->2w_F-1_M-1->4w_F-1_M-1->8w_F-1_M-1 +

+

+ + + +

+
+
+
+

+ KIDNEY:1w_F-1_M0->2w_F-1_M0->4w_F-1_M0->8w_F-1_M-1 +

+

+ + + No significant enrichments for + KIDNEY:1w_F-1_M0->2w_F-1_M0->4w_F-1_M0->8w_F-1_M-1 +

+
+
+
+

+ KIDNEY:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ KIDNEY:1w_F1_M0->2w_F1_M0->4w_F0_M0->8w_F1_M1 +

+

+ + + +

+
+
+
+
+

Selected nodes

+
+

KIDNEY:8w_F1_M1

+

+ + + +

+
+
+
+

KIDNEY:8w_F-1_M-1

+

+ + + +

+
+
+
+

KIDNEY:8w_F-1_M0

+

+ + + +

+
+
+
+

KIDNEY:8w_F0_M-1

+

+ + + +

+
+
+
+

KIDNEY:8w_F0_M1

+

+ + + +

+
+
+
+

KIDNEY:8w_F1_M0

+

+ + + +

+
+
+
+
+

Selected edges

+
+

+ KIDNEY:1w_F-1_M0—2w_F-1_M0 +

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default GraphicalAnalysisKidney; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/LIVER.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/LIVER.jsx new file mode 100644 index 00000000..7c52c28c --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/LIVER.jsx @@ -0,0 +1,273 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringLandscapeImageLocation, +} from '../sharedLib'; + +function GraphicalAnalysisLiver() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'liver'; + const imageURL = `${pass1b06GraphicalClusteringLandscapeImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ + + +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ LIVER:1w_F0_M1->2w_F0_M1->4w_F0_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ LIVER:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ LIVER:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F-1_M-1 +

+

+ + + +

+
+
+
+

+ LIVER:1w_F1_M1->2w_F1_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ LIVER:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F0_M-1 +

+

+ + + +

+
+
+
+
+

Selected nodes

+
+

LIVER:8w_F-1_M-1

+

+ + + +

+
+
+
+

LIVER:8w_F-1_M0

+

+ + + +

+
+
+
+

LIVER:8w_F-1_M1

+

+ + + +

+
+
+
+

LIVER:8w_F0_M-1

+

+ + + +

+
+
+
+

LIVER:8w_F0_M1

+

+ + + +

+
+
+
+

LIVER:8w_F1_M0

+

+ + + +

+
+
+
+

LIVER:8w_F1_M1

+

+ + + +

+
+
+
+
+

Selected edges

+
+

LIVER:1w_F0_M1—2w_F0_M1

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default GraphicalAnalysisLiver; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/LUNG.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/LUNG.jsx new file mode 100644 index 00000000..8b8fce43 --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/LUNG.jsx @@ -0,0 +1,282 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringLandscapeImageLocation, +} from '../sharedLib'; + +function GraphicalAnalysisLung() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'lung'; + const imageURL = `${pass1b06GraphicalClusteringLandscapeImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ + + +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ LUNG:1w_F-1_M0->2w_F-1_M0->4w_F-1_M0->8w_F0_M0 +

+

+ + + +

+
+
+
+

+ LUNG:1w_F-1_M0->2w_F-1_M0->4w_F-1_M0->8w_F-1_M-1 +

+

+ + + +

+
+
+
+

+ LUNG:1w_F1_M1->2w_F1_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ LUNG:1w_F-1_M-1->2w_F-1_M-1->4w_F-1_M0->8w_F0_M0 +

+

+ + + +

+
+
+
+

+ LUNG:1w_F-1_M-1->2w_F-1_M-1->4w_F-1_M0->8w_F0_M-1 +

+

+ + + +

+
+
+
+
+

Selected nodes

+
+

LUNG:4w_F-1_M0

+

+ + + +

+
+
+
+

LUNG:8w_F-1_M-1

+

+ + + +

+
+
+
+

LUNG:8w_F-1_M0

+

+ + + +

+
+
+
+

LUNG:8w_F0_M-1

+

+ + + +

+
+
+
+

LUNG:8w_F0_M1

+

+ + + +

+
+
+
+

LUNG:8w_F1_M0

+

+ + + +

+
+
+
+

LUNG:8w_F1_M1

+

+ + + +

+
+
+
+
+

Selected edges

+
+

LUNG:1w_F-1_M0—2w_F-1_M0

+

+ + + +

+
+
+
+

LUNG:2w_F-1_M0—4w_F-1_M0

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default GraphicalAnalysisLung; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/PLASMA.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/PLASMA.jsx new file mode 100644 index 00000000..991e93a9 --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/PLASMA.jsx @@ -0,0 +1,218 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringLandscapeImageLocation, +} from '../sharedLib'; + +function GraphicalAnalysisPlasma() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'plasma'; + const imageURL = `${pass1b06GraphicalClusteringLandscapeImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ PLASMA:1w_F1_M0->2w_F1_M1->4w_F1_M0->8w_F0_M0 +

+

+ + + +

+
+
+
+
+

Selected nodes

+
+

PLASMA:8w_F-1_M-1

+

+ + + No significant enrichments for PLASMA:8w_F-1_M-1 +

+
+
+
+

PLASMA:8w_F-1_M0

+

+ + + No significant enrichments for PLASMA:8w_F-1_M0 +

+
+
+
+

PLASMA:8w_F0_M-1

+

+ + + +

+
+
+
+

PLASMA:8w_F0_M1

+

+ + + +

+
+
+
+

PLASMA:8w_F1_M0

+

+ + + +

+
+
+
+

PLASMA:8w_F1_M1

+

+ + + No significant enrichments for PLASMA:8w_F1_M1 +

+
+
+
+
+

Selected edges

+
+

PLASMA:4w_F1_M0—8w_F0_M0

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default GraphicalAnalysisPlasma; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SKM_GN.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SKM_GN.jsx new file mode 100644 index 00000000..93485d07 --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SKM_GN.jsx @@ -0,0 +1,272 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringLandscapeImageLocation, +} from '../sharedLib'; + +function GraphicalAnalysisGastrocnemius() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'gastrocnemius'; + const imageURL = `${pass1b06GraphicalClusteringLandscapeImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+ +

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+ +

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+ +

+ +

+
+
+

Split by ome group

+ +

+ + + +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+ +
+

Selected paths

+ +
+

+ SKM-GN:1w_F1_M1->2w_F1_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ SKM-GN:1w_F-1_M-1->2w_F-1_M-1->4w_F-1_M-1->8w_F-1_M-1 +

+

+ + + +

+
+
+
+

+ SKM-GN:1w_F0_M1->2w_F0_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ SKM-GN:1w_F0_M0->2w_F0_M0->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ SKM-GN:1w_F1_M0->2w_F1_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+
+

Selected nodes

+ +
+

SKM-GN:8w_F1_M1

+

+ + + +

+
+
+
+

SKM-GN:8w_F-1_M-1

+

+ + + +

+
+
+
+

SKM-GN:8w_F-1_M0

+

+ + + +

+
+
+
+

SKM-GN:8w_F0_M-1

+

+ + + +

+
+
+
+

SKM-GN:8w_F0_M1

+

+ + + +

+
+
+
+

SKM-GN:8w_F1_M0

+

+ + + +

+
+
+
+
+

Selected edges

+ +
+

SKM-GN:4w_F1_M1—8w_F1_M1

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default GraphicalAnalysisGastrocnemius; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SKM_VL.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SKM_VL.jsx new file mode 100644 index 00000000..aceae160 --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SKM_VL.jsx @@ -0,0 +1,273 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringLandscapeImageLocation, +} from '../sharedLib'; + +function GraphicalAnalysisVastusLateralis() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'vastus_lateralis'; + const imageURL = `${pass1b06GraphicalClusteringLandscapeImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ SKM-VL:1w_F-1_M0->2w_F-1_M0->4w_F-1_M0->8w_F-1_M-1 +

+

+ + + +

+
+
+
+

+ SKM-VL:1w_F1_M1->2w_F1_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ SKM-VL:1w_F1_M0->2w_F1_M0->4w_F1_M0->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ SKM-VL:1w_F1_M0->2w_F1_M0->4w_F1_M0->8w_F1_M0 +

+

+ + + +

+
+
+
+

+ SKM-VL:1w_F0_M1->2w_F0_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+
+

Selected nodes

+
+

SKM-VL:8w_F1_M1

+

+ + + +

+
+
+
+

SKM-VL:4w_F1_M1

+

+ + + +

+
+
+
+

SKM-VL:8w_F-1_M-1

+

+ + + +

+
+
+
+

SKM-VL:8w_F-1_M0

+

+ + + +

+
+
+
+

SKM-VL:8w_F0_M1

+

+ + + +

+
+
+
+

SKM-VL:8w_F1_M0

+

+ + + +

+
+
+
+
+

Selected edges

+
+

SKM-VL:4w_F1_M1—8w_F1_M1

+

+ + + +

+
+
+
+

+ SKM-VL:2w_F-1_M0—4w_F-1_M0 +

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default GraphicalAnalysisVastusLateralis; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SMLINT.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SMLINT.jsx new file mode 100644 index 00000000..0b636a8e --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SMLINT.jsx @@ -0,0 +1,246 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringLandscapeImageLocation, +} from '../sharedLib'; + +function GraphicalAnalysisSmallIntestine() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'small_intestine'; + const imageURL = `${pass1b06GraphicalClusteringLandscapeImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ SMLINT:1w_F1_M0->2w_F1_M0->4w_F0_M0->8w_F0_M0 +

+

+ + + +

+
+
+
+

+ SMLINT:1w_F-1_M0->2w_F-1_M1->4w_F0_M1->8w_F-1_M0 +

+

+ + + +

+
+
+
+

+ SMLINT:1w_F-1_M0->2w_F-1_M0->4w_F0_M0->8w_F0_M0 +

+

+ + + +

+
+
+
+

+ SMLINT:1w_F1_M0->2w_F1_M0->4w_F1_M0->8w_F0_M0 +

+

+ + + +

+
+
+
+

+ SMLINT:1w_F-1_M0->2w_F-1_M0->4w_F0_M0->8w_F-1_M-1 +

+

+ + + +

+
+
+
+
+

Selected nodes

+
+

SMLINT:8w_F-1_M-1

+

+ + + +

+
+
+
+

SMLINT:8w_F-1_M0

+

+ + + +

+
+
+
+

SMLINT:8w_F0_M-1

+

+ + + +

+
+
+
+

SMLINT:8w_F1_M1

+

+ + + No significant enrichments for SMLINT:8w_F1_M1 +

+
+
+
+
+

Selected edges

+
+

+ SMLINT:1w_F-1_M0—2w_F-1_M0 +

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default GraphicalAnalysisSmallIntestine; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SPLEEN.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SPLEEN.jsx new file mode 100644 index 00000000..50c9cff4 --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/SPLEEN.jsx @@ -0,0 +1,250 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringLandscapeImageLocation, +} from '../sharedLib'; + +function GraphicalAnalysisSpleen() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'spleen'; + const imageURL = `${pass1b06GraphicalClusteringLandscapeImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ SPLEEN:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F-1_M-1 +

+

+ + + +

+
+
+
+

+ SPLEEN:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F0_M-1 +

+

+ + + +

+
+
+
+

+ SPLEEN:1w_F0_M0->2w_F0_M0->4w_F0_M1->8w_F0_M1 +

+

+ + + +

+
+
+
+

+ SPLEEN:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ SPLEEN:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F0_M1 +

+

+ + + +

+
+
+
+
+

Selected nodes

+
+

SPLEEN:8w_F-1_M-1

+

+ + + +

+
+
+
+

SPLEEN:8w_F-1_M0

+

+ + + +

+
+
+
+

SPLEEN:8w_F0_M-1

+

+ + + +

+
+
+
+

SPLEEN:8w_F0_M1

+

+ + + +

+
+
+
+

SPLEEN:8w_F1_M0

+

+ + + +

+
+
+
+

SPLEEN:8w_F1_M1

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default GraphicalAnalysisSpleen; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/WAT_SC.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/WAT_SC.jsx new file mode 100644 index 00000000..27a5dcee --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bLandscapeTissues/WAT_SC.jsx @@ -0,0 +1,300 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringLandscapeImageLocation, +} from '../sharedLib'; + +function GraphicalAnalysisWhiteAdipose() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'white_adipose'; + const imageURL = `${pass1b06GraphicalClusteringLandscapeImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ + + +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ WAT-SC:1w_F0_M1->2w_F0_M1->4w_F0_M0->8w_F-1_M0 +

+

+ + + +

+
+
+
+

+ WAT-SC:1w_F0_M1->2w_F0_M1->4w_F0_M1->8w_F0_M1 +

+

+ + + +

+
+
+
+

+ WAT-SC:1w_F0_M1->2w_F0_M1->4w_F0_M0->8w_F0_M0 +

+

+ + + +

+
+
+
+

+ WAT-SC:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ WAT-SC:1w_F0_M-1->2w_F0_M-1->4w_F0_M0->8w_F1_M0 +

+

+ + + +

+
+
+
+
+

Selected nodes

+
+

WAT-SC:2w_F0_M1

+

+ + + +

+
+
+
+

WAT-SC:1w_F0_M1

+

+ + + +

+
+
+
+

WAT-SC:8w_F-1_M-1

+

+ + + +

+
+
+
+

WAT-SC:8w_F-1_M0

+

+ + + +

+
+
+
+

WAT-SC:8w_F-1_M1

+

+ + + +

+
+
+
+

WAT-SC:8w_F0_M-1

+

+ + + +

+
+
+
+

WAT-SC:8w_F0_M1

+

+ + + +

+
+
+
+

WAT-SC:8w_F1_M0

+

+ + + +

+
+
+
+

WAT-SC:8w_F1_M1

+

+ + + +

+
+
+
+
+

Selected edges

+
+

WAT-SC:1w_F0_M1—2w_F0_M1

+

+ + + +

+
+
+
+

WAT-SC:2w_F0_M1—4w_F0_M1

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default GraphicalAnalysisWhiteAdipose; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/ADRNL.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/ADRNL.jsx new file mode 100644 index 00000000..44de305a --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/ADRNL.jsx @@ -0,0 +1,313 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringMitoImageLocation, +} from '../sharedLib'; + +function MitoGraphicalAnalysisAdrenal() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'adrenal'; + const imageURL = `${pass1b06GraphicalClusteringMitoImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ +

+

+ +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ ADRNL:1w_F-1_M1->2w_F-1_M0->4w_F-1_M0->8w_F-1_M0 +

+

+ + + +

+
+
+
+

+ ADRNL:1w_F-1_M1->2w_F-1_M1->4w_F-1_M1->8w_F-1_M1 +

+

+ + + +

+
+
+
+

+ ADRNL:1w_F1_M-1->2w_F1_M0->4w_F1_M0->8w_F1_M0 +

+

+ + + No significant enrichments for + ADRNL:1w_F1_M-1->2w_F1_M0->4w_F1_M0->8w_F1_M0 +

+
+
+
+

+ ADRNL:1w_F0_M1->2w_F-1_M0->4w_F-1_M0->8w_F-1_M0 +

+

+ + + No significant enrichments for + ADRNL:1w_F0_M1->2w_F-1_M0->4w_F-1_M0->8w_F-1_M0 +

+
+
+
+

+ ADRNL:1w_F-1_M1->2w_F-1_M1->4w_F-1_M0->8w_F-1_M0 +

+

+ + + No significant enrichments for + ADRNL:1w_F-1_M1->2w_F-1_M1->4w_F-1_M0->8w_F-1_M0 +

+
+
+
+
+

Selected nodes

+
+

ADRNL:4w_F-1_M0

+

+ + + +

+
+
+
+

ADRNL:1w_F-1_M1

+

+ + + +

+
+
+
+

ADRNL:8w_F-1_M0

+

+ + + +

+
+
+
+

ADRNL:8w_F-1_M-1

+

+ + + No significant enrichments for ADRNL:8w_F-1_M-1 +

+
+
+
+

ADRNL:8w_F-1_M1

+

+ + + +

+
+
+
+

ADRNL:8w_F0_M-1

+

+ + + No significant enrichments for ADRNL:8w_F0_M-1 +

+
+
+
+

ADRNL:8w_F0_M1

+

+ + + No significant enrichments for ADRNL:8w_F0_M1 +

+
+
+
+

ADRNL:8w_F1_M0

+

+ + + No significant enrichments for ADRNL:8w_F1_M0 +

+
+
+
+

ADRNL:8w_F1_M1

+

+ + + No significant enrichments for ADRNL:8w_F1_M1 +

+
+
+
+
+

Selected edges

+
+

ADRNL:4w_F-1_M0—8w_F-1_M0

+

+ + + +

+
+
+
+

ADRNL:2w_F-1_M0—4w_F-1_M0

+

+ + + +

+
+
+
+

ADRNL:1w_F-1_M1—2w_F-1_M0

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default MitoGraphicalAnalysisAdrenal; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/BAT.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/BAT.jsx new file mode 100644 index 00000000..19e59d6f --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/BAT.jsx @@ -0,0 +1,248 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringMitoImageLocation, +} from '../sharedLib'; + +function MitoGraphicalAnalysisBrownAdipose() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'brown_adipose'; + const imageURL = `${pass1b06GraphicalClusteringMitoImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ +

+

+ +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ BAT:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F-1_M-1 +

+

+ + + +

+
+
+
+

+ BAT:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F0_M-1 +

+

+ + + No significant enrichments for + BAT:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F0_M-1 +

+
+
+
+

+ BAT:1w_F0_M0->2w_F0_M0->4w_F0_M-1->8w_F-1_M-1 +

+

+ + + +

+
+
+
+

+ BAT:1w_F0_M-1->2w_F0_M-1->4w_F0_M-1->8w_F0_M-1 +

+

+ + + +

+
+
+
+

+ BAT:1w_F0_M0->2w_F0_M0->4w_F0_M-1->8w_F0_M-1 +

+

+ + + +

+
+
+
+
+

Selected nodes

+
+

BAT:8w_F-1_M-1

+

+ + + +

+
+
+
+

BAT:8w_F0_M-1

+

+ + + +

+
+
+
+

BAT:8w_F0_M1

+

+ + + +

+
+
+
+

BAT:8w_F1_M1

+

+ + + +

+
+
+
+
+

Selected edges

+
+

BAT:4w_F0_M0—8w_F-1_M-1

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default MitoGraphicalAnalysisBrownAdipose; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/BLOOD.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/BLOOD.jsx new file mode 100644 index 00000000..680b7bcd --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/BLOOD.jsx @@ -0,0 +1,241 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringMitoImageLocation, +} from '../sharedLib'; + +function MitoGraphicalAnalysisBlood() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'blood'; + const imageURL = `${pass1b06GraphicalClusteringMitoImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ +

+

+ +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ BLOOD:1w_F0_M1->2w_F0_M1->4w_F0_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ BLOOD:1w_F0_M1->2w_F0_M1->4w_F0_M1->8w_F0_M1 +

+

+ + + +

+
+
+
+
+

Selected nodes

+
+

BLOOD:1w_F0_M1

+

+ + + +

+
+
+
+

BLOOD:2w_F0_M1

+

+ + + +

+
+
+
+

BLOOD:4w_F0_M1

+

+ + + +

+
+
+
+

BLOOD:8w_F0_M1

+

+ + + +

+
+
+
+

BLOOD:8w_F1_M1

+

+ + + +

+
+
+
+
+

Selected edges

+
+

BLOOD:1w_F0_M1—2w_F0_M1

+

+ + + +

+
+
+
+

BLOOD:2w_F0_M1—4w_F0_M1

+

+ + + +

+
+
+
+

BLOOD:4w_F0_M1—8w_F1_M1

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default MitoGraphicalAnalysisBlood; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/COLON.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/COLON.jsx new file mode 100644 index 00000000..71ad268d --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/COLON.jsx @@ -0,0 +1,258 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringMitoImageLocation, +} from '../sharedLib'; + +function MitoGraphicalAnalysisColon() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'colon'; + const imageURL = `${pass1b06GraphicalClusteringMitoImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ +

+

+ +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ COLON:1w_F-1_M0->2w_F-1_M0->4w_F0_M0->8w_F1_M0 +

+

+ + + +

+
+
+
+

+ COLON:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ COLON:1w_F-1_M0->2w_F-1_M-1->4w_F0_M0->8w_F1_M0 +

+

+ + + +

+
+
+
+

+ COLON:1w_F0_M-1->2w_F0_M-1->4w_F0_M0->8w_F1_M0 +

+

+ + + No significant enrichments for + COLON:1w_F0_M-1->2w_F0_M-1->4w_F0_M0->8w_F1_M0 +

+
+
+
+

+ COLON:1w_F-1_M0->2w_F-1_M-1->4w_F-1_M0->8w_F0_M0 +

+

+ + + No significant enrichments for + COLON:1w_F-1_M0->2w_F-1_M-1->4w_F-1_M0->8w_F0_M0 +

+
+
+
+
+

Selected nodes

+
+

COLON:1w_F-1_M0

+

+ + + +

+
+
+
+

COLON:8w_F1_M0

+

+ + + +

+
+
+
+

COLON:8w_F1_M1

+

+ + + +

+
+
+
+
+

Selected edges

+
+

COLON:4w_F0_M0—8w_F1_M0

+

+ + + +

+
+
+
+

COLON:1w_F-1_M0—2w_F-1_M0

+

+ + + +

+
+
+
+

COLON:2w_F-1_M0—4w_F0_M0

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default MitoGraphicalAnalysisColon; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/HEART.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/HEART.jsx new file mode 100644 index 00000000..d45981c9 --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/HEART.jsx @@ -0,0 +1,302 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringMitoImageLocation, +} from '../sharedLib'; + +function MitoGraphicalAnalysisHeart() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'heart'; + const imageURL = `${pass1b06GraphicalClusteringMitoImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ +

+

+ + +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ HEART:1w_F1_M1->2w_F1_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ HEART:1w_F0_M1->2w_F0_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ HEART:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F-1_M-1 +

+

+ + + +

+
+
+
+

+ HEART:1w_F0_M1->2w_F0_M1->4w_F1_M1->8w_F0_M1 +

+

+ + + +

+
+
+
+

+ HEART:1w_F0_M1->2w_F0_M1->4w_F0_M0->8w_F0_M-1 +

+

+ + + +

+
+
+
+
+

Selected nodes

+
+

HEART:4w_F1_M1

+

+ + + +

+
+
+
+

HEART:2w_F1_M1

+

+ + + +

+
+
+
+

HEART:8w_F1_M1

+

+ + + +

+
+
+
+

HEART:8w_F-1_M-1

+

+ + + +

+
+
+
+

HEART:8w_F-1_M0

+

+ + + +

+
+
+
+

HEART:8w_F0_M-1

+

+ + + +

+
+
+
+

HEART:8w_F0_M1

+

+ + + +

+
+
+
+

HEART:8w_F1_M0

+

+ + + +

+
+
+
+
+

Selected edges

+
+

HEART:4w_F1_M1—8w_F1_M1

+

+ + + +

+
+
+
+

HEART:2w_F1_M1—4w_F1_M1

+

+ + + +

+
+
+
+

HEART:1w_F1_M1—2w_F1_M1

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default MitoGraphicalAnalysisHeart; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/KIDNEY.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/KIDNEY.jsx new file mode 100644 index 00000000..6be427dc --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/KIDNEY.jsx @@ -0,0 +1,227 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringMitoImageLocation, +} from '../sharedLib'; + +function MitoGraphicalAnalysisKidney() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'kidney'; + const imageURL = `${pass1b06GraphicalClusteringMitoImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ +

+

+ +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ KIDNEY:1w_F-1_M-1->2w_F-1_M-1->4w_F-1_M-1->8w_F-1_M-1 +

+

+ + + +

+
+
+
+

+ KIDNEY:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F-1_M-1 +

+

+ + + +

+
+
+
+

+ KIDNEY:1w_F1_M1->2w_F1_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+
+

Selected nodes

+
+

KIDNEY:8w_F-1_M-1

+

+ + + +

+
+
+
+

KIDNEY:8w_F0_M-1

+

+ + + +

+
+
+
+

KIDNEY:8w_F1_M0

+

+ + + +

+
+
+
+

KIDNEY:8w_F1_M1

+

+ + + +

+
+
+
+
+

Selected edges

+
+

+ KIDNEY:4w_F-1_M-1—8w_F-1_M-1 +

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default MitoGraphicalAnalysisKidney; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/LIVER.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/LIVER.jsx new file mode 100644 index 00000000..bf055ca8 --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/LIVER.jsx @@ -0,0 +1,302 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringMitoImageLocation, +} from '../sharedLib'; + +function MitoGraphicalAnalysisLiver() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'liver'; + const imageURL = `${pass1b06GraphicalClusteringMitoImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ +

+

+ + +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ LIVER:1w_F0_M1->2w_F0_M1->4w_F0_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ LIVER:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ LIVER:1w_F0_M1->2w_F0_M1->4w_F0_M1->8w_F0_M1 +

+

+ + + +

+
+
+
+

+ LIVER:1w_F0_M1->2w_F0_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ LIVER:1w_F1_M1->2w_F1_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+
+

Selected nodes

+
+

LIVER:8w_F1_M1

+

+ + + +

+
+
+
+

LIVER:1w_F0_M1

+

+ + + +

+
+
+
+

LIVER:2w_F0_M1

+

+ + + +

+
+
+
+

LIVER:8w_F-1_M-1

+

+ + + +

+
+
+
+

LIVER:8w_F-1_M0

+

+ + + +

+
+
+
+

LIVER:8w_F-1_M1

+

+ + + No significant enrichments for LIVER:8w_F-1_M1 +

+
+
+
+

LIVER:8w_F0_M-1

+

+ + + +

+
+
+
+

LIVER:8w_F0_M1

+

+ + + +

+
+
+
+

LIVER:8w_F1_M0

+

+ + + No significant enrichments for LIVER:8w_F1_M0 +

+
+
+
+
+

Selected edges

+
+

LIVER:1w_F0_M1—2w_F0_M1

+

+ + + +

+
+
+
+

LIVER:2w_F0_M1—4w_F0_M1

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default MitoGraphicalAnalysisLiver; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/LUNG.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/LUNG.jsx new file mode 100644 index 00000000..a1bcdf77 --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/LUNG.jsx @@ -0,0 +1,215 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringMitoImageLocation, +} from '../sharedLib'; + +function MitoGraphicalAnalysisLung() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'lung'; + const imageURL = `${pass1b06GraphicalClusteringMitoImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected nodes

+
+

LUNG:1w_F-1_M-1

+

+ + + +

+
+
+
+

LUNG:2w_F-1_M-1

+

+ + + +

+
+
+
+

LUNG:8w_F-1_M-1

+

+ + + +

+
+
+
+

LUNG:8w_F0_M-1

+

+ + + +

+
+
+
+

LUNG:8w_F1_M1

+

+ + + No significant enrichments for LUNG:8w_F1_M1 +

+
+
+
+
+

Selected edges

+
+

+ LUNG:1w_F-1_M-1—2w_F-1_M-1 +

+

+ + + +

+
+
+
+

LUNG:4w_F-1_M0—8w_F0_M0

+

+ + + +

+
+
+
+

LUNG:1w_F0_M1—2w_F0_M1

+

+ + + No significant enrichments for LUNG:1w_F0_M1—2w_F0_M1 +

+
+
+
+
+
+
+
+ ); +} + +export default MitoGraphicalAnalysisLung; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SKM_GN.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SKM_GN.jsx new file mode 100644 index 00000000..4fd5e265 --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SKM_GN.jsx @@ -0,0 +1,293 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringMitoImageLocation, +} from '../sharedLib'; + +function MitoGraphicalAnalysisGastrocnemius() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'gastrocnemius'; + const imageURL = `${pass1b06GraphicalClusteringMitoImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ +

+

+ +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ SKM-GN:1w_F1_M1->2w_F1_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ SKM-GN:1w_F1_M0->2w_F1_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ SKM-GN:1w_F0_M1->2w_F0_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ SKM-GN:1w_F0_M0->2w_F0_M0->4w_F1_M0->8w_F1_M1 +

+

+ + + No significant enrichments for + SKM-GN:1w_F0_M0->2w_F0_M0->4w_F1_M0->8w_F1_M1 +

+
+
+
+

+ SKM-GN:1w_F1_M0->2w_F1_M0->4w_F1_M0->8w_F1_M0 +

+

+ + + +

+
+
+
+
+

Selected nodes

+
+

SKM-GN:8w_F1_M1

+

+ + + +

+
+
+
+

SKM-GN:4w_F1_M1

+

+ + + +

+
+
+
+

SKM-GN:2w_F1_M1

+

+ + + +

+
+
+
+

SKM-GN:8w_F-1_M-1

+

+ + + +

+
+
+
+

SKM-GN:8w_F0_M-1

+

+ + + No significant enrichments for SKM-GN:8w_F0_M-1 +

+
+
+
+

SKM-GN:8w_F0_M1

+

+ + + No significant enrichments for SKM-GN:8w_F0_M1 +

+
+
+
+

SKM-GN:8w_F1_M0

+

+ + + +

+
+
+
+
+

Selected edges

+
+

SKM-GN:4w_F1_M1—8w_F1_M1

+

+ + + +

+
+
+
+

SKM-GN:2w_F1_M1—4w_F1_M1

+

+ + + +

+
+
+
+

SKM-GN:1w_F1_M1—2w_F1_M1

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default MitoGraphicalAnalysisGastrocnemius; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SKM_VL.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SKM_VL.jsx new file mode 100644 index 00000000..32001ced --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SKM_VL.jsx @@ -0,0 +1,275 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringMitoImageLocation, +} from '../sharedLib'; + +function MitoGraphicalAnalysisVastusLateralis() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'vastus_lateralis'; + const imageURL = `${pass1b06GraphicalClusteringMitoImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ +

+

+ +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ SKM-VL:1w_F1_M1->2w_F1_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ SKM-VL:1w_F0_M1->2w_F0_M1->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ SKM-VL:1w_F1_M0->2w_F1_M0->4w_F1_M0->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ SKM-VL:1w_F0_M0->2w_F0_M0->4w_F1_M1->8w_F1_M1 +

+

+ + + +

+
+
+
+

+ SKM-VL:1w_F1_M0->2w_F1_M0->4w_F1_M0->8w_F1_M0 +

+

+ + + No significant enrichments for + SKM-VL:1w_F1_M0->2w_F1_M0->4w_F1_M0->8w_F1_M0 +

+
+
+
+
+

Selected nodes

+
+

SKM-VL:8w_F1_M1

+

+ + + +

+
+
+
+

SKM-VL:4w_F1_M1

+

+ + + +

+
+
+
+

SKM-VL:2w_F1_M1

+

+ + + +

+
+
+
+

SKM-VL:8w_F-1_M-1

+

+ + + +

+
+
+
+

SKM-VL:8w_F1_M0

+

+ + + +

+
+
+
+
+

Selected edges

+
+

SKM-VL:4w_F1_M1—8w_F1_M1

+

+ + + +

+
+
+
+

SKM-VL:2w_F1_M1—4w_F1_M1

+

+ + + +

+
+
+
+

SKM-VL:1w_F1_M1—2w_F1_M1

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default MitoGraphicalAnalysisVastusLateralis; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SMLINT.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SMLINT.jsx new file mode 100644 index 00000000..607eae72 --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SMLINT.jsx @@ -0,0 +1,162 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringMitoImageLocation, +} from '../sharedLib'; + +function MitoGraphicalAnalysisSmallIntestine() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'small_intestine'; + const imageURL = `${pass1b06GraphicalClusteringMitoImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ +

+

+ +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected nodes

+
+

SMLINT:1w_F1_M0

+

+ + + +

+
+
+
+
+

Selected edges

+
+

SMLINT:1w_F1_M0—2w_F1_M0

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default MitoGraphicalAnalysisSmallIntestine; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SPLEEN.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SPLEEN.jsx new file mode 100644 index 00000000..9556cec4 --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/SPLEEN.jsx @@ -0,0 +1,213 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringMitoImageLocation, +} from '../sharedLib'; + +function MitoGraphicalAnalysisSpleen() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'spleen'; + const imageURL = `${pass1b06GraphicalClusteringMitoImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ +

+

+ +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ SPLEEN:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F1_M1 +

+

+ + + No significant enrichments for + SPLEEN:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F1_M1 +

+
+
+
+
+

Selected nodes

+
+

SPLEEN:8w_F1_M1

+

+ + + +

+
+
+
+

SPLEEN:1w_F1_M0

+

+ + + No significant enrichments for SPLEEN:1w_F1_M0 +

+
+
+
+

SPLEEN:8w_F0_M1

+

+ + + No significant enrichments for SPLEEN:8w_F0_M1 +

+
+
+
+

SPLEEN:8w_F1_M0

+

+ + + No significant enrichments for SPLEEN:8w_F1_M0 +

+
+
+
+
+

Selected edges

+
+

SPLEEN:1w_F1_M0—2w_F1_M0

+

+ + + No significant enrichments for SPLEEN:1w_F1_M0—2w_F1_M0 +

+
+
+
+

SPLEEN:1w_F0_M1—2w_F0_M1

+

+ + + No significant enrichments for SPLEEN:1w_F0_M1—2w_F0_M1 +

+
+
+
+
+
+
+
+ ); +} + +export default MitoGraphicalAnalysisSpleen; diff --git a/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/WAT_SC.jsx b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/WAT_SC.jsx new file mode 100644 index 00000000..4a489f39 --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/Pass1bMitoTissues/WAT_SC.jsx @@ -0,0 +1,286 @@ +import React, { useEffect } from 'react'; +import * as tocbot from 'tocbot'; +import { + tocbotConfig, + pass1b06GraphicalClusteringMitoImageLocation, +} from '../sharedLib'; + +function MitoGraphicalAnalysisWhiteAdipose() { + // initialize table of contents + useEffect(() => { + tocbot.init(tocbotConfig); + }, []); + + // load plot images + const tissueImageFolder = 'white_adipose'; + const imageURL = `${pass1b06GraphicalClusteringMitoImageLocation}/${tissueImageFolder}`; + + return ( +
+
+
+
+
+
+
+

Graph characteristics

+

+ 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. +

+
+

All paths

+

Tree of ALL differential analytes (all paths)

+

+ +

+
+
+

Top clusters

+

+ A “cluster” is a path, node, or edge. Here we show the size and + ome distributions for selected clusters in this tissue. +

+

+ +

+
+
+
+

Top 5 trajectories

+

+ 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. +

+
+

All omes

+

+ +

+
+
+

Split by ome group

+

+ +

+

+ +

+
+
+
+

+ Detailed view of selected clusters +

+

+ Here we show highlighted trees, top pathway enrichments, network + view of all pathway enrichments, and sample-level + trajectories for each selected cluster (node, edge, or path). +

+

+ Interactive networks of pathway enrichments +

+

+ These networks summarize all significant pathway enrichments for a + set of differential analytes. Results from all omes are combined. +

+

+ 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.{' '} + + Pathways only enriched with metabolites are not shown because + edges are defined using genes, not KEGG IDs. + +

+

+ 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. +

+

+ 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. +

+

Explore these interactive plots!

+
    +
  • + Hover over nodes (pathways) and edges (intersection between + pathways) to see more information +
    +
  • +
  • + Click nodes to highlight them and connected edges +
    +
  • +
  • + Zoom in and out +
    +
  • +
  • Click and drag nodes
  • +
+
+

Selected paths

+
+

+ WAT-SC:1w_F0_M-1->2w_F0_M-1->4w_F0_M0->8w_F1_M0 +

+

+ + + +

+
+
+
+

+ WAT-SC:1w_F0_M1->2w_F0_M1->4w_F0_M1->8w_F0_M1 +

+

+ + + +

+
+
+
+

+ WAT-SC:1w_F0_M-1->2w_F0_M-1->4w_F0_M-1->8w_F0_M-1 +

+

+ + + No significant enrichments for + WAT-SC:1w_F0_M-1->2w_F0_M-1->4w_F0_M-1->8w_F0_M-1 +

+
+
+
+

+ WAT-SC:1w_F1_M-1->2w_F1_M-1->4w_F1_M0->8w_F1_M0 +

+

+ + + +

+
+
+
+

+ WAT-SC:1w_F0_M0->2w_F0_M0->4w_F0_M0->8w_F1_M1 +

+

+ + + +

+
+
+
+
+

Selected nodes

+
+

WAT-SC:8w_F1_M0

+

+ + + +

+
+
+
+

WAT-SC:1w_F0_M-1

+

+ + + +

+
+
+
+

WAT-SC:8w_F-1_M-1

+

+ + + No significant enrichments for WAT-SC:8w_F-1_M-1 +

+
+
+
+

WAT-SC:8w_F-1_M0

+

+ + + +

+
+
+
+

WAT-SC:8w_F0_M-1

+

+ + + +

+
+
+
+

WAT-SC:8w_F0_M1

+

+ + + +

+
+
+
+

WAT-SC:8w_F1_M1

+

+ + + +

+
+
+
+
+

Selected edges

+
+

+ WAT-SC:1w_F0_M-1—2w_F0_M-1 +

+

+ + + +

+
+
+
+

WAT-SC:4w_F1_M0—8w_F1_M0

+

+ + + +

+
+
+
+
+
+
+
+ ); +} + +export default MitoGraphicalAnalysisWhiteAdipose; diff --git a/src/AnalysisPage/GraphicalClustering/components/graphicalClusteringIntroduction.jsx b/src/AnalysisPage/GraphicalClustering/components/graphicalClusteringIntroduction.jsx new file mode 100644 index 00000000..5a392c54 --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/components/graphicalClusteringIntroduction.jsx @@ -0,0 +1,99 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ExternalLink from '../../../lib/ui/externalLink'; + +// Common graphical clustering introduction component +function GraphicalClusteringIntroduction({ currentView }) { + return ( +
+

Introduction

+

+ Objectives of these reports: +

+
    +
  • + To share representations of complex data as interactive reports that + allow researchers to extract meaningful biology +
    +
  • +
  • + To compile biological insights from these reports, some of which will + be included in the landscape manuscript and companions +
  • + {currentView && currentView === 'pass1b-06-mitochondria' ? ( +
  • To highlight results related to mitochondrial genes
  • + ) : null} +
+

+ Background about graphical clustering analysis: +

+

+ A graphical approach with repfdr has replaced multiomics + clustering as the primary method to characterize and explore main + patterns of training-differential analytes in the PASS1B data. To learn + more about this approach, see presentations by David Amar{' '} + {' '} + and{' '} + + . +

+

+ Briefly, each differential molecule is assigned one of nine states + [(male up/1, male null/0, male down/-1) x (female up/1, female null/0, + female down/-1)] for each training time point (1, 2, 4, and 8 weeks). + These states are our nodes in the graphs. Then, for each + pair of nodes (x,y) such that y is from a time point that is immediately + after x (e.g., x is a node from week 4 and y is a node from week 8), we + define their edge set as the intersection of their analytes. This + defines the edges in the graphs. By visualizing these + graphs and characterizing different nodes, edges, and paths (i.e. a set + of edges that traverses all time points), we can extract meaningful + biology. +

+

+ We refer to sets of molecules in specific edges, nodes, or paths as{' '} + graphical clusters. Throughout this report, you will + see labels for these clusters, e.g.{' '} + + "SKM-GN:1w_F-1_M-1->2w_F-1_M-1->4w_F-1_M-1->8w_F-1_M-1" + + . Here’s how to break it down: +

+
    +
  • + All clusters are prefixed with the tissue abbreviation and a colon, + e.g. SKM-GN: +
    +
  • +
  • + Nodes are defined by the time point and state in each sex, where state + is 1 for up, 0 for null, and -1 for down. For example,{' '} + 1w_F-1_M-1 is a node that characterizes molecules at the{' '} + 1w time point that are down-regulated in females ( + F-1) and down-regulated in males (M-1). + These three pieces of information (time point, female state, male + state) are separated by underscores (_)
    +
  • +
  • + Edges contain --- and connect a pair of nodes +
    +
  • +
  • + Paths contain -> and connect four nodes +
  • +
+
+ ); +} + +GraphicalClusteringIntroduction.propTypes = { + currentView: PropTypes.string.isRequired, +}; + +export default GraphicalClusteringIntroduction; diff --git a/src/AnalysisPage/GraphicalClustering/components/tissueSelection.jsx b/src/AnalysisPage/GraphicalClustering/components/tissueSelection.jsx new file mode 100644 index 00000000..a51c3592 --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/components/tissueSelection.jsx @@ -0,0 +1,79 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const reportTissues = { + ADRNL: 'Adrenal', + BLOOD: 'Blood RNA', + BAT: 'Brown Adipose', + COLON: 'Colon', + CORTEX: 'Cortex', + SKM_GN: 'Gastrocnemius', + HEART: 'Heart', + HIPPOC: 'Hippocampus', + HYPOTH: 'Hypothalamus', + KIDNEY: 'Kidney', + LIVER: 'Liver', + LUNG: 'Lung', + PLASMA: 'Plasma', + SMLINT: 'Small Intestine', + SPLEEN: 'Spleen', + SKM_VL: 'Vastus Lateralis', + WAT_SC: 'White Adipose', +}; + +// Tissue selection dropdown component +function TissueSelection({ tissue, toggleTissue, currentView }) { + const tissueKeys = Object.keys(reportTissues); + + if (currentView === 'pass1b-06-mitochondria') { + tissueKeys.splice(tissueKeys.indexOf('CORTEX'), 1); + tissueKeys.splice(tissueKeys.indexOf('HIPPOC'), 1); + tissueKeys.splice(tissueKeys.indexOf('HYPOTH'), 1); + tissueKeys.splice(tissueKeys.indexOf('PLASMA'), 1); + } + + return ( +
+
+
Tissue:
+
+ +
+ {tissueKeys.map((key) => { + return ( + + ); + })} +
+
+
+
+ ); +} + +TissueSelection.propTypes = { + tissue: PropTypes.string.isRequired, + toggleTissue: PropTypes.func.isRequired, + currentView: PropTypes.string.isRequired, +}; + +export default TissueSelection; diff --git a/src/AnalysisPage/GraphicalClustering/graphicalClusteringPage.jsx b/src/AnalysisPage/GraphicalClustering/graphicalClusteringPage.jsx index a2cfaf47..4cc0fca6 100644 --- a/src/AnalysisPage/GraphicalClustering/graphicalClusteringPage.jsx +++ b/src/AnalysisPage/GraphicalClustering/graphicalClusteringPage.jsx @@ -1,46 +1,43 @@ -import React, { useRef, useState } from 'react'; -import IframeResizer from 'iframe-resizer-react'; +import React, { useState } from 'react'; +import { useLocation } from 'react-router-dom'; +import PageTitle from '../../lib/ui/pageTitle'; import ExternalLink from '../../lib/ui/externalLink'; - -const reportTissues = { - ADRNL: 'Adrenal', - BLOOD: 'Blood RNA', - BAT: 'Brown Adipose', - COLON: 'Colon', - CORTEX: 'Cortex', - SKM_GN: 'Gastrocnemius', - HEART: 'Heart', - HIPPOC: 'Hippocampus', - HYPOTH: 'Hypothalamus', - KIDNEY: 'Kidney', - LIVER: 'Liver', - LUNG: 'Lung', - PLASMA: 'Plasma', - SMLINT: 'Small Intestine', - SPLEEN: 'Spleen', - SKM_VL: 'Vastus Lateralis', - WAT_SC: 'White Adipose', -}; +import Pass1bLandscapeGraphicalReport from './pass1bLandscapeReport'; +import Pass1bMitochondriaGraphicalReport from './pass1bMitoReport'; +import GraphicalClusteringIntroduction from './components/graphicalClusteringIntroduction'; +import TissueSelection from './components/tissueSelection'; +import { handleScroll } from './sharedLib'; function GraphicalClustering() { - const iframeRef = useRef(null); const [tissue, setTissue] = useState('SKM_GN'); - const iframeRefMito = useRef(null); const [mitoTissue, setMitoTissue] = useState('HEART'); - const [currentView, setCurrentView] = useState('landscape'); + const [currentView, setCurrentView] = useState('pass1b-06-landscape'); + const location = useLocation(); + const { pathname } = location; // Handler to set current view to either landscape or companion study function handleViewChange(study) { setCurrentView(study); } + // fix toc position to the top of the page when scrolling + if (pathname === '/graphical-clustering') { + window.addEventListener('scroll', handleScroll); + } else { + window.removeEventListener('scroll', handleScroll); + } + return ( -
-
-
-

Graphical Clustering

-
-
+
+
+ +
-
- {currentView === 'landscape' && ( - +
+ {currentView === 'pass1b-06-landscape' && ( + )} - {currentView === 'mitochondria' && ( + {currentView === 'pass1b-06-mitochondria' && ( )}
@@ -89,109 +81,45 @@ function GraphicalClustering() { export default GraphicalClustering; -// Tissue selection dropdown component -function ReportControls({ tissue, toggleReport }) { - const tissueKeys = Object.keys(reportTissues); - - return ( -
-
-
-
- Select a tissue: -
-
- -
- {tissueKeys.map((key) => { - return ( - - ); - })} -
-
-
-
-
- ); -} - -// iFrame content component -function IframeGraphicalResults({ srcPath, iframeRef }) { - return ( - - ); -} - // Landscape graphical clustering component -function LandscapeGraphicalClustering({ tissue, setTissue, iframeRef }) { +function LandscapeGraphicalClustering({ tissue, setTissue }) { return (
-
+
Explore multi-omic changes and associated pathway enrichment results over the training time course per tissue in adult rats. Compare responses between male and female rats, identify pathways affected in single or multiple omes' and explore what molecules drive those - enrichments. To learn more, see the{' '} + enrichments. See the{' '} {' '} - as well as the{' '} + and the{' '} - . + />{' '} + to learn more.
-
- - + + +
+
); } // Mitochondria graphical analysis component -function MitoChondriaGraphicalAnalysis({ tissue, setTissue, iframeRef }) { +function MitoChondriaGraphicalAnalysis({ tissue, setTissue }) { return (
-
+
Explore the mitochondria-selected (using{' '} .
-
- - + + +
+
); diff --git a/src/AnalysisPage/GraphicalClustering/pass1bLandscapeReport.jsx b/src/AnalysisPage/GraphicalClustering/pass1bLandscapeReport.jsx new file mode 100644 index 00000000..1a5a3eaf --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/pass1bLandscapeReport.jsx @@ -0,0 +1,70 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import GraphicalAnalysisHeart from './Pass1bLandscapeTissues/HEART'; +import GraphicalAnalysisLiver from './Pass1bLandscapeTissues/LIVER'; +import GraphicalAnalysisKidney from './Pass1bLandscapeTissues/KIDNEY'; +import GraphicalAnalysisLung from './Pass1bLandscapeTissues/LUNG'; +import GraphicalAnalysisPlasma from './Pass1bLandscapeTissues/PLASMA'; +import GraphicalAnalysisSpleen from './Pass1bLandscapeTissues/SPLEEN'; +import GraphicalAnalysisAdrenal from './Pass1bLandscapeTissues/ADRNL'; +import GraphicalAnalysisBlood from './Pass1bLandscapeTissues/BLOOD'; +import GraphicalAnalysisBrownAdipose from './Pass1bLandscapeTissues/BAT'; +import GraphicalAnalysisColon from './Pass1bLandscapeTissues/COLON'; +import GraphicalAnalysisCortex from './Pass1bLandscapeTissues/CORTEX'; +import GraphicalAnalysisGastrocnemius from './Pass1bLandscapeTissues/SKM_GN'; +import GraphicalAnalysisHippocampus from './Pass1bLandscapeTissues/HIPPOC'; +import GraphicalAnalysisHypothalamus from './Pass1bLandscapeTissues/HYPOTH'; +import GraphicalAnalysisSmallIntestine from './Pass1bLandscapeTissues/SMLINT'; +import GraphicalAnalysisVastusLateralis from './Pass1bLandscapeTissues/SKM_VL'; +import GraphicalAnalysisWhiteAdipose from './Pass1bLandscapeTissues/WAT_SC'; + +function Pass1bLandscapeGraphicalReport({ tissue }) { + switch (tissue) { + case 'ADRNL': + return ; + case 'BLOOD': + return ; + case 'BAT': + return ; + case 'COLON': + return ; + case 'CORTEX': + return ; + case 'SKM_GN': + return ; + case 'HEART': + return ; + case 'HIPPOC': + return ; + case 'HYPOTH': + return ; + case 'KIDNEY': + return ; + case 'LIVER': + return ; + case 'LUNG': + return ; + case 'PLASMA': + return ; + case 'SMLINT': + return ; + case 'SPLEEN': + return ; + case 'SKM_VL': + return ; + case 'WAT_SC': + return ; + default: + return ; + } +} + +Pass1bLandscapeGraphicalReport.propTypes = { + tissue: PropTypes.string, +}; + +Pass1bLandscapeGraphicalReport.defaultProps = { + tissue: 'SKM_GN', +}; + +export default Pass1bLandscapeGraphicalReport; diff --git a/src/AnalysisPage/GraphicalClustering/pass1bMitoReport.jsx b/src/AnalysisPage/GraphicalClustering/pass1bMitoReport.jsx new file mode 100644 index 00000000..62a947a6 --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/pass1bMitoReport.jsx @@ -0,0 +1,58 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import MitoGraphicalAnalysisHeart from './Pass1bMitoTissues/HEART'; +import MitoGraphicalAnalysisLiver from './Pass1bMitoTissues/LIVER'; +import MitoGraphicalAnalysisKidney from './Pass1bMitoTissues/KIDNEY'; +import MitoGraphicalAnalysisLung from './Pass1bMitoTissues/LUNG'; +import MitoGraphicalAnalysisSpleen from './Pass1bMitoTissues/SPLEEN'; +import MitoGraphicalAnalysisAdrenal from './Pass1bMitoTissues/ADRNL'; +import MitoGraphicalAnalysisBlood from './Pass1bMitoTissues/BLOOD'; +import MitoGraphicalAnalysisBrownAdipose from './Pass1bMitoTissues/BAT'; +import MitoGraphicalAnalysisColon from './Pass1bMitoTissues/COLON'; +import MitoGraphicalAnalysisGastrocnemius from './Pass1bMitoTissues/SKM_GN'; +import MitoGraphicalAnalysisSmallIntestine from './Pass1bMitoTissues/SMLINT'; +import MitoGraphicalAnalysisVastusLateralis from './Pass1bMitoTissues/SKM_VL'; +import MitoGraphicalAnalysisWhiteAdipose from './Pass1bMitoTissues/WAT_SC'; + +function Pass1bMitochondriaGraphicalReport({ tissue }) { + switch (tissue) { + case 'ADRNL': + return ; + case 'BLOOD': + return ; + case 'BAT': + return ; + case 'COLON': + return ; + case 'SKM_GN': + return ; + case 'HEART': + return ; + case 'KIDNEY': + return ; + case 'LIVER': + return ; + case 'LUNG': + return ; + case 'SMLINT': + return ; + case 'SPLEEN': + return ; + case 'SKM_VL': + return ; + case 'WAT_SC': + return ; + default: + return ; + } +} + +Pass1bMitochondriaGraphicalReport.propTypes = { + tissue: PropTypes.string, +}; + +Pass1bMitochondriaGraphicalReport.defaultProps = { + tissue: 'HEART', +}; + +export default Pass1bMitochondriaGraphicalReport; diff --git a/src/AnalysisPage/GraphicalClustering/sharedLib.js b/src/AnalysisPage/GraphicalClustering/sharedLib.js new file mode 100644 index 00000000..9f218db5 --- /dev/null +++ b/src/AnalysisPage/GraphicalClustering/sharedLib.js @@ -0,0 +1,46 @@ +export const tocbotConfig = { + tocSelector: '.tocify', // Where to render the table of contents + contentSelector: '.toc-content', // Where to grab the headings to build the table of contents + headingSelector: 'h2, h3, h4', // Which headings to grab inside of the contentSelector element + hasInnerContainers: true, // For headings inside relative or absolute positioned containers within content + ignoreSelector: '.toc-ignore', + headingsOffset: 100, + scrollSmoothOffset: -100, +}; + +export const pass1b06GraphicalClusteringLandscapeImageLocation = + 'https://cdn.motrpac-data.org/assets/datahub/graphical_clustering_results/figures/pass1b_06/landscape'; + +export const pass1b06GraphicalClusteringMitoImageLocation = + 'https://cdn.motrpac-data.org/assets/datahub/graphical_clustering_results/figures/pass1b_06/mitochondria'; + +// fix toc position to the top of the page when scrolling +export function handleScroll() { + // page elements to compute total offset height + // to fix toc to the top of the page when scrolling + const pageHeader = document.querySelector('.page-header'); + const summary = document.querySelector('.page-summary'); + const intro = document.getElementById('introduction'); + const control = document.querySelector('.controlPanelContainer'); + // current scroll height of the page + const scrollHeight = + window.scrollY || + document.body.scrollTop || + (document.documentElement && document.documentElement.scrollTop); + // conditions required to fix toc to the top of the page + const page = document.querySelector('.graphicalClusteringPage'); + const toc = document.getElementById('TOC'); + + if (page && toc) { + const offsetHeight = + pageHeader.offsetHeight + summary.offsetHeight + intro.offsetHeight + 50; + + if (scrollHeight >= offsetHeight) { + control.classList.add('controlPanelContainer-fix-top'); + toc.classList.add('toc-fix-top'); + } else { + control.classList.remove('controlPanelContainer-fix-top'); + toc.classList.remove('toc-fix-top'); + } + } +} diff --git a/src/App/App.jsx b/src/App/App.jsx index aeb04f7e..90373ca2 100644 --- a/src/App/App.jsx +++ b/src/App/App.jsx @@ -28,6 +28,7 @@ import CodeRepositories from '../CodeRepoPage/codeRepoPage'; import MainStudyConnected from '../MainStudy/mainStudy'; import Tutorials from '../Tutorials/tutorials'; import Publications from '../Publications/publications'; +import FullTableEnduranceTraining from '../Publications/Data/Animal/Phenotype/fullTableEnduranceTraining'; import Pass1b06PhenotypeAnimalConnected from '../AnalysisPage/pass1b06PhenotypeAnimal'; import CallbackConnected from '../Auth/callback'; import { withTracker } from '../GoogleAnalytics/googleAnalytics'; @@ -131,8 +132,14 @@ function App({ history = History }) { + ', () => { }); test('It should contain fifteen children', () => { - expect(component.find('Route').length).toBe(19); + expect(component.find('Route').length).toBe(20); }); test('It should contain four children', () => { diff --git a/src/LandingPage/components/backgroundVideo.jsx b/src/LandingPage/components/backgroundVideo.jsx index da80d5af..45de423b 100644 --- a/src/LandingPage/components/backgroundVideo.jsx +++ b/src/LandingPage/components/backgroundVideo.jsx @@ -1,10 +1,12 @@ import React from 'react'; -import VideoMoleculeNetwork from '../../assets/LandingPageGraphics/background_video_molecules_221511488.mp4'; + +const videoMoleculeNetwork = + 'https://cdn.motrpac-data.org/assets/datahub/landing_page/media/background_video_molecules_221511488.mp4'; function BackgroundVideo() { return ( ); } diff --git a/src/MainStudy/mainStudy.jsx b/src/MainStudy/mainStudy.jsx index fb0fb9b9..23090b71 100644 --- a/src/MainStudy/mainStudy.jsx +++ b/src/MainStudy/mainStudy.jsx @@ -75,10 +75,31 @@ function MainStudy({ profile, allFiles, handleDataFetch }) {
Preclinical animal study sites
+
+ + pest_control_rodent + + +

Humans

Clinical study sites
+
+ person + + person + +
@@ -152,7 +173,7 @@ function MainStudy({ profile, allFiles, handleDataFetch }) { training, with a 48 hour rest or wash out period before samples were collected. See the{' '} {' '} to learn more. @@ -206,15 +227,23 @@ function MainStudy({ profile, allFiles, handleDataFetch }) { alt="Endurance Exercise Tissues / Molecular Profiling" />
-
+
Download Data + + Explore Data +
diff --git a/src/MethodsPage/methods.jsx b/src/MethodsPage/methods.jsx index 657d790e..157d7fcf 100644 --- a/src/MethodsPage/methods.jsx +++ b/src/MethodsPage/methods.jsx @@ -23,20 +23,33 @@ export function Methods({ profile }) {
The MoTrPAC study is divided into two main parts; human and animal (rats). Preclinical Animal Study Sites (PASSs) conduct the endurance - exercise and training intervention in rats, and Human Clinical - Exercise Sites conduct the human endurance and resistance training - interventions. Multiple biospecimen samples are collected at - different time points after acute and chronic exercise. Please see - the Animal protocol below for details on the animal training - intervention and sample collection. The biospecimen samples are - distributed from a central biorepository to various Chemical - Analysis Sites (CASs) for molecular ‘omics analysis. Specific - methods for the different molecular assays are described in the - Manual Of Procedures (MOPs). There is one for the genomic, - transcriptomic and epigenomic data (GET), one for proteomics and one - for metabolomics. In addition, the assay-specific quality control - (QC) procedures are described in the QC Standard Operating - Procedures (SOPs) documents. + exercise and training intervention in rats (see{' '} + + ), and Human Clinical Exercise Sites conduct the human endurance and + resistance training interventions (see{' '} + {' '} + and{' '} + + ). Multiple biospecimen samples are collected at different time + points after acute and chronic exercise. Please see the Animal + protocol below for details on the animal training intervention and + sample collection. The biospecimen samples are distributed from a + central biorepository to various Chemical Analysis Sites (CASs) for + molecular ‘omics analysis. Specific methods for the different + molecular assays are described in the Manual Of Procedures (MOPs). + There is one for the genomic, transcriptomic and epigenomic data + (GET), one for proteomics and one for metabolomics. In addition, the + assay-specific quality control (QC) procedures are described in the + QC Standard Operating Procedures (SOPs) documents.
{userType && userType === 'internal' ? ( diff --git a/src/Publications/Data/Animal/Phenotype/fullTableEnduranceTraining.jsx b/src/Publications/Data/Animal/Phenotype/fullTableEnduranceTraining.jsx new file mode 100644 index 00000000..f1b5bf68 --- /dev/null +++ b/src/Publications/Data/Animal/Phenotype/fullTableEnduranceTraining.jsx @@ -0,0 +1,31 @@ +import React from 'react'; + +function FullTableEnduranceTraining() { + return ( +
+
+

Full phenotype table for animal endurance training study

+ + file_download + Download this dataset + +
+
+