+
{!props.fallback ? (
{props.pdbResults === '' ? (
-
@@ -12,3 +15,17 @@ ReactDOM.createRoot(document.getElementById('root')).render(
// ,
);
+const SendAnalytics = () => {
+ ReactGA.send({
+ hitType: 'pageview',
+ page: window.location.pathname,
+ });
+};
+
+try {
+ onCLS(SendAnalytics);
+ onLCP(SendAnalytics);
+ onFID(SendAnalytics);
+} catch (err) {
+ console.error(err);
+}
diff --git a/webapp/src/main/GlycanDetail/GlycanDetailTorsionPlot.tsx b/webapp/src/main/GlycanDetail/GlycanDetailTorsionPlot.tsx
index 1e2b25db..e2f96813 100644
--- a/webapp/src/main/GlycanDetail/GlycanDetailTorsionPlot.tsx
+++ b/webapp/src/main/GlycanDetail/GlycanDetailTorsionPlot.tsx
@@ -1,12 +1,12 @@
-import { type TableDataEntry } from '../../interfaces/types.ts';
+import { type ResultsEntry } from '../../interfaces/types.ts';
import React, { lazy, useEffect, useState } from 'react';
const TorsionMultiPlot = lazy(
- async () => await import('./TorsionPlot/TorsionMultiPlot.tsx')
+ async () => await import('../../shared/TorsionPlot/TorsionMultiPlot.tsx')
);
export function GlycanDetailTorsionPlot(props: {
key: string;
- tableDataEntries: TableDataEntry[];
+ tableDataEntries: ResultsEntry[];
rowID: number;
tab: number;
tab1: (value: ((prevState: number) => number) | number) => void;
@@ -33,6 +33,7 @@ export function GlycanDetailTorsionPlot(props: {
tab={props.tab}
setTab={props.tab1}
size={dimension}
+ background={'#D6D9E5'}
/>
);
diff --git a/webapp/src/routes/Database/Database.tsx b/webapp/src/routes/Database/Database.tsx
index ee6f2401..36da7f37 100644
--- a/webapp/src/routes/Database/Database.tsx
+++ b/webapp/src/routes/Database/Database.tsx
@@ -20,8 +20,8 @@ export default function Database(props: {
const [resetApp, setResetApp] = useState
(false);
const [fallback, setFallBack] = useState(false);
const [failureText, setFailureText] = useState('');
- const [pdbResults, setPDBResults] = useState('');
- const [pdbRedoResults, setPDBRedoResults] = useState('');
+ const [pdbResults, setPDBResults] = useState('');
+ const [pdbRedoResults, setPDBRedoResults] = useState('');
// const [failure, setFailure] = useState(false);
@@ -33,9 +33,12 @@ export default function Database(props: {
try {
const response = await fetch(pdbUrl);
- const data: string = await response.json();
- setPDBResults(data);
- } catch {
+ const text = await response.text();
+ const replacedText = text.replace(/\bNaN\b/g, 'null');
+ const result = JSON.parse(replacedText);
+ // const data: string = await response.json();
+ setPDBResults(result);
+ } catch (e) {
setFallBack(true);
setFailureText('This PDB is not in the database');
}
@@ -44,9 +47,12 @@ export default function Database(props: {
try {
const response = await fetch(pdbRedoUrl);
- const redoData: string = await response.json();
- setPDBRedoResults(redoData);
+ const text = await response.text();
+ const replacedText = text.replace(/\bNaN\b/g, 'null');
+ const result = JSON.parse(replacedText);
+ setPDBRedoResults(result);
} catch {
+ console.log('PDB REDO Failed');
// setFallBack(true);
// setFailureText('This PDB is not in the database');
}
@@ -73,7 +79,7 @@ export default function Database(props: {
setPDBCode('');
setPDBResults('');
setPDBRedoResults('');
- props.setSearchParams({});
+ // props.setSearchParams({});
}, [resetApp]);
useEffect(() => {
diff --git a/webapp/src/main/GlycanDetail/TorsionPlot/TorsionMultiPlot.tsx b/webapp/src/shared/TorsionPlot/TorsionMultiPlot.tsx
similarity index 77%
rename from webapp/src/main/GlycanDetail/TorsionPlot/TorsionMultiPlot.tsx
rename to webapp/src/shared/TorsionPlot/TorsionMultiPlot.tsx
index 6f8184d4..8b0ff530 100644
--- a/webapp/src/main/GlycanDetail/TorsionPlot/TorsionMultiPlot.tsx
+++ b/webapp/src/shared/TorsionPlot/TorsionMultiPlot.tsx
@@ -1,10 +1,9 @@
-import React, { useEffect, lazy, type ReactElement } from 'react';
+import React, { useEffect, lazy, type ReactElement, useState } from 'react';
const TorsionPlot = lazy(async () => await import('./TorsionPlot.tsx'));
function sortTorsions(torsions): [string[], any] {
const linkageSet = new Set();
-
torsions.forEach(
(torsion: {
sugar_1: string;
@@ -84,14 +83,22 @@ function sortTorsions(torsions): [string[], any] {
return [linkageArray, sortedLinkageMap];
}
-function TorsionMultiPlotTabs({ torsions, setTab }): React.JSX.Element[] {
+function TorsionMultiPlotTabs({
+ torsions,
+ currentTab,
+ setTab,
+}): React.JSX.Element[] {
const [linkageArray, _] = sortTorsions(torsions);
return linkageArray.map((item, index) => {
return (
{
setTab(index);
}}
@@ -114,22 +121,34 @@ export default function TorsionMultiPlot({
tab,
setTab,
size,
+ background,
}: {
torsions: any;
tab: string;
setTab: any;
size: any;
+ background: string;
}): ReactElement {
- const [linkageArray, sortedLinkageArray] = sortTorsions(torsions);
+ const [linkageArray, setLinkageArray] = useState([]);
+ const [sortedLinkageArray, setSortedLinkageArray] = useState();
useEffect(() => {
setTab(0);
}, []);
+ useEffect(() => {
+ if (torsions === undefined) {
+ return;
+ }
+ const [linkageArray_, sortedLinkageArray_] = sortTorsions(torsions);
+ setLinkageArray(linkageArray_);
+ setSortedLinkageArray(sortedLinkageArray_);
+ }, [torsions]);
+
return (
<>
- {linkageArray.length === 0 ? (
- <>
+ {torsions === undefined ? (
+ <>There are no linkages to be displayed.
) : (
@@ -137,6 +156,7 @@ export default function TorsionMultiPlot({
@@ -145,6 +165,7 @@ export default function TorsionMultiPlot({
linkageType={linkageArray[tab]}
sortedTorsionList={sortedLinkageArray}
size={size}
+ background={background}
/>
)}
diff --git a/webapp/src/main/GlycanDetail/TorsionPlot/TorsionPlot.tsx b/webapp/src/shared/TorsionPlot/TorsionPlot.tsx
similarity index 88%
rename from webapp/src/main/GlycanDetail/TorsionPlot/TorsionPlot.tsx
rename to webapp/src/shared/TorsionPlot/TorsionPlot.tsx
index 696ee25f..cf7d1d66 100644
--- a/webapp/src/main/GlycanDetail/TorsionPlot/TorsionPlot.tsx
+++ b/webapp/src/shared/TorsionPlot/TorsionPlot.tsx
@@ -1,24 +1,33 @@
import React, { useEffect, useState, lazy, type ReactElement } from 'react';
-import { linkageDB, binDB } from '../../../data/Constants.tsx';
+import { linkageDB, binDB } from '../../data/Constants.tsx';
const Plot = lazy(async () => await import('react-plotly.js'));
export default function TorsionPlot({
linkageType,
sortedTorsionList,
size,
+ background,
}: {
linkageType: string;
sortedTorsionList: any;
size: any;
+ background: string;
}): ReactElement {
const [trace, setTrace] = useState({});
const [overlay, setOverlay] = useState({});
const [linkageFound, setLinkageFound] = useState(false);
useEffect(() => {
+ if (sortedTorsionList === undefined) {
+ return;
+ }
+
fetch(linkageDB[linkageType])
- .then(async (response) => await response.json())
+ .then(async (response) => await response.text())
+ .then((text) => {
+ return JSON.parse(text.replace(/\bNaN\b/g, 'null'));
+ })
.then((responseJson) => {
const xData: number[] = [];
const yData: number[] = [];
@@ -64,7 +73,6 @@ export default function TorsionPlot({
overlayPhi.push(sortedTorsionList[linkageType][i].phi as number);
overlayPsi.push(sortedTorsionList[linkageType][i].psi as number);
}
-
setOverlay({
x: overlayPhi,
y: overlayPsi,
@@ -76,7 +84,7 @@ export default function TorsionPlot({
symbol: ['x'],
},
});
- }, [linkageType]);
+ }, [linkageType, sortedTorsionList]);
return !linkageFound ? (
@@ -91,7 +99,8 @@ export default function TorsionPlot({
height: size,
title: linkageType,
plot_bgcolor: '#FFFFFF',
- paper_bgcolor: '#D6D9E5',
+ // paper_bgcolor: ,
+ paper_bgcolor: background,
yaxis: {
title: {
text: 'ψ / °',
diff --git a/webapp/src/utils/loadGlytoucan.ts b/webapp/src/utils/loadGlytoucan.ts
index cc7b44c5..71574f1d 100644
--- a/webapp/src/utils/loadGlytoucan.ts
+++ b/webapp/src/utils/loadGlytoucan.ts
@@ -53,13 +53,18 @@ export async function loadGlytoucanFromFile(
tableData.forEach((data, index) => {
const glycomicsResult = glycomicsData[data.wurcs];
+ if (!glycomicsResult) {
+ return;
+ }
// Neaten up NotFound -> Not Found
- if (glycomicsResult.GlyConnect === 'NotFound') {
- glycomicsResult.GlyConnect = 'Not Found';
- }
+ if (glycomicsResult.hasOwnProperty('GlyConnect')) {
+ if (glycomicsResult.GlyConnect === 'NotFound') {
+ glycomicsResult.GlyConnect = 'Not Found';
+ }
- tableData[index].glytoucan_id = glycomicsResult.GlyToucan;
- tableData[index].glyconnect_id = glycomicsResult.GlyConnect;
+ tableData[index].glytoucan_id = glycomicsResult.GlyToucan;
+ tableData[index].glyconnect_id = glycomicsResult.GlyConnect;
+ }
});
}