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

extensions/cornerstone-dynamic-volume/src/getPanelModule.tsx

@@ -1,20 +1,28 @@
 import React from 'react';
 import { DynamicDataPanel } from './panels';
-import { Toolbox } from '@ohif/ui';
+import { Toolbox as NewToolbox } from '@ohif/ui-next';
+import { Toolbox as OldToolbox } from '@ohif/ui';
+import { useAppConfig } from '@state';
 import DynamicExport from './panels/DynamicExport';
 
 function getPanelModule({ commandsManager, extensionManager, servicesManager }) {
-  const wrappedDynamicDataPanel = () => {
+  const wrappedDynamicDataPanel = ({ renderHeader, getCloseIcon, tab }) => {
     return (
       <DynamicDataPanel
         commandsManager={commandsManager}
         servicesManager={servicesManager}
         extensionManager={extensionManager}
+        renderHeader={renderHeader}
+        getCloseIcon={getCloseIcon}
+        tab={tab}
       />
     );
   };
 
-  const wrappedDynamicToolbox = () => {
+  const wrappedDynamicToolbox = ({ renderHeader, getCloseIcon, tab }) => {
+    const [appConfig] = useAppConfig();
+
+    const Toolbox = appConfig.useExperimentalUI ? NewToolbox : OldToolbox;
     return (
       <>
         <Toolbox
@@ -23,6 +31,9 @@ function getPanelModule({ commandsManager, extensionManager, servicesManager })
           extensionManager={extensionManager}
           buttonSectionId="dynamic-toolbox"
           title="Threshold Tools"
+          renderHeader={renderHeader}
+          getCloseIcon={getCloseIcon}
+          tab={tab}
         />
       </>
     );

extensions/cornerstone-dynamic-volume/src/panels/DynamicDataPanel.tsx

@@ -1,17 +1,44 @@
 import React from 'react';
 import PanelGenerateImage from './PanelGenerateImage';
+import { Separator } from '@ohif/ui-next';
 
-function DynamicDataPanel({ servicesManager, commandsManager }) {
+function DynamicDataPanel({
+  servicesManager,
+  commandsManager,
+  renderHeader,
+  getCloseIcon,
+  tab,
+}: withAppTypes) {
   return (
-    <div
-      className="flex flex-col text-white"
-      data-cy={'dynamic-volume-panel'}
-    >
-      <PanelGenerateImage
-        commandsManager={commandsManager}
-        servicesManager={servicesManager}
-      ></PanelGenerateImage>
-    </div>
+    <>
+      {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>{tab.label}</span>
+              </div>
+            </div>
+
+            {getCloseIcon()}
+          </div>
+          <Separator
+            orientation="horizontal"
+            className="bg-black"
+            thickness="2px"
+          />
+        </>
+      )}
+      <div
+        className="flex flex-col text-white"
+        data-cy={'dynamic-volume-panel'}
+      >
+        <PanelGenerateImage
+          commandsManager={commandsManager}
+          servicesManager={servicesManager}
+        ></PanelGenerateImage>
+      </div>
+    </>
   );
 }