From af7f2f525b046c02f1ffbf13e996a2279d40e1f2 Mon Sep 17 00:00:00 2001
From: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
Date: Fri, 10 Apr 2020 15:05:06 -0300
Subject: [PATCH] create segmentation and measurement mdx

---
 platform/ui/index.js                          |   1 +
 .../MeasurementTable/MeasurementTable.jsx     | 317 +++++-------------
 .../MeasurementTable/MeasurementTable.mdx     |  21 +-
 .../SegmentationTable/SegmentationTable.jsx   | 114 +++++++
 .../SegmentationTable/SegmentationTable.mdx   |  37 ++
 .../src/components/SegmentationTable/index.js |   3 +
 platform/ui/src/components/index.js           |   2 +
 platform/ui/src/views/Viewer/Viewer.mdx       | 136 ++++++--
 8 files changed, 367 insertions(+), 264 deletions(-)
 create mode 100644 platform/ui/src/components/SegmentationTable/SegmentationTable.jsx
 create mode 100644 platform/ui/src/components/SegmentationTable/SegmentationTable.mdx
 create mode 100644 platform/ui/src/components/SegmentationTable/index.js

diff --git a/platform/ui/index.js b/platform/ui/index.js
index c3ecf8ce2..7005902cd 100644
--- a/platform/ui/index.js
+++ b/platform/ui/index.js
@@ -28,6 +28,7 @@ export {
   MeasurementTable,
   NavBar,
   Select,
+  SegmentationTable,
   SidePanel,
   StudyListExpandedRow,
   StudyListPagination,
diff --git a/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx b/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx
index ac6621b29..211d49b91 100644
--- a/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx
+++ b/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx
@@ -1,255 +1,116 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon, ButtonGroup, Button, IconButton } from '@ohif/ui';
+import { Icon } from '@ohif/ui';
 
-const MeasurementTable = () => {
-  const tableData = new Array(12).fill('');
+const MeasurementTable = ({ title, amount, data }) => {
   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>
-        <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>
-          <span className="text-base font-bold text-white">{amount}</span>
-        </div>
-        {/* MEASUREMENT ITEMS */}
-        <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 (
+  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>
+        <span className="text-base font-bold text-white">{amount}</span>
+      </div>
+      <div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-80">
+        {!!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
-                  key={i}
                   className={classnames(
-                    'group flex cursor-default bg-black border border-transparent transition duration-300 ',
+                    'text-center w-6 py-1 text-base transition duration-300',
                     {
-                      'rounded overflow-hidden border-primary-light': isActive,
+                      'bg-primary-light text-black': isActive,
+                      'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
                     }
                   )}
-                  onClick={() => {
-                    setActiveItem((s) => {
-                      return {
-                        ...s,
-                        [title]: s && s[title] === itemKey ? null : itemKey,
-                      };
-                    });
-                  }}
                 >
-                  <div
+                  {currentItem}
+                </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
+                  </span>
+                  <span className="pl-2 border-l border-primary-light text-base text-white">
+                    24.0 x 24.0 mm (S:4, I:22)
+                  </span>
+                  <Icon
                     className={classnames(
-                      'text-center w-6 py-1 text-base transition duration-300',
+                      'text-white w-4 absolute cursor-pointer transition duration-300',
                       {
-                        'bg-primary-light text-black': isActive,
-                        'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
+                        'invisible opacity-0 mr-2': !isActive,
                       }
                     )}
-                  >
-                    {currentItem}
-                  </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
-                    </span>
-                    <span className="pl-2 border-l border-primary-light text-base text-white">
-                      24.0 x 24.0 mm (S:4, I:22)
-                    </span>
-                    <Icon
-                      className={classnames(
-                        'text-white w-4 absolute cursor-pointer transition duration-300',
-                        {
-                          'invisible opacity-0 mr-2': !isActive,
-                        }
-                      )}
-                      name="pencil"
-                      style={{
-                        top: 4,
-                        right: 4,
-                        transform: isActive ? '' : 'translateX(100%)',
-                      }}
-                      onClick={(e) => {
-                        // stopPropagation needed to avoid disable the current active item
-                        e.stopPropagation();
-                        alert('Edit');
-                      }}
-                    />
-                  </div>
+                    name="pencil"
+                    style={{
+                      top: 4,
+                      right: 4,
+                      transform: isActive ? '' : 'translateX(100%)',
+                    }}
+                    onClick={(e) => {
+                      // stopPropagation needed to avoid disable the current active item
+                      e.stopPropagation();
+                      alert('Edit');
+                    }}
+                  />
                 </div>
-              );
-            })}
-          {!data.length && (
+              </div>
+            );
+          })}
+        {!data.length && (
+          <div
+            className={classnames(
+              'group flex cursor-default bg-black border border-transparent transition duration-300 '
+            )}
+          >
             <div
               className={classnames(
-                'group flex cursor-default bg-black border border-transparent transition duration-300 '
+                'text-center w-6 py-1 text-base transition duration-300 bg-primary-dark text-primary-light group-hover:bg-secondary-main'
               )}
-            >
-              <div
-                className={classnames(
-                  'text-center w-6 py-1 text-base transition duration-300 bg-primary-dark text-primary-light group-hover:bg-secondary-main'
-                )}
-              ></div>
-              <div className="px-2 py-4 flex flex-1 items-center justify-between">
-                <span className="text-base text-primary-light mb-1 flex items-center flex-1">
-                  No tracked measurements
-                </span>
-              </div>
+            ></div>
+            <div className="px-2 py-4 flex flex-1 items-center justify-between">
+              <span className="text-base text-primary-light mb-1 flex items-center flex-1">
+                No tracked measurements
+              </span>
             </div>
-          )}
-        </div>
-      </div>
-    );
-  };
-
-  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 className="overflow-y-auto overflow-x-hidden invisible-scrollbar pb-4">
-      {/* 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>
-      {/* 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>
   );
 };
 
+MeasurementTable.defaultProps = {
+  amount: null,
+  data: [],
+};
+
+MeasurementTable.propTypes = {
+  title: PropTypes.string.isRequired,
+  amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  data: PropTypes.array, // TODO: define better the array structure
+};
+
 export default MeasurementTable;
diff --git a/platform/ui/src/components/MeasurementTable/MeasurementTable.mdx b/platform/ui/src/components/MeasurementTable/MeasurementTable.mdx
index ba62387c6..5b3db5c36 100644
--- a/platform/ui/src/components/MeasurementTable/MeasurementTable.mdx
+++ b/platform/ui/src/components/MeasurementTable/MeasurementTable.mdx
@@ -19,9 +19,26 @@ import { MeasurementTable } from '@ohif/ui';
 
 <Playground>
   {() => {
+    const tableData = {
+      title: 'Measurements',
+      amount: 10,
+      data: new Array(10).fill(''),
+    };
     return (
-      <div className="p-4">
-        <MeasurementTable />
+      <div className="p-4 w-80">
+        <MeasurementTable {...tableData} />
+      </div>
+    );
+  }}
+</Playground>
+
+## Empty Data
+
+<Playground>
+  {() => {
+    return (
+      <div className="p-4 w-80">
+        <MeasurementTable title="Measurements" />
       </div>
     );
   }}
diff --git a/platform/ui/src/components/SegmentationTable/SegmentationTable.jsx b/platform/ui/src/components/SegmentationTable/SegmentationTable.jsx
new file mode 100644
index 000000000..743aa210f
--- /dev/null
+++ b/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;
diff --git a/platform/ui/src/components/SegmentationTable/SegmentationTable.mdx b/platform/ui/src/components/SegmentationTable/SegmentationTable.mdx
new file mode 100644
index 000000000..e9c1b9072
--- /dev/null
+++ b/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} />
diff --git a/platform/ui/src/components/SegmentationTable/index.js b/platform/ui/src/components/SegmentationTable/index.js
new file mode 100644
index 000000000..944e21e4f
--- /dev/null
+++ b/platform/ui/src/components/SegmentationTable/index.js
@@ -0,0 +1,3 @@
+import SegmentationTable from './SegmentationTable';
+
+export default SegmentationTable;
diff --git a/platform/ui/src/components/index.js b/platform/ui/src/components/index.js
index 27fbd9c27..05cb336f5 100644
--- a/platform/ui/src/components/index.js
+++ b/platform/ui/src/components/index.js
@@ -14,6 +14,7 @@ import Label from './Label';
 import MeasurementTable from './MeasurementTable';
 import NavBar from './NavBar';
 import Select from './Select';
+import SegmentationTable from './SegmentationTable';
 import SidePanel from './SidePanel';
 import Svg from './Svg';
 import StudyListExpandedRow from './StudyListExpandedRow';
@@ -44,6 +45,7 @@ export {
   MeasurementTable,
   NavBar,
   Select,
+  SegmentationTable,
   SidePanel,
   Svg,
   StudyListExpandedRow,
diff --git a/platform/ui/src/views/Viewer/Viewer.mdx b/platform/ui/src/views/Viewer/Viewer.mdx
index 1890df091..c1e711fdd 100644
--- a/platform/ui/src/views/Viewer/Viewer.mdx
+++ b/platform/ui/src/views/Viewer/Viewer.mdx
@@ -5,44 +5,112 @@ route: examples/viewer
 ---
 
 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
 
 <Playground>
-  <div>
-    <NavBar className="justify-start">
-      <div className="m-3">
-        <Svg name="logo-ohif" />
-      </div>
-    </NavBar>
-    <div
-      className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
-      style={{ height: 'calc(100vh - 57px' }}
-    >
-      <SidePanel
-        side="left"
-        iconName="group-layers"
-        iconLabel="Studies"
-        componentLabel="Studies"
-        defaultIsOpen={false}
-      >
-        <div className="flex justify-center text-white p-2">
-          panel placeholder
+  {() => {
+    const measurementTableData = {
+      title: 'Measurements',
+      amount: 10,
+      data: new Array(10).fill(''),
+    };
+    const segmentationTableData = {
+      title: 'Segments',
+      amount: 12,
+      data: new Array(12).fill(''),
+    };
+    return (
+      <div>
+        <NavBar className="justify-start">
+          <div className="m-3">
+            <Svg name="logo-ohif" />
+          </div>
+        </NavBar>
+        <div
+          className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
+          style={{ height: 'calc(100vh - 57px' }}
+        >
+          <SidePanel
+            side="left"
+            iconName="group-layers"
+            iconLabel="Studies"
+            componentLabel="Studies"
+            defaultIsOpen={false}
+          >
+            <div className="flex justify-center text-white p-2">
+              panel placeholder
+            </div>
+          </SidePanel>
+          <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
+            CONTENT
+          </div>
+          <SidePanel
+            side="right"
+            iconName="list-bullets"
+            iconLabel="Measure"
+            componentLabel="Measurements"
+            defaultIsOpen={true}
+          >
+            <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>
         </div>
-      </SidePanel>
-      <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
-        CONTENT
       </div>
-      <SidePanel
-        side="right"
-        iconName="list-bullets"
-        iconLabel="Measure"
-        componentLabel="Measurements"
-        defaultIsOpen={true}
-      >
-        <MeasurementTable />
-      </SidePanel>
-    </div>
-  </div>
+    );
+  }}
 </Playground>