fix(toolbox): Preserve user-specified tool state and streamline command execution (#4063)

platform/docs/docs/README.md

@@ -44,7 +44,7 @@ Key features:
 | <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-volume-rendering.webp?raw=true" alt="Volume Rendering" width="350"/> | Volume Rendering  | [Demo](https://viewer.ohif.org/viewer?StudyInstanceUIDs=1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5&hangingprotocolId=mprAnd3DVolumeViewport) |
 | <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-pdf.webp?raw=true" alt="PDF" width="350"/> | PDF  | [Demo](https://viewer.ohif.org/viewer?StudyInstanceUIDs=2.25.317377619501274872606137091638706705333) |
 | <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-rtstruct.webp?raw=true" alt="RTSTRUCT" width="350"/> | RT STRUCT  | [Demo](https://viewer.ohif.org/viewer?StudyInstanceUIDs=1.3.6.1.4.1.5962.99.1.2968617883.1314880426.1493322302363.3.0) |
-| <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-4D.webp?raw=true" alt="4D" width="350"/> | 4D  | [Demo](https://viewer.ohif.org/dynamic-volume?StudyInstanceUIDs=2.25.232704420736447710317909004159492840763) |
+| <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-4d.webp?raw=true" alt="4D" width="350"/> | 4D  | [Demo](https://viewer.ohif.org/dynamic-volume?StudyInstanceUIDs=2.25.232704420736447710317909004159492840763) |
 | <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-video.webp?raw=true" alt="VIDEO" width="350"/> | Video  | [Demo](https://viewer.ohif.org/viewer?StudyInstanceUIDs=2.25.96975534054447904995905761963464388233) |
 | <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/microscopy.webp?raw=true" alt="microscopy" width="350"/> | Slide Microscopy  | [Demo](https://viewer.ohif.org/microscopy?StudyInstanceUIDs=2.25.141277760791347900862109212450152067508) |
 

platform/docs/docs/platform/extensions/modules/toolbar.md

@@ -91,7 +91,7 @@ Let's look at one of the evaluators (for `evaluate.cornerstoneTool`)
       return;
     }
 
-    const toolName = getToolNameForButton(button);
+    const toolName =  toolbarService.getToolNameForButton(button);
 
     if (!toolGroup || !toolGroup.hasTool(toolName)) {
       return {
@@ -405,7 +405,12 @@ state will get synchronized with the toolbar service automatically.
 Your toolbox toolbar buttons can have options, this is really useful
 for advanced tools that require to change some parameters. For example, the brush tool that requires the brush size to change or the mode (2D or 3D).
 
-currently we support three types of options
+:::note
+Toolbox with options will run the options commands
+on the mount of the toolbox component. This is useful for setting the initial state of the toolbox.
+:::
+
+Currently we support three types of options.
 
 ### Radio option
 
@@ -423,7 +428,6 @@ three different modes
       toolNames: ['CircleScissor', 'SphereScissor', 'RectangleScissor'],
     },
     icon: 'icon-tool-shape',
-    commands: _createSetToolActiveCommands('CircleScissor'),
     options: [
       {
         name: 'Shape',
@@ -456,7 +460,6 @@ We use this for brush radius change
     toolNames: ['CircularBrush', 'SphereBrush'],
     disabledText: 'Create new segmentation to enable this tool.',
   },
-  commands: _createSetToolActiveCommands('CircularBrush'),
   options: [
     {
       name: 'Radius (mm)',

platform/docs/docs/platform/services/data/MeasurementService.md

@@ -160,3 +160,23 @@ const _initMeasurementService = (MeasurementService, DisplaySetService) => {
   return csToolsVer4MeasurementSource;
 };
 ```
+
+
+## Auto complete
+Use a customization service to add more customizations for measurement labels. Later, when adding a measurement, the user will be prompted to choose from a list of labels.
+
+```js
+customizationService.addModeCustomizations([
+  {
+    id: 'measurementLabels',
+    labelOnMeasure: true,
+    exclusive: true,
+    items: [
+      { value: 'Head', label: 'Head' },
+      { value: 'Neck', label: 'Neck' },
+      { value: 'Knee', label: 'Knee' },
+      { value: 'Toe', label: 'Toe' },
+    ],
+  },
+]);
+```