- Fixed hovering action to be more reliable

- Fixed fullscreen-related issue
- Added tooltip about residue being hovered on structure viewere in Foldmason page
- Minute style changes

Author: dannydoor

frontend/MSA.vue

@@ -62,6 +62,7 @@
                             @removeHighlight="spliceActiveIndex"
                             @changePreview="changePreview"
                             ref="structViewer"
+                            id="structure-viewer"
                         />
                     </div>
                     <v-card-text v-if="structureViewerSelection.length == 0" style="position: absolute; top: calc(50% - 27px); left: 0; text-align: center;">
@@ -227,7 +228,7 @@
                             justify-content: space-between; 
                             align-items: center;"
                     >
-                        <div style="
+                        <!-- <div style="
                             width: 36px;
                             height: 36px;
                             display: flex; 
@@ -236,7 +237,8 @@
                             <v-icon style="display: block;">
                                 {{ $MDI.CursorMove }}
                             </v-icon>
-                        </div>
+                        </div> -->
+                        <div class="drag-handle" style="flex-grow: 1; align-self: stretch;"/>
                         <!-- <v-card-title>Structure</v-card-title> -->
                         <v-btn icon @click="toggleView" style="display: block;">
                             <v-icon>
@@ -257,7 +259,7 @@
                             @removeHighlight="spliceActiveIndex"
                             ref="structViewer"
                         /> -->
-                        <v-card-text v-if="structureViewerSelection.length == 0" style="position: absolute; top: calc(50% - 27px); left: 0; text-align: center;">
+                        <v-card-text v-if="structureViewerSelection.length == 0" style="position: absolute; top: calc(50% - 45px); left: 0; text-align: center; z-index: 1;">
                             No structures loaded.
                         </v-card-text>
                     </div>
@@ -568,9 +570,11 @@ export default {
                 this.blockIndex = Math.floor((scroll - top) / blockSize);
             }
             
+            if (!!document.fullscreenElement) return
+
             this.showViewerCondition = this.showViewer 
                 && scrollOffset >= rowHeight
-
+            
             if (
                 this.showViewerCondition
             ) {
@@ -731,7 +735,7 @@ export default {
                 this.selectedColumns.shift()
             }
             this.$emit('changedSelection', this.selectedColumns)
-            this.$refs.msaView.addHighlightColumn(idx, move)
+            this.$refs.msaView.addHighlightColumn(idx, move && this.showViewer)
             this.$refs.structViewer.updateAllHighlights()
             this.$refs.structViewer.moveView(idx)
         },
@@ -765,7 +769,7 @@ export default {
                 this.previewColumn = Number(idx)
 
                 if (fromStruct) {
-                    this.$refs.msaView.activateColumn(idx, true)
+                    this.$refs.msaView.activateColumn(idx, true, true && this.showViewerCondition)
                     this.$nextTick(() => {
                         setTimeout(()=>{
                             this.$refs.structViewer.updateAllPreview()

frontend/MSAView.vue

@@ -417,7 +417,7 @@ export default {
             arr?.forEach(e => e.classList.remove('preview-column'))
             this.$emit('changePreview', -1)
         },
-        activateColumn(id, move=false) {
+        activateColumn(id, fromUpward=false, move=false) {
             const wrapper = this.$refs.msaWrapper
             
             const arr = wrapper?.querySelectorAll('.preview-column')
@@ -431,9 +431,8 @@ export default {
                     top: el.getBoundingClientRect().top + window.scrollY - (180),
                     left: 0,
                     behavior: 'smooth'
-                })
-            }
-            } else {
+                })}
+            } else if (!fromUpward) {
                 this.$emit('changePreview', id)
             }
         },

frontend/NameField.vue

@@ -191,7 +191,7 @@ small.ticket {
     bottom: -1px;
     left: 0;
     width: 100%;
-    height: 1px;
+    height: 2px;
     z-index: 3;
     background-color: var(--primary-color);
     transform: scaleX(0);

frontend/NavigationButton.vue

@@ -1,36 +1,36 @@
 <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-sheet color="transparent" style="position: fixed; right: 16px; bottom: 16px; z-index: 99998; align-items: center; justify-content: flex-end;"
+  class="d-flex pa-2">
+    <v-flex class="mr-3" shrink style="flex-direction: row;" v-if="scrollOffsetArr.length > 0">
+      <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-btn color="primary" fab v-show="enableScrollTop" @click="goTo(0)" v-bind="attrs" v-on="on">
             <v-icon>{{ $MDI.DoubleChevronUp }}</v-icon>
-        </v-btn>
+          </v-btn>
         </v-fab-transition>
       </template>
       <span>Scroll to top</span>

frontend/SelectToSendPanelFoldMason.vue

@@ -2,7 +2,7 @@
     <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%', 
+            <v-sheet color="transparent" :style="{'position': 'fixed', 'width': $vuetify.breakpoint.smAndDown ? 'fit-content' : '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="targetIndex >= 0" 

frontend/StructureViewerMSA.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="structure-panel">
     <StructureViewerTooltip attach=".structure-panel" />
-    <div class="structure-wrapper" ref="structurepanel">
+    <div class="structure-wrapper" ref="structurepanel" @mouseleave="clearTimer" @mousedown="isMouseDown = true" @mouseup="isMouseDown = false">
         <StructureViewerToolbar
             :isFullscreen="isFullscreen"
             :isSpinning="isSpinning"
@@ -16,6 +16,19 @@
             style="position: absolute; bottom: 8px;"
         />
         <div class="structure-viewer" ref="viewport"></div>
+        <div ref="previewTooltip"
+             v-show="previewIndex >= 0"
+        style="position: absolute; 
+            bottom: 48px; 
+            left: 8px; 
+            padding: 8px; 
+            font-size: 12px;
+            background-color: rgba(0, 0, 0, 0.4);
+            color: white
+            " 
+        v-html="refRes"
+        >
+        </div>
     </div>
 </div>
 </template>
@@ -25,7 +38,7 @@ import StructureViewerTooltip from './StructureViewerTooltip.vue';
 import StructureViewerToolbar from './StructureViewerToolbar.vue';
 import StructureViewerMixin from './StructureViewerMixin.vue';
 import { tmalign, parse as parseTMOutput, parseMatrix as parseTMMatrix } from 'tmalign-wasm';
-import { mockPDB, makeSubPDB, makeMatrix4, getResidueIndices  } from './Utilities.js';
+import { mockPDB, makeSubPDB, makeMatrix4, getResidueIndices, oneToThree } from './Utilities.js';
 import { download, PdbWriter, Matrix4, Quaternion, Vector3, concatStructures, ColormakerRegistry, Selection } from 'ngl';
 import { pulchra } from 'pulchra-wasm';
 
@@ -142,6 +155,9 @@ export default {
         ticking: false,
         hoverTimer: null,
         pendingColumn: -1,
+        registeredColumn: -1,
+        isMouseDown: false,
+        previewIndex: -1,
     }),
     props: {
         entries: { type: Array, required: true },
@@ -169,6 +185,7 @@ export default {
         this.stage.setParameters({
             hoverTimeout: 100,
         })
+
         this.stage.signals.clicked.add((pickingProxy) => {
             if (!pickingProxy) {
                 // this.selectedColumn = -1;
@@ -206,7 +223,7 @@ export default {
         });
 
         this.stage.signals.hovered.add((pickingProxy) => {
-            if (!pickingProxy || !pickingProxy.atom) {
+            if (this.isMouseDown || !pickingProxy || !pickingProxy.atom) {
                 this.clearTimer()
                 return;
             }
@@ -222,7 +239,7 @@ export default {
                 if (!this.ticking) {
                     this.ticking = true
                     window.requestAnimationFrame(() => {
-                        this.togglePreview()
+                        this.togglePreview(index)
                         this.ticking = false
                     })
                 }
@@ -490,6 +507,7 @@ ENDMDL
                 })
             );
             this.updateMask();
+            this.clearTimer()
         },
         async updateMask() {
             this.stage.eachRepresentation((repr) => {
@@ -585,24 +603,29 @@ ENDMDL
             let sele = String(resIdx + 1 - range) + "-" + (resIdx - 1 + range)
             comp.autoView(sele, 200)
         },
-        setTimer(idx) {
+        setTimer(idx, structIdx) {
+            this.registeredColumn = idx;
             this.hoverTimer = setTimeout(() => {
-                console.log(idx, "fired")
+                this.previewIndex = structIdx
                 this.$emit('changePreview', idx, true)
-            }, 1000)
+                this.registeredColumn = -1
+            }, 900)
         },
         clearTimer() {
             if (this.hoverTimer) {
                 clearTimeout(this.hoverTimer)
                 this.hoverTimer = null
             }
+            this.previewIndex = -1
             this.$emit('changePreview', -1, true)
         },
-        togglePreview() {
-            if (this.previewColumn == this.pendingColumn) return
+        togglePreview(index) {
+            if (this.previewColumn == this.pendingColumn
+                || this.pendingColumn == this.registeredColumn
+            ) return
             
             this.clearTimer()
-            this.setTimer(this.pendingColumn)
+            this.setTimer(this.pendingColumn, index)
         },
     },
     watch: {
@@ -640,6 +663,21 @@ ENDMDL
         highLightColor() {
             return 0xe31986
         },
+        refRes() {
+            if (this.previewColumn < 0 
+                || this.previewIndex < 0) return ""
+            
+            const targetObj = this.entries[this.previewIndex]
+            const name = targetObj.name?.length > 12 
+                ? targetObj.name.slice(0, 9) + '...' 
+                : targetObj.name
+            const targetSeq = targetObj.aa
+            const AA = oneToThree[targetSeq[this.previewColumn]]
+            const formatted = AA.charAt(0) + AA.toLowerCase().slice(1, 3)
+            const resNo = getResidueIndex(targetSeq, this.previewColumn) + 1
+            return '<span>'+ name + ':&nbsp;</span><strong>' 
+                + formatted + String(resNo) +'</strong>'
+        },
     },
 }
 </script>