From 116d57452195b66b8760ad3a551824ed1bf99600 Mon Sep 17 00:00:00 2001
From: Martin Steinegger <themartinsteinegger@gmail.com>
Date: Wed, 25 Dec 2024 01:37:21 +0700
Subject: [PATCH 1/4] Add iterative searches to worker.go

---
 backend/worker.go | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/backend/worker.go b/backend/worker.go
index 55f3583..9679ec9 100644
--- a/backend/worker.go
+++ b/backend/worker.go
@@ -405,6 +405,11 @@ mv -f -- "${BASE}/query.lookup_tmp" "${BASE}/query.lookup"
 					parameters = append(parameters, "0")
 				}
 
+				if job.Mode == "iterative" {
+					parameters = append(parameters, "--num-iterations")
+					parameters = append(parameters, "3")
+				}
+
 				cmd, done, err := execCommand(config.Verbose, parameters...)
 				if err != nil {
 					errChan <- &JobExecutionError{err}

From a0401b92874466f0748d655a841e99bf3d2f3814 Mon Sep 17 00:00:00 2001
From: Martin Steinegger <themartinsteinegger@gmail.com>
Date: Wed, 25 Dec 2024 15:25:56 +0700
Subject: [PATCH 2/4] Add iterative searches to Foldseek

---
 backend/server.go             |   5 +-
 backend/structuresearchjob.go |  15 +-
 backend/worker.go             |   7 +-
 frontend/Search.vue           | 619 ++++++++++++++++++++++------------
 4 files changed, 427 insertions(+), 219 deletions(-)

diff --git a/backend/server.go b/backend/server.go
index 2bc5f0c..827f461 100644
--- a/backend/server.go
+++ b/backend/server.go
@@ -264,6 +264,7 @@ func server(jobsystem JobSystem, config ConfigRoot) {
 		var dbs []string
 		var mode string
 		var email string
+		var iterativesearch bool
 		var taxfilter string
 
 		if strings.HasPrefix(req.Header.Get("Content-Type"), "multipart/form-data") {
@@ -285,6 +286,7 @@ func server(jobsystem JobSystem, config ConfigRoot) {
 			dbs = req.Form["database[]"]
 			mode = req.FormValue("mode")
 			email = req.FormValue("email")
+                        iterativesearch = req.FormValue("iterativesearch") == "true"
 			taxfilter = req.FormValue("taxfilter")
 		} else {
 			err := req.ParseForm()
@@ -296,6 +298,7 @@ func server(jobsystem JobSystem, config ConfigRoot) {
 			dbs = req.Form["database[]"]
 			mode = req.FormValue("mode")
 			email = req.FormValue("email")
+                        iterativesearch = req.FormValue("iterativesearch") == "true"
 			taxfilter = req.FormValue("taxfilter")
 		}
 
@@ -315,7 +318,7 @@ func server(jobsystem JobSystem, config ConfigRoot) {
 				modeWithoutComplex := strings.Join(append(modes[:modeIdx], modes[modeIdx+1:]...), "-")
 				request, err = NewComplexSearchJobRequest(query, dbs, databases, modeWithoutComplex, config.Paths.Results, email, taxfilter)
 			} else {
-				request, err = NewStructureSearchJobRequest(query, dbs, databases, mode, config.Paths.Results, email, taxfilter)
+				request, err = NewStructureSearchJobRequest(query, dbs, databases, mode, config.Paths.Results, email, iterativesearch, taxfilter)
 			}
 		} else {
 			http.Error(w, "Job type not supported by this server", http.StatusBadRequest)
diff --git a/backend/structuresearchjob.go b/backend/structuresearchjob.go
index 32d4837..33866c9 100644
--- a/backend/structuresearchjob.go
+++ b/backend/structuresearchjob.go
@@ -10,10 +10,11 @@ import (
 )
 
 type StructureSearchJob struct {
-	Size      int      `json:"size" validate:"required"`
-	Database  []string `json:"database" validate:"required"`
-	Mode      string   `json:"mode" validate:"oneof=3di tmalign 3diaa"`
-	TaxFilter string   `json:"taxfilter"`
+	Size      int        `json:"size" validate:"required"`
+	Database  []string   `json:"database" validate:"required"`
+	Mode      string     `json:"mode" validate:"oneof=3di tmalign 3diaa"`
+        IterativeSearch bool `json:"iterativesearch"`
+	TaxFilter string     `json:"taxfilter"
 	query     string
 }
 
@@ -22,6 +23,9 @@ func (r StructureSearchJob) Hash() Id {
 	h.Write(([]byte)(JobStructureSearch))
 	h.Write([]byte(r.query))
 	h.Write([]byte(r.Mode))
+        if r.IterativeSearch {
+           h.Write([]byte("Iterative"))
+        }
 	if r.TaxFilter != "" {
 		h.Write([]byte(r.TaxFilter))
 	}
@@ -48,11 +52,12 @@ func (r StructureSearchJob) WritePDB(path string) error {
 	return nil
 }
 
-func NewStructureSearchJobRequest(query string, dbs []string, validDbs []Params, mode string, resultPath string, email string, taxfilter string) (JobRequest, error) {
+func NewStructureSearchJobRequest(query string, dbs []string, validDbs []Params, mode string, resultPath string, email string, iterativeSearch bool, taxfilter string) (JobRequest, error) {
 	job := StructureSearchJob{
 		max(strings.Count(query, "HEADER"), 1),
 		dbs,
 		mode,
+                iterativeSearch,
 		taxfilter,
 		query,
 	}
diff --git a/backend/worker.go b/backend/worker.go
index 9679ec9..4840384 100644
--- a/backend/worker.go
+++ b/backend/worker.go
@@ -405,11 +405,10 @@ mv -f -- "${BASE}/query.lookup_tmp" "${BASE}/query.lookup"
 					parameters = append(parameters, "0")
 				}
 
-				if job.Mode == "iterative" {
-					parameters = append(parameters, "--num-iterations")
-					parameters = append(parameters, "3")
+				if job.IterativeSearch {
+    					parameters = append(parameters, "--num-iterations")
+    					parameters = append(parameters, "3") 
 				}
-
 				cmd, done, err := execCommand(config.Verbose, parameters...)
 				if err != nil {
 					errChan <- &JobExecutionError{err}
diff --git a/frontend/Search.vue b/frontend/Search.vue
index b1f21e8..59e1cc6 100644
--- a/frontend/Search.vue
+++ b/frontend/Search.vue
@@ -1,200 +1,287 @@
 <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/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>
+    <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>
 
-            <div class="actions input-buttons-panel">
-                <div class="input-buttons-left">
-                    <load-acession-button v-if="$APP == 'foldseek'" @select="query = $event" @loading="accessionLoading = $event" :preload-source="preloadSource" :preload-accession="preloadAccession"></load-acession-button>
-                    <file-button id="file" :label="$STRINGS.UPLOAD_LABEL" v-on:upload="upload"></file-button>
-                    <PredictStructureButton v-if="$APP == 'foldseek'" :query="query" v-model="predictable" v-on:predict="query = $event"></PredictStructureButton>
-                    <file-button id="localFile" label="Upload previous results" @upload="uploadJSON"></file-button>
-                </div>
-            </div>
-        </template>
-        </panel>
-    </v-flex>
-    <v-flex xs12>
-        <panel collapsible collapsed render-collapsed>
-        <template slot="header">
-            <template v-if="!$vuetify.breakpoint.smAndDown">
-                Databases
-            </template>
-            <template v-else>
-                DBs
-            </template>
-            &amp; search settings
-        </template>
-        <div slot="content">
-            <databases
-                :selected="database"
-                :all-databases="databases"
-                @update:selected="database = $event"
-                @update:all-databases="databases = $event"
-                :hideEmail="hideEmail"
-                ></databases>
+                        <div class="actions input-buttons-panel">
+                            <div class="input-buttons-left">
+                                <load-acession-button v-if="$APP == 'foldseek'" @select="query = $event" @loading="accessionLoading = $event" :preload-source="preloadSource" :preload-accession="preloadAccession"></load-acession-button>
+                                <file-button id="file" :label="$STRINGS.UPLOAD_LABEL" v-on:upload="upload"></file-button>
+                                <PredictStructureButton v-if="$APP == 'foldseek'" :query="query" v-model="predictable" v-on:predict="query = $event"></PredictStructureButton>
+                            </div>
+                            <file-button id="localFile" label="Upload previous results" @upload="uploadJSON"></file-button>
+                        </div>
+                    </template>
+                </panel>
+            </v-flex>
+            <v-flex xs12>
+                <!-- Databases Section -->
+                <panel collapsible collapsed>
+                    <template slot="header">
+                        <template v-if="!$vuetify.breakpoint.smAndDown">
+                            Databases
+                        </template>
+                        <template v-else>
+                            DBs
+                        </template>
+                    </template>
+                    <div slot="content">
+                        <div class="input-group">
+                            <v-tooltip open-delay="300" top>
+                                <template v-slot:activator="{ on }">
+                                    <label v-on="on">Databases&nbsp;<v-icon color="#FFFFFFB3" style="margin-top:-3px" small v-on="on">{{ $MDI.HelpCircleOutline }}</v-icon></label>
+                                </template>
+                                <span v-if="$ELECTRON || hideEmail">Choose the databases to search against and the result mode.</span>
+                                <span v-else>Choose the databases to search against, the result mode, and optionally an email to notify you when the job is done.</span>
+                            </v-tooltip>
+                        </div>
 
-            <v-radio-group v-model="mode">
-                <v-tooltip open-delay="300" top>
-                    <template v-slot:activator="{ on }">
-                        <label v-on="on">Mode&nbsp;<v-icon color="#FFFFFFB3" style="margin-top:-3px" small v-on="on">{{ $MDI.HelpCircleOutline }}</v-icon></label>
+                        <template v-if="databases.length > 0">
+                            <v-checkbox v-for="(db, index) in databases" v-model="database" :key="index" :value="db.path" :label="db.name + ' ' + db.version" :append-icon="(db.status == 'ERROR' || db.status == 'UNKNOWN') ? $MDI.AlertCircleOutline : ((db.status == 'PENDING' || db.status == 'RUNNING') ? $MDI.ProgressWrench : undefined)" :disabled="db.status != 'COMPLETE'" hide-details></v-checkbox>
+                        </template>
+
+                        <div v-if="databasesNotReady" class="alert alert-info mt-1">
+                            <span>Databases are loading...</span>
+                        </div>
+                    </div>
+                </panel>
+
+                <!-- New Search Parameters Section -->
+                <panel collapsible collapsed>
+                    <template slot="header">
+                        <template v-if="!$vuetify.breakpoint.smAndDown">
+                            Search Parameters
+                        </template>
+                        <template v-else>
+                            Params
+                        </template>
                     </template>
-                    <span v-html="$STRINGS.MODE_HELP"></span>
-                </v-tooltip>
-                <v-radio hide-details
-                            v-for="i in ($STRINGS.MODE_COUNT - 0)"
-                            :key="i"
-                            :value="$STRINGS['MODE_KEY_' + i]"
-                            :label="$STRINGS['MODE_TITLE_' + i]"
-                            ></v-radio>
-            </v-radio-group>
+                    <div slot="content">
+                        <!-- Mode Section -->
+                        <v-radio-group v-model="mode">
+                            <v-tooltip open-delay="300" top>
+                                <template v-slot:activator="{ on }">
+                                    <label v-on="on">Mode&nbsp;<v-icon color="#FFFFFFB3" style="margin-top:-3px" small v-on="on">{{ $MDI.HelpCircleOutline }}</v-icon></label>
+                                </template>
+                                <span v-html="$STRINGS.MODE_HELP"></span>
+                            </v-tooltip>
+                            <v-radio hide-details
+                                    v-for="i in ($STRINGS.MODE_COUNT - 0)"
+                                    :key="i"
+                                    :value="$STRINGS['MODE_KEY_' + i]"
+                                    :label="$STRINGS['MODE_TITLE_' + i]">
+                            </v-radio>
+                        </v-radio-group>
 
-            <TaxonomyAutocomplete v-model="taxFilter"></TaxonomyAutocomplete>
+                        <!-- Iterative Search Section -->
+                        <v-radio-group v-model="iterativeSearch">
+                            <v-tooltip open-delay="300" top>
+                                <template v-slot:activator="{ on }">
+                                    <label v-on="on">
+                                        Iterative search
+                                        <v-icon color="#FFFFFFB3" style="margin-top:-3px" small v-on="on">{{ $MDI.HelpCircleOutline }}</v-icon>
+                                    </label>
+                                </template>
+                                <span>Improve sensitivity of search by performing an iterative search (--num-iterations 3).</span>
+                            </v-tooltip>
 
-            <v-tooltip v-if="!$ELECTRON && !hideEmail" open-delay="300" top>
-                <template v-slot:activator="{ on }">
-                    <v-text-field v-on="on" label="Notification Email (Optional)" placeholder="you@example.org" v-model="email"></v-text-field>
-                </template>
-                <span>Send an email when the job is done.</span>
-            </v-tooltip>
-        </div>
-        </panel>
-    </v-flex>
-    <v-flex>
-        <panel>
-        <template slot="content">
-            <div class="actions" :style="!$vuetify.breakpoint.xsOnly ?'display:flex; align-items: center;' : null">
-            <v-item-group class="v-btn-toggle">
-                <v-btn color="primary" :block="false" x-large v-on:click="search" :disabled="searchDisabled"><v-icon>{{ $MDI.Magnify }}</v-icon>&nbsp;Search</v-btn>
-                <v-btn v-if="isMultimer" color="secondary" :block="false" x-large v-on:click="goToMultimer"><v-icon>{{ $MDI.Multimer }}</v-icon>&nbsp;Go to Multimer</v-btn>
-            </v-item-group>
-            <div :style="!$vuetify.breakpoint.xsOnly ? 'margin-left: 1em;' : 'margin-top: 1em;'">
-                <span><strong>Summary</strong></span><br>
-                Search <template v-if="taxFilter">
-                    <strong>{{ taxFilter.text }}</strong> in
-                </template>
-                <template v-if="database.length == databases.length">
-                    <strong>all available</strong> databases
+                            <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>
+                <template slot="content">
+                    <div class="actions" :style="!$vuetify.breakpoint.xsOnly ?'display:flex; align-items: center;' : null">
+                    <v-btn color="primary" :block="$vuetify.breakpoint.xsOnly" x-large v-on:click="search" :disabled="searchDisabled"><v-icon>{{ $MDI.Magnify }}</v-icon>&nbsp;Search</v-btn>
+                    <div :style="!$vuetify.breakpoint.xsOnly ? 'margin-left: 1em;' : 'margin-top: 1em;'">
+                        <span><strong>Summary</strong></span><br>
+                        Search <template v-if="taxFilter">
+                            <strong>{{ taxFilter.text }}</strong> in
+                        </template>
+                        <template v-if="database.length == databases.length">
+                            <strong>all available</strong> databases
+                        </template>
+                        <template v-else>
+                            <strong>{{ database.length }}</strong>
+                            <template v-if="database.length == 1">
+                                database
+                            </template>
+                            <template v-else>
+                                databases
+                            </template>
+                            ({{
+                                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>.
+                        <div v-if="errorMessage != ''" class="v-alert v-alert--outlined warning--text mt-2">
+                            <span>{{ errorMessage }}</span>
+                        </div>
+                    </div>
+                    </div>
                 </template>
-                <template v-else>
-                    <strong>{{ database.length }}</strong>
-                    <template v-if="database.length == 1">
-                        database
-                    </template>
-                    <template v-else>
-                        databases
-                    </template>
-                    ({{
-                        databases.filter(db => database.includes(db.path)).map(db => db.name).sort().join(", ")
-                    }})
-                </template> with {{ $STRINGS.APP_NAME }} in <strong>{{ modes[mode] }}</strong> mode.
-                <div v-if="errorMessage != ''" class="v-alert v-alert--outlined warning--text mt-2">
-                    <span>{{ errorMessage }}</span>
-                </div>
-            </div>
-            </div>
-        </template>
-        </panel>
+                </panel>
+            </v-flex>
+        </v-layout>
+    <v-layout wrap>
+    <v-flex xs12>
+        <v-card rounded="0">
+        <v-card-title primary-title class="pb-0 mb-0">
+            <div class="text-h5 mb-0">Reference</div>
+        </v-card-title>
+        <v-card-title primary-title class="pt-0 mt-0">
+            <p class="text-subtitle-2 mb-0" v-html="$STRINGS.CITATION"></p>
+        </v-card-title>
+        </v-card>
     </v-flex>
     </v-layout>
-    <reference :reference="$STRINGS.CITATION"></reference>
-</v-container>
+    </v-container>
 </template>
 
 <script>
 import Panel from "./Panel.vue";
 import FileButton from "./FileButton.vue";
 import LoadAcessionButton from './LoadAcessionButton.vue';
-import Reference from "./Reference.vue";
+import { gzip } from 'pako';
 import { convertToQueryUrl } from './lib/convertToQueryUrl';
 import TaxonomyAutocomplete from './TaxonomyAutocomplete.vue';
-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";
+import { djb2, parseResultsList } from './Utilities.js';
 
-const db = BlobDatabase();
+let localStorageEnabled = false;
+try {
+    if (typeof window.localStorage !== 'undefined') {
+        localStorageEnabled = true
+    }
+} catch(e) {}
 
 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: "",
-            mode: storage.getItem('mode') || this.$STRINGS.MODE_DEFAULT_KEY,
+            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: storage.getItem('email') || "",
+                        .reduce((dict, i, _)  => { dict[this.$STRINGS['MODE_KEY_' + i]] = this.$STRINGS['MODE_TITLE_' + i]; return dict; }, {}),
+            email: "",
             hideEmail: true,
             query: "",
-            database: JSON.parse(storage.getItem('database') || '[]'),
-            databases: JSON.parse(storage.getItem('databases') || '[]'),
-            taxFilter: JSON.parse(storage.getItem('taxFilter') || 'null'),
+            database: [],
+            taxFilter: null,
             predictable: false,
             accessionLoading: false,
         };
     },
-    async mounted() {
+    mounted() {
+        if (localStorageEnabled && localStorage.mode) {
+            this.mode = localStorage.mode;
+        }
+        if (localStorageEnabled && localStorage.email) {
+            this.email = localStorage.email;
+        }
         if (this.preloadAccession.length > 0) {
             this.query = "";
-            return;
-        }
-
-        let query = await db.getItem('query');
-        if (query && query.length > 0) {
-            this.query = query;
+        } else if (localStorageEnabled && localStorage.query && localStorage.query.length > 0) {
+            this.query = localStorage.query;
         } else {
             this.query = this.$STRINGS.QUERY_DEFAULT;
         }
+        if (localStorageEnabled && localStorage.database) {
+            this.database = JSON.parse(localStorage.database);
+        }
+        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);
+        }
     },
     computed: {
+        databasesNotReady: function() {
+            return this.databases.some((db) => db.status == "PENDING" || db.status == "RUNNING");
+        },
         searchDisabled() {
             if (__APP__ == "foldseek" ) {
                 return (
@@ -211,95 +298,156 @@ 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) {
-            storage.setItem('mode', value);
+            if (localStorageEnabled) {
+                localStorage.mode = value;
+            }
         },
         email(value) {
-            storage.setItem('email', value);
+            if (localStorageEnabled) {
+                localStorage.email = value;
+            }
         },
         query(value) {
-            db.setItem('query', value);
+            if (localStorageEnabled) {
+                localStorage.query = value;
+            }
         },
         database(value) {
-            storage.setItem('database', JSON.stringify(value));
+            if (localStorageEnabled) {
+                localStorage.database = JSON.stringify(value);
+            }
         },
         databases(value) {
-            storage.setItem('databases', JSON.stringify(value));
+            if (localStorageEnabled) {
+                localStorage.databases = JSON.stringify(value);
+            }
+        },
+        iterativeSearch(value) {
+            if (localStorageEnabled) {
+                localStorage.iterativeSearch = value;
+            }
         },
         taxFilter(value) {
-            storage.setItem('taxFilter', JSON.stringify(value));
+            if (localStorageEnabled) {
+                localStorage.taxFilter = JSON.stringify(value);
+            }
         },
     },
     methods: {
-        async search() {
-            var request = {
+        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 = {
                 q: this.query,
                 database: this.database,
                 mode: this.mode,
-                email: this.email
+                email: this.email,
+                iterative: this.iterativeSearch
             };
-            if (__APP__ == "foldseek" && typeof(request.q) === 'string' && request.q != '') {
-                if (request.q[request.q.length - 1] != '\n') {
-                    request.q += '\n';
+            if (__APP__ == "foldseek" && typeof(data.q) === 'string' && data.q != '') {
+                if (data.q[data.q.length - 1] != '\n') {
+                    data.q += '\n';
                 }
             }
-            if (__APP__ == "mmseqs" && typeof(value) === 'string' && request.q != '') {
+            if (__APP__ == "mmseqs" && typeof(value) === 'string' && data.q != '') {
                 // Fix query to always be a valid FASTA sequence
-                request.q = request.q.trim();
-                if (request.q[0] != '>') {
-                    request.q = '>unnamed\n' + request.q;
+                data.q = data.q.trim();
+                if (data.q[0] != '>') {
+                    data.q = '>unnamed\n' + data.q;
                 }
             }
             if (__ELECTRON__) {
-                request.email = "";
+                data.email = "";
             }
             if (this.taxFilter) {
-                request.taxfilter = this.taxFilter.value;
+                data.taxfilter = this.taxFilter.value;
             }
-            try {
-                this.inSearch = true;
-                const response = await this.$axios.post("api/ticket", convertToQueryUrl(request), {
-                    transformRequest: AxiosCompressRequest(this.$axios)
-                });
+            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;
                 this.errorMessage = "";
-                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;
+                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";
                 }
-            } catch (error) {
+            }).catch(() => {
                 this.errorMessage = "Error loading search result";
-                throw error;
-            } finally {
+            }).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) {
@@ -323,9 +471,38 @@ export default {
             );
             fr.readAsText(file)
         },
-        async goToMultimer() {
-            await db.setItem('multimer.query', this.query);
-            this.$router.push({ name: 'multimer'});
+        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);
+            }
         }
     }
 };
@@ -352,6 +529,10 @@ export default {
     padding-top: 7px;
 }
 
+.marv-bg .input-group__input {
+    max-height: inherit;
+}
+
 .search-component >>> .v-input--checkbox {
     margin-top: 0px;
 }
@@ -366,6 +547,25 @@ 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;
 }
@@ -373,4 +573,5 @@ export default {
 .theme--light .v-input label {
     color: #00000099;
 }
+
 </style>

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 3/4] 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>

From 23a713a90620c19ed21e2deb367507a2e7f91706 Mon Sep 17 00:00:00 2001
From: Martin Steinegger <themartinsteinegger@gmail.com>
Date: Thu, 26 Dec 2024 23:47:39 +0900
Subject: [PATCH 4/4] Fix issues raised

---
 frontend/Search.vue | 265 +++++++++++++++++++-------------------------
 1 file changed, 117 insertions(+), 148 deletions(-)

diff --git a/frontend/Search.vue b/frontend/Search.vue
index 2765c8a..82f032b 100644
--- a/frontend/Search.vue
+++ b/frontend/Search.vue
@@ -35,147 +35,127 @@
                 v-model="query">
             </query-textarea>
 
-                        <div class="actions input-buttons-panel">
-                            <div class="input-buttons-left">
-                                <load-acession-button v-if="$APP == 'foldseek'" @select="query = $event" @loading="accessionLoading = $event" :preload-source="preloadSource" :preload-accession="preloadAccession"></load-acession-button>
-                                <file-button id="file" :label="$STRINGS.UPLOAD_LABEL" v-on:upload="upload"></file-button>
-                                <PredictStructureButton v-if="$APP == 'foldseek'" :query="query" v-model="predictable" v-on:predict="query = $event"></PredictStructureButton>
-                            </div>
-                            <file-button id="localFile" label="Upload previous results" @upload="uploadJSON"></file-button>
-                        </div>
-                    </template>
-                </panel>
-            </v-flex>
-            <v-flex xs12>
-                <!-- Databases Section -->
-                <panel collapsible collapsed>
-                    <template slot="header">
-                        <template v-if="!$vuetify.breakpoint.smAndDown">
-                            Databases
-                        </template>
-                        <template v-else>
-                            DBs
-                        </template>
+            <div class="actions input-buttons-panel">
+                <div class="input-buttons-left">
+                    <load-acession-button v-if="$APP == 'foldseek'" @select="query = $event" @loading="accessionLoading = $event" :preload-source="preloadSource" :preload-accession="preloadAccession"></load-acession-button>
+                    <file-button id="file" :label="$STRINGS.UPLOAD_LABEL" v-on:upload="upload"></file-button>
+                    <PredictStructureButton v-if="$APP == 'foldseek'" :query="query" v-model="predictable" v-on:predict="query = $event"></PredictStructureButton>
+                    <file-button id="localFile" label="Upload previous results" @upload="uploadJSON"></file-button>
+                </div>
+            </div>
+        </template>
+        </panel>
+    </v-flex>
+    <v-flex xs12>
+        <panel collapsible collapsed render-collapsed>
+        <template slot="header">
+            <template v-if="!$vuetify.breakpoint.smAndDown">
+                Databases
+            </template>
+            <template v-else>
+                DBs
+            </template>
+        </template>
+        <div slot="content">
+            <databases
+                    :selected="database"
+                    :all-databases="databases"
+                    @update:selected="database = $event"
+                    @update:all-databases="databases = $event"
+                    :hideEmail="hideEmail"
+                    ></databases>
+        </div>
+        </panel>
+        <panel collapsible collapsed render-collapsed>
+        <template slot="header">
+            <template v-if="!$vuetify.breakpoint.smAndDown">
+                Search Parameters
+            </template>
+            <template v-else>
+                Params
+            </template>
+        </template>
+        <div slot="content">
+            <v-radio-group v-model="mode">
+                <v-tooltip open-delay="300" top>
+                    <template v-slot:activator="{ on }">
+                        <label v-on="on">Mode&nbsp;<v-icon color="#FFFFFFB3" style="margin-top:-3px" small v-on="on">{{ $MDI.HelpCircleOutline }}</v-icon></label>
                     </template>
-                    <div slot="content">
-                        <!-- Existing Database Selection -->
-                        <div class="input-group">
-                            <v-tooltip open-delay="300" top>
-                                <template v-slot:activator="{ on }">
-                                    <label v-on="on">Databases&nbsp;<v-icon color="#FFFFFFB3" style="margin-top:-3px" small v-on="on">{{ $MDI.HelpCircleOutline }}</v-icon></label>
-                                </template>
-                                <span v-if="$ELECTRON || hideEmail">Choose the databases to search against and the result mode.</span>
-                                <span v-else>Choose the databases to search against, the result mode, and optionally an email to notify you when the job is done.</span>
-                            </v-tooltip>
-                        </div>
+                    <span v-html="$STRINGS.MODE_HELP"></span>
+                </v-tooltip>
+                <v-radio hide-details
+                            v-for="i in ($STRINGS.MODE_COUNT - 0)"
+                            :key="i"
+                            :value="$STRINGS['MODE_KEY_' + i]"
+                            :label="$STRINGS['MODE_TITLE_' + i]"
+                            ></v-radio>
+            </v-radio-group>
 
-                        <template v-if="databases.length > 0">
-                            <v-checkbox v-for="(db, index) in databases" v-model="database" :key="index" :value="db.path" :label="db.name + ' ' + db.version" :append-icon="(db.status == 'ERROR' || db.status == 'UNKNOWN') ? $MDI.AlertCircleOutline : ((db.status == 'PENDING' || db.status == 'RUNNING') ? $MDI.ProgressWrench : undefined)" :disabled="db.status != 'COMPLETE'" hide-details></v-checkbox>
-                        </template>
+            <TaxonomyAutocomplete v-model="taxFilter"></TaxonomyAutocomplete>
 
-                        <div v-if="databasesNotReady" class="alert alert-info mt-1">
-                            <span>Databases are loading...</span>
-                        </div>
-                    </div>
-                </panel>
-
-                <!-- Search Parameters Section -->
-                <panel collapsible collapsed>
-                    <template slot="header">
-                        <template v-if="!$vuetify.breakpoint.smAndDown">
-                            Search Parameters
-                        </template>
-                        <template v-else>
-                            Params
-                        </template>
+            <v-radio-group v-model="iterativeSearch">
+                <v-tooltip open-delay="300" top>
+                    <template v-slot:activator="{ on }">
+                        <label v-on="on">
+                            Iterative search
+                            <v-icon color="#FFFFFFB3" style="margin-top:-3px" small v-on="on">{{ $MDI.HelpCircleOutline }}</v-icon>
+                        </label>
                     </template>
-                    <div slot="content">
-                        <!-- Mode Section -->
-                        <v-radio-group v-model="mode">
-                            <v-tooltip open-delay="300" top>
-                                <template v-slot:activator="{ on }">
-                                    <label v-on="on">Mode&nbsp;<v-icon color="#FFFFFFB3" style="margin-top:-3px" small v-on="on">{{ $MDI.HelpCircleOutline }}</v-icon></label>
-                                </template>
-                                <span v-html="$STRINGS.MODE_HELP"></span>
-                            </v-tooltip>
-                            <v-radio hide-details
-                                    v-for="i in ($STRINGS.MODE_COUNT - 0)"
-                                    :key="i"
-                                    :value="$STRINGS['MODE_KEY_' + i]"
-                                    :label="$STRINGS['MODE_TITLE_' + i]">
-                            </v-radio>
-                        </v-radio-group>
-
-                        <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 }">
-                                    <label v-on="on">
-                                        Iterative search
-                                        <v-icon color="#FFFFFFB3" style="margin-top:-3px" small v-on="on">{{ $MDI.HelpCircleOutline }}</v-icon>
-                                    </label>
-                                </template>
-                                <span>Improve sensitivity of search by performing an iterative search (--num-iterations 3).</span>
-                            </v-tooltip>
+                    <span>Improve sensitivity of search by performing an iterative search (--num-iterations 3).</span>
+                </v-tooltip>
 
-                            <v-radio label="On" :value="true"></v-radio>
-                            <v-radio label="Off" :value="false"></v-radio>
-                        </v-radio-group>
-                    </div>
-                </panel>
+                <v-radio label="On" :value="true"></v-radio>
+                <v-radio label="Off" :value="false"></v-radio>
+            </v-radio-group>
 
-
-            </v-flex>
-            <v-flex>
-                <panel>
-                <template slot="content">
-                    <div class="actions" :style="!$vuetify.breakpoint.xsOnly ?'display:flex; align-items: center;' : null">
-                    <v-btn color="primary" :block="$vuetify.breakpoint.xsOnly" x-large v-on:click="search" :disabled="searchDisabled"><v-icon>{{ $MDI.Magnify }}</v-icon>&nbsp;Search</v-btn>
-                    <div :style="!$vuetify.breakpoint.xsOnly ? 'margin-left: 1em;' : 'margin-top: 1em;'">
-                        <span><strong>Summary</strong></span><br>
-                        Search <template v-if="taxFilter">
-                            <strong>{{ taxFilter.text }}</strong> in
-                        </template>
-                        <template v-if="database.length == databases.length">
-                            <strong>all available</strong> databases
-                        </template>
-                        <template v-else>
-                            <strong>{{ database.length }}</strong>
-                            <template v-if="database.length == 1">
-                                database
-                            </template>
-                            <template v-else>
-                                databases
-                            </template>
-                            ({{
-                                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>.
-                        <div v-if="errorMessage != ''" class="v-alert v-alert--outlined warning--text mt-2">
-                            <span>{{ errorMessage }}</span>
-                        </div>
-                    </div>
-                    </div>
+            <v-tooltip v-if="!$ELECTRON && !hideEmail" open-delay="300" top>
+                <template v-slot:activator="{ on }">
+                    <v-text-field v-on="on" label="Notification Email (Optional)" placeholder="you@example.org" v-model="email"></v-text-field>
                 </template>
-                </panel>
-            </v-flex>
-        </v-layout>
-    <v-layout wrap>
-    <v-flex xs12>
-        <v-card rounded="0">
-        <v-card-title primary-title class="pb-0 mb-0">
-            <div class="text-h5 mb-0">Reference</div>
-        </v-card-title>
-        <v-card-title primary-title class="pt-0 mt-0">
-            <p class="text-subtitle-2 mb-0" v-html="$STRINGS.CITATION"></p>
-        </v-card-title>
-        </v-card>
+                <span>Send an email when the job is done.</span>
+            </v-tooltip>
+        </div>
+        </panel>
+    </v-flex>
+    <v-flex>
+        <panel>
+        <template slot="content">
+            <div class="actions" :style="!$vuetify.breakpoint.xsOnly ?'display:flex; align-items: center;' : null">
+            <v-item-group class="v-btn-toggle">
+                <v-btn color="primary" :block="false" x-large v-on:click="search" :disabled="searchDisabled"><v-icon>{{ $MDI.Magnify }}</v-icon>&nbsp;Search</v-btn>
+                <v-btn v-if="isMultimer" color="secondary" :block="false" x-large v-on:click="goToMultimer"><v-icon>{{ $MDI.Multimer }}</v-icon>&nbsp;Go to Multimer</v-btn>
+            </v-item-group>
+            <div :style="!$vuetify.breakpoint.xsOnly ? 'margin-left: 1em;' : 'margin-top: 1em;'">
+                <span><strong>Summary</strong></span><br>
+                Search <template v-if="taxFilter">
+                    <strong>{{ taxFilter.text }}</strong> in
+                </template>
+                <template v-if="database.length == databases.length">
+                    <strong>all available</strong> databases
+                </template>
+                <template v-else>
+                    <strong>{{ database.length }}</strong>
+                    <template v-if="database.length == 1">
+                        database
+                    </template>
+                    <template v-else>
+                        databases
+                    </template>
+                    ({{
+                        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>.
+                <div v-if="errorMessage != ''" class="v-alert v-alert--outlined warning--text mt-2">
+                    <span>{{ errorMessage }}</span>
+                </div>
+            </div>
+            </div>
+        </template>
+        </panel>
     </v-flex>
     </v-layout>
-    </v-container>
+    <reference :reference="$STRINGS.CITATION"></reference>
+</v-container>
 </template>
 
 <script>
@@ -213,8 +193,7 @@ export default {
         return {
             inSearch: false,
             errorMessage: "",
-            showCurl: false,
-            mode: this.$STRINGS.MODE_DEFAULT_KEY,
+            mode: storage.getItem('mode') || this.$STRINGS.MODE_DEFAULT_KEY,
             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: storage.getItem('email') || "",
@@ -240,18 +219,6 @@ export default {
         } else {
             this.query = this.$STRINGS.QUERY_DEFAULT;
         }
-        if (localStorageEnabled && localStorage.database) {
-            this.database = JSON.parse(localStorage.database);
-        }
-        if (localStorageEnabled && localStorage.databases) {
-            this.databases = JSON.parse(localStorage.databases);
-        }
-        if (localStorageEnabled && localStorage.iterativeSearch) {
-            this.iterativeSearch = JSON.parse(localStorage.iterativeSearch);
-        }
-        if (localStorageEnabled && localStorage.taxFilter) {
-            this.taxFilter = JSON.parse(localStorage.taxFilter);
-        }
     },
     computed: {
         searchDisabled() {
@@ -307,8 +274,7 @@ export default {
                 q: this.query,
                 database: this.database,
                 mode: this.mode,
-                email: this.email,
-                iterativesearch: this.iterativeSearch
+                email: this.email
             };
             if (__APP__ == "foldseek" && typeof(request.q) === 'string' && request.q != '') {
                 if (request.q[request.q.length - 1] != '\n') {
@@ -328,6 +294,9 @@ export default {
             if (this.taxFilter) {
                 request.taxfilter = this.taxFilter.value;
             }
+            if (this.iterativeSearch) {
+                request.iterativesearch = this.iterativeSearch.value;
+            }
             try {
                 this.inSearch = true;
                 const response = await this.$axios.post("api/ticket", convertToQueryUrl(request), {