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

fix(seg): Enhance segmentation tools and UI, refactor code, and update dependencies (#4915)

Browse Source
This commit is contained in:
Alireza authored and GitHub committed 2025-04-02 18:10:47 -04:00
1 parent 1dc00d3030
commit 8432d5f633
37 files changed
+1063 -1122
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

extensions/cornerstone-dicom-pmap/package.json
+2 -2
View File
@@ -46,8 +46,8 @@
},
"dependencies": {
"@babel/runtime": "^7.20.13",
"@cornerstonejs/adapters": "^3.8.2",
"@cornerstonejs/core": "^3.8.2",
"@cornerstonejs/adapters": "^3.8.4",
"@cornerstonejs/core": "^3.8.4",
"@kitware/vtk.js": "32.12.0",
"react-color": "^2.19.3"
}
extensions/cornerstone-dicom-seg/package.json
+2 -2
View File
@@ -46,8 +46,8 @@
},
"dependencies": {
"@babel/runtime": "^7.20.13",
"@cornerstonejs/adapters": "^3.8.2",
"@cornerstonejs/core": "^3.8.2",
"@cornerstonejs/adapters": "^3.8.4",
"@cornerstonejs/core": "^3.8.4",
"@kitware/vtk.js": "32.12.0",
"react-color": "^2.19.3"
}
extensions/cornerstone-dicom-seg/src/commandsModule.ts
+19 -81
View File
@@ -1,22 +1,13 @@
import dcmjs from 'dcmjs';
import { Types } from '@ohif/core';
import { classes, Types } from '@ohif/core';
import { cache, metaData } from '@cornerstonejs/core';
import {
segmentation as cornerstoneToolsSegmentation,
Enums as cornerstoneToolsEnums,
utilities,
} from '@cornerstonejs/tools';
import { segmentation as cornerstoneToolsSegmentation } from '@cornerstonejs/tools';
import { adaptersRT, helpers, adaptersSEG } from '@cornerstonejs/adapters';
import { createReportDialogPrompt } from '@ohif/extension-default';
import { classes, DicomMetadataStore } from '@ohif/core';
import { DicomMetadataStore } from '@ohif/core';
import vtkImageMarchingSquares from '@kitware/vtk.js/Filters/General/ImageMarchingSquares';
import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
import PROMPT_RESPONSES from '../../default/src/utils/_shared/PROMPT_RESPONSES';
const { segmentation: segmentationUtils } = utilities;
const { datasetToBlob } = dcmjs.data;
const getTargetViewport = ({ viewportId, viewportGridService }) => {
@@ -46,14 +37,8 @@ const commandsModule = ({
servicesManager,
extensionManager,
}: Types.Extensions.ExtensionParams): Types.Extensions.CommandsModule => {
const {
segmentationService,
uiDialogService,
displaySetService,
viewportGridService,
toolGroupService,
customizationService,
} = servicesManager.services as AppTypes.Services;
const { segmentationService, displaySetService, viewportGridService, toolGroupService } =
servicesManager.services as AppTypes.Services;
const actions = {
/**
@@ -287,21 +272,24 @@ const commandsModule = ({
* converts dataset to downloadable blob.
*
*/
downloadRTSS: ({ segmentationId }) => {
downloadRTSS: async ({ segmentationId }) => {
const segmentations = segmentationService.getSegmentation(segmentationId);
const vtkUtils = {
vtkImageMarchingSquares,
vtkDataArray,
vtkImageData,
};
const RTSS = generateRTSSFromSegmentations(
// inject colors to the segmentIndex
const firstRepresentation =
segmentationService.getRepresentationsForSegmentation(segmentationId)[0];
Object.entries(segmentations.segments).forEach(([segmentIndex, segment]) => {
segment.color = segmentationService.getSegmentColor(
firstRepresentation.viewportId,
segmentationId,
segmentIndex
);
});
const RTSS = await generateRTSSFromSegmentations(
segmentations,
classes.MetadataProvider,
DicomMetadataStore,
cache,
cornerstoneToolsEnums,
vtkUtils
DicomMetadataStore
);
try {
@@ -314,56 +302,12 @@ const commandsModule = ({
console.warn(e);
}
},
setBrushSize: ({ value, toolNames }) => {
const brushSize = Number(value);
toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
if (toolNames?.length === 0) {
segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize);
} else {
toolNames?.forEach(toolName => {
segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize, toolName);
});
}
});
},
setThresholdRange: ({
value,
toolNames = [
'ThresholdCircularBrush',
'ThresholdSphereBrush',
'ThresholdCircularBrushDynamic',
'ThresholdSphereBrushDynamic',
],
}) => {
const toolGroupIds = toolGroupService.getToolGroupIds();
if (!toolGroupIds?.length) {
return;
}
for (const toolGroupId of toolGroupIds) {
const toolGroup = toolGroupService.getToolGroup(toolGroupId);
toolNames?.forEach(toolName => {
toolGroup.setToolConfiguration(toolName, {
threshold: {
range: value,
},
});
});
}
},
};
const definitions = {
/**
* Obsolete?
*/
loadSegmentationDisplaySetsForViewport: {
commandFn: actions.loadSegmentationDisplaySetsForViewport,
},
/**
* Obsolete?
*/
loadSegmentationsForViewport: {
commandFn: actions.loadSegmentationsForViewport,
},
@@ -380,12 +324,6 @@ const commandsModule = ({
downloadRTSS: {
commandFn: actions.downloadRTSS,
},
setBrushSize: {
commandFn: actions.setBrushSize,
},
setThresholdRange: {
commandFn: actions.setThresholdRange,
},
};
return {
extensions/cornerstone-dicom-sr/package.json
+3 -3
View File
@@ -46,9 +46,9 @@
},
"dependencies": {
"@babel/runtime": "^7.20.13",
"@cornerstonejs/adapters": "^3.8.2",
"@cornerstonejs/core": "^3.8.2",
"@cornerstonejs/tools": "^3.8.2",
"@cornerstonejs/adapters": "^3.8.4",
"@cornerstonejs/core": "^3.8.4",
"@cornerstonejs/tools": "^3.8.4",
"classnames": "^2.3.2"
}
}
extensions/cornerstone-dynamic-volume/package.json
+2 -2
View File
@@ -42,8 +42,8 @@
},
"dependencies": {
"@babel/runtime": "^7.20.13",
"@cornerstonejs/core": "^3.8.2",
"@cornerstonejs/tools": "^3.8.2",
"@cornerstonejs/core": "^3.8.4",
"@cornerstonejs/tools": "^3.8.4",
"classnames": "^2.3.2"
}
}
extensions/cornerstone/package.json
+7 -7
View File
@@ -38,7 +38,7 @@
"@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
"@cornerstonejs/codec-openjpeg": "^1.2.4",
"@cornerstonejs/codec-openjph": "^2.4.5",
"@cornerstonejs/dicom-image-loader": "^3.8.2",
"@cornerstonejs/dicom-image-loader": "^3.8.4",
"@ohif/core": "3.10.0-beta.144",
"@ohif/ui": "3.10.0-beta.144",
"dcmjs": "*",
@@ -51,12 +51,12 @@
},
"dependencies": {
"@babel/runtime": "^7.20.13",
"@cornerstonejs/adapters": "^3.8.2",
"@cornerstonejs/ai": "^3.8.2",
"@cornerstonejs/core": "^3.8.2",
"@cornerstonejs/labelmap-interpolation": "^3.8.2",
"@cornerstonejs/polymorphic-segmentation": "^3.8.2",
"@cornerstonejs/tools": "^3.8.2",
"@cornerstonejs/adapters": "^3.8.4",
"@cornerstonejs/ai": "^3.8.4",
"@cornerstonejs/core": "^3.8.4",
"@cornerstonejs/labelmap-interpolation": "^3.8.4",
"@cornerstonejs/polymorphic-segmentation": "^3.8.4",
"@cornerstonejs/tools": "^3.8.4",
"@itk-wasm/morphological-contour-interpolation": "1.1.0",
"@kitware/vtk.js": "32.12.0",
"html2canvas": "^1.4.1",
extensions/cornerstone/src/commandsModule.ts
+83 -1
View File
@@ -10,7 +10,6 @@ import {
ToolGroupManager,
Enums,
utilities as cstUtils,
ReferenceLinesTool,
annotation,
Types as ToolTypes,
} from '@cornerstonejs/tools';
@@ -43,6 +42,8 @@ const toggleSyncFunctions = {
voi: toggleVOISliceSync,
};
const { segmentation: segmentationUtils } = cstUtils;
const getLabelmapTools = ({ toolGroupService }) => {
const labelmapTools = [];
const toolGroupIds = toolGroupService.getToolGroupIds();
@@ -155,6 +156,8 @@ function commandsModule({
}
);
measurement.annotationUID = annotation.annotationUID;
// Update segmentation stats
const updatedSegmentation = updateSegmentBidirectionalStats({
segmentationId: targetId,
@@ -172,6 +175,14 @@ function commandsModule({
});
}
});
// get the active segmentIndex bidirectional annotation and jump to it
const activeBidirectional = bidirectionalData.find(
measurement => measurement.segmentIndex === targetIndex
);
commandsManager.run('jumpToMeasurement', {
uid: activeBidirectional.annotationUID,
});
},
interpolateLabelmap: () => {
const { segmentationId, segmentIndex } = _getActiveSegmentationInfo();
@@ -1630,6 +1641,72 @@ function commandsModule({
segmentAI.initViewport(viewport);
}
},
setBrushSize: ({ value, toolNames }) => {
const brushSize = Number(value);
toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
if (toolNames?.length === 0) {
segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize);
} else {
toolNames?.forEach(toolName => {
segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize, toolName);
});
}
});
},
setThresholdRange: ({
value,
toolNames = [
'ThresholdCircularBrush',
'ThresholdSphereBrush',
'ThresholdCircularBrushDynamic',
'ThresholdSphereBrushDynamic',
],
}) => {
const toolGroupIds = toolGroupService.getToolGroupIds();
if (!toolGroupIds?.length) {
return;
}
for (const toolGroupId of toolGroupIds) {
const toolGroup = toolGroupService.getToolGroup(toolGroupId);
toolNames?.forEach(toolName => {
toolGroup.setToolConfiguration(toolName, {
threshold: {
range: value,
},
});
});
}
},
increaseBrushSize: () => {
const toolGroupIds = toolGroupService.getToolGroupIds();
if (!toolGroupIds?.length) {
return;
}
for (const toolGroupId of toolGroupIds) {
const brushSize = segmentationUtils.getBrushSizeForToolGroup(toolGroupId);
segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize + 3);
}
},
decreaseBrushSize: () => {
const toolGroupIds = toolGroupService.getToolGroupIds();
if (!toolGroupIds?.length) {
return;
}
for (const toolGroupId of toolGroupIds) {
const brushSize = segmentationUtils.getBrushSizeForToolGroup(toolGroupId);
segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize - 3);
}
},
addNewSegment: () => {
const { segmentationService } = servicesManager.services;
const { activeViewportId } = viewportGridService.getState();
const activeSegmentation = segmentationService.getActiveSegmentation(activeViewportId);
segmentationService.addSegment(activeSegmentation.segmentationId);
},
};
const definitions = {
@@ -1903,6 +1980,11 @@ function commandsModule({
toggleLabelmapAssist: actions.toggleLabelmapAssist,
interpolateScrollForMarkerLabelmap: actions.interpolateScrollForMarkerLabelmap,
clearMarkersForMarkerLabelmap: actions.clearMarkersForMarkerLabelmap,
setBrushSize: actions.setBrushSize,
setThresholdRange: actions.setThresholdRange,
increaseBrushSize: actions.increaseBrushSize,
decreaseBrushSize: actions.decreaseBrushSize,
addNewSegment: actions.addNewSegment,
};
return {
extensions/cornerstone/src/customizations/CustomDropdownMenuContent.tsx
+36 -7
View File
@@ -95,24 +95,53 @@ export const CustomDropdownMenuContent = () => {
<DropdownMenuSub>
<DropdownMenuSubTrigger className="pl-1">
<Icons.Export className="text-foreground" />
<span className="pl-2">{t('Export & Download')}</span>
<span className="pl-2">{t('Download & Export')}</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem onClick={() => actions.downloadCSVSegmentationReport(segmentationId)}>
{t('Download CSV Report')}
<DropdownMenuLabel className="flex items-center pl-0">
<Icons.Download className="h-5 w-5" />
<span className="pl-1">{t('Download')}</span>
</DropdownMenuLabel>
<DropdownMenuItem
onClick={e => {
e.preventDefault();
actions.downloadCSVSegmentationReport(segmentationId);
}}
>
{t('CSV Report')}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => actions.storeSegmentation(segmentationId)}
onClick={e => {
e.preventDefault();
actions.onSegmentationDownload(segmentationId);
}}
disabled={!allowExport}
>
{t('Export DICOM SEG')}
{t('DICOM SEG')}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => actions.onSegmentationDownload(segmentationId)}
onClick={e => {
e.preventDefault();
actions.onSegmentationDownloadRTSS(segmentationId);
}}
disabled={!allowExport}
>
{t('Download DICOM SEG')}
{t('DICOM RTSS')}
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuLabel className="flex items-center pl-0">
<Icons.Export className="h-5 w-5" />
<span className="pl-1 pt-1">{t('Export')}</span>
</DropdownMenuLabel>
<DropdownMenuItem
onClick={e => {
e.preventDefault();
actions.storeSegmentation(segmentationId);
}}
disabled={!allowExport}
>
{t('DICOM SEG')}
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
extensions/cornerstone/src/init.tsx
+13 -38
View File
@@ -39,7 +39,10 @@ import { useLutPresentationStore } from './stores/useLutPresentationStore';
import { usePositionPresentationStore } from './stores/usePositionPresentationStore';
import { useSegmentationPresentationStore } from './stores/useSegmentationPresentationStore';
import { imageRetrieveMetadataProvider } from '@cornerstonejs/core/utilities';
import { updateSegmentationStats } from './utils/updateSegmentationStats';
import {
setupSegmentationDataModifiedHandler,
setupSegmentationModifiedHandler,
} from './utils/segmentationHandlers';
const { registerColormap } = csUtilities.colormap;
@@ -189,44 +192,16 @@ export default async function init({
});
});
segmentationService.subscribeDebounced(
segmentationService.EVENTS.SEGMENTATION_DATA_MODIFIED,
async ({ segmentationId }) => {
const segmentation = segmentationService.getSegmentation(segmentationId);
const readableText = customizationService.getCustomization('panelSegmentation.readableText');
const updatedSegmentation = await updateSegmentationStats({
segmentation,
segmentationId,
readableText,
});
// Setup segmentation event handlers
setupSegmentationDataModifiedHandler({
segmentationService,
customizationService,
commandsManager,
});
if (updatedSegmentation) {
segmentationService.addOrUpdateSegmentation({
segmentationId,
segments: updatedSegmentation.segments,
});
}
// Check for segments with bidirectional measurements and update them
if (segmentation) {
const segmentIndices = Object.keys(segmentation.segments)
.map(index => parseInt(index))
.filter(index => index > 0);
for (const segmentIndex of segmentIndices) {
const segment = segmentation.segments[segmentIndex];
if (segment?.cachedStats?.namedStats?.bidirectional) {
// Run the command to update the bidirectional measurement
commandsManager.runCommand('runSegmentBidirectional', {
segmentationId,
segmentIndex,
});
}
}
}
},
1000
);
setupSegmentationModifiedHandler({
segmentationService,
});
// When a custom image load is performed, update the relevant viewports
hangingProtocolService.subscribe(
extensions/cornerstone/src/services/SegmentationService/SegmentationService.ts
+11
View File
@@ -602,10 +602,16 @@ class SegmentationService extends PubSubService {
const segments: { [segmentIndex: string]: cstTypes.Segment } = {};
let segmentsCachedStats = {};
// Create colorLUT array for RT structures
const colorLUT = [[0, 0, 0, 0]]; // First entry is transparent for index 0
// Process each segment similarly to the SEG function
for (const rtStructData of allRTStructData) {
const { data, id, color, segmentIndex, geometryId } = rtStructData;
// Add the color to the colorLUT array
colorLUT.push(color);
try {
const geometry = await geometryLoader.createAndCacheGeometry(geometryId, {
geometryData: {
@@ -647,6 +653,11 @@ class SegmentationService extends PubSubService {
}
}
// Create and register the colorLUT
const colorLUTIndex = getNextColorLUTIndex();
addColorLUT(colorLUT, colorLUTIndex);
this._segmentationIdToColorLUTIndexMap.set(segmentationId, colorLUTIndex);
// Assign processed segments to segmentation config
segmentation.config.segments = segments;
extensions/cornerstone/src/services/SyncGroupService/createHydrateSegmentationSynchronizer.ts
-1
View File
@@ -53,7 +53,6 @@ const segmentationRepresentationModifiedCallback = async (
const targetFrameOfReferenceUID = viewport.getFrameOfReferenceUID();
if (!targetFrameOfReferenceUID) {
console.debug('No frame of reference UID found for the target viewport');
return;
}
extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts
+7 -5
View File
@@ -846,13 +846,17 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
if (addOverlayFn) {
addOverlayFn();
}
viewport.render();
volumesProperties.forEach(({ properties, volumeId }) => {
viewport.setProperties(properties, volumeId);
setTimeout(() => {
// seems like a hack but we need the actor to be ready first before
// we set the properties
viewport.setProperties(properties, volumeId);
viewport.render();
}, 0);
});
viewport.render();
this.setPresentations(viewport.id, presentations, viewportInfo);
if (!presentations.positionPresentation) {
@@ -865,8 +869,6 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
}
}
viewport.render();
this._broadcastEvent(this.EVENTS.VIEWPORT_VOLUMES_CHANGED, {
viewportInfo,
});
extensions/cornerstone/src/utils/colormaps.js
-12
View File
@@ -2,7 +2,6 @@ const colormaps = [
{
ColorSpace: 'RGB',
Name: 'Grayscale',
name: 'Grayscale',
NanColor: [1, 0, 0],
RGBPoints: [0, 0, 0, 0, 1, 1, 1, 1],
description: 'Grayscale',
@@ -10,7 +9,6 @@ const colormaps = [
{
ColorSpace: 'RGB',
Name: 'X Ray',
name: 'X Ray',
NanColor: [1, 0, 0],
RGBPoints: [0, 1, 1, 1, 1, 0, 0, 0],
description: 'X Ray',
@@ -18,7 +16,6 @@ const colormaps = [
{
ColorSpace: 'RGB',
Name: 'hsv',
name: 'hsv',
RGBPoints: [
-1, 1, 0, 0, -0.666666, 1, 0, 1, -0.333333, 0, 0, 1, 0, 0, 1, 1, 0.33333, 0, 1, 0, 0.66666, 1,
1, 0, 1, 1, 0, 0,
@@ -28,7 +25,6 @@ const colormaps = [
{
ColorSpace: 'RGB',
Name: 'hot_iron',
name: 'hot_iron',
RGBPoints: [
0.0, 0.0039215686, 0.0039215686, 0.0156862745, 0.00392156862745098, 0.0039215686,
0.0039215686, 0.0156862745, 0.00784313725490196, 0.0039215686, 0.0039215686, 0.031372549,
@@ -224,7 +220,6 @@ const colormaps = [
{
ColorSpace: 'RGB',
Name: 'red_hot',
name: 'red_hot',
RGBPoints: [
0.0, 0.0, 0.0, 0.0, 0.00392156862745098, 0.0, 0.0, 0.0, 0.00784313725490196, 0.0, 0.0, 0.0,
0.011764705882352941, 0.0, 0.0, 0.0, 0.01568627450980392, 0.0039215686, 0.0039215686,
@@ -359,7 +354,6 @@ const colormaps = [
{
ColorSpace: 'RGB',
Name: 's_pet',
name: 's_pet',
RGBPoints: [
0.0, 0.0156862745, 0.0039215686, 0.0156862745, 0.00392156862745098, 0.0156862745,
0.0039215686, 0.0156862745, 0.00784313725490196, 0.0274509804, 0.0039215686, 0.031372549,
@@ -553,7 +547,6 @@ const colormaps = [
{
ColorSpace: 'RGB',
Name: 'perfusion',
name: 'perfusion',
RGBPoints: [
0.0, 0.0, 0.0, 0.0, 0.00392156862745098, 0.0078431373, 0.0235294118, 0.0235294118,
0.00784313725490196, 0.0078431373, 0.031372549, 0.0470588235, 0.011764705882352941,
@@ -733,7 +726,6 @@ const colormaps = [
{
ColorSpace: 'RGB',
Name: 'rainbow_2',
name: 'rainbow_2',
RGBPoints: [
0.0, 0.0, 0.0, 0.0, 0.00392156862745098, 0.0156862745, 0.0, 0.0117647059, 0.00784313725490196,
0.0352941176, 0.0, 0.0274509804, 0.011764705882352941, 0.0509803922, 0.0, 0.0392156863,
@@ -872,7 +864,6 @@ const colormaps = [
{
ColorSpace: 'RGB',
Name: 'suv',
name: 'suv',
RGBPoints: [
0.0, 1.0, 1.0, 1.0, 0.00392156862745098, 1.0, 1.0, 1.0, 0.00784313725490196, 1.0, 1.0, 1.0,
0.011764705882352941, 1.0, 1.0, 1.0, 0.01568627450980392, 1.0, 1.0, 1.0, 0.0196078431372549,
@@ -1019,7 +1010,6 @@ const colormaps = [
{
ColorSpace: 'RGB',
Name: 'ge_256',
name: 'ge_256',
RGBPoints: [
0.0, 0.0039215686, 0.0078431373, 0.0078431373, 0.00392156862745098, 0.0039215686,
0.0078431373, 0.0078431373, 0.00784313725490196, 0.0039215686, 0.0078431373, 0.0117647059,
@@ -1211,7 +1201,6 @@ const colormaps = [
{
ColorSpace: 'RGB',
Name: 'ge',
name: 'ge',
RGBPoints: [
0.0, 0.0078431373, 0.0078431373, 0.0078431373, 0.00392156862745098, 0.0078431373,
0.0078431373, 0.0078431373, 0.00784313725490196, 0.0078431373, 0.0078431373, 0.0078431373,
@@ -1404,7 +1393,6 @@ const colormaps = [
{
ColorSpace: 'RGB',
Name: 'siemens',
name: 'siemens',
RGBPoints: [
0.0, 0.0078431373, 0.0039215686, 0.1254901961, 0.00392156862745098, 0.0078431373,
0.0039215686, 0.1254901961, 0.00784313725490196, 0.0078431373, 0.0039215686, 0.1882352941,
extensions/cornerstone/src/utils/index.ts
+6
View File
@@ -1,9 +1,15 @@
import { handleSegmentChange } from './segmentUtils';
import { isReferenceViewable } from './isReferenceViewable';
import {
setupSegmentationDataModifiedHandler,
setupSegmentationModifiedHandler,
} from './segmentationHandlers';
const utils = {
handleSegmentChange,
isReferenceViewable,
setupSegmentationDataModifiedHandler,
setupSegmentationModifiedHandler,
};
export default utils;
extensions/cornerstone/src/utils/measurementServiceMappings/Bidirectional.ts
+1 -1
View File
@@ -84,7 +84,7 @@ const Bidirectional = {
function getMappedAnnotations(annotation, displaySetService) {
const { metadata, data } = annotation;
const { cachedStats } = data;
const { referencedImageId, referencedSeriesInstanceUID } = metadata;
const { referencedImageId } = metadata;
const targets = Object.keys(cachedStats);
if (!targets.length) {
extensions/cornerstone/src/utils/measurementServiceMappings/CircleROI.ts
+7
View File
@@ -93,6 +93,7 @@ function getMappedAnnotations(annotation, displaySetService) {
}
const annotations = [];
const addedModalities = new Set();
Object.keys(cachedStats).forEach(targetId => {
const targetStats = cachedStats[targetId];
@@ -108,6 +109,12 @@ function getMappedAnnotations(annotation, displaySetService) {
const { mean, stdDev, max, area, Modality, areaUnit, modalityUnit, perimeter, radiusUnit } =
targetStats;
if (Modality && addedModalities.has(Modality)) {
return;
}
addedModalities.add(Modality);
annotations.push({
SeriesInstanceUID,
SOPInstanceUID,
extensions/cornerstone/src/utils/measurementServiceMappings/EllipticalROI.ts
+12
View File
@@ -93,6 +93,8 @@ function getMappedAnnotations(annotation, displaySetService) {
}
const annotations = [];
const addedModalities = new Set();
Object.keys(cachedStats).forEach(targetId => {
const targetStats = cachedStats[targetId];
@@ -107,6 +109,16 @@ function getMappedAnnotations(annotation, displaySetService) {
const { SeriesNumber } = displaySet;
const { mean, stdDev, max, area, Modality, areaUnit, modalityUnit } = targetStats;
// Skip if we've already added this modality
if (Modality && addedModalities.has(Modality)) {
return;
}
// Add modality to the set if it exists
if (Modality) {
addedModalities.add(Modality);
}
annotations.push({
SeriesInstanceUID,
SOPInstanceUID,
extensions/cornerstone/src/utils/measurementServiceMappings/RectangleROI.ts
+12
View File
@@ -92,6 +92,8 @@ function getMappedAnnotations(annotation, displaySetService) {
}
const annotations = [];
const addedModalities = new Set();
Object.keys(cachedStats).forEach(targetId => {
const targetStats = cachedStats[targetId];
@@ -106,6 +108,16 @@ function getMappedAnnotations(annotation, displaySetService) {
const { SeriesNumber } = displaySet;
const { mean, stdDev, max, area, Modality, modalityUnit, areaUnit } = targetStats;
// Skip if we've already added this modality
if (Modality && addedModalities.has(Modality)) {
return;
}
// Add modality to the set if it exists
if (Modality) {
addedModalities.add(Modality);
}
annotations.push({
SeriesInstanceUID,
SOPInstanceUID,
extensions/cornerstone/src/utils/segmentationHandlers.ts
+93
View File
@@ -0,0 +1,93 @@
import * as cornerstoneTools from '@cornerstonejs/tools';
import { updateSegmentationStats } from './updateSegmentationStats';
/**
* Sets up the handler for segmentation data modification events
*/
export function setupSegmentationDataModifiedHandler({
segmentationService,
customizationService,
commandsManager,
}) {
segmentationService.subscribeDebounced(
segmentationService.EVENTS.SEGMENTATION_DATA_MODIFIED,
async ({ segmentationId }) => {
const segmentation = segmentationService.getSegmentation(segmentationId);
const readableText = customizationService.getCustomization('panelSegmentation.readableText');
// Check for segments with bidirectional measurements and update them
const segmentIndices = Object.keys(segmentation.segments)
.map(index => parseInt(index))
.filter(index => index > 0);
for (const segmentIndex of segmentIndices) {
const segment = segmentation.segments[segmentIndex];
if (segment?.cachedStats?.namedStats?.bidirectional) {
// Run the command to update the bidirectional measurement
commandsManager.runCommand('runSegmentBidirectional', {
segmentationId,
segmentIndex,
});
}
}
const updatedSegmentation = await updateSegmentationStats({
segmentation,
segmentationId,
readableText,
});
if (updatedSegmentation) {
segmentationService.addOrUpdateSegmentation({
segmentationId,
segments: updatedSegmentation.segments,
});
}
},
1000
);
}
/**
* Sets up the handler for segmentation modification events
*/
export function setupSegmentationModifiedHandler({ segmentationService }) {
segmentationService.subscribe(
segmentationService.EVENTS.SEGMENTATION_MODIFIED,
async ({ segmentationId }) => {
const segmentation = segmentationService.getSegmentation(segmentationId);
const annotationState = cornerstoneTools.annotation.state.getAllAnnotations();
const bidirectionalAnnotations = annotationState.filter(
annotation =>
annotation.metadata.toolName === cornerstoneTools.SegmentBidirectionalTool.toolName
);
let toRemoveUIDs = [];
if (!segmentation) {
toRemoveUIDs = bidirectionalAnnotations.map(
annotation => annotation.metadata.segmentationId === segmentationId
);
return;
} else {
const segmentIndices = Object.keys(segmentation.segments)
.map(index => parseInt(index))
.filter(index => index > 0);
// check if there is a bidirectional data that exists but the segment
// does not exists anymore we need to remove the bidirectional data
const bidirectionalAnnotationsToRemove = bidirectionalAnnotations.filter(
annotation =>
annotation.metadata.segmentationId === segmentationId &&
!segmentIndices.includes(annotation.metadata.segmentIndex)
);
toRemoveUIDs = bidirectionalAnnotationsToRemove.map(annotation => annotation.annotationUID);
}
toRemoveUIDs.forEach(uid => {
cornerstoneTools.annotation.state.removeAnnotation(uid);
});
}
);
}
extensions/default/src/Panels/StudyBrowser/PanelStudyBrowser.tsx
+202 -66
View File
@@ -12,33 +12,48 @@ import { CallbackCustomization } from 'platform/core/src/types';
const { sortStudyInstances, formatDate, createStudyBrowserTabs } = utils;
const thumbnailNoImageModalities = [
'SR',
'SEG',
'SM',
'RTSTRUCT',
'RTPLAN',
'RTDOSE',
'DOC',
'OT',
'PMAP',
];
/**
*
* @param {*} param0
* Study Browser component that displays and manages studies and their display sets
*/
function PanelStudyBrowser({
getImageSrc,
getStudiesForPatientByMRN,
requestDisplaySetCreationForStudy,
dataSource,
customMapDisplaySets,
onClickUntrack,
}) {
const { servicesManager, commandsManager } = useSystem();
const { displaySetService, customizationService } = servicesManager.services;
const navigate = useNavigate();
const studyMode = customizationService.getCustomization('studyBrowser.studyMode') || 'all';
const internalImageViewer = useImageViewer();
const StudyInstanceUIDs = internalImageViewer.StudyInstanceUIDs;
// Normally you nest the components so the tree isn't so deep, and the data
// doesn't have to have such an intense shape. This works well enough for now.
// Tabs --> Studies --> DisplaySets --> Thumbnails
const { StudyInstanceUIDs } = useImageViewer();
const [{ activeViewportId, viewports, isHangingProtocolLayout }] = useViewportGrid();
const [activeTabName, setActiveTabName] = useState('all');
const [activeTabName, setActiveTabName] = useState(studyMode);
const [expandedStudyInstanceUIDs, setExpandedStudyInstanceUIDs] = useState([
...StudyInstanceUIDs,
]);
const [hasLoadedViewports, setHasLoadedViewports] = useState(false);
const [studyDisplayList, setStudyDisplayList] = useState([]);
const [displaySets, setDisplaySets] = useState([]);
const [displaySetsLoadingState, setDisplaySetsLoadingState] = useState({});
const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({});
const [jumpToDisplaySet, setJumpToDisplaySet] = useState(null);
const [viewPresets, setViewPresets] = useState(
customizationService.getCustomization('studyBrowser.viewPresets')
@@ -65,6 +80,8 @@ function PanelStudyBrowser({
setViewPresets(newViewPresets);
};
const mapDisplaySetsWithState = customMapDisplaySets || _mapDisplaySets;
const onDoubleClickThumbnailHandler = useCallback(
async displaySetInstanceUID => {
const customHandler = customizationService.getCustomization(
@@ -121,7 +138,7 @@ function PanelStudyBrowser({
const actuallyMappedStudies = mappedStudies.map(qidoStudy => {
return {
studyInstanceUid: qidoStudy.StudyInstanceUID,
date: formatDate(qidoStudy.StudyDate),
date: formatDate(qidoStudy.StudyDate) || '',
description: qidoStudy.StudyDescription,
modalities: qidoStudy.ModalitiesInStudy,
numInstances: Number(qidoStudy.NumInstances),
@@ -142,7 +159,7 @@ function PanelStudyBrowser({
StudyInstanceUIDs.forEach(sid => fetchStudiesForPatient(sid));
}, [StudyInstanceUIDs, dataSource, getStudiesForPatientByMRN, navigate]);
// // ~~ Initial Thumbnails
// ~~ Initial Thumbnails
useEffect(() => {
if (!hasLoadedViewports) {
if (activeViewportId) {
@@ -150,19 +167,35 @@ function PanelStudyBrowser({
// so wait a bit of time to allow the viewports preferential loading
// which improves user experience of responsiveness significantly on slower
// systems.
window.setTimeout(() => setHasLoadedViewports(true), 250);
const delayMs = 250 + displaySetService.getActiveDisplaySets().length * 10;
window.setTimeout(() => setHasLoadedViewports(true), delayMs);
}
return;
}
const currentDisplaySets = displaySetService.activeDisplaySets;
let currentDisplaySets = displaySetService.activeDisplaySets;
// filter non based on the list of modalities that are supported by cornerstone
currentDisplaySets = currentDisplaySets.filter(
ds => !thumbnailNoImageModalities.includes(ds.Modality)
);
if (!currentDisplaySets.length) {
return;
}
currentDisplaySets.forEach(async dSet => {
const newImageSrcEntry = {};
const displaySet = displaySetService.getDisplaySetByUID(dSet.displaySetInstanceUID);
const imageIds = dataSource.getImageIdsForDisplaySet(displaySet);
const imageId = imageIds[Math.floor(imageIds.length / 2)];
const imageId = getImageIdForThumbnail(displaySet, imageIds);
// TODO: Is it okay that imageIds are not returned here for SR displaySets?
if (!imageId || displaySet?.unsupported) {
return;
}
// When the image arrives, render it and store the result in the thumbnailImgSrcMap
let { thumbnailSrc } = displaySet;
if (!thumbnailSrc && displaySet.getThumbnailSrc) {
thumbnailSrc = await displaySet.getThumbnailSrc();
@@ -172,39 +205,40 @@ function PanelStudyBrowser({
displaySet.thumbnailSrc = thumbnailSrc;
}
newImageSrcEntry[dSet.displaySetInstanceUID] = thumbnailSrc;
// TODO: Is it okay that imageIds are not returned here for SR displaySets?
if (!imageId || displaySet?.unsupported) {
return;
}
// When the image arrives, render it and store the result in the thumbnailImgSrcMap
try {
newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(imageId);
} catch (e) {
// This can happen for thumbnails and generate huge log sets if logged.
return;
}
setThumbnailImageSrcMap(prevState => {
return { ...prevState, ...newImageSrcEntry };
});
});
}, [
StudyInstanceUIDs,
dataSource,
displaySetService,
getImageSrc,
hasLoadedViewports,
activeViewportId,
]);
}, [displaySetService, dataSource, getImageSrc, activeViewportId, hasLoadedViewports]);
// ~~ displaySets
useEffect(() => {
// TODO: Are we sure `activeDisplaySets` will always be accurate?
const currentDisplaySets = displaySetService.activeDisplaySets;
const mappedDisplaySets = _mapDisplaySets(currentDisplaySets, thumbnailImageSrcMap);
sortStudyInstances(mappedDisplaySets);
if (!currentDisplaySets.length) {
return;
}
const mappedDisplaySets = mapDisplaySetsWithState(
currentDisplaySets,
displaySetsLoadingState,
thumbnailImageSrcMap,
viewports
);
if (!customMapDisplaySets) {
sortStudyInstances(mappedDisplaySets);
}
setDisplaySets(mappedDisplaySets);
}, [StudyInstanceUIDs, thumbnailImageSrcMap, displaySetService]);
}, [
displaySetService.activeDisplaySets,
displaySetsLoadingState,
viewports,
thumbnailImageSrcMap,
customMapDisplaySets,
]);
// ~~ subscriptions --> displaySets
useEffect(() => {
@@ -212,30 +246,41 @@ function PanelStudyBrowser({
const SubscriptionDisplaySetsAdded = displaySetService.subscribe(
displaySetService.EVENTS.DISPLAY_SETS_ADDED,
data => {
// for some reason this breaks thumbnail loading
// if (!hasLoadedViewports) {
// return;
// }
const { displaySetsAdded } = data;
if (!hasLoadedViewports) {
return;
}
const { displaySetsAdded, options } = data;
displaySetsAdded.forEach(async dSet => {
const displaySetInstanceUID = dSet.displaySetInstanceUID;
const newImageSrcEntry = {};
const displaySet = displaySetService.getDisplaySetByUID(dSet.displaySetInstanceUID);
const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
if (displaySet?.unsupported) {
return;
}
if (options?.madeInClient) {
setJumpToDisplaySet(displaySetInstanceUID);
}
const imageIds = dataSource.getImageIdsForDisplaySet(displaySet);
const imageId = imageIds[Math.floor(imageIds.length / 2)];
const imageId = getImageIdForThumbnail(displaySet, imageIds);
// TODO: Is it okay that imageIds are not returned here for SR displaysets?
if (!imageId) {
return;
}
// When the image arrives, render it and store the result in the thumbnailImgSrcMap
newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(
imageId,
dSet.initialViewport
);
let { thumbnailSrc } = displaySet;
if (!thumbnailSrc && displaySet.getThumbnailSrc) {
thumbnailSrc = await displaySet.getThumbnailSrc();
}
if (!thumbnailSrc) {
thumbnailSrc = await getImageSrc(imageId);
displaySet.thumbnailSrc = thumbnailSrc;
}
newImageSrcEntry[displaySetInstanceUID] = thumbnailSrc;
setThumbnailImageSrcMap(prevState => {
return { ...prevState, ...newImageSrcEntry };
@@ -247,7 +292,7 @@ function PanelStudyBrowser({
return () => {
SubscriptionDisplaySetsAdded.unsubscribe();
};
}, [getImageSrc, dataSource, displaySetService]);
}, [displaySetService, dataSource, getImageSrc, hasLoadedViewports]);
useEffect(() => {
// TODO: Will this always hold _all_ the displaySets we care about?
@@ -255,7 +300,17 @@ function PanelStudyBrowser({
const SubscriptionDisplaySetsChanged = displaySetService.subscribe(
displaySetService.EVENTS.DISPLAY_SETS_CHANGED,
changedDisplaySets => {
const mappedDisplaySets = _mapDisplaySets(changedDisplaySets, thumbnailImageSrcMap);
const mappedDisplaySets = mapDisplaySetsWithState(
changedDisplaySets,
displaySetsLoadingState,
thumbnailImageSrcMap,
viewports
);
if (!customMapDisplaySets) {
sortStudyInstances(mappedDisplaySets);
}
setDisplaySets(mappedDisplaySets);
}
);
@@ -263,11 +318,17 @@ function PanelStudyBrowser({
const SubscriptionDisplaySetMetaDataInvalidated = displaySetService.subscribe(
displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED,
() => {
const mappedDisplaySets = _mapDisplaySets(
const mappedDisplaySets = mapDisplaySetsWithState(
displaySetService.getActiveDisplaySets(),
thumbnailImageSrcMap
displaySetsLoadingState,
thumbnailImageSrcMap,
viewports
);
if (!customMapDisplaySets) {
sortStudyInstances(mappedDisplaySets);
}
setDisplaySets(mappedDisplaySets);
}
);
@@ -276,7 +337,13 @@ function PanelStudyBrowser({
SubscriptionDisplaySetsChanged.unsubscribe();
SubscriptionDisplaySetMetaDataInvalidated.unsubscribe();
};
}, [StudyInstanceUIDs, thumbnailImageSrcMap, displaySetService]);
}, [
displaySetsLoadingState,
thumbnailImageSrcMap,
viewports,
displaySetService,
customMapDisplaySets,
]);
const tabs = createStudyBrowserTabs(StudyInstanceUIDs, studyDisplayList, displaySets);
@@ -284,8 +351,7 @@ function PanelStudyBrowser({
function _handleStudyClick(StudyInstanceUID) {
const shouldCollapseStudy = expandedStudyInstanceUIDs.includes(StudyInstanceUID);
const updatedExpandedStudyInstanceUIDs = shouldCollapseStudy
? // eslint-disable-next-line prettier/prettier
[...expandedStudyInstanceUIDs.filter(stdyUid => stdyUid !== StudyInstanceUID)]
? [...expandedStudyInstanceUIDs.filter(stdyUid => stdyUid !== StudyInstanceUID)]
: [...expandedStudyInstanceUIDs, StudyInstanceUID];
setExpandedStudyInstanceUIDs(updatedExpandedStudyInstanceUIDs);
@@ -296,6 +362,43 @@ function PanelStudyBrowser({
}
}
useEffect(() => {
if (jumpToDisplaySet) {
// Get element by displaySetInstanceUID
const displaySetInstanceUID = jumpToDisplaySet;
const element = document.getElementById(`thumbnail-${displaySetInstanceUID}`);
if (element && typeof element.scrollIntoView === 'function') {
// TODO: Any way to support IE here?
element.scrollIntoView({ behavior: 'smooth' });
setJumpToDisplaySet(null);
}
}
}, [jumpToDisplaySet, expandedStudyInstanceUIDs, activeTabName]);
useEffect(() => {
if (!jumpToDisplaySet) {
return;
}
const displaySetInstanceUID = jumpToDisplaySet;
// Set the activeTabName and expand the study
const thumbnailLocation = _findTabAndStudyOfDisplaySet(displaySetInstanceUID, tabs);
if (!thumbnailLocation) {
console.warn('jumpToThumbnail: displaySet thumbnail not found.');
return;
}
const { tabName, StudyInstanceUID } = thumbnailLocation;
setActiveTabName(tabName);
const studyExpanded = expandedStudyInstanceUIDs.includes(StudyInstanceUID);
if (!studyExpanded) {
const updatedExpandedStudyInstanceUIDs = [...expandedStudyInstanceUIDs, StudyInstanceUID];
setExpandedStudyInstanceUIDs(updatedExpandedStudyInstanceUIDs);
}
}, [expandedStudyInstanceUIDs, jumpToDisplaySet, tabs]);
const activeDisplaySetInstanceUIDs = viewports.get(activeViewportId)?.displaySetInstanceUIDs;
return (
@@ -323,10 +426,11 @@ function PanelStudyBrowser({
onClickTab={clickedTabName => {
setActiveTabName(clickedTabName);
}}
onClickUntrack={onClickUntrack}
onClickThumbnail={() => {}}
onDoubleClickThumbnail={onDoubleClickThumbnailHandler}
activeDisplaySetInstanceUIDs={activeDisplaySetInstanceUIDs}
showSettings={actionIcons.find(icon => icon.id === 'settings').value}
showSettings={actionIcons.find(icon => icon.id === 'settings')?.value}
viewPresets={viewPresets}
ThumbnailMenuItems={MoreDropdownMenu({
commandsManager,
@@ -367,35 +471,36 @@ function _mapDataSourceStudies(studies) {
});
}
function _mapDisplaySets(displaySets, thumbnailImageSrcMap) {
function _mapDisplaySets(displaySets, displaySetLoadingState, thumbnailImageSrcMap, viewports) {
const thumbnailDisplaySets = [];
const thumbnailNoImageDisplaySets = [];
displaySets
.filter(ds => !ds.excludeFromThumbnailBrowser)
.forEach(ds => {
const { thumbnailSrc, displaySetInstanceUID } = ds; // thumbnailImageSrcMap[ds.displaySetInstanceUID];
const { thumbnailSrc, displaySetInstanceUID } = ds;
const componentType = _getComponentType(ds);
const array =
componentType === 'thumbnail' ? thumbnailDisplaySets : thumbnailNoImageDisplaySets;
const loadingProgress = displaySetLoadingState?.[displaySetInstanceUID];
array.push({
displaySetInstanceUID: ds.displaySetInstanceUID,
displaySetInstanceUID,
description: ds.SeriesDescription || '',
seriesNumber: ds.SeriesNumber,
modality: ds.Modality,
seriesDate: ds.SeriesDate,
seriesTime: ds.SeriesTime,
numInstances: parseInt(ds.numImageFrames),
seriesDate: formatDate(ds.SeriesDate),
numInstances: ds.numImageFrames,
loadingProgress,
countIcon: ds.countIcon,
StudyInstanceUID: ds.StudyInstanceUID,
messages: ds.messages,
StudyInstanceUID: ds.StudyInstanceUID,
componentType,
imageSrc: thumbnailSrc || thumbnailImageSrcMap[displaySetInstanceUID],
dragData: {
type: 'displayset',
displaySetInstanceUID: ds.displaySetInstanceUID,
displaySetInstanceUID,
// .. Any other data to pass
},
isHydratedForDerivedDisplaySet: ds.isHydrated,
@@ -405,13 +510,44 @@ function _mapDisplaySets(displaySets, thumbnailImageSrcMap) {
return [...thumbnailDisplaySets, ...thumbnailNoImageDisplaySets];
}
const thumbnailNoImageModalities = ['SR', 'SEG', 'SM', 'RTSTRUCT', 'RTPLAN', 'RTDOSE'];
function _getComponentType(ds) {
if (thumbnailNoImageModalities.includes(ds.Modality) || ds?.unsupported) {
// TODO probably others.
return 'thumbnailNoImage';
}
return 'thumbnail';
}
function getImageIdForThumbnail(displaySet, imageIds) {
let imageId;
if (displaySet.isDynamicVolume) {
const timePoints = displaySet.dynamicVolumeInfo.timePoints;
const middleIndex = Math.floor(timePoints.length / 2);
const middleTimePointImageIds = timePoints[middleIndex];
imageId = middleTimePointImageIds[Math.floor(middleTimePointImageIds.length / 2)];
} else {
imageId = imageIds[Math.floor(imageIds.length / 2)];
}
return imageId;
}
function _findTabAndStudyOfDisplaySet(displaySetInstanceUID, tabs) {
for (let t = 0; t < tabs.length; t++) {
const { studies } = tabs[t];
for (let s = 0; s < studies.length; s++) {
const { displaySets } = studies[s];
for (let d = 0; d < displaySets.length; d++) {
const displaySet = displaySets[d];
if (displaySet.displaySetInstanceUID === displaySetInstanceUID) {
return {
tabName: tabs[t].name,
StudyInstanceUID: studies[s].studyInstanceUid,
};
}
}
}
}
}
extensions/default/src/Panels/getStudiesForPatientByMRN.js
+14 -7
View File
@@ -1,12 +1,19 @@
async function getStudiesForPatientByMRN(dataSource, qidoForStudyUID) {
if (qidoForStudyUID && qidoForStudyUID.length && qidoForStudyUID[0].mrn) {
return dataSource.query.studies.search({
patientId: qidoForStudyUID[0].mrn,
disableWildcard: true,
});
if (!qidoForStudyUID?.length) {
return [];
}
console.log('No mrn found for', qidoForStudyUID);
return qidoForStudyUID;
const mrn = qidoForStudyUID[0].mrn;
// if not defined or empty, return the original qidoForStudyUID
if (!mrn) {
return qidoForStudyUID;
}
return dataSource.query.studies.search({
patientId: mrn,
disableWildcard: true,
});
}
export default getStudiesForPatientByMRN;
extensions/default/src/ViewerLayout/index.tsx
+14 -25
View File
@@ -55,16 +55,8 @@ function ViewerLayout({
setRightPanelClosed
);
const leftPanelRef = useRef<HTMLDivElement>(null);
const rightPanelRef = useRef<HTMLDivElement>(null);
const handleMouseEnter = () => {
if (
leftPanelRef.current?.contains(document.activeElement) ||
rightPanelRef.current?.contains(document.activeElement)
) {
(document.activeElement as HTMLElement)?.blur();
}
(document.activeElement as HTMLElement)?.blur();
};
const LoadingIndicatorProgress = customizationService.getCustomization(
@@ -79,6 +71,7 @@ function ViewerLayout({
useEffect(() => {
document.body.classList.add('bg-black');
document.body.classList.add('overflow-hidden');
return () => {
document.body.classList.remove('bg-black');
document.body.classList.remove('overflow-hidden');
@@ -165,14 +158,12 @@ function ViewerLayout({
{hasLeftPanels ? (
<>
<ResizablePanel {...resizableLeftPanelProps}>
<div ref={leftPanelRef}>
<SidePanelWithServices
side="left"
isExpanded={!leftPanelClosedState}
servicesManager={servicesManager}
{...leftPanelProps}
/>
</div>
<SidePanelWithServices
side="left"
isExpanded={!leftPanelClosedState}
servicesManager={servicesManager}
{...leftPanelProps}
/>
</ResizablePanel>
<ResizableHandle
onDragging={onHandleDragging}
@@ -204,14 +195,12 @@ function ViewerLayout({
className={resizableHandleClassName}
/>
<ResizablePanel {...resizableRightPanelProps}>
<div ref={rightPanelRef}>
<SidePanelWithServices
side="right"
isExpanded={!rightPanelClosedState}
servicesManager={servicesManager}
{...rightPanelProps}
/>
</div>
<SidePanelWithServices
side="right"
isExpanded={!rightPanelClosedState}
servicesManager={servicesManager}
{...rightPanelProps}
/>
</ResizablePanel>
</>
) : null}
extensions/measurement-tracking/package.json
+2 -2
View File
@@ -32,8 +32,8 @@
"start": "yarn run dev"
},
"peerDependencies": {
"@cornerstonejs/core": "^3.8.2",
"@cornerstonejs/tools": "^3.8.2",
"@cornerstonejs/core": "^3.8.4",
"@cornerstonejs/tools": "^3.8.4",
"@ohif/core": "3.10.0-beta.144",
"@ohif/extension-cornerstone-dicom-sr": "3.10.0-beta.144",
"@ohif/extension-default": "3.10.0-beta.144",
extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.tsx
+68 -576
View File
@@ -1,23 +1,9 @@
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import React from 'react';
import PropTypes from 'prop-types';
import { useSystem, utils } from '@ohif/core';
import { useImageViewer, Dialog, ButtonEnums } from '@ohif/ui';
import { useViewportGrid } from '@ohif/ui-next';
import { StudyBrowser } from '@ohif/ui-next';
import { useTrackedMeasurements } from '../../getContextModule';
import { Separator } from '@ohif/ui-next';
import { MoreDropdownMenu, PanelStudyBrowserHeader } from '@ohif/extension-default';
import { defaultActionIcons } from './constants';
import { useSystem } from '@ohif/core';
import PanelStudyBrowser from '@ohif/extension-default/src/Panels/StudyBrowser/PanelStudyBrowser';
import { UntrackSeriesModal } from './untrackSeriesModal';
const { formatDate, createStudyBrowserTabs } = utils;
const DIALOG_ID = {
UNTRACK_SERIES: 'untrack-series',
REJECT_REPORT: 'ds-reject-sr',
};
import { useTrackedMeasurements } from '../../getContextModule';
const thumbnailNoImageModalities = [
'SR',
@@ -32,8 +18,7 @@ const thumbnailNoImageModalities = [
];
/**
*
* @param {*} param0
* Panel component for the Study Browser with tracking capabilities
*/
export default function PanelStudyBrowserTracking({
getImageSrc,
@@ -41,404 +26,11 @@ export default function PanelStudyBrowserTracking({
requestDisplaySetCreationForStudy,
dataSource,
}) {
const { servicesManager, commandsManager } = useSystem();
const {
displaySetService,
uiDialogService,
hangingProtocolService,
uiNotificationService,
measurementService,
studyPrefetcherService,
customizationService,
uiModalService,
} = servicesManager.services;
const navigate = useNavigate();
const studyMode = customizationService.getCustomization('studyBrowser.studyMode');
const { t } = useTranslation('Common');
// Normally you nest the components so the tree isn't so deep, and the data
// doesn't have to have such an intense shape. This works well enough for now.
// Tabs --> Studies --> DisplaySets --> Thumbnails
const { StudyInstanceUIDs } = useImageViewer();
const [{ activeViewportId, viewports, isHangingProtocolLayout }, viewportGridService] =
useViewportGrid();
const { servicesManager } = useSystem();
const { displaySetService, uiModalService, measurementService } = servicesManager.services;
const [trackedMeasurements, sendTrackedMeasurementsEvent] = useTrackedMeasurements();
const [activeTabName, setActiveTabName] = useState(studyMode);
const [expandedStudyInstanceUIDs, setExpandedStudyInstanceUIDs] = useState([
...StudyInstanceUIDs,
]);
const [studyDisplayList, setStudyDisplayList] = useState([]);
const [hasLoadedViewports, setHasLoadedViewports] = useState(false);
const [displaySets, setDisplaySets] = useState([]);
const [displaySetsLoadingState, setDisplaySetsLoadingState] = useState({});
const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({});
const [jumpToDisplaySet, setJumpToDisplaySet] = useState(null);
const [viewPresets, setViewPresets] = useState(
customizationService.getCustomization('studyBrowser.viewPresets')
);
const [actionIcons, setActionIcons] = useState(defaultActionIcons);
const updateActionIconValue = actionIcon => {
actionIcon.value = !actionIcon.value;
const newActionIcons = [...actionIcons];
setActionIcons(newActionIcons);
};
const updateViewPresetValue = viewPreset => {
if (!viewPreset) {
return;
}
const newViewPresets = viewPresets.map(preset => {
preset.selected = preset.id === viewPreset.id;
return preset;
});
setViewPresets(newViewPresets);
};
const onDoubleClickThumbnailHandler = displaySetInstanceUID => {
let updatedViewports = [];
const viewportId = activeViewportId;
try {
updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
viewportId,
displaySetInstanceUID,
isHangingProtocolLayout
);
} catch (error) {
console.warn(error);
uiNotificationService.show({
title: 'Thumbnail Double Click',
message:
'The selected display sets could not be added to the viewport due to a mismatch in the Hanging Protocol rules.',
type: 'error',
duration: 3000,
});
}
viewportGridService.setDisplaySetsForViewports(updatedViewports);
};
const activeViewportDisplaySetInstanceUIDs =
viewports.get(activeViewportId)?.displaySetInstanceUIDs;
const { trackedSeries } = trackedMeasurements.context;
useEffect(() => {
setActiveTabName(studyMode);
}, [studyMode]);
// ~~ studyDisplayList
useEffect(() => {
// Fetch all studies for the patient in each primary study
async function fetchStudiesForPatient(StudyInstanceUID) {
// current study qido
const qidoForStudyUID = await dataSource.query.studies.search({
studyInstanceUid: StudyInstanceUID,
});
if (!qidoForStudyUID?.length) {
navigate('/notfoundstudy', '_self');
throw new Error('Invalid study URL');
}
let qidoStudiesForPatient = qidoForStudyUID;
// try to fetch the prior studies based on the patientID if the
// server can respond.
try {
qidoStudiesForPatient = await getStudiesForPatientByMRN(qidoForStudyUID);
} catch (error) {
console.warn(error);
}
const mappedStudies = _mapDataSourceStudies(qidoStudiesForPatient);
const actuallyMappedStudies = mappedStudies.map(qidoStudy => {
return {
studyInstanceUid: qidoStudy.StudyInstanceUID,
date: formatDate(qidoStudy.StudyDate) || t('NoStudyDate'),
description: qidoStudy.StudyDescription,
modalities: qidoStudy.ModalitiesInStudy,
numInstances: qidoStudy.NumInstances,
};
});
setStudyDisplayList(prevArray => {
const ret = [...prevArray];
for (const study of actuallyMappedStudies) {
if (!prevArray.find(it => it.studyInstanceUid === study.studyInstanceUid)) {
ret.push(study);
}
}
return ret;
});
}
StudyInstanceUIDs.forEach(sid => fetchStudiesForPatient(sid));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [StudyInstanceUIDs, getStudiesForPatientByMRN]);
// ~~ Initial Thumbnails
useEffect(() => {
if (!hasLoadedViewports) {
if (activeViewportId) {
// Once there is an active viewport id, it means the layout is ready
// so wait a bit of time to allow the viewports preferential loading
// which improves user experience of responsiveness significantly on slower
// systems.
const delayMs = 250 + displaySetService.getActiveDisplaySets().length * 10;
window.setTimeout(() => setHasLoadedViewports(true), delayMs);
}
return;
}
let currentDisplaySets = displaySetService.activeDisplaySets;
// filter non based on the list of modalities that are supported by cornerstone
currentDisplaySets = currentDisplaySets.filter(
ds => !thumbnailNoImageModalities.includes(ds.Modality)
);
if (!currentDisplaySets.length) {
return;
}
currentDisplaySets.forEach(async dSet => {
const newImageSrcEntry = {};
const displaySet = displaySetService.getDisplaySetByUID(dSet.displaySetInstanceUID);
const imageIds = dataSource.getImageIdsForDisplaySet(displaySet);
const imageId = getImageIdForThumbnail(displaySet, imageIds);
// TODO: Is it okay that imageIds are not returned here for SR displaySets?
if (!imageId || displaySet?.unsupported) {
return;
}
// When the image arrives, render it and store the result in the thumbnailImgSrcMap
let { thumbnailSrc } = displaySet;
if (!thumbnailSrc && displaySet.getThumbnailSrc) {
thumbnailSrc = await displaySet.getThumbnailSrc();
}
if (!thumbnailSrc) {
const thumbnailSrc = await getImageSrc(imageId);
displaySet.thumbnailSrc = thumbnailSrc;
}
newImageSrcEntry[dSet.displaySetInstanceUID] = thumbnailSrc;
setThumbnailImageSrcMap(prevState => {
return { ...prevState, ...newImageSrcEntry };
});
});
}, [displaySetService, dataSource, getImageSrc, activeViewportId, hasLoadedViewports]);
// ~~ displaySets
useEffect(() => {
const currentDisplaySets = displaySetService.activeDisplaySets;
if (!currentDisplaySets.length) {
return;
}
const mappedDisplaySets = _mapDisplaySets(
currentDisplaySets,
displaySetsLoadingState,
thumbnailImageSrcMap,
trackedSeries,
viewports,
viewportGridService,
dataSource,
displaySetService,
uiDialogService,
uiNotificationService
);
setDisplaySets(mappedDisplaySets);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
displaySetService.activeDisplaySets,
displaySetsLoadingState,
trackedSeries,
viewports,
dataSource,
thumbnailImageSrcMap,
]);
// -- displaySetsLoadingState
useEffect(() => {
const { unsubscribe } = studyPrefetcherService.subscribe(
studyPrefetcherService.EVENTS.DISPLAYSET_LOAD_PROGRESS,
updatedDisplaySetLoadingState => {
const { displaySetInstanceUID, loadingProgress } = updatedDisplaySetLoadingState;
setDisplaySetsLoadingState(prevState => ({
...prevState,
[displaySetInstanceUID]: loadingProgress,
}));
}
);
return () => unsubscribe();
}, [studyPrefetcherService]);
// ~~ subscriptions --> displaySets
useEffect(() => {
// DISPLAY_SETS_ADDED returns an array of DisplaySets that were added
const SubscriptionDisplaySetsAdded = displaySetService.subscribe(
displaySetService.EVENTS.DISPLAY_SETS_ADDED,
data => {
if (!hasLoadedViewports) {
return;
}
const { displaySetsAdded, options } = data;
displaySetsAdded.forEach(async dSet => {
const displaySetInstanceUID = dSet.displaySetInstanceUID;
const newImageSrcEntry = {};
const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
if (displaySet?.unsupported) {
return;
}
if (options.madeInClient) {
setJumpToDisplaySet(displaySetInstanceUID);
}
const imageIds = dataSource.getImageIdsForDisplaySet(displaySet);
const imageId = getImageIdForThumbnail(displaySet, imageIds);
// TODO: Is it okay that imageIds are not returned here for SR displaysets?
if (!imageId) {
return;
}
// When the image arrives, render it and store the result in the thumbnailImgSrcMap
newImageSrcEntry[displaySetInstanceUID] = await getImageSrc(imageId);
setThumbnailImageSrcMap(prevState => {
return { ...prevState, ...newImageSrcEntry };
});
});
}
);
return () => {
SubscriptionDisplaySetsAdded.unsubscribe();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [displaySetService, dataSource, getImageSrc, thumbnailImageSrcMap, trackedSeries, viewports]);
useEffect(() => {
// TODO: Will this always hold _all_ the displaySets we care about?
// DISPLAY_SETS_CHANGED returns `DisplaySerService.activeDisplaySets`
const SubscriptionDisplaySetsChanged = displaySetService.subscribe(
displaySetService.EVENTS.DISPLAY_SETS_CHANGED,
changedDisplaySets => {
const mappedDisplaySets = _mapDisplaySets(
changedDisplaySets,
displaySetsLoadingState,
thumbnailImageSrcMap,
trackedSeries,
viewports,
viewportGridService,
dataSource,
displaySetService,
uiDialogService,
uiNotificationService
);
setDisplaySets(mappedDisplaySets);
}
);
const SubscriptionDisplaySetMetaDataInvalidated = displaySetService.subscribe(
displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED,
() => {
const mappedDisplaySets = _mapDisplaySets(
displaySetService.getActiveDisplaySets(),
displaySetsLoadingState,
thumbnailImageSrcMap,
trackedSeries,
viewports,
viewportGridService,
dataSource,
displaySetService,
uiDialogService,
uiNotificationService
);
setDisplaySets(mappedDisplaySets);
}
);
return () => {
SubscriptionDisplaySetsChanged.unsubscribe();
SubscriptionDisplaySetMetaDataInvalidated.unsubscribe();
};
}, [
displaySetsLoadingState,
thumbnailImageSrcMap,
trackedSeries,
viewports,
dataSource,
displaySetService,
]);
const tabs = createStudyBrowserTabs(StudyInstanceUIDs, studyDisplayList, displaySets);
// TODO: Should not fire this on "close"
function _handleStudyClick(StudyInstanceUID) {
const shouldCollapseStudy = expandedStudyInstanceUIDs.includes(StudyInstanceUID);
const updatedExpandedStudyInstanceUIDs = shouldCollapseStudy
? [...expandedStudyInstanceUIDs.filter(stdyUid => stdyUid !== StudyInstanceUID)]
: [...expandedStudyInstanceUIDs, StudyInstanceUID];
setExpandedStudyInstanceUIDs(updatedExpandedStudyInstanceUIDs);
if (!shouldCollapseStudy) {
const madeInClient = true;
requestDisplaySetCreationForStudy(displaySetService, StudyInstanceUID, madeInClient);
}
}
useEffect(() => {
if (jumpToDisplaySet) {
// Get element by displaySetInstanceUID
const displaySetInstanceUID = jumpToDisplaySet;
const element = document.getElementById(`thumbnail-${displaySetInstanceUID}`);
if (element && typeof element.scrollIntoView === 'function') {
// TODO: Any way to support IE here?
element.scrollIntoView({ behavior: 'smooth' });
setJumpToDisplaySet(null);
}
}
}, [jumpToDisplaySet, expandedStudyInstanceUIDs, activeTabName]);
useEffect(() => {
if (!jumpToDisplaySet) {
return;
}
const displaySetInstanceUID = jumpToDisplaySet;
// Set the activeTabName and expand the study
const thumbnailLocation = _findTabAndStudyOfDisplaySet(displaySetInstanceUID, tabs);
if (!thumbnailLocation) {
console.warn('jumpToThumbnail: displaySet thumbnail not found.');
return;
}
const { tabName, StudyInstanceUID } = thumbnailLocation;
setActiveTabName(tabName);
const studyExpanded = expandedStudyInstanceUIDs.includes(StudyInstanceUID);
if (!studyExpanded) {
const updatedExpandedStudyInstanceUIDs = [...expandedStudyInstanceUIDs, StudyInstanceUID];
setExpandedStudyInstanceUIDs(updatedExpandedStudyInstanceUIDs);
}
}, [expandedStudyInstanceUIDs, jumpToDisplaySet, tabs]);
const onClickUntrack = displaySetInstanceUID => {
const onConfirm = () => {
const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
@@ -462,51 +54,68 @@ export default function PanelStudyBrowserTracking({
});
};
return (
<>
<>
<PanelStudyBrowserHeader
viewPresets={viewPresets}
updateViewPresetValue={updateViewPresetValue}
actionIcons={actionIcons}
updateActionIconValue={updateActionIconValue}
/>
<Separator
orientation="horizontal"
className="bg-black"
thickness="2px"
/>
</>
// Custom mapping function to add tracking data to display sets
const mapDisplaySetsWithTracking = (
displaySets,
displaySetLoadingState,
thumbnailImageSrcMap,
viewports
) => {
const thumbnailDisplaySets = [];
const thumbnailNoImageDisplaySets = [];
displaySets
.filter(ds => !ds.excludeFromThumbnailBrowser)
.forEach(ds => {
const { thumbnailSrc, displaySetInstanceUID } = ds;
const componentType = getComponentType(ds);
<StudyBrowser
tabs={tabs}
servicesManager={servicesManager}
activeTabName={activeTabName}
expandedStudyInstanceUIDs={expandedStudyInstanceUIDs}
onClickStudy={_handleStudyClick}
onClickTab={clickedTabName => {
setActiveTabName(clickedTabName);
}}
onClickUntrack={displaySetInstanceUID => {
onClickUntrack(displaySetInstanceUID);
}}
onClickThumbnail={() => {}}
onDoubleClickThumbnail={onDoubleClickThumbnailHandler}
activeDisplaySetInstanceUIDs={activeViewportDisplaySetInstanceUIDs}
showSettings={actionIcons.find(icon => icon.id === 'settings').value}
viewPresets={viewPresets}
ThumbnailMenuItems={MoreDropdownMenu({
commandsManager,
servicesManager,
menuItemsKey: 'studyBrowser.thumbnailMenuItems',
})}
StudyMenuItems={MoreDropdownMenu({
commandsManager,
servicesManager,
menuItemsKey: 'studyBrowser.studyMenuItems',
})}
/>
</>
const array =
componentType === 'thumbnailTracked' ? thumbnailDisplaySets : thumbnailNoImageDisplaySets;
const loadingProgress = displaySetLoadingState?.[displaySetInstanceUID];
array.push({
displaySetInstanceUID,
description: ds.SeriesDescription || '',
seriesNumber: ds.SeriesNumber,
modality: ds.Modality,
seriesDate: ds.SeriesDate ? new Date(ds.SeriesDate).toLocaleDateString() : '',
numInstances: ds.numImageFrames,
loadingProgress,
countIcon: ds.countIcon,
messages: ds.messages,
StudyInstanceUID: ds.StudyInstanceUID,
componentType,
imageSrc: thumbnailSrc || thumbnailImageSrcMap[displaySetInstanceUID],
dragData: {
type: 'displayset',
displaySetInstanceUID,
},
isTracked: trackedSeries.includes(ds.SeriesInstanceUID),
isHydratedForDerivedDisplaySet: ds.isHydrated,
});
});
return [...thumbnailDisplaySets, ...thumbnailNoImageDisplaySets];
};
// Override component type to use tracking specific components
const getComponentType = ds => {
if (thumbnailNoImageModalities.includes(ds.Modality) || ds?.unsupported) {
return 'thumbnailNoImage';
}
return 'thumbnailTracked';
};
return (
<PanelStudyBrowser
getImageSrc={getImageSrc}
getStudiesForPatientByMRN={getStudiesForPatientByMRN}
requestDisplaySetCreationForStudy={requestDisplaySetCreationForStudy}
dataSource={dataSource}
customMapDisplaySets={mapDisplaySetsWithTracking}
onClickUntrack={onClickUntrack}
/>
);
}
@@ -518,120 +127,3 @@ PanelStudyBrowserTracking.propTypes = {
getStudiesForPatientByMRN: PropTypes.func.isRequired,
requestDisplaySetCreationForStudy: PropTypes.func.isRequired,
};
function getImageIdForThumbnail(displaySet: any, imageIds: any) {
let imageId;
if (displaySet.isDynamicVolume) {
const timePoints = displaySet.dynamicVolumeInfo.timePoints;
const middleIndex = Math.floor(timePoints.length / 2);
const middleTimePointImageIds = timePoints[middleIndex];
imageId = middleTimePointImageIds[Math.floor(middleTimePointImageIds.length / 2)];
} else {
imageId = imageIds[Math.floor(imageIds.length / 2)];
}
return imageId;
}
/**
* Maps from the DataSource's format to a naturalized object
*
* @param {*} studies
*/
function _mapDataSourceStudies(studies) {
return studies.map(study => {
// TODO: Why does the data source return in this format?
return {
AccessionNumber: study.accession,
StudyDate: study.date,
StudyDescription: study.description,
NumInstances: study.instances,
ModalitiesInStudy: study.modalities,
PatientID: study.mrn,
PatientName: study.patientName,
StudyInstanceUID: study.studyInstanceUid,
StudyTime: study.time,
};
});
}
function _mapDisplaySets(
displaySets,
displaySetLoadingState,
thumbnailImageSrcMap,
trackedSeriesInstanceUIDs,
viewports, // TODO: make array of `displaySetInstanceUIDs`?
viewportGridService,
dataSource,
displaySetService,
uiDialogService,
uiNotificationService
) {
const thumbnailDisplaySets = [];
const thumbnailNoImageDisplaySets = [];
displaySets
.filter(ds => !ds.excludeFromThumbnailBrowser)
.forEach(ds => {
const { thumbnailSrc, displaySetInstanceUID } = ds; // thumbnailImageSrcMap[ds.displaySetInstanceUID];
const componentType = _getComponentType(ds);
const array =
componentType === 'thumbnailTracked' ? thumbnailDisplaySets : thumbnailNoImageDisplaySets;
const loadingProgress = displaySetLoadingState?.[displaySetInstanceUID];
const thumbnailProps = {
displaySetInstanceUID,
description: ds.SeriesDescription,
seriesNumber: ds.SeriesNumber,
modality: ds.Modality,
seriesDate: formatDate(ds.SeriesDate),
numInstances: ds.numImageFrames,
loadingProgress,
countIcon: ds.countIcon,
messages: ds.messages,
StudyInstanceUID: ds.StudyInstanceUID,
componentType,
imageSrc: thumbnailSrc || thumbnailImageSrcMap[displaySetInstanceUID],
dragData: {
type: 'displayset',
displaySetInstanceUID,
// .. Any other data to pass
},
isTracked: trackedSeriesInstanceUIDs.includes(ds.SeriesInstanceUID),
isHydratedForDerivedDisplaySet: ds.isHydrated,
};
array.push(thumbnailProps);
});
return [...thumbnailDisplaySets, ...thumbnailNoImageDisplaySets];
}
function _getComponentType(ds) {
if (thumbnailNoImageModalities.includes(ds.Modality) || ds?.unsupported) {
return 'thumbnailNoImage';
}
return 'thumbnailTracked';
}
function _findTabAndStudyOfDisplaySet(displaySetInstanceUID, tabs) {
for (let t = 0; t < tabs.length; t++) {
const { studies } = tabs[t];
for (let s = 0; s < studies.length; s++) {
const { displaySets } = studies[s];
for (let d = 0; d < displaySets.length; d++) {
const displaySet = displaySets[d];
if (displaySet.displaySetInstanceUID === displaySetInstanceUID) {
return {
tabName: tabs[t].name,
StudyInstanceUID: studies[s].studyInstanceUid,
};
}
}
}
}
}