From a3f2080834d328ed2d7059027bbb2189bb0b852c Mon Sep 17 00:00:00 2001 From: Rodrigo Antinarelli Date: Mon, 20 Apr 2020 23:44:56 -0300 Subject: [PATCH] feat: MeasurementsPanel API definition + content --- platform/ui/index.js | 1 + .../MeasurementTable/MeasurementTable.jsx | 48 +++++---- .../MeasurementsPanel/MeasurementsPanel.jsx | 65 +++++++++++ .../MeasurementsPanel/MeasurementsPanel.mdx | 0 .../src/components/MeasurementsPanel/index.js | 2 + platform/ui/src/components/index.js | 2 + platform/ui/src/views/Viewer/Viewer.mdx | 101 +++++++++--------- platform/ui/tailwind.config.js | 4 + 8 files changed, 148 insertions(+), 75 deletions(-) create mode 100644 platform/ui/src/components/MeasurementsPanel/MeasurementsPanel.jsx create mode 100644 platform/ui/src/components/MeasurementsPanel/MeasurementsPanel.mdx create mode 100644 platform/ui/src/components/MeasurementsPanel/index.js diff --git a/platform/ui/index.js b/platform/ui/index.js index 9446d374a..a6cf7e3fb 100644 --- a/platform/ui/index.js +++ b/platform/ui/index.js @@ -25,6 +25,7 @@ export { InputMultiSelect, InputText, Label, + MeasurementsPanel, MeasurementTable, NavBar, Notification, diff --git a/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx b/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx index 211d49b91..2f620780f 100644 --- a/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx +++ b/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 [activeItem, setActiveItem] = useState(null); - +const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => { return (
@@ -14,29 +12,22 @@ const MeasurementTable = ({ title, amount, data }) => { {amount}
-
+
{!!data.length && - data.map((e, i) => { - const itemKey = i; - const currentItem = i + 1; - const isActive = !!activeItem && activeItem[title] === i; + data.map((measurementItem) => { + const { id, label, displayText, isActive } = measurementItem; return (
{ - setActiveItem((s) => { - return { - ...s, - [title]: s && s[title] === itemKey ? null : itemKey, - }; - }); - }} + onClick={() => onClick(measurementItem.id)} + onKeyDown={() => onClick(measurementItem.id)} + role="button" >
{ } )} > - {currentItem} + {id}
- Label short description + {label} - 24.0 x 24.0 mm (S:4, I:22) + {displayText} { onClick={(e) => { // stopPropagation needed to avoid disable the current active item e.stopPropagation(); - alert('Edit'); + onEdit(id); }} />
@@ -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; diff --git a/platform/ui/src/components/MeasurementsPanel/MeasurementsPanel.jsx b/platform/ui/src/components/MeasurementsPanel/MeasurementsPanel.jsx new file mode 100644 index 000000000..f8b48122e --- /dev/null +++ b/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 ( + <> +
+
+
+ {date} + + {modality} + +
+
+ {description} +
+
+ +
+
{actionButtons}
+ + ); +}; + +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; diff --git a/platform/ui/src/components/MeasurementsPanel/MeasurementsPanel.mdx b/platform/ui/src/components/MeasurementsPanel/MeasurementsPanel.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/platform/ui/src/components/MeasurementsPanel/index.js b/platform/ui/src/components/MeasurementsPanel/index.js new file mode 100644 index 000000000..530242b4f --- /dev/null +++ b/platform/ui/src/components/MeasurementsPanel/index.js @@ -0,0 +1,2 @@ +import MeasurementsPanel from './MeasurementsPanel'; +export default MeasurementsPanel; diff --git a/platform/ui/src/components/index.js b/platform/ui/src/components/index.js index f775b3805..8894a28ad 100644 --- a/platform/ui/src/components/index.js +++ b/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, diff --git a/platform/ui/src/views/Viewer/Viewer.mdx b/platform/ui/src/views/Viewer/Viewer.mdx index 7d156a21b..ac86f8f8e 100644 --- a/platform/ui/src/views/Viewer/Viewer.mdx +++ b/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'; {() => { + 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(''), - }; - const segmentationTableData = { - title: 'Segments', - amount: 12, - data: new Array(12).fill(''), + 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 (
@@ -93,52 +101,41 @@ import ViewportToolbar from './components/ViewportToolBar'; iconName="list-bullets" iconLabel="Measure" componentLabel="Measurements" - defaultIsOpen={false} + defaultIsOpen={true} > -
-
-
- 07-Sep-2010 - - CT - -
-
- - CHEST/ABD/PELVIS W CONTRAST - -
-
- - -
-
- alert('Export')}> - - - - - - -
+ + alert('Export')}> + + + + + + + + } + />
diff --git a/platform/ui/tailwind.config.js b/platform/ui/tailwind.config.js index e7ca0b5a4..24cad7938 100644 --- a/platform/ui/tailwind.config.js +++ b/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'),