From 980f05401c8038db3056994e9b7b1c92dc1ae689 Mon Sep 17 00:00:00 2001
From: younghoon <davidbaby@snu.ac.kr>
Date: Tue, 30 Sep 2025 13:42:53 +0900
Subject: [PATCH] from-FoldSeek workflow. various UI/UX improvements

---
 frontend/FoldMasonSearch.vue |   71 ++-
 frontend/ResultView.vue      |  723 ++++++++++++++++++++--
 frontend/StructureViewer.vue |   52 +-
 frontend/Utilities.js        | 1113 ++++++++++++++++++++--------------
 frontend/lib/HistoryMixin.js |  106 ++--
 5 files changed, 1475 insertions(+), 590 deletions(-)

diff --git a/frontend/FoldMasonSearch.vue b/frontend/FoldMasonSearch.vue
index 04d3818..f5ca4ed 100644
--- a/frontend/FoldMasonSearch.vue
+++ b/frontend/FoldMasonSearch.vue
@@ -38,7 +38,7 @@
                             @click:close="removeQuery(index)"
                         >
                             {{ q.name }}
-                        </v-chip>                           
+                        </v-chip>
                     </div>
                 </div>
 
@@ -131,6 +131,9 @@ import { HistoryMixin } from './lib/HistoryMixin.js';
 import Databases from './Databases.vue';
 import QueryTextarea from "./QueryTextarea.vue";
 import DragUploadBox from "./DragUploadBox.vue";
+import { BlobDatabase } from "./lib/BlobDatabase.js";
+
+const db = BlobDatabase();
 
 const defaultParams = {
     wg: true,
@@ -171,8 +174,9 @@ export default {
     async mounted() {
         if (this.preloadAccessions.length > 0) {
             this.queries = [];
-            return;
         }
+        this.retrieveAndClean()
+        return;
     },
     computed: {
         alignDisabled() {
@@ -266,7 +270,7 @@ export default {
         async removeQuery(index) {
             this.queries.splice(index, 1);
         },
-        async addFiles(newFiles) {
+        addFiles(newFiles) {
             for (const newFile of newFiles) {
                 if (!this.fileNameSet.has(newFile.name)) {
                     this.queries.push(newFile);
@@ -313,6 +317,67 @@ export default {
         resetParams() {
             this.params = structuredClone(defaultParams);
         },
+        async retrieveAndClean() {
+            const clean = async (size) => {
+                // return
+                await db.removeItem('msa.query.size')
+                await db.removeItem('msa.query.names')
+                for (let i = 0; i < size; i++) {
+                    await db.removeItem(`msa.query.chunk:${i}`)
+                }
+            }
+            
+            // await clean(2)
+            // return
+
+            const SEP = '\0'
+
+            let size = await db.getItem('msa.query.size')
+            if (!size || size.length == 0) { 
+                await clean()
+                return 
+            }
+
+            size = parseInt(size)
+            
+            const texts = []
+            let names = await db.getItem('msa.query.names')
+            if (!names || names.length == 0) {
+                console.warn("MSA query name has not been passed")
+                await clean(size)
+                return
+            }
+            names = names.split(SEP)
+
+            for (let i = 0; i < size; i++) {
+                const entry = await db.getItem(`msa.query.chunk:${i}`)
+                if (!entry || entry.length == 0) {
+                    console.warn(`MSA query chunk ${i} is missing`)
+                    await clean(size)
+                    return
+                }
+                
+                texts.push(...( ( await entry.text() ).split(SEP) ))
+            }
+
+            if (names.length != texts.length) {
+                console.warn("MSA query entries and names size differs")
+                console.log(`names length: ${names.length}`)
+                console.log(`texts length: ${texts.length}`)
+                await clean(size)
+                return
+            }
+
+            const files = []
+
+            for (let i = 0; i < texts.length; i++) {
+                files.push({text: texts[i], name: names[i]})
+            }
+
+            this.addFiles(files)
+
+            await clean(size)
+        }
     }
 };
 </script>
diff --git a/frontend/ResultView.vue b/frontend/ResultView.vue
index 6d30936..ce150fb 100644
--- a/frontend/ResultView.vue
+++ b/frontend/ResultView.vue
@@ -70,7 +70,7 @@
                                 rel="noopener"
                                 >
                                 <v-list-item-content>
-                                    <v-list-item-title>{{ item.label }}</v-list-item-title>
+                                    <v-list-item-title>{{ log( item ).label }}</v-list-item-title>
                                     <v-list-item-subtitle>
                                         {{ item.accession }}
                                     </v-list-item-subtitle>
@@ -78,22 +78,28 @@
                             </v-list-item>
                         </v-list>
                     </v-menu>
-                    <v-tabs
+                    
+                    <v-sheet style="position:sticky; padding-bottom: 2em; top: 64px; z-index: 99999 !important;" class="sticky-tabs">
+                        
+                        <v-tabs
                         :color="selectedDatabases > 0 ? hits.results[selectedDatabases - 1].color : null"
                         center-active
                         grow
                         v-model="selectedDatabases"
-                        style="margin-bottom: 2em"
                         show-arrows
                         @change="handleChangeDatabase()"
                         v-if="hits.results.length > 1"
-                    >
+                        >
                         <v-tab>All databases</v-tab>
                         <v-tab v-for="entry in hits.results" :key="entry.db">{{ entry.db }} ({{ entry.alignments ? Object.values(entry.alignments).length : 0 }})</v-tab>
                     </v-tabs>
-                    <div v-for="(entry, index) in hits.results" :key="entry.db" v-if="selectedDatabases == 0 || (index + 1) == selectedDatabases">
-                    <v-flex class="d-flex" :style="{ 'flex-direction' : $vuetify.breakpoint.xsOnly ? 'column' : null, 'align-items': 'center' }">
+                    </v-sheet>
+                    <div v-for="(entry, entryidx) in hits.results" :key="entry.db" v-if="selectedDatabases == 0 || (entryidx + 1) == selectedDatabases" >
+                    <v-sheet :style="{'position': 'sticky', 'top': '140px', 'z-index': '99997 !important'}" class="sticky-title">
+                        <v-flex class="d-flex" :style="{ 'flex-direction' : $vuetify.breakpoint.xsOnly ? 'column' : null, 'align-items': 'center'}">
                         <h2 style="margin-top: 0.5em; margin-bottom: 1em; display: inline-block;" class="mr-auto">
+                            <template v-if="selectedDatabases == 0"><v-icon style="margin-right: 8px;" class="collapse-icon" :class="{ collapsed: isCollapsed[entry.db]}" @click="toggleCollapse(entry.db)">{{ $MDI.ChevronRight }}</v-icon></template>
+                            <template v-else><div style="width: 32px; display: inline-block;"></div></template>
                             <span style="text-transform: uppercase;">{{ entry.db }}</span> <small>{{ entry.alignments ? Object.values(entry.alignments).length : 0 }} hits</small>
                         </h2>
 
@@ -112,45 +118,51 @@
                             </v-btn>
                         </v-btn-toggle>
                     </v-flex>
+                    <v-divider></v-divider>
+                    </v-sheet>
+                    <div style="height: 16px; width: 100%;"></div>
                     <v-flex v-if="entry.hasTaxonomy && isSankeyVisible[entry.db]" class="mb-2">
                         <SankeyDiagram :rawData="entry.taxonomyreports[0]" :db="entry.db" :currentSelectedNodeId="localSelectedTaxId" :currentSelectedDb="selectedDb" @selectTaxon="handleSankeySelect"></SankeyDiagram>
                     </v-flex>
-                    <table class="v-table result-table" style="position:relativ; margin-bottom: 3em;">
+                    <table class="v-table result-table" style="position:relative; margin-bottom: 3em;" v-if="selectedDatabases != 0 || !isCollapsed[entry.db]" :style="{'--active-color': entry.color}">
                         <colgroup>
+                            <col style="width: 36px;">
                             <template v-if="isComplex">
-                            <col style="width: 6.5%;" />
-                            <col style="width: 6.5%;" />
+                                <col style="width: 6.5%;" />
+                                <col style="width: 6.5%;" />
                             </template>
-                            <col style="width: 20%;" />
-                            <col v-if="entry.hasDescription" style="width: 30%;" />
-                            <col v-if="entry.hasTaxonomy" style="width: 20%;" />
-                            <col style="width: 6.5%;" />
-                            <col style="width: 6.5%;" />
-                            <col style="width: 8.5%;" />
+                            <col style="min-width: 10%;" />
+                            <col v-if="entry.hasDescription" style="min-width: 25%;" />
+                            <col v-if="entry.hasTaxonomy" style="min-width: 15%;" />
+                            <col style="width: 6%;" />
+                            <col style="width: 6%;" />
+                            <col style="width: 6%;" />
                             <template v-if="tableMode == 0">
-                                <col style="width: 26.5%;" />
+                                <col style="min-width: 20%;" />
                             </template>
                             <template v-else>
-                                <col style="width: 6.5%;" />
-                                <col style="width: 10%;" />
-                                <col style="width: 10%;" />
+                                <col style="width: 4%;" />
+                                <col style="width: 8%;" />
+                                <col style="width: 8%;" />
                             </template>
-                            <col style="width: 10%;" />
+                            <col style="width: 6%;" />
                         </colgroup>
                         <thead>
                             <tr v-if="isComplex">
+                                <th colspan="1"></th>
                                 <th colspan="2" style="text-align:center; width:10%; border-right: 1px solid #333; border-bottom: 1px solid #333;">Complex</th>
                                 <th :colspan="6 +  entry.hasDescription + entry.hasTaxonomy + ((tableMode == 1) ? 2 : 0)" style="text-align:center; border-bottom: 1px solid #333;">Chain</th>
                             </tr>
                             <tr>
+                                <th class="thin"><v-simple-checkbox :color="entry.color" :ripple="false" v-model="selectAllStatus[entry.db]" @input="toggleDbEntries(entry.db, $event)" style="user-select: none; -webkit-user-select: none;" ></v-simple-checkbox></th>
                                 <template v-if="isComplex">
-                                <!-- <th class="thin">ID</th> -->
-                                <th class="thin">qTM</th>
-                                <th class="thin" style="border-right: 1px solid #333; ">tTM</th>
+                                    <!-- <th class="thin">ID</th> -->
+                                    <th class="thin">qTM</th>
+                                    <th class="thin" style="border-right: 1px solid #333; ">tTM</th>
                                 </template>
                                 <th :class="'wide-' + (3 - entry.hasDescription - entry.hasTaxonomy)">
                                     <template v-if="isComplex">
-                                        Chain paring
+                                        Chain pairing
                                     </template>
                                     <template v-else>
                                         Target
@@ -169,10 +181,10 @@
                                 <th class="thin">Prob.</th>
                                 <th class="thin">Seq. Id.</th>
                                 <th class="thin">{{ scoreColumnName }}</th>
-                                <th class="thin" v-if="tableMode == 1">Score</th>
-                                <th v-if="tableMode == 1">Query Pos.</th>
-                                <th v-if="tableMode == 1">Target Pos.</th>
-                                <th v-if="tableMode == 0">
+                                <th class="thin" v-show="tableMode == 1">Score</th>
+                                <th v-show="tableMode == 1">Query Pos.</th>
+                                <th v-show="tableMode == 1">Target Pos.</th>
+                                <th v-show="tableMode == 0">
                                     Position in query
                                     <v-tooltip open-delay="300" top>
                                         <template v-slot:activator="{ on }">
@@ -186,10 +198,26 @@
                         </thead>
                         <tbody>
                             <template v-for="(group, groupidx) in entry.alignments" >
-                            <tr v-for="(item, index) in group" :class="['hit', { 'active' : item.active }]" v-if="isGroupVisible(group)">
+                            <tr v-for="(item, index) in group" :class="['hit', { 'active' : item.active , 'selected' : selectedEntries[entry.db][groupidx]}]" v-if="isGroupVisible(group)"
+                                @click.stop="$vuetify.breakpoint.width <= 960 ? onCheckboxClick(entry.db, groupidx, $event) : () => {}">
+                                <td v-if="index == 0" :rowspan="group.length" class="entry-checkbox">
+                                    <!-- performance issue with thousands of v-checkboxes, hardcode the simple checkbox instead -->
+                                    <!-- <v-simple-checkbox :value="selectedEntries[entry.db][groupidx]" :color="entry.color" style="user-select: none; -webkit-user-select: none;" 
+                                    :ripple="false" @click.stop="onCheckboxClick(entry.db, groupidx, $event)"></v-simple-checkbox> -->
+                                    <div class="v-input--selection-controls__input" style="user-select: none; -webkit-user-select: none; cursor: pointer;" @click.stop="onCheckboxClick(entry.db, groupidx, $event)"
+                                    :data-label="Number( groupidx )+1">
+                                        <span aria-hidden="true" class="v-icon notranslate" :class="{'theme--light': !$vuetify.theme.dark, 'theme--dark': $vuetify.theme.dark}">
+                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg">
+                                        <path class="unchecked" d="M19,3H5C3.89,3 3,3.89 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z">
+                                        </path>
+                                        <path class="checked" d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.89 20.1,3 19,3Z"></path>
+                                        </svg>
+                                        </span>
+                                    </div>
+                                </td>
                                 <template v-if="index == 0 && isComplex">
-                                <td class="thin" data-label="Query TM-score" :rowspan="group.length">{{ group[0].complexqtm.toFixed(2) }}</td>
-                                <td class="thin" data-label="Target TM-score" :rowspan="group.length">{{ group[0].complexttm.toFixed(2) }}</td>
+                                    <td class="thin" data-label="Query TM-score" :rowspan="group.length">{{ group[0].complexqtm.toFixed(2) }}</td>
+                                    <td class="thin" data-label="Target TM-score" :rowspan="group.length">{{ group[0].complexttm.toFixed(2) }}</td>
                                 </template>
                                 <td class="db long" data-label="Target" :style="{ 'border-width' : isComplex ? '5px' : null, 'border-color' : entry.color }">
                                     <a :id="item.id" class="anchor" style="position: absolute; top: 0"></a>
@@ -206,10 +234,10 @@
                                 <td class="thin" data-label="Probability">{{ item.prob }}</td>
                                 <td class="thin" data-label="Sequence Identity">{{ item.seqId }}</td>
                                 <td class="thin" :data-label="scoreColumnName">{{ item.eval }}</td>
-                                <td class="thin" v-if="tableMode == 1" data-label="Score">{{ item.score }}</td>
-                                <td v-if="tableMode == 1" data-label="Query Position">{{ item.qStartPos }}-{{ item.qEndPos }} ({{ item.qLen }})</td>
-                                <td v-if="tableMode == 1" data-label="Target Position">{{ item.dbStartPos }}-{{ item.dbEndPos }} ({{ item.dbLen }})</td>
-                                <td class="graphical" data-label="Position" v-if="tableMode == 0">
+                                <td class="thin" v-show="tableMode == 1" data-label="Score">{{ item.score }}</td>
+                                <td v-show="tableMode == 1" data-label="Query Position">{{ item.qStartPos }}-{{ item.qEndPos }} ({{ item.qLen }})</td>
+                                <td v-show="tableMode == 1" data-label="Target Position">{{ item.dbStartPos }}-{{ item.dbEndPos }} ({{ item.dbLen }})</td>
+                                <td class="graphical" data-label="Position" v-show="tableMode == 0">
                                     <Ruler :length="item.qLen" :start="item.qStartPos" :end="item.qEndPos" :color="item.color" :label="index == 0"></Ruler>
                                 </td>
                                 <td class="alignment-action" :rowspan="isComplex ? group.length : 1" v-if="index == 0">
@@ -218,7 +246,7 @@
                                         <v-icon v-once>{{ $MDI.NotificationClearAll }}</v-icon>
                                     </v-btn> -->
                                     <button 
-                                        @click="showAlignment(group, entry.db, $event)"
+                                        @click.stop="showAlignment(group, entry.db, $event)"
                                         type="button"
                                         class="v-btn v-btn--icon v-btn--round v-btn--text v-size--default"
                                         :class="{ 
@@ -239,18 +267,74 @@
                     </div>
                 </template>
                 </panel>
+                <!-- For displaying number of selected entries and buttons to switch -->
+                <v-fade-transition>
+                    <v-sheet color="transparent" :style="{'position': 'fixed', 'width': $vuetify.breakpoint.smAndDown ? '80%' : '40%', 
+                    'left': 'calc(50% - ' + ($vuetify.breakpoint.smAndDown ? '40%' : '20%') + ')',
+                    'bottom': '16px', 'z-index': 99998, 'align-items': 'center', 'justify-content': 'space-between', 'opacity': loading ? 0.4 : 1}" 
+                    class="d-flex pa-2" v-if="selectedCounts > 0" >
+                    <v-chip label close color="primary" class="elevation-8" @click:close="clearAllEntries" ><span v-html="selectionBannerContent"></span></v-chip>
+                    <v-flex shrink>
+                    <template v-if="selectedCounts == 1">
+                        <v-tooltip top :color="errorFoldSeekBtn ? 'error': 'primary'" :value="errorFoldSeekBtn">
+                            <template v-slot:activator="{on, attrs}">
+                                <v-btn :color="errorFoldSeekBtn ? 'error': 'primary'" v-bind="attrs" v-on="on" fab class="mr-3 elevation-8" large :loading="loading" @click="sendToFoldSeek"><v-icon>{{isSelectionComplex ?  $MDI.Multimer : $MDI.Monomer}}</v-icon></v-btn>
+                            </template> 
+                            <span>{{ toFoldSeekContent }}</span>
+                        </v-tooltip>
+                        <v-tooltip top :color="errorFoldDiscoBtn ? 'error' : 'secondary'" :value="isSelectionUnableToFetch || errorFoldDiscoBtn">
+                            <template v-slot:activator="{on, attrs}">
+                                <v-btn v-bind="attrs" v-on="on" fab class="elevation-8" :color="errorFoldDiscoBtn ? 'error' : 'secondary'" large 
+                                :loading="loading" :disabled="isSelectionUnableToFetch" @click="sendToFoldDisco"><v-icon>{{$MDI.Motif}}</v-icon></v-btn>
+                            </template>
+                            <span v-html="toFoldDiscoContent"></span>
+                        </v-tooltip>
+                    </template>
+                    <template v-else>
+                        <v-tooltip top :color="errorFoldMasonBtn ? 'error' : 'primary'" :value="errorFoldMasonBtn">
+                            <template v-slot:activator="{on, attrs}">
+                                <v-btn v-bind="attrs" v-on="on" fab class="elevation-8" :color="errorFoldMasonBtn ? 'error' : 'primary'" large :loading="loading" @click="sendToFoldMason"><v-icon>{{$MDI.Wall}}</v-icon></v-btn>
+                            </template>
+                            <span>{{ toFoldMasonContent }}</span>
+                        </v-tooltip>
+                    </template>
+                    </v-flex>
+                    </v-sheet>
+                </v-fade-transition>
             </v-flex>
         </v-layout>
         <portal>
-            <panel v-if="alignment != null" class="alignment" :style="'top: ' + alnBoxOffset + 'px;'">
+            <panel v-if="alignment != null" class="alignment" :style="{ 'top': alnBoxOffset + 'px',  
+            width: $vuetify.breakpoint.smAndDown ? 'calc(100% - 16px)' : 'calc(100% - 32px)', 
+            right: $vuetify.breakpoint.smAndDown ? '8px' : '16px'}" ref="alignment_panel" v-click-outside="closeAlignment">
+                <template slot="desc">
+                    <v-btn icon @click="closeAlignment" style="display: block; margin-left: auto;">
+                    <v-icon>
+                        {{ $MDI.CloseCircleOutline }}
+                    </v-icon>
+                </v-btn></template>
                 <AlignmentPanel
                     slot="content"
-                    :key="`ap-${alignment.id}`"
+                    :key="alignment ? `ap-${alignment.id}` : 'ap-'"
                     :alignments="alignment"
                     :lineLen="fluidLineLen"
                     :hits="hits"
                 />
             </panel>
+            <v-dialog v-model="loading" persistent width="480px">
+                <v-card :loading="loading">
+                    <template slot="progress">
+                        <v-progress-linear indeterminate color="primary"></v-progress-linear>
+                    </template>
+                    <v-card-title>Please Wait...!</v-card-title>
+                    <v-card-text>
+                        We're processing your request. It may take upto a minute...
+                    </v-card-text>
+                    <v-card-actions>
+                        <v-btn color="primary" @click="cancelJob" text>Cancel</v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
         </portal>
     </v-container>
 </template>
@@ -260,9 +344,15 @@ import Panel from './Panel.vue';
 import AlignmentPanel from './AlignmentPanel.vue';
 import Ruler from './Ruler.vue';
 import ResultSankeyMixin from './ResultSankeyMixin.vue';
+import { mockPDB, mergePdbs} from './Utilities';
+import { pulchra } from 'pulchra-wasm';
+import { BlobDatabase } from './lib/BlobDatabase';
+import { StorageWrapper } from './lib/HistoryMixin';
 
 import { debounce } from './lib/debounce';
 
+const localDb = BlobDatabase()
+
 function getAbsOffsetTop($el) {
     var sum = 0;
     while ($el) {
@@ -272,6 +362,74 @@ function getAbsOffsetTop($el) {
     return sum;
 }
 
+const getChainName = (name) => {
+    if (/_v[0-9]+$/.test(name) || /^AF-\W+-/.test(name)) {
+        return 'A';
+    }
+
+    let pos = name.lastIndexOf('_');
+    if (pos != -1) {
+        let match = name.substring(pos + 1);
+        return match.length >= 1 && isNaN(Number(match[0])) ? match[0] : 'A';
+    }
+    // fallback
+    return 'A';
+}
+
+
+const getAccession = (name) => {
+    // HACK FIXME fix AF chain names
+    if (/_v[0-9]+$/.test(name)) {
+        return name;
+    }
+    
+    if (/^AF-\w+-/.test(name)) {
+        name = name.split('-')[1]
+    }
+
+    if (/_unrelaxed_rank_/.test(name)) {
+        let pos = name.indexOf('_');
+        return pos != -1 ? name.substring(0, pos) : name;
+    }
+
+    let pos = name.lastIndexOf('_');
+    return pos != -1 ? name.substring(0, pos) : name;
+}
+
+const fetchStructureFileURL = async (accession, db, signal=null) => {
+    const fetchWithURL = async (url, retry) => {
+        const response = await fetch(url, {signal})
+        if (signal?.aborted) throw new DOMException('Aborted', 'AbortError')
+        if (!response.ok) {
+            if (retry) return await fetchWithURL(url.replace(/\.pdb$/, ".cif"), false)
+            else throw new DOMException('Failed to fetch', 'FetchError')
+        } return await response.text()
+    }
+
+    if (!db || !accession) throw new DOMException('Invalid entry', 'FetchError')
+    if (signal?.aborted) throw new DOMException('Aborted', 'AbortError')
+
+    try {
+        if (db == "BFVD") {
+            const url = `https://bfvd.steineggerlab.workers.dev/pdb/${accession}.pdb`
+            return await fetchWithURL(url, false)
+        } else if (db.startsWith('afdb')) {
+            // First attempt pdb, then cif.
+            const url = `https://alphafold.ebi.ac.uk/files/${accession}.pdb`
+            return await fetchWithURL(url, true)
+        } else if (db.includes('esm')) {
+            const url = `https://api.esmatlas.com/fetchPredictedStructure/${ accession }.pdb`
+            return await fetchWithURL(url, false)
+        } else if (db.startsWith('pdb')) {
+            // First attempt pdb, then cif.
+            // PDB accepts only the first 4 characters as accession.
+            const url = `https://files.rcsb.org/download/${accession.substring(0, 4).toUpperCase()}.pdb`
+        } else throw new DOMException('Not supported DB', 'FetchError')
+    } catch (error) {
+        throw error
+    }
+}
+
 export default {
     name: 'ResultView',
     mixins: [ ResultSankeyMixin ],
@@ -283,9 +441,22 @@ export default {
             alnBoxOffset: 0,
             selectedDatabases: 0,
             selectedDb: null,
+            selectedEntries: {},
+            selectAllStatus: {},
+            selectedCounts: 0,
             tableMode: 0,
             menuActivator: null,
             menuItems: [],
+            loading: false,
+            cancelCtl: null,
+            toggleTargetValue: false,
+            toggleSourceIdx: -1,
+            toggleSourceDb: "",
+            isCollapsed: null,
+            dbToIdx: null,
+            errorFoldSeekBtn: false,
+            errorFoldMasonBtn: false,
+            errorFoldDiscoBtn: false,
         }
     },
     props: {
@@ -294,11 +465,43 @@ export default {
         hits: null,
         selectedTaxId: null,
     },
-    created() {
+    mounted() {
         window.addEventListener("resize", this.handleAlignmentBoxResize, { passive: true });
+        // window.addEventListener("click", this.handleClickOutside)
     },
     beforeDestroy() {
         window.removeEventListener("resize", this.handleAlignmentBoxResize);
+        // window.removeEventListener("click", this.handleClickOutside)
+    },
+    watch: {
+        hits: {
+            handler(n, o) {
+                if (n && n.results) {
+                    const obj = Object.fromEntries(
+                        n.results.map(e => [e.db, Array(Object.keys(e.alignments).length).fill(false)])
+                    )
+                    const obj2 = Object.fromEntries(
+                        n.results.map(e => [e.db, false])
+                    )
+                    const obj3 = Object.fromEntries(
+                        n.results.map((e, i) => [e.db, i])
+                    )
+                    this.selectedEntries = obj
+                    this.selectAllStatus = obj2
+                    this.isCollapsed = Object.fromEntries(
+                        n.results.map(e => [e.db, false])
+                    )
+                    this.dbToIdx = obj3
+                } else return
+            },
+            immediate: false,
+            deep: true,
+        },
+        selectedCounts() {
+            this.errorFoldDiscoBtn=false
+            this.errorFoldMasonBtn=false
+            this.errorFoldSeekBtn=false
+        }
     },
     computed: {
         mode() {
@@ -310,13 +513,30 @@ export default {
             }
             return false;
         },
+        isSelectionComplex() {
+            if (this.selectedCounts != 1 || !this.isComplex) return false
+
+            const selection = this.getSingleSelectionInfo();
+            if (selection.idx == -1) return false
+
+            if (this.hits.results[this.dbToIdx?.[selection.db]]?.alignments?.[selection.idx]?.length > 1) return true
+            else return false
+        },
+        isSelectionUnableToFetch() {
+            if (this.selectedCounts != 1) return false
+            const selection = this.getSingleSelectionInfo();
+            if (selection.idx == -1) return false
+
+            const banList = ['bfmd', 'cath50', 'gmgcl_id']
+            return banList.includes(selection.db)
+        },
         fluidLineLen() {
             if (this.$vuetify.breakpoint.xsOnly) {
                 return 30;
             } else if (this.$vuetify.breakpoint.smAndDown) {
-                return 45;
-            } else if (this.$vuetify.breakpoint.mdAndDown) {
                 return 60;
+            } else if (this.$vuetify.breakpoint.mdAndDown) {
+                return 45;
             } else {
                 return 80;
             }
@@ -343,7 +563,7 @@ export default {
             return "ERROR";
         },
         scoreColumnName() {
-            console.log(this.mode)
+            // console.log(this.mode)
             if (__APP__ == 'foldseek') {
                 switch (this.mode) {
                     case 'tmalign':
@@ -354,6 +574,35 @@ export default {
             }
             return 'E-Value';
         },
+        selectionBannerContent() {
+            if (this.selectedCounts == 0) return 'No selection'
+            else if (this.selectedCounts > 1) {
+                return this.selectedCounts + " entries" + " selected"
+            } else {
+                const selection = this.getSingleSelectionInfo()
+                if (selection.idx == -1) return ''
+
+                let str = (this.hits.results[this.dbToIdx?.[selection.db]]?.alignments?.[selection.idx]?.[0]?.target)
+                if (!str) return ''
+                if (str.length >= 15) {
+                    str = '<span title="' + str + '">'  + str.slice(0, 12) + '...' + '</span>&nbsp;'
+                }
+                return str + " selected"
+            }
+        },
+        toFoldSeekContent() {
+            if (this.errorFoldSeekBtn) return 'Failed to load the structure file'
+            else return 'Send to FoldSeek' + (this.isSelectionComplex ? ' Multimer' : "")
+        },
+        toFoldMasonContent() {
+            if (this.errorFoldMasonBtn) return 'Failed to load the structure file'
+            else return 'Send to FoldMason'
+        },
+        toFoldDiscoContent() {
+            if (this.errorFoldDiscoBtn) return 'Failed to load the structure file'
+            else if (this.isSelectionUnableToFetch) return 'This feature is not available<br>for the selected DB'
+            else return 'Send to FoldDisco'
+        },
     },
     methods: {
         log(args) {
@@ -374,8 +623,10 @@ export default {
             }
         },
         closeAlignment() {
-            this.alignment = null;
-            this.activeTarget = null;
+            this.$nextTick(() => {
+                this.alignment = null;
+                this.activeTarget = null;
+            })
         },
         handleAlignmentBoxResize: debounce(function() {
             if (this.activeTarget != null) {
@@ -400,6 +651,289 @@ export default {
             let taxFiltered = group.filter(item => this.filteredHitsTaxIds.includes(Number(item.taxId)));
             return taxFiltered.length > 0;
         },
+        onCheckboxClick(db, idx, event) {
+            if (!this.selectedEntries || !this.selectedEntries[db]) return
+
+            let value = !this.selectedEntries[db][idx]
+
+            const needRangedToggle = event.shiftKey && (this.toggleSourceDb == db) && (this.toggleSourceIdx != idx)
+
+            if (!needRangedToggle) {
+                // simple click. just toggle it.
+                this.toggleSourceDb = db
+                this.toggleSourceIdx = idx
+                this.toggleTargetValue = value
+                // this.log(`value set: ${db}, ${idx}, ${value}`)
+                this.$set(this.selectedEntries[db], idx, value)
+                this.selectedCounts += value ? 1 : -1
+            } else {
+                const startIdx = Math.min(this.toggleSourceIdx, idx)
+                const endIdx = Math.max(this.toggleSourceIdx, idx) + 1
+                this.handleRangedToggle(db, startIdx, endIdx, this.toggleTargetValue)
+            }
+            // this.log(`now selectedCounts = ${this.selectedCounts}`)
+        },
+        handleRangedToggle(db, startIdx, endIdx, value) {
+            if (!this.selectedEntries || !this.selectedEntries[db]) {
+                return
+            }
+            // this.log(`ranged set: db: ${db}, from ${startIdx} to ${endIdx} as ${value}`)
+
+            let delta = 0
+            const src = this.selectedEntries[db]
+            // FIXME: If already inside the range?
+            const next = src.map((v, i) => {if (i >= startIdx && i < endIdx) return value; else return v})
+            const deltaUnit = value ? 1 : -1
+            
+            for (let i = startIdx; i < endIdx; i++) {
+                if (src[i] != value ) {
+                    delta += deltaUnit
+                }
+            }
+            this.selectedCounts += delta
+            this.$set(this.selectedEntries, db, next)
+        },
+        clearAllEntries() {
+            if (!this.selectedEntries || this.loading) {
+                return
+            }
+            this.selectedCounts = 0
+            const next = {};
+            const nextSelectAll = {};
+            for (const [db, arr] of Object.entries(this.selectedEntries)) {
+                next[db] = arr.map(() => false);
+                nextSelectAll[db] = false
+            }
+            this.selectedEntries = next;
+            this.selectAllStatus = nextSelectAll;
+        },
+        toggleDbEntries(db, value) {
+            if (!this.selectedEntries || !this.selectedEntries[db]) {
+                return
+            }
+            let delta = 0;
+            const src = this.selectedEntries[db]
+            const next = src.map(()=>value)
+            const deltaUnit = value ? 1 : -1
+
+            for (let i = 0; i < src.length; i++) {
+                if (src[i] != value ) {
+                    delta += deltaUnit
+                }
+            }
+            this.selectedCounts += delta
+            this.selectAllStatus[db] = value
+            this.$set(this.selectedEntries, db, next)
+        },
+        getSingleSelectionInfo() {
+            const info = {}
+            let db;
+            let idx;
+
+            for (const [key, arr] of Object.entries(this.selectedEntries)) {
+                db = key
+                idx = arr.indexOf(true);
+                if (idx != -1) break;
+            }
+            info.db = db
+            info.idx = idx
+            // If there is no selection, then idx would be -1
+            return info
+        },
+        getMultipleSelectionInfo() {
+            const arr = []
+            
+            for (const [db, a] of Object.entries(this.selectedEntries)) {
+                arr.push(
+                    ...a.map((v, idx) => (v ? {db, idx} : null))
+                    .filter(Boolean)
+                )
+            }
+
+            return arr
+        },
+        async getMockPdb(info /* info: {db, idx} */, signal) {
+            if (signal?.aborted) throw new DOMException('Aborted', 'AbortError')
+            let {db, idx} = info
+            if (idx == -1) return;
+
+            const ticket = this.$route.params.ticket;
+            let response
+            try {
+                response = await this.$axios.get("api/result/" + ticket + '/' + this.$route.params.entry + '?format=brief&index=' + idx + '&database=' + db, {signal});
+            } catch (error) {
+                if (signal?.aborted) throw new  DOMException('Aborted', 'AbortError')
+                else throw new DOMException('Failed to fetch', 'FetchError')
+            }
+
+            let dataArr = response.data;
+            const arr = []
+            const name = getAccession(dataArr[0].target)
+
+            for (let data of dataArr) {
+                if (signal?.aborted) throw new DOMException('Aborted', 'AbortError')
+
+                const chain = getChainName(data.target)
+                const tCa = data.tCa
+                const tSeq = data.tSeq
+                const pdb = mockPDB(tCa, tSeq, chain)
+                // const mock = mockPDB(tCa, tSeq, chain)
+                // const pdb = await pulchra(mock)
+                arr.push({pdb, chain})
+            }
+            let out = ""
+            if (arr.length > 1) {
+                out = mergePdbs(arr)
+            } else {
+                out = arr[0].pdb
+            }
+            return { pdb: out, isMultimer: arr.length > 1, name: name}
+        },
+        async sendToFoldSeek() {
+            if (this.loading) return
+
+            this.loading = true
+            this.errorFoldSeekBtn = false
+            let info = this.getSingleSelectionInfo()
+            if (info.idx < 0) {
+                console.log("Error in sendToFoldSeek: no entry selected")
+                this.loading = false
+                return
+            }
+
+            let result
+            this.cancelCtl = new AbortController()
+            try {
+                const signal = this.cancelCtl.signal
+                result = await this.getMockPdb(info, signal)
+            } catch (error) {
+                if (error?.name == "AbortError") {
+                    console.log("Job canceled")
+                }  else {
+                    console.error(error.message)
+                    this.errorFoldSeekBtn = true
+                }
+                this.cancelCtl = null
+                this.loading = false
+                return
+            }
+
+            const pdb = result.pdb;
+            const isMultimer = result.isMultimer;
+            this.cancelCtl = null
+            this.loading = false
+            if (isMultimer) {
+                await localDb.setItem('multimer.query', pdb)
+                this.$router.push({name: "multimer"})
+            } else {
+                await localDb.setItem('query', pdb)
+                this.$router.push({name: "search"})
+            }
+        },
+        async sendToFoldMason() {
+            if (this.loading) return
+
+            const BATCH_SIZE = 256
+            const CHUNK_SIZE = 128
+
+            const inBatches = async (items, k, fn, signal) => {
+                const out = [];
+                for (let p = 0; p < items.length; p += k) {
+                    if (signal?.aborted) throw new DOMException('Aborted', 'AbortError')
+                    
+                    const chunk = items.slice(p, p + k);
+                    const settled = await Promise.allSettled(chunk.map(x => fn(x, signal)));
+                    out.push(...settled);
+                }
+                return out;
+            }
+            
+            const saveAsChunk = async (v /* v: Array[{text, name}] */, chunk_size, signal) => {
+                if (signal?.aborted) throw new  DOMException('Aborted', 'AbortError')
+                const SEP = '\0'
+                const PREFIX = "msa.query."
+
+                let texts = v.map(o => o.text)
+                let names = v.map(o => o.name).join(SEP)
+                let idx = 0;
+                
+                for (let i = 0; i < texts.length; i += chunk_size) {
+                    const UPPER = Math.min(i + chunk_size, texts.length)
+                    const key = PREFIX + "chunk:" + idx++
+                    const value = texts.slice(i, UPPER).join(SEP)
+                    await localDb.setItem(key, new Blob([ value ], {type: "text/plain"}))
+                }
+
+                await localDb.setItem(PREFIX + "names", names)
+                await localDb.setItem(PREFIX + "size", idx)
+            }
+
+            this.errorFoldMasonBtn = false
+            this.loading = true
+            this.cancelCtl = new AbortController();
+            try {
+                const signal = this.cancelCtl.signal
+                const settled = await inBatches(this.getMultipleSelectionInfo(), BATCH_SIZE, async (i, s) => await this.getMockPdb(i, s), signal)
+                const values = settled.filter(r => r.status == "fulfilled").map(r => {return {text: r.value?.pdb, name: r.value?.name};})
+                await saveAsChunk(values, CHUNK_SIZE, signal)
+                this.$router.push({name:'foldmason'})
+            } catch (e) {
+                if (e?.name == 'AbortError') {
+                    console.log("Job canceled")
+                } else {
+                    this.errorFoldMasonBtn = true
+                    console.error(e)
+                }
+            } finally {
+                this.loading = false
+                this.cancelCtl = null
+            }
+        },
+        async sendToFoldDisco() {
+            if (this.loading) return
+
+            this.errorFoldDiscoBtn = false
+            this.loading = true
+            const selection = this.getSingleSelectionInfo()
+            if (selection.idx == -1 || !this.dbToIdx) {
+                this.loading = false
+                return
+            }
+
+            this.cancelCtl = new AbortController();
+            const accession = this.hits.results[this.dbToIdx?.[selection.db]]?.alignments?.[selection.idx]?.[0]?.target
+            let targetPdb
+            try {
+                const signal = this.cancelCtl.signal
+                targetPdb = await fetchStructureFileURL(accession, selection.db, signal)
+            } catch (error) {
+                if (error?.name == 'AbortError') {
+                    console.log('Job canceled')
+                } else {
+                    this.errorFoldDiscoBtn = true
+                    console.error(error)
+                }
+                this.loading = false
+                return
+            }
+            this.loading = false
+            this.cancelCtl = null
+            if (!targetPdb) {
+                return
+            }
+            const storage = new StorageWrapper('folddisco')
+
+            await localDb.setItem('folddisco.query', targetPdb)
+            storage.removeItem('motif')
+            this.$router.push({name: "folddisco"})
+        },
+        cancelJob() {
+            this.cancelCtl?.abort()
+        },
+        toggleCollapse(db) {
+            let orig = this.isCollapsed[db]
+            this.$set(this.isCollapsed, db, !orig)
+        }
     }
 };
 </script>
@@ -435,6 +969,14 @@ export default {
         }
     }
 
+    tbody {
+        counter-reset: row;
+    }
+
+    tbody tr.hit {
+        counter-increment: row;
+    }
+
     td, th {
         padding: 0 6px;
         text-align: left;
@@ -470,6 +1012,41 @@ export default {
     }
 }
 
+.sticky-tabs::before {
+    content: "";
+    width: 100%;
+    position: absolute;
+    top: -16px;
+    background-color: inherit;
+    display: block;
+    height: 16px;
+    z-index: inherit;
+} 
+
+.collapse-icon:not(.collapsed) {
+    transform: rotate(90deg);
+}
+
+.collapse-icon {
+    cursor: pointer;
+}
+
+tr.hit:not(.selected) .entry-checkbox path.checked {
+    opacity: 0;
+}
+
+tr.hit.selected .entry-checkbox path.unchecked {
+    opacity: 0;
+}
+
+tr.hit .entry-checkbox svg {
+    transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+tr.hit.selected .entry-checkbox svg {
+    fill: var(--active-color);
+}
+
 @media print, screen and (min-width: 961px) {
     .result-table {
         table-layout: fixed;
@@ -484,6 +1061,29 @@ export default {
             text-overflow: ellipsis;
             white-space: nowrap;
         }
+        tr.hit:not(.selected) .entry-checkbox div:not(:hover) svg {
+            opacity: 0;
+        }
+
+        tr.hit:not(.selected) .entry-checkbox div:hover svg {
+            opacity: 1;
+        }
+        tr.hit:not(.selected) .entry-checkbox div::before {
+            content: attr(data-label);
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translateY(-50%) translateX(-50%);
+            transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+            font-weight: 700;
+            line-height: 1.2;
+            text-align: center;
+            opacity: 0.6;
+            font-size: 0.7em;
+        }
+        tr.hit:not(.selected) .entry-checkbox div:hover::before {
+            opacity: 0;
+        }
     }
 }
 
@@ -507,12 +1107,18 @@ export default {
         .hits {
             min-width: 300px;
         }
+
         tbody td a {
             min-width: 100px;
         }
         tbody td.graphical div.ruler {
             margin: 10px 0;
         }
+        
+        td.entry-checkbox {
+            display: none;
+        }
+
         thead {
             display: none;
         }
@@ -520,13 +1126,34 @@ export default {
             border: 0;
             display: inherit;
         }
-        tr {
+        tr.hit {
             box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1);
             max-width: 100%;
             position: relative;
             display: block;
-            padding: 0.5em;
+            padding: 2em;
+            cursor: pointer;
         }
+
+        tr.hit.selected {
+            outline: 4px solid color-mix(in srgb, var(--active-color) 60%, transparent);
+            outline-offset: -2px;
+        }
+
+        tr:not(.hit) {
+            position: relative
+        }
+
+        tr:not(.hit)::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 1px;
+            background-color: #cfcfcf;
+        }
+
         tr td {
             border: 0;
             display: inherit;
@@ -546,7 +1173,7 @@ export default {
         tr.detail {
             margin-top: -1rem;
         }
-        tr:not(.detail):not(.is-empty):not(.table-footer) td {
+        tr:not(.detail):not(.is-empty):not(.table-footer) td:not(.entry-checkbox) {
             display: flex;
             border-bottom: 1px solid #eee;
             flex-direction: row;
@@ -576,8 +1203,6 @@ export default {
 
 .alignment {
     position:absolute;
-    left:4px;
-    right:4px;
     z-index: 999;
     box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12) !important;
 }
diff --git a/frontend/StructureViewer.vue b/frontend/StructureViewer.vue
index cb2259a..9d11e00 100644
--- a/frontend/StructureViewer.vue
+++ b/frontend/StructureViewer.vue
@@ -164,6 +164,7 @@ export default {
     methods: {
         // Create arrows connecting CA coordinates for query/target in match columns
         async drawArrows(str1, str2) {
+            if (!this.stage) return;
             const shape = new Shape('arrows');
             await Promise.all(this.alignments.map(async (alignment) => {
                 const chain_q = getChainName(alignment.query);
@@ -236,6 +237,7 @@ export default {
             repr.setVisibility(true);
         },
         setQuerySelection() {
+            if (!this.stage) return;
             let repr = this.stage.getRepresentationsByName("queryStructure");
             if (!repr) return;
             let sele = this.querySele;
@@ -253,6 +255,7 @@ export default {
             }
         },
         setTargetSelection() {
+            if (!this.stage) return;
             let repr = this.stage.getRepresentationsByName("targetStructure");
             if (!repr) return;
             let sele = this.targetSele;
@@ -403,30 +406,35 @@ END
         let lastIdx = null;
         let remoteData = null;
         let i = 0;
-        for (let alignment of this.alignments) {
-            const chain = getChainName(alignment.target);
-            let tSeq = alignment.tSeq;
-            let tCa = alignment.tCa;
-            if (Number.isInteger(alignment.tCa) && Number.isInteger(alignment.tSeq)) {
-                const db = alignment.db;
-                const idx = alignment.tCa;
-                if (idx != lastIdx) {
-                    const ticket =  this.$route.params.ticket;
-                    const response = await this.$axios.get("api/result/" + ticket + '/' + this.$route.params.entry + '?format=brief&index=' + idx + '&database=' + db);
-                    remoteData = response.data;
-                    lastIdx = idx;
+        // It is wrapped in order to make it handle when it is destroyed even before it is fully mounted
+        try {
+            for (let alignment of this.alignments) {
+                const chain = getChainName(alignment.target);
+                let tSeq = alignment.tSeq;
+                let tCa = alignment.tCa;
+                if (Number.isInteger(alignment.tCa) && Number.isInteger(alignment.tSeq)) {
+                    const db = alignment.db;
+                    const idx = alignment.tCa;
+                    if (idx != lastIdx) {
+                        const ticket =  this.$route.params.ticket;
+                        const response = await this.$axios.get("api/result/" + ticket + '/' + this.$route.params.entry + '?format=brief&index=' + idx + '&database=' + db);
+                        remoteData = response.data;
+                        lastIdx = idx;
+                    }
+                    tSeq = remoteData[i].tSeq;
+                    tCa = remoteData[i].tCa;
+                    i++;
                 }
-                tSeq = remoteData[i].tSeq;
-                tCa = remoteData[i].tCa;
-                i++;
+                const mock = mockPDB(tCa, tSeq, chain);
+                const pdb = await pulchra(mock);
+                const component = await this.stage.loadFile(new Blob([pdb], { type: 'text/plain' }), {ext: 'pdb', firstModelOnly: true});
+                component.structure.eachChain(c => { c.chainname = chain; });
+                component.structure.eachAtom(a => { a.serial = renumber++; });
+                targets.push(component);
+                selections_t.push(`${alignment.dbStartPos}-${alignment.dbEndPos}:${chain}`);
             }
-            const mock = mockPDB(tCa, tSeq, chain);
-            const pdb = await pulchra(mock);
-            const component = await this.stage.loadFile(new Blob([pdb], { type: 'text/plain' }), {ext: 'pdb', firstModelOnly: true});
-            component.structure.eachChain(c => { c.chainname = chain; });
-            component.structure.eachAtom(a => { a.serial = renumber++; });
-            targets.push(component);
-            selections_t.push(`${alignment.dbStartPos}-${alignment.dbEndPos}:${chain}`);
+        } catch (e) {
+            return 
         }
         const structure = concatStructures(getAccession(this.alignments[0].target), ...targets.map(t => t.structure));
         const target = this.stage.addComponentFromObject(structure, { name: "targetStructure" });
diff --git a/frontend/Utilities.js b/frontend/Utilities.js
index d2c5e5a..c71f975 100644
--- a/frontend/Utilities.js
+++ b/frontend/Utilities.js
@@ -1,313 +1,392 @@
-import { Selection, Matrix4, PdbWriter } from 'ngl';
+import { Selection, Matrix4, PdbWriter } from "ngl";
 
 function tryLinkTargetToDB(target, db) {
-    try {
-        var res = db.toLowerCase();
-        if (res.startsWith("pfam")) {
-            return 'https://www.ebi.ac.uk/interpro/entry/pfam/' + target;
-        } else if (res.startsWith("pdb")) {
-            return 'https://www.rcsb.org/structure/' + target.replaceAll(/-assembly[0-9]+/g, '').replaceAll(/\.(cif|pdb|ent)(\.gz)?/g, '').split('_')[0];
-        } else if (res.startsWith("uniclust") || res.startsWith("uniprot") || res.startsWith("sprot") || res.startsWith("swissprot")) {
-            return 'https://www.uniprot.org/uniprot/' + target;
-        } else if (res.startsWith("eggnog_")) {
-            return 'http://eggnogdb.embl.de/#/app/results?target_nogs=' + target;
-        } else if (res.startsWith("cdd")) {
-            return 'https://www.ncbi.nlm.nih.gov/Structure/cdd/cddsrv.cgi?uid=' + target;
-        }
+  try {
+    var res = db.toLowerCase();
+    if (res.startsWith("pfam")) {
+      return "https://www.ebi.ac.uk/interpro/entry/pfam/" + target;
+    } else if (res.startsWith("pdb")) {
+      return (
+        "https://www.rcsb.org/structure/" +
+        target
+          .replaceAll(/-assembly[0-9]+/g, "")
+          .replaceAll(/\.(cif|pdb|ent)(\.gz)?/g, "")
+          .split("_")[0]
+      );
+    } else if (
+      res.startsWith("uniclust") ||
+      res.startsWith("uniprot") ||
+      res.startsWith("sprot") ||
+      res.startsWith("swissprot")
+    ) {
+      return "https://www.uniprot.org/uniprot/" + target;
+    } else if (res.startsWith("eggnog_")) {
+      return "http://eggnogdb.embl.de/#/app/results?target_nogs=" + target;
+    } else if (res.startsWith("cdd")) {
+      return (
+        "https://www.ncbi.nlm.nih.gov/Structure/cdd/cddsrv.cgi?uid=" + target
+      );
+    }
 
-        if (__APP__ == "foldseek") {
-            if (target.startsWith("AF-")) {
-                 let accession = target.replaceAll(/-F[0-9]+-model_v[0-9]+(\.(cif|pdb))?(\.gz)?(_[A-Z0-9]+)?$/g, '');
-                 accession = accession.substring(3);
-                 return [
-                     { label: 'AFDB', accession: accession, href:'https://www.alphafold.ebi.ac.uk/entry/' + accession },
-                     { label: 'UniProt', accession: accession, href: 'https://www.uniprot.org/uniprot/' + accession },
-                 ];
-            } else if (target.startsWith("GMGC")) {
-                return 'https://gmgc.embl.de/search.cgi?search_id=' + target.replaceAll(/\.(cif|pdb)(\.gz)?/g, '')
-            } else if (target.startsWith("MGYP")) {
-                return 'https://esmatlas.com/explore/detail/' + target.replaceAll(/\.(cif|pdb)(\.gz)?/g, '')
-            } else if (target.startsWith("LevyLab_")) {
-                let accession = target.split('_')[1];
-                return [
-                    { label: 'AFDB', accession: accession, href:'https://www.alphafold.ebi.ac.uk/entry/' + accession },
-                    { label: 'UniProt', accession: accession, href: 'https://www.uniprot.org/uniprot/' + accession },
-                ];
-            } else if ( target.startsWith("ProtVar_")) {
-                let accession1 = target.split('_')[1];
-                let accession2 = target.split('_')[2];
-                let result = [
-                    { label: 'AFDB', accession: accession1, href:'https://www.alphafold.ebi.ac.uk/entry/' + accession1 },
-                    { label: 'UniProt', accession: accession1, href: 'https://www.uniprot.org/uniprot/' + accession1 },
-                ];
-                if (accession1 != accession2) {
-                    result.push({ label: 'AFDB', accession: accession2, href:'https://www.alphafold.ebi.ac.uk/entry/' + accession2 });
-                    result.push({ label: 'UniProt', accession: accession2, href: 'https://www.uniprot.org/uniprot/' + accession2 });
-                }
-                return result;
-            } else if (target.startsWith("ModelArchive_")) {
-                return 'https://modelarchive.org/doi/10.5452/' + target.split('_')[1];
-            } else if (target.startsWith("Predictome_")) {
-                return 'https://predictomes.org/summary/' + target.split('_')[1];
-            }
-            if (res.startsWith("cath")) {
-                if (target.startsWith('af_')) {
-                    const cath = target.substring(target.lastIndexOf('_') + 1);
-                    return "https://www.cathdb.info/version/latest/superfamily/" + cath;
-                } else {
-                    return "https://www.cathdb.info/version/latest/domain/"+ target;
-                }
-            } else if (res.startsWith("bfvd")) {
-                const bfvd = target.replaceAll(/_.*/g, '');
-                return [ 
-                    { label: "BFVD", accession: bfvd, href: "https://bfvd.foldseek.com/cluster/" + bfvd },
-                    { label: "UniRef", accession: bfvd, href: "https://www.uniprot.org/uniref/UniRef100_" + bfvd },
-                ]
-            }
+    if (__APP__ == "foldseek") {
+      if (target.startsWith("AF-")) {
+        let accession = target.replaceAll(
+          /-F[0-9]+-model_v[0-9]+(\.(cif|pdb))?(\.gz)?(_[A-Z0-9]+)?$/g,
+          ""
+        );
+        accession = accession.substring(3);
+        return [
+          {
+            label: "AFDB",
+            accession: accession,
+            href: "https://www.alphafold.ebi.ac.uk/entry/" + accession,
+          },
+          {
+            label: "UniProt",
+            accession: accession,
+            href: "https://www.uniprot.org/uniprot/" + accession,
+          },
+        ];
+      } else if (target.startsWith("GMGC")) {
+        return (
+          "https://gmgc.embl.de/search.cgi?search_id=" +
+          target.replaceAll(/\.(cif|pdb)(\.gz)?/g, "")
+        );
+      } else if (target.startsWith("MGYP")) {
+        return (
+          "https://esmatlas.com/explore/detail/" +
+          target.replaceAll(/\.(cif|pdb)(\.gz)?/g, "")
+        );
+      } else if (target.startsWith("LevyLab_")) {
+        let accession = target.split("_")[1];
+        return [
+          {
+            label: "AFDB",
+            accession: accession,
+            href: "https://www.alphafold.ebi.ac.uk/entry/" + accession,
+          },
+          {
+            label: "UniProt",
+            accession: accession,
+            href: "https://www.uniprot.org/uniprot/" + accession,
+          },
+        ];
+      } else if (target.startsWith("ProtVar_")) {
+        let accession1 = target.split("_")[1];
+        let accession2 = target.split("_")[2];
+        let result = [
+          {
+            label: "AFDB",
+            accession: accession1,
+            href: "https://www.alphafold.ebi.ac.uk/entry/" + accession1,
+          },
+          {
+            label: "UniProt",
+            accession: accession1,
+            href: "https://www.uniprot.org/uniprot/" + accession1,
+          },
+        ];
+        if (accession1 != accession2) {
+          result.push({
+            label: "AFDB",
+            accession: accession2,
+            href: "https://www.alphafold.ebi.ac.uk/entry/" + accession2,
+          });
+          result.push({
+            label: "UniProt",
+            accession: accession2,
+            href: "https://www.uniprot.org/uniprot/" + accession2,
+          });
+        }
+        return result;
+      } else if (target.startsWith("ModelArchive_")) {
+        return "https://modelarchive.org/doi/10.5452/" + target.split("_")[1];
+      } else if (target.startsWith("Predictome_")) {
+        return "https://predictomes.org/summary/" + target.split("_")[1];
+      }
+      if (res.startsWith("cath")) {
+        if (target.startsWith("af_")) {
+          const cath = target.substring(target.lastIndexOf("_") + 1);
+          return "https://www.cathdb.info/version/latest/superfamily/" + cath;
+        } else {
+          return "https://www.cathdb.info/version/latest/domain/" + target;
         }
-        return null;
-    } catch (e) {
-        return null;
+      } else if (res.startsWith("bfvd")) {
+        const bfvd = target.replaceAll(/_.*/g, "");
+        return [
+          {
+            label: "BFVD",
+            accession: bfvd,
+            href: "https://bfvd.foldseek.com/cluster/" + bfvd,
+          },
+          {
+            label: "UniRef",
+            accession: bfvd,
+            href: "https://www.uniprot.org/uniref/UniRef100_" + bfvd,
+          },
+        ];
+      }
     }
+    return null;
+  } catch (e) {
+    return null;
+  }
 }
 
 function tryFixTargetName(target, db) {
-    var res = db.toLowerCase();
-    if (__APP__ == "foldseek") {
-        if (target.startsWith("AF-")) {
-            return target.replaceAll(/\.(cif|pdb)(\.gz)?(_[A-Z0-9]+)?$/g, '');
-        } else if (res.startsWith("pdb") || res.startsWith("gmgc") || res.startsWith("mgyp") || res.startsWith("mgnify")) {
-            return target.replaceAll(/\.(cif|pdb|ent)(\.gz)?/g, '');
-        } else if (res.startsWith("bfvd")) {
-            return target.replaceAll(/_unrelaxed.*/g, '');
-        }
-        if (res.startsWith("cath")) {
-            if (target.startsWith('af_')) {
-                const match = target.match(/^af_([A-Z0-9]+)_(\d+)_(\d+)_(\d+\.\d+\.\d+\.\d+)$/);
-                if (match && match.length == 5) {
-                    return match[4] + ' '  + match[1] + ' ' + match[2] + '-' + match[3];
-                }
-            }
+  var res = db.toLowerCase();
+  if (__APP__ == "foldseek") {
+    if (target.startsWith("AF-")) {
+      return target.replaceAll(/\.(cif|pdb)(\.gz)?(_[A-Z0-9]+)?$/g, "");
+    } else if (
+      res.startsWith("pdb") ||
+      res.startsWith("gmgc") ||
+      res.startsWith("mgyp") ||
+      res.startsWith("mgnify")
+    ) {
+      return target.replaceAll(/\.(cif|pdb|ent)(\.gz)?/g, "");
+    } else if (res.startsWith("bfvd")) {
+      return target.replaceAll(/_unrelaxed.*/g, "");
+    }
+    if (res.startsWith("cath")) {
+      if (target.startsWith("af_")) {
+        const match = target.match(
+          /^af_([A-Z0-9]+)_(\d+)_(\d+)_(\d+\.\d+\.\d+\.\d+)$/
+        );
+        if (match && match.length == 5) {
+          return match[4] + " " + match[1] + " " + match[2] + "-" + match[3];
         }
+      }
     }
-    return target;
+  }
+  return target;
 }
 
 // Process e.g. AF-{uniprot ID}-F1_model_v4.cif.pdb.gz to just uniprot ID
 export function tryFixName(name) {
-    if (name.startsWith("AF-")) {
-        name = name.replaceAll(/(AF[-_]|[-_]F[0-9]+[-_]model[-_]v[0-9]+)/g, '')
-    }
-    return name.replaceAll(/\.(cif|pdb|gz)/g, '');
+  if (name.startsWith("AF-")) {
+    name = name.replaceAll(/(AF[-_]|[-_]F[0-9]+[-_]model[-_]v[0-9]+)/g, "");
+  }
+  return name.replaceAll(/\.(cif|pdb|gz)/g, "");
 }
 
 export function parseResults(data) {
-    let empty = 0;
-    let total = 0;
-    for (let i in data.results) {
-        let result = data.results[i];
-        let db = result.db;
-        result.hasDescription = false;
-        result.hasTaxonomy = false;
-        if (result.alignments == null) {
-            empty++;
+  let empty = 0;
+  let total = 0;
+  for (let i in data.results) {
+    let result = data.results[i];
+    let db = result.db;
+    result.hasDescription = false;
+    result.hasTaxonomy = false;
+    if (result.alignments == null) {
+      empty++;
+    }
+    total++;
+    const grouped = {};
+    for (let j in result.alignments) {
+      for (let k in result.alignments[j]) {
+        let item = result.alignments[j][k];
+        let split = item.target.split(" ");
+        item.target = split[0];
+        item.description = split.slice(1).join(" ");
+        if (item.description.length > 1) {
+          result.hasDescription = true;
+        }
+        item.href = tryLinkTargetToDB(item.target, db);
+        item.target = tryFixTargetName(item.target, db);
+        item.id = "result-" + i + "-" + j;
+        item.active = false;
+        if (__APP__ != "foldseek" || data.mode != "tmalign") {
+          item.eval =
+            typeof item.eval === "string"
+              ? item.eval
+              : item.eval.toExponential(2);
+        }
+        if (__APP__ == "foldseek") {
+          item.prob =
+            typeof item.prob === "string" ? item.prob : item.prob.toFixed(2);
+          if (data.mode == "tmalign") {
+            item.eval =
+              typeof item.eval === "string" ? item.eval : item.eval.toFixed(3);
+          } else if (data.mode == "lolalign") {
+            item.eval = item.eval * 100;
+            item.eval = parseFloat(item.eval.toFixed(2)).toString();
+          }
+        }
+        if ("taxId" in item) {
+          result.hasTaxonomy = true;
         }
-        total++;
-        const grouped = {};
-        for (let j in result.alignments) {
-            for (let k in result.alignments[j]) {
-                let item = result.alignments[j][k];
-                let split = item.target.split(' ');
-                item.target = split[0];
-                item.description = split.slice(1).join(' ');
-                if (item.description.length > 1) {
-                    result.hasDescription = true;
-                }
-                item.href = tryLinkTargetToDB(item.target, db);
-                item.target = tryFixTargetName(item.target, db);
-                item.id = 'result-' + i + '-' + j;
-                item.active = false;
-                if (__APP__ != "foldseek" || data.mode != "tmalign") {
-                    item.eval = (typeof(item.eval) === "string") ? item.eval : item.eval.toExponential(2);
-                }
-                if (__APP__ == "foldseek") {
-                    item.prob = (typeof(item.prob) === "string") ? item.prob : item.prob.toFixed(2);
-                    if (data.mode == "tmalign") {
-                        item.eval = (typeof(item.eval) === "string") ? item.eval : item.eval.toFixed(3);
-                    } else if (data.mode == "lolalign") {
-                        item.eval = item.eval * 100;
-                        item.eval = parseFloat(item.eval.toFixed(2)).toString()
-                    }
-                }
-                if ("taxId" in item) {
-                    result.hasTaxonomy = true;
-                }
-                let groupId = item.complexid ?? k;
-                // console.log("Group ID: " + groupId + " complexid: " + item.complexid + " j: " + j)
-                if (!(grouped[groupId])) {
-                    grouped[groupId] = [];
-                }
-                grouped[groupId].push(item);
-            }
+        let groupId = item.complexid ?? k;
+        // console.log("Group ID: " + groupId + " complexid: " + item.complexid + " j: " + j)
+        if (!grouped[groupId]) {
+          grouped[groupId] = [];
         }
-        result.alignments = grouped;
+        grouped[groupId].push(item);
+      }
     }
-    return (total != 0 && empty / total == 1) ? ({ results: [], mode : data.mode }) : data;
+    result.alignments = grouped;
+  }
+  return total != 0 && empty / total == 1
+    ? { results: [], mode: data.mode }
+    : data;
 }
 
 export function splitAlphaNum(str) {
-    const len = str.length;
-    let i = 0;
+  const len = str.length;
+  let i = 0;
 
-    while (i < len) {
-      const cc = str.charCodeAt(i);
-      if (cc >= 48 && cc <= 57) {
-        break;
-      }
-      i++;
+  while (i < len) {
+    const cc = str.charCodeAt(i);
+    if (cc >= 48 && cc <= 57) {
+      break;
     }
-    const alpha = str.slice(0, i);
+    i++;
+  }
+  const alpha = str.slice(0, i);
 
-    let j = i;
-    while (j < len) {
-      const cc = str.charCodeAt(j);
-      if (cc < 48 || cc > 57) {
-        break;
-      }
-      j++;
+  let j = i;
+  while (j < len) {
+    const cc = str.charCodeAt(j);
+    if (cc < 48 || cc > 57) {
+      break;
     }
-    const numeric = str.slice(i, j);
+    j++;
+  }
+  const numeric = str.slice(i, j);
 
-    let substitution = "";
-    if (j < len && str.charCodeAt(j) === 58 /* ':' */) {
-        substitution = str.slice(j);
-    }
+  let substitution = "";
+  if (j < len && str.charCodeAt(j) === 58 /* ':' */) {
+    substitution = str.slice(j);
+  }
 
-    return [alpha, numeric, substitution];
+  return [alpha, numeric, substitution];
 }
 
 function computeInterresidueDist(splitTarget) {
-    const dist = [];
-    let lastChain = null;
-    let lastPos = null;
+  const dist = [];
+  let lastChain = null;
+  let lastPos = null;
 
-    for (let i = 1; i < splitTarget.length; ++i) {
-        const curr = splitTarget[i];
+  for (let i = 1; i < splitTarget.length; ++i) {
+    const curr = splitTarget[i];
 
-        if (curr === '_') {
-            dist.push(null);
-            continue;
-        }
+    if (curr === "_") {
+      dist.push(null);
+      continue;
+    }
 
-        let [currChain, currPos] = splitAlphaNum(curr);
-        currPos = currPos | 0;
+    let [currChain, currPos] = splitAlphaNum(curr);
+    currPos = currPos | 0;
 
-        // Find last valid residue before current
-        let j = i - 1;
-        while (j >= 0 && splitTarget[j] === '_') {
-            j--;
-        }
-        if (j < 0) {
-            dist.push(null);
-            lastChain = currChain;
-            lastPos = currPos;
-            continue;
-        }
+    // Find last valid residue before current
+    let j = i - 1;
+    while (j >= 0 && splitTarget[j] === "_") {
+      j--;
+    }
+    if (j < 0) {
+      dist.push(null);
+      lastChain = currChain;
+      lastPos = currPos;
+      continue;
+    }
 
-        let [prevChain, prevPos] = splitAlphaNum(splitTarget[j]);
-        prevPos = prevPos | 0;
+    let [prevChain, prevPos] = splitAlphaNum(splitTarget[j]);
+    prevPos = prevPos | 0;
 
-        const delta = (currChain === prevChain) ? (currPos - prevPos) : currPos;
-        dist.push(delta);
+    const delta = currChain === prevChain ? currPos - prevPos : currPos;
+    dist.push(delta);
 
-        // Update last valid residue
-        lastChain = currChain;
-        lastPos = currPos;
-    }
+    // Update last valid residue
+    lastChain = currChain;
+    lastPos = currPos;
+  }
 
-    return dist;
+  return dist;
 }
 
 export function parseResultsFoldDisco(data) {
-    let empty = 0;
-    let total = 0;
-    for (let i in data.results) {
-        let result = data.results[i];
-        let db = result.db;
-        result.hasDescription = false;
-        result.hasTaxonomy = false;
-        if (result.alignments == null) {
-            empty++;
+  let empty = 0;
+  let total = 0;
+  for (let i in data.results) {
+    let result = data.results[i];
+    let db = result.db;
+    result.hasDescription = false;
+    result.hasTaxonomy = false;
+    if (result.alignments == null) {
+      empty++;
+    }
+    total++;
+    result.queryresidues = {};
+    const grouped = {};
+    let meta = null;
+    if ("meta" in result) {
+      meta = {};
+      for (let j in result.meta) {
+        let entry = result.meta[j];
+        meta[entry.key] = entry;
+      }
+    }
+    result.meta = null;
+    for (let j in result.alignments) {
+      let item = result.alignments[j];
+      let split = item.target.split("/");
+      item.target = split[split.length - 1];
+
+      const splitTarget = item.targetresidues.split(",");
+      item.gaps = splitTarget.reduce((acc, s) => {
+        return acc + (s == "_" ? "0" : "1");
+      }, "");
+      item.interresiduedist = computeInterresidueDist(splitTarget);
+      item.idfscore = item.idfscore.toFixed(3);
+      item.rmsd = item.rmsd.toFixed(3);
+
+      item.queryresidues.split(",").map((r) => {
+        let [chain, pos, _] = splitAlphaNum(r);
+        if (!(chain in result.queryresidues)) {
+          result.queryresidues[chain] = new Set();
         }
-        total++;
-        result.queryresidues = {};
-        const grouped = {};
-        let meta = null;
-        if ("meta" in result) {
-            meta = {};
-            for (let j in result.meta) {
-                let entry = result.meta[j];
-                meta[entry.key] = entry;
-            }
+        result.queryresidues[chain].add(pos - 0);
+      });
+
+      item.href = tryLinkTargetToDB(item.target, db);
+      item.targetname = tryFixTargetName(item.target, db).toUpperCase();
+      item.id = "result-" + i + "-" + j;
+      if (meta != null) {
+        let header = meta[item.dbkey].header;
+        let split = header.split(" ");
+        item.description = split.slice(1).join(" ");
+        if (item.description.length > 1) {
+          result.hasDescription = true;
         }
-        result.meta = null;
-        for (let j in result.alignments) {
-            let item = result.alignments[j];
-            let split = item.target.split('/');
-            item.target = split[split.length-1];
-
-            const splitTarget = item.targetresidues.split(',');
-            item.gaps = splitTarget
-                .reduce((acc, s) => {
-                    return acc + ((s == '_') ? '0' : '1');
-                }, '');
-            item.interresiduedist = computeInterresidueDist(splitTarget);
-            item.idfscore = item.idfscore.toFixed(3);
-            item.rmsd = item.rmsd.toFixed(3);
-
-            item.queryresidues
-                .split(',')
-                .map(r => {
-                    let [chain, pos, _] = splitAlphaNum(r);
-                    if (!(chain in result.queryresidues)) {
-                        result.queryresidues[chain] = new Set();
-                    }
-                    result.queryresidues[chain].add(pos - 0);
-                });
-
-            item.href = tryLinkTargetToDB(item.target, db);
-            item.targetname = tryFixTargetName(item.target, db).toUpperCase();
-            item.id = 'result-' + i + '-' + j;
-            if (meta != null) {
-                let header = meta[item.dbkey].header;
-                let split = header.split(' ');
-                item.description = split.slice(1).join(' ');
-                if (item.description.length > 1) {
-                    result.hasDescription = true;
-                }
-                if ("taxId" in meta[item.dbkey]) {
-                    item.taxId = meta[item.dbkey].taxId;
-                    item.taxName = meta[item.dbkey].taxName;
-                    result.hasTaxonomy = true;
-                }
-            }
-            let groupId = j;
-            if (!(grouped[groupId])) {
-                grouped[groupId] = [];
-            }
-            grouped[j].push(item);
+        if ("taxId" in meta[item.dbkey]) {
+          item.taxId = meta[item.dbkey].taxId;
+          item.taxName = meta[item.dbkey].taxName;
+          result.hasTaxonomy = true;
         }
-        result.alignments = grouped;
-        Object.keys(result.queryresidues).forEach(function(key, _) {
-            result.queryresidues[key] = Array.from(result.queryresidues[key]);
-        });
+      }
+      let groupId = j;
+      if (!grouped[groupId]) {
+        grouped[groupId] = [];
+      }
+      grouped[j].push(item);
     }
-    return (total != 0 && empty / total == 1) ? ({ results: [], mode : data.mode }) : data;
+    result.alignments = grouped;
+    Object.keys(result.queryresidues).forEach(function (key, _) {
+      result.queryresidues[key] = Array.from(result.queryresidues[key]);
+    });
+  }
+  return total != 0 && empty / total == 1
+    ? { results: [], mode: data.mode }
+    : data;
 }
 
 export function dateTime() {
-    // Generates current YYYY_MM_DD_HH_MM_SS timestamp
-    return new Date().toLocaleString('sv').replace(' ', '_').replaceAll('-', '_').replaceAll(':', '_');
+  // Generates current YYYY_MM_DD_HH_MM_SS timestamp
+  return new Date()
+    .toLocaleString("sv")
+    .replace(" ", "_")
+    .replaceAll("-", "_")
+    .replaceAll(":", "_");
 }
 
 export function djb2(str) {
@@ -319,94 +398,136 @@ export function djb2(str) {
 }
 
 export function downloadBlob(blob, name) {
-    const link = document.createElement('a');
-    // const date = new Date().toLocaleString('sv').replace(' ', '_').replaceAll('-', '_').replaceAll(':', '_');
-    link.href = URL.createObjectURL(blob);
-    link.download = name;
-    // link.download = `${this.$STRINGS.APP_NAME}_${date}.json`;
-    link.click();
-    URL.revokeObjectURL(link.href);
+  const link = document.createElement("a");
+  // const date = new Date().toLocaleString('sv').replace(' ', '_').replaceAll('-', '_').replaceAll(':', '_');
+  link.href = URL.createObjectURL(blob);
+  link.download = name;
+  // link.download = `${this.$STRINGS.APP_NAME}_${date}.json`;
+  link.click();
+  URL.revokeObjectURL(link.href);
 }
 
 export function download(data, name) {
-    const json = JSON.stringify(data);
-    const blob = new Blob([json], { type: 'application/json' });
-    const link = document.createElement('a');
-    // const date = new Date().toLocaleString('sv').replace(' ', '_').replaceAll('-', '_').replaceAll(':', '_');
-    link.href = URL.createObjectURL(blob);
-    link.download = name;
-    // link.download = `${this.$STRINGS.APP_NAME}_${date}.json`;
-    link.click();
-    URL.revokeObjectURL(link.href);
+  const json = JSON.stringify(data);
+  const blob = new Blob([json], { type: "application/json" });
+  const link = document.createElement("a");
+  // const date = new Date().toLocaleString('sv').replace(' ', '_').replaceAll('-', '_').replaceAll(':', '_');
+  link.href = URL.createObjectURL(blob);
+  link.download = name;
+  // link.download = `${this.$STRINGS.APP_NAME}_${date}.json`;
+  link.click();
+  URL.revokeObjectURL(link.href);
 }
 
 export function parseResultsList(data) {
-    let hits = [];
-    for (let result of data) {
-        hits.push(parseResults(result));
-    }
-    return hits;
+  let hits = [];
+  for (let result of data) {
+    hits.push(parseResults(result));
+  }
+  return hits;
 }
 
 // Map 0-based indices in the alignment to corresponding 1-based indices in the structure
 export function makePositionMap(realStart, alnString) {
-    let map = Array(alnString.length);
-    for (let i = 0, gaps = 0; i < alnString.length; i++) {
-        if (alnString[i] === '-') {
-            map[i] = null;
-            gaps++;
-        } else {
-            map[i] = realStart + i - gaps;
-        }
+  let map = Array(alnString.length);
+  for (let i = 0, gaps = 0; i < alnString.length; i++) {
+    if (alnString[i] === "-") {
+      map[i] = null;
+      gaps++;
+    } else {
+      map[i] = realStart + i - gaps;
     }
-    return map
+  }
+  return map;
 }
 
 export const oneToThree = {
-    "A":"ALA", "R":"ARG", "N":"ASN", "D":"ASP",
-    "C":"CYS", "E":"GLU", "Q":"GLN", "G":"GLY",
-    "H":"HIS", "I":"ILE", "L":"LEU", "K":"LYS",
-    "M":"MET", "F":"PHE", "P":"PRO", "S":"SER",
-    "T":"THR", "W":"TRP", "Y":"TYR", "V":"VAL",
-    "U":"SEC", "O":"PHL", "X":"XAA"
-  };
+  A: "ALA",
+  R: "ARG",
+  N: "ASN",
+  D: "ASP",
+  C: "CYS",
+  E: "GLU",
+  Q: "GLN",
+  G: "GLY",
+  H: "HIS",
+  I: "ILE",
+  L: "LEU",
+  K: "LYS",
+  M: "MET",
+  F: "PHE",
+  P: "PRO",
+  S: "SER",
+  T: "THR",
+  W: "TRP",
+  Y: "TYR",
+  V: "VAL",
+  U: "SEC",
+  O: "PHL",
+  X: "XAA",
+};
 
 export const threeToOne = {
-    "ALA":"A", "ARG":"R", "ASN":"N", "ASP":"D",
-    "CYS":"C", "GLU":"E", "GLN":"Q", "GLY":"G",
-    "HIS":"H", "ILE":"I", "LEU":"L", "LYS":"K",
-    "MET":"M", "PHE":"F", "PRO":"P", "SER":"S",
-    "THR":"T", "TRP":"W", "TYR":"Y", "VAL":"V",
-    "SEC":"U", "PHL":"O", "XAA":"X"
+  ALA: "A",
+  ARG: "R",
+  ASN: "N",
+  ASP: "D",
+  CYS: "C",
+  GLU: "E",
+  GLN: "Q",
+  GLY: "G",
+  HIS: "H",
+  ILE: "I",
+  LEU: "L",
+  LYS: "K",
+  MET: "M",
+  PHE: "F",
+  PRO: "P",
+  SER: "S",
+  THR: "T",
+  TRP: "W",
+  TYR: "Y",
+  VAL: "V",
+  SEC: "U",
+  PHL: "O",
+  XAA: "X",
 };
 
 export function xyz(structure, resIndex) {
-    var rp = structure.getResidueProxy()
-    var ap = structure.getAtomProxy()
-    rp.index = resIndex
-    ap.index = rp.getAtomIndexByName('CA')
-    return [ap.x, ap.y, ap.z]
+  var rp = structure.getResidueProxy();
+  var ap = structure.getAtomProxy();
+  rp.index = resIndex;
+  ap.index = rp.getAtomIndexByName("CA");
+  return [ap.x, ap.y, ap.z];
 }
 
 function atomToPDBRow(ap) {
-    const { serial, atomname, resname, chainname, resno, inscode, x, y, z } = ap
-    return `ATOM  ${serial.toString().padStart(5)}${atomname.padStart(4)}  ${resname.padStart(3)} ${chainname.padStart(1)}${resno.toString().padStart(4)} ${inscode.padStart(1)}  ${x.toFixed(3).padStart(8)}${y.toFixed(3).padStart(8)}${z.toFixed(3).padStart(8)}`
+  const { serial, atomname, resname, chainname, resno, inscode, x, y, z } = ap;
+  return `ATOM  ${serial.toString().padStart(5)}${atomname.padStart(
+    4
+  )}  ${resname.padStart(3)} ${chainname.padStart(1)}${resno
+    .toString()
+    .padStart(4)} ${inscode.padStart(1)}  ${x.toFixed(3).padStart(8)}${y
+    .toFixed(3)
+    .padStart(8)}${z.toFixed(3).padStart(8)}`;
 }
 
 export function makeChainMap(structure, sele) {
-    let map = new Map()
-    let idx = 1;
-    structure.eachResidue(rp => {
-        map.set(idx++, { index: rp.index, resno: rp.resno });
-    }, new Selection(sele));
-    return map
+  let map = new Map();
+  let idx = 1;
+  structure.eachResidue((rp) => {
+    map.set(idx++, { index: rp.index, resno: rp.resno });
+  }, new Selection(sele));
+  return map;
 }
 
 export function makeSubPDB(structure, sele) {
-    let pdb = [];
-    structure.eachAtom(ap => { pdb.push(atomToPDBRow(ap)) }, new Selection(sele));
-    return pdb.join('\n')
-} 
+  let pdb = [];
+  structure.eachAtom((ap) => {
+    pdb.push(atomToPDBRow(ap));
+  }, new Selection(sele));
+  return pdb.join("\n");
+}
 
 /**
  * Create a mock PDB from Ca data
@@ -414,26 +535,56 @@ export function makeSubPDB(structure, sele) {
  * Will have to change if/when swapping to fuller data
  */
 export function mockPDB(ca, seq, chain) {
-    const atoms = ca.split(',')
-    const pdb = new Array()
-    let j = 1
-    for (let i = 0; i < atoms.length; i += 3, j++) {
-        let [x, y, z] = atoms.slice(i, i + 3).map(element => parseFloat(element))
-        // if (x == 0 && y == 0 && z == 0) continue;
-        pdb.push(
-            'ATOM  '
-            + j.toString().padStart(5)
-            + '  CA  ' + oneToThree[seq != "" && (atoms.length/3) == seq.length ? seq[i/3] : 'A']
-            + chain.toString().padStart(2)
-            + j.toString().padStart(4)
-            + '    '
-            + x.toFixed(3).padStart(8)
-            + y.toFixed(3).padStart(8)
-            + z.toFixed(3).padStart(8)
-            + '  1.00  0.00           C  '
-        )
+  const atoms = ca.split(",");
+  const pdb = new Array();
+  let j = 1;
+  for (let i = 0; i < atoms.length; i += 3, j++) {
+    let [x, y, z] = atoms.slice(i, i + 3).map((element) => parseFloat(element));
+    // if (x == 0 && y == 0 && z == 0) continue;
+    pdb.push(
+      "ATOM  " +
+        j.toString().padStart(5) +
+        "  CA  " +
+        oneToThree[
+          seq != "" && atoms.length / 3 == seq.length ? seq[i / 3] : "A"
+        ] +
+        chain.toString().padStart(2) +
+        j.toString().padStart(4) +
+        "    " +
+        x.toFixed(3).padStart(8) +
+        y.toFixed(3).padStart(8) +
+        z.toFixed(3).padStart(8) +
+        "  1.00  0.00           C  "
+    );
+  }
+  return pdb.join("\n");
+}
+
+export function mergePdbs(chainPdbs /* [{pdb, chain}] */) {
+  let serial = 1;
+  const out = [];
+
+  for (const { pdb, chain } of chainPdbs) {
+    const lines = pdb.split(/\r?\n/);
+    for (const line of lines) {
+      if (/^(ATOM  |HETATM)/.test(line)) {
+        // reassign atom serial no.
+        let s = serial.toString().padStart(5, " ");
+        let l = line.padEnd(80, " "); // 고정폭 보장
+        l = l.slice(0, 6) + s + l.slice(11);
+
+        // change chain_id
+        l = l.substring(0, 21) + (chain[0] || "A") + l.substring(22);
+
+        out.push(l);
+        serial++;
+      }
     }
-    return pdb.join('\n')
+    out.push("TER"); // 체인 경계
+  }
+
+  out.push("END");
+  return out.join("\n");
 }
 
 /* ------ The rotation matrix to rotate Chain_1 to Chain_2 ------ */
@@ -449,22 +600,22 @@ export function mockPDB(ca, seq, chain) {
 /*    Z[i] = t[2] + u[2][0]*x[i] + u[2][1]*y[i] + u[2][2]*z[i]; */
 /* } */
 export function transformStructure(structure, t, u) {
-    structure.eachAtom(atom => {
-        const [x, y, z] = [atom.x, atom.y, atom.z];
-        atom.x = t[0] + u[0][0] * x + u[0][1] * y + u[0][2] * z;
-        atom.y = t[1] + u[1][0] * x + u[1][1] * y + u[1][2] * z;
-        atom.z = t[2] + u[2][0] * x + u[2][1] * y + u[2][2] * z;
-    })
+  structure.eachAtom((atom) => {
+    const [x, y, z] = [atom.x, atom.y, atom.z];
+    atom.x = t[0] + u[0][0] * x + u[0][1] * y + u[0][2] * z;
+    atom.y = t[1] + u[1][0] * x + u[1][1] * y + u[1][2] * z;
+    atom.z = t[2] + u[2][0] * x + u[2][1] * y + u[2][2] * z;
+  });
 }
 
 export function debounce(func, delay) {
   let timeoutId;
-  return function() {
+  return function () {
     const context = this;
-    const args = arguments;      
+    const args = arguments;
     clearTimeout(timeoutId);
-    timeoutId = setTimeout(function() {
-        func.apply(context, args);
+    timeoutId = setTimeout(function () {
+      func.apply(context, args);
     }, delay);
   };
 }
@@ -472,134 +623,170 @@ export function debounce(func, delay) {
 // Generate THREE.Matrix4 from 3x3 rotation and 1x3 translation matrices
 // Can give this directly to StructureComponent.setTransform() to superpose
 export function makeMatrix4(translation, rotation) {
-    const u = rotation.slice();
-    for (let i = 0; i < 3; i++) {
-        u[i].push(translation[i]);
-    }
-    const nglMatrix = new Matrix4();
-    const flatMatrix = [].concat(...u, [0, 0, 0, 1]);
-    nglMatrix.set(...flatMatrix);
-    return nglMatrix;
+  const u = rotation.slice();
+  for (let i = 0; i < 3; i++) {
+    u[i].push(translation[i]);
+  }
+  const nglMatrix = new Matrix4();
+  const flatMatrix = [].concat(...u, [0, 0, 0, 1]);
+  nglMatrix.set(...flatMatrix);
+  return nglMatrix;
 }
 
 // Decompose Matrix4 into Quaternion, Position and Scale
 // Slerp between Quaternions, linear interpolate position for some t (0.0-1.0)
 // Compose new Matrix4 for transformation.
 export function interpolateMatrices(a, b, t) {
-    const quaternionA = new Quaternion();
-    const positionA   = new Vector3();
-    const scaleA      = new Vector3();
-    const quaternionB = new Quaternion();
-    const positionB   = new Vector3();
-    const scaleB      = new Vector3();
-    a.decompose(positionA, quaternionA, scaleA);
-    b.decompose(positionB, quaternionB, scaleB);
-    const quaternion = new Quaternion();
-    quaternion.slerp(quaternionB, t);
-    const position = new Vector3();
-    position.lerpVectors(positionA, positionB, t);
-    const matrix = new Matrix4();
-    matrix.compose(position, quaternion, scaleA);
-    return matrix;
+  const quaternionA = new Quaternion();
+  const positionA = new Vector3();
+  const scaleA = new Vector3();
+  const quaternionB = new Quaternion();
+  const positionB = new Vector3();
+  const scaleB = new Vector3();
+  a.decompose(positionA, quaternionA, scaleA);
+  b.decompose(positionB, quaternionB, scaleB);
+  const quaternion = new Quaternion();
+  quaternion.slerp(quaternionB, t);
+  const position = new Vector3();
+  position.lerpVectors(positionA, positionB, t);
+  const matrix = new Matrix4();
+  matrix.compose(position, quaternion, scaleA);
+  return matrix;
 }
 
 export function animateMatrix(structure, newMatrix, duration) {
-    let startTime = null;
-    const oldMatrix = structure.matrix;
-    const animate = (currentTime) => {
-        if (!startTime) {
-            startTime = currentTime;
-        }
-        let progress = Math.min(1, (currentTime - startTime) / duration);
-        let interpolated = interpolateMatrices(oldMatrix, newMatrix, progress);
-        structure.setTransform(interpolated);
-        if (progress < 1) {
-            window.requestAnimationFrame(animate);
-        }
+  let startTime = null;
+  const oldMatrix = structure.matrix;
+  const animate = (currentTime) => {
+    if (!startTime) {
+      startTime = currentTime;
+    }
+    let progress = Math.min(1, (currentTime - startTime) / duration);
+    let interpolated = interpolateMatrices(oldMatrix, newMatrix, progress);
+    structure.setTransform(interpolated);
+    if (progress < 1) {
+      window.requestAnimationFrame(animate);
     }
-    window.requestAnimationFrame(animate);
+  };
+  window.requestAnimationFrame(animate);
 }
 
 export function checkMultimer(pdbString) {
-    const lines = pdbString.split('\n');
-    const models = {};
-    const chainSet = new Set();
-
-    const trimmed = pdbString.trimStart();
-    const isCIF = trimmed[0] === "#" || trimmed.startsWith("data_");
-
-    if (!isCIF) {
-        let currentModel = null;
-
-        lines.forEach(line => {
-            const recordType = line.substring(0, 6).trim();
-
-            if (recordType === 'MODEL') {
-                currentModel = line.substring(10, 14).trim();
-                models[currentModel] = new Set();
-            } else if (recordType === 'ATOM') {
-                const chainId = line.substring(21, 22);
-                if (currentModel) {
-                    models[currentModel].add(chainId);
-                } else {
-                    chainSet.add(chainId);
-                }
-            } else if (recordType === 'ENDMDL') {
-                currentModel = null;
-            }
-        });
-    } else {
-        let inLoop = false;
-        let modelIndex = -1;
-        let chainIndex = -1;
-        let atomIndex = -1;
-        let columnCount = 0;
-
-        lines.forEach(line => {
-            if (line.startsWith("loop_")) {
-                inLoop = true;
-                columnCount = 0;
-            } else if (inLoop && line.startsWith("_atom_site.")) {
-                const colName = line.trim();
-                if (colName === "_atom_site.pdbx_PDB_model_num") {
-                    modelIndex = columnCount;
-                } else if (colName === "_atom_site.auth_asym_id") {
-                    chainIndex = columnCount;
-                } else if (colName === "_atom_site.group_PDB") {
-                    atomIndex = columnCount;
-                }
-                columnCount++;
-            } else if (inLoop && line.startsWith("#")) {
-                inLoop = false;
-            } else if (inLoop && line.trim()) {
-                const dataColumns = line.trim().split(/\s+/);
-                const groupPDB = atomIndex !== -1 ? dataColumns[atomIndex] : null;
-                if (groupPDB !== "ATOM") {
-                    return;
-                }
-                
-                const modelNum = modelIndex !== -1 ? dataColumns[modelIndex] : null;
-                const chainId = chainIndex !== -1 ? dataColumns[chainIndex] : null;
-
-                if (modelNum) {
-                    if (!models[modelNum]) {
-                        models[modelNum] = new Set();
-                    }
-                    models[modelNum].add(chainId);
-                } else {
-                    chainSet.add(chainId);
-                }
-            }
-        });
-    }
+  const lines = pdbString.split("\n");
+  const models = {};
+  const chainSet = new Set();
+
+  const trimmed = pdbString.trimStart();
+  const isCIF = trimmed[0] === "#" || trimmed.startsWith("data_");
+
+  if (!isCIF) {
+    let currentModel = null;
+
+    lines.forEach((line) => {
+      const recordType = line.substring(0, 6).trim();
+
+      if (recordType === "MODEL") {
+        currentModel = line.substring(10, 14).trim();
+        models[currentModel] = new Set();
+      } else if (recordType === "ATOM") {
+        const chainId = line.substring(21, 22);
+        if (currentModel) {
+          models[currentModel].add(chainId);
+        } else {
+          chainSet.add(chainId);
+        }
+      } else if (recordType === "ENDMDL") {
+        currentModel = null;
+      }
+    });
+  } else {
+    let inLoop = false;
+    let modelIndex = -1;
+    let chainIndex = -1;
+    let atomIndex = -1;
+    let columnCount = 0;
+
+    lines.forEach((line) => {
+      if (line.startsWith("loop_")) {
+        inLoop = true;
+        columnCount = 0;
+      } else if (inLoop && line.startsWith("_atom_site.")) {
+        const colName = line.trim();
+        if (colName === "_atom_site.pdbx_PDB_model_num") {
+          modelIndex = columnCount;
+        } else if (colName === "_atom_site.auth_asym_id") {
+          chainIndex = columnCount;
+        } else if (colName === "_atom_site.group_PDB") {
+          atomIndex = columnCount;
+        }
+        columnCount++;
+      } else if (inLoop && line.startsWith("#")) {
+        inLoop = false;
+      } else if (inLoop && line.trim()) {
+        const dataColumns = line.trim().split(/\s+/);
+        const groupPDB = atomIndex !== -1 ? dataColumns[atomIndex] : null;
+        if (groupPDB !== "ATOM") {
+          return;
+        }
 
-    if (Object.keys(models).length === 0) {
-        models['single model'] = chainSet;
-    }
-    return Object.values(models).some(model => model.size > 1);
+        const modelNum = modelIndex !== -1 ? dataColumns[modelIndex] : null;
+        const chainId = chainIndex !== -1 ? dataColumns[chainIndex] : null;
+
+        if (modelNum) {
+          if (!models[modelNum]) {
+            models[modelNum] = new Set();
+          }
+          models[modelNum].add(chainId);
+        } else {
+          chainSet.add(chainId);
+        }
+      }
+    });
+  }
+
+  if (Object.keys(models).length === 0) {
+    models["single model"] = chainSet;
+  }
+  return Object.values(models).some((model) => model.size > 1);
 }
 
 export function getPdbText(comp) {
-    let pw = new PdbWriter(comp.structure, { renumberSerial: false });
-    return pw.getData().split('\n').filter(line => line.startsWith('ATOM')).join('\n');
-}
\ No newline at end of file
+  let pw = new PdbWriter(comp.structure, { renumberSerial: false });
+  return pw
+    .getData()
+    .split("\n")
+    .filter((line) => line.startsWith("ATOM"))
+    .join("\n");
+}
+
+export const humanReadibleFormat = (bytes) => {
+  const u = ["B", "KB", "MB", "GB"];
+  let i = 0;
+  while (bytes >= 1024 && i < u.length - 1) {
+    bytes /= 1024;
+    i++;
+  }
+  return `${bytes.toFixed(2)} ${u[i]}`;
+};
+
+export const calculateStrSize = (v) => {
+  if (!v) return -1;
+
+  if (typeof v == "string") {
+    return v.length * 2;
+  } else if (v instanceof Array) {
+    let byte = 0;
+
+    for (let s of v) {
+      if (typeof s == "string") {
+        byte += s.length * 2;
+      } else if (s instanceof Object && !s.text && typeof s.text == "string") {
+        byte += s.text.length * 2;
+      }
+    }
+
+    return byte;
+  } else {
+    return -1;
+  }
+};
diff --git a/frontend/lib/HistoryMixin.js b/frontend/lib/HistoryMixin.js
index 85e4ba9..78397b8 100644
--- a/frontend/lib/HistoryMixin.js
+++ b/frontend/lib/HistoryMixin.js
@@ -1,75 +1,75 @@
 const fakeLocalStorage = (() => {
-    let store = {};
-    return {
-        getItem(key) {
-            return store[key] || null;
-        },
-        setItem(key, value) {
-            store[key] = value.toString();
-        },
-        removeItem(key) {
-            delete store[key];
-        },
-        clear() {
-            store = {};
-        }
-    };
+  let store = {};
+  return {
+    getItem(key) {
+      return store[key] || null;
+    },
+    setItem(key, value) {
+      store[key] = value.toString();
+    },
+    removeItem(key) {
+      delete store[key];
+    },
+    clear() {
+      store = {};
+    },
+  };
 })();
 
 let localStorageEnabled = false;
 try {
-    if (typeof window.localStorage !== 'undefined') {
-        localStorageEnabled = true;
-    }
+  if (typeof window.localStorage !== "undefined") {
+    localStorageEnabled = true;
+  }
 } catch (e) {
-    localStorageEnabled = false;
+  localStorageEnabled = false;
 }
 
 const storage = localStorageEnabled ? window.localStorage : fakeLocalStorage;
 
 const StorageWrapper = (prefix) => {
-    return {
-        getItem(key) {
-            return storage.getItem(`${prefix}.${key}`);
-        },
-        setItem(key, value) {
-            storage.setItem(`${prefix}.${key}`, value);
-        },
-        removeItem(key) {
-            storage.removeItem(`${prefix}.${key}`);
-        },
-        baseStorage: storage,
-        clear() {
-            let keys = Object.keys(storage);
-            for (let key of keys) {
-                if (key.startsWith(prefix)) {
-                    storage.removeItem(key);
-                }
-            }
+  return {
+    getItem(key) {
+      return storage.getItem(`${prefix}.${key}`);
+    },
+    setItem(key, value) {
+      storage.setItem(`${prefix}.${key}`, value);
+    },
+    removeItem(key) {
+      storage.removeItem(`${prefix}.${key}`);
+    },
+    baseStorage: storage,
+    clear() {
+      let keys = Object.keys(storage);
+      for (let key of keys) {
+        if (key.startsWith(prefix)) {
+          storage.removeItem(key);
         }
-    }
+      }
+    },
+  };
 };
 
 // Mixin for history-related methods
 const HistoryMixin = {
-    methods: {
-        addToHistory(uuid) {
-            if (!uuid) {
-                return;
-            }
+  methods: {
+    addToHistory(uuid) {
+      if (!uuid) {
+        return;
+      }
 
-            let history = JSON.parse(storage.getItem('history') || '[]');
+      let history = JSON.parse(storage.getItem("history") || "[]");
 
-            let foundIndex = history.findIndex(item => item.id === uuid);
-            if (foundIndex === -1) {
-                history.unshift({ time: +new Date(), id: uuid });
-            } else {
-                history[foundIndex].time = +new Date();
-            }
+      let foundIndex = history.findIndex((item) => item.id === uuid);
+      if (foundIndex === -1) {
+        history.unshift({ time: +new Date(), id: uuid });
+      } else {
+        history[foundIndex].time = +new Date();
+      }
 
-            storage.setItem('history', JSON.stringify(history));
-        }
-    }
+      storage.setItem("history", JSON.stringify(history));
+    },
+  },
 };
 
 export { localStorageEnabled, storage, StorageWrapper, HistoryMixin };