diff --git a/viz/src/SAEConfigs.ts b/viz/src/SAEConfigs.ts index 613351d..22844a3 100644 --- a/viz/src/SAEConfigs.ts +++ b/viz/src/SAEConfigs.ts @@ -277,7 +277,7 @@ export const SAE_CONFIGS: Record = { group: "structural", }, ], - defaultDim: 2293, + defaultDim: 4000, supportsCustomSequence: true, }, "SAE16384-L5": { diff --git a/viz/src/components/SeqInput.tsx b/viz/src/components/SeqInput.tsx index 9c35544..a48610a 100644 --- a/viz/src/components/SeqInput.tsx +++ b/viz/src/components/SeqInput.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import { Textarea } from "@/components/ui/textarea"; import { Button } from "@/components/ui/button"; import { isProteinSequence, isPDBID, getPDBSequence } from "@/utils"; @@ -24,26 +24,38 @@ export default function SeqInput({ exampleSeqs?: { [key: string]: string }; }) { const [error, setError] = useState(null); - const isValidInput = (input: string): boolean => { - return isProteinSequence(input) || isPDBID(input); - }; - const handleSubmit = async () => { - // If PBD ID, validate by fetching sequence - if (isPDBID(sequence)) { + const validateInput = async (input: string): Promise => { + if (isProteinSequence(input)) { + return true; + } + if (isPDBID(input)) { try { - await getPDBSequence(sequence); + await getPDBSequence(input); + return true; } catch (e) { - console.error(e); + console.log("here", e); if (e instanceof Error) { setError(e.message); } else { setError("An unknown error occurred"); } - return; + return false; } } - onSubmit(sequence); + setError("Please enter either a valid protein sequence or a PDB ID"); + return false; + }; + + useEffect(() => { + setError(null); + }, [sequence]); + + const handleSubmit = async () => { + // If PBD ID, validate by fetching sequence + if (await validateInput(sequence)) { + onSubmit(sequence); + } }; return ( @@ -53,22 +65,16 @@ export default function SeqInput({ value={sequence} onChange={(e) => setSequence(e.target.value.toUpperCase())} className={`w-full font-mono min-h-[100px] text-sm sm:text-sm md:text-sm lg:text-sm text-base ${ - sequence && !isValidInput(sequence) ? "border-red-500" : "" + error ? "border-red-500" : "" }`} onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey && !loading) { e.preventDefault(); - if (isValidInput(sequence)) { - onSubmit(sequence); - } + handleSubmit(); } }} /> - {sequence && !isValidInput(sequence) && ( -

- Please enter either a valid protein sequence or a PDB ID -

- )} + {error &&

{error}

} {exampleSeqs && (
{Object.entries(exampleSeqs).map(([name, seq]) => ( @@ -81,11 +87,10 @@ export default function SeqInput({ - {error &&

{error}

}
); } diff --git a/viz/src/utils.ts b/viz/src/utils.ts index 2715f3e..76ab418 100644 --- a/viz/src/utils.ts +++ b/viz/src/utils.ts @@ -83,6 +83,11 @@ export const isPDBID = (input: string): boolean => { export const getPDBSequence = async (pdbId: string): Promise => { const pdbResponse = await fetch(`https://www.rcsb.org/fasta/entry/${pdbId}/display`); + + if (!pdbResponse.ok) { + throw new Error(`Failed to fetch PDB sequence: ${pdbResponse.statusText}`); + } + const fastaText = await pdbResponse.text(); if (fastaText.includes("No valid PDB IDs were submitted.")) { throw new Error("Invalid PDB ID");