feat(studies-panel): New OHIF study panel - under experimental flag (#4254)

extensions/dicom-microscopy/src/components/MicroscopyPanel/MicroscopyPanel.tsx

@@ -8,6 +8,7 @@ import dcmjs from 'dcmjs';
 import callInputDialog from '../../utils/callInputDialog';
 import constructSR from '../../utils/constructSR';
 import { saveByteArray } from '../../utils/saveByteArray';
+import { Separator } from '@ohif/ui-next';
 
 let saving = false;
 const { datasetToBuffer } = dcmjs.data;
@@ -56,6 +57,9 @@ interface IMicroscopyPanelProps extends WithTranslation {
   servicesManager: AppTypes.ServicesManager;
   extensionManager: ExtensionManager;
   commandsManager: CommandsManager;
+  renderHeader?: boolean;
+  getCloseIcon?: PropTypes.func;
+  tab: PropTypes.object;
 }
 
 /**
@@ -328,6 +332,20 @@ function MicroscopyPanel(props: IMicroscopyPanelProps) {
 
   return (
     <>
+      {props.renderHeader && (
+        <>
+          <div className="bg-primary-dark flex select-none rounded-t pt-1.5 pb-[2px]">
+            <div className="flex h-[24px] w-full cursor-pointer select-none justify-center self-center text-[14px]">
+              <div className="text-primary-active flex grow cursor-pointer select-none justify-center self-center text-[13px]">
+                <span>{props.tab.label}</span>
+              </div>
+            </div>
+
+            {props.getCloseIcon()}
+          </div>
+          <Separator orientation="horizontal" className="bg-black" thickness="2px" />
+        </>
+      )}{' '}
       <div
         className="ohif-scrollbar overflow-y-auto overflow-x-hidden"
         data-cy={'measurements-panel'}

extensions/dicom-microscopy/src/getPanelModule.tsx

@@ -13,7 +13,7 @@ export default function getPanelModule({
   extensionManager,
   servicesManager,
 }: Types.Extensions.ExtensionParams) {
-  const wrappedMeasurementPanel = () => {
+  const wrappedMeasurementPanel = ({ renderHeader, getCloseIcon, tab }) => {
     const [{ activeViewportId, viewports }] = useViewportGrid();
 
     return (
@@ -25,6 +25,9 @@ export default function getPanelModule({
         commandsManager={commandsManager}
         servicesManager={servicesManager}
         extensionManager={extensionManager}
+        renderHeader={renderHeader}
+        getCloseIcon={getCloseIcon}
+        tab={tab}
       />
     );
   };