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() { -
-
- -
- -
- - -
-
+ {/*
*/} + {/*
*/} + {/* */} + {/*
*/} + {/* */} + {/*
*/} + + {/**/} +
+
- - -
-
- -
- -
+ {/**/} + + {/*
*/} + {/*
*/} + {/* */} + {/*
*/} + {/* */} + {/*
*/}