feat(customizableOverlay): Add customizable overlay info (#3061)

* overlay customization

* custom overlay definition and examples

* minor fix - import statement difference between cornerstone and cornerstone3D

* move "VOI" and "Zoom" calulation to the ViewportOverlay component, make OverlayItem fairly dull

* type specifications

* follow up fixes for CustomizationService changes on upstream

* [fix] various fixes related to custom overlays (formatting, toggling)

* [fix] various fixes related to custom overlays (formatting, toggling)

* right side overlay panels - align right

* [fix] remove "notification" from toggleOverlay command

* comments

* [refactor] remove unused imports

* documentation of customizable overlay configuration

* prettify

* review of documentation of customization service

* fix useCallback() dependencies

* fix useCallback dependencies

* documentation for customization service

* documentation for customization service

extensions/default/src/commandsModule.js

@@ -47,6 +47,18 @@ const commandsModule = ({ servicesManager, commandsManager }) => {
         title: 'DICOM Tag Browser',
       });
     },
+
+    /**
+     * Toggle viewport overlay (the information panel shown on the four corners
+     * of the viewport)
+     * @see ViewportOverlay and CustomizableViewportOverlay components
+     */
+    toggleOverlays: () => {
+      const overlays = document.getElementsByClassName('viewport-overlay');
+      for (let i = 0; i < overlays.length; i++) {
+        overlays.item(i).classList.toggle('hidden');
+      }
+    },
   };
 
   const definitions = {

extensions/default/src/getCustomizationModule.tsx

@@ -40,5 +40,76 @@ export default function getCustomizationModule() {
         ],
       },
     },
+
+    {
+      name: 'default',
+      value: [
+        /**
+         * Customization Component Type definition for overlay items.
+         * Overlay items are texts (or other components) that will be displayed
+         * on a Viewport Overlay, which contains the information panels on the
+         * four corners of a viewport.
+         *
+         * @definition of a overlay item using this type
+         * The value to be displayed is defined by
+         *  - setting DICOM image instance's property to this field,
+         *  - or defining contentF()
+         *
+         * {
+         *   id: string - unique id for the overlay item
+         *   customizationType: string - indicates customization type definition to this
+         *   label: string - Label, to be displayed for the item
+         *   title: string - Tooltip, for the item
+         *   color: string - Color of the text
+         *   condition: ({ instance }) => boolean - decides whether to display the overlay item or not
+         *   attribute: string - property name of the DICOM image instance
+         *   contentF: ({ instance, formatters }) => string | component,
+         * }
+         *
+         * @example
+         *  {
+         *    id: 'PatientNameOverlay',
+         *    customizationType: 'ohif.overlayItem',
+         *    label: 'PN:',
+         *    title: 'Patient Name',
+         *    color: 'yellow',
+         *    condition: ({ instance }) => instance && instance.PatientName && instance.PatientName.Alphabetic,
+         *    attribute: 'PatientName',
+         *    contentF: ({ instance, formatters: { formatPN } }) => `${formatPN(instance.PatientName.Alphabetic)} ${(instance.PatientSex ? '(' + instance.PatientSex + ')' : '')}`,
+         *  },
+         *
+         * @see CustomizableViewportOverlay
+         */
+        {
+          id: 'ohif.overlayItem',
+          uiType: 'uiType',
+          content: function (props) {
+            if (this.condition && !this.condition(props)) return null;
+
+            const { instance } = props;
+            const value =
+              instance && this.attribute
+                ? instance[this.attribute]
+                : this.contentF && typeof this.contentF === 'function'
+                ? this.contentF(props)
+                : null;
+            if (!value) return null;
+
+            return (
+              <span
+                className="overlay-item flex flex-row"
+                style={{ color: this.color || undefined }}
+                title={this.title || ''}
+              >
+                {this.label && (
+                  <span className="mr-1 shrink-0">{this.label}</span>
+                )}
+                <span className="font-light">{value}</span>
+              </span>
+            );
+          },
+        },
+      ],
+    },
   ];
 }