diff --git a/package.json b/package.json index 7246dd9a..9c84833b 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "react-wordcloud": "^1.2.7", "redux": "^4.0.1", "redux-thunk": "^2.3.0", + "simple-statistics": "^7.8.7", "tocbot": "^4.25.0", "victory": "37.0.2", "vis-network-react": "DinerIsmail/vis-network-react" diff --git a/src/AnalysisPage/Phenotype/Components/Pass1ac-06/SummaryStatistics/categorySummaryStatistics.jsx b/src/AnalysisPage/Phenotype/Components/Pass1ac-06/SummaryStatistics/categorySummaryStatistics.jsx new file mode 100644 index 00000000..e6845719 --- /dev/null +++ b/src/AnalysisPage/Phenotype/Components/Pass1ac-06/SummaryStatistics/categorySummaryStatistics.jsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { useSelector } from 'react-redux'; +import SectionWeightDistribution from './sectionWeightDistribution'; +import SectionLactateChange from './sectionLactateChange'; +import SectionRatWork from './sectionRatWork'; + +/** + * Function component for the summary statistics category of PASS1AC-06 phenotypic data analysis + * + * @param {array} phenoData Curated phenotypic data + * + * @returns JSX element of the summary statistics category + */ +function CategorySummaryStatistics() { + const analysisState = useSelector((state) => state.analysis); + + return ( +
+ In this section, various summary statistics and visualizations that + explore key variables across the phenotypic data are presented. The + analysis covers weight distribution, electric shocks (both number + and duration), distance covered during the acute test, and lactate + changes due to exercise. Each variable is visualized through a + combination of boxplots, histograms, and density plots, broken down + by relevant factors such as sex, phase, and intervention group. + Additionally, we analyze the time taken to freeze tissues, including + comparisons across different groups and a detailed look at the order + in which tissues were frozen for each animal. These visualizations + help to identify patterns and trends within the phenotypic data. +
+ {/* weight distribution section */} + {analysisState.pass1ac06AnalysisCategoryOptions.summaryStatistics.weight_distribution && ( ++ The rats ran on the treadmill set to 5 degrees, which equals an incline of + 8.7%. Therefore, the work is calculated in joules using 8.7% as the slope. +
+
+ Equation -
+
+ Work = (Body weight (g) / 1000) x distance (meters) x 0.087 x9.80665
+
+
+ Example -
+ For a rat weighing 0.200 kg running 500 meters:
+
+ Work = 0.200 x 500 x 0.087 x 9.80665 = 85.318 joules
+
+
+ In this section, we explore the relationships between key variables within + the rat phenotypic data using correlation analyses. By examining how variables + such as weight, distance, lactate change, and electric shocks are related to + each other, we aim to identify patterns and potential dependencies. This helps + to better understand the associations between these variables, which can inform + further analysis of biological significance. The analyses include overall + correlation matrices and detailed pairwise comparisons visualized through + scatter plots and heatmaps. +
+ {/* weight distribution section */} + {analysisState.pass1ac06AnalysisCategoryOptions.correlationAnalysis.overall_correlation_matrix && ( +Data and Metadata | +Code | +Methods | +
---|---|---|
+
+
+ GCP bucket:
+ |
+
+
+
+
+ Analysis collaboration repository:
+
+ |
+
+
+ + + MoTrPAC MAWG Teamdrive > PASS1A-1C-06 > Writing Methods + + + |
+
The goal of the acute exercise study on young adult rats (designated as diff --git a/src/sass/_bootstrapCustom.scss b/src/sass/_bootstrapCustom.scss index 37161866..6c1b8de3 100644 --- a/src/sass/_bootstrapCustom.scss +++ b/src/sass/_bootstrapCustom.scss @@ -105,3 +105,9 @@ $green: $accent-green !default; } } } + +.nav-pills .nav-link { + background: 0 0; + border: 0; + border-radius: .25rem; +} diff --git a/src/sass/_multiOmicsWorkingGroups.scss b/src/sass/_multiOmicsWorkingGroups.scss index 4f1da2c4..1a681336 100644 --- a/src/sass/_multiOmicsWorkingGroups.scss +++ b/src/sass/_multiOmicsWorkingGroups.scss @@ -1,6 +1,6 @@ .multiOmicsWorkingGroupsPage { .multi-omics-wg-tab-content { - .pre-cawg { + .pre-cawg, .dawg-pac { .resources-table { th { text-align: center; diff --git a/src/sass/analysis/_phenotypeAnimal.scss b/src/sass/analysis/_phenotypeAnimal.scss index 4bfc6d9a..3d5b0c8a 100644 --- a/src/sass/analysis/_phenotypeAnimal.scss +++ b/src/sass/analysis/_phenotypeAnimal.scss @@ -1,55 +1,132 @@ .analysisPhenotypePage { - .card-container-phenotype-animal { - .card-header { - padding: 1.05rem 1.25rem; - margin-bottom: 0; - background-color: #fff; - border-bottom: 0 solid transparent; + .nav-pills.phenotype-data-nav { + .nav-link { + border-radius: 0; + color: #777; + padding-left: 0.75rem; + padding-right: 0.75rem; - .card-title { - font-size: 1.20rem; + &.active { + color: #000; + background: 0 0 !important; + border-bottom: solid 2px #000; + + .material-icons { + color: $primary; + } + } + + .nav-label { + font-size: 1.15rem; + margin-left: 0.15rem; + } + } + } + + .analysis-phenotype-container.pass1b-06 { + .card-container-phenotype-animal { + .card-header { + padding: 1.05rem 1.25rem; + margin-bottom: 0; + background-color: #fff; + border-bottom: 0 solid transparent; + + .card-title { + font-size: 1.20rem; + } + } + + .badge { + font-size: 0.85rem; + font-weight: 600; + padding: 0.35em 0.4em; + + &.badge-phase { + background-color: #c6c6c6; + } + } + + /* dropdown menus for plot and table */ + .controlPanel { + .controlRow { + .controlLabel { + font-weight: 600; + font-size: 0.85rem; + margin-right: 0.45rem; + white-space: nowrap; + } + + .btn.dropdown-toggle, + button.dropdown-item { + font-size: 0.85rem; + } + } + } + + /* chart.js plot */ + .phenotype-plot { + .weightGainPlot + .bodyFatPlot { + min-height: 65vh; + } + + .remark { + color: $gray; + font-size: 1.0rem; + margin-left: 0.5rem; + margin-right: 0.5rem; + } } } + } + + .analysis-phenotype-container.pass1ac-06 { + .analysis-category-navigation-container { + .panel-header { + font-size: 1.1rem; + } - .badge { - font-size: 0.85rem; - font-weight: 600; - padding: 0.35em 0.4em; + h6 { + font-weight: 600; + } - &.badge-phase { - background-color: #c6c6c6; + .form-check.selection-item { + margin-bottom: 0.5rem; } } - /* dropdown menus for plot and table */ - .controlPanel { - .controlRow { - .controlLabel { - font-weight: 600; - font-size: 0.85rem; - margin-right: 0.45rem; - white-space: nowrap; - } + .analysis-category-content-container { + h2 { + color: $stanford-cardinal-red; + } - .btn.dropdown-toggle, - button.dropdown-item { - font-size: 0.85rem; - } + h3 { + color: $stanford-cardinal-red; + margin-top: 1.5rem; } } - /* chart.js plot */ - .phenotype-plot { - .weightGainPlot - .bodyFatPlot { - min-height: 65vh; + .analysis-plot-display-options-container { + .panel-header { + font-size: 1.1rem; } - .remark { - color: $gray; - font-size: 1.0rem; - margin-left: 0.5rem; - margin-right: 0.5rem; + h6 { + font-weight: 600; + } + + .form-check.selection-item { + margin-bottom: 0; + } + + .form-group.selection-group { + margin-bottom: 0; + } + } + + .phenotype-plot-container { + .highcharts-container { + height: 600px !important; } } } diff --git a/yarn.lock b/yarn.lock index 60d9d735..9eaa200e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10461,6 +10461,11 @@ signal-exit@^4.0.1: resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04" integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw== +simple-statistics@^7.8.7: + version "7.8.7" + resolved "https://registry.yarnpkg.com/simple-statistics/-/simple-statistics-7.8.7.tgz#14b30bfda7ac252da83899362a3cf96a13264c8d" + integrity sha512-ed5FwTNYvkMTfbCai1U+r3symP+lIPKWCqKdudpN4NFNMn9RtDlFtSyAQhCp4oPH0YBjWu/qnW+5q5ZkPB3uHQ== + sisteransi@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"