NN-643 complete term pane UI

BackofenLab · Jan 6, 2025 · 3cfe38e · 3cfe38e
1 parent 8d214dc
commit 3cfe38e
Show file tree

Hide file tree

Showing 4 changed files with 387 additions and 200 deletions.
diff --git a/frontend/src/components/pane/modules/pathways/PathwayConnections.vue b/frontend/src/components/pane/modules/pathways/PathwayConnections.vue
@@ -1,5 +1,75 @@
 <template>
-  <div id="pathway-connect" class="connect">
+  <p v-if="!filt_links?.length" class="flex items-center justify-center py-1 text-sm text-slate-300">No nodes
+  </p>
+
+  <Listbox v-if="filt_links?.length" optionLabel="" :options="filt_links" :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" :tabindex="0"
+    emptyMessage="No nodes available.">
+
+    <template #footer>
+      <header class="sticky -top-2 bg-[var(--card-bg)] items-center gap-2 z-[1] order-1">
+        <!-- sorting -->
+        <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="
+            sort_node = sort_node === 'asc' ? 'dsc' : 'asc';
+          sort_cluster = '';
+          sort_degree = '';
+          ">
+            Nodes
+            <span :class="`material-symbols-rounded text-sm cursor-pointer 
+            ${sort_node ? 'text-primary-500' : 'text-slate-600'}`">
+              {{ !sort_node ? "swap_vert" : sort_node === "asc" ? "south" : "north" }}
+            </span>
+          </a>
+
+          <a class="flex items-center justify-center col-span-4 gap-1 text-sm text-center cursor-pointer" v-on:click="
+            sort_cluster = sort_cluster === 'asc' ? 'dsc' : 'asc';
+          sort_node = '';
+          sort_degree = '';
+          ">
+            Cluster
+            <span :class="`material-symbols-rounded text-sm cursor-pointer 
+            ${sort_cluster ? 'text-primary-500' : 'text-slate-600'}`">
+              {{ !sort_cluster ? "swap_vert" : sort_cluster === "asc" ? "south" : "north" }}
+            </span>
+          </a>
+
+          <a class="flex items-center justify-center col-span-4 gap-1 text-sm text-center cursor-pointer" v-on:click="
+            sort_degree = sort_degree === 'asc' ? 'dsc' : 'asc';
+          sort_cluster = '';
+          sort_node = '';
+          ">
+            Degree
+            <span :class="`material-symbols-rounded text-sm cursor-pointer 
+            ${sort_degree ? 'text-primary-500' : 'text-slate-600'}`">
+              {{ !sort_degree ? "swap_vert" : sort_degree === "asc" ? "south" : "north" }}
+            </span>
+          </a>
+        </div>
+      </header>
+    </template>
+    <!-- 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-4 text-xs text-center">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
+
+        <span class="col-span-4 text-xs text-center">{{ slotProps.option?.attributes?.["Degree"] }}</span>
+      </div>
+    </template>
+  </Listbox>
+
+  <!-- <div id="pathway-connect" class="connect">
     <div class="sorting">
       <a
         class="node_filter"
@@ -51,7 +121,7 @@
         </tbody>
       </table>
     </div>
-  </div>
+  </div> -->
 </template>
 
 <script>
@@ -134,8 +204,8 @@ export default {
           (t1, t2) => t1.attributes["Degree"] - t2.attributes["Degree"]
         );
       }
-
-      return new Set(filtered);
+      return filtered;
+      // return new Set(filtered);
     },
   },
   methods: {
@@ -150,11 +220,11 @@ export default {
 };
 </script>
 
-<style>
+<!-- <style>
 #pathway-connect {
   width: 100%;
   height: 100%;
   font-family: "ABeeZee", sans-serif;
   padding: 1.3vw 1.3vw 1vw 1.3vw;
 }
-</style>
+</style> -->