Replace measurementsPanel w/ a format that reduces nesting

extensions/default/src/ActionButtons.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, ButtonGroup, Icon, IconButton } from '@ohif/ui';
+
+function ActionButtons() {
+  return (
+    <React.Fragment>
+      <ButtonGroup onClick={() => alert('Export')}>
+        <Button
+          className="px-2 py-2 text-base text-white bg-black border-primary-main"
+          size="initial"
+          color="inherit"
+        >
+          Export
+        </Button>
+        <IconButton
+          className="px-2 text-white bg-black border-primary-main"
+          color="inherit"
+          size="initial"
+        >
+          <Icon name="arrow-down" />
+        </IconButton>
+      </ButtonGroup>
+      <Button
+        className="px-2 py-2 ml-2 text-base text-white bg-black border border-primary-main"
+        variant="outlined"
+        size="initial"
+        color="inherit"
+        onClick={() => alert('Create Report')}
+      >
+        Create Report
+      </Button>
+    </React.Fragment>
+  );
+}
+
+export default ActionButtons;

extensions/default/src/MeasurementTable.js

@@ -1,73 +0,0 @@
-import React from 'react';
-import {
-  MeasurementsPanel,
-  Button,
-  ButtonGroup,
-  Icon,
-  IconButton,
-} from '@ohif/ui';
-
-export default function MeasurementTable({ servicesManager, commandsManager }) {
-  const { MeasurementService } = servicesManager.services;
-
-  console.log('MeasurementTable rendering!!!!!!!!!!!!!');
-
-  const actionButtons = (
-    <React.Fragment>
-      <ButtonGroup onClick={() => alert('Export')}>
-        <Button
-          className="text-white border-primary-main bg-black text-base py-2 px-2"
-          size="initial"
-          color="inherit"
-        >
-          Export
-        </Button>
-        <IconButton
-          className="bg-black border-primary-main px-2 text-white px-2"
-          color="inherit"
-          size="initial"
-        >
-          <Icon name="arrow-down" />
-        </IconButton>
-      </ButtonGroup>
-      <Button
-        className="text-white border border-primary-main bg-black text-base py-2 px-2 ml-2"
-        variant="outlined"
-        size="initial"
-        color="inherit"
-        onClick={() => alert('Create Report')}
-      >
-        Create Report
-      </Button>
-    </React.Fragment>
-  );
-
-  const descriptionData = {
-    date: '07-Sep-2010',
-    modality: 'CT',
-    description: 'CHEST/ABD/PELVIS W CONTRAST',
-  };
-
-  const activeMeasurementItem = 0;
-
-  const measurementTableData = {
-    title: 'Measurements',
-    amount: 10,
-    data: new Array(10).fill({}).map((el, i) => ({
-      id: i + 1,
-      label: 'Label short description',
-      displayText: '24.0 x 24.0 mm (S:4, I:22)',
-      isActive: activeMeasurementItem === i + 1,
-    })),
-    onClick: id => setActiveMeasurementItem(s => (s === id ? null : id)),
-    onEdit: id => alert(`Edit: ${id}`),
-  };
-
-  return (
-    <MeasurementsPanel
-      descriptionData={descriptionData}
-      measurementTableData={measurementTableData}
-      actionButtons={actionButtons}
-    />
-  );
-}

extensions/default/src/PanelMeasurementTable.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { StudySummary, MeasurementTable } from '@ohif/ui';
+import ActionButtons from './ActionButtons.jsx';
+
+export default function PanelMeasurementTable({
+  servicesManager,
+  commandsManager,
+}) {
+  const { MeasurementService } = servicesManager.services;
+
+  console.log('MeasurementTable rendering!!!!!!!!!!!!!');
+
+  const descriptionData = {
+    date: '07-Sep-2010',
+    modality: 'CT',
+    description: 'CHEST/ABD/PELVIS W CONTRAST',
+  };
+
+  const activeMeasurementItem = 0;
+
+  const measurementTableData = {
+    title: 'Measurements',
+    amount: 10,
+    data: new Array(10).fill({}).map((el, i) => ({
+      id: i + 1,
+      label: 'Label short description',
+      displayText: '24.0 x 24.0 mm (S:4, I:22)',
+      isActive: activeMeasurementItem === i + 1,
+    })),
+    onClick: id => setActiveMeasurementItem(s => (s === id ? null : id)),
+    onEdit: id => alert(`Edit: ${id}`),
+  };
+
+  return (
+    <>
+      <div className="overflow-x-hidden overflow-y-auto invisible-scrollbar">
+        <StudySummary
+          date={descriptionData.date}
+          modality={descriptionData.modality}
+          description={descriptionData.description}
+        />
+        <MeasurementTable
+          title="Measurements"
+          amount={measurementTableData.data.length}
+          data={measurementTableData.data}
+          onClick={() => {}}
+          onEdit={id => alert(`Edit: ${id}`)}
+        />
+      </div>
+      <div className="flex justify-center p-4">
+        <ActionButtons />
+      </div>
+    </>
+  );
+}

extensions/default/src/getPanelModule.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { WrappedPanelStudyBrowser } from './Panels';
 
-import MeasurementTable from './MeasurementTable.js';
+import PanelMeasurementTable from './PanelMeasurementTable.js';
 
 // TODO:
 // - No loading UI exists yet
@@ -15,7 +15,7 @@ function getPanelModule({
 }) {
   const wrappedMeasurementPanel = () => {
     return (
-      <MeasurementTable
+      <PanelMeasurementTable
         commandsManager={commandsManager}
         servicesManager={servicesManager}
       />