othmane/ohif-viewer
1
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 2020-06-26 12:42:56 -03:00
commit 0d53346d61
73 changed files with 1423 additions and 369 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Dockerfile
View File

@ -21,7 +21,7 @@
# Stage 1: Build the application
# docker build -t ohif/viewer:latest .
FROM node:10.16.3-slim as builder
FROM node:14.3.0-slim as builder
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
@ -30,6 +30,7 @@ WORKDIR /usr/src/app
COPY .docker /usr/src/app/.docker
COPY .webpack /usr/src/app/.webpack
COPY extensions /usr/src/app/extensions
COPY modes /usr/src/app/modes
COPY platform /usr/src/app/platform
COPY .browserslistrc /usr/src/app/.browserslistrc
COPY aliases.config.js /usr/src/app/aliases.config.js

4
extensions/cornerstone/package.json
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",

47
extensions/cornerstone/src/init.js
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;

48
extensions/cornerstone/src/utils/measurementServiceMappings/ArrowAnnotate.js Normal file
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;

50
extensions/cornerstone/src/utils/measurementServiceMappings/Bidirectional.js Normal file
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;

74
extensions/cornerstone/src/utils/measurementServiceMappings/EllipticalRoi.js Normal file
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;

79
extensions/cornerstone/src/utils/measurementServiceMappings/Length.js Normal file
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;

1
extensions/cornerstone/src/utils/measurementServiceMappings/constants/supportedTools.js Normal file
View File

@ -0,0 +1 @@
export default ['Length', 'EllipticalRoi', 'Bidirectional', 'ArrowAnnotate'];

190
extensions/cornerstone/src/utils/measurementServiceMappings/measurementServiceMappingsFactory.js
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,
},
],
},
};
};

5
extensions/cornerstone/src/utils/measurementServiceMappings/utils/getHandlesFromPoints.js Normal file
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 }), {});
}

12
extensions/cornerstone/src/utils/measurementServiceMappings/utils/getPointsFromHandles.js Normal file
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;
}

14
extensions/cornerstone/src/utils/measurementServiceMappings/utils/getSOPInstanceAttributes.js Normal file
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,
};
}

2
extensions/default/package.json
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"

35
extensions/default/src/DicomWebDataSource/index.js
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(

4
extensions/default/src/DicomWebDataSource/qido.js
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:

11
extensions/default/src/Panels/PanelStudyBrowser.jsx
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);

2
extensions/default/src/Panels/WrappedPanelStudyBrowser.jsx
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

32
extensions/default/src/Toolbar/ToolbarLayoutSelector.jsx
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

38
extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx
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;

20
extensions/default/src/ViewerLayout/index.jsx
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;

10
extensions/default/src/getToolbarModule.js
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',

2
extensions/dicom-html/package.json
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"

4
extensions/dicom-rt/package.json
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"

2
extensions/dicom-segmentation/package.json
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"

4
extensions/dicom-sr/package.json
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",

11
extensions/dicom-sr/src/OHIFCornerstoneSRViewport.js
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 || '',
},
}}
/>

5
extensions/measurement-tracking/package.json
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",

16
extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/ActionButtons.jsx
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;

105
extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.js
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) {

9
extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx
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);

104
extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js
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}

4
extensions/vtk/package.json
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",

50
modes/longitudinal/src/toolbarButtons.js
View File

@ -1,5 +1,8 @@
// TODO: torn, can either bake this here; or have to create a whole new button type
// Only ways that you can pass in a custom React component for render :l
import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
import React from 'react';
import classnames from 'classnames';
export default [
// Divider
@ -29,13 +32,58 @@ export default [
config: {
groupName: 'primaryTool',
},
component: ExpandableToolbarButton,
props: {
isActive: true,
icon: 'tool-window-level',
label: 'Levels',
commandName: 'setToolActive',
commandOptions: { toolName: 'Wwwc' },
commands: {
'windowLevelPreset1': {
commandName: 'windowLevelPreset1',
commandOptions: {},
},
'windowLevelPreset2': {
commandName: 'windowLevelPreset2',
commandOptions: {},
},
'windowLevelPreset3': {
commandName: 'windowLevelPreset3',
commandOptions: {},
},
'windowLevelPreset4': {
commandName: 'windowLevelPreset4',
commandOptions: {},
},
'windowLevelPreset5': {
commandName: 'windowLevelPreset5',
commandOptions: {},
}
},
type: 'primary',
content: ListMenu,
contentProps: {
options: [
{ value: 'windowLevelPreset1', title: 'Soft tissue', subtitle: '400 / 40' },
{ value: 'windowLevelPreset2', title: 'Lung', subtitle: '1500 / -600' },
{ value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
{ value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' },
{ value: 'windowLevelPreset5', title: 'Brain', subtitle: '2500 / 480' },
],
renderer: ({ title, subtitle, isActive, index }) => (
<>
<div>
<span className={classnames(isActive ? "text-black" : "text-white", "mr-2 text-base")}>
{title}
</span>
<span className={classnames(isActive ? "text-black" : "text-aqua-pale", "font-thin text-sm")}>
{subtitle}
</span>
</div>
<span className={classnames(isActive ? "text-black" : "text-primary-active", "text-sm")}>{index + 1}</span>
</>
)
}
},
},
{

4
platform/core/package.json
View File

@ -31,14 +31,14 @@
},
"peerDependencies": {
"cornerstone-core": "^2.3.0",
"cornerstone-tools": "^4.12.0",
"cornerstone-tools": "4.16.0",
"cornerstone-wado-image-loader": "^3.1.2",
"dicom-parser": "^1.8.3"
},
"dependencies": {
"@babel/runtime": "7.7.6",
"ajv": "^6.10.0",
"dcmjs": "^0.12.4",
"dcmjs": "0.14.0",
"dicomweb-client": "^0.6.0",
"immer": "6.0.2",
"isomorphic-base64": "^1.0.2",

132
platform/core/src/DICOMSR/dataExchange.js
View File

@ -6,6 +6,10 @@ import {
stowSRFromMeasurements,
} from './handleStructuredReport';
import findMostRecentStructuredReport from './utils/findMostRecentStructuredReport';
import cornerstoneTools from 'cornerstone-tools';
import dcmjs from 'dcmjs';
const { MeasurementReport } = dcmjs.adapters.Cornerstone;
/**
*
@ -47,7 +51,7 @@ const retrieveMeasurements = server => {
* @param {serverType} server
* @returns {Object} With message to be displayed on success
*/
const storeMeasurements = async (measurementData, filter, server) => {
const storeMeasurementsOld = async (measurementData, filter, server) => {
log.info('[DICOMSR] storeMeasurements');
if (!server || server.type !== 'dicomWeb') {
@ -78,4 +82,128 @@ const storeMeasurements = async (measurementData, filter, server) => {
}
};
export { retrieveMeasurements, storeMeasurements };
/**
*
* @param {object[]} measurementData An array of measurements from the measurements service
* that you wish to serialize.
*/
const downloadReport = measurementData => {
const srDataset = generateReport(measurementData);
const reportBlob = dcmjs.data.datasetToBlob(srDataset);
//Create a URL for the binary.
var objectUrl = URL.createObjectURL(reportBlob);
window.location.assign(objectUrl);
};
/**
*
* @param {object[]} measurementData An array of measurements from the measurements service
* that you wish to serialize.
*/
const generateReport = measurementData => {
const ids = measurementData.map(md => md.id);
const filteredToolState = _getFilteredCornerstoneToolState(ids);
const report = MeasurementReport.generateReport(
filteredToolState,
cornerstone.metaData
);
return report.dataset;
};
/**
*
* @param {object[]} measurementData An array of measurements from the measurements service
* that you wish to serialize.
* @param {object} dataSource The dataSource that you wish to use to persist the data.
*/
const storeMeasurements = async (measurementData, dataSource) => {
// TODO -> Eventually use the measurements directly and not the dcmjs adapter,
// But it is good enough for now whilst we only have cornerstone as a datasource.
log.info('[DICOMSR] storeMeasurements');
if (!dataSource || !dataSource.store || !dataSource.store.dicom) {
log.error('[DICOMSR] datasource has no dataSource.store.dicom endpoint!');
return Promise.reject({});
}
const naturalizedReport = generateReport(measurementData);
const { StudyInstanceUID } = naturalizedReport;
try {
await dataSource.store.dicom(naturalizedReport);
if (StudyInstanceUID) {
studies.deleteStudyMetadataPromise(StudyInstanceUID);
}
return {
message: 'Measurements saved successfully',
};
} catch (error) {
log.error(
`[DICOMSR] Error while saving the measurements: ${error.message}`
);
throw new Error('Error while saving the measurements.');
}
};
function _getFilteredCornerstoneToolState(uidFilter) {
const globalToolState = cornerstoneTools.globalImageIdSpecificToolStateManager.saveToolState();
const filteredToolState = {};
function addToFilteredToolState(imageId, toolType, toolDataI) {
if (!filteredToolState[imageId]) {
filteredToolState[imageId] = {};
}
const imageIdSpecificToolState = filteredToolState[imageId];
if (!imageIdSpecificToolState[toolType]) {
imageIdSpecificToolState[toolType] = {
data: [],
};
}
const toolData = imageIdSpecificToolState[toolType].data;
toolData.push(toolDataI);
}
const uids = uidFilter.slice();
const imageIds = Object.keys(globalToolState);
for (let i = 0; i < imageIds.length; i++) {
const imageId = imageIds[i];
const imageIdSpecificToolState = globalToolState[imageId];
const toolTypes = Object.keys(imageIdSpecificToolState);
for (let j = 0; j < toolTypes.length; j++) {
const toolType = toolTypes[j];
const toolData = imageIdSpecificToolState[toolType].data;
if (toolData) {
for (let k = 0; k < toolData.length; k++) {
const toolDataK = toolData[k];
const uidIndex = uids.findIndex(uid => uid === toolDataK.id);
if (uidIndex !== -1) {
addToFilteredToolState(imageId, toolType, toolDataK);
uids.splice(uidIndex, 1);
if (!uids.length) {
return filteredToolState;
}
}
}
}
}
}
return filteredToolState;
}
export { retrieveMeasurements, storeMeasurements, downloadReport };

7
platform/core/src/DICOMSR/index.js
View File

@ -1,9 +1,14 @@
import { retrieveMeasurements, storeMeasurements } from './dataExchange';
import {
retrieveMeasurements,
storeMeasurements,
downloadReport,
} from './dataExchange';
import isToolSupported from './utils/isToolSupported';
const DICOMSR = {
retrieveMeasurements,
storeMeasurements,
downloadReport,
isToolSupported,
};

12
platform/core/src/DataSources/IWebApiDataSource.js
View File

@ -15,6 +15,7 @@ import { DicomMetadataStore } from '@ohif/core';
function create({
query,
retrieve,
store,
retrieveSeriesMetadata,
getImageIdsForDisplaySet,
}) {
@ -44,13 +45,20 @@ function create({
series: {},
};
const defaultStore = {
dicom: async naturalizedDataset => {
throw new Error(
'store.dicom(naturalizedDicom, StudyInstanceUID) not implemented for dataSource.'
);
},
};
return {
query: query || defaultQuery,
retrieve: retrieve || defaultRetrieve,
store: store || defaultStore,
getImageIdsForDisplaySet,
retrieveSeriesMetadata,
// then go get all series level metadata.
// Store this in the DICOM MetadataStore.
};
}

5
platform/core/src/extensions/ExtensionManager.js
View File

@ -137,6 +137,7 @@ export default class ExtensionManager {
getDataSources = dataSourceName => {
if (dataSourceName === undefined) {
// Default to the activeDataSource
dataSourceName = this.activeDataSource;
}
@ -144,6 +145,10 @@ export default class ExtensionManager {
return this.dataSourceMap[dataSourceName];
};
getActiveDataSource = () => {
return this.activeDataSource;
};
/**
* @private
* @param {string} moduleType

5
platform/core/src/services/MeasurementService/MeasurementService.js
View File

@ -40,6 +40,10 @@ const MEASUREMENT_SCHEMA_KEYS = [
'type',
'unit',
'area', // TODO: Add concept names instead (descriptor)
'length',
'shortestDiameter',
'longestDiameter',
'text', // NOTE: There is nothing like this in SR.
'points',
'source',
];
@ -53,6 +57,7 @@ const EVENTS = {
const VALUE_TYPES = {
POLYLINE: 'value_type::polyline',
POINT: 'value_type::point',
BIDIRECTIONAL: 'value_type::shortAxisLongAxis', // TODO -> Discuss with Danny. => just using SCOORD values isn't enough here.
ELLIPSE: 'value_type::ellipse',
MULTIPOINT: 'value_type::multipoint',
CIRCLE: 'value_type::circle',

19
platform/core/src/services/ToolBarService/ToolBarService.js
View File

@ -62,7 +62,7 @@ export default class ToolBarService {
this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {});
}
getButtonSection(key) {
getButtonSection(key, props) {
const buttonSectionIds = this.buttonSections[key];
const buttonsInSection = [];
@ -79,7 +79,8 @@ export default class ToolBarService {
btnIds.forEach(nestedBtnId => {
const nestedBtn = this.buttons[nestedBtnId];
const mappedNestedBtn = this._mapButtonToDisplay(nestedBtn, key);
const metadata = { isNested: true };
const mappedNestedBtn = this._mapButtonToDisplay(nestedBtn, key, metadata, props);
nestedButtons.push(mappedNestedBtn);
});
@ -90,7 +91,8 @@ export default class ToolBarService {
} else {
const btnId = btnIdOrArray;
const btn = this.buttons[btnId];
const mappedBtn = this._mapButtonToDisplay(btn, key);
const metadata = { isNested: false };
const mappedBtn = this._mapButtonToDisplay(btn, key, metadata, props);
buttonsInSection.push(mappedBtn);
}
@ -136,8 +138,8 @@ export default class ToolBarService {
* @param {*} btn
* @param {*} btnSection
*/
_mapButtonToDisplay(btn, btnSection) {
const { id, type, component, props } = btn;
_mapButtonToDisplay(btn, btnSection, metadata, props) {
const { id, type, component } = btn;
const buttonType = this._buttonTypes()[type];
if (!buttonType) {
@ -146,7 +148,7 @@ export default class ToolBarService {
const onClick = evt => {
if (buttonType.clickHandler) {
buttonType.clickHandler(evt, btn, btnSection);
buttonType.clickHandler(evt, btn, btnSection, metadata, props);
}
if (btn.props.onClick) {
btn.onClick(evt, btn, btnSection);
@ -154,12 +156,15 @@ export default class ToolBarService {
if (btn.props.clickHandler) {
btn.clickHandler(evt, btn, btnSection);
}
if (props && props.onClick) {
props.onClick(evt, btn, btnSection, props);
}
};
return {
id,
Component: component || buttonType.defaultComponent,
componentProps: Object.assign({}, props, { onClick }), //
componentProps: Object.assign({}, btn.props, { onClick }), //
};
}
}

18
platform/core/src/utils/formatPN.js Normal file
View File

@ -0,0 +1,18 @@
/**
* Formats a patient name for display purposes
*/
export default function formatPN(name) {
if (!name) {
return;
}
// Convert the first ^ to a ', '. String.replace() only affects
// the first appearance of the character.
const commaBetweenFirstAndLast = name.replace('^', ', ');
// Replace any remaining '^' characters with spaces
const cleaned = commaBetweenFirstAndLast.replace(/\^/g, ' ');
// Trim any extraneous whitespace
return cleaned.trim();
}

2
platform/core/src/utils/index.js
View File

@ -15,6 +15,7 @@ import makeCancelable from './makeCancelable';
import hotkeys from './hotkeys';
import Queue from './Queue';
import isDicomUid from './isDicomUid';
import formatPN from './formatPN';
import resolveObjectPath from './resolveObjectPath';
import * as hierarchicalListUtils from './hierarchicalListUtils';
import * as progressTrackingUtils from './progressTrackingUtils';
@ -26,6 +27,7 @@ const utils = {
addServers,
sortBy,
writeScript,
formatPN,
b64toBlob,
StackManager,
studyMetadataManager,

2
platform/ui/index.js
View File

@ -33,6 +33,8 @@ export {
Dialog,
Dropdown,
EmptyStudies,
ExpandableToolbarButton,
ListMenu,
Icon,
IconButton,
Input,

7
platform/ui/src/assets/icons/close.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
<g fill="currentColor" fill-rule="evenodd">
<g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
<path d="M.188.187L8.813 8.812M8.813.187L.188 8.812" transform="translate(5 5)"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 355 B

5
platform/ui/src/components/EmptyStudies/EmptyStudies.js
View File

@ -3,12 +3,13 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Icon, Typography } from '@ohif/ui';
const EmptyStudies = ({ className }) => {
// TODO: Add loading spinner to OHIF + use it here.
const EmptyStudies = ({ className, isLoading }) => {
return (
<div className={classnames('flex-col inline-flex items-center', className)}>
<Icon name="magnifier" className="mb-4" />
<Typography className="text-primary-light" variant="h5">
No studies available
{!isLoading ? 'No studies available' : 'Loading...'}
</Typography>
</div>
);

16
platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.css Normal file
View File

@ -0,0 +1,16 @@
.ExpandableToolbarButton:hover .ExpandableToolbarButton__arrow:after {
content: "";
position: absolute;
bottom: -10px;
border-width: 10px 10px 0;
border-style: solid;
border-color:#5acce6 transparent;
}
.ExpandableToolbarButton .ExpandableToolbarButton__content {
display: none;
}
.ExpandableToolbarButton:hover .ExpandableToolbarButton__content {
display: block;
}

86
platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.jsx Normal file
View File

@ -0,0 +1,86 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { IconButton, Icon } from '@ohif/ui';
import './ExpandableToolbarButton.css';
const ExpandableToolbarButton = ({
type,
id,
isActive,
onClick,
icon,
className,
content: Content,
contentProps
}) => {
const classes = {
type: {
primary: isActive
? 'text-black'
: 'text-common-bright hover:bg-primary-dark hover:text-primary-light',
secondary: isActive
? 'text-black'
: 'text-white hover:bg-secondary-dark focus:bg-secondary-dark',
},
};
const onChildClickHandler = (...args) => {
onClick(...args);
if (contentProps.onClick) {
contentProps.onClick(...args);
}
};
const onClickHandler = (...args) => {
onClick(...args);
};
return (
<div key={id} className="ExpandableToolbarButton">
<IconButton
variant={isActive ? 'contained' : 'text'}
className={classnames(
'mx-1',
classes.type[type],
isActive && 'ExpandableToolbarButton__arrow'
)}
onClick={onClickHandler}
key={id}
>
<Icon name={icon} />
</IconButton>
<div className="absolute z-10 pt-4">
<div className={classnames("ExpandableToolbarButton__content w-48", className)}>
<Content {...contentProps} onClick={onChildClickHandler} />
</div>
</div>
</div>
);
};
const noop = () => { };
ExpandableToolbarButton.defaultProps = {
isActive: false,
type: 'primary',
content: null,
onClick: noop,
};
ExpandableToolbarButton.propTypes = {
/* Influences background/hover styling */
type: PropTypes.oneOf(['primary', 'secondary']),
id: PropTypes.string.isRequired,
isActive: PropTypes.bool,
onClick: PropTypes.func.isRequired,
icon: PropTypes.string.isRequired,
/** Expandable toolbar button content can be replaced for a customized content by passing a node to this value. */
content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
contentProps: PropTypes.object,
};
export default ExpandableToolbarButton;

58
platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.mdx Normal file
View File

@ -0,0 +1,58 @@
---
name: Expandable Toolbar Button
menu: General
route: components/expandableToolbarButton
---
import { useState } from 'react';
import { Playground, Props } from 'docz';
import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
# Toolbar Button
Expandable Toolbar Buttons are used to populate the Toolbar.
## Import
```javascript
import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
```
<Playground>
{() => {
const props = {
content: ListMenu,
contentProps: {
options: [
{ value: 'windowLevelPreset1', title: 'Soft tissue', subtitle: '400 / 40' },
{ value: 'windowLevelPreset2', title: 'Lung', subtitle: '1500 / -600' },
{ value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
{ value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' },
{ value: 'windowLevelPreset5', title: 'Brain', subtitle: '2500 / 480' },
],
renderer: ({ title, subtitle, isActive, index }) => (
<>
<div>
<span className={classnames(isActive ? "text-black" : "text-white", "mr-2 text-base")}>
{title}
</span>
<span className={classnames(isActive ? "text-black" : "text-aqua-pale", "font-thin text-sm")}>
{subtitle}
</span>
</div>
<span className={classnames(isActive ? "text-black" : "text-primary-active", "text-sm")}>{index + 1}</span>
</>
)
}
};
return (
<div className="py-10 flex justify-center">
<ExpandableToolbarButton {...props} />
</div>
);
}}
</Playground>
## Properties
<Props of={ToolbarButton} />

2
platform/ui/src/components/ExpandableToolbarButton/index.js Normal file
View File

@ -0,0 +1,2 @@
import ExpandableToolbarButton from './ExpandableToolbarButton';
export default ExpandableToolbarButton;

2
platform/ui/src/components/Icon/getIcon.jsx
View File

@ -4,6 +4,7 @@ import React from 'react';
import arrowDown from './../../assets/icons/arrow-down.svg';
import calendar from './../../assets/icons/calendar.svg';
import cancel from './../../assets/icons/cancel.svg';
import close from './../../assets/icons/close.svg';
import dottedCircle from './../../assets/icons/dotted-circle.svg';
import circledCheckmark from './../../assets/icons/circled-checkmark.svg';
import chevronDown from './../../assets/icons/chevron-down.svg';
@ -49,6 +50,7 @@ const ICONS = {
'arrow-down': arrowDown,
calendar: calendar,
cancel: cancel,
close: close,
'dotted-circle': dottedCircle,
'circled-checkmark': circledCheckmark,
'chevron-down': chevronDown,

4
platform/ui/src/components/IconButton/IconButton.jsx
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
const baseClasses =
'text-center items-center justify-center outline-none transition duration-300 ease-in-out font-bold focus:outline-none';
'text-center items-center justify-center transition duration-300 ease-in-out outline-none font-bold focus:outline-none';
const roundedClasses = {
none: '',
@ -84,7 +84,7 @@ const IconButton = ({
}) => {
const buttonElement = useRef(null);
const handleOnClick = (e) => {
const handleOnClick = e => {
buttonElement.current.blur();
onClick(e);
};

6
platform/ui/src/components/Input/Input.jsx
View File

@ -4,11 +4,11 @@ import Label from '../Label';
import classnames from 'classnames';
const baseInputClasses =
'shadow transition duration-300 appearance-none border rounded w-full py-2 px-3 text-sm text-white hover:border-gray-500 leading-tight focus:border-gray-500 focus:outline-none';
'shadow transition duration-300 appearance-none border border-primary-main hover:border-gray-500 focus:border-gray-500 focus:outline-none rounded w-full py-2 px-3 mt-2 text-sm text-white leading-tight focus:outline-none';
const transparentClasses = {
true: 'bg-transparent',
false: '',
false: 'bg-black',
};
const Input = ({
@ -16,7 +16,7 @@ const Input = ({
containerClassName = '',
labelClassName = '',
className = '',
transparent = true,
transparent = false,
type = 'text',
value,
onChange,

2
platform/ui/src/components/InputText/InputText.jsx
View File

@ -43,7 +43,7 @@ InputText.propTypes = {
isSortable: PropTypes.bool,
sortDirection: PropTypes.oneOf(['ascending', 'descending', 'none']),
onLabelClick: PropTypes.func,
value: PropTypes.string,
value: PropTypes.any,
onChange: PropTypes.func.isRequired,
};

65
platform/ui/src/components/ListMenu/ListMenu.jsx Normal file
View File

@ -0,0 +1,65 @@
import React, { useState } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
const ListMenu = ({ options = [], renderer, onClick }) => {
const [selectedIndex, setSelectedIndex] = useState(null);
const ListItem = (props) => {
const flex = 'flex flex-row justify-between items-center';
const theme = 'bg-indigo-dark';
const hover = 'hover:bg-primary-dark';
const spacing = 'p-3 h-8';
return (
<div
className={classnames(
flex,
theme,
spacing,
'cursor-pointer',
!props.isActive && hover,
props.isActive && 'bg-primary-light',
)}
onClick={props.onClick}
>
{renderer && renderer(props)}
</div>
);
};
return (
<div className="flex flex-col rounded-md bg-secondary-dark pt-2 pb-2">
{options.map((option, index) => {
const onClickHandler = () => {
setSelectedIndex(index);
onClick({ ...option, index });
};
return (
<ListItem
key={`ListItem${index}`}
{...option}
index={index}
isActive={selectedIndex === index}
onClick={onClickHandler}
/>
);
})}
</div>
);
};
const noop = () => { };
ListMenu.propTypes = {
options: PropTypes.array.isRequired,
renderer: PropTypes.func.isRequired,
onClick: PropTypes.func
};
ListMenu.defaultProps = {
onClick: noop
};
export default ListMenu;

52
platform/ui/src/components/ListMenu/ListMenu.mdx Normal file
View File

@ -0,0 +1,52 @@
---
name: List Menu
menu: General
route: components/listMenu
---
import { useState } from 'react';
import { Playground, Props } from 'docz';
import { ListMenu } from '@ohif/ui';
# List Menu
List Menus are used to populate expandable Toolbar.
## Import
```javascript
import { ListMenu } from '@ohif/ui';
```
<Playground>
{() => {
return (
<ToolbarButton options={[
{ value: 'windowLevelPreset1', title: 'Soft tissue', subtitle: '400 / 40' },
{ value: 'windowLevelPreset2', title: 'Lung', subtitle: '1500 / -600' },
{ value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
{ value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' },
{ value: 'windowLevelPreset5', title: 'Brain', subtitle: '2500 / 480' },
]}
renderer={
({ title, subtitle, isActive, index }) => (
<>
<div>
<span className={classnames(isActive ? "text-black" : "text-white", "mr-2 text-base")}>
{title}
</span>
<span className={classnames(isActive ? "text-black" : "text-aqua-pale", "font-thin text-sm")}>
{subtitle}
</span>
</div>
<span className={classnames(isActive ? "text-black" : "text-primary-active", "text-sm")}>{index + 1}</span>
</>
)}
/>
);
}}
</Playground>
## Properties
<Props of={ToolbarButton} />

2
platform/ui/src/components/ListMenu/index.js Normal file
View File

@ -0,0 +1,2 @@
import ListMenu from './ListMenu';
export default ListMenu;

14
platform/ui/src/components/MeasurementTable/MeasurementTable.jsx
View File

@ -14,7 +14,7 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
</div>
<div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-112">
{!!data.length &&
data.map((measurementItem) => {
data.map(measurementItem => {
const { id, label, displayText, isActive } = measurementItem;
return (
<div
@ -45,9 +45,11 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
<span className="text-base text-primary-light mb-1">
{label}
</span>
<span className="pl-2 border-l border-primary-light text-base text-white">
{displayText}
</span>
{displayText.map(line => (
<span className="pl-2 border-l border-primary-light text-base text-white">
{line}
</span>
))}
<Icon
className={classnames(
'text-white w-4 absolute cursor-pointer transition duration-300',
@ -61,7 +63,7 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
right: 4,
transform: isActive ? '' : 'translateX(100%)',
}}
onClick={(e) => {
onClick={e => {
// stopPropagation needed to avoid disable the current active item
e.stopPropagation();
onEdit(id);
@ -108,7 +110,7 @@ MeasurementTable.propTypes = {
PropTypes.shape({
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
label: PropTypes.string,
displayText: PropTypes.string,
displayText: PropTypes.arrayOf(PropTypes.string),
isActive: PropTypes.bool,
})
),

3
platform/ui/src/components/Modal/Modal.css Normal file
View File

@ -0,0 +1,3 @@
.modal-content {
max-height: calc(100vh - theme('spacing.250px'));
}

45
platform/ui/src/components/Modal/Modal.jsx
View File

@ -1,25 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
import ReactModal from 'react-modal';
import classNames from 'classnames';
import { Typography, useModal } from '@ohif/ui';
import './Modal.css';
const customStyle = {
overlay: {
zIndex: 1071,
backgroundColor: 'rgb(0, 0, 0, 0.8)',
display: 'flex',
alignItems: 'flex-start',
justifyContent: 'center',
padding: '40px 0',
},
};
import { Typography, useModal, IconButton, Icon } from '@ohif/ui';
ReactModal.setAppElement(document.getElementById('root'));
const Modal = ({
className,
closeButton,
shouldCloseOnEsc,
isOpen,
@ -39,13 +28,15 @@ const Modal = ({
<header className="mb-6 pb-4 border-b border-secondary-main">
<Typography variant="h4">{title}</Typography>
{closeButton && (
<button
className="absolute top-0 right-0 bg-primary-main focus:outline-none text-white rounded-full text-2xl w-8 h-8 flex justify-center items-center -mr-3 -mt-3"
<IconButton
className="absolute top-0 right-0 focus:outline-none flex -mr-3 -mt-3"
data-cy="close-button"
color="primary"
onClick={onClose}
rounded="full"
>
×
</button>
<Icon name="close" className="text-white w-8 h-8" />
</IconButton>
)}
</header>
)
@ -54,24 +45,17 @@ const Modal = ({
return (
<ReactModal
className={classNames(
`relative py-6 w-11/12 lg:w-10/12 xl:w-1/2 max-h-full outline-none bg-primary-dark border border-secondary-main text-white rounded ${className}`
)}
className="relative py-6 w-11/12 lg:w-10/12 xl:w-1/2 max-h-full outline-none bg-primary-dark border border-secondary-main text-white rounded"
overlayClassName="fixed top-0 left-0 right-0 bottom-0 z-50 bg-overlay flex items-start justify-center py-16"
shouldCloseOnEsc={shouldCloseOnEsc}
onRequestClose={handleClose}
isOpen={isOpen}
title={title}
style={customStyle}
>
<>
<div className="px-6">{renderHeader()}</div>
<section
className="ohif-scrollbar overflow-y-auto px-6"
style={{ maxHeight: 'calc(100vh - 200px)' }}
>
{children}
</section>
</>
<div className="px-6">{renderHeader()}</div>
<section className="ohif-scrollbar modal-content overflow-y-auto px-6">
{children}
</section>
</ReactModal>
);
};
@ -81,7 +65,6 @@ Modal.defaultProps = {
};
Modal.propTypes = {
className: PropTypes.string,
closeButton: PropTypes.bool,
shouldCloseOnEsc: PropTypes.bool,
isOpen: PropTypes.bool,

12
platform/ui/src/components/Select/Select.jsx
View File

@ -76,15 +76,9 @@ const Select = ({
options={options}
value={selectedOptions}
onChange={(selectedOptions, { action }) => {
if (!isMulti) {
onChange(selectedOptions, action);
return;
}
const newSelection = selectedOptions.reduce(
(acc, curr) => acc.concat([curr.value]),
[]
);
const newSelection = !selectedOptions.length
? selectedOptions
: selectedOptions.reduce((acc, curr) => acc.concat([curr.value]), []);
onChange(newSelection, action);
}}
></ReactSelect>

1
platform/ui/src/components/StudyListFilter/StudyListFilter.jsx
View File

@ -48,6 +48,7 @@ const StudyListFilter = ({
color="inherit"
className="text-primary-active"
startIcon={<Icon name="info-link" className="w-2" />}
onClick={showLearnMoreContent}
>
<span className="flex flex-col flex-1">
<span onClick={showLearnMoreContent}>Learn more</span>

1
platform/ui/src/components/ToolbarButton/ToolbarButton.jsx
View File

@ -25,6 +25,7 @@ const ToolbarButton = ({
};
const shouldShowDropdown = !!isActive && !!dropdownContent;
return (
<div key={id}>
<Tooltip

8
platform/ui/src/components/Tooltip/Tooltip.jsx
View File

@ -24,7 +24,7 @@ const arrowPositionStyle = {
},
};
const Tooltip = ({ content, isSticky, position, tight, children }) => {
const Tooltip = ({ content, isSticky, position, tight, children, isDisabled }) => {
const [isActive, setIsActive] = useState(false);
const handleMouseOver = () => {
@ -39,7 +39,7 @@ const Tooltip = ({ content, isSticky, position, tight, children }) => {
}
};
const isOpen = isSticky || isActive;
const isOpen = (isSticky || isActive) && !isDisabled;
return (
<div
@ -84,10 +84,12 @@ Tooltip.defaultProps = {
tight: false,
isSticky: false,
position: 'bottom',
isDisabled: false
};
Tooltip.propTypes = {
// Allow null
/** prevents tooltip from rendering despite hover/active/sticky */
isDisabled: PropTypes.bool,
content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
position: PropTypes.oneOf([
'bottom',

75
platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Icon, ButtonGroup, Button, Tooltip } from '@ohif/ui';
@ -13,9 +13,11 @@ const classes = {
const ViewportActionBar = ({
studyData,
showNavArrows,
showPatientInfo,
showPatientInfo: patientInfoVisibility,
onSeriesChange,
}) => {
const [showPatientInfo, setShowPatientInfo] = useState(patientInfoVisibility);
const {
label,
isTracked,
@ -37,6 +39,8 @@ const ViewportActionBar = ({
scanner,
} = patientInformation;
const onPatientInfoClick = () => setShowPatientInfo(!showPatientInfo)
const renderIconStatus = () => {
if (modality === 'SR') {
return (
@ -60,29 +64,30 @@ const ViewportActionBar = ({
{!isTracked ? (
<Icon name="dotted-circle" className="w-6 text-primary-light" />
) : (
<Tooltip
position="bottom-left"
content={
<div className="flex py-2">
<div className="flex pt-1">
<Icon name="info-link" className="w-4 text-primary-main" />
</div>
<div className="flex ml-4">
<span className="text-base text-common-light">
Series is
<Tooltip
position="bottom-left"
content={
<div className="flex py-2">
<div className="flex pt-1">
<Icon name="info-link" className="w-4 text-primary-main" />
</div>
<div className="flex ml-4">
<span className="text-base text-common-light">
Series is
<span className="font-bold text-white"> tracked</span> and
can be viewed <br /> in the measurement panel
</span>
</div>
</div>
</div>
}
>
<Icon name="tracked" className="w-6 text-primary-light" />
</Tooltip>
)}
}
>
<Icon name="tracked" className="w-6 text-primary-light" />
</Tooltip>
)}
</div>
);
};
return (
<div className="flex items-center p-2 border-b border-primary-light">
<div className="flex flex-grow">
@ -131,19 +136,18 @@ const ViewportActionBar = ({
</ButtonGroup>
</div>
)}
{showPatientInfo && (
<div className="flex ml-4 mr-2">
<PatientInfo
patientName={patientName}
patientSex={patientSex}
patientAge={patientAge}
MRN={MRN}
thickness={thickness}
spacing={spacing}
scanner={scanner}
/>
</div>
)}
<div className="flex ml-4 mr-2 cursor-pointer" onClick={onPatientInfoClick}>
<PatientInfo
isOpen={showPatientInfo}
patientName={patientName}
patientSex={patientSex}
patientAge={patientAge}
MRN={MRN}
thickness={thickness}
spacing={spacing}
scanner={scanner}
/>
</div>
</div>
);
};
@ -174,7 +178,7 @@ ViewportActionBar.propTypes = {
ViewportActionBar.defaultProps = {
showNavArrows: true,
showPatientInfo: true,
showPatientInfo: false,
};
function PatientInfo({
@ -185,11 +189,14 @@ function PatientInfo({
thickness,
spacing,
scanner,
isOpen,
}) {
return (
<Tooltip
isSticky
isDisabled={!isOpen}
position="bottom-right"
content={
content={isOpen && (
<div className="flex py-2">
<div className="flex pt-1">
<Icon name="info-link" className="w-4 text-primary-main" />
@ -236,7 +243,7 @@ function PatientInfo({
</div>
</div>
</div>
}
)}
>
<div className="relative flex justify-end">
<div className="relative">

24
platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.jsx
View File

@ -6,10 +6,11 @@ import React, {
useRef,
} from 'react';
import classnames from 'classnames';
import {
Typography,
InputText,
InputNumber,
Input,
Tooltip,
IconButton,
Icon,
@ -169,7 +170,10 @@ const ViewportDownloadForm = ({
);
};
const validSize = value => (value >= minimumSize ? value : minimumSize);
const validSize = useCallback(
value => (value >= minimumSize ? value : minimumSize),
[minimumSize]
);
const loadAndUpdateViewports = useCallback(async () => {
const { width: scaledWidth, height: scaledHeight } = await loadImage(
@ -274,7 +278,7 @@ const ViewportDownloadForm = ({
<div className="mt-6 flex flex-col">
<div className="w-full mb-4">
<InputText
<Input
data-cy="file-name"
value={filename}
onChange={value => setFilename(value)}
@ -286,7 +290,8 @@ const ViewportDownloadForm = ({
<div className="flex w-1/3">
<div className="flex flex-col flex-grow">
<div className="w-full">
<InputNumber
<Input
type="number"
min={minimumSize}
max={maximumSize}
label="Image width (px)"
@ -297,7 +302,8 @@ const ViewportDownloadForm = ({
{renderErrorHandler('width')}
</div>
<div className="w-full mt-4">
<InputNumber
<Input
type="number"
min={minimumSize}
max={maximumSize}
label="Image height (px)"
@ -366,20 +372,18 @@ const ViewportDownloadForm = ({
<div className="mt-8">
<div
className="hidden"
style={{
height: viewportElementDimensions.height,
width: viewportElementDimensions.width,
position: 'absolute',
left: '9999px',
}}
ref={ref => setViewportElement(ref)}
>
<canvas
className={canvasClass}
className={classnames('block', canvasClass)}
style={{
height: downloadCanvas.height,
width: downloadCanvas.width,
display: 'block',
}}
width={downloadCanvas.width}
height={downloadCanvas.height}

4
platform/ui/src/components/index.js
View File

@ -41,6 +41,8 @@ import ThumbnailNoImage from './ThumbnailNoImage';
import ThumbnailTracked from './ThumbnailTracked';
import ThumbnailList from './ThumbnailList';
import ToolbarButton from './ToolbarButton';
import ExpandableToolbarButton from './ExpandableToolbarButton';
import ListMenu from './ListMenu';
import Tooltip from './Tooltip';
import Typography from './Typography';
import Viewport from './Viewport';
@ -56,6 +58,8 @@ export {
Dialog,
Dropdown,
EmptyStudies,
ExpandableToolbarButton,
ListMenu,
Icon,
IconButton,
Input,

8
platform/ui/tailwind.config.js
View File

@ -10,12 +10,20 @@ module.exports = {
xl: '1280px',
},
colors: {
overlay: 'rgba(0, 0, 0, 0.8)',
transparent: 'transparent',
black: '#000',
white: '#fff',
initial: 'initial',
inherit: 'inherit',
indigo: {
dark: '#0b1a42',
},
aqua: {
pale: '#7bb2ce',
},
primary: {
light: '#5acce6',
main: '#0944b3',

4
platform/viewer/package.json
View File

@ -67,9 +67,9 @@
"classnames": "^2.2.6",
"core-js": "^3.2.1",
"cornerstone-math": "^0.1.8",
"cornerstone-tools": "4.15.1",
"cornerstone-tools": "4.16.0",
"cornerstone-wado-image-loader": "^3.1.2",
"dcmjs": "^0.12.2",
"dcmjs": "0.14.0",
"dicom-parser": "^1.8.3",
"dicomweb-client": "^0.4.4",
"dotenv-webpack": "^1.7.0",

2
platform/viewer/public/config/netlify.js
View File

@ -19,7 +19,9 @@ window.config = {
imageRendering: 'wadors',
thumbnailRendering: 'wadors',
enableStudyLazyLoad: true,
supportsFuzzyMatching: true,
},
},
],
defaultDataSourceName: 'dicomweb',
};

27
platform/viewer/src/components/ViewportGrid.jsx
View File

@ -1,10 +1,12 @@
/**
* CSS Grid Reference: http://grid.malven.co/
*/
import React from 'react';
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { ViewportGrid, ViewportPane, useViewportGrid } from '@ohif/ui';
import EmptyViewport from './EmptyViewport';
import { classes } from '@ohif/core';
const { ImageSet } = classes;
function ViewerViewportGrid(props) {
const { servicesManager, viewportComponents, dataSource } = props;
@ -20,6 +22,29 @@ function ViewerViewportGrid(props) {
// TODO -> Need some way of selecting which displaySets hit the viewports.
const { DisplaySetService } = servicesManager.services;
useEffect(() => {
const { unsubscribe } = DisplaySetService.subscribe(
DisplaySetService.EVENTS.DISPLAY_SETS_CHANGED,
displaySets => {
displaySets.sort((a, b) => {
const isImageSet = x => x instanceof ImageSet;
return (isImageSet(a) === isImageSet(b)) ? 0 : isImageSet(a) ? -1 : 1;
});
dispatch({
type: 'SET_DISPLAYSET_FOR_VIEWPORT',
payload: {
viewportIndex: 0,
displaySetInstanceUID: displaySets[0].displaySetInstanceUID,
},
});
},
);
return () => {
unsubscribe();
};
}, []);
// TODO -> Make a HangingProtocolService
const HangingProtocolService = displaySets => {
let displaySetInstanceUID;

23
platform/viewer/src/routes/DataSourceWrapper.jsx
View File

@ -46,14 +46,17 @@ function DataSourceWrapper(props) {
// studies.processResults --> <LayoutTemplate studies={} />
// But only for LayoutTemplate type of 'list'?
// Or no data fetching here, and just hand down my source
const [data, setData] = useState();
const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
// 204: no content
async function getData() {
setIsLoading(true);
const searchResults = await dataSource.query.studies.search(
queryFilterValues
);
setData(searchResults);
setIsLoading(false);
}
try {
@ -61,23 +64,19 @@ function DataSourceWrapper(props) {
} catch (ex) {
console.warn(ex);
}
console.log('DataSourceWrapper: useEffect');
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [history.location.search]);
// queryFilterValues
// TODO: Better way to pass DataSource?
return (
<React.Fragment>
{data && (
<LayoutTemplate
{...rest}
history={history}
data={data}
dataSource={dataSource}
/>
)}
</React.Fragment>
<LayoutTemplate
{...rest}
history={history}
data={data}
dataSource={dataSource}
isLoadingData={isLoading}
/>
);
}

15
platform/viewer/src/routes/WorkList/WorkList.jsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { Suspense, useState, useEffect } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
@ -29,15 +29,16 @@ const seriesInStudiesMap = new Map();
* TODO:
* - debounce `setFilterValues` (150ms?)
*/
function WorkList({ history, data: studies, dataSource }) {
function WorkList({ history, data: studies, isLoadingData, dataSource }) {
// ~ Modes
const [appConfig] = useAppConfig();
// ~ Filters
const query = useQuery();
const queryFilterValues = _getQueryFilterValues(query);
const [filterValues, _setFilterValues] = useState(
Object.assign({}, defaultFilterValues, queryFilterValues)
);
const [filterValues, _setFilterValues] = useState({
...defaultFilterValues,
...queryFilterValues,
});
const debouncedFilterValues = useDebounce(filterValues, 200);
const { resultsPerPage, pageNumber, sortBy, sortDirection } = filterValues;
@ -81,6 +82,7 @@ function WorkList({ history, data: studies, dataSource }) {
return 0;
});
// ~ Rows & Studies
const [expandedRows, setExpandedRows] = useState([]);
const [studiesWithSeriesData, setStudiesWithSeriesData] = useState([]);
@ -191,6 +193,7 @@ function WorkList({ history, data: studies, dataSource }) {
return filterValues[name] !== defaultFilterValues[name];
});
};
const tableDataSource = sortedStudies.map((study, key) => {
const rowKey = key + 1;
const isExpanded = expandedRows.some(k => k === rowKey);
@ -395,7 +398,7 @@ function WorkList({ history, data: studies, dataSource }) {
</>
) : (
<div className="flex flex-col items-center justify-center pt-48">
<EmptyStudies />
<EmptyStudies isLoading={isLoadingData} />
</div>
)}
</div>

16
yarn.lock
View File

@ -6755,10 +6755,10 @@ cornerstone-math@^0.1.8:
resolved "https://registry.yarnpkg.com/cornerstone-math/-/cornerstone-math-0.1.8.tgz#68ab1f9e4fdcd7c5cb23a0d2eb4263f9f894f1c5"
integrity sha512-x7NEQHBtVG7j1yeyj/aRoKTpXv1Vh2/H9zNLMyqYJDtJkNng8C4Q8M3CgZ1qer0Yr7eVq2x+Ynmj6kfOm5jXKw==
cornerstone-tools@4.15.1:
version "4.15.1"
resolved "https://registry.yarnpkg.com/cornerstone-tools/-/cornerstone-tools-4.15.1.tgz#f0b1026da9c7758defc088bb2f1e78426a23d91e"
integrity sha512-fJuTUJW/NDSD520jPB++tX//Kq80jPDngChHZrhx2xjj/9dCnexD9kmTX30Z0WUq0a2JEHZ6FlcOX38kSmw1hQ==
cornerstone-tools@4.16.0:
version "4.16.0"
resolved "https://registry.yarnpkg.com/cornerstone-tools/-/cornerstone-tools-4.16.0.tgz#af3d32d13722b97bec258492642e622312280196"
integrity sha512-kUhuSb2Ixpd2hgbdem+740rnN4hmoxzcOBNaUcsizFRWjMAsgc0yUxBFwLl0mIs811mefq79JOL+juwRA8T3Tg==
dependencies:
"@babel/runtime" "7.1.2"
cornerstone-math "0.1.7"
@ -7353,10 +7353,10 @@ dateformat@^3.0.0:
resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
dcmjs@^0.12.2, dcmjs@^0.12.4:
version "0.12.4"
resolved "https://registry.yarnpkg.com/dcmjs/-/dcmjs-0.12.4.tgz#82c24abdc357ea5281b78eb2cae8b781f7392aa3"
integrity sha512-N1ZsXqZIysirqdytb7h572TyIjmxpvCjrzdjtQsuPN8gC2EpxsUHQ598CPzaJBpBy9i1kfKuq4h2Jwt99cr/QQ==
dcmjs@0.14.0:
version "0.14.0"
resolved "https://registry.yarnpkg.com/dcmjs/-/dcmjs-0.14.0.tgz#0dc6cb2d15ddcff759bc9002f2a9704537735d1c"
integrity sha512-VL/Ibxe5RDsc5j5SEv3aEqdlKuBXz81/bBuW59Or0cos9vgK3XnVl3rr0ct6DWXJGK8vGIUMBOguyd/NRvlN0w==
dependencies:
"@babel/polyfill" "^7.8.3"
"@babel/runtime" "^7.8.4"