feat(grid): remove viewportIndex and only rely on viewportId (#3591)

Co-authored-by: Bill Wallace <wayfarer3130@gmail.com>

platform/docs/docs/platform/extensions/modules/viewport.md

@@ -43,20 +43,13 @@ const getViewportModule = () => {
 A simplified version of the tracked `OHIFCornerstoneViewport` is shown below, which
 creates a cornerstone viewport:
 
-:::note Tip
-
-Not in OHIF version 3.1 we use `displaySets` in the props which is new compared to
-the previous version (3.0) which uses `displaySet`. This is due to the fact that
-we are moving to a new data model that can render fused images in a single viewport.
-
-:::
 
 ```jsx
 function TrackedCornerstoneViewport({
   children,
   dataSource,
   displaySets,
-  viewportIndex,
+  viewportId,
   servicesManager,
   extensionManager,
   commandsManager,
@@ -87,6 +80,45 @@ function TrackedCornerstoneViewport({
 }
 ```
 
+### Viewport re-rendering optimizations
+
+We make use of the React memoization pattern to prevent unnecessary re-renders
+for the viewport unless certain aspects of the Viewport props change. You can take
+a look into the `areEqual` function in the `OHIFCornerstoneViewport` component to
+see how this is done.
+
+```js
+function areEqual(prevProps, nextProps) {
+  if (prevProps.displaySets.length !== nextProps.displaySets.length) {
+    return false;
+  }
+
+  if (
+    prevProps.viewportOptions.orientation !==
+    nextProps.viewportOptions.orientation
+  ) {
+    return false;
+  }
+
+  // rest of the code
+```
+
+as you see, we check if the `needsRerendering` prop is true, and if so, we will
+re-render the viewport if the `displaySets` prop changes or the orientation
+changes.
+
+
+We use viewportId to identify a viewport and we use it as a key in React
+rendering. This is important because it allows us to keep track of the viewport
+and its state, and also let React optimize and move the viewport around in the
+grid without re-rendering it. However, there are some cases where we need to
+force re-render the viewport, for example, when the viewport is hydrated
+with a new Segmentation. For these cases, we use the `needsRerendering` prop
+to force re-render the viewport. You can add it to the `viewportOptions`
+
+
+
+
 
 ### `@ohif/app`
 

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

@@ -68,7 +68,7 @@ There are seven events that get publish in `MeasurementService`:
   - `toMeasurementSchema`: A function to get the `data` into the same shape as
     the source definition.
 
-- `jumpToMeasurement(viewportIndex, id)`: calls the listeners who have
+- `jumpToMeasurement(viewportId, id)`: calls the listeners who have
   subscribed to `JUMP_TO_MEASUREMENT`.
 
 ## Source / Mappers

platform/docs/docs/platform/services/ui/ui-viewport-dialog-service.md

@@ -48,7 +48,7 @@ is expected to support, [check out it's interface in `@ohif/core`][interface]
 
 ```js
 const DEFAULT_STATE = {
-  viewportIndex: null,
+  viewportId: null,
   message: undefined,
   type: 'info', // "error" | "warning" | "info" | "success"
   actions: undefined, // array of { type, text, value }

platform/docs/docs/platform/services/ui/viewport-grid-service.md

@@ -15,7 +15,7 @@ There are seven events that get publish in `ViewportGridService `:
 
 | Event                         | Description                                       |
 | ----------------------------- | --------------------------------------------------|
-| ACTIVE_VIEWPORT_INDEX_CHANGED | Fires the index of the active viewport is changed |
+| ACTIVE_VIEWPORT_ID_CHANGED | Fires the Id of the active viewport is changed |
 | LAYOUT_CHANGED                | Fires the layout is changed                       |
 | GRID_STATE_CHANGED            | Fires when the entire grid state is changed       |
 ## Interface
@@ -25,9 +25,9 @@ is expected to support, [check out it's interface in `@ohif/core`][interface]
 
 | API Member                                                            | Description                                         |
 | --------------------------------------------------------------------- | --------------------------------------------------- |
-| `setActiveViewportIndex(index)`                                       | Sets the active viewport index in the app           |
+| `setActiveViewportId(viewportId)`                                       | Sets the active viewport Id in the app           |
 | `getState()`                                                          | Gets the states of the viewport (see below)         |
-| `setDisplaySetsForViewport({ viewportIndex, displaySetInstanceUID })` | Sets displaySet for viewport based on displaySet Id |
+| `setDisplaySetsForViewport({ viewportId, displaySetInstanceUID })` | Sets displaySet for viewport based on displaySet Id |
 | `setLayout({numCols, numRows, keepExtraViewports})`                   | Sets rows and columns. When the total number of viewports decreases, optionally keep the extra/offscreen viewports. |
 | `reset()`                                                             | Resets the default states                           |
 | `getNumViewportPanes()`                                               | Gets the number of visible viewport panes           |
@@ -56,6 +56,6 @@ const DEFAULT_STATE = {
      * }
      */
   ],
-  activeViewportIndex: 0,
+  activeViewportId: null,
 };
 ```

platform/docs/versioned_docs/version-2.0-deprecated/extensions/modules/viewport.md

@@ -25,7 +25,7 @@ Each `ViewportComponent` will receive the following props:
 ```html
 <viewportComponent
   viewportData="{viewportData}"
-  viewportIndex="{viewportIndex}"
+  viewportId="{viewportId}"
   children="{[children]}"
 />
 ```
@@ -34,7 +34,7 @@ Each `ViewportComponent` will receive the following props:
 | --------------- | --------------- | --------------------------------- |
 | `children`      | React.element[] |                                   |
 | `viewportData`  | object          | `viewportSpecificData` (probably) |
-| `viewportIndex` | number          |                                   |
+| `viewportId` | string          |                                   |
 
 ### `@ohif/viewer`