create segmentation and measurement mdx
This commit is contained in:
Rodrigo Antinarelli
James A. Petts
parent
bfdcf6ecb6
commit
af7f2f525b
@ -28,6 +28,7 @@ export {
|
|||||||
MeasurementTable,
|
MeasurementTable,
|
||||||
NavBar,
|
NavBar,
|
||||||
Select,
|
Select,
|
||||||
|
SegmentationTable,
|
||||||
SidePanel,
|
SidePanel,
|
||||||
StudyListExpandedRow,
|
StudyListExpandedRow,
|
||||||
StudyListPagination,
|
StudyListPagination,
|
||||||
|
|||||||
@ -1,27 +1,11 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import { Icon, ButtonGroup, Button, IconButton } from '@ohif/ui';
|
import { Icon } from '@ohif/ui';
|
||||||
|
|
||||||
const MeasurementTable = () => {
|
const MeasurementTable = ({ title, amount, data }) => {
|
||||||
const tableData = new Array(12).fill('');
|
|
||||||
const [activeItem, setActiveItem] = useState(null);
|
const [activeItem, setActiveItem] = useState(null);
|
||||||
|
|
||||||
const colorLUT = [
|
|
||||||
'#932a13',
|
|
||||||
'#821393',
|
|
||||||
'#2b7fc4',
|
|
||||||
'#12c457',
|
|
||||||
'#7f7d2e',
|
|
||||||
'#7f2e4a',
|
|
||||||
'#866943',
|
|
||||||
'#65ae7f',
|
|
||||||
'#334b5f',
|
|
||||||
'#3cb0dc',
|
|
||||||
'#292ac9',
|
|
||||||
'#629753',
|
|
||||||
];
|
|
||||||
|
|
||||||
const renderTable = (title, amount, data) => {
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className="flex justify-between px-2 py-1 bg-secondary-main">
|
<div className="flex justify-between px-2 py-1 bg-secondary-main">
|
||||||
@ -30,8 +14,7 @@ const MeasurementTable = () => {
|
|||||||
</span>
|
</span>
|
||||||
<span className="text-base font-bold text-white">{amount}</span>
|
<span className="text-base font-bold text-white">{amount}</span>
|
||||||
</div>
|
</div>
|
||||||
{/* MEASUREMENT ITEMS */}
|
<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-64">
|
|
||||||
{!!data.length &&
|
{!!data.length &&
|
||||||
data.map((e, i) => {
|
data.map((e, i) => {
|
||||||
const itemKey = i;
|
const itemKey = i;
|
||||||
@ -119,137 +102,15 @@ const MeasurementTable = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderSegments = (title, amount, data) => {
|
MeasurementTable.defaultProps = {
|
||||||
return (
|
amount: null,
|
||||||
<div>
|
data: [],
|
||||||
<div className="flex justify-between px-2 py-1 bg-secondary-main">
|
|
||||||
<span className="text-base font-bold text-white tracking-widest uppercase">
|
|
||||||
{title}
|
|
||||||
</span>
|
|
||||||
<div className="flex">
|
|
||||||
<span className="text-base font-bold text-white">{amount}</span>
|
|
||||||
<Icon
|
|
||||||
name="eye-hidden"
|
|
||||||
className="w-6 text-white ml-2 cursor-pointer transition duration-300 hover:opacity-80"
|
|
||||||
onClick={() => alert('TBD')}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-64">
|
|
||||||
{!!data.length &&
|
|
||||||
data.map((e, i) => {
|
|
||||||
const itemKey = i;
|
|
||||||
const currentItem = i + 1;
|
|
||||||
const isActive = !!activeItem && activeItem[title] === i;
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
className={classnames(
|
|
||||||
'group flex cursor-default bg-black border border-transparent transition duration-300 rounded overflow-hidden',
|
|
||||||
{
|
|
||||||
'border-primary-light': isActive,
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
onClick={() => {
|
|
||||||
setActiveItem((s) => {
|
|
||||||
return {
|
|
||||||
...s,
|
|
||||||
[title]: s && s[title] === itemKey ? null : itemKey,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={classnames(
|
|
||||||
'text-center w-6 py-1 text-base transition duration-300',
|
|
||||||
{
|
|
||||||
'bg-primary-light text-black': isActive,
|
|
||||||
'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{currentItem}
|
|
||||||
</div>
|
|
||||||
<div className="px-2 py-1 flex flex-1 items-center justify-between">
|
|
||||||
<span className="text-base text-primary-light mb-1 flex items-center flex-1">
|
|
||||||
<div
|
|
||||||
className="w-3 h-3 rounded-full mr-2"
|
|
||||||
style={{ backgroundColor: colorLUT[i] }}
|
|
||||||
></div>
|
|
||||||
Label short description
|
|
||||||
</span>
|
|
||||||
<Icon
|
|
||||||
className={classnames(
|
|
||||||
'text-white w-6 cursor-pointer transition duration-300 hover:opacity-80'
|
|
||||||
)}
|
|
||||||
name="eye-visible"
|
|
||||||
onClick={(e) => {
|
|
||||||
// stopPropagation needed to avoid disable the current active item
|
|
||||||
e.stopPropagation();
|
|
||||||
alert('Toggle');
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
MeasurementTable.propTypes = {
|
||||||
<div className="overflow-y-auto overflow-x-hidden invisible-scrollbar pb-4">
|
title: PropTypes.string.isRequired,
|
||||||
{/* HEADER */}
|
amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||||
<div className="p-2">
|
data: PropTypes.array, // TODO: define better the array structure
|
||||||
<div className="leading-none">
|
|
||||||
<span className="text-white text-base mr-2">07-Sep-2010</span>
|
|
||||||
<span className="px-1 text-black bg-common-bright text-base rounded-sm font-bold">
|
|
||||||
CT
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="leading-none">
|
|
||||||
<span className="text-base text-primary-light">
|
|
||||||
CHEST/ABD/PELVIS W CONTRAST
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* TABLE */}
|
|
||||||
{renderTable('Measurements', null, [])}
|
|
||||||
{renderTable('Measurements', 5, tableData)}
|
|
||||||
{renderTable('ADDITIONAL FINDINGS', 5, tableData)}
|
|
||||||
{renderSegments('SEGMENTS', 12, tableData)}
|
|
||||||
|
|
||||||
{/* BUTTONS */}
|
|
||||||
<div className="mt-4 flex justify-center">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default MeasurementTable;
|
export default MeasurementTable;
|
||||||
|
|||||||
@ -19,9 +19,26 @@ import { MeasurementTable } from '@ohif/ui';
|
|||||||
|
|
||||||
<Playground>
|
<Playground>
|
||||||
{() => {
|
{() => {
|
||||||
|
const tableData = {
|
||||||
|
title: 'Measurements',
|
||||||
|
amount: 10,
|
||||||
|
data: new Array(10).fill(''),
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<div className="p-4">
|
<div className="p-4 w-80">
|
||||||
<MeasurementTable />
|
<MeasurementTable {...tableData} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
</Playground>
|
||||||
|
|
||||||
|
## Empty Data
|
||||||
|
|
||||||
|
<Playground>
|
||||||
|
{() => {
|
||||||
|
return (
|
||||||
|
<div className="p-4 w-80">
|
||||||
|
<MeasurementTable title="Measurements" />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
|
|||||||
@ -0,0 +1,114 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import classnames from 'classnames';
|
||||||
|
import { Icon } from '@ohif/ui';
|
||||||
|
|
||||||
|
const SegmentationTable = ({ title, amount, data }) => {
|
||||||
|
const [activeItem, setActiveItem] = useState(null);
|
||||||
|
|
||||||
|
// TODO: colorLUT should be defined in the application
|
||||||
|
const colorLUT = [
|
||||||
|
'#932a13',
|
||||||
|
'#821393',
|
||||||
|
'#2b7fc4',
|
||||||
|
'#12c457',
|
||||||
|
'#7f7d2e',
|
||||||
|
'#7f2e4a',
|
||||||
|
'#866943',
|
||||||
|
'#65ae7f',
|
||||||
|
'#334b5f',
|
||||||
|
'#3cb0dc',
|
||||||
|
'#292ac9',
|
||||||
|
'#629753',
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between px-2 py-1 bg-secondary-main">
|
||||||
|
<span className="text-base font-bold text-white tracking-widest uppercase">
|
||||||
|
{title}
|
||||||
|
</span>
|
||||||
|
<div className="flex">
|
||||||
|
<span className="text-base font-bold text-white">{amount}</span>
|
||||||
|
<Icon
|
||||||
|
name="eye-hidden"
|
||||||
|
className="w-6 text-white ml-2 cursor-pointer transition duration-300 hover:opacity-80"
|
||||||
|
onClick={() => alert('TBD')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-64">
|
||||||
|
{!!data.length &&
|
||||||
|
data.map((e, i) => {
|
||||||
|
const itemKey = i;
|
||||||
|
const currentItem = i + 1;
|
||||||
|
const isActive = !!activeItem && activeItem[title] === i;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={classnames(
|
||||||
|
'group flex cursor-default bg-black border border-transparent transition duration-300 rounded overflow-hidden',
|
||||||
|
{
|
||||||
|
'border-primary-light': isActive,
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
onClick={() => {
|
||||||
|
setActiveItem((s) => {
|
||||||
|
return {
|
||||||
|
...s,
|
||||||
|
[title]: s && s[title] === itemKey ? null : itemKey,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={classnames(
|
||||||
|
'text-center w-6 py-1 text-base transition duration-300',
|
||||||
|
{
|
||||||
|
'bg-primary-light text-black': isActive,
|
||||||
|
'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{currentItem}
|
||||||
|
</div>
|
||||||
|
<div className="px-2 py-1 flex flex-1 items-center justify-between">
|
||||||
|
<span className="text-base text-primary-light mb-1 flex items-center flex-1">
|
||||||
|
<div
|
||||||
|
className="w-3 h-3 rounded-full mr-2"
|
||||||
|
style={{ backgroundColor: colorLUT[i] }}
|
||||||
|
></div>
|
||||||
|
Label short description
|
||||||
|
</span>
|
||||||
|
<Icon
|
||||||
|
className={classnames(
|
||||||
|
'text-white w-6 cursor-pointer transition duration-300 hover:opacity-80'
|
||||||
|
)}
|
||||||
|
name="eye-visible"
|
||||||
|
onClick={(e) => {
|
||||||
|
// stopPropagation needed to avoid disable the current active item
|
||||||
|
e.stopPropagation();
|
||||||
|
alert('Toggle');
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
SegmentationTable.defaultProps = {
|
||||||
|
amount: null,
|
||||||
|
data: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
SegmentationTable.propTypes = {
|
||||||
|
title: PropTypes.string.isRequired,
|
||||||
|
amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||||
|
data: PropTypes.array, // TODO: define better the array structure
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SegmentationTable;
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
---
|
||||||
|
name: Segmentation Table
|
||||||
|
menu: Data Display
|
||||||
|
route: components/segmentationTable
|
||||||
|
---
|
||||||
|
|
||||||
|
import { Playground, Props } from 'docz';
|
||||||
|
import { SegmentationTable } from '@ohif/ui';
|
||||||
|
|
||||||
|
# Segmentation Table
|
||||||
|
|
||||||
|
## Import
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { SegmentationTable } from '@ohif/ui';
|
||||||
|
```
|
||||||
|
|
||||||
|
## Basic usage
|
||||||
|
|
||||||
|
<Playground>
|
||||||
|
{() => {
|
||||||
|
const tableData = {
|
||||||
|
title: 'Segments',
|
||||||
|
amount: 12,
|
||||||
|
data: new Array(12).fill(''),
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="p-4 w-80">
|
||||||
|
<SegmentationTable {...tableData} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
</Playground>
|
||||||
|
|
||||||
|
## Properties
|
||||||
|
|
||||||
|
<Props of={SegmentationTable} />
|
||||||
3
platform/ui/src/components/SegmentationTable/index.js
Normal file
3
platform/ui/src/components/SegmentationTable/index.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import SegmentationTable from './SegmentationTable';
|
||||||
|
|
||||||
|
export default SegmentationTable;
|
||||||
@ -14,6 +14,7 @@ import Label from './Label';
|
|||||||
import MeasurementTable from './MeasurementTable';
|
import MeasurementTable from './MeasurementTable';
|
||||||
import NavBar from './NavBar';
|
import NavBar from './NavBar';
|
||||||
import Select from './Select';
|
import Select from './Select';
|
||||||
|
import SegmentationTable from './SegmentationTable';
|
||||||
import SidePanel from './SidePanel';
|
import SidePanel from './SidePanel';
|
||||||
import Svg from './Svg';
|
import Svg from './Svg';
|
||||||
import StudyListExpandedRow from './StudyListExpandedRow';
|
import StudyListExpandedRow from './StudyListExpandedRow';
|
||||||
@ -44,6 +45,7 @@ export {
|
|||||||
MeasurementTable,
|
MeasurementTable,
|
||||||
NavBar,
|
NavBar,
|
||||||
Select,
|
Select,
|
||||||
|
SegmentationTable,
|
||||||
SidePanel,
|
SidePanel,
|
||||||
Svg,
|
Svg,
|
||||||
StudyListExpandedRow,
|
StudyListExpandedRow,
|
||||||
|
|||||||
@ -5,11 +5,33 @@ route: examples/viewer
|
|||||||
---
|
---
|
||||||
|
|
||||||
import { Playground, Props } from 'docz';
|
import { Playground, Props } from 'docz';
|
||||||
import { NavBar, SidePanel, Svg, MeasurementTable } from '@ohif/ui';
|
import {
|
||||||
|
NavBar,
|
||||||
|
SidePanel,
|
||||||
|
Svg,
|
||||||
|
MeasurementTable,
|
||||||
|
SegmentationTable,
|
||||||
|
ButtonGroup,
|
||||||
|
Button,
|
||||||
|
Icon,
|
||||||
|
IconButton,
|
||||||
|
} from '@ohif/ui';
|
||||||
|
|
||||||
# Viewer
|
# Viewer
|
||||||
|
|
||||||
<Playground>
|
<Playground>
|
||||||
|
{() => {
|
||||||
|
const measurementTableData = {
|
||||||
|
title: 'Measurements',
|
||||||
|
amount: 10,
|
||||||
|
data: new Array(10).fill(''),
|
||||||
|
};
|
||||||
|
const segmentationTableData = {
|
||||||
|
title: 'Segments',
|
||||||
|
amount: 12,
|
||||||
|
data: new Array(12).fill(''),
|
||||||
|
};
|
||||||
|
return (
|
||||||
<div>
|
<div>
|
||||||
<NavBar className="justify-start">
|
<NavBar className="justify-start">
|
||||||
<div className="m-3">
|
<div className="m-3">
|
||||||
@ -41,8 +63,54 @@ import { NavBar, SidePanel, Svg, MeasurementTable } from '@ohif/ui';
|
|||||||
componentLabel="Measurements"
|
componentLabel="Measurements"
|
||||||
defaultIsOpen={true}
|
defaultIsOpen={true}
|
||||||
>
|
>
|
||||||
<MeasurementTable />
|
<div className="overflow-y-auto overflow-x-hidden invisible-scrollbar">
|
||||||
|
{/* HEADER */}
|
||||||
|
<div className="p-2">
|
||||||
|
<div className="leading-none">
|
||||||
|
<span className="text-white text-base mr-2">07-Sep-2010</span>
|
||||||
|
<span className="px-1 text-black bg-common-bright text-base rounded-sm font-bold">
|
||||||
|
CT
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="leading-none">
|
||||||
|
<span className="text-base text-primary-light">
|
||||||
|
CHEST/ABD/PELVIS W CONTRAST
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<MeasurementTable tableData={measurementTableData} />
|
||||||
|
<SegmentationTable tableData={segmentationTableData} />
|
||||||
|
</div>
|
||||||
|
<div className="p-4 flex justify-center">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
</SidePanel>
|
</SidePanel>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
);
|
||||||
|
}}
|
||||||
</Playground>
|
</Playground>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user