From 830c03b69823afdf1a16e83959e616ccd410ecc8 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Sun, 20 Oct 2024 22:43:31 +0100
Subject: [PATCH] Move all sort options under select

---
 ome2024-ngff-challenge/src/App.svelte        | 118 ++++++-------------
 ome2024-ngff-challenge/src/ColumnSort.svelte |  23 ++--
 ome2024-ngff-challenge/src/tableStore.js     |  14 +--
 3 files changed, 47 insertions(+), 108 deletions(-)

diff --git a/ome2024-ngff-challenge/src/App.svelte b/ome2024-ngff-challenge/src/App.svelte
index 94373cb..5719419 100644
--- a/ome2024-ngff-challenge/src/App.svelte
+++ b/ome2024-ngff-challenge/src/App.svelte
@@ -73,16 +73,18 @@
   }
 
   let sortedBy = "";
-  let sortAscending = true;
-  function handleSort(colname) {
-    if (sortedBy === colname) {
-      sortAscending = !sortAscending;
+  let sortAscending = false;
+  function toggleSortAscending() {
+    sortAscending = !sortAscending;
+    ngffTable.sortTable(sortedBy, sortAscending);
+  }
+  function handleSort(event) {
+    sortedBy = event.target.value;
+    if (sortedBy === "") {
+      ngffTable.sortTable("index", true);
     } else {
-      // start by sorting descending (biggest first)
-      sortAscending = false;
+      ngffTable.sortTable(sortedBy, sortAscending);
     }
-    sortedBy = colname;
-    ngffTable.sortTable(colname, sortAscending);
   }
 
   // Main filtering function
@@ -318,74 +320,29 @@
           </div>
 
           <div class="clear"></div>
-        </div>
-        Sort by:
-        <div class="sortButtons">
-          <!-- <ColumnSort
-            col_label={"Rating"}
-            col_name={"rating"}
-            {handleSort}
-            {sortedBy}
-            {sortAscending}
-          /> -->
-          <ColumnSort
-            col_label={"X"}
-            col_name={"size_x"}
-            {handleSort}
-            {sortedBy}
-            {sortAscending}
-          />
-          <ColumnSort
-            col_label={"Y"}
-            col_name={"size_y"}
-            {handleSort}
-            {sortedBy}
-            {sortAscending}
-          />
-          <ColumnSort
-            col_label={"Z"}
-            col_name={"size_z"}
-            {handleSort}
-            {sortedBy}
-            {sortAscending}
-          />
-          <ColumnSort
-            col_label={"C"}
-            col_name={"size_c"}
-            {handleSort}
-            {sortedBy}
-            {sortAscending}
-          />
-          <ColumnSort
-            col_label={"T"}
-            col_name={"size_t"}
-            {handleSort}
-            {sortedBy}
-            {sortAscending}
-          />
-        </div>
-        <div class="sortButtons">
-          <ColumnSort
-            col_label={"Chunks"}
-            col_name={"chunk_pixels"}
-            {handleSort}
-            {sortedBy}
-            {sortAscending}
-          />
-          <ColumnSort
-            col_label={"Shards"}
-            col_name={"shard_pixels"}
-            {handleSort}
-            {sortedBy}
-            {sortAscending}
-          />
-          <ColumnSort
-            col_label={"Data size"}
-            col_name={"written"}
-            {handleSort}
-            {sortedBy}
-            {sortAscending}
-          />
+
+          <div>Sort by:</div>
+          <div class="selectWrapper">
+            <select
+              on:change={handleSort}
+            >
+              <option value="">--</option
+              >
+              <hr />
+              {#each ["x", "y", "z", "c", "t"] as dim}
+                <option value="size_{dim}">Size: {dim.toUpperCase()}</option>
+              {/each}
+              <hr />
+              <option value="written">Data Size (bytes)</option>
+              <option value="chunk_pixels">Chunk Size (pixels)</option>
+              <option value="shard_pixels">Shard Size (pixels)</option>
+            </select>
+            <div>
+              <ColumnSort
+                toggleAscending={toggleSortAscending}
+                sortAscending={sortAscending} />
+            </div>
+          </div>
         </div>
       </div>
 
@@ -553,13 +510,4 @@
   .results h3 {
     margin: 10px;
   }
-
-  .sortButtons {
-    display: flex;
-    flex-direction: row;
-    border: solid var(--border-color) 1px;
-    border-radius: 5px;
-    width: fit-content;
-    margin: 5px 0;
-  }
 </style>
diff --git a/ome2024-ngff-challenge/src/ColumnSort.svelte b/ome2024-ngff-challenge/src/ColumnSort.svelte
index 84db378..30f0a12 100644
--- a/ome2024-ngff-challenge/src/ColumnSort.svelte
+++ b/ome2024-ngff-challenge/src/ColumnSort.svelte
@@ -1,32 +1,27 @@
 <script>
-  export let col_name;
-  export let col_label;
-  export let handleSort;
-  export let sortedBy;
+  export let toggleAscending;
   export let sortAscending;
 </script>
 
-<button on:click={() => handleSort(col_name)}>
-  {col_label}
-
-  <span class="acc" class:strong={sortedBy==col_name && sortAscending}>^</span>
-  <span class="dec" class:strong={sortedBy==col_name && !sortAscending}>^</span>
-
+<button on:click={() => toggleAscending()}>
+  <span class="acc" class:strong={sortAscending}>^</span>
+  <span class="dec" class:strong={!sortAscending}>^</span>
 </button>
 
 <style>
   button {
     background-color: var(--light-background);
-    border: none;
+    border: solid var(--border-color) 1px;
+    border-radius: 5px;
     text-wrap: none;
     white-space: nowrap;
     position: relative;
-    padding-right: 20px;
-    padding-left: 5px;
+    padding: 9px 10px 11px 10px;
     outline: none;
     margin: 0;
-    border-radius: 0;
+    height: 35px;
   }
+
   button:focus-visible {
    outline: 4px solid gold;
 }
diff --git a/ome2024-ngff-challenge/src/tableStore.js b/ome2024-ngff-challenge/src/tableStore.js
index 78cfa40..598b266 100644
--- a/ome2024-ngff-challenge/src/tableStore.js
+++ b/ome2024-ngff-challenge/src/tableStore.js
@@ -35,7 +35,7 @@ export async function loadMultiscales(url, signal) {
 }
 
 class NgffTable {
-  constructor(sortBy = "rating", sortAscending = false) {
+  constructor(sortBy = "index", sortAscending = true) {
     this.store = writable([]);
     this.selectedRow = writable(null);
 
@@ -129,7 +129,7 @@ class NgffTable {
 
   addRows(rows) {
     // Each row is a dict {"url": "http...zarr"}
-    rows = rows.map((row) => {
+    rows = rows.map((row, index) => {
       // Validating csv files don't contain whitespaces
       // Object.entries(row).forEach(([key, value]) => {
       //   if (value?.startsWith && (value.startsWith(" ") || value?.endsWith(" ")) || (key && key.startsWith(" ") || key.endsWith(" "))) {
@@ -166,16 +166,11 @@ class NgffTable {
         let shards = row.shards.split(",").map((dim) => parseInt(dim));
         row.shard_pixels = shards.reduce((prev, curr) => prev * curr, 1);
       }
-      row.rating = Math.random() * 4;
+      // add index for sorting
+      row.index = Math.random() * (1 + index);
       return row;
     });
 
-    // Add a higher rating for a couple of samples within this collection
-    if (rows.length > 1) {
-      rows[getRandomInt(rows.length)].rating = 10 + Math.random() * 5;
-      rows[getRandomInt(rows.length)].rating = 5 + Math.random() * 5;
-    }
-
     console.log("Adding rows", rows);
 
     this.store.update((table) => {
@@ -336,6 +331,7 @@ class NgffTable {
   }
 
   sortTable(colName, ascending = true) {
+    console.log("sortTable", colName, ascending);
     this.sortColumn = colName;
     this.sortAscending = ascending;
     let isNumber = this.isColumnNumeric(colName);