fix(DicomTagBrowser): Fix parsing problems that was limiting nested tags rendering (#3306)
* fix(DicomTagBrowser): Fix parsing problems that was limiting nested tags rendering * Added a progress indicator when switching to a list of more than 1000 rows. * Switched to using react-window to virtualize the dicom tag browser window. * Added filtering to the DICOM tag browser with a new search UI widget. Lots of tweaks and updates to the look-and-feel. * Removed unused import. * PR feedback including some UI tweaks. * More PR feedback. --------- Co-authored-by: Igor Octaviano <igor.octaviano@radicalimaging.com> Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com>
This commit is contained in:
12 files changed
+407
-166
No files matched your search
@@ -1,27 +1,41 @@
|
||||
import dcmjs from 'dcmjs';
|
||||
import moment from 'moment';
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import React, { useState, useMemo, useEffect, useRef } from 'react';
|
||||
import { classes } from '@ohif/core';
|
||||
import { Icon, InputRange, Select, Typography } from '@ohif/ui';
|
||||
import debounce from 'lodash.debounce';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import DicomTagTable from './DicomTagTable';
|
||||
import './DicomTagBrowser.css';
|
||||
import { InputRange, Select, Typography } from '@ohif/ui';
|
||||
|
||||
const { ImageSet } = classes;
|
||||
const { DicomMetaDictionary } = dcmjs.data;
|
||||
const { nameMap } = DicomMetaDictionary;
|
||||
|
||||
const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
|
||||
// The column indices that are to be excluded during a filter of the table.
|
||||
// At present the column indices are:
|
||||
// 0: DICOM tag
|
||||
// 1: VR
|
||||
// 2: Keyword
|
||||
// 3: Value
|
||||
const excludedColumnIndicesForFilter: Set<number> = new Set([1]);
|
||||
|
||||
const [
|
||||
selectedDisplaySetInstanceUID,
|
||||
setSelectedDisplaySetInstanceUID,
|
||||
] = useState(displaySetInstanceUID);
|
||||
const [instanceNumber, setInstanceNumber] = useState(1);
|
||||
const [filterValue, setFilterValue] = useState('');
|
||||
|
||||
const onSelectChange = value => {
|
||||
setSelectedDisplaySetInstanceUID(value.value);
|
||||
setInstanceNumber(1);
|
||||
};
|
||||
|
||||
const searchInputRef = useRef(null);
|
||||
|
||||
const activeDisplaySet = displaySets.find(
|
||||
ds => ds.displaySetInstanceUID === selectedDisplaySetInstanceUID
|
||||
);
|
||||
@@ -54,64 +68,130 @@ const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
|
||||
});
|
||||
}, [displaySets]);
|
||||
|
||||
const rows = useMemo(() => {
|
||||
let metadata;
|
||||
if (isImageStack) {
|
||||
metadata = activeDisplaySet.images[instanceNumber - 1];
|
||||
} else {
|
||||
metadata = activeDisplaySet.instance || activeDisplaySet;
|
||||
}
|
||||
const tags = getSortedTags(metadata);
|
||||
return getFormattedRowsFromTags(tags, metadata);
|
||||
}, [instanceNumber, selectedDisplaySetInstanceUID]);
|
||||
|
||||
const filteredRows = useMemo(() => {
|
||||
if (!filterValue) {
|
||||
return rows;
|
||||
}
|
||||
|
||||
const filterValueLowerCase = filterValue.toLowerCase();
|
||||
return rows.filter(row => {
|
||||
return row.reduce((keepRow, col, colIndex) => {
|
||||
if (keepRow) {
|
||||
// We are already keeping the row, why do more work so return now.
|
||||
return keepRow;
|
||||
}
|
||||
|
||||
if (excludedColumnIndicesForFilter.has(colIndex)) {
|
||||
return keepRow;
|
||||
}
|
||||
|
||||
return keepRow || col.toLowerCase().includes(filterValueLowerCase);
|
||||
}, false);
|
||||
});
|
||||
}, [rows, filterValue]);
|
||||
|
||||
const debouncedSetFilterValue = useMemo(() => {
|
||||
return debounce(setFilterValue, 200);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
debouncedSetFilterValue?.cancel();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="dicom-tag-browser-content">
|
||||
<div className="flex flex-row items-center mb-2">
|
||||
<Typography variant="subtitle" className="w-1/2 mr-8">
|
||||
Series
|
||||
</Typography>
|
||||
{showInstanceList && (
|
||||
<Typography variant="subtitle" className="w-1/2">
|
||||
Instance Number
|
||||
<div className="flex flex-row mb-6 items-center pl-1">
|
||||
<div className="flex flex-row items-center w-1/2">
|
||||
<Typography variant="subtitle" className="mr-4">
|
||||
Series
|
||||
</Typography>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-row items-center mb-6">
|
||||
<div className="w-1/2 mr-8">
|
||||
<Select
|
||||
isClearable={false}
|
||||
onChange={onSelectChange}
|
||||
options={displaySetList}
|
||||
value={displaySetList.find(
|
||||
ds => ds.value === selectedDisplaySetInstanceUID
|
||||
)}
|
||||
className="text-white"
|
||||
/>
|
||||
</div>
|
||||
{showInstanceList ? (
|
||||
<div className="w-1/2">
|
||||
<InputRange
|
||||
value={instanceNumber}
|
||||
key={selectedDisplaySetInstanceUID}
|
||||
onChange={value => {
|
||||
setInstanceNumber(parseInt(value));
|
||||
}}
|
||||
minValue={1}
|
||||
maxValue={activeDisplaySet.images.length}
|
||||
step={1}
|
||||
<div className="grow mr-8">
|
||||
<Select
|
||||
id="display-set-selector"
|
||||
isClearable={false}
|
||||
onChange={onSelectChange}
|
||||
options={displaySetList}
|
||||
value={displaySetList.find(
|
||||
ds => ds.value === selectedDisplaySetInstanceUID
|
||||
)}
|
||||
className="text-white"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex flex-row items-center w-1/2">
|
||||
{showInstanceList && (
|
||||
<Typography variant="subtitle" className="mr-4">
|
||||
Instance Number
|
||||
</Typography>
|
||||
)}
|
||||
{showInstanceList && (
|
||||
<div className="grow">
|
||||
<InputRange
|
||||
value={instanceNumber}
|
||||
key={selectedDisplaySetInstanceUID}
|
||||
onChange={value => {
|
||||
setInstanceNumber(parseInt(value));
|
||||
}}
|
||||
minValue={1}
|
||||
maxValue={activeDisplaySet.images.length}
|
||||
step={1}
|
||||
inputClassName="w-full"
|
||||
labelPosition="left"
|
||||
trackColor={'#3a3f99'}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<DicomTagTable
|
||||
rows={getFormattedRowsFromTags(activeDisplaySet, instanceNumber)}
|
||||
></DicomTagTable>
|
||||
<div className="w-full h-1 bg-black"></div>
|
||||
<div className="flex flex-row my-3 w-1/2">
|
||||
{/* TODO - refactor the following into its own reusable component */}
|
||||
<label className="relative block w-full mr-8">
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-2">
|
||||
<Icon name="icon-search"></Icon>
|
||||
</span>
|
||||
<input
|
||||
ref={searchInputRef}
|
||||
type="text"
|
||||
className="block bg-black w-full shadow transition duration-300 appearance-none border border-inputfield-main focus:border-inputfield-focus focus:outline-none disabled:border-inputfield-disabled rounded w-full py-2 px-9 text-base leading-tight placeholder:text-inputfield-placeholder"
|
||||
placeholder="Search metadata..."
|
||||
onChange={event => debouncedSetFilterValue(event.target.value)}
|
||||
autoComplete="off"
|
||||
></input>
|
||||
<span className="absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<Icon
|
||||
name="icon-clear-field"
|
||||
className={classNames(
|
||||
'cursor-pointer',
|
||||
filterValue ? '' : 'hidden'
|
||||
)}
|
||||
onClick={() => {
|
||||
searchInputRef.current.value = '';
|
||||
debouncedSetFilterValue('');
|
||||
}}
|
||||
></Icon>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<DicomTagTable rows={filteredRows} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function getFormattedRowsFromTags(displaySet, instanceNumber) {
|
||||
const isImageStack = _isImageStack(displaySet);
|
||||
|
||||
let metadata;
|
||||
|
||||
if (isImageStack) {
|
||||
metadata = displaySet.images[instanceNumber - 1];
|
||||
} else {
|
||||
metadata = displaySet;
|
||||
}
|
||||
|
||||
const tags = getSortedTags(metadata);
|
||||
function getFormattedRowsFromTags(tags, metadata) {
|
||||
const rows = [];
|
||||
|
||||
tags.forEach(tagInfo => {
|
||||
@@ -126,7 +206,7 @@ function getFormattedRowsFromTags(displaySet, instanceNumber) {
|
||||
const { values } = tagInfo;
|
||||
|
||||
values.forEach((item, index) => {
|
||||
const formatedRowsFromTags = getFormattedRowsFromTags(item);
|
||||
const formatedRowsFromTags = getFormattedRowsFromTags(item, metadata);
|
||||
|
||||
rows.push([
|
||||
`${item[0].tagIndent}(FFFE,E000)`,
|
||||
@@ -140,34 +220,21 @@ function getFormattedRowsFromTags(displaySet, instanceNumber) {
|
||||
} else {
|
||||
if (tagInfo.vr === 'xs') {
|
||||
try {
|
||||
/* const dataset = metadataProvider.getStudyDataset(
|
||||
meta.StudyInstanceUID
|
||||
);*/
|
||||
// console.log(dataset);
|
||||
// const tag = dcmjs.data.Tag.fromPString(tagInfo.tag).toCleanString();
|
||||
// const originalTagInfo = dataset[tag];
|
||||
// tagInfo.vr = originalTagInfo.vr;
|
||||
const tag = dcmjs.data.Tag.fromPString(tagInfo.tag).toCleanString();
|
||||
const originalTagInfo = metadata[tag];
|
||||
tagInfo.vr = originalTagInfo.vr;
|
||||
} catch (error) {
|
||||
console.error(
|
||||
`Failed to parse value representation for tag '${tagInfo.keyword}'`
|
||||
);
|
||||
}
|
||||
}
|
||||
if (tagInfo.vr === 'PN') {
|
||||
rows.push([
|
||||
`${tagInfo.tagIndent}${tagInfo.tag}`,
|
||||
tagInfo.vr,
|
||||
tagInfo.keyword,
|
||||
tagInfo.value,
|
||||
]);
|
||||
} else {
|
||||
rows.push([
|
||||
`${tagInfo.tagIndent}${tagInfo.tag}`,
|
||||
tagInfo.vr,
|
||||
tagInfo.keyword,
|
||||
tagInfo.value,
|
||||
]);
|
||||
}
|
||||
rows.push([
|
||||
`${tagInfo.tagIndent}${tagInfo.tag}`,
|
||||
tagInfo.vr,
|
||||
tagInfo.keyword,
|
||||
tagInfo.value,
|
||||
]);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -1,97 +1,224 @@
|
||||
import React from 'react';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { VariableSizeList as List } from 'react-window';
|
||||
import classNames from 'classnames';
|
||||
import debounce from 'lodash.debounce';
|
||||
|
||||
function ColumnHeaders() {
|
||||
const lineHeightPx = 20;
|
||||
const lineHeightClassName = `leading-[${lineHeightPx}px]`;
|
||||
const rowVerticalPaddingPx = 10;
|
||||
const rowBottomBorderPx = 1;
|
||||
const rowVerticalPaddingStyle = { padding: `${rowVerticalPaddingPx}px 0` };
|
||||
const rowStyle = {
|
||||
borderBottomWidth: `${rowBottomBorderPx}px`,
|
||||
...rowVerticalPaddingStyle,
|
||||
};
|
||||
|
||||
function ColumnHeaders({ tagRef, vrRef, keywordRef, valueRef }) {
|
||||
return (
|
||||
<div className="m-auto flex flex-col py-2 bg-secondary-light">
|
||||
<div className="flex flex-row w-full">
|
||||
<div className="px-3 w-5/24">
|
||||
<label className="flex flex-col flex-1 text-white text-lg pl-1 select-none">
|
||||
<span className="flex flex-row items-center focus:outline-none">
|
||||
Tag
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="px-3 w-4/24">
|
||||
<label className="flex flex-col flex-1 text-white text-lg pl-1 select-none">
|
||||
<span className="flex flex-row items-center focus:outline-none">
|
||||
VR
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="px-3 w-6/24">
|
||||
<label className="flex flex-col flex-1 text-white text-lg pl-1 select-none">
|
||||
<span className="flex flex-row items-center focus:outline-none">
|
||||
Keyword
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="px-3 w-5/24">
|
||||
<label className="flex flex-col flex-1 text-white text-lg pl-1 select-none">
|
||||
<span className="flex flex-row items-center focus:outline-none">
|
||||
Value
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
'flex flex-row w-full bg-secondary-dark ohif-scrollbar overflow-y-scroll'
|
||||
)}
|
||||
style={rowVerticalPaddingStyle}
|
||||
>
|
||||
<div className="px-3 w-4/24">
|
||||
<label
|
||||
ref={tagRef}
|
||||
className="flex flex-col flex-1 text-white text-lg pl-1 select-none"
|
||||
>
|
||||
<span className="flex flex-row items-center focus:outline-none">
|
||||
Tag
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="px-3 w-2/24">
|
||||
<label
|
||||
ref={vrRef}
|
||||
className="flex flex-col flex-1 text-white text-lg pl-1 select-none"
|
||||
>
|
||||
<span className="flex flex-row items-center focus:outline-none">
|
||||
VR
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="px-3 w-6/24">
|
||||
<label
|
||||
ref={keywordRef}
|
||||
className="flex flex-col flex-1 text-white text-lg pl-1 select-none"
|
||||
>
|
||||
<span className="flex flex-row items-center focus:outline-none">
|
||||
Keyword
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="px-3 w-5/24 grow">
|
||||
<label
|
||||
ref={valueRef}
|
||||
className="flex flex-col flex-1 text-white text-lg pl-1 select-none"
|
||||
>
|
||||
<span className="flex flex-row items-center focus:outline-none">
|
||||
Value
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DicomTagTable({ rows }) {
|
||||
const listRef = useRef();
|
||||
const canvasRef = useRef();
|
||||
|
||||
const [tagHeaderElem, setTagHeaderElem] = useState(null);
|
||||
const [vrHeaderElem, setVrHeaderElem] = useState(null);
|
||||
const [keywordHeaderElem, setKeywordHeaderElem] = useState(null);
|
||||
const [valueHeaderElem, setValueHeaderElem] = useState(null);
|
||||
|
||||
// Here the refs are inturn stored in state to trigger a render of the table.
|
||||
// This virtualized table does NOT render until the header is rendered because the header column widths are used to determine the row heights in the table.
|
||||
// Therefore whenever the refs change (in particular the first time the refs are set), we want to trigger a render of the table.
|
||||
const tagRef = elem => {
|
||||
if (elem) {
|
||||
setTagHeaderElem(elem);
|
||||
}
|
||||
};
|
||||
const vrRef = elem => {
|
||||
if (elem) {
|
||||
setVrHeaderElem(elem);
|
||||
}
|
||||
};
|
||||
const keywordRef = elem => {
|
||||
if (elem) {
|
||||
setKeywordHeaderElem(elem);
|
||||
}
|
||||
};
|
||||
const valueRef = elem => {
|
||||
if (elem) {
|
||||
setValueHeaderElem(elem);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* When new rows are set, scroll to the top and reset the virtualization.
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (!listRef?.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
listRef.current.scrollTo(0);
|
||||
listRef.current.resetAfterIndex(0);
|
||||
}, [rows]);
|
||||
|
||||
/**
|
||||
* When the browser window resizes, update the row virtualization (i.e. row heights)
|
||||
*/
|
||||
useEffect(() => {
|
||||
const debouncedResize = debounce(
|
||||
() => listRef.current.resetAfterIndex(0),
|
||||
100
|
||||
);
|
||||
|
||||
window.addEventListener('resize', debouncedResize);
|
||||
|
||||
return () => {
|
||||
debouncedResize.cancel();
|
||||
window.removeEventListener('resize', debouncedResize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const Row = useCallback(
|
||||
({ index, style }) => {
|
||||
const row = rows[index];
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{ ...style, ...rowStyle }}
|
||||
className={classNames(
|
||||
'hover:bg-secondary-main transition duration-300 bg-black flex flex-row w-full border-secondary-light items-center text-base break-all',
|
||||
lineHeightClassName
|
||||
)}
|
||||
key={`DICOMTagRow-${index}`}
|
||||
>
|
||||
<div className="px-3 w-4/24">{row[0]}</div>
|
||||
<div className="px-3 w-2/24">{row[1]}</div>
|
||||
<div className="px-3 w-6/24">{row[2]}</div>
|
||||
<div className="px-3 w-5/24 grow">{row[3]}</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
[rows]
|
||||
);
|
||||
|
||||
/**
|
||||
* Whenever any one of the column headers is set, then the header is rendered.
|
||||
* Here we chose the tag header.
|
||||
*/
|
||||
const isHeaderRendered = useCallback(() => tagHeaderElem !== null, [
|
||||
tagHeaderElem,
|
||||
]);
|
||||
|
||||
/**
|
||||
* Get the item/row size. We use the header column widths to calculate the various row heights.
|
||||
* @param index the row index
|
||||
* @returns the row height
|
||||
*/
|
||||
const getItemSize = useCallback(
|
||||
index => {
|
||||
const headerWidths = [
|
||||
tagHeaderElem.offsetWidth,
|
||||
vrHeaderElem.offsetWidth,
|
||||
keywordHeaderElem.offsetWidth,
|
||||
valueHeaderElem.offsetWidth,
|
||||
];
|
||||
|
||||
const context = canvasRef.current.getContext('2d');
|
||||
context.font = getComputedStyle(canvasRef.current).font;
|
||||
|
||||
return rows[index]
|
||||
.map((colText, index) => {
|
||||
const colOneLineWidth = context.measureText(colText).width;
|
||||
const numLines = Math.ceil(colOneLineWidth / headerWidths[index]);
|
||||
return (
|
||||
numLines * lineHeightPx +
|
||||
2 * rowVerticalPaddingPx +
|
||||
rowBottomBorderPx
|
||||
);
|
||||
})
|
||||
.reduce((maxHeight, colHeight) => Math.max(maxHeight, colHeight));
|
||||
},
|
||||
[rows, keywordHeaderElem, tagHeaderElem, valueHeaderElem, vrHeaderElem]
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ColumnHeaders()}
|
||||
<canvas
|
||||
style={{ visibility: 'hidden', position: 'absolute' }}
|
||||
className="text-base"
|
||||
ref={canvasRef}
|
||||
/>
|
||||
<ColumnHeaders
|
||||
tagRef={tagRef}
|
||||
vrRef={vrRef}
|
||||
keywordRef={keywordRef}
|
||||
valueRef={valueRef}
|
||||
/>
|
||||
<div
|
||||
className="m-auto relative border-2 border-secondary-light overflow-hidden ohif-scrollbar"
|
||||
className="m-auto relative border-2 border-black bg-black"
|
||||
style={{ height: '32rem' }}
|
||||
>
|
||||
<table className="w-full text-white">
|
||||
<tbody>
|
||||
{rows.map((row, index) => {
|
||||
const className = row.className ? row.className : null;
|
||||
|
||||
return (
|
||||
<tr
|
||||
className="hover:bg-secondary-main transition duration-300 bg-primary-dark"
|
||||
key={`DICOMTagRow-${index}`}
|
||||
>
|
||||
<td
|
||||
style={{ maxWidth: '0px' }}
|
||||
className="px-4 py-2 text-base break-all border-b border-secondary-light w-5/24"
|
||||
>
|
||||
<div className="flex">
|
||||
<div className="inline-flex max-w-full">{row[0]}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style={{ maxWidth: '0px' }}
|
||||
className="px-4 py-2 text-base break-all border-b border-secondary-light w-4/24"
|
||||
>
|
||||
<div className="flex">
|
||||
<div className="inline-flex max-w-full">{row[1]}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style={{ maxWidth: '0px' }}
|
||||
className="px-4 py-2 text-base break-all border-b border-secondary-light w-6/24"
|
||||
>
|
||||
<div className="flex">
|
||||
<div className="inline-flex max-w-full">{row[2]}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style={{ maxWidth: '0px' }}
|
||||
className="px-4 py-2 text-base break-all border-b border-secondary-light w-14/24"
|
||||
>
|
||||
<div className="flex">
|
||||
<div className="inline-flex max-w-full">{row[3]}</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{isHeaderRendered() && (
|
||||
<List
|
||||
ref={listRef}
|
||||
height={500}
|
||||
itemCount={rows.length}
|
||||
itemSize={getItemSize}
|
||||
width={'100%'}
|
||||
className="ohif-scrollbar"
|
||||
>
|
||||
{Row}
|
||||
</List>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user