NN-647 modify fonts and icons size in pane UI

BackofenLab · Jan 9, 2025 · c4ecb95 · c4ecb95
1 parent 4a10790
commit c4ecb95
Show file tree

Hide file tree

Showing 12 changed files with 54 additions and 51 deletions.
diff --git a/frontend/src/components/citation/CitationCommunities.vue b/frontend/src/components/citation/CitationCommunities.vue
@@ -32,10 +32,11 @@
             <InputText v-model="search_raw" placeholder="Search abstracts" class="w-full" />
             <InputIcon class="z-10 pi pi-search" />
           </IconField>
-
           <InputGroupAddon>
-            <Button @click="top_nodes(5)" icon="pi pi-plus" text plain :loading="await_community"
-              v-tooltip.bottom="'Top nodes'" />
+            <Button class="w-8 h-8" icon="material-symbols-rounded" size="small" :loading="await_community" text plain
+              rounded v-tooltip.bottom="'Top nodes'" @click="top_nodes(5)">
+              <span class="material-symbols-rounded !text-lg">hub</span>
+            </Button>
           </InputGroupAddon>
         </InputGroup>
 
@@ -163,7 +164,8 @@ export default {
   methods: {
     select_community(community_nodes) {
       var com = this;
-      var abstract_names = new Set(community_nodes);
+      var abstract_names = new Set(community_nodes.nodes);
+
       const subset = [];
       com.citation_data.nodes.forEach((node) => {
         if (abstract_names.has(node.attributes["Name"].toUpperCase())) {

diff --git a/frontend/src/components/citation/CitationSummary.vue b/frontend/src/components/citation/CitationSummary.vue
@@ -15,7 +15,7 @@
   </EmptyState>
 
   <p v-if="!await_load && summary" class="mt-3 text-md text-primary-400">Generated Summary:</p>
-  
+
   <div v-if="!await_load && summary" class="mt-3 whitespace-pre-wrap">
     {{ summary }}
   </div>
@@ -26,7 +26,7 @@ import ListActionHeader from "@/components/verticalpane/ListActionHeader.vue";
 import EmptyState from "@/components/verticalpane/EmptyState.vue";
 export default {
   name: "CitationSummary",
-  props: ["active_function", "sorted", "citation_data", "node_index"],
+  props: ["await_community", "active_function", "sorted", "citation_data", "node_index"],
   emits: ["await_community_changed"],
   data() {
     return {

diff --git a/frontend/src/components/pane/CitationPaneSystem.vue b/frontend/src/components/pane/CitationPaneSystem.vue
@@ -11,7 +11,7 @@
       </h3>
       <div class="flex items-center gap-1 ml-auto">
         <Button class="w-5 h-5 ml-auto" size="small" text rounded plain @click="add_subset(active_subset)">
-          <span class="dark:text-white !text-lg material-symbols-rounded"> add </span>
+          <span class="dark:text-white !text-lg material-symbols-rounded"> note_add </span>
         </Button>
         <Button class="w-5 h-5" size="small" text rounded plain @click="close_pane()">
           <span class="dark:text-white !text-lg material-symbols-rounded"> close </span>
@@ -44,7 +44,7 @@
 
 <script>
 import SubsetPane from "@/components/pane/modules/subset/SubsetPane.vue";
-
+import { useToast } from "primevue/usetoast";
 export default {
   name: "TermPaneSystem",
   props: ["mode","gephi_data", "active_subset", "active_node", "node_color_index"],
@@ -149,6 +149,7 @@ export default {
       } else {
         this.emitter.emit("addSubsetToSummary", subset);
       }
+      this.toast.add({ severity: 'success', detail: 'Subset added to summary.', life: 4000 });
     },
     selectTab(name, tab) {
       if (name == "node") {
@@ -165,7 +166,7 @@ export default {
   },
   mounted() {
     // this.dragElement(document.getElementById("pane"));
-
+    this.toast = useToast();
     this.emitter.on("reset_protein", (state) => {
       this.selectTab("node", state);
     });

diff --git a/frontend/src/components/pane/modules/difexp/RegulatedProteins.vue b/frontend/src/components/pane/modules/difexp/RegulatedProteins.vue
@@ -4,7 +4,7 @@
       :key="index">
       <strong class="text-sm font-normal capitalize dark:text-slate-400">{{ entry }}</strong>
       <InputNumber :useGrouping="false" :min="key.min" :max="key.max" :step="key.step" v-model="key.value"
-        @value-change="select_proteins()" inputClass="w-28 h-5 !px-1.5 !text-xs text-center" />
+        @value-change="select_proteins()" inputClass="w-16 h-5 !px-1.5 !text-xs text-center" />
     </li>
   </ul>
 
@@ -25,7 +25,7 @@
         <div
           class="grid grid-cols-12 items-center gap-2 py-2 bg-[var(--card-bg)] shadow-[0_10px_30px_-18px_#34343D] dark:shadow-[0_10px_30px_-18px_#ffffff] z-[1]">
 
-          <a class="flex items-center justify-start col-span-4 gap-1 text-sm cursor-pointer" v-on:click="
+          <a class="flex items-center justify-start col-span-6 gap-1 text-sm cursor-pointer" v-on:click="
             sort_node = sort_node === 'asc' ? 'dsc' : 'asc';
           sort_cluster = '';
           sort_degree = '';
@@ -37,7 +37,7 @@
             </span>
           </a>
 
-          <a class="flex items-center justify-center col-span-4 gap-1 text-sm text-center cursor-pointer" v-on:click="
+          <a class="flex items-center justify-center col-span-3 gap-1 text-sm text-center cursor-pointer" v-on:click="
             sort_cluster = sort_cluster === 'asc' ? 'dsc' : 'asc';
           sort_node = '';
           sort_degree = '';
@@ -49,7 +49,7 @@
             </span>
           </a>
 
-          <a class="flex items-center justify-center col-span-4 gap-1 text-sm text-center cursor-pointer" v-on:click="
+          <a class="flex items-center justify-center col-span-3 gap-1 text-sm text-center cursor-pointer" v-on:click="
             sort_degree = sort_degree === 'asc' ? 'dsc' : 'asc';
           sort_cluster = '';
           sort_node = '';
@@ -66,11 +66,11 @@
     <!-- options -->
     <template #option="slotProps">
       <div :class="`grid items-center w-full grid-cols-12 gap-2`">
-        <span class="col-span-4 text-xs">{{ slotProps.option?.attributes?.["Name"] }}</span>
+        <span class="col-span-6 text-xs line-clamp-2">{{ slotProps.option?.attributes?.["Name"] }}</span>
 
-        <span class="col-span-4 text-xs text-center">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
+        <span class="col-span-3 text-xs text-center">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
 
-        <span class="col-span-4 text-xs text-center">{{ slotProps.option?.attributes?.["Degree"] }}</span>
+        <span class="col-span-3 text-xs text-center">{{ 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">{{ slotProps.option?.[0]?.name }}</span>
+        <span class="text-xs line-clamp-2">{{ slotProps.option?.[0]?.name }}</span>
 
-        <span class="text-xs">{{ slotProps.option?.[1]?.name }}</span>
+        <span class="text-xs line-clamp-2">{{ slotProps.option?.[1]?.name }}</span>
       </div>
     </template>
   </Listbox>

diff --git a/frontend/src/components/pane/modules/layer/EnrichmentLayerPane.vue b/frontend/src/components/pane/modules/layer/EnrichmentLayerPane.vue
@@ -2,7 +2,7 @@
   <div v-show="active_termlayers !== null">
     <header v-if="active_termlayers !== null" class="flex flex-wrap items-center gap-2">
       <span class="flex items-center gap-1 text-sm font-medium">
-        <strong class="font-normal dark:text-slate-300">pathways:</strong>
+        <strong class="font-normal dark:text-slate-300">Pathways:</strong>
         {{ active_termlayers.main.size }}
       </span>
     </header>

diff --git a/frontend/src/components/pane/modules/layer/LayerProteins.vue b/frontend/src/components/pane/modules/layer/LayerProteins.vue
@@ -19,7 +19,7 @@
         <div
           class="grid grid-cols-12 items-center gap-2 py-2 bg-[var(--card-bg)] shadow-[0_10px_30px_-18px_#34343D] dark:shadow-[0_10px_30px_-18px_#ffffff] z-[1]">
 
-          <a class="flex items-center justify-start col-span-4 gap-1 text-sm cursor-pointer" v-on:click="
+          <a class="flex items-center justify-start col-span-6 gap-1 text-sm cursor-pointer" v-on:click="
             sort_node = sort_node === 'asc' ? 'dsc' : 'asc';
           sort_cluster = '';
           sort_degree = '';
@@ -31,7 +31,7 @@
             </span>
           </a>
 
-          <a class="flex items-center justify-center col-span-4 gap-1 text-sm text-center cursor-pointer" v-on:click="
+          <a class="flex items-center justify-center col-span-3 gap-1 text-sm text-center cursor-pointer" v-on:click="
             sort_cluster = sort_cluster === 'asc' ? 'dsc' : 'asc';
           sort_node = '';
           sort_degree = '';
@@ -43,7 +43,7 @@
             </span>
           </a>
 
-          <a class="flex items-center justify-center col-span-4 gap-1 text-sm text-center cursor-pointer" v-on:click="
+          <a class="flex items-center justify-center col-span-3 gap-1 text-sm text-center cursor-pointer" v-on:click="
             sort_degree = sort_degree === 'asc' ? 'dsc' : 'asc';
           sort_cluster = '';
           sort_node = '';
@@ -60,11 +60,11 @@
     <!-- options -->
     <template #option="slotProps">
       <div :class="`grid items-center w-full grid-cols-12 gap-2`">
-        <span class="col-span-4 text-xs">{{ slotProps.option?.attributes?.["Name"] }}</span>
+        <span class="col-span-6 text-xs line-clamp-2">{{ slotProps.option?.attributes?.["Name"] }}</span>
 
-        <span class="col-span-4 text-xs text-center">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
+        <span class="col-span-3 text-xs text-center">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
 
-        <span class="col-span-4 text-xs text-center">{{ slotProps.option?.attributes?.["Degree"] }}</span>
+        <span class="col-span-3 text-xs text-center">{{ slotProps.option?.attributes?.["Degree"] }}</span>
       </div>
     </template>
   </Listbox>

diff --git a/frontend/src/components/pane/modules/node/NodeConnections.vue b/frontend/src/components/pane/modules/node/NodeConnections.vue
@@ -19,7 +19,7 @@
         <div
           class="grid grid-cols-12 items-center gap-2 py-2 bg-[var(--card-bg)] shadow-[0_10px_30px_-18px_#34343D] dark:shadow-[0_10px_30px_-18px_#ffffff] z-[1]">
 
-          <a class="flex items-center justify-start col-span-4 gap-1 text-sm cursor-pointer" v-on:click="
+          <a class="flex items-center justify-start col-span-6 gap-1 text-sm cursor-pointer" v-on:click="
             sort_node = sort_node === 'asc' ? 'dsc' : 'asc';
           sort_cluster = '';
           sort_degree = '';
@@ -31,7 +31,7 @@
             </span>
           </a>
 
-          <a class="flex items-center justify-center col-span-4 gap-1 text-sm text-center cursor-pointer" v-on:click="
+          <a class="flex items-center justify-center col-span-3 gap-1 text-sm text-center cursor-pointer" v-on:click="
             sort_cluster = sort_cluster === 'asc' ? 'dsc' : 'asc';
           sort_node = '';
           sort_degree = '';
@@ -43,7 +43,7 @@
             </span>
           </a>
 
-          <a class="flex items-center justify-center col-span-4 gap-1 text-sm text-center cursor-pointer" v-on:click="
+          <a class="flex items-center justify-center col-span-3 gap-1 text-sm text-center cursor-pointer" v-on:click="
             sort_degree = sort_degree === 'asc' ? 'dsc' : 'asc';
           sort_cluster = '';
           sort_node = '';
@@ -60,11 +60,11 @@
     <!-- options -->
     <template #option="slotProps">
       <div :class="`grid items-center w-full grid-cols-12 gap-2`">
-        <span class="col-span-4 text-xs">{{ slotProps.option?.attributes?.["Name"] }}</span>
+        <span class="col-span-6 text-xs line-clamp-2">{{ slotProps.option?.attributes?.["Name"] }}</span>
 
-        <span class="col-span-4 text-xs text-center">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
+        <span class="col-span-3 text-xs text-center">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
 
-        <span class="col-span-4 text-xs text-center">{{ slotProps.option?.attributes?.["Degree"] }}</span>
+        <span class="col-span-3 text-xs text-center">{{ slotProps.option?.attributes?.["Degree"] }}</span>
       </div>
     </template>
   </Listbox>

diff --git a/frontend/src/components/pane/modules/node/NodePane.vue b/frontend/src/components/pane/modules/node/NodePane.vue
@@ -2,15 +2,15 @@
   <div v-show="active_node !== null">
     <header v-if="active_node !== null" class="flex flex-wrap items-center gap-2">
       <span class="flex items-center gap-1 text-sm font-medium">
-        <small class="w-3 h-3 border rounded-full border-slate-400" :style="{ backgroundColor: colornode }"></small>
+        <small class="flex-shrink-0 w-3 h-3 border rounded-full border-slate-400" :style="{ backgroundColor: colornode }"></small>
         <strong class="font-normal">{{ active_node.attributes["Name"] }}</strong>
       </span>
       <span class="flex items-center gap-1 text-sm font-medium">
-        <strong class="font-normal dark:text-slate-300">deg:</strong>
+        <strong class="font-normal dark:text-slate-300">Deg:</strong>
         {{ active_node.attributes["Degree"] }}
       </span>
       <span class="flex items-center gap-1 text-sm font-medium">
-        <strong class="font-normal dark:text-slate-300">pr:</strong>
+        <strong class="font-normal dark:text-slate-300">Pr:</strong>
         {{ Math.abs(active_node.attributes["PageRank"]).toExponential(2) }}
       </span>
     </header>

diff --git a/frontend/src/components/pane/modules/node/RoutingNode.vue b/frontend/src/components/pane/modules/node/RoutingNode.vue
@@ -7,7 +7,7 @@
 
   <div class="flex items-center gap-1.5">
     <strong class="text-sm font-normal dark:text-slate-400">Connection:</strong>
-    <span class="flex items-center gap-1 capitalize">
+    <span class="flex items-center gap-1 capitalize" v-if="path !== null">
       <span :class="`material-symbols-rounded !text-lg ${path ? 'text-primary-500' : 'text-red-500'}`">
         {{ path ? 'check_circle' : 'cancel' }}
       </span>

diff --git a/frontend/src/components/pane/modules/pathways/PathwayConnections.vue b/frontend/src/components/pane/modules/pathways/PathwayConnections.vue
@@ -19,7 +19,7 @@
         <div
           class="grid grid-cols-12 items-center gap-2 py-2 bg-[var(--card-bg)] shadow-[0_10px_30px_-18px_#34343D] dark:shadow-[0_10px_30px_-18px_#ffffff] z-[1]">
 
-          <a class="flex items-center justify-start col-span-4 gap-1 text-sm cursor-pointer" v-on:click="
+          <a class="flex items-center justify-start col-span-6 gap-1 text-sm cursor-pointer" v-on:click="
             sort_node = sort_node === 'asc' ? 'dsc' : 'asc';
           sort_cluster = '';
           sort_degree = '';
@@ -31,7 +31,7 @@
             </span>
           </a>
 
-          <a class="flex items-center justify-center col-span-4 gap-1 text-sm text-center cursor-pointer" v-on:click="
+          <a class="flex items-center justify-center col-span-3 gap-1 text-sm text-center cursor-pointer" v-on:click="
             sort_cluster = sort_cluster === 'asc' ? 'dsc' : 'asc';
           sort_node = '';
           sort_degree = '';
@@ -43,7 +43,7 @@
             </span>
           </a>
 
-          <a class="flex items-center justify-center col-span-4 gap-1 text-sm text-center cursor-pointer" v-on:click="
+          <a class="flex items-center justify-center col-span-3 gap-1 text-sm text-center cursor-pointer" v-on:click="
             sort_degree = sort_degree === 'asc' ? 'dsc' : 'asc';
           sort_cluster = '';
           sort_node = '';
@@ -60,11 +60,11 @@
     <!-- options -->
     <template #option="slotProps">
       <div :class="`grid items-center w-full grid-cols-12 gap-2`">
-        <span class="col-span-4 text-xs">{{ slotProps.option?.attributes?.["Name"] }}</span>
+        <span class="col-span-6 text-xs line-clamp-2">{{ slotProps.option?.attributes?.["Name"] }}</span>
 
-        <span class="col-span-4 text-xs text-center">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
+        <span class="col-span-3 text-xs text-center">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
 
-        <span class="col-span-4 text-xs text-center">{{ slotProps.option?.attributes?.["Degree"] }}</span>
+        <span class="col-span-3 text-xs text-center">{{ slotProps.option?.attributes?.["Degree"] }}</span>
       </div>
     </template>
   </Listbox>
@@ -166,8 +166,8 @@ export default {
             ? 1
             : t1.attributes["Name"].toLowerCase() ===
               t2.attributes["Name"].toLowerCase()
-            ? 0
-            : -1;
+              ? 0
+              : -1;
         });
       } else if (com.sort_node == "dsc") {
         filtered.sort(function (t1, t2) {
@@ -176,8 +176,8 @@ export default {
             ? 1
             : t1.attributes["Name"].toLowerCase() ===
               t2.attributes["Name"].toLowerCase()
-            ? 0
-            : -1;
+              ? 0
+              : -1;
         });
       }
 

diff --git a/frontend/src/components/pane/modules/subset/SubsetConnections.vue b/frontend/src/components/pane/modules/subset/SubsetConnections.vue
@@ -19,7 +19,7 @@
         <div
           class="grid grid-cols-12 items-center gap-2 py-2 bg-[var(--card-bg)] shadow-[0_10px_30px_-18px_#34343D] dark:shadow-[0_10px_30px_-18px_#ffffff] z-[1]">
 
-          <a class="flex items-center justify-start col-span-4 gap-1 text-sm cursor-pointer" v-on:click="
+          <a class="flex items-center justify-start col-span-6 gap-1 text-sm cursor-pointer" v-on:click="
             sort_node = sort_node === 'asc' ? 'dsc' : 'asc';
           sort_cluster = '';
           sort_degree = '';
@@ -31,7 +31,7 @@
             </span>
           </a>
 
-          <a class="flex items-center justify-center col-span-4 gap-1 text-sm text-center cursor-pointer" v-on:click="
+          <a class="flex items-center justify-center col-span-3 gap-1 text-sm text-center cursor-pointer" v-on:click="
             sort_cluster = sort_cluster === 'asc' ? 'dsc' : 'asc';
           sort_node = '';
           sort_degree = '';
@@ -43,7 +43,7 @@
             </span>
           </a>
 
-          <a class="flex items-center justify-center col-span-4 gap-1 text-sm text-center cursor-pointer" v-on:click="
+          <a class="flex items-center justify-center col-span-3 gap-1 text-sm text-center cursor-pointer" v-on:click="
             sort_degree = sort_degree === 'asc' ? 'dsc' : 'asc';
           sort_cluster = '';
           sort_node = '';
@@ -60,11 +60,11 @@
     <!-- options -->
     <template #option="slotProps">
       <div :class="`grid items-center w-full grid-cols-12 gap-2`">
-        <span class="col-span-4 text-xs">{{ slotProps.option.label }}</span>
+        <span class="col-span-6 text-xs line-clamp-2">{{ slotProps.option.label }}</span>
 
-        <span class="col-span-4 text-xs text-center">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
+        <span class="col-span-3 text-xs text-center">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
 
-        <span class="col-span-4 text-xs text-center">{{ slotProps.option?.attributes?.["Degree"] }}</span>
+        <span class="col-span-3 text-xs text-center">{{ slotProps.option?.attributes?.["Degree"] }}</span>
       </div>
     </template>
   </Listbox>