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
2021-06-15 11:15:29 -04:00
1 parent 1bf651e763
commit 5643f8f6d2
@@ -1,13 +1,16 @@
 # Module: Panel

+## Overview
+UI that is intended to be displayed within a panel. The default LayoutTemplate has panels on the left and right sides, however one could make a template with panels at the top or bottom and make extensions with panels intended for such slots.
+
+
 An extension can register a Panel Module by defining a `getPanelModule` method.
 The panel module provides the ability to define `menuOptions` and `components`
 that can be used by the consuming application. `components` are React Components
 that can be displayed in the consuming application's "Panel" Component.

-![Panel Extension](../../assets/img/extensions-panel.gif)

-<center><i>A panel extension example</i></center>
+<!-- <center><i>A panel extension example</i></center> -->

 The `menuOptions`'s `target` key points to a registered `components`'s `id`. A
 `defaultContext` is applied to all `menuOption`s; however, each `menuOption` can
@@ -16,46 +19,83 @@ optional provide it's own `context` value.
 The `getPanelModule` receives an object containing the `ExtensionManager`'s
 associated `ServicesManager` and `CommandsManager`.

+![panel-module-v3](../../assets/img/panel-module-v3.png)
+
 ```js
-import MyComponent from './MyComponent.js';
+import PanelMeasurementTable from './PanelMeasurementTable.js';
+
+
+function getPanelModule({
+  commandsManager,
+  extensionManager,
+  servicesManager,
+}) {
+  const wrappedMeasurementPanel = () => {
+    return (
+      <PanelMeasurementTable
+        commandsManager={commandsManager}
+        servicesManager={servicesManager}
+      />
+    );
+  };
+
+  return [
+    {
+      name: 'measure',
+      iconName: 'list-bullets',
+      iconLabel: 'Measure',
+      label: 'Measurements',
+      isDisabled: studies => {}, // optional
+      component: wrappedMeasurementPanel,
+    },
+  ];
+}
+```
+
+
+
+
+## Consuming Panels Inside Modes
+As explained earlier, extensions make the functionalities and components available and
+`modes` utilize them to build an app. So, as seen above, we are not actually defining
+which side the panel should be opened. Our extension is providing the component with
+its.
+
+New: You can easily add multiple panels to the left/right side of the viewer using the mode
+configuration. As seen below, the `leftPanels` and `rightPanels` accept an `Array` of
+the `IDs`.
+
+```js
+export default function mode({ modeConfiguration }) {
+  return {
+    id: "viewer",
+    routes: [
+      {
+        path: "longitudinal",
+        layoutTemplate: ({ location, servicesManager }) => {
+          return {
+            id,
+            props: {
+              leftPanels: [
+                "org.ohif.measurement-tracking.panelModule.seriesList",
+              ],
+              rightPanels: [
+                "org.ohif.measurement-tracking.panelModule.trackedMeasurements",
+              ],
+              viewports,
+            },
+          };
+        },
+      },
+    ],
+    extensions: [
+      "org.ohif.default",
+      "org.ohif.cornerstone",
+      "org.ohif.measurement-tracking",
+      "org.ohif.dicom-sr",
+    ],
+  };
+}

-export default {
-  id: 'example-panel-module',

-  /**
-   * @param {object} params
-   * @param {ServicesManager} params.servicesManager
-   * @param {CommandsManager} params.commandsManager
-   */
-  getPanelModule({ servicesManager, commandsManager }) {
-    return {
-      menuOptions: [
-        {
-          // A suggested icon
-          // Available icons determined by consuming app
-          icon: 'list',
-          // A suggested label
-          label: 'Magic',
-          // 'right' or 'left'
-          from: 'right',
-          // The target component to toggle open/close
-          target: 'target-component-id',
-          // UI Hint; If the target panel is in a "disabled" state
-          isDisabled: studies => {
-            return false;
-          },
-          // Overrides `defaultContext`, if specified
-          context: ['ACTIVE_VIEWPORT:MAGIC'],
-        },
-      ],
-      components: [
-        {
-          id: 'target-component-id',
-          component: MyComponent,
-        },
-      ],
-      defaultContext: ['ROUTE:VIEWER'],
-    };
-  },
-};
 ```