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

feat(measurement): Add support measurement label autocompletion (#3855)

Browse Source
This commit is contained in:
nithin-trenser 2024-04-05 08:12:48 +05:30 committed by GitHub
parent 807afb8ce5
commit 56b1eae635
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
25 changed files with 830 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,7 +16,7 @@ import { Types as OhifTypes } from '@ohif/core';
import { vec3, mat4 } from 'gl-matrix';
import CornerstoneViewportDownloadForm from './utils/CornerstoneViewportDownloadForm';
import callInputDialog from './utils/callInputDialog';
import { callLabelAutocompleteDialog, showLabelAnnotationPopup } from './utils/callInputDialog';
import toggleImageSliceSync from './utils/imageSliceSync/toggleImageSliceSync';
import { getFirstAnnotationSelected } from './utils/measurementServiceMappings/utils/selection';
import getActiveViewportEnabledElement from './utils/getActiveViewportEnabledElement';
@ -40,6 +40,7 @@ function commandsModule({
cornerstoneViewportService,
uiNotificationService,
measurementService,
customizationService,
colorbarService,
hangingProtocolService,
syncGroupService,
@ -140,23 +141,18 @@ function commandsModule({
* on the measurement with a response if not cancelled.
*/
setMeasurementLabel: ({ uid }) => {
const labelConfig = customizationService.get('measurementLabels');
const measurement = measurementService.getMeasurement(uid);
callInputDialog(
uiDialogService,
measurement,
(label, actionId) => {
if (actionId === 'cancel') {
return;
}
const updatedMeasurement = Object.assign({}, measurement, {
label,
});
measurementService.update(updatedMeasurement.uid, updatedMeasurement, true);
},
false
showLabelAnnotationPopup(measurement, uiDialogService, labelConfig).then(
(val: Map<any, any>) => {
measurementService.update(
uid,
{
...val,
},
true
);
}
);
},
@ -232,8 +228,9 @@ function commandsModule({
viewportGridService.setActiveViewportId(viewportId);
},
arrowTextCallback: ({ callback, data }) => {
callInputDialog(uiDialogService, data, callback);
arrowTextCallback: ({ callback, data, uid }) => {
const labelConfig = customizationService.get('measurementLabels');
callLabelAutocompleteDialog(uiDialogService, callback, {}, labelConfig);
},
toggleCine: () => {
const { viewports } = viewportGridService.getState();

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

@ -31,6 +31,7 @@ import { id } from './id';
import { measurementMappingUtils } from './utils/measurementServiceMappings';
import type { PublicViewportOptions } from './services/ViewportService/Viewport';
import ImageOverlayViewerTool from './tools/ImageOverlayViewerTool';
import { showLabelAnnotationPopup } from './utils/callInputDialog';
import ViewportActionCornersService from './services/ViewportActionCornersService/ViewportActionCornersService';
import { ViewportActionCornersProvider } from './contextProviders/ViewportActionCornersProvider';
@ -126,6 +127,7 @@ const cornerstoneExtension: Types.Extensions.Extension = {
},
getEnabledElement,
dicomLoaderService,
showLabelAnnotationPopup
},
},
{

72
extensions/cornerstone/src/utils/callInputDialog.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Input, Dialog, ButtonEnums } from '@ohif/ui';
import { Input, Dialog, ButtonEnums, LabellingFlow } from '@ohif/ui';
/**
*
@ -13,6 +13,7 @@ import { Input, Dialog, ButtonEnums } from '@ohif/ui';
* @param {string?} dialogConfig.dialogTitle - title of the input dialog
* @param {string?} dialogConfig.inputLabel - show label above the input
*/
function callInputDialog(
uiDialogService,
data,
@ -88,4 +89,73 @@ function callInputDialog(
}
}
export function callLabelAutocompleteDialog(uiDialogService, callback, dialogConfig, labelConfig) {
const exclusive = labelConfig ? labelConfig.exclusive : false;
const dropDownItems = labelConfig ? labelConfig.items : [];
const { validateFunc = value => true } = dialogConfig;
const labellingDoneCallback = value => {
if (typeof value === 'string') {
if (typeof validateFunc === 'function' && !validateFunc(value)) {
return;
}
callback(value, 'save');
} else {
callback('', 'cancel');
}
uiDialogService.dismiss({ id: 'select-annotation' });
};
uiDialogService.create({
id: 'select-annotation',
isDraggable: false,
showOverlay: true,
content: LabellingFlow,
defaultPosition: {
x: window.innerWidth / 2,
y: window.innerHeight / 2,
},
contentProps: {
labellingDoneCallback: labellingDoneCallback,
measurementData: { label: '' },
componentClassName: {},
labelData: dropDownItems,
exclusive: exclusive,
},
});
}
export function showLabelAnnotationPopup(measurement, uiDialogService, labelConfig) {
const exclusive = labelConfig ? labelConfig.exclusive : false;
const dropDownItems = labelConfig ? labelConfig.items : [];
return new Promise<Map<any, any>>((resolve, reject) => {
const labellingDoneCallback = value => {
uiDialogService.dismiss({ id: 'select-annotation' });
if (typeof value === 'string') {
measurement.label = value;
}
resolve(measurement);
};
uiDialogService.create({
id: 'select-annotation',
isDraggable: false,
showOverlay: true,
content: LabellingFlow,
defaultPosition: {
x: window.innerWidth / 2,
y: window.innerHeight / 2,
},
contentProps: {
labellingDoneCallback: labellingDoneCallback,
measurementData: measurement,
componentClassName: {},
labelData: dropDownItems,
exclusive: exclusive,
},
});
});
}
export default callInputDialog;

19
extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/TrackedMeasurementsContext.tsx
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { Machine } from 'xstate';
import { useMachine } from '@xstate/react';
import { useViewportGrid } from '@ohif/ui';
import { machineConfiguration, defaultOptions } from './measurementTrackingMachine';
import { machineConfiguration, defaultOptions, RESPONSE } from './measurementTrackingMachine';
import promptBeginTracking from './promptBeginTracking';
import promptTrackNewSeries from './promptTrackNewSeries';
import promptTrackNewStudy from './promptTrackNewStudy';
@ -11,6 +11,7 @@ import promptSaveReport from './promptSaveReport';
import promptHydrateStructuredReport from './promptHydrateStructuredReport';
import hydrateStructuredReport from './hydrateStructuredReport';
import { useAppConfig } from '@state';
import promptLabelAnnotation from './promptLabelAnnotation';
const TrackedMeasurementsContext = React.createContext();
TrackedMeasurementsContext.displayName = 'TrackedMeasurementsContext';
@ -30,7 +31,7 @@ function TrackedMeasurementsContextProvider(
const [viewportGrid, viewportGridService] = useViewportGrid();
const { activeViewportId, viewports } = viewportGrid;
const { measurementService, displaySetService } = servicesManager.services;
const { measurementService, displaySetService, customizationService } = servicesManager.services;
const machineOptions = Object.assign({}, defaultOptions);
machineOptions.actions = Object.assign({}, machineOptions.actions, {
@ -142,6 +143,20 @@ function TrackedMeasurementsContextProvider(
extensionManager,
appConfig,
}),
promptLabelAnnotation: promptLabelAnnotation.bind(null, {
servicesManager,
extensionManager,
}),
});
machineOptions.guards = Object.assign({}, machineOptions.guards, {
isLabelOnMeasure: (ctx, evt, condMeta) => {
const labelConfig = customizationService.get('measurementLabels');
return labelConfig?.labelOnMeasure;
},
isLabelOnMeasureAndShouldKillMachine: (ctx, evt, condMeta) => {
const labelConfig = customizationService.get('measurementLabels');
return evt.data && evt.data.userResponse === RESPONSE.NO_NEVER && labelConfig?.labelOnMeasure;
},
});
// TODO: IMPROVE

95
extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/measurementTrackingMachine.js
View File

@ -31,10 +31,33 @@ const machineConfiguration = {
off: {
type: 'final',
},
labellingOnly: {
on: {
TRACK_SERIES: [
{
target: 'promptLabelAnnotation',
actions: ['setPreviousState'],
},
{
target: 'off',
},
],
},
},
idle: {
entry: 'clearContext',
on: {
TRACK_SERIES: 'promptBeginTracking',
TRACK_SERIES: [
{
target: 'promptLabelAnnotation',
cond: 'isLabelOnMeasure',
actions: ['setPreviousState'],
},
{
target: 'promptBeginTracking',
actions: ['setPreviousState'],
},
],
// Unused? We may only do PROMPT_HYDRATE_SR now?
SET_TRACKED_SERIES: [
{
@ -64,6 +87,10 @@ const machineConfiguration = {
actions: ['setTrackedStudyAndSeries', 'setIsDirty'],
cond: 'shouldSetStudyAndSeries',
},
{
target: 'labellingOnly',
cond: 'isLabelOnMeasureAndShouldKillMachine',
},
{
target: 'off',
cond: 'shouldKillMachine',
@ -80,6 +107,11 @@ const machineConfiguration = {
tracking: {
on: {
TRACK_SERIES: [
{
target: 'promptLabelAnnotation',
cond: 'isLabelOnMeasure',
actions: ['setPreviousState'],
},
{
target: 'promptTrackNewStudy',
cond: 'isNewStudy',
@ -252,6 +284,36 @@ const machineConfiguration = {
},
},
},
promptLabelAnnotation: {
invoke: {
src: 'promptLabelAnnotation',
onDone: [
{
target: 'labellingOnly',
cond: 'wasLabellingOnly',
},
{
target: 'promptBeginTracking',
cond: 'wasIdle',
},
{
target: 'promptTrackNewStudy',
cond: 'wasTrackingAndIsNewStudy',
},
{
target: 'promptTrackNewSeries',
cond: 'wasTrackingAndIsNewSeries',
},
{
target: 'tracking',
cond: 'wasTracking',
},
{
target: 'off',
},
],
},
},
},
strict: true,
};
@ -337,6 +399,11 @@ const defaultOptions = {
prevTrackedSeries: ctx.trackedSeries.slice().filter(ser => ser !== evt.SeriesInstanceUID),
trackedSeries: ctx.trackedSeries.slice().filter(ser => ser !== evt.SeriesInstanceUID),
})),
setPreviousState: assign((ctx, evt, meta) => {
return {
prevState: meta.state.value,
};
}),
},
guards: {
// We set dirty any time we performan an action that:
@ -362,6 +429,30 @@ const defaultOptions = {
evt.SeriesInstanceUID === undefined || ctx.trackedSeries.includes(evt.SeriesInstanceUID)
);
},
wasLabellingOnly: (ctx, evt, condMeta) => {
return ctx.prevState === 'labellingOnly';
},
wasIdle: (ctx, evt, condMeta) => {
return ctx.prevState === 'idle';
},
wasTracking: (ctx, evt, condMeta) => {
return ctx.prevState === 'tracking';
},
wasTrackingAndIsNewStudy: (ctx, evt, condMeta) => {
return (
ctx.prevState === 'tracking' &&
!ctx.ignoredSeries.includes(evt.data.SeriesInstanceUID) &&
ctx.trackedStudy !== evt.data.StudyInstanceUID
);
},
wasTrackingAndIsNewSeries: (ctx, evt, condMeta) => {
return (
ctx.prevState === 'tracking' &&
!ctx.ignoredSeries.includes(evt.data.SeriesInstanceUID) &&
!ctx.trackedSeries.includes(evt.data.SeriesInstanceUID)
);
},
shouldKillMachine: (ctx, evt) => evt.data && evt.data.userResponse === RESPONSE.NO_NEVER,
shouldAddSeries: (ctx, evt) => evt.data && evt.data.userResponse === RESPONSE.ADD_SERIES,
shouldSetStudyAndSeries: (ctx, evt) =>
@ -397,4 +488,4 @@ const defaultOptions = {
},
};
export { defaultOptions, machineConfiguration };
export { defaultOptions, machineConfiguration, RESPONSE };

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

@ -11,7 +11,9 @@ const RESPONSE = {
function promptBeginTracking({ servicesManager, extensionManager }, ctx, evt) {
const { uiViewportDialogService } = servicesManager.services;
const { viewportId, StudyInstanceUID, SeriesInstanceUID } = evt;
// When the state change happens after a promise, the state machine sends the retult in evt.data;
// In case of direct transition to the state, the state machine sends the data in evt;
const { viewportId, StudyInstanceUID, SeriesInstanceUID } = evt.data || evt;
return new Promise(async function (resolve, reject) {
let promptResult = await _askTrackMeasurements(uiViewportDialogService, viewportId);

33
extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptLabelAnnotation.js Normal file
View File

@ -0,0 +1,33 @@
function promptLabelAnnotation({ servicesManager, extensionManager }, ctx, evt) {
const { measurementService, customizationService } = servicesManager.services;
const { viewportId, StudyInstanceUID, SeriesInstanceUID, measurementId } = evt;
const utilityModule = extensionManager.getModuleEntry(
'@ohif/extension-cornerstone.utilityModule.common'
);
const { showLabelAnnotationPopup } = utilityModule.exports;
return new Promise(async function (resolve) {
const labelConfig = customizationService.get('measurementLabels');
const measurement = measurementService.getMeasurement(measurementId);
const value = await showLabelAnnotationPopup(
measurement,
servicesManager.services.uiDialogService,
labelConfig
);
measurementService.update(
measurementId,
{
...value,
},
true
);
resolve({
StudyInstanceUID,
SeriesInstanceUID,
viewportId,
});
});
}
export default promptLabelAnnotation;

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

@ -11,7 +11,9 @@ const RESPONSE = {
function promptTrackNewSeries({ servicesManager, extensionManager }, ctx, evt) {
const { UIViewportDialogService } = servicesManager.services;
const { viewportId, StudyInstanceUID, SeriesInstanceUID } = evt;
// When the state change happens after a promise, the state machine sends the retult in evt.data;
// In case of direct transition to the state, the state machine sends the data in evt;
const { viewportId, StudyInstanceUID, SeriesInstanceUID } = evt.data || evt;
return new Promise(async function (resolve, reject) {
let promptResult = await _askShouldAddMeasurements(UIViewportDialogService, viewportId);

4
extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewStudy.js
View File

@ -11,7 +11,9 @@ const RESPONSE = {
function promptTrackNewStudy({ servicesManager, extensionManager }, ctx, evt) {
const { UIViewportDialogService } = servicesManager.services;
const { viewportId, StudyInstanceUID, SeriesInstanceUID } = evt;
// When the state change happens after a promise, the state machine sends the retult in evt.data;
// In case of direct transition to the state, the state machine sends the data in evt;
const { viewportId, StudyInstanceUID, SeriesInstanceUID } = evt.data || evt;
return new Promise(async function (resolve, reject) {
let promptResult = await _askTrackMeasurements(UIViewportDialogService, viewportId);

77
extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.tsx
View File

@ -29,7 +29,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
const [viewportGrid] = useViewportGrid();
const [measurementChangeTimestamp, setMeasurementsUpdated] = useState(Date.now().toString());
const debouncedMeasurementChangeTimestamp = useDebounce(measurementChangeTimestamp, 200);
const { measurementService, uiDialogService, displaySetService } = servicesManager.services;
const { measurementService, uiDialogService, displaySetService, customizationService } = servicesManager.services;
const [trackedMeasurements, sendTrackedMeasurementsEvent] = useTrackedMeasurements();
const { trackedStudy, trackedSeries } = trackedMeasurements.context;
const [displayStudySummary, setDisplayStudySummary] = useState(
@ -134,67 +134,24 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
};
const onMeasurementItemEditHandler = ({ uid, isActive }) => {
const measurement = measurementService.getMeasurement(uid);
jumpToImage({ uid, isActive });
const onSubmitHandler = ({ action, value }) => {
switch (action.id) {
case 'save': {
measurementService.update(
uid,
{
...measurement,
...value,
},
true
);
}
const labelConfig = customizationService.get('measurementLabels');
const measurement = measurementService.getMeasurement(uid);
const utilityModule = extensionManager.getModuleEntry(
'@ohif/extension-cornerstone.utilityModule.common'
);
const { showLabelAnnotationPopup } = utilityModule.exports;
showLabelAnnotationPopup(measurement, uiDialogService, labelConfig).then(
(val: Map<any, any>) => {
measurementService.update(
uid,
{
...val,
},
true
);
}
uiDialogService.dismiss({ id: 'enter-annotation' });
};
uiDialogService.create({
id: 'enter-annotation',
centralize: true,
isDraggable: false,
showOverlay: true,
content: Dialog,
contentProps: {
title: 'Annotation',
noCloseButton: true,
value: { label: measurement.label || '' },
body: ({ value, setValue }) => {
const onChangeHandler = event => {
event.persist();
setValue(value => ({ ...value, label: event.target.value }));
};
const onKeyPressHandler = event => {
if (event.key === 'Enter') {
onSubmitHandler({ value, action: { id: 'save' } });
}
};
return (
<Input
label="Enter your annotation"
labelClassName="text-white grow text-[14px] leading-[1.2]"
autoFocus
id="annotation"
className="border-primary-main bg-black"
type="text"
value={value.label}
onChange={onChangeHandler}
onKeyPress={onKeyPressHandler}
/>
);
},
actions: [
{ id: 'cancel', text: 'Cancel', type: ButtonEnums.type.secondary },
{ id: 'save', text: 'Save', type: ButtonEnums.type.primary },
],
onSubmit: onSubmitHandler,
},
});
);
};
const onMeasurementItemClickHandler = ({ uid, isActive }) => {

5
extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx
View File

@ -140,7 +140,9 @@ function TrackedCornerstoneViewport(props) {
// Only send the tracked measurements event for the active viewport to avoid
// sending it more than once.
if (viewportId === activeViewportId) {
const { referenceStudyUID: StudyInstanceUID, referenceSeriesUID: SeriesInstanceUID } =
const { referenceStudyUID: StudyInstanceUID,
referenceSeriesUID: SeriesInstanceUID,
uid: measurementId } =
measurement;
sendTrackedMeasurementsEvent('SET_DIRTY', { SeriesInstanceUID });
@ -148,6 +150,7 @@ function TrackedCornerstoneViewport(props) {
viewportId,
StudyInstanceUID,
SeriesInstanceUID,
measurementId
});
}
}).unsubscribe

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

@ -70,14 +70,28 @@ function modeFactory({ modeConfiguration }) {
/**
* Lifecycle hooks
*/
onModeEnter: ({ servicesManager, extensionManager, commandsManager }) => {
onModeEnter: function ({ servicesManager, extensionManager, commandsManager }) {
const { measurementService, toolbarService, toolGroupService, customizationService } =
servicesManager.services;
measurementService.clearMeasurements();
// customizationService.addModeCustomizations([
// {
// id: 'measurementLabels',
// labelOnMeasure: true,
// exclusive: true,
// items: [
// { value: 'Head', label: 'Head' },
// { value: 'Shoulder', label: 'Shoulder' },
// { value: 'Knee', label: 'Knee' },
// { value: 'Toe', label: 'Toe' },
// ],
// },
// ]);
// Init Default and SR ToolGroups
initToolGroups(extensionManager, toolGroupService, commandsManager);
initToolGroups(extensionManager, toolGroupService, commandsManager, this.labelConfig);
toolbarService.addButtons([...toolbarButtons, ...moreTools]);
toolbarService.createButtonSection('primary', [

86
modes/longitudinal/src/initToolGroups.js
View File

@ -1,4 +1,10 @@
function initDefaultToolGroup(extensionManager, toolGroupService, commandsManager, toolGroupId) {
function initDefaultToolGroup(
extensionManager,
toolGroupService,
commandsManager,
toolGroupId,
modeLabelConfig
) {
const utilityModule = extensionManager.getModuleEntry(
'@ohif/extension-cornerstone.utilityModule.tools'
);
@ -26,18 +32,25 @@ function initDefaultToolGroup(extensionManager, toolGroupService, commandsManage
{
toolName: toolNames.ArrowAnnotate,
configuration: {
getTextCallback: (callback, eventDetails) =>
commandsManager.runCommand('arrowTextCallback', {
callback,
eventDetails,
}),
changeTextCallback: (data, eventDetails, callback) =>
commandsManager.runCommand('arrowTextCallback', {
callback,
data,
eventDetails,
}),
getTextCallback: (callback, eventDetails) => {
if (modeLabelConfig) {
callback(' ');
} else {
commandsManager.runCommand('arrowTextCallback', {
callback,
eventDetails,
});
}
},
changeTextCallback: (data, eventDetails, callback) => {
if (modeLabelConfig === undefined) {
commandsManager.runCommand('arrowTextCallback', {
callback,
data,
eventDetails,
});
}
},
},
},
{ toolName: toolNames.Bidirectional },
@ -126,7 +139,7 @@ function initSRToolGroup(extensionManager, toolGroupService) {
toolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
}
function initMPRToolGroup(extensionManager, toolGroupService, commandsManager) {
function initMPRToolGroup(extensionManager, toolGroupService, commandsManager, modeLabelConfig) {
const utilityModule = extensionManager.getModuleEntry(
'@ohif/extension-cornerstone.utilityModule.tools'
);
@ -154,18 +167,25 @@ function initMPRToolGroup(extensionManager, toolGroupService, commandsManager) {
{
toolName: toolNames.ArrowAnnotate,
configuration: {
getTextCallback: (callback, eventDetails) =>
commandsManager.runCommand('arrowTextCallback', {
callback,
eventDetails,
}),
changeTextCallback: (data, eventDetails, callback) =>
commandsManager.runCommand('arrowTextCallback', {
callback,
data,
eventDetails,
}),
getTextCallback: (callback, eventDetails) => {
if (modeLabelConfig) {
callback('');
} else {
commandsManager.runCommand('arrowTextCallback', {
callback,
eventDetails,
});
}
},
changeTextCallback: (data, eventDetails, callback) => {
if (modeLabelConfig === undefined) {
commandsManager.runCommand('arrowTextCallback', {
callback,
data,
eventDetails,
});
}
},
},
},
{ toolName: toolNames.Bidirectional },
@ -227,10 +247,16 @@ function initVolume3DToolGroup(extensionManager, toolGroupService) {
toolGroupService.createToolGroupAndAddTools('volume3d', tools);
}
function initToolGroups(extensionManager, toolGroupService, commandsManager) {
initDefaultToolGroup(extensionManager, toolGroupService, commandsManager, 'default');
initSRToolGroup(extensionManager, toolGroupService);
initMPRToolGroup(extensionManager, toolGroupService, commandsManager);
function initToolGroups(extensionManager, toolGroupService, commandsManager, modeLabelConfig) {
initDefaultToolGroup(
extensionManager,
toolGroupService,
commandsManager,
'default',
modeLabelConfig
);
initSRToolGroup(extensionManager, toolGroupService, commandsManager);
initMPRToolGroup(extensionManager, toolGroupService, commandsManager, modeLabelConfig);
initVolume3DToolGroup(extensionManager, toolGroupService);
}

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

@ -44,8 +44,12 @@ function modeFactory({ modeConfiguration }) {
* Lifecycle hooks
*/
onModeEnter: ({ servicesManager, extensionManager, commandsManager }) => {
const { toolbarService, toolGroupService, hangingProtocolService, displaySetService } =
servicesManager.services;
const {
toolbarService,
toolGroupService,
hangingProtocolService,
displaySetService,
} = servicesManager.services;
const utilityModule = extensionManager.getModuleEntry(
'@ohif/extension-cornerstone.utilityModule.tools'

34
modes/tmtv/src/initToolGroups.js
View File

@ -7,7 +7,7 @@ export const toolGroupIds = {
// MPR: 'mpr',
};
function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager) {
function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager, modeLabelConfig) {
const tools = {
active: [
{
@ -30,18 +30,24 @@ function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager) {
toolName: toolNames.ArrowAnnotate,
configuration: {
getTextCallback: (callback, eventDetails) => {
commandsManager.runCommand('arrowTextCallback', {
callback,
eventDetails,
});
if (modeLabelConfig) {
callback(' ');
} else {
commandsManager.runCommand('arrowTextCallback', {
callback,
eventDetails,
});
}
},
changeTextCallback: (data, eventDetails, callback) => {
if (modeLabelConfig === undefined) {
commandsManager.runCommand('arrowTextCallback', {
callback,
data,
eventDetails,
});
}
},
changeTextCallback: (data, eventDetails, callback) =>
commandsManager.runCommand('arrowTextCallback', {
callback,
data,
eventDetails,
}),
},
},
{ toolName: toolNames.Bidirectional },
@ -102,8 +108,8 @@ function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager) {
toolGroupService.createToolGroupAndAddTools(toolGroupIds.MIP, mipTools);
}
function initToolGroups(toolNames, Enums, toolGroupService, commandsManager) {
_initToolGroups(toolNames, Enums, toolGroupService, commandsManager);
function initToolGroups(toolNames, Enums, toolGroupService, commandsManager, modeLabelConfig) {
_initToolGroups(toolNames, Enums, toolGroupService, commandsManager, modeLabelConfig);
}
export default initToolGroups;

2
platform/docs/docs/platform/modes/index.md
View File

@ -79,7 +79,7 @@ function modeFactory() {
extensions: extensionDependencies,
hangingProtocol: [],
sopClassHandlers: [],
hotkeys: [],
hotkeys: []
};
}

104
platform/ui/src/components/Labelling/LabellingFlow.tsx Normal file
View File

@ -0,0 +1,104 @@
import SelectTree from '../SelectTree';
import React, { Component } from 'react';
import LabellingTransition from './LabellingTransition';
import cloneDeep from 'lodash.clonedeep';
interface PropType {
labellingDoneCallback: (label: string) => void;
measurementData: any;
labelData: any;
exclusive: boolean;
componentClassName: any;
}
interface StateType {
location: Location;
label: string;
componentClassName: any;
confirmationState: boolean;
displayComponent: boolean;
}
export interface LabelInfo {
label: string;
value: string;
}
class LabellingFlow extends Component<PropType> {
currentItems: Array<LabelInfo> = [];
state: StateType;
mainElement;
constructor(props) {
super(props);
const { label } = props.measurementData;
const className = props.componentClassName;
this.state = {
location,
label,
componentClassName: className,
confirmationState: false,
displayComponent: true,
};
this.mainElement = React.createRef();
}
render() {
if (this.props.labelData) {
this.currentItems = cloneDeep(this.props.labelData);
}
const className = Object.assign({}, this.state.componentClassName);
return (
<LabellingTransition
displayComponent={this.state.displayComponent}
onTransitionExit={this.props.labellingDoneCallback}
>
<>
<div
className={className}
ref={this.mainElement}
>
{this.labellingStateFragment()}
</div>
</>
</LabellingTransition>
);
}
closePopup = () => {
this.setState({
displayComponent: false,
});
setTimeout(() => {
this.setState({
displayComponent: false,
});
}, 2000);
};
selectTreeSelectCalback = (event, itemSelected) => {
const label = itemSelected.value;
this.closePopup();
return this.props.labellingDoneCallback(label);
};
labellingStateFragment = () => {
return (
<SelectTree
items={this.currentItems}
columns={1}
onSelected={this.selectTreeSelectCalback}
closePopup={this.closePopup}
selectTreeFirstTitle="Annotation"
exclusive={this.props.exclusive}
label={this.state.label}
/>
);
};
}
export default LabellingFlow;

28
platform/ui/src/components/Labelling/LabellingTransition.tsx Normal file
View File

@ -0,0 +1,28 @@
import React, { Component } from 'react';
import { CSSTransition } from 'react-transition-group';
const transitionDuration = 0;
const transitionClassName = 'labelling';
const transitionOnAppear = true;
interface PropType {
children: React.ReactNode;
displayComponent: boolean;
onTransitionExit: any;
}
export default class LabellingTransition extends Component<PropType> {
render() {
return (
<CSSTransition
in={this.props.displayComponent}
appear={transitionOnAppear}
timeout={transitionDuration}
classNames={transitionClassName}
onExited={this.props.onTransitionExit}
>
{this.props.children}
</CSSTransition>
);
}
}

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

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

41
platform/ui/src/components/SelectTree/InputRadio.tsx Normal file
View File

@ -0,0 +1,41 @@
import { Component } from 'react';
import React from 'react';
interface PropsType {
value: string;
label: string;
itemData: { label: string; value: string };
id: string;
onSelected: Function;
index: number;
selectTree: any;
}
export default class InputRadio extends Component<PropsType> {
render() {
const { focusedIndex } = this.props.selectTree.state;
const isFocused = this.props.index === focusedIndex;
return (
<label
className={`block h-10 w-full cursor-pointer overflow-hidden border-b border-b-gray-900 pl-3 leading-10 ${
isFocused ? 'bg-black' : ''
}`}
htmlFor={this.props.id}
>
<input
type="radio"
id={this.props.id}
className="hidden"
value={this.props.value}
onChange={this.onSelected}
/>
<span className="font-labels">{this.props.label}</span>
</label>
);
}
onSelected = evt => {
this.props.onSelected(evt, this.props.itemData);
};
}

253
platform/ui/src/components/SelectTree/SelectTree.tsx Normal file
View File

@ -0,0 +1,253 @@
import React, { Component } from 'react';
import InputRadio from './InputRadio';
import SelectTreeBreadcrumb from './SelectTreeBreadcrumb';
import cloneDeep from 'lodash.clonedeep';
import Icon from '../Icon';
import Button, { ButtonEnums } from '../Button';
import { LabelInfo } from '../Labelling/LabellingFlow';
interface PropType {
autoFocus: boolean;
searchEnabled: boolean;
selectTreeFirstTitle: string;
items: Array<LabelInfo>;
onSelected: Function;
exclusive: boolean;
closePopup: Function;
label: string;
columns: number;
}
interface StateProps {
searchTerm: string | null;
currentNode: any;
value: string | null;
focusedIndex: number;
}
export class SelectTree extends Component<PropType> {
state: StateProps;
static defaultProps = {
searchEnabled: true,
autoFocus: true,
selectTreeFirstTitle: 'First Level itens',
items: [],
};
constructor(props) {
super(props);
this.state = {
searchTerm: this.props.items.length > 0 ? null : this.props.label,
currentNode: null,
value: null,
focuseIndex: 0,
};
}
render() {
const treeItems = this.getTreeItems();
return (
<div className="max-h-80 w-80 text-base leading-7">
<div className="bg-primary-dark relative flex max-h-80 w-full flex-col overflow-hidden rounded-lg border-0 text-white outline-none drop-shadow-lg focus:outline-none">
{this.headerItem()}
{this.props.items.length > 0 && (
<div className="ohif-scrollbar h-full overflow-auto">
{this.state.currentNode && (
<SelectTreeBreadcrumb
onSelected={this.onBreadcrumbSelected}
label={this.state.currentNode.label}
value={this.state.currentNode.value}
/>
)}
<div>
<div>{treeItems}</div>
</div>
</div>
)}
</div>
</div>
);
}
isLeafSelected = item => item && !Array.isArray(item.items);
filterItems() {
const filteredItems = [];
const rawItems = cloneDeep(this.props.items);
rawItems.forEach(item => {
if (Array.isArray(item.items)) {
item.items.forEach(item => {
const label = item.label.toLowerCase();
const searchTerm = this.state.searchTerm.toLowerCase();
if (label.indexOf(searchTerm) !== -1) {
filteredItems.push(item);
}
});
} else {
const label = item.label.toLowerCase();
const searchTerm = this.state.searchTerm.toLowerCase();
if (label.indexOf(searchTerm) !== -1) {
filteredItems.push(item);
}
}
});
return filteredItems;
}
getTreeItems() {
const storageKey = 'SelectTree';
let treeItems: Array<LabelInfo>;
if (this.state.searchTerm) {
const filterItems = this.filterItems();
if (
this.props.exclusive === false &&
filterItems.find(item => item.label === this.state.searchTerm) === undefined
) {
treeItems = [
{ label: this.state.searchTerm, value: this.state.searchTerm },
...filterItems,
];
} else {
treeItems = filterItems;
}
} else if (this.state.currentNode) {
treeItems = cloneDeep(this.state.currentNode.items);
} else {
treeItems = cloneDeep(this.props.items);
}
return treeItems.map((item, index) => {
const itemKey = index;
return (
<InputRadio
key={itemKey}
id={`${storageKey}_${item.value}`}
itemData={item}
value={item.value}
label={item.label}
onSelected={this.onSelected}
index={index}
selectTree={this}
/>
);
});
}
handleKeyDown = event => {
const { key } = event;
const { focusedIndex } = this.state;
const treeItems = this.getTreeItems();
if (key === 'ArrowUp') {
this.setState(prevState => ({
focusedIndex:
prevState.focusedIndex > 0 ? prevState.focusedIndex - 1 : treeItems.length - 1,
}));
} else if (key === 'ArrowDown') {
this.setState(prevState => ({
focusedIndex:
prevState.focusedIndex < treeItems.length - 1 ? prevState.focusedIndex + 1 : 0,
}));
} else if (key === 'Enter') {
const selectedItem = this.state.searchTerm
? { label: this.state.searchTerm, value: this.state.searchTerm }
: treeItems[focusedIndex].props.itemData;
this.onSelected(event, selectedItem);
}
};
onSubmitHandler = evt => {
this.props.onSelected(evt, {
label: this.state.searchTerm,
value: this.state.searchTerm,
});
};
headerItem = () => {
const inputLeftPadding = this.props.items.length > 0 ? 'pl-8' : 'pl-4';
const title = this.props.selectTreeFirstTitle;
return (
<div className="flex flex-col justify-between border-b-2 border-solid border-black p-4 ">
<div className="text-primary-active m-0 mb-5 p-2 leading-tight">
<span className="text-primary-light align-sub text-xl">{title}</span>
<div className="float-right">
<Icon
name="icon-close"
className="cursor-pointer"
onClick={() => this.props.closePopup()}
fill="#a3a3a3"
/>
</div>
</div>
{this.props.searchEnabled && (
<div className="flex w-full flex-col">
{this.props.items.length > 0 && (
<div className="absolute mt-2 mr-2.5 mb-3 ml-3 h-4 w-4">
<Icon
name="icon-search"
fill="#a3a3a3"
/>
</div>
)}
<input
data-cy="input-annotation"
type="text"
className={`border-primary-main border-primary-main appearance-none rounded border bg-black bg-black py-2 pr-3 text-sm leading-tight shadow transition duration-300 hover:border-gray-500 focus:border-gray-500 focus:outline-none focus:outline-none ${inputLeftPadding}`}
placeholder={this.props.items.length > 0 ? 'Search labels' : 'Enter label'}
autoFocus={this.props.autoFocus}
onChange={this.searchLocations}
value={this.state.searchTerm ? this.state.searchTerm : ''}
onKeyDown={this.handleKeyDown}
/>
</div>
)}
{this.props.items.length === 0 && (
<div className="flex justify-end py-3">
<Button
disabled={this.state.searchTerm === ''}
key={0}
name="save"
type={ButtonEnums.type.primary}
onClick={this.onSubmitHandler}
>
Save
</Button>
</div>
)}
</div>
);
};
searchLocations = evt => {
this.setState({
currentNode: null,
searchTerm: evt.currentTarget.value,
});
};
onSelected = (event, item) => {
if (this.isLeafSelected(item)) {
this.setState({
searchTerm: null,
currentNode: null,
value: null,
});
} else {
this.setState({
currentNode: item,
});
}
return this.props.onSelected(event, item);
};
onBreadcrumbSelected = () => {
this.setState({
currentNode: null,
});
};
}

36
platform/ui/src/components/SelectTree/SelectTreeBreadcrumb.tsx Normal file
View File

@ -0,0 +1,36 @@
import { Component } from 'react';
import React from 'react';
import Icon from '../Icon';
interface PropType {
value: string;
label: string;
onSelected: (event: any) => void;
}
export default class SelectTreeBreadcrumb extends Component<PropType> {
render() {
return (
<div>
<label
className="block h-10 w-full cursor-pointer pr-3 leading-10"
htmlFor="selectTreeBreadcrumb"
>
<input
type="radio"
id="selectTreeBreadcrumb"
className="bt block h-10 overflow-hidden p-3 leading-10 shadow-[0_0_0_200px_transparent]"
value={this.props.value}
onChange={this.props.onSelected}
/>
<span className="cursor-pointer whitespace-nowrap ">
<span className="pr-2.5">
<Icon name="fast-backward" />
</span>
{this.props.label}
</span>
</label>
</div>
);
}
}

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

@ -0,0 +1,2 @@
import { SelectTree } from './SelectTree';
export default SelectTree;

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

@ -80,6 +80,7 @@ import PanelSection from './PanelSection';
import AdvancedToolbox from './AdvancedToolbox';
import InputDoubleRange from './InputDoubleRange';
import LegacyButtonGroup from './LegacyButtonGroup';
import LabellingFlow from './Labelling';
import SwitchButton, { SwitchLabelLocation } from './SwitchButton';
import * as AllInOneMenu from './AllInOneMenu';
import ViewportActionArrows from './ViewportActionArrows';
@ -89,7 +90,6 @@ import { ToolSettings } from './AdvancedToolbox';
import { Toolbox } from './Toolbox';
import InvestigationalUseDialog from './InvestigationalUseDialog';
import MeasurementItem from './MeasurementTable/MeasurementItem';
import LayoutPreset from './LayoutPreset';
export {
@ -182,6 +182,7 @@ export {
ViewportPane,
ViewportOverlay,
WindowLevelMenuItem,
LabellingFlow,
HeaderPatientInfo,
LayoutPreset,
LegacySplitButton,

1
platform/ui/src/index.js
View File

@ -121,6 +121,7 @@ export {
WindowLevelMenuItem,
ImageScrollbar,
ViewportOverlay,
LabellingFlow,
HeaderPatientInfo,
ToolSettings,
Toolbox,