Replace measurementsPanel w/ a format that reduces nesting

platform/ui/src/components/MeasurementsPanel/MeasurementsPanel.jsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { MeasurementTable } from '@ohif/ui';
-
-const MeasurementsPanel = ({
-  descriptionData,
-  measurementTableData,
-  actionButtons,
-}) => {
-  const { date, modality, description } = descriptionData;
-  return (
-    <>
-      <div className="overflow-y-auto overflow-x-hidden invisible-scrollbar">
-        <div className="p-2">
-          <div className="leading-none">
-            <span className="text-white text-base mr-2">{date}</span>
-            <span className="px-1 text-black bg-common-bright text-base rounded-sm font-bold">
-              {modality}
-            </span>
-          </div>
-          <div className="leading-none">
-            <span className="text-base text-primary-light">{description}</span>
-          </div>
-        </div>
-        <MeasurementTable
-          data={measurementTableData.data}
-          title={measurementTableData.title}
-          amount={measurementTableData.amount}
-          onClick={measurementTableData.onClick}
-          onEdit={measurementTableData.onEdit}
-        />
-      </div>
-      <div className="p-4 flex justify-center">{actionButtons}</div>
-    </>
-  );
-};
-
-MeasurementsPanel.defaultProps = {
-  actionButtons: null,
-};
-
-MeasurementsPanel.propTypes = {
-  descriptionData: PropTypes.shape({
-    date: PropTypes.string,
-    modality: PropTypes.string,
-    description: PropTypes.string,
-  }).isRequired,
-  measurementTableData: PropTypes.shape({
-    title: PropTypes.string,
-    amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    data: PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        label: PropTypes.string,
-        displayText: PropTypes.string,
-        isActive: PropTypes.bool,
-      })
-    ),
-    onClick: PropTypes.func,
-    onEdit: PropTypes.func,
-  }).isRequired,
-  actionButtons: PropTypes.node,
-};
-
-export default MeasurementsPanel;

platform/ui/src/components/MeasurementsPanel/MeasurementsPanel.mdx

@@ -1,101 +0,0 @@
----
-name: Measurements Panel
-menu: Data Display
-route: components/measurementsPanel
----
-
-import { useState } from 'react';
-import { Playground, Props } from 'docz';
-import {
-  SidePanel,
-  MeasurementsPanel,
-  ButtonGroup,
-  Button,
-  IconButton,
-  Icon,
-} from '@ohif/ui';
-
-# Measurements Panel
-
-## Import
-
-```javascript
-import { MeasurementsPanel } from '@ohif/ui';
-```
-
-## Basic usage
-
-<Playground>
-  {() => {
-    const [activeMeasurementItem, setActiveMeasurementItem] = useState(null);
-    const descriptionData = {
-      date: '07-Sep-2010',
-      modality: 'CT',
-      description: 'CHEST/ABD/PELVIS W CONTRAST',
-    };
-    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="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full h-screen">
-        <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
-          CONTENT
-        </div>
-        <SidePanel
-          side="right"
-          iconName="list-bullets"
-          iconLabel="Measure"
-          componentLabel="Measurements"
-          defaultIsOpen={true}
-        >
-          <MeasurementsPanel
-            descriptionData={descriptionData}
-            measurementTableData={measurementTableData}
-            actionButtons={
-              <>
-                <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>
-              </>
-            }
-          />
-        </SidePanel>
-      </div>
-    );
-  }}
-</Playground>
-
-## Properties
-
-<Props of={MeasurementsPanel} />

platform/ui/src/components/MeasurementsPanel/index.js

@@ -1,2 +0,0 @@
-import MeasurementsPanel from './MeasurementsPanel';
-export default MeasurementsPanel;

platform/ui/src/components/StudySummary/StudySummary.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const StudySummary = ({ date, modality, description }) => {
+  return (
+    <div className="p-2">
+      <div className="leading-none">
+        <span className="mr-2 text-base text-white">{date}</span>
+        <span className="px-1 text-base font-bold text-black rounded-sm bg-common-bright">
+          {modality}
+        </span>
+      </div>
+      <div className="leading-none">
+        <span className="text-base text-primary-light">{description}</span>
+      </div>
+    </div>
+  );
+};
+
+StudySummary.propTypes = {
+  date: PropTypes.string.isRequired,
+  modality: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+};
+
+export default StudySummary;

platform/ui/src/components/StudySummary/index.js

@@ -0,0 +1,3 @@
+import StudySummary from './StudySummary.jsx';
+
+export default StudySummary;

platform/ui/src/components/index.js

@@ -12,7 +12,6 @@ import InputLabelWrapper from './InputLabelWrapper';
 import InputMultiSelect from './InputMultiSelect';
 import InputText from './InputText';
 import Label from './Label';
-import MeasurementsPanel from './MeasurementsPanel';
 import MeasurementTable from './MeasurementTable';
 import Modal from './Modal';
 import NavBar from './NavBar';
@@ -21,12 +20,13 @@ import Select from './Select';
 import SegmentationTable from './SegmentationTable';
 import SidePanel from './SidePanel';
 import StudyBrowser from './StudyBrowser';
+import StudyItem from './StudyItem';
 import StudyListExpandedRow from './StudyListExpandedRow';
+import StudyListFilter from './StudyListFilter';
 import StudyListPagination from './StudyListPagination';
 import { StudyListTable, StudyListTableRow } from './StudyListTable';
+import StudySummary from './StudySummary';
 import Svg from './Svg';
-import StudyItem from './StudyItem';
-import StudyListFilter from './StudyListFilter';
 import Table from './Table';
 import TableBody from './TableBody';
 import TableCell from './TableCell';
@@ -61,7 +61,6 @@ export {
   InputMultiSelect,
   InputText,
   Label,
-  MeasurementsPanel,
   MeasurementTable,
   Modal,
   NavBar,
@@ -76,6 +75,7 @@ export {
   StudyListPagination,
   StudyListTable,
   StudyListTableRow,
+  StudySummary,
   Svg,
   Table,
   TableBody,

platform/ui/src/views/Viewer/Viewer.mdx

@@ -10,7 +10,6 @@ import {
   NavBar,
   SidePanel,
   Svg,
-  MeasurementsPanel,
   SegmentationTable,
   ButtonGroup,
   Button,
@@ -125,10 +124,22 @@ import { tabs } from './studyBrowserMockData';
               label: 'Measurements',
               name: 'measurements',
               content: (
-                <MeasurementsPanel
-                  descriptionData={descriptionData}
-                  measurementTableData={measurementTableData}
-                  actionButtons={
+                <>
+                  <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">
                     <React.Fragment>
                       <ButtonGroup onClick={() => alert('Export')}>
                         <Button
@@ -156,8 +167,8 @@ import { tabs } from './studyBrowserMockData';
                         Create Report
                       </Button>
                     </React.Fragment>
-                  }
-                />
+                  </div>
+                </>
               )
             }}
           />