From a23ffff03f7415b3171b1ec6b40f06e334ad19fb Mon Sep 17 00:00:00 2001
From: Ryan Greer <ryanrgreer@outlook.com>
Date: Mon, 30 Sep 2024 18:56:09 -0600
Subject: [PATCH 1/5] added functionality for sbh user library imports + fixed
 tooltip bug

---
 apps/server/app.py                          |  28 +++
 apps/web/src/components/CurationForm.jsx    |   7 +-
 apps/web/src/components/SequenceSection.jsx | 194 ++++++++++++++++++--
 apps/web/src/modules/api.js                 |  32 +++-
 apps/web/src/modules/store.js               |  19 +-
 5 files changed, 256 insertions(+), 24 deletions(-)

diff --git a/apps/server/app.py b/apps/server/app.py
index 0434d39..e2c1953 100644
--- a/apps/server/app.py
+++ b/apps/server/app.py
@@ -200,6 +200,7 @@ def run_synbict(sbol_content: str, part_library_file_names: list[str]) -> tuple[
                 target_library = FeatureLibrary([target_doc])
                 # feature_library = FEATURE_LIBRARIES[0]
                 feature_library = create_feature_library(part_lib_f_name)
+                print(f"feature library for {part_lib_f_name}: {feature_library}")
                 min_feature_length = 10
                 annotater = FeatureAnnotater(feature_library, min_feature_length)
                 min_target_length = 10                
@@ -423,6 +424,33 @@ def annotate_text():
     biobert_result = run_biobert(free_text)
     return {"text": free_text, "annotations": biobert_result}
 
+@app.post("/api/importUserLibrary")
+def import_library():
+    request_data = request.get_json()
+    SBHSessionToken = request_data['sessionToken']
+    collectionURL = request_data['url']
+    
+    headers = {
+        "Accept": "text/plain",
+        "X-authorization": SBHSessionToken
+    }
+
+    response = requests.get(collectionURL, headers=headers)
+
+    # Check if the request was successful
+    if response.status_code == 200:
+        print("Request successful")
+        feature_doc = sbol2.Document()
+        feature_doc.readString(response.text)
+        FEATURE_LIBRARIES[collectionURL] = FeatureLibrary([feature_doc])
+        print(f"Feature Doc Summary for{collectionURL}: \n{feature_doc}")
+        
+        return {"response": response.text}
+    else:
+        print(f"Request failed with status code: {response.status_code}")
+        return {"response": response.text}
+
+
 # if __name__ == '__main__':
 #     app.run(debug=True,host='0.0.0.0',port=5000)
 if __name__ == "__main__":    
diff --git a/apps/web/src/components/CurationForm.jsx b/apps/web/src/components/CurationForm.jsx
index 96f84ca..a158093 100644
--- a/apps/web/src/components/CurationForm.jsx
+++ b/apps/web/src/components/CurationForm.jsx
@@ -43,7 +43,7 @@ function SynBioHubClient({opened, onClose, setIsInteractingWithSynBioHub, synBio
     );
 }
 
-function SynBioHubClientLogin({ synBioHubs }) {       
+export function SynBioHubClientLogin({ synBioHubs }) {       
     const [email, setEmail] = useState('');    
     const [password, setPassword] = useState('');
     const [inputError, setInputError] = useState(false);
@@ -62,7 +62,8 @@ function SynBioHubClientLogin({ synBioHubs }) {
                     data={synBioHubs}                      
                     onChange={(v) => {                          
                         setWorkingSynBioHubUrlPrefix(v);
-                    }}                        
+                    }}
+                    searchable                        
                 />
                 <TextInput                   
                     label="Email"
@@ -87,7 +88,7 @@ function SynBioHubClientLogin({ synBioHubs }) {
                              const params = new URLSearchParams();
                              params.append('email', email);
                              params.append('password', password);
-                             const synbiohub_url_login = "https:/" + "/synbiohub.org/login";
+                             const synbiohub_url_login = workingSynBioHubUrlPrefix + "/login";
                              setIsLoading(true);
                              const response = await fetch(synbiohub_url_login, {
                                  method: "POST",
diff --git a/apps/web/src/components/SequenceSection.jsx b/apps/web/src/components/SequenceSection.jsx
index a37d096..bf32934 100644
--- a/apps/web/src/components/SequenceSection.jsx
+++ b/apps/web/src/components/SequenceSection.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, forwardRef, createElement } from "react"
 import { useForceUpdate } from "@mantine/hooks"
-import { Checkbox } from '@mantine/core';
-import { Button, Center, Group, Loader, NavLink, Space, CopyButton, ActionIcon, Tooltip, Textarea, MultiSelect, Text, Highlight} from "@mantine/core"
+import { Checkbox, SegmentedControl, Select, Title } from '@mantine/core';
+import { Button, Center, Group, Stack, Loader, Modal, NavLink, Space, CopyButton, ActionIcon, Tooltip, Textarea, MultiSelect, Text, Highlight} from "@mantine/core"
 import { FiDownloadCloud } from "react-icons/fi"
 import { FaCheck, FaPencilAlt, FaPlus, FaTimes, FaArrowRight } from "react-icons/fa"
 import { mutateDocument, mutateSequencePartLibrariesSelected, useAsyncLoader, useStore } from "../modules/store"
@@ -9,9 +9,12 @@ import AnnotationCheckbox from "./AnnotationCheckbox"
 import FormSection from "./FormSection"
 import SequenceHighlighter from "./SequenceHighlighter"
 import { Copy, Check } from "tabler-icons-react"
-import { showErrorNotification } from '../modules/util'
+import { showErrorNotification, showNotificationSuccess } from "../modules/util"
 import "../../src/sequence-edit.css"
 import { HighlightWithinTextarea } from 'react-highlight-within-textarea'
+import { openConfirmModal, openContextModal } from "@mantine/modals"
+import { SynBioHubClientLogin } from "./CurationForm";
+import { importLibrary } from "../modules/api";
 
 const WORDSIZE = 8;
 
@@ -143,21 +146,7 @@ function Sequence({ colors }) {
             }
             style={{ maxWidth: "800px" }}
         >
-            {workingSequence !== false ? //TextArea is the editor // TODO: add highlight in TextArea
-                // <Textarea
-                //     size="md"
-                //     minRows={20}
-                //     value={workingSequence}
-                //     onChange={event => {
-                //         const textArea = event.currentTarget;
-                //         const start = textArea.selectionStart;
-                //         const end = textArea.selectionEnd;
-                //         // isValid?nothing : update the state
-                //         console.log("isInValid: ", start);
-                //         setWorkingSequence(textArea.value);  //value is the value of ACTG, reformat is adding spaces, call validate function                      
-                //     }}
-                //     styles={{ input: { font: "14px monospace", lineHeight: "1.5em", error: true } }}
-                // /> 
+            {workingSequence !== false ? 
                 <HighlightWithinTextarea
                     value={workingSequence}
                     highlight={{
@@ -235,6 +224,19 @@ function Annotations({ colors }) {
 
     const { isActive, setActive } = useStore(s => s.sequenceAnnotationActions)
     const sequence = useStore(s => s.document?.root.sequence)?.toLowerCase()
+
+    const libraryImported = useStore(s => s.libraryImported)
+    const isLoggedInToSynBioHub = useStore(s => s.isLoggedInToSomeSynBioHub);
+    const [ isInteractingWithSynBioHub, setIsInteractingWithSynBioHub ] = useState(false);
+    const [ synBioHubs, setSynBioHubs ] = useState([]);    
+
+    useStore(s => s.libraryImported);
+
+    const loadSynBioHubs = async () => {
+        const response = await fetch("https://wor.synbiohub.org/instances");
+        const registries = await response.json();
+        setSynBioHubs(registries.map(r => r.uriPrefix));
+    };
     
     const sequencePartLibraries = [
         { value: 'local_libraries', label: 'SeqImprove Local Libraries'},
@@ -263,6 +265,8 @@ function Annotations({ colors }) {
     ];
 
     const [sequencePartLibrariesSelected, setSequencePartLibrariesSelected] = useState([]);
+    const importedLibraries = useStore(s => s.importedLibraries)
+    const toggleLibrary = useStore(s => s.toggleImportedLibraries)
 
 
     const AnnotationCheckboxContainer = forwardRef((props, ref) => (
@@ -272,7 +276,11 @@ function Annotations({ colors }) {
     ));
 
     const handleAnalyzeSequenceClick = () => {
-        if (sequencePartLibrariesSelected.length > 0) loadSequenceAnnotations()
+        if (sequencePartLibrariesSelected.length > 0) {
+            const libs = importedLibraries.filter((lib) =>
+                lib.enabled == true)
+            loadSequenceAnnotations(libs)
+        }
         else showErrorNotification('No libraries selected ', 'Select one or more libraries to continue')
     }
 
@@ -323,6 +331,40 @@ function Annotations({ colors }) {
                 })}               
             />
             
+
+            {libraryImported && <Stack mt="sm" gap="xs">
+                {importedLibraries.map((library, index) => (
+                    <Checkbox 
+                        label={library.label}
+                        checked={library.enabled}
+                        onChange={() => toggleLibrary(index)}
+                        key={index}
+                    />
+                ))}
+                </Stack>
+            }
+
+            <NavLink
+                label="Import Library"
+                icon={<FaPlus />}
+                variant="subtle"
+                active={true}
+                color="blue"
+                onClick={() => {
+                    loadSynBioHubs();
+                    setIsInteractingWithSynBioHub(true);
+                }}
+                sx={{ borderRadius: 6 }}
+            />
+
+            <SynBioHubClient
+                opened={isInteractingWithSynBioHub}
+                setIsInteractingWithSynBioHub={setIsInteractingWithSynBioHub}
+                onClose={() => setIsInteractingWithSynBioHub(false)}
+                setOpened={setIsInteractingWithSynBioHub}                            
+                synBioHubs={synBioHubs}
+            />
+            
             {loading ?
                 <Center>
                     <Loader my={30} size="sm" variant="dots" /> :
@@ -341,6 +383,120 @@ function Annotations({ colors }) {
     )
 }
 
+function SynBioHubClient({opened, onClose, setIsInteractingWithSynBioHub, synBioHubs}) {     
+    const isLoggedInToSynBioHub = useStore(s => s.isLoggedInToSomeSynBioHub);
+
+    return (
+        <Modal
+            title="SynBioHub"
+            opened={opened}
+            onClose={onClose}
+            size={"auto"}
+        >
+            {isLoggedInToSynBioHub ?
+             <SynBioHubClientSelect setIsInteractingWithSynBioHub={setIsInteractingWithSynBioHub} /> :
+             <SynBioHubClientLogin synBioHubs={synBioHubs} />
+            }            
+        </Modal>
+    );
+}
+
+function SynBioHubClientSelect({ setIsInteractingWithSynBioHub }) {        
+    const synBioHubUrlPrefix = useStore(s => s.synBioHubUrlPrefix);
+    const [ synBioHubSessionToken, _ ] = useState(sessionStorage.getItem('SynBioHubSessionToken'));   
+    const [inputError, setInputError] = useState(false);
+    const [ isLoading, setIsLoading ] = useState(false);
+    const libraryImported = useStore(s => s.libraryImported);
+    const [ id, setID ] = useState("collection_id");
+    const [ rootCollectionsLoaded, setRootCollectionsLoaded ] = useState(false);
+    const [ rootCollectionsIDs, setRootCollectionsIDs ] = useState([]);
+    const [ rootCollections, setRootCollections ] = useState([]);
+    const [ rootCollectionURI, setRootCollectionURI ] = useState('');
+    const [ selectedCollectionID, selectCollectionID ] = useState('');
+
+    const xml = useStore(s => s.serializeXML());        
+
+    (async () => {        
+        if (!rootCollectionsLoaded) { // curl -X GET -H "Accept: text/plain" -H "X-authorization: 5ab3af6e-2ddd-4ac2-af76-d4285d2ffe03" https://synbiohub.org/rootCollections
+            console.log(synBioHubSessionToken);
+            const response2 = await fetch(synBioHubUrlPrefix + "/rootCollections", {                
+                method: "GET",
+                headers: {
+                    "Accept": "text/plain",
+                    "X-authorization": synBioHubSessionToken,
+                },
+            });            
+
+            const _rootCollections = await response2.json();
+            
+            let regex = RegExp(synBioHubUrlPrefix + "/user/*");
+            const userRootCollections = _rootCollections.filter(collection => collection.uri.match(regex));
+            setRootCollections(userRootCollections);
+            setRootCollectionsIDs(userRootCollections.map(collection => collection.displayId));
+            setRootCollectionsLoaded(true);
+        }           
+    })();
+
+    const [ inputErrorID, setInputErrorID ] = useState(false);
+    const importedLibraries = useStore(s => s.importedLibraries)
+    const addLibrary = useStore(s => s.addImportedLibrary)
+
+    return (                        
+        <Group>
+            <Title order={3}>Download from SynBioHub</Title>
+            <Group>
+                 <Group>
+                     {!rootCollectionsLoaded ?
+                      <Center>
+                          <Loader my={30} size="sm" variant="dots" />
+                      </Center> :
+                      <Select
+                          label="Root Collection"
+                          placeholder="Pick one"
+                          data={rootCollectionsIDs}                      
+                          onChange={(v) => {                          
+                                setRootCollectionURI(rootCollections.find(collection => collection.displayId == v).uri)
+                                selectCollectionID(v)
+                          }}
+                          searchable
+                      />
+                     }
+
+                     {isLoading ? 
+                      <Center>
+                          <Loader my={30} size="sm" variant="dots" />
+                      </Center> :
+                      <Button onClick={async () => {                                                                  
+                                const params = new FormData();       
+                                //send to backend                                                                                                                                                                                                                                                                                
+                                params.append('rootCollections', rootCollectionURI);
+                                // Create a Blob from the text
+
+                                setIsLoading(true);
+                                const response = importLibrary(synBioHubSessionToken, rootCollectionURI)
+                                setIsLoading(false);                             
+
+                                if (response) {
+                                    setInputError(false);
+                                    setIsInteractingWithSynBioHub(false);
+                                    showNotificationSuccess("Success!", "Imported Library: " + selectedCollectionID + ".");
+                                    mutateDocument(useStore.setState, state => {state.libraryImported = true});
+                                    // importedLibraries.push({ value: rootCollectionURI, label: selectedCollectionID, enabled: false})
+                                    addLibrary({ value: rootCollectionURI, label: selectedCollectionID, enabled: false})
+                                } else if (response.status == 401) {                                                                                                                            
+                                    showErrorNotification("Failure.", "SynBioHub did not accept the request");
+                                } else {                                          
+                                    showErrorNotification("Failure.", "SynBioHub did not accept the request");
+                                }
+                              }}>
+                          Submit
+                      </Button>
+                     }
+                 </Group>          
+            </Group>
+        </Group> 
+    )
+}
 
 export default {
     Sequence, Annotations
diff --git a/apps/web/src/modules/api.js b/apps/web/src/modules/api.js
index bdfee9a..cbcaf7d 100644
--- a/apps/web/src/modules/api.js
+++ b/apps/web/src/modules/api.js
@@ -71,6 +71,36 @@ export async function fetchSBOL(url) {
     }
 }
 
+export async function importLibrary(synBioHubSessionToken, requestURL) {
+    try {
+        var response = await fetchWithTimeout(`${import.meta.env.VITE_API_LOCATION}/api/importUserLibrary`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                sessionToken: synBioHubSessionToken,
+                url: requestURL
+            }),
+            timeout: 120000,
+        });
+    }
+    catch (err) {
+        console.error("Failed to fetch.");
+        showServerErrorNotification();
+        return;
+    }
+
+    try {
+        var result = await response.json();
+    }
+    catch (err) {
+        console.error("Couldn't parse JSON.");
+        showServerErrorNotification();
+        return;
+    }
+}
+
 export async function cleanSBOL(sbolContent) {
     try {
         var response = await fetchWithTimeout(`${import.meta.env.VITE_API_LOCATION}/api/cleanSBOL`, {
@@ -173,7 +203,7 @@ export async function fetchAnnotateSequence({ sbolContent, selectedLibraryFileNa
                                                  id: sa.persistentIdentity,
                                                  location: [sa.rangeMin, sa.rangeMax],
                                                  componentInstance: sa.component,
-                                                 featureLibrary: partLibrary,
+                                                 featureLibrary: sa.component.definition.persistentIdentity,
                                                  enabled: true,
                                              })));
         })();
diff --git a/apps/web/src/modules/store.js b/apps/web/src/modules/store.js
index 53e8e83..66663f8 100644
--- a/apps/web/src/modules/store.js
+++ b/apps/web/src/modules/store.js
@@ -33,6 +33,7 @@ export const useStore = create((set, get) => ({
      * @type {SBOL2GraphView} */
     document: null,
     loadingSBOL: false,
+    libraryImported: false,
     loadSBOL: async(sbol) => {
         set({ loadingSBOL: true });
 
@@ -160,16 +161,19 @@ export const useStore = create((set, get) => ({
 
     // Sequence Annotations
     sequenceAnnotations: [],
+    importedLibraries: [],
 
     loadingSequenceAnnotations: false,
        
     loadSequenceAnnotations: async (...args) => {
         set({ loadingSequenceAnnotations: true });
+        const allLibraries = get().sequencePartLibrariesSelected.concat(args[0])
+        // console.log("allLibraries: " + allLibraries)
 
         try {
             const result = await fetchAnnotateSequence({
                 sbolContent: get().document.serializeXML(),
-                selectedLibraryFileNames: get().sequencePartLibrariesSelected.map(lib => lib.value),
+                selectedLibraryFileNames: allLibraries.map(lib => lib.value),
                 isUriCleaned: get().isUriCleaned,
             }) ?? [];
 
@@ -295,6 +299,19 @@ export const useStore = create((set, get) => ({
         remove: removeTextAnnotation,
     }),
 
+    toggleImportedLibraries: index => {
+        // set(state.importedLibraries[index].enabled = !state.importedLibraries[index].enabled);  
+        set(produce(state => {
+            state.importedLibraries[index].enabled = !state.importedLibraries[index].enabled;
+        }));
+    },
+
+    addImportedLibrary: library => {
+        set(produce(state => {
+            state.importedLibraries.push(library)
+        }));
+    },
+
     // Target Organisms
     addTargetOrganism: uri => {
         mutateDocument(set, state => {

From d7e459e32481a0b0f7c615a87c19235b8aa69c89 Mon Sep 17 00:00:00 2001
From: Ryan Greer <ryanrgreer@outlook.com>
Date: Wed, 9 Oct 2024 14:34:09 -0600
Subject: [PATCH 2/5] added localStorage + login supoort for alternative sbh
 urls

---
 apps/web/src/components/CurationForm.jsx    | 12 ++++++++++--
 apps/web/src/components/SequenceSection.jsx |  3 ++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/CurationForm.jsx b/apps/web/src/components/CurationForm.jsx
index a158093..06071cd 100644
--- a/apps/web/src/components/CurationForm.jsx
+++ b/apps/web/src/components/CurationForm.jsx
@@ -64,6 +64,13 @@ export function SynBioHubClientLogin({ synBioHubs }) {
                         setWorkingSynBioHubUrlPrefix(v);
                     }}
                     searchable                        
+                    creatable
+                    getCreateLabel={(query) => `Custom SBH: ${query}`}
+                    onCreate={(query) => {
+                    const item = { value: query, label: query };
+                        synBioHubs.push(query)
+                        return item;
+                    }}
                 />
                 <TextInput                   
                     label="Email"
@@ -100,7 +107,7 @@ export function SynBioHubClientLogin({ synBioHubs }) {
                              if (response.ok) {
                                  setInputError(false);
                                  const session_token = await response.text();
-                                 // setSynBioHubSessionToken(session_token);                                 
+                                localStorage.setItem("synBioHubs", JSON.stringify(synBioHubs))
                                  loginToSynBioHubFn(session_token, workingSynBioHubUrlPrefix);
                                  
                              } else if (response.status == 401) {
@@ -441,7 +448,8 @@ export default function CurationForm({ }) {
     const loadSynBioHubs = async () => {
         const response = await fetch("https://wor.synbiohub.org/instances");
         const registries = await response.json();
-        setSynBioHubs(registries.map(r => r.uriPrefix));
+        if (localStorage.getItem("synBioHubs")) setSynBioHubs(JSON.parse(localStorage.getItem("synBioHubs")))
+        else setSynBioHubs(registries.map(r => r.uriPrefix));
     };
 
     function isValid(sequence) {
diff --git a/apps/web/src/components/SequenceSection.jsx b/apps/web/src/components/SequenceSection.jsx
index bf32934..cb0221a 100644
--- a/apps/web/src/components/SequenceSection.jsx
+++ b/apps/web/src/components/SequenceSection.jsx
@@ -235,7 +235,8 @@ function Annotations({ colors }) {
     const loadSynBioHubs = async () => {
         const response = await fetch("https://wor.synbiohub.org/instances");
         const registries = await response.json();
-        setSynBioHubs(registries.map(r => r.uriPrefix));
+        if (localStorage.getItem("synBioHubs")) setSynBioHubs(JSON.parse(localStorage.getItem("synBioHubs")))
+        else setSynBioHubs(registries.map(r => r.uriPrefix));
     };
     
     const sequencePartLibraries = [

From 003ba483b1374100470a3648a0e56678c8758da7 Mon Sep 17 00:00:00 2001
From: Ryan Greer <ryanrgreer@outlook.com>
Date: Sun, 13 Oct 2024 16:50:34 -0600
Subject: [PATCH 3/5] fixed userrootcollections selection regex filter error

---
 apps/web/src/components/SequenceSection.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/SequenceSection.jsx b/apps/web/src/components/SequenceSection.jsx
index cb0221a..e2534c6 100644
--- a/apps/web/src/components/SequenceSection.jsx
+++ b/apps/web/src/components/SequenceSection.jsx
@@ -430,7 +430,7 @@ function SynBioHubClientSelect({ setIsInteractingWithSynBioHub }) {
 
             const _rootCollections = await response2.json();
             
-            let regex = RegExp(synBioHubUrlPrefix + "/user/*");
+            let regex = RegExp(synBioHubUrlPrefix.replace(/^https?/, 'https?') + "/user/.*");
             const userRootCollections = _rootCollections.filter(collection => collection.uri.match(regex));
             setRootCollections(userRootCollections);
             setRootCollectionsIDs(userRootCollections.map(collection => collection.displayId));

From e8cbc1c3fe10c1473acf68abb70e82c5ca40bbd1 Mon Sep 17 00:00:00 2001
From: Ryan Greer <ryanrgreer@outlook.com>
Date: Tue, 15 Oct 2024 10:35:13 -0600
Subject: [PATCH 4/5] added functionality for managing imported libraries in
 server memory

---
 apps/server/app.py                          | 14 +++++++--
 apps/web/src/components/SequenceSection.jsx | 32 +++++++++++++------
 apps/web/src/modules/api.js                 | 35 +++++++++++++++++++--
 apps/web/src/modules/store.js               | 14 +++++++--
 4 files changed, 79 insertions(+), 16 deletions(-)

diff --git a/apps/server/app.py b/apps/server/app.py
index e2c1953..8ee3289 100644
--- a/apps/server/app.py
+++ b/apps/server/app.py
@@ -439,17 +439,27 @@ def import_library():
 
     # Check if the request was successful
     if response.status_code == 200:
-        print("Request successful")
         feature_doc = sbol2.Document()
         feature_doc.readString(response.text)
         FEATURE_LIBRARIES[collectionURL] = FeatureLibrary([feature_doc])
-        print(f"Feature Doc Summary for{collectionURL}: \n{feature_doc}")
+        print(f"all libraries: {FEATURE_LIBRARIES.keys()}")
         
         return {"response": response.text}
     else:
         print(f"Request failed with status code: {response.status_code}")
         return {"response": response.text}
 
+@app.post("/api/deleteUserLibrary")
+def remove_library():
+    request_data = request.get_json()
+    collectionURL = request_data['url']
+
+    if FEATURE_LIBRARIES[collectionURL]: del FEATURE_LIBRARIES[collectionURL]
+    else: return {"response": "Library does not exist"}
+
+    print(f"\nupdated libraries: {FEATURE_LIBRARIES.keys()}")
+
+    return {"response": "Library successfully deleted"}
 
 # if __name__ == '__main__':
 #     app.run(debug=True,host='0.0.0.0',port=5000)
diff --git a/apps/web/src/components/SequenceSection.jsx b/apps/web/src/components/SequenceSection.jsx
index e2534c6..f3cd157 100644
--- a/apps/web/src/components/SequenceSection.jsx
+++ b/apps/web/src/components/SequenceSection.jsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, forwardRef, createElement } from "react"
 import { useForceUpdate } from "@mantine/hooks"
-import { Checkbox, SegmentedControl, Select, Title } from '@mantine/core';
+import { Checkbox, CloseButton, Flex, Grid, SegmentedControl, Select, Title } from '@mantine/core';
 import { Button, Center, Group, Stack, Loader, Modal, NavLink, Space, CopyButton, ActionIcon, Tooltip, Textarea, MultiSelect, Text, Highlight} from "@mantine/core"
 import { FiDownloadCloud } from "react-icons/fi"
 import { FaCheck, FaPencilAlt, FaPlus, FaTimes, FaArrowRight } from "react-icons/fa"
@@ -268,6 +268,7 @@ function Annotations({ colors }) {
     const [sequencePartLibrariesSelected, setSequencePartLibrariesSelected] = useState([]);
     const importedLibraries = useStore(s => s.importedLibraries)
     const toggleLibrary = useStore(s => s.toggleImportedLibraries)
+    const removeLibrary = useStore(s => s.removeImportedLibrary)
 
 
     const AnnotationCheckboxContainer = forwardRef((props, ref) => (
@@ -277,14 +278,16 @@ function Annotations({ colors }) {
     ));
 
     const handleAnalyzeSequenceClick = () => {
-        if (sequencePartLibrariesSelected.length > 0) {
-            const libs = importedLibraries.filter((lib) =>
+        const libs = importedLibraries.filter((lib) =>
                 lib.enabled == true)
+        if (sequencePartLibrariesSelected.length > 0 || libs.length > 0) {
             loadSequenceAnnotations(libs)
         }
         else showErrorNotification('No libraries selected ', 'Select one or more libraries to continue')
     }
 
+    const handleClose = (library) => {removeLibrary(library)};
+
     return (
         <FormSection title="Sequence Annotations" key="Sequence Annotations">
             {annotations.map((anno, i) =>
@@ -335,12 +338,23 @@ function Annotations({ colors }) {
 
             {libraryImported && <Stack mt="sm" gap="xs">
                 {importedLibraries.map((library, index) => (
-                    <Checkbox 
-                        label={library.label}
-                        checked={library.enabled}
-                        onChange={() => toggleLibrary(index)}
-                        key={index}
-                    />
+                    <Grid key={index}>
+                        <Grid.Col span={10}>
+                            <Checkbox
+                                label={library.label}
+                                checked={library.enabled}
+                                onChange={() => toggleLibrary(index)}
+                                key={index} 
+                            />
+                        </Grid.Col>
+                        <Grid.Col span={2}>
+                            <Tooltip label="Delete from server memory">
+                                <CloseButton 
+                                    onClick={() => handleClose(library)}
+                                />
+                            </Tooltip>
+                        </Grid.Col>
+                    </Grid>
                 ))}
                 </Stack>
             }
diff --git a/apps/web/src/modules/api.js b/apps/web/src/modules/api.js
index cbcaf7d..e9211b7 100644
--- a/apps/web/src/modules/api.js
+++ b/apps/web/src/modules/api.js
@@ -1,4 +1,4 @@
-import { showServerErrorNotification } from "./util"
+import { showNotificationSuccess, showServerErrorNotification } from "./util"
 import { Graph, SBOL2GraphView } from "sbolgraph"
 
 export async function bootAPIserver() {
@@ -101,6 +101,37 @@ export async function importLibrary(synBioHubSessionToken, requestURL) {
     }
 }
 
+export async function deleteLibrary(libraryURL) {
+    try {
+        var response = await fetchWithTimeout(`${import.meta.env.VITE_API_LOCATION}/api/deleteUserLibrary`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                url: libraryURL
+            }),
+            timeout: 120000,
+        });
+    }
+    catch (err) {
+        console.error("Failed to fetch.");
+        showServerErrorNotification();
+        return;
+    }
+
+    try {
+        var result = await response.json();
+        showNotificationSuccess("Success!", result.response);
+        console.log(result)
+    }
+    catch (err) {
+        console.error("Error deleting library from memory: " + err);
+        showServerErrorNotification();
+        return;
+    }
+}
+
 export async function cleanSBOL(sbolContent) {
     try {
         var response = await fetchWithTimeout(`${import.meta.env.VITE_API_LOCATION}/api/cleanSBOL`, {
@@ -281,7 +312,7 @@ export async function fetchSimilarParts(topLevelUri) {
         return
     }
     
-    console.log("Successfully annotated.")
+    console.log("Successfully fetched similar parts.")
     return result.similarParts
 }
 
diff --git a/apps/web/src/modules/store.js b/apps/web/src/modules/store.js
index 66663f8..d56f04e 100644
--- a/apps/web/src/modules/store.js
+++ b/apps/web/src/modules/store.js
@@ -3,7 +3,7 @@ import create from "zustand"
 import produce from "immer"
 import { getSearchParams, showErrorNotification } from "./util"
 import { addSequenceAnnotation, addTextAnnotation, createSBOLDocument, getExistingSequenceAnnotations, hasSequenceAnnotation, hasTextAnnotation, parseTextAnnotations, removeAnnotationWithDefinition, removeDuplicateComponentAnnotation, removeSequenceAnnotation, removeTextAnnotation, isfromSynBioHub } from "./sbol"
-import { fetchAnnotateSequence, fetchAnnotateText, fetchSBOL, cleanSBOL } from "./api"
+import { fetchAnnotateSequence, fetchAnnotateText, fetchSBOL, cleanSBOL, deleteLibrary } from "./api"
 import { Graph, SBOL2GraphView } from "sbolgraph"
 import fileDownload from "js-file-download"
 
@@ -167,8 +167,9 @@ export const useStore = create((set, get) => ({
        
     loadSequenceAnnotations: async (...args) => {
         set({ loadingSequenceAnnotations: true });
-        const allLibraries = get().sequencePartLibrariesSelected.concat(args[0])
-        // console.log("allLibraries: " + allLibraries)
+        let allLibraries = []
+        if (get().sequencePartLibrariesSelected) allLibraries = get().sequencePartLibrariesSelected.concat(args[0])
+            else allLibraries = allLibraries.concat(args[0])
 
         try {
             const result = await fetchAnnotateSequence({
@@ -312,6 +313,13 @@ export const useStore = create((set, get) => ({
         }));
     },
 
+    removeImportedLibrary: library => {
+        set(produce(state => {
+            state.importedLibraries = state.importedLibraries.filter(lib => lib.value !== library.value);
+        }));
+        deleteLibrary(library.value)
+    },
+
     // Target Organisms
     addTargetOrganism: uri => {
         mutateDocument(set, state => {

From 99015de3a4f4e3c12b8165a7eb12cf240141fe13 Mon Sep 17 00:00:00 2001
From: Ryan Greer <ryanrgreer@outlook.com>
Date: Wed, 23 Oct 2024 11:01:25 -0600
Subject: [PATCH 5/5] fixed bug where analyze sequence request w/ imported
 library can happen before library is added to backend dict

---
 apps/server/app.py                          |  2 +-
 apps/web/src/components/SequenceSection.jsx | 48 ++++++++++-----------
 apps/web/src/modules/api.js                 |  6 ++-
 3 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/apps/server/app.py b/apps/server/app.py
index 8ee3289..d9eb2b2 100644
--- a/apps/server/app.py
+++ b/apps/server/app.py
@@ -116,7 +116,7 @@ def create_app():
 # only retrieves feature library that already exists after setup
 # might create a libarary in the future
 def create_feature_library(part_library_file_name):
-    if part_library_file_name.startswith('https://synbiohub.org'): #if url, return the obj if indexed with url(sbh downloads only)
+    if ('synbiohub.org' in part_library_file_name): #if url, return the obj if indexed with url(sbh downloads only)
         if part_library_file_name in FEATURE_LIBRARIES:
             return FEATURE_LIBRARIES[part_library_file_name]
         else: #for locally stored sbh collections(indexed with file name for annotation)
diff --git a/apps/web/src/components/SequenceSection.jsx b/apps/web/src/components/SequenceSection.jsx
index f3cd157..4bab119 100644
--- a/apps/web/src/components/SequenceSection.jsx
+++ b/apps/web/src/components/SequenceSection.jsx
@@ -228,6 +228,7 @@ function Annotations({ colors }) {
     const libraryImported = useStore(s => s.libraryImported)
     const isLoggedInToSynBioHub = useStore(s => s.isLoggedInToSomeSynBioHub);
     const [ isInteractingWithSynBioHub, setIsInteractingWithSynBioHub ] = useState(false);
+    const [ isImportingLibrary, setIsImportingLibrary ] = useState(false);
     const [ synBioHubs, setSynBioHubs ] = useState([]);    
 
     useStore(s => s.libraryImported);
@@ -378,6 +379,7 @@ function Annotations({ colors }) {
                 onClose={() => setIsInteractingWithSynBioHub(false)}
                 setOpened={setIsInteractingWithSynBioHub}                            
                 synBioHubs={synBioHubs}
+                setIsImportingLibrary={setIsImportingLibrary}
             />
             
             {loading ?
@@ -390,6 +392,7 @@ function Annotations({ colors }) {
                     variant="subtle"
                     active={true}
                     color="blue"
+                    disabled={isImportingLibrary}
                     onClick={handleAnalyzeSequenceClick}
                     sx={{ borderRadius: 6 }}
                />
@@ -398,7 +401,7 @@ function Annotations({ colors }) {
     )
 }
 
-function SynBioHubClient({opened, onClose, setIsInteractingWithSynBioHub, synBioHubs}) {     
+function SynBioHubClient({opened, onClose, setIsInteractingWithSynBioHub, synBioHubs, setIsImportingLibrary}) {     
     const isLoggedInToSynBioHub = useStore(s => s.isLoggedInToSomeSynBioHub);
 
     return (
@@ -409,14 +412,14 @@ function SynBioHubClient({opened, onClose, setIsInteractingWithSynBioHub, synBio
             size={"auto"}
         >
             {isLoggedInToSynBioHub ?
-             <SynBioHubClientSelect setIsInteractingWithSynBioHub={setIsInteractingWithSynBioHub} /> :
+             <SynBioHubClientSelect setIsInteractingWithSynBioHub={setIsInteractingWithSynBioHub} setIsImportingLibrary={setIsImportingLibrary}/> :
              <SynBioHubClientLogin synBioHubs={synBioHubs} />
             }            
         </Modal>
     );
 }
 
-function SynBioHubClientSelect({ setIsInteractingWithSynBioHub }) {        
+function SynBioHubClientSelect({ setIsInteractingWithSynBioHub, setIsImportingLibrary }) {        
     const synBioHubUrlPrefix = useStore(s => s.synBioHubUrlPrefix);
     const [ synBioHubSessionToken, _ ] = useState(sessionStorage.getItem('SynBioHubSessionToken'));   
     const [inputError, setInputError] = useState(false);
@@ -482,28 +485,23 @@ function SynBioHubClientSelect({ setIsInteractingWithSynBioHub }) {
                           <Loader my={30} size="sm" variant="dots" />
                       </Center> :
                       <Button onClick={async () => {                                                                  
-                                const params = new FormData();       
-                                //send to backend                                                                                                                                                                                                                                                                                
-                                params.append('rootCollections', rootCollectionURI);
-                                // Create a Blob from the text
-
-                                setIsLoading(true);
-                                const response = importLibrary(synBioHubSessionToken, rootCollectionURI)
-                                setIsLoading(false);                             
-
-                                if (response) {
-                                    setInputError(false);
-                                    setIsInteractingWithSynBioHub(false);
-                                    showNotificationSuccess("Success!", "Imported Library: " + selectedCollectionID + ".");
-                                    mutateDocument(useStore.setState, state => {state.libraryImported = true});
-                                    // importedLibraries.push({ value: rootCollectionURI, label: selectedCollectionID, enabled: false})
-                                    addLibrary({ value: rootCollectionURI, label: selectedCollectionID, enabled: false})
-                                } else if (response.status == 401) {                                                                                                                            
-                                    showErrorNotification("Failure.", "SynBioHub did not accept the request");
-                                } else {                                          
-                                    showErrorNotification("Failure.", "SynBioHub did not accept the request");
-                                }
-                              }}>
+                            const params = new FormData();       
+                            //send to backend                                                                                                                                                                                                                                                                                
+                            params.append('rootCollections', rootCollectionURI);
+                            // Create a Blob from the text
+                            setIsLoading(true);
+                            const response = importLibrary(synBioHubSessionToken, rootCollectionURI, setIsImportingLibrary)                         
+
+                            if (response) {
+                                setInputError(false);
+                                setIsInteractingWithSynBioHub(false);
+                                showNotificationSuccess("Success!", "Imported Library: " + selectedCollectionID + ".");
+                                mutateDocument(useStore.setState, state => {state.libraryImported = true});
+                                addLibrary({ value: rootCollectionURI, label: selectedCollectionID, enabled: false})                                                                                                           
+                            } else {                                          
+                                showErrorNotification("Failure.", "SynBioHub did not accept the request");
+                            }
+                        }}>
                           Submit
                       </Button>
                      }
diff --git a/apps/web/src/modules/api.js b/apps/web/src/modules/api.js
index e9211b7..45d72cd 100644
--- a/apps/web/src/modules/api.js
+++ b/apps/web/src/modules/api.js
@@ -71,8 +71,10 @@ export async function fetchSBOL(url) {
     }
 }
 
-export async function importLibrary(synBioHubSessionToken, requestURL) {
+export async function importLibrary(synBioHubSessionToken, requestURL, setIsImportingLibrary) {
     try {
+        setIsImportingLibrary(true);
+        
         var response = await fetchWithTimeout(`${import.meta.env.VITE_API_LOCATION}/api/importUserLibrary`, {
             method: "POST",
             headers: {
@@ -98,6 +100,8 @@ export async function importLibrary(synBioHubSessionToken, requestURL) {
         console.error("Couldn't parse JSON.");
         showServerErrorNotification();
         return;
+    } finally {
+        setIsImportingLibrary(false);
     }
 }