Display help using content wrapping

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

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>

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(() => {