feat: Add customization URL parameter

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

@@ -14,7 +14,7 @@ import './CustomizableViewportOverlay.css';
 import { useViewportRendering } from '../../hooks';
 
 const EPSILON = 1e-4;
-const { formatPN } = utils;
+const { formatPN, formatValue } = utils;
 
 type ViewportData = StackViewportData | VolumeViewportData;
 
@@ -184,7 +184,12 @@ function CustomizableViewportOverlay({
       } else {
         const renderItem = customizationService.transform(item);
 
-        if (typeof renderItem.contentF === 'function') {
+        if (
+          renderItem &&
+          typeof renderItem === 'object' &&
+          'contentF' in renderItem &&
+          typeof renderItem.contentF === 'function'
+        ) {
           return renderItem.contentF(overlayItemProps);
         }
       }
@@ -357,7 +362,8 @@ function OverlayItem(props) {
   const { instance, customization = {} } = props;
   const { color, attribute, title, label, background } = customization;
   const value = customization.contentF?.(props, customization) ?? instance?.[attribute];
-  if (value === undefined || value === null) {
+  const displayValue = formatValue(value);
+  if (displayValue === null || displayValue === '') {
     return null;
   }
   return (
@@ -367,7 +373,7 @@ function OverlayItem(props) {
       title={title}
     >
       {label ? <span className="mr-1 shrink-0">{label}</span> : null}
-      <span className="ml-0 shrink-0">{value}</span>
+      <span className="ml-0 shrink-0">{displayValue}</span>
     </div>
   );
 }

modes/basic/src/toolbarButtons.ts → extensions/cornerstone/src/customizations/toolbarButtonsCustomization.ts

@@ -1,9 +1,11 @@
 import type { Button } from '@ohif/core/types';
 
 import { EVENTS } from '@cornerstonejs/core';
-import { ViewportGridService } from '@ohif/core';
+import { ViewportGridService, ToolbarService } from '@ohif/core';
 import i18n from 'i18next';
 
+const { TOOLBAR_SECTIONS } = ToolbarService;
+
 const callbacks = (toolName: string) => [
   {
     commandName: 'setViewportForToolConfiguration',
@@ -708,4 +710,91 @@ const toolbarButtons: Button[] = [
   // },
 ];
 
-export default toolbarButtons;
+/**
+ * Default toolbar layout: which buttons appear in each toolbar section.
+ * Registered as a customization so modes (and `?customization=` modules) can
+ * append/replace entries without rebuilding.
+ */
+export const toolbarSections = {
+  [TOOLBAR_SECTIONS.primary]: [
+    'MeasurementTools',
+    'Zoom',
+    'Pan',
+    'TrackballRotate',
+    'WindowLevel',
+    'Capture',
+    'Layout',
+    'Crosshairs',
+    'MoreTools',
+  ],
+
+  [TOOLBAR_SECTIONS.viewportActionMenu.topLeft]: ['orientationMenu', 'dataOverlayMenu'],
+
+  [TOOLBAR_SECTIONS.viewportActionMenu.bottomMiddle]: ['AdvancedRenderingControls'],
+
+  AdvancedRenderingControls: [
+    'windowLevelMenuEmbedded',
+    'voiManualControlMenu',
+    'Colorbar',
+    'opacityMenu',
+    'thresholdMenu',
+  ],
+
+  [TOOLBAR_SECTIONS.viewportActionMenu.topRight]: [
+    'modalityLoadBadge',
+    'trackingStatus',
+    'navigationComponent',
+  ],
+
+  [TOOLBAR_SECTIONS.viewportActionMenu.bottomLeft]: ['windowLevelMenu'],
+
+  MeasurementTools: [
+    'Length',
+    'Bidirectional',
+    'ArrowAnnotate',
+    'EllipticalROI',
+    'RectangleROI',
+    'CircleROI',
+    'PlanarFreehandROI',
+    'SplineROI',
+    'LivewireContour',
+  ],
+
+  MoreTools: [
+    'Reset',
+    'rotate-right',
+    'flipHorizontal',
+    'ImageSliceSync',
+    'ReferenceLines',
+    'ImageOverlayViewer',
+    'StackScroll',
+    'invert',
+    'Probe',
+    'Cine',
+    'Angle',
+    'CobbAngle',
+    'Magnify',
+    'CalibrationLine',
+    'TagBrowser',
+    'AdvancedMagnify',
+    'UltrasoundDirectionalTool',
+    'WindowLevelRegion',
+    'SegmentLabelTool',
+  ],
+};
+
+/**
+ * Customizations registered (at default scope) by the cornerstone extension:
+ *   - `cornerstone.toolbarButtons`  – the default toolbar button definitions
+ *   - `cornerstone.toolbarSections` – the default toolbar layout (section -> button ids)
+ *
+ * Modes read these by name in `onModeEnter`; URL `?customization=` modules can
+ * extend them with immutability-helper commands (e.g. `$push` a new button).
+ */
+const toolbarButtonsCustomization = {
+  'cornerstone.toolbarButtons': toolbarButtons,
+  'cornerstone.toolbarSections': toolbarSections,
+};
+
+export { toolbarButtons };
+export default toolbarButtonsCustomization;

extensions/cornerstone/src/getCustomizationModule.tsx

@@ -8,6 +8,7 @@ import volumeRenderingCustomization from './customizations/volumeRenderingCustom
 import colorbarCustomization from './customizations/colorbarCustomization';
 import modalityColorMapCustomization from './customizations/modalityColorMapCustomization';
 import windowLevelPresetsCustomization from './customizations/windowLevelPresetsCustomization';
+import toolbarButtonsCustomization from './customizations/toolbarButtonsCustomization';
 import miscCustomization from './customizations/miscCustomization';
 import captureViewportModalCustomization from './customizations/captureViewportModalCustomization';
 import viewportDownloadWarningCustomization from './customizations/viewportDownloadWarningCustomization';
@@ -32,6 +33,7 @@ function getCustomizationModule({ commandsManager, servicesManager, extensionMan
         ...colorbarCustomization,
         ...modalityColorMapCustomization,
         ...windowLevelPresetsCustomization,
+        ...toolbarButtonsCustomization,
         ...miscCustomization,
         ...captureViewportModalCustomization,
         ...viewportDownloadWarningCustomization,

extensions/cornerstone/src/initCornerstoneTools.js

@@ -3,6 +3,7 @@ import {
   WindowLevelTool,
   SegmentBidirectionalTool,
   StackScrollTool,
+  PlanarRotateTool,
   VolumeRotateTool,
   ZoomTool,
   MIPJumpToClickTool,
@@ -74,6 +75,7 @@ export default function initCornerstoneTools(configuration = {}) {
   addTool(SegmentBidirectionalTool);
   addTool(WindowLevelTool);
   addTool(StackScrollTool);
+  addTool(PlanarRotateTool);
   addTool(VolumeRotateTool);
   addTool(ZoomTool);
   addTool(ProbeTool);
@@ -138,6 +140,7 @@ const toolNames = {
   WindowLevel: WindowLevelTool.toolName,
   StackScroll: StackScrollTool.toolName,
   Zoom: ZoomTool.toolName,
+  PlanarRotate: PlanarRotateTool.toolName,
   VolumeRotate: VolumeRotateTool.toolName,
   MipJumpToClick: MIPJumpToClickTool.toolName,
   Length: LengthTool.toolName,

extensions/default/src/DicomWebDataSource/qido.js

@@ -52,6 +52,7 @@ function processResults(qidoStudies) {
       accession: getString(qidoStudy['00080050']) || '', // short string, probably a number?
       mrn: getString(qidoStudy['00100020']) || '', // medicalRecordNumber
       patientName: utils.formatPN(getName(qidoStudy['00100010'])) || '',
+      patientBirthDate: getString(qidoStudy['00100030']) || '', // YYYYMMDD
       instances: Number(getString(qidoStudy['00201208'])) || 0, // number
       description: getString(qidoStudy['00081030']) || '',
       modalities: getString(getModalities(qidoStudy['00080060'], qidoStudy['00080061'])) || '',
@@ -153,6 +154,7 @@ function mapParams(params, options = {}) {
     '00081030', // Study Description
     '00080060', // Modality
     '00080090', // Referring Physician's Name
+    '00100030', // Patient's Birth Date
     // Add more fields here if you want them in the result
   ].join(',');
 

extensions/default/src/ViewerLayout/ViewerHeader.tsx

@@ -28,7 +28,7 @@ function ViewerHeader({ appConfig }: withAppTypes<{ appConfig: AppTypes.Config }
     if (dataSourceIdx !== -1 && existingDataSource) {
       searchQuery.append('datasources', pathname.substring(dataSourceIdx + 1));
     }
-    preserveQueryParameters(searchQuery);
+    preserveQueryParameters(searchQuery, customizationService);
 
     navigate({
       pathname: '/',

extensions/default/src/customizations/overlayItemCustomization.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { utils } from '@ohif/core';
 
 export default {
   'ohif.overlayItem': function (props) {
@@ -13,7 +14,8 @@ export default {
         : this.contentF && typeof this.contentF === 'function'
           ? this.contentF(props)
           : null;
-    if (!value) {
+    const displayValue = utils.formatValue(value);
+    if (!displayValue) {
       return null;
     }
 
@@ -24,7 +26,7 @@ export default {
         title={this.title || ''}
       >
         {this.label && <span className="mr-1 shrink-0">{this.label}</span>}
-        <span className="font-light">{value}</span>
+        <span className="font-light">{displayValue}</span>
       </span>
     );
   },

modes/basic/src/index.tsx

@@ -1,11 +1,9 @@
 import update from 'immutability-helper';
-import { ToolbarService, utils } from '@ohif/core';
+import { utils } from '@ohif/core';
 
 import initToolGroups from './initToolGroups';
-import toolbarButtons from './toolbarButtons';
 import { id } from './id';
 
-const { TOOLBAR_SECTIONS } = ToolbarService;
 const { structuredCloneWithFunctions } = utils;
 
 /**
@@ -146,9 +144,22 @@ export function onModeEnter({
   // Init Default and SR ToolGroups
   initToolGroups(extensionManager, toolGroupService, commandsManager);
 
-  toolbarService.register(this.toolbarButtons);
+  // Toolbar buttons and layout may be supplied either as a customization name
+  // (a string, resolved through the customization service so `?customization=`
+  // modules can extend the cornerstone-registered defaults) or as a literal
+  // value (the button array / sections object) for modes that define them inline.
+  const resolveToolbarCustomization = (value: unknown) =>
+    typeof value === 'string' ? customizationService.getCustomization(value) : value;
 
-  for (const [key, section] of Object.entries(this.toolbarSections)) {
+  const toolbarButtons = resolveToolbarCustomization(this.toolbarButtons) as any;
+  const toolbarSections = (resolveToolbarCustomization(this.toolbarSections) ?? {}) as Record<
+    string,
+    string[]
+  >;
+
+  toolbarService.register(toolbarButtons);
+
+  for (const [key, section] of Object.entries(toolbarSections)) {
     toolbarService.updateSection(key, section);
   }
 
@@ -213,74 +224,6 @@ export function onModeExit({ servicesManager }: withAppTypes) {
   cornerstoneViewportService.destroy();
 }
 
-export const toolbarSections = {
-  [TOOLBAR_SECTIONS.primary]: [
-    'MeasurementTools',
-    'Zoom',
-    'Pan',
-    'TrackballRotate',
-    'WindowLevel',
-    'Capture',
-    'Layout',
-    'Crosshairs',
-    'MoreTools',
-  ],
-
-  [TOOLBAR_SECTIONS.viewportActionMenu.topLeft]: ['orientationMenu', 'dataOverlayMenu'],
-
-  [TOOLBAR_SECTIONS.viewportActionMenu.bottomMiddle]: ['AdvancedRenderingControls'],
-
-  AdvancedRenderingControls: [
-    'windowLevelMenuEmbedded',
-    'voiManualControlMenu',
-    'Colorbar',
-    'opacityMenu',
-    'thresholdMenu',
-  ],
-
-  [TOOLBAR_SECTIONS.viewportActionMenu.topRight]: [
-    'modalityLoadBadge',
-    'trackingStatus',
-    'navigationComponent',
-  ],
-
-  [TOOLBAR_SECTIONS.viewportActionMenu.bottomLeft]: ['windowLevelMenu'],
-
-  MeasurementTools: [
-    'Length',
-    'Bidirectional',
-    'ArrowAnnotate',
-    'EllipticalROI',
-    'RectangleROI',
-    'CircleROI',
-    'PlanarFreehandROI',
-    'SplineROI',
-    'LivewireContour',
-  ],
-
-  MoreTools: [
-    'Reset',
-    'rotate-right',
-    'flipHorizontal',
-    'ImageSliceSync',
-    'ReferenceLines',
-    'ImageOverlayViewer',
-    'StackScroll',
-    'invert',
-    'Probe',
-    'Cine',
-    'Angle',
-    'CobbAngle',
-    'Magnify',
-    'CalibrationLine',
-    'TagBrowser',
-    'AdvancedMagnify',
-    'UltrasoundDirectionalTool',
-    'WindowLevelRegion',
-    'SegmentLabelTool',
-  ],
-};
-
 export const basicLayout = {
   id: ohif.layout,
   props: {
@@ -343,7 +286,10 @@ export const modeInstance = {
   hide: false,
   displayName: 'Non-Longitudinal Basic',
   _activatePanelTriggersSubscriptions: [],
-  toolbarSections,
+  // Toolbar buttons and layout are referenced by customization name; the
+  // cornerstone extension registers the defaults and `?customization=` modules
+  // can extend them. onModeEnter resolves these names via the customization service.
+  toolbarSections: 'cornerstone.toolbarSections',
 
   /**
    * Lifecycle hooks
@@ -365,7 +311,7 @@ export const modeInstance = {
   // general handler needs to come last.  For this case, the dicomvideo must
   // come first to remove video transfer syntax before ohif uses images
   sopClassHandlers,
-  toolbarButtons,
+  toolbarButtons: 'cornerstone.toolbarButtons',
   enableSegmentationEdit: false,
   nonModeModalities: NON_IMAGE_MODALITIES,
 };
@@ -390,4 +336,4 @@ export const mode = {
 };
 
 export default mode;
-export { initToolGroups, toolbarButtons };
+export { initToolGroups };

modes/basic/src/initToolGroups.ts

@@ -69,6 +69,7 @@ function initDefaultToolGroup(extensionManager, toolGroupService, commandsManage
       { toolName: toolNames.Angle },
       { toolName: toolNames.CobbAngle },
       { toolName: toolNames.Magnify },
+      { toolName: toolNames.PlanarRotate },
       { toolName: toolNames.CalibrationLine },
       {
         toolName: toolNames.PlanarFreehandContourSegmentation,

modes/longitudinal/src/index.ts

@@ -1,6 +1,6 @@
 import i18n from 'i18next';
 import { id } from './id';
-import { initToolGroups, toolbarButtons, cornerstone,
+import { initToolGroups, cornerstone,
   ohif,
   dicomsr,
   dicomvideo,
@@ -73,4 +73,4 @@ const mode = {
 };
 
 export default mode;
-export { initToolGroups, toolbarButtons };
+export { initToolGroups };