diff --git a/extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx b/extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx index 49155ca6a..cd03107aa 100644 --- a/extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx +++ b/extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx @@ -1,48 +1,37 @@ -import React, { useState, useEffect, useRef } from 'react'; -import { classes } from '@ohif/core'; -import Range from './Range'; -import DicomTagTable from './DicomTagTable'; import dcmjs from 'dcmjs'; import moment from 'moment'; +import React, { useState, useMemo } from 'react'; +import { classes } from '@ohif/core'; +import DicomTagTable from './DicomTagTable'; import './DicomTagBrowser.css'; -import { Select, Typography } from '@ohif/ui'; +import { InputRange, Select, Typography } from '@ohif/ui'; const { ImageSet } = classes; const { DicomMetaDictionary } = dcmjs.data; const { nameMap } = DicomMetaDictionary; - -let instanceSelectList = null; -let instanceSelectTitle = null; - const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => { const [ - activeDisplaySetInstanceUID, - setActiveDisplaySetInstanceUID, + selectedDisplaySetInstanceUID, + setSelectedDisplaySetInstanceUID, ] = useState(displaySetInstanceUID); - const [activeInstance, setActiveInstance] = useState(1); - const [tags, setTags] = useState([]); - const [meta, setMeta] = useState(''); - const [instanceList, setInstanceList] = useState([]); - const [displaySetList, setDisplaySetList] = useState([]); - const [isImageStack, setIsImageStack] = useState(false); - const [selectedDisplaySetValue, setSelectedDisplaySetValue] = useState({} - ); - const onSeriesSelect = value => { - console.log(value); - setActiveDisplaySetInstanceUID(value.value); - setActiveInstance(1); - setSelectedDisplaySetValue(value); + const [instanceNumber, setInstanceNumber] = useState(1); + + const onSelectChange = value => { + setSelectedDisplaySetInstanceUID(value.value); + setInstanceNumber(1); }; - useEffect(() => { - var activeDisplaySet = displaySets.find( - ds => ds.displaySetInstanceUID === activeDisplaySetInstanceUID - ); + const activeDisplaySet = displaySets.find( + ds => ds.displaySetInstanceUID === selectedDisplaySetInstanceUID + ); + const isImageStack = _isImageStack(activeDisplaySet); + const showInstanceList = isImageStack && activeDisplaySet.images.length > 1; + + const displaySetList = useMemo(() => { displaySets.sort((a, b) => a.SeriesNumber - b.SeriesNumber); - - const newDisplaySetList = displaySets.map(displaySet => { + return displaySets.map(displaySet => { const { displaySetInstanceUID, SeriesDate, @@ -56,123 +45,72 @@ const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => { const dateStr = `${SeriesDate}:${SeriesTime}`.split('.')[0]; const date = moment(dateStr, 'YYYYMMDD:HHmmss'); const displayDate = date.format('ddd, MMM Do YYYY'); + return { value: displaySetInstanceUID, label: `${SeriesNumber} (${Modality}): ${SeriesDescription}`, description: displayDate, - onClick: () => { - setActiveDisplaySetInstanceUID(displaySetInstanceUID); - setActiveInstance(1); - - //instanceSelectList.props.children.props.value = 1; - }, }; }); - - let metadata; - if (!activeDisplaySet) { - if (!displaySets || displaySets.length == 0) { - return; - } else { - activeDisplaySet = displaySets[0]; - setActiveDisplaySetInstanceUID(displaySets[0].displaySetInstanceUID); - setSelectedDisplaySetValue(newDisplaySetList[0]); - } - - } else { - - setSelectedDisplaySetValue(newDisplaySetList.find( - ds => ds.value === activeDisplaySetInstanceUID - )); - } - const isImageStack = - activeDisplaySet instanceof ImageSet; /*&& - activeDisplaySet.isSOPClassUIDSupported === true*/; - - let instanceList; - if (isImageStack) { - const { images } = activeDisplaySet; - const image = images[activeInstance - 1]; - instanceList = images.map((image, index) => { - // const metadata = image.getData().metadata; - - const { InstanceNumber } = image; - - return { - value: index, - title: `Instance Number: ${InstanceNumber}`, - description: '', - onClick: () => { - setActiveInstance(index); - }, - }; - }); - metadata = image; - } else { - metadata = activeDisplaySet; - } - - - if (isImageStack) { - instanceSelectTitle = ( - - Instance Number - - ) - instanceSelectList = ( -
-

{value}

} - onChange={({ target }) => { - const instanceIndex = parseInt(target.value); - setActiveInstance(instanceIndex); - }} - /> -
- ); - } else { - instanceSelectList = null; - } - setTags(getSortedTags(metadata)); - setMeta(metadata); - setInstanceList(instanceList); - setDisplaySetList(newDisplaySetList); - setIsImageStack(isImageStack); - }, [activeDisplaySetInstanceUID, activeInstance, displaySets]); + }, [displaySets]); return (
-
- +
+ Series - {instanceSelectTitle}
-
- -
+ {showInstanceList && ( + + Instance Number + + )} +
+
+
- {props.showPercentage && {`${value}%`}} - {props.showValue && ( - - {props.valueRenderer - ? props.valueRenderer(props.value) - : props.value} - - )} - - ); -} - -Range.propTypes = { - value: PropTypes.number, - min: PropTypes.number.isRequired, - max: PropTypes.number.isRequired, - step: PropTypes.number, - id: PropTypes.string, - valueRenderer: PropTypes.func, - onChange: PropTypes.func, - showPercentage: PropTypes.bool, - showValue: PropTypes.bool, - ref: PropTypes.any, -}; - -Range.defaultProps = { - showPercentage: false, - showValue: false, -}; - -export default Range; diff --git a/modes/longitudinal/src/toolbarButtons.js b/modes/longitudinal/src/toolbarButtons.js index 8daceca1a..c6dcd101f 100644 --- a/modes/longitudinal/src/toolbarButtons.js +++ b/modes/longitudinal/src/toolbarButtons.js @@ -377,19 +377,6 @@ const toolbarButtons = [ ], 'Reset' ), - _createActionButton( - 'TagBrowser', - 'list-bullets', - 'Dicom Tag Browser', - [ - { - commandName: 'openDICOMTagViewer', - commandOptions: {}, - context: 'DEFAULT', - }, - ], - 'Dicom Tag Browser' - ), _createActionButton( 'rotate-right', 'tool-rotate-right', @@ -535,6 +522,19 @@ const toolbarButtons = [ ], 'Rectangle' ), + _createActionButton( + 'TagBrowser', + 'list-bullets', + 'Dicom Tag Browser', + [ + { + commandName: 'openDICOMTagViewer', + commandOptions: {}, + context: 'DEFAULT', + }, + ], + 'Dicom Tag Browser' + ), ], }, }, diff --git a/platform/ui/src/components/index.js b/platform/ui/src/components/index.js index b88bcefb1..66aeeb874 100644 --- a/platform/ui/src/components/index.js +++ b/platform/ui/src/components/index.js @@ -8,7 +8,7 @@ import Dialog from './Dialog'; import Dropdown from './Dropdown'; import EmptyStudies from './EmptyStudies'; import ErrorBoundary from './ErrorBoundary'; -import Icon, { addIcon } from './Icon'; +import Icon from './Icon'; import IconButton from './IconButton'; import Input from './Input'; import InputDateRange from './InputDateRange'; @@ -89,7 +89,6 @@ export { ExpandableToolbarButton, ListMenu, Icon, - addIcon, IconButton, Input, InputDateRange, diff --git a/platform/ui/src/index.js b/platform/ui/src/index.js index e5dca106c..54814bb7d 100644 --- a/platform/ui/src/index.js +++ b/platform/ui/src/index.js @@ -54,6 +54,7 @@ export { Icon, IconButton, Input, + InputRange, InputDateRange, InputGroup, InputLabelWrapper,