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 (
-
-
-
-
- | Tag |
- Value Representation |
- Keyword |
- Value |
-
- {rows.map((row, index) => {
- const className = row.className ? row.className : null;
+
+
+
+ | Tag |
+ Value Representation |
+ Keyword |
+ Value |
+
+ {rows.map((row, index) => {
+ const className = row.className ? row.className : null;
- return (
-
- | {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,