From 0e64e0f1eec99da4a149053acd618083badfe5bc Mon Sep 17 00:00:00 2001
From: Martin Steinegger <themartinsteinegger@gmail.com>
Date: Wed, 25 Dec 2024 16:05:30 +0700
Subject: [PATCH] Fix Search.vue

---
 frontend/Search.vue | 402 +++++++++++++++-----------------------------
 1 file changed, 132 insertions(+), 270 deletions(-)

diff --git a/frontend/Search.vue b/frontend/Search.vue
index 59e1cc6..2765c8a 100644
--- a/frontend/Search.vue
+++ b/frontend/Search.vue
@@ -1,68 +1,39 @@
 <template>
-    <v-container grid-list-md fluid px-2 py-1 class="search-component">
-        <v-layout wrap>
-            <v-flex xs12>
-                <panel class="query-panel d-flex fill-height" fill-height>
-                    <template slot="header">
-                        <template v-if="$APP == 'foldseek'">
-                            Input protein
-                            <template v-if="!$vuetify.breakpoint.smAndDown">
-                                structure (PDB) or sequence (FASTA)
-                            </template>
-                        </template>
-                        <template v-else>
-                            Queries
-                        </template>
-                    </template>
-                    <template slot="toolbar-extra">
-                        <v-dialog v-if="!$ELECTRON" v-model="showCurl" absolute :disabled="searchDisabled">
-                            <template v-slot:activator="{ on }">
-                                <v-btn v-on="on" plain :disabled="searchDisabled">
-                                    <v-icon>M 22.23 1.96 c -0.98 0 -1.77 0.8 -1.77 1.77 c 0 0.21 0.05 0.4 0.12 0.6 l -8.31 14.23 c -0.8 0.17 -1.42 0.85 -1.42 1.7 a 1.77 1.77 0 0 0 3.54 0 c 0 -0.2 -0.05 -0.37 -0.1 -0.55 l 8.34 -14.29 a 1.75 1.75 0 0 0 1.37 -1.69 c 0 -0.97 -0.8 -1.77 -1.77 -1.77 M 14.98 1.96 c -0.98 0 -1.77 0.8 -1.77 1.77 c 0 0.21 0.05 0.4 0.12 0.6 l -8.3 14.24 c -0.81 0.16 -1.43 0.84 -1.43 1.7 a 1.77 1.77 0 0 0 3.55 0 c 0 -0.2 -0.06 -0.38 -0.12 -0.56 L 15.4 5.42 a 1.75 1.75 0 0 0 1.37 -1.69 c 0 -0.97 -0.8 -1.77 -1.78 -1.77 M 1.75 6 a 1.75 1.75 0 1 0 0 3.5 a 1.75 1.75 0 0 0 0 -3.5 z m 0 6 a 1.75 1.75 0 1 0 0 3.5 a 1.75 1.75 0 0 0 0 -3.5 z</v-icon>
-                                    API
-                                </v-btn>
-                            </template>
-                            <v-card>
-                                <v-card-title>
-                                    <div class="text-h5">cURL Command</div>
-                                </v-card-title>
-                                <v-card-text>
-                                    {{ $STRINGS.CURL_INTRO }}
-                                <br>
-                                <code>curl -X POST -F q=@PATH_TO_FILE <span v-if="email">-F 'email={{email}}'</span> -F 'mode={{mode}}' <span v-for="(path, i) in database" :key="i">-F 'database[]={{ path }}' </span> {{ origin() + '/api/ticket' }}</code>
-                                <br>
-                                    Refer to the <a href="https://search.mmseqs.com/docs/" target="_blank" rel="noopener">API documentation</a>, on how to check the status and fetch the result.
-                                </v-card-text>
-                                <v-card-actions>
-                                    <v-spacer></v-spacer>
-                                    <v-btn color="primary" text @click.native="showCurl = false">Close</v-btn>
-                                </v-card-actions>
-                            </v-card>
-                        </v-dialog>
-                        <v-icon v-if="query.length > 0" title="Clear" @click="query = ''" style="margin-right: 16px">{{ $MDI.Delete }}</v-icon>
-                        <v-tooltip open-delay="300" top>
-                            <template v-slot:activator="{ on }">
-                                <v-icon v-on="on">{{ $MDI.HelpCircleOutline }}</v-icon>
-                            </template>
-                            <span>{{ $STRINGS.QUERIES_HELP }}</span>
-                        </v-tooltip>
-                    </template>
-                    <template slot="content">
-                        <v-textarea
-                            :aria-label="$STRINGS.QUERIES_HELP"
-                            class="marv-bg mono"
-                            :loading="accessionLoading"
-                            hide-details
-                            v-model="query"
-                            @dragover.prevent
-                            @drop="fileDrop($event)"
-                            :placeholder="$STRINGS.QUERIES_HELP"
-                            spellcheck="false"
-                            data-gramm="false"
-                            data-gramm_editor="false"
-                            data-enable-grammarly="false"
-                            >
-                        </v-textarea>
+<v-container grid-list-md fluid px-2 py-1 class="search-component">
+    <v-layout wrap>
+    <v-flex xs12>
+        <panel class="query-panel d-flex fill-height" fill-height>
+        <template slot="header">
+            <template v-if="$APP == 'foldseek'">
+                Input protein
+                <template v-if="!$vuetify.breakpoint.smAndDown">
+                    structure (PDB/CIF) or sequence (FASTA)
+                </template>
+            </template>
+            <template v-else>
+                Queries
+            </template>
+        </template>
+        <template slot="toolbar-extra">
+            <api-dialog
+                :disabled="searchDisabled"
+                :email="email"
+                :mode="mode"
+                :database="database"
+                :taxfilter="taxFilter ? taxFilter.value : ''"></api-dialog>
+            <v-icon v-if="query.length > 0" title="Clear" @click="query = ''" style="margin-right: 16px">{{ $MDI.Delete }}</v-icon>
+            <v-tooltip open-delay="300" top>
+                <template v-slot:activator="{ on }">
+                    <v-icon v-on="on">{{ $MDI.HelpCircleOutline }}</v-icon>
+                </template>
+                <span>{{ $STRINGS.QUERIES_HELP }}</span>
+            </v-tooltip>
+        </template>
+        <template slot="content">
+            <query-textarea
+                :loading="accessionLoading"
+                v-model="query">
+            </query-textarea>
 
                         <div class="actions input-buttons-panel">
                             <div class="input-buttons-left">
@@ -87,6 +58,7 @@
                         </template>
                     </template>
                     <div slot="content">
+                        <!-- Existing Database Selection -->
                         <div class="input-group">
                             <v-tooltip open-delay="300" top>
                                 <template v-slot:activator="{ on }">
@@ -107,7 +79,7 @@
                     </div>
                 </panel>
 
-                <!-- New Search Parameters Section -->
+                <!-- Search Parameters Section -->
                 <panel collapsible collapsed>
                     <template slot="header">
                         <template v-if="!$vuetify.breakpoint.smAndDown">
@@ -134,7 +106,10 @@
                             </v-radio>
                         </v-radio-group>
 
-                        <!-- Iterative Search Section -->
+                        <TaxonomyAutocomplete v-model="taxFilter"></TaxonomyAutocomplete>
+
+                        <v-divider class="my-2"></v-divider>
+
                         <v-radio-group v-model="iterativeSearch">
                             <v-tooltip open-delay="300" top>
                                 <template v-slot:activator="{ on }">
@@ -149,12 +124,10 @@
                             <v-radio label="On" :value="true"></v-radio>
                             <v-radio label="Off" :value="false"></v-radio>
                         </v-radio-group>
-
-                        <TaxonomyAutocomplete v-model="taxFilter"></TaxonomyAutocomplete>
                     </div>
-
                 </panel>
 
+
             </v-flex>
             <v-flex>
                 <panel>
@@ -180,7 +153,7 @@
                             ({{
                                 databases.filter(db => database.includes(db.path)).map(db => db.name).sort().join(", ")
                             }})
-                        </template> with {{ $STRINGS.APP_NAME }} in <strong>{{ modes[mode] }}</strong> mode<span v-if="iterativeSearch"> <strong> iterative</strong></span>.
+                        </template> with {{ $STRINGS.APP_NAME }} in <strong>{{ modes[mode] }}</strong> mode<span v-if="iterativeSearch"><strong> iterative</strong></span>.
                         <div v-if="errorMessage != ''" class="v-alert v-alert--outlined warning--text mt-2">
                             <span>{{ errorMessage }}</span>
                         </div>
@@ -209,59 +182,61 @@
 import Panel from "./Panel.vue";
 import FileButton from "./FileButton.vue";
 import LoadAcessionButton from './LoadAcessionButton.vue';
-import { gzip } from 'pako';
+import Reference from "./Reference.vue";
 import { convertToQueryUrl } from './lib/convertToQueryUrl';
 import TaxonomyAutocomplete from './TaxonomyAutocomplete.vue';
-import { djb2, parseResultsList } from './Utilities.js';
+import { djb2, parseResultsList, checkMultimer } from './Utilities.js';
+import { AxiosCompressRequest } from './lib/AxiosCompressRequest.js';
+import ApiDialog from './ApiDialog.vue';
+import { storage, HistoryMixin } from './lib/HistoryMixin.js';
+import { BlobDatabase } from './lib/BlobDatabase.js';
+import Databases from './Databases.vue';
+import QueryTextarea from "./QueryTextarea.vue";
 
-let localStorageEnabled = false;
-try {
-    if (typeof window.localStorage !== 'undefined') {
-        localStorageEnabled = true
-    }
-} catch(e) {}
+const db = BlobDatabase();
 
 export default {
     name: "search",
+    mixins: [ HistoryMixin ],
     components: { 
         Panel,
         FileButton,
         LoadAcessionButton,
         TaxonomyAutocomplete,
         PredictStructureButton: () => __APP__ == "foldseek" ? import('./PredictStructureButton.vue') : null,
+        Reference,
+        ApiDialog,
+        Databases,
+        QueryTextarea
     },
     data() {
         return {
-            dberror: false,
-            dbqueried: false,
-            databases: [],
             inSearch: false,
             errorMessage: "",
             showCurl: false,
             mode: this.$STRINGS.MODE_DEFAULT_KEY,
-            iterativeSearch: false,
             modes: Array.from({length: this.$STRINGS.MODE_COUNT - 0}, (_, i) => i + 1)
-                        .reduce((dict, i, _)  => { dict[this.$STRINGS['MODE_KEY_' + i]] = this.$STRINGS['MODE_TITLE_' + i]; return dict; }, {}),
-            email: "",
+                    .reduce((dict, i, _)  => { dict[this.$STRINGS['MODE_KEY_' + i]] = this.$STRINGS['MODE_TITLE_' + i]; return dict; }, {}),
+            email: storage.getItem('email') || "",
             hideEmail: true,
             query: "",
-            database: [],
-            taxFilter: null,
+            database: JSON.parse(storage.getItem('database') || '[]'),
+            databases: JSON.parse(storage.getItem('databases') || '[]'),
+            iterativeSearch: JSON.parse(storage.getItem('iterativeSearch') || false),
+            taxFilter: JSON.parse(storage.getItem('taxFilter') || 'null'),
             predictable: false,
             accessionLoading: false,
         };
     },
-    mounted() {
-        if (localStorageEnabled && localStorage.mode) {
-            this.mode = localStorage.mode;
-        }
-        if (localStorageEnabled && localStorage.email) {
-            this.email = localStorage.email;
-        }
+    async mounted() {
         if (this.preloadAccession.length > 0) {
             this.query = "";
-        } else if (localStorageEnabled && localStorage.query && localStorage.query.length > 0) {
-            this.query = localStorage.query;
+            return;
+        }
+
+        let query = await db.getItem('query');
+        if (query && query.length > 0) {
+            this.query = query;
         } else {
             this.query = this.$STRINGS.QUERY_DEFAULT;
         }
@@ -271,17 +246,14 @@ export default {
         if (localStorageEnabled && localStorage.databases) {
             this.databases = JSON.parse(localStorage.databases);
         }
-        if (localStorageEnabled && localStorage.taxFilter) {
-            this.taxFilter = JSON.parse(localStorage.taxFilter);
-        }
         if (localStorageEnabled && localStorage.iterativeSearch) {
             this.iterativeSearch = JSON.parse(localStorage.iterativeSearch);
         }
+        if (localStorageEnabled && localStorage.taxFilter) {
+            this.taxFilter = JSON.parse(localStorage.taxFilter);
+        }
     },
     computed: {
-        databasesNotReady: function() {
-            return this.databases.some((db) => db.status == "PENDING" || db.status == "RUNNING");
-        },
         searchDisabled() {
             if (__APP__ == "foldseek" ) {
                 return (
@@ -298,156 +270,99 @@ export default {
         },
         preloadAccession() {
             return this.$route.query.accession || "";
+        },
+        isMultimer() {
+            if (__APP__ != "foldseek") {
+                return false;
+            }
+            return checkMultimer(this.query);
         }
     },
-    created() {
-        this.fetchData();
-    },
     watch: {
-        $route: "fetchData",
         mode(value) {
-            if (localStorageEnabled) {
-                localStorage.mode = value;
-            }
+            storage.setItem('mode', value);
         },
         email(value) {
-            if (localStorageEnabled) {
-                localStorage.email = value;
-            }
+            storage.setItem('email', value);
         },
         query(value) {
-            if (localStorageEnabled) {
-                localStorage.query = value;
-            }
+            db.setItem('query', value);
         },
         database(value) {
-            if (localStorageEnabled) {
-                localStorage.database = JSON.stringify(value);
-            }
+            storage.setItem('database', JSON.stringify(value));
         },
         databases(value) {
-            if (localStorageEnabled) {
-                localStorage.databases = JSON.stringify(value);
-            }
+            storage.setItem('databases', JSON.stringify(value));
         },
         iterativeSearch(value) {
-            if (localStorageEnabled) {
-                localStorage.iterativeSearch = value;
-            }
+            storage.setItem('iterativeSearch', JSON.stringify(value));
         },
         taxFilter(value) {
-            if (localStorageEnabled) {
-                localStorage.taxFilter = JSON.stringify(value);
-            }
+            storage.setItem('taxFilter', JSON.stringify(value));
         },
     },
     methods: {
-        origin() {
-            return (
-                window.location.protocol +
-                "//" +
-                window.location.hostname +
-                (window.location.port ? ":" + window.location.port : "")
-            );
-        },
-        fetchData() {
-            this.$axios.get("api/databases/all").then(
-                response => {
-                    const data = response.data;
-                    this.dbqueried = true;
-                    this.dberror = false;
-                    this.databases = data.databases;
-
-                    const complete = this.databases.filter((db) => { return db.status == "COMPLETE"; });
-                    if (this.database === null || this.database.length == 0) {
-                        this.database = complete.filter((element) => { return element.default == true }).map((db) => { return db.path; });
-                    } else {
-                        const paths = complete.map((db) => { return db.path; });
-                        this.database = this.database.filter((elem) => {
-                            return paths.includes(elem);
-                        });
-                    }
-
-                    if (this.databases.some((db) => { return db.status == "PENDING" || db.status == "RUNNING"; })) {
-                        setTimeout(this.fetchData.bind(this), 1000);
-                    }
-                }).catch(() => { this.dberror = true; });
-        },
-        search(event) {
-            var data = {
+        async search() {
+            var request = {
                 q: this.query,
                 database: this.database,
                 mode: this.mode,
                 email: this.email,
-                iterative: this.iterativeSearch
+                iterativesearch: this.iterativeSearch
             };
-            if (__APP__ == "foldseek" && typeof(data.q) === 'string' && data.q != '') {
-                if (data.q[data.q.length - 1] != '\n') {
-                    data.q += '\n';
+            if (__APP__ == "foldseek" && typeof(request.q) === 'string' && request.q != '') {
+                if (request.q[request.q.length - 1] != '\n') {
+                    request.q += '\n';
                 }
             }
-            if (__APP__ == "mmseqs" && typeof(value) === 'string' && data.q != '') {
+            if (__APP__ == "mmseqs" && typeof(value) === 'string' && request.q != '') {
                 // Fix query to always be a valid FASTA sequence
-                data.q = data.q.trim();
-                if (data.q[0] != '>') {
-                    data.q = '>unnamed\n' + data.q;
+                request.q = request.q.trim();
+                if (request.q[0] != '>') {
+                    request.q = '>unnamed\n' + request.q;
                 }
             }
             if (__ELECTRON__) {
-                data.email = "";
+                request.email = "";
             }
             if (this.taxFilter) {
-                data.taxfilter = this.taxFilter.value;
+                request.taxfilter = this.taxFilter.value;
             }
-            this.inSearch = true;
-            this.$axios.post("api/ticket", convertToQueryUrl(data), {
-                transformRequest: this.$axios.defaults.transformRequest.concat(
-                    (data, headers) => {
-                        if (typeof data === 'string' && data.length > 1024) {
-                            headers['Content-Encoding'] = 'gzip';
-                            return gzip(data);
-                        } else {
-                            headers['Content-Encoding'] = undefined;
-                            return data;
-                        }
-                    }
-                )
-            }).then(response => {
-                const data = response.data;
+            try {
+                this.inSearch = true;
+                const response = await this.$axios.post("api/ticket", convertToQueryUrl(request), {
+                    transformRequest: AxiosCompressRequest(this.$axios)
+                });
                 this.errorMessage = "";
-                this.inSearch = false;
-                if (data.status == "PENDING" || data.status == "RUNNING") {
-                    this.addToHistory(data.id);
-                    this.$router.push({
-                        name: "queue",
-                        params: { ticket: data.id }
-                    });
-                } else if (data.status == "COMPLETE") {
-                    this.addToHistory(data.id);
-                    this.$router.push({
-                        name: "result",
-                        params: { ticket: data.id, entry: 0 }
-                    });
-                } else if (data.status == "RATELIMIT") {
-                    this.errorMessage = "You have reached the rate limit. Please try again later.";
-                } else if (data.status == "MAINTENANCE") {
-                    this.errorMessage = "The server is currently under maintenance. Please try again later.";
-                } else {
-                    this.errorMessage = "Error loading search result";
+                switch (response.data.status) {
+                    case "PENDING":
+                    case "RUNNING":
+                        this.addToHistory(response.data.id);
+                        this.$router.push({
+                            name: "queue", params: { ticket: response.data.id }
+                        });
+                        break;
+                    case "COMPLETE":
+                        this.addToHistory(response.data.id);
+                        this.$router.push({
+                            name: "result", params: { ticket: response.data.id, entry: 0 }
+                        });
+                        break;
+                    case "RATELIMIT":
+                        this.errorMessage = "You have reached the rate limit. Please try again later.";
+                        break;
+                    case "MAINTENANCE":
+                        this.errorMessage = "The server is currently under maintenance. Please try again later.";
+                        break;
+                    default:
+                        this.errorMessage = "Error loading search result";
+                        break;
                 }
-            }).catch(() => {
+            } catch (error) {
                 this.errorMessage = "Error loading search result";
-            }).finally(() => {
+                throw error;
+            } finally {
                 this.inSearch = false;
-            });
-        },
-        fileDrop(event) {
-            event.preventDefault();
-            event.stopPropagation();
-
-            var dataTransfer = event.dataTransfer || event.target;
-            if (dataTransfer && dataTransfer.files && dataTransfer.files.length > 0) {
-                this.upload(dataTransfer.files);
             }
         },
         upload(files) {
@@ -471,38 +386,9 @@ export default {
             );
             fr.readAsText(file)
         },
-        addToHistory(uuid) {
-            if (!uuid) {
-                return;
-            }
-
-            let history;
-            if (localStorageEnabled && localStorage.history) {
-                history = JSON.parse(localStorage.history);
-            } else {
-                history = [];
-            }
-
-            let found = -1;
-            for (let i in history) {
-                if (history[i].id == uuid) {
-                    found = i;
-                    break;
-                }
-            }
-
-            if (found == -1) {
-                history.unshift({ time: +new Date(), id: uuid });
-            } else {
-                let tmp = history[found];
-                tmp.time = +new Date();
-                history.splice(found, 1);
-                history.unshift(tmp);
-            }
-
-            if (localStorageEnabled) {
-                localStorage.history = JSON.stringify(history);
-            }
+        async goToMultimer() {
+            await db.setItem('multimer.query', this.query);
+            this.$router.push({ name: 'multimer'});
         }
     }
 };
@@ -529,10 +415,6 @@ export default {
     padding-top: 7px;
 }
 
-.marv-bg .input-group__input {
-    max-height: inherit;
-}
-
 .search-component >>> .v-input--checkbox {
     margin-top: 0px;
 }
@@ -547,25 +429,6 @@ export default {
     margin-bottom: 8px;
 }
 
-.marv-bg >>> textarea {
-    height: 100%;
-    min-height: 270px;
-    background-image: url("./assets/marv-search-gray.png");
-    background-repeat: no-repeat;
-    background-position: right 15px bottom -10px;
-    background-size: 200px;
-    line-height: 1.5;
-}
-
-code {
-    font-size: 0.8em;
-}
-
-.marv-bg >>> .v-input__control, .marv-bg >>> .v-input__slot, .marv-bg >>> .v-text-field__slot {
-    flex: 1;
-    align-self: stretch;
-}
-
 .theme--dark .v-input label {
     color: #FFFFFFB3;
 }
@@ -573,5 +436,4 @@ code {
 .theme--light .v-input label {
     color: #00000099;
 }
-
 </style>