Skip to content

Commit 68a3f82

Browse files
dannydoordannydoor
committed
1. Style changes in FoldMason result page
2. Made navigation drawer be more mobile-friendly 3. One can check the residue number by hovering on the character of sequences etc.
1 parent 57d876e commit 68a3f82

8 files changed

Lines changed: 112 additions & 55 deletions

‎frontend/MSA.vue‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<div>
33
<v-container fluid pa-2 style="overflow: visible; height: 100%;">
4-
<v-row ref="topRow">
5-
<v-col class="flex-col">
4+
<v-row ref="topRow" style="justify-content: center;">
5+
<v-col class="flex-col" cols="12" sm="5" md="3">
66
<v-card style="height: 100%">
77
<v-card-title>Summary</v-card-title>
88
<v-card-text>
@@ -29,8 +29,8 @@
2929
</v-card-text>
3030
</v-card>
3131
</v-col>
32-
<v-col class="flex-col" v-if="tree">
33-
<v-card class="fill-height" style="position: relative;">
32+
<v-col class="flex-col" v-if="tree" cols="12" sm="7" md="4">
33+
<v-card class="fill-height" style="position: relative; padding-top: 54px" >
3434
<v-card-title
3535
ref="treeLabel"
3636
style="position: absolute; left: 0; top: 0; margin: 0; padding: 16px; z-index: 1;">Guide Tree</v-card-title>
@@ -46,8 +46,8 @@
4646
/>
4747
</v-card>
4848
</v-col>
49-
<v-col class="flex-col">
50-
<v-card class="fill-height" style="position: relative;">
49+
<v-col class="flex-col" cols="12" md="5" sm="8">
50+
<v-card class="fill-height" style="position: relative; padding-top: 54px;">
5151
<v-card-title style="position: absolute; left: 0; top: 0; margin: 0; padding: 16px; z-index: 1;">Structure</v-card-title>
5252
<div style="padding: 10px; height: 100%; width: 100%;" ref="originalWrapper">
5353
<StructureViewerMSA
@@ -879,24 +879,33 @@ div.input-div .v-input__control, div.input-div .v-input__control * {
879879
div.input-div .v-input__slot {
880880
padding: 0 4px !important;
881881
}
882-
@media only screen and (min-width: 800px) {
882+
@media only screen and (min-width: 961px) {
883883
.flex-col {
884-
flex: 1 1 0px;
884+
/* flex: 1 0 0px; */
885885
height: 500px;
886886
}
887887
.flex-col:nth-child(1) {
888-
flex: 3;
888+
/* flex: 3; */
889889
padding-right: 6px;
890890
}
891-
.flex-col:nth-child(2),
891+
/* .flex-col:nth-child(2),
892892
.flex-col:nth-child(3) {
893893
flex: 4.5;
894-
}
894+
} */
895895
.flex-col:nth-child(3) {
896+
min-width: 300px;
896897
padding-left: 6px;
897898
}
898899
}
899-
@media only screen and (max-width: 800px) {
900+
901+
@media only screen and (min-width: 601px) and (max-width: 960px) {
902+
.flex-col {
903+
height: 400px;
904+
padding: 6px;
905+
}
906+
}
907+
908+
@media only screen and (max-width: 600px) {
900909
.flex-col {
901910
height: 400px;
902911
flex-basis: 100%;
@@ -925,7 +934,7 @@ div.input-div .v-input__slot {
925934
display: block;
926935
width: 360px;
927936
height: 380px;
928-
bottom: 40px;
937+
bottom: 64px;
929938
right: 108px;
930939
touch-action: none;
931940
user-select: none;
@@ -946,6 +955,8 @@ div.input-div .v-input__slot {
946955
#floating-viewer {
947956
width: 300px;
948957
height: 310px;
958+
bottom: 100px;
959+
right: 32px;
949960
}
950961
}
951962

‎frontend/MSAView.vue‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@
2828
z-index: 5; transform: translateX(-2px);"
2929
:style="{'width': 'calc((1ch + 4px) * ' + String(aa.length) +')'}"
3030
>
31-
<div v-for="(c, i) in indices" class="column-box" :data-index="c" :key="c" @click.stop="toggleHighlightColumn"></div>
31+
<div v-for="(c, i) in indices" class="column-box" :data-index="c" :key="c" @click.stop="toggleHighlightColumn">
32+
<div v-for="v in entryLength" style="width: 100%; height: 1em;" :title="actualResno.length > 0 ? actualResno[v-1][c] : ''"></div>
33+
</div>
3234
</div>
3335
<div class="row-wrapper"
3436
style="position: absolute;
@@ -105,13 +107,12 @@ export default {
105107
data() {
106108
return {
107109
lineLen: 80,
108-
headerLen: null,
109-
countLen: null,
110110
resizeObserver: null,
111111
hoverTimer: null,
112112
activeColumn: "",
113113
pendingColumn: "",
114114
ticking: false,
115+
actualResno: [],
115116
}
116117
},
117118
props: {
@@ -213,6 +214,9 @@ export default {
213214
fontWeight() {
214215
return this.$vuetify.theme.dark ? 'bolder' : 'normal';
215216
},
217+
entryLength() {
218+
return this.entries ? this.entries.length : 0
219+
}
216220
},
217221
methods: {
218222
handleClickHeader(event, index) {
@@ -240,15 +244,14 @@ export default {
240244
}
241245
},
242246
handleUpdateEntries() {
243-
this.headerLen = 0;
244-
this.countLen = 0;
247+
this.actualResno.length = 0
245248
this.entries.forEach((e, i) => {
246-
this.headerLen = Math.min(30, Math.max(this.headerLen, e.name.length));
247-
let count = 0;
248-
for (const char of e.aa) {
249-
if (char !== '-') count++;
250-
}
251-
this.countLen = Math.max(this.countLen, count.toString().length);
249+
let acc = 0
250+
const nums = [...e.aa].map((c, j) => {
251+
if (c !== '-') return c + String(++acc)
252+
else return ""
253+
})
254+
this.actualResno.push(nums)
252255
})
253256
},
254257
handleResize() {
@@ -437,11 +440,14 @@ export default {
437440
}
438441
},
439442
toggleHighlightColumn(event) {
440-
const value = event.target.classList.contains('active-column')
443+
const parent = event.target.closest('.column-box')
444+
if (!parent) return
445+
446+
const value = parent.classList.contains('active-column')
441447
if (value) {
442-
this.$emit('removeHighlight', Number(event.target.dataset.index))
448+
this.$emit('removeHighlight', Number(parent.dataset.index))
443449
} else {
444-
this.$emit('addHighlight', Number(event.target.dataset.index))
450+
this.$emit('addHighlight', Number(parent.dataset.index))
445451
}
446452
},
447453
addHighlightColumn(idx, move) {

‎frontend/Navigation.vue‎

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
<template>
22
<div>
3-
<v-navigation-drawer v-if="!$LOCAL" stateless app permanent clipped :mini-variant="mini" :expand-on-hover="false" ref="drawer">
3+
<v-navigation-drawer v-if="!$LOCAL"
4+
app
5+
clipped
6+
v-model="opened"
7+
:permanent="$vuetify.breakpoint.mdAndUp"
8+
:mini-variant="$vuetify.breakpoint.smAndDown ? false : mini"
9+
:temporary="$vuetify.breakpoint.smAndDown"
10+
:expand-on-hover="false"
11+
:bottom="$vuetify.breakpoint.smAndDown"
12+
ref="drawer"
13+
>
414
<v-list v-if="!$LOCAL">
515
<v-list-item to="/search">
616
<v-list-item-action>
@@ -45,7 +55,7 @@
4555
</v-list-item-content>
4656
</template>
4757

48-
<template v-if="!this.mini">
58+
<template v-if="!mini">
4959
<v-list-item
5060
@click="$ELECTRON ? electronDownload($route.params.ticket) : null"
5161
:href="$ELECTRON ? null : url('api/result/download/' + $route.params.ticket)"
@@ -84,7 +94,7 @@
8494
<v-list-item-title>Downloads</v-list-item-title>
8595
</v-list-item-content>
8696
</template>
87-
<template v-if="!this.mini">
97+
<template v-if="!mini">
8898
<v-list-item
8999
@click="downloadMSA"
90100
style="padding-left: 16px;"
@@ -122,7 +132,7 @@
122132
<v-list-item-title>Downloads</v-list-item-title>
123133
</v-list-item-content>
124134
</template>
125-
<template v-if="!this.mini">
135+
<template v-if="!mini">
126136
<v-list-item
127137
@click="$ELECTRON ? electronDownload($route.params.ticket) : null"
128138
:href="$ELECTRON ? null : url('api/result/folddisco/download/' + $route.params.ticket)"
@@ -169,7 +179,7 @@
169179
</v-list>
170180
</v-navigation-drawer>
171181
<v-app-bar v-on:dblclick.native="electronHandleTitleBarDoubleClick()" app :height="$ELECTRON ? '72px' : '48px'" fixed clipped-left :class="['ml-0', 'pl-3', $ELECTRON ? 'pt-2' : null]" :style="{'-webkit-app-region': $ELECTRON ? 'drag' : null, '-webkit-user-select': $ELECTRON ? 'none' : null}">
172-
<v-app-bar-nav-icon v-if="!$LOCAL" :input-value="!mini ? 'activated' : undefined" @click.stop="toggleMini"></v-app-bar-nav-icon>
182+
<v-app-bar-nav-icon v-if="!$LOCAL" :value="opened" @click.stop="toggleMini"></v-app-bar-nav-icon>
173183
<v-app-bar-title>
174184
<router-link v-if="!$LOCAL" :to="activeTool ? '/' + activeTool : '/'" style="color: inherit; text-decoration: none">{{ appName }}</router-link>
175185
<span v-if="$LOCAL">{{ appName }}</span>
@@ -221,9 +231,10 @@ function getLinks(strings, prefix) {
221231
export default {
222232
components : { History, },
223233
data: () => ({
224-
mini: true,
225234
expanded: false,
226235
activeTool: '',
236+
opened: false,
237+
mini: true,
227238
}),
228239
created() {
229240
this.$root.$on('multi', this.shouldExpand);
@@ -242,7 +253,12 @@ export default {
242253
},
243254
$route: function() {
244255
this.updateTool();
245-
}
256+
},
257+
isMobile: function(v) {
258+
if (v) {
259+
this.opened = false
260+
}
261+
},
246262
},
247263
computed: {
248264
appName() {
@@ -267,6 +283,9 @@ export default {
267283
}
268284
return toolLinks;
269285
},
286+
isMobile() {
287+
return this.$vuetify.breakpoint.smAndDown
288+
}
270289
},
271290
methods: {
272291
updateTool() {
@@ -293,13 +312,18 @@ export default {
293312
},
294313
shouldExpand(expand) {
295314
if (expand)
296-
this.mini = !expand;
315+
this.opened = expand;
316+
this.mini = false
297317
},
298318
toggleMini() {
299319
if (!this.mini) {
300320
this.$refs.history.drawer = false
301321
}
302-
this.mini = !this.mini;
322+
if (this.$vuetify.breakpoint.smAndDown) {
323+
this.opened = !this.opened
324+
} else {
325+
this.mini = !this.mini;
326+
}
303327
},
304328
electronHandleTitleBarDoubleClick() {
305329
this.handleTitleBarDoubleClick();
@@ -344,4 +368,7 @@ export default {
344368
background-color: #212121;
345369
border-color: #212121;
346370
}
371+
.v-navigation-drawer--temporary {
372+
z-index: 99999;
373+
}
347374
</style>

‎frontend/NavigationButton.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<v-sheet color="transparent" style="position: fixed; right: 16px; bottom: 16px; z-index: 99998; align-items: center; justify-content: flex-end;"
33
class="d-flex pa-2">
4-
<v-flex class="mr-3" shrink style="flex-direction: row;" v-if="scrollOffsetArr.length > 0">
4+
<v-flex class="mr-3" shrink style="flex-direction: row;" v-if="scrollOffsetArr && scrollOffsetArr.length > 0">
55
<v-tooltip top>
66
<template v-slot:activator='{on,attrs}'>
77
<v-fab-transition>

‎frontend/ResultFoldDiscoDB.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,7 @@
208208
<th class="alignment-action thin">Structure</th>
209209
</tr>
210210
</thead>
211+
<tbody><tr aria-hidden="true" style="height: 8px"></tr></tbody>
211212
<tbody v-for="(clu, key) in sortedIndices">
212213
{{ void(clusterShown = false) }}
213214
<template v-for="(groupidx, sortIdx) in clu" >

‎frontend/ResultFoldseekDB.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,7 @@
248248
</tr>
249249
</thead>
250250
<tbody>
251+
<tr aria-hidden="true" style="height: 8px"></tr>
251252
<template v-for="(groupidx, sortIdx) in sortedIndices" >
252253
<tr v-for="(item, index) in entry.alignments[groupidx]" :class="['hit', { 'active' : item.active }]"
253254
@click.stop="$vuetify.breakpoint.width <= 960 ? onCheckboxClick(sortIdx, $event) : () => {}"

‎frontend/SelectToSendPanelFoldMason.vue‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -218,14 +218,16 @@ export default {
218218
}
219219
return str
220220
} else {
221-
return String(this.selectedCounts)
222-
+ (this.selectedCounts > 1 ? ' residues' : ' residue')
221+
return `<span title="${this.resnoStr.join(", ")}">`
222+
+ String(this.selectedCounts)
223+
+ (this.selectedCounts > 1 ? ' residues</span>' : ' residue</span>')
223224
}
224225
} else if (this.$vuetify.breakpoint.xlOnly) {
225226
let str = this.entries[this.targetIndex].name
226227
if (this.selectedCounts > 0) {
227228
str = '<strong>' + str + "</strong>&nbsp;"
228-
return str + ' / '+ String(this.selectedCounts) + (this.selectedCounts > 1 ? ' residues' : ' residue')
229+
return str + `/&nbsp;<span title="${this.resnoStr.join(", ")}">`
230+
+ String(this.selectedCounts) + (this.selectedCounts > 1 ? ' residues</span>' : ' residue</span>')
229231
} else {
230232
str = '<strong>' + str + "</strong>"
231233
return "Reference: " + str
@@ -239,7 +241,8 @@ export default {
239241
} else {
240242
str = '<strong>' + str + "</strong>&nbsp;"
241243
}
242-
return str + ' / '+ String(this.selectedCounts) + (this.selectedCounts > 1 ? ' residues' : ' residue')
244+
return str + `/&nbsp;<span title="${this.resnoStr.join(", ")}">`
245+
+ String(this.selectedCounts) + (this.selectedCounts > 1 ? ' residues</span>' : ' residue</span>')
243246
} else {
244247
if (str.length >= 14) {
245248
str = '<strong title="' + str + '" >' + str.slice(0, 12) + '...</strong>'
@@ -273,16 +276,24 @@ export default {
273276
return (str + t).padEnd(69, ' ') + '\n'
274277
},
275278
motifStr() {
279+
if (this.selectedCounts == 0) {
280+
return ""
281+
} else {
282+
return this.resnoStr
283+
.map((i) => 'A'+ String(i))
284+
.join(", ")
285+
}
286+
},
287+
resnoStr() {
276288
if (this.selectedCounts == 0) {
277289
return ""
278290
} else {
279291
return getResidueIndices
280292
(this.entries[this.targetIndex].aa,
281293
this.selectedColumns)
282-
.map((i) => 'A'+String(i+1))
283-
.join(", ")
294+
.map((i) => i+1)
284295
}
285-
},
296+
}
286297
}
287298
}
288299
</script>

0 commit comments

Comments
 (0)