From eadf9a9b37081d17d56e86518594e072c8460ce8 Mon Sep 17 00:00:00 2001 From: Jordan Dialpuri <44945647+Dialpuri@users.noreply.github.com> Date: Tue, 30 Jan 2024 10:45:42 +0000 Subject: [PATCH] Update chart colors and relocate error graphs This commit changes the color scheme of the scatter Plots in the GlycansVsYear.tsx file. Also, some deprecated error graphs (ErrorsVsYear.tsx and ErrorsVsResolution.tsx) were moved to a new 'old' folder. Additionally, ConformationErrorsVsResolution.tsx and ConformationErrorsVsYear.tsx files were significantly modified to represent different types of data and were given a new URL to fetch data from. The Graphs.tsx file has been updated to reflect these changes. --- .../Graphs/ConformationErrorsVsYear.tsx | 62 +++++++++++---- .../ConformationalErrorsVsResolution.tsx | 65 ++++++++++------ .../src/statistics/Graphs/GlycansVsYear.tsx | 12 +-- webapp/src/statistics/Graphs/Graphs.tsx | 76 +++++++++---------- .../Graphs/{ => old}/ErrorsVsResolution.tsx | 2 +- .../Graphs/{ => old}/ErrorsVsYear.tsx | 2 +- 6 files changed, 132 insertions(+), 87 deletions(-) rename webapp/src/statistics/Graphs/{ => old}/ErrorsVsResolution.tsx (99%) rename webapp/src/statistics/Graphs/{ => old}/ErrorsVsYear.tsx (99%) diff --git a/webapp/src/statistics/Graphs/ConformationErrorsVsYear.tsx b/webapp/src/statistics/Graphs/ConformationErrorsVsYear.tsx index 58f40adb..0a0472e2 100644 --- a/webapp/src/statistics/Graphs/ConformationErrorsVsYear.tsx +++ b/webapp/src/statistics/Graphs/ConformationErrorsVsYear.tsx @@ -4,7 +4,8 @@ import Plot from 'react-plotly.js'; export default function ConformationErrorsVsYear(props: { database: string }) { const [totalTrace, setTotalTrace] = useState(); - const [errorTrace, setErrorTrace] = useState(); + const [checkTrace, setCheckTrace] = useState(); + const [noTrace, setNoTrace] = useState(); const [relativeTrace, setRelativeTrace] = useState(); // const [depositedTrace, setDepositedTrace] = useState(); @@ -21,7 +22,7 @@ export default function ConformationErrorsVsYear(props: { database: string }) { useEffect(() => { const url = - 'https://raw.githubusercontent.com/Dialpuri/PrivateerDatabase/master/stats/conformational_errors_per_year.json'; + 'https://raw.githubusercontent.com/Dialpuri/PrivateerDatabase/master/stats/validation_errors_per_year.json'; fetch(url) .then(async (response) => await response.json()) @@ -61,34 +62,54 @@ export default function ConformationErrorsVsYear(props: { database: string }) { const newTotalTrace = { x: Object.keys(data[props.database]), y: Object.values(data[props.database]).map((e) => { - return e.totalChair + e.totalNonChair; + return e.totalSugars + }), + type: 'bar', + name: 'Total Deposited', + yaxis: 'y2', + name: 'Total Sugars', + line: { + width: 3 + }, + marker: { + color: 'rgb(100,100,100)', + opacity: 0.2, + }, + }; + + setTotalTrace(newTotalTrace); + + const newCheckTrace = { + x: Object.keys(data[props.database]), + y: Object.values(data[props.database]).map((e) => { + return 100 * e.totalCheck / e.totalSugars; }), type: 'scatter', mode: 'lines', - // marker: {color: 'red'}, - name: 'Total Sugars', + marker: {color: 'blue'}, + name: 'High Energy Conformation', line: { width: 3 } }; - setTotalTrace(newTotalTrace); + setCheckTrace(newCheckTrace); - const newErrorTrace = { + const newNoTrace = { x: Object.keys(data[props.database]), y: Object.values(data[props.database]).map((e) => { - return e.totalNonChair; + return 100 * e.totalNo / e.totalSugars; }), type: 'scatter', mode: 'lines', - // marker: {color: 'green'}, - name: 'Non Chair Sugars', + marker: {color: 'red'}, + name: 'Errors', line: { width: 3 } }; - setErrorTrace(newErrorTrace); + setNoTrace(newNoTrace); const newRelativeTrace = { x: Object.keys(data[props.database]), @@ -116,7 +137,8 @@ export default function ConformationErrorsVsYear(props: { database: string }) { Conformational Anomalies in ${ + text: `Carbohydrate Anomalies in ${ props.database === 'pdbredo' ? 'PDB-REDO' : 'the PDB' @@ -149,7 +171,7 @@ export default function ConformationErrorsVsYear(props: { database: string }) { }, yaxis: { title: { - text: 'Number', + text: 'Relative anomalies / %', font: { size: 18, family: 'sans-serif', @@ -161,7 +183,7 @@ export default function ConformationErrorsVsYear(props: { database: string }) { automargin: true, ticksuffix: ' ', tickprefix: ' ', - range: [-50, 35000], + range: [0, 100], }, yaxis2: { overlaying: 'y', @@ -170,8 +192,16 @@ export default function ConformationErrorsVsYear(props: { database: string }) { // anchor: 'free', side: 'right', automargin: true, + range: [-50, 35000], + title: { + text: 'Total Number of Depositions', + font: { + size: 18, + family: 'sans-serif', + }, + }, tickprefix: ' ', - range: [0, 100], + ticksuffix: ' ', }, xaxis: { title: { diff --git a/webapp/src/statistics/Graphs/ConformationalErrorsVsResolution.tsx b/webapp/src/statistics/Graphs/ConformationalErrorsVsResolution.tsx index 8474d03d..4339728b 100644 --- a/webapp/src/statistics/Graphs/ConformationalErrorsVsResolution.tsx +++ b/webapp/src/statistics/Graphs/ConformationalErrorsVsResolution.tsx @@ -6,8 +6,8 @@ export default function ConformationalErrorsVsResolution(props: { database: string; }) { const [totalTrace, setTotalTrace] = useState(); - const [errorTrace, setErrorTrace] = useState(); - const [relativeTrace, setRelativeTrace] = useState(); + const [noTrace, setNoTrace] = useState(); + const [checkTrace, setCheckTrace] = useState(); // const [depositedTrace, setDepositedTrace] = useState(); @@ -22,7 +22,7 @@ export default function ConformationalErrorsVsResolution(props: { useEffect(() => { const url = - 'https://raw.githubusercontent.com/Dialpuri/PrivateerDatabase/master/stats/conformational_errors_per_resolution.json'; + 'https://raw.githubusercontent.com/Dialpuri/PrivateerDatabase/master/stats/validation_errors_per_resolution.json'; fetch(url) .then(async (response) => await response.json()) @@ -62,51 +62,54 @@ export default function ConformationalErrorsVsResolution(props: { const newTotalTrace = { x: Object.keys(data[props.database]), y: Object.values(data[props.database]).map((e) => { - return e.totalChair + e.totalNonChair; + return e.totalSugars; }), - type: 'scatter', - mode: 'lines', - // marker: {color: 'red'}, + type: 'bar', + name: 'Total Deposited', + yaxis: 'y2', name: 'Total Sugars', line: { width: 3 - } + }, + marker: { + color: 'rgb(100,100,100)', + opacity: 0.2, + }, }; setTotalTrace(newTotalTrace); - const newErrorTrace = { + const newCheckTrace = { x: Object.keys(data[props.database]), y: Object.values(data[props.database]).map((e) => { - return e.totalNonChair; + return 100*e.totalCheck/e.totalSugars; }), type: 'scatter', mode: 'lines', - // marker: {color: 'green'}, - name: 'Total Non-chair Sugars', + marker: {color: 'blue'}, + name: 'High Energy Conformation', line: { width: 3 } }; - setErrorTrace(newErrorTrace); + setCheckTrace(newCheckTrace); - const newRelativeTrace = { + const newNoTrace = { x: Object.keys(data[props.database]), y: Object.values(data[props.database]).map((e) => { - return (100 * e.totalErrors) / e.totalGlyco; + return 100 * e.totalNo/e.totalSugars; }), type: 'scatter', mode: 'lines', - // marker: {color: 'green'}, - yaxis: 'y2', - name: 'Validation Errors', + marker: {color: 'red'}, + name: 'Errors', line: { width: 3 } }; - setRelativeTrace(newRelativeTrace); + setNoTrace(newNoTrace); }, [data, props.database]); return ( @@ -117,7 +120,8 @@ export default function ConformationalErrorsVsResolution(props: { Conformational Anomalies in ${ + text: `Carbohydrate Anomalies in ${ props.database === 'pdbredo' ? 'PDB-REDO' : 'the PDB' @@ -150,7 +154,7 @@ export default function ConformationalErrorsVsResolution(props: { }, yaxis: { title: { - text: 'Number', + text: 'Relative anomalies / %', font: { size: 18, family: 'sans-serif', @@ -162,7 +166,8 @@ export default function ConformationalErrorsVsResolution(props: { automargin: true, ticksuffix: ' ', tickprefix: ' ', - range: [-50, 14000], + range: [0, 100], + // type: 'log' }, yaxis2: { @@ -173,7 +178,17 @@ export default function ConformationalErrorsVsResolution(props: { side: 'right', automargin: true, tickprefix: ' ', - range: [0, 100], + range: [-50, 14000], + title: { + text: 'Total Number of Depositions', + font: { + size: 18, + family: 'sans-serif', + }, + }, + tickprefix: ' ', + ticksuffix: ' ', + }, xaxis: { title: { @@ -187,7 +202,7 @@ export default function ConformationalErrorsVsResolution(props: { linewidth: 2, mirror: true, tickmode: 'auto', - range: [0, 5], + range: [0.5 , 5 ], }, legend: { diff --git a/webapp/src/statistics/Graphs/GlycansVsYear.tsx b/webapp/src/statistics/Graphs/GlycansVsYear.tsx index 28279b51..e6bb0556 100644 --- a/webapp/src/statistics/Graphs/GlycansVsYear.tsx +++ b/webapp/src/statistics/Graphs/GlycansVsYear.tsx @@ -61,7 +61,7 @@ export default function GlycansVsYear() { }), type: 'scatter', mode: 'lines', - // marker: {color: 'red'}, + marker: {color: 'red'}, name: 'Total Carbohydrates', line: { width: 3 @@ -77,7 +77,7 @@ export default function GlycansVsYear() { }), type: 'scatter', mode: 'lines', - // marker: {color: 'green'}, + marker: {color: 'blue'}, name: 'N-Glycans', line: { width: 3 @@ -93,7 +93,7 @@ export default function GlycansVsYear() { }), type: 'scatter', mode: 'lines', - // marker: {color: 'blue'}, + marker: {color: 'gold'}, name: 'O-Glycans', line: { width: 3 @@ -109,7 +109,7 @@ export default function GlycansVsYear() { }), type: 'scatter', mode: 'lines', - // marker: {color: 'blue'}, + // marker: {color: 'gold'}, name: 'S-Glycans', line: { width: 3 @@ -157,8 +157,8 @@ export default function GlycansVsYear() { name: 'Total Deposited', yaxis: 'y2', marker: { - color: 'rgb(158,202,225)', - opacity: 0.4, + color: 'rgb(100,100,100)', + opacity: 0.2, }, }; diff --git a/webapp/src/statistics/Graphs/Graphs.tsx b/webapp/src/statistics/Graphs/Graphs.tsx index 3ae411fa..236a1544 100644 --- a/webapp/src/statistics/Graphs/Graphs.tsx +++ b/webapp/src/statistics/Graphs/Graphs.tsx @@ -1,10 +1,10 @@ import GlycansVsYear from './GlycansVsYear.tsx'; import React, { Suspense, useEffect, useState } from 'react'; import Loading from '../../shared/Loading/Loading.tsx'; -import ErrorsVsYear from './ErrorsVsYear.tsx'; +import ErrorsVsYear from './old/ErrorsVsYear.tsx'; import ConformationErrorsVsYear from './ConformationErrorsVsYear.tsx'; -import ErrorsVsResolution from './ErrorsVsResolution.tsx'; +import ErrorsVsResolution from './old/ErrorsVsResolution.tsx'; import PDBToggle from '../../shared/PDBToggle/PDBToggle.tsx'; import BorderElement from '../../layouts/BorderElement.tsx'; import ConformationalErrorsVsResolution from './ConformationalErrorsVsResolution.tsx'; @@ -63,25 +63,25 @@ export default function Graphs() { -
-
- -
- -
- - -
-
+ {/*
*/} + {/*
*/} + {/* */} + {/*
*/} + {/* */} + {/*
*/} + + {/**/} +
+
- - -
-
- -
- -
+ {/**/} + + {/*
*/} + {/*
*/} + {/* */} + {/*
*/} + {/* */} + {/*
*/}