From 0fb0c2efa230880eccebf74d4339e74ed8f41f5b Mon Sep 17 00:00:00 2001
From: Johannes Soltwedel <38459088+jo-mueller@users.noreply.github.com>
Date: Mon, 8 Jun 2026 16:20:24 +0200
Subject: [PATCH 1/4] feat: add scene member list

---
 .../SceneGraph/MemberImagesList.svelte        | 236 ++++++++++++++++++
 src/JsonValidator/SceneGraph/index.svelte     |   3 +
 2 files changed, 239 insertions(+)
 create mode 100644 src/JsonValidator/SceneGraph/MemberImagesList.svelte

diff --git a/src/JsonValidator/SceneGraph/MemberImagesList.svelte b/src/JsonValidator/SceneGraph/MemberImagesList.svelte
new file mode 100644
index 0000000..fb3b9a8
--- /dev/null
+++ b/src/JsonValidator/SceneGraph/MemberImagesList.svelte
@@ -0,0 +1,236 @@
+<script>
+  import { getJson, getZarrGroupAttrs, validate } from "../../utils";
+  import Icon from "svelte-icons-pack/Icon.svelte";
+  import BsCheckCircleFill from "svelte-icons-pack/bs/BsCheckCircleFill";
+
+  export let source;
+  export let sceneAttrs;
+
+  const url = window.location.origin + window.location.pathname;
+
+  // Extract member images from scene coordinateTransformations
+  function getMemberImages() {
+    const members = new Map();
+    
+    for (const ct of sceneAttrs?.coordinateTransformations || []) {
+      // Check input path (image reference)
+      if (ct.input?.path) {
+        const path = ct.input.path;
+        if (!members.has(path)) {
+          members.set(path, {
+            path,
+            name: ct.input.name || path,
+            coordinateSystem: ct.input.name || "—",
+            targetSystem: ct.output?.name || ct.output || "—"
+          });
+        }
+      }
+      
+      // Check output path (image reference)
+      if (ct.output?.path) {
+        const path = ct.output.path;
+        if (!members.has(path)) {
+          members.set(path, {
+            path,
+            name: ct.output.name || path,
+            coordinateSystem: ct.output.name || "—",
+            targetSystem: ct.input?.name || ct.input || "—"
+          });
+        }
+      }
+    }
+    
+    return Array.from(members.values());
+  }
+
+  const memberImages = getMemberImages();
+
+  // Build URL for validating a member image
+  function getValidatorUrl(imagePath) {
+    return `${url}?source=${encodeURIComponent(source + "/" + imagePath)}`;
+  }
+
+  // Check validation status for a member image
+  async function checkValidation(imagePath) {
+    try {
+      const attrs = await getZarrGroupAttrs(`${source}/${imagePath}`);
+      const errors = await validate(attrs);
+      return errors.length === 0;
+    } catch (e) {
+      return false;
+    }
+  }
+</script>
+
+<div class="member-list">
+  <h4>Member Images</h4>
+  
+  {#if memberImages.length === 0}
+    <p class="no-images">No member images found in scene metadata.</p>
+  {:else}
+    <table>
+      <thead>
+        <tr>
+          <th>Path</th>
+          <th>Coordinate System</th>
+          <th>Target</th>
+          <th>Validate</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each memberImages as image}
+          {@const validationPromise = checkValidation(image.path)}
+          <tr>
+            <td class="path-cell">
+              <code>{image.path}</code>
+            </td>
+            <td class="cs-cell">
+              {image.coordinateSystem}
+            </td>
+            <td class="target-cell">
+              {image.targetSystem}
+            </td>
+            <td class="action-cell">
+              {#await validationPromise}
+                <span class="validate-icon checking">
+                  <Icon src={BsCheckCircleFill} />
+                </span>
+              {:then isValid}
+                <a 
+                  href={getValidatorUrl(image.path)} 
+                  class="validate-icon"
+                  class:valid={isValid}
+                  class:invalid={!isValid}
+                  title="Validate {image.path}"
+                >
+                  <Icon src={BsCheckCircleFill} />
+                </a>
+              {:catch}
+                <a 
+                  href={getValidatorUrl(image.path)} 
+                  class="validate-icon invalid"
+                  title="Validate {image.path}"
+                >
+                  <Icon src={BsCheckCircleFill} />
+                </a>
+              {/await}
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</div>
+
+<style>
+  .member-list {
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 12px;
+    padding: 15px;
+    margin-top: 20px;
+  }
+
+  h4 {
+    margin: 0 0 12px 0;
+    color: #334155;
+    font-weight: 600;
+    font-size: 1rem;
+  }
+
+  .no-images {
+    color: #666;
+    font-style: italic;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 14px;
+  }
+
+  thead {
+    background-color: #f1f5f9;
+  }
+
+  th {
+    text-align: left;
+    padding: 10px 12px;
+    font-weight: 600;
+    color: #334155;
+    border-bottom: 2px solid #e2e8f0;
+  }
+
+  td {
+    padding: 10px 12px;
+    border-bottom: 1px solid #e2e8f0;
+    vertical-align: middle;
+  }
+
+  tr:hover {
+    background-color: #f8fafc;
+  }
+
+  .path-cell code {
+    background: #e2e8f0;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 13px;
+    color: #334155;
+  }
+
+  .cs-cell, .target-cell {
+    color: #64748b;
+  }
+
+  .action-cell {
+    text-align: center;
+    width: 60px;
+  }
+
+  .validate-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    border-radius: 50%;
+    transition: transform 0.15s, background-color 0.15s, color 0.15s;
+    color: #94a3b8;
+  }
+
+  .validate-icon.checking {
+    color: #94a3b8;
+    animation: pulse 1s infinite;
+  }
+
+  .validate-icon.valid {
+    color: #22c55e;
+  }
+
+  .validate-icon.invalid {
+    color: #ef4444;
+  }
+
+  .validate-icon :global(svg) {
+    width: 20px;
+    height: 20px;
+  }
+
+  .validate-icon:hover {
+    transform: scale(1.15);
+    background-color: #f1f5f9;
+  }
+
+  .validate-icon.valid:hover {
+    background-color: #dcfce7;
+  }
+
+  .validate-icon.invalid:hover {
+    background-color: #fee2e2;
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+</style>
diff --git a/src/JsonValidator/SceneGraph/index.svelte b/src/JsonValidator/SceneGraph/index.svelte
index 53fb4fd..3ac936e 100644
--- a/src/JsonValidator/SceneGraph/index.svelte
+++ b/src/JsonValidator/SceneGraph/index.svelte
@@ -1,6 +1,7 @@
 <script>
   import { getJson } from "../../utils";
   import GraphSvgArrows from "./GraphSvgArrows.svelte";
+  import MemberImagesList from "./MemberImagesList.svelte";
   import Thumbnail from "../Thumbnail/index.svelte";
 
   export let source;
@@ -120,6 +121,8 @@
   <div>Loading scene graph...</div>
 {:then graphData}
 
+  <MemberImagesList {source} {sceneAttrs} />
+
   <div id="diagram" class="diagram">
     <GraphSvgArrows {graphData} />
     <div class="columns">

From a579d2f86e5cce238141bac51e98ee832889ce7c Mon Sep 17 00:00:00 2001
From: Johannes Soltwedel <38459088+jo-mueller@users.noreply.github.com>
Date: Mon, 8 Jun 2026 16:27:23 +0200
Subject: [PATCH 2/4] feat: only have path and valid button in list

---
 .../SceneGraph/MemberImagesList.svelte        | 61 +++++--------------
 1 file changed, 15 insertions(+), 46 deletions(-)

diff --git a/src/JsonValidator/SceneGraph/MemberImagesList.svelte b/src/JsonValidator/SceneGraph/MemberImagesList.svelte
index fb3b9a8..c767981 100644
--- a/src/JsonValidator/SceneGraph/MemberImagesList.svelte
+++ b/src/JsonValidator/SceneGraph/MemberImagesList.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { getJson, getZarrGroupAttrs, validate } from "../../utils";
+  import { getZarrGroupAttrs, validate } from "../../utils";
   import Icon from "svelte-icons-pack/Icon.svelte";
   import BsCheckCircleFill from "svelte-icons-pack/bs/BsCheckCircleFill";
 
@@ -8,39 +8,20 @@
 
   const url = window.location.origin + window.location.pathname;
 
-  // Extract member images from scene coordinateTransformations
+  // Extract member image paths from scene coordinateTransformations
   function getMemberImages() {
-    const members = new Map();
+    const paths = new Set();
     
     for (const ct of sceneAttrs?.coordinateTransformations || []) {
-      // Check input path (image reference)
       if (ct.input?.path) {
-        const path = ct.input.path;
-        if (!members.has(path)) {
-          members.set(path, {
-            path,
-            name: ct.input.name || path,
-            coordinateSystem: ct.input.name || "—",
-            targetSystem: ct.output?.name || ct.output || "—"
-          });
-        }
+        paths.add(ct.input.path);
       }
-      
-      // Check output path (image reference)
       if (ct.output?.path) {
-        const path = ct.output.path;
-        if (!members.has(path)) {
-          members.set(path, {
-            path,
-            name: ct.output.name || path,
-            coordinateSystem: ct.output.name || "—",
-            targetSystem: ct.input?.name || ct.input || "—"
-          });
-        }
+        paths.add(ct.output.path);
       }
     }
     
-    return Array.from(members.values());
+    return Array.from(paths).sort();
   }
 
   const memberImages = getMemberImages();
@@ -72,23 +53,15 @@
       <thead>
         <tr>
           <th>Path</th>
-          <th>Coordinate System</th>
-          <th>Target</th>
           <th>Validate</th>
         </tr>
       </thead>
       <tbody>
-        {#each memberImages as image}
-          {@const validationPromise = checkValidation(image.path)}
+        {#each memberImages as path}
+          {@const validationPromise = checkValidation(path)}
           <tr>
             <td class="path-cell">
-              <code>{image.path}</code>
-            </td>
-            <td class="cs-cell">
-              {image.coordinateSystem}
-            </td>
-            <td class="target-cell">
-              {image.targetSystem}
+              <code>{path}</code>
             </td>
             <td class="action-cell">
               {#await validationPromise}
@@ -97,19 +70,19 @@
                 </span>
               {:then isValid}
                 <a 
-                  href={getValidatorUrl(image.path)} 
+                  href={getValidatorUrl(path)} 
                   class="validate-icon"
                   class:valid={isValid}
                   class:invalid={!isValid}
-                  title="Validate {image.path}"
+                  title="Validate {path}"
                 >
                   <Icon src={BsCheckCircleFill} />
                 </a>
               {:catch}
                 <a 
-                  href={getValidatorUrl(image.path)} 
+                  href={getValidatorUrl(path)} 
                   class="validate-icon invalid"
-                  title="Validate {image.path}"
+                  title="Validate {path}"
                 >
                   <Icon src={BsCheckCircleFill} />
                 </a>
@@ -128,7 +101,7 @@
     border: 1px solid #ddd;
     border-radius: 12px;
     padding: 15px;
-    margin-top: 20px;
+    margin-bottom: 20px;
   }
 
   h4 {
@@ -179,13 +152,9 @@
     color: #334155;
   }
 
-  .cs-cell, .target-cell {
-    color: #64748b;
-  }
-
   .action-cell {
     text-align: center;
-    width: 60px;
+    width: 80px;
   }
 
   .validate-icon {

From 3063e386e10b29435b251475e78a280c8cbd99c9 Mon Sep 17 00:00:00 2001
From: Johannes Soltwedel <38459088+jo-mueller@users.noreply.github.com>
Date: Thu, 11 Jun 2026 11:33:09 +0200
Subject: [PATCH 3/4] feat: move member list to left hand site of index page

---
 .../SceneGraph/MemberImagesList.svelte        | 120 +++++++++---------
 src/JsonValidator/SceneGraph/index.svelte     |   3 -
 src/JsonValidator/index.svelte                |   5 +
 3 files changed, 67 insertions(+), 61 deletions(-)

diff --git a/src/JsonValidator/SceneGraph/MemberImagesList.svelte b/src/JsonValidator/SceneGraph/MemberImagesList.svelte
index c767981..b44b236 100644
--- a/src/JsonValidator/SceneGraph/MemberImagesList.svelte
+++ b/src/JsonValidator/SceneGraph/MemberImagesList.svelte
@@ -49,49 +49,43 @@
   {#if memberImages.length === 0}
     <p class="no-images">No member images found in scene metadata.</p>
   {:else}
-    <table>
-      <thead>
-        <tr>
-          <th>Path</th>
-          <th>Validate</th>
-        </tr>
-      </thead>
-      <tbody>
-        {#each memberImages as path}
-          {@const validationPromise = checkValidation(path)}
-          <tr>
-            <td class="path-cell">
-              <code>{path}</code>
-            </td>
-            <td class="action-cell">
-              {#await validationPromise}
-                <span class="validate-icon checking">
-                  <Icon src={BsCheckCircleFill} />
-                </span>
-              {:then isValid}
-                <a 
-                  href={getValidatorUrl(path)} 
-                  class="validate-icon"
-                  class:valid={isValid}
-                  class:invalid={!isValid}
-                  title="Validate {path}"
-                >
-                  <Icon src={BsCheckCircleFill} />
-                </a>
-              {:catch}
-                <a 
-                  href={getValidatorUrl(path)} 
-                  class="validate-icon invalid"
-                  title="Validate {path}"
-                >
-                  <Icon src={BsCheckCircleFill} />
-                </a>
-              {/await}
-            </td>
-          </tr>
-        {/each}
-      </tbody>
-    </table>
+  <div class="list-container">
+    <div class="list-header">
+      <div class="list-col col-path">Path</div>
+      <div class="list-col col-validate">Valid</div>
+    </div>
+    {#each memberImages as path}
+      {@const validationPromise = checkValidation(path)}
+      <a href={getValidatorUrl(path)} class="member-row">
+        <div class="list-col col-path">
+          <code>{path}</code>
+        </div>
+        <div class="list-col col-validate">
+          {#await validationPromise}
+            <span class="validate-icon checking">
+              <Icon src={BsCheckCircleFill} />
+            </span>
+          {:then isValid}
+            <span 
+              class="validate-icon"
+              class:valid={isValid}
+              class:invalid={!isValid}
+              title="Validate {path}"
+            >
+              <Icon src={BsCheckCircleFill} />
+            </span>
+          {:catch}
+            <span 
+              class="validate-icon invalid"
+              title="Validate {path}"
+            >
+              <Icon src={BsCheckCircleFill} />
+            </span>
+          {/await}
+        </div>
+      </a>
+    {/each}
+  </div>
   {/if}
 </div>
 
@@ -116,35 +110,46 @@
     font-style: italic;
   }
 
-  table {
-    width: 100%;
-    border-collapse: collapse;
+  .list-container {
+    display: flex;
+    flex-direction: column;
     font-size: 14px;
   }
 
-  thead {
+  .list-header {
+    display: grid;
+    grid-template-columns: 1fr 80px;
+    gap: 12px;
     background-color: #f1f5f9;
-  }
-
-  th {
-    text-align: left;
     padding: 10px 12px;
+    border-radius: 6px 6px 0 0;
     font-weight: 600;
     color: #334155;
     border-bottom: 2px solid #e2e8f0;
   }
 
-  td {
+  .member-row {
+    display: grid;
+    grid-template-columns: 1fr 80px;
+    gap: 12px;
     padding: 10px 12px;
     border-bottom: 1px solid #e2e8f0;
-    vertical-align: middle;
+    align-items: center;
+    text-decoration: none;
+    color: inherit;
+    transition: background-color 0.15s;
   }
 
-  tr:hover {
+  .member-row:hover {
     background-color: #f8fafc;
   }
 
-  .path-cell code {
+  .list-col {
+    display: flex;
+    align-items: center;
+  }
+
+  .col-path code {
     background: #e2e8f0;
     padding: 2px 6px;
     border-radius: 4px;
@@ -152,9 +157,8 @@
     color: #334155;
   }
 
-  .action-cell {
-    text-align: center;
-    width: 80px;
+  .col-validate {
+    justify-content: center;
   }
 
   .validate-icon {
diff --git a/src/JsonValidator/SceneGraph/index.svelte b/src/JsonValidator/SceneGraph/index.svelte
index 3ac936e..53fb4fd 100644
--- a/src/JsonValidator/SceneGraph/index.svelte
+++ b/src/JsonValidator/SceneGraph/index.svelte
@@ -1,7 +1,6 @@
 <script>
   import { getJson } from "../../utils";
   import GraphSvgArrows from "./GraphSvgArrows.svelte";
-  import MemberImagesList from "./MemberImagesList.svelte";
   import Thumbnail from "../Thumbnail/index.svelte";
 
   export let source;
@@ -121,8 +120,6 @@
   <div>Loading scene graph...</div>
 {:then graphData}
 
-  <MemberImagesList {source} {sceneAttrs} />
-
   <div id="diagram" class="diagram">
     <GraphSvgArrows {graphData} />
     <div class="columns">
diff --git a/src/JsonValidator/index.svelte b/src/JsonValidator/index.svelte
index f4800ef..ab8639d 100644
--- a/src/JsonValidator/index.svelte
+++ b/src/JsonValidator/index.svelte
@@ -9,6 +9,7 @@
   import OpenWith from "./OpenWithViewers/index.svelte";
   import Thumbnail from "./Thumbnail/index.svelte";
   import SceneGraph from "./SceneGraph/index.svelte";
+  import MemberImagesList from "./SceneGraph/MemberImagesList.svelte";
 
   import {
     CURRENT_VERSION,
@@ -128,6 +129,10 @@
   {:catch error}
     <!-- <p>No table data</p> -->
   {/await}
+
+  {#if omeAttrs.scene}
+    <MemberImagesList {source} sceneAttrs={omeAttrs.scene} />
+  {/if}
 </article>
 
 {#if omeAttrs.multiscales}

From af92031d81c9428bd549fe4fb14b6f70a6256094 Mon Sep 17 00:00:00 2001
From: Johannes Soltwedel <38459088+jo-mueller@users.noreply.github.com>
Date: Thu, 11 Jun 2026 22:20:24 +0200
Subject: [PATCH 4/4] feat: match colors to other checkmark

---
 src/JsonValidator/SceneGraph/MemberImagesList.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/JsonValidator/SceneGraph/MemberImagesList.svelte b/src/JsonValidator/SceneGraph/MemberImagesList.svelte
index b44b236..a11df4d 100644
--- a/src/JsonValidator/SceneGraph/MemberImagesList.svelte
+++ b/src/JsonValidator/SceneGraph/MemberImagesList.svelte
@@ -177,16 +177,17 @@
   }
 
   .validate-icon.valid {
-    color: #22c55e;
+    color: rgb(0, 128, 0);
   }
 
   .validate-icon.invalid {
-    color: #ef4444;
+    color: rgb(255, 0, 0);
   }
 
   .validate-icon :global(svg) {
     width: 20px;
     height: 20px;
+    fill: currentColor;
   }
 
   .validate-icon:hover {