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

Fix/update branch cherry pick (#2039)

Browse Source 
* Update all the icons

* Turn off global tool sync; watch as the world burns

* Shift a bunch of things around so we can start tracking/setting per element

* ToolBarService to initiate one of three different calls; callback passed to all button types

* SplitButton and Toolbar Button to use new `onInteraction` prop and new toolbar state

* Changes to toolbar button interface and config

* Fix broken layout selector

* Update SR viewport to activate tools in viewport component

* Duplicate activation logic in measurement tracking extension

* Add alternative/dashed variants for SR Viewport

* pass through "setToolActive" commands for other viewport types

* fix small overlay bugs (no wwwc or scale info)

* Show SpacingBetweenSlices instead of PixelSpacing in patient information dialog

* Fix prop-types

* Update tracked viewport to have alternative tracked styling

* alt styling for SR viewports

* Update to support isLocked + isRehydratable

* fix broken logic

* fix broken logic

* switch icon style

* fix icon styles

* hover and click to start flow

* expedited workflow when data is not dirty (just after SR hydration)

* fix: setting elliptical roi tool

* fix arrow annotate dialog

* fix: do not show learn more button for now

* remove dead code

* simpler cache invalidation

* simpler cache invalidation part 2

* Fix for unable to spand study cards on separate pages
This commit is contained in:
Danny Brown 2020-09-14 21:18:46 -04:00 committed by GitHub
parent 365ba2fa72
commit cae54b0779
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
78 changed files with 1678 additions and 1263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
extensions/cornerstone/src/CornerstoneViewportDownloadForm.js
View File

@ -13,7 +13,9 @@ const DEFAULT_SIZE = 512;
const MAX_TEXTURE_SIZE = 10000;
const CornerstoneViewportDownloadForm = ({ onClose, activeViewportIndex }) => {
const activeEnabledElement = getEnabledElement(activeViewportIndex);
const { enabledElement: activeEnabledElement } = getEnabledElement(
activeViewportIndex
);
const enableViewport = viewportElement => {
if (viewportElement) {

13
extensions/cornerstone/src/OHIFCornerstoneViewport.js
View File

@ -1,8 +1,11 @@
import React, { Component } from 'react';
import CornerstoneViewport from 'react-cornerstone-viewport';
import OHIF from '@ohif/core';
import csTools from 'cornerstone-tools';
import PropTypes from 'prop-types';
import debounce from 'lodash.debounce';
import getTools from './utils/getTools.js';
import setActiveAndPassiveToolsForElement from './utils/setActiveAndPassiveToolsForElement';
import { setEnabledElement } from './state';
@ -23,6 +26,7 @@ class OHIFCornerstoneViewport extends Component {
dataSource: PropTypes.object,
children: PropTypes.node,
customProps: PropTypes.object,
ToolBarService: PropTypes.object,
};
static name = 'OHIFCornerstoneViewport';
@ -131,7 +135,7 @@ class OHIFCornerstoneViewport extends Component {
if (
displaySet.displaySetInstanceUID !==
prevDisplaySet.displaySetInstanceUID ||
prevDisplaySet.displaySetInstanceUID ||
displaySet.SOPInstanceUID !== prevDisplaySet.SOPInstanceUID ||
displaySet.imageIndex !== prevDisplaySet.imageIndex
) {
@ -203,7 +207,14 @@ class OHIFCornerstoneViewport extends Component {
// Need to expose viewportGrid as a "UI Service"
onElementEnabled={evt => {
const enabledElement = evt.detail.element;
const tools = getTools();
const toolAlias = ToolBarService.state.primaryToolId;
setEnabledElement(viewportIndex, enabledElement);
setActiveAndPassiveToolsForElement(enabledElement, tools);
csTools.setToolActiveForElement(enabledElement, toolAlias, {
mouseButtonMask: 1,
});
}}
// Sync resize throttle w/ sidepanel animation duration to prevent
// seizure inducing strobe blinking effect

82
extensions/cornerstone/src/callInputDialog.js Normal file
View File

@ -0,0 +1,82 @@
import React from 'react';
import { Input, Dialog } from '@ohif/ui';
/**
*
* @param {*} data
* @param {*} data.text
* @param {*} data.label
* @param {*} event
* @param {*} callback
* @param {*} isArrowAnnotateInputDialog
*/
function callInputDialog(
UIDialogService,
data,
callback,
isArrowAnnotateInputDialog = true
) {
const dialogId = 'enter-annotation';
const label = data
? isArrowAnnotateInputDialog
? data.text
: data.label
: '';
const onSubmitHandler = ({ action, value }) => {
switch (action.id) {
case 'save':
callback(value.label, action.id);
break;
case 'cancel':
callback('', action.id);
break;
}
UIDialogService.dismiss({ id: dialogId });
};
if (UIDialogService) {
UIDialogService.create({
id: dialogId,
centralize: true,
isDraggable: false,
showOverlay: true,
content: Dialog,
contentProps: {
title: 'Enter your annotation',
value: { label },
noCloseButton: true,
onClose: () => UIDialogService.dismiss({ id: dialogId }),
actions: [
{ id: 'cancel', text: 'Cancel', type: 'secondary' },
{ id: 'save', text: 'Save', type: 'primary' },
],
onSubmit: onSubmitHandler,
body: ({ value, setValue }) => {
return (
<div className="p-4 bg-primary-dark">
<Input
autoFocus
className="mt-2 bg-black border-primary-main"
type="text"
containerClassName="mr-2"
value={value.label}
onChange={event => {
event.persist();
setValue(value => ({ ...value, label: event.target.value }));
}}
onKeyPress={event => {
if (event.key === 'Enter') {
onSubmitHandler({ value, action: { id: 'save' } });
}
}}
/>
</div>
);
},
},
});
}
}
export default callInputDialog;

40
extensions/cornerstone/src/commandsModule.js
View File

@ -10,12 +10,13 @@ const scroll = cornerstoneTools.import('util/scroll');
const { studyMetadataManager } = OHIF.utils;
const { setViewportSpecificData } = OHIF.redux.actions;
const commandsModule = ({ servicesManager }) => {
const commandsModule = ({ servicesManager, commandsManager }) => {
const { ViewportGridService } = servicesManager.services;
function _getActiveViewportsEnabledElement() {
const { activeViewportIndex } = ViewportGridService.getState();
return getEnabledElement(activeViewportIndex);
const { element } = getEnabledElement(activeViewportIndex) || {};
return element;
}
const actions = {
@ -98,7 +99,38 @@ const commandsModule = ({ servicesManager }) => {
if (!toolName) {
console.warn('No toolname provided to setToolActive command');
}
cornerstoneTools.setToolActive(toolName, { mouseButtonMask: 1 });
// Find total number of tool indexes
const { viewports } = ViewportGridService.getState();
for (let i = 0; i < viewports.length; i++) {
const viewport = viewports[i];
const hasDisplaySet = viewport.displaySetInstanceUID !== undefined;
if (!hasDisplaySet) {
continue;
}
const viewportInfo = getEnabledElement(i);
const hasCornerstoneContext =
viewportInfo.context == 'ACTIVE_VIEWPORT::CORNERSTONE';
if (hasCornerstoneContext) {
cornerstoneTools.setToolActiveForElement(
viewportInfo.enabledElement,
toolName,
{ mouseButtonMask: 1 }
);
} else {
commandsManager.runCommand(
'setToolActive',
{
element: viewportInfo.element,
toolName,
},
viewportInfo.context
);
}
}
},
clearAnnotations: () => {
const element = _getActiveViewportsEnabledElement();
@ -106,7 +138,7 @@ const commandsModule = ({ servicesManager }) => {
return;
}
const enabledElement = cornerstone.getEnabledElement(element);
const { enabledElement } = cornerstone.getEnabledElement(element) || {};
if (!enabledElement || !enabledElement.image) {
return;
}

14
extensions/cornerstone/src/index.js
View File

@ -33,13 +33,19 @@ export default {
preRegistration({ servicesManager, commandsManager, configuration = {} }) {
init({ servicesManager, commandsManager, configuration });
},
getViewportModule({ commandsManager }) {
getViewportModule({ servicesManager, commandsManager }) {
const ExtendedOHIFCornerstoneViewport = props => {
const onNewImageHandler = jumpData => {
commandsManager.runCommand('jumpToImage', jumpData);
};
const { ToolBarService } = servicesManager;
return (
<OHIFCornerstoneViewport {...props} onNewImage={onNewImageHandler} />
<OHIFCornerstoneViewport
{...props}
ToolBarService={ToolBarService}
onNewImage={onNewImageHandler}
/>
);
};
@ -47,8 +53,8 @@ export default {
{ name: 'cornerstone', component: ExtendedOHIFCornerstoneViewport },
];
},
getCommandsModule({ servicesManager }) {
return commandsModule({ servicesManager });
getCommandsModule({ servicesManager, commandsManager }) {
return commandsModule({ servicesManager, commandsManager });
},
};

304
extensions/cornerstone/src/init.js
View File

@ -1,19 +1,19 @@
import React from 'react';
import OHIF from '@ohif/core';
import { Input, Dialog, ContextMenuMeasurements } from '@ohif/ui';
import { ContextMenuMeasurements } from '@ohif/ui';
import cs from 'cornerstone-core';
import csTools from 'cornerstone-tools';
import merge from 'lodash.merge';
import getTools, { toolsGroupedByType } from './utils/getTools.js';
import initCornerstoneTools from './initCornerstoneTools.js';
import './initWADOImageLoader.js';
import getCornerstoneMeasurementById from './utils/getCornerstoneMeasurementById';
import measurementServiceMappingsFactory from './utils/measurementServiceMappings/measurementServiceMappingsFactory';
import { setEnabledElement } from './state';
import callInputDialog from './callInputDialog.js';
// TODO -> Global "context menu open state", or lots of expensive searches on drag?
let CONTEXT_MENU_OPEN = false;
const { globalImageIdSpecificToolStateManager } = csTools;
const TOOL_TYPES_WITH_CONTEXT_MENU = [
@ -30,6 +30,24 @@ const TOOL_TYPES_WITH_CONTEXT_MENU = [
const _refreshViewports = () =>
cs.getEnabledElements().forEach(({ element }) => cs.updateImage(element));
/* Add extension tools configuration here. */
const _createInternalToolsConfig = UIDialogService => {
return {
ArrowAnnotate: {
configuration: {
getTextCallback: (callback, eventDetails) =>
callInputDialog(UIDialogService, null, callback),
changeTextCallback: (data, eventDetails, callback) =>
callInputDialog(UIDialogService, data, callback),
allowEmptyLabel: true,
},
},
DragProbe: {
defaultStrategy: 'minimal',
},
};
};
/**
*
* @param {Object} servicesManager
@ -45,7 +63,11 @@ export default function init({
UIDialogService,
MeasurementService,
DisplaySetService,
ToolBarService,
} = servicesManager.services;
const tools = getTools();
console.log(servicesManager.services);
/* Measurement Service */
const measurementServiceSource = _connectToolsToMeasurementService(
@ -112,6 +134,7 @@ export default function init({
);
callInputDialog(
UIDialogService,
measurement,
(label, actionId) => {
if (actionId === 'cancel') {
@ -180,8 +203,18 @@ export default function init({
}
};
function elementEnabledHandler(evt) {
// TODO: This is the handler for ALL ENABLED ELEMENT EVENTS
// ... Activation logic should take place per element, not for all (diff behavior per ext)
function elementEnabledHandler(tools, evt) {
const element = evt.detail.element;
_addConfiguredToolsForElement(
UIDialogService,
element,
tools,
configuration
);
element.addEventListener(csTools.EVENTS.TOUCH_PRESS, onTouchPress);
element.addEventListener(
csTools.EVENTS.MOUSE_CLICK,
@ -200,85 +233,6 @@ export default function init({
element.removeEventListener(cs.EVENTS.NEW_IMAGE, cancelContextMenuIfOpen);
}
/**
*
* @param {*} data
* @param {*} event
* @param {*} callback
* @param {*} isArrowAnnotateInputDialog
*/
const callInputDialog = (
data,
callback,
isArrowAnnotateInputDialog = true
) => {
const dialogId = 'enter-annotation';
const label = data
? isArrowAnnotateInputDialog
? data.text
: data.label
: '';
const onSubmitHandler = ({ action, value }) => {
switch (action.id) {
case 'save':
callback(value.label, action.id);
break;
case 'cancel':
callback('', action.id);
break;
}
UIDialogService.dismiss({ id: dialogId });
};
if (UIDialogService) {
UIDialogService.create({
id: dialogId,
centralize: true,
isDraggable: false,
showOverlay: true,
content: Dialog,
contentProps: {
title: 'Enter your annotation',
value: { label },
noCloseButton: true,
onClose: () => UIDialogService.dismiss({ id: dialogId }),
actions: [
{ id: 'cancel', text: 'Cancel', type: 'secondary' },
{ id: 'save', text: 'Save', type: 'primary' },
],
onSubmit: onSubmitHandler,
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 (
<div className="p-4 bg-primary-dark">
<Input
autoFocus
className="mt-2 bg-black border-primary-main"
type="text"
containerClassName="mr-2"
value={value.label}
onChange={onChangeHandler}
onKeyPress={onKeyPressHandler}
/>
</div>
);
},
},
});
}
};
const { csToolsConfig } = configuration;
const metadataProvider = OHIF.cornerstone.metadataProvider;
@ -286,7 +240,7 @@ export default function init({
// ~~
const defaultCsToolsConfig = csToolsConfig || {
globalToolSyncEnabled: true,
globalToolSyncEnabled: false, // hold on to your pants!
showSVGCursors: false,
autoResizeViewports: false,
};
@ -298,10 +252,10 @@ export default function init({
// THIS
// is a way for extensions that "depend" on this extension to notify it of
// new cornerstone enabled elements so it's commands continue to work.
const handleOhifCornerstoneEnabledElementEvent = function (evt) {
const { viewportIndex, enabledElement } = evt.detail;
const handleOhifCornerstoneEnabledElementEvent = function(evt) {
const { context, viewportIndex, enabledElement } = evt.detail;
setEnabledElement(viewportIndex, enabledElement);
setEnabledElement(viewportIndex, enabledElement, context);
};
document.addEventListener(
@ -309,120 +263,10 @@ export default function init({
handleOhifCornerstoneEnabledElementEvent
);
const toolsGroupedByType = {
touch: [csTools.PanMultiTouchTool, csTools.ZoomTouchPinchTool],
annotations: [
csTools.ArrowAnnotateTool,
csTools.BidirectionalTool,
csTools.LengthTool,
csTools.AngleTool,
csTools.FreehandRoiTool,
csTools.EllipticalRoiTool,
csTools.DragProbeTool,
csTools.RectangleRoiTool,
],
other: [
csTools.PanTool,
csTools.ZoomTool,
csTools.WwwcTool,
csTools.WwwcRegionTool,
csTools.MagnifyTool,
csTools.StackScrollTool,
csTools.StackScrollMouseWheelTool,
csTools.OverlayTool,
],
};
let tools = [];
Object.keys(toolsGroupedByType).forEach(toolsGroup =>
tools.push(...toolsGroupedByType[toolsGroup])
cs.events.addEventListener(
cs.EVENTS.ELEMENT_ENABLED,
elementEnabledHandler.bind(null, tools)
);
/* Add extension tools configuration here. */
const internalToolsConfig = {
ArrowAnnotate: {
configuration: {
getTextCallback: (callback, eventDetails) =>
callInputDialog(null, callback),
changeTextCallback: (data, eventDetails, callback) =>
callInputDialog(data, callback),
allowEmptyLabel: true,
},
},
DragProbe: {
defaultStrategy: 'minimal',
},
};
/* Abstract tools configuration using extension configuration. */
const parseToolProps = (props, tool) => {
const { annotations } = toolsGroupedByType;
// An alternative approach would be to remove the `drawHandlesOnHover` config
// from the supported configuration properties in `cornerstone-tools`
const toolsWithHideableHandles = annotations.filter(
tool => !['RectangleRoiTool', 'EllipticalRoiTool'].includes(tool.name)
);
let parsedProps = { ...props };
/**
* drawHandles - Never/Always show handles
* drawHandlesOnHover - Only show handles on handle hover (pointNearHandle)
* hideHandlesIfMoving - Hides the handles whilst you are moving them, for better visibility.
*
* Does not apply to tools where handles aren't placed in predictable
* locations.
*/
if (
configuration.hideHandles !== false &&
toolsWithHideableHandles.includes(tool)
) {
if (props.configuration) {
parsedProps.configuration.drawHandlesOnHover = true;
parsedProps.configuration.hideHandlesIfMoving = true;
} else {
parsedProps.configuration = {
drawHandlesOnHover: true,
hideHandlesIfMoving: true,
};
}
}
return parsedProps;
};
/* Add tools with its custom props through extension configuration. */
tools.forEach(tool => {
const toolName = new tool().name;
const externalToolsConfig = configuration.tools || {};
const externalToolProps = externalToolsConfig[toolName] || {};
const internalToolProps = internalToolsConfig[toolName] || {};
const props = merge(
internalToolProps,
parseToolProps(externalToolProps, tool)
);
csTools.addTool(tool, props);
});
// TODO -> We need a better way to do this with maybe global tool state setting all tools passive.
const BaseAnnotationTool = csTools.importInternal('base/BaseAnnotationTool');
tools.forEach(tool => {
if (tool.prototype instanceof BaseAnnotationTool) {
// BaseAnnotationTool would likely come from csTools lib exports
const toolName = new tool().name;
csTools.setToolPassive(toolName); // there may be a better place to determine name; may not be on uninstantiated class
}
});
csTools.setToolActive('Pan', { mouseButtonMask: 4 });
csTools.setToolActive('Zoom', { mouseButtonMask: 2 });
csTools.setToolActive('Wwwc', { mouseButtonMask: 1 });
csTools.setToolActive('StackScrollMouseWheel', {}); // TODO: Empty options should not be required
csTools.setToolActive('PanMultiTouch', { pointers: 2 }); // TODO: Better error if no options
csTools.setToolActive('ZoomTouchPinch', {});
csTools.setToolEnabled('Overlay', {});
cs.events.addEventListener(cs.EVENTS.ELEMENT_ENABLED, elementEnabledHandler);
cs.events.addEventListener(
cs.EVENTS.ELEMENT_DISABLED,
elementDisabledHandler
@ -646,3 +490,63 @@ const _getDefaultPosition = event => ({
x: (event && event.currentPoints.client.x) || 0,
y: (event && event.currentPoints.client.y) || 0,
});
/**
* @private
*/
function _addConfiguredToolsForElement(
UIDialogService,
element,
tools,
configuration
) {
const internalToolsConfig = _createInternalToolsConfig(UIDialogService);
/* Add tools with its custom props through extension configuration. */
tools.forEach(tool => {
const toolName = new tool().name;
const externalToolsConfig = configuration.tools || {};
const externalToolProps = externalToolsConfig[toolName] || {};
const internalToolProps = internalToolsConfig[toolName] || {};
const props = merge(
internalToolProps,
_parseToolProps(configuration, externalToolProps, tool)
);
csTools.addToolForElement(element, tool, props);
});
}
/* Abstract tools configuration using extension configuration. */
function _parseToolProps(configuration, props, tool) {
const { annotations } = toolsGroupedByType;
// An alternative approach would be to remove the `drawHandlesOnHover` config
// from the supported configuration properties in `cornerstone-tools`
const toolsWithHideableHandles = annotations.filter(
tool => !['RectangleRoiTool', 'EllipticalRoiTool'].includes(tool.name)
);
let parsedProps = { ...props };
/**
* drawHandles - Never/Always show handles
* drawHandlesOnHover - Only show handles on handle hover (pointNearHandle)
* hideHandlesIfMoving - Hides the handles whilst you are moving them, for better visibility.
*
* Does not apply to tools where handles aren't placed in predictable
* locations.
*/
if (
configuration.hideHandles !== false &&
toolsWithHideableHandles.includes(tool)
) {
if (props.configuration) {
parsedProps.configuration.drawHandlesOnHover = true;
parsedProps.configuration.hideHandlesIfMoving = true;
} else {
parsedProps.configuration = {
drawHandlesOnHover: true,
hideHandlesIfMoving: true,
};
}
}
return parsedProps;
}

18
extensions/cornerstone/src/state.js
View File

@ -1,4 +1,6 @@
const state = {
// The `defaultContext` of an extension's commandsModule
DEFAULT_CONTEXT: 'ACTIVE_VIEWPORT::CORNERSTONE',
enabledElements: {},
};
@ -7,14 +9,22 @@ const state = {
* @param {HTMLElement} dom Active viewport element.
* @return void
*/
const setEnabledElement = (viewportIndex, element) =>
(state.enabledElements[viewportIndex] = element);
const setEnabledElement = (viewportIndex, element, context) => {
const targetContext = context || DEFAULT_CONTEXT;
state.enabledElements[viewportIndex] = {
element,
context: targetContext,
};
};
/**
* Grabs the enabled element `dom` reference of an active viewport.
* Grabs the enabled element `dom` reference of an adective viewport.
*
* @return {HTMLElement} Active viewport element.
*/
const getEnabledElement = viewportIndex => state.enabledElements[viewportIndex];
const getEnabledElement = viewportIndex => {
return state.enabledElements[viewportIndex];
};
export { setEnabledElement, getEnabledElement };

36
extensions/cornerstone/src/utils/getTools.js Normal file
View File

@ -0,0 +1,36 @@
import csTools from 'cornerstone-tools';
const toolsGroupedByType = {
touch: [csTools.PanMultiTouchTool, csTools.ZoomTouchPinchTool],
annotations: [
csTools.ArrowAnnotateTool,
csTools.BidirectionalTool,
csTools.LengthTool,
csTools.AngleTool,
csTools.FreehandRoiTool,
csTools.EllipticalRoiTool,
csTools.DragProbeTool,
csTools.RectangleRoiTool,
],
other: [
csTools.PanTool,
csTools.ZoomTool,
csTools.WwwcTool,
csTools.WwwcRegionTool,
csTools.MagnifyTool,
csTools.StackScrollTool,
csTools.StackScrollMouseWheelTool,
csTools.OverlayTool,
],
};
export default function getTools() {
const tools = [];
Object.keys(toolsGroupedByType).forEach(toolsGroup =>
tools.push(...toolsGroupedByType[toolsGroup])
);
return tools;
}
export { toolsGroupedByType };

21
extensions/cornerstone/src/utils/setActiveAndPassiveToolsForElement.js Normal file
View File

@ -0,0 +1,21 @@
import csTools from 'cornerstone-tools';
export default function _setActiveAndPassiveToolsForElement(element, tools) {
const BaseAnnotationTool = csTools.importInternal('base/BaseAnnotationTool');
tools.forEach(tool => {
if (tool.prototype instanceof BaseAnnotationTool) {
// BaseAnnotationTool would likely come from csTools lib exports
const toolName = new tool().name;
csTools.setToolPassiveForElement(element, toolName); // there may be a better place to determine name; may not be on uninstantiated class
}
});
csTools.setToolActiveForElement(element, 'Pan', { mouseButtonMask: 4 });
csTools.setToolActiveForElement(element, 'Zoom', { mouseButtonMask: 2 });
csTools.setToolActiveForElement(element, 'Wwwc', { mouseButtonMask: 1 });
csTools.setToolActiveForElement(element, 'StackScrollMouseWheel', {}); // TODO: Empty options should not be required
csTools.setToolActiveForElement(element, 'PanMultiTouch', { pointers: 2 }); // TODO: Better error if no options
csTools.setToolActiveForElement(element, 'ZoomTouchPinch', {});
csTools.setToolEnabledForElement(element, 'Overlay', {});
}

5
extensions/default/src/Toolbar/ToolbarLayoutSelector.jsx
View File

@ -29,8 +29,7 @@ function LayoutSelector() {
};
}, []);
const onClickHandler = () => setIsOpen(!isOpen);
const onInteractionHandler = () => setIsOpen(!isOpen);
const DropdownContent = isOpen ? OHIFLayoutSelector : null;
return (
@ -38,7 +37,7 @@ function LayoutSelector() {
id="Layout"
label="Grid Layout"
icon="tool-layout"
onClick={onClickHandler}
onInteraction={onInteractionHandler}
dropdownContent={
DropdownContent !== null && (
<DropdownContent

3
extensions/default/src/Toolbar/ToolbarSplitButton.jsx Normal file
View File

@ -0,0 +1,3 @@
import { SplitButton } from '@ohif/ui';
export default SplitButton;

214
extensions/default/src/ViewerLayout/index.jsx
View File

@ -1,141 +1,69 @@
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import { SidePanel, ErrorBoundary, UserPreferences, AboutModal, Header, useModal } from '@ohif/ui';
import {
SidePanel,
ErrorBoundary,
UserPreferences,
AboutModal,
Header,
useModal,
} from '@ohif/ui';
import NestedMenu from './ToolbarButtonNestedMenu.jsx';
// TODO: Having ToolbarPrimary and ToolbarSecondary is ugly, but
// these are going to be unified shortly so this is good enough for now.
function ToolbarPrimary({ servicesManager }) {
function Toolbar({ servicesManager }) {
const { ToolBarService } = servicesManager.services;
const defaultTool = {
icon: 'tool-more-menu',
label: 'More',
isActive: false,
};
const [toolbars, setToolbars] = useState({ primary: [], secondary: [] });
const [activeTool, setActiveTool] = useState(defaultTool);
const setActiveToolHandler = (tool, isNested) => {
setActiveTool(isNested ? tool : defaultTool);
};
const onPrimaryClickHandler = (evt, btn) => {
if (
btn.props &&
btn.props.commands &&
evt.value &&
btn.props.commands[evt.value]
) {
const { commandName, commandOptions } = btn.props.commands[evt.value];
commandsManager.runCommand(commandName, commandOptions);
}
};
const [toolbarButtons, setToolbarButtons] = useState([]);
const [buttonState, setButtonState] = useState({
primaryToolId: '',
toggles: {},
groups: {},
});
// Could track buttons and state separately...?
useEffect(() => {
const { unsubscribe } = ToolBarService.subscribe(
const { unsubscribe: unsub1 } = ToolBarService.subscribe(
ToolBarService.EVENTS.TOOL_BAR_MODIFIED,
() => {
console.warn('~~~ TOOL BAR MODIFIED EVENT CAUGHT');
const updatedToolbars = {
primary: ToolBarService.getButtonSection('primary', {
onClick: onPrimaryClickHandler,
setActiveTool: setActiveToolHandler,
}),
secondary: ToolBarService.getButtonSection('secondary', {
setActiveTool: setActiveToolHandler,
}),
};
setToolbars(updatedToolbars);
}
() => setToolbarButtons(ToolBarService.getButtonSection('primary'))
);
const { unsubscribe: unsub2 } = ToolBarService.subscribe(
ToolBarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
() => setButtonState({ ...ToolBarService.state })
);
return unsubscribe;
return () => {
unsub1();
unsub2();
};
}, [ToolBarService]);
return <>
{toolbars.primary.map((toolDef, index) => {
const isNested = Array.isArray(toolDef);
if (!isNested) {
return (
<>
{toolbarButtons.map((toolDef, index) => {
const { id, Component, componentProps } = toolDef;
return <Component key={id} id={id} {...componentProps} />;
} else {
// TODO: ...
// isActive if:
// - id is primary?
// - id is in list of "toggled on"?
// Also need... to filter list for splitButton, and set primary based on most recently clicked
// Also need to kill the radioGroup button's magic logic
// Everything should be reactive off these props, so commands can inform ToolbarService
// These can... Trigger toolbar events based on updates?
// Then sync using useEffect, or simply modify the state here?
return (
<NestedMenu
key={index}
isActive={activeTool.isActive}
icon={activeTool.icon}
label={activeTool.label}
>
<div className="flex">
{toolDef.map(x => {
const { id, Component, componentProps } = x;
return (
<Component key={id} id={id} {...componentProps} />
);
})}
</div>
</NestedMenu>
<Component
key={id}
id={id}
{...componentProps}
bState={buttonState}
onInteraction={args => ToolBarService.recordInteraction(args)}
/>
);
}
})}
</>
}
function ToolbarSecondary({ servicesManager }) {
const { ToolBarService } = servicesManager.services;
const defaultTool = {
icon: 'tool-more-menu',
label: 'More',
isActive: false,
};
const [toolbars, setToolbars] = useState({ primary: [], secondary: [] });
const [nestedActiveTool, setNestedActiveTool] = useState(defaultTool);
const setActiveToolHandler = (tool, isNested) => {
setNestedActiveTool(isNested ? tool : defaultTool);
};
const onPrimaryClickHandler = (evt, btn) => {
if (
btn.props &&
btn.props.commands &&
evt.item && evt.item.value &&
btn.props.commands[evt.item.value]
) {
const { commandName, commandOptions } = btn.props.commands[evt.item.value];
commandsManager.runCommand(commandName, commandOptions);
}
};
useEffect(() => {
const { unsubscribe } = ToolBarService.subscribe(
ToolBarService.EVENTS.TOOL_BAR_MODIFIED,
() => {
console.warn('~~~ TOOL BAR MODIFIED EVENT CAUGHT');
const updatedToolbars = {
primary: ToolBarService.getButtonSection('primary', {
onClick: onPrimaryClickHandler,
setActiveTool: setActiveToolHandler,
}),
secondary: ToolBarService.getButtonSection('secondary', {
setActiveTool: setActiveToolHandler,
}),
};
setToolbars(updatedToolbars);
}
);
return unsubscribe;
}, [ToolBarService]);
return <>
{toolbars.secondary.map(toolDef => {
const { id, Component, componentProps } = toolDef;
return <Component key={id} id={id} {...componentProps} />;
})}
</>
})}
</>
);
}
function ViewerLayout({
@ -158,25 +86,28 @@ function ViewerLayout({
{
title: t('Header:About'),
icon: 'info',
onClick: () => show({ content: AboutModal, title: 'About OHIF Viewer' })
onClick: () => show({ content: AboutModal, title: 'About OHIF Viewer' }),
},
{
title: t('Header:Preferences'),
icon: 'settings',
onClick: () => show({
title: t('UserPreferencesModal:User Preferences'),
content: UserPreferences,
contentProps: {
hotkeyDefaults: hotkeysManager.getValidHotkeyDefinitions(hotkeyDefaults),
hotkeyDefinitions,
onCancel: hide,
onSubmit: ({ hotkeyDefinitions }) => {
hotkeysManager.setHotkeys(hotkeyDefinitions);
hide();
onClick: () =>
show({
title: t('UserPreferencesModal:User Preferences'),
content: UserPreferences,
contentProps: {
hotkeyDefaults: hotkeysManager.getValidHotkeyDefinitions(
hotkeyDefaults
),
hotkeyDefinitions,
onCancel: hide,
onSubmit: ({ hotkeyDefinitions }) => {
hotkeysManager.setHotkeys(hotkeyDefinitions);
hide();
},
onReset: () => hotkeysManager.restoreDefaultBindings(),
},
onReset: () => hotkeysManager.restoreDefaultBindings()
}
})
}),
},
];
@ -226,7 +157,7 @@ function ViewerLayout({
<Header menuOptions={menuOptions}>
<ErrorBoundary context="Primary Toolbar">
<div className="relative flex justify-center">
<ToolbarPrimary servicesManager={servicesManager} />
<Toolbar servicesManager={servicesManager} />
</div>
</ErrorBoundary>
</Header>
@ -246,13 +177,6 @@ function ViewerLayout({
)}
{/* TOOLBAR + GRID */}
<div className="flex flex-col flex-1 h-full">
<div className="flex h-12 border-b border-transparent flex-2 w-100">
<ErrorBoundary context="Secondary Toolbar">
<div className="flex items-center w-full px-3 bg-primary-dark">
<ToolbarSecondary servicesManager={servicesManager} />
</div>
</ErrorBoundary>
</div>
<div className="flex items-center justify-center flex-1 h-full pt-1 pb-2 overflow-hidden bg-black">
<ErrorBoundary context="Grid">
<ViewportGridComp

57
extensions/default/src/getToolbarModule.js
View File

@ -1,6 +1,7 @@
import { ToolbarButton } from '@ohif/ui';
import ToolbarDivider from './Toolbar/ToolbarDivider.jsx';
import ToolbarLayoutSelector from './Toolbar/ToolbarLayoutSelector.jsx';
import ToolbarSplitButton from './Toolbar/ToolbarSplitButton.jsx';
export default function getToolbarModule({ commandsManager, servicesManager }) {
const toolbarService = servicesManager.services.ToolBarService;
@ -9,65 +10,27 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
{
name: 'ohif.divider',
defaultComponent: ToolbarDivider,
clickHandler: () => { },
clickHandler: () => {},
},
{
name: 'ohif.action',
defaultComponent: ToolbarButton,
requiredConfig: [],
optionalConfig: [],
requiredProps: [],
optionalProps: [],
clickHandler: (evt, btn, btnSectionName) => {
const { props } = btn;
commandsManager.runCommand(props.commandName, props.commandOptions);
},
clickHandler: () => {},
},
{
name: 'ohif.radioGroup',
defaultComponent: ToolbarButton,
requiredConfig: ['groupName'],
optionalConfig: [],
requiredProps: [],
optionalProps: [],
clickHandler: (evt, clickedBtn, btnSectionName, metadata, viewerProps) => {
const { props } = clickedBtn;
const allButtons = toolbarService.getButtons();
// Set all buttons in same group to inactive
Object.keys(allButtons).forEach(btnName => {
const btn = allButtons[btnName];
const isRadioGroupBtn =
btn.config &&
btn.config.groupName &&
btn.type === 'ohif.radioGroup';
if (
isRadioGroupBtn &&
clickedBtn.config.groupName === btn.config.groupName
) {
btn.props.isActive = false;
if (viewerProps.setActiveTool) {
viewerProps.setActiveTool(props, metadata.isNested);
}
}
});
// Set our clicked button to active
allButtons[clickedBtn.id].props.isActive = true;
// Run button logic/command
commandsManager.runCommand(props.commandName, props.commandOptions);
// Set buttons & trigger notification
toolbarService.setButtons(allButtons);
},
clickHandler: () => {},
},
{
name: 'ohif.splitButton',
defaultComponent: ToolbarSplitButton,
clickHandler: () => {},
},
{
name: 'ohif.layoutSelector',
defaultComponent: ToolbarLayoutSelector,
clickHandler: (evt, clickedBtn, btnSectionName) => { },
clickHandler: (evt, clickedBtn, btnSectionName) => {},
},
{
name: 'ohif.toggle',

128
extensions/dicom-sr/src/OHIFCornerstoneSRViewport.js
View File

@ -4,6 +4,7 @@ import cornerstoneTools from 'cornerstone-tools';
import cornerstone from 'cornerstone-core';
import CornerstoneViewport from 'react-cornerstone-viewport';
import OHIF, { DicomMetadataStore, utils } from '@ohif/core';
import DICOMSRDisplayTool from './tools/DICOMSRDisplayTool';
import {
Notification,
ViewportActionBar,
@ -32,7 +33,11 @@ function OHIFCornerstoneSRViewport({
servicesManager,
extensionManager,
}) {
const { DisplaySetService, MeasurementService } = servicesManager.services;
const {
DisplaySetService,
MeasurementService,
ToolBarService,
} = servicesManager.services;
const [viewportGrid, viewportGridService] = useViewportGrid();
const [viewportDialogState, viewportDialogApi] = useViewportDialog();
const [measurementSelected, setMeasurementSelected] = useState(0);
@ -45,15 +50,19 @@ function OHIFCornerstoneSRViewport({
useEffect(() => {
const onDisplaySetsRemovedSubscription = DisplaySetService.subscribe(
DisplaySetService.EVENTS.DISPLAY_SETS_REMOVED, ({ displaySetInstanceUIDs }) => {
DisplaySetService.EVENTS.DISPLAY_SETS_REMOVED,
({ displaySetInstanceUIDs }) => {
const activeViewport = viewports[activeViewportIndex];
if (displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)) {
if (
displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)
) {
viewportGridService.setDisplaysetForViewport({
viewportIndex: activeViewportIndex,
displaySetInstanceUID: undefined,
});
}
});
}
);
return () => {
onDisplaySetsRemovedSubscription.unsubscribe();
@ -64,6 +73,8 @@ function OHIFCornerstoneSRViewport({
let trackedMeasurements;
let sendTrackedMeasurementsEvent;
// TODO: this is a hook that fails if we register/de-register
//
if (
extensionManager.registeredExtensionIds.includes(
MEASUREMENT_TRACKING_EXTENSION_ID
@ -81,25 +92,89 @@ function OHIFCornerstoneSRViewport({
] = useTrackedMeasurements();
}
// Locked if tracking any series
let isLocked = trackedMeasurements?.context?.trackedSeries?.length > 0;
useEffect(() => {
isLocked = trackedMeasurements?.context?.trackedSeries?.length > 0;
}, [trackedMeasurements]);
function _getToolAlias() {
const primaryToolId = ToolBarService.state.primaryToolId;
let toolAlias = primaryToolId;
switch (primaryToolId) {
case 'Length':
toolAlias = 'SRLength';
break;
case 'Bidirectional':
toolAlias = 'SRBidirectional';
break;
case 'ArrowAnnotate':
toolAlias = 'SRArrowAnnotate';
break;
case 'EllipticalRoi':
toolAlias = 'SREllipticalRoi';
break;
}
return toolAlias;
}
const onElementEnabled = evt => {
const eventData = evt.detail;
const targetElement = eventData.element;
const toolAlias = _getToolAlias(); // These are 1:1 for built-in only
// TODO -> This will only be temporary until we set a tool on, and isn't very customizable.
// Need to discuss how to deal with tools in general in the redesign, since we
// Previously just had Tool mode state global across the entire viewer.
const globalTools = cornerstoneTools.store.state.globalTools;
const globalToolNames = Object.keys(globalTools);
globalToolNames.forEach(globalToolName => {
cornerstoneTools.setToolDisabledForElement(targetElement, globalToolName);
});
// ~~ MAGIC
cornerstoneTools.addToolForElement(targetElement, DICOMSRDisplayTool);
cornerstoneTools.setToolEnabledForElement(
targetElement,
TOOL_NAMES.DICOM_SR_DISPLAY_TOOL
);
// ~~ Variants
cornerstoneTools.addToolForElement(
targetElement,
cornerstoneTools.LengthTool,
{
name: 'SRLength',
configuration: {
renderDashed: true,
},
}
);
cornerstoneTools.addToolForElement(
targetElement,
cornerstoneTools.ArrowAnnotateTool,
{
name: 'SRArrowAnnotate',
configuration: {
renderDashed: true,
},
}
);
cornerstoneTools.addToolForElement(
targetElement,
cornerstoneTools.BidirectionalTool,
{
name: 'SRBidirectional',
configuration: {
renderDashed: true,
},
}
);
cornerstoneTools.addToolForElement(
targetElement,
cornerstoneTools.EllipticalRoiTool,
{
name: 'SREllipticalRoi',
configuration: {
renderDashed: true,
},
}
);
// ~~ Business as usual
cornerstoneTools.setToolActiveForElement(targetElement, 'PanMultiTouch', {
pointers: 2,
});
@ -109,7 +184,9 @@ function OHIFCornerstoneSRViewport({
{}
);
cornerstoneTools.setToolActiveForElement(targetElement, 'Wwwc', {
// TODO: Add always dashed tool alternative aliases
// TODO: or same name... alternative config?
cornerstoneTools.setToolActiveForElement(targetElement, toolAlias, {
mouseButtonMask: 1,
});
cornerstoneTools.setToolActiveForElement(targetElement, 'Pan', {
@ -131,6 +208,7 @@ function OHIFCornerstoneSRViewport({
'ohif-cornerstone-enabled-element-event',
{
detail: {
context: 'ACTIVE_VIEWPORT::STRUCTURED_REPORT',
enabledElement: targetElement,
viewportIndex,
},
@ -262,7 +340,7 @@ function OHIFCornerstoneSRViewport({
StudyDate,
SeriesDescription,
SeriesInstanceUID,
PixelSpacing,
SpacingBetweenSlices,
SeriesNumber,
displaySetInstanceUID,
} = activeDisplaySetData;
@ -298,11 +376,19 @@ function OHIFCornerstoneSRViewport({
evt.stopPropagation();
evt.preventDefault();
}}
onPillClick={() => {
sendTrackedMeasurementsEvent('PROMPT_HYDRATE_SR', {
displaySetInstanceUID: displaySet.displaySetInstanceUID,
viewportIndex,
});
}}
onSeriesChange={onMeasurementChange}
studyData={{
label,
useAltStyling: true,
isTracked: false,
isLocked: displaySet.isLocked,
isLocked,
isRehydratable: displaySet.isRehydratable,
isHydrated,
studyDate: formatDate(StudyDate),
currentSeries: SeriesNumber,
@ -317,10 +403,8 @@ function OHIFCornerstoneSRViewport({
MRN: PatientID || '',
thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
spacing:
PixelSpacing && PixelSpacing.length
? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(
2
)}mm`
SpacingBetweenSlices !== undefined
? `${SpacingBetweenSlices.toFixed(2)}mm`
: '',
scanner: ManufacturerModelName || '',
},
@ -458,7 +542,7 @@ async function _getViewportAndActiveDisplaySetData(
SeriesInstanceUID: image0.SeriesInstanceUID,
SeriesNumber: image0.SeriesNumber,
ManufacturerModelName: image0.ManufacturerModelName,
PixelSpacing: image0.PixelSpacing,
SpacingBetweenSlices: image0.SpacingBetweenSlices,
displaySetInstanceUID,
};

4
extensions/dicom-sr/src/getSopClassHandlerModule.js
View File

@ -122,7 +122,9 @@ function _load(displaySet, servicesManager, extensionManager) {
);
displaySet.isHydrated = false;
displaySet.isLocked = isRehydratable(displaySet, mappings) ? false : true;
displaySet.isRehydratable = isRehydratable(displaySet, mappings)
? true
: false;
displaySet.isLoaded = true;
// Check currently added displaySets and add measurements if the sources exist.

46
extensions/dicom-sr/src/index.js
View File

@ -60,6 +60,52 @@ export default {
return [{ name: 'dicom-sr', component: ExtendedOHIFCornerstoneSRViewport }];
},
getCommandsModule({ servicesManager }) {
return {
definitions: {
setToolActive: {
commandFn: ({ toolName, element }) => {
if (!toolName) {
console.warn('No toolname provided to setToolActive command');
}
console.warn('DICOM SR VIEWPORT SETTOOLACTIVE');
// Set same tool or alt tool
const toolAlias = _getToolAlias(toolName);
cornerstoneTools.setToolActiveForElement(element, toolAlias, {
mouseButtonMask: 1,
});
},
storeContexts: [],
options: {},
},
},
defaultContext: 'ACTIVE_VIEWPORT::STRUCTURED_REPORT',
};
},
getSopClassHandlerModule,
onModeEnter,
};
function _getToolAlias(toolName) {
let toolAlias = toolName;
switch (toolName) {
case 'Length':
toolAlias = 'SRLength';
break;
case 'Bidirectional':
toolAlias = 'SRBidirectional';
break;
case 'ArrowAnnotate':
toolAlias = 'SRArrowAnnotate';
break;
case 'EllipticalRoi':
toolAlias = 'SREllipticalRoi';
break;
}
return toolAlias;
}

3
extensions/dicom-sr/src/init.js
View File

@ -1,5 +1,4 @@
import cornerstoneTools from 'cornerstone-tools';
import DICOMSRDisplayTool from './tools/DICOMSRDisplayTool';
import dicomSRModule from './tools/modules/dicomSRModule';
import id from './id';
@ -20,6 +19,4 @@ export default function init({ configuration = {} }) {
TOOL_NAMES.DICOM_SR_DISPLAY_TOOL = conifg.TOOL_NAMES.DICOM_SR_DISPLAY_TOOL;
cornerstoneTools.register('module', id, dicomSRModule);
cornerstoneTools.addTool(DICOMSRDisplayTool);
cornerstoneTools.setToolEnabled(TOOL_NAMES.DICOM_SR_DISPLAY_TOOL);
}

36
extensions/measurement-tracking/src/_shared/getTools.js Normal file
View File

@ -0,0 +1,36 @@
import csTools from 'cornerstone-tools';
const toolsGroupedByType = {
touch: [csTools.PanMultiTouchTool, csTools.ZoomTouchPinchTool],
annotations: [
csTools.ArrowAnnotateTool,
csTools.BidirectionalTool,
csTools.LengthTool,
csTools.AngleTool,
csTools.FreehandRoiTool,
csTools.EllipticalRoiTool,
csTools.DragProbeTool,
csTools.RectangleRoiTool,
],
other: [
csTools.PanTool,
csTools.ZoomTool,
csTools.WwwcTool,
csTools.WwwcRegionTool,
csTools.MagnifyTool,
csTools.StackScrollTool,
csTools.StackScrollMouseWheelTool,
csTools.OverlayTool,
],
};
export default function getTools() {
const tools = [];
Object.keys(toolsGroupedByType).forEach(toolsGroup =>
tools.push(...toolsGroupedByType[toolsGroup])
);
return tools;
}
export { toolsGroupedByType };

21
extensions/measurement-tracking/src/_shared/setActiveAndPassiveToolsForElement.js Normal file
View File

@ -0,0 +1,21 @@
import csTools from 'cornerstone-tools';
export default function _setActiveAndPassiveToolsForElement(element, tools) {
const BaseAnnotationTool = csTools.importInternal('base/BaseAnnotationTool');
tools.forEach(tool => {
if (tool.prototype instanceof BaseAnnotationTool) {
// BaseAnnotationTool would likely come from csTools lib exports
const toolName = new tool().name;
csTools.setToolPassiveForElement(element, toolName); // there may be a better place to determine name; may not be on uninstantiated class
}
});
csTools.setToolActiveForElement(element, 'Pan', { mouseButtonMask: 4 });
csTools.setToolActiveForElement(element, 'Zoom', { mouseButtonMask: 2 });
csTools.setToolActiveForElement(element, 'Wwwc', { mouseButtonMask: 1 });
csTools.setToolActiveForElement(element, 'StackScrollMouseWheel', {}); // TODO: Empty options should not be required
csTools.setToolActiveForElement(element, 'PanMultiTouch', { pointers: 2 }); // TODO: Better error if no options
csTools.setToolActiveForElement(element, 'ZoomTouchPinch', {});
csTools.setToolEnabledForElement(element, 'Overlay', {});
}

2
extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/TrackedMeasurementsContext.jsx
View File

@ -141,7 +141,7 @@ function TrackedMeasurementsContextProvider(
if (
displaySet.SOPClassHandlerId ===
'org.ohif.dicom-sr.sopClassHandlerModule.dicom-sr' &&
!displaySet.isLocked
displaySet.isRehydratable === true
) {
console.log('sending event...', trackedMeasurements);
sendTrackedMeasurementsEvent('PROMPT_HYDRATE_SR', {

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

@ -21,6 +21,8 @@ const machineConfiguration = {
prevTrackedStudy: '',
prevTrackedSeries: [],
prevIgnoredSeries: [],
//
isDirty: false,
},
states: {
off: {
@ -33,7 +35,7 @@ const machineConfiguration = {
SET_TRACKED_SERIES: [
{
target: 'tracking',
actions: ['setTrackedStudyAndMultipleSeries'],
actions: ['setTrackedStudyAndMultipleSeries', 'setIsDirtyToClean'],
},
],
PROMPT_HYDRATE_SR: 'promptHydrateStructuredReport',
@ -90,6 +92,16 @@ const machineConfiguration = {
},
],
SAVE_REPORT: 'promptSaveReport',
SET_DIRTY: [
{
target: 'tracking',
actions: ['setIsDirty'],
cond: 'shouldSetDirty',
},
{
target: 'tracking',
},
],
},
},
promptTrackNewSeries: {
@ -98,7 +110,7 @@ const machineConfiguration = {
onDone: [
{
target: 'tracking',
actions: ['addTrackedSeries'],
actions: ['addTrackedSeries', 'setIsDirty'],
cond: 'shouldAddSeries',
},
{
@ -106,6 +118,7 @@ const machineConfiguration = {
actions: [
'discardPreviouslyTrackedMeasurements',
'setTrackedStudyAndSeries',
'setIsDirty',
],
cond: 'shouldSetStudyAndSeries',
},
@ -131,6 +144,7 @@ const machineConfiguration = {
actions: [
'discardPreviouslyTrackedMeasurements',
'setTrackedStudyAndSeries',
'setIsDirty',
],
cond: 'shouldSetStudyAndSeries',
},
@ -197,6 +211,7 @@ const machineConfiguration = {
actions: [
'setTrackedStudyAndMultipleSeries',
'showSeriesInActiveViewport',
'setIsDirtyToClean',
],
cond: 'shouldHydrateStructuredReport',
},
@ -274,6 +289,15 @@ const defaultOptions = {
ignoredSeries: [],
};
}),
setIsDirtyToClean: assign((ctx, evt) => ({
isDirty: false,
})),
setIsDirty: assign((ctx, evt) => {
debugger;
return {
isDirty: true,
};
}),
ignoreSeries: assign((ctx, evt) => ({
prevIgnoredSeries: [...ctx.ignoredSeries],
ignoredSeries: [...ctx.ignoredSeries, evt.data.SeriesInstanceUID],
@ -292,6 +316,13 @@ const defaultOptions = {
})),
},
guards: {
shouldSetDirty: (ctx, evt) => {
debugger;
return (
evt.SeriesInstanceUID === undefined ||
ctx.trackedSeries.includes(evt.SeriesInstanceUID)
);
},
shouldKillMachine: (ctx, evt) =>
evt.data && evt.data.userResponse === RESPONSE.NO_NEVER,
shouldAddSeries: (ctx, evt) =>

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

@ -17,11 +17,13 @@ function promptUser({ servicesManager, extensionManager }, ctx, evt) {
viewportIndex
);
if (promptResult === RESPONSE.CREATE_REPORT) {
if (ctx.isDirty && promptResult === RESPONSE.CREATE_REPORT) {
promptResult = await _askSaveDiscardOrCancel(
UIViewportDialogService,
viewportIndex
);
} else {
promptResult = RESPONSE.SET_STUDY_AND_SERIES;
}
resolve({

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

@ -17,11 +17,13 @@ function promptUser({ servicesManager, extensionManager }, ctx, evt) {
viewportIndex
);
if (promptResult === RESPONSE.SET_STUDY_AND_SERIES) {
if (ctx.isDirty && promptResult === RESPONSE.SET_STUDY_AND_SERIES) {
promptResult = await _askSaveDiscardOrCancel(
UIViewportDialogService,
viewportIndex
);
} else {
promptResult = RESPONSE.SET_STUDY_AND_SERIES;
}
resolve({

21
extensions/measurement-tracking/src/index.js
View File

@ -10,4 +10,25 @@ export default {
getContextModule,
getPanelModule,
getViewportModule,
getCommandsModule({ servicesManager }) {
return {
definitions: {
setToolActive: {
commandFn: ({ toolName, element }) => {
if (!toolName) {
console.warn('No toolname provided to setToolActive command');
}
// Set same tool or alt tool
cornerstoneTools.setToolActiveForElement(element, toolName, {
mouseButtonMask: 1,
});
},
storeContexts: [],
options: {},
},
},
defaultContext: 'ACTIVE_VIEWPORT::TRACKED',
};
},
};

5
extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.js
View File

@ -361,8 +361,11 @@ function _getOneBasedImageIdIndex(displaySets, SOPInstanceUID) {
/**
*
* @param {*} points
* @param {*} measurement
* @param {*} pixelSpacing
* @param {*} seriesNumber
* @param {*} instanceNumber
* @param {*} types
*/
function _getDisplayText(
measurement,

45
extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx
View File

@ -1,7 +1,12 @@
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { utils } from '@ohif/core';
import { StudyBrowser, useImageViewer, useViewportGrid, Dialog } from '@ohif/ui';
import {
StudyBrowser,
useImageViewer,
useViewportGrid,
Dialog,
} from '@ohif/ui';
import { useTrackedMeasurements } from '../../getContextModule';
const { formatDate } = utils;
@ -63,6 +68,7 @@ function PanelStudyBrowserTracking({
referenceStudyUID: StudyInstanceUID,
} = measurement;
sendTrackedMeasurementsEvent('SET_DIRTY', { SeriesInstanceUID });
sendTrackedMeasurementsEvent('TRACK_SERIES', {
viewportIndex: activeViewportIndex,
StudyInstanceUID,
@ -238,10 +244,10 @@ function PanelStudyBrowserTracking({
);
const updatedExpandedStudyInstanceUIDs = shouldCollapseStudy
? [
...expandedStudyInstanceUIDs.filter(
stdyUid => stdyUid !== StudyInstanceUID
),
]
...expandedStudyInstanceUIDs.filter(
stdyUid => stdyUid !== StudyInstanceUID
),
]
: [...expandedStudyInstanceUIDs, StudyInstanceUID];
setExpandedStudyInstanceUIDs(updatedExpandedStudyInstanceUIDs);
@ -315,7 +321,7 @@ function PanelStudyBrowserTracking({
SeriesInstanceUID: displaySet.SeriesInstanceUID,
});
}}
onClickThumbnail={() => { }}
onClickThumbnail={() => {}}
onDoubleClickThumbnail={onDoubleClickThumbnailHandler}
activeDisplaySetInstanceUID={activeDisplaySetInstanceUID}
/>
@ -385,11 +391,11 @@ function _mapDisplaySets(
const viewportIdentificator = isSingleViewport
? []
: viewports.reduce((acc, viewportData, index) => {
if (viewportData.displaySetInstanceUID === ds.displaySetInstanceUID) {
acc.push(_viewportLabels[index]);
}
return acc;
}, []);
if (viewportData.displaySetInstanceUID === ds.displaySetInstanceUID) {
acc.push(_viewportLabels[index]);
}
return acc;
}, []);
const array =
componentType === 'thumbnailTracked'
@ -430,7 +436,7 @@ function _mapDisplaySets(
contentProps: {
title: 'Reject Report',
body: () => (
<div className="p-4 bg-primary-dark text-white">
<div className="p-4 text-white bg-primary-dark">
<p>This is a destructive action.</p>
<p>Are you sure you want to continue?</p>
</div>
@ -444,7 +450,10 @@ function _mapDisplaySets(
switch (action.id) {
case 'save':
try {
await dataSource.reject.series(ds.StudyInstanceUID, ds.SeriesInstanceUID);
await dataSource.reject.series(
ds.StudyInstanceUID,
ds.SeriesInstanceUID
);
DisplaySetService.deleteDisplaySet(displaySetInstanceUID);
UIDialogService.dismiss({ id: 'ds-reject-sr' });
UINotificationService.show({
@ -525,9 +534,11 @@ function _createStudyBrowserTabs(
const displaySetsForStudy = displaySets.filter(
ds => ds.StudyInstanceUID === study.studyInstanceUid
);
// Sort them
const sortedDisplaySetsForStudy = utils.sortBySeriesDate(displaySetsForStudy);
// Sort them
const sortedDisplaySetsForStudy = utils.sortBySeriesDate(
displaySetsForStudy
);
/* Sort by series number, then by series date
displaySetsForStudy.sort((a, b) => {
@ -541,7 +552,7 @@ function _createStudyBrowserTabs(
return seriesDateA - seriesDateB;
});
*/
// Map the study to it's tab/view representation
const tabStudy = Object.assign({}, study, {
displaySets: displaySetsForStudy,

40
extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js
View File

@ -16,6 +16,8 @@ import { useTrackedMeasurements } from './../getContextModule';
import ViewportOverlay from './ViewportOverlay';
import ViewportLoadingIndicator from './ViewportLoadingIndicator';
import setCornerstoneMeasurementActive from '../_shared/setCornerstoneMeasurementActive';
import setActiveAndPassiveToolsForElement from '../_shared/setActiveAndPassiveToolsForElement';
import getTools from '../_shared/getTools';
const scrollToIndex = cornerstoneTools.importInternal('util/scrollToIndex');
const { formatDate } = utils;
@ -44,7 +46,7 @@ function TrackedCornerstoneViewport({
displaySet,
viewportIndex,
servicesManager,
commandsManager
commandsManager,
}) {
const {
ToolBarService,
@ -52,7 +54,10 @@ function TrackedCornerstoneViewport({
MeasurementService,
} = servicesManager.services;
const [trackedMeasurements] = useTrackedMeasurements();
const [{ activeViewportIndex, viewports }, viewportGridService] = useViewportGrid();
const [
{ activeViewportIndex, viewports },
viewportGridService,
] = useViewportGrid();
const [{ isCineEnabled, cines }, cineService] = useCine();
const [viewportDialogState, viewportDialogApi] = useViewportDialog();
const [viewportData, setViewportData] = useState(null);
@ -126,9 +131,17 @@ function TrackedCornerstoneViewport({
const onElementEnabled = evt => {
const eventData = evt.detail;
const targetElement = eventData.element;
const tools = getTools();
const toolAlias = ToolBarService.state.primaryToolId;
// Activate appropriate tool bindings for element
setActiveAndPassiveToolsForElement(targetElement, tools);
cornerstoneTools.setToolActiveForElement(targetElement, toolAlias, {
mouseButtonMask: 1,
});
// Set dashed, based on tracking, for this viewport
const allTools = cornerstoneTools.store.state.tools;
const toolsForElement = allTools.filter(
tool => tool.element === targetElement
);
@ -154,6 +167,7 @@ function TrackedCornerstoneViewport({
}
});
// Update image after setting tool config
const enabledElement = cornerstone.getEnabledElement(targetElement);
if (enabledElement.image) {
@ -166,6 +180,7 @@ function TrackedCornerstoneViewport({
'ohif-cornerstone-enabled-element-event',
{
detail: {
context: 'ACTIVE_VIEWPORT::TRACKED',
enabledElement: targetElement,
viewportIndex,
},
@ -256,7 +271,7 @@ function TrackedCornerstoneViewport({
PatientSex,
PatientAge,
SliceThickness,
PixelSpacing,
SpacingBetweenSlices,
ManufacturerModelName,
} = displaySet.images[0];
@ -300,8 +315,8 @@ function TrackedCornerstoneViewport({
}
const cine = cines[viewportIndex];
const isPlaying = cine && cine.isPlaying || false;
const frameRate = cine && cine.frameRate || 24;
const isPlaying = (cine && cine.isPlaying) || false;
const frameRate = (cine && cine.frameRate) || 24;
return (
<>
@ -315,6 +330,7 @@ function TrackedCornerstoneViewport({
label,
isTracked,
isLocked: false,
isRehydratable: false,
studyDate: formatDate(SeriesDate), // TODO: This is series date. Is that ok?
currentSeries: SeriesNumber,
seriesDescription: SeriesDescription,
@ -328,10 +344,8 @@ function TrackedCornerstoneViewport({
MRN: PatientID || '',
thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
spacing:
PixelSpacing && PixelSpacing.length
? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(
2
)}mm`
SpacingBetweenSlices !== undefined
? `${SpacingBetweenSlices.toFixed(2)}mm`
: '',
scanner: ManufacturerModelName || '',
},
@ -341,8 +355,10 @@ function TrackedCornerstoneViewport({
cineProps={{
isPlaying,
onClose: () => commandsManager.runCommand('toggleCine'),
onPlayPauseChange: isPlaying => cineService.setCine({ id: activeViewportIndex, isPlaying }),
onFrameRateChange: frameRate => cineService.setCine({ id: activeViewportIndex, frameRate }),
onPlayPauseChange: isPlaying =>
cineService.setCine({ id: activeViewportIndex, isPlaying }),
onFrameRateChange: frameRate =>
cineService.setCine({ id: activeViewportIndex, frameRate }),
}}
/>
{/* TODO: Viewport interface to accept stack or layers of content like this? */}

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

@ -39,34 +39,14 @@ export default function mode({ modeConfiguration }) {
ToolBarService.init(extensionManager);
ToolBarService.addButtons(toolbarButtons);
ToolBarService.createButtonSection('primary', [
'MeasurementTools',
'Zoom',
'Wwwc',
'WindowLevel',
'Pan',
'Capture',
'Layout',
'Divider',
[
'ResetView',
'RotateClockwise',
'FlipHorizontally',
'StackScroll',
'Magnify',
'Invert',
'Cine',
'Angle',
'Probe',
'RectangleRoi',
],
'MoreTools',
]);
ToolBarService.createButtonSection('secondary', [
'Annotate',
'Bidirectional',
'Ellipse',
'Length',
'Clear',
]);
// Could import layout selector here from org.ohif.default (when it exists!)
},
layoutTemplate: ({ routeProps }) => {
return {

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

@ -1,93 +1,149 @@
// TODO: torn, can either bake this here; or have to create a whole new button type
// Only ways that you can pass in a custom React component for render :l
import { ExpandableToolbarButton, ListMenu, WindowLevelMenuItem } from '@ohif/ui';
import {
// ExpandableToolbarButton,
// ListMenu,
WindowLevelMenuItem,
} from '@ohif/ui';
import { defaults } from '@ohif/core';
const { windowLevelPresets } = defaults;
/**
*
* @param {*} type - 'tool' | 'action' | 'toggle'
* @param {*} id
* @param {*} icon
* @param {*} label
*/
function _createButton(type, id, icon, label, commandName, commandOptions) {
return {
id,
icon,
label,
type,
commandName,
commandOptions,
};
}
const _createActionButton = _createButton.bind(null, 'action');
const _createToggleButton = _createButton.bind(null, 'toggle');
const _createToolButton = _createButton.bind(null, 'tool');
/**
*
* @param {*} preset - preset number (from above import)
* @param {*} title
* @param {*} subtitle
*/
function _createWwwcPreset(preset, title, subtitle) {
return {
id: preset,
title,
subtitle,
type: 'action',
commandName: 'setWindowLevel',
commandOptions: windowLevelPresets[preset],
};
}
export default [
// Divider
// Measurement
{
id: 'Divider',
type: 'ohif.divider',
id: 'MeasurementTools',
type: 'ohif.splitButton',
props: {
groupId: 'MeasurementTools',
isRadio: true, // ?
// Switch?
primary: _createToolButton('Length', 'tool-length', 'Length', undefined, {
toolName: 'Length',
}),
secondary: {
icon: 'chevron-down',
label: '',
isActive: true,
tooltip: 'More Measure Tools',
},
items: [
_createToolButton('Length', 'tool-length', 'Length', undefined, {
toolName: 'Length',
}),
_createToolButton(
'Bidirectional',
'tool-bidirectional',
'Bidirectional',
undefined,
{ toolName: 'Bidirectional' }
),
_createToolButton(
'ArrowAnnotate',
'tool-annotate',
'Annotation',
undefined,
{ toolName: 'ArrowAnnotate' }
),
_createToolButton(
'EllipticalRoi',
'tool-elipse',
'Ellipse',
undefined,
{
toolName: 'EllipticalRoi',
}
),
],
},
},
// ~~ Primary
// Zoom..
{
id: 'Zoom',
type: 'ohif.radioGroup',
config: {
groupName: 'primaryTool',
},
props: {
isActive: false,
type: 'tool',
icon: 'tool-zoom',
label: 'Zoom',
commandName: 'setToolActive',
commandOptions: { toolName: 'Zoom' },
type: 'primary',
},
},
// Window Level + Presets...
{
id: 'Wwwc',
type: 'ohif.radioGroup',
config: {
groupName: 'primaryTool',
},
component: ExpandableToolbarButton,
id: 'WindowLevel',
type: 'ohif.splitButton',
props: {
isActive: true,
icon: 'tool-window-level',
commandName: 'setToolActive',
commandOptions: { toolName: 'Wwwc' },
commands: {
1: {
commandName: 'setWindowLevel',
commandOptions: windowLevelPresets[1],
},
2: {
commandName: 'setWindowLevel',
commandOptions: windowLevelPresets[2],
},
3: {
commandName: 'setWindowLevel',
commandOptions: windowLevelPresets[3],
},
4: {
commandName: 'setWindowLevel',
commandOptions: windowLevelPresets[4],
},
5: {
commandName: 'setWindowLevel',
commandOptions: windowLevelPresets[5],
}
primary: _createToolButton(
'Wwwc',
'tool-window-level',
'Window Level',
undefined,
{ toolName: 'Wwwc' }
),
secondary: {
icon: 'chevron-down',
label: '',
isActive: true,
tooltip: 'More Measure Tools',
},
type: 'primary',
content: ListMenu,
contentProps: {
items: [
{ value: 1, title: 'Soft tissue', subtitle: '400 / 40' },
{ value: 2, title: 'Lung', subtitle: '1500 / -600' },
{ value: 3, title: 'Liver', subtitle: '150 / 90' },
{ value: 4, title: 'Bone', subtitle: '80 / 40' },
{ value: 5, title: 'Brain', subtitle: '2500 / 480' },
],
renderer: WindowLevelMenuItem
}
isAction: true, // ?
renderer: WindowLevelMenuItem,
items: [
_createWwwcPreset(1, 'Soft tissue', '400 / 40'),
_createWwwcPreset(2, 'Lung', '1500 / -600'),
_createWwwcPreset(3, 'Liver', '150 / 90'),
_createWwwcPreset(4, 'Bone', '80 / 40'),
_createWwwcPreset(5, 'Brain', '2500 / 480'),
],
},
},
// Pan...
{
id: 'Pan',
type: 'ohif.radioGroup',
config: {
groupName: 'primaryTool',
},
props: {
isActive: false,
type: 'tool',
icon: 'tool-move',
label: 'Pan',
commandName: 'setToolActive',
commandOptions: { toolName: 'Pan' },
type: 'primary',
},
},
{
@ -96,219 +152,83 @@ export default [
props: {
icon: 'tool-capture',
label: 'Capture',
type: 'action',
commandName: 'showDownloadViewportModal',
type: 'primary',
},
},
{
id: 'Layout',
type: 'ohif.layoutSelector',
},
// ~~ Primary: NESTED
// More...
{
id: 'ResetView',
type: 'ohif.action',
id: 'MoreTools',
type: 'ohif.splitButton',
props: {
icon: 'old-reset',
label: 'Reset View',
commandName: 'resetViewport',
type: 'primary',
},
},
{
id: 'RotateClockwise',
type: 'ohif.action',
props: {
icon: 'old-rotate-right',
label: 'Rotate Right',
commandName: 'rotateViewportCW',
type: 'primary',
},
},
{
id: 'FlipHorizontally',
type: 'ohif.action',
props: {
icon: 'old-ellipse-h',
label: 'Flip Horizontally',
commandName: 'flipViewportHorizontal',
type: 'primary',
},
},
{
id: 'StackScroll',
type: 'ohif.radioGroup',
config: {
groupName: 'primaryTool',
},
props: {
isActive: false,
icon: 'old-bars',
label: 'Stack Scroll',
commandName: 'setToolActive',
commandOptions: { toolName: 'StackScroll' },
type: 'primary',
},
},
{
id: 'Magnify',
type: 'ohif.radioGroup',
config: {
groupName: 'primaryTool',
},
props: {
isActive: false,
icon: 'old-circle',
label: 'Magnify',
commandName: 'setToolActive',
commandOptions: { toolName: 'Magnify' },
type: 'primary',
},
},
{
id: 'Invert',
type: 'ohif.action',
props: {
icon: 'old-invert',
label: 'Invert',
commandName: 'invertViewport',
type: 'primary',
},
},
{
id: 'Cine',
type: 'ohif.toggle',
config: {
groupName: 'primaryTool',
},
props: {
isActive: false,
icon: 'old-youtube',
label: 'Cine',
commandName: 'toggleCine',
type: 'primary',
},
},
// TODO: 2D MPR: We had said this was off the table?
{
id: 'Angle',
type: 'ohif.radioGroup',
config: {
groupName: 'primaryTool',
},
props: {
isActive: false,
icon: 'old-angle-left',
label: 'Angle',
commandName: 'setToolActive',
commandOptions: { toolName: 'Angle' },
type: 'primary',
},
},
{
id: 'Probe',
type: 'ohif.radioGroup',
config: {
groupName: 'primaryTool',
},
props: {
isActive: false,
icon: 'old-dot-circle',
label: 'Probe',
commandName: 'setToolActive',
commandOptions: { toolName: 'DragProbe' },
type: 'primary',
},
},
{
id: 'RectangleRoi',
type: 'ohif.radioGroup',
config: {
groupName: 'primaryTool',
},
props: {
isActive: false,
icon: 'old-circle-o',
label: 'Rectangle',
commandName: 'setToolActive',
commandOptions: { toolName: 'RectangleRoi' },
type: 'primary',
},
},
// ~~ Secondary
{
id: 'Annotate',
type: 'ohif.radioGroup',
config: {
groupName: 'primaryTool',
},
props: {
isActive: false,
icon: 'tool-annotate',
label: 'Annotate',
commandName: 'setToolActive',
commandOptions: { toolName: 'ArrowAnnotate' },
type: 'secondary',
},
},
{
id: 'Bidirectional',
type: 'ohif.radioGroup',
config: {
groupName: 'primaryTool',
},
props: {
isActive: false,
icon: 'tool-bidirectional',
label: 'Bidirectional',
commandName: 'setToolActive',
commandOptions: { toolName: 'Bidirectional' },
type: 'secondary',
},
},
{
id: 'Ellipse',
type: 'ohif.radioGroup',
config: {
groupName: 'primaryTool',
},
props: {
isActive: false,
icon: 'tool-elipse',
label: 'Ellipse',
commandName: 'setToolActive',
commandOptions: { toolName: 'EllipticalRoi' },
type: 'secondary',
},
},
{
id: 'Length',
type: 'ohif.radioGroup',
config: {
groupName: 'primaryTool',
},
props: {
isActive: false,
icon: 'tool-length',
label: 'Length',
commandName: 'setToolActive',
commandOptions: { toolName: 'Length' },
type: 'secondary',
},
},
{
id: 'Clear',
type: 'ohif.action',
config: {
groupName: 'primaryTool',
},
props: {
isActive: false,
icon: 'old-trash',
label: 'Clear',
commandName: 'clearMeasurements',
commandOptions: {},
type: 'secondary',
isRadio: true, // ?
groupId: 'MoreTools',
primary: _createActionButton(
'reset',
'tool-reset',
'Reset View',
'resetViewport'
),
secondary: {
icon: 'chevron-down',
label: '',
isActive: true,
tooltip: 'More Measure Tools',
},
items: [
_createActionButton(
'reset',
'tool-reset',
'Reset View',
'resetViewport'
),
_createActionButton(
'rotate-right',
'tool-rotate-right',
'Rotate Right',
'rotateViewportCW'
),
_createActionButton(
'flip-horizontal',
'tool-flip-horizontal',
'Flip Horizontally',
'flipViewportHorizontal'
),
_createToolButton(
'StackScroll',
'tool-stack-scroll',
'Stack Scroll',
undefined,
{ toolName: 'StackScroll' }
),
_createToolButton('Magnify', 'tool-magnify', 'Magnify', undefined, {
toolName: 'Magnify',
}),
_createActionButton(
'invert',
'tool-invert',
'Invert',
'invertViewport'
),
_createToggleButton('cine', 'tool-cine', 'Cine', 'toggleCine'),
_createToolButton('Angle', 'tool-angle', 'Angle', undefined, {
toolName: 'Angle',
}),
_createToolButton('DragProbe', 'tool-probe', 'Probe', undefined, {
toolName: 'DragProbe',
}),
_createToolButton(
'Rectangle',
'tool-rectangle',
'Rectangle',
undefined,
{ toolName: 'RectangleRoi' }
),
],
},
},
];

20
modes/segmentation/src/toolbarButtons.js
View File

@ -72,7 +72,7 @@ export default [
id: 'ResetView',
type: 'ohif.action',
props: {
icon: 'old-reset',
icon: 'tool-reset',
label: 'Reset View',
commandName: 'resetViewport',
type: 'primary',
@ -82,7 +82,7 @@ export default [
id: 'RotateClockwise',
type: 'ohif.action',
props: {
icon: 'old-rotate-right',
icon: 'tool-rotate-right',
label: 'Rotate Right',
commandName: 'rotateViewportCW',
type: 'primary',
@ -92,7 +92,7 @@ export default [
id: 'FlipHorizontally',
type: 'ohif.action',
props: {
icon: 'old-ellipse-h',
icon: 'tool-flip-horizontal',
label: 'Flip Horizontally',
commandName: 'flipViewportHorizontal',
type: 'primary',
@ -106,7 +106,7 @@ export default [
},
props: {
isActive: false,
icon: 'old-bars',
icon: 'tool-stack-scroll',
label: 'Stack Scroll',
commandName: 'setToolActive',
commandOptions: { toolName: 'StackScroll' },
@ -121,7 +121,7 @@ export default [
},
props: {
isActive: false,
icon: 'old-circle',
icon: 'tool-magnify',
label: 'Magnify',
commandName: 'setToolActive',
commandOptions: { toolName: 'Magnify' },
@ -132,7 +132,7 @@ export default [
id: 'Invert',
type: 'ohif.action',
props: {
icon: 'old-invert',
icon: 'tool-invert',
label: 'Invert',
commandName: 'invertViewport',
type: 'primary',
@ -143,7 +143,7 @@ export default [
id: 'Cine',
type: 'ohif.action',
props: {
icon: 'old-youtube',
icon: 'tool-cine',
label: 'Cine',
commandName: '',
type: 'primary',
@ -158,7 +158,7 @@ export default [
},
props: {
isActive: false,
icon: 'old-angle-left',
icon: 'tool-angle',
label: 'Angle',
commandName: 'setToolActive',
commandOptions: { toolName: 'Angle' },
@ -173,7 +173,7 @@ export default [
},
props: {
isActive: false,
icon: 'old-dot-circle',
icon: 'tool-probe',
label: 'Probe',
commandName: 'setToolActive',
commandOptions: { toolName: 'Probe' },
@ -188,7 +188,7 @@ export default [
},
props: {
isActive: false,
icon: 'old-circle-o',
icon: 'tool-rectangle',
label: 'Rectangle',
commandName: 'setToolActive',
commandOptions: { toolName: 'RectangleRoi' },

16
platform/core/src/classes/CommandsManager.js
View File

@ -5,7 +5,6 @@ import log from '../log.js';
*
* @typedef {Object} CommandDefinition
* @property {Function} commandFn - Command to call
* @property {Array} storeContexts - Array of string of modules required from store
* @property {Object} options - Object of params to pass action
*/
@ -161,19 +160,10 @@ export class CommandsManager {
return;
}
const { commandFn, storeContexts = [] } = definition;
const definitionOptions = definition.options;
let commandParams = {};
const appState = this._getAppState();
storeContexts.forEach(context => {
commandParams[context] = appState[context];
});
commandParams = Object.assign(
const { commandFn } = definition;
const commandParams = Object.assign(
{},
commandParams, // Required store contexts
definitionOptions, // "Command configuration"
definition.options, // "Command configuration"
options // "Time of call" info
);

4
platform/core/src/services/ServicesManager.js
View File

@ -1,7 +1,8 @@
import log from './../log.js';
export default class ServicesManager {
constructor() {
constructor(commandsManager) {
this._commandsManager = commandsManager;
this.services = {};
this.registeredServiceNames = [];
}
@ -35,6 +36,7 @@ export default class ServicesManager {
if (service.create) {
this.services[service.name] = service.create({
configuration,
commandsManager: this._commandsManager,
});
} else {
log.warn(`Service create factory function not defined. Exiting early.`);

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

@ -3,10 +3,13 @@ import pubSubServiceInterface from '../_shared/pubSubServiceInterface';
const EVENTS = {
TOOL_BAR_MODIFIED: 'event::toolBarService:toolBarModified',
TOOL_BAR_STATE_MODIFIED: 'event::toolBarService:toolBarStateModified',
};
export default class ToolBarService {
constructor() {
constructor(commandsManager) {
this._commandsManager = commandsManager;
//
this.EVENTS = EVENTS;
this.listeners = {};
this.buttons = {};
@ -17,6 +20,18 @@ export default class ToolBarService {
*/
};
// TODO: Do we need to track per context? Or do we allow for a mixed
// definition that adapts based on context?
this.state = {
primaryToolId: 'Wwwc',
toggles: {
/* id: true/false */
},
groups: {
/* track most recent click per group...? */
},
};
Object.assign(this, pubSubServiceInterface);
}
@ -24,17 +39,59 @@ export default class ToolBarService {
this.extensionManager = extensionManager;
}
/**
*
* @param {*} interaction
*/
recordInteraction(interaction) {
const commandsManager = this._commandsManager;
const { groupId, itemId, interactionType } = interaction;
switch (interactionType) {
case 'action': {
break;
}
case 'tool': {
this.state.primaryToolId = itemId;
// TODO: Force run this for all contexts? Even inactive?
// or... They'll just detect primaryToolId when they spin up and apply...
commandsManager.runCommand('setToolActive', interaction.commandOptions);
break;
}
case 'toggle': {
this.state.toggles[itemId] =
this.state.toggles[itemId] === undefined
? true
: !this.state.toggles[itemId];
break;
}
}
// Run command if there's one associated
//
// NOTE: Should probably just do this for tools as well?
// But would be nice if we could enforce at least the command name?
if (interaction.commandName) {
commandsManager.runCommand(
interaction.commandName,
interaction.commandOptions
);
}
// Track last touched id for each group
if (groupId) {
this.state.groups[groupId] = itemId;
}
this._broadcastChange(this.EVENTS.TOOL_BAR_STATE_MODIFIED, {});
}
getButtons() {
return this.buttons;
}
getActiveTools() {
return Object.keys(this.buttons).filter(key => {
const button = this.buttons[key];
if (button && button.props && button.props.isActive) {
return button;
}
});
return [this.state.primaryToolId, ...Object.keys(this.state.toggles)];
}
setButton(id, button) {
@ -43,7 +100,7 @@ export default class ToolBarService {
this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {
buttons: this.buttons,
button: this.buttons[id],
buttonSections: this.buttonSections
buttonSections: this.buttonSections,
});
}
}
@ -52,7 +109,7 @@ export default class ToolBarService {
this.buttons = buttons;
this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {
buttons: this.buttons,
buttonSections: this.buttonSections
buttonSections: this.buttonSections,
});
}
@ -84,41 +141,27 @@ export default class ToolBarService {
this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {});
}
/**
*
* Finds a button section by it's name, then maps the list of string name
* identifiers to schema/values that can be used to render the buttons.
*
* @param {string} key
* @param {*} props
*/
getButtonSection(key, props) {
const buttonSectionIds = this.buttonSections[key];
const buttonsInSection = [];
if (!buttonSectionIds) {
return buttonsInSection;
}
buttonSectionIds.forEach(btnIdOrArray => {
const isNested = Array.isArray(btnIdOrArray);
if (isNested) {
const btnIds = btnIdOrArray;
const nestedButtons = [];
btnIds.forEach(nestedBtnId => {
const nestedBtn = this.buttons[nestedBtnId];
const metadata = { isNested: true };
const mappedNestedBtn = this._mapButtonToDisplay(nestedBtn, key, metadata, props);
nestedButtons.push(mappedNestedBtn);
});
if (nestedButtons.length) {
buttonsInSection.push(nestedButtons);
}
} else {
const btnId = btnIdOrArray;
if (buttonSectionIds && buttonSectionIds.length !== 0) {
buttonSectionIds.forEach(btnId => {
const btn = this.buttons[btnId];
const metadata = { isNested: false };
const metadata = {};
const mappedBtn = this._mapButtonToDisplay(btn, key, metadata, props);
buttonsInSection.push(mappedBtn);
}
});
});
}
return buttonsInSection;
}
@ -159,6 +202,8 @@ export default class ToolBarService {
*
* @param {*} btn
* @param {*} btnSection
* @param {*} metadata
* @param {*} props - Props set by the Viewer layer
*/
_mapButtonToDisplay(btn, btnSection, metadata, props) {
const { id, type, component } = btn;
@ -168,25 +213,10 @@ export default class ToolBarService {
return;
}
const onClick = evt => {
if (buttonType.clickHandler) {
buttonType.clickHandler(evt, btn, btnSection, metadata, props);
}
if (btn.props.onClick) {
btn.onClick(evt, btn, btnSection);
}
if (btn.props.clickHandler) {
btn.clickHandler(evt, btn, btnSection);
}
if (props && props.onClick) {
props.onClick(evt, btn, btnSection, props);
}
};
return {
id,
Component: component || buttonType.defaultComponent,
componentProps: Object.assign({}, btn.props, { onClick }), //
componentProps: Object.assign({}, btn.props, props),
};
}
}

4
platform/core/src/services/ToolBarService/index.js
View File

@ -2,7 +2,7 @@ import ToolBarService from './ToolBarService';
export default {
name: 'ToolBarService',
create: ({ configuration = {} }) => {
return new ToolBarService();
create: ({ configuration = {}, commandsManager }) => {
return new ToolBarService(commandsManager);
},
};

6
platform/ui/src/assets/icons/arrow-left.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g fill-rule="evenodd">
<path fill="currentcolor" fill-rule="nonzero" d="M17.207 10.793c.36.36.388.928.083 1.32l-.083.094-5 5c-.39.39-1.024.39-1.414 0-.36-.36-.388-.928-.083-1.32l.083-.094 4.292-4.293-4.292-4.293c-.36-.36-.388-.928-.083-1.32l.083-.094c.36-.36.928-.388 1.32-.083l.094.083 5 5z"/>
<path fill="currentcolor" fill-rule="nonzero" d="M17.5 11.5c0 .513-.386.936-.883.993l-.117.007H6c-.552 0-1-.448-1-1 0-.513.386-.936.883-.993L6 10.5h10.5c.552 0 1 .448 1 1z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 568 B

9
platform/ui/src/assets/icons/exclamation.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g stroke="currentColor">
<path stroke-width="1.5" d="M0.5 3L0.5 0" transform="translate(0 1) translate(6 3)"/>
<path d="M0.5 4.5L0.5 4.5" transform="translate(0 1) translate(6 3)"/>
<path stroke-width="1.5" d="M.489 5.25c-.065.002-.127.03-.172.078-.044.048-.068.112-.065.177.005.135.115.243.25.245h.009c.065-.002.127-.03.171-.078.045-.048.068-.112.066-.177-.004-.134-.112-.241-.246-.245" transform="translate(0 1) translate(6 3)"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 677 B

9
platform/ui/src/assets/icons/old-angle-left.svg
View File

@ -1,9 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 512"
aria-labelledby="title"
fill="currentColor"
>
<title id="title">Angle Left</title>
<path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 365 B

9
platform/ui/src/assets/icons/old-bars.svg
View File

@ -1,9 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1792 1792"
aria-labelledby="title"
fill="currentColor"
>
<title id="title">Bars</title>
<path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 472 B

9
platform/ui/src/assets/icons/old-circle-o.svg
View File

@ -1,9 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
aria-labelledby="title"
fill="currentColor"
>
<title id="title">Square Outline</title>
<path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 374 B

9
platform/ui/src/assets/icons/old-circle.svg
View File

@ -1,9 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
aria-labelledby="title"
fill="currentColor"
>
<title id="title">Circle</title>
<path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 243 B

9
platform/ui/src/assets/icons/old-dot-circle.svg
View File

@ -1,9 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
aria-labelledby="title"
fill="currentColor"
>
<title id="title">Dot Circle</title>
<path d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 469 B

9
platform/ui/src/assets/icons/old-ellipse-h.svg
View File

@ -1,9 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 22 28"
aria-labelledby="title"
fill="currentColor"
>
<title id="title">Ellipse Horizontal</title>
<path d="M6 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5zM14 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5zM22 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5z" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 555 B

9
platform/ui/src/assets/icons/old-invert.svg
View File

@ -1,9 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 28"
aria-labelledby="title"
fill="currentColor"
>
<title id="title">Adjust</title>
<path d="M12 22.5v-17c-4.688 0-8.5 3.813-8.5 8.5s3.813 8.5 8.5 8.5zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 306 B

9
platform/ui/src/assets/icons/old-reset.svg
View File

@ -1,9 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 28"
aria-labelledby="title"
fill="currentColor"
>
<title id="title">Reset</title>
<path d="M24 14c0 6.609-5.391 12-12 12-3.578 0-6.953-1.578-9.234-4.328-0.156-0.203-0.141-0.5 0.031-0.672l2.141-2.156c0.109-0.094 0.25-0.141 0.391-0.141 0.141 0.016 0.281 0.078 0.359 0.187 1.531 1.984 3.828 3.109 6.312 3.109 4.406 0 8-3.594 8-8s-3.594-8-8-8c-2.047 0-3.984 0.781-5.437 2.141l2.141 2.156c0.297 0.281 0.375 0.719 0.219 1.078-0.156 0.375-0.516 0.625-0.922 0.625h-7c-0.547 0-1-0.453-1-1v-7c0-0.406 0.25-0.766 0.625-0.922 0.359-0.156 0.797-0.078 1.078 0.219l2.031 2.016c2.203-2.078 5.187-3.313 8.266-3.313 6.609 0 12 5.391 12 12z" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 701 B

9
platform/ui/src/assets/icons/old-rotate-right.svg
View File

@ -1,9 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
aria-labelledby="title"
fill="currentColor"
>
<title id="title">Rotate Right</title>
<path d="M16.875 15.469c0.563-0.75 0.891-1.594 1.031-2.484h2.016c-0.188 1.406-0.703 2.719-1.594 3.891zM12.984 17.906c0.891-0.141 1.734-0.469 2.484-1.031l1.453 1.453c-1.172 0.891-2.531 1.406-3.938 1.594v-2.016zM19.922 11.016h-2.016c-0.141-0.891-0.469-1.734-1.031-2.484l1.453-1.406c0.891 1.172 1.406 2.484 1.594 3.891zM15.563 5.531l-4.547 4.453v-3.891c-2.859 0.469-5.016 2.953-5.016 5.906s2.156 5.438 5.016 5.906v2.016c-3.938-0.469-7.031-3.844-7.031-7.922s3.094-7.453 7.031-7.922v-3.094z" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 654 B

9
platform/ui/src/assets/icons/old-youtube.svg
View File

@ -1,9 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 28 28"
aria-labelledby="title"
fill="currentColor"
>
<title id="title">YouTube Logo</title>
<path d="M11.109 17.625l7.562-3.906-7.562-3.953v7.859zM14 4.156c5.891 0 9.797 0.281 9.797 0.281 0.547 0.063 1.75 0.063 2.812 1.188 0 0 0.859 0.844 1.109 2.781 0.297 2.266 0.281 4.531 0.281 4.531v2.125s0.016 2.266-0.281 4.531c-0.25 1.922-1.109 2.781-1.109 2.781-1.062 1.109-2.266 1.109-2.812 1.172 0 0-3.906 0.297-9.797 0.297v0c-7.281-0.063-9.516-0.281-9.516-0.281-0.625-0.109-2.031-0.078-3.094-1.188 0 0-0.859-0.859-1.109-2.781-0.297-2.266-0.281-4.531-0.281-4.531v-2.125s-0.016-2.266 0.281-4.531c0.25-1.937 1.109-2.781 1.109-2.781 1.062-1.125 2.266-1.125 2.812-1.188 0 0 3.906-0.281 9.797-0.281v0z" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 766 B

7
platform/ui/src/assets/icons/tool-angle.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 17">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-width="1.5">
<path d="M2.5 14.5L20.688 14.438" transform="translate(1 1)"/>
<path d="M1 13.378L13.065 1.313" transform="translate(1 1) rotate(-10 7.033 7.345)"/>
<path stroke-dasharray="1 2.7" d="M16.194 11.65c.903-3.897-.636-6.269-4.62-7.115" transform="translate(1 1)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 465 B

4
platform/ui/src/assets/icons/tool-annotate.svg
View File

@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
<path d="M8.593 20.252L0 20.252 0 11.659M0 20.252L19.642.61" transform="translate(1 1)"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 301 B

After

Width:  |  Height:  |  Size: 303 B

15
platform/ui/src/assets/icons/tool-bidirectional.svg
View File

@ -1,12 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
<g fill="none" fill-rule="evenodd" stroke="currentColor" transform="translate(1 1)">
<g stroke-linecap="square" stroke-linejoin="round" stroke-width="2">
<path d="M0.067 14.79L14 1" transform="translate(5 4)"/>
<path d="M2.16 3.908L11.899 12.138" transform="translate(5 4) rotate(4.465 7.03 8.023)"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27">
<g fill="none" fill-rule="evenodd" stroke="currentColor">
<g stroke-linecap="round" stroke-linejoin="round">
<path stroke-width="1.5" d="M19.729-.336c.448 0 .895.171 1.237.513h0l1.819 1.817c.314.314.483.717.51 1.127.027.433-.106.873-.398 1.226h0l-18.8 18.81c-.37.37-.854.554-1.338.554-.485 0-.97-.185-1.339-.554h0L-.196 21.54c-.37-.37-.554-.854-.554-1.339 0-.484.185-.968.554-1.338h0L18.492.177c.341-.342.79-.513 1.237-.513z" transform="translate(2 2)"/>
<path d="M4.145 18.914L5.716 20.477M6.569 16.49L8.143 18.05M8.993 14.066L10.565 15.627M11.417 11.642L12.992 13.201M13.841 9.217L15.407 10.787M16.135 6.923L17.7 8.494M18.559 4.499L20.125 6.069" transform="translate(2 2)"/>
</g>
<rect width="5" height="5" x="3" y="3" stroke-width="1.5" rx="2.5"/>
<rect width="5" height="5" x="16" y="16" stroke-width="1.5" rx="2.5"/>
<rect width="5" height="5" x="19" stroke-width="1.5" rx="2.5"/>
<rect width="5" height="5" y="19" stroke-width="1.5" rx="2.5"/>
<path stroke-width="1.5" d="M9.873 5.904L6.089 2.121c-.39-.39-1.024-.39-1.414 0L2.907 3.889c-.39.39-.39 1.023 0 1.414l3.784 3.783h0M14 16.382l3.783 3.783c.391.39 1.024.39 1.415 0l1.767-1.767c.39-.39.39-1.024 0-1.415L17.182 13.2h0" transform="translate(2 2)"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 727 B

After

Width:  |  Height:  |  Size: 1.0 KiB

2
platform/ui/src/assets/icons/tool-capture.svg
View File

@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 18">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(1 1.139)">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(1 1)">
<path d="M5.983 2.556c.406-.022.795-.173 1.109-.432L8.944.432c.314-.26.703-.41 1.11-.432h2.903c.403.023.788.175 1.099.432l1.852 1.692c.314.259.703.41 1.11.432h3.426c1.099.112 1.93 1.045 1.917 2.149v8.712c0 1.058-.858 1.916-1.917 1.916H2.556c-1.059 0-1.917-.858-1.917-1.916V4.705c-.013-1.104.818-2.037 1.917-2.15h3.427z"/>
<circle cx="11.5" cy="7.986" r="3.514"/>
<path d="M19.167 5.43c.176 0 .32.144.32.32 0 .176-.144.32-.32.32-.177 0-.32-.144-.32-.32 0-.176.143-.32.32-.32"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 735 B

After

Width:  |  Height:  |  Size: 731 B

6
platform/ui/src/assets/icons/tool-cine.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="1.5" transform="translate(1 1)">
<circle cx="11" cy="10.999" r="10.542" stroke-linecap="round" stroke-linejoin="round"/>
<path fill="currentColor" d="M8.542 8.724l5.762 2.306-5.762 2.88V8.725z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 387 B

6
platform/ui/src/assets/icons/tool-elipse.svg
View File

@ -1,6 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 25">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" transform="translate(1 1)">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.833 14.625L19.833 22.958M24 18.792L15.667 18.792"/>
<ellipse cx="10.5" cy="7" rx="6.5" ry="10" transform="rotate(89 10.5 7)"/>
<g fill="none" fill-rule="evenodd" stroke="currentColor" transform="translate(1 1)">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.833 14.625L19.833 22.958M24 18.792L15.667 18.792"/>
<ellipse cx="10.5" cy="7" stroke-width="1.5" rx="6.5" ry="10" transform="rotate(89 10.5 7)"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 386 B

After

Width:  |  Height:  |  Size: 405 B

7
platform/ui/src/assets/icons/tool-flip-horizontal.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 22">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-width="1.5">
<path d="M6.632 3.316H2c-1.105 0-2 .895-2 2v9.263c0 1.105.895 2 2 2h4.632" transform="translate(1 1)"/>
<path stroke-dasharray="1 3.1" d="M14.368 3.316H19c1.105 0 2 .895 2 2v9.263c0 1.105-.895 2-2 2h-4.632 0" transform="translate(1 1)"/>
<path d="M10.5 0.553L10.5 19.342" transform="translate(1 1)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 506 B

6
platform/ui/src/assets/icons/tool-invert.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20">
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
<rect width="20" height="18" stroke="currentColor" stroke-width="1.5" rx="2"/>
<path fill="currentColor" d="M10 18H2c-1.105 0-2-.895-2-2V2C0 .895.895 0 2 0h8v3C6.686 3 4 5.686 4 9c0 3.238 2.566 5.878 5.775 5.996L10 15v3zM10 3c3.314 0 6 2.686 6 6s-2.686 6-6 6z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 423 B

7
platform/ui/src/assets/icons/tool-length.svg
View File

@ -1,7 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
<g fill="none" fill-rule="evenodd" stroke="currentColor" transform="translate(1 1)">
<path stroke-linecap="square" stroke-linejoin="round" stroke-width="2" d="M5 18.79L19.436 4.353"/>
<rect width="5" height="5" x="19" stroke-width="1.5" rx="2.5"/>
<rect width="5" height="5" y="19" stroke-width="1.5" rx="2.5"/>
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)">
<rect width="24.749" height="7.779" x="-.375" y="8.111" stroke-width="1.5" rx="1" transform="rotate(-45.001 12 12)"/>
<path d="M5.617 12.884L7.632 14.868M8.185 10.315L10.685 12.815M10.622 7.879L12.372 9.629M13.058 5.442L15.558 7.942M15.612 2.888L17.627 4.874M3.063 15.438L5.563 17.938"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 417 B

After

Width:  |  Height:  |  Size: 517 B

6
platform/ui/src/assets/icons/tool-magnify.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" transform="translate(1 1)">
<circle cx="8.75" cy="8.749" r="8.333"/>
<path d="M19.583 19.582L14.643 14.642M4.583 8.749L12.917 8.749M8.75 4.582L8.75 12.916"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 378 B

12
platform/ui/src/assets/icons/tool-move.svg
View File

@ -1,8 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23">
<g fill="currentColor" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M9.882 18.529L9.882 0M18.529 9.882L1.235 9.882M7.412 2.468L9.88 0 12.364 2.484" transform="translate(1 1.5)"/>
<path d="M7.412 19.762L9.88 17.294 12.364 19.778" transform="translate(1 1.5) rotate(-180 9.888 18.536)"/>
<path d="M-1.234 11.114L1.234 8.646 3.718 11.13" transform="translate(1 1.5) rotate(-90 1.242 9.888)"/>
<path d="M16.06 11.114L18.528 8.646 21.012 11.13" transform="translate(1 1.5) rotate(90 18.536 9.888)"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M9.882 18.529L9.882 0M18.529 9.882L1.235 9.882M7.412 2.468L9.88 0 12.364 2.484" transform="translate(1 1)"/>
<path d="M7.412 19.762L9.88 17.294 12.364 19.778" transform="translate(1 1) rotate(-180 9.888 18.536)"/>
<path d="M-1.234 11.114L1.234 8.646 3.718 11.13" transform="translate(1 1) rotate(-90 1.242 9.888)"/>
<path d="M16.06 11.114L18.528 8.646 21.012 11.13" transform="translate(1 1) rotate(90 18.536 9.888)"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 680 B

After

Width:  |  Height:  |  Size: 663 B

7
platform/ui/src/assets/icons/tool-probe.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" transform="translate(1 1)">
<path d="M10 0L10 3.333M10 16.667L10 20M0 10L3.333 10M16.667 10L20 10"/>
<circle cx="10" cy="10" r="6.667"/>
<path d="M10 9.583c.23 0 .417.187.417.417 0 .23-.187.417-.417.417-.23 0-.417-.187-.417-.417 0-.23.187-.417.417-.417"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 484 B

8
platform/ui/src/assets/icons/tool-rectangle.svg Normal file
View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round">
<g stroke-linejoin="round" stroke-width="2">
<path d="M3.788 0L3.788 7.576M7.576 3.788L0 3.788" transform="translate(1 1) translate(11.818 10)"/>
</g>
<path stroke-width="1.5" d="M8.03 13.788H2c-1.105 0-2-.896-2-2V2C0 .895.895 0 2 0h13.892c1.105 0 2 .895 2 2v4.506h0" transform="translate(1 1)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 495 B

6
platform/ui/src/assets/icons/tool-reset.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 21">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
<path d="M12.308 6.923L19.231 6.923 19.231 0" transform="translate(0 1)"/>
<path d="M18.705 6.923C17.303 2.956 13.397.44 9.205.802 5.015 1.165 1.598 4.315.9 8.464c-.7 4.148 1.495 8.245 5.335 9.962 3.841 1.716 8.357.619 10.981-2.67" transform="translate(0 1)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 482 B

9
platform/ui/src/assets/icons/tool-rotate-right.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23">
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
<rect width="14.444" height="11.111" x="5.556" y="10" fill="currentColor" rx="2"/>
<g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
<path d="M8.889 3.333H4.444C1.99 3.333 0 5.323 0 7.778v4.444"/>
<path d="M5.556 0L8.889 3.333 5.556 6.667"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 481 B

7
platform/ui/src/assets/icons/tool-stack-scroll.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="1.5" transform="translate(1 1)">
<rect width="14.286" height="14.286" y="5.714" rx="2"/>
<path stroke-linecap="round" d="M3.01 2.857h11.98c1.105 0 2 .896 2 2v12.286h0"/>
<path stroke-linecap="round" d="M5.714 0h11.982c1.104 0 2 .895 2 2v12.286h0"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 425 B

4
platform/ui/src/assets/icons/tool-window-level.svg
View File

@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23">
<g fill="none" fill-rule="evenodd" transform="translate(1 1.5)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
<circle cx="10" cy="10" r="10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path fill="currentColor" d="M17.484 3.367C19.049 5.132 20 7.455 20 10c0 5.523-4.477 10-10 10-2.545 0-4.868-.95-6.633-2.516z"/>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 409 B

After

Width:  |  Height:  |  Size: 407 B

7
platform/ui/src/assets/icons/tool-zoom.svg
View File

@ -1,3 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-1 0 136 136.21852" >
<path fill="currentColor" d="M 93.148438 80.832031 C 109.5 57.742188 104.03125 25.769531 80.941406 9.421875 C 57.851562 -6.925781 25.878906 -1.460938 9.53125 21.632812 C -6.816406 44.722656 -1.351562 76.691406 21.742188 93.039062 C 38.222656 104.707031 60.011719 105.605469 77.394531 95.339844 L 115.164062 132.882812 C 119.242188 137.175781 126.027344 137.347656 130.320312 133.269531 C 134.613281 129.195312 134.785156 122.410156 130.710938 118.117188 C 130.582031 117.980469 130.457031 117.855469 130.320312 117.726562 Z M 51.308594 84.332031 C 33.0625 84.335938 18.269531 69.554688 18.257812 51.308594 C 18.253906 33.0625 33.035156 18.269531 51.285156 18.261719 C 69.507812 18.253906 84.292969 33.011719 84.328125 51.234375 C 84.359375 69.484375 69.585938 84.300781 51.332031 84.332031 C 51.324219 84.332031 51.320312 84.332031 51.308594 84.332031 Z M 51.308594 84.332031 " style=" stroke:none;fill-rule:nonzero;fill-opacity:1;" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 22">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(1 1)">
<ellipse cx="8.558" cy="8.091" rx="7.814" ry="7.636"/>
<path d="M14.419 13.818L20.279 19.545"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 342 B

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

@ -2,6 +2,7 @@ import React from 'react';
// Icons
import arrowDown from './../../assets/icons/arrow-down.svg';
import arrowLeft from './../../assets/icons/arrow-left.svg';
import calendar from './../../assets/icons/calendar.svg';
import cancel from './../../assets/icons/cancel.svg';
import clipboard from './../../assets/icons/clipboard.svg';
@ -13,6 +14,7 @@ import chevronLeft from './../../assets/icons/chevron-left.svg';
import chevronRight from './../../assets/icons/chevron-right.svg';
import eyeVisible from './../../assets/icons/eye-visible.svg';
import eyeHidden from './../../assets/icons/eye-hidden.svg';
import exclamation from './../../assets/icons/exclamation.svg';
import externalLink from './../../assets/icons/external-link.svg';
import groupLayers from './../../assets/icons/group-layers.svg';
import info from './../../assets/icons/info.svg';
@ -47,18 +49,18 @@ import toolAnnotate from './../../assets/icons/tool-annotate.svg';
import toolBidirectional from './../../assets/icons/tool-bidirectional.svg';
import toolElipse from './../../assets/icons/tool-elipse.svg';
import toolLength from './../../assets/icons/tool-length.svg';
import toolStackScroll from './../../assets/icons/tool-stack-scroll.svg';
import toolMagnify from './../../assets/icons/tool-magnify.svg';
import toolFlipHorizontal from './../../assets/icons/tool-flip-horizontal.svg';
import toolInvert from './../../assets/icons/tool-invert.svg';
import toolRotateRight from './../../assets/icons/tool-rotate-right.svg';
import toolCine from './../../assets/icons/tool-cine.svg';
import toolProbe from './../../assets/icons/tool-probe.svg';
import toolAngle from './../../assets/icons/tool-angle.svg';
import toolReset from './../../assets/icons/tool-reset.svg';
import toolRectangle from './../../assets/icons/tool-rectangle.svg';
/** Old OHIF */
import oldBars from './../../assets/icons/old-bars.svg';
import oldCircle from './../../assets/icons/old-circle.svg';
import oldEllipseH from './../../assets/icons/old-ellipse-h.svg';
import oldInvert from './../../assets/icons/old-invert.svg';
import oldRotateRight from './../../assets/icons/old-rotate-right.svg';
import oldYoutube from './../../assets/icons/old-youtube.svg';
import oldDotCircle from './../../assets/icons/old-dot-circle.svg';
import oldAngleLeft from './../../assets/icons/old-angle-left.svg';
import oldReset from './../../assets/icons/old-reset.svg';
import oldCircleO from './../../assets/icons/old-circle-o.svg';
import oldTrash from './../../assets/icons/old-trash.svg';
import oldPlay from './../../assets/icons/old-play.svg';
import oldStop from './../../assets/icons/old-stop.svg';
@ -80,6 +82,7 @@ const ICONS = {
'group-layers': groupLayers,
info: info,
'info-link': infoLink,
'arrow-left': arrowLeft,
'launch-arrow': launchArrow,
'launch-info': launchInfo,
link: link,
@ -87,6 +90,7 @@ const ICONS = {
lock: lock,
'logo-ohif-small': logoOhifSmall,
magnifier: magnifier,
exclamation: exclamation,
'notificationwarning-diamond': notificationwarningDiamond,
pencil: pencil,
profile: profile,
@ -110,18 +114,18 @@ const ICONS = {
'tool-bidirectional': toolBidirectional,
'tool-elipse': toolElipse,
'tool-length': toolLength,
'tool-stack-scroll': toolStackScroll,
'tool-magnify': toolMagnify,
'tool-flip-horizontal': toolFlipHorizontal,
'tool-invert': toolInvert,
'tool-rotate-right': toolRotateRight,
'tool-cine': toolCine,
'tool-probe': toolProbe,
'tool-angle': toolAngle,
'tool-reset': toolReset,
'tool-rectangle': toolRectangle,
/** Old OHIF */
'old-bars': oldBars,
'old-circle': oldCircle,
'old-ellipse-h': oldEllipseH,
'old-invert': oldInvert,
'old-rotate-right': oldRotateRight,
'old-youtube': oldYoutube,
'old-dot-circle': oldDotCircle,
'old-angle-left': oldAngleLeft,
'old-reset': oldReset,
'old-circle-o': oldCircleO,
'old-trash': oldTrash,
'old-play': oldPlay,
'old-stop': oldStop,

260
platform/ui/src/components/SplitButton/SplitButton.jsx
View File

@ -6,117 +6,210 @@ import OutsideClickHandler from 'react-outside-click-handler';
import { Icon, Tooltip, ListMenu } from '@ohif/ui';
const baseClasses = {
Button: 'h-12 flex items-center rounded-md border-transparent border-2 cursor-pointer',
Primary: 'h-full flex flex-1 items-center rounded-md rounded-tr-none rounded-br-none',
Secondary: 'h-full flex items-center justify-center rounded-tr-md rounded-br-md w-4',
Button:
'h-12 flex items-center rounded-md border-transparent border-2 cursor-pointer',
Primary:
'h-full flex flex-1 items-center rounded-md rounded-tr-none rounded-br-none',
Secondary:
'h-full flex items-center justify-center rounded-tr-md rounded-br-md w-4',
PrimaryIcon: 'w-5 h-5',
SecondaryIcon: 'w-4 h-full stroke-1',
Separator: 'border-l pt-2 pb-2',
Content: 'absolute z-10 top-0 mt-16'
Content: 'absolute z-10 top-0 mt-16',
};
const classes = {
Button: ({ isExpanded, primary }) => classNames(
baseClasses.Button,
!isExpanded && !primary.isActive && 'hover:bg-primary-dark hover:border-primary-dark'
),
Button: ({ isExpanded, primary }) =>
classNames(
baseClasses.Button,
!isExpanded &&
!primary.isActive &&
'hover:bg-primary-dark hover:border-primary-dark'
),
Interface: 'h-full flex flex-row items-center',
Primary: ({ primary, isExpanded }) => classNames(
baseClasses.Primary,
primary.isActive && !isExpanded ? 'bg-primary-light rounded-tr-md rounded-br-md' :
isExpanded ? 'bg-primary-dark' : 'bg-secondary-dark hover:bg-primary-dark'
),
Secondary: ({ isExpanded, primary }) => classNames(
baseClasses.Secondary,
isExpanded ? 'bg-primary-light rounded-tr-md rounded-br-md'
: primary.isActive ? 'bg-secondary-dark' : 'hover:bg-primary-dark bg-secondary-dark'
),
PrimaryIcon: ({ primary, isExpanded }) => classNames(
baseClasses.PrimaryIcon,
primary.isActive && !isExpanded ? 'text-primary-dark' : 'text-common-bright'
),
SecondaryIcon: ({ isExpanded }) => classNames(
baseClasses.SecondaryIcon,
isExpanded ? 'text-primary-dark' : 'text-primary-active hover:text-common-bright'
),
Separator: ({ primary, isExpanded, isHovering }) => classNames(
baseClasses.Separator,
isHovering || isExpanded || primary.isActive ? 'border-transparent' : 'border-primary-active'
),
Content: ({ isExpanded }) => classNames(baseClasses.Content, isExpanded ? 'block' : 'hidden')
Primary: ({ primary, isExpanded }) =>
classNames(
baseClasses.Primary,
primary.isActive && !isExpanded
? 'bg-primary-light rounded-tr-md rounded-br-md'
: isExpanded
? 'bg-primary-dark'
: 'bg-secondary-dark hover:bg-primary-dark'
),
Secondary: ({ isExpanded, primary }) =>
classNames(
baseClasses.Secondary,
isExpanded
? 'bg-primary-light rounded-tr-md rounded-br-md'
: primary.isActive
? 'bg-secondary-dark'
: 'hover:bg-primary-dark bg-secondary-dark'
),
PrimaryIcon: ({ primary, isExpanded }) =>
classNames(
baseClasses.PrimaryIcon,
primary.isActive && !isExpanded
? 'text-primary-dark'
: 'text-common-bright'
),
SecondaryIcon: ({ isExpanded }) =>
classNames(
baseClasses.SecondaryIcon,
isExpanded
? 'text-primary-dark'
: 'text-primary-active hover:text-common-bright'
),
Separator: ({ primary, isExpanded, isHovering }) =>
classNames(
baseClasses.Separator,
isHovering || isExpanded || primary.isActive
? 'border-transparent'
: 'border-primary-active'
),
Content: ({ isExpanded }) =>
classNames(baseClasses.Content, isExpanded ? 'block' : 'hidden'),
};
const SplitButton = ({
isRadio,
isAction,
//
bState,
//
groupId,
primary: _primary,
secondary,
onClick,
items: _items,
renderer,
onInteraction,
}) => {
const { primaryToolId, toggles, groups } = bState;
/* Bubbles up individual item clicks */
const getSplitButtonItems = items => items.map((item, index) => ({
...item,
index,
onClick: () => {
if (item.onClick) item.onClick({ ...item, index });
onClick({ item, index });
const getSplitButtonItems = items =>
items.map((item, index) => ({
...item,
index,
onClick: () => {
onInteraction({
groupId,
//
itemId: item.id,
interactionType: item.type,
// splitButtonId? (so we can track group?)
// info to fire item's command/event?
commandName: item.commandName,
commandOptions: item.commandOptions,
});
setState(state => ({
...state,
primary: !isAction ? { ...item, index } : state.primary,
isExpanded: false,
items: getSplitButtonItems(_items).filter(item => isRadio && !isAction ? item.index !== index : true)
}));
}
}));
setState(state => ({
...state,
primary: !isAction ? { ...item, index } : state.primary,
isExpanded: false,
items: getSplitButtonItems(_items).filter(item =>
isRadio && !isAction ? item.index !== index : true
),
}));
},
}));
const [state, setState] = useState({
primary: _primary,
items: getSplitButtonItems(_items),
items: getSplitButtonItems(_items).filter(item =>
isRadio && !isAction ? item.id !== _primary.id : true
),
isHovering: false,
isExpanded: false
isExpanded: false,
});
const onSecondaryClickHandler = () => setState(state => ({ ...state, isExpanded: !state.isExpanded }));
const onMouseEnterHandler = () => setState(state => ({ ...state, isHovering: true }));
const onMouseLeaveHandler = () => setState(state => ({ ...state, isHovering: false }));
const outsideClickHandler = () => setState(state => ({ ...state, isExpanded: false }));
const onSecondaryClickHandler = () =>
setState(state => ({ ...state, isExpanded: !state.isExpanded }));
const onMouseEnterHandler = () =>
setState(state => ({ ...state, isHovering: true }));
const onMouseLeaveHandler = () =>
setState(state => ({ ...state, isHovering: false }));
const outsideClickHandler = () =>
setState(state => ({ ...state, isExpanded: false }));
const onPrimaryClickHandler = () => {
const primary = { ...state.primary, isActive: !state.primary.isActive };
state.primary.onClick(primary);
setState(state => ({ ...state, isExpanded: false, primary }));
onInteraction({
groupId,
itemId: state.primary.id,
interactionType: state.primary.type,
// splitButtonId? (so we can track group?)
// info to fire item's command/event?
//
commandName: state.primary.commandName,
commandOptions: state.primary.commandOptions,
});
};
const isPrimaryActive =
(state.primary.type === 'tool' && primaryToolId === state.primary.id) ||
(state.primary.type === 'toggle' && toggles[state.primary.id] === true);
return (
<OutsideClickHandler onOutsideClick={outsideClickHandler}>
<div name='SplitButton' className="relative">
<div name="SplitButton" className="relative">
<div
className={classes.Button({ ...state })}
className={classes.Button({
...state,
primary: { isActive: isPrimaryActive },
})}
onMouseEnter={onMouseEnterHandler}
onMouseLeave={onMouseLeaveHandler}
>
<div className={classes.Interface}>
<div onClick={onPrimaryClickHandler} className={classes.Primary({ ...state })}>
<Tooltip isDisabled={!state.primary.tooltip} content={state.primary.tooltip}>
<div className='p-3 flex items-center justify-center h-full w-full'>
<Icon name={state.primary.icon} className={classes.PrimaryIcon({ ...state })} />
<div
onClick={onPrimaryClickHandler}
className={classes.Primary({
...state,
primary: { isActive: isPrimaryActive },
})}
>
<Tooltip
isDisabled={!state.primary.tooltip}
content={state.primary.tooltip}
>
<div className="flex items-center justify-center w-full h-full p-3">
<Icon
name={state.primary.icon}
className={classes.PrimaryIcon({
...state,
primary: { isActive: isPrimaryActive },
})}
/>
</div>
</Tooltip>
</div>
<div className={classes.Separator({ ...state })}></div>
<div className={classes.Secondary({ ...state })} onClick={onSecondaryClickHandler}>
<div
className={classes.Separator({
...state,
primary: { isActive: isPrimaryActive },
})}
></div>
<div
className={classes.Secondary({
...state,
primary: { isActive: isPrimaryActive },
})}
onClick={onSecondaryClickHandler}
>
<Tooltip
isDisabled={state.isExpanded || !secondary.tooltip}
content={secondary.tooltip}
className="h-full"
>
<Icon name={secondary.icon} className={classes.SecondaryIcon({ ...state })} />
<Icon
name={secondary.icon}
className={classes.SecondaryIcon({
...state,
primary: { isActive: isPrimaryActive },
})}
/>
</Tooltip>
</div>
</div>
</div>
{/* EXPANDED LIST OF OPTIONS */}
<div className={classes.Content({ ...state })}>
<ListMenu items={state.items} renderer={renderer} />
</div>
@ -126,21 +219,20 @@ const SplitButton = ({
};
const DefaultListItemRenderer = ({ icon, label, isActive }) => (
<div className={classNames(
'flex flex-row items-center p-3 h-8 w-full hover:bg-primary-dark',
isActive && 'bg-primary-dark'
)}
<div
className={classNames(
'flex flex-row items-center p-3 h-8 w-full hover:bg-primary-dark',
isActive && 'bg-primary-dark'
)}
>
<span className='text-common-bright mr-4 text-base'>
<Icon name={icon} className='w-5 h-5 text-common-bright' />
<span className="mr-4 text-base text-common-bright">
<Icon name={icon} className="w-5 h-5 text-common-bright" />
</span>
<span className='text-common-bright text-base mr-5'>
{label}
</span>
</div >
<span className="mr-5 text-base text-common-bright">{label}</span>
</div>
);
const noop = () => { };
const noop = () => {};
SplitButton.defaultProps = {
isRadio: false,
@ -148,47 +240,45 @@ SplitButton.defaultProps = {
primary: {
label: null,
tooltip: null,
isActive: true,
onClick: noop
},
secondary: {
icon: 'chevron-down',
label: null,
isActive: true,
tooltip: 'More Measure Tools'
tooltip: 'More Measure Tools',
},
items: [],
renderer: DefaultListItemRenderer,
onClick: noop
};
SplitButton.propTypes = {
primary: PropTypes.shape({
id: PropTypes.string,
id: PropTypes.string.isRequired,
icon: PropTypes.string,
label: PropTypes.string,
type: PropTypes.oneOf(['tool', 'action', 'toggle']).isRequired,
tooltip: PropTypes.string,
isActive: PropTypes.bool,
}),
secondary: PropTypes.shape({
id: PropTypes.string,
icon: PropTypes.string,
label: PropTypes.string,
tooltip: PropTypes.string,
isActive: PropTypes.bool
isActive: PropTypes.bool,
}),
onClick: PropTypes.func,
renderer: PropTypes.func,
items: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.string.isRequired,
icon: PropTypes.string,
label: PropTypes.string,
type: PropTypes.oneOf(['tool', 'action', 'toggle']).isRequired,
tooltip: PropTypes.string,
onClick: PropTypes.func,
isActive: PropTypes.bool,
})
)
),
/** Callback function to inform ToolbarService of important events */
onInteraction: PropTypes.func.isRequired,
};
export default SplitButton;

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

@ -2,7 +2,6 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Button, Icon, Typography, InputGroup } from '../../components';
import { useModal } from '../../contextProviders';
const StudyListFilter = ({
filtersMeta,
@ -21,42 +20,17 @@ const StudyListFilter = ({
});
};
const isSortingEnable = numOfStudies > 0 && numOfStudies <= 100;
const { show } = useModal();
const showLearnMoreContent = () => {
const modalContent = () => <div>Search Instructions</div>;
show({
content: modalContent,
title: 'Learn More',
});
};
return (
<React.Fragment>
<div>
<div className="bg-primary-dark">
<div className="container m-auto relative flex flex-col pt-5">
<div className="flex flex-row justify-between mb-5 px-12">
<div className="container relative flex flex-col pt-5 m-auto">
<div className="flex flex-row justify-between px-12 mb-5">
<div className="flex flex-row">
<Typography variant="h4" className="text-primary-light mr-6">
<Typography variant="h4" className="mr-6 text-primary-light">
Study list
</Typography>
<div className="flex flex-row items-end">
<Button
variant="text"
size="small"
color="inherit"
className="text-primary-active"
startIcon={<Icon name="info-link" className="w-2" />}
onClick={showLearnMoreContent}
>
<span className="flex flex-col flex-1">
<span>Learn more</span>
<span className="opacity-50 pt-1 border-b border-primary-active"></span>
</span>
</Button>
</div>
</div>
<div className="flex flex-row">
{isFiltering && (
@ -64,7 +38,7 @@ const StudyListFilter = ({
rounded="full"
variant="outlined"
color="primary"
className="text-primary-active border-primary-active mx-8"
className="mx-8 text-primary-active border-primary-active"
startIcon={<Icon name="cancel" />}
onClick={clearFilters}
>
@ -76,7 +50,7 @@ const StudyListFilter = ({
</Typography>
<Typography
variant="h6"
className="text-common-light self-end pb-1"
className="self-end pb-1 text-common-light"
>
Studies
</Typography>
@ -89,7 +63,7 @@ const StudyListFilter = ({
className="sticky z-10 border-b-4 border-black"
style={{ top: '57px' }}
>
<div className="bg-primary-dark pt-3 pb-3 ">
<div className="pt-3 pb-3 bg-primary-dark ">
<InputGroup
inputMeta={filtersMeta}
values={filterValues}
@ -101,7 +75,7 @@ const StudyListFilter = ({
</div>
{numOfStudies > 100 && (
<div className="container m-auto">
<div className="bg-primary-main text-center text-base py-1 rounded-b">
<div className="py-1 text-base text-center rounded-b bg-primary-main">
<p className="text-white">
Filter list to 100 studies or less to enable sorting
</p>

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

@ -7,12 +7,19 @@ import { IconButton, Icon, Tooltip } from '../';
const ToolbarButton = ({
type,
id,
isActive,
onClick,
icon,
label,
commandName,
commandOptions,
onInteraction,
dropdownContent,
//
isActive: _isActive,
bState = {},
//
}) => {
const { primaryToolId, toggles, groups } = bState;
const isActive = _isActive || (type === 'tool' && id === primaryToolId);
const classes = {
type: {
primary: isActive
@ -23,7 +30,6 @@ const ToolbarButton = ({
: 'text-white hover:bg-secondary-dark hover:text-white focus:bg-secondary-dark focus:text-white',
},
};
const shouldShowDropdown = !!isActive && !!dropdownContent;
return (
@ -36,7 +42,14 @@ const ToolbarButton = ({
<IconButton
variant={isActive ? 'contained' : 'text'}
className={classnames('mx-1', classes.type[type])}
onClick={onClick}
onClick={() => {
onInteraction({
itemId: id,
interactionType: type,
commandName: commandName,
commandOptions: commandOptions,
});
}}
key={id}
>
<Icon name={icon} />
@ -49,15 +62,15 @@ const ToolbarButton = ({
ToolbarButton.defaultProps = {
dropdownContent: null,
isActive: false,
type: 'primary',
type: 'action',
};
ToolbarButton.propTypes = {
/* Influences background/hover styling */
type: PropTypes.oneOf(['primary', 'secondary']),
type: PropTypes.oneOf(['action', 'toggle', 'tool']),
id: PropTypes.string.isRequired,
isActive: PropTypes.bool,
onClick: PropTypes.func.isRequired,
onInteraction: PropTypes.func.isRequired,
icon: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
/** Tooltip content can be replaced for a customized content by passing a node to this value. */

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

@ -24,7 +24,14 @@ const arrowPositionStyle = {
},
};
const Tooltip = ({ content, isSticky, position, tight, children, isDisabled }) => {
const Tooltip = ({
content,
isSticky,
position,
tight,
children,
isDisabled,
}) => {
const [isActive, setIsActive] = useState(false);
const handleMouseOver = () => {
@ -43,7 +50,7 @@ const Tooltip = ({ content, isSticky, position, tight, children, isDisabled }) =
return (
<div
className="relative h-full"
className="relative"
onMouseOver={handleMouseOver}
onFocus={handleMouseOver}
onMouseOut={handleMouseOut}
@ -84,7 +91,7 @@ Tooltip.defaultProps = {
tight: false,
isSticky: false,
position: 'bottom',
isDisabled: false
isDisabled: false,
};
Tooltip.propTypes = {

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

@ -52,7 +52,9 @@ Viewport.propTypes = {
studyData: PropTypes.shape({
label: PropTypes.string.isRequired,
isTracked: PropTypes.bool.isRequired,
/* Specific to SR Viewports only... */
isLocked: PropTypes.bool.isRequired,
isRehydratable: PropTypes.bool.isRequired,
studyDate: PropTypes.string.isRequired,
currentSeries: PropTypes.number.isRequired,
seriesDescription: PropTypes.string.isRequired,

1
platform/ui/src/components/Viewport/Viewport.mdx
View File

@ -28,6 +28,7 @@ import { Viewport } from '@ohif/ui';
label: 'A',
isTracked: true,
isLocked: false,
isRehydratable: false,
studyDate: '07-Sep-2011',
currentSeries: 1,
seriesDescription:

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

@ -19,6 +19,8 @@ const ViewportActionBar = ({
showPatientInfo: patientInfoVisibility,
onSeriesChange,
onDoubleClick,
//
onPillClick,
}) => {
const [showPatientInfo, setShowPatientInfo] = useState(patientInfoVisibility);
@ -33,6 +35,8 @@ const ViewportActionBar = ({
label,
isTracked,
isLocked,
isRehydratable,
useAltStyling,
modality,
studyDate,
currentSeries,
@ -52,7 +56,6 @@ const ViewportActionBar = ({
const onPatientInfoClick = () => setShowPatientInfo(!showPatientInfo);
const closePatientInfo = () => setShowPatientInfo(false);
const showPatientInfoRef = useRef(null);
const clickOutsideListener = useOnClickOutside(
showPatientInfoRef,
@ -71,30 +74,121 @@ const ViewportActionBar = ({
const renderIconStatus = () => {
if (modality === 'SR') {
const TooltipMessage = isLocked
? () => (
<div>
This SR is locked. <br />
Measurements cannot be duplicated.
</div>
)
: () => <div>This SR is unlocked.</div>;
// 1 - Incompatible
// 2 - Locked
// 3 - Rehydratable / Open
const state =
isRehydratable && !isLocked ? 3 : isRehydratable && isLocked ? 2 : 1;
let ToolTipMessage = null;
let StatusIcon = null;
switch (state) {
case 1:
StatusIcon = () => (
<div
className="flex items-center justify-center -mr-1 rounded-full"
style={{
width: '18px',
height: '18px',
backgroundColor: '#98e5c1',
border: 'solid 1.5px #000000',
}}
>
<Icon
name="exclamation"
style={{ color: '#000', width: '12px', height: '12px' }}
/>
</div>
);
ToolTipMessage = () => (
<div>
This structured report is not compatible
<br />
with this application.
</div>
);
break;
case 2:
StatusIcon = () => (
<div
className="flex items-center justify-center -mr-1 bg-black rounded-full"
style={{
width: '18px',
height: '18px',
}}
>
<Icon
name="lock"
style={{ color: '#05D97C', width: '8px', height: '11px' }}
/>
</div>
);
ToolTipMessage = () => (
<div>
This structured report is currently read-only
<br />
because you are tracking measurements in
<br />
another viewport.
</div>
);
break;
case 3:
StatusIcon = () => (
<div
className="flex items-center justify-center -mr-1 bg-white rounded-full group-hover:bg-customblue-200"
style={{
width: '18px',
height: '18px',
border: 'solid 1.5px #000000',
}}
>
<Icon
name="arrow-left"
style={{ color: '#000', width: '14px', height: '14px' }}
/>
</div>
);
ToolTipMessage = () => <div>Click to restore measurements.</div>;
}
const StatusPill = () => (
<div
className={classnames(
'group relative flex items-center justify-center px-2 rounded-full cursor-default bg-customgreen-100',
{
'hover:bg-customblue-100': state === 3,
'cursor-pointer': state === 3,
}
)}
style={{
height: '24px',
width: '55px',
}}
onClick={() => {
if (state === 3) {
onPillClick?.();
}
}}
>
<span className="pr-1 text-lg font-bold leading-none text-black">
SR
</span>
<StatusIcon />
</div>
);
return (
<>
<Tooltip content={<TooltipMessage />} position="bottom-left">
<div className="relative flex p-1 border rounded cursor-default border-primary-light">
<span className="text-sm font-bold leading-none text-primary-light">
SR
</span>
{isLocked && (
<Icon
name="lock"
className="absolute w-3 text-white"
style={{ top: -6, right: -6 }}
/>
)}
</div>
</Tooltip>
{ToolTipMessage && (
<Tooltip content={<ToolTipMessage />} position="bottom-left">
<StatusPill />
</Tooltip>
)}
{!ToolTipMessage && <StatusPill />}
</>
);
}
@ -119,13 +213,13 @@ const ViewportActionBar = ({
can be viewed <br /> in the measurement panel
</>
) : (
<>
Measurements for
<>
Measurements for
<span className="font-bold text-white"> untracked </span>
series <br /> will not be shown in the <br /> measurements
panel
</>
)}
)}
</span>
</div>
</div>
@ -137,15 +231,26 @@ const ViewportActionBar = ({
);
};
const borderColor = useAltStyling ? '#365A6A' : '#1D205A';
const backgroundColor = useAltStyling
? '#031923'
: isTracked
? '#020424'
: null;
return (
<div
className="flex flex-wrap items-center p-2 border-b select-none border-primary-light -mt-2"
className="flex flex-wrap items-center p-2 -mt-2 border-b select-none"
style={{
borderColor: borderColor,
backgroundColor: backgroundColor,
}}
onDoubleClick={onDoubleClick}
>
<div className="flex flex-grow min-w-48 flex-1 mt-2">
<div className="flex flex-1 flex-grow mt-2 min-w-48">
<div className="flex items-center">
<span className="mr-2 text-white text-large">{label}</span>
{renderIconStatus()}
<span className="ml-2 text-white text-large">{label}</span>
</div>
<div className="flex flex-col justify-start ml-4">
<div className="flex">
@ -173,14 +278,14 @@ const ViewportActionBar = ({
<ButtonGroup>
<Button
size="initial"
className="px-2 py-1"
className="px-2 py-1 bg-black"
onClick={() => onSeriesChange('left')}
>
<Icon name="chevron-left" className="w-4 text-white" />
</Button>
<Button
size="initial"
className="px-2 py-1"
className="px-2 py-1 bg-black"
onClick={() => onSeriesChange('right')}
>
<Icon name="chevron-right" className="w-4 text-white" />
@ -189,11 +294,11 @@ const ViewportActionBar = ({
</div>
)}
{showCine && !showNavArrows && (
<div className="mt-2 min-w-48 max-w-48 mr-auto">
<div className="mt-2 mr-auto min-w-48 max-w-48">
<CinePlayer {...cineProps} />
</div>
)}
<div className="flex h-8 ml-4 mr-2 mt-2" onClick={onPatientInfoClick}>
<div className="flex h-8 mt-2 ml-4 mr-2" onClick={onPatientInfoClick}>
<PatientInfo
showPatientInfoRef={showPatientInfoRef}
isOpen={showPatientInfo}
@ -217,9 +322,12 @@ ViewportActionBar.propTypes = {
cineProps: PropTypes.object,
showPatientInfo: PropTypes.bool,
studyData: PropTypes.shape({
//
useAltStyling: PropTypes.bool,
//
label: PropTypes.string.isRequired,
isTracked: PropTypes.bool.isRequired,
isLocked: PropTypes.bool.isRequired,
isRehydratable: PropTypes.bool.isRequired,
studyDate: PropTypes.string.isRequired,
currentSeries: PropTypes.number.isRequired,
seriesDescription: PropTypes.string.isRequired,

67
platform/ui/src/components/ViewportActionBar/ViewportActionBar.mdx
View File

@ -22,11 +22,12 @@ import { ViewportActionBar } from '@ohif/ui';
<Playground>
<div className="p-4 h-64">
<ViewportActionBar
onSeriesChange={(direction) => alert(`Series ${direction}`)}
onSeriesChange={direction => alert(`Series ${direction}`)}
studyData={{
label: 'A',
isTracked: true,
isLocked: false,
isRehydratable: false,
studyDate: '07-Sep-2010',
currentSeries: 1,
seriesDescription:
@ -45,42 +46,42 @@ import { ViewportActionBar } from '@ohif/ui';
/>
</div>
</Playground>
<Playground>
<div className="p-4 h-64">
<ViewportActionBar
onSeriesChange={(direction) => alert(`Series ${direction}`)}
studyData={{
label: 'A',
isTracked: false,
isLocked: true,
studyDate: '07-Sep-2010',
currentSeries: 1,
seriesDescription:
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
modality: 'CT',
patientInformation: {
patientName: 'Smith, Jane',
patientSex: 'F',
patientAge: '59',
MRN: '10000001',
thickness: '2.0mm',
spacing: '1.25mm',
scanner: 'Aquilion',
},
}}
/>
</div>
</Playground>
<Playground>
<div className="p-4 h-64">
<ViewportActionBar
onSeriesChange={(direction) => alert(`Series ${direction}`)}
onSeriesChange={direction => alert(`Series ${direction}`)}
studyData={{
label: 'A',
isTracked: false,
isLocked: false,
isRehydratable: true,
studyDate: '07-Sep-2010',
currentSeries: 1,
seriesDescription:
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
modality: 'CT',
patientInformation: {
patientName: 'Smith, Jane',
patientSex: 'F',
patientAge: '59',
MRN: '10000001',
thickness: '2.0mm',
spacing: '1.25mm',
scanner: 'Aquilion',
},
}}
/>
</div>
</Playground>
<Playground>
<div className="p-4 h-64">
<ViewportActionBar
onSeriesChange={direction => alert(`Series ${direction}`)}
studyData={{
label: 'A',
isTracked: false,
isLocked: false,
isRehydratable: false,
studyDate: '07-Sep-2010',
currentSeries: 1,
seriesDescription:
@ -99,15 +100,15 @@ import { ViewportActionBar } from '@ohif/ui';
/>
</div>
</Playground>
<Playground>
<div className="p-4 h-64">
<ViewportActionBar
onSeriesChange={(direction) => alert(`Series ${direction}`)}
onSeriesChange={direction => alert(`Series ${direction}`)}
studyData={{
label: 'A',
isTracked: false,
isLocked: true,
isLocked: false,
isRehydratable: true,
studyDate: '07-Sep-2010',
currentSeries: 1,
seriesDescription:

1
platform/ui/src/views/Viewer/Viewer.mdx.todo
View File

@ -88,6 +88,7 @@ import { tabs } from './studyBrowserMockData';
label: 'A',
isTracked: true,
isLocked: false,
isRehydratable: false,
studyDate: '07-Sep-2011',
currentSeries: 1,
seriesDescription:

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

@ -46,6 +46,15 @@ module.exports = {
active: '#2c3074',
},
customgreen: {
100: '#05D97C',
},
customblue: {
100: '#c4fdff',
200: '#38daff',
},
gray: {
100: '#f7fafc',
200: '#edf2f7',

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

@ -12,7 +12,7 @@ import {
ToolBarService,
ViewportGridService,
HangingProtocolService,
CineService
CineService,
// utils,
// redux as reduxOHIF,
} from '@ohif/core';
@ -33,13 +33,17 @@ function appInit(appConfigOrFunc, defaultExtensions) {
// TODO: Wire this up to Rodrigo's basic Context "ContextService"
const commandsManagerConfig = {
/** Used by commands to inject `viewports` from "redux" */
getAppState: () => { },
getAppState: () => {},
/** Used by commands to determine active context */
getActiveContexts: () => ['VIEWER', 'DEFAULT', 'ACTIVE_VIEWPORT::CORNERSTONE'],
getActiveContexts: () => [
'VIEWER',
'DEFAULT',
'ACTIVE_VIEWPORT::CORNERSTONE',
],
};
const servicesManager = new ServicesManager();
const commandsManager = new CommandsManager(commandsManagerConfig);
const servicesManager = new ServicesManager(commandsManager);
const hotkeysManager = new HotkeysManager(commandsManager, servicesManager);
const extensionManager = new ExtensionManager({
commandsManager,
@ -58,7 +62,7 @@ function appInit(appConfigOrFunc, defaultExtensions) {
ToolBarService,
ViewportGridService,
HangingProtocolService,
CineService
CineService,
]);
/**

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

@ -6,9 +6,6 @@ import { MODULE_TYPES } from '@ohif/core';
import { useAppConfig } from '@state';
import { extensionManager } from '../App.jsx';
let cacheMap = {};
let total = {};
/**
* Uses route properties to determine the data source that should be passed
* to the child layout template. In some instances, initiates requests and
@ -48,64 +45,56 @@ function DataSourceWrapper(props) {
// But only for LayoutTemplate type of 'list'?
// Or no data fetching here, and just hand down my source
const STUDIES_LIMIT = 101;
const [data, setData] = useState({ studies: [], total: 0 });
const [data, setData] = useState({
studies: [],
total: 0,
resultsPerPage: 25,
pageNumber: 1,
});
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const queryFilterValues = _getQueryFilterValues(
history.location.search,
STUDIES_LIMIT
);
// 204: no content
async function getData() {
setIsLoading(true);
const limit = STUDIES_LIMIT - 1;
const queryFilterValues = _getQueryFilterValues(history.location.search);
const { resultsPerPage = 25, pageNumber = 1 } = queryFilterValues;
const reachedLimits = parseInt((resultsPerPage * pageNumber) / STUDIES_LIMIT);
const cacheKey = `${pageNumber}-${resultsPerPage}`;
const getFromCache = async ({ cacheKey, pageNumber, resultsPerPage, limit, options }) => {
const pagesAmount = limit / resultsPerPage;
const pageToRequest = parseInt((resultsPerPage * pageNumber) / STUDIES_LIMIT);
let length = 0;
if (!cacheMap[cacheKey]) {
length = pageToRequest > 0 ? (pageToRequest * STUDIES_LIMIT) : 1;
const studiesPromise = dataSource.query.studies.search(options);
for (let pageNum = 0; pageNum < pagesAmount; pageNum++) {
const currentPageNumber = (pageNum + 1) + (pageToRequest * pagesAmount);
cacheMap[`${currentPageNumber}-${resultsPerPage}`] = studiesPromise.then(function (results) {
const slicedResult = results.slice((pageNum * resultsPerPage), ((pageNum + 1) * resultsPerPage));
length += slicedResult.length;
return slicedResult;
});
}
}
const cache = await cacheMap[cacheKey];
return { cache, length, index: pageToRequest };
};
const { cache: studies, index, length } = await getFromCache({
cacheKey,
pageNumber,
resultsPerPage,
limit,
options: { ...queryFilterValues, ...{ offset: reachedLimits * limit } }
});
const totalKey = `${resultsPerPage}-${index}`;
total[totalKey] = total[totalKey] ? total[totalKey] + length : length;
const totals = Object.keys(total).map(key => total[key]);
const biggestIndex = totals.indexOf(Math.max(...totals));
const biggestKey = Object.keys(total)[biggestIndex];
const biggestTotal = total[biggestKey];
const studies = await dataSource.query.studies.search(queryFilterValues);
setIsLoading(false);
setData({ studies, total: biggestTotal });
setData({
studies,
total: studies.length,
resultsPerPage: queryFilterValues.resultsPerPage,
pageNumber: queryFilterValues.pageNumber,
});
}
try {
getData();
// Cache invalidation :thinking:
// - Anytime change is not just next/previous page
// - And we didn't cross a result offset range
const isFirstLoad = data.studies.length === 0;
const isSamePage = data.pageNumber === queryFilterValues.pageNumber;
const previousOffset =
Math.floor((data.pageNumber * data.resultsPerPage) / STUDIES_LIMIT) *
(STUDIES_LIMIT - 1);
const newOffset =
Math.floor(
(queryFilterValues.pageNumber * queryFilterValues.resultsPerPage) /
STUDIES_LIMIT
) *
(STUDIES_LIMIT - 1);
const isDataInvalid =
isFirstLoad || isSamePage || newOffset !== previousOffset;
if (isDataInvalid) {
getData();
}
} catch (ex) {
console.warn(ex);
}
@ -138,25 +127,32 @@ export default DataSourceWrapper;
* Need generic that can be shared? Isn't this what qs is for?
* @param {*} query
*/
function _getQueryFilterValues(query) {
function _getQueryFilterValues(query, queryLimit) {
query = new URLSearchParams(query);
const pageNumber = _tryParseInt(query.get('pageNumber'), 1);
const resultsPerPage = _tryParseInt(query.get('resultsPerPage'), 25);
const queryFilterValues = {
// DCM
patientId: query.get('mrn'),
patientName: query.get('patientName'),
studyDescription: query.get('description'),
modalitiesInStudy: query.get('modalities') && query.get('modalities').split(','),
modalitiesInStudy:
query.get('modalities') && query.get('modalities').split(','),
accessionNumber: query.get('accession'),
//
startDate: query.get('startDate'),
endDate: query.get('endDate'),
page: _tryParseInt(query.get('page'), undefined),
pageNumber: _tryParseInt(query.get('pageNumber'), undefined),
resultsPerPage: _tryParseInt(query.get('resultsPerPage'), undefined),
pageNumber,
resultsPerPage,
// Rarely supported server-side
sortBy: query.get('sortBy'),
sortDirection: query.get('sortDirection'),
// Offset...
offset:
Math.floor((pageNumber * resultsPerPage) / queryLimit) * (queryLimit - 1),
};
// patientName: good

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

@ -24,7 +24,7 @@ import {
Header,
useModal,
AboutModal,
UserPreferences
UserPreferences,
} from '@ohif/ui';
const seriesInStudiesMap = new Map();
@ -33,7 +33,14 @@ const seriesInStudiesMap = new Map();
* TODO:
* - debounce `setFilterValues` (150ms?)
*/
function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingData, dataSource, hotkeysManager }) {
function WorkList({
history,
data: studies,
dataTotal: studiesTotal,
isLoadingData,
dataSource,
hotkeysManager,
}) {
const { hotkeyDefinitions, hotkeyDefaults } = hotkeysManager;
const { show, hide } = useModal();
const { t } = useTranslation();
@ -94,7 +101,6 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
const [expandedRows, setExpandedRows] = useState([]);
const [studiesWithSeriesData, setStudiesWithSeriesData] = useState([]);
const numOfStudies = studiesTotal;
const totalPages = Math.floor(numOfStudies / resultsPerPage) + 1;
const setFilterValues = val => {
if (filterValues.pageNumber === val.pageNumber) {
@ -105,7 +111,15 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
};
const onPageNumberChange = newPageNumber => {
if (newPageNumber > totalPages) {
debugger;
const oldPageNumber = filterValues.pageNumber;
const rollingPageNumberMod = Math.floor(101 / filterValues.resultsPerPage);
const rollingPageNumber = oldPageNumber % rollingPageNumberMod;
const isNextPage = newPageNumber > oldPageNumber;
const hasNextPage =
Math.max(rollingPageNumber, 1) * resultsPerPage < numOfStudies;
if (isNextPage && !hasNextPage) {
return;
}
@ -170,9 +184,13 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
// Query for series information
useEffect(() => {
const fetchSeries = async studyInstanceUid => {
debugger;
try {
const series = await dataSource.query.series.search(studyInstanceUid);
seriesInStudiesMap.set(studyInstanceUid, utils.sortBySeriesDate(series));
seriesInStudiesMap.set(
studyInstanceUid,
utils.sortBySeriesDate(series)
);
setStudiesWithSeriesData([...studiesWithSeriesData, studyInstanceUid]);
} catch (ex) {
// TODO: UI Notification Service
@ -199,6 +217,10 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
return !isEqual(filterValues, defaultFilterValues);
};
const rollingPageNumberMod = Math.floor(101 / resultsPerPage);
const rollingPageNumber = (pageNumber - 1) % rollingPageNumberMod;
const offset = resultsPerPage * rollingPageNumber;
const offsetAndTake = offset + resultsPerPage;
const tableDataSource = sortedStudies.map((study, key) => {
const rowKey = key + 1;
const isExpanded = expandedRows.some(k => k === rowKey);
@ -229,8 +251,8 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
content: patientName ? (
<TooltipClipboard>{patientName}</TooltipClipboard>
) : (
<span className="text-gray-700">(Empty)</span>
),
<span className="text-gray-700">(Empty)</span>
),
gridCol: 4,
},
{
@ -294,13 +316,13 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
seriesTableDataSource={
seriesInStudiesMap.has(studyInstanceUid)
? seriesInStudiesMap.get(studyInstanceUid).map(s => {
return {
description: s.description || '(empty)',
seriesNumber: s.seriesNumber || '',
modality: s.modality || '',
instances: s.numSeriesInstances || '',
};
})
return {
description: s.description || '(empty)',
seriesNumber: s.seriesNumber || '',
modality: s.modality || '',
instances: s.numSeriesInstances || '',
};
})
: []
}
>
@ -317,7 +339,7 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
<Link
key={i}
to={`${mode.id}?StudyInstanceUIDs=${studyInstanceUid}`}
// to={`${mode.id}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
// to={`${mode.id}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
>
<Button
rounded="full"
@ -325,7 +347,7 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
disabled={false}
endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
className={classnames('font-bold', { 'ml-2': !isFirst })}
onClick={() => { }}
onClick={() => {}}
>
{mode.displayName}
</Button>
@ -348,25 +370,28 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
{
title: t('Header:About'),
icon: 'info',
onClick: () => show({ content: AboutModal, title: 'About OHIF Viewer' })
onClick: () => show({ content: AboutModal, title: 'About OHIF Viewer' }),
},
{
title: t('Header:Preferences'),
icon: 'settings',
onClick: () => show({
title: t('UserPreferencesModal:User Preferences'),
content: UserPreferences,
contentProps: {
hotkeyDefaults: hotkeysManager.getValidHotkeyDefinitions(hotkeyDefaults),
hotkeyDefinitions,
onCancel: hide,
onSubmit: ({ hotkeyDefinitions }) => {
hotkeysManager.setHotkeys(hotkeyDefinitions);
hide();
onClick: () =>
show({
title: t('UserPreferencesModal:User Preferences'),
content: UserPreferences,
contentProps: {
hotkeyDefaults: hotkeysManager.getValidHotkeyDefinitions(
hotkeyDefaults
),
hotkeyDefinitions,
onCancel: hide,
onSubmit: ({ hotkeyDefinitions }) => {
hotkeysManager.setHotkeys(hotkeyDefinitions);
hide();
},
onReset: () => hotkeysManager.restoreDefaultBindings(),
},
onReset: () => hotkeysManager.restoreDefaultBindings()
}
})
}),
},
];
@ -378,7 +403,7 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
>
<Header isSticky menuOptions={menuOptions} isReturnEnabled={false} />
<StudyListFilter
numOfStudies={numOfStudies}
numOfStudies={pageNumber * resultsPerPage > 100 ? 101 : numOfStudies}
filtersMeta={filtersMeta}
filterValues={{ ...filterValues, ...defaultSortValues }}
onChange={setFilterValues}
@ -388,7 +413,7 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
{hasStudies ? (
<>
<StudyListTable
tableDataSource={tableDataSource}
tableDataSource={tableDataSource.slice(offset, offsetAndTake)}
numOfStudies={numOfStudies}
filtersMeta={filtersMeta}
/>
@ -400,10 +425,10 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
/>
</>
) : (
<div className="flex flex-col items-center justify-center pt-48">
<EmptyStudies isLoading={isLoadingData} />
</div>
)}
<div className="flex flex-col items-center justify-center pt-48">
<EmptyStudies isLoading={isLoadingData} />
</div>
)}
</div>
);
}