feat: MeasurementsPanel API definition + content

platform/ui/index.js

@@ -25,6 +25,7 @@ export {
   InputMultiSelect,
   InputText,
   Label,
+  MeasurementsPanel,
   MeasurementTable,
   NavBar,
   Notification,

platform/ui/src/components/MeasurementTable/MeasurementTable.jsx

@@ -1,11 +1,9 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Icon } from '@ohif/ui';
 
-const MeasurementTable = ({ title, amount, data }) => {
+const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
-  const [activeItem, setActiveItem] = useState(null);
-
   return (
     <div>
       <div className="flex justify-between px-2 py-1 bg-secondary-main">
@@ -14,29 +12,22 @@ const MeasurementTable = ({ title, amount, data }) => {
         </span>
         <span className="text-base font-bold text-white">{amount}</span>
       </div>
-      <div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-80">
+      <div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-112">
         {!!data.length &&
-          data.map((e, i) => {
+          data.map((measurementItem) => {
-            const itemKey = i;
+            const { id, label, displayText, isActive } = measurementItem;
-            const currentItem = i + 1;
-            const isActive = !!activeItem && activeItem[title] === i;
             return (
               <div
-                key={i}
+                key={id}
                 className={classnames(
                   'group flex cursor-default bg-black border border-transparent transition duration-300 ',
                   {
                     'rounded overflow-hidden border-primary-light': isActive,
                   }
                 )}
-                onClick={() => {
+                onClick={() => onClick(measurementItem.id)}
-                  setActiveItem((s) => {
+                onKeyDown={() => onClick(measurementItem.id)}
-                    return {
+                role="button"
-                      ...s,
-                      [title]: s && s[title] === itemKey ? null : itemKey,
-                    };
-                  });
-                }}
               >
                 <div
                   className={classnames(
@@ -47,14 +38,14 @@ const MeasurementTable = ({ title, amount, data }) => {
                     }
                   )}
                 >
-                  {currentItem}
+                  {id}
                 </div>
                 <div className="px-2 py-1 flex flex-1 flex-col relative">
                   <span className="text-base text-primary-light mb-1">
-                    Label short description
+                    {label}
                   </span>
                   <span className="pl-2 border-l border-primary-light text-base text-white">
-                    24.0 x 24.0 mm (S:4, I:22)
+                    {displayText}
                   </span>
                   <Icon
                     className={classnames(
@@ -72,7 +63,7 @@ const MeasurementTable = ({ title, amount, data }) => {
                     onClick={(e) => {
                       // stopPropagation needed to avoid disable the current active item
                       e.stopPropagation();
-                      alert('Edit');
+                      onEdit(id);
                     }}
                   />
                 </div>
@@ -105,12 +96,23 @@ const MeasurementTable = ({ title, amount, data }) => {
 MeasurementTable.defaultProps = {
   amount: null,
   data: [],
+  onClick: () => {},
+  onEdit: () => {},
 };
 
 MeasurementTable.propTypes = {
   title: PropTypes.string.isRequired,
   amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  data: PropTypes.array, // TODO: define better the array structure
+  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,
 };
 
 export default MeasurementTable;

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

@@ -0,0 +1,65 @@
+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/index.js

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

platform/ui/src/components/index.js

@@ -11,6 +11,7 @@ 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 NavBar from './NavBar';
 import Notification from './Notification';
@@ -53,6 +54,7 @@ export {
   InputMultiSelect,
   InputText,
   Label,
+  MeasurementsPanel,
   MeasurementTable,
   NavBar,
   Notification,

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

@@ -9,7 +9,7 @@ import {
   NavBar,
   SidePanel,
   Svg,
-  MeasurementTable,
+  MeasurementsPanel,
   SegmentationTable,
   ButtonGroup,
   Button,
@@ -28,15 +28,23 @@ import ViewportToolbar from './components/ViewportToolBar';
 
 <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(''),
+      data: new Array(10).fill({}).map((el, i) => ({
-    };
+        id: i + 1,
-    const segmentationTableData = {
+        label: 'Label short description',
-      title: 'Segments',
+        displayText: '24.0 x 24.0 mm (S:4, I:22)',
-      amount: 12,
+        isActive: activeMeasurementItem === i + 1,
-      data: new Array(12).fill(''),
+      })),
+      onClick: (id) => setActiveMeasurementItem((s) => (s === id ? null : id)),
+      onEdit: (id) => alert(`Edit: ${id}`),
     };
     return (
       <div>
@@ -93,52 +101,41 @@ import ViewportToolbar from './components/ViewportToolBar';
             iconName="list-bullets"
             iconLabel="Measure"
             componentLabel="Measurements"
-            defaultIsOpen={false}
+            defaultIsOpen={true}
           >
-            <div className="overflow-y-auto overflow-x-hidden invisible-scrollbar">
+            <MeasurementsPanel
-              <div className="p-2">
+              descriptionData={descriptionData}
-                <div className="leading-none">
+              measurementTableData={measurementTableData}
-                  <span className="text-white text-base mr-2">07-Sep-2010</span>
+              actionButtons={
-                  <span className="px-1 text-black bg-common-bright text-base rounded-sm font-bold">
+                <>
-                    CT
+                  <ButtonGroup onClick={() => alert('Export')}>
-                  </span>
+                    <Button
-                </div>
+                      className="text-white border-primary-main bg-black text-base py-2 px-2"
-                <div className="leading-none">
+                      size="initial"
-                  <span className="text-base text-primary-light">
+                      color="inherit"
-                    CHEST/ABD/PELVIS W CONTRAST
+                    >
-                  </span>
+                      Export
-                </div>
+                    </Button>
-              </div>
+                    <IconButton
-              <MeasurementTable {...measurementTableData} />
+                      className="bg-black border-primary-main px-2 text-white px-2"
-              <SegmentationTable {...segmentationTableData} />
+                      color="inherit"
-            </div>
+                      size="initial"
-            <div className="p-4 flex justify-center">
+                    >
-              <ButtonGroup onClick={() => alert('Export')}>
+                      <Icon name="arrow-down" />
-                <Button
+                    </IconButton>
-                  className="text-white border-primary-main bg-black text-base py-2 px-2"
+                  </ButtonGroup>
-                  size="initial"
+                  <Button
-                  color="inherit"
+                    className="text-white border border-primary-main bg-black text-base py-2 px-2 ml-2"
-                >
+                    variant="outlined"
-                  Export
+                    size="initial"
-                </Button>
+                    color="inherit"
-                <IconButton
+                    onClick={() => alert('Create Report')}
-                  className="bg-black border-primary-main px-2 text-white px-2"
+                  >
-                  color="inherit"
+                    Create Report
-                  size="initial"
+                  </Button>
-                >
+                </>
-                  <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>
-            </div>
           </SidePanel>
         </div>
       </div>

platform/ui/tailwind.config.js

@@ -173,6 +173,10 @@ module.exports = {
       '64': '16rem',
       '72': '18rem',
       '80': '20rem',
+      '88': '22rem',
+      '96': '24rem',
+      '104': '26rem',
+      '112': '28rem',
       '250px': '250px',
     },
     backgroundColor: (theme) => theme('colors'),