Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update code to use pdb and pdbRedo databases #80

Merged
merged 1 commit into from
Jan 10, 2024
Merged

Update code to use pdb and pdbRedo databases #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions webapp/src/data/Constants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export const DatabaseColumns = [
},
{
Header: 'SNFG',
accessor: 'SNFG',
accessor: 'snfg',
Cell: (tableProps) => {
// console.log("SNFG", tableProps.row.original.SNFG)

Expand All @@ -106,7 +106,7 @@ export const DatabaseColumns = [
},
{
Header: 'WURCS',
accessor: 'WURCS',
accessor: 'wurcs',
Cell: (tableProps) => {
return (
<button
Expand Down Expand Up @@ -142,31 +142,31 @@ export const DatabaseColumns = [
export const SugarListColumns = [
{
Header: 'Sugar ID',
accessor: 'Sugar ID',
accessor: 'sugarId',
},
{
Header: 'Q',
accessor: 'Q',
accessor: 'q',
},
{
Header: 'Phi',
accessor: 'Phi',
accessor: 'phi',
},
{
Header: 'Theta',
accessor: 'Theta',
accessor: 'theta',
},
{
Header: 'RSCC',
accessor: 'RSCC',
accessor: 'rscc',
},
{
Header: 'B Factor',
accessor: 'BFactor',
accessor: 'bFactor',
},
{
Header: 'Detected Type',
accessor: 'Detected Type',
accessor: 'detectedType',
},
{
Header: 'mFo',
Expand All @@ -178,7 +178,7 @@ export const SugarListColumns = [
},
{
Header: 'Diagnostic',
accessor: 'Diagnostic',
accessor: 'diagnostic',
},
];

Expand Down
8 changes: 4 additions & 4 deletions webapp/src/database/DatabaseComponents/BFactorVsRSCC.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ function calculatePoints(data): [number[], number[], string[]] {
for (const key in glycans) {
const glycanType = glycans[key];
for (let i = 0; i < glycanType.length; i++) {
const sugars = glycanType[i].Sugars;
const sugars = glycanType[i].sugars;
for (let j = 0; j < sugars.length; j++) {
xAxis.push(sugars[j].BFactor as number);
yAxis.push(sugars[j].RSCC as number);
xAxis.push(sugars[j].bFactor as number);
yAxis.push(sugars[j].rscc as number);
text.push(sugars[j]['Sugar ID'] as string);
}
}
Expand Down Expand Up @@ -59,7 +59,7 @@ export default function BFactorVsRSCC(props) {
symbol: ['o'],
},
});
}, []);
}, [props]);

return (
<div className="flex flex-col mx-auto">
Expand Down
20 changes: 10 additions & 10 deletions webapp/src/database/DatabaseComponents/CremerPopleGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,16 @@ function calculatePoints(data) {
for (const key in glycans) {
const glycanType = glycans[key];
for (let i = 0; i < glycanType.length; i++) {
const sugars = glycanType[i].Sugars;
const sugars = glycanType[i].sugars;
for (let j = 0; j < sugars.length; j++) {
if (sugars[j].Diagnostic !== 'yes') {
errorXAxis.push(sugars[j].Phi as number);
errorYAxis.push(sugars[j].Theta as number);
errorText.push(sugars[j]['Sugar ID'] as string);
if (sugars[j].diagnostic !== 'yes') {
errorXAxis.push(sugars[j].phi as number);
errorYAxis.push(sugars[j].theta as number);
errorText.push(sugars[j].sugarId as string);
} else {
xAxis.push(sugars[j].Phi as number);
yAxis.push(sugars[j].Theta as number);
text.push(sugars[j]['Sugar ID'] as string);
xAxis.push(sugars[j].phi as number);
yAxis.push(sugars[j].theta as number);
text.push(sugars[j].sugarId as string);
}
// console.log(sugars[j])
}
Expand All @@ -35,7 +35,7 @@ function calculatePoints(data) {
return [xAxis, yAxis, text, errorXAxis, errorYAxis, errorText];
}

export default function CremerPopleGraph(props) {
export default function CremerPopleGraph(props: any) {
const [trace, setTrace] = useState({});
const [badTrace, setBadTrace] = useState({});

Expand Down Expand Up @@ -71,7 +71,7 @@ export default function CremerPopleGraph(props) {
},
name: 'Issues',
});
}, []);
}, [props]);

return (
<div className="flex flex-col mx-auto">
Expand Down
8 changes: 4 additions & 4 deletions webapp/src/database/DatabaseComponents/SNFGList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ function parseResults(data) {
for (const key in glycans) {
const glycanType = glycans[key];
for (let i = 0; i < glycanType.length; i++) {
const chain = glycanType[i].RootSugarChainID;
const chain = glycanType[i].rootSugarChainId;

const SNFG = glycanType[i].SNFG;
const WURCS = glycanType[i].WURCS;
const SNFG = glycanType[i].snfg;
const WURCS = glycanType[i].wurcs;

tableData.push({
chain,
Expand Down Expand Up @@ -109,7 +109,7 @@ export default function SNFGList(props) {
useEffect(() => {
const results = parseResults(props);
setData(results);
}, []);
}, [props]);

return (
<div className="flex flex-col mx-auto px-16">
Expand Down
8 changes: 4 additions & 4 deletions webapp/src/database/DatabaseComponents/SugarList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ function customSort(
a: Record<string, string>,
b: Record<string, string>
): number {
const splitA = a['Sugar ID'].split('-');
const splitB = b['Sugar ID'].split('-');
const splitA = a.sugarId.split('-');
const splitB = b.sugarId.split('-');

if (splitA[1] < splitB[1]) {
return -1;
Expand Down Expand Up @@ -36,7 +36,7 @@ function parseResults(data) {
for (const key in glycans) {
const glycanType = glycans[key];
for (let i = 0; i < glycanType.length; i++) {
const sugars: Array<Record<string, any>> = glycanType[i].Sugars;
const sugars: Array<Record<string, any>> = glycanType[i].sugars;
for (let j = 0; j < sugars.length; j++) {
const keys = Object.keys(sugars[j]);
const entry = {};
Expand Down Expand Up @@ -133,7 +133,7 @@ export default function SugarList(props) {
useEffect(() => {
const results = parseResults(props);
setData(results);
}, []);
}, [props]);

return (
<div className="flex flex-col mx-auto p-16">
Expand Down
155 changes: 147 additions & 8 deletions webapp/src/database/DatabaseResult/DatabaseResult.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,169 @@
import SugarList from '../DatabaseComponents/SugarList.tsx';

export default function DatabaseResult(props: DatabaseResultProps) {
const [data, setData] = useState();
const [pdbShown, setPDBShown] = useState<boolean>(true);
const [selectedData, setSelectedData] = useState<any>();
const [isChecked, setIsChecked] = useState(false);

const handleCheckboxChange = () => {
setIsChecked(!isChecked);
toggleDataSource();
};
useEffect(() => {
if (props.results === null) return;
if (props.pdbResults === null) return;
if (props.pdbRedoResults === null) return;

setData(props.results as undefined);
console.log('running use effect');
setSelectedData(props.pdbResults);
}, []);

function toggleDataSource() {
if (pdbShown) {
setSelectedData(props.pdbRedoResults);
setPDBShown(false);
} else {
setSelectedData(props.pdbResults);
setPDBShown(true);
}
}

return (
<>
{data !== undefined ? (
{selectedData !== undefined ? (
<div className="flex flex-col space-y-6">
<h2 className="text-center">
Validation Report - {props.PDBCode}
{props.pdbRedoResults !== '' ? toggleSwitch() : <></>}
</h2>
<div className="flex flex-wrap text-center">
<CremerPopleGraph data={data} />
<BFactorVsRSCC data={data} />
<CremerPopleGraph data={selectedData} />
<BFactorVsRSCC data={selectedData} />
</div>
<SNFGList data={data} />
<SugarList data={data} />
<SNFGList data={selectedData} />
<SugarList data={selectedData} />
</div>
) : (
<></>
)}
</>
);

function pdbRedoSVG() {
return (
<div className="w-12">

Check warning on line 58 in webapp/src/database/DatabaseResult/DatabaseResult.tsx

View workflow job for this annotation

GitHub Actions / build 

'pdbRedoSVG' is defined but never used. Allowed unused vars must match /^_/u
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 160 120"
enableBackground="new 0 0 160 120"
xmlSpace="preserve"
>
<g>
<g>
<path
fill="#3366CC"
d="M47.144,92.745c0,0.372-0.335,0.559-1.005,0.559h-4.731c-0.5,0-1.049-0.119-1.646-0.357
c-0.599-0.238-1.055-0.526-1.37-0.864l-3.352-3.458c-1.38-1.421-3.049-2.132-5.007-2.132h-4.811v5.59
c0,0.338-0.181,0.626-0.542,0.864s-0.799,0.357-1.311,0.357h-3.707c-0.512,0-0.952-0.119-1.32-0.357s-0.552-0.526-0.552-0.864
V75.897c0-0.338,0.177-0.628,0.532-0.871c0.354-0.242,0.788-0.363,1.301-0.363h16.264c3.01,0,5.478,0.532,7.403,1.599
c1.925,1.065,2.888,2.505,2.888,4.315c0,2.522-2.478,4.104-7.433,4.745c0.789,0.19,1.519,0.518,2.188,0.981
c0.671,0.464,1.439,1.138,2.307,2.021l3.588,3.757C47.038,92.324,47.144,92.546,47.144,92.745z M25.222,82.813h8.398
c1.354,0,2.546-0.178,3.578-0.533c1.031-0.355,1.547-0.923,1.547-1.703c0-0.779-0.516-1.348-1.547-1.703
c-1.032-0.354-2.225-0.532-3.578-0.532h-8.398V82.813z"
/>
<path
fill="#3366CC"
d="M50.416,92.056V75.871c0-0.338,0.184-0.623,0.552-0.857s0.809-0.351,1.32-0.351h22.73
c0.513,0,0.949,0.121,1.311,0.363c0.361,0.243,0.543,0.533,0.543,0.871v1.222c0,0.338-0.182,0.627-0.543,0.865
s-0.798,0.357-1.311,0.357H57.848v3.782h14.785c0.513,0,0.95,0.119,1.312,0.357s0.542,0.526,0.542,0.865v1.222
c0,0.338-0.181,0.626-0.542,0.864s-0.799,0.357-1.312,0.357H57.848v3.835h17.132c0.499,0,0.926,0.117,1.281,0.351
c0.354,0.234,0.532,0.521,0.532,0.858v1.248c0,0.338-0.185,0.626-0.552,0.864c-0.368,0.238-0.809,0.357-1.321,0.357H52.288
c-0.512,0-0.952-0.119-1.32-0.357S50.416,92.411,50.416,92.056z"
/>
<path
fill="#3366CC"
d="M80.5,92.107V75.924c0-0.355,0.184-0.654,0.552-0.897c0.368-0.242,0.809-0.363,1.32-0.363h11.021
c5.704,0,9.854,0.752,12.449,2.255c2.596,1.504,3.894,3.861,3.894,7.071c0,3.211-1.298,5.566-3.894,7.065
c-2.596,1.5-6.745,2.249-12.449,2.249H82.372c-0.512,0-0.952-0.115-1.32-0.345S80.5,92.445,80.5,92.107z M87.932,89.625h5.244
c3.535,0,5.94-0.425,7.215-1.274c1.275-0.849,1.912-2.303,1.912-4.361c0-2.058-0.637-3.514-1.912-4.367
c-1.274-0.854-3.68-1.28-7.215-1.28h-5.244V89.625z"
/>
<path
fill="#3366CC"
d="M139.867,91.373c-2.688,1.556-6.631,2.334-11.828,2.334c-5.198,0-9.145-0.778-11.838-2.334
c-2.694-1.556-4.042-4.019-4.042-7.39s1.348-5.832,4.042-7.384c2.693-1.551,6.64-2.327,11.838-2.327
c5.197,0,9.141,0.776,11.828,2.327c2.688,1.552,4.031,4.013,4.031,7.384S142.555,89.817,139.867,91.373z M134.476,79.343
c-1.327-1.04-3.473-1.561-6.437-1.561s-5.112,0.521-6.446,1.561s-2.001,2.589-2.001,4.646c0,2.059,0.667,3.605,2.001,4.642
c1.334,1.035,3.482,1.553,6.446,1.553s5.109-0.518,6.437-1.553c1.327-1.036,1.991-2.583,1.991-4.642
C136.467,81.932,135.803,80.383,134.476,79.343z"
/>
</g>
</g>
<g>
<path
fill="#FF9933"
d="M23.095,52.253v19.542H18.2V24.766h20.604c6.278,0,11.138,1.254,14.578,3.764
c3.441,2.507,5.161,5.83,5.161,9.964c0,4.178-1.72,7.515-5.161,10.014c-3.44,2.499-8.3,3.746-14.578,3.746H23.095z M23.095,48.959
h15.709c4.936,0,8.643-0.985,11.124-2.956s3.723-4.452,3.723-7.445c0-3.015-1.235-5.519-3.702-7.51
c-2.468-1.993-6.184-2.988-11.145-2.988H23.095V48.959z"
/>
<path
fill="#FF9933"
d="M60.034,71.795V24.766h17.396c7.319,0,13.363,1.916,18.136,5.749c4.771,3.833,7.154,8.753,7.154,14.761
v6.041c0,6.029-2.384,10.95-7.154,14.762c-4.772,3.813-10.816,5.717-18.136,5.717H60.034z M64.928,28.06V68.5h12.503
c5.921,0,10.794-1.622,14.618-4.873c3.825-3.249,5.737-7.358,5.737-12.329v-6.132c0-4.906-1.919-8.983-5.757-12.232
c-3.839-3.249-8.706-4.874-14.599-4.874H64.928z"
/>
<path
fill="#FF9933"
d="M104.607,71.795V24.766h17.478c6.223,0,11.069,1.029,14.537,3.087c3.468,2.057,5.202,5.153,5.202,9.29
c0,2.414-0.87,4.514-2.61,6.304c-1.742,1.788-4.107,3.026-7.096,3.716c3.646,0.518,6.607,1.863,8.884,4.037
c2.274,2.172,3.413,4.681,3.413,7.521c0,4.198-1.733,7.426-5.201,9.687c-3.47,2.259-8.109,3.389-13.921,3.389H104.607z
M109.5,45.857h13.778c4.33,0,7.683-0.747,10.054-2.245c2.371-1.496,3.558-3.698,3.558-6.605c0-2.972-1.263-5.206-3.784-6.702
c-2.522-1.498-6.195-2.245-11.021-2.245H109.5V45.857z M109.5,49.151V68.5h15.793c4.414,0,7.882-0.852,10.403-2.56
c2.522-1.705,3.784-4.092,3.784-7.162c0-2.812-1.146-5.118-3.434-6.922c-2.29-1.803-5.614-2.705-9.973-2.705H109.5z"
/>
</g>
</svg>
</div>
);
}

function toggleSwitch(): React.ReactNode {
return (
<div className="mt-4">
<label className="themeSwitcherTwo shadow-card relative inline-flex cursor-pointer select-none items-center justify-center rounded-md bg-white p-1">
<input
type="checkbox"
className="sr-only"
checked={isChecked}
onChange={handleCheckboxChange}
/>
<span
className={`flex items-center space-x-[6px] rounded py-2 px-[18px] text-sm font-medium ${
!isChecked
? 'text-primary bg-[#f4f7ff]'
: 'text-body-color'
}`}
>
PDB
</span>
<span
className={`flex items-center space-x-[6px] rounded py-2 px-[18px] text-sm font-medium ${
isChecked
? 'text-primary bg-[#f4f7ff]'
: 'text-body-color'
}`}
>
{/* {pdbRedoSVG()} */}
PDB-REDO
</span>
</label>
</div>
);
}
}
6 changes: 4 additions & 2 deletions webapp/src/interfaces/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,13 @@ export interface DatabaseHeaderProps {
loadingText: string;
fallback: boolean;
failureText: string;
results: any;
pdbResults: any;
pdbRedoResults: any;
}

export interface DatabaseResultProps {
results: any;
pdbResults: any;
pdbRedoResults: any;
PDBCode: string;
}

Expand Down
5 changes: 3 additions & 2 deletions webapp/src/layouts/DatabaseHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,16 @@ export function DatabaseHeader(props: DatabaseHeaderProps): ReactElement {
<Loading loadingText={'Loading Content...'} />
}
>
{props.results === '' ? (
{props.pdbResults === '' ? (
<DatabaseFetch
PDBCode={props.PDBCode}
setPDBCode={props.setPDBCode}
submitPressed={props.setSubmit}
/>
) : (
<DatabaseResult
results={props.results}
pdbResults={props.pdbResults}
pdbRedoResults={props.pdbRedoResults}
PDBCode={props.PDBCode}
/>
)}
Expand Down
Loading
Loading