feat: Study List Table - v2 (#1497)

* small fix in button hover

* exported icons

* feat: StudyList Table

* icons comment

* fix bottom spacing

* add gatsby plugin for svg import

* move mock file to ui

* replace component to import from ui

* move StudyList to platform/ui

* fix inner table bg color

* fix inner table border

* add custom flex values

* create custom class for custom scrollbar

* fix inner table

* update comment

* refactor for reusable classes

* update scrollbar name

* fix studyList export

* update scrollbar class

platform/ui/index.js

@@ -6,3 +6,5 @@ export {
   ThemeWrapper,
   Typography,
 } from './src/components';
+
+export { StudyList } from './src/views';

platform/ui/src/assets/icons/instances-active.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20">
+    <g fill="#348CFD">
+        <path d="M14.75.917c.693 0 1.263.528 1.327 1.205l.006.128v4.167c0 .276-.224.5-.5.5-.245 0-.45-.177-.492-.41l-.008-.09V2.25c0-.161-.114-.295-.266-.327l-.067-.006H2.25c-.161 0-.295.114-.327.266l-.006.067v12.5c0 .161.114.295.266.327l.067.006h4.167c.276 0 .5.224.5.5 0 .246-.177.45-.41.492l-.09.008H2.25c-.693 0-1.263-.528-1.327-1.205l-.006-.128V2.25c0-.693.528-1.263 1.205-1.327L2.25.917h12.5z" transform="translate(-.5 -1)"/>
+        <path d="M19.583 5.917H7.417c-.829 0-1.5.671-1.5 1.5v12.166c0 .829.671 1.5 1.5 1.5h12.166c.829 0 1.5-.671 1.5-1.5V7.417c0-.829-.671-1.5-1.5-1.5zm-12.166 1h12.166c.276 0 .5.224.5.5v12.166c0 .276-.224.5-.5.5H7.417c-.276 0-.5-.224-.5-.5V7.417c0-.276.224-.5.5-.5z" transform="translate(-.5 -1)"/>
+    </g>
+</svg>

platform/ui/src/assets/icons/instances-inactive.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20">
+    <g fill="#3A3F99">
+        <path d="M13.75-.083c.693 0 1.263.528 1.327 1.205l.006.128v4.167c0 .276-.224.5-.5.5-.245 0-.45-.177-.492-.41l-.008-.09V1.25c0-.161-.114-.295-.266-.327L13.75.917H1.25c-.161 0-.295.114-.327.266l-.006.067v12.5c0 .161.114.295.266.327l.067.006h4.167c.276 0 .5.224.5.5 0 .246-.177.45-.41.492l-.09.008H1.25c-.693 0-1.263-.528-1.327-1.205l-.006-.128V1.25c0-.693.528-1.263 1.205-1.327l.128-.006h12.5z" transform="translate(.5)"/>
+        <path d="M18.583 4.917H6.417c-.829 0-1.5.671-1.5 1.5v12.166c0 .829.671 1.5 1.5 1.5h12.166c.829 0 1.5-.671 1.5-1.5V6.417c0-.829-.671-1.5-1.5-1.5zm-12.166 1h12.166c.276 0 .5.224.5.5v12.166c0 .276-.224.5-.5.5H6.417c-.276 0-.5-.224-.5-.5V6.417c0-.276.224-.5.5-.5z" transform="translate(.5)"/>
+    </g>
+</svg>

platform/ui/src/components/Button/Button.jsx

@@ -40,7 +40,7 @@ const variantClasses = {
   },
   outlined: {
     default:
-      'border bg-trasparent border-custom-aquaBright text-custom-aquaBright hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'border bg-trasparent border-custom-aquaBright text-custom-aquaBright hover:bg-custom-aquaBright hover:text-black focus:text-black focus:bg-custom-aquaBright active:opacity-80',
     primary:
       'border bg-transparent border-custom-blue text-custom-blue hover:opacity-80 active:opacity-100 focus:opacity-80',
     secondary:

platform/ui/src/gatsby-theme-docz/tailwind.css

@@ -3,4 +3,22 @@
 @tailwind utilities;
 
 /* IMPORT CUSTOM FONT */
-@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap');
+
+/* CUSTOM OHIF SCROLLBAR */
+.ohif-scrollbar::-webkit-scrollbar {
+  @apply w-2;
+}
+
+.ohif-scrollbar::-webkit-scrollbar-track {
+  @apply rounded;
+}
+
+.ohif-scrollbar::-webkit-scrollbar-thumb {
+  @apply rounded;
+  @apply bg-custom-blue;
+}
+
+.ohif-scrollbar::-webkit-scrollbar-thumb:window-inactive {
+  @apply bg-custom-blue;
+}

platform/ui/src/views/StudyList/StudyList.mdx

@@ -0,0 +1,30 @@
+---
+name: Study List
+menu: Views
+route: components/studyList
+---
+
+import { Playground, Props } from 'docz';
+import StudyList from './';
+
+# StudyList
+
+Description...
+
+## Import
+
+```javascript
+import { StudyList } from '@ohfi/ui';
+```
+
+## StudyList
+
+<Playground>
+  <>
+    <StudyList />
+  </>
+</Playground>
+
+## Properties
+
+<Props of={StudyList} />

platform/ui/src/views/StudyList/components/StudyListTable.js

@@ -0,0 +1,196 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import { Button } from '@ohif/ui';
+
+/** TODO: Icon component should be used instead of importing the icons directly */
+import ChevronRight from '../../../assets/icons/chevron-right.svg';
+import ChevronDown from '../../../assets/icons/chevron-down.svg';
+import InstancesActive from '../../../assets/icons/instances-active.svg';
+import InstancesInactive from '../../../assets/icons/instances-inactive.svg';
+import LaunchInfo from '../../../assets/icons/launch-info.svg';
+
+const TableRow = () => {
+  const [isOpened, setIsOpened] = useState(false);
+  const toggleRow = () => setIsOpened(!isOpened);
+  const ChevronIcon = isOpened ? ChevronDown : ChevronRight;
+  const InstancesIcon = isOpened ? InstancesActive : InstancesInactive;
+  const tdClasses = [
+    'px-4 py-2',
+    { 'border-b border-custom-violetPale': !isOpened },
+  ];
+  const seriesWidthClasses = {
+    normal: 'px-2 flex-1',
+    small: 'px-2 flex-0.3',
+  };
+  const seriesBodyClasses = 'border-r border-custom-violetPale';
+
+  return (
+    <>
+      <tr>
+        <td
+          className={classnames('border-0 p-0', {
+            'border-b border-custom-violetPale bg-custom-navyDark': isOpened,
+          })}
+        >
+          <div
+            className={classnames('w-full', {
+              'border border-custom-aquaBright rounded overflow-hidden mb-2': isOpened,
+            })}
+          >
+            <table className={classnames('w-full p-4')}>
+              <tbody>
+                <tr
+                  className={classnames(
+                    'cursor-pointer hover:bg-custom-violetDark transition duration-300 bg-black',
+                    {
+                      'bg-custom-navyDark': !isOpened,
+                    },
+                    { 'bg-custom-navy': isOpened }
+                  )}
+                  onClick={toggleRow}
+                >
+                  <td className={classnames(...tdClasses)}>
+                    <ChevronIcon />
+                  </td>
+                  <td className={classnames(...tdClasses)}>Patient name</td>
+                  <td className={classnames(...tdClasses)}>11000002</td>
+                  <td className={classnames(...tdClasses)}>
+                    Mar-29-2013 11:26 AM
+                  </td>
+                  <td className={classnames(...tdClasses)}>
+                    PET^1_PETCT_WB_AC (Adult)
+                  </td>
+                  <td className={classnames(...tdClasses)}>CT/OT/PT</td>
+                  <td className={classnames(...tdClasses)}>00000001</td>
+                  <td className={classnames(...tdClasses)}>
+                    <InstancesIcon className="inline-flex mr-2" />
+                    902
+                  </td>
+                </tr>
+                {isOpened && (
+                  <tr className={classnames('bg-black')}>
+                    <td colSpan="8" className="py-4 pl-20 pr-2">
+                      <div>
+                        <Button
+                          rounded="full"
+                          variant="outlined"
+                          endIcon={<LaunchInfo />}
+                          className="mr-4"
+                        >
+                          Basic Viewer
+                        </Button>
+                        <Button
+                          rounded="full"
+                          variant="outlined"
+                          endIcon={<LaunchInfo />}
+                          className="mr-4"
+                        >
+                          Segmentation
+                        </Button>
+                        <Button
+                          rounded="full"
+                          variant="outlined"
+                          endIcon={<LaunchInfo />}
+                        >
+                          Module 3
+                        </Button>
+                        <span className="ml-4 text-lg text-custom-grayBright">
+                          {/* ADD ICON HERE */}
+                          Feedback text lorem ipsum dolor sit amet
+                        </span>
+                      </div>
+                      <div className="mt-4">
+                        <div className="w-full text-lg">
+                          <div className="bg-custom-navy border-b border-custom-violetPale flex">
+                            <div
+                              className={classnames(seriesWidthClasses.normal)}
+                            >
+                              Description
+                            </div>
+                            <div
+                              className={classnames(seriesWidthClasses.small)}
+                            >
+                              Series
+                            </div>
+                            <div
+                              className={classnames(seriesWidthClasses.small)}
+                            >
+                              Modality
+                            </div>
+                            <div
+                              className={classnames(seriesWidthClasses.normal)}
+                            >
+                              Instances
+                            </div>
+                          </div>
+                          <div className="mt-2 h-48 overflow-y-scroll ohif-scrollbar">
+                            {new Array(30).fill('').map((el, i) => (
+                              <div className="w-full flex" key={i}>
+                                <div
+                                  className={classnames(
+                                    seriesWidthClasses.normal,
+                                    seriesBodyClasses
+                                  )}
+                                >
+                                  Patient Protocol
+                                </div>
+                                <div
+                                  className={classnames(
+                                    seriesWidthClasses.small,
+                                    seriesBodyClasses
+                                  )}
+                                >
+                                  #
+                                </div>
+                                <div
+                                  className={classnames(
+                                    seriesWidthClasses.small,
+                                    seriesBodyClasses
+                                  )}
+                                >
+                                  CT
+                                </div>
+                                <div className={classnames('pl-3 flex-1')}>
+                                  149
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </td>
+      </tr>
+    </>
+  );
+};
+
+const StudyListTable = () => {
+  return (
+    <>
+      <div className="bg-black">
+        <div className="container m-auto relative">
+          <div className="bg-custom-blue text-center text-base py-1 rounded-b sticky top-0">
+            <p className="text-white">
+              Filter list to 100 studies or less to enable sorting
+            </p>
+          </div>
+          <table className="w-full text-white">
+            <tbody>
+              {new Array(30).fill('').map((empty, i) => (
+                <TableRow key={i} />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default StudyListTable;

platform/ui/src/views/StudyList/index.js

@@ -0,0 +1,2 @@
+import StudyList from './StudyList';
+export default StudyList;

platform/ui/src/views/index.js

@@ -0,0 +1,3 @@
+import StudyList from './StudyList';
+
+export { StudyList };

platform/ui/tailwind.config.js

@@ -233,6 +233,8 @@ module.exports = {
     },
     flex: {
       '1': '1 1 0%',
+      '0.3': '0.3 0.3 0%',
+      '0.5': '0.5 0.5 0%',
       auto: '1 1 auto',
       initial: '0 1 auto',
       none: 'none',

platform/viewer/src/components/StudyList/components/StudyListTable.js

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const StudyListTable = () => {
-  return <div>{`<- STUDYLIST TABLE CONTENT ->`}</div>;
-};
-
-export default StudyListTable;

platform/viewer/src/components/StudyList/index.js

@@ -1 +0,0 @@
-export { default as StudyList } from './StudyList';

platform/viewer/src/connectedComponents/ConnectedStudyList.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import StudyList from '../components/StudyList/StudyList';
+import { StudyList } from '@ohif/ui';
 
 const ConnectedStudyList = () => {
   return <StudyList />;