Skip to content

Commit 3dd5c70

Browse files
wayfarer3130claude
wayfarer3130
and
claude
authored
feat: Add customization URL parameter (#5992)
* Add customization URL parameter * fix: Preserve should be customizeable * Update customizations docs * fix: Overlay items on patient name * Add customization test * Fix resolve to absolute path * fix: Warn on no data in load * Remove unused customization stuff * fix: PR comments * Update stored parameters to only use an array for mulitples * Remove requires ohif.* special call out * Remove strict mode * PR comments * Document segmentation examples * Add three examples as requested * PR comments * lock * Remove old customizatoin export * fix: Ordering issues on customization loads * fix: Use correct default for dev builds app config * Fixes for conflicts * chore: restore pnpm-lock.yaml to match master The lockfile diff was incidental peer-descriptor churn and carried no functional dependency change. It tripped the CircleCI security-audit gate (which only runs when pnpm-lock.yaml is in the PR diff), surfacing a pre-existing critical `decompress` transitive vuln that also exists on master. Restoring master's lockfile removes the audit trigger. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(ci): restore json5 lockfile entry; ignore unfixable decompress GHSA The previous commit restored pnpm-lock.yaml from master, which dropped the json5@2.2.3 entry that platform/core legitimately depends on (JSONC parsing for the customization feature). That broke `--frozen-lockfile` install (ERR_PNPM_OUTDATED_LOCKFILE). This restores the correct lockfile. Because the lockfile must change (json5), the CircleCI security-audit gate runs and previously failed on a critical `decompress` <=4.2.1 zip-slip advisory. This is a pre-existing transitive vuln (present on master too) with no published patch — decompress's latest release is 4.2.1, so no version bump/override can resolve it. It reaches the tree only via @itk-wasm/dam, a build/data-asset extraction tool under @cornerstonejs/labelmap-interpolation. Add GHSA-mp2f-45pm-3cg9 to the existing pnpm-workspace.yaml auditConfig ignoreGhsas accepted-risk list, matching how the repo already exempts other build-tooling advisories. `pnpm audit --audit-level high` now passes locally (1 critical ignored, 0 high). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * test(e2e): fix visitStudy URL encoding that broke mpr2 study load The visitStudy rewrite (added for the ?customization= option) built the URL with new URLSearchParams({ StudyInstanceUIDs: studyInstanceUID }), which percent-encodes the value. mpr2.spec.ts embeds an extra param in the UID string ('<uid>&hangingprotocolid=mpr'), so the & and = were encoded and the whole thing collapsed into one invalid StudyInstanceUIDs value -> the study could not be found ('studies are not available'), the viewer never rendered, and the side-panel-header-right click timed out. Restore master's raw concatenation for StudyInstanceUIDs (so embedded params survive as separate query params) while still appending the customization option separately. Only mpr2 embeds & in the UID, matching the single failure. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * PR comments --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 3d9a17b commit 3dd5c70

58 files changed

Lines changed: 3368 additions & 543 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎extensions/cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import './CustomizableViewportOverlay.css';
1414
import { useViewportRendering } from '../../hooks';
1515

1616
const EPSILON = 1e-4;
17-
const { formatPN } = utils;
17+
const { formatPN, formatValue } = utils;
1818

1919
type ViewportData = StackViewportData | VolumeViewportData;
2020

@@ -184,7 +184,12 @@ function CustomizableViewportOverlay({
184184
} else {
185185
const renderItem = customizationService.transform(item);
186186

187-
if (typeof renderItem.contentF === 'function') {
187+
if (
188+
renderItem &&
189+
typeof renderItem === 'object' &&
190+
'contentF' in renderItem &&
191+
typeof renderItem.contentF === 'function'
192+
) {
188193
return renderItem.contentF(overlayItemProps);
189194
}
190195
}
@@ -357,7 +362,8 @@ function OverlayItem(props) {
357362
const { instance, customization = {} } = props;
358363
const { color, attribute, title, label, background } = customization;
359364
const value = customization.contentF?.(props, customization) ?? instance?.[attribute];
360-
if (value === undefined || value === null) {
365+
const displayValue = formatValue(value);
366+
if (displayValue === null || displayValue === '') {
361367
return null;
362368
}
363369
return (
@@ -367,7 +373,7 @@ function OverlayItem(props) {
367373
title={title}
368374
>
369375
{label ? <span className="mr-1 shrink-0">{label}</span> : null}
370-
<span className="ml-0 shrink-0">{value}</span>
376+
<span className="ml-0 shrink-0">{displayValue}</span>
371377
</div>
372378
);
373379
}

modes/basic/src/toolbarButtons.ts renamed to extensions/cornerstone/src/customizations/toolbarButtonsCustomization.ts

Lines changed: 91 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import type { Button } from '@ohif/core/types';
22

33
import { EVENTS } from '@cornerstonejs/core';
4-
import { ViewportGridService } from '@ohif/core';
4+
import { ViewportGridService, ToolbarService } from '@ohif/core';
55
import i18n from 'i18next';
66

7+
const { TOOLBAR_SECTIONS } = ToolbarService;
8+
79
const callbacks = (toolName: string) => [
810
{
911
commandName: 'setViewportForToolConfiguration',
@@ -708,4 +710,91 @@ const toolbarButtons: Button[] = [
708710
// },
709711
];
710712

711-
export default toolbarButtons;
713+
/**
714+
* Default toolbar layout: which buttons appear in each toolbar section.
715+
* Registered as a customization so modes (and `?customization=` modules) can
716+
* append/replace entries without rebuilding.
717+
*/
718+
export const toolbarSections = {
719+
[TOOLBAR_SECTIONS.primary]: [
720+
'MeasurementTools',
721+
'Zoom',
722+
'Pan',
723+
'TrackballRotate',
724+
'WindowLevel',
725+
'Capture',
726+
'Layout',
727+
'Crosshairs',
728+
'MoreTools',
729+
],
730+
731+
[TOOLBAR_SECTIONS.viewportActionMenu.topLeft]: ['orientationMenu', 'dataOverlayMenu'],
732+
733+
[TOOLBAR_SECTIONS.viewportActionMenu.bottomMiddle]: ['AdvancedRenderingControls'],
734+
735+
AdvancedRenderingControls: [
736+
'windowLevelMenuEmbedded',
737+
'voiManualControlMenu',
738+
'Colorbar',
739+
'opacityMenu',
740+
'thresholdMenu',
741+
],
742+
743+
[TOOLBAR_SECTIONS.viewportActionMenu.topRight]: [
744+
'modalityLoadBadge',
745+
'trackingStatus',
746+
'navigationComponent',
747+
],
748+
749+
[TOOLBAR_SECTIONS.viewportActionMenu.bottomLeft]: ['windowLevelMenu'],
750+
751+
MeasurementTools: [
752+
'Length',
753+
'Bidirectional',
754+
'ArrowAnnotate',
755+
'EllipticalROI',
756+
'RectangleROI',
757+
'CircleROI',
758+
'PlanarFreehandROI',
759+
'SplineROI',
760+
'LivewireContour',
761+
],
762+
763+
MoreTools: [
764+
'Reset',
765+
'rotate-right',
766+
'flipHorizontal',
767+
'ImageSliceSync',
768+
'ReferenceLines',
769+
'ImageOverlayViewer',
770+
'StackScroll',
771+
'invert',
772+
'Probe',
773+
'Cine',
774+
'Angle',
775+
'CobbAngle',
776+
'Magnify',
777+
'CalibrationLine',
778+
'TagBrowser',
779+
'AdvancedMagnify',
780+
'UltrasoundDirectionalTool',
781+
'WindowLevelRegion',
782+
'SegmentLabelTool',
783+
],
784+
};
785+
786+
/**
787+
* Customizations registered (at default scope) by the cornerstone extension:
788+
* - `cornerstone.toolbarButtons` – the default toolbar button definitions
789+
* - `cornerstone.toolbarSections` – the default toolbar layout (section -> button ids)
790+
*
791+
* Modes read these by name in `onModeEnter`; URL `?customization=` modules can
792+
* extend them with immutability-helper commands (e.g. `$push` a new button).
793+
*/
794+
const toolbarButtonsCustomization = {
795+
'cornerstone.toolbarButtons': toolbarButtons,
796+
'cornerstone.toolbarSections': toolbarSections,
797+
};
798+
799+
export { toolbarButtons };
800+
export default toolbarButtonsCustomization;

‎extensions/cornerstone/src/getCustomizationModule.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import volumeRenderingCustomization from './customizations/volumeRenderingCustom
88
import colorbarCustomization from './customizations/colorbarCustomization';
99
import modalityColorMapCustomization from './customizations/modalityColorMapCustomization';
1010
import windowLevelPresetsCustomization from './customizations/windowLevelPresetsCustomization';
11+
import toolbarButtonsCustomization from './customizations/toolbarButtonsCustomization';
1112
import miscCustomization from './customizations/miscCustomization';
1213
import captureViewportModalCustomization from './customizations/captureViewportModalCustomization';
1314
import viewportDownloadWarningCustomization from './customizations/viewportDownloadWarningCustomization';
@@ -32,6 +33,7 @@ function getCustomizationModule({ commandsManager, servicesManager, extensionMan
3233
...colorbarCustomization,
3334
...modalityColorMapCustomization,
3435
...windowLevelPresetsCustomization,
36+
...toolbarButtonsCustomization,
3537
...miscCustomization,
3638
...captureViewportModalCustomization,
3739
...viewportDownloadWarningCustomization,

‎extensions/cornerstone/src/initCornerstoneTools.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
WindowLevelTool,
44
SegmentBidirectionalTool,
55
StackScrollTool,
6+
PlanarRotateTool,
67
VolumeRotateTool,
78
ZoomTool,
89
MIPJumpToClickTool,
@@ -74,6 +75,7 @@ export default function initCornerstoneTools(configuration = {}) {
7475
addTool(SegmentBidirectionalTool);
7576
addTool(WindowLevelTool);
7677
addTool(StackScrollTool);
78+
addTool(PlanarRotateTool);
7779
addTool(VolumeRotateTool);
7880
addTool(ZoomTool);
7981
addTool(ProbeTool);
@@ -138,6 +140,7 @@ const toolNames = {
138140
WindowLevel: WindowLevelTool.toolName,
139141
StackScroll: StackScrollTool.toolName,
140142
Zoom: ZoomTool.toolName,
143+
PlanarRotate: PlanarRotateTool.toolName,
141144
VolumeRotate: VolumeRotateTool.toolName,
142145
MipJumpToClick: MIPJumpToClickTool.toolName,
143146
Length: LengthTool.toolName,

‎extensions/default/src/DicomWebDataSource/qido.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ function processResults(qidoStudies) {
5252
accession: getString(qidoStudy['00080050']) || '', // short string, probably a number?
5353
mrn: getString(qidoStudy['00100020']) || '', // medicalRecordNumber
5454
patientName: utils.formatPN(getName(qidoStudy['00100010'])) || '',
55+
patientBirthDate: getString(qidoStudy['00100030']) || '', // YYYYMMDD
5556
instances: Number(getString(qidoStudy['00201208'])) || 0, // number
5657
description: getString(qidoStudy['00081030']) || '',
5758
modalities: getString(getModalities(qidoStudy['00080060'], qidoStudy['00080061'])) || '',
@@ -153,6 +154,7 @@ function mapParams(params, options = {}) {
153154
'00081030', // Study Description
154155
'00080060', // Modality
155156
'00080090', // Referring Physician's Name
157+
'00100030', // Patient's Birth Date
156158
// Add more fields here if you want them in the result
157159
].join(',');
158160

‎extensions/default/src/ViewerLayout/ViewerHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ function ViewerHeader({ appConfig }: withAppTypes<{ appConfig: AppTypes.Config }
2828
if (dataSourceIdx !== -1 && existingDataSource) {
2929
searchQuery.append('datasources', pathname.substring(dataSourceIdx + 1));
3030
}
31-
preserveQueryParameters(searchQuery);
31+
preserveQueryParameters(searchQuery, customizationService);
3232

3333
navigate({
3434
pathname: '/',

‎extensions/default/src/customizations/overlayItemCustomization.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { utils } from '@ohif/core';
23

34
export default {
45
'ohif.overlayItem': function (props) {
@@ -13,7 +14,8 @@ export default {
1314
: this.contentF && typeof this.contentF === 'function'
1415
? this.contentF(props)
1516
: null;
16-
if (!value) {
17+
const displayValue = utils.formatValue(value);
18+
if (!displayValue) {
1719
return null;
1820
}
1921

@@ -24,7 +26,7 @@ export default {
2426
title={this.title || ''}
2527
>
2628
{this.label && <span className="mr-1 shrink-0">{this.label}</span>}
27-
<span className="font-light">{value}</span>
29+
<span className="font-light">{displayValue}</span>
2830
</span>
2931
);
3032
},

‎modes/basic/src/index.tsx‎

Lines changed: 22 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import update from 'immutability-helper';
2-
import { ToolbarService, utils } from '@ohif/core';
2+
import { utils } from '@ohif/core';
33

44
import initToolGroups from './initToolGroups';
5-
import toolbarButtons from './toolbarButtons';
65
import { id } from './id';
76

8-
const { TOOLBAR_SECTIONS } = ToolbarService;
97
const { structuredCloneWithFunctions } = utils;
108

119
/**
@@ -145,9 +143,22 @@ export function onModeEnter({
145143
// Init Default and SR ToolGroups
146144
initToolGroups(extensionManager, toolGroupService, commandsManager);
147145

148-
toolbarService.register(this.toolbarButtons);
146+
// Toolbar buttons and layout may be supplied either as a customization name
147+
// (a string, resolved through the customization service so `?customization=`
148+
// modules can extend the cornerstone-registered defaults) or as a literal
149+
// value (the button array / sections object) for modes that define them inline.
150+
const resolveToolbarCustomization = (value: unknown) =>
151+
typeof value === 'string' ? customizationService.getCustomization(value) : value;
149152

150-
for (const [key, section] of Object.entries(this.toolbarSections)) {
153+
const toolbarButtons = resolveToolbarCustomization(this.toolbarButtons) as any;
154+
const toolbarSections = (resolveToolbarCustomization(this.toolbarSections) ?? {}) as Record<
155+
string,
156+
string[]
157+
>;
158+
159+
toolbarService.register(toolbarButtons);
160+
161+
for (const [key, section] of Object.entries(toolbarSections)) {
151162
toolbarService.updateSection(key, section);
152163
}
153164

@@ -212,74 +223,6 @@ export function onModeExit({ servicesManager }: withAppTypes) {
212223
cornerstoneViewportService.destroy();
213224
}
214225

215-
export const toolbarSections = {
216-
[TOOLBAR_SECTIONS.primary]: [
217-
'MeasurementTools',
218-
'Zoom',
219-
'Pan',
220-
'TrackballRotate',
221-
'WindowLevel',
222-
'Capture',
223-
'Layout',
224-
'Crosshairs',
225-
'MoreTools',
226-
],
227-
228-
[TOOLBAR_SECTIONS.viewportActionMenu.topLeft]: ['orientationMenu', 'dataOverlayMenu'],
229-
230-
[TOOLBAR_SECTIONS.viewportActionMenu.bottomMiddle]: ['AdvancedRenderingControls'],
231-
232-
AdvancedRenderingControls: [
233-
'windowLevelMenuEmbedded',
234-
'voiManualControlMenu',
235-
'Colorbar',
236-
'opacityMenu',
237-
'thresholdMenu',
238-
],
239-
240-
[TOOLBAR_SECTIONS.viewportActionMenu.topRight]: [
241-
'modalityLoadBadge',
242-
'trackingStatus',
243-
'navigationComponent',
244-
],
245-
246-
[TOOLBAR_SECTIONS.viewportActionMenu.bottomLeft]: ['windowLevelMenu'],
247-
248-
MeasurementTools: [
249-
'Length',
250-
'Bidirectional',
251-
'ArrowAnnotate',
252-
'EllipticalROI',
253-
'RectangleROI',
254-
'CircleROI',
255-
'PlanarFreehandROI',
256-
'SplineROI',
257-
'LivewireContour',
258-
],
259-
260-
MoreTools: [
261-
'Reset',
262-
'rotate-right',
263-
'flipHorizontal',
264-
'ImageSliceSync',
265-
'ReferenceLines',
266-
'ImageOverlayViewer',
267-
'StackScroll',
268-
'invert',
269-
'Probe',
270-
'Cine',
271-
'Angle',
272-
'CobbAngle',
273-
'Magnify',
274-
'CalibrationLine',
275-
'TagBrowser',
276-
'AdvancedMagnify',
277-
'UltrasoundDirectionalTool',
278-
'WindowLevelRegion',
279-
'SegmentLabelTool',
280-
],
281-
};
282-
283226
export const basicLayout = {
284227
id: ohif.layout,
285228
props: {
@@ -342,7 +285,10 @@ export const modeInstance = {
342285
hide: false,
343286
displayName: 'Non-Longitudinal Basic',
344287
_activatePanelTriggersSubscriptions: [],
345-
toolbarSections,
288+
// Toolbar buttons and layout are referenced by customization name; the
289+
// cornerstone extension registers the defaults and `?customization=` modules
290+
// can extend them. onModeEnter resolves these names via the customization service.
291+
toolbarSections: 'cornerstone.toolbarSections',
346292

347293
/**
348294
* Lifecycle hooks
@@ -364,7 +310,7 @@ export const modeInstance = {
364310
// general handler needs to come last. For this case, the dicomvideo must
365311
// come first to remove video transfer syntax before ohif uses images
366312
sopClassHandlers,
367-
toolbarButtons,
313+
toolbarButtons: 'cornerstone.toolbarButtons',
368314
enableSegmentationEdit: false,
369315
nonModeModalities: NON_IMAGE_MODALITIES,
370316
};
@@ -389,4 +335,4 @@ export const mode = {
389335
};
390336

391337
export default mode;
392-
export { initToolGroups, toolbarButtons };
338+
export { initToolGroups };

‎modes/basic/src/initToolGroups.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ function initDefaultToolGroup(extensionManager, toolGroupService, commandsManage
6969
{ toolName: toolNames.Angle },
7070
{ toolName: toolNames.CobbAngle },
7171
{ toolName: toolNames.Magnify },
72+
{ toolName: toolNames.PlanarRotate },
7273
{ toolName: toolNames.CalibrationLine },
7374
{
7475
toolName: toolNames.PlanarFreehandContourSegmentation,

‎modes/longitudinal/src/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import i18n from 'i18next';
22
import { id } from './id';
3-
import { initToolGroups, toolbarButtons, cornerstone,
3+
import { initToolGroups, cornerstone,
44
ohif,
55
dicomsr,
66
dicomvideo,
@@ -73,4 +73,4 @@ const mode = {
7373
};
7474

7575
export default mode;
76-
export { initToolGroups, toolbarButtons };
76+
export { initToolGroups };

0 commit comments

Comments
 (0)