NN-649 listbox fixes

BackofenLab · Jan 14, 2025 · 92fc03f · 92fc03f
1 parent 19548c1
commit 92fc03f
Show file tree

Hide file tree

Showing 11 changed files with 36 additions and 35 deletions.
diff --git a/frontend/src/components/citation/CitationCommunities.vue b/frontend/src/components/citation/CitationCommunities.vue
@@ -13,15 +13,15 @@
   </EmptyState>
 
   <Listbox v-if="citation_data?.community_scores?.length != 0 && !await_load" v-model="selected_citation"
-    optionLabel="id" :options="filt_communities" :pt="{
+    optionLabel="name" :options="filt_communities" :pt="{
       listContainer: { class: 'order-2' },
       list: { class: '!p-0' },
       emptyMessage: { class: '!flex !justify-center !items-center !text-sm !text-slate-500 dark:!text-slate-300' },
       option: {
         class:
           '!px-0 !py-1 !text-slate-500 dark:!text-slate-300 leading-tight transition-all duration-300 ease-in-out',
       },
-    }" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0"
+    }" :virtualScrollerOptions="{ itemSize: 28 }" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0"
     @update:modelValue="select_community" :tabindex="0" emptyMessage="No communities available.">
 
     <template #footer>
@@ -87,11 +87,11 @@
     <!-- options -->
     <template #option="slotProps">
       <div :class="`grid items-center w-full grid-cols-12 gap-2 ${slotProps.selected ? '!text-primary-400' : ''}`">
-        <span class="col-span-6">Community {{ slotProps.option.modularity_class }}</span>
+        <span class="col-span-6 line-clamp-1">Community {{ slotProps.option.modularity_class }}</span>
 
-        <span class="col-span-3">{{ slotProps.option.nodes.length }}</span>
+        <span class="col-span-3 line-clamp-1">{{ slotProps.option.nodes.length }}</span>
 
-        <span class="col-span-3 text-center">{{ Math.log10(
+        <span class="col-span-3 text-center line-clamp-1">{{ Math.log10(
           parseFloat(slotProps.option.cumulative_pagerank)
         ).toFixed(2) }}</span>
       </div>
@@ -127,7 +127,7 @@ export default {
     filt_communities() {
       var com = this;
       var filtered = Object.values(com.citation_data?.community_scores || {});
-
+      console.log('00',filtered)
       if (com.search_raw !== "") {
         // If search term is not empty, filter by search term
         var regex = new RegExp(com.regex, "i");

diff --git a/frontend/src/components/citation/CitationList.vue b/frontend/src/components/citation/CitationList.vue
@@ -21,8 +21,9 @@
         class:
           '!px-0 !py-1 !text-slate-500 dark:!text-slate-300 leading-tight transition-all duration-300 ease-in-out',
       },
-    }" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0"
-    @update:modelValue="select_abstract" :tabindex="0" emptyMessage="No abstracts available.">
+    }" :virtualScrollerOptions="{ itemSize: 28 }" listStyle="max-height:100%"
+    class="h-full flex flex-col !p-0 !bg-transparent !border-0" @update:modelValue="select_abstract" :tabindex="0"
+    emptyMessage="No abstracts available.">
 
     <template #footer>
       <header class="sticky top-0 bg-[var(--card-bg)] pt-3 items-center gap-2 z-[1] order-1">
@@ -96,13 +97,13 @@
     <!-- options -->
     <template #option="slotProps">
       <div :class="`grid items-center w-full grid-cols-12 gap-2 ${slotProps.selected ? '!text-primary-400' : ''}`">
-        <span class="col-span-4">{{ slotProps.option.id }}</span>
+        <span class="col-span-4 line-clamp-1">{{ slotProps.option.id }}</span>
 
-        <span class="col-span-3">{{ slotProps.option.attributes["Citation"] }}</span>
+        <span class="col-span-3 line-clamp-1">{{ slotProps.option.attributes["Citation"] }}</span>
 
-        <span class="col-span-2">{{ slotProps.option.attributes["Year"] }}</span>
+        <span class="col-span-2 line-clamp-1">{{ slotProps.option.attributes["Year"] }}</span>
 
-        <span class="col-span-3 text-center">{{ Math.log10(
+        <span class="col-span-3 text-center line-clamp-1">{{ Math.log10(
           parseFloat(slotProps.option.attributes["PageRank"])
         ).toFixed(2) }}</span>
       </div>

diff --git a/frontend/src/components/enrichment/PathwayList.vue b/frontend/src/components/enrichment/PathwayList.vue
@@ -85,7 +85,7 @@
       <div :class="`grid items-center w-full grid-cols-12 gap-2 ${slotProps.selected ? '!text-primary-400' : ''}`">
         <span class="col-span-8 line-clamp-1">{{ slotProps.option.name }}</span>
 
-        <span class="col-span-3 text-right">{{ slotProps.option.fdr_rate.toExponential(2) }}</span>
+        <span class="col-span-3 text-right line-clamp-1">{{ slotProps.option.fdr_rate.toExponential(2) }}</span>
 
         <span v-on:click.stop="add_enrichment(slotProps.option)" :class="`material-symbols-rounded text-slate-600 cursor-pointer 
           ${favourite_tab.has(slotProps.option)

diff --git a/frontend/src/components/pane/modules/difexp/RegulatedProteins.vue b/frontend/src/components/pane/modules/difexp/RegulatedProteins.vue
@@ -66,11 +66,11 @@
     <!-- options -->
     <template #option="slotProps">
       <div :class="`grid items-center w-full grid-cols-12 gap-2`">
-        <span class="col-span-6 text-xs line-clamp-2">{{ slotProps.option?.attributes?.["Name"] }}</span>
+        <span class="col-span-6 text-xs line-clamp-1">{{ slotProps.option?.attributes?.["Name"] }}</span>
 
-        <span class="col-span-3 text-xs text-center">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
+        <span class="col-span-3 text-xs text-center line-clamp-1">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
 
-        <span class="col-span-3 text-xs text-center">{{ slotProps.option?.attributes?.["Degree"] }}</span>
+        <span class="col-span-3 text-xs text-center line-clamp-1">{{ slotProps.option?.attributes?.["Degree"] }}</span>
       </div>
     </template>
   </Listbox>

diff --git a/frontend/src/components/pane/modules/layer/EnrichmentConnections.vue b/frontend/src/components/pane/modules/layer/EnrichmentConnections.vue
@@ -29,9 +29,9 @@
     <!-- options -->
     <template #option="slotProps">
       <div :class="`grid items-center w-full grid-cols-2 gap-2`">
-        <span class="text-xs line-clamp-2">{{ slotProps.option?.[0]?.name }}</span>
+        <span class="text-xs line-clamp-1">{{ slotProps.option?.[0]?.name }}</span>
 
-        <span class="text-xs line-clamp-2">{{ slotProps.option?.[1]?.name }}</span>
+        <span class="text-xs line-clamp-1">{{ slotProps.option?.[1]?.name }}</span>
       </div>
     </template>
   </Listbox>

diff --git a/frontend/src/components/pane/modules/layer/LayerProteins.vue b/frontend/src/components/pane/modules/layer/LayerProteins.vue
@@ -60,11 +60,11 @@
     <!-- options -->
     <template #option="slotProps">
       <div :class="`grid items-center w-full grid-cols-12 gap-2`">
-        <span class="col-span-6 text-xs line-clamp-2">{{ slotProps.option?.attributes?.["Name"] }}</span>
+        <span class="col-span-6 text-xs line-clamp-1">{{ slotProps.option?.attributes?.["Name"] }}</span>
 
-        <span class="col-span-3 text-xs text-center">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
+        <span class="col-span-3 text-xs text-center line-clamp-1">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
 
-        <span class="col-span-3 text-xs text-center">{{ slotProps.option?.attributes?.["Degree"] }}</span>
+        <span class="col-span-3 text-xs text-center line-clamp-1">{{ slotProps.option?.attributes?.["Degree"] }}</span>
       </div>
     </template>
   </Listbox>

diff --git a/frontend/src/components/pane/modules/layer/PathwayLayers.vue b/frontend/src/components/pane/modules/layer/PathwayLayers.vue
@@ -6,9 +6,9 @@
 
   <ul class="p-0 m-0 list-none">
     <li
-      class="w-full h-9 grid grid-cols-12 items-center gap-2 !py-0 !px-0 !font-normal !text-slate-500 dark:!text-slate-300 !leading-tight"
+      class="w-full h-8 grid grid-cols-12 items-center gap-2 !py-0 !px-0 !font-normal !text-slate-500 dark:!text-slate-300 !leading-tight"
       v-for="entry in terms" :key="entry">
-      <label class="col-span-9">{{ entry.name }}</label>
+      <label class="col-span-9 line-clamp-1">{{ entry.name }}</label>
       <span class="w-4 h-4 col-start-11 rounded-full cursor-pointer" id="color_rect" @click="open_picker($event, entry)"
         :style="{ backgroundColor: colorpalette[entry.name] }"></span>
       <Button severity="secondary" rounded size="small" plain class="w-5 h-5" @click="hide_termlayer(entry)"

diff --git a/frontend/src/components/pane/modules/node/NodeConnections.vue b/frontend/src/components/pane/modules/node/NodeConnections.vue
@@ -60,11 +60,11 @@
     <!-- options -->
     <template #option="slotProps">
       <div :class="`grid items-center w-full grid-cols-12 gap-2`">
-        <span class="col-span-6 text-xs line-clamp-2">{{ slotProps.option?.attributes?.["Name"] }}</span>
+        <span class="col-span-6 text-xs line-clamp-1">{{ slotProps.option?.attributes?.["Name"] }}</span>
 
-        <span class="col-span-3 text-xs text-center">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
+        <span class="col-span-3 text-xs text-center line-clamp-1">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
 
-        <span class="col-span-3 text-xs text-center">{{ slotProps.option?.attributes?.["Degree"] }}</span>
+        <span class="col-span-3 text-xs text-center line-clamp-1">{{ slotProps.option?.attributes?.["Degree"] }}</span>
       </div>
     </template>
   </Listbox>

diff --git a/frontend/src/components/pane/modules/pathways/PathwayConnections.vue b/frontend/src/components/pane/modules/pathways/PathwayConnections.vue
@@ -60,11 +60,11 @@
     <!-- options -->
     <template #option="slotProps">
       <div :class="`grid items-center w-full grid-cols-12 gap-2`">
-        <span class="col-span-6 text-xs line-clamp-2">{{ slotProps.option?.attributes?.["Name"] }}</span>
+        <span class="col-span-6 text-xs line-clamp-1">{{ slotProps.option?.attributes?.["Name"] }}</span>
 
-        <span class="col-span-3 text-xs text-center">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
+        <span class="col-span-3 text-xs text-center line-clamp-1">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
 
-        <span class="col-span-3 text-xs text-center">{{ slotProps.option?.attributes?.["Degree"] }}</span>
+        <span class="col-span-3 text-xs text-center line-clamp-1">{{ slotProps.option?.attributes?.["Degree"] }}</span>
       </div>
     </template>
   </Listbox>

diff --git a/frontend/src/components/pane/modules/subset/SubsetConnections.vue b/frontend/src/components/pane/modules/subset/SubsetConnections.vue
@@ -60,11 +60,11 @@
     <!-- options -->
     <template #option="slotProps">
       <div :class="`grid items-center w-full grid-cols-12 gap-2`">
-        <span class="col-span-6 text-xs line-clamp-2">{{ slotProps.option.label }}</span>
+        <span class="col-span-6 text-xs line-clamp-1">{{ slotProps.option.label }}</span>
 
-        <span class="col-span-3 text-xs text-center">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
+        <span class="col-span-3 text-xs text-center line-clamp-1">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
 
-        <span class="col-span-3 text-xs text-center">{{ slotProps.option?.attributes?.["Degree"] }}</span>
+        <span class="col-span-3 text-xs text-center line-clamp-1">{{ slotProps.option?.attributes?.["Degree"] }}</span>
       </div>
     </template>
   </Listbox>

diff --git a/frontend/src/components/pathwaytools/PathwayGraphList.vue b/frontend/src/components/pathwaytools/PathwayGraphList.vue
@@ -10,7 +10,7 @@
       class:
         '!px-0 !py-1 !text-slate-500 dark:!text-slate-300 leading-tight transition-all duration-300 ease-in-out',
     },
-  }" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0"
+  }" :virtualScrollerOptions="{ itemSize: 28 }" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0"
     @update:modelValue="select_term" :tabindex="0" emptyMessage="No terms available.">
 
     <template #footer>
@@ -69,9 +69,9 @@
     <!-- options -->
     <template #option="slotProps">
       <div :class="`grid items-center w-full grid-cols-12 gap-2 ${slotProps.selected ? '!text-primary-400' : ''}`">
-        <span class="col-span-8">{{ slotProps.option?.attributes?.["Name"] }}</span>
+        <span class="col-span-8 line-clamp-1">{{ slotProps.option?.attributes?.["Name"] }}</span>
 
-        <span class="col-span-3 text-right">{{ slotProps.option?.attributes?.["FDR"]?.toExponential(2) }}</span>
+        <span class="col-span-3 text-right line-clamp-1">{{ slotProps.option?.attributes?.["FDR"]?.toExponential(2) }}</span>
 
       </div>
     </template>