Made multimers processed by Foldmason be parsed and visualized properly.

dannydoor · dannydoor · commit 789339745823 · 2026-02-19T16:08:53.000+09:00
note: cif format is not yet supported.
diff --git a/frontend/FoldMasonSearch.vue b/frontend/FoldMasonSearch.vue
@@ -48,7 +48,7 @@
                             :value="q.name"
                             @click:close="removeQuery(index)"
                         >
-                            {{ q.name }}
+                            {{ q.name.split('-_-_-_')[0] }}
                         </v-chip>
                     </div>
                 </div>
diff --git a/frontend/MSA.vue b/frontend/MSA.vue
@@ -407,8 +407,70 @@ export default {
         }, 400),
     },
     beforeMount() {
+        const parseSuffix = (suffix) => {
+            if (!suffix) return []
+
+            return suffix.split("-").map((s) => {
+                const out = {};
+                const info = s.split("_");
+
+                if (info.length != 3) return out;
+
+                out.chain = info[0];
+                out.end = Number(info[1]);
+                out.offset = Number(info[2]);
+                return out;
+            });
+        }
+
+        const chainToOffset = (arr) => {
+            if (!arr || arr.length == 0) {
+                return {'A' : 0}
+            }
+
+            const out = {}
+            for (let obj of arr) {
+                out[obj.chain] = obj.offset
+            }
+            return out
+        }
+
+        const indexToChainAndOrigResn = (aa, arr) => {
+            const length = aa.replaceAll('-', '').length
+            const chains = Array(length + 1).fill('A')
+            const resns = Array.from({length: length + 1}, (_, i) => i)
+
+            if (!arr || arr.length == 0) {
+                return {chains: chains, resns: resns}
+            }
+
+            let index = 0
+
+            for (let i = 1; i < length + 1; i++) {
+                chains[i] = arr[index].chain
+                resns[i] = i - arr[index].offset
+
+                if (i == arr[index].end) {
+                    index++
+                }
+            }
+            return {chains: chains, resns: resns}
+        }
+
         this.handleUpdateMatchRatio();
+        
         for (let entry of this.entries) {
+            if (/-_-_-_/.test(entry.name)) {
+                entry.suffix = entry.name.split("-_-_-_")[1];
+            }
+            const parsed = parseSuffix(entry.suffix)
+
+            entry.offsets = chainToOffset(parsed)
+
+            const obj = indexToChainAndOrigResn(entry.aa, parsed)
+            entry.chains = obj.chains
+            entry.resns = obj.resns
+            
             entry.name = tryFixName(entry.name)
         }
     },
@@ -455,7 +517,10 @@ export default {
                 const copy = {
                     name: entry.name,
                     aa: "",
-                    ss: ""
+                    ss: "",
+                    offsets: entry.offsets,
+                    chains: entry.chains,
+                    suffix: entry.suffix,
                 }
                 for (let i = 0; i < this.mask.length; i++) {
                     if (this.mask[i] === 1) {
diff --git a/frontend/MSAView.vue b/frontend/MSAView.vue
@@ -3,70 +3,70 @@
     <div class="msa-wrapper" ref="msaWrapper">
         <div v-for="([start, end], i) in blockRanges" class="msa-block-wrapper">
             <div class="msa-block" @mousemove="onBlockMouseMove($event, start, end)" @mouseleave="onBlockMouseLeave" @click="onBlockClick($event, start, end)">
-            <span class="conservation-label">Conservation</span>
-            <svg
-                class="conservation-track"
-                :viewBox="`0 0 ${end - start} ${conservationHeight}`"
-                :style="{
-                    gridColumn: 2,
-                    gridRow: 1,
-                    width: 'calc((1ch + 4px) * ' + String(end - start) + ')',
-                    height: conservationHeight + 'px',
-                    transform: 'translateX(-2px)'
-                }"
-                preserveAspectRatio="none"
-            >
-                <path :d="conservationPath(getConservationRange(start, end))" />
-                <g :transform="`scale(${1 / conservationScaleX}, 1)`">
-                    <text
-                        v-for="(idx) in getConservationMaxCols(start, end)"
-                        :key="`cons-max-${i}-${idx}`"
-                        class="conservation-max"
-                        :x="(idx + 0.5) * conservationScaleX"
-                        y="0"
-                        text-anchor="middle"
-                        dominant-baseline="hanging"
-                    >*</text>
-                </g>
-            </svg>
-        <!-- <SequenceLogo
-            :sequences="getEntryRanges(start, end, makeGradients=false)"
-            :alphabet="alphabet"
-            :lineLen="lineLen"
-        /> -->
-        <template v-for="({ name, aa, ss, seqStart, css }, j) in getEntryRanges(start, end)">
-            <span class="header" :title="name" :style="headerStyle(j)" @click="handleClickHeader($event, j)">{{
-                name }}</span>
-            <div class="sequence-wrapper" :style="sequenceStyle(j)">
-                <span class="sequence"
-                    :style="[css, { 'color': sequenceColor, 'font-weight': fontWeight }]">{{
-                    alphabet == 'aa' ? aa : ss }}</span>
-            </div>
-            <div class="column-wrapper" v-if="j == 0" :style="overlayStyle(aa.length)">
-                <div
-                    v-for="idx in getBlockHighlights(start, end)"
-                    :key="`sel-${i}-${idx}`"
-                    class="column-marker column-active"
-                    :style="columnMarkerStyle(idx, end - start)"
-                ></div>
-                <div
-                    v-if="getHoverLocalIndex(start, end) !== null"
-                    class="column-marker column-hover"
-                    :style="columnMarkerStyle(getHoverLocalIndex(start, end), end - start)"
-                ></div>
-                <div
-                    v-if="getPreviewLocalIndex(start, end) !== null"
-                    class="column-marker column-preview"
-                    :style="columnMarkerStyle(getPreviewLocalIndex(start, end), end - start)"
-                ></div>
-                <div
-                    v-if="hoverInfo && hoverInfo.start === start && hoverInfo.rowIndex !== null"
-                    class="residue-hover"
-                    :style="residueMarkerStyle(hoverInfo, end - start)"
-                ></div>
-            </div>
-            <span class="count" :style="countStyle(j)">{{ countSequence(aa, seqStart).toString() }}</span>
-        </template>
+                <span class="conservation-label">Conservation</span>
+                <svg
+                    class="conservation-track"
+                    :viewBox="`0 0 ${end - start} ${conservationHeight}`"
+                    :style="{
+                        gridColumn: 2,
+                        gridRow: 1,
+                        width: 'calc((1ch + 4px) * ' + String(end - start) + ')',
+                        height: conservationHeight + 'px',
+                        transform: 'translateX(-2px)'
+                    }"
+                    preserveAspectRatio="none"
+                >
+                    <path :d="conservationPath(getConservationRange(start, end))" />
+                    <g :transform="`scale(${1 / conservationScaleX}, 1)`">
+                        <text
+                            v-for="(idx) in getConservationMaxCols(start, end)"
+                            :key="`cons-max-${i}-${idx}`"
+                            class="conservation-max"
+                            :x="(idx + 0.5) * conservationScaleX"
+                            y="0"
+                            text-anchor="middle"
+                            dominant-baseline="hanging"
+                        >*</text>
+                    </g>
+                </svg>
+            <!-- <SequenceLogo
+                :sequences="getEntryRanges(start, end, makeGradients=false)"
+                :alphabet="alphabet"
+                :lineLen="lineLen"
+            /> -->
+                <template v-for="({ name, aa, ss, seqStart, css }, j) in getEntryRanges(start, end)">
+                    <span class="header" :title="name" :style="headerStyle(j)" @click="handleClickHeader($event, j)">{{
+                        name }}</span>
+                    <div class="sequence-wrapper" :style="sequenceStyle(j)">
+                        <span class="sequence"
+                            :style="[css, { 'color': sequenceColor, 'font-weight': fontWeight }]">{{
+                            alphabet == 'aa' ? aa : ss }}</span>
+                    </div>
+                    <div class="column-wrapper" v-if="j == 0" :style="overlayStyle(aa.length)">
+                        <div
+                            v-for="idx in getBlockHighlights(start, end)"
+                            :key="`sel-${i}-${idx}`"
+                            class="column-marker column-active"
+                            :style="columnMarkerStyle(idx, end - start)"
+                        ></div>
+                        <div
+                            v-if="getHoverLocalIndex(start, end) !== null"
+                            class="column-marker column-hover"
+                            :style="columnMarkerStyle(getHoverLocalIndex(start, end), end - start)"
+                        ></div>
+                        <div
+                            v-if="getPreviewLocalIndex(start, end) !== null"
+                            class="column-marker column-preview"
+                            :style="columnMarkerStyle(getPreviewLocalIndex(start, end), end - start)"
+                        ></div>
+                        <div
+                            v-if="hoverInfo && hoverInfo.start === start && hoverInfo.rowIndex !== null"
+                            class="residue-hover"
+                            :style="residueMarkerStyle(hoverInfo, end - start)"
+                        ></div>
+                    </div>
+                    <span class="count" :style="countStyle(j)">{{ countSequence(aa, seqStart).toString() }}</span>
+                </template>
             </div>
         </div>
     </div>
@@ -476,9 +476,18 @@ export default {
         handleUpdateEntries() {
             this.actualResno.length = 0
             this.entries.forEach((e, i) => {
+                const isMultimer = !e.suffix ? false : true
                 let acc = 0
                 const nums = [...e.aa].map((c, j) => {
-                    if (c !== '-') return c + String(++acc)
+                    if (c !== '-') {
+                        if (isMultimer) {
+                            const chain = e.chains[++acc]
+                            const resn = acc - e.offsets[chain]
+                            return chain + ':' + c + String(resn)
+                        } else {
+                            return c + String(++acc)
+                        }
+                    }
                     else return ""
                 })
                 this.actualResno.push(nums)
@@ -990,11 +999,11 @@ export default {
     content: "";
     position: absolute;
     left: 50%;
-    top: -12px;
+    bottom: -12px;
     transform: translateX(-50%);
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
-    border-top: 6px solid rgba(0, 0, 0, 0.7);
+    border-bottom: 6px solid rgba(0, 0, 0, 0.7);
 }
 .theme--dark .column-active {
     background-color: rgba(255, 255, 255, 0.4);
diff --git a/frontend/ResultView.vue b/frontend/ResultView.vue
@@ -163,7 +163,8 @@ import AllAtomPredictMixin from './AllAtomPredictMixin.vue';
 import NavigationButton from './NavigationButton.vue';
 
 import { mockPDB, mergePdbs, concatenatePdbs, 
-    getChainName, getAccession, getAbsOffsetTop} from './Utilities';
+    getChainName, getAccession, getAbsOffsetTop,
+    encodeMultimer} from './Utilities';
 
 import { debounce } from './lib/debounce';
 import ResultFoldseekDB from './ResultFoldseekDB.vue';
@@ -547,8 +548,10 @@ export default {
             let out = ""
             if (arr.length > 1) {
                 // out = mergePdbs(arr)
-                out = concatenatePdbs(arr) // For now, just concatenate chains into one single chain
+                const result = encodeMultimer(arr)
+                out = result.pdb
                 name += chainset
+                name += result.suffix
             } else {
                 out = arr[0].pdb
             }
diff --git a/frontend/SelectToSendPanelFoldMason.vue b/frontend/SelectToSendPanelFoldMason.vue
@@ -63,7 +63,7 @@
 </template>
 
 <script>
-import { getAccession, mockPDB, getResidueIndices } from './Utilities.js';
+import { getAccession, mockPDB, getResidueIndices, decodeMultimer, storeChains, revertChainInfo } from './Utilities.js';
 import { StorageWrapper} from './lib/HistoryMixin.js';
 import { BlobDatabase } from './lib/BlobDatabase.js';
 import { pulchra } from 'pulchra-wasm';
@@ -196,11 +196,23 @@ export default {
         },
         async getMockPdb(entry) {
             const mock = mockPDB(entry.ca, entry.aa.replace(/-/g, ''), 'A');
-            return await pulchra(mock);
+            if (!entry.suffix) {
+                return await pulchra(mock);
+            } else {
+                const decoded = decodeMultimer(mock, entry.suffix)
+                return decoded
+            }
         },
         async getFullPdb(entry, signal) {
             const mock = mockPDB(entry.ca, entry.aa.replace(/-/g, ''), 'A');
-            return await this.predictGivenPdb(mock, signal)
+            if (!entry.suffix) {
+                return await this.predictGivenPdb(mock, signal)
+            } else {
+                const decoded = decodeMultimer(mock, entry.suffix)
+                const chains = storeChains(decoded)
+                const pdb = await this.predictGivenPdb(decoded, signal)
+                return revertChainInfo(pdb, chains)
+            }
         },
     },
     computed: {
@@ -218,15 +230,15 @@ export default {
                         }
                         return str
                     } else {
-                        return `<span title="${this.resnoStr.join(", ")}">`
+                        return `<span title="${this.motifStr}">`
                             + String(this.selectedCounts) 
                             + (this.selectedCounts > 1 ? ' residues</span>' : ' residue</span>')
                     }
                 } else if (this.$vuetify.breakpoint.xlOnly) {
                     let str = this.entries[this.targetIndex].name
                     if (this.selectedCounts > 0) {
                         str = '<strong>' + str + "</strong>&nbsp;"
-                        return str + `/&nbsp;<span title="${this.resnoStr.join(", ")}">`
+                        return str + `/&nbsp;<span title="${this.motifStr}">`
                             + String(this.selectedCounts) + (this.selectedCounts > 1 ? ' residues</span>' : ' residue</span>')
                     } else {
                         str = '<strong>' + str + "</strong>"
@@ -241,7 +253,7 @@ export default {
                     } else {
                         str = '<strong>' + str + "</strong>&nbsp;"
                     }
-                    return str + `/&nbsp;<span title="${this.resnoStr.join(", ")}">`
+                    return str + `/&nbsp;<span title="${this.motifStr}">`
                         + String(this.selectedCounts) + (this.selectedCounts > 1 ? ' residues</span>' : ' residue</span>')
                 } else {
                     if (str.length >= 14) {
@@ -280,7 +292,12 @@ export default {
                 return ""
             } else {
                 return this.resnoStr
-                    .map((i) => 'A'+ String(i))
+                    .map((i) => {
+                        let entry = this.entries[this.targetIndex]
+                        let chain = entry.chains[i]
+                        let resno = i - entry.offsets[chain]
+                        return chain + String(resno)
+                    })
                     .join(", ")
             }
         },
diff --git a/frontend/StructureViewerMSA.vue b/frontend/StructureViewerMSA.vue
diff --git a/frontend/Utilities.js b/frontend/Utilities.js

Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,7 @@`
`48`	`48`	`:value="q.name"`
`49`	`49`	`@click:close="removeQuery(index)"`
`50`	`50`	`>`
`51`		`- {{ q.name }}`
	`51`	`+ {{ q.name.split('-_-_-_')[0] }}`
`52`	`52`	`</v-chip>`
`53`	`53`	`</div>`
`54`	`54`	`</div>`