diff --git a/frontend/AllAtomPredictMixin.vue b/frontend/AllAtomPredictMixin.vue
new file mode 100644
index 0000000..b58dfb7
--- /dev/null
+++ b/frontend/AllAtomPredictMixin.vue
@@ -0,0 +1,61 @@
+<script>
+import axios from 'axios'
+
+export default {
+    name : 'AllAtomPredictMixin',
+    data() {
+        return {
+            predictApi: axios.create({
+                baseURL: 'https://3di.foldseek.com/cg2all/predict',
+                responseType: 'text',
+                transformResponse: [(data) => data],
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                    'Accept': 'text/plain',
+                }
+            })
+        }
+    },
+    methods: {
+        async predictGivenPdb(pdbstr, signal=undefined) {
+            const formData = new FormData()
+            const blob = new Blob([pdbstr], {type: 'text/plain'})
+            formData.append('file', blob, 'tmp.pdb')
+
+            try {
+                const response = await this.predictApi.post('', formData, {
+                    signal: signal ? signal : undefined,
+                    responseType: 'text'
+                })
+                return this.prependRemark(response.data)
+            } catch (e) {
+                if (e.response) {
+                    console.error('Server error: ', e.response.status, e.response.data);
+                } else if (e.request) {
+                    console.error('No response: ', e.request);
+                } else if (axios.isCancel(e)) {
+                    console.error('Aborted');
+                } else {
+                    console.error('Config error: ', e.message);
+                }
+                throw e
+            }
+        },
+        prependRemark(pdbstr) {
+            let is_cif = false
+            if (pdbstr[0] == '#' || pdbstr.startsWith('data_')) {
+                is_cif = true
+            }
+            
+            let prefix = is_cif ? '# ' : 'REMARK  90 '
+            let firstline = prefix + 'This model is rebuilt with cg2all(https://github.com/huhlim/cg2all)'
+            if (!is_cif && firstline.length > 79) {
+                firstline = firstline.slice(76) + '... '
+            }
+
+            firstline = firstline.padEnd(80, ' ') + '\n'
+            return firstline + pdbstr
+        },
+    }
+}
+</script>
\ No newline at end of file
diff --git a/frontend/FoldMasonSearch.vue b/frontend/FoldMasonSearch.vue
index 77ca401..481fe9d 100644
--- a/frontend/FoldMasonSearch.vue
+++ b/frontend/FoldMasonSearch.vue
@@ -22,6 +22,17 @@
             </template>
             <template slot="content">
                 <div class="upload-outer-container w-44 gr-2 mb-2">
+                    <v-alert
+                        v-model="alert"
+                        border="left"
+                        close-text="Close Alert"
+                        color="primary"
+                        text
+                        type="info"
+                        dismissible
+                    >
+                    <strong>{{ skippedEntries }} duplicated entries</strong> have been skipped
+                    </v-alert>
                     <DragUploadBox
                             class="drag-upload-box"
                             @uploadedFiles="upload"
@@ -38,7 +49,7 @@
                             @click:close="removeQuery(index)"
                         >
                             {{ q.name }}
-                        </v-chip>                           
+                        </v-chip>
                     </div>
                 </div>
 
@@ -131,6 +142,9 @@ import { HistoryMixin } from './lib/HistoryMixin.js';
 import Databases from './Databases.vue';
 import QueryTextarea from "./QueryTextarea.vue";
 import DragUploadBox from "./DragUploadBox.vue";
+import { BlobDatabase } from "./lib/BlobDatabase.js";
+
+const db = BlobDatabase();
 
 export default {
     name: "FoldMasonSearch",
@@ -155,13 +169,16 @@ export default {
             queries: [],   // [ { name: "file", text: "ATOM..." }, { name: "file", text: "ATOM..." } ...]
             inFileDrag: false,
             accessionLoading: false,
+            alert: false,
+            skippedEntries: 0,
         };
     },
     async mounted() {
         if (this.preloadAccessions.length > 0) {
             this.queries = [];
-            return;
         }
+        this.retrieveAndClean()
+        return;
     },
     computed: {
         alignDisabled() {
@@ -253,7 +270,7 @@ export default {
         async removeQuery(index) {
             this.queries.splice(index, 1);
         },
-        async addFiles(newFiles) {
+        addFiles(newFiles) {
             for (const newFile of newFiles) {
                 if (!this.fileNameSet.has(newFile.name)) {
                     this.queries.push(newFile);
@@ -297,6 +314,89 @@ export default {
             );
             fr.readAsText(file)
         },
+        resetParams() {
+            this.params = structuredClone(defaultParams);
+        },
+        async retrieveAndClean() {
+            const clean = async (size) => {
+                // return
+                await db.removeItem('msa.query.size')
+                await db.removeItem('msa.query.names')
+                for (let i = 0; i < size; i++) {
+                    await db.removeItem(`msa.query.chunk:${i}`)
+                }
+            }
+            
+            // await clean(2)
+            // return
+
+            const SEP = '\0'
+
+            let size = await db.getItem('msa.query.size')
+            if (!size || size.length == 0) { 
+                await clean()
+                return 
+            }
+
+            size = parseInt(size)
+            
+            const texts = []
+            let names = await db.getItem('msa.query.names')
+            if (!names || names.length == 0) {
+                console.warn("MSA query name has not been passed")
+                await clean(size)
+                return
+            }
+            names = names.split(SEP)
+
+            for (let i = 0; i < size; i++) {
+                const entry = await db.getItem(`msa.query.chunk:${i}`)
+                if (!entry || entry.length == 0) {
+                    console.warn(`MSA query chunk ${i} is missing`)
+                    await clean(size)
+                    return
+                }
+                
+                texts.push(...( ( await entry.text() ).split(SEP) ))
+            }
+
+            if (names.length != texts.length) {
+                console.warn("MSA query entries and names size differs")
+                console.log(`names length: ${names.length}`)
+                console.log(`texts length: ${texts.length}`)
+                console.log(texts)
+                await clean(size)
+                return
+            }
+
+            const files = []
+
+            for (let i = 0; i < texts.length; i++) {
+                files.push({text: texts[i], name: names[i]})
+            }
+
+            // Calculate overlapping entries
+            files.sort((a, b) => {return a.name.localeCompare(b.name)})
+            let dupCount = 0
+            let prev = ""
+            
+            for (let f of files) {
+                if (f.name == prev) {
+                    dupCount++
+                } else {
+                    prev = f.name
+                }
+            }
+
+            if (dupCount > 0) {
+                this.alert = true
+                this.skippedEntries = dupCount
+            }
+
+            this.addFiles(files)
+
+            await clean(size)
+        }
     }
 };
 </script>
diff --git a/frontend/History.vue b/frontend/History.vue
index c495900..ea72177 100644
--- a/frontend/History.vue
+++ b/frontend/History.vue
@@ -5,9 +5,9 @@
                 <v-list-item-title>
                     History
                 </v-list-item-title>
-                <v-list-item-subtitle v-if="drawer" class="ml-n1" @click.prevent>
-                    <button :style="{'opacity' : page == 0 ? 0.6 : 1}" @click.prevent="previous();"><v-icon style="transform:inherit">{{ $MDI.ChevronLeft }}</v-icon></button>
-                    <button :style="{'opacity' : (page + 1) * limit >= items.length ? 0.6 : 1}"  @click.prevent="next();"><v-icon style="transform:inherit">{{ $MDI.ChevronRight }}</v-icon></button>
+                <v-list-item-subtitle v-if="drawer" class="ml-n1" @click.stop>
+                    <button :style="{'opacity' : page == 0 ? 0.6 : 1}" @click.stop="previous();"><v-icon style="transform:inherit">{{ $MDI.ChevronLeft }}</v-icon></button>
+                    <button :style="{'opacity' : (page + 1) * limit >= items.length ? 0.6 : 1}"  @click.stop="next();"><v-icon style="transform:inherit">{{ $MDI.ChevronRight }}</v-icon></button>
                 </v-list-item-subtitle>
             </v-list-item-content>
         </template>
diff --git a/frontend/MDI.js b/frontend/MDI.js
index 95cc866..ab93330 100644
--- a/frontend/MDI.js
+++ b/frontend/MDI.js
@@ -1,96 +1,108 @@
 import {
-    mdiAlertCircleOutline          as AlertCircleOutline,
-    mdiArrowRightCircle            as ArrowRightCircle,
-    mdiArrowRightCircleOutline     as ArrowRightCircleOutline,
-    mdiAxisZRotateCounterclockwise as AxisZRotateCounterclockwise,
-    mdiChevronLeft                 as ChevronLeft,
-    mdiChevronRight                as ChevronRight,
-    mdiCircle                      as Circle,
-    mdiCircleHalf                  as CircleHalf,
-    mdiClockOutline                as ClockOutline,
-    mdiCloudDownloadOutline        as CloudDownloadOutline,
-    mdiDelete                      as Delete,
-    mdiDns                         as Dns,
-    mdiFile                        as File,
-    mdiFileUpload                  as FileUpload,
-    mdiFileDownloadOutline         as FileDownloadOutline,
-    mdiFormatListBulleted          as FormatListBulleted,
-    mdiFullscreen                  as Fullscreen,
-    mdiHelpCircleOutline           as HelpCircleOutline,
-    mdiHistory                     as History,
-    mdiLabel                       as Label,
-    mdiLabelOutline                as LabelOutline,
-    mdiMagnify                     as Magnify,
-    mdiMinusBox                    as MinusBox,
-    mdiNotificationClearAll        as NotificationClearAll,
-    mdiPlusBox                     as PlusBox,
-    mdiProgressWrench              as ProgressWrench,
-    mdiReorderHorizontal           as ReorderHorizontal,
-    mdiRestore                     as Restore,
-    mdiTableLarge                  as TableLarge,
-    mdiTune                        as Tune,
-    mdiLayersSearchOutline         as LayersSearchOutline,
-    mdiCloseCircle                 as CloseCircle,
-    mdiCloseCircleOutline          as CloseCircleOutline,
-    mdiWall                        as Wall,
-    mdiTextBoxOutline              as TextBoxOutline,
-    mdiPencil                      as Pencil,
-} from '@mdi/js';
+  mdiAlertCircleOutline as AlertCircleOutline,
+  mdiArrowRightCircle as ArrowRightCircle,
+  mdiArrowRightCircleOutline as ArrowRightCircleOutline,
+  mdiAxisZRotateCounterclockwise as AxisZRotateCounterclockwise,
+  mdiChevronLeft as ChevronLeft,
+  mdiChevronRight as ChevronRight,
+  mdiChevronUp as ChevronUp,
+  mdiChevronDown as ChevronDown,
+  mdiCircle as Circle,
+  mdiCircleHalf as CircleHalf,
+  mdiClockOutline as ClockOutline,
+  mdiCloudDownloadOutline as CloudDownloadOutline,
+  mdiDelete as Delete,
+  mdiDns as Dns,
+  mdiFile as File,
+  mdiFileUpload as FileUpload,
+  mdiFileDownloadOutline as FileDownloadOutline,
+  mdiFormatListBulleted as FormatListBulleted,
+  mdiFullscreen as Fullscreen,
+  mdiHelpCircleOutline as HelpCircleOutline,
+  mdiHistory as History,
+  mdiLabel as Label,
+  mdiLabelOutline as LabelOutline,
+  mdiMagnify as Magnify,
+  mdiMinusBox as MinusBox,
+  mdiNotificationClearAll as NotificationClearAll,
+  mdiPlusBox as PlusBox,
+  mdiProgressWrench as ProgressWrench,
+  mdiReorderHorizontal as ReorderHorizontal,
+  mdiRestore as Restore,
+  mdiTableLarge as TableLarge,
+  mdiTune as Tune,
+  mdiLayersSearchOutline as LayersSearchOutline,
+  mdiCloseCircle as CloseCircle,
+  mdiCloseCircleOutline as CloseCircleOutline,
+  mdiWall as Wall,
+  mdiTextBoxOutline as TextBoxOutline,
+  mdiPencil as Pencil,
+  mdiChevronDoubleUp as DoubleChevronUp,
+} from "@mdi/js";
 
-const ApplicationBracesOutline = `M21 2H3C1.9 2 1 2.9 1 4V20C1 21.1 1.9 22 3 22H21C22.1 22 23 21.1 23 20V4C23 2.9 22.1 2 21 2M21 20H3V6H21V20M9 8C7.9 8 7 8.9 7 10C7 11.1 6.1 12 5 12V14C6.1 14 7 14.9 7 16C7 17.1 7.9 18 9 18H11V16H9V15C9 13.9 8.1 13 7 13C8.1 13 9 12.1 9 11V10H11V8M15 8C16.1 8 17 8.9 17 10C17 11.1 17.9 12 19 12V14C17.9 14 17 14.9 17 16C17 17.1 16.1 18 15 18H13V16H15V15C15 13.9 15.9 13 17 13C15.9 13 15 12.1 15 11V10H13V8H15Z`
+const ApplicationBracesOutline = `M21 2H3C1.9 2 1 2.9 1 4V20C1 21.1 1.9 22 3 22H21C22.1 22 23 21.1 23 20V4C23 2.9 22.1 2 21 2M21 20H3V6H21V20M9 8C7.9 8 7 8.9 7 10C7 11.1 6.1 12 5 12V14C6.1 14 7 14.9 7 16C7 17.1 7.9 18 9 18H11V16H9V15C9 13.9 8.1 13 7 13C8.1 13 9 12.1 9 11V10H11V8M15 8C16.1 8 17 8.9 17 10C17 11.1 17.9 12 19 12V14C17.9 14 17 14.9 17 16C17 17.1 16.1 18 15 18H13V16H15V15C15 13.9 15.9 13 17 13C15.9 13 15 12.1 15 11V10H13V8H15Z`;
 const CircleOneThird = "M12 12 V2 A10 10 0 0 0 3.858 17.806 Z";
 const CircleTwoThird = "M12 12 V2 A10 10 0 1 0 20.142 17.806 Z";
-const SavePDB = "M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h14Zm0 8v-.8c0-.7-.6-1.2-1.3-1.2h-2.4v6h2.4c.7 0 1.2-.5 1.2-1.2v-1c0-.4-.4-.8-.9-.8.5 0 1-.4 1-1Zm-9.7.5v-1c0-.8-.7-1.5-1.5-1.5H5.3v6h1.5v-2h1c.8 0 1.5-.7 1.5-1.5Zm5 2v-3c0-.8-.7-1.5-1.5-1.5h-2.5v6h2.5c.8 0 1.5-.7 1.5-1.5Zm3.4.3h-1.2v-1.2h1.2v1.2Zm-5.9-3.3v3h1v-3h-1Zm-5 0v1h1v-1h-1Zm11 .9h-1.3v-1.2h1.2v1.2Z";
-const SavePNG = "M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3M9 11.5C9 12.3 8.3 13 7.5 13H6.5V15H5V9H7.5C8.3 9 9 9.7 9 10.5V11.5M14 15H12.5L11.5 12.5V15H10V9H11.5L12.5 11.5V9H14V15M19 10.5H16.5V13.5H17.5V12H19V13.7C19 14.4 18.5 15 17.7 15H16.4C15.6 15 15.1 14.3 15.1 13.7V10.4C15 9.7 15.5 9 16.3 9H17.6C18.4 9 18.9 9.7 18.9 10.3V10.5H19M6.5 10.5H7.5V11.5H6.5V10.5Z";
-const API = "M 22.23 1.96 c -0.98 0 -1.77 0.8 -1.77 1.77 c 0 0.21 0.05 0.4 0.12 0.6 l -8.31 14.23 c -0.8 0.17 -1.42 0.85 -1.42 1.7 a 1.77 1.77 0 0 0 3.54 0 c 0 -0.2 -0.05 -0.37 -0.1 -0.55 l 8.34 -14.29 a 1.75 1.75 0 0 0 1.37 -1.69 c 0 -0.97 -0.8 -1.77 -1.77 -1.77 M 14.98 1.96 c -0.98 0 -1.77 0.8 -1.77 1.77 c 0 0.21 0.05 0.4 0.12 0.6 l -8.3 14.24 c -0.81 0.16 -1.43 0.84 -1.43 1.7 a 1.77 1.77 0 0 0 3.55 0 c 0 -0.2 -0.06 -0.38 -0.12 -0.56 L 15.4 5.42 a 1.75 1.75 0 0 0 1.37 -1.69 c 0 -0.97 -0.8 -1.77 -1.78 -1.77 M 1.75 6 a 1.75 1.75 0 1 0 0 3.5 a 1.75 1.75 0 0 0 0 -3.5 z m 0 6 a 1.75 1.75 0 1 0 0 3.5 a 1.75 1.75 0 0 0 0 -3.5 z"
-const Monomer = "m13.9 4.4.8.5a7.7 7.7 90 0 0 1.3.6 2.3 2.3 90 0 1 .5.2l.5.2.4.2.1.2a.4.4 90 0 1-.1.3A6.2 6.2 90 0 1 16 7a11.3 11.3 0 0 0-1.2.6l-.5-.2-1.1-.6a2 2 0 0 1-.5-.6 1.8 1.8 90 0 1-.2-1V3A5.3 5.3 90 0 0 14 4.4Zm-1.6-2c-.4-.8-1-1.3-1.6-1.3-1-.1-1.7.3-2.2 1.2a4.2 4.2 90 0 0-.3 1.3H10v12.9h2l-3.4 3.4.1 1.6c0 .4-.1.5-.4.5-.2 0 1.2-1-.4-.4L7.6 20l-3.3-3.4h1.9V3.6h1.1a7.4 7.4 90 0 1 .5-1.7C8.3.7 9.3.1 10.8.2a2.2 2.2 90 0 1 1.2.6A4.3 4.3 90 0 1 13 2v.3c0 .2 0 .4-.3.4-.2 0-.3 0-.4-.2Zm4.3 20.8a3 3 0 0 1-2.6-.5c-.8-.5-1.2-1.4-1.2-2.7 0-.3.1-.4.4-.4.3 0 .4.1.4.4 0 1 .3 1.7.8 2a2.5 2.5 90 0 0 2 .3h.1c.3 0 .5.2.5.5 0 .2-.1.3-.4.4Zm1.4-8v1a2.1 2.1 90 0 1-.3.5 2.6 2.6 90 0 1-.8.5l-.7.3-.6.3c-1.3.4-2 .7-2 .8a2.5 2.5 90 0 0-.8.5l-.2.3a3.3 3.3 90 0 1-.1-.8 5 5 90 0 1 0-1.3 2.4 2.4 90 0 1 .4-.8 3.6 3.6 90 0 1 .6-.4 38.4 38.4 0 0 1 4-1.9l.2-.3a2.6 2.6 90 0 1 .2.3 3.2 3.2 90 0 1 0 1Zm-5.2-1.8V13l.2-.4.7-.5 1-.3a7.7 7.7 90 0 0 1.3.6l.5.2.5.2.4.2.1.2-.1.2a2.4 2.4 90 0 1-.8.4 3 3 90 0 0-.5.2 1.9 1.9 90 0 1-.6.2l-.7.4-.5-.3a4.6 4.6 90 0 1-1.1-.5l-.2-.3-.2-.2ZM18 8.2a5.8 5.8 90 0 1 0 1 1.2 1.2 90 0 1-.3.5l-.5.3a189.3 189.3 90 0 0-3.6 1.5 2.5 2.5 90 0 0-.8.6l-.2.3-.1-.7v-1.3l.4-.9.5-.3L15.6 8l.6-.3a3.5 3.5 90 0 1 .5-.2l.9-.4.2-.3v.2l.2 1.1Z"
-const Multimer = "M14 19.3c0-.3.2-.4.3-.5h.2c.3 0 .4.1.4.3.1.8.4 1.4 1 1.7.5.2 1 .3 1.5.1H17.7c.2-.1.4 0 .5.2 0 .3 0 .4-.3.5l-.4.2h-.3c-.5.1-1 0-1.7-.3-.4-.1-.7-.4-.9-.8a2.4 2.4 0 0 1-.4-1l-.1-.4Zm3.2-2h-.4a18.4 18.4 0 0 0-2.6.8l-.2.3v-.7c0-.5.1-.8.3-1l.6-.7.5-.3A63.2 63.2 0 0 1 18 15l.5-.2h.3l.3-.1.1-.1.3-.3v.2a7.5 7.5 0 0 1-.2 1.9l-.2.4-.8.4a15 15 0 0 0-.8.1h-.2Zm-5.1-.1v.6h-.6l-.4-.5-.6-.7-4.6-.8 1.5-1-5.9-8 .9-.7-.6-1.5c-.3-1.3.2-2.4 1.3-3.1l1.3-.3h.4l.4.1.2.1.6.4c.2 0 .3.2.2.5l-.4.2h-.2l-.4-.2-.8-.2c-.3 0-.6 0-.9.2a2 2 0 0 0-1 2.2l.6 1.1 1.3-1 1 1.4L5 8.6l1.4-1 3.8 5 1.5-1-.6 4.6.9 1Zm7-4-.1.3-.8.3a9 9 0 0 0-1.7.4 100.6 100.6 0 0 1-1.4-1.1v-.5c0-.1 0-.3.2-.4l.7-.3.8-.2.1.1.5.3.6.3a2092.6 2092.6 0 0 0 1.1.8Zm-8-2L7.2 6l-1.1.8.6-4 4 .7-1.1.8 4.2 5.7c-.4.5-.5 1.5-.4 3l-.6.4-.7-.9.2-2.2-1.2 1Zm9.2-3.7v1.2l-.2.8c0 .3-.2.4-.2.4l-.5.3a49.2 49.2 0 0 1-4.1 1l-.2.3V11c0-.4 0-.8.2-1.1l.5-.7.4-.3a19.2 19.2 0 0 1 4-1V7.4Zm-3.9-4.2c.3.5.6.9 1 1.1.2.4.5.6.6.6l.5.3a15.8 15.8 0 0 1 .8.6h.3l.1.2h.2c0 .2.2.3.3.3V7h-.5a2 2 0 0 0-.3.2l-.5.1-.5.1h-.1l-.3.1a1 1 0 0 0-.3 0l-.5-.2a4.7 4.7 0 0 1-1-1l-.2-.2V5l.4-2v.3Zm1.9-1.8c.1 0 .9-1.4 0-1.1-.9.2-1.5.7-1.8 1.5 0 .4 0 .7.5.8.4 0 .6-.1.7-.5 0-.3.3-.5.6-.7Z";
-const Motif = "m12.42 17.45.15 1.38a.8.8 0 0 0 .34.57l1.69 1.4a.8.8 0 0 0 1.02-1.23l-1.5-1.24-.14-1.3 1.79-2.67-2.53-3.22-3.84 1.4.16 4.1 2.86.81Zm.4-1.55-1.71-.48-.07-1.77 1.66-.61 1.1 1.39-.99 1.47Zm-.3-6.77a2.4 2.4 0 1 0-3.02 1.52h-.01a2.4 2.4 0 0 0 3.02-1.52Zm7.03-3.1-2.21-2.32-3.7 1.77.55 4.05 4.02.74 1.42-2.62L21 7.8a.8.8 0 0 0 .62-.2l1.74-1.34a.8.8 0 0 0-.98-1.27l-1.54 1.19-1.3-.14Zm-1.35.9-.84 1.56-1.74-.32-.24-1.75 1.6-.77 1.22 1.28ZM4.57.05.69.55A.8.8 0 0 0 .9 2.16l3.58-.48L6.96 5a.8.8 0 0 0 1.28-.95L5.61.5a.8.8 0 0 0-.54-.46.8.8 0 0 0-.5 0Z";
+const SavePDB =
+  "M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h14Zm0 8v-.8c0-.7-.6-1.2-1.3-1.2h-2.4v6h2.4c.7 0 1.2-.5 1.2-1.2v-1c0-.4-.4-.8-.9-.8.5 0 1-.4 1-1Zm-9.7.5v-1c0-.8-.7-1.5-1.5-1.5H5.3v6h1.5v-2h1c.8 0 1.5-.7 1.5-1.5Zm5 2v-3c0-.8-.7-1.5-1.5-1.5h-2.5v6h2.5c.8 0 1.5-.7 1.5-1.5Zm3.4.3h-1.2v-1.2h1.2v1.2Zm-5.9-3.3v3h1v-3h-1Zm-5 0v1h1v-1h-1Zm11 .9h-1.3v-1.2h1.2v1.2Z";
+const SavePNG =
+  "M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3M9 11.5C9 12.3 8.3 13 7.5 13H6.5V15H5V9H7.5C8.3 9 9 9.7 9 10.5V11.5M14 15H12.5L11.5 12.5V15H10V9H11.5L12.5 11.5V9H14V15M19 10.5H16.5V13.5H17.5V12H19V13.7C19 14.4 18.5 15 17.7 15H16.4C15.6 15 15.1 14.3 15.1 13.7V10.4C15 9.7 15.5 9 16.3 9H17.6C18.4 9 18.9 9.7 18.9 10.3V10.5H19M6.5 10.5H7.5V11.5H6.5V10.5Z";
+const API =
+  "M 22.23 1.96 c -0.98 0 -1.77 0.8 -1.77 1.77 c 0 0.21 0.05 0.4 0.12 0.6 l -8.31 14.23 c -0.8 0.17 -1.42 0.85 -1.42 1.7 a 1.77 1.77 0 0 0 3.54 0 c 0 -0.2 -0.05 -0.37 -0.1 -0.55 l 8.34 -14.29 a 1.75 1.75 0 0 0 1.37 -1.69 c 0 -0.97 -0.8 -1.77 -1.77 -1.77 M 14.98 1.96 c -0.98 0 -1.77 0.8 -1.77 1.77 c 0 0.21 0.05 0.4 0.12 0.6 l -8.3 14.24 c -0.81 0.16 -1.43 0.84 -1.43 1.7 a 1.77 1.77 0 0 0 3.55 0 c 0 -0.2 -0.06 -0.38 -0.12 -0.56 L 15.4 5.42 a 1.75 1.75 0 0 0 1.37 -1.69 c 0 -0.97 -0.8 -1.77 -1.78 -1.77 M 1.75 6 a 1.75 1.75 0 1 0 0 3.5 a 1.75 1.75 0 0 0 0 -3.5 z m 0 6 a 1.75 1.75 0 1 0 0 3.5 a 1.75 1.75 0 0 0 0 -3.5 z";
+const Monomer =
+  "m13.9 4.4.8.5a7.7 7.7 90 0 0 1.3.6 2.3 2.3 90 0 1 .5.2l.5.2.4.2.1.2a.4.4 90 0 1-.1.3A6.2 6.2 90 0 1 16 7a11.3 11.3 0 0 0-1.2.6l-.5-.2-1.1-.6a2 2 0 0 1-.5-.6 1.8 1.8 90 0 1-.2-1V3A5.3 5.3 90 0 0 14 4.4Zm-1.6-2c-.4-.8-1-1.3-1.6-1.3-1-.1-1.7.3-2.2 1.2a4.2 4.2 90 0 0-.3 1.3H10v12.9h2l-3.4 3.4.1 1.6c0 .4-.1.5-.4.5-.2 0 1.2-1-.4-.4L7.6 20l-3.3-3.4h1.9V3.6h1.1a7.4 7.4 90 0 1 .5-1.7C8.3.7 9.3.1 10.8.2a2.2 2.2 90 0 1 1.2.6A4.3 4.3 90 0 1 13 2v.3c0 .2 0 .4-.3.4-.2 0-.3 0-.4-.2Zm4.3 20.8a3 3 0 0 1-2.6-.5c-.8-.5-1.2-1.4-1.2-2.7 0-.3.1-.4.4-.4.3 0 .4.1.4.4 0 1 .3 1.7.8 2a2.5 2.5 90 0 0 2 .3h.1c.3 0 .5.2.5.5 0 .2-.1.3-.4.4Zm1.4-8v1a2.1 2.1 90 0 1-.3.5 2.6 2.6 90 0 1-.8.5l-.7.3-.6.3c-1.3.4-2 .7-2 .8a2.5 2.5 90 0 0-.8.5l-.2.3a3.3 3.3 90 0 1-.1-.8 5 5 90 0 1 0-1.3 2.4 2.4 90 0 1 .4-.8 3.6 3.6 90 0 1 .6-.4 38.4 38.4 0 0 1 4-1.9l.2-.3a2.6 2.6 90 0 1 .2.3 3.2 3.2 90 0 1 0 1Zm-5.2-1.8V13l.2-.4.7-.5 1-.3a7.7 7.7 90 0 0 1.3.6l.5.2.5.2.4.2.1.2-.1.2a2.4 2.4 90 0 1-.8.4 3 3 90 0 0-.5.2 1.9 1.9 90 0 1-.6.2l-.7.4-.5-.3a4.6 4.6 90 0 1-1.1-.5l-.2-.3-.2-.2ZM18 8.2a5.8 5.8 90 0 1 0 1 1.2 1.2 90 0 1-.3.5l-.5.3a189.3 189.3 90 0 0-3.6 1.5 2.5 2.5 90 0 0-.8.6l-.2.3-.1-.7v-1.3l.4-.9.5-.3L15.6 8l.6-.3a3.5 3.5 90 0 1 .5-.2l.9-.4.2-.3v.2l.2 1.1Z";
+const Multimer =
+  "M14 19.3c0-.3.2-.4.3-.5h.2c.3 0 .4.1.4.3.1.8.4 1.4 1 1.7.5.2 1 .3 1.5.1H17.7c.2-.1.4 0 .5.2 0 .3 0 .4-.3.5l-.4.2h-.3c-.5.1-1 0-1.7-.3-.4-.1-.7-.4-.9-.8a2.4 2.4 0 0 1-.4-1l-.1-.4Zm3.2-2h-.4a18.4 18.4 0 0 0-2.6.8l-.2.3v-.7c0-.5.1-.8.3-1l.6-.7.5-.3A63.2 63.2 0 0 1 18 15l.5-.2h.3l.3-.1.1-.1.3-.3v.2a7.5 7.5 0 0 1-.2 1.9l-.2.4-.8.4a15 15 0 0 0-.8.1h-.2Zm-5.1-.1v.6h-.6l-.4-.5-.6-.7-4.6-.8 1.5-1-5.9-8 .9-.7-.6-1.5c-.3-1.3.2-2.4 1.3-3.1l1.3-.3h.4l.4.1.2.1.6.4c.2 0 .3.2.2.5l-.4.2h-.2l-.4-.2-.8-.2c-.3 0-.6 0-.9.2a2 2 0 0 0-1 2.2l.6 1.1 1.3-1 1 1.4L5 8.6l1.4-1 3.8 5 1.5-1-.6 4.6.9 1Zm7-4-.1.3-.8.3a9 9 0 0 0-1.7.4 100.6 100.6 0 0 1-1.4-1.1v-.5c0-.1 0-.3.2-.4l.7-.3.8-.2.1.1.5.3.6.3a2092.6 2092.6 0 0 0 1.1.8Zm-8-2L7.2 6l-1.1.8.6-4 4 .7-1.1.8 4.2 5.7c-.4.5-.5 1.5-.4 3l-.6.4-.7-.9.2-2.2-1.2 1Zm9.2-3.7v1.2l-.2.8c0 .3-.2.4-.2.4l-.5.3a49.2 49.2 0 0 1-4.1 1l-.2.3V11c0-.4 0-.8.2-1.1l.5-.7.4-.3a19.2 19.2 0 0 1 4-1V7.4Zm-3.9-4.2c.3.5.6.9 1 1.1.2.4.5.6.6.6l.5.3a15.8 15.8 0 0 1 .8.6h.3l.1.2h.2c0 .2.2.3.3.3V7h-.5a2 2 0 0 0-.3.2l-.5.1-.5.1h-.1l-.3.1a1 1 0 0 0-.3 0l-.5-.2a4.7 4.7 0 0 1-1-1l-.2-.2V5l.4-2v.3Zm1.9-1.8c.1 0 .9-1.4 0-1.1-.9.2-1.5.7-1.8 1.5 0 .4 0 .7.5.8.4 0 .6-.1.7-.5 0-.3.3-.5.6-.7Z";
+const Motif =
+  "m12.42 17.45.15 1.38a.8.8 0 0 0 .34.57l1.69 1.4a.8.8 0 0 0 1.02-1.23l-1.5-1.24-.14-1.3 1.79-2.67-2.53-3.22-3.84 1.4.16 4.1 2.86.81Zm.4-1.55-1.71-.48-.07-1.77 1.66-.61 1.1 1.39-.99 1.47Zm-.3-6.77a2.4 2.4 0 1 0-3.02 1.52h-.01a2.4 2.4 0 0 0 3.02-1.52Zm7.03-3.1-2.21-2.32-3.7 1.77.55 4.05 4.02.74 1.42-2.62L21 7.8a.8.8 0 0 0 .62-.2l1.74-1.34a.8.8 0 0 0-.98-1.27l-1.54 1.19-1.3-.14Zm-1.35.9-.84 1.56-1.74-.32-.24-1.75 1.6-.77 1.22 1.28ZM4.57.05.69.55A.8.8 0 0 0 .9 2.16l3.58-.48L6.96 5a.8.8 0 0 0 1.28-.95L5.61.5a.8.8 0 0 0-.54-.46.8.8 0 0 0-.5 0Z";
 
 export default {
-    AlertCircleOutline,
-    ApplicationBracesOutline,
-    ArrowRightCircle,
-    ArrowRightCircleOutline,
-    AxisZRotateCounterclockwise,
-    ChevronLeft,
-    ChevronRight,
-    Circle,
-    CircleHalf,
-    CircleOneThird,
-    CircleTwoThird,
-    ClockOutline,
-    CloudDownloadOutline,
-    Delete,
-    Dns,
-    File,
-    FileDownloadOutline,
-    FileUpload,
-    FormatListBulleted,
-    Fullscreen,
-    HelpCircleOutline,
-    History,
-    Label,
-    LabelOutline,
-    Magnify,
-    MinusBox,
-    NotificationClearAll,
-    PlusBox,
-    ProgressWrench,
-    ReorderHorizontal,
-    Restore,
-    SavePDB,
-    SavePNG,
-    TableLarge,
-    Tune,
-    LayersSearchOutline,
-    API,
-    CloseCircle,
-    CloseCircleOutline,
-    Monomer,
-    Multimer,
-    Wall,
-    TextBoxOutline,
-    Motif,
-    Pencil,
-};
\ No newline at end of file
+  AlertCircleOutline,
+  ApplicationBracesOutline,
+  ArrowRightCircle,
+  ArrowRightCircleOutline,
+  AxisZRotateCounterclockwise,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  ChevronDown,
+  Circle,
+  CircleHalf,
+  CircleOneThird,
+  CircleTwoThird,
+  ClockOutline,
+  CloudDownloadOutline,
+  Delete,
+  Dns,
+  File,
+  FileDownloadOutline,
+  FileUpload,
+  FormatListBulleted,
+  Fullscreen,
+  HelpCircleOutline,
+  History,
+  Label,
+  LabelOutline,
+  Magnify,
+  MinusBox,
+  NotificationClearAll,
+  PlusBox,
+  ProgressWrench,
+  ReorderHorizontal,
+  Restore,
+  SavePDB,
+  SavePNG,
+  TableLarge,
+  Tune,
+  LayersSearchOutline,
+  API,
+  CloseCircle,
+  CloseCircleOutline,
+  Monomer,
+  Multimer,
+  Wall,
+  TextBoxOutline,
+  Motif,
+  Pencil,
+  DoubleChevronUp,
+};
diff --git a/frontend/ResultFoldDisco.vue b/frontend/ResultFoldDisco.vue
index 6e99862..35fc3fa 100644
--- a/frontend/ResultFoldDisco.vue
+++ b/frontend/ResultFoldDisco.vue
@@ -78,173 +78,67 @@
                             </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"
+                        v-model="tabModel"
                         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.replaceAll(/_folddisco$/g, '') }} ({{ 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' : 'row',
-                            'align-items': 'center',
-                            'flex': '0',
-                            'white-space': 'nowrap',
-                        }">
-                        <h2 style="margin-top: 0.5em; margin-bottom: 1em; display: inline-block;" class="mr-auto">
-                            <span style="text-transform: uppercase;">{{ entry.db.replaceAll(/_folddisco$/g, '') }}</span> <small>{{ entry.alignments ? Object.values(entry.alignments).length : 0 }} hits</small>
-                        </h2>
-                        <v-btn v-if="entry.hasTaxonomy" @click="toggleSankeyVisibility(entry.db)" large>
-                            {{ isSankeyVisible[entry.db] ? 'Hide Taxonomy' : 'Show Taxonomy' }}
-                        </v-btn>
-                    </v-flex>
-
-                    <v-flex
-                        class="d-flex"
-                        :style="{
-                            'flex-direction' : $vuetify.breakpoint.mdAndDown ? 'column' : 'row',
-                            'align-items': 'center',
-                            'white-space': 'nowrap',
-                            'gap': '24px',
-                        }"
                         >
-                        <div style="flex-basis: 100%; width: 100%">
-                            <h3>Filter</h3>
-                            <motif-filter
-                                :items="dbGaps[entry.db]"
-                                :value="gapFilter[entry.db] ? gapFilter[entry.db] : ''"
-                                @input="$set(gapFilter, entry.db, $event)"
-                                @click:clear="$set(gapFilter, entry.db, '')"
-                                :queryresidues="entry.queryresidues"
-                                :color="entry.color"
-                            >
-                            </motif-filter>
-                        </div>
-                        <div style="flex-basis: 100%; width: 100%">
-                            <h3>Cluster</h3>
-                            <folddisco-hit-cluster :hits="entry" v-on:cluster="$set(clusters, entry.db, $event)"></folddisco-hit-cluster>
-                        </div>
-                    </v-flex>
-                    <v-flex v-if="entry.hasTaxonomy && isSankeyVisible[entry.db]">
-                        <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;">
-                        <colgroup>
-                            <col style="width: 20%;" /> <!-- target -->
-                            <col v-if="entry.hasDescription" style="width: 30%;" /> 
-                            <col v-if="entry.hasTaxonomy" style="width: 20%;" />
-                            <col style="width: 10%;" /> <!-- idf-score --> 
-                            <col style="width: 10%;" /> <!-- RMSD --> 
-                            <col style="width: 6.5%;" /> <!-- nodecount -->
-                            <col style="width: 20%;" /> <!-- Matched residues --> 
-                            <!-- <col style="width: 20%;" /> Interresidue --> 
-                            <col style="width: 6.5%;" /> <!-- action -->
-                        </colgroup>
-                        <thead>
-                            <tr>
-                                <th :class="'wide-' + (3 - entry.hasDescription - entry.hasTaxonomy)">
-                                    Target
-                                </th>
-                                <th v-if="entry.hasDescription">
-                                    Description
-                                    <v-tooltip open-delay="300" top>
-                                        <template v-slot:activator="{ on }">
-                                            <v-icon v-on="on" style="font-size: 16px; float: right;">{{ $MDI.HelpCircleOutline }}</v-icon>
-                                        </template>
-                                        <span>Triple click to select whole cell (for very long identifiers)</span>
-                                    </v-tooltip>
-                                </th>
-                                <th v-if="entry.hasTaxonomy">Scientific Name</th>
-                                <th class="thin">idf-score</th>
-                                <th class="thin">RMSD</th>
-                                <th class="thin">Nodes</th>
-                                <th>
-                                    Matched residues
-                                    <v-tooltip open-delay="300" top>
-                                        <template v-slot:activator="{ on }">
-                                            <v-icon v-on="on" style="font-size: 16px; float: right;">{{ $MDI.HelpCircleOutline }}</v-icon>
-                                        </template>
-                                        <span>The position of the aligned motif residues in the target</span>
-                                    </v-tooltip>
-                                </th>
-                                <!-- <th>Interresidue Dist</th> -->
-                                <th class="alignment-action thin">Structure</th>
-                            </tr>
-                        </thead>
-                        <tbody v-for="(clu, key) in clusters[entry.db]">
-                            {{ void(clusterShown = false) }}
-                            <template v-for="(group, groupidx) in clu.map(x => entry.alignments[x])">
-                            <template v-for="(item, index) in group" v-if="isGroupVisible(group) && isItemVisible(entry.db, item)">
-                            <tr v-if="Object.keys(clu).length != Object.keys(entry.alignments).length && clusterShown == false">
-                                <td colspan="6"><strong>Cluster: {{ key == -1 ? "Noise" : key }}</strong></td>
-                            </tr>
-                            {{ void(clusterShown = true) }}
-                            <tr :class="['hit', { 'active' : item.active }]">
-                                <td class="db long" data-label="Target" :style="{ 'border-color' : entry.color }">
-                                    <a :id="item.id" class="anchor" style="position: absolute; top: 0"></a>
-                                    <!-- <template v-if="isComplex">
-                                        {{ item.query.lastIndexOf('_') != -1 ? item.query.substring(item.query.lastIndexOf('_')+1) : '' }} ➔ 
-                                    </template> -->
-                                    <a style="text-decoration: underline; color: #2196f3;" v-if="Array.isArray(item.href)" @click="forwardDropdown($event, item.href)"rel="noopener" :title="item.target">{{item.targetname}}</a>
-                                    <a v-else :href="item.href" target="_blank" rel="noopener" :title="item.target">{{item.targetname}}</a>
-                                </td>
-                                <td class="long" data-label="Description" v-if="entry.hasDescription">
-                                    <span :title="item.description">{{ item.description }}</span>
-                                </td>
-                                <td class="long" v-if="entry.hasTaxonomy" data-label="Taxonomy">
-                                    <a :href="'https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?mode=Info&id=' + item.taxId" target="_blank" rel="noopener" :title="item.taxName">{{ item.taxName }}</a>
-                                </td>
-                                <td class="thin" data-label="idf-score">{{ item.idfscore }}</td>
-                                <td class="thin" data-label="RMSD">{{ item.rmsd }}</td>
-                                <td class="thin" data-label="Node count">{{ item.nodecount }}</td>
-                                <td data-label="Matched residues">
-                                    <span class="matched-residues-text" :title="item.targetresidues">{{ item.targetresidues }}</span>
-                                </td> 
-                                <!-- <td data-label="Matched residues">
-                                    <span class="matched-residues-text" :title="item.interresiduedist">{{ item.interresiduedist }}</span>
-                                </td> -->
-                                <td class="alignment-action thin" :rowspan="1">
-                                    <!-- performance issue with thousands of v-btns, hardcode the minimal button instead -->
-                                    <!-- <v-btn @click="showAlignment(item, $event)" text :outlined="alignment && item.target == alignment.target" icon>
-                                        <v-icon v-once>{{ $MDI.NotificationClearAll }}</v-icon>
-                                    </v-btn> -->
-                                    <button 
-                                        @click="showAlignment(item, entry.db, $event)"
-                                        type="button"
-                                        class="v-btn v-btn--icon v-btn--round v-btn--text v-size--default"
-                                        :class="{ 
-                                                    'v-btn--outlined' : alignment && item.target == alignment.target,
-                                                    'theme--dark' : $vuetify.theme.dark
-                                                }"
-                                        >
-                                        <span class="v-btn__content"><span aria-hidden="true" class="v-icon notranslate 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 d="M5,13H19V11H5M3,17H17V15H3M7,7V9H21V7"></path></svg>
-                                        </span></span>
-                                    </button>
-                                </td>
-                            </tr>
-                            <!-- <tr aria-hidden="true" v-if="isComplex" style="height: 15px"></tr> -->
-                            </template>
-                            </template>
-                        </tbody>
-                    </table>
-                    </div>
+                            <!-- <v-tab>All databases</v-tab> -->
+                            <v-tab v-for="entry in hits.results" :key="entry.db">{{ entry.db.replaceAll(/_folddisco$/g, '') }} ({{ entry.alignments ? Object.values(entry.alignments).length : 0 }})</v-tab>
+                        </v-tabs>
+                    </v-sheet>
+                    <ResultFoldDiscoDB v-for="(entry, entryidx) in hits.results" :key="entry.db"
+                        v-if="selectedDatabases == 0 || (entryidx + 1) == selectedDatabases"
+                        :entryidx="entryidx" :entry="entry" :toggleSourceDb="toggleSourceDb"
+                        :selectedStates="selectedStates[entryidx]" :selectedCounts="selectedCountPerDb[entryidx]"
+                        :totalSelectedCounts="selectedCounts" :selectUpperbound="selectUpperbound" :alignment="alignment"
+                        :onlyOne="hits.results.length == 1"
+                        @forwardDropdown="(e, h) => forwardDropdown(e, h)"
+                        @showAlignment="(i, e) => showAlignment(i, entry.db, e)"
+                        @updateToggleSource="(db) => updateToggleSourceDb(db)"
+                        @toggleSelection="(i, v) => handleToggleSelection(entryidx, i, v)"
+                        @bulkToggle="(a, v) => handleBulkToggle(entryidx, a, v)"
+                        @updateScroll="() => updateScrollOffsetArr()"
+                    ></ResultFoldDiscoDB>
                 </template>
                 </panel>
+                <SelectToSendPanel
+                    :hits="hits" :ticket="ticket" :selectedCounts="selectedCounts"
+                    :isComplex="false" :selectUpperbound="selectUpperbound"
+                    :dbToIdx="dbToIdx" :banList="[]"
+                    :closeAlignment="closeAlignment"
+                    :getSingleSelectionInfo="getSingleSelectionInfo"
+                    :getMultipleSelectionInfo="getMultipleSelectionInfo"
+                    :getSinglePdb="getPdbToSend"
+                    :getMockPdb="getPdbToSend"
+                    :getOrigPdb="getOrigPdbToSend"
+                    :batchSize="4"
+                    :chunkSize="32"
+                    @clearAll="clearAllEntries"
+                >
+                </SelectToSendPanel>
+                <NavigationButton :selectedDatabases="selectedDatabases"
+                    :scrollOffsetArr="scrollOffsetArr"
+                    :tabOffset="tabOffset"
+                    @needUpdate="updateScrollOffsetArr"
+                ></NavigationButton>
             </v-flex>
         </v-layout>
         <portal>
-            <panel v-if="alignment != null && targetPdb != null" class="alignment" :style="'top: ' + alnBoxOffset + 'px;'">
+            <panel v-if="alignment != null && targetPdb != null" 
+                class="alignment" :style="'top: ' + alnBoxOffset + 'px;'" 
+                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>
                 <StructureViewerMotif
                     slot="content"
                     :key="`ap-${alignment.dbkey}`"
@@ -259,7 +153,7 @@
 </template>
 
 <script>
-import { download, parseResultsFoldDisco, dateTime } from './Utilities.js';
+import { download, parseResultsFoldDisco, dateTime, getAccession, sleep } from './Utilities.js';
 import ResultMixin from './ResultMixin.vue';
 import Panel from './Panel.vue';
 // import AlignmentPanel from './AlignmentPanel.vue';
@@ -269,9 +163,10 @@ import StructureViewerMotif from './StructureViewerMotif.vue';
 // import SankeyDiagram from './SankeyDiagram.vue';
 import { debounce } from './lib/debounce.js';
 // import { thresholdScott } from 'd3';
-import FolddiscoHitCluster from './FolddiscoHitCluster.vue';
-import MotifFilter from './MotifFilter.vue';
 import ResultSankeyMixin from './ResultSankeyMixin.vue';
+import NavigationButton from './NavigationButton.vue';
+import ResultFoldDiscoDB from './ResultFoldDiscoDB.vue';
+import SelectToSendPanel from './SelectToSendPanel.vue';
 
 function getAbsOffsetTop($el) {
     var sum = 0;
@@ -286,7 +181,7 @@ function getAbsOffsetTop($el) {
 export default {
     name: 'ResultFoldDisco',
     tool: 'folddisco',
-    components: { Panel, StructureViewerMotif, FolddiscoHitCluster, MotifFilter },
+    components: { Panel, StructureViewerMotif, NavigationButton, ResultFoldDiscoDB, SelectToSendPanel },
     // components: { ResultView },
     mixins: [ ResultMixin, ResultSankeyMixin ],
     data() {
@@ -302,15 +197,26 @@ export default {
             selectedDatabases: 0,
             selectedDb: null,
             menuActivator: null,
-            menuItems: [],
-            queryResidues: null,
-            gapFilter: {},
-            clusters: {},
             selectedTaxId: null,
+            queryResidues: null,
+            menuItems: [],
+            toggleSourceDb: "",
+            dbToIdx: null,
+            selectUpperbound: 100,
+            selectedStates: {},
+            selectedCounts: 0,
+            selectedCountPerDb: {},
+            selectedSets: new Set(),
+            scrollOffsetArr: null,
         }
     },
     created() {
         window.addEventListener("resize", this.handleAlignmentBoxResize, { passive: true });
+        this.getSingleSelectionInfo = this.getSingleSelectionInfo.bind(this)
+        this.getMultipleSelectionInfo = this.getMultipleSelectionInfo.bind(this)
+        this.getPdbToSend = this.getPdbToSend.bind(this)
+        this.getTargetPdb = this.getTargetPdb.bind(this)
+        this.getOrigPdbToSend = this.getOrigPdbToSend.bind(this)
     },
     beforeDestroy() {
         window.removeEventListener("resize", this.handleAlignmentBoxResize);
@@ -323,9 +229,9 @@ export default {
             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;
             }
@@ -365,8 +271,44 @@ export default {
             }
             return dbGaps;
         },
+        tabModel: {
+            get() {
+            return this.selectedDatabases - 1;
+            },
+            set(val) {
+            this.selectedDatabases = val + 1;
+            }
+        },
+        tabOffset() {
+            let addend = this.hits?.results?.length == 1 ? 92 : 140
+            let sheetHeight = this.$vuetify.breakpoint.xsOnly ? 356 : this.$vuetify.breakpoint.mdAndDown ? 304 : 180
+            let colheadHeight = 32
+            return addend + sheetHeight + colheadHeight
+        }
     },
     mounted() {
+        if (this.hits && !this.selectedStates && !this.selectedCountPerDb && !this.dbToIdx) {
+            const obj = Object.fromEntries(
+                n.results.map(( e, i ) => [i, Object.fromEntries(
+                    e.alignments.map((_, j) => [j, false])
+                )])
+            )
+            const obj2 = Object.fromEntries(
+                n.results.map(( e,i ) => [i, 0])
+            )
+            const obj3 = Object.fromEntries(
+                n.results.map((e, i) => [e.db, i])
+            )
+            this.selectedStates = obj
+            this.selectedCountPerDb = obj2
+            this.dbToIdx = obj3
+            this.$nextTick(() => {
+                setTimeout(() => {
+                    this.updateScrollOffsetArr()
+                }, 0)
+            })
+        }
+
         this.$root.$on('downloadJSON', () => {
             let data;
             if (this.ticket.startsWith('user-')) {
@@ -390,8 +332,34 @@ export default {
                 this.fetchData();
             }
         },
-        hits: function() {
-            this.setColorScheme();
+        hits: {
+            handler(n, o) {
+                this.setColorScheme();
+                if (n && n.results) { 
+                    const obj = Object.fromEntries(
+                        n.results.map((e, i) => [i, Object.fromEntries(
+                            [...Array(e.alignments.length)].keys().map(j => [j, false])
+                        )])
+                    )
+                    const obj2 = Object.fromEntries(
+                        n.results.map((e, i) => [i, 0])
+                    )
+                    const obj3 = Object.fromEntries(
+                        n.results.map((e, i) => [e.db, i])
+                    )
+                    this.selectedStates = obj
+                    this.selectedCountPerDb = obj2
+                    this.dbToIdx = obj3
+
+                    this.$nextTick(() => {
+                        setTimeout(() => {
+                            this.updateScrollOffsetArr()
+                        }, 0)
+                    })
+                }
+            },
+            immediate: false,
+            deep: true
         },
     },
     methods: {
@@ -400,6 +368,7 @@ export default {
             return args;
         },
         showAlignment(item, db, event) {
+            // throw new Error()
             if (this.alignment === item) {
                 this.closeAlignment();
             } else {
@@ -419,13 +388,32 @@ export default {
             if (db.startsWith("pdb100")) {
                 target = item.target;
             }
-            try {
-                const re = "api/result/folddisco/" + this.$route.params.ticket + '?database=' + db +'&id=' + target;
-                const request = await this.$axios.get(re);
-                return request.data;
-            } catch (e) {
-                // throw new Error("Failed to get target structure: " + e.message);
-                alert("Error: Failed to get target structure" + e.message);
+            const re = "api/result/folddisco/" + this.$route.params.ticket + '?database=' + db +'&id=' + target;
+            const MAX_RETRIES = 4
+            let attempt = 0;
+            while (attempt < MAX_RETRIES) {
+                try {
+                    const request = await this.$axios.get(re, {
+                        headers: {
+                            'Cache-Control': 'no-cache, no-store, must-revalidate',
+                            'Pragma': 'no-cache',
+                            'Expires': '0',
+                            'Accept': 'text/plain',
+                        },
+                        transformResponse: [(d) => d],
+                    });
+                    return request.data;
+                } catch (e) {
+                    attempt++;
+                    // throw new Error("Failed to get target structure: " + e.message);
+                    // alert("Error: Failed to get target structure" + e.message);
+                    if (attempt >= MAX_RETRIES) {
+                        console.error(`Max attempt reached for ${target} in ${db}:\n`, e);
+                        throw e
+                    }
+                    
+                    await sleep(300 * attempt)
+                }
             }
         },
         closeAlignment() {
@@ -443,26 +431,175 @@ export default {
                 this.menuActivator.click(event);
             }
         },
+        handleChangeDatabase() {
+            this.closeAlignment();
+        },
+        handleToggleSelection(db, idx, value) {
+            if (!this.selectedStates || !this.selectedStates[db]
+                || this.selectedCounts > this.selectUpperbound && value) {
+                return
+            }
+            
+            const id = db + '#' + idx.toString()
+            const deltaUnit = value ? 1 : -1
+            const toCall = value ? this.selectedSets.add.bind(this.selectedSets) : 
+                this.selectedSets.delete.bind(this.selectedSets)
+            if (this.selectedStates[db][idx] != value) {
+                // Does it really reflect changes?
+                this.selectedStates[db][idx] = value
+                let el = document.getElementById(id)
+                if (el) {
+                    el.classList.toggle('selected', value)
+                }
+                const newVal = this.selectedCountPerDb[db] + deltaUnit
+                this.selectedCountPerDb[db] = newVal
+                this.selectedCounts += deltaUnit
+                toCall(id)
+                
+                // update select-all button state
+                const targetDbLength = this.selectedStates[db].length
+                el = document.getElementById(db + '#select-all')
+                if (el) {
+                    el.classList.toggle('any-selected', newVal > 0)
+                    el.classList.toggle('all-selected', newVal == targetDbLength)
+                }
+            }
+        },
+        handleBulkToggle(db, indices, value) {
+            if (!this.selectedStates || !this.selectedStates[db]
+                || this.selectedCounts > this.selectUpperbound && value) {
+                return
+            }
+
+            let delta = 0
+            const deltaUnit = value ? 1 : -1
+            const deltaUpperbound = this.selectUpperbound - this.selectedCounts
+            const toCall = value ? this.selectedSets.add.bind(this.selectedSets) : 
+                this.selectedSets.delete.bind(this.selectedSets)
+            
+            for (const i of indices) {
+                if (value && delta >= deltaUpperbound) {
+                    break;
+                }
+                if (this.selectedStates[db][i] != value) {
+                    let id = db + '#' + i.toString()
+                    let el = document.getElementById(id)
+                    if (el) {
+                        el.classList.toggle('selected', value)
+                    }
+                    this.selectedStates[db][i] = value
+                    toCall(id)
+                    delta += deltaUnit
+                }
+            }
+            
+            this.selectedCounts += delta
+            const newVal = this.selectedCountPerDb[db] + delta
+            this.selectedCountPerDb[db] = newVal
+            
+            // update select-all button state
+            const selectAllButton = document.getElementById(db+'#select-all')
+            if (selectAllButton) {
+                const dbLength = Number(selectAllButton.getAttribute('length'))
+                selectAllButton.classList.toggle('any-selected', newVal > 0)
+                selectAllButton.classList.toggle('all-selected', newVal == dbLength)
+            }
+        },
+        updateToggleSourceDb(db) {
+            this.toggleSourceDb = db
+        },
         handleChangeDatabase() {
             this.closeAlignment();
             this.localSelectedTaxId = null;
             this.filteredHitsTaxIds = [];
         },
-        isGroupVisible(group) {
-            if (!this.filteredHitsTaxIds || this.filteredHitsTaxIds.length === 0) {
-                return true;
+        clearAllEntries() {
+            if (!this.selectedStates) {
+                return
+            }
+            
+            let el = undefined
+            this.selectedCounts = 0
+            for (const key of Object.keys(this.selectedStates)) {
+                this.selectedCountPerDb[key] = 0
+                
+                // update select-all button states manually
+                el = document.getElementById(key+'#select-all')
+                if (el) {
+                    el.classList.toggle('any-selected', false)
+                    el.classList.toggle('all-selected', false)
+                }
+            }
+            
+            // update selected states manually
+            let prevSelected = document.querySelectorAll('.selected')
+            if (prevSelected.length > 0) {
+                for (let el of prevSelected) {
+                    el.classList.toggle('selected', false)
+                }
+            }
+
+            this.selectedSets.forEach(e => {
+                let [ db, idx ] = e.split('#')
+                this.selectedStates[Number( db )][Number(idx)] = false
+            });
+            this.selectedSets.clear()
+        },
+        getSingleSelectionInfo() {
+            const info = {}
+            if (this.selectedCounts != this.selectedSets.size && this.selectedCounts != 1) {
+                console.error("Inconsistent set size and selected counts")
+                return
+            }
+            let db, idx
+
+            for (const e of this.selectedSets) {
+                [ db, idx ] = e.split("#")
+                idx = Number(idx)
+                break
+            }
+
+            info.db = this.hits.results[db].db
+            info.idx = idx
+            // If there is no selection, then idx would be -1
+            return info
+        },
+        getMultipleSelectionInfo() {
+            if (this.selectedCounts != this.selectedSets.size && this.selectedCounts < 2) {
+                console.error("Inconsistent set size and selected counts")
+                return
             }
-            let taxFiltered = group.filter(item => this.filteredHitsTaxIds.includes(Number(item.taxId)));
-            return taxFiltered.length > 0;
+            
+            const arr = []
+            for (const e of this.selectedSets) {
+                let [ db, idx ] = e.split('#')
+                idx = Number(idx)
+                arr.push(
+                    {db: this.hits.results[db].db, idx}
+                )
+            }
+
+            return arr
         },
-        isItemVisible(db, item) {
-            if (!(db in this.gapFilter)) {
-                return true;
+        async getPdbToSend(info, signal) {
+            // Alternative of getMockPdb()
+            if (signal?.aborted) { 
+                throw new DOMException('Aborted', 'AbortError')
             }
-            if (this.gapFilter[db] == null) {
-                return true;
+            
+            let item = this.hits.results[this.dbToIdx[info.db]]?.alignments?.[info.idx]?.[0]
+            let pdb = await this.getTargetPdb(item, info.db)
+            return {pdb: pdb, isMultimer: false, name: getAccession(item.target)}
+        },
+        async getOrigPdbToSend(item, db, signal) {
+            // Alternative of fetchStructureFileURL()
+            if (signal?.aborted) { 
+                throw new DOMException('Aborted', 'AbortError')
             }
-            return this.gapFilter[db] == '' || item.gaps == this.gapFilter[db];
+            
+            let pdb = await this.getTargetPdb(item, db)
+            let residues = item.targetresidues
+            return [pdb, residues]
         },
         resetProperties() {
             this.ticket = this.$route.params.ticket;
@@ -488,7 +625,8 @@ export default {
                     const response = await this.$axios.get("api/result/folddisco/" + this.ticket, {
                         headers: {
                             'Cache-Control': 'no-cache'
-                        }
+                        },
+                        // transformResponse: [(d) => {d}]
                     });
                     const data = response.data;
                     
@@ -505,7 +643,9 @@ export default {
             }
 
             try {
-                const response = await this.$axios.get(`api/result/${this.ticket}/query`);
+                const response = await this.$axios.get(`api/result/${this.ticket}/query`,{
+                    transformResponse: [(d) => d]
+                });
                 // let query = {};
                 // query.pdb = response.data;
                 const query = response.data;
@@ -515,6 +655,11 @@ export default {
                 this.queryPdb = null;
             }
         },
+        updateScrollOffsetArr() {
+            const arr = document.querySelectorAll('[class^="result-entry-"]')
+            const offsetArr = [...arr].map(n => Math.ceil(n.getBoundingClientRect().top + window.scrollY))
+            this.scrollOffsetArr = offsetArr
+        }
     },
 };
 </script>
@@ -608,6 +753,7 @@ export default {
             text-overflow: ellipsis;
             white-space: nowrap;
         }
+
     }
 }
 
@@ -702,6 +848,7 @@ export default {
         word-break: break-all;
         max-width: none;
     }
+
 }
 
 .alignment {
@@ -722,6 +869,25 @@ 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;
+}
 </style>
 
 <style scoped>
diff --git a/frontend/ResultFoldDiscoDB.vue b/frontend/ResultFoldDiscoDB.vue
new file mode 100644
index 0000000..7b9684e
--- /dev/null
+++ b/frontend/ResultFoldDiscoDB.vue
@@ -0,0 +1,1096 @@
+<template>
+    <div :key="entry.db">
+        <v-sheet style="position: sticky; z-index: 99997 !important; padding-bottom: 16px;"
+         :style="{'height': $vuetify.breakpoint.mdAndDown ? $vuetify.breakpoint.xsOnly ? '356px' : '304px' : '180px', 'top': headTop}">
+            <v-flex
+                class="d-flex"
+                :style="{
+                    'flex-direction' : $vuetify.breakpoint.xsOnly ? 'column' : 'row',
+                    'align-items': 'center',
+                    'flex': '0',
+                    'white-space': 'nowrap',
+                }">
+                <h2 style="margin-top: 0.5em; margin-bottom: 1em; display: inline-block;" class="mr-auto">
+                    <div style="width: 24px; display: inline-block;"></div>
+                    <span style="text-transform: uppercase;">{{ entry.db.replaceAll(/_folddisco$/g, '') }}</span> <small>{{entryLength > 1 ? entryLength.toString() + " hits" : entryLength > 0 ? "1 hit" : "no hit" }}</small>
+                </h2>
+                <v-btn v-if="entry.hasTaxonomy" @click="toggleSankeyVisibility(entry.db)" 
+                    :class="{ 'mr-2': $vuetify.breakpoint.smAndUp , 'mb-2': $vuetify.breakpoint.xsOnly}" large>
+                    {{ isSankeyVisible[entry.db] ? 'Hide Taxonomy' : 'Show Taxonomy' }}
+                </v-btn>
+            </v-flex>
+            <v-flex
+                class="d-flex"
+                :style="{
+                    'flex-direction' : $vuetify.breakpoint.mdAndDown ? 'column' : 'row',
+                    'align-items': 'center',
+                    'white-space': 'nowrap',
+                    'gap': '24px',
+                    'padding-left': '36px',
+                }"
+                >
+                <div style="flex-basis: 100%; width: 100%">
+                    <h3>Filter</h3>
+                    <motif-filter
+                        :items="dbGaps"
+                        :value="gapFilter ? gapFilter : ''"
+                        @input="gapFilter = $event"
+                        @click:clear="gapFilter = ''"
+                        :queryresidues="entry.queryresidues"
+                        :color="entry.color"
+                    >
+                    </motif-filter>
+                </div>
+                <div style="flex-basis: 100%; width: 100%">
+                    <h3>Cluster</h3>
+                    <folddisco-hit-cluster :hits="entry" v-on:cluster="clusters = $event"></folddisco-hit-cluster>
+                </div>
+            </v-flex>
+        </v-sheet>
+        <v-flex v-if="hasEntries && entry.hasTaxonomy && isSankeyVisible[entry.db]">
+            <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:relative; margin-bottom: 3em;"
+            v-if="hasEntries" :style="{'--active-color': entry.color}">
+            <colgroup>
+                <col style="width: 36px;"> <!--index-->
+                <col style="min-width: 12%;" /> <!-- target -->
+                <col v-if="entry.hasDescription" style="width: 25%;" /> 
+                <col v-if="entry.hasTaxonomy" style="width: 15%;" />
+                <col style="width: 6%;" /> <!-- idf-score --> 
+                <col style="width: 6%;" /> <!-- RMSD --> 
+                <col style="width: 6%;" /> <!-- nodecount -->
+                <col style="min-width: 12%;" /> <!-- Matched residues --> 
+                <!-- <col style="width: 20%;" /> Interresidue --> 
+                <col style="width: 6%;" /> <!-- action -->
+            </colgroup>
+            <thead style="position: sticky; z-index: 99997 !important;" class="sticky-thead"
+                :style="{'top': colheadTop, 
+                'background-color': $vuetify.theme.dark ? '#1e1e1e' : '#fff'}">
+                <tr>
+                    <th class="thin select-all-th" style="position: relative">
+                        <!-- Replaced this checkbox too, for the colored undeterminate state -->
+                        <div class="v-input--selection-controls__input select-all custom-checkbox" :id="entryidx+'#select-all'" style="user-select: none;
+                            -webkit-user-select: none; cursor: pointer; position: absolute; top: calc(50% - 12px); left: 6px;" @click.stop="toggleDbEntries($event)" :length="entryLength"
+                            :title="multipleSelectionEnabled ? 'click to select all the entries' : 'select the first entry (multiple selection is WIP)'">
+                            <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>
+                                    <path class="undeterminate" d="M17,13H7V11H17M19,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>
+                    </th>
+                    <th :class="['wide-' + (3 - entry.hasDescription - entry.hasTaxonomy), 
+                    {'sort-selected': this.sortKey == 'target', 'sort-down': this.sortOrder < 0}]" 
+                    class="sort-criterion" @click="changeSortMode('target')" title="Click to sort by target name" >
+                        Target
+                    </th>
+                    <th v-if="entry.hasDescription" class="sort-criterion" 
+                    :class="{'sort-selected':this.sortKey == 'desc', 'sort-down': this.sortOrder < 0}"
+                    @click="changeSortMode('desc')" title="Click to sort by description">
+                        Description
+                        <v-tooltip open-delay="300" top>
+                            <template v-slot:activator="{ on }">
+                                <v-icon v-on="on" style="font-size: 16px; float: right;">{{ $MDI.HelpCircleOutline }}</v-icon>
+                            </template>
+                            <span>Triple click to select whole cell (for very long identifiers)</span>
+                        </v-tooltip>
+                    </th>
+                    <th v-if="entry.hasTaxonomy" :class="{'sort-selected':this.sortKey == 'tax', 'sort-down': this.sortOrder < 0}" 
+                        class="sort-criterion" @click="changeSortMode('tax')" 
+                        title="Click to sort by scientific name">Scientific Name</th>
+                    <th class="thin sort-criterion default-down" :class="{'sort-selected':this.sortKey == 'idf', 'sort-down': this.sortOrder < 0}" 
+                        @click="changeSortMode('idf')" title="Click to sort by idf-score">idf-score</th>
+                    <th class="thin sort-criterion" :class="{'sort-selected':this.sortKey == 'rmsd', 'sort-down': this.sortOrder < 0}" 
+                        @click="changeSortMode('rmsd')" title="Click to sort by RMSD">RMSD</th>
+                    <th class="thin sort-criterion default-down" :class="{'sort-selected':this.sortKey == 'node', 'sort-down': this.sortOrder < 0}" 
+                        @click="changeSortMode('node')" title="Click to sort by node count" >Nodes</th>
+                    <th>
+                        Matched residues
+                        <v-tooltip open-delay="300" top>
+                            <template v-slot:activator="{ on }">
+                                <v-icon v-on="on" style="font-size: 16px; float: right;">{{ $MDI.HelpCircleOutline }}</v-icon>
+                            </template>
+                            <span>The position of the aligned motif residues in the target</span>
+                        </v-tooltip>
+                    </th>
+                    <!-- <th>Interresidue Dist</th> -->
+                    <th class="alignment-action thin">Structure</th>
+                </tr>
+            </thead>
+            <tbody v-for="(clu, key) in sortedIndices">
+                {{ void(clusterShown = false) }}
+                <template v-for="(groupidx, sortIdx) in clu" >
+                    <tr v-if="clusters[key].length != entryLength 
+                        && visibleCluster[key] 
+                        && clusterShown == false" :class="'result-entry-'+ entryidx + key">
+                        <td colspan="7"><strong>Cluster: {{ key == -1 ? "Noise" : key }}</strong></td>
+                    </tr>
+                    {{ void(clusterShown = true) }}
+                    <tr v-for="(item, index) in entry.alignments[groupidx]" :class="['hit', { 'active' : item.active }]"
+                        :key="`${groupidx}-${index}`"
+                    >
+                        <td v-if="index == 0" :rowspan="entry.alignments[groupidx].length" class="entry-checkbox" :id="entryidx + '#' + groupidx">
+                            <!-- performance issue with thousands of v-checkboxes, hardcode the simple checkbox instead -->
+                            <div class="v-input--selection-controls__input custom-checkbox" 
+                            style="user-select: none; -webkit-user-select: none; cursor: pointer; position: absolute; top: calc(50% - 12px); left: 6px;" 
+                            @click.stop="onCheckboxClick(key, sortIdx, $event)"
+                            :title="multipleSelectionEnabled ? 'click to select, shift-click for multiple selection' : 'click to toggle the selection'">
+                                <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>
+                        <td class="db long" data-label="Target" :style="{ 'border-color' : entry.color}">
+                            <a :id="item.id" class="anchor" style="position: absolute; top: 0" @click.stop></a>
+                            <a style="text-decoration: underline; color: #2196f3;" 
+                                v-if="Array.isArray(item.href)" @click.stop="emitForwardDropdown($event, item.href)"
+                                rel="noopener" :title="item.target">{{item.targetname}}</a>
+                            <a v-else :href="item.href" target="_blank" rel="noopener" 
+                                :title="item.target" @click.stop>{{item.targetname}}</a>
+                        </td>
+                        <td class="long" data-label="Description" v-if="entry.hasDescription">
+                            <span :title="item.description">{{ item.description }}</span>
+                        </td>
+                        <td class="long" v-if="entry.hasTaxonomy" data-label="Taxonomy">
+                            <a :href="'https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?mode=Info&id=' + item.taxId" 
+                            target="_blank" rel="noopener" :title="item.taxName" @click.stop>{{ item.taxName }}</a>
+                        </td>
+                        <td class="thin" data-label="idf-score">{{ item.idfscore }}</td>
+                        <td class="thin" data-label="RMSD">{{ item.rmsd }}</td>
+                        <td class="thin" data-label="Node count">{{ item.nodecount }}</td>
+                        <td data-label="Matched residues">
+                            <span class="matched-residues-text" :title="item.targetresidues">{{ item.targetresidues }}</span>
+                        </td> 
+                        <td class="alignment-action thin" :rowspan="1">
+                            <!-- performance issue with thousands of v-btns, hardcode the minimal button instead -->
+                            <!-- <v-btn @click="showAlignment(item, $event)" text :outlined="alignment && item.target == alignment.target" icon>
+                                <v-icon v-once>{{ $MDI.NotificationClearAll }}</v-icon>
+                            </v-btn> -->
+                            <button 
+                                @click.stop="showAlignment(groupidx, $event)"
+                                type="button"
+                                class="v-btn v-btn--icon v-btn--round v-btn--text v-size--default"
+                                :class="{ 
+                                            'v-btn--outlined' : alignment && item.target == alignment.target,
+                                            'theme--dark' : $vuetify.theme.dark
+                                        }"
+                                >
+                                <span class="v-btn__content">
+                                    <span aria-hidden="true" class="v-icon notranslate 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 d="M5,13H19V11H5M3,17H17V15H3M7,7V9H21V7"></path></svg>
+                                </span></span>
+                            </button>
+                        </td>
+                    </tr>
+                </template>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+import MotifFilter from './MotifFilter.vue';
+import FolddiscoHitCluster from './FolddiscoHitCluster.vue';
+import ResultSankeyMixin from './ResultSankeyMixin.vue';
+
+export default {
+    name: 'ResultFoldDiscoDB',
+    components: {MotifFilter, FolddiscoHitCluster},
+    mixins: [ ResultSankeyMixin ],
+    data() {
+        return {
+            toggleTargetValue: true,
+            toggleSourceKey: "",
+            toggleSourceIdx: -1,
+            visibilityTable: [],
+            selectedDb: "",
+            sortKey: 'node',
+            sortOrder: -1,
+            clusters: {},
+            gapFilter: "",
+            visibleCluster: {1 : true},
+            multipleSelectionEnabled: false,
+        }
+    },
+    props: {
+        entryidx: {
+            type: Number,
+            default: 0,
+        },
+        entry: {
+            type: Object,
+            default: null
+        },
+        toggleSourceDb: {
+            type: String,
+            default: ""
+        },
+        selectedStates: {
+            type: Object,
+            default: null
+        },
+        selectedCounts: {
+            type: Number,
+            default: 0,
+        },
+        totalSelectedCounts: {
+            type: Number,
+            default: 0
+        },
+        selectUpperbound: {
+            type: Number,
+            default: 1000
+        },
+        alignment: {
+            type: Object,
+            default: null
+        },
+        closeAlignment: {
+            type: Function,
+            default: () => {}
+        },
+        onlyOne: {
+            type: Boolean,
+            default: false
+        },
+    },
+    watch: {
+        filteredHitsTaxIds: {
+            handler(n, o) {
+                // this.log(n)
+                this.toggleSourceKey = ""
+                this.toggleSourceIdx = -1
+                this.toggleSourceValue = true
+                this.$nextTick(() => {
+                    setTimeout(() => {
+                        this.updateVisibility()
+                    }, 0)
+                })
+            },
+            immediate: false,
+            deep: true,
+        },
+        toggleSourceDb(n, o) {
+            if (n != this.db) {
+                this.toggleSourceKey = ""
+                this.toggleSourceIdx = -1
+                this.toggleSourceValue = true
+            }
+        },
+        entry(n, o) {
+            if (n && this.visibilityTable.length == 0) {
+                this.visibilityTable = Array(this.entryLength).fill(true)
+            }
+        },
+        gapFilter(n, o) {
+            this.$nextTick(() => {
+                setTimeout(() => {
+                    this.updateVisibility()
+                }, 0)
+            })
+        },
+        clusters(n, o) {
+            this.$nextTick(() => {
+                setTimeout(() => {
+                    this.updateVisibility()
+                    this.$emit('updateScroll')
+                }, 0)
+            })
+        },
+    },
+    mounted() {
+        if (this.entry && this.visibilityTable.length == 0) {
+            this.visibilityTable = Array(this.entryLength).fill(true)
+            this.selectedDb = this.db
+            this.$nextTick(() => {
+                setTimeout(() => {
+                    this.reflectSelectionState()
+                }, 0)
+            })
+        }
+
+        if (this.$route.query.d2m && this.$route.query.d2m == 1) {
+            this.multipleSelectionEnabled = true
+        }
+    },
+    computed: {
+        db() {
+            return this.entry ? this.entry.db : ""
+        },
+        entryLength() {
+            return this.entry ? Object.values(this.entry.alignments).length : 0
+        },
+        hasEntries() {
+            return this.entry ? this.entryLength > 0 : false
+        },
+        anySelected() {
+            return this.selectedCounts > 0
+        },
+        selectAllStatus() {
+            return this.selectedCounts == this.entryLength
+        },
+        sortedIndices() {
+            if (!this.clusters) return this.clusters
+
+            let copiedArrs = structuredClone(this.clusters)
+
+            for (let key in copiedArrs) {
+                copiedArrs[key].sort(this.comparator)
+            }
+
+            return copiedArrs
+        },
+        comparator() {
+            let comp = () => {}
+            switch (this.sortKey) {
+                case 'idf':
+                    comp = (a, b) => {
+                        return this.sortOrder * (this.entry.alignments[a][0].idfscore - this.entry.alignments[b][0].idfscore)
+                    }
+                    break;
+
+                case 'target':
+                    comp = (a, b) => {
+                        return this.sortOrder * (this.entry.alignments[a][0].target.localeCompare(this.entry.alignments[b][0].target))
+                    }
+                    break;
+
+                case 'desc':
+                    comp = (a, b) => {
+                        return this.sortOrder * (this.entry.alignments[a][0].description.localeCompare(this.entry.alignments[b][0].description))
+                    }
+                    break;
+
+                case 'tax':
+                    comp = (a, b) => {
+                        return this.sortOrder * (this.entry.alignments[a][0].taxName.localeCompare(this.entry.alignments[b][0].taxName))
+                    }
+                    break;
+
+
+                case 'rmsd':
+                    comp = (a, b) => {
+                        return this.sortOrder * (this.entry.alignments[a][0].rmsd - this.entry.alignments[b][0].rmsd)
+                    }
+                    break;
+
+                case 'node':
+                    comp = (a, b) => {
+                        return this.sortOrder * (this.entry.alignments[a][0].nodecount - this.entry.alignments[b][0].nodecount)
+                    }
+                    break;
+            
+                default:
+                    break;
+            }
+            return comp
+        },
+        headTop() {
+            return this.onlyOne ? '92px' : '140px'
+        },
+        colheadTop() {
+            let addend = !this.onlyOne ? 140 : 92
+            let breakpointAddend = this.$vuetify.breakpoint.xsOnly ? 176 : this.$vuetify.breakpoint.mdAndDown ? 124 : 0
+            return String(180 + addend + breakpointAddend) + 'px'
+        },
+        isTaxAvailable() {
+            return !(!this.filteredHitsTaxIds || this.filteredHitsTaxIds.length == 0)
+        },
+        isGapFilterAvailable() {
+            return !(!this.gapFilter || this.gapFilter == '')
+        },
+        dbGaps() {
+            if (!this.entry) {
+                return {};
+            }
+            let uniqueGaps = new Set()
+            for (let hit of Object.keys(this.entry.alignments)) {
+                uniqueGaps.add(this.entry.alignments[hit][0].gaps)
+            }
+            return [...uniqueGaps, ''];
+        },
+    },
+    methods: {
+        log(a) {
+            console.log(a)
+            return a
+        },
+        updateVisibility() {
+            if (!this.entry) return
+ 
+            let el = undefined
+            let id = ''
+            if (!this.isTaxAvailable && !this.isGapFilterAvailable) {
+                this.visibilityTable = Array(this.entryLength).fill(true)
+                for (let i = 0; i < this.entryLength; i++) {
+                    id = this.entryidx + "#" + String(i)
+                    el = document.getElementById(id)
+                    if (el) {
+                        el.classList.toggle('invisible', false)
+                    }
+                }
+            } else {
+                for (let i = 0; i < this.entryLength; i++) {
+                    let target = this.isGroupVisible(this.entry.alignments[i]) 
+                        && this.isItemVisible(this.entry.alignments[i][0])
+                    this.visibilityTable[i] = target
+                    id = this.entryidx + "#" + String(i)
+                    el = document.getElementById(id)
+                    if (el) {
+                        el.classList.toggle('invisible', !target)
+                    }
+                }
+            }
+
+            const visibility = Object.keys(this.clusters).reduce((acc, key) => {
+                acc[key] = false;
+                return acc;
+            }, {});
+            for (const key in this.clusters) {
+                if (this.clusters[key].length == this.entryLength) continue
+
+                for (const idx of this.clusters[key]) {
+                    if (this.visibilityTable[idx]) {
+                        visibility[key] = true
+                        break
+                    }
+                }
+            }
+            this.visibleCluster = visibility
+        },
+        toggleDbEntries(value) {
+            if (!this.selectedStates) {
+                return 
+            }
+
+            if (this.anySelected) {
+                value = false
+            } else {
+                value = true
+            }
+            
+            if (!value) {
+                const arr = []
+                for (let i = 0; i < this.entryLength; i++) {
+                    if (this.selectedStates[i]) {
+                        arr.push(i)
+                    }
+                }
+                this.$emit('bulkToggle', arr, value)
+                return
+            }
+
+            if (this.multipleSelectionEnabled) {
+                const arr = []
+                let deltaUpperbound = this.selectUpperbound - this.totalSelectedCounts
+                let delta = 0
+                for (let key in this.sortedIndices) {
+                    for (let i of this.sortedIndices[key]) {
+                        if (delta >= deltaUpperbound) {
+                            break
+                        }
+                        if (this.visibilityTable[i] && this.selectedStates[i] != value) {
+                            arr.push(i)
+                            delta++
+                        }
+                    }
+                    if (delta >= deltaUpperbound) {
+                        break
+                    }
+                }
+                if (delta > 0) {
+                    this.$emit('bulkToggle', arr, value)
+                }
+            } else {
+                const arr = []
+                for (let key in this.sortedIndices) {
+                    for (let i of this.sortedIndices[key]) {
+                        if (this.visibilityTable[i] && this.selectedStates[i] != true) {
+                            arr.push(i)
+                            break;
+                        }
+                    }
+                    if (arr.length > 0) {
+                        break
+                    }
+                }
+                if (arr.length > 0) {
+                    this.$emit('bulkToggle', arr, true)
+                }
+            }
+        },
+        emitForwardDropdown(event, href) {
+            this.$emit('forwardDropdown', event, href)
+        },
+        showAlignment(groupidx, event) {
+            this.$emit('showAlignment', this.entry.alignments[groupidx][0], event)
+        },
+        isGroupVisible(group) {
+            if (!this.filteredHitsTaxIds || this.filteredHitsTaxIds.length === 0) {
+                return true;
+            }
+            let taxFiltered = group.filter(item => this.filteredHitsTaxIds.includes(Number(item.taxId)));
+            return taxFiltered.length > 0;
+        },
+        isItemVisible(item) {
+            if (!this.gapFilter) return true
+            return this.gapFilter == '' || item.gaps == this.gapFilter;
+        },
+        onCheckboxClick(key, idx, event) {
+            if (!this.selectedStates) { 
+                return 
+            }
+
+            let targetIdx = this.sortedIndices[key][idx]
+            let value = !this.selectedStates[targetIdx]
+
+            const needRangedToggle = this.multipleSelectionEnabled 
+                && event.shiftKey 
+                && this.toggleSourceKey == key 
+                && (this.toggleSourceIdx != idx && this.toggleSourceIdx != -1)
+
+            if (!needRangedToggle) {
+                // simple click. just toggle it.
+                // If selected count exceeds upperbound, than simply ignore
+
+                if (!this.multipleSelectionEnabled && this.anySelected) {
+                    this.$emit('toggleSelection', this.toggleSourceIdx, false)
+                }
+
+                if (this.totalSelectedCounts > this.selectUpperbound && value) { 
+                    return 
+                }
+                this.toggleSourceKey = key
+                this.toggleSourceIdx = idx
+                this.toggleTargetValue = value
+                this.$emit('updateToggleSource', this.db)
+                this.$emit('toggleSelection', targetIdx, value)
+            } else {
+                const startIdx = Math.min(this.toggleSourceIdx, idx)
+                const endIdx = Math.max(this.toggleSourceIdx, idx) + 1
+                this.handleRangedToggle(key, startIdx, endIdx, this.toggleTargetValue)
+            }
+        },
+        handleRangedToggle(key, startIdx, endIdx, value) {
+            if (!this.selectedStates || this.totalSelectedCounts > this.selectUpperbound && value) {
+                return
+            }
+
+            const deltaUpperbound = this.selectUpperbound - this.totalSelectedCounts
+            let delta = 0
+            const deltaUnit = value ? 1 : -1
+            const arr = []
+
+            for (let i = startIdx; i < endIdx; i++) {
+                if (delta >= deltaUpperbound) {
+                    break
+                }
+                let targetIdx = this.sortedIndices[key][i]
+                if (this.visibilityTable[targetIdx] && this.selectedStates[targetIdx] != value) {
+                    delta += deltaUnit
+                    arr.push(targetIdx)
+                }
+            }
+
+            if (delta != 0) {
+                this.$emit('bulkToggle', arr, value)
+            }
+        },
+        reflectSelectionState() {
+            let value = false
+            let id = ""
+            for (let i = 0; i < this.entryLength; i++) {
+                value = this.selectedStates[i]
+                id = this.entryidx + "#" + String(i)
+                let el = document.getElementById(id)
+                if (el) {
+                    el.classList.toggle('selected', value ? true : false)
+                }
+            }
+            let select_all_button = document.getElementById(this.entryidx + '#select-all')
+            if (select_all_button) {
+                select_all_button.classList.toggle('any-selected', this.selectedCounts > 0)
+                select_all_button.classList.toggle('all-selected', this.selectedCounts == this.entryLength)
+            }
+        },
+        changeSortMode(key) {
+            if (this.sortKey == key) {
+                this.sortOrder *= -1
+            } else {
+                this.sortKey = key
+                switch (key) {
+                    case 'target':
+                    case 'desc':
+                    case 'tax':
+                    case 'rmsd':
+                        this.sortOrder = 1
+                        break
+                    case 'idf':
+                    case 'node':
+                        this.sortOrder = -1
+                        break
+                    default:
+                        break;
+                }
+            }
+            this.toggleSourceKey = ""
+            this.toggleSourceIdx = -1
+            this.toggleTargetValue = true
+            this.$nextTick(() => {
+                setTimeout(() => {
+                    this.reflectSelectionState()
+                }, 0)
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.hide {
+    display: none;
+}
+
+.db {
+    border-left: 5px solid black;
+}
+
+.result-table {
+    a.anchor {
+        display: block;
+        position: relative;
+        top: -125px;
+        visibility: hidden;
+    }
+
+    a:not([href]) {
+        color: #333;
+        &:not([href]):hover {
+            text-decoration: none;
+        }
+    }
+
+    tbody {
+        counter-reset: row;
+    }
+
+    tbody tr.hit {
+        counter-increment: row;
+    }
+
+    td, th {
+        padding: 0 6px;
+        text-align: left;
+    }
+
+    .hit.active {
+        background: #f9f9f9;
+    }
+
+    // tbody:hover td[rowspan], tbody tr:hover {
+    //     background: #eee;
+    // }
+
+    .alignment-action {
+        text-align: center;
+        word-wrap: normal;
+    }
+}
+
+.theme--dark {
+    .result-table {
+        a:not([href])  {
+            color: #eee;
+        }
+
+        .hit.active {
+            background: #333;
+        }
+
+        // tbody:hover td[rowspan], tbody tr:hover {
+        //     background: #333;
+        // }
+    }
+}
+.matched-residues-text {
+    display: inline-block;
+    max-width: 100%;
+    overflow: scroll;
+    scrollbar-width: none;
+}
+
+
+
+// Sticky thead border
+thead.sticky-thead th {
+    position: relative;
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+thead.sticky-thead th::before {
+    content: "";
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.12);
+    position: absolute;
+    height: 1px;
+    display: block;
+    z-index: inherit;
+}
+.theme--dark thead.sticky-thead th::before {
+    background-color: rgba(255, 255, 255, 0.12);
+}
+
+thead.sticky-thead th.sort-criterion {
+    cursor: pointer;
+    background-color: transparent;
+    transition: color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), background-color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+thead.sticky-thead th.sort-criterion:not(.sort-selected):hover  {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+thead.sticky-thead th.sort-criterion:not(.sort-selected):active  {
+    background-color: rgba(0, 0, 0, 0.15);
+}
+
+.theme--dark .sticky-thead th.sort-criterion:not(.sort-selected):hover  {
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+.theme--dark thead.sticky-thead th.sort-criterion:not(.sort-selected):active  {
+    background-color: rgba(255, 255, 255, 0.15);
+}
+
+thead.sticky-thead th.sort-criterion.sort-selected:hover  {
+    background-color: color-mix(in srgb, var(--active-color) 12%, transparent);
+}
+
+thead.sticky-thead th.sort-criterion.sort-selected:active  {
+    background-color: color-mix(in srgb, var(--active-color) 20%, transparent);
+}
+
+thead.sticky-thead th.sort-criterion::before {
+    transition: background-color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), height 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), bottom 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+thead.sticky-thead th.sort-criterion::after {
+    transform-origin: bottom center;
+    content: "";
+    width: 0;
+    height: 0;
+    bottom: 1px;
+    right: 0;
+    position: absolute;
+    display: block;
+    z-index: inherit;
+    border-bottom: 7px solid transparent;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    background-color: transparent;
+    transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), border-bottom-color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), bottom 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+thead.sticky-thead th.sort-criterion:not(.sort-selected):hover::after {
+    border-bottom-color: rgba(0, 0, 0, 0.15);
+}
+
+.theme--dark .sticky-thead th.sort-criterion:not(.sort-selected):hover::after {
+    border-bottom-color: rgba(255, 255, 255, 0.15);
+}
+
+thead.sticky-thead th.sort-criterion:not(.sort-selected).default-down:hover::after {
+    bottom: 0px;
+    transform: scaleY(-1);
+}
+
+thead.sticky-thead th.sort-criterion.sort-selected::before {
+    background-color: var(--active-color);
+    height: 2px;
+    bottom: -1px;
+}
+
+thead.sticky-thead th.sort-criterion.sort-selected::after {
+    border-bottom-color: var(--active-color);
+}
+
+thead.sticky-thead th.sort-criterion.sort-selected:not(.sort-down)::after {
+    bottom: 1px;
+}
+
+thead.sticky-thead th.sort-criterion.sort-selected.sort-down::after {
+    bottom: -1px;
+    transform: scaleY(-1);
+}
+
+tr.hit .entry-checkbox:not(.selected) path.checked {
+    opacity: 0;
+}
+
+tr.hit .entry-checkbox.selected path.unchecked{
+    opacity: 0;
+}
+
+th.select-all-th .select-all path.undeterminate {
+    opacity: 0;
+}
+
+th.select-all-th .select-all.any-selected:not(.all-selected) path.undeterminate {
+    opacity: 1;
+}
+
+th.select-all-th .select-all:not(.all-selected) path.checked {
+    opacity: 0;
+}
+
+th.select-all-th .select-all.any-selected path.unchecked {
+    opacity: 0;
+}
+
+tr.hit .entry-checkbox svg, .select-all svg {
+    transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+    transition: background-color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+tr.hit .entry-checkbox, .select-all {
+    position: relative;
+}
+
+.custom-checkbox::before,
+.custom-checkbox::after {
+    content: '';
+    transition: opacity  0.3s cubic-bezier(0.075, 0.82, 0.165, 1), background-color  0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+    border-radius: 50%;
+    cursor: pointer;
+    width: 34px;
+    height: 34px;
+    top: calc(50% - 17px);
+    left: calc(50% - 17px);
+    position: absolute;
+    background-color: inherit;
+}
+
+:not(.selected) > .custom-checkbox:not(.any-selected)::before,
+:not(.selected) > .custom-checkbox:not(.any-selected)::after {
+    background-color: rgba(0,0,0,0.54);
+}
+
+.theme--dark :not(.selected) > .custom-checkbox:not(.any-selected)::before,
+.theme--dark :not(.selected) > .custom-checkbox:not(.any-selected)::after {
+    background-color: #fff;
+}
+
+.selected .custom-checkbox::before,
+.selected .custom-checkbox::after,
+.custom-checkbox.any-selected::before,
+.custom-checkbox.any-selected::after
+{
+    background-color: var(--active-color);
+}
+
+.custom-checkbox:not(:hover)::before {
+    opacity: 0;
+}
+
+.custom-checkbox:hover::before {
+    opacity: 0.2;
+}
+
+.custom-checkbox::after {
+    opacity: 0;
+    transition: opacity  0.3s cubic-bezier(0.075, 0.82, 0.165, 1), background-color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+    transform: scale(0);
+    transform-origin: center center;
+}
+
+.custom-checkbox:active::after {
+    opacity: 0.2;
+    transform: scale(1);
+}
+
+tr.hit .entry-checkbox.selected svg, .select-all.any-selected svg {
+    fill: var(--active-color);
+}
+
+tr.hit:has(.invisible) {
+    display: none;
+}
+th.sort-criterion {
+    cursor: pointer;
+}
+
+th.sort-criterion.sort-selected {
+    color: var(--active-color);
+}
+
+
+@media print, screen and (min-width: 961px) {
+    .result-table {
+        table-layout: fixed;
+        border-collapse: collapse;
+        width: 100%;
+        th.thin, td.thin {
+            white-space: nowrap;
+        }
+        .long {
+            overflow: hidden;
+            word-break: keep-all;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}
+
+@media print {
+    .result-table .alignment-action {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 960px) {
+    .result-table {
+        width: 100%;
+        col {
+            width: auto !important;
+        }
+        .long {
+            height: 100% !important;
+            white-space: normal !important;
+            min-height: 48px;
+        }
+        .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;
+        }
+        tfoot th {
+            border: 0;
+            display: inherit;
+        }
+        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: 2em;
+            cursor: pointer;
+        }
+
+        tr.hit:has(.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;
+        }
+        tr td:last-child {
+            border-bottom: 0;
+        }
+        tr:not(:last-child) {
+            margin-bottom: 1rem;
+        }
+        tr:not(.is-selected) {
+            background: inherit;
+        }
+        tr:not(.is-selected):hover {
+            background-color: inherit;
+        }
+        tr.detail {
+            margin-top: -1rem;
+        }
+        tr:not(.detail):not(.is-empty):not(.table-footer) td:not(.entry-checkbox) {
+            display: flex;
+            border-bottom: 1px solid #eee;
+            flex-direction: row;
+
+            &:last-child {
+                border-bottom: 0;
+            }
+        }
+        tr:not(.detail):not(.is-empty):not(.table-footer) td:before {
+            content: attr(data-label);
+            font-weight: 600;
+            margin-right: auto;
+            padding-right: 0.5em;
+            word-break: keep-all;
+            flex: 1;
+            white-space: nowrap;
+        }
+
+        tbody td a, tbody td span {
+            flex: 2;
+            margin-left: auto;
+            text-align: right;
+            word-wrap: anywhere;
+        }
+    }
+        .matched-residues-text {
+        white-space: normal;
+        word-break: break-all;
+        max-width: none;
+    }
+}
+
+.alignment {
+    position:absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    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;
+
+    .residues {
+        font-family: Protsolata, Inconsolata, Consolas, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+        white-space: pre;
+    }
+
+    .theme--dark & {
+        .residues {
+            color: #fff;
+        }
+    }
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/ResultFoldMason.vue b/frontend/ResultFoldMason.vue
index 99d02da..9c735b7 100644
--- a/frontend/ResultFoldMason.vue
+++ b/frontend/ResultFoldMason.vue
@@ -66,6 +66,7 @@
 
                 </panel>
             </v-flex>
+            <NavigationButton :scrollOffsetArr="[]"></NavigationButton>
         </v-layout>
     </v-container>
 </template>
@@ -77,16 +78,17 @@ import makeZip from './lib/zip.js'
 import MSA from './MSA.vue';
 import MSAView from './MSAView.vue';
 import Panel from './Panel.vue';
+import NavigationButton from './NavigationButton.vue';
 
 export default {
     name: 'ResultFoldMason',
     tool: 'foldmason',
-    components: { MSA, MSAView, Panel },
+    components: { MSA, MSAView, Panel, NavigationButton},
     data() {
         return {
             ticket: "",
             error: "",
-            msaData: null
+            msaData: null,
         }
     },
     mounted() {
diff --git a/frontend/ResultFoldseekDB.vue b/frontend/ResultFoldseekDB.vue
new file mode 100644
index 0000000..166085b
--- /dev/null
+++ b/frontend/ResultFoldseekDB.vue
@@ -0,0 +1,1035 @@
+<template>
+    <div>
+        <v-sheet style="position: sticky; z-index: 99997 !important; padding-bottom: 16px;" 
+            :db="entryidx" :class="`result-entry-${entryidx}`" :style="{'height': $vuetify.breakpoint.smAndDown ? '188px' : '80px', 'top': headTop}">
+            <v-flex class="d-flex" :style="{ 'flex-direction' : $vuetify.breakpoint.smAndDown ? 'column' : null, 'align-items': 'center'}">
+            <h2 style="margin-top: 0.5em; margin-bottom: 1em; display: inline-block;" class="mr-auto">
+                <div style="width: 16px; display: inline-block;"></div>
+                <span style="text-transform: uppercase;">{{ entry.db }}</span> <small>{{entryLength > 1 ? entryLength.toString() + " hits" : entryLength > 0 ? "1 hit" : "no hit" }}</small>
+            </h2>
+
+            <!-- Button to toggle Sankey Diagram visibility -->
+            <v-btn v-if="hasEntries && entry.hasTaxonomy && !isComplex" @click="toggleSankeyVisibility(entry.db)" :class="{ 'mr-2': $vuetify.breakpoint.mdAndUp , 'mb-2': $vuetify.breakpoint.smAndDown}" large>
+            <!-- TODO: later, isSankeyVisible should be modified as bool, not an object
+              after ResultFoldDisco also is refactored as well. 
+            -->
+                {{ isSankeyVisible[entry.db] ? 'Hide Taxonomy' : 'Show Taxonomy' }}
+            </v-btn>
+            <v-btn-toggle v-if="hasEntries" mandatory :value="tableMode" @change="switchTableMode" :class="{'mb-2': $vuetify.breakpoint.smAndDown}">
+                <v-btn>
+                    Graphical
+                </v-btn>
+                
+                <v-btn>
+                    Numeric
+                </v-btn>
+            </v-btn-toggle>
+        </v-flex>
+        </v-sheet>
+        <v-flex v-if="hasEntries && 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>
+        <v-sheet v-if="!hasEntries"><div class="text-h5">No hits found...</div></v-sheet>
+        <table class="v-table result-table" style="position:relative; margin-bottom: 3em;" v-if="hasEntries" :style="{'--active-color': entry.color}">
+            <colgroup>
+                <col style="width: 36px;">
+                <template v-if="isComplex">
+                    <col style="width: 6.5%;" />
+                    <col style="width: 6.5%;" />
+                </template>
+                <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="min-width: 20%;" />
+                </template>
+                <template v-else>
+                    <col style="width: 4%;" />
+                    <col style="width: 8%;" />
+                    <col style="width: 8%;" />
+                </template>
+                <col style="width: 6%;" />
+            </colgroup>
+            <thead style="position: sticky; z-index: 99997 !important;" class="sticky-thead"
+                :style="{'top': colheadTop, 
+                'background-color': $vuetify.theme.dark ? '#1e1e1e' : '#fff'}">
+                <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 select-all-th" style="position: relative">
+                        <!-- Replaced this checkbox too, for the colored undeterminate state -->
+                        <div class="v-input--selection-controls__input select-all custom-checkbox" :id="entryidx+'#select-all'" style="user-select: none;
+                            -webkit-user-select: none; cursor: pointer; position: absolute; top: calc(50% - 12px); left: 6px;" @click.stop="toggleDbEntries($event)" :length="entryLength"
+                            title="click to select all the entries">
+                            <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>
+                                    <path class="undeterminate" d="M17,13H7V11H17M19,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>
+                    </th>
+                    <template v-if="isComplex">
+                        <!-- <th class="thin">ID</th> -->
+                        <th class="thin sort-criterion default-down" :class="{'sort-selected':this.sortKey == 'qtm', 'sort-down': this.sortOrder < 0}"
+                            @click="changeSortMode('qtm')" title="Click to sort by Query TM-score">qTM</th>
+                        <th class="thin sort-criterion default-down" :class="{'sort-selected':this.sortKey == 'ttm', 'sort-down': this.sortOrder < 0}"
+                            @click="changeSortMode('ttm')" title="Click to sort by Target TM-score" style="border-right: 1px solid #333; ">tTM</th>
+                    </template>
+                    <th :class="[`wide-${3 - entry.hasDescription - entry.hasTaxonomy}`, {'sort-selected': this.sortKey == 'target', 'sort-down': this.sortOrder < 0}]" 
+                        class="sort-criterion" title="Click to sort by target name" @click="changeSortMode('target')">
+                        <template v-if="isComplex">
+                            Chain pairing
+                        </template>
+                        <template v-else>
+                            Target
+                        </template>
+                    </th>
+                    <th v-if="entry.hasDescription" class="sort-criterion" :class="{'sort-selected':this.sortKey == 'desc', 'sort-down': this.sortOrder < 0}"
+                    @click="changeSortMode('desc')" title="Click to sort by description">
+                        Description
+                        <v-tooltip open-delay="300" top>
+                            <template v-slot:activator="{ on }">
+                                <v-icon v-on="on" style="font-size: 16px; float: right;">{{ $MDI.HelpCircleOutline }}</v-icon>
+                            </template>
+                            <span>Triple click to select whole cell (for very long identifiers)</span>
+                        </v-tooltip>
+                    </th>
+                    <th v-if="entry.hasTaxonomy"  :class="{'sort-selected':this.sortKey == 'tax', 'sort-down': this.sortOrder < 0}" 
+                        class="sort-criterion" @click="changeSortMode('tax')" title="Click to sort by scientific name">Scientific Name</th>
+                    <th class="thin sort-criterion default-down" :class="{'sort-selected':this.sortKey == 'prob', 'sort-down': this.sortOrder < 0}" 
+                        @click="changeSortMode('prob')" title="Click to sort by probability">Prob.</th>
+                    <th class="thin sort-criterion default-down" :class="{'sort-selected':this.sortKey == 'seqId', 'sort-down': this.sortOrder < 0}"
+                        @click="changeSortMode('seqId')" title="Click to sort by sequence identity">Seq. Id.</th>
+                    <th class="thin sort-criterion" :class="{'sort-selected':this.sortKey == 'eval', 'sort-down': this.sortOrder < 0, 'default-down': mode == 'lolalign' || mode == 'tmalign'}"
+                        @click="changeSortMode('eval')" :title="'Click to sort by '+ scoreColumnName">{{ scoreColumnName }}</th> <!-- TODO fixme!! -->
+                    <th class="thin sort-criterion default-down" :class="{'sort-selected':this.sortKey == 'score', 'sort-down': this.sortOrder < 0}"
+                        v-show="tableMode == 1" @click="changeSortMode('score')" title="Click to sort by score">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 }">
+                                <v-icon v-on="on" style="font-size: 16px; float: right;">{{ $MDI.HelpCircleOutline }}</v-icon>
+                            </template>
+                            <span>The position of the aligned region of the target sequence in the query</span>
+                        </v-tooltip>
+                    </th>
+                    <th class="alignment-action thin">Alignment</th>
+                </tr>
+            </thead>
+            <tbody>
+                <template v-for="(groupidx, sortIdx) in sortedIndices" >
+                <tr v-for="(item, index) in entry.alignments[groupidx]" :class="['hit', { 'active' : item.active }]"
+                    @click.stop="$vuetify.breakpoint.width <= 960 ? onCheckboxClick(sortIdx, $event) : () => {}"
+                    :key="`${groupidx}-${index}`"
+                    >
+                    <td v-if="index == 0" :rowspan="entry.alignments[groupidx].length" class="entry-checkbox" :id="entryidx + '#' + groupidx">
+                        <!-- performance issue with thousands of v-checkboxes, hardcode the simple checkbox instead -->
+                        <div class="v-input--selection-controls__input custom-checkbox" 
+                        style="user-select: none; -webkit-user-select: none; cursor: pointer; position: absolute; top: calc(50% - 12px); left: 6px;" 
+                        @click.stop="onCheckboxClick(sortIdx, $event)"
+                        title="click to select, shift-click for multiple selection">
+                            <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="entry.alignments[groupidx].length">{{ entry.alignments[groupidx][0].complexqtm.toFixed(2) }}</td>
+                        <td class="thin" data-label="Target TM-score" :rowspan="entry.alignments[groupidx].length">{{ entry.alignments[groupidx][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" @click.stop></a>
+                        <template v-if="isComplex">
+                            {{ item.query.lastIndexOf('_') != -1 ? item.query.substring(item.query.lastIndexOf('_')+1) : '' }} ➔ 
+                        </template>
+                        <a style="text-decoration: underline; color: #2196f3;" 
+                            v-if="Array.isArray(item.href)" 
+                            @click.stop="emitForwardDropdown($event, item.href)"
+                            rel="noopener" :title="item.target">{{item.target}}</a>
+                        <a v-else :href="item.href" target="_blank" rel="noopener" 
+                            :title="item.target" @click.stop>{{item.target}}</a>
+                    </td>
+                    <td class="long" data-label="Description" v-if="entry.hasDescription">
+                        <span :title="item.description">{{ item.description }}</span>
+                    </td>
+                    <td class="long" v-if="entry.hasTaxonomy" data-label="Taxonomy">
+                        <a :href="'https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?mode=Info&id=' + item.taxId" 
+                            target="_blank" 
+                            rel="noopener" 
+                            :title="item.taxName" 
+                            @click.stop>
+                            {{ item.taxName }}
+                        </a>
+                    </td>
+                    <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-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 ? entry.alignments[groupidx].length : 1" v-if="index == 0">
+                        <!-- performance issue with thousands of v-btns, hardcode the minimal button instead -->
+                        <!-- <v-btn @click="showAlignment(item, $event)" text :outlined="alignment && item.target == alignment.target" icon>
+                            <v-icon v-once>{{ $MDI.NotificationClearAll }}</v-icon>
+                        </v-btn> -->
+                        <button 
+                            @click.stop="showAlignment(groupidx, $event)"
+                            type="button"
+                            class="v-btn v-btn--icon v-btn--round v-btn--text v-size--default"
+                            :class="{ 
+                                        'v-btn--outlined' : alignment && item.target == alignment.target,
+                                        'theme--dark' : $vuetify.theme.dark
+                                    }"
+                            >
+                            <span class="v-btn__content">
+                                <span aria-hidden="true" class="v-icon notranslate 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 d="M5,13H19V11H5M3,17H17V15H3M7,7V9H21V7"></path>
+                                </svg>
+                                </span>
+                            </span>
+                        </button>
+                    </td>
+                </tr>
+                <tr aria-hidden="true" v-if="isComplex" style="height: 15px" :key="`spacer-${groupidx}`" ></tr>
+                </template>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+import Ruler from './Ruler.vue';
+import ResultSankeyMixin from './ResultSankeyMixin.vue';
+import { group } from 'd3';
+
+export default {
+    name: 'ResultFoldseekDB',
+    mixins: [ ResultSankeyMixin ],
+    components: {Ruler},
+    data() {
+        return {
+            toggleTargetValue: true,
+            toggleSourceIdx: -1,
+            visibilityTable: [],
+            selectedDb: "",
+            sortKey: 'prob',
+            sortOrder: -1,
+        }
+    },
+    props: {
+        tableMode: {
+            type: Number,
+            default: 0,
+        },
+        entryidx: {
+            type: Number,
+            default: 0,
+        },
+        entry: {
+            type: Object,
+            default: null
+        },
+        toggleSourceDb: {
+            type: String,
+            default: ""
+        },
+        mode: {
+            type: String,
+            default: ""
+        },
+        selectedStates: {
+            type: Object,
+            default: null
+        },
+        selectedCounts: {
+            type: Number,
+            default: 0,
+        },
+        totalSelectedCounts: {
+            type: Number,
+            default: 0
+        },
+        selectUpperbound: {
+            type: Number,
+            default: 1000
+        },
+        alignment: {
+            type: Object,
+            default: null
+        },
+        closeAlignment: {
+            type: Function,
+            default: () => {}
+        },
+        onlyOne: {
+            type: Boolean,
+            default: false
+        },
+    },
+    watch: {
+        filteredHitsTaxIds: {
+            handler(n, o) {
+                // this.log(n)
+                this.toggleSourceIdx = -1
+                let id = ''
+                let el = undefined
+                if (!n || n.length == 0) {
+                    // reset visibility table
+                    if (this.visibilityTable) {
+                        for (let i = 0; i < this.entryLength; i++) {
+                            this.visibilityTable[i] = true
+                            id = this.entryidx + "#" + String(i)
+                            el = document.getElementById(id)
+                            if (el) {
+                                el.classList.toggle('invisible', false)
+                            }
+                        }
+                    }
+                } else {
+                    for (let i = 0; i < this.entryLength; i++) {
+                        let target = this.isGroupVisible(this.entry.alignments[i])
+                        this.visibilityTable[i] = target
+                        id = this.entryidx + '#' + String(i)
+                        el = document.getElementById(id)
+                        if (el) {
+                            el.classList.toggle('invisible', !target)
+                        }
+                    }
+                }
+            },
+            immediate: false,
+            deep: true,
+        },
+        toggleSourceDb(n, o) {
+            if (n != this.db) {
+                this.toggleSourceIdx = -1
+            }
+        },
+        entry(n, o) {
+            if (n && this.visibilityTable.length == 0) {
+                this.visibilityTable = Array(this.entryLength).fill(true)
+            }
+        }
+    },
+    mounted() {
+        if (this.entry && this.visibilityTable.length == 0) {
+            this.visibilityTable = Array(this.entryLength).fill(true)
+            this.selectedDb = this.db
+            this.$nextTick(() => {
+                setTimeout(() => {
+                    this.reflectSelectionState()
+                }, 0)
+            })
+        }
+    },
+    computed: {
+        origIndicesArr() {
+            return this.entry ? Array.from({length: this.entryLength}, (_, i) => i) : []
+        },
+        db() {
+            return this.entry ? this.entry.db : ""
+        },
+        entryLength() {
+            return this.entry ? Object.values(this.entry.alignments).length : 0
+        },
+        hasEntries() {
+            return this.entry ? this.entryLength > 0 : false
+        },
+        isComplex() {
+            return this.entry?.alignments?.[0]?.[0]?.complexqtm != null
+        },
+        anySelected() {
+            return this.selectedCounts > 0
+        },
+        selectAllStatus() {
+            return this.selectedCounts == this.entryLength
+        },
+        scoreColumnName() {
+            if (__APP__ == 'foldseek') {
+                switch (this.mode) {
+                    case 'tmalign':
+                        return 'TM-score';
+                    case 'lolalign':
+                        return 'LoL-score';
+                }
+            }
+            return 'E-Value';
+        },
+        sortedIndices() {
+            let copiedArr = [...this.origIndicesArr]
+            return copiedArr.sort(this.comparator)
+        },
+        comparator() {
+            let comp = () => {}
+            switch (this.sortKey) {
+                case 'prob':
+                    comp = (a, b) => {
+                        let a_max = Math.max(...this.entry.alignments[a].map(e => e.prob))
+                        let b_max = Math.max(...this.entry.alignments[b].map(e => e.prob))
+                        return this.sortOrder * (a_max - b_max)
+                    }
+                    break;
+
+                case 'target':
+                    comp = (a, b) => {
+                        return this.sortOrder * (this.entry.alignments[a][0].target.localeCompare(this.entry.alignments[b][0].target))
+                    }
+                    break;
+
+                case 'desc':
+                    comp = (a, b) => {
+                        return this.sortOrder * (this.entry.alignments[a][0].description.localeCompare(this.entry.alignments[b][0].description))
+                    }
+                    break;
+
+                case 'tax':
+                    comp = (a, b) => {
+                        return this.sortOrder * (this.entry.alignments[a][0].taxName.localeCompare(this.entry.alignments[b][0].taxName))
+                    }
+                    break;
+
+                case 'seqId':
+                    comp = (a, b) => {
+                        let a_max = Math.max(...this.entry.alignments[a].map(e => e.seqId))
+                        let b_max = Math.max(...this.entry.alignments[b].map(e => e.seqId))
+                        return this.sortOrder * (a_max - b_max)
+                    }
+                    break;
+                
+                case 'score':
+                    comp = (a, b) => {
+                        let a_max = Math.max(...this.entry.alignments[a].map(e => e.score))
+                        let b_max = Math.max(...this.entry.alignments[b].map(e => e.score))
+                        return this.sortOrder * (a_max - b_max)
+                    }
+                    break;
+
+                case 'eval':
+                    // TODO: need to handle tm align and lol align cases, too!
+                    comp = (a, b) => {
+                        let a_max = Math.max(...this.entry.alignments[a].map(e => e.eval))
+                        let b_max = Math.max(...this.entry.alignments[b].map(e => e.eval))
+                        return this.sortOrder * (a_max - b_max)
+                    }
+                    break;
+
+                case 'qtm':
+                    comp = (a, b) => {
+                        let a_max = Math.max(...this.entry.alignments[a].map(e => e.complexqtm))
+                        let b_max = Math.max(...this.entry.alignments[b].map(e => e.complexqtm))
+                        return this.sortOrder * (a_max - b_max)
+                    }
+                    break;
+
+                case 'ttm':
+                    comp = (a, b) => {
+                        let a_max = Math.max(...this.entry.alignments[a].map(e => e.complexttm))
+                        let b_max = Math.max(...this.entry.alignments[b].map(e => e.complexttm))
+                        return this.sortOrder * (a_max - b_max)
+                    }
+                    break;
+            
+                default:
+                    break;
+            }
+            return comp
+        },
+        headTop() {
+            return this.onlyOne ? '92px' : '140px'
+        },
+        colheadTop() {
+            let addend = !this.onlyOne ? 48 : 0
+            let breakpointAddend = this.$vuetify.breakpoint.smAndDown ? 108 : 0
+            return String(172 + addend + breakpointAddend) + 'px'
+        }
+    },
+    methods: {
+        log(a) {
+            console.log(a)
+            return a
+        },
+        switchTableMode(newVal) {
+            this.$emit('switchTableMode', newVal);
+        },
+        toggleDbEntries(value) {
+            if (!this.selectedStates) {
+                return 
+            }
+
+            if (this.selectedCounts > 0) {
+                value = false
+            }
+            
+            if (!value) {
+                const arr = []
+                for (let i = 0; i < this.entryLength; i++) {
+                    if (this.selectedStates[i]) {
+                        arr.push(i)
+                    }
+                }
+                this.$emit('bulkToggle', arr, value)
+                return
+            } 
+
+            const arr = []
+            let deltaUpperbound = this.selectUpperbound - this.totalSelectedCounts
+            let delta = 0
+            for (let i in this.sortedIndices) {
+                if (delta >= deltaUpperbound) {
+                    break
+                }
+                if (this.visibilityTable[i] && this.selectedStates[i] != value) {
+                    arr.push(i)
+                    delta++
+                }
+            }
+            if (delta > 0) {
+                this.$emit('bulkToggle', arr, value)
+            }
+        },
+        emitForwardDropdown(event, href) {
+            this.$emit('forwardDropdown', event, href)
+        },
+        showAlignment(groupidx, event) {
+            this.$emit('showAlignment', this.entry.alignments[groupidx], event)
+        },
+        isGroupVisible(group) {
+            if (!this.filteredHitsTaxIds || this.filteredHitsTaxIds.length === 0) {
+                return true;
+            }
+            let taxFiltered = group.filter(item => this.filteredHitsTaxIds.includes(Number(item.taxId)));
+            return taxFiltered.length > 0;
+        },
+        onCheckboxClick(idx, event) {
+            if (!this.selectedStates) { 
+                return 
+            }
+
+            let targetIdx = this.sortedIndices[idx]
+            let value = !this.selectedStates[targetIdx]
+
+            const needRangedToggle = event.shiftKey && (this.toggleSourceIdx != idx && this.toggleSourceIdx != -1)
+
+            if (!needRangedToggle) {
+                // simple click. just toggle it.
+                // If selected count exceeds upperbound, than simply ignore
+                if (this.totalSelectedCounts > this.selectUpperbound && value) { 
+                    return 
+                }
+                this.toggleSourceIdx = idx
+                this.toggleTargetValue = value
+                this.$emit('updateToggleSource', this.db)
+                this.$emit('toggleSelection', targetIdx, value)
+            } else {
+                const startIdx = Math.min(this.toggleSourceIdx, idx)
+                const endIdx = Math.max(this.toggleSourceIdx, idx) + 1
+                this.handleRangedToggle(startIdx, endIdx, this.toggleTargetValue)
+            }
+        },
+        handleRangedToggle(startIdx, endIdx, value) {
+            if (!this.selectedStates || this.totalSelectedCounts > this.selectUpperbound && value) {
+                return
+            }
+
+            const deltaUpperbound = this.selectUpperbound - this.totalSelectedCounts
+            let delta = 0
+            const deltaUnit = value ? 1 : -1
+            const arr = []
+
+            for (let i = startIdx; i < endIdx; i++) {
+                if (delta >= deltaUpperbound) {
+                    break
+                }
+                let targetIdx = this.sortedIndices[i]
+                if (this.visibilityTable[targetIdx] && this.selectedStates[targetIdx] != value) {
+                    delta += deltaUnit
+                    arr.push(targetIdx)
+                }
+            }
+
+            if (delta != 0) {
+                this.$emit('bulkToggle', arr, value)
+            }
+        },
+        reflectSelectionState() {
+            let value = false
+            let id = ""
+            for (let i = 0; i < this.entryLength; i++) {
+                value = this.selectedStates[i]
+                id = this.entryidx + "#" + String(i)
+                let el = document.getElementById(id)
+                if (el) {
+                    el.classList.toggle('selected', value ? true : false)
+                }
+            }
+            let select_all_button = document.getElementById(this.entryidx + '#select-all')
+            if (select_all_button) {
+                select_all_button.classList.toggle('any-selected', this.selectedCounts > 0)
+                select_all_button.classList.toggle('all-selected', this.selectedCounts == this.entryLength)
+            }
+        },
+        changeSortMode(key) {
+            if (this.sortKey == key) {
+                this.sortOrder *= -1
+            } else {
+                this.sortKey = key
+                switch (key) {
+                    case 'target':
+                    case 'desc':
+                    case 'tax':
+                        this.sortOrder = 1
+                        break
+                    case 'prob':
+                    case 'seqId':
+                    case 'score':
+                    case 'qtm':
+                    case 'ttm':
+                        this.sortOrder = -1
+                        break
+                    case 'eval':
+                        if (this.mode == 'lolalign' || this.mode == 'tmalign') {
+                            this.sortOrder = -1
+                        } else {
+                            this.sortOrder = 1
+                        }
+                        break
+                    default:
+                        break;
+                }
+            }
+            this.toggleSourceIdx = -1
+            this.toggleTargetValue = true
+            this.$nextTick(() => {
+                setTimeout(() => {
+                    this.reflectSelectionState()
+                }, 0)
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.db {
+    border-left: 5px solid black;
+}
+
+.result-table {
+    a.anchor {
+        display: block;
+        position: relative;
+        top: -125px;
+        visibility: hidden;
+    }
+
+    a:not([href]) {
+        color: #333;
+        &:not([href]):hover {
+            text-decoration: none;
+        }
+    }
+
+    tbody {
+        counter-reset: row;
+    }
+
+    tbody tr.hit {
+        counter-increment: row;
+    }
+
+    td, th {
+        padding: 0 6px;
+        text-align: left;
+    }
+
+    .hit.active {
+        background: #f9f9f9;
+    }
+
+    // tbody:hover td[rowspan], tbody tr:hover {
+    //     background: #eee;
+    // }
+
+    .alignment-action {
+        text-align: center;
+        word-wrap: normal;
+    }
+}
+
+.theme--dark {
+    .result-table {
+        a:not([href])  {
+            color: #eee;
+        }
+
+        .hit.active {
+            background: #333;
+        }
+
+        // tbody:hover td[rowspan], tbody tr:hover {
+        //     background: #333;
+        // }
+    }
+}
+
+
+// Sticky thead border
+thead.sticky-thead th {
+    position: relative;
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+thead.sticky-thead th::before {
+    content: "";
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.12);
+    position: absolute;
+    height: 1px;
+    display: block;
+    z-index: inherit;
+}
+.theme--dark thead.sticky-thead th::before {
+    background-color: rgba(255, 255, 255, 0.12);
+}
+
+thead.sticky-thead th.sort-criterion {
+    cursor: pointer;
+    background-color: transparent;
+    transition: color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), background-color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+thead.sticky-thead th.sort-criterion:not(.sort-selected):hover  {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+thead.sticky-thead th.sort-criterion:not(.sort-selected):active  {
+    background-color: rgba(0, 0, 0, 0.15);
+}
+
+.theme--dark .sticky-thead th.sort-criterion:not(.sort-selected):hover  {
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+.theme--dark thead.sticky-thead th.sort-criterion:not(.sort-selected):active  {
+    background-color: rgba(255, 255, 255, 0.15);
+}
+
+thead.sticky-thead th.sort-criterion.sort-selected:hover  {
+    background-color: color-mix(in srgb, var(--active-color) 12%, transparent);
+}
+
+thead.sticky-thead th.sort-criterion.sort-selected:active  {
+    background-color: color-mix(in srgb, var(--active-color) 20%, transparent);
+}
+
+thead.sticky-thead th.sort-criterion::before {
+    transition: background-color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), height 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), bottom 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+thead.sticky-thead th.sort-criterion::after {
+    transform-origin: bottom center;
+    content: "";
+    width: 0;
+    height: 0;
+    bottom: 1px;
+    right: 0;
+    position: absolute;
+    display: block;
+    z-index: inherit;
+    border-bottom: 7px solid transparent;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    background-color: transparent;
+    transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), border-bottom-color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), bottom 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+thead.sticky-thead th.sort-criterion:not(.sort-selected):hover::after {
+    border-bottom-color: rgba(0, 0, 0, 0.15);
+}
+
+.theme--dark .sticky-thead th.sort-criterion:not(.sort-selected):hover::after {
+    border-bottom-color: rgba(255, 255, 255, 0.15);
+}
+
+thead.sticky-thead th.sort-criterion:not(.sort-selected).default-down:hover::after {
+    bottom: 0px;
+    transform: scaleY(-1);
+}
+
+thead.sticky-thead th.sort-criterion.sort-selected::before {
+    background-color: var(--active-color);
+    height: 2px;
+    bottom: -1px;
+}
+
+thead.sticky-thead th.sort-criterion.sort-selected::after {
+    border-bottom-color: var(--active-color);
+}
+
+thead.sticky-thead th.sort-criterion.sort-selected:not(.sort-down)::after {
+    bottom: 1px;
+}
+
+thead.sticky-thead th.sort-criterion.sort-selected.sort-down::after {
+    bottom: -1px;
+    transform: scaleY(-1);
+}
+
+tr.hit .entry-checkbox:not(.selected) path.checked {
+    opacity: 0;
+}
+
+tr.hit .entry-checkbox.selected path.unchecked{
+    opacity: 0;
+}
+
+th.select-all-th .select-all path.undeterminate {
+    opacity: 0;
+}
+
+th.select-all-th .select-all.any-selected:not(.all-selected) path.undeterminate {
+    opacity: 1;
+}
+
+th.select-all-th .select-all:not(.all-selected) path.checked {
+    opacity: 0;
+}
+
+th.select-all-th .select-all.any-selected path.unchecked {
+    opacity: 0;
+}
+
+tr.hit .entry-checkbox svg, .select-all svg {
+    transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+    transition: background-color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+tr.hit .entry-checkbox, .select-all {
+    position: relative;
+}
+
+.custom-checkbox::before,
+.custom-checkbox::after {
+    content: '';
+    transition: opacity  0.3s cubic-bezier(0.075, 0.82, 0.165, 1), background-color  0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+    border-radius: 50%;
+    cursor: pointer;
+    width: 34px;
+    height: 34px;
+    top: calc(50% - 17px);
+    left: calc(50% - 17px);
+    position: absolute;
+    background-color: inherit;
+}
+
+:not(.selected) > .custom-checkbox:not(.any-selected)::before,
+:not(.selected) > .custom-checkbox:not(.any-selected)::after {
+    background-color: rgba(0,0,0,0.54);
+}
+
+.theme--dark :not(.selected) > .custom-checkbox:not(.any-selected)::before,
+.theme--dark :not(.selected) > .custom-checkbox:not(.any-selected)::after {
+    background-color: #fff;
+}
+
+.selected .custom-checkbox::before,
+.selected .custom-checkbox::after,
+.custom-checkbox.any-selected::before,
+.custom-checkbox.any-selected::after
+{
+    background-color: var(--active-color);
+}
+
+.custom-checkbox:not(:hover)::before {
+    opacity: 0;
+}
+
+.custom-checkbox:hover::before {
+    opacity: 0.2;
+}
+
+.custom-checkbox::after {
+    opacity: 0;
+    transition: opacity  0.3s cubic-bezier(0.075, 0.82, 0.165, 1), background-color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+    transform: scale(0);
+    transform-origin: center center;
+}
+
+.custom-checkbox:active::after {
+    opacity: 0.2;
+    transform: scale(1);
+}
+
+tr.hit .entry-checkbox.selected svg, .select-all.any-selected svg {
+    fill: var(--active-color);
+}
+
+tr.hit:has(.invisible) {
+    display: none;
+}
+th.sort-criterion {
+    cursor: pointer;
+}
+
+th.sort-criterion.sort-selected {
+    color: var(--active-color);
+}
+
+
+@media print, screen and (min-width: 961px) {
+    .result-table {
+        table-layout: fixed;
+        border-collapse: collapse;
+        width: 100%;
+        th.thin, td.thin {
+            white-space: nowrap;
+        }
+        .long {
+            overflow: hidden;
+            word-break: keep-all;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}
+
+@media print {
+    .result-table .alignment-action {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 960px) {
+    .result-table {
+        width: 100%;
+        col {
+            width: auto !important;
+        }
+        .long {
+            height: 100% !important;
+            white-space: normal !important;
+            min-height: 48px;
+        }
+        .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;
+        }
+        tfoot th {
+            border: 0;
+            display: inherit;
+        }
+        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: 2em;
+            cursor: pointer;
+        }
+
+        tr.hit:has(.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;
+        }
+        tr td:last-child {
+            border-bottom: 0;
+        }
+        tr:not(:last-child) {
+            margin-bottom: 1rem;
+        }
+        tr:not(.is-selected) {
+            background: inherit;
+        }
+        tr:not(.is-selected):hover {
+            background-color: inherit;
+        }
+        tr.detail {
+            margin-top: -1rem;
+        }
+        tr:not(.detail):not(.is-empty):not(.table-footer) td:not(.entry-checkbox) {
+            display: flex;
+            border-bottom: 1px solid #eee;
+            flex-direction: row;
+
+            &:last-child {
+                border-bottom: 0;
+            }
+        }
+        tr:not(.detail):not(.is-empty):not(.table-footer) td:before {
+            content: attr(data-label);
+            font-weight: 600;
+            margin-right: auto;
+            padding-right: 0.5em;
+            word-break: keep-all;
+            flex: 1;
+            white-space: nowrap;
+        }
+
+        tbody td a, tbody td span {
+            flex: 2;
+            margin-left: auto;
+            text-align: right;
+            word-wrap: anywhere;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/ResultView.vue b/frontend/ResultView.vue
index 6d30936..d4c79c6 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>{{ item .label }}</v-list-item-title>
                                     <v-list-item-subtitle>
                                         {{ item.accession }}
                                     </v-list-item-subtitle>
@@ -78,174 +78,73 @@
                             </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"
+                        v-model="tabModel"
                         show-arrows
                         @change="handleChangeDatabase()"
                         v-if="hits.results.length > 1"
-                    >
-                        <v-tab>All databases</v-tab>
+                        >
+                        <!-- <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' }">
-                        <h2 style="margin-top: 0.5em; margin-bottom: 1em; display: inline-block;" class="mr-auto">
-                            <span style="text-transform: uppercase;">{{ entry.db }}</span> <small>{{ entry.alignments ? Object.values(entry.alignments).length : 0 }} hits</small>
-                        </h2>
-
-                        <!-- Button to toggle Sankey Diagram visibility -->
-                        <v-btn v-if="entry.hasTaxonomy && !isComplex" @click="toggleSankeyVisibility(entry.db)" class="mr-2" large>
-                            {{ isSankeyVisible[entry.db] ? 'Hide Taxonomy' : 'Show Taxonomy' }}
-                        </v-btn>
-                        
-                        <v-btn-toggle mandatory v-model="tableMode" >
-                            <v-btn>
-                                Graphical
-                            </v-btn>
-                    
-                            <v-btn>
-                                Numeric
-                            </v-btn>
-                        </v-btn-toggle>
-                    </v-flex>
-                    <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;">
-                        <colgroup>
-                            <template v-if="isComplex">
-                            <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%;" />
-                            <template v-if="tableMode == 0">
-                                <col style="width: 26.5%;" />
-                            </template>
-                            <template v-else>
-                                <col style="width: 6.5%;" />
-                                <col style="width: 10%;" />
-                                <col style="width: 10%;" />
-                            </template>
-                            <col style="width: 10%;" />
-                        </colgroup>
-                        <thead>
-                            <tr v-if="isComplex">
-                                <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>
-                                <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>
-                                </template>
-                                <th :class="'wide-' + (3 - entry.hasDescription - entry.hasTaxonomy)">
-                                    <template v-if="isComplex">
-                                        Chain paring
-                                    </template>
-                                    <template v-else>
-                                        Target
-                                    </template>
-                                </th>
-                                <th v-if="entry.hasDescription">
-                                    Description
-                                    <v-tooltip open-delay="300" top>
-                                        <template v-slot:activator="{ on }">
-                                            <v-icon v-on="on" style="font-size: 16px; float: right;">{{ $MDI.HelpCircleOutline }}</v-icon>
-                                        </template>
-                                        <span>Triple click to select whole cell (for very long identifiers)</span>
-                                    </v-tooltip>
-                                </th>
-                                <th v-if="entry.hasTaxonomy">Scientific Name</th>
-                                <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">
-                                    Position in query
-                                    <v-tooltip open-delay="300" top>
-                                        <template v-slot:activator="{ on }">
-                                            <v-icon v-on="on" style="font-size: 16px; float: right;">{{ $MDI.HelpCircleOutline }}</v-icon>
-                                        </template>
-                                        <span>The position of the aligned region of the target sequence in the query</span>
-                                    </v-tooltip>
-                                </th>
-                                <th class="alignment-action thin">Alignment</th>
-                            </tr>
-                        </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)">
-                                <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>
-                                </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>
-                                    <template v-if="isComplex">
-                                        {{ item.query.lastIndexOf('_') != -1 ? item.query.substring(item.query.lastIndexOf('_')+1) : '' }} ➔ 
-                                    </template>
-                                    <a style="text-decoration: underline; color: #2196f3;" v-if="Array.isArray(item.href)" @click="forwardDropdown($event, item.href)"rel="noopener" :title="item.target">{{item.target}}</a>
-                                    <a v-else :href="item.href" target="_blank" rel="noopener" :title="item.target">{{item.target}}</a>
-                                </td>
-                                <td class="long" data-label="Description" v-if="entry.hasDescription">
-                                    <span :title="item.description">{{ item.description }}</span>
-                                </td>
-                                <td class="long" v-if="entry.hasTaxonomy" data-label="Taxonomy"><a :href="'https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?mode=Info&id=' + item.taxId" target="_blank" rel="noopener" :title="item.taxName">{{ item.taxName }}</a></td>
-                                <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">
-                                    <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">
-                                    <!-- performance issue with thousands of v-btns, hardcode the minimal button instead -->
-                                    <!-- <v-btn @click="showAlignment(item, $event)" text :outlined="alignment && item.target == alignment.target" icon>
-                                        <v-icon v-once>{{ $MDI.NotificationClearAll }}</v-icon>
-                                    </v-btn> -->
-                                    <button 
-                                        @click="showAlignment(group, entry.db, $event)"
-                                        type="button"
-                                        class="v-btn v-btn--icon v-btn--round v-btn--text v-size--default"
-                                        :class="{ 
-                                                    'v-btn--outlined' : alignment && item.target == alignment.target,
-                                                    'theme--dark' : $vuetify.theme.dark
-                                                }"
-                                        >
-                                        <span class="v-btn__content"><span aria-hidden="true" class="v-icon notranslate 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 d="M5,13H19V11H5M3,17H17V15H3M7,7V9H21V7"></path></svg>
-                                        </span></span>
-                                    </button>
-                                </td>
-                            </tr>
-                            <tr aria-hidden="true" v-if="isComplex" style="height: 15px"></tr>
-                            </template>
-                        </tbody>
-                    </table>
-                    </div>
+                    </v-sheet>
+                <ResultFoldseekDB v-for="(entry, entryidx) in hits.results"  :key="entry.db"
+                    v-if="selectedDatabases == 0 || (entryidx + 1) == selectedDatabases"
+                    :tableMode="tableMode" :entryidx="entryidx" :entry="entry" :toggleSourceDb="toggleSourceDb"
+                    :mode="mode" :selectedStates="selectedStates[entryidx]" :selectedCounts="selectedCountPerDb[entryidx]"
+                    :totalSelectedCounts="selectedCounts" :selectUpperbound="selectUpperbound" :alignment="alignment"
+                    :onlyOne="hits.results.length == 1"
+                    @switchTableMode="(n) => switchTableMode(n)" 
+                    @forwardDropdown="(e, h) => forwardDropdown(e, h)"
+                    @showAlignment="(i, e) => showAlignment(i, entry.db, e)"
+                    @updateToggleSource="(db) => updateToggleSourceDb(db)"
+                    @toggleSelection="(i, v) => handleToggleSelection(entryidx, i, v)"
+                    @bulkToggle="(a, v) => handleBulkToggle(entryidx, a, v)"
+                ></ResultFoldseekDB>
                 </template>
                 </panel>
+                <SelectToSendPanel
+                    :hits="hits" :ticket="ticket" :selectedCounts="selectedCounts"
+                    :isComplex="isComplex" :selectUpperbound="selectUpperbound"
+                    :dbToIdx="dbToIdx" :banList="banList"
+                    :closeAlignment="closeAlignment"
+                    :getSingleSelectionInfo="getSingleSelectionInfo"
+                    :getMultipleSelectionInfo="getMultipleSelectionInfo"
+                    :getSinglePdb="getMockPdb"
+                    :getMockPdb="getMockPdb"
+                    :getFullPdb="fetchStructureFileURL"
+                    @clearAll="clearAllEntries"
+                >
+                </SelectToSendPanel>
+                <NavigationButton 
+                    :selectedDatabases="selectedDatabases" 
+                    :scrollOffsetArr="scrollOffsetArr" 
+                    :tabOffset="tabOffset"
+                    @needUpdate="updateScrollOffsetArr"
+                ></NavigationButton>
             </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"
@@ -260,32 +159,42 @@ import Panel from './Panel.vue';
 import AlignmentPanel from './AlignmentPanel.vue';
 import Ruler from './Ruler.vue';
 import ResultSankeyMixin from './ResultSankeyMixin.vue';
+import AllAtomPredictMixin from './AllAtomPredictMixin.vue';
+import NavigationButton from './NavigationButton.vue';
 
-import { debounce } from './lib/debounce';
+import { mockPDB, mergePdbs, concatenatePdbs, 
+    getChainName, getAccession, getAbsOffsetTop} from './Utilities';
 
-function getAbsOffsetTop($el) {
-    var sum = 0;
-    while ($el) {
-        sum += $el.offsetTop;
-        $el = $el.offsetParent;
-    }
-    return sum;
-}
+import { debounce } from './lib/debounce';
+import ResultFoldseekDB from './ResultFoldseekDB.vue';
+import SelectToSendPanel from './SelectToSendPanel.vue';
 
 export default {
     name: 'ResultView',
-    mixins: [ ResultSankeyMixin ],
-    components: { Panel, AlignmentPanel, Ruler },
+    mixins: [ ResultSankeyMixin, AllAtomPredictMixin ],
+    components: { Panel, AlignmentPanel, Ruler, 
+        NavigationButton, ResultFoldseekDB, SelectToSendPanel },
     data() {
         return {
             alignment: null,
             activeTarget: null,
             alnBoxOffset: 0,
             selectedDatabases: 0,
-            selectedDb: null,
+            selectedStates: {},
+            selectedCountsPerDb: {},
+            selectedCounts: 0,
+            selectedSets: new Set(),
             tableMode: 0,
+            // banList: ['bfmd', 'cath50', 'gmgcl_id'],
+            banList: [],
             menuActivator: null,
             menuItems: [],
+            toggleSourceDb: "",
+            dbToIdx: null,
+            scrollOffsetArr: null,
+            tabOffset: 140,
+            selectUpperbound: 1000,
+            sheetHeights: null,
         }
     },
     props: {
@@ -295,11 +204,67 @@ export default {
         selectedTaxId: null,
     },
     created() {
+        this.getSingleSelectionInfo = this.getSingleSelectionInfo.bind(this)
+        this.getMultipleSelectionInfo = this.getMultipleSelectionInfo.bind(this)
+        this.getMockPdb = this.getMockPdb.bind(this)
+        this.fetchStructureFileURL = this.fetchStructureFileURL.bind(this)
+    },
+    mounted() {
         window.addEventListener("resize", this.handleAlignmentBoxResize, { passive: true });
+        if (this.hits && !this.selectedStates && !this.selectedCountPerDb && !this.dbToIdx) {
+            const obj = Object.fromEntries(
+                n.results.map(( e, i ) => [i, Object.fromEntries(
+                    e.alignments.map((_, j) => [j, false])
+                )])
+            )
+            const obj2 = Object.fromEntries(
+                n.results.map(( e,i ) => [i, 0])
+            )
+            const obj3 = Object.fromEntries(
+                n.results.map((e, i) => [e.db, i])
+            )
+            this.selectedStates = obj
+            this.selectedCountPerDb = obj2
+            this.dbToIdx = obj3
+            this.$nextTick(() => {
+                setTimeout(() => {
+                    this.updateScrollOffsetArr()
+                }, 0)
+            })
+        }
     },
     beforeDestroy() {
         window.removeEventListener("resize", this.handleAlignmentBoxResize);
     },
+    watch: {
+        hits: {
+            handler(n, o) {
+                if (n && n.results) {
+                    const obj = Object.fromEntries(
+                        n.results.map((e, i) => [i, Object.fromEntries(
+                            [...Array(e.alignments.length)].keys().map(j => [j, false])
+                        )])
+                    )
+                    const obj2 = Object.fromEntries(
+                        n.results.map((e, i) => [i, 0])
+                    )
+                    const obj3 = Object.fromEntries(
+                        n.results.map((e, i) => [e.db, i])
+                    )
+                    this.selectedStates = obj
+                    this.selectedCountPerDb = obj2
+                    this.dbToIdx = obj3
+                    this.$nextTick(() => {
+                        setTimeout(() => {
+                            this.updateScrollOffsetArr()
+                        }, 0)
+                    })
+                }
+            },
+            immediate: false,
+            deep: true,
+        },
+    },
     computed: {
         mode() {
             return this.hits?.mode ?? "";
@@ -314,9 +279,9 @@ export default {
             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;
             }
@@ -342,17 +307,16 @@ export default {
 
             return "ERROR";
         },
-        scoreColumnName() {
-            console.log(this.mode)
-            if (__APP__ == 'foldseek') {
-                switch (this.mode) {
-                    case 'tmalign':
-                        return 'TM-score';
-                    case 'lolalign':
-                        return 'LoL-score';
-                }
+        onlyOne() {
+            return this.hits?.results?.length == 1
+        },
+        tabModel: {
+            get() {
+            return this.selectedDatabases - 1;
+            },
+            set(val) {
+            this.selectedDatabases = val + 1;
             }
-            return 'E-Value';
         },
     },
     methods: {
@@ -373,9 +337,14 @@ export default {
                 });
             }
         },
+        switchTableMode(value) {
+            this.tableMode = value
+        },
         closeAlignment() {
-            this.alignment = null;
-            this.activeTarget = null;
+            this.$nextTick(() => {
+                this.alignment = null;
+                this.activeTarget = null;
+            })
         },
         handleAlignmentBoxResize: debounce(function() {
             if (this.activeTarget != null) {
@@ -390,194 +359,290 @@ export default {
         },
         handleChangeDatabase() {
             this.closeAlignment();
-            this.localSelectedTaxId = null;
-            this.filteredHitsTaxIds = [];
         },
-        isGroupVisible(group) {
-            if (!this.filteredHitsTaxIds || this.filteredHitsTaxIds.length === 0) {
-                return true;
+        handleToggleSelection(db, idx, value) {
+            if (!this.selectedStates || !this.selectedStates[db]
+                || this.selectedCounts > this.selectUpperbound && value) {
+                return
+            }
+            
+            const id = db + '#' + idx.toString()
+            const deltaUnit = value ? 1 : -1
+            const toCall = value ? this.selectedSets.add.bind(this.selectedSets) : 
+                this.selectedSets.delete.bind(this.selectedSets)
+            if (this.selectedStates[db][idx] != value) {
+                // Does it really reflect changes?
+                this.selectedStates[db][idx] = value
+                let el = document.getElementById(id)
+                if (el) {
+                    el.classList.toggle('selected', value)
+                }
+                const newVal = this.selectedCountPerDb[db] + deltaUnit
+                this.selectedCountPerDb[db] = newVal
+                this.selectedCounts += deltaUnit
+                toCall(id)
+                
+                // update select-all button state
+                const targetDbLength = this.selectedStates[db].length
+                el = document.getElementById(db + '#select-all')
+                if (el) {
+                    el.classList.toggle('any-selected', newVal > 0)
+                    el.classList.toggle('all-selected', newVal == targetDbLength)
+                }
             }
-            let taxFiltered = group.filter(item => this.filteredHitsTaxIds.includes(Number(item.taxId)));
-            return taxFiltered.length > 0;
         },
-    }
-};
-</script>
-
-<style lang="scss">
-.hide {
-    display: none;
-}
+        handleBulkToggle(db, indices, value) {
+            if (!this.selectedStates || !this.selectedStates[db]
+                || this.selectedCounts > this.selectUpperbound && value) {
+                return
+            }
 
-.db {
-    border-left: 5px solid black;
-}
+            let delta = 0
+            const deltaUnit = value ? 1 : -1
+            const deltaUpperbound = this.selectUpperbound - this.selectedCounts
+            const toCall = value ? this.selectedSets.add.bind(this.selectedSets) : 
+                this.selectedSets.delete.bind(this.selectedSets)
+            
+            for (const i of indices) {
+                if (value && delta >= deltaUpperbound) {
+                    break;
+                }
+                if (this.selectedStates[db][i] != value) {
+                    let id = db + '#' + i.toString()
+                    let el = document.getElementById(id)
+                    if (el) {
+                        el.classList.toggle('selected', value)
+                    }
+                    this.selectedStates[db][i] = value
+                    toCall(id)
+                    delta += deltaUnit
+                }
+            }
+            
+            this.selectedCounts += delta
+            const newVal = this.selectedCountPerDb[db] + delta
+            this.selectedCountPerDb[db] = newVal
+            
+            // update select-all button state
+            const selectAllButton = document.getElementById(db+'#select-all')
+            if (selectAllButton) {
+                const dbLength = Number(selectAllButton.getAttribute('length'))
+                selectAllButton.classList.toggle('any-selected', newVal > 0)
+                selectAllButton.classList.toggle('all-selected', newVal == dbLength)
+            }
+        },
+        clearAllEntries() {
+            if (!this.selectedStates) {
+                return
+            }
+            
+            let el = undefined
+            this.selectedCounts = 0
+            for (const key of Object.keys(this.selectedStates)) {
+                this.selectedCountPerDb[key] = 0
+                
+                // update select-all button states manually
+                el = document.getElementById(key+'#select-all')
+                if (el) {
+                    el.classList.toggle('any-selected', false)
+                    el.classList.toggle('all-selected', false)
+                }
+            }
+            
+            // update selected states manually
+            let prevSelected = document.querySelectorAll('.selected')
+            if (prevSelected.length > 0) {
+                for (let el of prevSelected) {
+                    el.classList.toggle('selected', false)
+                }
+            }
 
-@media print, screen and (max-width: 599px) {
-    small.ticket {
-        display: inline-block;
-        line-height: 0.9;
-    }
-}
+            this.selectedSets.forEach(e => {
+                let [ db, idx ] = e.split('#')
+                this.selectedStates[Number( db )][Number(idx)] = false
+            });
+            this.selectedSets.clear()
+        },
+        getSingleSelectionInfo() {
+            const info = {}
+            if (this.selectedCounts != this.selectedSets.size && this.selectedCounts != 1) {
+                console.error("Inconsistent set size and selected counts")
+                return
+            }
+            let db, idx
 
-.result-table {
-    a.anchor {
-        display: block;
-        position: relative;
-        top: -125px;
-        visibility: hidden;
-    }
+            for (const e of this.selectedSets) {
+                [ db, idx ] = e.split("#")
+                idx = Number(idx)
+                break
+            }
 
-    a:not([href]) {
-        color: #333;
-        &:not([href]):hover {
-            text-decoration: none;
-        }
-    }
+            info.db = this.hits.results[db].db
+            info.idx = idx
+            // If there is no selection, then idx would be -1
+            return info
+        },
+        getMultipleSelectionInfo() {
+            if (this.selectedCounts != this.selectedSets.size && this.selectedCounts < 2) {
+                console.error("Inconsistent set size and selected counts")
+                return
+            }
+            
+            const arr = []
+            for (const e of this.selectedSets) {
+                let [ db, idx ] = e.split('#')
+                idx = Number(idx)
+                arr.push(
+                    {db: this.hits.results[db].db, idx}
+                )
+            }
 
-    td, th {
-        padding: 0 6px;
-        text-align: left;
-    }
+            return arr
+        },
+        async getMockPdb (info /* info: {db, idx} */, signal) {
+            if (signal?.aborted) { 
+                throw new DOMException('Aborted', 'AbortError')
+            }
 
-    .hit.active {
-        background: #f9f9f9;
-    }
+            let {db, idx} = info
+            if (idx == -1) {
+                return;
+            }
 
-    // tbody:hover td[rowspan], tbody tr:hover {
-    //     background: #eee;
-    // }
+            const ticket = this.$route.params.ticket;
+            let response
 
-    .alignment-action {
-        text-align: center;
-        word-wrap: normal;
-    }
-}
+            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') 
+                }
+            }
 
-.theme--dark {
-    .result-table {
-        a:not([href])  {
-            color: #eee;
-        }
+            let dataArr = response.data
+            const arr = []
+            let name = getAccession(dataArr[0].target)
+            let chainset = "_"
 
-        .hit.active {
-            background: #333;
-        }
+            for (let data of dataArr) {
+                if (signal?.aborted) { 
+                    throw new DOMException('Aborted', 'AbortError') 
+                }
+                const chain = getChainName(data.target)
+                chainset += chain
+                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)
+                out = concatenatePdbs(arr) // For now, just concatenate chains into one single chain
+                name += chainset
+            } else {
+                out = arr[0].pdb
+            }
+            return { pdb: out, isMultimer: arr.length > 1, name: name}
+        },
+        updateScrollOffsetArr() {
+            const arr = document.querySelectorAll('[class^="result-entry-"]')
+            const offsetArr = [...arr].map(n => Math.ceil(n.getBoundingClientRect().top + window.scrollY))
+            this.scrollOffsetArr = offsetArr
+        },
+        updateToggleSourceDb(db) {
+            this.toggleSourceDb = db
+        },
+        async fetchStructureFileURL (accession, info, signal=undefined) {
+            const db = info.db
+            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()
+            }
 
-        // tbody:hover td[rowspan], tbody tr:hover {
-        //     background: #333;
-        // }
-    }
-}
+            if (!db || !accession) { 
+                throw new DOMException('Invalid entry', 'FetchError') 
+            }
+            if (signal?.aborted) { 
+                throw new DOMException('Aborted', 'AbortError') 
+            }
 
-@media print, screen and (min-width: 961px) {
-    .result-table {
-        table-layout: fixed;
-        border-collapse: collapse;
-        width: 100%;
-        th.thin, td.thin {
-            white-space: nowrap;
-        }
-        .long {
-            overflow: hidden;
-            word-break: keep-all;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            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()}.cif`
+                    return await fetchWithURL(url, true)
+                } else { 
+                    const mock = await this.getMockPdb(info, signal)
+                    // throw new Error()
+                    const pdb = await this.predictGivenPdb(mock.pdb, signal)
+                    return pdb
+                }
+            } catch (error) {
+                throw error
+            }
         }
     }
-}
+};
+</script>
 
-@media print {
-    .result-table .alignment-action {
-        display: none;
-    }
+<style lang="scss">
+.hide {
+    display: none;
 }
 
-@media screen and (max-width: 960px) {
-    .result-table {
-        width: 100%;
-        col {
-            width: auto !important;
-        }
-        .long {
-            height: 100% !important;
-            white-space: normal !important;
-            min-height: 48px;
-        }
-        .hits {
-            min-width: 300px;
-        }
-        tbody td a {
-            min-width: 100px;
-        }
-        tbody td.graphical div.ruler {
-            margin: 10px 0;
-        }
-        thead {
-            display: none;
-        }
-        tfoot th {
-            border: 0;
-            display: inherit;
-        }
-        tr {
-            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;
-        }
-        tr td {
-            border: 0;
-            display: inherit;
-        }
-        tr td:last-child {
-            border-bottom: 0;
-        }
-        tr:not(:last-child) {
-            margin-bottom: 1rem;
-        }
-        tr:not(.is-selected) {
-            background: inherit;
-        }
-        tr:not(.is-selected):hover {
-            background-color: inherit;
-        }
-        tr.detail {
-            margin-top: -1rem;
-        }
-        tr:not(.detail):not(.is-empty):not(.table-footer) td {
-            display: flex;
-            border-bottom: 1px solid #eee;
-            flex-direction: row;
-
-            &:last-child {
-                border-bottom: 0;
-            }
-        }
-        tr:not(.detail):not(.is-empty):not(.table-footer) td:before {
-            content: attr(data-label);
-            font-weight: 600;
-            margin-right: auto;
-            padding-right: 0.5em;
-            word-break: keep-all;
-            flex: 1;
-            white-space: nowrap;
-        }
 
-        tbody td a, tbody td span {
-            flex: 2;
-            margin-left: auto;
-            text-align: right;
-            word-wrap: anywhere;
-        }
+@media print, screen and (max-width: 599px) {
+    small.ticket {
+        display: inline-block;
+        line-height: 0.9;
     }
 }
 
+// mask the gap between sticky tab and top of parent element
+// unless it would show passing elements through the gap
+.sticky-tabs::before {
+    content: "";
+    width: 100%;
+    position: absolute;
+    top: -16px;
+    background-color: inherit;
+    display: block;
+    height: 16px;
+    z-index: inherit;
+} 
+
 .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/SelectToSendPanel.vue b/frontend/SelectToSendPanel.vue
new file mode 100644
index 0000000..2947c2c
--- /dev/null
+++ b/frontend/SelectToSendPanel.vue
@@ -0,0 +1,448 @@
+<template>
+    <div>
+        <!-- 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': $vuetify.breakpoint.smAndDown ? '16px' : '30%',
+            'bottom': '16px', 'z-index': 99998, 'align-items': 'center', 'justify-content': $vuetify.breakpoint.smAndDown ? 'flex-start' : 'space-between', 'opacity': loading ? 0.4 : 1}" 
+            class="d-flex pa-2" v-if="selectedCounts > 0" 
+            >
+                <v-chip label close color="primary" style="margin-right: 24px;" 
+                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" 
+                                :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' : '#FFC107'" :value="errorFoldDiscoBtn">
+                            <template v-slot:activator="{on, attrs}">
+                                <!-- TODO: change FoldDisco color! -->
+                                <v-btn v-bind="attrs" v-on="on" fab class="elevation-8 fold-disco-btn" 
+                                :class="{'btn-disabled':isSelectionUnableToFetch}" style="color: #fff"
+                                :color="errorFoldDiscoBtn ? 'error' : '#FFC107'" 
+                                :loading="loading" 
+                                @click="isSelectionUnableToFetch ? () => {} : 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'" 
+                                :loading="loading" @click="sendToFoldMason">
+                                    <v-icon>{{$MDI.Wall}}</v-icon>
+                                </v-btn>
+                            </template>
+                            <span v-html="toFoldMasonContent"></span>
+                        </v-tooltip>
+                    </template>
+                </v-flex>
+            </v-sheet>
+        </v-fade-transition>
+        <portal>
+            <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>
+    </div>
+</template>
+
+<script>
+
+import { StorageWrapper} from './lib/HistoryMixin.js';
+import { getAccession, sleep } from './Utilities';
+import { BlobDatabase } from './lib/BlobDatabase';
+
+const localDb = BlobDatabase()
+
+export default {
+    name: 'SelectToSendPanel',
+    data() {
+        return {
+            errorFoldseekBtn: false,
+            errorFoldMasonBtn: false,
+            errorFoldDiscoBtn: false,
+            cancelCtl: null,
+            loading: false,
+        }
+    },
+    props: {
+        hits: {
+            type: Object,
+            default: {}
+        },
+        ticket: {
+            type: String,
+            default: ""
+        },
+        selectedCounts: {
+            type: Number,
+            default: 0,
+        },
+        isComplex: {
+            type: Boolean,
+            default: false
+        },
+        selectUpperbound: {
+            type: Number,
+            default: 1000
+        },
+        dbToIdx: {
+            type: Object,
+            default: {}
+        },
+        banList: {
+            type: Array,
+            default: []
+        },
+        getSingleSelectionInfo: {
+            type: Function,
+            default: () => {}
+        },
+        getMultipleSelectionInfo: {
+            type: Function,
+            default: () => {}
+        },
+        getSinglePdb: {
+            type: Function,
+            default: async () => {}
+        },
+        getMockPdb: {
+            type: Function,
+            default: async () => {}
+        },
+        getFullPdb: {
+            type: Function,
+            default: async () => {}
+        },
+        getOrigPdb: {
+            type: Function,
+            default: async () => {}
+        },
+        batchSize: {
+            type: Number,
+            default: 256,
+        },
+        chunkSize: {
+            type: Number,
+            default: 128,
+        }
+    },
+    watch: {
+        selectedCounts() {
+            this.errorFoldDiscoBtn=false
+            this.errorFoldMasonBtn=false
+            this.errorFoldseekBtn=false
+        },
+    },
+    methods: {
+        getEntry(db, idx) {
+            let dbIdx = this.dbToIdx[db]
+            return this.hits?.results[dbIdx]?.alignments?.[idx]
+        },
+        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.getSinglePdb(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 = this.prependRemark(result.pdb, result.name, info.db);
+            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 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);
+                    
+                    await sleep(250)
+                }
+                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(), this.batchSize, async (i, s) => await this.getMockPdb(i, s), signal)
+                settled.filter(r => r.status == 'rejected').map(r => console.warn(r.reason))
+                const values = settled.filter(r => r.status == "fulfilled" && !(!r.value?.pdb)).map(r => {
+                    return {text: r.value?.pdb, name: r.value?.name};
+                })
+                // const failed = settled.filter(r => r.status == "fulfilled" && !r.value?.pdb).map(r=> r.value?.name)
+                await saveAsChunk(values, this.chunkSize, signal)
+                this.loading = false
+                this.cancelCtl = null
+            } catch (e) {
+                if (e?.name == 'AbortError') {
+                    console.log("Job canceled")
+                } else {
+                    this.errorFoldMasonBtn = true
+                    console.error(e)
+                }
+                this.loading = false
+                this.cancelCtl = null
+                return
+            }
+            this.$router.push({name:'foldmason'})
+        },
+        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 target = this.hits.results[this.dbToIdx?.[selection.db]]?.alignments?.[selection.idx]?.[0]
+            let targetPdb
+            let motifs
+            try {
+                const signal = this.cancelCtl.signal
+                let result = await this.getOrigPdb(target, selection.db, signal)
+                if (!result) {
+                    targetPdb = await this.getFullPdb(target.target, selection, signal)
+                    motifs = ""
+                } else {
+                    [targetPdb, motifs] = result
+                    motifs = motifs
+                        .replace(/^_,(_,)*|(,_)*,_$/g, '')
+                        .replace(/,_,(_,)*/g, ',')
+                }
+            } 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')
+            const accession = getAccession(target.target)
+
+            await localDb.setItem('folddisco.query', this.prependRemark(targetPdb, accession, selection.db))
+            await storage.setItem('motif', motifs)
+            this.$router.push({name: "folddisco"})
+        },
+        cancelJob() {
+            this.cancelCtl?.abort()
+        },
+        clearAllEntries() {
+            if (this.loading) return
+            this.$emit('clearAll')
+        },
+        prependRemark(structure, accession, db) {
+            let is_cif = false
+            if (structure[0] == '#' || structure.startsWith('data_')) {
+                is_cif = true
+            }
+            
+            let prefix = is_cif ? '# ' : 'REMARK  99 '
+            let firstline = prefix + 'Accession: ' + accession + ', DB: ' + db
+            if (!is_cif && firstline.length > 79) {
+                firstline = firstline.slice(76) + '... '
+            }
+
+            firstline = firstline.padEnd(80, ' ') + '\n' + prefix + this.remarkStr
+            return firstline + structure
+        },
+
+    },
+    computed: {
+        isSelectionComplex() {
+            if (this.selectedCounts != 1 || !this.isComplex) { 
+                return false 
+            }
+
+            const selection = this.getSingleSelectionInfo();
+            if (selection.idx == -1) { 
+                return false 
+            }
+
+            if (this.getEntry(selection.db, selection.idx)?.length > 1) { 
+                return true 
+            } else { 
+                return false 
+            }
+        },
+        isSelectionUnableToFetch() {
+            if (this.banList.length == 0 || this.selectedCounts != 1) { 
+                return false 
+            }
+            const selection = this.getSingleSelectionInfo();
+            if (selection.idx == -1) { 
+                return false 
+            }
+
+            return this.banList.includes(selection.db)
+        },
+        selectionBannerContent() {
+            if (this.selectedCounts == 0) { 
+                return 'No selection' 
+            } else if (this.selectedCounts > 1) {
+                return '(' +  this.selectedCounts.toString() + " / " 
+                    + this.selectUpperbound.toString() + ") entries" + " selected"
+            } else {
+                if (this.$vuetify.breakpoint.smAndDown) return "1 entry selected"
+
+                const selection = this.getSingleSelectionInfo()
+                if (selection.idx == -1) { 
+                    return '' 
+                }
+
+                let str = (this.getEntry(selection.db, selection.idx)?.[0]?.target)
+                if (!str) { 
+                    return '' 
+                }
+                if (str.length >= 15) {
+                    str = '<span title="' + str + '" >'  + str.slice(0, 16) + '...</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' + (this.isComplex ? "<br><i>*Combine multiple chains<br>into a single chain</i>" :  "")
+            }
+        },
+        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' 
+            }
+        },
+        remarkStr() {
+            let str = 'Imported from '
+            let t = this.ticket
+            if (t.length > 55) {
+                t = t.slice(52) + '...'
+            }
+            return (str + t).padEnd(69, ' ') + '\n'
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.fold-disco-btn.btn-disabled {
+    background-color: rgba(255,193,7,.12) !important;
+    color: rgba(0,0,0,.24) !important;
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/StructureViewer.vue b/frontend/StructureViewer.vue
index cb2259a..b8190c8 100644
--- a/frontend/StructureViewer.vue
+++ b/frontend/StructureViewer.vue
@@ -38,7 +38,7 @@
 import StructureViewerTooltip from './StructureViewerTooltip.vue';
 import StructureViewerToolbar from './StructureViewerToolbar.vue';
 import StructureViewerMixin from './StructureViewerMixin.vue';
-import { mockPDB, makeSubPDB, transformStructure, makeMatrix4  } from './Utilities.js';
+import { mockPDB, makeSubPDB, transformStructure, makeMatrix4, storeChains, revertChainInfo } from './Utilities.js';
 import { pulchra } from 'pulchra-wasm';
 import { tmalign, parse as parseTMOutput, parseMatrix as parseTMMatrix } from 'tmalign-wasm';
 
@@ -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" });
@@ -471,7 +479,11 @@ END
                     // FIXME: pulchra probably should learn mmCIF
                     queryPdb = getPdbText(query);
                 }
+                // As pulchra loses the chain information, it could result in mismatch between selection and pulchra-generated pdb
+                // So we should store chain information of pdb structure information and recover it
+                const chains = storeChains(queryPdb)
                 queryPdb = await pulchra(queryPdb);
+                queryPdb = revertChainInfo(queryPdb, chains)
                 this.stage.removeComponent(query);
                 query = await this.stage.loadFile(new Blob([queryPdb], { type: 'text/plain' }), {ext: 'pdb', firstModelOnly: true, name: 'queryStructure'}); 
             }
diff --git a/frontend/Utilities.js b/frontend/Utilities.js
index d2c5e5a..0fc05be 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 null;
-    } catch (e) {
-        return null;
+        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,
+          },
+        ];
+      }
     }
+    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,85 @@ 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");
+}
+
+/**
+ *
+ * @param {*} chainPdbs : Ca only pdb files with chain information in [{pdb, chain}] format
+ * @returns concatenated pdb string
+ * @abstract Concatenate multiple chains into one pdb files with single chain A
+ */
+export function concatenatePdbs(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. and residue sequence no.
+        let s = serial.toString().padStart(5, " ");
+        let rs = serial.toString().padStart(4, " ");
+        let l = line.padEnd(80, " ");
+        l = l.slice(0, 6) + s + l.slice(11, 21) + "A" + rs + l.slice(26);
+        out.push(l);
+        serial++;
+      }
+    }
+  }
+  out.push("TER");
+  out.push("END");
+  return out.join("\n");
 }
 
 /* ------ The rotation matrix to rotate Chain_1 to Chain_2 ------ */
@@ -449,22 +629,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 +652,270 @@ 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 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);
+}
+
+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);
         }
-        let progress = Math.min(1, (currentTime - startTime) / duration);
-        let interpolated = interpolateMatrices(oldMatrix, newMatrix, progress);
-        structure.setTransform(interpolated);
-        if (progress < 1) {
-            window.requestAnimationFrame(animate);
+      } 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);
+        }
+      }
+    });
+  }
+
+  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");
+}
+
+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;
+  }
+};
+
+export function storeChains(pdb) {
+  const arr = [];
+  let c = "";
+  for (let line of pdb.split("\n")) {
+    if (line.startsWith("ATOM")) {
+      c = line.charAt(21);
+    } else if (line.startsWith("TER")) {
+      arr.push(c);
     }
-    window.requestAnimationFrame(animate);
+  }
+  if (arr.length == 0) {
+    arr.push(c);
+  }
+  return arr;
 }
 
-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);
-                }
-            }
-        });
+export function revertChainInfo(pdb, chains) {
+  if (chains.length == 0 || chains[0] == "") {
+    return pdb;
+  }
+
+  const arr = [];
+  let i = 0;
+
+  for (let line of pdb.split("\n")) {
+    if (line.startsWith("ATOM")) {
+      line = line.slice(0, 21) + chains[i] + line.slice(22);
+    } else if (line.startsWith("TER")) {
+      i++;
     }
 
-    if (Object.keys(models).length === 0) {
-        models['single model'] = chainSet;
+    arr.push(line);
+  }
+
+  return arr.join("\n");
+}
+
+export function getAbsOffsetTop($el) {
+  var sum = 0;
+  while ($el) {
+    sum += $el.offsetTop;
+    $el = $el.offsetParent;
+  }
+  return sum;
+}
+
+export 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";
+};
+
+export const getAccession = (name) => {
+  if (/^AF-\w+-/.test(name)) {
+    name = name.split("-")[1];
+  }
+
+  if (/_v[0-9]+$/.test(name)) {
+    return name;
+  }
+
+  if (/_unrelaxed_rank_/.test(name)) {
+    let pos = name.indexOf("_unrelaxed_rank_");
+    return pos != -1 ? name.substring(0, pos) : name;
+  }
+
+  let pos = name.lastIndexOf("_");
+  return pos != -1 ? name.substring(0, pos) : name;
+};
+
+/**
+ * Throttle function
+ * @param {Function} func - function to be applied throttle
+ * @param {number} delay - delay in ms unit
+ * @returns {Function} - new function with throttle
+ */
+export function throttle(func, delay) {
+  let lastCallTime = 0;
+
+  return function (...args) {
+    const context = this;
+    const now = Date.now();
+
+    if (now - lastCallTime >= delay) {
+      lastCallTime = now;
+      func.apply(context, args);
     }
-    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
+export const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
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 };
diff --git a/frontend/lib/throttle.js b/frontend/lib/throttle.js
new file mode 100644
index 0000000..3dcba37
--- /dev/null
+++ b/frontend/lib/throttle.js
@@ -0,0 +1,19 @@
+/**
+ * Throttle function
+ * @param {Function} func - function to be applied throttle
+ * @param {number} delay - delay in ms unit
+ * @returns {Function} - new function with throttle
+ */
+export function throttle(func, delay) {
+  let lastCallTime = 0;
+
+  return function (...args) {
+    const context = this;
+    const now = Date.now();
+
+    if (now - lastCallTime >= delay) {
+      lastCallTime = now;
+      func.apply(context, args);
+    }
+  };
+}
diff --git a/frontend/navigationButton.vue b/frontend/navigationButton.vue
new file mode 100644
index 0000000..8452fc9
--- /dev/null
+++ b/frontend/navigationButton.vue
@@ -0,0 +1,165 @@
+<template>
+    <v-sheet color="transparent" style="position: fixed; width: 200px; right: 16px; bottom: 16px; z-index: 99998; align-items: center; justify-content: flex-end;"
+    class="d-flex pa-2">
+      <v-flex shrink style="flex-direction: row;">
+        <v-tooltip top>
+          <template v-slot:activator='{on,attrs}'>
+            <v-fab-transition>
+              <v-btn small v-bind="attrs" v-on="on" fab 
+                v-show="enableScrollPrev" @click="goTo(scrollPrevTarget)">
+                <v-icon>{{ $MDI.ChevronUp }}</v-icon>
+              </v-btn>
+            </v-fab-transition>
+          </template>
+          <span>Scroll to prev. cluster</span>
+        </v-tooltip>
+        <v-tooltip top>
+          <template v-slot:activator='{on,attrs}'>
+            <v-fab-transition>
+              <v-btn small v-bind="attrs" v-on="on" fab 
+              v-show="enableScrollNext" @click="goTo(scrollNextTarget)">
+              <v-icon>{{ $MDI.ChevronDown }}</v-icon>
+              </v-btn>
+            </v-fab-transition>
+          </template>
+          <span>Scroll to next cluster</span>
+        </v-tooltip>
+    </v-flex>
+    <v-tooltip top color="primary">
+      <template v-slot:activator='{on,attrs}'>
+        <v-fab-transition>
+          <v-btn class="ml-3" color="primary" fab v-show="enableScrollTop" @click="goTo(0)" v-bind="attrs" v-on="on">
+            <v-icon>{{ $MDI.DoubleChevronUp }}</v-icon>
+        </v-btn>
+        </v-fab-transition>
+      </template>
+      <span>Scroll to top</span>
+    </v-tooltip>
+  </v-sheet>
+</template>
+<script>
+import { throttle } from './Utilities.js';
+export default {
+  name: 'NavigationButton',
+  data() {
+    return {
+      enableScrollTop: false,
+      enableScrollNext: false,
+      enableScrollPrev: false,
+      scrollNextTarget: 0,
+      scrollPrevTarget: 0,
+      scrollOption: {
+        duration: 500,
+        offset: 0,
+        easing: 'easeInOutQuart'
+      },
+      throttled: null,
+      observer: null,
+    }
+  },
+  props: {
+    selectedDatabases: {
+      type: Number,
+      default: -1
+    },
+    scrollOffsetArr: {
+      type: Array,
+      default: []
+    },
+    tabOffset: {
+      type: Number,
+      default: 140
+    }
+  },
+  emits: [
+    'needUpdate'
+  ],
+  watch: {
+    scrollOffsetArr: {
+      handler(n, o) {
+        if (n != o) {
+          this.updateScrollStates()
+        }
+      }
+    }
+  },
+  mounted() {
+    this.throttled = throttle(this.updateScrollStates, 64)
+    window.addEventListener("scroll", this.throttled, {passive: true})
+    window.addEventListener("scrollend", this.updateScrollStates, {passive: true})
+    this.observer = new ResizeObserver(this.emitEvent)
+    this.observer.observe(document.documentElement)
+  },
+  beforeDestroy() {
+    window.removeEventListener("scroll", this.throttled)
+    window.removeEventListener("scrollend", this.updateScrollStates)
+    this.observer.disconnect()
+  },
+  methods: {
+    getCurrentScrollDbIdx() {
+        const currOffset = window.scrollY + this.tabOffset
+        let idx = 0
+        for (let i = 0; i < this.scrollOffsetArr.length; i++) {
+            if (this.scrollOffsetArr[i] > currOffset+1) {
+                break
+            } else {
+                idx = i
+            }
+        }
+        return idx
+    },
+    updateScrollStates() {
+        let offset = window.scrollY
+        let innerHeightHalf = window.innerHeight / 2
+        
+        if (offset >= innerHeightHalf) {
+            this.enableScrollTop = true
+        } else {
+            this.enableScrollTop = false
+        }
+
+        if (this.selectedDatabases != 0 || this.scrollOffsetArr?.length < 2) {
+            this.enableScrollNext = false
+            this.enableScrollPrev = false
+            return
+        }
+        
+        let currIdx = this.getCurrentScrollDbIdx()
+        let endOfPage = offset + (2 * innerHeightHalf) >= document.documentElement.scrollHeight
+
+        // scrollNext behavior
+        if (currIdx == this.scrollOffsetArr?.length-1 || endOfPage) {
+            this.enableScrollNext = false
+        } else {
+            this.enableScrollNext = true
+            this.scrollNextTarget = this.scrollOffsetArr?.[currIdx+1] - this.tabOffset
+        }
+
+        // scrollPrev behavior
+        if (offset >= this.scrollOffsetArr?.[0] + innerHeightHalf - this.tabOffset) {
+            this.enableScrollPrev = true
+            if (offset + this.tabOffset >= this.scrollOffsetArr?.[currIdx] + innerHeightHalf) {
+                this.scrollPrevTarget = this.scrollOffsetArr?.[currIdx] - this.tabOffset
+            } else {
+                this.scrollPrevTarget = currIdx == 0 ? 0 : this.scrollOffsetArr?.[currIdx-1] - this.tabOffset
+            }
+        } else {
+            this.enableScrollPrev = false
+        }
+    },
+    goTo(target) {
+      window.scrollTo({
+        top: target,
+        left: 0,
+        behavior: 'smooth'
+      })
+      setTimeout(() => {this.updateScrollStates()}, 300)
+    },
+    emitEvent() {
+      this.$emit('needUpdate')
+    }
+  },
+}
+</script>
+<style lang="scss">
+</style>
\ No newline at end of file