From 0d8539b6ff392793d9c410e66942a2bd93391642 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Tue, 7 May 2024 15:49:37 +0200
Subject: [PATCH] Display help using content wrapping
---
components/OperonStructure.vue | 24 +++++++--------
components/content/PdockqMatrix.vue | 31 ++++++++++++--------
components/content/SystemOperonStructure.vue | 12 ++------
3 files changed, 33 insertions(+), 34 deletions(-)
diff --git a/components/OperonStructure.vue b/components/OperonStructure.vue
index 01c2965b..45458e0e 100644
--- a/components/OperonStructure.vue
+++ b/components/OperonStructure.vue
@@ -562,29 +562,29 @@ watch(genesTextRotate, (genesTextRotateVal) => {
}
})
}, { deep: true, immediate: true })
-
+const show = ref(false)
</script>
<template>
<div ref="gbContainer">
<v-card flat color="transparent">
<v-card-item>
<v-card-title>Operon structure <v-btn size="x-small" density="comfortable" variant="tonal"
- icon="mdi-help" @click="snackbar = true">
- </v-btn></v-card-title>
+ :icon="show ? 'mdi-chevron-up' : 'mdi-help'" @click="show = !show"></v-btn>
+ </v-card-title>
<v-card-subtitle>defenseFinder model version : {{ structureVersion }}</v-card-subtitle>
</v-card-item>
+ <v-expand-transition>
+ <div v-show="show">
+ <v-card-text class="pt-1">
+ <v-alert type="info" variant="tonal">
+ Click on the structure image to visualize it.
+ </v-alert>
+ </v-card-text>
+ </div>
+ </v-expand-transition>
<svg ref="svgRef" :width="computedContainerWidth" :height="plotHeight">
<g class="x-axis" />
</svg>
- <v-snackbar v-model="snackbar">
- Click on the structure image to
- visualize it.
- <template v-slot:actions>
- <v-btn color="info" variant="text" @click="snackbar = false">
- Close
- </v-btn>
- </template>
- </v-snackbar>
</v-card>
</div>
</template>
\ No newline at end of file
diff --git a/components/content/PdockqMatrix.vue b/components/content/PdockqMatrix.vue
index 8b89b4fc..cfb7d98a 100644
--- a/components/content/PdockqMatrix.vue
+++ b/components/content/PdockqMatrix.vue
@@ -116,8 +116,12 @@ const computedPDocksMatrixPlotOptions = computed(() => {
const matrixElemSizeVal = toValue(matrixElemSize)
const { marginBottom, marginLeft, marginRight, marginTop } = toValue(margin)
return toValue(groupedPdocks).map((matrix) => {
+ const plotWidth = matrix[1][0].system_genes.length * matrixElemSizeVal + marginLeft + marginRight
+ console.log(matrix[0])
+ console.log(matrix[1][0].system_genes.length)
+ console.log(plotWidth)
return {
- width: matrix[1][0].system_genes.length * matrixElemSizeVal + marginLeft + marginRight,
+ width: plotWidth,
height: matrix[1][0].system_genes.length * matrixElemSizeVal + marginTop + marginBottom,
title: matrix[0],
padding: 0,
@@ -197,6 +201,8 @@ function displayStructure(item) {
structureTitle.value = item.proteins_in_the_prediction.join(" / ")
}
+const show = ref(false)
+
</script>
<template>
@@ -205,24 +211,23 @@ function displayStructure(item) {
<v-card-item>
<v-card-title>Dimer pDockQ matrix <v-btn size="x-small" density="comfortable" variant="tonal"
- icon="mdi-help" @click="snackbar = true">
- </v-btn>
+ :icon="show ? 'mdi-chevron-up' : 'mdi-help'" @click="show = !show"></v-btn>
</v-card-title>
</v-card-item>
+ <v-expand-transition>
+ <div v-show="show">
+ <v-card-text class="pt-1">
+ <v-alert type="info" variant="tonal">
+ <p>HeatMap that represent bla bla.</p>
+ <p>You can click on each cell to display dimer predicted structure</p>
+ </v-alert>
+ </v-card-text>
+ </div>
+ </v-expand-transition>
<v-card-text>
<PlotFigure ref="matrixPlot" :options="unref(option)" defer class="pdockq-plot"
:data-label="option.legend.label"></PlotFigure>
</v-card-text>
- <v-snackbar v-model="snackbar" multi-line vertical>
- <p>HeatMap that represent bla bla.</p>
- <p>You can click on each cell to display dimer predicted structure</p>
- <template v-slot:actions>
- <v-btn color="info" variant="text" @click="snackbar = false">
- Close
- </v-btn>
- </template>
- </v-snackbar>
- <!-- <PdbeMolstarPlugin v-model:title="structureTitle" /> -->
</v-card>
<v-card v-else flat color="transparent">
<v-card-text>
diff --git a/components/content/SystemOperonStructure.vue b/components/content/SystemOperonStructure.vue
index 3611318a..53fa8ee5 100644
--- a/components/content/SystemOperonStructure.vue
+++ b/components/content/SystemOperonStructure.vue
@@ -60,6 +60,7 @@ function extractGeneName(name: string) {
const sanitizedHits = computed<StructureOperonGeneWithImg[]>(() => {
const toValMsResponse = toValue(msResponse)
if (toValMsResponse && toValMsResponse?.hits?.length > 0) {
+ console.log(toValMsResponse.hits)
return toValMsResponse.hits.map(hit => {
// get structure information for this prot
const monomerStructuresVal = toValue(monomerStructures)
@@ -106,6 +107,8 @@ const sanitizedSubsystem = computed(() => {
})
const contentWidth = computed(() => {
+ console.log(subsystem)
+ console.log(sanitizedHits.value)
return sanitizedHits.value.length * sizeGene.value
})
@@ -117,15 +120,6 @@ onMounted(() => {
fetchSubsytems()
})
-// const maxOperonSize = computed(() => {
-// const allSubsystemsVal = toValue(allSubsystems)
-// return d3.max(d3.groups(allSubsystemsVal?.hits ?? [], d => d.subsystem)
-// .map(([_, val]) => {
-// return val.reduce((acc, curr) => {
-// return acc + curr.size
-// }, 0)
-// }))
-// })
const msFilters = computed(() => {
--
GitLab