feat(hp callback): Add viewport ready callback (#3772)

Co-authored-by: Ouwen Huang <ouwen.huang@duke.edu>

platform/docs/docs/platform/extensions/modules/hpModule.md

@@ -403,6 +403,7 @@ viewportStructure: {
       ],
     },
 },
+
 ```
 
 
@@ -559,3 +560,64 @@ Additional series level criteria, such as modality rules must be included at the
     },
   ],
 ```
+
+
+## Callbacks
+
+
+Hanging protocols in `OHIF-v3` provide the flexibility to define various callbacks that allow you to customize the behavior of your viewer when specific events occur during protocol execution. These callbacks are defined in the `ProtocolNotifications` type and can be added to your hanging protocol configuration.
+
+Each callback is an array of commands or actions that are executed when the event occurs.
+
+```js
+[
+  {
+    commandName: 'showDownloadViewportModal',
+    commandOptions: {}
+  }
+]
+```
+
+
+Here, we'll explain the available callbacks and their purposes:
+
+### `onProtocolExit`
+
+The `onProtocolExit` callback is executed after the protocol is exited and the new one is applied. This callback is useful for performing actions or executing commands when switching between hanging protocols.
+
+### `onProtocolEnter`
+
+The `onProtocolEnter` callback is executed after the protocol is entered and applied. You can use this callback to define actions or commands that should run when entering a specific hanging protocol.
+
+### `onLayoutChange`
+
+The `onLayoutChange` callback is executed before the layout change is started. You can use it to apply a specific hanging protocol based on the current layout or other criteria.
+
+### `onViewportDataInitialized`
+
+The `onViewportDataInitialized` callback is executed after the initial viewport grid data is set and all viewport data includes a designated display set. This callback runs during the initial layout setup for each stage. You can use it to perform actions or apply settings to the viewports at the start.
+
+Here is an example of how you can add these callbacks to your hanging protocol configuration:
+
+```javascript
+const protocol = {
+  id: 'myProtocol',
+  name: 'My Protocol',
+  // rest of the protocol configuration
+  callbacks: {
+    onProtocolExit: [
+      // Array of commands or actions to execute on protocol exit
+    ],
+    onProtocolEnter: [
+      // Array of commands or actions to execute on protocol enter
+    ],
+    onLayoutChange: [
+      // Array of commands or actions to execute on layout change
+    ],
+    onViewportDataInitialized: [
+      // Array of commands or actions to execute on viewport data initialization
+    ],
+  },
+  // protocolMatchingRules
+  // the rest
+};

platform/docs/docs/platform/services/data/HangingProtocolService.md

@@ -350,13 +350,13 @@ The below example modifies the included hanging protocol (extensions/tmtv/src/ge
 
 ```javascript
 ptDisplaySet: {
-       ...
-       seriesMatchingRules: [
-        {
-          attribute: 'sameAs',
-          sameAttribute: 'FrameOfReferenceUID',
-          sameDisplaySetId: 'ctDisplaySet',
-          required: true,
-        },
-        ...
+  ...
+  seriesMatchingRules: [
+  {
+    attribute: 'sameAs',
+    sameAttribute: 'FrameOfReferenceUID',
+    sameDisplaySetId: 'ctDisplaySet',
+    required: true,
+  },
+  ...
 ```