TrizTech/ohif-viewer
17
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Segments table and color LUT

Browse Source
This commit is contained in:
Rodrigo Antinarelli authored and James A. Petts committed 2020-05-15 13:47:48 +02:00
1 parent b9da65ed9e
commit 9bffa88bed
5 files changed
+136 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/ui/src/components/MeasurementTable/MeasurementTable.jsx
+101 -6
View File
@@ -3,9 +3,24 @@ import classnames from 'classnames';
import { Icon, ButtonGroup, Button, IconButton } from '@ohif/ui';
const MeasurementTable = () => {
const tableData = new Array(5).fill('');
const tableData = new Array(12).fill('');
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 (
<div>
@@ -16,7 +31,7 @@ const MeasurementTable = () => {
<span className="text-base font-bold text-white">{amount}</span>
</div>
{/* MEASUREMENT ITEMS */}
<div>
<div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-64">
{!!data.length &&
data.map((e, i) => {
const itemKey = i;
@@ -26,9 +41,9 @@ const MeasurementTable = () => {
<div
key={i}
className={classnames(
'group flex cursor-default bg-black border border-transparent transition duration-300 rounded overflow-hidden',
'group flex cursor-default bg-black border border-transparent transition duration-300 ',
{
'border-primary-light': isActive,
'rounded overflow-hidden border-primary-light': isActive,
}
)}
onClick={() => {
@@ -42,7 +57,7 @@ const MeasurementTable = () => {
>
<div
className={classnames(
'p-2 text-base transition duration-300',
'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,
@@ -86,8 +101,87 @@ const MeasurementTable = () => {
);
};
const renderSegments = (title, amount, data) => {
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>
);
};
return (
<div>
<div className="overflow-y-auto overflow-x-hidden invisible-scrollbar pb-4">
{/* HEADER */}
<div className="p-2">
<div className="leading-none">
@@ -105,6 +199,7 @@ const MeasurementTable = () => {
{/* TABLE */}
{renderTable('Measurements', 5, tableData)}
{renderTable('ADDITIONAL FINDINGS', 5, tableData)}
{renderSegments('SEGMENTS', 12, tableData)}
{/* BUTTONS */}
<div className="mt-4 flex justify-center">