ohif-viewer/platform/docs/docs/migration-guide/3p12-to-3p13/mode-panels.md
Bill Wallace b266c0a86a
feat: Add extensibility for tmtv and segmentation modes (#6128)
* feat: Add extensibility for tmtv and segmentation modes

* Fixes for ordering issues on laod

* Remove unnecessary reference lookup

* Chane side panel timing to fix tests

* PR comments - change how mode definitions get created

* Improvements to mode customizations

* Start organizing customizations

* Misc fixes for a customization demo page

* Security fixes

* PR requested changes to naming
2026-07-10 12:43:17 -04:00

2.9 KiB

sidebar_position sidebar_label title
10 Mode panel lists & customization Mode panel lists are standard customizations

Mode panel lists are standard customizations

3.13 lets a mode's sidebars be modified at runtime through the customization service — for every mode, with nothing to opt into. Modes declare their panels the standard way, as literal arrays in the layout:

props: {
  leftPanels: ['@ohif/extension-default.panelModule.seriesList'],
  rightPanels: ['@ohif/extension-cornerstone.panelModule.panelMeasurement'],
}

On mode enter the mode route layers the mode scope bottom-up and only then resolves the sidebars:

  1. the mode scope is reset;
  2. the layout's panel arrays are seeded as the standard leftPanels / rightPanels customizations (the bottom layer of the mode scope);
  3. the app config / URL mode phase blocks apply — the general * block, then the block keyed by the entered mode's id / route name;
  4. the sidebars resolve from the final leftPanels / rightPanels values (global-scope customizations, as always, win by scope precedence).

Customizing a mode's panels

Because the mode's own list is already in the customization service when the phase blocks apply, a ?customization= module (or window.config customization) targets the standard keys in a mode phase block — and immutability-helper commands compose with the mode's own list:

{
  "mode": {
    // Replace the right sidebar in the longitudinal mode (route name `viewer`)
    "viewer": {
      "rightPanels": {
        "$set": [
          "@ohif/extension-cornerstone.panelModule.panelSegmentationWithToolsLabelMap",
          "@ohif/extension-measurement-tracking.panelModule.trackedMeasurements"
        ]
      }
    },
    // Append a panel in the segmentation mode
    "segmentation": {
      "rightPanels": {
        "$push": ["@ohif/extension-cornerstone.panelModule.panelMeasurement"]
      }
    },
    // Or change every mode at once with the general block
    "*": {
      "leftPanels": { "$push": ["@ohif/extension-example.panelModule.myPanel"] }
    }
  }
}

See the shipped segmentation/segmentationEditing.jsonc and segmentation/segmentationAnnotationTools.jsonc modules for complete worked examples.

Migration notes

  • Existing modes need no changes. Literal panel arrays are the standard form and are now also the customizable form.
  • The per-mode panel-list names from early 3.13 betas are gone. If you wrote a customization against basic.leftPanels, longitudinal.rightPanels, segmentation.rightPanels, or tmtv.leftPanels, move it to the standard leftPanels / rightPanels keys inside a mode phase block keyed by the mode's route name (see above).