Support sorting by chunk and shard sizes

ome · Oct 16, 2024 · 1dd0fb1 · 1dd0fb1
1 parent bb8da59
commit 1dd0fb1
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 3 deletions.
diff --git a/ome2024-ngff-challenge/src/App.svelte b/ome2024-ngff-challenge/src/App.svelte
@@ -359,6 +359,22 @@
             {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"}
@@ -371,7 +387,7 @@
 
       <div class="results">
         <h3 style="margin-left: 15px">Showing {tableRows.length} images</h3>
-        <ImageList {tableRows} {textFilter} />
+        <ImageList {tableRows} {textFilter} {sortedBy} />
       </div>
     </div>
   </main>
@@ -537,5 +553,6 @@
     border: solid var(--border-color) 1px;
     border-radius: 5px;
     width: fit-content;
+    margin: 5px 0;
   }
 </style>
diff --git a/ome2024-ngff-challenge/src/ImageList.svelte b/ome2024-ngff-challenge/src/ImageList.svelte
@@ -4,6 +4,7 @@
 
   export let tableRows;
   export let textFilter;
+  export let sortedBy = undefined;
 
   function getItemKey(index) {
     return tableRows[index].url;
@@ -46,7 +47,7 @@
     on:afterScroll={afterScroll}
   >
     <div slot="item" let:index let:style {style} class="row">
-      <ZarrListItem rowData={tableRows[index]} {textFilter} />
+      <ZarrListItem rowData={tableRows[index]} {textFilter} {sortedBy} />
     </div>
   </VirtualList>
 </div>

diff --git a/ome2024-ngff-challenge/src/ZarrListItem.svelte b/ome2024-ngff-challenge/src/ZarrListItem.svelte
@@ -7,6 +7,7 @@
 
   export let rowData;
   export let textFilter;
+  export let sortedBy = undefined;
 
   let imgAttrs;
   let imgUrl;
@@ -64,7 +65,13 @@
         <tr><td>{dim.toUpperCase()}</td><td>{rowData[`size_${dim}`]}</td></tr>
       {/if}
     {/each}
-    <tr><td>Size</td><td style="white-space: nowrap">{filesizeformat(rowData.written)}</td></tr>
+    {#if sortedBy == "chunk_pixels" }
+      <tr><td>Chunks</td><td>{rowData.chunks}</td></tr>
+    {:else if sortedBy == "shard_pixels" }
+      <tr><td>Shards</td><td>{rowData.shards}</td></tr>
+    {:else}
+      <tr><td>Size</td><td style="white-space: nowrap">{filesizeformat(rowData.written)}</td></tr>
+    {/if}
   </table>
   <div>
     <div>{@html rowData.name ? rowData.name.replaceAll(textFilter, `<mark>${textFilter}</mark>`) : ""}</div>

diff --git a/ome2024-ngff-challenge/src/tableStore.js b/ome2024-ngff-challenge/src/tableStore.js
@@ -157,6 +157,14 @@ class NgffTable {
           0,
         );
       }
+      if (row.chunks) {
+        let chunks = row.chunks.split(",").map((dim) => parseInt(dim));
+        row.chunk_pixels = chunks.reduce((prev, curr) => prev * curr, 1);
+      }
+      if (row.shards) {
+        let shards = row.shards.split(",").map((dim) => parseInt(dim));
+        row.shard_pixels = shards.reduce((prev, curr) => prev * curr, 1);
+      }
       row.rating = Math.random() * 4;
       return row;
     });