Skip to content

feat: Adjust the OHIF Viewer to support events related to the custom toolbar [CWLF-390] #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
damian-lis-butterfly wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: Adjust the OHIF Viewer to support events related to the custom toolbar [CWLF-390] #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion extensions/cornerstone/src/Viewport/Overlays/CornerstoneOverlays.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';

import ViewportImageScrollbar from './ViewportImageScrollbar';
import CustomizableViewportOverlay from './CustomizableViewportOverlay';
import ViewportOrientationMarkers from './ViewportOrientationMarkers';
// import ViewportOrientationMarkers from './ViewportOrientationMarkers';
import ViewportImageSliceLoadingIndicator from './ViewportImageSliceLoadingIndicator';

function CornerstoneOverlays(props: withAppTypes) {
Expand Down Expand Up @@ -68,13 +68,15 @@ function CornerstoneOverlays(props: withAppTypes) {
element={element}
/>

{/* Orientation markers disabled
<ViewportOrientationMarkers
imageSliceData={imageSliceData}
element={element}
viewportData={viewportData}
servicesManager={servicesManager}
viewportId={viewportId}
/>
*/}
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion extensions/cornerstone/src/commandsModule.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -805,7 +805,7 @@ function commandsModule({
const label = await callInputDialog({
uiDialogService,
title: i18n.t('Tools:Edit Arrow Text'),
placeholder: data?.data?.label || i18n.t('Tools:Enter new text'),
placeholder: data?.data?.label || i18n.t('Tools:Enter annotation text'),
defaultValue: data?.data?.label || '',
});

Expand Down
65 changes: 34 additions & 31 deletions extensions/cornerstone/src/customizations/viewportOverlayCustomization.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,47 @@
export default {
'viewportOverlay.topLeft': [
{
id: 'StudyDate',
inheritsFrom: 'ohif.overlayItem',
label: '',
title: 'Study date',
condition: ({ referenceInstance }) => referenceInstance?.StudyDate,
contentF: ({ referenceInstance, formatters: { formatDate } }) =>
formatDate(referenceInstance.StudyDate),
},
{
id: 'SeriesDescription',
inheritsFrom: 'ohif.overlayItem',
label: '',
title: 'Series description',
condition: ({ referenceInstance }) => {
return referenceInstance && referenceInstance.SeriesDescription;
},
contentF: ({ referenceInstance }) => referenceInstance.SeriesDescription,
},
// Study date and series description disabled
// {
// id: 'StudyDate',
// inheritsFrom: 'ohif.overlayItem',
// label: '',
// title: 'Study date',
// condition: ({ referenceInstance }) => referenceInstance?.StudyDate,
// contentF: ({ referenceInstance, formatters: { formatDate } }) =>
// formatDate(referenceInstance.StudyDate),
// },
// {
// id: 'SeriesDescription',
// inheritsFrom: 'ohif.overlayItem',
// label: '',
// title: 'Series description',
// condition: ({ referenceInstance }) => {
// return referenceInstance && referenceInstance.SeriesDescription;
// },
// contentF: ({ referenceInstance }) => referenceInstance.SeriesDescription,
// },
],
'viewportOverlay.topRight': [],
'viewportOverlay.bottomLeft': [
{
id: 'WindowLevel',
inheritsFrom: 'ohif.overlayItem.windowLevel',
},
{
id: 'ZoomLevel',
inheritsFrom: 'ohif.overlayItem.zoomLevel',
condition: props => {
const activeToolName = props.toolGroupService.getActiveToolForViewport(props.viewportId);
return activeToolName === 'Zoom';
},
},
// Zoom level disabled
// {
// id: 'ZoomLevel',
// inheritsFrom: 'ohif.overlayItem.zoomLevel',
// condition: props => {
// const activeToolName = props.toolGroupService.getActiveToolForViewport(props.viewportId);
// return activeToolName === 'Zoom';
// },
// },
],
'viewportOverlay.bottomRight': [
{
id: 'InstanceNumber',
inheritsFrom: 'ohif.overlayItem.instanceNumber',
},
// Instance number disabled
// {
// id: 'InstanceNumber',
// inheritsFrom: 'ohif.overlayItem.instanceNumber',
// },
],
};
15 changes: 9 additions & 6 deletions extensions/default/src/DicomWebDataSource/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { retrieveStudyMetadata, deleteStudyMetadataPromise } from './retrieveStu
import StaticWadoClient from './utils/StaticWadoClient';
import getDirectURL from '../utils/getDirectURL';
import { fixBulkDataURI } from './utils/fixBulkDataURI';
import {HeadersInterface} from '@ohif/core/src/types/RequestHeaders';
import { HeadersInterface } from '@ohif/core/src/types/RequestHeaders';

const { DicomMetaDictionary, DicomDict } = dcmjs.data;

Expand Down Expand Up @@ -143,10 +143,13 @@ function createDicomWebApi(dicomWebConfig: DicomWebConfig, servicesManager) {
dicomWebConfigCopy = JSON.parse(JSON.stringify(dicomWebConfig));

getAuthorizationHeader = () => {
const xhrRequestHeaders: HeadersInterface = {};
let xhrRequestHeaders: HeadersInterface = {};
const authHeaders = userAuthenticationService.getAuthorizationHeader();
if (authHeaders && authHeaders.Authorization) {
xhrRequestHeaders.Authorization = authHeaders.Authorization;
if (authHeaders) {
xhrRequestHeaders = {
...xhrRequestHeaders,
...authHeaders,
};
}
return xhrRequestHeaders;
};
Expand All @@ -158,7 +161,7 @@ function createDicomWebApi(dicomWebConfig: DicomWebConfig, servicesManager) {
*/
generateWadoHeader = (options: HeaderOptions): HeadersInterface => {
const authorizationHeader = getAuthorizationHeader();
if (options?.includeTransferSyntax!==false) {
if (options?.includeTransferSyntax !== false) {
//Generate accept header depending on config params
const formattedAcceptHeader = utils.generateAcceptHeader(
dicomWebConfig.acceptHeader,
Expand All @@ -175,7 +178,7 @@ function createDicomWebApi(dicomWebConfig: DicomWebConfig, servicesManager) {
// which the server expects Accept: application/dicom+json will still include that in the
// header.
return {
...authorizationHeader
...authorizationHeader,
};
}
};
Expand Down
2 changes: 1 addition & 1 deletion extensions/default/src/DicomWebDataSource/qido.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ function mapParams(params, options = {}) {
if (params.studyInstanceUid) {
let studyUids = params.studyInstanceUid;
studyUids = Array.isArray(studyUids) ? studyUids.join() : studyUids;
studyUids = studyUids.replace(/[^0-9.]+/g, '\\');
// studyUids = studyUids.replace(/[^0-9\.]+/g, '\\');
parameters.StudyInstanceUID = studyUids;
}

Expand Down
23 changes: 14 additions & 9 deletions extensions/default/src/ViewerLayout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@ function ViewerLayout({
const { panelService, hangingProtocolService, customizationService } = servicesManager.services;
const [showLoadingIndicator, setShowLoadingIndicator] = useState(appConfig.showLoadingIndicator);

// Check if UI should be hidden based on config
const hideUI = !!appConfig.hideUI;

const hasPanels = useCallback(
(side): boolean => !!panelService.getPanels(side).length,
[panelService]
Expand Down Expand Up @@ -151,21 +154,23 @@ function ViewerLayout({

return (
<div>
<ViewerHeader
hotkeysManager={hotkeysManager}
extensionManager={extensionManager}
servicesManager={servicesManager}
appConfig={appConfig}
/>
{!hideUI && (
<ViewerHeader
hotkeysManager={hotkeysManager}
extensionManager={extensionManager}
servicesManager={servicesManager}
appConfig={appConfig}
/>
)}
<div
className="relative flex w-full flex-row flex-nowrap items-stretch overflow-hidden bg-black"
style={{ height: 'calc(100vh - 52px' }}
style={{ height: hideUI ? '100vh' : 'calc(100vh - 52px)' }}
>
<React.Fragment>
{showLoadingIndicator && <LoadingIndicatorProgress className="h-full w-full bg-black" />}
<ResizablePanelGroup {...resizablePanelGroupProps}>
{/* LEFT SIDEPANELS */}
{hasLeftPanels ? (
{hasLeftPanels && !hideUI ? (
<>
<ResizablePanel {...resizableLeftPanelProps}>
<SidePanelWithServices
Expand Down Expand Up @@ -197,7 +202,7 @@ function ViewerLayout({
</div>
</div>
</ResizablePanel>
{hasRightPanels ? (
{hasRightPanels && !hideUI ? (
<>
<ResizableHandle
onDragging={onHandleDragging}
Expand Down
39 changes: 12 additions & 27 deletions extensions/default/src/utils/callInputDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import { setAnnotationLabel } from '@cornerstonejs/tools/utilities';
import { annotation } from '@cornerstonejs/tools';
import { LabellingFlow } from '@ohif/ui-next';
import { InputDialog } from '@ohif/ui-next';
import { InlineAnnotationInput } from '@ohif/ui-next';

interface InputDialogDefaultProps {
hide: () => void;
Expand All @@ -15,52 +15,37 @@ interface InputDialogDefaultProps {
function InputDialogDefault({
hide,
onSave,
placeholder = 'Enter value',
placeholder = 'Enter annotation text',
defaultValue = '',
submitOnEnter,
}: InputDialogDefaultProps) {
return (
<InputDialog
submitOnEnter={submitOnEnter}
<InlineAnnotationInput
onSave={onSave}
onCancel={hide}
hide={hide}
defaultValue={defaultValue}
>
<InputDialog.Field>
<InputDialog.Input placeholder={placeholder} />
</InputDialog.Field>
<InputDialog.Actions>
<InputDialog.ActionsSecondary onClick={hide}>Cancel</InputDialog.ActionsSecondary>
<InputDialog.ActionsPrimary
onClick={value => {
onSave(value);
hide();
}}
>
Save
</InputDialog.ActionsPrimary>
</InputDialog.Actions>
</InputDialog>
placeholder={placeholder}
submitOnEnter={submitOnEnter}
/>
);
}

/**
* Shows an input dialog for entering text with customizable options
* Shows an inline annotation input for entering text
* @param uiDialogService - Service for showing UI dialogs
* @param onSave - Callback function called when save button is clicked with entered value
* @param defaultValue - Initial value to show in input field
* @param title - Title text to show in dialog header
* @param placeholder - Placeholder text for input field
* @param submitOnEnter - Whether to submit dialog when Enter key is pressed
*/
export async function callInputDialog({
uiDialogService,
defaultValue = '',
title = 'Annotation',
placeholder = '',
placeholder = 'Enter annotation text',
submitOnEnter = true,
}: {
uiDialogService: AppTypes.UIDialogService;
defaultValue?: string;
title?: string;
placeholder?: string;
submitOnEnter?: boolean;
}) {
Expand All @@ -70,7 +55,7 @@ export async function callInputDialog({
uiDialogService.show({
id: dialogId,
content: InputDialogDefault,
title: title,
unstyled: true,
shouldCloseOnEsc: true,
contentProps: {
onSave: value => {
Expand Down
16 changes: 11 additions & 5 deletions modes/basic/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,20 +214,23 @@ export const toolbarSections = {
'Zoom',
'Pan',
'TrackballRotate',
'WindowLevel',
// 'WindowLevel', // Window level button disabled
'Capture',
'Layout',
'Crosshairs',
'MoreTools',
],

[TOOLBAR_SECTIONS.viewportActionMenu.topLeft]: ['orientationMenu', 'dataOverlayMenu'],
// Orientation and data overlay menus disabled
[TOOLBAR_SECTIONS.viewportActionMenu.topLeft]: [
/* 'orientationMenu', 'dataOverlayMenu' */
],

[TOOLBAR_SECTIONS.viewportActionMenu.bottomMiddle]: ['AdvancedRenderingControls'],

AdvancedRenderingControls: [
'windowLevelMenuEmbedded',
'voiManualControlMenu',
// 'windowLevelMenuEmbedded', // Window level menu disabled
// 'voiManualControlMenu', // VOI manual control disabled
'Colorbar',
'opacityMenu',
'thresholdMenu',
Expand All @@ -239,7 +242,10 @@ export const toolbarSections = {
'navigationComponent',
],

[TOOLBAR_SECTIONS.viewportActionMenu.bottomLeft]: ['windowLevelMenu'],
// Window level menu disabled in bottom left
[TOOLBAR_SECTIONS.viewportActionMenu.bottomLeft]: [
/* 'windowLevelMenu' */
],

MeasurementTools: [
'Length',
Expand Down
Loading