feat: Added documentation for OHIF-v3 (#2450)

* Added docs with new screenshots

* Added doc to architecture

* Added documentations to various extension modules

* Added more documentation to modes

* Added docs to managers

* Added docs for services

* Fixed deployment docs

* Added white labelling documentation

* Added i18n docs and measurement export

docs/latest/extensions/modules/viewport.md

@@ -1,46 +1,95 @@
 # Module: Viewport
 
-An extension can register a Viewport Module by defining a `getViewportModule`
+
+## Overview
+Viewports consume a displaySet and display/allow the user to interact with data. An extension can register a Viewport Module by defining a `getViewportModule`
 method that returns a React component. Currently, we use viewport components to
 add support for:
 
 - 2D Medical Image Viewing (cornerstone ext.)
-- Structured Reports as HTML (dicom html ext.)
-- Encapsulated PDFs as PDFs (dicom pdf ext.)
+- Structured Reports as SR (DICOM SR ext.)
+- Structured Reports as HTML (DICOM html ext.)
+- Encapsulated PDFs as PDFs (DICOM pdf ext.)
 - Whole Slide Microscopy Viewing (whole slide ext.)
 - etc.
 
-The general pattern is, the [`sopClassHandlerModule`](#) helps us determine
-which Viewport Component a set of `sopClassUIDs` should default to. The Viewport
-Component receives props containing a display set it should know how to render.
 
-## Viewport Component Props
 
-Each `ViewportComponent` will receive the following props:
+The general pattern is that a mode can define which `Viewport` to use for which specific
+`SOPClassHandlerUID`, so if you want to fork just a single Viewport component for a specialized mode, this is possible.
 
-```html
-<viewportComponent
-  viewportData="{viewportData}"
-  viewportIndex="{viewportIndex}"
-  children="{[children]}"
-/>
+```JSX
+// displaySet, viewportIndex, dataSource
+const getViewportModule = () => {
+  const wrappedViewport = props => {
+    return (
+      <ExampleViewport
+        {...props}
+        onEvent={data => {
+          commandsManager.runCommand('commandName', data);
+        }}
+      />
+    );
+  };
+
+  return [{ name: 'example', component: wrappedViewport }];
+};
 ```
 
-| Property        | Type            | Description                       |
-| --------------- | --------------- | --------------------------------- |
-| `children`      | React.element[] |                                   |
-| `viewportData`  | object          | `viewportSpecificData` (probably) |
-| `viewportIndex` | number          |                                   |
 
+## Example Viewport Component
+A simplified version of the tracked CornerstoneViewport is shown below, which creates
+a cornerstone viewport and and action bar on top of it.
+
+
+
+
+```JSX
+function TrackedCornerstoneViewport({
+  children,
+  dataSource,
+  displaySet,
+  viewportIndex,
+  servicesManager,
+  extensionManager,
+  commandsManager,
+}) {
+  const renderViewport = () => {
+    const { component: Component } = extensionManager.getModuleEntry(
+      'org.ohif.cornerstone.viewportModule.cornerstone'
+    )
+    return (
+      <Component
+        onElementEnabled={onElementEnabled}
+        element={element}
+        {...props}
+      ></Component>
+    )
+  }
+
+  return (
+    <>
+      <ViewportActionBar onDoubleClick onSeriesChange />
+      <div className="relative flex flex-row w-full h-full overflow-hidden">
+        {renderViewport()}
+      </div>
+    </>
+  )
+}
+
+```
+
+
+![viewportModule](../../assets/img/viewportModule.png)
 ### `@ohif/viewer`
 
 Viewport components are managed by the `ViewportGrid` Component. Which Viewport
 component is used depends on:
 
+- Hanging Protocols
 - The Layout Configuration
 - Registered SopClassHandlers
-- The SopClassUID for visible/selected datasets
 
-![Cornerstone Viewport](../../assets/img/extensions-viewport.png)
 
+![viewportModule-layout](../../assets/img/viewportModule-layout.png)
 <center><i>An example of three cornerstone Viewports</i></center>