create segmentation and measurement mdx

platform/ui/src/components/SegmentationTable/SegmentationTable.jsx

@@ -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;

platform/ui/src/components/SegmentationTable/SegmentationTable.mdx

@@ -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} />

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

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