Add directory loading support and enhance file handling in the viewer
This commit is contained in:
Ross
@@ -0,0 +1,29 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Empty Viewer Test</title>
|
||||
<style>
|
||||
html,body{height:100%;margin:0}
|
||||
.dicom-viewer-root{width:100%;height:100vh;background:#222;color:#fff}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" class="dicom-viewer-root" style="width:100%;height:100vh;"
|
||||
data-auto-cache-stack="false"
|
||||
data-empty="true"
|
||||
></div>
|
||||
|
||||
<!-- Provide a small noop React Refresh preamble to avoid plugin-react preamble errors -->
|
||||
<script>
|
||||
// If plugin-react's preamble wasn't injected for some reason, provide no-op
|
||||
// implementations so the runtime does not throw. This disables fast-refresh
|
||||
// semantics for this page but keeps HMR from crashing.
|
||||
window.$RefreshReg$ = window.$RefreshReg$ || function() {};
|
||||
window.$RefreshSig$ = window.$RefreshSig$ || function() { return function(type) { return type; }; };
|
||||
</script>
|
||||
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,196 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>Load Directory Test</title>
|
||||
<style>
|
||||
body { font-family: system-ui, Arial; padding: 18px; background: #f6f6f8; color: #111 }
|
||||
.controls { margin: 12px 0 }
|
||||
.file-row { display:flex; gap:8px; align-items:center; padding:6px 8px; border-bottom:1px solid #eee }
|
||||
.path { font-family: monospace; color:#444; flex:1 }
|
||||
button { padding:6px 10px }
|
||||
#fileList { border:1px solid #ddd; background:#fff; border-radius:6px; max-height:60vh; overflow:auto }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Directory Loader (recursive)</h2>
|
||||
<p>Select a folder (uses `webkitdirectory`) — files will be read recursively.
|
||||
This page will call <code>window.loadDicomStackFromFiles(files)</code> if available in the viewer.</p>
|
||||
|
||||
<div class="controls">
|
||||
<input id="dirInput" type="file" webkitdirectory directory multiple />
|
||||
<label style="margin-left:12px"><input id="onlyDcm" type="checkbox" checked /> Show only <code>.dcm</code></label>
|
||||
<button id="loadSelected">Load Selected</button>
|
||||
<button id="loadAll">Load All</button>
|
||||
<button id="openViewerAndSend">Open Viewer & Send</button>
|
||||
<button id="clear">Clear</button>
|
||||
</div>
|
||||
|
||||
<div id="fileList"></div>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
const input = document.getElementById('dirInput');
|
||||
const fileListDiv = document.getElementById('fileList');
|
||||
const onlyDcmChk = document.getElementById('onlyDcm');
|
||||
|
||||
function asArray(fileList){ return Array.prototype.slice.call(fileList || []); }
|
||||
|
||||
function renderFiles(files){
|
||||
fileListDiv.innerHTML = '';
|
||||
if (!files || files.length === 0) {
|
||||
fileListDiv.innerHTML = '<div style="padding:12px;color:#666">No files selected</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
const frag = document.createDocumentFragment();
|
||||
files.forEach((f, idx) => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'file-row';
|
||||
const cb = document.createElement('input');
|
||||
cb.type = 'checkbox';
|
||||
cb.checked = true;
|
||||
cb.dataset.idx = idx;
|
||||
|
||||
const pathEl = document.createElement('div');
|
||||
pathEl.className = 'path';
|
||||
// webkitRelativePath shows the folder structure when directory input used
|
||||
pathEl.textContent = f.webkitRelativePath || f.name;
|
||||
|
||||
const sizeEl = document.createElement('div');
|
||||
sizeEl.style.width = '90px';
|
||||
sizeEl.style.textAlign = 'right';
|
||||
sizeEl.style.color = '#666';
|
||||
sizeEl.textContent = (f.size/1024).toFixed(1)+' kB';
|
||||
|
||||
row.appendChild(cb);
|
||||
row.appendChild(pathEl);
|
||||
row.appendChild(sizeEl);
|
||||
|
||||
frag.appendChild(row);
|
||||
});
|
||||
fileListDiv.appendChild(frag);
|
||||
}
|
||||
|
||||
function filterFiles(files){
|
||||
const onlyDcm = onlyDcmChk.checked;
|
||||
if (!onlyDcm) return files;
|
||||
return files.filter(f => f.name.toLowerCase().endsWith('.dcm'));
|
||||
}
|
||||
|
||||
input.addEventListener('change', ()=>{
|
||||
const all = asArray(input.files);
|
||||
const filtered = filterFiles(all);
|
||||
// Save filtered list on the element for retrieval
|
||||
input._currentFiles = filtered;
|
||||
renderFiles(filtered);
|
||||
});
|
||||
|
||||
document.getElementById('loadSelected').addEventListener('click', ()=>{
|
||||
const current = input._currentFiles || [];
|
||||
if (!current.length) return alert('No files selected. Choose a folder first.');
|
||||
// collect checked indices
|
||||
const checked = Array.from(fileListDiv.querySelectorAll('input[type=checkbox]'))
|
||||
.filter(cb=>cb.checked)
|
||||
.map(cb=>parseInt(cb.dataset.idx,10))
|
||||
.filter(n=>!Number.isNaN(n));
|
||||
const chosen = checked.map(i=>current[i]).filter(Boolean);
|
||||
if (!chosen.length) return alert('No files checked.');
|
||||
sendToViewer(chosen);
|
||||
});
|
||||
|
||||
document.getElementById('loadAll').addEventListener('click', ()=>{
|
||||
const current = input._currentFiles || [];
|
||||
if (!current.length) return alert('No files selected. Choose a folder first.');
|
||||
sendToViewer(current);
|
||||
});
|
||||
|
||||
document.getElementById('openViewerAndSend').addEventListener('click', async ()=>{
|
||||
const current = input._currentFiles || [];
|
||||
if (!current.length) return alert('No files selected. Choose a folder first.');
|
||||
// Open the viewer root in a new tab/window
|
||||
const viewerWin = window.open('/', '_blank');
|
||||
if (!viewerWin) return alert('Failed to open viewer window (popup blocked).');
|
||||
|
||||
// Wait for the viewer window to expose loadDicomStackFromFiles
|
||||
const timeoutMs = 15000;
|
||||
const start = Date.now();
|
||||
const poll = () => new Promise((resolve, reject) => {
|
||||
const iv = setInterval(() => {
|
||||
try {
|
||||
if (viewerWin && (viewerWin.loadDicomStackFromFiles || viewerWin.loadDicomStackFromWadouriList)) {
|
||||
clearInterval(iv);
|
||||
resolve(true);
|
||||
}
|
||||
if (Date.now() - start > timeoutMs) {
|
||||
clearInterval(iv);
|
||||
reject(new Error('Timed out waiting for viewer API'));
|
||||
}
|
||||
} catch (e) {
|
||||
// cross-origin or not ready
|
||||
}
|
||||
}, 250);
|
||||
});
|
||||
|
||||
try {
|
||||
await poll();
|
||||
// call the function on the opened viewer window
|
||||
if (viewerWin.loadDicomStackFromFiles) {
|
||||
viewerWin.loadDicomStackFromFiles(current);
|
||||
alert('Sent '+current.length+' file(s) to the newly opened viewer.');
|
||||
} else if (viewerWin.loadDicomStackFromWadouriList) {
|
||||
// fallback for remote URLs
|
||||
const wadouriList = current.map(f => 'wadouri:' + URL.createObjectURL(f));
|
||||
viewerWin.loadDicomStackFromWadouriList(wadouriList);
|
||||
alert('Sent '+current.length+' wadouri image(s) to the newly opened viewer.');
|
||||
} else {
|
||||
alert('Viewer opened but API not available.');
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('openViewerAndSend failed', e);
|
||||
alert('Timed out waiting for viewer to be ready. Check the viewer tab.');
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('clear').addEventListener('click', ()=>{
|
||||
input.value = null;
|
||||
input._currentFiles = [];
|
||||
renderFiles([]);
|
||||
});
|
||||
|
||||
function sendToViewer(files){
|
||||
// Prefer calling the viewer global if present
|
||||
if (window.loadDicomStackFromFiles && typeof window.loadDicomStackFromFiles === 'function') {
|
||||
try {
|
||||
// The viewer accepts FileList or File[] per typing; pass array
|
||||
window.loadDicomStackFromFiles(files);
|
||||
alert('Sent '+files.length+' file(s) to viewer (window.loadDicomStackFromFiles).');
|
||||
return;
|
||||
} catch (e) {
|
||||
console.error('loadDicomStackFromFiles failed', e);
|
||||
alert('Viewer call failed (see console).');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback: try posting to parent (if embedded)
|
||||
if (window.parent && window.parent !== window) {
|
||||
try {
|
||||
window.parent.postMessage({ type: 'loadFiles', filesCount: files.length }, '*');
|
||||
alert('Posted message to parent with '+files.length+' files.');
|
||||
return;
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
alert('Viewer integration function `window.loadDicomStackFromFiles` not found on this page.');
|
||||
}
|
||||
|
||||
// Initial empty render
|
||||
renderFiles([]);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+211
-35
@@ -1255,6 +1255,83 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
|
||||
}, [mouseToolBindings, ctrlMouseToolBindings]);
|
||||
|
||||
const [sideMenuOpen, setSideMenuOpen] = useState(false);
|
||||
const [folderLoadMode, setFolderLoadMode] = useState<'add' | 'replace'>('add');
|
||||
const folderInputRef = useRef<HTMLInputElement | null>(null);
|
||||
useEffect(() => {
|
||||
// Some browsers don't accept non-standard props via JSX typings; set attributes directly.
|
||||
try {
|
||||
if (folderInputRef.current) {
|
||||
folderInputRef.current.setAttribute('webkitdirectory', 'true');
|
||||
folderInputRef.current.setAttribute('directory', '');
|
||||
folderInputRef.current.setAttribute('mozdirectory', '');
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Recursively collect files from a DirectoryHandle (File System Access API)
|
||||
async function collectFilesFromDirectoryHandle(dirHandle: any, pathPrefix = ''): Promise<File[]> {
|
||||
const files: File[] = [];
|
||||
// Prefer entries() which yields [name, handle] pairs — more explicit
|
||||
const entriesIter = (dirHandle as any).entries ? (dirHandle as any).entries() : (dirHandle as any).values();
|
||||
for await (const entryPair of entriesIter) {
|
||||
try {
|
||||
// entryPair may be [name, handle] or a handle directly
|
||||
let entry: any;
|
||||
let entryName: string | undefined;
|
||||
if (Array.isArray(entryPair) && entryPair.length >= 2) {
|
||||
entryName = entryPair[0];
|
||||
entry = entryPair[1];
|
||||
} else {
|
||||
entry = entryPair;
|
||||
entryName = entry.name;
|
||||
}
|
||||
|
||||
if (!entry) continue;
|
||||
|
||||
if (entry.kind === 'file') {
|
||||
const f = await entry.getFile();
|
||||
try {
|
||||
Object.defineProperty(f, 'webkitRelativePath', { value: pathPrefix + (entryName || entry.name), configurable: true });
|
||||
} catch (e) {
|
||||
// ignore if not possible
|
||||
}
|
||||
files.push(f);
|
||||
} else if (entry.kind === 'directory') {
|
||||
// Recurse into subdirectory
|
||||
const nested = await collectFilesFromDirectoryHandle(entry, pathPrefix + (entryName || entry.name) + '/');
|
||||
files.push(...nested);
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore individual entry errors
|
||||
console.debug('collectFilesFromDirectoryHandle: skipping entry due to error', e);
|
||||
}
|
||||
}
|
||||
return files;
|
||||
}
|
||||
|
||||
// Try to open the native directory picker when available, otherwise fall back to the hidden input
|
||||
const handleFolderPick = async () => {
|
||||
if ((window as any).showDirectoryPicker) {
|
||||
try {
|
||||
const dirHandle = await (window as any).showDirectoryPicker();
|
||||
const files = await collectFilesFromDirectoryHandle(dirHandle);
|
||||
if (files && files.length > 0) {
|
||||
// Call existing file handler with our array
|
||||
await handleFilesSelected({ target: { files } } as any);
|
||||
} else {
|
||||
alert('No files found in selected folder.');
|
||||
}
|
||||
return;
|
||||
} catch (e) {
|
||||
console.warn('showDirectoryPicker failed or cancelled', e);
|
||||
// fallthrough to input click
|
||||
}
|
||||
}
|
||||
// Fallback: click the folder input (webkitdirectory attribute should be set at runtime)
|
||||
folderInputRef.current?.click();
|
||||
};
|
||||
|
||||
// Add a ref to store selected files
|
||||
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
||||
@@ -1267,47 +1344,131 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
|
||||
setOrderBySliceLocation(false);
|
||||
|
||||
const fileArray = Array.from(files).sort((a, b) => a.name.localeCompare(b.name));
|
||||
let studyInstanceUID: string | undefined = undefined;
|
||||
|
||||
// If the first file is likely a DICOM (no mime or .dcm extension), try to parse.
|
||||
const firstFile = fileArray[0];
|
||||
const isImageFile = firstFile.type && firstFile.type.startsWith('image/');
|
||||
if (!isImageFile) {
|
||||
try {
|
||||
const arrayBuffer = await firstFile.arrayBuffer();
|
||||
const dataSet = dicomParser.parseDicom(new Uint8Array(arrayBuffer));
|
||||
studyInstanceUID = dataSet.string('x0020000d');
|
||||
console.log("StudyInstanceUID:", studyInstanceUID);
|
||||
} catch (e) {
|
||||
// not DICOM or failed to parse; leave UID undefined
|
||||
console.debug('handleFilesSelected: first file is not a DICOM or failed to parse', e);
|
||||
// Parse each file to extract DICOM tags for grouping (SeriesInstanceUID / StudyInstanceUID)
|
||||
const parsedEntries = await Promise.all(fileArray.map(async (file) => {
|
||||
const isImage = file.type && file.type.startsWith('image/');
|
||||
let studyInstanceUID: string | undefined = undefined;
|
||||
let seriesInstanceUID: string | undefined = undefined;
|
||||
let instanceNumber: number | undefined = undefined;
|
||||
let sliceLocation: number | undefined = undefined;
|
||||
let parsedSuccessfully = false;
|
||||
if (!isImage) {
|
||||
try {
|
||||
const arrayBuffer = await file.arrayBuffer();
|
||||
const dataSet = dicomParser.parseDicom(new Uint8Array(arrayBuffer));
|
||||
studyInstanceUID = dataSet.string('x0020000d');
|
||||
seriesInstanceUID = dataSet.string('x0020000e');
|
||||
const instStr = dataSet.string('x00200013');
|
||||
if (instStr !== undefined && instStr !== null && instStr !== '') instanceNumber = parseInt(instStr as string, 10);
|
||||
const sliceStr = dataSet.string('x00201041') || dataSet.string('x00201040');
|
||||
if (sliceStr !== undefined && sliceStr !== null && sliceStr !== '') sliceLocation = parseFloat(sliceStr as string);
|
||||
parsedSuccessfully = true;
|
||||
} catch (e) {
|
||||
// Not a DICOM or failed to parse
|
||||
parsedSuccessfully = false;
|
||||
}
|
||||
}
|
||||
const imageId = isImage ? `external:${URL.createObjectURL(file)}` : `wadouri:${URL.createObjectURL(file)}`;
|
||||
return { file, imageId, studyInstanceUID, seriesInstanceUID, instanceNumber, sliceLocation, isImage, parsedSuccessfully };
|
||||
}));
|
||||
|
||||
// Group parsed entries by SeriesInstanceUID (fallback to StudyInstanceUID or filename folder)
|
||||
const groups: Map<string, any> = new Map();
|
||||
for (const entry of parsedEntries) {
|
||||
// Skip files that are neither images nor successfully parsed DICOMs
|
||||
if (!entry.isImage && !entry.parsedSuccessfully) {
|
||||
console.debug('Skipping non-DICOM/non-image file:', entry.file.name);
|
||||
continue;
|
||||
}
|
||||
const key = entry.seriesInstanceUID || entry.studyInstanceUID || (entry.file.webkitRelativePath ? entry.file.webkitRelativePath.split('/')[0] : entry.file.name);
|
||||
if (!groups.has(key)) {
|
||||
groups.set(key, { entries: [], studyInstanceUID: entry.studyInstanceUID, seriesInstanceUID: entry.seriesInstanceUID });
|
||||
}
|
||||
groups.get(key).entries.push(entry);
|
||||
}
|
||||
|
||||
// Create imageIds: use wadouri: for DICOM files, `external:` for image files
|
||||
const imageIds = fileArray.map((file) => {
|
||||
const isImage = file.type && file.type.startsWith('image/');
|
||||
if (isImage) {
|
||||
return `external:${URL.createObjectURL(file)}`;
|
||||
}
|
||||
return `wadouri:${URL.createObjectURL(file)}`;
|
||||
});
|
||||
// Build stacks from groups, sorting within each group by requested order
|
||||
const stacks: Array<any> = [];
|
||||
for (const [key, g] of groups.entries()) {
|
||||
const entries = g.entries as Array<any>;
|
||||
// Sort: prefer sliceLocation (if ordering requested), then instanceNumber, then filename
|
||||
entries.sort((a, b) => {
|
||||
if (orderBySliceLocation && a.sliceLocation !== undefined && b.sliceLocation !== undefined) return (a.sliceLocation - b.sliceLocation);
|
||||
if (a.instanceNumber !== undefined && b.instanceNumber !== undefined) return (a.instanceNumber - b.instanceNumber);
|
||||
return (a.file.webkitRelativePath || a.file.name).localeCompare(b.file.webkitRelativePath || b.file.name);
|
||||
});
|
||||
const imageIds = entries.map(e => e.imageId);
|
||||
stacks.push({ imageIds, studyInstanceUID: g.studyInstanceUID, seriesInstanceUID: g.seriesInstanceUID });
|
||||
}
|
||||
|
||||
setAvailableStacks(prev => {
|
||||
const next = [...prev, { imageIds, studyInstanceUID }];
|
||||
setViewportImageIds(vpPrev => {
|
||||
const vpNext = [...vpPrev];
|
||||
vpNext[0] = imageIds;
|
||||
return vpNext;
|
||||
if (stacks.length === 0) return; // nothing to do
|
||||
|
||||
if (folderLoadMode === 'replace') {
|
||||
// Replace everything currently loaded with this new stack
|
||||
try {
|
||||
const renderingEngine = renderingEngineRef.current;
|
||||
if (renderingEngine) {
|
||||
for (let i = 0; i < MAX_VIEWPORTS; i++) {
|
||||
const viewportId = `CT_${i}`;
|
||||
try {
|
||||
if (renderingEngine.getViewport(viewportId)) {
|
||||
renderingEngine.disableElement(viewportId);
|
||||
}
|
||||
} catch (e) { /* ignore */ }
|
||||
try {
|
||||
const el = viewportRefs.current[i];
|
||||
if (el) {
|
||||
try { if ((el as any)._externalPanZoom && (el as any)._externalPanZoom.cleanup) (el as any)._externalPanZoom.cleanup(); } catch (e) {}
|
||||
try { if ((el as any)._resizeObserver) { (el as any)._resizeObserver.disconnect(); (el as any)._resizeObserver = undefined; } } catch (e) {}
|
||||
el.innerHTML = '';
|
||||
(el as any)._cornerstoneEnabled = false;
|
||||
(el as any)._lastViewportType = undefined;
|
||||
}
|
||||
} catch (e) { /* ignore */ }
|
||||
}
|
||||
}
|
||||
} catch (e) { /* ignore */ }
|
||||
|
||||
// Replace with the grouped stacks
|
||||
setAvailableStacks(stacks);
|
||||
// Populate viewports with the first N stacks (repeat first if fewer stacks than viewports)
|
||||
setViewportImageIds(() => {
|
||||
const arr = Array(MAX_VIEWPORTS).fill([] as string[]);
|
||||
for (let i = 0; i < MAX_VIEWPORTS; i++) {
|
||||
arr[i] = stacks[i] ? stacks[i].imageIds : stacks[0].imageIds;
|
||||
}
|
||||
return arr;
|
||||
});
|
||||
setSelectedStackIdx(selPrev => {
|
||||
const selNext = [...selPrev];
|
||||
selNext[0] = next.length - 1;
|
||||
return selNext;
|
||||
setSelectedStackIdx(Array(MAX_VIEWPORTS).fill(0));
|
||||
// Cache metadata for all stacks (fire-and-forget)
|
||||
for (const s of stacks) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||||
setLoadedImageIdsAndCacheMeta(s.imageIds);
|
||||
}
|
||||
} else {
|
||||
// Append (add) all grouped stacks
|
||||
setAvailableStacks(prev => {
|
||||
const next = [...prev, ...stacks];
|
||||
// set first viewport to the last appended stack
|
||||
setViewportImageIds(vpPrev => {
|
||||
const vpNext = [...vpPrev];
|
||||
vpNext[0] = stacks[stacks.length - 1].imageIds;
|
||||
return vpNext;
|
||||
});
|
||||
setSelectedStackIdx(selPrev => {
|
||||
const selNext = [...selPrev];
|
||||
selNext[0] = next.length - 1;
|
||||
return selNext;
|
||||
});
|
||||
// Cache metadata for appended stacks
|
||||
for (const s of stacks) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||||
setLoadedImageIdsAndCacheMeta(s.imageIds);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
setLoadedImageIdsAndCacheMeta(imageIds);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -3785,6 +3946,11 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8 }}>
|
||||
<label style={{ fontSize: 13 }}><input type="radio" name="folderLoadMode" value="add" checked={folderLoadMode==='add'} onChange={()=>setFolderLoadMode('add')} /> Add (append)</label>
|
||||
<label style={{ fontSize: 13 }}><input type="radio" name="folderLoadMode" value="replace" checked={folderLoadMode==='replace'} onChange={()=>setFolderLoadMode('replace')} /> Replace all</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
style={{
|
||||
padding: "10px 18px",
|
||||
@@ -3798,10 +3964,20 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
|
||||
marginBottom: "18px",
|
||||
width: "100%",
|
||||
}}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
onClick={handleFolderPick}
|
||||
>
|
||||
Load DICOM Folder
|
||||
</button>
|
||||
<input
|
||||
ref={folderInputRef}
|
||||
type="file"
|
||||
style={{ display: "none" }}
|
||||
multiple
|
||||
// Directory attribute for recursive folder selection (webkit based browsers)
|
||||
// Note: keep accept off here so folder picker works reliably; filtering happens after selection
|
||||
onChange={handleFilesSelected}
|
||||
/>
|
||||
{/* Keep original file input for non-directory file selection if used elsewhere */}
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
|
||||
@@ -35,6 +35,7 @@ export function mountDicomViewers() {
|
||||
containers.forEach((container) => {
|
||||
const id = container.id || '';
|
||||
let imageStacks: () => Promise<any[]>;
|
||||
const isEmpty = container.getAttribute('data-empty') === 'true';
|
||||
|
||||
// New: support data-named-stacks (richer format) and fallback to data-images
|
||||
const dataNamed = container.getAttribute('data-named-stacks');
|
||||
@@ -112,7 +113,9 @@ export function mountDicomViewers() {
|
||||
return [];
|
||||
};
|
||||
|
||||
if (dataNamed) {
|
||||
if (isEmpty) {
|
||||
imageStacks = () => Promise.resolve([] as any[]);
|
||||
} else if (dataNamed) {
|
||||
let parsed;
|
||||
try {
|
||||
parsed = JSON.parse(dataNamed);
|
||||
@@ -141,7 +144,8 @@ export function mountDicomViewers() {
|
||||
imageStacks = () => Promise.resolve([[]]);
|
||||
}
|
||||
} else {
|
||||
imageStacks = () => Promise.resolve([[]]);
|
||||
// No data provided: return no stacks (empty array) so viewer starts empty
|
||||
imageStacks = () => Promise.resolve([] as any[]);
|
||||
}
|
||||
|
||||
const autoCacheStackAttr = container.getAttribute('data-auto-cache-stack');
|
||||
|
||||
Reference in New Issue
Block a user