TrizTech/ohif-viewer
17
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feat/v2-main' of https://github.com/OHIF/Viewers into feat/ui-v2-Dropdown

Browse Source
This commit is contained in:
Rodrigo Antinarelli committed 2020-06-26 12:42:56 -03:00
2 parents d220dd2489 edd4a4118c
commit 0d53346d61
73 files changed
+1423 -369
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

extensions/cornerstone/package.json
+2 -2
View File
@@ -33,8 +33,8 @@
"@ohif/ui": "^0.50.0",
"cornerstone-core": "^2.3.0",
"cornerstone-math": "^0.1.8",
"cornerstone-tools": "4.15.1",
"dcmjs": "^0.12.3",
"cornerstone-tools": "4.16.0",
"dcmjs": "0.14.0",
"cornerstone-wado-image-loader": "^3.1.2",
"dicom-parser": "^1.8.3",
"hammerjs": "^2.0.8",
extensions/cornerstone/src/init.js
+35 -12
View File
@@ -90,6 +90,7 @@ export default function init({ servicesManager, configuration }) {
/* Add extension tools configuration here. */
const internalToolsConfig = {
/* TODO ArrowAnnotate input
ArrowAnnotate: {
configuration: {
getTextCallback: (callback, eventDetails) =>
@@ -98,6 +99,7 @@ export default function init({ servicesManager, configuration }) {
callInputDialog(data, eventDetails, callback),
},
},
*/
};
/* Abstract tools configuration using extension configuration. */
@@ -166,27 +168,48 @@ export default function init({ servicesManager, configuration }) {
const _initMeasurementService = measurementService => {
/* Initialization */
const { toAnnotation, toMeasurement } = measurementServiceMappingsFactory(
measurementService
);
const {
Length,
Bidirectional,
EllipticalRoi,
ArrowAnnotate,
} = measurementServiceMappingsFactory(measurementService);
const csToolsVer4MeasurementSource = measurementService.createSource(
'CornerstoneTools',
'4'
);
/* Matching Criterias */
const matchingCriteria = {
valueType: measurementService.VALUE_TYPES.POLYLINE,
points: 2,
};
/* Mappings */
measurementService.addMapping(
csToolsVer4MeasurementSource,
'Length',
matchingCriteria,
toAnnotation,
toMeasurement
Length.matchingCriteria,
Length.toAnnotation,
Length.toMeasurement
);
measurementService.addMapping(
csToolsVer4MeasurementSource,
'Bidirectional',
Bidirectional.matchingCriteria,
Bidirectional.toAnnotation,
Bidirectional.toMeasurement
);
measurementService.addMapping(
csToolsVer4MeasurementSource,
'EllipticalRoi',
EllipticalRoi.matchingCriteria,
EllipticalRoi.toAnnotation,
EllipticalRoi.toMeasurement
);
measurementService.addMapping(
csToolsVer4MeasurementSource,
'ArrowAnnotate',
ArrowAnnotate.matchingCriteria,
ArrowAnnotate.toAnnotation,
ArrowAnnotate.toMeasurement
);
return csToolsVer4MeasurementSource;
extensions/cornerstone/src/utils/measurementServiceMappings/ArrowAnnotate.js
+48
View File
@@ -0,0 +1,48 @@
import SUPPORTED_TOOLS from './constants/supportedTools';
import getPointsFromHandles from './utils/getPointsFromHandles';
import getSOPInstanceAttributes from './utils/getSOPInstanceAttributes';
const ArrowAnnotate = {
toAnnotation: (measurement, definition) => {
// TODO -> Implement when this is needed.
},
toMeasurement: (csToolsAnnotation, getValueTypeFromToolType) => {
const { element, measurementData } = csToolsAnnotation;
const tool =
csToolsAnnotation.toolType ||
csToolsAnnotation.toolName ||
measurementData.toolType;
const validToolType = toolName => SUPPORTED_TOOLS.includes(toolName);
if (!validToolType(tool)) {
throw new Error('Tool not supported');
}
const {
SOPInstanceUID,
FrameOfReferenceUID,
SeriesInstanceUID,
StudyInstanceUID,
} = getSOPInstanceAttributes(element);
const points = [];
points.push(measurementData.handles);
return {
id: measurementData._measurementServiceId,
SOPInstanceUID: SOPInstanceUID,
FrameOfReferenceUID,
referenceSeriesUID: SeriesInstanceUID,
referenceStudyUID: StudyInstanceUID,
label: measurementData.text,
description: measurementData.description,
unit: measurementData.unit,
text: measurementData.text,
type: getValueTypeFromToolType(tool),
points: getPointsFromHandles(measurementData.handles),
};
},
};
export default ArrowAnnotate;
extensions/cornerstone/src/utils/measurementServiceMappings/Bidirectional.js
+50
View File
@@ -0,0 +1,50 @@
import SUPPORTED_TOOLS from './constants/supportedTools';
import getSOPInstanceAttributes from './utils/getSOPInstanceAttributes';
const Bidirectional = {
toAnnotation: (measurement, definition) => {
// TODO -> Implement when this is needed.
},
toMeasurement: (csToolsAnnotation, getValueTypeFromToolType) => {
const { element, measurementData } = csToolsAnnotation;
const tool =
csToolsAnnotation.toolType ||
csToolsAnnotation.toolName ||
measurementData.toolType;
const validToolType = toolName => SUPPORTED_TOOLS.includes(toolName);
if (!validToolType(tool)) {
throw new Error('Tool not supported');
}
const {
SOPInstanceUID,
FrameOfReferenceUID,
SeriesInstanceUID,
StudyInstanceUID,
} = getSOPInstanceAttributes(element);
const { handles } = measurementData;
const longAxis = [handles.start, handles.end];
const shortAxis = [handles.perpendicularStart, handles.perpendicularEnd];
return {
id: measurementData._measurementServiceId,
SOPInstanceUID: SOPInstanceUID,
FrameOfReferenceUID,
referenceSeriesUID: SeriesInstanceUID,
referenceStudyUID: StudyInstanceUID,
label: measurementData.text,
description: measurementData.description,
unit: measurementData.unit,
shortestDiameter: measurementData.shortestDiameter,
longestDiameter: measurementData.longestDiameter,
type: getValueTypeFromToolType(tool),
points: { longAxis, shortAxis },
};
},
};
export default Bidirectional;
extensions/cornerstone/src/utils/measurementServiceMappings/EllipticalRoi.js
+74
View File
@@ -0,0 +1,74 @@
import SUPPORTED_TOOLS from './constants/supportedTools';
import getSOPInstanceAttributes from './utils/getSOPInstanceAttributes';
const EllipticalRoi = {
toAnnotation: (measurement, definition) => {
// TODO -> Implement when this is needed.
},
toMeasurement: (csToolsAnnotation, getValueTypeFromToolType) => {
const { element, measurementData } = csToolsAnnotation;
const tool =
csToolsAnnotation.toolType ||
csToolsAnnotation.toolName ||
measurementData.toolType;
const validToolType = toolName => SUPPORTED_TOOLS.includes(toolName);
if (!validToolType(tool)) {
throw new Error('Tool not supported');
}
const {
SOPInstanceUID,
FrameOfReferenceUID,
SeriesInstanceUID,
StudyInstanceUID,
} = getSOPInstanceAttributes(element);
const { start, end } = measurementData.handles;
const halfXLength = Math.abs(start.x - end.x) / 2;
const halfYLength = Math.abs(start.y - end.y) / 2;
const points = [];
const center = { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
// To store similar to SR.
if (halfXLength > halfYLength) {
// X-axis major
// Major axis
points.push({ x: center.x - halfXLength, y: center.y });
points.push({ x: center.x + halfXLength, y: center.y });
// Minor axis
points.push({ x: center.x, y: center.y - halfYLength });
points.push({ x: center.x, y: center.y + halfYLength });
} else {
// Y-axis major
// Major axis
points.push({ x: center.x, y: center.y - halfYLength });
points.push({ x: center.x, y: center.y + halfYLength });
// Minor axis
points.push({ x: center.x - halfXLength, y: center.y });
points.push({ x: center.x + halfXLength, y: center.y });
}
return {
id: measurementData._measurementServiceId,
SOPInstanceUID: SOPInstanceUID,
FrameOfReferenceUID,
referenceSeriesUID: SeriesInstanceUID,
referenceStudyUID: StudyInstanceUID,
label: measurementData.text,
description: measurementData.description,
unit: measurementData.unit,
area:
measurementData.cachedStats &&
measurementData.cachedStats
.area /* TODO: Add concept names instead (descriptor) */,
type: getValueTypeFromToolType(tool),
points,
};
},
};
export default EllipticalRoi;
extensions/cornerstone/src/utils/measurementServiceMappings/Length.js
+79
View File
@@ -0,0 +1,79 @@
import SUPPORTED_TOOLS from './constants/supportedTools';
import getHandlesFromPoints from './utils/getHandlesFromPoints';
import getPointsFromHandles from './utils/getPointsFromHandles';
import getSOPInstanceAttributes from './utils/getSOPInstanceAttributes';
const Length = {
toAnnotation: (measurement, definition) => {
const {
id,
label,
description,
points,
unit,
SOPInstanceUID,
FrameOfReferenceUID,
referenceSeriesUID,
} = measurement;
return {
toolName: definition,
measurementData: {
sopInstanceUid: SOPInstanceUID,
frameOfReferenceUID: FrameOfReferenceUID,
SeriesInstanceUID: referenceSeriesUID,
unit,
text: label,
description,
handles: getHandlesFromPoints(points),
_measurementServiceId: id,
},
};
},
/**
* Maps cornerstone annotation event data to measurement service format.
*
* @param {Object} cornerstone Cornerstone event data
* @return {Measurement} Measurement instance
*/
toMeasurement: (csToolsAnnotation, getValueTypeFromToolType) => {
const { element, measurementData } = csToolsAnnotation;
const tool =
csToolsAnnotation.toolType ||
csToolsAnnotation.toolName ||
measurementData.toolType;
const validToolType = toolName => SUPPORTED_TOOLS.includes(toolName);
if (!validToolType(tool)) {
throw new Error('Tool not supported');
}
const {
SOPInstanceUID,
FrameOfReferenceUID,
SeriesInstanceUID,
StudyInstanceUID,
} = getSOPInstanceAttributes(element);
const points = [];
points.push(measurementData.handles);
return {
id: measurementData._measurementServiceId,
SOPInstanceUID: SOPInstanceUID,
FrameOfReferenceUID,
referenceSeriesUID: SeriesInstanceUID,
referenceStudyUID: StudyInstanceUID,
label: measurementData.text,
description: measurementData.description,
unit: measurementData.unit,
length: measurementData.length,
type: getValueTypeFromToolType(tool),
points: getPointsFromHandles(measurementData.handles),
};
},
};
export default Length;
extensions/cornerstone/src/utils/measurementServiceMappings/constants/supportedTools.js
+1
View File
@@ -0,0 +1 @@
export default ['Length', 'EllipticalRoi', 'Bidirectional', 'ArrowAnnotate'];
extensions/cornerstone/src/utils/measurementServiceMappings/measurementServiceMappingsFactory.js
+72 -118
View File
@@ -1,11 +1,7 @@
import cornerstone from 'cornerstone-core';
const SUPPORTED_TOOLS = [
'Length',
'EllipticalRoi',
'RectangleRoi',
'ArrowAnnotate',
];
import Length from './Length';
import Bidirectional from './Bidirectional';
import ArrowAnnotate from './ArrowAnnotate';
import EllipticalRoi from './EllipticalRoi';
const measurementServiceMappingsFactory = measurementService => {
/**
@@ -15,129 +11,87 @@ const measurementServiceMappingsFactory = measurementService => {
* @param {string} definition The source definition
* @return {Object} Cornerstone annotation data
*/
const toAnnotation = (measurement, definition) => {
const {
id,
label,
description,
points,
unit,
SOPInstanceUID,
FrameOfReferenceUID,
referenceSeriesUID,
} = measurement;
return {
toolName: definition,
measurementData: {
sopInstanceUid: SOPInstanceUID,
frameOfReferenceUID: FrameOfReferenceUID,
SeriesInstanceUID: referenceSeriesUID,
unit,
text: label,
description,
handles: _getHandlesFromPoints(points),
_measurementServiceId: id,
},
};
};
/**
* Maps cornerstone annotation event data to measurement service format.
*
* @param {Object} cornerstone Cornerstone event data
* @return {Measurement} Measurement instance
*/
const toMeasurement = csToolsAnnotation => {
const { element, measurementData } = csToolsAnnotation;
const tool =
csToolsAnnotation.toolType ||
csToolsAnnotation.toolName ||
measurementData.toolType;
const validToolType = toolName => SUPPORTED_TOOLS.includes(toolName);
if (!validToolType(tool)) {
throw new Error('Tool not supported');
}
const {
SOPInstanceUID,
FrameOfReferenceUID,
SeriesInstanceUID,
StudyInstanceUID,
} = _getAttributes(element);
const points = [];
points.push(measurementData.handles);
return {
id: measurementData._measurementServiceId,
SOPInstanceUID: SOPInstanceUID,
FrameOfReferenceUID,
referenceSeriesUID: SeriesInstanceUID,
referenceStudyUID: StudyInstanceUID,
label: measurementData.text,
description: measurementData.description,
unit: measurementData.unit,
area:
measurementData.cachedStats &&
measurementData.cachedStats
.area /* TODO: Add concept names instead (descriptor) */,
type: _getValueTypeFromToolType(tool),
points: _getPointsFromHandles(measurementData.handles),
};
};
const _getAttributes = element => {
const enabledElement = cornerstone.getEnabledElement(element);
const imageId = enabledElement.image.imageId;
const instance = cornerstone.metaData.get('instance', imageId);
return {
SOPInstanceUID: instance.SOPInstanceUID,
FrameOfReferenceUID: instance.FrameOfReferenceUID,
SeriesInstanceUID: instance.SeriesInstanceUID,
StudyInstanceUID: instance.StudyInstanceUID,
};
};
const _getValueTypeFromToolType = toolType => {
const { POLYLINE, ELLIPSE, POINT } = measurementService.VALUE_TYPES;
const {
POLYLINE,
ELLIPSE,
POINT,
BIDIRECTIONAL,
} = measurementService.VALUE_TYPES;
/* TODO: Relocate static value types */
// TODO -> I get why this was attemped, but its not nearly flexible enough.
// A single measurement may have an ellipse + a bidirectional measurement, for instances.
// You can't define a bidirectional tool as a single type..
const TOOL_TYPE_TO_VALUE_TYPE = {
Length: POLYLINE,
EllipticalRoi: ELLIPSE,
RectangleRoi: POLYLINE,
Bidirectional: BIDIRECTIONAL,
ArrowAnnotate: POINT,
};
return TOOL_TYPE_TO_VALUE_TYPE[toolType];
};
const _getPointsFromHandles = handles => {
let points = [];
Object.keys(handles).map(handle => {
if (['start', 'end'].includes(handle)) {
let point = {};
if (handles[handle].x) point.x = handles[handle].x;
if (handles[handle].y) point.y = handles[handle].y;
points.push(point);
}
});
return points;
};
const _getHandlesFromPoints = points => {
return points
.map((p, i) => (i % 10 === 0 ? { start: p } : { end: p }))
.reduce((obj, item) => Object.assign(obj, { ...item }), {});
};
return {
toAnnotation,
toMeasurement,
Length: {
toAnnotation: Length.toAnnotation,
toMeasurement: csToolsAnnotation =>
Length.toMeasurement(csToolsAnnotation, _getValueTypeFromToolType),
matchingCriteria: [
{
valueType: measurementService.VALUE_TYPES.POLYLINE,
points: 2,
},
],
},
Bidirectional: {
toAnnotation: Bidirectional.toAnnotation,
toMeasurement: csToolsAnnotation =>
Bidirectional.toMeasurement(
csToolsAnnotation,
_getValueTypeFromToolType
),
matchingCriteria: [
// TODO -> We should eventually do something like shortAxis + longAxis,
// But its still a little unclear how these automatic interpretations will work.
{
valueType: measurementService.VALUE_TYPES.POLYLINE,
points: 2,
},
{
valueType: measurementService.VALUE_TYPES.POLYLINE,
points: 2,
},
],
},
ArrowAnnotate: {
toAnnotation: ArrowAnnotate.toAnnotation,
toMeasurement: csToolsAnnotation =>
ArrowAnnotate.toMeasurement(
csToolsAnnotation,
_getValueTypeFromToolType
),
matchingCriteria: [
{
valueType: measurementService.VALUE_TYPES.POINT,
points: 1,
},
],
},
EllipticalRoi: {
toAnnotation: EllipticalRoi.toAnnotation,
toMeasurement: csToolsAnnotation =>
EllipticalRoi.toMeasurement(
csToolsAnnotation,
_getValueTypeFromToolType
),
matchingCriteria: [
{
valueType: measurementService.VALUE_TYPES.ELLIPSE,
},
],
},
};
};
extensions/cornerstone/src/utils/measurementServiceMappings/utils/getHandlesFromPoints.js
+5
View File
@@ -0,0 +1,5 @@
export default function getHandlesFromPoints(points) {
return points
.map((p, i) => (i % 10 === 0 ? { start: p } : { end: p }))
.reduce((obj, item) => Object.assign(obj, { ...item }), {});
}
extensions/cornerstone/src/utils/measurementServiceMappings/utils/getPointsFromHandles.js
+12
View File
@@ -0,0 +1,12 @@
export default function getPointsFromHandles(handles) {
let points = [];
Object.keys(handles).map(handle => {
if (['start', 'end'].includes(handle)) {
let point = {};
if (handles[handle].x) point.x = handles[handle].x;
if (handles[handle].y) point.y = handles[handle].y;
points.push(point);
}
});
return points;
}
extensions/cornerstone/src/utils/measurementServiceMappings/utils/getSOPInstanceAttributes.js
+14
View File
@@ -0,0 +1,14 @@
import cornerstone from 'cornerstone-core';
export default function getSOPInstanceAttributes(element) {
const enabledElement = cornerstone.getEnabledElement(element);
const imageId = enabledElement.image.imageId;
const instance = cornerstone.metaData.get('instance', imageId);
return {
SOPInstanceUID: instance.SOPInstanceUID,
FrameOfReferenceUID: instance.FrameOfReferenceUID,
SeriesInstanceUID: instance.SeriesInstanceUID,
StudyInstanceUID: instance.StudyInstanceUID,
};
}
extensions/default/package.json
+1 -1
View File
@@ -34,7 +34,7 @@
"react": "^16.13.1",
"react-dom": "^16.13.1",
"webpack": "^4.0.0",
"dcmjs": "^0.12.4"
"dcmjs": "0.14.0"
},
"dependencies": {
"@babel/runtime": "7.7.6"
extensions/default/src/DicomWebDataSource/index.js
+34 -1
View File
@@ -12,9 +12,16 @@ import getImageId from './utils/getImageId';
import * as dcmjs from 'dcmjs';
import { retrieveStudyMetadata } from './retrieveStudyMetadata.js';
const { naturalizeDataset } = dcmjs.data.DicomMetaDictionary;
const { DicomMetaDictionary, DicomDict } = dcmjs.data;
const { naturalizeDataset, denaturalizeDataset } = DicomMetaDictionary;
const { urlUtil } = utils;
const ImplementationClassUID =
'2.25.270695996825855179949881587723571202391.2.0.0';
const ImplementationVersionName = 'OHIF-VIEWER-2.0.0';
const EXPLICIT_VR_LITTLE_ENDIAN = '1.2.840.10008.1.2.1';
/**
*
* @param {string} name - Data source name
@@ -128,6 +135,32 @@ function createDicomWebApi(dicomWebConfig) {
},
},
},
store: {
dicom: async dataset => {
const meta = {
FileMetaInformationVersion:
dataset._meta.FileMetaInformationVersion.Value,
MediaStorageSOPClassUID: dataset.SOPClassUID,
MediaStorageSOPInstanceUID: dataset.SOPInstanceUID,
TransferSyntaxUID: EXPLICIT_VR_LITTLE_ENDIAN,
ImplementationClassUID,
ImplementationVersionName,
};
const denaturalized = denaturalizeDataset(meta);
const dicomDict = new DicomDict(denaturalized);
dicomDict.dict = denaturalizeDataset(dataset);
const part10Buffer = dicomDict.write();
const options = {
datasets: [part10Buffer],
};
await wadoDicomWebClient.storeInstances(options);
},
},
retrieveSeriesMetadata: async ({ StudyInstanceUID } = {}) => {
if (!StudyInstanceUID) {
throw new Error(
extensions/default/src/DicomWebDataSource/qido.js
+2 -2
View File
@@ -22,7 +22,7 @@
* | limit | {number} |
* | offset | {number} |
*/
import { DICOMWeb } from '@ohif/core';
import { DICOMWeb, utils } from '@ohif/core';
const { getString, getName, getModalities } = DICOMWeb;
@@ -50,7 +50,7 @@ function processResults(qidoStudies) {
time: getString(qidoStudy['00080030']), // HHmmss.SSS (24-hour, minutes, seconds, fractional seconds)
accession: getString(qidoStudy['00080050']) || '', // short string, probably a number?
mrn: getString(qidoStudy['00100020']) || '', // medicalRecordNumber
patientName: getName(qidoStudy['00100010']) || '',
patientName: utils.formatPN(getName(qidoStudy['00100010'])) || '',
instances: Number(getString(qidoStudy['00201208'])) || 0, // number
description: getString(qidoStudy['00081030']) || '',
modalities:
extensions/default/src/Panels/PanelStudyBrowser.jsx
+5 -6
View File
@@ -127,7 +127,6 @@ function PanelStudyBrowser({
changedDisplaySets,
thumbnailImageSrcMap
);
setDisplaySets(mappedDisplaySets);
}
);
@@ -152,11 +151,11 @@ function PanelStudyBrowser({
);
const updatedExpandedStudyInstanceUIDs = shouldCollapseStudy
? // eslint-disable-next-line prettier/prettier
[
...expandedStudyInstanceUIDs.filter(
stdyUid => stdyUid !== StudyInstanceUID
),
]
[
...expandedStudyInstanceUIDs.filter(
stdyUid => stdyUid !== StudyInstanceUID
),
]
: [...expandedStudyInstanceUIDs, StudyInstanceUID];
setExpandedStudyInstanceUIDs(updatedExpandedStudyInstanceUIDs);
extensions/default/src/Panels/WrappedPanelStudyBrowser.jsx
+1 -1
View File
@@ -20,7 +20,7 @@ function WrappedPanelStudyBrowser({
}) {
// TODO: This should be made available a different way; route should have
// already determined our datasource
const dataSource = extensionManager.getDataSources('dicomweb')[0];
const dataSource = extensionManager.getDataSources()[0];
const _getStudiesForPatientByStudyInstanceUID = getStudiesForPatientByStudyInstanceUID.bind(
null,
dataSource
extensions/default/src/Toolbar/ToolbarLayoutSelector.jsx
+24 -8
View File
@@ -5,22 +5,40 @@ import {
useViewportGrid,
} from '@ohif/ui';
const DEFAULT_LAYOUT = {
type: 'SET_LAYOUT',
payload: {
numCols: 1,
numRows: 1,
},
};
function LayoutSelector() {
const [isOpen, setIsOpen] = useState(false);
const [viewportGridState, dispatch] = useViewportGrid();
useEffect(() => {
function closeOnOutsideClick() {
if (isOpen) {
setIsOpen(false);
}
const closeOnOutsideClick = () => {
if (isOpen) {
setIsOpen(false);
}
};
useEffect(() => {
window.addEventListener('click', closeOnOutsideClick);
return () => {
window.removeEventListener('click', closeOnOutsideClick);
};
}, [isOpen]);
useEffect(() => {
/* Reset to default layout when component unmounts */
return () => {
dispatch(DEFAULT_LAYOUT);
};
}, []);
const onClickHandler = () => setIsOpen(!isOpen);
const DropdownContent = isOpen ? OHIFLayoutSelector : null;
return (
@@ -28,9 +46,7 @@ function LayoutSelector() {
id="Layout"
label="Grid Layout"
icon="tool-layout"
onClick={() => {
setIsOpen(!isOpen);
}}
onClick={onClickHandler}
dropdownContent={
DropdownContent !== null && (
<DropdownContent
extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx
+22 -16
View File
@@ -2,33 +2,32 @@ import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { ToolbarButton } from '@ohif/ui';
function NestedMenu({ children }) {
function NestedMenu({ children, label, icon, isActive }) {
const [isOpen, setIsOpen] = useState(false);
useEffect(() => {
function closeNestedMenu() {
if (isOpen) {
setIsOpen(false);
}
const toggleNestedMenu = () => setIsOpen(!isOpen);
const closeNestedMenu = () => {
if (isOpen) {
setIsOpen(false);
}
};
useEffect(() => {
window.addEventListener('click', closeNestedMenu);
return () => {
window.removeEventListener('click', closeNestedMenu);
};
}, [isOpen]);
const dropdownContent = isOpen ? children : undefined;
return (
<ToolbarButton
id="More"
label="More"
icon="tool-more-menu"
onClick={() => {
setIsOpen(!isOpen);
}}
dropdownContent={dropdownContent}
isActive={isOpen}
id="NestedMenu"
label={label}
icon={icon}
onClick={toggleNestedMenu}
dropdownContent={isOpen && children}
isActive={isActive || isOpen}
type="primary"
/>
);
@@ -36,6 +35,13 @@ function NestedMenu({ children }) {
NestedMenu.propTypes = {
children: PropTypes.any.isRequired,
icon: PropTypes.string,
label: PropTypes.string,
};
NestedMenu.defaultProps = {
icon: "tool-more-menu",
label: "More",
};
export default NestedMenu;
extensions/default/src/ViewerLayout/index.jsx
+16 -4
View File
@@ -55,7 +55,20 @@ function ViewerLayout({
};
};
const defaultTool = { icon: 'tool-more-menu', label: 'More', isActive: false };
const [toolbars, setToolbars] = useState({ primary: [], secondary: [] });
const [activeTool, setActiveTool] = useState(defaultTool);
const setActiveToolHandler = (tool, isNested) => {
setActiveTool(isNested ? tool : defaultTool);
};
const onPrimaryClickHandler = (evt, btn) => {
if (btn.props && btn.props.commands && evt.value && btn.props.commands[evt.value]) {
const { commandName, commandOptions } = btn.props.commands[evt.value];
commandsManager.runCommand(commandName, commandOptions);
}
};
useEffect(() => {
const { unsubscribe } = ToolBarService.subscribe(
@@ -63,8 +76,8 @@ function ViewerLayout({
() => {
console.warn('~~~ TOOL BAR MODIFIED EVENT CAUGHT');
const updatedToolbars = {
primary: ToolBarService.getButtonSection('primary'),
secondary: ToolBarService.getButtonSection('secondary'),
primary: ToolBarService.getButtonSection('primary', { onClick: onPrimaryClickHandler, setActiveTool: setActiveToolHandler }),
secondary: ToolBarService.getButtonSection('secondary', { setActiveTool: setActiveToolHandler }),
};
setToolbars(updatedToolbars);
}
@@ -86,11 +99,10 @@ function ViewerLayout({
if (!isNested) {
const { id, Component, componentProps } = toolDef;
return <Component key={id} id={id} {...componentProps} />;
} else {
return (
<NestedMenu>
<NestedMenu isActive={activeTool.isActive} icon={activeTool.icon} label={activeTool.label}>
<div className="flex">
{toolDef.map(x => {
const { id, Component, componentProps } = x;
extensions/default/src/getToolbarModule.js
+7 -3
View File
@@ -9,7 +9,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
{
name: 'ohif.divider',
defaultComponent: ToolbarDivider,
clickHandler: () => {},
clickHandler: () => { },
},
{
name: 'ohif.action',
@@ -30,7 +30,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
optionalConfig: [],
requiredProps: [],
optionalProps: [],
clickHandler: (evt, clickedBtn, btnSectionName) => {
clickHandler: (evt, clickedBtn, btnSectionName, metadata, viewerProps) => {
const { props } = clickedBtn;
const allButtons = toolbarService.getButtons();
@@ -47,6 +47,10 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
clickedBtn.config.groupName === btn.config.groupName
) {
btn.props.isActive = false;
if (viewerProps.setActiveTool) {
viewerProps.setActiveTool(props, metadata.isNested);
}
}
});
@@ -63,7 +67,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
{
name: 'ohif.layoutSelector',
defaultComponent: ToolbarLayoutSelector,
clickHandler: (evt, clickedBtn, btnSectionName) => {},
clickHandler: (evt, clickedBtn, btnSectionName) => { },
},
{
name: 'ohif.toggle',
extensions/dicom-html/package.json
+1 -1
View File
@@ -28,7 +28,7 @@
},
"peerDependencies": {
"@ohif/core": "^0.50.0",
"dcmjs": "^0.12.3",
"dcmjs": "0.14.0",
"prop-types": "^15.6.2",
"react": "^16.11.0",
"react-dom": "^16.11.0"
extensions/dicom-rt/package.json
+2 -2
View File
@@ -30,8 +30,8 @@
"peerDependencies": {
"@ohif/core": "^0.50.0",
"cornerstone-core": "^2.2.8",
"cornerstone-tools": "4.15.1",
"dcmjs": "^0.12.3",
"cornerstone-tools": "4.16.0",
"dcmjs": "0.14.0",
"prop-types": "^15.6.2",
"react": "^16.8.6",
"react-dom": "^16.8.6"
extensions/dicom-segmentation/package.json
+1 -1
View File
@@ -31,7 +31,7 @@
"@ohif/core": "^0.50.0",
"cornerstone-core": "^2.2.8",
"cornerstone-tools": "4.15.1",
"dcmjs": "^0.12.2",
"dcmjs": "0.14.0",
"prop-types": "^15.6.2",
"react": "^16.8.6",
"react-dom": "^16.8.6"
extensions/dicom-sr/package.json
+2 -2
View File
@@ -33,8 +33,8 @@
"@ohif/ui": "^0.50.0",
"cornerstone-core": "^2.3.0",
"cornerstone-math": "^0.1.8",
"cornerstone-tools": "4.15.1",
"dcmjs": "^0.12.3",
"cornerstone-tools": "4.16.0",
"dcmjs": "0.14.0",
"cornerstone-wado-image-loader": "^3.1.2",
"dicom-parser": "^1.8.3",
"hammerjs": "^2.0.8",
extensions/dicom-sr/src/OHIFCornerstoneSRViewport.js
+5 -6
View File
@@ -203,9 +203,11 @@ function OHIFCornerstoneSRViewport({
PatientSex,
PatientAge,
SliceThickness,
ManufacturerModelName,
StudyDate,
SeriesDescription,
SeriesInstanceUID,
PixelSpacing,
SeriesNumber,
} = activeDisplaySetData;
@@ -233,13 +235,10 @@ function OHIFCornerstoneSRViewport({
updateViewport(newMeasurementSelected);
};
console.log(currentImageIdIndex);
return (
<>
<ViewportActionBar
onSeriesChange={onMeasurementChange}
showPatientInfo={viewportIndex === activeViewportIndex}
showNavArrows={viewportIndex === activeViewportIndex}
studyData={{
label: _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid],
@@ -250,13 +249,13 @@ function OHIFCornerstoneSRViewport({
seriesDescription: SeriesDescription,
modality: Modality,
patientInformation: {
patientName: PatientName ? PatientName.Alphabetic || '' : '',
patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
patientSex: PatientSex || '',
patientAge: PatientAge || '',
MRN: PatientID || '',
thickness: `${SliceThickness}mm`,
spacing: '',
scanner: '',
spacing: PixelSpacing && PixelSpacing.length ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(2)}mm` : '',
scanner: ManufacturerModelName || '',
},
}}
/>
extensions/measurement-tracking/package.json
+3 -2
View File
@@ -28,11 +28,12 @@
},
"peerDependencies": {
"@ohif/core": "^0.50.0",
"dcmjs": "^0.12.4",
"dcmjs": "0.14.0",
"prop-types": "^15.6.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"webpack": "^4.0.0"
"webpack": "^4.0.0",
"cornerstone-tools": "4.15.1"
},
"dependencies": {
"@babel/runtime": "7.7.6",
extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/ActionButtons.jsx
+13 -3
View File
@@ -2,10 +2,10 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Button, ButtonGroup, Icon, IconButton } from '@ohif/ui';
function ActionButtons() {
function ActionButtons({ onExportClick, onCreateReportClick }) {
return (
<React.Fragment>
<ButtonGroup onClick={() => alert('Export')}>
<ButtonGroup onClick={onExportClick}>
<Button
className="px-2 py-2 text-base text-white bg-black border-primary-main"
size="initial"
@@ -26,7 +26,7 @@ function ActionButtons() {
variant="outlined"
size="initial"
color="inherit"
onClick={() => alert('Create Report')}
onClick={onCreateReportClick}
>
Create Report
</Button>
@@ -34,4 +34,14 @@ function ActionButtons() {
);
}
ActionButtons.propTypes = {
onExportClick: PropTypes.func,
onCreateReportClick: PropTypes.func,
};
ActionButtons.defaultProps = {
onExportClick: () => alert('Export'),
onCreateReportClick: () => alert('Create Report'),
};
export default ActionButtons;
extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.js
+87 -18
View File
@@ -1,10 +1,13 @@
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { StudySummary, MeasurementTable } from '@ohif/ui';
import { DicomMetadataStore } from '@ohif/core';
import { DicomMetadataStore, DICOMSR } from '@ohif/core';
import { useDebounce } from '@hooks';
import ActionButtons from './ActionButtons';
import { useTrackedMeasurements } from '../../getContextModule';
import cornerstoneTools from 'cornerstone-tools';
import cornerstone from 'cornerstone-core';
import dcmjs from 'dcmjs';
const DISPLAY_STUDY_SUMMARY_INITIAL_VALUE = {
key: undefined, //
@@ -13,7 +16,7 @@ const DISPLAY_STUDY_SUMMARY_INITIAL_VALUE = {
description: undefined, // 'CHEST/ABD/PELVIS W CONTRAST',
};
function PanelMeasurementTableTracking({ servicesManager, commandsManager }) {
function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
const [measurementChangeTimestamp, setMeasurementsUpdated] = useState(
Date.now().toString()
);
@@ -42,7 +45,7 @@ function PanelMeasurementTableTracking({ servicesManager, commandsManager }) {
trackedSeries.includes(m.referenceSeriesUID)
);
const mappedMeasurements = filteredMeasurements.map((m, index) =>
_mapMeasurementToDisplay(m, index)
_mapMeasurementToDisplay(m, index, MeasurementService.VALUE_TYPES)
);
setDisplayMeasurements(mappedMeasurements);
// eslint-ignore-next-line
@@ -102,6 +105,35 @@ function PanelMeasurementTableTracking({ servicesManager, commandsManager }) {
const activeMeasurementItem = 0;
const onExportClick = () => {
const measurements = MeasurementService.getMeasurements();
const trackedMeasurements = measurements.filter(
m =>
trackedStudy === m.referenceStudyUID &&
trackedSeries.includes(m.referenceSeriesUID)
);
// TODO -> local download.
DICOMSR.downloadReport(trackedMeasurements, dataSource);
};
const onCreateReportClick = () => {
const measurements = MeasurementService.getMeasurements();
const trackedMeasurements = measurements.filter(
m =>
trackedStudy === m.referenceStudyUID &&
trackedSeries.includes(m.referenceSeriesUID)
);
const dataSources = extensionManager.getDataSources();
// TODO -> Eventually deal with multiple dataSources.
// Would need some way of saying which one is the "push" dataSource
const dataSource = dataSources[0];
DICOMSR.storeMeasurements(trackedMeasurements, dataSource);
};
return (
<>
<div className="overflow-x-hidden overflow-y-auto invisible-scrollbar">
@@ -121,7 +153,10 @@ function PanelMeasurementTableTracking({ servicesManager, commandsManager }) {
/>
</div>
<div className="flex justify-center p-4">
<ActionButtons />
<ActionButtons
onExportClick={onExportClick}
onCreateReportClick={onCreateReportClick}
/>
</div>
</>
);
@@ -130,7 +165,7 @@ function PanelMeasurementTableTracking({ servicesManager, commandsManager }) {
PanelMeasurementTableTracking.propTypes = {};
// TODO: This could be a MeasurementService mapper
function _mapMeasurementToDisplay(measurement, index) {
function _mapMeasurementToDisplay(measurement, index, types) {
const {
id,
label,
@@ -153,12 +188,14 @@ function _mapMeasurementToDisplay(measurement, index) {
return {
id: index + 1,
label: '(empty)', // 'Label short description',
displayText: _getDisplayText(
measurement.points,
PixelSpacing,
SeriesNumber,
InstanceNumber
),
displayText:
_getDisplayText(
measurement,
PixelSpacing,
SeriesNumber,
InstanceNumber,
types
) || [],
// TODO: handle one layer down
isActive: false, // activeMeasurementItem === i + 1,
};
@@ -169,7 +206,13 @@ function _mapMeasurementToDisplay(measurement, index) {
* @param {*} points
* @param {*} pixelSpacing
*/
function _getDisplayText(points, pixelSpacing, seriesNumber, instanceNumber) {
function _getDisplayText(
measurement,
pixelSpacing,
seriesNumber,
instanceNumber,
types
) {
// TODO: determination of shape influences text
// Length: 'xx.x unit (S:x, I:x)'
// Rectangle: 'xx.x x xx.x unit (S:x, I:x)',
@@ -177,6 +220,8 @@ function _getDisplayText(points, pixelSpacing, seriesNumber, instanceNumber) {
// Bidirectional?
// Freehand?
const { type, points } = measurement;
const hasPixelSpacing =
pixelSpacing !== undefined &&
Array.isArray(pixelSpacing) &&
@@ -186,13 +231,37 @@ function _getDisplayText(points, pixelSpacing, seriesNumber, instanceNumber) {
: [1, 1];
const unit = hasPixelSpacing ? 'mm' : 'px';
const { x: x1, y: y1 } = points[0];
const { x: x2, y: y2 } = points[1];
const dx = (x2 - x1) * colPixelSpacing;
const dy = (y2 - y1) * rowPixelSpacing;
const length = _round(Math.sqrt(dx * dx + dy * dy), 1);
switch (type) {
case types.POLYLINE:
const { length } = measurement;
return `${length} ${unit} (S:${seriesNumber}, I:${instanceNumber})`;
const roundedLength = _round(length, 1);
return [
`${roundedLength} ${unit} (S:${seriesNumber}, I:${instanceNumber})`,
];
case types.BIDIRECTIONAL:
const { shortestDiameter, longestDiameter } = measurement;
const roundedShortestDiameter = _round(shortestDiameter, 1);
const roundedLongestDiameter = _round(longestDiameter, 1);
return [
`l: ${roundedLongestDiameter} ${unit} (S:${seriesNumber}, I:${instanceNumber})`,
`s: ${roundedShortestDiameter} ${unit}`,
];
case types.ELLIPSE:
const { area } = measurement;
const roundedArea = _round(area, 1);
return [
`${roundedArea} ${unit}2 (S:${seriesNumber}, I:${instanceNumber})`,
];
case types.POINT:
const { text } = measurement;
return [`${text} (S:${seriesNumber}, I:${instanceNumber})`];
}
}
function _round(value, decimals) {
extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx
+4 -5
View File
@@ -201,10 +201,10 @@ function PanelStudyBrowserTracking({
);
const updatedExpandedStudyInstanceUIDs = shouldCollapseStudy
? [
...expandedStudyInstanceUIDs.filter(
stdyUid => stdyUid !== StudyInstanceUID
),
]
...expandedStudyInstanceUIDs.filter(
stdyUid => stdyUid !== StudyInstanceUID
),
]
: [...expandedStudyInstanceUIDs, StudyInstanceUID];
setExpandedStudyInstanceUIDs(updatedExpandedStudyInstanceUIDs);
@@ -285,7 +285,6 @@ function _mapDisplaySets(
) {
const thumbnailDisplaySets = [];
const thumbnailNoImageDisplaySets = [];
displaySets.forEach(ds => {
const imageSrc = thumbnailImageSrcMap[ds.displaySetInstanceUID];
const componentType = _getComponentType(ds.Modality);
extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js
+97 -7
View File
@@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import cornerstone from 'cornerstone-core';
import cornerstoneTools from 'cornerstone-tools';
import CornerstoneViewport from 'react-cornerstone-viewport';
import OHIF, { DicomMetadataStore } from '@ohif/core';
import {
@@ -9,10 +10,20 @@ import {
useViewportGrid,
useViewportDialog,
} from '@ohif/ui';
import debounce from 'lodash.debounce';
import throttle from 'lodash.throttle';
import { useTrackedMeasurements } from './../getContextModule';
// TODO -> Get this list from the list of tracked measurements.
const {
ArrowAnnotateTool,
BidirectionalTool,
EllipticalRoiTool,
LengthTool,
} = cornerstoneTools;
const BaseAnnotationTool = cornerstoneTools.importInternal(
'base/BaseAnnotationTool'
);
// const cine = viewportSpecificData.cine;
// isPlaying = cine.isPlaying === true;
@@ -27,13 +38,15 @@ function TrackedCornerstoneViewport({
viewportIndex,
}) {
const [trackedMeasurements] = useTrackedMeasurements();
const [
{ activeViewportIndex, viewports },
dispatchViewportGrid,
] = useViewportGrid();
// viewportIndex, onSubmit
const [viewportDialogState, viewportDialogApi] = useViewportDialog();
const [viewportData, setViewportData] = useState(null);
const [element, setElement] = useState(null);
const [isTracked, setIsTracked] = useState(false);
// TODO: Still needed? Better way than import `OHIF` and destructure?
// Why is this managed by `core`?
useEffect(() => {
@@ -42,6 +55,75 @@ function TrackedCornerstoneViewport({
};
}, []);
useEffect(() => {
if (!element) {
return;
}
const allTools = cornerstoneTools.store.state.tools;
const toolsForElement = allTools.filter(tool => tool.element === element);
toolsForElement.forEach(tool => {
if (
tool instanceof ArrowAnnotateTool ||
tool instanceof BidirectionalTool ||
tool instanceof EllipticalRoiTool ||
tool instanceof LengthTool
) {
const configuration = tool.configuration;
configuration.renderDashed = !isTracked;
tool.configuration = configuration;
}
});
const enabledElement = cornerstone.getEnabledElement(element);
if (enabledElement.image) {
cornerstone.updateImage(element);
}
}, [isTracked]);
const onElementEnabled = evt => {
const eventData = evt.detail;
const targetElement = eventData.element;
const allTools = cornerstoneTools.store.state.tools;
const toolsForElement = allTools.filter(
tool => tool.element === targetElement
);
toolsForElement.forEach(tool => {
if (
tool instanceof ArrowAnnotateTool ||
tool instanceof BidirectionalTool ||
tool instanceof EllipticalRoiTool ||
tool instanceof LengthTool
) {
const configuration = tool.configuration;
configuration.renderDashed = !isTracked;
tool.configuration = configuration;
} else if (tool instanceof BaseAnnotationTool) {
const configuration = tool.configuration;
configuration.renderDashed = true;
tool.configuration = configuration;
}
});
const enabledElement = cornerstone.getEnabledElement(targetElement);
if (enabledElement.image) {
cornerstone.updateImage(targetElement);
}
setElement(targetElement);
};
useEffect(() => {
const {
StudyInstanceUID,
@@ -116,6 +198,7 @@ function TrackedCornerstoneViewport({
vp => vp.displaySetInstanceUID === displaySet.displaySetInstanceUID
);
const { trackedSeries } = trackedMeasurements.context;
const {
Modality,
SeriesDate,
@@ -123,19 +206,25 @@ function TrackedCornerstoneViewport({
SeriesInstanceUID,
SeriesNumber,
} = displaySet;
const {
PatientID,
PatientName,
PatientSex,
PatientAge,
SliceThickness,
PixelSpacing,
ManufacturerModelName
} = displaySet.images[0];
if (trackedSeries.includes(SeriesInstanceUID) !== isTracked) {
setIsTracked(!isTracked);
}
return (
<>
<ViewportActionBar
onSeriesChange={direction => alert(`Series ${direction}`)}
showPatientInfo={viewportIndex === activeViewportIndex}
showNavArrows={viewportIndex === activeViewportIndex}
studyData={{
label: _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid],
@@ -146,19 +235,20 @@ function TrackedCornerstoneViewport({
seriesDescription: SeriesDescription,
modality: Modality,
patientInformation: {
patientName: PatientName ? PatientName.Alphabetic || '' : '',
patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
patientSex: PatientSex || '',
patientAge: PatientAge || '',
MRN: PatientID || '',
thickness: `${SliceThickness}mm`,
spacing: '',
scanner: '',
spacing: PixelSpacing && PixelSpacing.length ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(2)}mm` : '',
scanner: ManufacturerModelName || '',
},
}}
/>
{/* TODO: Viewport interface to accept stack or layers of content like this? */}
<div className="relative flex flex-row w-full h-full">
<CornerstoneViewport
onElementEnabled={onElementEnabled}
viewportIndex={viewportIndex}
imageIds={imageIds}
imageIdIndex={currentImageIdIndex}
extensions/vtk/package.json
+2 -2
View File
@@ -33,7 +33,7 @@
"@ohif/ui": "^2.0.0",
"cornerstone-core": "^2.3.0",
"cornerstone-wado-image-loader": "^3.1.2",
"dcmjs": "0.12.2",
"dcmjs": "0.14.0",
"dicom-parser": "^1.8.3",
"i18next": "^17.0.3",
"i18next-browser-languagedetector": "^3.0.1",
@@ -55,7 +55,7 @@
},
"devDependencies": {
"@ohif/core": "^2.9.6",
"cornerstone-tools": "4.15.1",
"cornerstone-tools": "4.16.0",
"@ohif/ui": "^2.0.0",
"cornerstone-core": "^2.3.0",
"cornerstone-wado-image-loader": "^3.1.2",