Segments table and color LUT

platform/ui/src/assets/icons/eye-hidden.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+        <g opacity=".5">
+            <path d="M17.433 2.556c1.352.98 2.578 2.122 3.65 3.402 0 0-4.719 5.959-10.541 5.959-.933-.006-1.86-.149-2.75-.426M3.637 9.35C2.29 8.373 1.07 7.234 0 5.958 0 5.958 4.719 0 10.542 0c.773.003 1.543.103 2.291.298M6.875 5.958c0-2.025 1.642-3.666 3.667-3.666M14.208 5.958c0 2.025-1.641 3.667-3.666 3.667" transform="translate(1 1) translate(.458 3.208)"/>
+        </g>
+        <path d="M19.938 0.229L2.063 18.104" transform="translate(1 1)"/>
+    </g>
+</svg>

platform/ui/src/assets/icons/eye-visible.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 13">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 1)">
+        <circle cx="10" cy="5.833" r="2.917"/>
+        <path d="M19.48 5.56C18.51 4.46 14.635.417 10 .417 5.365.417 1.49 4.46.52 5.56c-.136.157-.136.39 0 .547.97 1.1 4.845 5.143 9.48 5.143 4.635 0 8.51-4.043 9.48-5.143.136-.157.136-.39 0-.547z"/>
+    </g>
+</svg>

platform/ui/src/assets/styles/styles.css

@@ -16,6 +16,23 @@
   @apply bg-primary-main;
 }
 
+/* INVISIBLE SCROLLBAR */
+.invisible-scrollbar::-webkit-scrollbar {
+  @apply hidden;
+}
+
+.invisible-scrollbar::-webkit-scrollbar-track {
+  @apply hidden;
+}
+
+.invisible-scrollbar::-webkit-scrollbar-thumb {
+  @apply hidden;
+}
+
+.invisible-scrollbar::-webkit-scrollbar-thumb:window-inactive {
+  @apply hidden;
+}
+
 /* TOOLTIP WORKAROUND FOR ARROW UP */
 .tooltip::before {
   @apply bg-primary-dark absolute z-10;

platform/ui/src/components/Icon/getIcon.jsx

@@ -7,6 +7,8 @@ import cancel from './../../assets/icons/cancel.svg';
 import chevronDown from './../../assets/icons/chevron-down.svg';
 import chevronLeft from './../../assets/icons/chevron-left.svg';
 import chevronRight from './../../assets/icons/chevron-right.svg';
+import eyeVisible from './../../assets/icons/eye-visible.svg';
+import eyeHidden from './../../assets/icons/eye-hidden.svg';
 import groupLayers from './../../assets/icons/group-layers.svg';
 import infoLink from './../../assets/icons/info-link.svg';
 import launchArrow from './../../assets/icons/launch-arrow.svg';
@@ -42,6 +44,8 @@ const ICONS = {
   'chevron-down': chevronDown,
   'chevron-left': chevronLeft,
   'chevron-right': chevronRight,
+  'eye-visible': eyeVisible,
+  'eye-hidden': eyeHidden,
   'group-layers': groupLayers,
   'info-link': infoLink,
   'launch-arrow': launchArrow,

platform/ui/src/components/MeasurementTable/MeasurementTable.jsx

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