feat: Add extensibility for tmtv and segmentation modes

2026-07-08 14:08:59 -04:00
1 parent 76687cf496
commit 84c7d17b13
@@ -3,17 +3,20 @@
 // Local development configuration.
 //
 // This is the default config for the dev server (`pnpm run dev`, `dev:fast`,
-// `start`). Like config/netlify.js it is full-featured — every data source is
-// enabled and the `?customization=` URL feature is ON via
-// `customizationUrlPrefixes` — so the whole app can be exercised locally. The
-// locked-down config/default.js is what a plain production build emits instead.
+// `start`). It is intentionally kept at parity with config/netlify.js (the
+// public demo deploy): every data source is enabled, the `?customization=` URL
+// feature is ON via `customizationUrlPrefixes`, and the same startup
+// `customizationService` modules are loaded — so the whole app, including
+// customizations, can be exercised locally exactly as it runs on the demo.
+// The locked-down config/default.js is what a plain production build emits
+// instead.
 window.config = {
  name: 'config/dev.js',
  routerBasename: null,
  // whiteLabeling: {},
  extensions: [],
  modes: [],
-  customizationService: {},
+  customizationService: ['@ohif/extension-default.customizationModule.theme'],

  // URL-driven customizations (?customization=). The `default` prefix (no
  // slashes) is used for values without a leading slash; every other prefix
@@ -0,0 +1,40 @@
+// URL-loaded customization: segmentationAnnotationTools
+//
+// Enables the measurement/annotation tools inside the segmentation mode by
+// composing capability blocks the cornerstone extension already exports:
+//
+//   - the annotation buttons are already registered by the mode (its button
+//     list includes `cornerstone.toolbarButtons`), so the toolbar only needs a
+//     `MeasurementTools` section added to the primary bar,
+//   - the annotation tools themselves are added to the mode's tool groups via
+//     `cornerstone.annotationToolGroupTools`,
+//   - and the measurement panel is appended so annotations can be reviewed.
+//
+// Load it with `?customization=segmentationAnnotationTools`.
+{
+  "global": {
+    "cornerstone.segmentationModeToolbarSections": {
+      "primary": { "$unshift": ["MeasurementTools"] },
+      "MeasurementTools": {
+        "$set": [
+          "Length",
+          "Bidirectional",
+          "ArrowAnnotate",
+          "EllipticalROI",
+          "RectangleROI",
+          "CircleROI",
+          "PlanarFreehandROI",
+          "SplineROI",
+          "LivewireContour"
+        ]
+      }
+    },
+    "segmentation.toolGroupAdditions": {
+      "default": { "$push": ["cornerstone.annotationToolGroupTools"] },
+      "mpr": { "$push": ["cornerstone.annotationToolGroupTools"] }
+    },
+    "segmentation.rightPanels": {
+      "$push": ["@ohif/extension-cornerstone.panelModule.panelMeasurement"]
+    }
+  }
+}
@@ -0,0 +1,49 @@
+// URL-loaded customization: segmentationEditing
+//
+// Adds segmentation editing to the basic and longitudinal (viewer) modes by
+// composing the capability blocks the cornerstone extension already exports:
+//
+//   - the segmentation editing toolbar buttons and toolbox section wiring
+//     (`cornerstone.segmentationToolbarButtons` / `cornerstone.segmentationToolbarSections`),
+//   - the segmentation editing tools for the modes' tool groups
+//     (`cornerstone.segmentationToolGroupTools`),
+//   - the segmentation panels that render the editing toolbox
+//     (`panelSegmentationWithToolsLabelMap` / `panelSegmentationWithToolsContour`),
+//   - and enables editing in the segmentation panel.
+//
+// Both modes read the `basic.*` toolbar/tool-group customizations (longitudinal
+// extends the basic mode instance), so a single set of commands covers both;
+// only the right-panel lists are mode specific.
+//
+// Load it with `?customization=segmentationEditing`.
+{
+  "global": {
+    "basic.toolbarButtons": {
+      "$push": ["cornerstone.segmentationToolbarButtons"]
+    },
+    "basic.toolbarSections": {
+      "$push": ["cornerstone.segmentationToolbarSections"]
+    },
+    "basic.toolGroupAdditions": {
+      "default": { "$push": ["cornerstone.segmentationToolGroupTools"] },
+      "mpr": { "$push": ["cornerstone.segmentationToolGroupTools"] }
+    },
+    "basic.rightPanels": {
+      "$set": [
+        "@ohif/extension-cornerstone.panelModule.panelSegmentationWithToolsLabelMap",
+        "@ohif/extension-cornerstone.panelModule.panelSegmentationWithToolsContour",
+        "@ohif/extension-cornerstone.panelModule.panelMeasurement"
+      ]
+    },
+    "longitudinal.rightPanels": {
+      "$set": [
+        "@ohif/extension-cornerstone.panelModule.panelSegmentationWithToolsLabelMap",
+        "@ohif/extension-cornerstone.panelModule.panelSegmentationWithToolsContour",
+        "@ohif/extension-measurement-tracking.panelModule.trackedMeasurements"
+      ]
+    },
+    // The basic/longitudinal modes disable segmentation panel editing only
+    // when no customization has expressed a preference, so this enables it.
+    "panelSegmentation.disableEditing": { "$set": false }
+  }
+}
@@ -179,13 +179,23 @@ or the full demo source list, you have two options:

 ## New `config/dev.js`; dev server no longer uses `default.js`

+`config/default.js` is now **only** the default for a full production build. The
+dev server gets a full-featured config instead, so `?customization=` and the
+complete data-source list are available while developing without editing
+`default.js`.
+
 - **`config/dev.js`** (new) is the full-featured local-development config: every
  data source enabled and `?customization=` turned on. The dev-server scripts
-  (`pnpm run dev`, `dev:fast`, `start`) now default to `config/dev.js`.
- **`config/netlify.js`** is the public demo / Netlify deploy config: the full
-  data source set plus `customizationUrlPrefixes: { default: './customizations/' }`.
- **`config/default.js`** remains the fallback for a real production build
-  (`pnpm run build` with no `APP_CONFIG`).
+  (`pnpm run dev`, `dev:fast`, `start`) now default to `config/dev.js`. It is
+  kept at **parity with `config/netlify.js`** — including the startup
+  `customizationService` modules (e.g. the appearance/theme customization) — so
+  customizations behave locally exactly as they do on the public demo.
+- **`config/netlify.js`** is the public demo / Netlify deploy config
+  (`build:viewer:ci`): the full data source set plus
+  `customizationUrlPrefixes: { default: './customizations/' }` and the same
+  `customizationService` modules.
+- **`config/default.js`** is the locked-down baseline and is the default **only**
+  for a real production build (`pnpm run build` with no `APP_CONFIG`).

 ### `APP_CONFIG` is honored, not clobbered

@@ -207,6 +207,46 @@ tool (drag to rotate the image freely, unlike the fixed 90° *Rotate Right*):
 > module applies at the *global* scope, the `$push` **extends** the built-in buttons rather than
 > replacing them. The same pattern works for any tool already in the active tool group.

+#### 4. Compose whole capability blocks into a mode
+
+Each shipped mode reads its toolbar, tool-group additions and panel lists through per-mode
+customization keys, and the values are **lists that may reference other customizations by name**.
+Extensions register both the per-mode defaults and reusable "capability blocks", so a JSON module can
+extend a mode by pushing a block's *name* instead of restating its contents.
+
+Per-mode keys (registered by the cornerstone / measurement-tracking / tmtv extensions):
+
+| Mode | Buttons | Sections | Tool group additions | Panels |
+| --- | --- | --- | --- | --- |
+| basic & longitudinal | `basic.toolbarButtons` | `basic.toolbarSections` | `basic.toolGroupAdditions` | `basic.leftPanels` / `basic.rightPanels` (longitudinal: `longitudinal.*`) |
+| segmentation | `segmentation.toolbarButtons` | `segmentation.toolbarSections` | `segmentation.toolGroupAdditions` | `segmentation.leftPanels` / `segmentation.rightPanels` |
+| tmtv | `tmtv.toolbarButtons` | `tmtv.toolbarSections` | `tmtv.toolGroupAdditions` | `tmtv.leftPanels` / `tmtv.rightPanels` |
+
+Capability blocks exported by the cornerstone extension:
+
+- `cornerstone.toolbarButtons` / `cornerstone.toolbarSections` — the general viewer toolbar.
+- `cornerstone.segmentationToolbarButtons` / `cornerstone.segmentationToolbarSections` — the
+  segmentation editing buttons and the toolbox section wiring rendered by the
+  `panelSegmentationWithTools*` panels.
+- `cornerstone.segmentationModeToolbarSections` — the segmentation mode's main toolbar layout.
+- `cornerstone.segmentationToolGroupTools` — the segmentation editing tools (brushes, scissors,
+  contour tools) as a `{ passive: [...] }` block for `toolGroupAdditions`.
+- `cornerstone.annotationToolGroupTools` — the measurement/annotation tools as a
+  `{ passive: [...] }` block for `toolGroupAdditions`.
+
+Two shipped modules demonstrate the pattern:
+
+- [`segmentationEditing.jsonc`](https://github.com/OHIF/Viewers/blob/master/platform/app/public/customizations/segmentationEditing.jsonc)
+  (`?customization=segmentationEditing`) adds segmentation editing to the basic and longitudinal
+  modes: it pushes the segmentation button/section/tool blocks onto the `basic.*` keys, swaps the
+  right panels to the segmentation panels with tools, and enables editing via
+  `panelSegmentation.disableEditing`.
+- [`segmentationAnnotationTools.jsonc`](https://github.com/OHIF/Viewers/blob/master/platform/app/public/customizations/segmentationAnnotationTools.jsonc)
+  (`?customization=segmentationAnnotationTools`) enables the annotation tools inside the
+  segmentation mode: it adds a `MeasurementTools` section to the primary bar, pushes
+  `cornerstone.annotationToolGroupTools` onto `segmentation.toolGroupAdditions`, and appends the
+  measurement panel.
+
 Each payload value uses [immutability-helper](https://github.com/kolodny/immutability-helper)
 commands (`$set`, `$push`, `$merge`, ...) exactly like `window.config` customizations, so a module can
 also append to a list or merge into an existing object rather than replacing it wholesale.