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

feat: state sync service and hanging protocol updates to preserve state (#3131)

Browse Source 
* feat: Add state sync and use it to remember viewport grid info

fix: Version updates

Fixes for toggling MPR mode

Fix the display when the interleaved load module fails

Fix the memory of the state to restore correctly

PR fixes for the state sync service

PR fixes

PR fixes

PR fixes

Added a hack warning to remove volumeDeactivate

Fixes for TMTV colormap setting

Fix the casing

Missed renames

fix: tests not running due to variance in ordering

Reverting some fixes to change case

PR changes - mostly comments and minor improvements

fix: All display sets were being updated on drag and drop

PR fixes - mostly renames

PR fixes

Test support for OHIF, for HP branch

test: Add at least a minimal set of automated tests for hanging protocols

Docs

PR fixes

Merge fixes

DOCS updates

Add an example of the mn hanging protocol

PR fixes

PR fixes

PR fixes

* Fix the drag and drop

PR fixes

* PR changes - update default keys for next/previous stage

* fix: Was storing the custom viewport grid too aggressively

Caused by a PR change misspelling a variable
This commit is contained in:
Bill Wallace 2023-03-15 12:41:41 -04:00 committed by GitHub
parent b7fff77e17
commit 803f638401
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
87 changed files with 3413 additions and 1919 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
extensions/cornerstone-dicom-sr/src/viewports/OHIFCornerstoneSRViewport.tsx
View File

@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import React, { useCallback, useContext, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import OHIF, { utils } from '@ohif/core';
import OHIF, { utils, ServicesManager, ExtensionManager } from '@ohif/core';
import { setTrackingUniqueIdentifiersForElement } from '../tools/modules/dicomSRModule';
import {
@ -27,6 +27,7 @@ function OHIFCornerstoneSRViewport(props) {
dataSource,
displaySets,
viewportIndex,
viewportOptions,
viewportLabel,
servicesManager,
extensionManager,
@ -215,6 +216,7 @@ function OHIFCornerstoneSRViewport(props) {
// override the activeImageDisplaySetData
displaySets={[activeImageDisplaySetData]}
viewportOptions={{
...viewportOptions,
toolGroupId: `${SR_TOOLGROUP_BASE_NAME}`,
}}
onElementEnabled={onElementEnabled}
@ -419,6 +421,9 @@ OHIFCornerstoneSRViewport.propTypes = {
dataSource: PropTypes.object,
children: PropTypes.node,
customProps: PropTypes.object,
viewportOptions: PropTypes.object,
servicesManager: PropTypes.instanceOf(ServicesManager).isRequired,
extensionManager: PropTypes.instanceOf(ExtensionManager).isRequired,
};
OHIFCornerstoneSRViewport.defaultProps = {

33
extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx
View File

@ -10,6 +10,7 @@ import {
utilities as csUtils,
CONSTANTS,
} from '@cornerstonejs/core';
import { Services } from '@ohif/core';
import { setEnabledElement } from '../state';
@ -22,6 +23,9 @@ import {
import getSOPInstanceAttributes from '../utils/measurementServiceMappings/utils/getSOPInstanceAttributes';
import { CinePlayer, useCine, useViewportGrid } from '@ohif/ui';
import { CornerstoneViewportService } from '../services/ViewportService/CornerstoneViewportService';
import Presentation from '../types/Presentation';
const STACK = 'stack';
function areEqual(prevProps, nextProps) {
@ -128,6 +132,7 @@ const OHIFCornerstoneViewport = React.memo(props => {
cornerstoneViewportService,
cornerstoneCacheService,
viewportGridService,
stateSyncService,
} = servicesManager.services;
const cineHandler = () => {
@ -211,6 +216,21 @@ const OHIFCornerstoneViewport = React.memo(props => {
}
}, [elementRef]);
const storePresentation = () => {
const currentPresentation = cornerstoneViewportService.getPresentation(
viewportIndex
);
const { presentationSync } = stateSyncService.getState();
if (currentPresentation) {
stateSyncService.store({
presentationSync: {
...presentationSync,
[currentPresentation.id]: currentPresentation,
},
});
}
};
const cleanUpServices = useCallback(() => {
const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
viewportIndex
@ -288,6 +308,8 @@ const OHIFCornerstoneViewport = React.memo(props => {
setImageScrollBarHeight();
return () => {
storePresentation();
cleanUpServices();
cornerstoneViewportService.disableElement(viewportIndex);
@ -360,11 +382,20 @@ const OHIFCornerstoneViewport = React.memo(props => {
initialImageIndex
);
storePresentation();
const { presentationSync } = stateSyncService.getState();
const { presentationId } = viewportOptions;
const presentation = presentationId
? (presentationSync[presentationId] as Presentation)
: null;
cornerstoneViewportService.setViewportData(
viewportIndex,
viewportData,
viewportOptions,
displaySetOptions
displaySetOptions,
presentation
);
};

4
extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.tsx
View File

@ -118,6 +118,10 @@ function ViewportOrientationMarkers({
viewportIndex
);
if (!ohifViewport) {
console.log('ViewportOrientationMarkers::No viewport');
return null;
}
const backgroundColor = ohifViewport.getViewportOptions().background;
// Todo: probably this can be done in a better way in which we identify bright

45
extensions/cornerstone/src/commandsModule.ts
View File

@ -15,11 +15,14 @@ import { ServicesManager } from '@ohif/core';
import CornerstoneViewportDownloadForm from './utils/CornerstoneViewportDownloadForm';
import callInputDialog from './utils/callInputDialog';
import { setColormap } from './utils/colormap/transferFunctionHelpers';
import toggleMPRHangingProtocol from './utils/mpr/toggleMPRHangingProtocol';
import toggleStackImageSync from './utils/stackSync/toggleStackImageSync';
import getActiveViewportEnabledElement from './utils/getActiveViewportEnabledElement';
const commandsModule = ({ servicesManager }) => {
const commandsModule = ({
servicesManager,
}: {
servicesManager: ServicesManager;
}): React.FunctionComponent => {
const {
viewportGridService,
toolGroupService,
@ -27,9 +30,8 @@ const commandsModule = ({ servicesManager }) => {
toolbarService,
uiDialogService,
cornerstoneViewportService,
hangingProtocolService,
uiNotificationService,
} = (servicesManager as ServicesManager).services;
} = servicesManager.services;
function _getActiveViewportEnabledElement() {
return getActiveViewportEnabledElement(viewportGridService);
@ -128,6 +130,14 @@ const commandsModule = ({ servicesManager }) => {
});
viewport.render();
},
// Just call the toolbar service record interaction - allows
// executing a toolbar command as a full toolbar command with side affects
// coming from the ToolbarService itself.
toolbarServiceRecordInteraction: props => {
toolbarService.recordInteraction(props);
},
setToolActive: ({ toolName, toolGroupId = null }) => {
if (toolName === 'Crosshairs') {
const activeViewportToolGroup = _getToolGroup(null);
@ -150,7 +160,7 @@ const commandsModule = ({ servicesManager }) => {
};
const toolGroup = _getToolGroup(toolGroupId);
const toolGroupViewportIds = toolGroup.getViewportIds();
const toolGroupViewportIds = toolGroup?.getViewportIds?.();
// if toolGroup has been destroyed, or its viewports have been removed
if (!toolGroupViewportIds || !toolGroupViewportIds.length) {
@ -404,16 +414,6 @@ const commandsModule = ({ servicesManager }) => {
(activeViewportIndex - 1 + viewports.length) % viewports.length;
viewportGridService.setActiveViewportIndex(nextViewportIndex);
},
setHangingProtocol: ({ protocolId }) => {
hangingProtocolService.setProtocol(protocolId);
},
toggleMPR: ({ toggledState }) => {
toggleMPRHangingProtocol({
toggledState,
servicesManager,
getToolGroup: _getToolGroup,
});
},
toggleStackImageSync: ({ toggledState }) => {
toggleStackImageSync({
getEnabledElement,
@ -451,6 +451,11 @@ const commandsModule = ({ servicesManager }) => {
storeContexts: [],
options: {},
},
toolbarServiceRecordInteraction: {
commandFn: actions.toolbarServiceRecordInteraction,
storeContexts: [],
options: {},
},
setToolActive: {
commandFn: actions.setToolActive,
storeContexts: [],
@ -554,16 +559,6 @@ const commandsModule = ({ servicesManager }) => {
storeContexts: [],
options: {},
},
setHangingProtocol: {
commandFn: actions.setHangingProtocol,
storeContexts: [],
options: {},
},
toggleMPR: {
commandFn: actions.toggleMPR,
storeContexts: [],
options: {},
},
toggleStackImageSync: {
commandFn: actions.toggleStackImageSync,
storeContexts: [],

49
extensions/cornerstone/src/getHangingProtocolModule.ts
View File

@ -1,16 +1,46 @@
const mpr = {
id: 'mpr',
import { Types } from '@ohif/core';
const mpr: Types.HangingProtocol.Protocol = {
locked: true,
hasUpdatedPriorsInformation: false,
name: 'mpr',
createdDate: '2021-02-23T19:22:08.894Z',
modifiedDate: '2022-10-04T19:22:08.894Z',
modifiedDate: '2023-02-17',
availableTo: {},
editableBy: {},
// Unknown number of priors referenced - so just match any study
numberOfPriorsReferenced: 0,
protocolMatchingRules: [],
imageLoadStrategy: 'nth',
// imageLoadStrategy: 'nth',
callbacks: {
// Switches out of MPR mode when the layout change button is used
onLayoutChange: [
{
commandName: 'toggleHangingProtocol',
commandOptions: { protocolId: 'mpr' },
context: 'DEFAULT',
},
],
// Turns off crosshairs when switching out of MPR mode
onProtocolExit: [
{
commandName: 'toolbarServiceRecordInteraction',
commandOptions: {
interactionType: 'tool',
commands: [
{
commandOptions: {
toolName: 'WindowLevel',
},
context: 'CORNERSTONE',
},
],
},
},
],
},
displaySetSelectors: {
mprDisplaySet: {
activeDisplaySet: {
seriesMatchingRules: [
{
weight: 1,
@ -27,8 +57,7 @@ const mpr = {
},
stages: [
{
id: 'mpr3Stage',
name: 'mpr',
name: 'MPR 1x3',
viewportStructure: {
layoutType: 'grid',
properties: {
@ -76,7 +105,7 @@ const mpr = {
},
displaySets: [
{
id: 'mprDisplaySet',
id: 'activeDisplaySet',
},
],
},
@ -99,7 +128,7 @@ const mpr = {
},
displaySets: [
{
id: 'mprDisplaySet',
id: 'activeDisplaySet',
},
],
},
@ -122,7 +151,7 @@ const mpr = {
},
displaySets: [
{
id: 'mprDisplaySet',
id: 'activeDisplaySet',
},
],
},

7
extensions/cornerstone/src/index.tsx
View File

@ -26,6 +26,7 @@ import { registerColormap } from './utils/colormap/transferFunctionHelpers';
import { id } from './id';
import * as csWADOImageLoader from './initWADOImageLoader.js';
import { measurementMappingUtils } from './utils/measurementServiceMappings';
import { PublicViewportOptions } from './services/ViewportService/Viewport';
const Component = React.lazy(() => {
return import(
@ -94,12 +95,12 @@ const cornerstoneExtension: Types.Extensions.Extension = {
// const onNewImageHandler = jumpData => {
// commandsManager.runCommand('jumpToImage', jumpData);
// };
const { ToolbarService } = servicesManager.services;
const { toolbarService } = (servicesManager as ServicesManager).services;
return (
<OHIFCornerstoneViewport
{...props}
ToolbarService={ToolbarService}
ToolbarService={toolbarService}
servicesManager={servicesManager}
commandsManager={commandsManager}
/>
@ -151,4 +152,4 @@ const cornerstoneExtension: Types.Extensions.Extension = {
};
export default cornerstoneExtension;
export { measurementMappingUtils };
export { measurementMappingUtils, PublicViewportOptions };

15
extensions/cornerstone/src/init.tsx
View File

@ -74,6 +74,7 @@ export default async function init({
hangingProtocolService,
toolGroupService,
viewportGridService,
stateSyncService,
} = servicesManager.services;
window.services = servicesManager.services;
@ -97,6 +98,10 @@ export default async function init({
_showCPURenderingModal(uiModalService, hangingProtocolService);
}
// Stores a map from `presentationId` to a Presentation object so that
// an OHIFCornerstoneViewport can be redisplayed with the same attributes
stateSyncService.register('presentationSync', { clearOnModeExit: true });
const labelmapRepresentation =
cornerstoneTools.Enums.SegmentationRepresentations.Labelmap;
@ -369,8 +374,8 @@ export default async function init({
viewportGridService.subscribe(
viewportGridService.EVENTS.ACTIVE_VIEWPORT_INDEX_CHANGED,
({ viewportIndex }) => {
const viewportId = `viewport-${viewportIndex}`;
({ viewportIndex, viewportId }) => {
viewportId = viewportId || `viewport-${viewportIndex}`;
const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
if (!toolGroup || !toolGroup._toolInstances?.['ReferenceLines']) {
@ -427,9 +432,9 @@ function _showCPURenderingModal(uiModalService, hangingProtocolService) {
};
const { unsubscribe } = hangingProtocolService.subscribe(
hangingProtocolService.EVENTS.HANGING_PROTOCOL_APPLIED_FOR_VIEWPORT,
({ progress }) => {
const done = callback(progress);
hangingProtocolService.EVENTS.PROTOCOL_CHANGED,
() => {
const done = callback(100);
if (done) {
unsubscribe();

198
extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts
View File

@ -1,4 +1,4 @@
import { pubSubServiceInterface } from '@ohif/core';
import { PubSubService } from '@ohif/core';
import {
RenderingEngine,
StackViewport,
@ -21,6 +21,11 @@ import {
StackViewportData,
VolumeViewportData,
} from '../../types/CornerstoneCacheService';
import {
Presentation,
StackPresentation,
VolumePresentation,
} from '../../types/Presentation';
import {
setColormap,
setLowerUpperColorTransferFunction,
@ -37,18 +42,14 @@ const EVENTS = {
* Handles cornerstone viewport logic including enabling, disabling, and
* updating the viewport.
*/
class CornerstoneViewportService implements IViewportService {
class CornerstoneViewportService extends PubSubService
implements IViewportService {
renderingEngine: Types.IRenderingEngine | null;
viewportsInfo: Map<number, ViewportInfo>;
viewportsInfo: Map<number, ViewportInfo> = new Map();
viewportsById: Map<string, ViewportInfo> = new Map();
viewportGridResizeObserver: ResizeObserver | null;
viewportsDisplaySets: Map<string, string[]> = new Map();
/**
* Service-specific
*/
EVENTS: { [key: string]: string };
listeners: { [key: string]: Array<(...args: any[]) => void> };
_broadcastEvent: unknown; // we should be able to extend the PubSub class to get this
// Some configs
enableResizeDetector: true;
resizeRefreshRateMs: 200;
@ -56,15 +57,10 @@ class CornerstoneViewportService implements IViewportService {
servicesManager = null;
constructor(servicesManager) {
super(EVENTS);
this.renderingEngine = null;
this.viewportGridResizeObserver = null;
this.viewportsInfo = new Map();
//
this.listeners = {};
this.EVENTS = EVENTS;
this.servicesManager = servicesManager;
Object.assign(this, pubSubServiceInterface);
//
}
/**
@ -77,12 +73,23 @@ class CornerstoneViewportService implements IViewportService {
viewportOptions: PublicViewportOptions,
elementRef: HTMLDivElement
) {
const viewportInfo = new ViewportInfo(
viewportIndex,
this.getViewportId(viewportIndex)
);
// Use the provided viewportId
// Not providing a viewportId is frowned upon because it does weird things
// on moving them around, but it does mostly work.
if (!viewportOptions.viewportId) {
console.warn('Should provide viewport id externally', viewportOptions);
viewportOptions.viewportId =
this.getViewportId(viewportIndex) || `viewport-${viewportIndex}`;
}
const { viewportId } = viewportOptions;
const viewportInfo = new ViewportInfo(viewportIndex, viewportId);
if (!viewportInfo.viewportId) {
throw new Error('Should have viewport ID afterwards');
}
viewportInfo.setElement(elementRef);
this.viewportsInfo.set(viewportIndex, viewportInfo);
this.viewportsById.set(viewportId, viewportInfo);
}
public getViewportIds(): string[] {
@ -96,7 +103,7 @@ class CornerstoneViewportService implements IViewportService {
}
public getViewportId(viewportIndex: number): string {
return `viewport-${viewportIndex}`;
return this.viewportsInfo[viewportIndex]?.viewportId;
}
/**
@ -163,6 +170,32 @@ class CornerstoneViewportService implements IViewportService {
this.viewportsInfo.get(viewportIndex).destroy();
this.viewportsInfo.delete(viewportIndex);
this.viewportsById.delete(viewportId);
}
public getPresentation(viewportIndex: number): Presentation {
const viewportInfo = this.viewportsInfo.get(viewportIndex);
if (!viewportInfo) return;
const {
presentationId: id,
viewportType,
} = viewportInfo.getViewportOptions();
if (!id) return;
const csViewport = this.getCornerstoneViewportByIndex(viewportIndex);
if (!csViewport) return;
const properties = csViewport.getProperties();
const initialImageIndex = csViewport.getCurrentImageIdIndex();
const camera = csViewport.getCamera();
return {
id,
viewportType:
!viewportType || viewportType === 'stack' ? 'stack' : 'volume',
properties,
initialImageIndex,
camera,
};
}
/**
@ -177,29 +210,27 @@ class CornerstoneViewportService implements IViewportService {
viewportIndex: number,
viewportData: StackViewportData | VolumeViewportData,
publicViewportOptions: PublicViewportOptions,
publicDisplaySetOptions: DisplaySetOptions[]
publicDisplaySetOptions: DisplaySetOptions[],
presentation?: Presentation
): void {
const renderingEngine = this.getRenderingEngine();
const viewportInfo = this.viewportsInfo.get(viewportIndex);
if (!publicViewportOptions.viewportId) {
publicViewportOptions.viewportId = this.getViewportId(viewportIndex);
const viewportId =
publicViewportOptions.viewportId || this.getViewportId(viewportIndex);
if (!viewportId) {
throw new Error('Must define viewportId externally');
}
let viewportId = viewportInfo.getViewportId();
const viewportInfo = this.viewportsById.get(viewportId);
// if currently there is a viewport with the viewportId, but it is not the same
// as the one we are trying to set, we need to disable the old one
// and enable the new one, we could ideally change the name of the viewportId
// but the viewportId is an integral part in renderers map, tools svg cache
// etc. which would require a lot of refactoring, for now we will just disable
// the old one and enable the new one at the end of this function
let newViewportId = null;
if (publicViewportOptions?.viewportId !== viewportId) {
newViewportId = publicViewportOptions.viewportId;
viewportInfo.setViewportId(newViewportId);
if (!viewportInfo) {
throw new Error('Viewport info not defined');
}
renderingEngine.disableElement(viewportId);
// If the viewport has moved index, then record the new index
if (viewportInfo.viewportIndex !== viewportIndex) {
this.viewportsInfo.delete(viewportInfo.viewportIndex);
this.viewportsInfo.set(viewportIndex, viewportInfo);
viewportInfo.viewportIndex = viewportIndex;
}
viewportInfo.setRenderingEngineId(renderingEngine.id);
@ -220,9 +251,9 @@ class CornerstoneViewportService implements IViewportService {
this._broadcastEvent(this.EVENTS.VIEWPORT_DATA_CHANGED, {
viewportData,
viewportIndex,
viewportId,
});
viewportId = viewportInfo.getViewportId();
const element = viewportInfo.getElement();
const type = viewportInfo.getViewportType();
const background = viewportInfo.getBackground();
@ -245,7 +276,7 @@ class CornerstoneViewportService implements IViewportService {
renderingEngine.enableElement(viewportInput);
const viewport = renderingEngine.getViewport(viewportId);
this._setDisplaySets(viewport, viewportData, viewportInfo);
this._setDisplaySets(viewport, viewportData, viewportInfo, presentation);
}
public getCornerstoneViewport(
@ -308,8 +339,9 @@ class CornerstoneViewportService implements IViewportService {
_setStackViewport(
viewport: Types.IStackViewport,
viewportData: StackViewportData,
viewportInfo: ViewportInfo
) {
viewportInfo: ViewportInfo,
presentation?: StackPresentation
): void {
const displaySetOptions = viewportInfo.getDisplaySetOptions();
const {
@ -320,29 +352,40 @@ class CornerstoneViewportService implements IViewportService {
this.viewportsDisplaySets.set(viewport.id, [displaySetInstanceUID]);
let initialImageIndexToUse = initialImageIndex;
let initialImageIndexToUse =
presentation?.initialImageIndex ?? initialImageIndex;
if (!initialImageIndexToUse) {
if (
initialImageIndexToUse === undefined ||
initialImageIndexToUse === null
) {
initialImageIndexToUse =
this._getInitialImageIndexForStackViewport(viewportInfo, imageIds) || 0;
}
const { voi, voiInverted } = displaySetOptions[0];
const properties = {};
if (voi && (voi.windowWidth || voi.windowCenter)) {
const { lower, upper } = csUtils.windowLevel.toLowHighRange(
voi.windowWidth,
voi.windowCenter
);
properties.voiRange = { lower, upper };
const properties = presentation?.properties || {};
if (!presentation?.properties) {
const { voi, voiInverted } = displaySetOptions[0];
if (voi && (voi.windowWidth || voi.windowCenter)) {
const { lower, upper } = csUtils.windowLevel.toLowHighRange(
voi.windowWidth,
voi.windowCenter
);
properties.voiRange = { lower, upper };
}
if (voiInverted !== undefined) {
properties.invert = voiInverted;
}
}
if (voiInverted !== undefined) {
properties.invert = voiInverted;
}
viewport.setStack(imageIds, initialImageIndexToUse).then(() => {
// There is a bug in CS3D that the setStack does not
// navigate to the desired image.
viewport.setStack(imageIds, 0).then(() => {
// The scroll, however, works fine in CS3D
viewport.scroll(initialImageIndexToUse);
viewport.setProperties(properties);
if (presentation?.camera) viewport.setCamera(presentation.camera);
});
}
@ -397,7 +440,8 @@ class CornerstoneViewportService implements IViewportService {
async _setVolumeViewport(
viewport: Types.IVolumeViewport,
viewportData: VolumeViewportData,
viewportInfo: ViewportInfo
viewportInfo: ViewportInfo,
presentation: VolumePresentation
): Promise<void> {
// TODO: We need to overhaul the way data sources work so requests can be made
// async. I think we should follow the image loader pattern which is async and
@ -423,6 +467,7 @@ class CornerstoneViewportService implements IViewportService {
displaySetInstanceUIDs.push(displaySetInstanceUID);
if (!volume) {
console.log('Volume display set not found');
continue;
}
@ -453,10 +498,15 @@ class CornerstoneViewportService implements IViewportService {
!hangingProtocolService.customImageLoadPerformed
) {
// delegate the volume loading to the hanging protocol service if it has a custom image load strategy
return hangingProtocolService.runImageLoadStrategy({
viewportId: viewport.id,
volumeInputArray,
});
if (
hangingProtocolService.runImageLoadStrategy({
viewportId: viewport.id,
volumeInputArray,
})
) {
// Fallback to the default strategy if the custom one fails
return;
}
}
volumeToLoad.forEach(volume => {
@ -464,10 +514,10 @@ class CornerstoneViewportService implements IViewportService {
});
// This returns the async continuation only
return this.setVolumesForViewport(viewport, volumeInputArray);
return this.setVolumesForViewport(viewport, volumeInputArray, presentation);
}
public async setVolumesForViewport(viewport, volumeInputArray) {
public async setVolumesForViewport(viewport, volumeInputArray, presentation) {
const {
displaySetService,
segmentationService,
@ -475,6 +525,9 @@ class CornerstoneViewportService implements IViewportService {
} = this.servicesManager.services;
await viewport.setVolumes(volumeInputArray);
const { properties, camera } = presentation || {};
if (properties) viewport.setProperties(properties);
if (camera) viewport.setCamera(camera);
// load any secondary displaySets
const displaySetInstanceUIDs = this.viewportsDisplaySets.get(viewport.id);
@ -589,7 +642,11 @@ class CornerstoneViewportService implements IViewportService {
// Todo: keepCamera is an interim solution until we have a better solution for
// keeping the camera position when the viewport data is changed
public updateViewport(viewportIndex, viewportData, keepCamera = false) {
public updateViewport(
viewportIndex: number,
viewportData,
keepCamera = false
) {
const viewportInfo = this.getViewportInfoByIndex(viewportIndex);
const viewportId = viewportInfo.getViewportId();
@ -645,19 +702,22 @@ class CornerstoneViewportService implements IViewportService {
_setDisplaySets(
viewport: StackViewport | VolumeViewport,
viewportData: StackViewportData | VolumeViewportData,
viewportInfo: ViewportInfo
viewportInfo: ViewportInfo,
presentation?: Presentation
): void {
if (viewport instanceof StackViewport) {
this._setStackViewport(
viewport,
viewportData as StackViewportData,
viewportInfo
viewportInfo,
presentation as StackPresentation
);
} else if (viewport instanceof VolumeViewport) {
this._setVolumeViewport(
viewport,
viewportData as VolumeViewportData,
viewportInfo
viewportInfo,
presentation as VolumePresentation
);
} else {
throw new Error('Unknown viewport type');
@ -758,7 +818,7 @@ class CornerstoneViewportService implements IViewportService {
}
}
export default function ExtendedCornerstoneViewportService(serviceManager) {
export default function CornerstoneViewportServiceRegistration(serviceManager) {
return {
name: 'cornerstoneViewportService',
altName: 'CornerstoneViewportService',
@ -767,3 +827,5 @@ export default function ExtendedCornerstoneViewportService(serviceManager) {
},
};
}
export { CornerstoneViewportService, CornerstoneViewportServiceRegistration };

27
extensions/cornerstone/src/services/ViewportService/Viewport.ts
View File

@ -18,6 +18,8 @@ export type ViewportOptions = {
viewportType: Enums.ViewportType;
toolGroupId: string;
viewportId: string;
// Presentation ID to store/load presentation state from
presentationId?: string;
orientation?: Types.Orientation;
background?: Types.Point3;
syncGroups?: SyncGroup[];
@ -33,6 +35,7 @@ export type ViewportOptions = {
export type PublicViewportOptions = {
viewportType?: string;
toolGroupId?: string;
presentationId?: string;
viewportId?: string;
orientation?: string;
background?: Types.Point3;
@ -42,6 +45,11 @@ export type PublicViewportOptions = {
allowUnmatchedView?: boolean;
};
export type DisplaySetSelector = {
id?: string;
options?: PublicDisplaySetOptions;
};
export type PublicDisplaySetOptions = {
voi?: VOI;
voiInverted?: boolean;
@ -136,7 +144,7 @@ class ViewportInfo {
}
public setPublicDisplaySetOptions(
publicDisplaySetOptions: Array<PublicDisplaySetOptions>
publicDisplaySetOptions: PublicDisplaySetOptions[] | DisplaySetSelector[]
): void {
// map the displaySetOptions and check if they are undefined then set them to default values
const displaySetOptions = this.mapDisplaySetOptions(
@ -167,7 +175,10 @@ class ViewportInfo {
viewportOptionsEntry: PublicViewportOptions
): void {
let viewportType = viewportOptionsEntry.viewportType;
let toolGroupId = viewportOptionsEntry.toolGroupId;
const {
toolGroupId = DEFAULT_TOOLGROUP_ID,
presentationId,
} = viewportOptionsEntry;
let orientation;
if (!viewportType) {
@ -185,16 +196,13 @@ class ViewportInfo {
orientation = Enums.OrientationAxis.AXIAL;
}
if (!toolGroupId) {
toolGroupId = DEFAULT_TOOLGROUP_ID;
}
this.setViewportOptions({
...viewportOptionsEntry,
viewportId: this.viewportId,
viewportType: viewportType as Enums.ViewportType,
orientation,
toolGroupId,
presentationId,
});
}
@ -240,12 +248,15 @@ class ViewportInfo {
return this.viewportOptions.initialImageOptions;
}
// Handle incoming public display set options or a display set select
// with a contained options.
private mapDisplaySetOptions(
publicDisplaySetOptions: Array<PublicDisplaySetOptions>
options: PublicDisplaySetOptions[] | DisplaySetSelector[] = [{}]
): Array<DisplaySetOptions> {
const displaySetOptions: Array<DisplaySetOptions> = [];
publicDisplaySetOptions.forEach(option => {
options.forEach(item => {
let option = item?.options || item;
if (!option) {
option = {
blendMode: undefined,

23
extensions/cornerstone/src/types/Presentation.ts Normal file
View File

@ -0,0 +1,23 @@
/** Store presentation data for either stack viewports or volume viewports */
import { Types } from '@cornerstonejs/core';
export interface BasePresentation {
id: string;
properties: Record<string, unknown>;
initialImageIndex?: number;
camera: Types.ICamera;
}
export interface StackPresentation extends BasePresentation {
viewportType: 'stack';
}
export interface VolumePresentation extends BasePresentation {
viewportType: 'volume';
}
// Currently it seems like the entire presentation state can be shared between
// Stack and Volume, but is setup to allow differences
export type Presentation = StackPresentation | VolumePresentation;
export default Presentation;

6
extensions/cornerstone/src/utils/getCornerstoneViewportType.ts
View File

@ -2,15 +2,17 @@ import { Enums } from '@cornerstonejs/core';
const STACK = 'stack';
const VOLUME = 'volume';
const ORTHOGRAPHIC = 'orthographic';
export default function getCornerstoneViewportType(
viewportType: string
): Enums.ViewportType {
if (viewportType.toLowerCase() === STACK) {
const lowerViewportType = viewportType.toLowerCase();
if (lowerViewportType === STACK) {
return Enums.ViewportType.STACK;
}
if (viewportType.toLowerCase() === VOLUME) {
if (lowerViewportType === VOLUME || lowerViewportType === ORTHOGRAPHIC) {
return Enums.ViewportType.ORTHOGRAPHIC;
}

301
extensions/cornerstone/src/utils/mpr/toggleMPRHangingProtocol.ts
View File

@ -1,301 +0,0 @@
import { Enums } from '@cornerstonejs/tools';
import removeToolGroupSegmentationRepresentations from '../removeToolGroupSegmentationRepresentations';
const MPR_TOOLGROUP_ID = 'mpr';
const cachedState = {
protocol: null,
stage: null,
viewportMatchDetails: null,
viewportStructure: null,
toolOptions: null,
};
const setCachedState = (
protocol,
stage,
viewportMatchDetails,
viewportStructure,
toolOptions
) => {
cachedState.protocol = protocol;
cachedState.stage = stage;
cachedState.viewportMatchDetails = viewportMatchDetails;
cachedState.viewportStructure = viewportStructure;
cachedState.toolOptions = JSON.parse(JSON.stringify(toolOptions));
};
const resetCachedState = () => {
cachedState.protocol = null;
cachedState.stage = null;
cachedState.viewportMatchDetails = null;
cachedState.viewportStructure = null;
cachedState.toolOptions = null;
};
export default function toggleMPRHangingProtocol({
toggledState,
servicesManager,
getToolGroup,
}) {
const {
uiNotificationService,
hangingProtocolService,
viewportGridService,
toolbarService,
} = servicesManager.services;
// TODO Introduce a service to persist the state of the current hanging protocol/app.
// So all of the code to persist the state here will no longer be needed. Perhaps
// just the id of the current hanging protocol to toggle MPR off is needed.
const {
activeViewportIndex,
viewports,
numRows,
numCols,
} = viewportGridService.getState();
const viewportDisplaySetInstanceUIDs =
viewports[activeViewportIndex].displaySetInstanceUIDs;
// What is the current active protocol and stage number to restore later
const { protocol, stage } = hangingProtocolService.getActiveProtocol();
const restoreErrorCallback = error => {
console.error(error);
uiNotificationService.show({
title: 'Multiplanar reconstruction (MPR) ',
message:
'Something went wrong while trying to restore the previous layout.',
type: 'info',
duration: 3000,
});
};
if (toggledState) {
resetCachedState();
const {
viewportMatchDetails,
viewportStructure,
toolOptions,
} = _getViewportsInfo({
protocol,
stage,
viewports,
servicesManager,
});
setCachedState(
protocol,
stage,
viewportMatchDetails,
viewportStructure,
toolOptions
);
const matchDetails = {
displaySetInstanceUIDs: viewportDisplaySetInstanceUIDs,
};
_disableCrosshairs(
toolOptions.map(({ toolGroupId }) => toolGroupId),
getToolGroup
);
const errorCallback = error => {
// Unable to create MPR, so be sure to return to the cached/original protocol.
hangingProtocolService.setProtocol(
cachedState.protocol.id,
viewportMatchDetails,
restoreErrorCallback
);
uiNotificationService.show({
title: 'Multiplanar reconstruction (MPR) ',
message:
'Cannot create MPR for this DisplaySet since it is not reconstructable.',
type: 'info',
duration: 3000,
});
};
hangingProtocolService.setProtocol(
MPR_TOOLGROUP_ID,
matchDetails,
errorCallback
);
return;
}
_disableCrosshairs([MPR_TOOLGROUP_ID], getToolGroup);
const { layoutType, properties } = cachedState.viewportStructure;
const { viewportMatchDetails } = cachedState;
// The reason we split the flow here is that we don't allow viewport grid
// change in the non default hanging protocol, so we can just apply the
// cached protocol and stage. However, for the default protocol, we need
// to also apply the layout type and properties.
if (cachedState.protocol.id !== 'default') {
hangingProtocolService.setProtocol(
cachedState.protocol.id,
viewportMatchDetails,
restoreErrorCallback
);
return;
}
hangingProtocolService.setProtocol(
'default',
viewportMatchDetails,
restoreErrorCallback
);
if (numRows !== properties.rows || numCols !== properties.columns) {
viewportGridService.setLayout({
numRows: properties.rows,
numCols: properties.columns,
layoutType,
layoutOptions: properties.layoutOptions,
});
}
const numViewports =
properties.layoutOptions.length || properties.rows * properties.columns;
// loop inside viewportMatchDetails map
// and set the viewportOptions for each viewport
[...Array(numViewports).keys()].forEach(viewportIndex => {
const viewportMatchDetailsForViewport = viewportMatchDetails.get(
viewportIndex
);
if (viewportMatchDetailsForViewport) {
const {
viewportOptions,
displaySetsInfo,
} = viewportMatchDetailsForViewport;
viewportGridService.setDisplaySetsForViewport({
viewportIndex,
displaySetInstanceUIDs: displaySetsInfo.map(
displaySetInfo => displaySetInfo.displaySetInstanceUID
),
viewportOptions,
});
} else {
viewportGridService.setDisplaySetsForViewport({
viewportIndex,
displaySetInstanceUIDs: [],
viewportOptions: {},
});
}
});
toolbarService.recordInteraction({
groupId: 'WindowLevel',
itemId: 'WindowLevel',
interactionType: 'tool',
commands: [
{
commandName: 'setToolActive',
commandOptions: {
toolName: 'WindowLevel',
},
context: 'CORNERSTONE',
},
],
});
//clear segmentations if they exist
removeToolGroupSegmentationRepresentations(MPR_TOOLGROUP_ID);
}
function _disableCrosshairs(toolGroupIds, getToolGroup) {
toolGroupIds.forEach(toolGroupId => {
const toolGroup = getToolGroup(toolGroupId);
if (
toolGroup.getToolInstance('Crosshairs')?.mode === Enums.ToolModes.Active
) {
toolGroup.setToolDisabled('Crosshairs');
}
});
}
function _getViewportsInfo({ protocol, stage, viewports, servicesManager }) {
// here we need to use the viewports and try to map it into the
// viewportMatchDetails and displaySetMatch that hangingProtocolService
// expects
const {
viewportGridService,
hangingProtocolService,
toolGroupService,
} = servicesManager.services;
const { numRows, numCols } = viewportGridService.getState();
let viewportMatchDetails = new Map();
const viewportStructure = {
layoutType: 'grid',
properties: {
rows: numRows,
columns: numCols,
layoutOptions: [],
},
};
viewports.forEach((viewport, viewportIndex) => {
viewportStructure.properties.layoutOptions.push({
x: viewport.x,
y: viewport.y,
width: viewport.width,
height: viewport.height,
});
});
if (protocol.id === 'default') {
viewports.forEach((viewport, viewportIndex) => {
if (viewport.displaySetInstanceUIDs) {
viewportMatchDetails.set(viewportIndex, {
displaySetsInfo: viewport.displaySetInstanceUIDs.map(
displaySetInstanceUID => {
return { displaySetInstanceUID };
}
),
viewportOptions: viewport.viewportOptions,
});
}
});
} else {
({ viewportMatchDetails } = hangingProtocolService.getMatchDetails());
}
// get the toolGroup state for viewports
let toolOptions = [];
const viewportIds = viewports
.map(
viewport =>
viewport.displaySetInstanceUIDs &&
viewport.displaySetInstanceUIDs.length > 0 &&
viewport.viewportOptions?.viewportId
)
.filter(Boolean);
if (viewportIds.length) {
toolOptions = viewportIds
.map(viewportId => {
const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
return toolGroup
? {
toolGroupId: toolGroup.id,
toolOptions: toolGroup.toolOptions,
}
: null;
})
.filter(Boolean);
}
return { viewportMatchDetails, viewportStructure, toolOptions };
}

1
extensions/default/src/Panels/PanelStudyBrowser.tsx
View File

@ -303,6 +303,7 @@ function _mapDisplaySets(displaySets, thumbnailImageSrcMap) {
seriesDate: ds.SeriesDate,
seriesTime: ds.SeriesTime,
numInstances: ds.numImageFrames,
countIcon: ds.countIcon,
StudyInstanceUID: ds.StudyInstanceUID,
componentType,
imageSrc,

54
extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx
View File

@ -1,10 +1,6 @@
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import {
LayoutSelector as OHIFLayoutSelector,
ToolbarButton,
useViewportGrid,
} from '@ohif/ui';
import { LayoutSelector as OHIFLayoutSelector, ToolbarButton } from '@ohif/ui';
import { ServicesManager } from '@ohif/core';
@ -16,8 +12,6 @@ function LayoutSelector({
...rest
}) {
const [isOpen, setIsOpen] = useState(false);
const [disableSelector, setDisableSelector] = useState(false);
const [viewportGridState, viewportGridService] = useViewportGrid();
const {
hangingProtocolService,
@ -50,43 +44,19 @@ function LayoutSelector({
};
}, [isOpen]);
useEffect(() => {
/* Reset to default layout when component unmounts */
return () => {
viewportGridService.setLayout({ numCols: 1, numRows: 1 });
};
}, []);
const onInteractionHandler = () => setIsOpen(!isOpen);
const DropdownContent = isOpen ? OHIFLayoutSelector : null;
const onSelectionHandler = ({ numRows, numCols }) => {
// TODO Introduce a service to persist the state of the current hanging protocol/app.
// TODO Here the layout change will amount to a change of hanging protocol as specified by the extension for this layout selector tool
// followed by the change of the grid itself.
if (hangingProtocolService.getActiveProtocol().protocol.id === 'mpr') {
toolbarService.recordInteraction({
groupId: 'MPR',
itemId: 'MPR',
interactionType: 'toggle',
commands: [
{
commandName: 'toggleMPR',
commandOptions: {},
context: 'CORNERSTONE',
},
],
});
}
// When a new layout is selected, keep any extra/offscreen viewports
// so that if any of those viewports were populated via the UI then they
// will be maintained in case those viewports are redisplayed later.
viewportGridService.setLayout({
numRows,
numCols,
keepExtraViewports: true,
const onSelectionHandler = props => {
toolbarService.recordInteraction({
interactionType: 'action',
commands: [
{
commandName: 'setViewportGridLayout',
commandOptions: { ...props },
context: 'DEFAULT',
},
],
});
};
@ -107,7 +77,7 @@ function LayoutSelector({
/>
)
}
isActive={disableSelector ? false : isOpen}
isActive={isOpen}
type="toggle"
/>
);

20
extensions/default/src/ViewerLayout/index.tsx
View File

@ -14,7 +14,12 @@ import {
LoadingIndicatorProgress,
} from '@ohif/ui';
import i18n from '@ohif/i18n';
import { hotkeys } from '@ohif/core';
import {
ServicesManager,
HangingProtocolService,
hotkeys,
CommandsManager,
} from '@ohif/core';
import { useAppConfig } from '@state';
import Toolbar from '../Toolbar/Toolbar';
@ -33,7 +38,7 @@ function ViewerLayout({
rightPanels = [],
leftPanelDefaultClosed = false,
rightPanelDefaultClosed = false,
}) {
}): React.FunctionComponent {
const [appConfig] = useAppConfig();
const navigate = useNavigate();
const location = useLocation();
@ -169,15 +174,13 @@ function ViewerLayout({
useEffect(() => {
const { unsubscribe } = hangingProtocolService.subscribe(
hangingProtocolService.EVENTS.HANGING_PROTOCOL_APPLIED_FOR_VIEWPORT,
HangingProtocolService.EVENTS.PROTOCOL_CHANGED,
// Todo: right now to set the loading indicator to false, we need to wait for the
// hangingProtocolService to finish applying the viewport matching to each viewport,
// however, this might not be the only approach to set the loading indicator to false. we need to explore this further.
({ progress }) => {
if (progress === 100) {
setShowLoadingIndicator(false);
}
() => {
setShowLoadingIndicator(false);
}
);
@ -265,7 +268,8 @@ ViewerLayout.propTypes = {
extensionManager: PropTypes.shape({
getModuleEntry: PropTypes.func.isRequired,
}).isRequired,
commandsManager: PropTypes.object,
commandsManager: PropTypes.instanceOf(CommandsManager),
servicesManager: PropTypes.instanceOf(ServicesManager),
// From modes
leftPanels: PropTypes.array,
rightPanels: PropTypes.array,

97
extensions/default/src/commandsModule.js
View File

@ -1,97 +0,0 @@
import DicomTagBrowser from './DicomTagBrowser/DicomTagBrowser';
import React from 'react';
const commandsModule = ({ servicesManager, commandsManager }) => {
const {
measurementService,
hangingProtocolService,
uiNotificationService,
viewportGridService,
displaySetService,
} = servicesManager.services;
const actions = {
displayNotification: ({ text, title, type }) => {
uiNotificationService.show({
title: title,
message: text,
type: type,
});
},
clearMeasurements: () => {
measurementService.clear();
},
nextStage: () => {
// next stage in hanging protocols
hangingProtocolService.nextProtocolStage();
},
previousStage: () => {
hangingProtocolService.previousProtocolStage();
},
openDICOMTagViewer() {
const { activeViewportIndex, viewports } = viewportGridService.getState();
const activeViewportSpecificData = viewports[activeViewportIndex];
const { displaySetInstanceUIDs } = activeViewportSpecificData;
const displaySets = displaySetService.activeDisplaySets;
const { uiModalService } = servicesManager.services;
const displaySetInstanceUID = displaySetInstanceUIDs[0];
uiModalService.show({
content: DicomTagBrowser,
contentProps: {
displaySets,
displaySetInstanceUID,
onClose: uiModalService.hide,
},
title: 'DICOM Tag Browser',
});
},
/**
* Toggle viewport overlay (the information panel shown on the four corners
* of the viewport)
* @see ViewportOverlay and CustomizableViewportOverlay components
*/
toggleOverlays: () => {
const overlays = document.getElementsByClassName('viewport-overlay');
for (let i = 0; i < overlays.length; i++) {
overlays.item(i).classList.toggle('hidden');
}
},
};
const definitions = {
clearMeasurements: {
commandFn: actions.clearMeasurements,
storeContexts: [],
options: {},
},
displayNotification: {
commandFn: actions.displayNotification,
storeContexts: [],
options: {},
},
nextStage: {
commandFn: actions.nextStage,
storeContexts: [],
options: {},
},
previousStage: {
commandFn: actions.previousStage,
storeContexts: [],
options: {},
},
openDICOMTagViewer: {
commandFn: actions.openDICOMTagViewer,
},
};
return {
actions,
definitions,
defaultContext: 'DEFAULT',
};
};
export default commandsModule;

386
extensions/default/src/commandsModule.ts Normal file
View File

@ -0,0 +1,386 @@
import { DicomMetadataStore, ServicesManager } from '@ohif/core';
import DicomTagBrowser from './DicomTagBrowser/DicomTagBrowser';
import reuseCachedLayouts from './utils/reuseCachedLayouts';
import findViewportsByPosition, {
findOrCreateViewport as layoutFindOrCreate,
} from './findViewportsByPosition';
export type HangingProtocolParams = {
protocolId?: string;
stageIndex?: number;
activeStudyUID?: string;
stageId?: string;
};
/**
* Determine if a command is a hanging protocol one.
* For now, just use the two hanging protocol commands that are in this
* commands module, but if others get added elsewhere this may need enhancing.
*/
const isHangingProtocolCommand = command =>
command &&
(command.commandName === 'setHangingProtocol' ||
command.commandName === 'toggleHangingProtocol');
const commandsModule = ({ servicesManager, commandsManager }) => {
const {
measurementService,
hangingProtocolService,
uiNotificationService,
viewportGridService,
displaySetService,
stateSyncService,
toolbarService,
} = (servicesManager as ServicesManager).services;
const actions = {
displayNotification: ({ text, title, type }) => {
uiNotificationService.show({
title: title,
message: text,
type: type,
});
},
clearMeasurements: () => {
measurementService.clear();
},
/**
* Toggles off all tools which contain a commandName of setHangingProtocol
* or toggleHangingProtocol, and which match/don't match the protocol id/stage
*/
toggleHpTools: () => {
const {
protocol,
stageIndex: toggleStageIndex,
stage,
} = hangingProtocolService.getActiveProtocol();
const enableListener = button => {
if (!button.id) return;
const { commands, items } = button.props || button;
if (items) {
items.forEach(enableListener);
}
const hpCommand = commands?.find?.(isHangingProtocolCommand);
if (!hpCommand) return;
const { protocolId, stageIndex, stageId } = hpCommand.commandOptions;
const isActive =
(!protocolId || protocolId === protocol.id) &&
(stageIndex === undefined || stageIndex === toggleStageIndex) &&
(!stageId || stageId === stage.id);
toolbarService.setActive(button.id, isActive);
};
Object.values(toolbarService.getButtons()).forEach(enableListener);
},
/**
* Sets the specified protocol
* 1. Records any existing state using the viewport grid service
* 2. Finds the destination state - this can be one of:
* a. The specified protocol stage
* b. An alternate (toggled or restored) protocol stage
* c. A restored custom layout
* 3. Finds the parameters for the specified state
* a. Gets the displaySetSelectorMap
* b. Gets the map by position
* c. Gets any toggle mapping to map position to/from current view
* 4. If restore, then sets layout
* a. Maps viewport position by currently displayed viewport map id
* b. Uses toggle information to map display set id
* 5. Else applies the hanging protocol
* a. HP Service is provided displaySetSelectorMap
* b. HP Service will throw an exception if it isn't applicable
* @param options - contains information on the HP to apply
* @param options.activeStudyUID - the updated study to apply the HP to
* @param options.protocolId - the protocol ID to change to
* @param options.stageId - the stageId to apply
* @param options.stageIndex - the index of the stage to go to.
*/
setHangingProtocol: ({
activeStudyUID = '',
protocolId,
stageId,
stageIndex,
}: HangingProtocolParams): boolean => {
try {
// Stores in the state the reuseID to displaySetUID mapping
// Pass in viewportId for the active viewport. This item will get set as
// the activeViewportId
const state = viewportGridService.getState();
const hpInfo = hangingProtocolService.getState();
const {
protocol: oldProtocol,
} = hangingProtocolService.getActiveProtocol();
const stateSyncReduce = reuseCachedLayouts(
state,
hangingProtocolService,
stateSyncService
);
const {
hangingProtocolStageIndexMap,
viewportGridStore,
displaySetSelectorMap,
} = stateSyncReduce;
if (!protocolId) {
// Re-use the previous protocol id, and optionally stage
protocolId = hpInfo.protocolId;
if (stageId === undefined && stageIndex === undefined) {
stageIndex = hpInfo.stageIndex;
}
} else if (stageIndex === undefined && stageId === undefined) {
// Re-set the same stage as was previously used
const hangingId = `${activeStudyUID ||
hpInfo.activeStudyUID}:${protocolId}`;
stageIndex = hangingProtocolStageIndexMap[hangingId]?.stageIndex;
}
const useStageIdx =
stageIndex ??
hangingProtocolService.getStageIndex(protocolId, {
stageId,
stageIndex,
});
if (activeStudyUID) {
hangingProtocolService.setActiveStudyUID(activeStudyUID);
}
const storedHanging = `${hangingProtocolService.getState().activeStudyUID
}:${protocolId}:${useStageIdx || 0}`;
const restoreProtocol = !!viewportGridStore[storedHanging];
if (
protocolId === hpInfo.hangingProtocolId &&
useStageIdx === hpInfo.stageIdx &&
!activeStudyUID
) {
// Clear the HP setting to reset them
hangingProtocolService.setProtocol(protocolId, {
stageId,
stageIndex: useStageIdx,
});
} else {
hangingProtocolService.setProtocol(protocolId, {
displaySetSelectorMap,
stageId,
stageIndex: useStageIdx,
restoreProtocol,
});
if (restoreProtocol) {
viewportGridService.set(viewportGridStore[storedHanging]);
}
}
// Do this after successfully applying the update
stateSyncService.store(stateSyncReduce);
// This is a default action applied
actions.toggleHpTools(hangingProtocolService.getActiveProtocol());
// Send the notification about updating the state
if (protocolId !== hpInfo.protocolId) {
const { protocol } = hangingProtocolService.getActiveProtocol();
// The old protocol callbacks are used for turning off things
// like crosshairs when moving to the new HP
commandsManager.run(oldProtocol.callbacks?.onProtocolExit);
// The new protocol callback is used for things like
// activating modes etc.
commandsManager.run(protocol.callbacks?.onProtocolEnter);
}
return true;
} catch (e) {
actions.toggleHpTools(hangingProtocolService.getActiveProtocol());
uiNotificationService.show({
title: 'Apply Hanging Protocol',
message: `The hanging protocol could not be applied due to ${e}`,
type: 'error',
duration: 3000,
});
return false;
}
},
toggleHangingProtocol: ({
protocolId,
stageIndex,
}: HangingProtocolParams): boolean => {
const {
protocol,
stageIndex: desiredStageIndex,
activeStudy,
} = hangingProtocolService.getActiveProtocol();
const { toggleHangingProtocol } = stateSyncService.getState();
const storedHanging = `${activeStudy.StudyInstanceUID
}:${protocolId}:${stageIndex | 0}`;
if (
protocol.id === protocolId &&
(stageIndex === undefined || stageIndex === desiredStageIndex)
) {
// Toggling off - restore to previous state
const previousState = toggleHangingProtocol[storedHanging] || {
protocolId: 'default',
};
return actions.setHangingProtocol(previousState);
} else {
stateSyncService.store({
toggleHangingProtocol: {
...toggleHangingProtocol,
[storedHanging]: {
protocolId: protocol.id,
stageIndex: desiredStageIndex,
},
},
});
return actions.setHangingProtocol({ protocolId, stageIndex });
}
},
deltaStage: ({ direction }) => {
const {
protocolId,
stageIndex: oldStageIndex,
} = hangingProtocolService.getState();
const { protocol } = hangingProtocolService.getActiveProtocol();
for (
let stageIndex = oldStageIndex + direction;
stageIndex >= 0 && stageIndex < protocol.stages.length;
stageIndex += direction
) {
if (protocol.stages[stageIndex].status !== 'disabled') {
return actions.setHangingProtocol({
protocolId,
stageIndex,
});
}
}
uiNotificationService.show({
title: 'Change Stage',
message: 'The hanging protocol has no more applicable stages',
type: 'error',
duration: 3000,
});
},
/**
* Changes the viewport grid layout in terms of the MxN layout.
*/
setViewportGridLayout: ({ numRows, numCols }) => {
const { protocol } = hangingProtocolService.getActiveProtocol();
const onLayoutChange = protocol.callbacks?.onLayoutChange;
if (commandsManager.run(onLayoutChange, { numRows, numCols }) === false) {
console.log(
'setViewportGridLayout running',
onLayoutChange,
numRows,
numCols
);
// Don't apply the layout if the run command returns false
return;
}
const completeLayout = () => {
const state = viewportGridService.getState();
const stateReduce = findViewportsByPosition(
state,
{ numRows, numCols },
stateSyncService
);
const findOrCreateViewport = layoutFindOrCreate.bind(
null,
hangingProtocolService,
stateReduce.viewportsByPosition
);
viewportGridService.setLayout({
numRows,
numCols,
findOrCreateViewport,
});
stateSyncService.store(stateReduce);
};
// Need to finish any work in the callback
window.setTimeout(completeLayout, 0);
},
openDICOMTagViewer() {
const { activeViewportIndex, viewports } = viewportGridService.getState();
const activeViewportSpecificData = viewports[activeViewportIndex];
const { displaySetInstanceUIDs } = activeViewportSpecificData;
const displaySets = displaySetService.activeDisplaySets;
const { UIModalService } = servicesManager.services;
const displaySetInstanceUID = displaySetInstanceUIDs[0];
UIModalService.show({
content: DicomTagBrowser,
contentProps: {
displaySets,
displaySetInstanceUID,
onClose: UIModalService.hide,
},
title: 'DICOM Tag Browser',
});
},
/**
* Toggle viewport overlay (the information panel shown on the four corners
* of the viewport)
* @see ViewportOverlay and CustomizableViewportOverlay components
*/
toggleOverlays: () => {
const overlays = document.getElementsByClassName('viewport-overlay');
for (let i = 0; i < overlays.length; i++) {
overlays.item(i).classList.toggle('hidden');
}
},
};
const definitions = {
clearMeasurements: {
commandFn: actions.clearMeasurements,
storeContexts: [],
options: {},
},
displayNotification: {
commandFn: actions.displayNotification,
storeContexts: [],
options: {},
},
setHangingProtocol: {
commandFn: actions.setHangingProtocol,
storeContexts: [],
options: {},
},
toggleHangingProtocol: {
commandFn: actions.toggleHangingProtocol,
storeContexts: [],
options: {},
},
nextStage: {
commandFn: actions.deltaStage,
storeContexts: [],
options: { direction: 1 },
},
previousStage: {
commandFn: actions.deltaStage,
storeContexts: [],
options: { direction: -1 },
},
setViewportGridLayout: {
commandFn: actions.setViewportGridLayout,
storeContexts: [],
options: {},
},
openDICOMTagViewer: {
commandFn: actions.openDICOMTagViewer,
},
};
return {
actions,
definitions,
defaultContext: 'DEFAULT',
};
};
export default commandsModule;

106
extensions/default/src/findViewportsByPosition.ts Normal file
View File

@ -0,0 +1,106 @@
import { StateSyncService, Types } from '@ohif/core';
/**
* This find or create viewport is paired with the reduce results from
* below, and the action of this viewport is to look for previously filled
* viewports, and to re-use by position id. If there is no filled viewport,
* then one can be re-used from the display set if it isn't going to be displayed.
* @param hangingProtocolService - bound parameter supplied before using this
* @param viewportsByPosition - bound parameter supplied before using this
* @param viewportIndex - the index to retrieve
* @param positionId - the current position on screen to retrieve
* @param options - the set of options used, so that subsequent calls can
* store state that is reset by the setLayout.
* This class uses the options to store the already viewed
* display sets, filling it initially with the pre-existing viewports.
*/
export const findOrCreateViewport = (
hangingProtocolService,
viewportsByPosition,
viewportIndex: number,
positionId: string,
options: Record<string, unknown>
) => {
const byPositionViewport = viewportsByPosition?.[positionId];
if (byPositionViewport) return { ...byPositionViewport };
const { protocolId, stageIndex } = hangingProtocolService.getState();
// Setup the initial in display correctly for initial view/select
if (!options.inDisplay) {
options.inDisplay = [...viewportsByPosition.initialInDisplay];
}
// See if there is a default viewport for new views.
const missing = hangingProtocolService.getMissingViewport(
protocolId,
stageIndex,
options
);
if (missing) {
const displaySetInstanceUIDs = missing.displaySetsInfo.map(
it => it.displaySetInstanceUID
);
options.inDisplay.push(...displaySetInstanceUIDs);
return {
displaySetInstanceUIDs,
displaySetOptions: missing.displaySetsInfo.map(
it => it.displaySetOptions
),
viewportOptions: {
...missing.viewportOptions,
},
};
}
return {};
};
/**
* Records the information on what viewports are displayed in which position.
* Also records what instances from the existing positions are going to be in
* view initially.
* @param state is the viewport grid state
* @param syncService is the state sync service to use for getting existing state
* @returns Set of states that can be applied to the state sync to remember
* the current view state.
*/
const findViewportsByPosition = (
state,
{ numRows, numCols },
syncService: StateSyncService
): Record<string, Record<string, unknown>> => {
const { viewports } = state;
const syncState = syncService.getState();
const viewportsByPosition = { ...syncState.viewportsByPosition };
const initialInDisplay = [];
for (const viewport of viewports) {
if (viewport.positionId) {
const storedViewport = {
...viewport,
viewportOptions: { ...viewport.viewportOptions },
};
viewportsByPosition[viewport.positionId] = storedViewport;
// The cache doesn't store the viewport options - it is only useful
// for remembering the type of viewport and UIDs
delete storedViewport.viewportId;
delete storedViewport.viewportOptions.viewportId;
}
}
for (let row = 0; row < numRows; row++) {
for (let col = 0; col < numCols; col++) {
const pos = col + row * numCols;
const positionId = viewports?.[pos]?.positionId || `${col}-${row}`;
const viewport = viewportsByPosition[positionId];
if (viewport?.displaySetInstanceUIDs) {
initialInDisplay.push(...viewport.displaySetInstanceUIDs);
}
}
}
// Store the initially displayed elements
viewportsByPosition.initialInDisplay = initialInDisplay;
return { viewportsByPosition };
};
export default findViewportsByPosition;

156
extensions/default/src/getHangingProtocolModule.js
View File

@ -1,6 +1,9 @@
const defaultProtocol = {
id: 'default',
locked: true,
// Don't store this hanging protocol as it applies to the currently active
// display set by default
// cacheId: null,
hasUpdatedPriorsInformation: false,
name: 'Default',
createdDate: '2021-02-23T19:22:08.894Z',
@ -9,6 +12,25 @@ const defaultProtocol = {
editableBy: {},
protocolMatchingRules: [],
toolGroupIds: ['default'],
// -1 would be used to indicate active only, whereas other values are
// the number of required priors referenced - so 0 means active with
// 0 or more priors.
numberOfPriorsReferenced: 0,
// Default viewport is used to define the viewport when
// additional viewports are added using the layout tool
defaultViewport: {
viewportOptions: {
viewportType: 'stack',
toolGroupId: 'default',
allowUnmatchedView: true,
},
displaySets: [
{
id: 'defaultDisplaySetId',
matchedDisplaySetsIndex: -1,
},
],
},
displaySetSelectors: {
defaultDisplaySetId: {
// Unused currently
@ -24,12 +46,12 @@ const defaultProtocol = {
},
},
],
studyMatchingRules: [],
// Can be used to select matching studies
// studyMatchingRules: [],
},
},
stages: [
{
id: 'hYbmMy3b7pz7GLiaT',
name: 'default',
viewportStructure: {
layoutType: 'grid',
@ -38,6 +60,119 @@ const defaultProtocol = {
columns: 1,
},
},
viewports: [
{
viewportOptions: {
viewportType: 'stack',
toolGroupId: 'default',
// initialImageOptions: {
// index: 180,
// preset: 'middle', // 'first', 'last', 'middle'
// },
},
displaySets: [
{
id: 'defaultDisplaySetId',
},
],
},
],
createdDate: '2021-02-23T18:32:42.850Z',
},
// This is an example of a 2x2 layout that requires at least 2 viewports
// filled to be navigatable to
{
name: '2x2',
// Indicate that the number of viewports needed is 2 filled viewports,
// but that 4 viewports are preferred.
stageActivation: {
enabled: {
minViewportsMatched: 4,
},
passive: {
minViewportsMatched: 2,
},
},
viewportStructure: {
layoutType: 'grid',
properties: {
rows: 1,
columns: 2,
},
},
viewports: [
{
viewportOptions: {
toolGroupId: 'default',
},
displaySets: [
{
id: 'defaultDisplaySetId',
matchedDisplaySetsIndex: 3,
},
],
},
{
viewportOptions: {
toolGroupId: 'default',
},
displaySets: [
{
id: 'defaultDisplaySetId',
matchedDisplaySetsIndex: 2,
},
],
},
{
viewportOptions: {
toolGroupId: 'default',
},
displaySets: [
{
id: 'defaultDisplaySetId',
matchedDisplaySetsIndex: 1,
},
],
},
{
viewportOptions: {
toolGroupId: 'default',
// initialImageOptions: {
// index: 180,
// preset: 'middle', // 'first', 'last', 'middle'
// },
},
displaySets: [
{
id: 'defaultDisplaySetId',
matchedDisplaySetsIndex: 0,
},
],
},
],
},
// This is an example of a layout with more than one element in it
// It can be navigated to using , and . (prev/next stage)
{
name: '1x2',
// Indicate that the number of viewports needed is 1 filled viewport,
// but that 2 viewports are preferred.
stageActivation: {
enabled: {
minViewportsMatched: 3,
},
},
viewportStructure: {
layoutType: 'grid',
properties: {
rows: 1,
columns: 2,
},
},
viewports: [
{
viewportOptions: {
@ -53,11 +188,26 @@ const defaultProtocol = {
},
],
},
{
viewportOptions: {
toolGroupId: 'default',
// initialImageOptions: {
// index: 180,
// preset: 'middle', // 'first', 'last', 'middle'
// },
},
displaySets: [
{
id: 'defaultDisplaySetId',
// Shows the second index of this image set
matchedDisplaySetsIndex: 1,
},
],
},
],
createdDate: '2021-02-23T18:32:42.850Z',
},
],
numberOfPriorsReferenced: -1,
};
function getHangingProtocolModule() {

1
extensions/default/src/getSopClassHandlerModule.js
View File

@ -29,6 +29,7 @@ const makeDisplaySet = instances => {
SeriesDescription: instance.SeriesDescription || '',
Modality: instance.Modality,
isMultiFrame: isMultiFrame(instance),
countIcon: displayReconstructableInfo.value ? 'icon-mpr' : undefined,
numImageFrames: instances.length,
SOPClassHandlerId: `${id}.sopClassHandlerModule.${sopClassHandlerName}`,
isReconstructable: displayReconstructableInfo.value,

29
extensions/default/src/init.js
View File

@ -11,6 +11,7 @@ const metadataProvider = classes.MetadataProvider;
* @param {Object} configuration
*/
export default function init({ servicesManager, configuration }) {
const { stateSyncService } = servicesManager.services;
// Add
DicomMetadataStore.subscribe(
DicomMetadataStore.EVENTS.INSTANCES_ADDED,
@ -23,6 +24,34 @@ export default function init({ servicesManager, configuration }) {
DicomMetadataStore.EVENTS.SERIES_UPDATED,
handlePETImageMetadata
);
// viewportGridStore is a sync state which stores the entire
// ViewportGridService getState, by the keys `<activeStudyUID>:<protocolId>:<stageIndex>`
// Used to recover manual changes to the layout of a stage.
stateSyncService.register('viewportGridStore', { clearOnModeExit: true });
// displaySetSelectorMap stores a map from
// `<activeStudyUID>:<displaySetSelectorId>:<matchOffset>` to
// a displaySetInstanceUID, used to display named display sets in
// specific spots within a hanging protocol and be able to remember what the
// user did with those named spots between stages and protocols.
stateSyncService.register('displaySetSelectorMap', { clearOnModeExit: true });
// Stores a map from `<activeStudyUID>:${protocolId}` to the getHPInfo results
// in order to recover the correct stage when returning to a Hanging Protocol.
stateSyncService.register('hangingProtocolStageIndexMap', {
clearOnModeExit: true,
});
// Stores a map from the to be applied hanging protocols `<activeStudyUID>:<protocolId>`
// to the previously applied hanging protolStageIndexMap key, in order to toggle
// off the applied protocol and remember the old state.
stateSyncService.register('toggleHangingProtocol', { clearOnModeExit: true });
// Stores the viewports by `rows-cols` position so that when the layout
// changes numRows and numCols, the viewports can be remembers and then replaced
// afterwards.
stateSyncService.register('viewportsByPosition', { clearOnModeExit: true });
}
const handlePETImageMetadata = ({ SeriesInstanceUID, StudyInstanceUID }) => {

75
extensions/default/src/utils/reuseCachedLayouts.ts Normal file
View File

@ -0,0 +1,75 @@
import { HangingProtocolService, StateSyncService, Types } from '@ohif/core';
export type ReturnType = {
hangingProtocolStageIndexMap: Record<string, Types.HangingProtocol.HPInfo>;
viewportGridStore: Record<string, unknown>;
displaySetSelectorMap: Record<string, string>;
};
/**
* Calculates a set of state information for hanging protocols and viewport grid
* which defines the currently applied hanging protocol state.
* @param state is the viewport grid state
* @param syncService is the state sync service to use for getting existing state
* @returns Set of states that can be applied to the state sync to remember
* the current view state.
*/
const reuseCachedLayout = (
state,
hangingProtocolService: HangingProtocolService,
syncService: StateSyncService
): ReturnType => {
const { activeViewportIndex, viewports, layout } = state;
const hpInfo = hangingProtocolService.getState();
const { protocolId, stageIndex, activeStudyUID } = hpInfo;
const { protocol } = hangingProtocolService.getActiveProtocol();
const stage = protocol.stages[stageIndex];
const storeId = `${activeStudyUID}:${protocolId}:${stageIndex}`;
const syncState = syncService.getState();
const cacheId = `${activeStudyUID}:${protocolId}`;
const viewportGridStore = { ...syncState.viewportGridStore };
const hangingProtocolStageIndexMap = {
...syncState.hangingProtocolStageIndexMap,
};
const displaySetSelectorMap = { ...syncState.displaySetSelectorMap };
const { rows, columns } = stage.viewportStructure.properties;
const custom =
stage.viewports.length !== state.viewports.length ||
state.layout.numRows !== rows ||
state.layout.numCols !== columns;
hangingProtocolStageIndexMap[cacheId] = hpInfo;
if (storeId && custom) {
viewportGridStore[storeId] = { ...state };
}
for (let idx = 0; idx < state.viewports.length; idx++) {
const viewport = state.viewports[idx];
const { displaySetOptions, displaySetInstanceUIDs } = viewport;
if (!displaySetOptions) continue;
for (let i = 0; i < displaySetOptions.length; i++) {
const displaySetUID = displaySetInstanceUIDs[i];
if (!displaySetUID) continue;
if (idx === activeViewportIndex && i === 0) {
displaySetSelectorMap[
`${activeStudyUID}:activeDisplaySet:0`
] = displaySetUID;
}
if (displaySetOptions[i]?.id) {
displaySetSelectorMap[
`${activeStudyUID}: ${displaySetOptions[i].id}: ${displaySetOptions[i]
.matchedDisplaySetsIndex || 0}`
] = displaySetUID;
}
}
}
return {
hangingProtocolStageIndexMap,
viewportGridStore,
displaySetSelectorMap,
};
};
export default reuseCachedLayout;

12
extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptBeginTracking.js
View File

@ -7,12 +7,12 @@ const RESPONSE = {
};
function promptBeginTracking({ servicesManager, extensionManager }, ctx, evt) {
const { UIViewportDialogService } = servicesManager.services;
const { uiViewportDialogService } = servicesManager.services;
const { viewportIndex, StudyInstanceUID, SeriesInstanceUID } = evt;
return new Promise(async function(resolve, reject) {
let promptResult = await _askTrackMeasurements(
UIViewportDialogService,
uiViewportDialogService,
viewportIndex
);
@ -25,7 +25,7 @@ function promptBeginTracking({ servicesManager, extensionManager }, ctx, evt) {
});
}
function _askTrackMeasurements(UIViewportDialogService, viewportIndex) {
function _askTrackMeasurements(uiViewportDialogService, viewportIndex) {
return new Promise(function(resolve, reject) {
const message = 'Track measurements for this series?';
const actions = [
@ -49,11 +49,11 @@ function _askTrackMeasurements(UIViewportDialogService, viewportIndex) {
},
];
const onSubmit = result => {
UIViewportDialogService.hide();
uiViewportDialogService.hide();
resolve(result);
};
UIViewportDialogService.show({
uiViewportDialogService.show({
viewportIndex,
id: 'measurement-tracking-prompt-begin-tracking',
type: 'info',
@ -61,7 +61,7 @@ function _askTrackMeasurements(UIViewportDialogService, viewportIndex) {
actions,
onSubmit,
onOutsideClick: () => {
UIViewportDialogService.hide();
uiViewportDialogService.hide();
resolve(RESPONSE.CANCEL);
},
});

12
extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptHydrateStructuredReport.js
View File

@ -16,7 +16,7 @@ function promptHydrateStructuredReport(
evt
) {
const {
UIViewportDialogService,
uiViewportDialogService,
displaySetService,
} = servicesManager.services;
const { viewportIndex, displaySetInstanceUID } = evt;
@ -26,7 +26,7 @@ function promptHydrateStructuredReport(
return new Promise(async function(resolve, reject) {
const promptResult = await _askTrackMeasurements(
UIViewportDialogService,
uiViewportDialogService,
viewportIndex
);
@ -55,7 +55,7 @@ function promptHydrateStructuredReport(
});
}
function _askTrackMeasurements(UIViewportDialogService, viewportIndex) {
function _askTrackMeasurements(uiViewportDialogService, viewportIndex) {
return new Promise(function(resolve, reject) {
const message =
'Do you want to continue tracking measurements for this study?';
@ -72,18 +72,18 @@ function _askTrackMeasurements(UIViewportDialogService, viewportIndex) {
},
];
const onSubmit = result => {
UIViewportDialogService.hide();
uiViewportDialogService.hide();
resolve(result);
};
UIViewportDialogService.show({
uiViewportDialogService.show({
viewportIndex,
type: 'info',
message,
actions,
onSubmit,
onOutsideClick: () => {
UIViewportDialogService.hide();
uiViewportDialogService.hide();
resolve(RESPONSE.CANCEL);
},
});

8
extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewSeries.js
View File

@ -33,7 +33,7 @@ function promptTrackNewSeries({ servicesManager, extensionManager }, ctx, evt) {
});
}
function _askShouldAddMeasurements(UIViewportDialogService, viewportIndex) {
function _askShouldAddMeasurements(uiViewportDialogService, viewportIndex) {
return new Promise(function(resolve, reject) {
const message =
'Do you want to add this measurement to the existing report?';
@ -51,18 +51,18 @@ function _askShouldAddMeasurements(UIViewportDialogService, viewportIndex) {
},
];
const onSubmit = result => {
UIViewportDialogService.hide();
uiViewportDialogService.hide();
resolve(result);
};
UIViewportDialogService.show({
uiViewportDialogService.show({
viewportIndex,
type: 'info',
message,
actions,
onSubmit,
onOutsideClick: () => {
UIViewportDialogService.hide();
uiViewportDialogService.hide();
resolve(RESPONSE.CANCEL);
},
});

1
extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.tsx
View File

@ -453,6 +453,7 @@ function _mapDisplaySets(
modality: ds.Modality,
seriesDate: formatDate(ds.SeriesDate),
numInstances: ds.numImageFrames,
countIcon: ds.countIcon,
StudyInstanceUID: ds.StudyInstanceUID,
componentType,
imageSrc,

1
extensions/test-extension/src/custom-attribute/maxNumImageFrames.ts Normal file
View File

@ -0,0 +1 @@
export default (study, extraData) => Math.max(...(extraData?.displaySets?.map?.(ds => (ds.numImageFrames ?? 0))) || [0]);

1
extensions/test-extension/src/custom-attribute/numberOfDisplaySets.ts Normal file
View File

@ -0,0 +1 @@
export default (study, extraData) => extraData?.displaySets?.length;

5
extensions/test-extension/src/custom-attribute/numberOfDisplaySetsWithImages.ts Normal file
View File

@ -0,0 +1,5 @@
export default (study, extraData) => {
const ret = extraData?.displaySets?.filter(ds => ds.numImageFrames>0)?.length;
console.log("number of display sets with images", ret);
return ret;
};

33
extensions/test-extension/src/custom-attribute/sameAs.ts Normal file
View File

@ -0,0 +1,33 @@
/**
* This function extracts an attribute from the already matched display sets, and
* compares it to the attribute in the current display set, and indicates if they match.
* From 'this', it uses:
* `sameAttribute` as the attribute name to look for
* `sameDisplaySetId` as the display set id to look for
* From `options`, it looks for
*/
export default function (displaySet, options) {
const { sameAttribute, sameDisplaySetId } = this;
if( !sameAttribute ) {
console.log("sameAttribute not defined in", this);
return `sameAttribute not defined in ${this.id}`;
}
if( !sameDisplaySetId ) {
console.log("sameDisplaySetId not defined in", this);
return `sameDisplaySetId not defined in ${this.id}`;
}
const { displaySetMatchDetails, displaySets } = options;
const match = displaySetMatchDetails.get(sameDisplaySetId);
if( !match ) {
console.log("No match for display set", sameDisplaySetId);
return false;
}
const { displaySetInstanceUID } = match;
const altDisplaySet = displaySets.find(it => it.displaySetInstanceUID==displaySetInstanceUID);
if( !altDisplaySet ) {
console.log("No display set found with", displaySetInstanceUID, "in", displaySets);
return false;
}
const testValue = altDisplaySet[sameAttribute];
return testValue===displaySet[sameAttribute];
}

1
extensions/test-extension/src/custom-attribute/seriesDescriptionsFromDisplaySets.ts Normal file
View File

@ -0,0 +1 @@
export default (study, extraData) => extraData?.displaySets?.map(ds => ds.SeriesDescription);

259
extensions/test-extension/src/hp/hpMN.ts Normal file
View File

@ -0,0 +1,259 @@
import { Types } from '@ohif/core';
/**
* This hanging protocol has multiple stages, which are enabled when
* there are enough display sets with images to fill the stage, and
* are passive when there is at least one display set.
* Enabled display sets are navigated to by default, while passive ones
* are navigated to manually using the ctrl+end keyboard shortcut.
*/
const hpMN: Types.HangingProtocol.Protocol = {
hasUpdatedPriorsInformation: false,
id: '@ohif/hp-extension.mn',
description: 'Has various hanging protocol layouts for use in testing',
name: '2x2',
protocolMatchingRules: [
{
id: 'OneOrMoreSeries',
weight: 1,
attribute: 'numberOfDisplaySetsWithImages',
constraint: {
greaterThan: 1,
},
},
],
toolGroupIds: ['default'],
displaySetSelectors: {
defaultDisplaySetId: {
seriesMatchingRules: [
{
attribute: 'numImageFrames',
constraint: {
greaterThan: { value: 0 },
},
},
],
},
},
defaultViewport: {
viewportOptions: {
viewportType: 'stack',
toolGroupId: 'default',
allowUnmatchedView: true,
},
displaySets: [
{
id: 'defaultDisplaySetId',
matchedDisplaySetsIndex: -1,
},
],
},
stages: [
{
id: '2x2',
stageActivation: {
enabled: {
minViewportsMatched: 4,
},
},
viewportStructure: {
layoutType: 'grid',
properties: {
rows: 2,
columns: 2,
},
},
viewports: [
{
viewportOptions: {
toolGroupId: 'default',
allowUnmatchedView: true,
},
displaySets: [
{
id: 'defaultDisplaySetId',
},
],
},
{
viewportOptions: {
toolGroupId: 'default',
allowUnmatchedView: true,
},
displaySets: [
{
matchedDisplaySetsIndex: 1,
id: 'defaultDisplaySetId',
},
],
},
{
viewportOptions: {
toolGroupId: 'default',
allowUnmatchedView: true,
},
displaySets: [
{
matchedDisplaySetsIndex: 2,
id: 'defaultDisplaySetId',
},
],
},
{
viewportOptions: {
toolGroupId: 'default',
allowUnmatchedView: true,
},
displaySets: [
{
matchedDisplaySetsIndex: 3,
id: 'defaultDisplaySetId',
},
],
},
],
},
// 3x1 stage
{
id: '3x1',
// Obsolete settings:
requiredViewports: 1,
preferredViewports: 3,
// New equivalent:
stageActivation: {
enabled: {
minViewportsMatched: 3,
},
},
viewportStructure: {
layoutType: 'grid',
properties: {
rows: 1,
columns: 3,
},
},
viewports: [
{
viewportOptions: {
toolGroupId: 'default',
allowUnmatchedView: true,
},
displaySets: [
{
id: 'defaultDisplaySetId',
reuseId: '0-0',
},
],
},
{
viewportOptions: {
toolGroupId: 'default',
allowUnmatchedView: true,
},
displaySets: [
{
matchedDisplaySetsIndex: 1,
id: 'defaultDisplaySetId',
reuseId: '1-0',
},
],
},
{
viewportOptions: {
toolGroupId: 'default',
allowUnmatchedView: true,
},
displaySets: [
{
matchedDisplaySetsIndex: 2,
id: 'defaultDisplaySetId',
reuseId: '0-1',
},
],
},
],
},
// A 2x1 stage
{
id: '2x1',
requiredViewports: 1,
preferredViewports: 2,
stageActivation: {
enabled: {
minViewportsMatched: 2,
},
},
viewportStructure: {
layoutType: 'grid',
layoutType: 'grid',
properties: {
rows: 1,
columns: 2,
},
},
viewports: [
{
viewportOptions: {
toolGroupId: 'default',
allowUnmatchedView: true,
},
displaySets: [
{
id: 'defaultDisplaySetId',
},
],
},
{
viewportOptions: {
toolGroupId: 'default',
allowUnmatchedView: true,
},
displaySets: [
{
matchedDisplaySetsIndex: 1,
id: 'defaultDisplaySetId',
},
],
},
],
},
// A 1x1 stage - should be automatically activated if there is only 1 viewable instance
{
id: '1x1',
requiredViewports: 1,
preferredViewports: 1,
stageActivation: {
enabled: {
minViewportsMatched: 1,
},
},
viewportStructure: {
layoutType: 'grid',
properties: {
rows: 1,
columns: 1,
},
},
viewports: [
{
viewportOptions: {
toolGroupId: 'default',
allowUnmatchedView: true,
},
displaySets: [
{
matchedDisplaySetsIndex: 1,
id: 'defaultDisplaySetId',
},
],
},
],
},
],
numberOfPriorsReferenced: -1,
};
export default hpMN;

17
extensions/test-extension/src/hp/index.ts Normal file
View File

@ -0,0 +1,17 @@
import hpMN from './hpMN';
const hangingProtocols = [
{
id: '@ohif/hp-extension.mn',
protocol: hpMN,
},
];
/**
* Registers a single study hanging protocol which can be referenced as
* `@ohif/hp-exgtension.mn`, that has initial layouts which show images
* only display sets, up to a 2x2 view.
*/
export default function getHangingProtocolModule() {
return hangingProtocols;
}

55
extensions/test-extension/src/index.tsx
View File

@ -1,17 +1,64 @@
import { id } from './id';
import { Types } from '@ohif/core';
import { id } from './id';
import getHangingProtocolModule from './hp';
// import {setViewportZoomPan, storeViewportZoomPan } from './custom-viewport/setViewportZoomPan';
import sameAs from './custom-attribute/sameAs';
import numberOfDisplaySets from './custom-attribute/numberOfDisplaySets';
import numberOfDisplaySetsWithImages from './custom-attribute/numberOfDisplaySetsWithImages';
import maxNumImageFrames from './custom-attribute/maxNumImageFrames';
import seriesDescriptionsFromDisplaySets from './custom-attribute/seriesDescriptionsFromDisplaySets';
/**
*
* The test extension provides additional behaviour for testing various
* customizations and settings for OHIF.
*/
const testExtension: Types.Extensions.Extension = {
/**
* Only required property. Should be a unique value across all extensions.
*/
id,
preRegistration() {
console.debug('hello from test-extension init.js');
/** Register additional behaviour:
* * HP custom attribute seriesDescriptions to retrieve an array of all series descriptions
* * HP custom attribute numberOfDisplaySets to retrieve the number of display sets
* * HP custom attribute numberOfDisplaySetsWithImages to retrieve the number of display sets containing images
* * HP custom attribute to return a boolean true, when the attribute sameAttribute has the same
* value as another series description in an already matched display set selector named with the value
* in `sameDisplaySetId`
*/
preRegistration: ({ servicesManager }: Types.Extensions.ExtensionParams) => {
const { hangingProtocolService } = servicesManager.services;
hangingProtocolService.addCustomAttribute(
'seriesDescriptions',
'Series Descriptions',
seriesDescriptionsFromDisplaySets
);
hangingProtocolService.addCustomAttribute(
'numberOfDisplaySets',
'Number of displays sets',
numberOfDisplaySets
);
hangingProtocolService.addCustomAttribute(
'numberOfDisplaySetsWithImages',
'Number of displays sets with images',
numberOfDisplaySetsWithImages
);
hangingProtocolService.addCustomAttribute(
'maxNumImageFrames',
'Maximum of number of image frames',
maxNumImageFrames
);
hangingProtocolService.addCustomAttribute(
'sameAs',
'Match an attribute in an existing display set',
sameAs
);
},
/** Registers some additional hanging protocols. See hp/index.tsx for more details */
getHangingProtocolModule,
};
export default testExtension;

4
extensions/tmtv/src/getHangingProtocolModule.js
View File

@ -32,7 +32,6 @@ const ptCT = {
ctDisplaySet: {
seriesMatchingRules: [
{
weight: 1,
attribute: 'Modality',
constraint: {
equals: {
@ -42,7 +41,6 @@ const ptCT = {
required: true,
},
{
weight: 1,
attribute: 'isReconstructable',
constraint: {
equals: {
@ -75,7 +73,6 @@ const ptCT = {
required: true,
},
{
weight: 1,
attribute: 'isReconstructable',
constraint: {
equals: {
@ -105,7 +102,6 @@ const ptCT = {
stages: [
{
id: 'hYbmMy3b7pz7GLiaT',
name: 'default',
viewportStructure: {
layoutType: 'grid',

1
modes/basic-dev-mode/src/index.js
View File

@ -140,7 +140,6 @@ function modeFactory({ modeConfiguration }) {
toolbarService,
} = servicesManager.services;
toolbarService.reset();
toolGroupService.destroy();
},
validationTags: {

1
modes/basic-test-mode/src/index.js
View File

@ -132,7 +132,6 @@ function modeFactory() {
cornerstoneViewportService,
} = servicesManager.services;
toolbarService.reset();
toolGroupService.destroy();
syncGroupService.destroy();
segmentationService.destroy();

100
modes/basic-test-mode/src/toolbarButtons.js
View File

@ -297,10 +297,96 @@ const toolbarButtons = [
},
{
id: 'Layout',
type: 'ohif.layoutSelector',
type: 'ohif.splitButton',
props: {
rows: 3,
columns: 3,
groupId: 'LayoutTools',
isRadio: false,
primary: {
id: 'Layout',
type: 'action',
uiType: 'ohif.layoutSelector',
icon: 'tool-layout',
label: 'Grid Layout',
props: {
rows: 4,
columns: 4,
commands: [
{
commandName: 'setLayout',
commandOptions: {},
context: 'CORNERSTONE',
},
],
},
},
secondary: {
icon: 'chevron-down',
label: '',
isActive: true,
tooltip: 'Hanging Protocols',
},
items: [
{
id: '2x2',
type: 'action',
label: '2x2',
commands: [
{
commandName: 'setHangingProtocol',
commandOptions: {
protocolId: '@ohif/hp-extension.mn',
stageId: '2x2',
},
context: 'DEFAULT',
},
],
},
{
id: '3x1',
type: 'action',
label: '3x1',
commands: [
{
commandName: 'setHangingProtocol',
commandOptions: {
protocolId: '@ohif/hp-extension.mn',
stageId: '3x1',
},
context: 'DEFAULT',
},
],
},
{
id: '2x1',
type: 'action',
label: '2x1',
commands: [
{
commandName: 'setHangingProtocol',
commandOptions: {
protocolId: '@ohif/hp-extension.mn',
stageId: '2x1',
},
context: 'DEFAULT',
},
],
},
{
id: '1x1',
type: 'action',
label: '1x1',
commands: [
{
commandName: 'setHangingProtocol',
commandOptions: {
protocolId: '@ohif/hp-extension.mn',
stageId: '1x1',
},
context: 'DEFAULT',
},
],
},
],
},
},
{
@ -312,9 +398,11 @@ const toolbarButtons = [
label: 'MPR',
commands: [
{
commandName: 'toggleMPR',
commandOptions: {},
context: 'CORNERSTONE',
commandName: 'toggleHangingProtocol',
commandOptions: {
protocolId: 'mpr',
},
context: 'DEFAULT',
},
],
},

1
modes/longitudinal/src/index.js
View File

@ -159,7 +159,6 @@ function modeFactory() {
_activatePanelTriggersSubscriptions.forEach(sub => sub.unsubscribe());
_activatePanelTriggersSubscriptions = [];
toolbarService.reset();
toolGroupService.destroy();
syncGroupService.destroy();
segmentationService.destroy();

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

@ -27,18 +27,6 @@ function _createButton(type, id, icon, label, commands, tooltip, uiType) {
};
}
function _createCommands(commandName, toolName, toolGroupIds) {
return toolGroupIds.map(toolGroupId => ({
/* It's a command that is being run when the button is clicked. */
commandName,
commandOptions: {
toolName,
toolGroupId,
},
context: 'CORNERSTONE',
}));
}
const _createActionButton = _createButton.bind(null, 'action');
const _createToggleButton = _createButton.bind(null, 'toggle');
const _createToolButton = _createButton.bind(null, 'tool');
@ -312,9 +300,11 @@ const toolbarButtons = [
label: 'MPR',
commands: [
{
commandName: 'toggleMPR',
commandOptions: {},
context: 'CORNERSTONE',
commandName: 'toggleHangingProtocol',
commandOptions: {
protocolId: 'mpr',
},
context: 'DEFAULT',
},
],
},
@ -330,8 +320,8 @@ const toolbarButtons = [
{
commandName: 'setToolActive',
commandOptions: {
toolGroupId: 'mpr',
toolName: 'Crosshairs',
toolGroupId: 'mpr',
},
context: 'CORNERSTONE',
},

2
modes/tmtv/src/index.js
View File

@ -136,13 +136,11 @@ function modeFactory({ modeConfiguration }) {
const {
toolGroupService,
syncGroupService,
toolbarService,
segmentationService,
cornerstoneViewportService,
} = servicesManager.services;
unsubscriptions.forEach(unsubscribe => unsubscribe());
toolbarService.reset();
toolGroupService.destroy();
syncGroupService.destroy();
segmentationService.destroy();

8
modes/tmtv/src/toolbarButtons.js
View File

@ -203,9 +203,11 @@ const toolbarButtons = [
label: 'MPR',
commands: [
{
commandName: 'toggleMPR',
commandOptions: {},
context: 'CORNERSTONE',
commandName: 'toggleHangingProtocol',
commandOptions: {
protocolId: 'mpr',
},
context: 'DEFAULT',
},
],
},

49
platform/core/src/classes/CommandsManager.ts
View File

@ -1,4 +1,5 @@
import log from '../log.js';
import { Command, Commands } from '../types/Command';
/**
* The definition of a command
@ -106,7 +107,7 @@ export class CommandsManager {
* @param {String} [contextName] - Specific command to look in. Defaults to current activeContexts
*/
getCommand = (commandName, contextName) => {
let contexts = [];
const contexts = [];
if (contextName) {
const context = this.getContext(contextName);
@ -140,7 +141,7 @@ export class CommandsManager {
* @param {Object} [options={}] - Extra options to pass the command. Like a mousedown event
* @param {String} [contextName]
*/
runCommand(commandName, options = {}, contextName) {
public runCommand(commandName: string, options = {}, contextName?: string) {
const definition = this.getCommand(commandName, contextName);
if (!definition) {
log.warn(`Command "${commandName}" not found in current context`);
@ -161,6 +162,50 @@ export class CommandsManager {
return commandFn(commandParams);
}
}
/**
* Run one or more commands with specified extra options.
* Returns the result of the last command run.
*
* @param toRun - A specification of one or more commands
* @param options - to include in the commands run beyond
* the commandOptions specified in the base.
*/
public run(
toRun: Command | Commands | Command[] | undefined,
options?: Record<string, unknown>
): unknown {
if (!toRun) return;
const commands =
(Array.isArray(toRun) && toRun) ||
((toRun as Command).commandName && [toRun]) ||
(Array.isArray((toRun as Commands).commands) &&
(toRun as Commands).commands);
if (!commands) {
console.log("Command isn't runnable", toRun);
return;
}
let result;
(commands as Command[]).forEach(
({ commandName, commandOptions, context }) => {
if (commandName) {
result = this.runCommand(
commandName,
{
...commandOptions,
...options,
},
context
);
} else {
console.warn('No command name supplied in', toRun);
}
}
);
return result;
}
}
export default CommandsManager;

14
platform/core/src/defaults/hotkeyBindings.js
View File

@ -88,6 +88,20 @@ const bindings = [
// keys: ['pagedown'],
// isEditable: true,
// },
{
commandName: 'nextStage',
context: 'DEFAULT',
label: 'Next Stage',
keys: ['.'],
isEditable: true,
},
{
commandName: 'previousStage',
context: 'DEFAULT',
label: 'Previous Stage',
keys: [','],
isEditable: true,
},
{
commandName: 'nextImage',
label: 'Next Image',

1
platform/core/src/extensions/MODULE_TYPES.js
View File

@ -1,6 +1,7 @@
export default {
COMMANDS: 'commandsModule',
CUSTOMIZATION: 'customizationModule',
STATE_SYNC: 'stateSyncModule',
DATA_SOURCE: 'dataSourcesModule',
PANEL: 'panelModule',
SOP_CLASS_HANDLER: 'sopClassHandlerModule',

1
platform/core/src/index.test.js
View File

@ -25,6 +25,7 @@ describe('Top level exports', () => {
//
'CineService',
'CustomizationService',
'StateSyncService',
'UIDialogService',
'UIModalService',
'UINotificationService',

3
platform/core/src/index.ts
View File

@ -29,6 +29,7 @@ import {
PubSubService,
UserAuthenticationService,
CustomizationService,
StateSyncService,
PanelService,
} from './services';
@ -61,6 +62,7 @@ const OHIF = {
//
CineService,
CustomizationService,
StateSyncService,
UIDialogService,
UIModalService,
UINotificationService,
@ -99,6 +101,7 @@ export {
//
CineService,
CustomizationService,
StateSyncService,
UIDialogService,
UIModalService,
UINotificationService,

58
platform/core/src/services/CustomizationService/CustomizationService.ts
View File

@ -63,7 +63,7 @@ export default class CustomizationService extends PubSubService {
modeCustomizations: Record<string, Customization> = {};
globalCustomizations: Record<string, Customization> = {};
configuration: UICustomizationConfiguration;
configuration: CustomizationConfiguration;
constructor({ configuration, commandsManager }) {
super(EVENTS);
@ -97,36 +97,6 @@ export default class CustomizationService extends PubSubService {
this.modeCustomizations = {};
}
/**
*
* @param {*} interaction - can be undefined to run nothing
* @param {*} extraOptions to include in the commands run
*/
recordInteraction(
interaction: Customization | void,
extraOptions?: Record<string, unknown>
): void {
if (!interaction) return;
const commandsManager = this.commandsManager;
const { commands = [] } = interaction;
commands.forEach(({ commandName, commandOptions, context }) => {
if (commandName) {
commandsManager.runCommand(
commandName,
{
interaction,
...commandOptions,
...extraOptions,
},
context
);
} else {
console.warn('No command name supplied in', interaction);
}
});
}
public getModeCustomizations(): Record<string, Customization> {
return this.modeCustomizations;
}
@ -145,6 +115,23 @@ export default class CustomizationService extends PubSubService {
});
}
/** This is the preferred getter for all customizations,
* getting mode customizations first and otherwise global customizations.
*
* @param customizationId - the customization id to look for
* @param defaultValue - is the default value to return. Note this value
* may have been extended with any customizationType extensions provided,
* so you cannot just use `|| defaultValue`
* @return A customization to use if one is found, or the default customization,
* both enhanced with any customizationType inheritance (see applyType)
*/
public getCustomization(
customizationId: string,
defaultValue?: Customization
): Customization | void {
return this.getModeCustomization(customizationId, defaultValue);
}
/** Mode customizations are changes to the behaviour of the extensions
* when running in a given mode. Reset clears mode customizations.
* Note that global customizations over-ride mode customizations.
@ -168,12 +155,17 @@ export default class CustomizationService extends PubSubService {
);
}
/** Applies any inheritance due to UI Type customization */
/**
* Applies any inheritance due to UI Type customization.
* This will look for customizationType in the customization object
* and if that is found, will assign all iterable values from that
* type into the new type, allowing default behaviour to be configured.
*/
public applyType(customization: Customization): Customization {
if (!customization) return customization;
const { customizationType } = customization;
if (!customizationType) return customization;
const parent = this.getModeCustomization(customizationType);
const parent = this.getCustomization(customizationType);
return parent
? Object.assign(Object.create(parent), customization)
: customization;

36
platform/core/src/services/HangingProtocolService/HPMatcher.js
View File

@ -29,27 +29,31 @@ const match = (
let requiredFailed = false;
let score = 0;
// Allow for matching against current or prior specifically
const prior = options?.studies?.[1];
const current = options?.studies?.[0];
const instance = (metadataInstance.images || metadataInstance.others)?.[0];
const fromSrc = {
prior,
current,
instance,
...options,
options,
metadataInstance,
};
rules.forEach(rule => {
const { attribute } = rule;
const { attribute, from = 'metadataInstance' } = rule;
// Do not use the custom attribute from the metadataInstance since it is subject to change
if (customAttributeRetrievalCallbacks.hasOwnProperty(attribute)) {
readValues[attribute] = customAttributeRetrievalCallbacks[
attribute
].callback(metadataInstance, options);
].callback.call(rule, metadataInstance, options);
} else {
readValues[attribute] =
metadataInstance[attribute] ??
((metadataInstance.images || metadataInstance.others || [])[0] || {})[
attribute
];
fromSrc[from]?.[attribute] ?? instance?.[attribute];
}
console.log(
'Test',
attribute,
readValues[attribute],
JSON.stringify(rule.constraint)
);
// Format the constraint as required by Validate.js
const testConstraint = {
[attribute]: rule.constraint,
@ -70,6 +74,14 @@ const match = (
errorMessages = ['Something went wrong during validation.', e];
}
console.log(
'Test',
`${from}.${attribute}`,
readValues[attribute],
JSON.stringify(rule.constraint),
!errorMessages
);
if (!errorMessages) {
// If no errorMessages were returned, then validation passed.

17
platform/core/src/services/HangingProtocolService/HangingProtocolService.test.js
View File

@ -117,8 +117,7 @@ const studyMatchDisplaySets = [displaySet3, displaySet2, displaySet1];
function checkHpsBestMatch(hps) {
hps.run({ studies: [studyMatch], displaySets: studyMatchDisplaySets });
const { hpAlreadyApplied, viewportMatchDetails } = hps.getMatchDetails();
expect(hpAlreadyApplied).toMatchObject(new Map([[0, false]]));
const { viewportMatchDetails } = hps.getMatchDetails();
expect(viewportMatchDetails.size).toBe(1);
expect(viewportMatchDetails.get(0)).toMatchObject({
viewportOptions: {
@ -131,9 +130,11 @@ function checkHpsBestMatch(hps) {
// ds2 fails to match required and ds3 fails to match an optional.
displaySetsInfo: [
{
SeriesInstanceUID: 'ds1',
displaySetInstanceUID: 'displaySet1',
displaySetOptions: {},
displaySetOptions: {
id: 'displaySetSelector',
options: {},
},
},
],
});
@ -191,14 +192,6 @@ describe('HangingProtocolService', () => {
it('matches best image match', () => {
checkHpsBestMatch(hangingProtocolService);
});
it('uses services manager', () => {
hangingProtocolService.run({
studies: [studyMatch],
displaySets: studyMatchDisplaySets,
});
expect(mockedFunction).toHaveBeenCalledTimes(1);
});
});
});
});

1204
platform/core/src/services/HangingProtocolService/HangingProtocolService.ts
View File

File diff suppressed because it is too large Load Diff

12
platform/core/src/services/HangingProtocolService/ProtocolEngine.js
View File

@ -81,6 +81,16 @@ export default class ProtocolEngine {
});
}
/**
* finds the match results against the given display set or
* study instance by testing the given rules against this, and using
* the provided options for testing.
*
* @param {*} metaData to match against as primary value
* @param {*} rules to apply
* @param {*} options are additional values that can be used for matching
* @returns
*/
findMatch(metaData, rules, options) {
return HPMatcher.match(
metaData,
@ -109,7 +119,7 @@ export default class ProtocolEngine {
let rules = protocol.protocolMatchingRules.slice();
if (!rules || !rules.length) {
console.warn(
'ProtocolEngine::findMatchByStudy no matching rules - specify protocolMatchingRules',
'ProtocolEngine::findMatchByStudy no matching rules - specify protocolMatchingRules for',
protocol.id
);
return;

35
platform/core/src/services/HangingProtocolService/lib/validator.js
View File

@ -14,6 +14,41 @@ validate.validators.doesNotEqual = function(value, options, key) {
}
};
// Ignore case contains.
// options testValue MUST be in lower case already, otherwise it won't match
validate.validators.containsI = function (value, options, key) {
const testValue = options?.value ?? options;
if (Array.isArray(value)) {
if (
value.some(
item => !validate.validators.containsI(item.toLowerCase(), options, key)
)
) {
return undefined;
}
return `No item of ${value.join(',')} contains ${JSON.stringify(
testValue
)}`;
}
if (Array.isArray(testValue)) {
if (
testValue.some(
subTest => !validate.validators.containsI(value, subTest, key)
)
) {
return;
}
return `${key} must contain at least one of ${testValue.join(',')}`;
}
if (
testValue &&
value.indexOf &&
value.toLowerCase().indexOf(testValue) === -1
) {
return key + 'must contain any case of' + testValue;
}
};
validate.validators.contains = function(value, options, key) {
const testValue = options?.value ?? options;
if (Array.isArray(value)) {

34
platform/core/src/services/HangingProtocolService/lib/validator.test.js
View File

@ -3,9 +3,10 @@ import validate from './validator.js';
describe('validator', () => {
const attributeMap = {
str: 'string',
upper: 'UPPER',
num: 3,
nullValue: null,
list: ['abc', 'def'],
list: ['abc', 'def', 'GHI'],
};
const options = {
@ -35,6 +36,37 @@ describe('validator', () => {
});
});
describe('containsI', () => {
it('returns match any list contains case insensitive', () => {
expect(
validate(attributeMap, { upper: { containsI: ['bye', 'pre'] } }, [
options,
])
).not.toBeUndefined();
expect(
validate(attributeMap, { list: { containsI: 'hi' } }, [options])
).toBeUndefined();
expect(
validate(attributeMap, { list: { containsI: ['hi', 'bye'] } }, [
options,
])
).toBeUndefined();
expect(
validate(attributeMap, { list: { containsI: ['bye', 'hi'] } }, [
options,
])
).toBeUndefined();
expect(
validate(attributeMap, { list: { containsI: ['ig', 'hi'] } }, [options])
).toBeUndefined();
expect(
validate(attributeMap, { upper: { containsI: ['bye', 'per'] } }, [
options,
])
).toBeUndefined();
});
});
describe('equals', () => {
it('returned undefined on equals', () => {
expect(

7
platform/core/src/services/MeasurementService/MeasurementService.ts
View File

@ -519,9 +519,14 @@ class MeasurementService extends PubSubService {
let measurement = {};
try {
const sourceMappings = this.mappings[source.uid];
const { toMeasurementSchema } = sourceMappings.find(
const sourceMapping = sourceMappings.find(
mapping => mapping.annotationType === annotationType
);
if (!sourceMapping) {
console.log('No source mapping', source);
return;
}
const { toMeasurementSchema } = sourceMapping;
/* Convert measurement */
measurement = toMeasurementSchema(sourceAnnotationDetail);

3
platform/core/src/services/ServicesManager.ts
View File

@ -1,10 +1,11 @@
import log from './../log.js';
import Services from '../types/Services';
import CommandsManager from '../classes/CommandsManager';
export default class ServicesManager {
public services: Services = {};
constructor(commandsManager) {
constructor(commandsManager: CommandsManager) {
this._commandsManager = commandsManager;
this.services = {};
this.registeredServiceNames = [];

31
platform/core/src/services/StateSyncService/StateSyncService.test.js Normal file
View File

@ -0,0 +1,31 @@
import StateSyncService from './StateSyncService';
import log from '../../log';
jest.mock('../../log.js', () => ({
info: jest.fn(),
warn: jest.fn(),
error: jest.fn(),
}));
const extensionManager = {};
describe('StateSyncService.ts', () => {
let stateSyncService;
let configuration;
beforeEach(() => {
log.warn.mockClear();
jest.clearAllMocks();
configuration = {};
stateSyncService = new StateSyncService({
configuration,
});
});
describe('init', () => {
it('init succeeds', () => {
stateSyncService.init(extensionManager);
});
});
});

80
platform/core/src/services/StateSyncService/StateSyncService.ts Normal file
View File

@ -0,0 +1,80 @@
import { PubSubService } from '../_shared/pubSubServiceInterface';
import { ExtensionManager } from '../../extensions';
const EVENTS = {};
type Obj = Record<string, unknown>;
type StateConfig = {
/** clearOnModeExit defines state configuraion that is cleared automatically on
* exiting a mode. This clearing occurs after the mode onModeExit,
* so it is possible to preserve desired state during exit to be restored
* later.
*/
clearOnModeExit?: boolean;
};
type States = {
[key: string]: Obj;
};
/**
*/
export default class StateSyncService extends PubSubService {
public static REGISTRATION = {
name: 'stateSyncService',
create: ({ configuration = {}, commandsManager }) => {
return new StateSyncService({ configuration, commandsManager });
},
};
extensionManager: ExtensionManager;
configuration: Obj;
registeredStateSets: {
[id: string]: StateConfig;
} = {};
state: States = {};
constructor({ configuration }) {
super(EVENTS);
this.configuration = configuration || {};
}
public init(extensionManager: ExtensionManager): void { }
public register(id: string, config: StateConfig): void {
this.registeredStateSets[id] = config;
this.store({ [id]: {} });
}
public getState(): Record<string, Obj> {
// TODO - return a proxy to this which is not writable in dev mode
return this.state;
}
/**
* Stores all the new state values contained in states.
*
* @param states - is an object containing replacement values to store
* @returns
*/
public store(states: States): States {
Object.keys(states).forEach(stateKey => {
if (!this.registeredStateSets[stateKey]) {
throw new Error(`No state ${stateKey} registered`);
}
});
this.state = { ...this.state, ...states };
return states;
}
public onModeExit(): void {
const toReduce = {};
for (const [key, value] of Object.entries(this.registeredStateSets)) {
if (value.clearOnModeExit) {
toReduce[key] = {};
}
}
this.store(toReduce);
}
}

3
platform/core/src/services/StateSyncService/index.ts Normal file
View File

@ -0,0 +1,3 @@
import StateSyncService from './StateSyncService';
export default StateSyncService;

55
platform/core/src/services/ToolBarService/ToolbarService.ts
View File

@ -1,4 +1,6 @@
import merge from 'lodash.merge';
import { CommandsManager } from '../../classes';
import { ExtensionManager } from '../../extensions';
import { PubSubService } from '../_shared/pubSubServiceInterface';
const EVENTS = {
@ -16,37 +18,31 @@ export default class ToolbarService extends PubSubService {
},
};
constructor(commandsManager) {
buttons: Record<string, unknown> = {};
state: {
primaryToolId: string;
toggles: Record<string, boolean>;
groups: Record<string, unknown>;
} = { primaryToolId: 'WindowLevel', toggles: {}, groups: {} };
buttonSections: Record<string, unknown> = {
/**
* primary: ['Zoom', 'Wwwc'],
* secondary: ['Length', 'RectangleRoi']
*/
};
_commandsManager: CommandsManager;
extensionManager: ExtensionManager;
constructor(commandsManager: CommandsManager) {
super(EVENTS);
this._commandsManager = commandsManager;
//
this.buttons = {};
this.unsubscriptions = []; // if tools need to unsubscribe from events
this.buttonSections = {
/**
* primary: ['Zoom', 'Wwwc'],
* secondary: ['Length', 'RectangleRoi']
*/
};
// TODO: Do we need to track per context? Or do we allow for a mixed
// definition that adapts based on context?
this.state = {
primaryToolId: 'WindowLevel',
toggles: {
/* id: true/false */
},
groups: {
/* track most recent click per group...? */
},
};
}
init(extensionManager) {
public init(extensionManager: ExtensionManager): void {
this.extensionManager = extensionManager;
}
reset() {
public reset(): void {
this.unsubscriptions.forEach(unsub => unsub());
this.state = {
primaryToolId: 'WindowLevel',
@ -69,7 +65,7 @@ export default class ToolbarService extends PubSubService {
* used for calling the specified interaction. That is, the command is
* called with {...commandOptions,...options}
*/
recordInteraction(interaction, options) {
recordInteraction(interaction, options?: Record<string, unknown>) {
if (!interaction) return;
const commandsManager = this._commandsManager;
const { groupId, itemId, interactionType, commands } = interaction;
@ -181,6 +177,15 @@ export default class ToolbarService extends PubSubService {
return [this.state.primaryToolId, ...Object.keys(this.state.toggles)];
}
/** Sets the toggle state of a button to the isActive state */
public setActive(id: string, isActive: boolean): void {
if (isActive) {
this.state.toggles[id] = true;
} else {
delete this.state.toggles[id];
}
}
setButton(id, button) {
if (this.buttons[id]) {
this.buttons[id] = merge(this.buttons[id], button);

36
platform/core/src/services/ViewportGridService/ViewportGridService.ts
View File

@ -12,6 +12,7 @@ class ViewportGridService extends PubSubService {
return new ViewportGridService();
},
};
public static EVENTS = EVENTS;
serviceImplementation = {};
@ -25,8 +26,6 @@ class ViewportGridService extends PubSubService {
setActiveViewportIndex: setActiveViewportIndexImplementation,
setDisplaySetsForViewport: setDisplaySetsForViewportImplementation,
setDisplaySetsForViewports: setDisplaySetsForViewportsImplementation,
setCachedLayout: setCachedLayoutImplementation,
restoreCachedLayout: restoreCachedLayoutImplementation,
setLayout: setLayoutImplementation,
reset: resetImplementation,
onModeExit: onModeExitImplementation,
@ -51,12 +50,6 @@ class ViewportGridService extends PubSubService {
if (resetImplementation) {
this.serviceImplementation._reset = resetImplementation;
}
if (setCachedLayoutImplementation) {
this.serviceImplementation._setCachedLayout = setCachedLayoutImplementation;
}
if (restoreCachedLayoutImplementation) {
this.serviceImplementation._restoreCachedLayout = restoreCachedLayoutImplementation;
}
if (onModeExitImplementation) {
this.serviceImplementation._onModeExit = onModeExitImplementation;
}
@ -70,8 +63,11 @@ class ViewportGridService extends PubSubService {
public setActiveViewportIndex(index) {
this.serviceImplementation._setActiveViewportIndex(index);
const state = this.getState();
const viewportId = state.viewports[index]?.viewportOptions?.viewportId;
this._broadcastEvent(this.EVENTS.ACTIVE_VIEWPORT_INDEX_CHANGED, {
viewportIndex: index,
viewportId,
});
}
@ -97,8 +93,20 @@ class ViewportGridService extends PubSubService {
this.serviceImplementation._setDisplaySetsForViewports(viewports);
}
public setLayout({ numCols, numRows }) {
this.serviceImplementation._setLayout({ numCols, numRows });
/**
*
* @param numCols, numRows - the number of columns and rows to apply
* @param findOrCreateViewport is a function which takes the
* index position of the viewport, the position id, and a set of
* options that is initially provided as {} (eg to store intermediate state)
* The function returns a viewport object to use at the given position.
*/
public setLayout({ numCols, numRows, findOrCreateViewport = undefined }) {
this.serviceImplementation._setLayout({
numCols,
numRows,
findOrCreateViewport,
});
}
public reset() {
@ -115,14 +123,6 @@ class ViewportGridService extends PubSubService {
this.serviceImplementation._onModeExit();
}
public setCachedLayout({ cacheId, cachedLayout }) {
this.serviceImplementation._setCachedLayout({ cacheId, cachedLayout });
}
public restoreCachedLayout(cacheId) {
this.serviceImplementation._restoreCachedLayout(cacheId);
}
public set(state) {
this.serviceImplementation._set(state);
}

2
platform/core/src/services/index.ts
View File

@ -17,6 +17,7 @@ import UserAuthenticationService from './UserAuthenticationService';
import CustomizationService from './CustomizationService';
import Services from '../types/Services';
import StateSyncService from './StateSyncService';
import PanelService from './PanelService';
export {
@ -24,6 +25,7 @@ export {
MeasurementService,
ServicesManager,
CustomizationService,
StateSyncService,
UIDialogService,
UIModalService,
UINotificationService,

7
platform/core/src/types/Command.ts
View File

@ -3,3 +3,10 @@ export interface Command {
commandOptions?: Record<string, unknown>;
context?: string;
}
/**
* This is the format used within many items for multiple commands
*/
export interface Commands {
commands: [];
}

263
platform/core/src/types/HangingProtocol.ts
View File

@ -1,68 +1,112 @@
type DisplaySetInfo = {
SeriesInstanceUID: string;
displaySetInstanceUID: string;
displaySetOptions: Record<string, unknown>;
import { Command } from './Command';
export type DisplaySetInfo = {
displaySetInstanceUID?: string;
displaySetOptions: DisplaySetOptions;
};
type ViewportMatchDetails = {
export type ViewportMatchDetails = {
viewportOptions: ViewportOptions;
displaySetsInfo: DisplaySetInfo[];
};
type DisplaySetMatchDetails = {
SeriesInstanceUID: string;
StudyInstanceUID: string;
export type DisplaySetMatchDetails = {
StudyInstanceUID?: string;
displaySetInstanceUID: string;
matchDetails?: any;
matchingScores?: any[];
matchingScores?: DisplaySetMatchDetails[];
sortingInfo?: any;
};
type DisplaySetAndViewportOptions = {
export type DisplaySetAndViewportOptions = {
displaySetInstanceUIDs: string[];
viewportOptions: ViewportOptions;
displaySetOptions: DisplaySetOptions;
}
};
type ViewportSpecificProtocolOptions = {
[viewportIndex: string]: DisplaySetAndViewportOptions
}
export type SetProtocolOptions = {
/** Used to provide a mapping of what keys are provided for which viewport.
* For example, a Chest XRay might use have the display set selector id of
* "ChestXRay", then the user might drag an alternate chest xray from the initially chosen one,
* and then navigate to another stage or protocol. If that new stage/protocol
* uses the name "ChestXRay", then that selection will be used instead of
* matching the display set selectors. That allows remembering the
* user selected views by name.
* Note the keys are not simple display set selector values, but are:
* `${activeStudyUID}:${displaySetSelectorId}:${matchingDisplaySetIndex || 0}`
* This is normally transparent to the user of this, but in order to specify
* specific instances, they can be added like that.
*/
displaySetSelectorMap?: Record<string, string>;
type GlobalProtocolOptions = DisplaySetAndViewportOptions
/** Used to define the display sets already in view, in order to allow
* filling empty viewports with other instances.
* Only used when the -1 value for matchedDisplaySetsIndex is provided.
* List of display set instance UID's already displayed.
*/
inDisplay?: string[];
/** Select the given stage, either by ID or position.
* Don't forget that name is used as the ID if ID not provided.
*/
stageId?: string;
stageIndex?: number;
type SetProtocolOptions =
ViewportSpecificProtocolOptions | GlobalProtocolOptions;
/** Indicates to setup the protocol and fire the PROTOCOL_RESTORED event
* but don't fire the protocol changed event. Used to restore the
* HP service to a previous state.
*/
restoreProtocol?: boolean;
};
type HangingProtocolMatchDetails = {
export type HangingProtocolMatchDetails = {
displaySetMatchDetails: Map<string, DisplaySetMatchDetails>;
viewportMatchDetails: Map<number, ViewportMatchDetails>;
hpAlreadyApplied: Map<number, boolean>;
};
type MatchingRule = {
id: string;
weight: number;
export type ConstraintValue =
| string
| number
| boolean
| []
| {
value: string | number | boolean | [];
};
export type Constraint = {
// This value exactly
equals?: ConstraintValue;
notEquals?: ConstraintValue;
// A caseless contains
containsI?: string;
contains?: ConstraintValue;
greaterThan?: ConstraintValue;
};
export type MatchingRule = {
// No real use for the id
id?: string;
// Defaults to 1
weight?: number;
attribute: string;
constraint: Record<string, unknown>;
required: boolean;
constraint: Constraint;
// Not required by default
required?: boolean;
};
type ViewportLayoutOptions = {
export type ViewportLayoutOptions = {
x: number;
y: number;
width: number;
height: number;
};
type ViewportStructure = {
export type ViewportStructure = {
layoutType: string;
properties: {
rows: number;
columns: number;
layoutOptions: ViewportLayoutOptions[];
layoutOptions?: ViewportLayoutOptions[];
};
};
@ -74,7 +118,8 @@ type ViewportStructure = {
* The matches are done lazily, so if a stage doesn't need a given match,
* it won't be selected.
*/
type DisplaySetSelector = {
export type DisplaySetSelector = {
id?: string;
// The image matching rule (not currently implemented) selects which image to
// display initially, only for stack views.
imageMatchingRules?: MatchingRule[];
@ -83,19 +128,19 @@ type DisplaySetSelector = {
studyMatchingRules?: MatchingRule[];
};
type SyncGroup = {
export type SyncGroup = {
type: string;
id: string;
source?: boolean
target?: boolean
}
source?: boolean;
target?: boolean;
};
type initialImageOptions = {
export type initialImageOptions = {
index?: number;
preset? : string; // todo: type more
}
preset?: string; // todo: type more
};
type ViewportOptions = {
export type ViewportOptions = {
toolGroupId: string;
viewportType: string;
id?: string;
@ -104,37 +149,116 @@ type ViewportOptions = {
initialImageOptions?: initialImageOptions;
syncGroups?: SyncGroup[];
customViewportProps?: Record<string, unknown>;
// Set to true to allow non-matching drag and drop or options provided
// from options.displaySetSelectorsMap
allowUnmatchedView?: boolean;
};
type DisplaySetOptions = {
// The options here includes both the display set selector and matching index
// as well as actual options to apply to the individual viewports.
export type DisplaySetOptions = {
// The id is used to choose which display set selector to apply here
id: string;
// An offset to allow display secondary series, for example
// to display the second matching series (displaySetIndex==1)
// This cannot easily be done with the matching rules directly.
displaySetIndex?: number;
/** The offset to allow display secondary series, for example
* to display the second matching series, use `matchedDisplaySetsIndex==1` */
matchedDisplaySetsIndex?: number;
// The options to apply to the display set.
options?: Record<string, unknown>;
};
type Viewport = {
export type Viewport = {
viewportOptions: ViewportOptions;
displaySets: DisplaySetOptions[];
};
type ProtocolStage = {
id: string;
/**
* disabled stages are missing display sets required in order to view them.
* enabled stages have all the requiredDisplaySets and at least preferredViewports
* filled.
* passive stages have the requiredDisplaySets and at least requiredViewports filled.
*/
export type StageStatus = 'disabled' | 'enabled' | 'passive';
/** Controls whether a stage is activated or not, at the given level, by
* controlling the status of the stage.
*/
export type StageActivation = {
// The minimum number of viewports to be NON-blank to activate this level of the stage
minViewportsMatched?: number;
// The required set of display set selectors to have at least 1 match to activate
displaySetSelectorsMatched?: string[];
};
/**
* Protocol stages are a set of different views which can be applied, for
* example, a 2x1 and a 1x1 view might be both applied (see default extension
* for this example).
*/
export type ProtocolStage = {
/** The id defaults to the name of the protocol if not otherwise specified */
id?: string;
/**
* The display name used for this stage when shown to the user. This can
* differ from the id, for example, to use the same name for different
* stages, only one of which ends up being active.
*/
name: string;
/** Indicate if the stage can be applied or not */
status?: StageStatus;
viewportStructure: ViewportStructure;
stageActivation?: {
// The enabled activation is provided for fully active stages,
// participating in automatic stage selection and navigation
enabled?: StageActivation;
// The passive activation is provided to allow stages to manually
// be activated, but not navigated to by default, or used on initial view
passive?: StageActivation;
};
/** A viewport definition used for to fill in manually selected viewports.
* This allows changing the layout definition for additional viewports without
* needing to define layouts for each of the 1x1, 2x2 etc modes.
*/
defaultViewport?: Viewport;
viewports: Viewport[];
// Unused.
createdDate?: string;
};
type Protocol = {
// Add notifications for various types of events.
export type ProtocolNotifications = {
// This set of commands is executed after the protocol is exited and the new one applied
onProtocolExit?: Command[];
// This set of commands is executed after the protocol is entered and applied
onProtocolEnter?: Command[];
// This set of commands is executed before the layout change is started.
// If it returns false, the layout change will be aborted.
// The numRows and numCols is included in the command params, so it is possible
// to apply a specific hanging protocol
onLayoutChange?: Command[];
};
/**
* A protocol is the top level definition for a hanging protocol.
* It is a set of rules about when the protocol can be applied at all,
* as well as a set of stages that represent indivividual views.
* Additionally, the display set selectors are used to choose from the existing
* display sets. The hanging protcol definition here does NOT allow
* redefining the display sets to use, but only selects the views to show.
*/
export type Protocol = {
// Mandatory
id: string;
// Selects which display sets are given a specific name.
/** Maps ids to display set selectors to choose display sets */
displaySetSelectors: Record<string, DisplaySetSelector>;
/** A default viewport to use for any stage to select new viewport layouts. */
defaultViewport?: Viewport;
stages: ProtocolStage[];
// Optional
locked?: boolean;
@ -145,35 +269,34 @@ type Protocol = {
availableTo?: Record<string, unknown>;
editableBy?: Record<string, unknown>;
toolGroupIds?: string[];
// A set of callbacks relevant to entering and exiting the protocol
callbacks?: ProtocolNotifications;
imageLoadStrategy?: string; // Todo: this should be types specifically
protocolMatchingRules?: MatchingRule[];
/* The number of priors required for this hanging protocol.
* -1 means that NO priors are referenced, and thus this HP matches
* only the active study, whereas 0 means that an unknown number of
* priors is matched.
*/
numberOfPriorsReferenced?: number;
syncDataForViewports?: boolean;
};
type ProtocolGenerator = ({ servicesManager: any, commandsManager: any }) => {
/** Used to dynamically generate protocols.
* Try to avoid this as it is difficult to provide active/disabled settings
* to the GUI when this is used, and it can be expensive to apply.
* Alternatives include using the custom attributes where possible.
*/
export type ProtocolGenerator = ({
servicesManager: any,
commandsManager: any,
}) => {
protocol: Protocol;
};
export type {
SetProtocolOptions,
ViewportOptions,
ViewportMatchDetails,
DisplaySetMatchDetails,
HangingProtocolMatchDetails,
Protocol,
ProtocolStage,
Viewport,
DisplaySetSelector,
ViewportStructure,
ViewportLayoutOptions,
DisplaySetOptions,
MatchingRule,
SyncGroup,
initialImageOptions,
DisplaySetInfo,
GlobalProtocolOptions,
ViewportSpecificProtocolOptions,
DisplaySetAndViewportOptions,
ProtocolGenerator,
export type HPInfo = {
protocolId: string;
stageId: string;
stageIndex: number;
activeStudyUID: string;
};

2
platform/core/src/types/Services.ts
View File

@ -5,6 +5,7 @@ import {
ViewportGridService,
ToolbarService,
DisplaySetService,
StateSyncService,
} from '../services';
/**
@ -28,5 +29,6 @@ export default interface Services {
syncGroupService?: Record<string, unknown>;
cornerstoneCacheService?: Record<string, unknown>;
segmentationService?: Record<string, unknown>;
stateSyncService?: StateSyncService;
panelService?: Record<string, unknown>;
}

138
platform/docs/docs/platform/services/data/HangingProtocolService.md
View File

@ -27,6 +27,27 @@ registered automatically to the HangingProtocolService.
All protocols are stored in the `HangingProtocolService` using their `id` as the key, and the protocol itself as the value.
## Protocol Definition
Protocols are defined in a getHangingProtocolModule inside an extension. As such,
they are defined with a module structure that starts with an id, and has field protocol
that is the actual protocol definition. This setup allows defining more than
one protocol within a module, each one needing it's own definition file.
```javascript
import MyProtocol from './MyProtocol';
export default function getHangingProtocolModule() {
return [
{
id: MyProtocol.id,
protocol: MyProtocol,
},
];
}
```
Within the protocol itself, the structure is layed out as described in the HangingProtocol.ts
type definition, starting with `Protocol`. See the type definition for more details.
## Events
There are two events that get publish in `HangingProtocolService`:
@ -34,31 +55,101 @@ There are two events that get publish in `HangingProtocolService`:
| Event | Description |
| ------------ | -------------------------------------------------------------------- |
| NEW_LAYOUT | Fires when a new layout is requested by the `HangingProtocolService` |
| STAGE_CHANGE | Fires when the the stage is changed in the hanging protocols |
| PROTOCOL_CHANGED | Fires when the the protocol is changed in the hanging protocols |
| HANGING_PROTOCOL_APPLIED_FOR_VIEWPORT | Fires when the hanging protocol applies for a viewport (sets its displaySets) |
| PROTOCOL_CHANGED | Fires when the the protocol is changed in the hanging protocols, or when the applied stage is changed. |
| RESTORE_PROTOCOL | Fires when the protocol or stage is restored, for example, after turning off MPR mode |
| STAGE_ACTIVATION | Fires when the stages are known to have stage.status set. |
## Stage Activation and Status
Sometimes a hanging protocol can be applicable generally, but not all stages
should be shown by default, or should be shown at all. This can be handled by
using the stage activation to control whether the stage is shown by default (`enabled`),
whether it can be navigated to (`passive`) or whether it should not be shown
at all (`disabled`).
The `stage.status` is used to control this, and the status is controlled by
the stage activate. The status values are:
* enabled - meaning that the stage is fully applicable
* passive - meaning that the stage can be applied, but might be missing details
* disabled - meaning that the study has insuffient information for this stage
The default values for no `stageActivation` are to assume that `enabled` has `minViewports` of 1,
and `passive` has `minViewports=0`. That is, enable the stage if at least one
viewport is filled, and make it passive if no viewports are filled.
The setting for these are controlled by the stageActivation property, for example
the following:
```javascript
stageActivation: {
// The enabled activation specifies requirements to enable the stage, that is,
// make it preferred.
enabled: {
// The default value here is 1, and indicates how many non-blank viewports
// are required.
minViewportsMatched: 3,
// This enables specifying cross cutting concerns, such as having a stage
// only apply to males or females, and is a list of display set selector ids
displaySetSelectorsMatched: ['dsMale'],
},
// The passive check is performed first. If it fails, the enabled is NOT
// checked, but the status set to disabled. The default passive check
// should always be passed, so it is fine to just define enabled if desired.
passive: {
// The default is 0, which means allow the stage even if no viewports are
// filled. This allows dragging and dropping into the viewports to
// make matches manually, which can then be re-used for other stages.
minViewportsMatched: 0,
displaySetSelectorsMatched: [...],
},
}
```
## API
- `destroy`: Destroys the HP service
- `reset` and `onModeEnter`: Resets the HP service to not have any active
hanging protocols
- `getActiveProtocol`: Returns an object of the internal state of the HP service,
useful for storing said state, as well as for getting direct access to the
protocol and stage objects. Users of this should count on it being not completely
stable as to exactly what this returns, as internal details can change.
- `getState`: Returns the currently applied protocol ID, stage index and active study UID.
This information is storable/useable as state information to be used elsewhere.
- `getDefaultProtocol`: Returns the default protocol to apply.
- `getMatchDetails`: returns an object which contains the details of the
matching for the viewports, displaySets and whether the protocol is
applied to the viewport or not yet.
applied to the viewport or not yet. This is deprecated as it is expected
to be communicated by events instead.
- `getProtocols`: Returns a list of the currently active protocols.
- `getProtocolById`: Gets the protocol with the given id.
- `addProtocol`: adds provided protocol to the list of registered protocols
for matching
for matching. Will replacing any protocol with the same id, allowing, for example,
to replace the default protocol.
- `setActiveProtocols`: Choose the protocols which are active. Can take a
single protocol id or a list. When a single one is provided, that one will be
applied whether or not the required rules match. Called automatically on mode
init.
- `setActiveStudyUID`: Sets the given study UID as active, which has significance
in terms of the matching rules being able to match against the active study.
- `run({studies, activeStudy, displaySets }, protocolId)`: runs the HPService with the provided
studyMetaData and optional protocolId. If protocol is not given, HP Matching
engine will search all the registered protocols for the best matching one
based on the constraints.
- `registerImageLoadStrategy`: Adds a custom image load strategy.
- `addCustomAttribute`: adding a custom attribute for matching. (see below)
- `setProtocol`: applies a protocol to the current studies, it can be used for instance to apply a
@ -68,6 +159,12 @@ init.
used for the protocol. If no options are provided, all displaySets will
be used to match the protocol.
- `getStageIndex`: Finds the stage index for a given set of match keys. Currently
only works on the currently active protocol, but is supposed to be able to work
with other protocols as well.
- `getMissingViewport`: Returns a viewport object to be used as the missing
viewport instance. This is used to fill out new viewports.
Default initialization of the modes handles running the `HangingProtocolService`
@ -78,7 +175,7 @@ do not overlap, with the suggested id being `${moduleId}.${simpleName}`. The
'default' name is used as the hanging protocol id when no other protocol applies,
and can be set as the last module listed containing 'default'.
A hanging protocol can also be defined with a generator.
A hanging protocol can also be defined with a generator.
A generator is a function we can write this way:
```ts
@ -93,6 +190,33 @@ function protocolGenerator({ servicesManager, commandsManager }) {
See the typescript definitions for more details on the structure of protocols.
## Additional viewports for layout - `defaultViewport`
Sometimes the user manually selects a layout of a given size, say `2x3`. The
hanging protocol can define what viewport options to use for this viewport by
defining an extra viewport option in `defaultViewport`. For example:
```javascript
defaultViewport: {
viewportOptions: {
viewportType: 'stack',
toolGroupId: 'default',
allowUnmatchedView: true,
},
displaySets: [
{
id: 'defaultDisplaySetId',
matchedDisplaySetsIndex: -1,
},
],
},
```
This allows defining the type of additional viewports, what tool group etc they
are allowed in, and which display set is used to fill them. In the above case,
the display set is the same as the other viewports, but the
`matchedDisplaySetsIndex=-1`, so that means find the next matching display set
from the display set selector which isn't already filling a view.
## Custom Attribute
In some situations, you might want to match based on a custom attribute and not the DICOM tags. For instance,
if you have assigned a `timepointId` to each study, and you want to match based on it.
@ -102,7 +226,7 @@ There are various ways that you can let `HangingProtocolService` know of you
custom attribute. We will show how to add it inside the mode configuration.
```js
const deafultProtocol = {
const defaultProtocol = {
id: 'defaultProtocol',
/** ... **/
protocolMatchingRules: [

72
platform/docs/docs/platform/services/data/StateSyncService.md Normal file
View File

@ -0,0 +1,72 @@
---
sidebar_position: 8
sidebar_label: State Sync Service
---
# State Sync Service
## Overview
The state sync service is designed to allow short and long term memory of things such as
annotations applied, last annotation state, hanging protocol viewport state,
window level etc. This allows for better interaction with things like navigation
between hanging protocols, ensuring that the previously displayed layouts
can be redisplayed after returning to a given hanging protocol.
Currently, all the state sync service configurations have one of the following two
lifetimes. See the mode description for general information on the mode lifetime.
* Application load - when the application is restarted, the state is lost
* `clearOnModeExit` - which stores state until the mode onModeExit is called, and then throws away the remaining state. This is useful for mode specific information.
### TODO work - add more storage locations
It is expected to add a few more storage locations, which will store to various
locations on updates:
* User specific server store - to store things between application restarts at the user level
* Browser state store - to store things in the browser local state, to recover after crashing.
* Study specific server store - to store things relevant to a given study between application restarts, on the server.
## Events
Currently the service does not fire events.
## API
- `register`: to create a new named state storage
- `reduce`: to apply a set of changes to several states at once
- `getState`: to retrieve the current state
- `onModeExit`: clears the states configured as clearOnModeExit states
### register
The register call is typically added to an extension to create a new
syncable state. A typical call is shown below, registering the viewport
grid store state as a modal state.
```javascript
stateSyncService.register('viewportGridStore', { clearOnModeExit: true });
```
### getState
The `getState` call returns an object containing all of the reigstered states,
by id. The values can be read directly, but should not be modified.
### reduce
The `reduce` call is used to apply a set of updates to various states. The
updates are performed for every state as a simply "set" call.
### onModeExit
When the Mode is exited, the onModeExit is called on the sync state, and this
clears all states registered with `clearOnModeExit: true`.
To avoid clearing the state, the mode definition should store any transient
state in the mode onModeExit and recover it in the `mode.onModeEnter`.
## OHIF Registered State
There are a number of defined states here. It is recommended to update this
list as states are added:
* `viewportGridStore` has viewport grid restore information for returning to an earlier grid layout.
* `reuseIdMap` has a map of names to display sets for preserving user changes to hp display set selections.
* `hanging` has a map of the hanging protocol stage information applied (HPInfo)
* `presentationSync` has the cornerstone presentation state information
* `toggleHangingProtocol` has the previously applied hanging protocol, to toggle an HP off.
* `querySync` has the previously applied query information. Not fully implemented yet.

1
platform/docs/docs/platform/services/data/ToolbarService.md
View File

@ -33,6 +33,7 @@ button is clicked by the user.
presets.
- `commandName`: if tool has a command attached to run
- `commandOptions`: arguments for the command.
- `setActive`: Sets a given tool active (not as primary but as secondary)
- `reset`: reset the state of the toolbarService, set the primary tool to be
`Wwwc` and unsubscribe tools that have registered their functions.

3
platform/docs/docs/platform/services/data/index.md
View File

@ -19,7 +19,8 @@ We maintain the following non-ui Services:
- [Hanging Protocol Service](../data/HangingProtocolService.md)
- [Toolbar Service](../data/ToolBarService.md)
- [Measurement Service](../data/MeasurementService.md)
- [Customization Service](customization-service.md)
- [Customization Service](../data/customization-service.md)
- [State Sync Service](../data/StateSyncService.md)
- [Panel Service](../data/PanelService.md)
## Service Architecture

8
platform/ui/src/components/SplitButton/SplitButton.tsx
View File

@ -168,9 +168,11 @@ const SplitButton = ({
: 'text-common-bright hover:bg-primary-dark hover:text-primary-light'
)}
>
<span className="mr-4">
<Icon name={icon} className="w-5 h-5" />
</span>
{icon && (
<span className="mr-4">
<Icon name={icon} className="w-5 h-5" />
</span>
)}
<span className="mr-5">{t(label)}</span>
</div>
);

8
platform/ui/src/components/Thumbnail/Thumbnail.tsx
View File

@ -6,7 +6,7 @@ import { Icon } from '../';
import { StringNumber } from '../../types';
/**
*
* Display a thumbnail for a display set.
*/
const Thumbnail = ({
displaySetInstanceUID,
@ -16,11 +16,12 @@ const Thumbnail = ({
description,
seriesNumber,
numInstances,
countIcon,
dragData,
isActive,
onClick,
onDoubleClick,
}) => {
}): React.ReactNode => {
// TODO: We should wrap our thumbnail to create a "DraggableThumbnail", as
// this will still allow for "drag", even if there is no drop target for the
// specified item.
@ -73,7 +74,8 @@ const Thumbnail = ({
{seriesNumber}
</div>
<div className="flex flex-row items-center flex-1">
<Icon name="group-layers" className="w-3 mr-2" /> {numInstances}
<Icon name={countIcon || 'group-layers'} className="w-3 mr-2" />
{` ${numInstances}`}
</div>
</div>
<div className="text-base text-white break-all">{description}</div>

4
platform/ui/src/components/ThumbnailList/ThumbnailList.tsx
View File

@ -23,6 +23,7 @@ const ThumbnailList = ({
modality,
componentType,
seriesDate,
countIcon,
viewportIdentificator,
isTracked,
canReject,
@ -33,7 +34,6 @@ const ThumbnailList = ({
const isActive = activeDisplaySetInstanceUIDs.includes(
displaySetInstanceUID
);
switch (componentType) {
case 'thumbnail':
return (
@ -44,6 +44,7 @@ const ThumbnailList = ({
description={description}
seriesNumber={seriesNumber}
numInstances={numInstances}
countIcon={countIcon}
imageSrc={imageSrc}
imageAltText={imageAltText}
viewportIdentificator={viewportIdentificator}
@ -63,6 +64,7 @@ const ThumbnailList = ({
description={description}
seriesNumber={seriesNumber}
numInstances={numInstances}
countIcon={countIcon}
imageSrc={imageSrc}
imageAltText={imageAltText}
viewportIdentificator={viewportIdentificator}

2
platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.tsx
View File

@ -13,6 +13,7 @@ const ThumbnailTracked = ({
description,
seriesNumber,
numInstances,
countIcon,
dragData,
onClick,
onDoubleClick,
@ -117,6 +118,7 @@ const ThumbnailTracked = ({
description={description}
seriesNumber={seriesNumber}
numInstances={numInstances}
countIcon={countIcon}
isActive={isActive}
onClick={onClick}
onDoubleClick={onDoubleClick}

7
platform/ui/src/components/ToolbarButton/ToolbarButton.tsx
View File

@ -39,6 +39,11 @@ const ToolbarButton = ({
const activeClass = isActive ? 'active' : '';
const shouldShowDropdown = !!isActive && !!dropdownContent;
const iconEl = icon ? (
<Icon name={icon} />
) : (
<div>{label || 'Missing icon and label'}</div>
);
return (
<div key={id}>
@ -64,7 +69,7 @@ const ToolbarButton = ({
id={id}
{...rest}
>
<Icon name={icon} />
{iconEl}
</IconButton>
</Tooltip>
</div>

13
platform/ui/src/components/Viewport/Viewport.tsx
View File

@ -2,7 +2,16 @@ import React from 'react';
import PropTypes from 'prop-types';
import { LegacyViewportActionBar, Notification } from '../';
const Viewport = ({ viewportIndex, onArrowsClick, studyData, children }) => {
const Viewport = ({
viewportId,
viewportIndex,
onArrowsClick,
studyData,
children,
}) => {
if (!viewportId) {
viewportId = `viewport-${viewportIndex}`;
}
return (
<div className="relative flex flex-col h-full">
<div className="absolute top-0 left-0 w-full">
@ -39,7 +48,7 @@ const Viewport = ({ viewportIndex, onArrowsClick, studyData, children }) => {
</div>
{/* STUDY IMAGE */}
<div className="w-full h-full" id={`viewport-${viewportIndex}`}>
<div className="w-full h-full" id={viewportId}>
{children}
</div>
</div>

291
platform/ui/src/contextProviders/ViewportGridProvider.tsx
View File

@ -6,17 +6,22 @@ import React, {
useReducer,
} from 'react';
import PropTypes from 'prop-types';
import isEqual from 'lodash.isequal';
import viewportLabels from '../utils/viewportLabels';
import getPresentationId from './getPresentationId';
const DEFAULT_STATE = {
numRows: null,
numCols: null,
layoutType: 'grid',
activeViewportIndex: 0,
layout: {
numRows: 0,
numCols: 0,
layoutType: 'grid',
},
viewports: [
{
displaySetInstanceUIDs: [],
viewportOptions: {},
displaySetSelectors: [],
displaySetOptions: [{}],
x: 0, // left
y: 0, // top
@ -25,20 +30,58 @@ const DEFAULT_STATE = {
viewportLabel: null,
},
],
activeViewportIndex: 0,
cachedLayout: {},
};
export const ViewportGridContext = createContext(DEFAULT_STATE);
/**
* Given the flatten index, and rows and column, it returns the
* row and column index
* Find a viewport to re-use, and then set the viewportId
*
* @param idSet
* @param viewport
* @param stateViewports
* @returns
*/
const unravelIndex = (index, numRows, numCols) => {
const row = Math.floor(index / numCols);
const col = index % numCols;
return { row, col };
const reuseViewport = (idSet, viewport, stateViewports) => {
const oldIds = {};
for (const oldViewport of stateViewports) {
const { viewportId: oldId } = oldViewport;
oldIds[oldId] = true;
if (!oldId || idSet[oldId]) continue;
if (
!isEqual(
oldViewport.displaySetInstanceUIDs,
viewport.displaySetInstanceUIDs
)
) {
continue;
}
idSet[oldId] = true;
// TODO re-use viewports once the flickering/wrong size redraw is fixed
// return {
// ...oldViewport,
// ...viewport,
// viewportOptions: {
// ...oldViewport.viewportOptions,
// viewportId: oldViewport.viewportId,
// },
// };
}
// Find a viewport instance number different from earlier viewports having
// the same presentationId as this one would - will be less than 10k
// viewports hopefully :-)
for (let i = 0; i < 10000; i++) {
const viewportId = 'viewport-' + i;
if (idSet[viewportId] || oldIds[viewportId]) continue;
idSet[viewportId] = true;
return {
...viewport,
viewportId,
viewportOptions: { ...viewport.viewportOptions, viewportId },
};
}
throw new Error('No ID found');
};
export function ViewportGridProvider({ children, service }) {
@ -59,26 +102,40 @@ export function ViewportGridProvider({ children, service }) {
// which might have been a PDF Viewport. The viewport itself
// will deal with inheritance if required. Here is just a simple
// provider.
const viewportOptions = payload.viewportOptions || {};
const displaySetOptions = payload.displaySetOptions || [{}];
const viewport = state.viewports[viewportIndex] || {};
const viewportOptions = { ...payload.viewportOptions };
const displaySetOptions = payload.displaySetOptions || [];
if (displaySetOptions.length === 0) {
// Only copy index 0, as that is all that is currently supported by this
// method call.
displaySetOptions.push({ ...viewport.displaySetOptions?.[0] });
}
const viewports = state.viewports.slice();
if (!viewportOptions.viewportId) {
viewportOptions.viewportId = `viewport-${viewportIndex}`;
}
// merge the displaySetOptions and viewportOptions and displaySetInstanceUIDs
// into the viewport object at the given index
viewports[viewportIndex] = {
...viewports[viewportIndex],
let newView = {
...viewport,
displaySetInstanceUIDs,
viewportOptions,
displaySetOptions,
viewportLabel: viewportLabels[viewportIndex],
};
viewportOptions.presentationId = getPresentationId(newView, viewports);
return { ...state, ...{ viewports } };
// Make sure we assign a viewport id
newView = reuseViewport({}, newView, state.viewports);
console.log(
'Creating new viewport',
viewportIndex,
newView.viewportOptions.viewportId,
displaySetInstanceUIDs,
displaySetOptions
);
viewports[viewportIndex] = newView;
return { ...state, viewports };
}
case 'SET_LAYOUT': {
const {
@ -86,108 +143,96 @@ export function ViewportGridProvider({ children, service }) {
numRows,
layoutOptions,
layoutType = 'grid',
keepExtraViewports = false,
findOrCreateViewport,
} = action.payload;
// If empty viewportOptions, we use numRow and numCols to calculate number of viewports
const numPanes = layoutOptions.length || numRows * numCols;
const viewports = state.viewports.slice();
const activeViewportIndex =
state.activeViewportIndex >= numPanes ? 0 : state.activeViewportIndex;
const hasOptions = layoutOptions?.length;
const viewports = [];
while (viewports.length < numPanes) {
viewports.push({});
}
// Options is a temporary state store which can be used by the
// findOrCreate to store state about already found viewports. Typically,
// it will be used to store the display set UID's which are already
// in view so that the find or create can decide which display sets
// haven't been viewed yet, and add them in the appropriate order.
const options = {};
// Extra viewports are kept when the grid layout is changed in the UI
// because the user populated those viewports and if the viewports were to
// return on screen their contents should be maintained.
if (!keepExtraViewports) {
while (viewports.length > numPanes) {
viewports.pop();
let activeViewportIndex;
for (let row = 0; row < numRows; row++) {
for (let col = 0; col < numCols; col++) {
const pos = col + row * numCols;
const layoutOption = layoutOptions[pos];
const positionId = layoutOption?.positionId || `${col}-${row}`;
if (hasOptions && pos >= layoutOptions.length) {
continue;
}
if (
!activeViewportIndex ||
state.viewports[pos]?.positionId === positionId
) {
activeViewportIndex = pos;
}
const viewport = findOrCreateViewport(pos, positionId, options);
if (!viewport) continue;
viewport.positionId = positionId;
// Create a new viewport object as it is getting updated here
// and it is part of the read only state
viewports.push(viewport);
let xPos, yPos, w, h;
if (layoutOptions && layoutOptions[pos]) {
({ x: xPos, y: yPos, width: w, height: h } = layoutOptions[pos]);
} else {
w = 1 / numCols;
h = 1 / numRows;
xPos = col * w;
yPos = row * h;
}
viewport.width = w;
viewport.height = h;
viewport.x = xPos;
viewport.y = yPos;
}
}
for (let i = 0; i < numPanes; i++) {
let xPos, yPos, w, h;
if (layoutOptions && layoutOptions[i]) {
({ x: xPos, y: yPos, width: w, height: h } = layoutOptions[i]);
} else {
const { row, col } = unravelIndex(i, numRows, numCols);
w = 1 / numCols;
h = 1 / numRows;
xPos = col * w;
yPos = row * h;
const viewportIdSet = {};
for (
let viewportIndex = 0;
viewportIndex < viewports.length;
viewportIndex++
) {
const viewport = reuseViewport(
viewportIdSet,
viewports[viewportIndex],
state.viewports
);
if (!viewport.viewportOptions.presentationId) {
viewport.viewportOptions.presentationId = getPresentationId(
viewport,
viewports
);
}
viewports[i].width = w;
viewports[i].height = h;
viewports[i].x = xPos;
viewports[i].y = yPos;
viewport.viewportIndex = viewportIndex;
viewport.viewportLabel = viewportLabels[viewportIndex];
viewports[viewportIndex] = viewport;
}
return {
const ret = {
...state,
...{
activeViewportIndex,
activeViewportIndex,
layout: {
...state.layout,
numCols,
numRows,
layoutType,
viewports,
},
viewports,
};
return ret;
}
case 'RESET': {
return {
numCols: null,
numRows: null,
layoutType: 'grid',
activeViewportIndex: 0,
viewports: [
{
displaySetInstanceUIDs: [],
displaySetOptions: [],
viewportOptions: {},
x: 0, // left
y: 0, // top
width: 100,
height: 100,
},
],
cachedLayout: {},
};
}
// The SET_CACHE_LAYOUT action can be used for caching a layout
// for instance double clicking a viewport to maximize it.
// and then restoring the previous layout when the viewport is
// double clicked again.
case 'SET_CACHED_LAYOUT': {
const { cacheId, cachedLayout } = action.payload;
// deep copy the cachedLayout into the state
return {
...state,
cachedLayout: {
...state.cachedLayout,
[cacheId]: JSON.parse(JSON.stringify(cachedLayout)),
},
};
}
case 'RESTORE_CACHED_LAYOUT': {
const cacheId = action.payload;
if (!state.cachedLayout[cacheId]) {
console.warn(
`No cached layout found for cacheId: ${cacheId}. Ignoring...`
);
return state;
}
const cachedLayout = state.cachedLayout;
return { ...state.cachedLayout[cacheId], cachedLayout };
return DEFAULT_STATE;
}
case 'SET': {
@ -221,6 +266,7 @@ export function ViewportGridProvider({ children, service }) {
viewportIndex,
displaySetInstanceUIDs,
viewportOptions,
displaySetSelectors,
displaySetOptions,
}) =>
dispatch({
@ -229,6 +275,7 @@ export function ViewportGridProvider({ children, service }) {
viewportIndex,
displaySetInstanceUIDs,
viewportOptions,
displaySetSelectors,
displaySetOptions,
},
}),
@ -250,7 +297,7 @@ export function ViewportGridProvider({ children, service }) {
numRows,
numCols,
layoutOptions = [],
keepExtraViewports = false,
findOrCreateViewport,
}) =>
dispatch({
type: 'SET_LAYOUT',
@ -259,7 +306,7 @@ export function ViewportGridProvider({ children, service }) {
numRows,
numCols,
layoutOptions,
keepExtraViewports,
findOrCreateViewport,
},
}),
[dispatch]
@ -274,25 +321,6 @@ export function ViewportGridProvider({ children, service }) {
[dispatch]
);
const setCachedLayout = useCallback(
payload =>
dispatch({
type: 'SET_CACHED_LAYOUT',
payload,
}),
[dispatch]
);
const restoreCachedLayout = useCallback(
cacheId => {
dispatch({
type: 'RESTORE_CACHED_LAYOUT',
payload: cacheId,
});
},
[dispatch]
);
const set = useCallback(
payload =>
dispatch({
@ -303,7 +331,8 @@ export function ViewportGridProvider({ children, service }) {
);
const getNumViewportPanes = useCallback(() => {
const { numCols, numRows, viewports } = viewportGridState;
const { layout, viewports } = viewportGridState;
const { numRows, numCols } = layout;
return Math.min(viewports.length, numCols * numRows);
}, [viewportGridState]);
@ -322,8 +351,6 @@ export function ViewportGridProvider({ children, service }) {
setLayout,
reset,
onModeExit: reset,
setCachedLayout,
restoreCachedLayout,
set,
getNumViewportPanes,
});
@ -336,8 +363,6 @@ export function ViewportGridProvider({ children, service }) {
setDisplaySetsForViewports,
setLayout,
reset,
setCachedLayout,
restoreCachedLayout,
set,
getNumViewportPanes,
]);
@ -348,8 +373,6 @@ export function ViewportGridProvider({ children, service }) {
setDisplaySetsForViewport,
setDisplaySetsForViewports,
setLayout,
setCachedLayout,
restoreCachedLayout,
reset,
set,
getNumViewportPanes,

73
platform/ui/src/contextProviders/getPresentationId.ts Normal file
View File

@ -0,0 +1,73 @@
/**
* Selects a presentation ID to use for this viewport.
* This is done to allow the same display set to be displayed more than once
* on screen, with different attributes such as window level and initial position.
* Then, when redisplaying that, the nearest/most common attribute is re-used.
*
* For example, for display set <displaySetUID>, in a viewport of type volume,
* the generated presentationID might be
* `volume:axial:<displaySetUID>`. This can then be used to store and retrieve
* presentation information in state sync service 'presentationSync' state.
*
* The generated value attempts to generate a unique value for every type
* of viewport which should have it's own presentation information. Thus, the
* following values are used for presentation ID:
*
* 1. viewportType - since the presentation information for a volume is different than for a stack
* 2. orientation - since the camera is different for different orientations
* 3. display set instance UID - since different display sets should get displayed differently
* 4. instance count - since displaying the same series twice should allow applying different window level etc
*
* @param viewport requiring a presentation Id
* @param viewports is the list of viewports being shown. Any presentation ID's
* among them must not be re-used in order to have each viewport have it's own presentation ID.
* @returns Presentation ID id, or undefined if nothing displayed
*/
const getPresentationId = (viewport, viewports): string => {
if (!viewport) return;
const { viewportOptions, displaySetInstanceUIDs } = viewport;
if (!viewportOptions || !displaySetInstanceUIDs?.length) {
console.log('No viewport type or display sets in', viewport);
return;
}
const viewportType = viewportOptions.viewportType || 'stack';
const idArr = [viewportType, 0, ...displaySetInstanceUIDs];
if (viewportOptions.orientation) {
idArr.splice(2, 0, viewportOptions.orientation);
}
// Allow setting a custom presentation prefix in the hanging protocol
// This allows defining new
// presentation groups to be set automatically when one knows that the
// same display set will be displayed in different ways.
// This is the recommended way to manage a hanging protocol which displays
// multiple views of a single display set, eg to display brain, bone, soft
// tissue views in different viewports.
if (viewportOptions.presentationPrefix) {
idArr.push(viewportOptions.presentationPrefix);
}
if (!viewports) {
console.log('viewports not defined', idArr.join(','));
return idArr.join('&');
}
// This code finds the first unique index to add to the presentation id so that
// two viewports containing the same display set in the same type of viewport
// can have different presentation information. This allows comparison of
// a single display set in two or more viewports, when the user has simply
// dragged and dropped the view in twice. For example, it allows displaying
// bone, brain and soft tissue views of a single display set, and to still
// remember the specific changes to each viewport.
for (let displayInstance = 0; displayInstance < 128; displayInstance++) {
idArr[1] = displayInstance;
const testId = idArr.join('&');
if (!viewports.find(it => it.viewportOptions?.presentationId === testId)) {
break;
}
}
const id = idArr.join('&');
return id;
};
export default getPresentationId;

31
platform/viewer/cypress/integration/customization/HangingProtocol.spec.js Normal file
View File

@ -0,0 +1,31 @@
describe('OHIF HP', () => {
beforeEach(() => {
cy.checkStudyRouteInViewer(
'1.3.6.1.4.1.25403.345050719074.3824.20170125113417.1',
'&hangingProtocolId=@ohif/hp-extension.mn'
);
cy.expectMinimumThumbnails(3);
cy.initCornerstoneToolsAliases();
cy.initCommonElementsAliases();
});
it('Should display 3 up', () => {
cy.get('[data-cy="viewport-pane"]')
.its('length')
.should('be.eq', 3);
});
it('Should navigate next/previous stage', () => {
cy.get('body').type(',');
cy.wait(250);
cy.get('[data-cy="viewport-pane"]')
.its('length')
.should('be.eq', 4);
cy.get('body').type('..');
cy.wait(250);
cy.get('[data-cy="viewport-pane"]')
.its('length')
.should('be.eq', 2);
});
});

17
platform/viewer/cypress/integration/measurement-tracking/OHIFStudyBrowser.spec.js
View File

@ -17,8 +17,21 @@ describe('OHIF Study Viewer Page', function() {
});
it('drags and drop a series thumbnail into viewport', function() {
cy.get('[data-cy="study-browser-thumbnail"]:nth-child(2)') //element to be dragged
.drag('.cornerstone-canvas'); //dropzone element
// Can't use the native drag version as the element should be rerendered
// cy.get('[data-cy="study-browser-thumbnail"]:nth-child(2)') //element to be dragged
// .drag('.cornerstone-canvas'); //dropzone element
const dataTransfer = new DataTransfer();
cy.get('[data-cy="study-browser-thumbnail"]:nth-child(2)')
.first()
.trigger('mousedown', { which: 1, button: 0 })
.trigger('dragstart', { dataTransfer })
.trigger('drag', {});
cy.get('.cornerstone-canvas')
.trigger('mousemove', 'center')
.trigger('dragover', { dataTransfer, force: true })
.trigger('drop', { dataTransfer, force: true });
//const expectedText =
// 'Ser: 2Img: 1 1/13512 x 512Loc: -17.60 mm Thick: 3.00 mm';

35
platform/viewer/cypress/support/commands.js
View File

@ -54,20 +54,29 @@ Cypress.Commands.add('openStudy', PatientName => {
.click({ force: true });
});
Cypress.Commands.add('checkStudyRouteInViewer', StudyInstanceUID => {
cy.location('pathname').then($url => {
cy.log($url);
if ($url == 'blank' || !$url.includes(`/basic-test/${StudyInstanceUID}`)) {
cy.openStudyInViewer(StudyInstanceUID);
cy.waitDicomImage();
cy.wait(2000);
}
});
});
Cypress.Commands.add(
'checkStudyRouteInViewer',
(StudyInstanceUID, otherParams = '') => {
cy.location('pathname').then($url => {
cy.log($url);
if (
$url == 'blank' ||
!$url.includes(`/basic-test/${StudyInstanceUID}${otherParams}`)
) {
cy.openStudyInViewer(StudyInstanceUID, otherParams);
cy.waitDicomImage();
cy.wait(2000);
}
});
}
);
Cypress.Commands.add('openStudyInViewer', StudyInstanceUID => {
cy.visit(`/basic-test?StudyInstanceUIDs=${StudyInstanceUID}`);
});
Cypress.Commands.add(
'openStudyInViewer',
(StudyInstanceUID, otherParams = '') => {
cy.visit(`/basic-test?StudyInstanceUIDs=${StudyInstanceUID}${otherParams}`);
}
);
/**
* Command to search for a Modality and open the study.

113
platform/viewer/public/config/multiple.js
View File

@ -1,4 +1,7 @@
window.config = {
// Activate the new HP mode....
isNewHP: true,
routerBasename: '/',
customizationService: [
'@ohif/extension-default.customizationModule.datasources',
@ -59,25 +62,6 @@ window.config = {
singlepart: 'bulkdata,video,pdf',
},
},
{
friendlyName: 'dcmjs DICOMWeb Server',
namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
sourceName: 'shared',
configuration: {
name: 'shared',
qidoRoot: 'https://domvja9iplmyu.cloudfront.net/dicomweb',
wadoRoot: 'https://domvja9iplmyu.cloudfront.net/dicomweb',
qidoSupportsIncludeField: false,
supportsReject: false,
imageRendering: 'wadors',
thumbnailRendering: 'wadors',
enableStudyLazyLoad: true,
supportsFuzzyMatching: false,
supportsWildcard: true,
staticWado: true,
singlepart: 'bulkdata,video,pdf',
},
},
{
friendlyName: 'E2E Test Data',
namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
@ -122,92 +106,7 @@ window.config = {
console.warn('test, navigate to https://ohif.org/');
},
defaultDataSourceName: 'default',
hotkeys: [
{
commandName: 'incrementActiveViewport',
label: 'Next Viewport',
keys: ['right'],
},
{
commandName: 'decrementActiveViewport',
label: 'Previous Viewport',
keys: ['left'],
},
{ commandName: 'rotateViewportCW', label: 'Rotate Right', keys: ['r'] },
{ commandName: 'rotateViewportCCW', label: 'Rotate Left', keys: ['l'] },
{ commandName: 'invertViewport', label: 'Invert', keys: ['i'] },
{
commandName: 'flipViewportHorizontal',
label: 'Flip Horizontally',
keys: ['h'],
},
{
commandName: 'flipViewportVertical',
label: 'Flip Vertically',
keys: ['v'],
},
{ commandName: 'scaleUpViewport', label: 'Zoom In', keys: ['+'] },
{ commandName: 'scaleDownViewport', label: 'Zoom Out', keys: ['-'] },
{ commandName: 'fitViewportToWindow', label: 'Zoom to Fit', keys: ['='] },
{ commandName: 'resetViewport', label: 'Reset', keys: ['space'] },
{ commandName: 'nextImage', label: 'Next Image', keys: ['down'] },
{ commandName: 'previousImage', label: 'Previous Image', keys: ['up'] },
// {
// commandName: 'previousViewportDisplaySet',
// label: 'Previous Series',
// keys: ['pagedown'],
// },
// {
// commandName: 'nextViewportDisplaySet',
// label: 'Next Series',
// keys: ['pageup'],
// },
{ commandName: 'setZoomTool', label: 'Zoom', keys: ['z'] },
// ~ Window level presets
{
commandName: 'windowLevelPreset1',
label: 'W/L Preset 1',
keys: ['1'],
},
{
commandName: 'windowLevelPreset2',
label: 'W/L Preset 2',
keys: ['2'],
},
{
commandName: 'windowLevelPreset3',
label: 'W/L Preset 3',
keys: ['3'],
},
{
commandName: 'windowLevelPreset4',
label: 'W/L Preset 4',
keys: ['4'],
},
{
commandName: 'windowLevelPreset5',
label: 'W/L Preset 5',
keys: ['5'],
},
{
commandName: 'windowLevelPreset6',
label: 'W/L Preset 6',
keys: ['6'],
},
{
commandName: 'windowLevelPreset7',
label: 'W/L Preset 7',
keys: ['7'],
},
{
commandName: 'windowLevelPreset8',
label: 'W/L Preset 8',
keys: ['8'],
},
{
commandName: 'windowLevelPreset9',
label: 'W/L Preset 9',
keys: ['9'],
},
],
// Only list the unique hotkeys
hotkeys: [],
};

32
platform/viewer/src/App.tsx
View File

@ -5,7 +5,12 @@ import i18n from '@ohif/i18n';
import { I18nextProvider } from 'react-i18next';
import { BrowserRouter } from 'react-router-dom';
import Compose from './routes/Mode/Compose';
import {
ServicesManager,
ExtensionManager,
CommandsManager,
HotkeysManager,
} from '@ohif/core';
import {
DialogProvider,
Modal,
@ -24,7 +29,10 @@ import createRoutes from './routes';
import appInit from './appInit.js';
import OpenIdConnectRoutes from './utils/OpenIdConnectRoutes';
let commandsManager, extensionManager, servicesManager, hotkeysManager;
let commandsManager: CommandsManager,
extensionManager: ExtensionManager,
servicesManager: ServicesManager,
hotkeysManager: HotkeysManager;
function App({ config, defaultExtensions, defaultModes }) {
const [init, setInit] = useState(null);
@ -59,12 +67,12 @@ function App({ config, defaultExtensions, defaultModes }) {
} = appConfigState;
const {
UIDialogService,
uiDialogService,
uiModalService,
UINotificationService,
UIViewportDialogService,
ViewportGridService,
CineService,
uiNotificationService,
uiViewportDialogService,
viewportGridService,
cineService,
userAuthenticationService,
customizationService,
} = servicesManager.services;
@ -74,11 +82,11 @@ function App({ config, defaultExtensions, defaultModes }) {
[UserAuthenticationProvider, { service: userAuthenticationService }],
[I18nextProvider, { i18n }],
[ThemeWrapper],
[ViewportGridProvider, { service: ViewportGridService }],
[ViewportDialogProvider, { service: UIViewportDialogService }],
[CineProvider, { service: CineService }],
[SnackbarProvider, { service: UINotificationService }],
[DialogProvider, { service: UIDialogService }],
[ViewportGridProvider, { service: viewportGridService }],
[ViewportDialogProvider, { service: uiViewportDialogService }],
[CineProvider, { service: cineService }],
[SnackbarProvider, { service: uiNotificationService }],
[DialogProvider, { service: uiDialogService }],
[ModalProvider, { service: uiModalService, modal: Modal }],
];
const CombinedProviders = ({ children }) =>

2
platform/viewer/src/appInit.js
View File

@ -8,6 +8,7 @@ import {
UIDialogService,
UIViewportDialogService,
MeasurementService,
StateSyncService,
DisplaySetService,
ToolbarService,
ViewportGridService,
@ -60,6 +61,7 @@ async function appInit(appConfigOrFunc, defaultExtensions, defaultModes) {
CineService.REGISTRATION,
UserAuthenticationService.REGISTRATION,
PanelService.REGISTRATION,
StateSyncService.REGISTRATION,
]);
errorHandler.getHTTPErrorHandler = () => {

251
platform/viewer/src/components/ViewportGrid.tsx
View File

@ -1,5 +1,6 @@
import React, { useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import { ServicesManager } from '@ohif/core';
import { ViewportGrid, ViewportPane, useViewportGrid } from '@ohif/ui';
import { utils } from '@ohif/core';
import EmptyViewport from './EmptyViewport';
@ -22,11 +23,28 @@ const ORIENTATION_MAP = {
},
};
const createHpInfo = (protocol, stage, activeStudyUID) => {
return {
hangingProtocolId: protocol.id,
stageId: stage.stageId,
stageIdx: protocol.stages.findIndex(it => it === stage),
activeStudyUID,
};
};
const compareViewportOptions = (opts1, opts2) => {
if ((opts1.viewportType || 'stack') != opts2.viewportType) {
return false;
}
return true;
};
function ViewerViewportGrid(props) {
const { servicesManager, viewportComponents, dataSource } = props;
const [viewportGrid, viewportGridService] = useViewportGrid();
const { numCols, numRows, activeViewportIndex, viewports } = viewportGrid;
const { layout, activeViewportIndex, viewports } = viewportGrid;
const { numCols, numRows } = layout;
// TODO -> Need some way of selecting which displaySets hit the viewports.
const {
@ -34,124 +52,77 @@ function ViewerViewportGrid(props) {
measurementService,
hangingProtocolService,
uiNotificationService,
} = servicesManager.services;
} = (servicesManager as ServicesManager).services;
/**
* This callback runs only after displaySets have changed (created and added or modified)
* This callback runs after the viewports structure has changed in any way.
* On initial display, that means if it has changed by applying a HangingProtocol,
* while subsequently it may mean by changing the stage or by manually adjusting
* the layout.
*/
const updateDisplaySetsForViewports = useCallback(
availableDisplaySets => {
if (!availableDisplaySets.length) {
const updateDisplaySetsFromProtocol = (
protocol,
stage,
activeStudyUID,
viewportMatchDetails
) => {
const availableDisplaySets = displaySetService.getActiveDisplaySets();
if (!availableDisplaySets.length) {
console.log('No available display sets', availableDisplaySets);
return;
}
// Match each viewport individually
const { layoutType } = stage.viewportStructure;
const stageProps = stage.viewportStructure.properties;
const { columns: numCols, rows: numRows, layoutOptions = [] } = stageProps;
/**
* This find or create viewport uses the hanging protocol results to
* specify the viewport match details, which specifies the size and
* setup of the various viewports.
*/
const findOrCreateViewport = viewportIndex => {
const details = viewportMatchDetails.get(viewportIndex);
if (!details) {
console.log('No match details for viewport', viewportIndex);
return;
}
const {
viewportMatchDetails,
hpAlreadyApplied,
} = hangingProtocolService.getMatchDetails();
if (!viewportMatchDetails.size) {
return;
}
const gridDisplaySetUIDs = [];
const blankViewportIndices = [];
// Match each viewport individually.
const numViewports = viewportGridService.getNumViewportPanes();
for (
let viewportIndex = 0;
viewportIndex < numViewports;
viewportIndex++
) {
const viewportDisplaySetUIDs =
viewports[viewportIndex]?.displaySetInstanceUIDs ?? [];
if (hpAlreadyApplied.get(viewportIndex)) {
gridDisplaySetUIDs.push(...viewportDisplaySetUIDs);
continue;
}
// if current viewport doesn't have a match
if (viewportMatchDetails.get(viewportIndex) === undefined) {
// if the current viewport is empty/blank
if (viewportDisplaySetUIDs.length === 0) {
blankViewportIndices.push(viewportIndex);
} else {
gridDisplaySetUIDs.push(...viewportDisplaySetUIDs);
}
continue;
}
const { displaySetsInfo, viewportOptions } = viewportMatchDetails.get(
viewportIndex
);
const displaySetUIDsToHang = [];
const displaySetUIDsToHangOptions = [];
displaySetsInfo.forEach(
({ displaySetInstanceUID, displaySetOptions }) => {
if (!displaySetInstanceUID) {
return;
}
const { displaySetsInfo, viewportOptions } = details;
const displaySetUIDsToHang = [];
const displaySetUIDsToHangOptions = [];
displaySetsInfo.forEach(
({ displaySetInstanceUID, displaySetOptions }) => {
if (displaySetInstanceUID) {
displaySetUIDsToHang.push(displaySetInstanceUID);
displaySetUIDsToHangOptions.push(displaySetOptions);
}
);
gridDisplaySetUIDs.push(...displaySetUIDsToHang);
viewportGridService.setDisplaySetsForViewport({
viewportIndex: viewportIndex,
displaySetInstanceUIDs: displaySetUIDsToHang,
viewportOptions,
displaySetOptions: displaySetUIDsToHangOptions,
});
// During setting displaySets for viewport, we need to update the hanging protocol
// but some viewports contain more than one display set (fusion), and their displaySet
// will not be available at the time of setting displaySets for viewport. So we need to
// update the hanging protocol after making sure all the matched display sets are available
// and set on the viewport
if (displaySetUIDsToHang.length === displaySetsInfo.length) {
// The following will set the viewportsDisplaySetsMatched state
const suppressEvent = true;
const applied = true;
hangingProtocolService.setHangingProtocolAppliedForViewport(
viewportIndex,
applied,
suppressEvent
);
displaySetUIDsToHangOptions.push(displaySetOptions);
}
}
);
blankViewportIndices.forEach((blankVPIndex: number) => {
// try to fill the empty viewport with a display set not already in the grid
const displaySetsNotInGrid = availableDisplaySets.filter(
displaySet =>
gridDisplaySetUIDs.indexOf(displaySet.displaySetInstanceUID) ===
-1 &&
['SEG', 'SR', 'RTSTRUCT'].indexOf(displaySet.Modality) === -1
);
return {
displaySetInstanceUIDs: displaySetUIDsToHang,
displaySetOptions: displaySetUIDsToHangOptions,
viewportOptions: {
...viewportOptions,
},
};
};
if (displaySetsNotInGrid.length > 0) {
const displaySetUIDToAdd =
displaySetsNotInGrid[0].displaySetInstanceUID;
gridDisplaySetUIDs.push(displaySetUIDToAdd);
viewportGridService.setDisplaySetsForViewport({
viewportIndex: blankVPIndex,
displaySetInstanceUIDs: [displaySetUIDToAdd],
});
}
});
},
[viewportGrid, numRows, numCols]
);
viewportGridService.setLayout({
numRows,
numCols,
layoutType,
layoutOptions,
hpInfo: createHpInfo(protocol, stage, activeStudyUID),
findOrCreateViewport,
});
};
const _getUpdatedViewports = useCallback(
(viewportIndex, displaySetInstanceUID) => {
@ -177,22 +148,17 @@ function ViewerViewportGrid(props) {
[hangingProtocolService, uiNotificationService]
);
useEffect(() => {
const displaySets = displaySetService.getActiveDisplaySets();
updateDisplaySetsForViewports(displaySets);
}, [numRows, numCols]);
// Layout change based on hanging protocols
// Using Hanging protocol engine to match the displaySets
useEffect(() => {
const { unsubscribe } = hangingProtocolService.subscribe(
hangingProtocolService.EVENTS.NEW_LAYOUT,
({ layoutType, numRows, numCols, layoutOptions }) => {
viewportGridService.setLayout({
numRows,
numCols,
layoutType,
layoutOptions,
});
hangingProtocolService.EVENTS.PROTOCOL_CHANGED,
({ protocol, stage, activeStudyUID, viewportMatchDetails }) => {
updateDisplaySetsFromProtocol(
protocol,
stage,
activeStudyUID,
viewportMatchDetails
);
}
);
@ -201,35 +167,6 @@ function ViewerViewportGrid(props) {
};
}, []);
// Using Hanging protocol engine to match the displaySets
useEffect(() => {
const { unsubscribe } = hangingProtocolService.subscribe(
hangingProtocolService.EVENTS.PROTOCOL_CHANGED,
() => {
const displaySets = displaySetService.getActiveDisplaySets();
updateDisplaySetsForViewports(displaySets);
}
);
return () => {
unsubscribe();
};
}, [viewports]);
useEffect(() => {
const { unsubscribe } = hangingProtocolService.subscribe(
hangingProtocolService.EVENTS.STAGE_CHANGE,
() => {
const displaySets = DisplaySetService.getActiveDisplaySets();
updateDisplaySetsForViewports(displaySets);
}
);
return () => {
unsubscribe();
};
}, [viewports]);
useEffect(() => {
const { unsubscribe } = measurementService.subscribe(
measurementService.EVENTS.JUMP_TO_MEASUREMENT,
@ -366,11 +303,15 @@ function ViewerViewportGrid(props) {
const getViewportPanes = useCallback(() => {
const viewportPanes = [];
const numViewports = viewportGridService.getNumViewportPanes();
for (let i = 0; i < numViewports; i++) {
const numViewportPanes = viewportGridService.getNumViewportPanes();
for (let i = 0; i < numViewportPanes; i++) {
const viewportIndex = i;
const isActive = activeViewportIndex === viewportIndex;
const paneMetadata = viewports[i] || {};
const viewportId = paneMetadata.viewportId || `viewport-${i}`;
if (!paneMetadata.viewportId) {
paneMetadata.viewportId = viewportId;
}
const {
displaySetInstanceUIDs,
viewportOptions,
@ -420,7 +361,7 @@ function ViewerViewportGrid(props) {
viewportPanes[i] = (
<ViewportPane
key={viewportIndex}
key={viewportId}
acceptDropsFor="displayset"
onDrop={onDropHandler.bind(null, viewportIndex)}
onInteraction={onInteractionHandler}
@ -434,6 +375,7 @@ function ViewerViewportGrid(props) {
isActive={isActive}
>
<div
data-cy="viewport-pane"
className={classNames('h-full w-full flex flex-col', {
'pointer-events-none': !isActive,
})}
@ -441,7 +383,7 @@ function ViewerViewportGrid(props) {
<ViewportComponent
displaySets={displaySets}
viewportIndex={viewportIndex}
viewportLabel={numViewports > 1 ? viewportLabel : ''}
viewportLabel={viewports.length > 1 ? viewportLabel : ''}
dataSource={dataSource}
viewportOptions={viewportOptions}
displaySetOptions={displaySetOptions}
@ -456,7 +398,7 @@ function ViewerViewportGrid(props) {
}, [viewports, activeViewportIndex, viewportComponents, dataSource]);
/**
* Loading indicator until numCols and numRows are gotten from the hangingProtocolService
* Loading indicator until numCols and numRows are gotten from the HangingProtocolService
*/
if (!numRows || !numCols) {
return null;
@ -472,6 +414,7 @@ function ViewerViewportGrid(props) {
ViewerViewportGrid.propTypes = {
viewportComponents: PropTypes.array.isRequired,
servicesManager: PropTypes.instanceOf(ServicesManager),
};
ViewerViewportGrid.defaultProps = {

21
platform/viewer/src/routes/Mode/Mode.tsx
View File

@ -8,6 +8,7 @@ import { DragAndDropProvider, ImageViewerProvider } from '@ohif/ui';
import { useQuery, useSearchParams } from '@hooks';
import ViewportGrid from '@components/ViewportGrid';
import Compose from './Compose';
import getStudies from './studiesList';
/**
* Initialize the route.
@ -64,21 +65,9 @@ function defaultRouteInit(
return;
}
const studyMap = {};
// Gets the studies list to use
const studies = getStudies(studyInstanceUIDs, displaySets);
// Prior studies don't quite work properly yet, but the studies list
// is at least being generated and passed in.
const studies = displaySets.reduce((prev, curr) => {
const { StudyInstanceUID } = curr;
if (!studyMap[StudyInstanceUID]) {
const study = DicomMetadataStore.getStudy(StudyInstanceUID);
studyMap[StudyInstanceUID] = study;
prev.push(study);
}
return prev;
}, []);
// The assumption is that the display set at position 0 is the first
// study being displayed, and is thus the "active" study.
const activeStudy = studies[0];
@ -133,10 +122,8 @@ export default function ModeRoute({
extensionManager.setActiveDataSource(dataSourceName);
const dataSources = extensionManager.getActiveDataSource();
const dataSource = extensionManager.getActiveDataSource()[0];
// Only handling one instance of the datasource type (E.g. one DICOMWeb server)
const dataSource = dataSources[0];
// Only handling one route per mode for now
const route = mode.routes[0];

65
platform/viewer/src/routes/Mode/studiesList.ts Normal file
View File

@ -0,0 +1,65 @@
import { DicomMetadataStore, Types } from '@ohif/core';
type StudyMetadata = Types.StudyMetadata;
/**
* Compare function for sorting
*
* @param a - some simple value (string, number, timestamp)
* @param b - some simple value
* @param defaultCompare - default return value as a fallback when a===b
* @returns - compare a and b, returning 1 if a<b -1 if a>b and defaultCompare otherwise
*/
const compare = (a, b, defaultCompare = 0): number => {
if (a === b) return defaultCompare;
if (a < b) return 1;
return -1;
};
/**
* The studies from display sets gets the studies in study date
* order or in study instance UID order - not very useful, but
* if not specifically specified then at least making it consistent is useful.
*/
const getStudiesfromDisplaySets = (displaysets): StudyMetadata[] => {
const studyMap = {};
const ret = displaySets.reduce((prev, curr) => {
const { StudyInstanceUID } = curr;
if (!studyMap[StudyInstanceUID]) {
const study = DicomMetadataStore.getStudy(StudyInstanceUID);
studyMap[StudyInstanceUID] = study;
prev.push(study);
}
return prev;
}, []);
// Return the sorted studies, first on study date and second on study instance UID
ret.sort((a, b) => {
return compare(
a.StudyDate,
b.StudyDate,
compare(a.StudyInstanceUID, b.StudyInstanceUID)
);
});
return ret;
};
/**
* The studies retrieve from the Uids is faster and gets the studies
* in the original order, as specified.
*/
const getStudiesFromUIDs = (studyUids: string[]): StudyMetadata[] => {
if (!studyUids?.length) return;
return studyUids.map(uid => DicomMetadataStore.getStudy(uid));
};
/** Gets the array of studies */
const getStudies = (studyUids?: string[], displaySets): StudyMetadata[] => {
return (
getStudiesFromUIDs(studyUids) || getStudiesfromDisplaySets(displaySets)
);
};
export default getStudies;
export { getStudies, getStudiesFromUIDs, getStudiesfromDisplaySets, compare };

8
platform/viewer/src/routes/WorkList/WorkList.tsx
View File

@ -501,11 +501,9 @@ const defaultFilterValues = {
function _tryParseInt(str, defaultValue) {
let retValue = defaultValue;
if (str != null) {
if (str.length > 0) {
if (!isNaN(str)) {
retValue = parseInt(str);
}
if (str && str.length > 0) {
if (!isNaN(str)) {
retValue = parseInt(str);
}
}
return retValue;