from-FoldSeek workflow. various UI/UX improvements

frontend/AllAtomPredictMixin.vue

@@ -0,0 +1,61 @@
+<script>
+import axios from 'axios'
+
+export default {
+    name : 'AllAtomPredictMixin',
+    data() {
+        return {
+            predictApi: axios.create({
+                baseURL: 'https://3di.foldseek.com/cg2all/predict',
+                responseType: 'text',
+                transformResponse: [(data) => data],
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                    'Accept': 'text/plain',
+                }
+            })
+        }
+    },
+    methods: {
+        async predictGivenPdb(pdbstr, signal=undefined) {
+            const formData = new FormData()
+            const blob = new Blob([pdbstr], {type: 'text/plain'})
+            formData.append('file', blob, 'tmp.pdb')
+
+            try {
+                const response = await this.predictApi.post('', formData, {
+                    signal: signal ? signal : undefined,
+                    responseType: 'text'
+                })
+                return this.prependRemark(response.data)
+            } catch (e) {
+                if (e.response) {
+                    console.error('Server error: ', e.response.status, e.response.data);
+                } else if (e.request) {
+                    console.error('No response: ', e.request);
+                } else if (axios.isCancel(e)) {
+                    console.error('Aborted');
+                } else {
+                    console.error('Config error: ', e.message);
+                }
+                throw e
+            }
+        },
+        prependRemark(pdbstr) {
+            let is_cif = false
+            if (pdbstr[0] == '#' || pdbstr.startsWith('data_')) {
+                is_cif = true
+            }
+
+            let prefix = is_cif ? '# ' : 'REMARK  90 '
+            let firstline = prefix + 'This model is rebuilt with cg2all(https://github.com/huhlim/cg2all)'
+            if (!is_cif && firstline.length > 79) {
+                firstline = firstline.slice(76) + '... '
+            }
+
+            firstline = firstline.padEnd(80, ' ') + '\n'
+            return firstline + pdbstr
+        },
+    }
+}
+</script>

frontend/FoldMasonSearch.vue

@@ -22,6 +22,17 @@
             </template>
             <template slot="content">
                 <div class="upload-outer-container w-44 gr-2 mb-2">
+                    <v-alert
+                        v-model="alert"
+                        border="left"
+                        close-text="Close Alert"
+                        color="primary"
+                        text
+                        type="info"
+                        dismissible
+                    >
+                    <strong>{{ skippedEntries }} duplicated entries</strong> have been skipped
+                    </v-alert>
                     <DragUploadBox
                             class="drag-upload-box"
                             @uploadedFiles="upload"
@@ -38,7 +49,7 @@
                             @click:close="removeQuery(index)"
                         >
                             {{ q.name }}
-                        </v-chip>                           
+                        </v-chip>
                     </div>
                 </div>
 
@@ -131,6 +142,9 @@ import { HistoryMixin } from './lib/HistoryMixin.js';
 import Databases from './Databases.vue';
 import QueryTextarea from "./QueryTextarea.vue";
 import DragUploadBox from "./DragUploadBox.vue";
+import { BlobDatabase } from "./lib/BlobDatabase.js";
+
+const db = BlobDatabase();
 
 export default {
     name: "FoldMasonSearch",
@@ -155,13 +169,16 @@ export default {
             queries: [],   // [ { name: "file", text: "ATOM..." }, { name: "file", text: "ATOM..." } ...]
             inFileDrag: false,
             accessionLoading: false,
+            alert: false,
+            skippedEntries: 0,
         };
     },
     async mounted() {
         if (this.preloadAccessions.length > 0) {
             this.queries = [];
-            return;
         }
+        this.retrieveAndClean()
+        return;
     },
     computed: {
         alignDisabled() {
@@ -253,7 +270,7 @@ export default {
         async removeQuery(index) {
             this.queries.splice(index, 1);
         },
-        async addFiles(newFiles) {
+        addFiles(newFiles) {
             for (const newFile of newFiles) {
                 if (!this.fileNameSet.has(newFile.name)) {
                     this.queries.push(newFile);
@@ -297,6 +314,89 @@ export default {
             );
             fr.readAsText(file)
         },
+        resetParams() {
+            this.params = structuredClone(defaultParams);
+        },
+        async retrieveAndClean() {
+            const clean = async (size) => {
+                // return
+                await db.removeItem('msa.query.size')
+                await db.removeItem('msa.query.names')
+                for (let i = 0; i < size; i++) {
+                    await db.removeItem(`msa.query.chunk:${i}`)
+                }
+            }
+
+            // await clean(2)
+            // return
+
+            const SEP = '\0'
+
+            let size = await db.getItem('msa.query.size')
+            if (!size || size.length == 0) { 
+                await clean()
+                return 
+            }
+
+            size = parseInt(size)
+
+            const texts = []
+            let names = await db.getItem('msa.query.names')
+            if (!names || names.length == 0) {
+                console.warn("MSA query name has not been passed")
+                await clean(size)
+                return
+            }
+            names = names.split(SEP)
+
+            for (let i = 0; i < size; i++) {
+                const entry = await db.getItem(`msa.query.chunk:${i}`)
+                if (!entry || entry.length == 0) {
+                    console.warn(`MSA query chunk ${i} is missing`)
+                    await clean(size)
+                    return
+                }
+
+                texts.push(...( ( await entry.text() ).split(SEP) ))
+            }
+
+            if (names.length != texts.length) {
+                console.warn("MSA query entries and names size differs")
+                console.log(`names length: ${names.length}`)
+                console.log(`texts length: ${texts.length}`)
+                console.log(texts)
+                await clean(size)
+                return
+            }
+
+            const files = []
+
+            for (let i = 0; i < texts.length; i++) {
+                files.push({text: texts[i], name: names[i]})
+            }
+
+            // Calculate overlapping entries
+            files.sort((a, b) => {return a.name.localeCompare(b.name)})
+            let dupCount = 0
+            let prev = ""
+
+            for (let f of files) {
+                if (f.name == prev) {
+                    dupCount++
+                } else {
+                    prev = f.name
+                }
+            }
+
+            if (dupCount > 0) {
+                this.alert = true
+                this.skippedEntries = dupCount
+            }
+
+            this.addFiles(files)
+
+            await clean(size)
+        }
     }
 };
 </script>

frontend/History.vue

@@ -5,9 +5,9 @@
                 <v-list-item-title>
                     History
                 </v-list-item-title>
-                <v-list-item-subtitle v-if="drawer" class="ml-n1" @click.prevent>
-                    <button :style="{'opacity' : page == 0 ? 0.6 : 1}" @click.prevent="previous();"><v-icon style="transform:inherit">{{ $MDI.ChevronLeft }}</v-icon></button>
-                    <button :style="{'opacity' : (page + 1) * limit >= items.length ? 0.6 : 1}"  @click.prevent="next();"><v-icon style="transform:inherit">{{ $MDI.ChevronRight }}</v-icon></button>
+                <v-list-item-subtitle v-if="drawer" class="ml-n1" @click.stop>
+                    <button :style="{'opacity' : page == 0 ? 0.6 : 1}" @click.stop="previous();"><v-icon style="transform:inherit">{{ $MDI.ChevronLeft }}</v-icon></button>
+                    <button :style="{'opacity' : (page + 1) * limit >= items.length ? 0.6 : 1}"  @click.stop="next();"><v-icon style="transform:inherit">{{ $MDI.ChevronRight }}</v-icon></button>
                 </v-list-item-subtitle>
             </v-list-item-content>
         </template>