From 1efd81bb0b15a8db8d153e80604de425df497938 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 23 Mar 2026 10:03:42 +0000
Subject: [PATCH] Add embedded viewer test page with initial layout and
 functionality

---
 dicom-viewer/public/embedded-viewer-test.html | 129 ++++++++++++++++++
 1 file changed, 129 insertions(+)
 create mode 100644 dicom-viewer/public/embedded-viewer-test.html
diff --git a/dicom-viewer/public/embedded-viewer-test.html b/dicom-viewer/public/embedded-viewer-test.html
new file mode 100644
index 0000000..08858cc
--- /dev/null
+++ b/dicom-viewer/public/embedded-viewer-test.html
@@ -0,0 +1,129 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Embedded Viewer — Test Page</title>
+    <style>
+      html,body{height:100%;margin:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial}
+      header{background:#111;color:#fff;padding:12px 20px}
+      header h1{margin:0;font-size:18px}
+      .page{display:flex;gap:20px;padding:20px}
+      .main{flex:1}
+      .sidebar{width:260px;background:#f6f6f6;padding:12px;border-radius:6px}
+      .dicom-viewer-root{width:100%;height:72vh;background:#222;color:#fff;border-radius:6px;overflow:hidden}
+      .controls{margin:12px 0}
+      .note{background:#eef;padding:10px;border-radius:4px}
+    </style>
+  </head>
+  <body>
+    <header>
+      <h1>Embedded Viewer Test</h1>
+    </header>
+
+    <div class="page">
+      <main class="main">
+        <p class="note">This page demonstrates the DICOM viewer embedded alongside other content.</p>
+
+        <div class="controls">
+          <button onclick="document.getElementById('main_viewer').scrollIntoView({behavior:'smooth'})">Scroll to viewer</button>
+          <button onclick="console.log('Example action')">Example action</button>
+        </div>
+
+        <div id="main_viewer" class="dicom-viewer-root" data-auto-cache-stack="false"></div>
+
+        <section style="margin-top:16px">
+          <h2>Related information</h2>
+          <p>Here you can place text, controls, or other UI components while the viewer stays mounted within the page layout.</p>
+        </section>
+      </main>
+
+      <aside class="sidebar">
+        <h3>Sidebar</h3>
+        <p>Extra controls, metadata, or notes can live here.</p>
+        <ul>
+          <li>Patient: Anonymous</li>
+          <li>Study: Demo stack</li>
+          <li>Notes: Test page</li>
+        </ul>
+      </aside>
+    </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; }; };
+    </script>
+
+    <script type="module" src="/src/main.tsx"></script>
+
+    <script>
+      // Reuse the same viewer state as the penra test for convenience
+      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"]},{"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"]},{"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"]}],"stackIdx":[0,2,1],"stackPos":[0,0,2],"props":[{"voiRange":{"lower":39.15,"upper":559.17},"invert":false,"interpolationType":1,"VOILUTFunction":"LINEAR","colormap":{"name":"Grayscale","opacity":[]}}],"cam":[null,null,null],"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') {
+            try {
+              window[fnName](payload);
+              console.log('imported viewer state via', fnName);
+            } catch (e) {
+              console.error('importViewerState call failed', e);
+            }
+            return;
+          }
+          if (Date.now() - start > maxWait) {
+            console.warn('Timed out waiting for', fnName);
+            return;
+          }
+          setTimeout(check, 2000);
+        })();
+      }
+
+      document.addEventListener('DOMContentLoaded', () => {
+        (function loadStacksThenImport() {
+          if (!state.stacks || !Array.isArray(state.stacks)) {
+            callWhenReady('importViewerState_main_viewer', state);
+            return;
+          }
+
+          function pushStacks() {
+            const fnName = 'loadAdditionalStack_main_viewer';
+            if (window[fnName] && typeof window[fnName] === 'function') {
+              try {
+                state.stacks.forEach(s => {
+                  if (s && Array.isArray(s.i) && s.i.length) {
+                    window[fnName](s.i);
+                  }
+                });
+                console.log('Requested viewer to load', state.stacks.length, 'stacks');
+              } catch (e) {
+                console.warn('loadAdditionalStack call failed', e);
+              }
+              setTimeout(() => { callWhenReady('importViewerState_main_viewer', state); }, 2000);
+              return true;
+            }
+            return false;
+          }
+
+          const started = pushStacks();
+          if (!started) {
+            const maxWait = 5000;
+            const start = Date.now();
+            (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);
+                return;
+              }
+              setTimeout(waitForApi, 2000);
+            })();
+          }
+        })();
+      });
+    </script>
+  </body>
+</html>
