diff --git a/extensions/dicom-tag-browser/src/components/DicomTagBrowser.css b/extensions/dicom-tag-browser/src/components/DicomTagBrowser.css index ea2341b0a..26cb8414f 100644 --- a/extensions/dicom-tag-browser/src/components/DicomTagBrowser.css +++ b/extensions/dicom-tag-browser/src/components/DicomTagBrowser.css @@ -3,6 +3,11 @@ margin-left: auto; } +.dicom-tag-browser-table-wrapper { + height: 500px; + overflow-y: scroll; +} + .dicom-tag-browser-table tr { padding-left: 10px; padding-right: 10px; @@ -11,6 +16,20 @@ white-space: nowrap; } +.dicom-tag-browser-content { + overflow: hidden; + width: 100%; + padding-bottom: 50px; +} + +.dicom-tag-browser-instance-range .range { + height: 20px; +} + +.dicom-tag-browser-instance-range { + padding: 20px 0 20px 0; +} + .dicom-tag-browser-table td.dicom-tag-browser-table-center { text-align: center; } diff --git a/extensions/dicom-tag-browser/src/components/DicomTagBrowser.js b/extensions/dicom-tag-browser/src/components/DicomTagBrowser.js index 05f0670f8..8a358d308 100644 --- a/extensions/dicom-tag-browser/src/components/DicomTagBrowser.js +++ b/extensions/dicom-tag-browser/src/components/DicomTagBrowser.js @@ -1,5 +1,6 @@ import React, { useState, useEffect } from 'react'; import { classes, cornerstone as OHIFCornerstone } from '@ohif/core'; +import { Range } from '@ohif/ui'; import dcmjs from 'dcmjs'; import DicomBrowserSelect from './DicomBrowserSelect'; import moment from 'moment'; @@ -99,26 +100,35 @@ const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => { let instanceSelectList = null; if (isImageStack) { - const selectedInstanceValue = instanceList[activeInstance]; - instanceSelectList = ( - +
+

Instance Number: {value}

} + onChange={({ target }) => { + const instanceIndex = parseInt(target.value); + setActiveInstance(instanceIndex); + }} + /> +
); } return ( -
+
{instanceSelectList} - +
+ +
); }; @@ -127,30 +137,28 @@ function DicomTagTable({ tags, meta }) { const rows = getFormattedRowsFromTags(tags, meta); return ( -
- - - - - - - - - {rows.map((row, index) => { - const className = row.className ? row.className : null; +
TagValue RepresentationKeywordValue
+ + + + + + + + {rows.map((row, index) => { + const className = row.className ? row.className : null; - return ( - - - - - - - ); - })} - -
TagValue RepresentationKeywordValue
{row[0]}{row[1]}{row[2]}{row[3]}
-
+ return ( + + {row[0]} + {row[1]} + {row[2]} + {row[3]} + + ); + })} + + ); } @@ -183,12 +191,16 @@ function getFormattedRowsFromTags(tags, meta) { } else { if (tagInfo.vr === 'xs') { try { - const dataset = metadataProvider.getStudyDataset(meta.StudyInstanceUID); + const dataset = metadataProvider.getStudyDataset( + meta.StudyInstanceUID + ); const tag = dcmjs.data.Tag.fromPString(tagInfo.tag).toCleanString(); const originalTagInfo = dataset[tag]; tagInfo.vr = originalTagInfo.vr; } catch (error) { - console.error(`Failed to parse value representation for tag '${tagInfo.keyword}'`); + console.error( + `Failed to parse value representation for tag '${tagInfo.keyword}'` + ); } } diff --git a/extensions/dicom-tag-browser/src/getCommandsModule.js b/extensions/dicom-tag-browser/src/getCommandsModule.js index 0fec35e79..eb45e011d 100644 --- a/extensions/dicom-tag-browser/src/getCommandsModule.js +++ b/extensions/dicom-tag-browser/src/getCommandsModule.js @@ -21,7 +21,7 @@ export default function getCommandsModule(servicesManager) { const { UIModalService } = servicesManager.services; - const WrappedDicomTagBrowser = function () { + const WrappedDicomTagBrowser = function() { return ( { shouldCloseOnEsc, fullscreen, closeButton, - showScrollbar + showScrollbar, + noScroll, } = options; return ( {ModalContent && ( {this.props.showPercentage && {`${this.state.value}%`}} - {this.props.showValue && {this.state.value}} + {this.props.showValue && ( + + {this.props.valueRenderer + ? this.props.valueRenderer(this.state.value) + : this.state.value} + + )} ); } @@ -40,6 +46,7 @@ Range.propTypes = { max: PropTypes.number.isRequired, step: PropTypes.number, id: PropTypes.string, + valueRenderer: PropTypes.func, onChange: PropTypes.func, showPercentage: PropTypes.bool, showValue: PropTypes.bool,