diff --git a/dicom-viewer/public/fluoro-test.html b/dicom-viewer/public/fluoro-test.html
index 446d471..6235994 100644
--- a/dicom-viewer/public/fluoro-test.html
+++ b/dicom-viewer/public/fluoro-test.html
@@ -5,17 +5,36 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Fluoro Multiframe Test</title>
     <style>
-      html,body{height:100%;margin:0}
-      .dicom-viewer-root{width:100%;height:100vh;background:#222;color:#fff}
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+      }
+      .dicom-viewer-root {
+        width: 100%;
+        height: 100vh;
+        background: #222;
+        color: #fff;
+      }
     </style>
   </head>
   <body>
-    <div id="main_viewer" class="dicom-viewer-root" data-auto-cache-stack="false"></div>
+    <div
+      id="main_viewer"
+      class="dicom-viewer-root"
+      data-auto-cache-stack="false"
+    ></div>
 
     <!-- Provide noop React Refresh preamble to avoid plugin-react runtime errors -->
     <script>
-      window.$RefreshReg$ = window.$RefreshReg$ || function() {};
-      window.$RefreshSig$ = window.$RefreshSig$ || function() { return function(type) { return type; }; };
+      window.$RefreshReg$ = window.$RefreshReg$ || function () {};
+      window.$RefreshSig$ =
+        window.$RefreshSig$ ||
+        function () {
+          return function (type) {
+            return type;
+          };
+        };
     </script>
 
     <script type="module" src="/src/main.tsx"></script>
@@ -23,49 +42,86 @@
     <script>
       // Viewer state for fluoro multiframe images (using relative paths from public/test_images/)
       const state = {
-        "grid": {"rows": 1, "cols": 2},
-        "modes": ["stack", "stack"],
-        "stacks": [
-          {"i": ["wadouri:test_images/fluro/series_2369/1.3.12.2.1107.5.4.5.180506.30000026031914043350300000126.4.dcm"]},
-          {"i": ["wadouri:test_images/multibvalues/IMG_792_og2P5S6.dcm", "wadouri:test_images/multibvalues/IMG_793_3tKkg87.dcm"]}
+        grid: { rows: 1, cols: 2 },
+        modes: ["stack", "stack"],
+        stacks: [
+          {
+            i: [
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/1.3.12.2.1107.5.4.5.180506.30000026031914043350300000126.4.dcm",
+            ],
+          },
         ],
-        "stackIdx": [0, 1],
-        "stackPos": [0, 1],
-        "props": [
-          {"voiRange": {"lower": 0, "upper": 500}, "invert": false, "interpolationType": 1, "VOILUTFunction": "LINEAR", "colormap": {"name": "Grayscale", "opacity": []}},
-          {"voiRange": {"lower": 0, "upper": 500}, "invert": false, "interpolationType": 1, "VOILUTFunction": "LINEAR", "colormap": {"name": "Grayscale", "opacity": []}}
+        stackIdx: [0, 1],
+        stackPos: [0, 1],
+        props: [
+          {
+            voiRange: { lower: 0, upper: 500 },
+            invert: false,
+            interpolationType: 1,
+            VOILUTFunction: "LINEAR",
+            colormap: { name: "Grayscale", opacity: [] },
+          },
+          {
+            voiRange: { lower: 0, upper: 500 },
+            invert: false,
+            interpolationType: 1,
+            VOILUTFunction: "LINEAR",
+            colormap: { name: "Grayscale", opacity: [] },
+          },
         ],
-        "cam": [
-          {"viewUp": [0, 0, 1], "viewPlaneNormal": [1, 0, 0], "position": [150, 0, 0], "focalPoint": [0, 0, 0], "parallelProjection": true, "parallelScale": 100, "viewAngle": 90, "flipHorizontal": false, "flipVertical": false, "rotation": 0},
-          {"viewUp": [0, 0, 1], "viewPlaneNormal": [1, 0, 0], "position": [150, 0, 0], "focalPoint": [0, 0, 0], "parallelProjection": true, "parallelScale": 100, "viewAngle": 90, "flipHorizontal": false, "flipVertical": false, "rotation": 0}
+        cam: [
+          {
+            viewUp: [0, 0, 1],
+            viewPlaneNormal: [1, 0, 0],
+            position: [150, 0, 0],
+            focalPoint: [0, 0, 0],
+            parallelProjection: true,
+            parallelScale: 100,
+            viewAngle: 90,
+            flipHorizontal: false,
+            flipVertical: false,
+            rotation: 0,
+          },
+          {
+            viewUp: [0, 0, 1],
+            viewPlaneNormal: [1, 0, 0],
+            position: [150, 0, 0],
+            focalPoint: [0, 0, 0],
+            parallelProjection: true,
+            parallelScale: 100,
+            viewAngle: 90,
+            flipHorizontal: false,
+            flipVertical: false,
+            rotation: 0,
+          },
         ],
-        "orientations": [null, null],
-        "volumeSliceIndices": [null, null]
+        orientations: [null, null],
+        volumeSliceIndices: [null, null],
       };
 
       function callWhenReady(fnName, payload) {
         const maxWait = 5000;
         const start = Date.now();
         (function check() {
-          if (window[fnName] && typeof window[fnName] === 'function') {
+          if (window[fnName] && typeof window[fnName] === "function") {
             try {
               window[fnName](payload);
-              console.log('imported viewer state via', fnName);
+              console.log("imported viewer state via", fnName);
             } catch (e) {
-              console.error('importViewerState call failed', e);
+              console.error("importViewerState call failed", e);
             }
             return;
           }
           if (Date.now() - start > maxWait) {
-            console.warn('Timed out waiting for', fnName);
+            console.warn("Timed out waiting for", fnName);
             return;
           }
           setTimeout(check, 2000);
         })();
       }
 
-      document.addEventListener('DOMContentLoaded', () => {
-        callWhenReady('importViewerState', state);
+      document.addEventListener("DOMContentLoaded", () => {
+        callWhenReady("importViewerState", state);
       });
     </script>
   </body>
diff --git a/dicom-viewer/public/penra-test.html b/dicom-viewer/public/penra-test.html
index ff9104e..be4bfc9 100644
--- a/dicom-viewer/public/penra-test.html
+++ b/dicom-viewer/public/penra-test.html
@@ -5,70 +5,267 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Penra Courses — Viewer Test</title>
     <style>
-      html,body{height:100%;margin:0}
-      .dicom-viewer-root{width:100%;height:100vh;background:#222;color:#fff}
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+      }
+      .dicom-viewer-root {
+        width: 100%;
+        height: 100vh;
+        background: #222;
+        color: #fff;
+      }
     </style>
   </head>
   <body>
-    <div id="main_viewer" class="dicom-viewer-root" data-auto-cache-stack="false"></div>
+    <div
+      id="main_viewer"
+      class="dicom-viewer-root"
+      data-auto-cache-stack="false"
+    ></div>
 
     <!-- Provide noop React Refresh preamble to avoid plugin-react runtime errors -->
     <script>
-      window.$RefreshReg$ = window.$RefreshReg$ || function() {};
-      window.$RefreshSig$ = window.$RefreshSig$ || function() { return function(type) { return type; }; };
+      window.$RefreshReg$ = window.$RefreshReg$ || function () {};
+      window.$RefreshSig$ =
+        window.$RefreshSig$ ||
+        function () {
+          return function (type) {
+            return type;
+          };
+        };
     </script>
 
     <script type="module" src="/src/main.tsx"></script>
 
     <script>
       // Viewer state to import
-      const state = {"grid":{"rows":1,"cols":3},"modes":["stack","stack","stack"],"stacks":[{"i":["wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_573_PN7j4gd.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_580_kBgyDxS.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_572_DYQisSg.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_579_ya291yy.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_571_nThHs31.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_578_1eEKjB2.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_570_qT5wuZX.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_577_v2bo1kn.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_569_oV2dHz8.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_576_kgF1iXK.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_568_iY1z50L.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_575_BipYnZH.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_567_HawAeuC.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_574_FrcCKA7.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_566_AUDtXEf.dcm"]},{"i":["wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_588_tGfMjqb.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_592_Js4efiI.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_584_U8WCsNY.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_595_vFPcByt.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_587_jnB3wGF.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_591_1XZY7Le.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_583_C9KGrQ9.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_594_SqzeIRU.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_586_Hupum4d.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_590_pbyuWr4.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_582_6u9iQt1.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_593_rOYWenQ.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_585_4z2K1tj.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_589_F5fn0Wp.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_581_jmCHi0D.dcm"]},{"i":["wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_631_NxRBhMn.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_619_2cVhUyC.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_607_VvL52Af.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_627_RVhaiKA.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_615_nQtPQHJ.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_603_bAAqdKn.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_623_wy2tc7i.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_611_zZY7rSC.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_599_PUL3TkF.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_630_wIQBYJQ.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_618_oi80wJN.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_606_47SpfNJ.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_626_UNSOCYt.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_614_vcVgojF.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_602_VoRYz3y.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_622_Rj39VCd.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_610_AhQNlyr.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_598_pnjpR3G.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_629_hKAK6Ph.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_617_smztH5n.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_605_EfNQSic.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_625_asIOR8i.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_613_Qaa63p7.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_601_E8lUIGL.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_621_X45Edxw.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_609_P3mWXkz.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_597_alsdinT.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_628_51IriRz.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_616_sc6CY4V.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_604_HG8um6d.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_624_qr7EmUd.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_612_NUr6yLq.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_600_ngZGDnx.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_620_FfONZ99.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_608_j131qxy.dcm","wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_596_stFfHXn.dcm"]}],"stackIdx":[0,2,1],"stackPos":[0,0,2],"props":[{"voiRange":{"lower":39.150000000000034,"upper":559.1700000000001},"invert":false,"interpolationType":1,"VOILUTFunction":"LINEAR","colormap":{"name":"Grayscale","opacity":[]}},{"voiRange":{"lower":23.330000000000013,"upper":333.23},"invert":false,"interpolationType":1,"VOILUTFunction":"LINEAR","colormap":{"name":"Grayscale","opacity":[]}},{"voiRange":{"lower":35.47000000000003,"upper":504.35},"invert":false,"interpolationType":1,"VOILUTFunction":"LINEAR","colormap":{"name":"Grayscale","opacity":[]}}],"cam":[{"viewUp":[-0.00001587091537658125,-0.015633516013622284,0.9998778104782104],"viewPlaneNormal":[0.9999420159200826,0.010767119415860999,0.00018422042758444397],"position":[229.83617495377155,41.64140067850747,119.19293043555355],"focalPoint":[-54.36633106082782,38.581180913933935,119.14057149238982],"parallelProjection":true,"parallelScale":204.18618383081306,"viewAngle":90,"flipHorizontal":false,"flipVertical":false,"rotation":0},{"viewUp":[0.0010457660537213087,-0.9813110828399658,0.1924252212047577],"viewPlaneNormal":[0.04514460865590469,-0.19218279979693106,-0.9803202210357175],"position":[-21.89042091369629,36.68157196044922,65.77458190917969],"focalPoint":[-27.218482971191406,59.3633918762207,181.4740447998047],"parallelProjection":true,"parallelScale":81.6656748487095,"viewAngle":90,"flipHorizontal":false,"flipVertical":false,"rotation":0},{"viewUp":[-0.00001587091537658125,-0.015633516013622284,0.9998778104782104],"viewPlaneNormal":[0.9999420159493561,0.010767116601264741,0.00018422603640028001],"position":[238.6157989501953,43.7907600402832,106.84664916992188],"focalPoint":[-45.586692810058594,40.73054122924805,106.7942886352539],"parallelProjection":true,"parallelScale":178.65974529053696,"viewAngle":90,"flipHorizontal":false,"flipVertical":false,"rotation":0}],"orientations":[null,null,null],"volumeSliceIndices":[null,null,null]};
+      const state = {
+        grid: { rows: 1, cols: 3 },
+        modes: ["stack", "stack", "stack"],
+        stacks: [
+          {
+            i: [
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_573_PN7j4gd.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_580_kBgyDxS.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_572_DYQisSg.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_579_ya291yy.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_571_nThHs31.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_578_1eEKjB2.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_570_qT5wuZX.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_577_v2bo1kn.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_569_oV2dHz8.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_576_kgF1iXK.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_568_iY1z50L.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_575_BipYnZH.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_567_HawAeuC.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_574_FrcCKA7.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_566_AUDtXEf.dcm",
+            ],
+          },
+          {
+            i: [
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_588_tGfMjqb.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_592_Js4efiI.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_584_U8WCsNY.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_595_vFPcByt.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_587_jnB3wGF.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_591_1XZY7Le.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_583_C9KGrQ9.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_594_SqzeIRU.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_586_Hupum4d.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_590_pbyuWr4.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_582_6u9iQt1.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_593_rOYWenQ.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_585_4z2K1tj.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_589_F5fn0Wp.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_581_jmCHi0D.dcm",
+            ],
+          },
+          {
+            i: [
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_631_NxRBhMn.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_619_2cVhUyC.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_607_VvL52Af.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_627_RVhaiKA.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_615_nQtPQHJ.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_603_bAAqdKn.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_623_wy2tc7i.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_611_zZY7rSC.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_599_PUL3TkF.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_630_wIQBYJQ.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_618_oi80wJN.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_606_47SpfNJ.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_626_UNSOCYt.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_614_vcVgojF.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_602_VoRYz3y.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_622_Rj39VCd.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_610_AhQNlyr.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_598_pnjpR3G.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_629_hKAK6Ph.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_617_smztH5n.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_605_EfNQSic.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_625_asIOR8i.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_613_Qaa63p7.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_601_E8lUIGL.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_621_X45Edxw.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_609_P3mWXkz.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_597_alsdinT.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_628_51IriRz.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_616_sc6CY4V.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_604_HG8um6d.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_624_qr7EmUd.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_612_NUr6yLq.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_600_ngZGDnx.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_620_FfONZ99.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_608_j131qxy.dcm",
+              "wadouri:https://www.penracourses.org.uk/media/atlas/dicom/IMG_596_stFfHXn.dcm",
+            ],
+          },
+        ],
+        stackIdx: [0, 2, 1],
+        stackPos: [0, 0, 2],
+        props: [
+          {
+            voiRange: { lower: 39.150000000000034, upper: 559.1700000000001 },
+            invert: false,
+            interpolationType: 1,
+            VOILUTFunction: "LINEAR",
+            colormap: { name: "Grayscale", opacity: [] },
+          },
+          {
+            voiRange: { lower: 23.330000000000013, upper: 333.23 },
+            invert: false,
+            interpolationType: 1,
+            VOILUTFunction: "LINEAR",
+            colormap: { name: "Grayscale", opacity: [] },
+          },
+          {
+            voiRange: { lower: 35.47000000000003, upper: 504.35 },
+            invert: false,
+            interpolationType: 1,
+            VOILUTFunction: "LINEAR",
+            colormap: { name: "Grayscale", opacity: [] },
+          },
+        ],
+        cam: [
+          {
+            viewUp: [
+              -0.00001587091537658125, -0.015633516013622284,
+              0.9998778104782104,
+            ],
+            viewPlaneNormal: [
+              0.9999420159200826, 0.010767119415860999, 0.00018422042758444397,
+            ],
+            position: [
+              229.83617495377155, 41.64140067850747, 119.19293043555355,
+            ],
+            focalPoint: [
+              -54.36633106082782, 38.581180913933935, 119.14057149238982,
+            ],
+            parallelProjection: true,
+            parallelScale: 204.18618383081306,
+            viewAngle: 90,
+            flipHorizontal: false,
+            flipVertical: false,
+            rotation: 0,
+          },
+          {
+            viewUp: [
+              0.0010457660537213087, -0.9813110828399658, 0.1924252212047577,
+            ],
+            viewPlaneNormal: [
+              0.04514460865590469, -0.19218279979693106, -0.9803202210357175,
+            ],
+            position: [
+              -21.89042091369629, 36.68157196044922, 65.77458190917969,
+            ],
+            focalPoint: [
+              -27.218482971191406, 59.3633918762207, 181.4740447998047,
+            ],
+            parallelProjection: true,
+            parallelScale: 81.6656748487095,
+            viewAngle: 90,
+            flipHorizontal: false,
+            flipVertical: false,
+            rotation: 0,
+          },
+          {
+            viewUp: [
+              -0.00001587091537658125, -0.015633516013622284,
+              0.9998778104782104,
+            ],
+            viewPlaneNormal: [
+              0.9999420159493561, 0.010767116601264741, 0.00018422603640028001,
+            ],
+            position: [238.6157989501953, 43.7907600402832, 106.84664916992188],
+            focalPoint: [
+              -45.586692810058594, 40.73054122924805, 106.7942886352539,
+            ],
+            parallelProjection: true,
+            parallelScale: 178.65974529053696,
+            viewAngle: 90,
+            flipHorizontal: false,
+            flipVertical: false,
+            rotation: 0,
+          },
+        ],
+        orientations: [null, null, null],
+        volumeSliceIndices: [null, null, null],
+      };
 
       function callWhenReady(fnName, payload) {
         const maxWait = 5000;
         const start = Date.now();
         (function check() {
-          if (window[fnName] && typeof window[fnName] === 'function') {
+          if (window[fnName] && typeof window[fnName] === "function") {
             try {
               window[fnName](payload);
-              console.log('imported viewer state via', fnName);
+              console.log("imported viewer state via", fnName);
             } catch (e) {
-              console.error('importViewerState call failed', e);
+              console.error("importViewerState call failed", e);
             }
             return;
           }
           if (Date.now() - start > maxWait) {
-            console.warn('Timed out waiting for', fnName);
+            console.warn("Timed out waiting for", fnName);
             return;
           }
           setTimeout(check, 2000);
         })();
       }
 
-      document.addEventListener('DOMContentLoaded', () => {
+      document.addEventListener("DOMContentLoaded", () => {
         // Ask the viewer to load the stacks first (via exposed API), then wait 2s and import the viewer state.
         (function loadStacksThenImport() {
           if (!state.stacks || !Array.isArray(state.stacks)) {
-            callWhenReady('importViewerState_main_viewer', state);
+            callWhenReady("importViewerState_main_viewer", state);
             return;
           }
 
           function pushStacks() {
-            const fnName = 'loadAdditionalStack_main_viewer';
-            if (window[fnName] && typeof window[fnName] === 'function') {
+            const fnName = "loadAdditionalStack_main_viewer";
+            if (window[fnName] && typeof window[fnName] === "function") {
               try {
-                state.stacks.forEach(s => {
+                state.stacks.forEach((s) => {
                   if (s && Array.isArray(s.i) && s.i.length) {
                     // call the viewer API to load this stack into available stacks
                     window[fnName](s.i);
                   }
                 });
-                console.log('Requested viewer to load', state.stacks.length, 'stacks');
+                console.log(
+                  "Requested viewer to load",
+                  state.stacks.length,
+                  "stacks",
+                );
               } catch (e) {
-                console.warn('loadAdditionalStack call failed', e);
+                console.warn("loadAdditionalStack call failed", e);
               }
               // Give the viewer 2 seconds to fetch/cache and mount imageIds, then import state
-              setTimeout(() => { callWhenReady('importViewerState_main_viewer', state); }, 2000);
+              setTimeout(() => {
+                callWhenReady("importViewerState_main_viewer", state);
+              }, 2000);
               return true;
             }
             return false;
@@ -82,8 +279,10 @@
             (function waitForApi() {
               if (pushStacks()) return;
               if (Date.now() - start > maxWait) {
-                console.warn('Timed out waiting for loadAdditionalStack API; importing state directly');
-                callWhenReady('importViewerState_main_viewer', state);
+                console.warn(
+                  "Timed out waiting for loadAdditionalStack API; importing state directly",
+                );
+                callWhenReady("importViewerState_main_viewer", state);
                 return;
               }
               setTimeout(waitForApi, 2000);
diff --git a/dicom-viewer/src/App.tsx b/dicom-viewer/src/App.tsx
index a4ff263..947f707 100644
--- a/dicom-viewer/src/App.tsx
+++ b/dicom-viewer/src/App.tsx
@@ -18,7 +18,7 @@ import { volumeLoader } from '@cornerstonejs/core';
 import { metaData } from '@cornerstonejs/core';
 import * as dicomParser from "dicom-parser";
 import cornerstoneDICOMImageLoader from "@cornerstonejs/dicom-image-loader"
-import { getLoggerConfig, logger, parseLogFormat, setLoggerConfig, type LogFormat } from "./lib/logger";
+import { getLoggerConfig, logger, parseLogFormat, parseLogLevel, setLoggerConfig, type LogFormat, type LogLevel } from "./lib/logger";
 
 import { NoLabelArrowAnnotateTool } from "./NoLabelArrowAnnotateTool";
 import { render } from "@cornerstonejs/tools/tools/displayTools/Labelmap/labelmapDisplay"
@@ -81,6 +81,23 @@ type StackSeriesGroup = {
   imageIds: string[];
   seriesInstanceUID?: string;
   bValue?: number | null;
+  groupValues?: Partial<Record<GroupingRuleId, string>>;
+};
+
+type GroupingRuleId =
+  | "dwiBValue"
+  | "dwiDirection"
+  | "temporalPosition"
+  | "triggerTime"
+  | "contentTime"
+  | "echoTime"
+  | "echoNumber";
+
+type GroupingRuleDefinition = {
+  id: GroupingRuleId;
+  label: string;
+  description: string;
+  defaultEnabled: boolean;
 };
 
 type ViewportDropZone = "center" | "left" | "right" | "top" | "bottom";
@@ -178,6 +195,65 @@ const LOG_FORMAT_OPTIONS: Array<{ label: string; value: LogFormat }> = [
   { label: "Verbose", value: "verbose" },
   { label: "JSON", value: "json" },
 ];
+const LOG_LEVEL_OPTIONS: Array<{ label: string; value: LogLevel }> = [
+  { label: "Off", value: "silent" },
+  { label: "Error", value: "error" },
+  { label: "Warn", value: "warn" },
+  { label: "Info", value: "info" },
+  { label: "Debug", value: "debug" },
+];
+const GROUPING_SETTINGS_KEY = "dv3d_grouping";
+const GROUPING_RULE_DEFINITIONS: GroupingRuleDefinition[] = [
+  {
+    id: "dwiBValue",
+    label: "DWI b-value",
+    description: "DiffusionBValue (0018,9087) + known private fallbacks",
+    defaultEnabled: true,
+  },
+  {
+    id: "dwiDirection",
+    label: "DWI direction",
+    description: "Diffusion Gradient Direction (0018,9089)",
+    defaultEnabled: true,
+  },
+  {
+    id: "temporalPosition",
+    label: "Temporal position",
+    description: "Temporal Position Identifier (0020,0100)",
+    defaultEnabled: true,
+  },
+  {
+    id: "triggerTime",
+    label: "Trigger time",
+    description: "Trigger Time (0018,1060)",
+    defaultEnabled: true,
+  },
+  {
+    id: "contentTime",
+    label: "Content/Acquisition time",
+    description: "Content Time (0008,0033) / Acquisition Time (0008,0032)",
+    defaultEnabled: true,
+  },
+  {
+    id: "echoTime",
+    label: "Echo time",
+    description: "Echo Time (0018,0081)",
+    defaultEnabled: true,
+  },
+  {
+    id: "echoNumber",
+    label: "Echo number",
+    description: "Echo Number (0018,0086)",
+    defaultEnabled: true,
+  },
+];
+
+function createDefaultGroupingRuleState(): Record<GroupingRuleId, boolean> {
+  return GROUPING_RULE_DEFINITIONS.reduce((acc, rule) => {
+    acc[rule.id] = rule.defaultEnabled;
+    return acc;
+  }, {} as Record<GroupingRuleId, boolean>);
+}
 const appLogger = logger.child("app");
 
 function getToolIcon(toolName?: string) {
@@ -310,6 +386,8 @@ type AppProps = {
   annotationJson?: string;
   viewerState?: string;
   initialLoggerConfig?: {
+    minLevel?: LogLevel;
+    /** @deprecated Use minLevel instead. */
     debug?: boolean;
     format?: LogFormat;
   };
@@ -317,7 +395,7 @@ type AppProps = {
 };
 
 // App definintion
-function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewerState, initialLoggerConfig }: AppProps) {
+export default function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewerState, initialLoggerConfig }: AppProps) {
   const appRootRef = useRef<HTMLDivElement>(null);
   const elementRef = useRef<HTMLDivElement>(null)
   const running = useRef(false)
@@ -325,10 +403,16 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
 
   const MOUSE_SETTINGS_KEY = "dv3d_mouseToolBindings";
   const CTRL_MOUSE_SETTINGS_KEY = "dv3d_ctrlMouseToolBindings";
-  const initialLogDebug = !!initialLoggerConfig?.debug;
+  const initialLogMinLevel = (initialLoggerConfig?.minLevel as LogLevel | undefined)
+    ?? (initialLoggerConfig?.debug !== undefined ? (initialLoggerConfig.debug ? "debug" : "warn") : undefined)
+    ?? getLoggerConfig().minLevel;
   const initialLogFormat = parseLogFormat(initialLoggerConfig?.format ?? getLoggerConfig().format);
-  const [loggingDebugEnabled, setLoggingDebugEnabled] = useState(initialLogDebug);
+  const [loggingMinLevel, setLoggingMinLevel] = useState<LogLevel>(initialLogMinLevel);
   const [loggingFormat, setLoggingFormat] = useState<LogFormat>(initialLogFormat);
+  const [advancedGroupingEnabled, setAdvancedGroupingEnabled] = useState(true);
+  const [groupingRuleEnabled, setGroupingRuleEnabled] = useState<Record<GroupingRuleId, boolean>>(
+    () => createDefaultGroupingRuleState()
+  );
 
   const [settingsOpen, setSettingsOpen] = useState(false);
   // Settings open state
@@ -789,85 +873,83 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
       .then(async (descriptors) => {
         if (!mounted) return;
         const stacksRaw = Array.isArray(descriptors) ? descriptors : [];
-        const normalized: Array<StackEntry> = await Promise.all(
-          stacksRaw.map(async (d) => {
-            if (Array.isArray(d)) {
-              const expanded = await expandMultiframeImageIds(d as string[]);
-              const seriesGroups = await deriveSeriesGroupsFromImageIds(expanded);
-              return { imageIds: expanded, seriesGroups };
-            }
-            const imageIdsRaw = Array.isArray((d as any).imageIds) ? (d as any).imageIds : (Array.isArray((d as any).i) ? (d as any).i : []);
-            const imageIds = await expandMultiframeImageIds(imageIdsRaw);
-            let seriesGroups: StackSeriesGroup[] | undefined;
+        const allStacks: StackEntry[] = [];
 
-            if (Array.isArray((d as any).series)) {
-              const seriesExpanded = await Promise.all(
-                (d as any).series.map(async (seriesEntry: any, seriesIdx: number) => {
-                  const rawIds = Array.isArray(seriesEntry?.imageIds)
-                    ? seriesEntry.imageIds
-                    : (Array.isArray(seriesEntry?.i) ? seriesEntry.i : []);
-                  const expandedIds = await expandMultiframeImageIds(rawIds);
-                  const rawLabel = typeof seriesEntry?.name === "string" ? seriesEntry.name : "";
-                  const label = rawLabel.trim() || `Series ${seriesIdx + 1}`;
-                  return {
-                    key: String(seriesEntry?.seriesInstanceUID || seriesEntry?.seriesId || `SERIES_${seriesIdx}`),
-                    label,
-                    imageIds: expandedIds,
-                    seriesInstanceUID: seriesEntry?.seriesInstanceUID,
-                    bValue: Number.isFinite(Number(seriesEntry?.bValue)) ? Number(seriesEntry.bValue) : null,
-                  } as StackSeriesGroup;
-                })
-              );
+        for (const d of stacksRaw) {
+          const isRawArray = Array.isArray(d);
+          const imageIdsRaw: string[] = isRawArray
+            ? (d as string[])
+            : (Array.isArray((d as any).imageIds) ? (d as any).imageIds : (Array.isArray((d as any).i) ? (d as any).i : []));
 
-              const filtered = seriesExpanded.filter((group) => group.imageIds.length > 0);
-              if (filtered.length > 0) {
-                seriesGroups = filtered;
-              }
-            }
+          const meta: Partial<StackEntry> = isRawArray ? {} : {
+            studyId: (d as any).studyId,
+            name: (d as any).name,
+            caseId: (d as any).caseId,
+            studyInstanceUID: (d as any).studyInstanceUID,
+          };
 
-            if (!seriesGroups || seriesGroups.length === 0) {
-              seriesGroups = await deriveSeriesGroupsFromImageIds(imageIds);
+          // If the descriptor has pre-declared series groups, respect them
+          // (expand multiframe flat within each series, no further splitting)
+          if (!isRawArray && Array.isArray((d as any).series)) {
+            const seriesExpanded = await Promise.all(
+              (d as any).series.map(async (seriesEntry: any, seriesIdx: number) => {
+                const rawIds = Array.isArray(seriesEntry?.imageIds)
+                  ? seriesEntry.imageIds
+                  : (Array.isArray(seriesEntry?.i) ? seriesEntry.i : []);
+                const expandedIds = await expandMultiframeImageIds(rawIds);
+                const rawLabel = typeof seriesEntry?.name === "string" ? seriesEntry.name : "";
+                const label = rawLabel.trim() || `Series ${seriesIdx + 1}`;
+                return {
+                  key: String(seriesEntry?.seriesInstanceUID || seriesEntry?.seriesId || `SERIES_${seriesIdx}`),
+                  label,
+                  imageIds: expandedIds,
+                  seriesInstanceUID: seriesEntry?.seriesInstanceUID,
+                  bValue: Number.isFinite(Number(seriesEntry?.bValue)) ? Number(seriesEntry.bValue) : null,
+                } as StackSeriesGroup;
+              })
+            );
+            const filtered = seriesExpanded.filter((group) => group.imageIds.length > 0);
+            if (filtered.length > 0) {
+              const allImageIds = filtered.flatMap((g) => g.imageIds);
+              allStacks.push({ imageIds: allImageIds, seriesGroups: filtered, ...meta });
+              continue;
             }
+          }
 
-            // try to preserve old studyInstanceUID extraction if needed (best-effort)
-            let studyInstanceUID: string | undefined = (d as any).studyInstanceUID;
-            // optional: attempt to fetch first file and extract StudyInstanceUID if dicomParser available
-            if (!studyInstanceUID && imageIds.length > 0) {
-              try {
-                const first = imageIds[0];
-                if (typeof fetch === 'function' && typeof (window as any).dicomParser !== 'undefined' && first.startsWith('wadouri:')) {
-                  const url = stripWadouriPrefix(first);
-                  const resp = await fetch(url);
-                  const buffer = await resp.arrayBuffer();
-                  const ds = (window as any).dicomParser.parseDicom(new Uint8Array(buffer));
-                  studyInstanceUID = ds.string('x0020000d');
-                }
-              } catch (e) {
-                // ignore UID extraction failures
-              }
-            }
-            return {
-              imageIds,
+          // Split multiframe files into separate stacks; single-frame IDs stay together
+          const { singleFrameIds, multiframeGroups } = await splitMultiframeToStacks(imageIdsRaw);
+
+          if (singleFrameIds.length > 0) {
+            const seriesGroups = await deriveSeriesGroupsFromImageIds(singleFrameIds);
+            allStacks.push({ imageIds: singleFrameIds, seriesGroups, ...meta });
+          }
+
+          for (const mf of multiframeGroups) {
+            const baseName = stripWadouriPrefix(mf.baseImageId).split("/").pop()?.split("?")[0] ?? "multiframe";
+            const mfName = meta.name ? `${meta.name} \u2014 ${baseName}` : baseName;
+            const seriesGroups = await deriveSeriesGroupsFromImageIds(mf.frameIds);
+            allStacks.push({
+              imageIds: mf.frameIds,
               seriesGroups,
-              studyInstanceUID,
-              studyId: (d as any).studyId,
-              name: (d as any).name,
-              caseId: (d as any).caseId,
-            };
-          })
-        );
+              name: mfName,
+              studyId: meta.studyId,
+              studyInstanceUID: meta.studyInstanceUID,
+              caseId: meta.caseId,
+            });
+          }
+        }
 
-        setAvailableStacks(normalized);
+        setAvailableStacks(allStacks);
 
-        // Seed viewports with first stack if present (preserve old behavior)
-        if (normalized[0]) {
-          const firstStack = normalized[0];
+        // Seed viewports with first stack if present (preserve old behaviour)
+        if (allStacks[0]) {
+          const firstStack = allStacks[0];
           let firstGroups = firstStack.seriesGroups || [];
           if (firstGroups.length === 0) {
             await setLoadedImageIdsAndCacheMeta(firstStack.imageIds, { force: true });
             firstGroups = await deriveSeriesGroupsFromImageIds(firstStack.imageIds);
-            normalized[0] = { ...firstStack, seriesGroups: firstGroups };
-            setAvailableStacks([...normalized]);
+            allStacks[0] = { ...firstStack, seriesGroups: firstGroups };
+            setAvailableStacks([...allStacks]);
           }
           const firstSeries = firstGroups[0]?.imageIds || firstStack.imageIds;
           await setLoadedImageIdsAndCacheMeta(firstSeries);
@@ -892,13 +974,10 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
   const handleLoadStack = async (viewportIdx: number, stackIdx: number) => {
     const stackObj = availableStacks[stackIdx];
     if (!stackObj) return;
-    let stack = stackObj.imageIds;
-    appLogger.debug("[handleLoadStack] Starting with imageIds:", stack.length, "ids. First:", stack[0]?.slice(0, 80));
-
-    // IMPORTANT: Expand multiframe images BEFORE caching metadata
-    const expandedStack = await expandMultiframeImageIds(stack);
-    appLogger.debug("[handleLoadStack] After expansion:", expandedStack.length, "ids. First:", expandedStack[0]?.slice(0, 80));
-    stack = expandedStack;
+    // Stack imageIds are already correctly expanded at load time (single-frame IDs or
+    // per-frame query IDs for multiframe stacks). No expansion needed here.
+    const stack = stackObj.imageIds;
+    appLogger.debug("[handleLoadStack] Loading stack:", stack.length, "ids. First:", stack[0]?.slice(0, 80));
 
     await setLoadedImageIdsAndCacheMeta(stack, { force: true });
     const seriesGroups = await deriveSeriesGroupsFromImageIds(stack);
@@ -1219,7 +1298,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
     }
   };
 
-  const getNumberOfFramesForImageId = useCallback(async (imageId: string): Promise<number> => {
+  const detectMultiframeFrameCount = useCallback(async (imageId: string): Promise<number> => {
     if (!imageId.startsWith("wadouri:") || hasFrameQuery(imageId)) {
       return 1;
     }
@@ -1229,7 +1308,6 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
     const cacheKey = `wadouri:${url}`;
     const cached = multiframeCountCacheRef.current[cacheKey];
     if (cached !== undefined) {
-      appLogger.debug("[getNumberOfFramesForImageId] Cache hit:", cacheKey.slice(0, 60), "->", cached);
       return cached;
     }
 
@@ -1239,75 +1317,119 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
       return Number.isFinite(value) && value > 1 ? Math.floor(value) : 1;
     };
 
+    const tryParseBytes = (bytes: Uint8Array): number => {
+      try {
+        const ds = dicomParser.parseDicom(bytes);
+        return readFramesFromDataSet(ds);
+      } catch (e: any) {
+        // dicomParser throws on truncated data but may have a partial dataset
+        if (e?.dataSet) {
+          const frames = readFramesFromDataSet(e.dataSet);
+          if (frames > 1) return frames;
+        }
+        return 1;
+      }
+    };
+
+    // 1. Cornerstone metadata (populated after first load — free)
     try {
       const multiframeMeta = metaData.get("multiframeModule", normalized) as any;
       const fromMeta = Number(multiframeMeta?.numberOfFrames);
       if (Number.isFinite(fromMeta) && fromMeta > 1) {
-        appLogger.debug("[getNumberOfFramesForImageId] Found in metadata:", fromMeta);
         multiframeCountCacheRef.current[cacheKey] = Math.floor(fromMeta);
         return Math.floor(fromMeta);
       }
-    } catch (e) {
-      // Ignore metadata lookup failures.
-    }
+    } catch (_) {}
 
+    // 2. wadouri dataSetCacheManager (populated after first load — free)
     try {
       const cacheManager = cornerstoneDICOMImageLoader?.wadouri?.dataSetCacheManager;
       if (cacheManager?.get) {
         const dataSet = cacheManager.get(url);
-        const fromCache = readFramesFromDataSet(dataSet);
-        appLogger.debug("[getNumberOfFramesForImageId] Found in cache manager:", fromCache);
-        multiframeCountCacheRef.current[cacheKey] = fromCache;
-        return fromCache;
+        if (dataSet) {
+          const fromCache = readFramesFromDataSet(dataSet);
+          multiframeCountCacheRef.current[cacheKey] = fromCache;
+          return fromCache;
+        }
       }
-    } catch (e) {
-      // Ignore cache manager failures.
-    }
+    } catch (_) {}
 
+    // 3. Range request — first 64 KB is typically enough to find tag (0028,0008)
     try {
-      appLogger.debug("[getNumberOfFramesForImageId] Fetching:", url.slice(0, 80));
+      const rangeResponse = await fetch(url, { headers: { Range: "bytes=0-65535" } });
+      if (rangeResponse.ok || rangeResponse.status === 206) {
+        const buffer = await rangeResponse.arrayBuffer();
+        const count = tryParseBytes(new Uint8Array(buffer));
+        // If server returned full content (200) or we found frames, cache and return
+        if (rangeResponse.status === 200 || count > 1) {
+          multiframeCountCacheRef.current[cacheKey] = count;
+          return count;
+        }
+      }
+    } catch (_) {}
+
+    // 4. Full fetch fallback (only if range request not sufficient)
+    try {
+      appLogger.debug("[detectMultiframeFrameCount] Falling back to full fetch for:", url.slice(-60));
       const response = await fetch(url);
-      const arrayBuffer = await response.arrayBuffer();
-      const dataSet = dicomParser.parseDicom(new Uint8Array(arrayBuffer));
-      const fromFetch = readFramesFromDataSet(dataSet);
-      appLogger.debug("[getNumberOfFramesForImageId] Found via fetch:", fromFetch);
-      multiframeCountCacheRef.current[cacheKey] = fromFetch;
-      return fromFetch;
+      const buffer = await response.arrayBuffer();
+      const count = tryParseBytes(new Uint8Array(buffer));
+      multiframeCountCacheRef.current[cacheKey] = count;
+      return count;
     } catch (e) {
-      appLogger.debug("[getNumberOfFramesForImageId] Fetch failed, returning 1:", e);
+      appLogger.warn("[detectMultiframeFrameCount] Failed to detect frame count for:", url.slice(-60), e);
       multiframeCountCacheRef.current[cacheKey] = 1;
       return 1;
     }
   }, []);
 
-  const expandMultiframeImageIds = useCallback(async (rawImageIds: string[]) => {
-    const expanded: string[] = [];
-    appLogger.debug("[expandMultiframeImageIds] Input:", rawImageIds.length, "imageIds");
+  /** @deprecated Use detectMultiframeFrameCount instead. */
+  const getNumberOfFramesForImageId = detectMultiframeFrameCount;
+
+  const splitMultiframeToStacks = useCallback(async (rawImageIds: string[]): Promise<{
+    singleFrameIds: string[];
+    multiframeGroups: Array<{ baseImageId: string; frameIds: string[] }>;
+  }> => {
+    const singleFrameIds: string[] = [];
+    const multiframeGroups: Array<{ baseImageId: string; frameIds: string[] }> = [];
 
     for (const raw of rawImageIds || []) {
       const imageId = normalizeToWadouriOrExternal(raw);
+      // Already has a frame query, or not a wadouri — treat as single frame
       if (!imageId.startsWith("wadouri:") || hasFrameQuery(imageId)) {
-        expanded.push(imageId);
+        singleFrameIds.push(imageId);
         continue;
       }
 
-      const frameCount = await getNumberOfFramesForImageId(imageId);
-      appLogger.debug("[expandMultiframeImageIds] frameCount for", imageId.slice(0, 80), ":", frameCount);
+      const frameCount = await detectMultiframeFrameCount(imageId);
       if (frameCount <= 1) {
-        expanded.push(imageId);
-        continue;
+        singleFrameIds.push(imageId);
+      } else {
+        const frameIds = Array.from({ length: frameCount }, (_, i) => withFrameQuery(imageId, i + 1));
+        multiframeGroups.push({ baseImageId: imageId, frameIds });
+        appLogger.debug(
+          "[splitMultiframeToStacks]",
+          stripWadouriPrefix(imageId).split("/").pop()?.split("?")[0] ?? imageId,
+          "->",
+          frameCount,
+          "frames (separate stack)"
+        );
       }
-
-      for (let frame = 1; frame <= frameCount; frame++) {
-        expanded.push(withFrameQuery(imageId, frame));
-      }
-      appLogger.debug("[expandMultiframeImageIds] Expanded to", frameCount, "frames");
     }
 
-    const result = dedupeImageIds(expanded);
+    return { singleFrameIds: dedupeImageIds(singleFrameIds), multiframeGroups };
+  }, [detectMultiframeFrameCount]);
+
+  const expandMultiframeImageIds = useCallback(async (rawImageIds: string[]) => {
+    appLogger.debug("[expandMultiframeImageIds] Input:", rawImageIds.length, "imageIds");
+    const { singleFrameIds, multiframeGroups } = await splitMultiframeToStacks(rawImageIds);
+    const result = dedupeImageIds([
+      ...singleFrameIds,
+      ...multiframeGroups.flatMap((g) => g.frameIds),
+    ]);
     appLogger.debug("[expandMultiframeImageIds] Output:", result.length, "total imageIds");
     return result;
-  }, [getNumberOfFramesForImageId]);
+  }, [splitMultiframeToStacks]);
 
   const getFallbackBValuesForImageId = useCallback(async (imageId: string): Promise<number[]> => {
     if (!imageId.startsWith("wadouri:")) return [];
@@ -1321,6 +1443,10 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
       if (!dataSet || typeof dataSet.string !== "function") return [];
       const standard = parseNumericValueList(dataSet.string("x00189087")); // DiffusionBValue
       if (standard.length > 0) return standard;
+      const gePrivate = parseNumericValueList(dataSet.string("x0019100c"));
+      if (gePrivate.length > 0) return gePrivate;
+      const geLegacyPrivate = parseNumericValueList(dataSet.string("x00431039"));
+      if (geLegacyPrivate.length > 0) return geLegacyPrivate;
       const privatePhilips = parseNumericValueList(dataSet.string("x20011003"));
       if (privatePhilips.length > 0) return privatePhilips;
       return [];
@@ -1358,6 +1484,66 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
       return [];
     }
 
+    const formatVec = (arr?: number[]) => {
+      if (!Array.isArray(arr) || arr.length === 0) return "";
+      return arr.map((v) => {
+        const n = Number(v);
+        if (!Number.isFinite(n)) return "0.000";
+        return n.toFixed(3);
+      }).join(",");
+    };
+
+    const parseDirection = (value: any): string => {
+      if (Array.isArray(value) && value.length > 0) {
+        const vec = value.map((v) => Number(v)).filter((v) => Number.isFinite(v));
+        if (vec.length >= 3) return formatVec(vec.slice(0, 3));
+      }
+      if (typeof value === "string") {
+        const vec = parseNumericValueList(value);
+        if (vec.length >= 3) return formatVec(vec.slice(0, 3));
+        const trimmed = value.trim();
+        if (trimmed) return trimmed;
+      }
+      if (value && typeof value === "object") {
+        const maybe = [value.x, value.y, value.z].map((v) => Number(v)).filter((v) => Number.isFinite(v));
+        if (maybe.length >= 3) return formatVec(maybe.slice(0, 3));
+      }
+      return "";
+    };
+
+    const normalizeTimeValue = (value: unknown): string => {
+      if (value === undefined || value === null) return "";
+      const text = String(value).trim();
+      if (!text) return "";
+      const numeric = Number(text);
+      if (Number.isFinite(numeric)) {
+        // Keep one decimal for better grouping stability with very close values.
+        return numeric.toFixed(1);
+      }
+      return text;
+    };
+
+    const getOrientationKey = (id: string): string => {
+      const planeMeta = (metaData.get("imagePlaneModule", id) || {}) as any;
+      const imageMeta = (metaData.get("generalImageModule", id) || {}) as any;
+      const row = Array.isArray(planeMeta?.rowCosines) ? planeMeta.rowCosines : null;
+      const col = Array.isArray(planeMeta?.columnCosines) ? planeMeta.columnCosines : null;
+      const fromPlane = row && col ? `${formatVec(row)}|${formatVec(col)}` : "";
+      if (fromPlane) return fromPlane;
+
+      const iop = imageMeta?.imageOrientationPatient;
+      if (Array.isArray(iop) && iop.length >= 6) {
+        return `${formatVec(iop.slice(0, 3))}|${formatVec(iop.slice(3, 6))}`;
+      }
+      if (typeof iop === "string") {
+        const nums = parseNumericValueList(iop);
+        if (nums.length >= 6) {
+          return `${formatVec(nums.slice(0, 3))}|${formatVec(nums.slice(3, 6))}`;
+        }
+      }
+      return "ORI_UNKNOWN";
+    };
+
     const frameOrderByBase = new Map<string, string[]>();
     imageIds.forEach((id) => {
       const base = stripWadouriPrefix(normalizeToWadouriOrExternal(id)).replace(/[?&]frame=\d+/i, "");
@@ -1375,32 +1561,39 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
       frameOrderByBase.set(base, arr);
     });
 
-    const fallbackByBase = new Map<string, number[]>();
+    const fallbackBByBase = new Map<string, number[]>();
     await Promise.all(Array.from(frameOrderByBase.keys()).map(async (base) => {
       const firstId = `wadouri:${base}`;
       const values = await getFallbackBValuesForImageId(firstId);
-      fallbackByBase.set(base, values);
+      fallbackBByBase.set(base, values);
     }));
 
-    const groups = new Map<string, { imageIds: string[]; seriesInstanceUID?: string; seriesDescription?: string; seriesNumber?: number; bValue?: number | null }>();
+    type GroupCandidate = {
+      id: string;
+      seriesInstanceUID?: string;
+      seriesDescription?: string;
+      seriesNumber?: number;
+      orientationKey: string;
+      bValue: number | null;
+      ruleValues: Partial<Record<GroupingRuleId, string>>;
+    };
 
-    imageIds.forEach((id) => {
+    const candidates: GroupCandidate[] = imageIds.map((id) => {
       const seriesMeta = (metaData.get("generalSeriesModule", id) || {}) as any;
       const imageMeta = (metaData.get("generalImageModule", id) || {}) as any;
       const mrMeta = (metaData.get("mrImageModule", id) || {}) as any;
 
-      const seriesInstanceUID = (seriesMeta.seriesInstanceUID || "").trim();
-      const seriesDescription = (seriesMeta.seriesDescription || "").trim();
+      const seriesInstanceUID = (seriesMeta.seriesInstanceUID || "").trim() || undefined;
+      const seriesDescription = (seriesMeta.seriesDescription || "").trim() || undefined;
       const seriesNumber = Number(seriesMeta.seriesNumber);
-      const temporalPosition = Number(imageMeta.temporalPositionIdentifier);
-      const triggerTime = Number(imageMeta.triggerTime);
+      const orientationKey = getOrientationKey(id);
 
       let bValueRaw = Number(mrMeta.diffusionBValue ?? mrMeta.diffusionbValue ?? mrMeta.bValue);
       let bValue = Number.isFinite(bValueRaw) ? bValueRaw : null;
 
       if (bValue === null) {
         const base = stripWadouriPrefix(normalizeToWadouriOrExternal(id)).replace(/[?&]frame=\d+/i, "");
-        const fallbackValues = fallbackByBase.get(base) || [];
+        const fallbackValues = fallbackBByBase.get(base) || [];
         if (fallbackValues.length > 0) {
           const orderedIds = frameOrderByBase.get(base) || [id];
           const framePos = Math.max(0, orderedIds.indexOf(id));
@@ -1422,24 +1615,95 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
         }
       }
 
-      const temporalKey = Number.isFinite(temporalPosition) ? `t${temporalPosition}` : "";
-      const triggerKey = Number.isFinite(triggerTime) ? `tr${Math.round(triggerTime)}` : "";
-      const bKey = bValue !== null ? `b${Math.round(bValue)}` : "";
+      const direction = parseDirection(
+        mrMeta.diffusionGradientDirection
+        ?? mrMeta.diffusionGradientOrientation
+        ?? mrMeta.diffusionGradientDirectionSequence
+      );
+      const temporalPositionValue = Number(imageMeta.temporalPositionIdentifier);
+      const triggerTimeValue = Number(imageMeta.triggerTime);
+      const contentTime = normalizeTimeValue(imageMeta.contentTime ?? imageMeta.acquisitionTime);
+      const echoTimeValue = Number(mrMeta.echoTime ?? imageMeta.echoTime);
+      const echoNumberValue = Number(mrMeta.echoNumbers ?? mrMeta.echoNumber ?? imageMeta.echoNumbers ?? imageMeta.echoNumber);
 
-      const keyParts = [seriesInstanceUID || "NO_UID", bKey, temporalKey, triggerKey].filter(Boolean);
-      const groupKey = keyParts.join("|") || "SERIES_0";
+      const ruleValues: Partial<Record<GroupingRuleId, string>> = {
+        dwiBValue: bValue !== null ? String(Math.round(bValue)) : "",
+        dwiDirection: direction,
+        temporalPosition: Number.isFinite(temporalPositionValue) ? String(Math.round(temporalPositionValue)) : "",
+        triggerTime: Number.isFinite(triggerTimeValue) ? String(Math.round(triggerTimeValue)) : "",
+        contentTime,
+        echoTime: Number.isFinite(echoTimeValue) ? echoTimeValue.toFixed(1) : "",
+        echoNumber: Number.isFinite(echoNumberValue) ? String(Math.round(echoNumberValue)) : "",
+      };
+
+      return {
+        id,
+        seriesInstanceUID,
+        seriesDescription,
+        seriesNumber: Number.isFinite(seriesNumber) ? seriesNumber : undefined,
+        orientationKey,
+        bValue,
+        ruleValues,
+      };
+    });
+
+    const activeRuleIds: GroupingRuleId[] = advancedGroupingEnabled
+      ? GROUPING_RULE_DEFINITIONS
+        .filter((rule) => groupingRuleEnabled[rule.id])
+        .map((rule) => rule.id)
+        .filter((ruleId) => {
+          const values = candidates
+            .map((candidate) => candidate.ruleValues[ruleId])
+            .filter((value): value is string => !!value);
+          const distinct = new Set(values);
+          // Ignore rules that are constant (or effectively unique per image) to avoid over-fragmentation.
+          return distinct.size > 1 && distinct.size < Math.max(2, candidates.length);
+        })
+      : [];
+
+    const groups = new Map<string, {
+      imageIds: string[];
+      seriesInstanceUID?: string;
+      seriesDescription?: string;
+      seriesNumber?: number;
+      bValue?: number | null;
+      groupValues?: Partial<Record<GroupingRuleId, string>>;
+    }>();
+
+    candidates.forEach((candidate) => {
+      const baseKey = [
+        candidate.seriesInstanceUID || "NO_UID",
+        candidate.orientationKey,
+      ].join("|");
+
+      const advancedKey = activeRuleIds
+        .map((ruleId) => {
+          const value = candidate.ruleValues[ruleId];
+          return value ? `${ruleId}:${value}` : "";
+        })
+        .filter(Boolean)
+        .join("|");
+
+      const groupKey = advancedKey ? `${baseKey}|${advancedKey}` : baseKey;
 
       if (!groups.has(groupKey)) {
+        const groupValues: Partial<Record<GroupingRuleId, string>> = {};
+        activeRuleIds.forEach((ruleId) => {
+          const value = candidate.ruleValues[ruleId];
+          if (value) groupValues[ruleId] = value;
+        });
+
         groups.set(groupKey, {
           imageIds: [],
-          seriesInstanceUID: seriesInstanceUID || undefined,
-          seriesDescription: seriesDescription || undefined,
-          seriesNumber: Number.isFinite(seriesNumber) ? seriesNumber : undefined,
-          bValue,
+          seriesInstanceUID: candidate.seriesInstanceUID,
+          seriesDescription: candidate.seriesDescription,
+          seriesNumber: candidate.seriesNumber,
+          bValue: candidate.bValue,
+          groupValues,
         });
       }
 
-      groups.get(groupKey)!.imageIds.push(id);
+      groups.get(groupKey)!.imageIds.push(candidate.id);
     });
 
     if (groups.size <= 1) {
@@ -1450,7 +1714,25 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
       const details: string[] = [];
       if (group.seriesDescription) details.push(group.seriesDescription);
       if (group.seriesNumber !== undefined) details.push(`#${group.seriesNumber}`);
-      if (group.bValue !== null && group.bValue !== undefined) details.push(`b=${Math.round(group.bValue)}`);
+
+      if (group.groupValues) {
+        GROUPING_RULE_DEFINITIONS.forEach((rule) => {
+          const value = group.groupValues?.[rule.id];
+          if (!value) return;
+          if (rule.id === "dwiBValue") details.push(`b=${value}`);
+          else if (rule.id === "dwiDirection") details.push(`dir=${value}`);
+          else if (rule.id === "temporalPosition") details.push(`tp=${value}`);
+          else if (rule.id === "triggerTime") details.push(`tr=${value}`);
+          else if (rule.id === "contentTime") details.push(`t=${value}`);
+          else if (rule.id === "echoTime") details.push(`TE=${value}`);
+          else if (rule.id === "echoNumber") details.push(`echo=${value}`);
+        });
+      }
+
+      if (details.length === 0 && group.bValue !== null && group.bValue !== undefined) {
+        details.push(`b=${Math.round(group.bValue)}`);
+      }
+
       const label = details.length > 0 ? details.join(" • ") : `Series ${idx + 1}`;
       return {
         key,
@@ -1458,11 +1740,12 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
         imageIds: dedupeImageIds(group.imageIds),
         seriesInstanceUID: group.seriesInstanceUID,
         bValue: group.bValue,
+        groupValues: group.groupValues,
       };
     });
 
     return ordered;
-  }, [getFallbackBValuesForImageId]);
+  }, [advancedGroupingEnabled, getFallbackBValuesForImageId, groupingRuleEnabled]);
 
 
   const [viewportGrid, setViewportGrid] = useState({ rows: 1, cols: 1 })
@@ -1709,13 +1992,33 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
       const rawLogging = localStorage.getItem(LOG_SETTINGS_KEY);
       if (rawLogging) {
         const parsed = JSON.parse(rawLogging);
-        if (typeof parsed?.debug === "boolean") {
-          setLoggingDebugEnabled(parsed.debug);
+        if (typeof parsed?.minLevel === "string") {
+          setLoggingMinLevel(parseLogLevel(parsed.minLevel));
+        } else if (typeof parsed?.debug === "boolean") {
+          // Backward compat: migrate old debug flag
+          setLoggingMinLevel(parsed.debug ? "debug" : "warn");
         }
         if (typeof parsed?.format === "string") {
           setLoggingFormat(parseLogFormat(parsed.format));
         }
       }
+
+      const rawGrouping = localStorage.getItem(GROUPING_SETTINGS_KEY);
+      if (rawGrouping) {
+        const parsedGrouping = JSON.parse(rawGrouping);
+        if (typeof parsedGrouping?.advancedGroupingEnabled === "boolean") {
+          setAdvancedGroupingEnabled(parsedGrouping.advancedGroupingEnabled);
+        }
+        if (parsedGrouping?.groupingRuleEnabled && typeof parsedGrouping.groupingRuleEnabled === "object") {
+          const merged = createDefaultGroupingRuleState();
+          GROUPING_RULE_DEFINITIONS.forEach((rule) => {
+            if (typeof parsedGrouping.groupingRuleEnabled[rule.id] === "boolean") {
+              merged[rule.id] = parsedGrouping.groupingRuleEnabled[rule.id];
+            }
+          });
+          setGroupingRuleEnabled(merged);
+        }
+      }
     } catch (e) {
       // Ignore parse errors
     }
@@ -1736,21 +2039,92 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
 
   useEffect(() => {
     setLoggerConfig({
-      debug: loggingDebugEnabled,
+      minLevel: loggingMinLevel,
       format: loggingFormat,
     });
     try {
       localStorage.setItem(
         LOG_SETTINGS_KEY,
         JSON.stringify({
-          debug: loggingDebugEnabled,
+          minLevel: loggingMinLevel,
           format: loggingFormat,
         })
       );
     } catch (e) {
       // Ignore storage access errors
     }
-  }, [loggingDebugEnabled, loggingFormat]);
+  }, [loggingMinLevel, loggingFormat]);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(
+        GROUPING_SETTINGS_KEY,
+        JSON.stringify({
+          advancedGroupingEnabled,
+          groupingRuleEnabled,
+        })
+      );
+    } catch (e) {
+      // Ignore storage access errors
+    }
+  }, [advancedGroupingEnabled, groupingRuleEnabled]);
+
+  useEffect(() => {
+    if (availableStacks.length === 0) return;
+
+    let cancelled = false;
+
+    const recomputeGroups = async () => {
+      const recomputed = await Promise.all(
+        availableStacks.map(async (stack) => {
+          const seriesGroups = await deriveSeriesGroupsFromImageIds(stack.imageIds);
+          return { ...stack, seriesGroups };
+        })
+      );
+
+      if (cancelled) return;
+      setAvailableStacks(recomputed);
+
+      setSeriesGroupsByViewport((prev) => {
+        const next = [...prev];
+        for (let viewportIdx = 0; viewportIdx < MAX_VIEWPORTS; viewportIdx++) {
+          const stackIdx = selectedStackIdx[viewportIdx] ?? 0;
+          next[viewportIdx] = recomputed[stackIdx]?.seriesGroups || [];
+        }
+        return next;
+      });
+
+      setSelectedSeriesIdxByViewport((prev) => {
+        const next = [...prev];
+        for (let viewportIdx = 0; viewportIdx < MAX_VIEWPORTS; viewportIdx++) {
+          const stackIdx = selectedStackIdx[viewportIdx] ?? 0;
+          const groups = recomputed[stackIdx]?.seriesGroups || [];
+          const current = next[viewportIdx] ?? 0;
+          next[viewportIdx] = groups.length === 0 ? 0 : Math.max(0, Math.min(groups.length - 1, current));
+        }
+        return next;
+      });
+
+      setViewportImageIds((prev) => {
+        const next = [...prev];
+        for (let viewportIdx = 0; viewportIdx < MAX_VIEWPORTS; viewportIdx++) {
+          const stackIdx = selectedStackIdx[viewportIdx] ?? 0;
+          const groups = recomputed[stackIdx]?.seriesGroups || [];
+          const selectedIdx = Math.max(0, Math.min(groups.length - 1, selectedSeriesIdxByViewport[viewportIdx] ?? 0));
+          const imageIds = groups[selectedIdx]?.imageIds || recomputed[stackIdx]?.imageIds || [];
+          next[viewportIdx] = imageIds;
+        }
+        return next;
+      });
+    };
+
+    void recomputeGroups();
+
+    return () => {
+      cancelled = true;
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [advancedGroupingEnabled, groupingRuleEnabled]);
 
   useEffect(() => {
     window.loadDicomStackFromFiles = (files: FileList | File[]) => {
@@ -3379,13 +3753,53 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
     const renderingEngine = renderingEngineRef.current;
     const viewport = renderingEngine?.getViewport(`CT_${viewportIdx}`);
 
+    const sliceScalarForImageId = (imageId?: string): number | null => {
+      if (!imageId) return null;
+      const plane = (metaData.get("imagePlaneModule", imageId) || {}) as any;
+      const ipp = Array.isArray(plane?.imagePositionPatient) ? plane.imagePositionPatient : null;
+      const row = Array.isArray(plane?.rowCosines) ? plane.rowCosines : null;
+      const col = Array.isArray(plane?.columnCosines) ? plane.columnCosines : null;
+      if (ipp && row && col && row.length >= 3 && col.length >= 3) {
+        const normal = [
+          row[1] * col[2] - row[2] * col[1],
+          row[2] * col[0] - row[0] * col[2],
+          row[0] * col[1] - row[1] * col[0],
+        ];
+        const mag = Math.hypot(normal[0], normal[1], normal[2]);
+        if (mag > 1e-6) {
+          const unit = [normal[0] / mag, normal[1] / mag, normal[2] / mag];
+          return ipp[0] * unit[0] + ipp[1] * unit[1] + ipp[2] * unit[2];
+        }
+      }
+      const fallback = Number(plane?.sliceLocation);
+      return Number.isFinite(fallback) ? fallback : null;
+    };
+
     let mappedIndex = 0;
     if (viewport && typeof viewport.getCurrentImageIdIndex === "function") {
       const oldIds = viewportImageIds[viewportIdx] || [];
       const oldTotal = oldIds.length;
       const currentIdx = viewport.getCurrentImageIdIndex();
-      const ratio = oldTotal > 1 ? currentIdx / (oldTotal - 1) : 0;
-      mappedIndex = Math.max(0, Math.min(selectedGroup.imageIds.length - 1, Math.round(ratio * Math.max(0, selectedGroup.imageIds.length - 1))));
+      const currentImageId = oldIds[currentIdx] || oldIds[0];
+      const currentSliceScalar = sliceScalarForImageId(currentImageId);
+
+      if (currentSliceScalar !== null && selectedGroup.imageIds.length > 0) {
+        let bestIdx = 0;
+        let bestDistance = Number.POSITIVE_INFINITY;
+        selectedGroup.imageIds.forEach((id, idx) => {
+          const scalar = sliceScalarForImageId(id);
+          if (scalar === null) return;
+          const distance = Math.abs(scalar - currentSliceScalar);
+          if (distance < bestDistance) {
+            bestDistance = distance;
+            bestIdx = idx;
+          }
+        });
+        mappedIndex = bestIdx;
+      } else {
+        const ratio = oldTotal > 1 ? currentIdx / (oldTotal - 1) : 0;
+        mappedIndex = Math.max(0, Math.min(selectedGroup.imageIds.length - 1, Math.round(ratio * Math.max(0, selectedGroup.imageIds.length - 1))));
+      }
     }
 
     setSelectedSeriesIdxByViewport(prev => {
@@ -5293,7 +5707,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
             )}
             {(seriesGroupsByViewport[i] || []).length > 1 && (
               <>
-                <span style={{ color: "#fff", fontSize: 12, whiteSpace: "nowrap" }}>Series</span>
+                <span style={{ color: "#fff", fontSize: 12, whiteSpace: "nowrap" }}>Group</span>
                 <input
                   type="range"
                   min={0}
@@ -5314,9 +5728,9 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
                     textOverflow: "ellipsis",
                     whiteSpace: "nowrap",
                   }}
-                  title={seriesGroupsByViewport[i]?.[selectedSeriesIdxByViewport[i] || 0]?.label || ""}
+                  title={seriesGroupsByViewport[i]?.[selectedSeriesIdxByViewport[i] || 0]?.label || "Group"}
                 >
-                  {seriesGroupsByViewport[i]?.[selectedSeriesIdxByViewport[i] || 0]?.label || "Series"}
+                  {seriesGroupsByViewport[i]?.[selectedSeriesIdxByViewport[i] || 0]?.label || "Group"}
                 </span>
               </>
             )}
@@ -6514,38 +6928,6 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
               </div>
               {/* Settings content: Tool dropdowns */}
               <div style={{ marginBottom: "24px" }}>
-                <div style={{ marginBottom: 18 }}>
-                  <div style={{ marginBottom: 12, fontWeight: "bold" }}>Logging</div>
-                  <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 10 }}>
-                    <label style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }}>
-                      <input
-                        type="checkbox"
-                        checked={loggingDebugEnabled}
-                        onChange={(e) => setLoggingDebugEnabled(e.target.checked)}
-                      />
-                      Enable debug logs
-                    </label>
-                  </div>
-                  <div>
-                    <label style={{ marginRight: 8 }}>Format:</label>
-                    <select
-                      value={loggingFormat}
-                      onChange={(e) => setLoggingFormat(parseLogFormat(e.target.value))}
-                      style={{
-                        background: "#333",
-                        color: "#fff",
-                        border: "1px solid #444",
-                        borderRadius: "4px",
-                        padding: "4px 8px",
-                        fontSize: "14px",
-                      }}
-                    >
-                      {LOG_FORMAT_OPTIONS.map((option) => (
-                        <option key={option.value} value={option.value}>{option.label}</option>
-                      ))}
-                    </select>
-                  </div>
-                </div>
                 <div style={{ marginBottom: 12, fontWeight: "bold" }}>Mouse Button Tool Bindings</div>
                 {MOUSE_BUTTONS.map((btn) => (
                   <div key={btn.value} style={{ marginBottom: 10 }}>
@@ -6683,6 +7065,77 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
                   )}
                 </div>
               </div>
+              <div style={{ marginTop: 8, paddingTop: 16, borderTop: "1px solid #333" }}>
+                <div style={{ marginBottom: 10, fontWeight: "bold" }}>Stack Grouping</div>
+                <label style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", marginBottom: 10 }}>
+                  <input
+                    type="checkbox"
+                    checked={advancedGroupingEnabled}
+                    onChange={(e) => setAdvancedGroupingEnabled(e.target.checked)}
+                  />
+                  Enable advanced DWI/time/echo grouping
+                </label>
+                <div style={{ display: "flex", flexDirection: "column", gap: 6, opacity: advancedGroupingEnabled ? 1 : 0.6 }}>
+                  {GROUPING_RULE_DEFINITIONS.map((rule) => (
+                    <label key={rule.id} style={{ display: "flex", alignItems: "center", gap: 8, cursor: advancedGroupingEnabled ? "pointer" : "default" }} title={rule.description}>
+                      <input
+                        type="checkbox"
+                        disabled={!advancedGroupingEnabled}
+                        checked={!!groupingRuleEnabled[rule.id]}
+                        onChange={(e) => {
+                          const checked = e.target.checked;
+                          setGroupingRuleEnabled((prev) => ({ ...prev, [rule.id]: checked }));
+                        }}
+                      />
+                      {rule.label}
+                    </label>
+                  ))}
+                </div>
+              </div>
+              {/* Logging — placed at bottom of settings panel */}
+              <div style={{ marginTop: 8, paddingTop: 16, borderTop: "1px solid #333" }}>
+                <div style={{ marginBottom: 10, fontWeight: "bold" }}>Logging</div>
+                <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 10, flexWrap: "wrap" }}>
+                  <div>
+                    <label style={{ marginRight: 8 }}>Level:</label>
+                    <select
+                      value={loggingMinLevel}
+                      onChange={(e) => setLoggingMinLevel(parseLogLevel(e.target.value))}
+                      style={{
+                        background: "#333",
+                        color: "#fff",
+                        border: "1px solid #444",
+                        borderRadius: "4px",
+                        padding: "4px 8px",
+                        fontSize: "14px",
+                      }}
+                    >
+                      {LOG_LEVEL_OPTIONS.map((option) => (
+                        <option key={option.value} value={option.value}>{option.label}</option>
+                      ))}
+                    </select>
+                  </div>
+                  <div>
+                    <label style={{ marginRight: 8 }}>Format:</label>
+                    <select
+                      value={loggingFormat}
+                      onChange={(e) => setLoggingFormat(parseLogFormat(e.target.value))}
+                      style={{
+                        background: "#333",
+                        color: "#fff",
+                        border: "1px solid #444",
+                        borderRadius: "4px",
+                        padding: "4px 8px",
+                        fontSize: "14px",
+                      }}
+                    >
+                      {LOG_FORMAT_OPTIONS.map((option) => (
+                        <option key={option.value} value={option.value}>{option.label}</option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+              </div>
               <button
                 style={{
                   position: "absolute",
@@ -6766,8 +7219,6 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
 
 }
 
-export default App
-
 function setupTools(MAIN_TOOL_GROUP_ID) {
   appLogger.debug('Setting up tools...', MAIN_TOOL_GROUP_ID);
   cornerstoneTools.addTool(PanTool)
diff --git a/dicom-viewer/src/lib/logger.ts b/dicom-viewer/src/lib/logger.ts
index 98ae637..7508cc6 100644
--- a/dicom-viewer/src/lib/logger.ts
+++ b/dicom-viewer/src/lib/logger.ts
@@ -1,15 +1,23 @@
-export type LogLevel = "debug" | "info" | "warn" | "error";
+export type LogLevel = "debug" | "info" | "warn" | "error" | "silent";
 export type LogFormat = "compact" | "verbose" | "json";
 
 export type LoggerConfig = {
-  debug: boolean;
+  minLevel: LogLevel;
   format: LogFormat;
   namespace: string;
   dedupeWindowMs: number;
 };
 
+const LEVEL_ORDER: Record<LogLevel, number> = {
+  debug: 0,
+  info: 1,
+  warn: 2,
+  error: 3,
+  silent: 4,
+};
+
 const DEFAULT_CONFIG: LoggerConfig = {
-  debug: false,
+  minLevel: "warn",
   format: "compact",
   namespace: "dv3d",
   dedupeWindowMs: 1200,
@@ -46,14 +54,11 @@ function serializeArg(arg: unknown): unknown {
 }
 
 function shouldLog(level: LogLevel) {
-  if (level === "debug") {
-    return loggerConfig.debug;
-  }
-  return true;
+  return LEVEL_ORDER[level] >= LEVEL_ORDER[loggerConfig.minLevel];
 }
 
 function shouldDedupe(level: LogLevel) {
-  return level === "debug";
+  return level === "debug" || level === "info";
 }
 
 function buildFingerprint(level: LogLevel, args: unknown[], ctx?: LogContext): string {
@@ -138,18 +143,28 @@ export function parseLogFormat(value: unknown): LogFormat {
   return DEFAULT_CONFIG.format;
 }
 
-export function parseDebugFlag(value: unknown): boolean {
-  if (typeof value === "boolean") {
+/** Parse a log level string. Falls back to the default ("warn") for unknown values. */
+export function parseLogLevel(value: unknown): LogLevel {
+  if (value === "debug" || value === "info" || value === "warn" || value === "error" || value === "silent") {
     return value;
   }
+  return DEFAULT_CONFIG.minLevel;
+}
+
+/** Backward-compat helper: maps a truthy debug flag to minLevel "debug" or "warn". */
+export function parseDebugFlag(value: unknown): LogLevel {
+  if (typeof value === "boolean") {
+    return value ? "debug" : "warn";
+  }
   if (typeof value === "string") {
     const normalized = value.trim().toLowerCase();
-    return normalized === "1" || normalized === "true" || normalized === "yes" || normalized === "on";
+    const truthy = normalized === "1" || normalized === "true" || normalized === "yes" || normalized === "on";
+    return truthy ? "debug" : "warn";
   }
   if (typeof value === "number") {
-    return value !== 0;
+    return value !== 0 ? "debug" : "warn";
   }
-  return false;
+  return "warn";
 }
 
 export const logger = {
diff --git a/dicom-viewer/src/main.tsx b/dicom-viewer/src/main.tsx
index b827184..64d9038 100644
--- a/dicom-viewer/src/main.tsx
+++ b/dicom-viewer/src/main.tsx
@@ -8,14 +8,19 @@ import {
   logger,
   parseDebugFlag,
   parseLogFormat,
+  parseLogLevel,
   setLoggerConfig,
   type LogFormat,
+  type LogLevel,
 } from "./lib/logger";
 
 type MountOptions = {
   force?: boolean;
   containerIds?: string[];
   logging?: {
+    /** Minimum log level to emit. Takes precedence over `debug`. */
+    minLevel?: LogLevel;
+    /** @deprecated Use minLevel instead. true maps to "debug", false maps to "warn". */
     debug?: boolean;
     format?: LogFormat;
   };
@@ -40,8 +45,8 @@ declare global {
   interface Window {
     mountDicomViewers?: (options?: MountOptions) => void;
     remountDicomViewer?: (containerId: string) => void;
-    setDicomViewerLogging?: (config: { debug?: boolean; format?: LogFormat }) => void;
-    getDicomViewerLogging?: () => { debug: boolean; format: LogFormat; namespace: string; dedupeWindowMs: number };
+    setDicomViewerLogging?: (config: { minLevel?: LogLevel; debug?: boolean; format?: LogFormat }) => void;
+    getDicomViewerLogging?: () => { minLevel: LogLevel; format: LogFormat; namespace: string; dedupeWindowMs: number };
   }
 }
 
@@ -158,13 +163,26 @@ const shouldMountContainer = (container: HTMLElement, options?: MountOptions): b
 };
 
 const getContainerLogConfig = (container: HTMLElement, options?: MountOptions) => {
+  const attrLevel = container.getAttribute("data-log-level");
   const attrDebug = container.getAttribute("data-log-debug");
   const attrFormat = container.getAttribute("data-log-format");
 
-  const debug = attrDebug !== null ? parseDebugFlag(attrDebug) : !!options?.logging?.debug;
-  const format = parseLogFormat(attrFormat ?? options?.logging?.format);
+  // Resolve minLevel: data-log-level > options.minLevel > data-log-debug (legacy) > options.debug (legacy)
+  let minLevel: LogLevel;
+  if (attrLevel !== null) {
+    minLevel = parseLogLevel(attrLevel);
+  } else if (options?.logging?.minLevel) {
+    minLevel = options.logging.minLevel;
+  } else if (attrDebug !== null) {
+    minLevel = parseDebugFlag(attrDebug);
+  } else if (options?.logging?.debug !== undefined) {
+    minLevel = parseDebugFlag(options.logging.debug);
+  } else {
+    minLevel = "warn";
+  }
 
-  return { debug, format };
+  const format = parseLogFormat(attrFormat ?? options?.logging?.format);
+  return { minLevel, format };
 };
 
 const mountContainer = (container: HTMLElement, imageStacks: () => Promise<any[]>, options?: MountOptions) => {
@@ -261,8 +279,13 @@ window.remountDicomViewer = (containerId: string) => {
   mountDicomViewers({ force: true, containerIds: [containerId] });
 };
 window.setDicomViewerLogging = (config) => {
+  const minLevel = config.minLevel
+    ? parseLogLevel(config.minLevel)
+    : config.debug !== undefined
+      ? parseDebugFlag(config.debug)
+      : undefined;
   setLoggerConfig({
-    debug: config.debug,
+    minLevel,
     format: config.format ? parseLogFormat(config.format) : undefined,
   });
 };
