NN-643 modify subset link and subset connection UI

BackofenLab · Jan 3, 2025 · 3ab3ef7 · 3ab3ef7
1 parent 9ea2e1d
commit 3ab3ef7
Show file tree

Hide file tree

Showing 2 changed files with 373 additions and 312 deletions.
diff --git a/frontend/src/components/pane/modules/subset/SubsetConnections.vue b/frontend/src/components/pane/modules/subset/SubsetConnections.vue
@@ -1,57 +1,75 @@
 <template>
-  <div id="subset-connect" class="connect">
-    <div class="sorting">
-      <a
-        class="node_filter"
-        v-on:click="
-          sort_node = sort_node === 'asc' ? 'dsc' : 'asc';
+  <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 !== null" optionLabel="label" :options="filt_links" :pt="{
+    header: { class: 'sticky top-0 flex-1 !px-0 bg-[var(--card-bg)] z-[1] order-1' },
+    listContainer: { class: 'order-3' },
+    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"
+    @update:modelValue="select_term" :tabindex="0" emptyMessage="No nodes available.">
+
+    <template #footer>
+      <header class="sticky top-0 bg-[var(--card-bg)] pt-3 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 text-right cursor-pointer" v-on:click="
+            sort_node = sort_node === 'asc' ? 'dsc' : 'asc';
           sort_cluster = '';
           sort_degree = '';
-        "
-        >nodes</a
-      >
-      <a
-        class="cluster_filter"
-        v-on:click="
-          sort_cluster = sort_cluster === 'asc' ? 'dsc' : 'asc';
+          ">
+            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-start col-span-4 gap-1 text-sm text-right cursor-pointer" v-on:click="
+            sort_cluster = sort_cluster === 'asc' ? 'dsc' : 'asc';
           sort_node = '';
           sort_degree = '';
-        "
-        >cluster</a
-      >
-      <a
-        class="degree_filter"
-        v-on:click="
-          sort_degree = sort_degree === 'asc' ? 'dsc' : 'asc';
+          ">
+            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-end col-span-4 gap-1 text-sm text-right cursor-pointer" v-on:click="
+            sort_degree = sort_degree === 'asc' ? 'dsc' : 'asc';
           sort_cluster = '';
           sort_node = '';
-        "
-        >degree</a
-      >
-    </div>
+          ">
+            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 ${slotProps.selected ? '!text-primary-400' : ''}`">
+        <span class="col-span-4 text-xs">{{ slotProps.option.label }}</span>
+
+        <span class="col-span-4 text-xs text-right">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
 
-    <div class="network-results" tabindex="0" @keydown="handleKeyDown">
-      <table>
-        <tbody>
-          <tr v-for="(entry, index) in filt_links" :key="index" class="option">
-            <td>
-              <div class="statistics-attr">
-                <a href="#">{{ entry.label }}</a>
-              </div>
-            </td>
-            <td>
-              <a class="statistics-val">{{
-                entry.attributes["Modularity Class"]
-              }}</a>
-            </td>
-            <td>
-              <a class="statistics-val">{{ entry.attributes["Degree"] }}</a>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
+        <span class="col-span-4 text-xs text-right">{{ slotProps.option?.attributes?.["Degree"] }}</span>
+      </div>
+    </template>
+  </Listbox>
 </template>
 
 <script>
@@ -89,8 +107,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) {
@@ -99,8 +117,8 @@ export default {
             ? 1
             : t1.attributes["Name"].toLowerCase() ===
               t2.attributes["Name"].toLowerCase()
-            ? 0
-            : -1;
+              ? 0
+              : -1;
         });
       }
 
@@ -127,18 +145,9 @@ export default {
           (t1, t2) => t1.attributes["Degree"] - t2.attributes["Degree"]
         );
       }
-
-      return new Set(filtered);
+      return filtered;
+      // return new Set(filtered);
     },
   },
 };
 </script>
-
-<style>
-#subset-connect {
-  width: 100%;
-  height: 100%;
-  font-family: "ABeeZee", sans-serif;
-  padding: 1.3vw 1.3vw 1vw 1.3vw;
-}
-</style>