ThumbnailTracked component

platform/ui/index.js

@@ -46,6 +46,7 @@ export {
   ThemeWrapper,
   Thumbnail,
   ThumbnailSR,
+  ThumbnailTracked,
   ThumbnailList,
   Toolbar,
   ToolbarButton,

platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import { Icon, Thumbnail } from '@ohif/ui';
+
+const ThumbnailTracked = ({
+  className,
+  imageSrc,
+  imageAltText,
+  seriesDescription,
+  seriesNumber,
+  instanceNumber,
+  isActive,
+  onClick,
+  viewportIdentificator,
+  isTracked,
+}) => {
+  const trackedIcon = isTracked ? 'circled-checkmark' : 'dotted-circle';
+
+  return (
+    <div
+      className={classnames(
+        'flex flex-row flex-1 px-3 py-2 showExcludeButtonOnHover cursor-pointer outline-none',
+        className
+      )}
+    >
+      <div className="flex flex-col flex-2 items-center">
+        <div
+          className={classnames(
+            'flex flex-col items-center justify-start p-2 mb-2 relative cursor-pointer',
+            isTracked && 'rounded-sm hover:bg-gray-900 showTooltipOnHover'
+          )}
+        >
+          <Icon name={trackedIcon} className="text-primary-light mb-2 w-4" />
+          <div className="text-white text-xl leading-tight h-5">
+            {viewportIdentificator}
+          </div>
+          <div
+            className={classnames(
+              'tooltip tooltip-right bg-black border border-secondary-main text-common-light text-base rounded py-2 px-4 top-0 w-max-content hidden'
+            )}
+          >
+            <div className="flex flex-row flex-1">
+              <div className="flex flex-col flex-1 pr-4">
+                <span>
+                  Series is <span className="text-white">tracked</span>
+                </span>
+                {viewportIdentificator && (
+                  <span>
+                    in viewport
+                    <span className="ml-1 text-white">
+                      {viewportIdentificator}
+                    </span>
+                  </span>
+                )}
+              </div>
+              <div className="flex flex-2 items-center justify-center">
+                <Icon name="info-link" className="text-primary-active" />
+              </div>
+            </div>
+            <svg
+              className="absolute text-black stroke-secondary-main stroke-2"
+              style={{
+                top: 'calc(50% - 8px)',
+                left: -15,
+                transform: 'rotate(270deg)',
+              }}
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+            >
+              <path fill="currentColor" d="M24 22h-24l12-20z" />
+            </svg>
+          </div>
+        </div>
+        {isTracked && (
+          <Icon
+            name="cancel"
+            className="text-primary-active excludeButton w-4"
+          />
+        )}
+      </div>
+      <Thumbnail
+        imageSrc={imageSrc}
+        imageAltText={imageAltText}
+        seriesDescription={seriesDescription}
+        seriesNumber={seriesNumber}
+        instanceNumber={instanceNumber}
+        isActive={isActive}
+        onClick={onClick}
+      />
+    </div>
+  );
+};
+
+ThumbnailTracked.propTypes = {
+  className: PropTypes.string,
+  imageSrc: PropTypes.string,
+  imageAltText: PropTypes.string,
+  seriesDescription: PropTypes.string.isRequired,
+  seriesNumber: PropTypes.number.isRequired,
+  instanceNumber: PropTypes.number.isRequired,
+  isActive: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+  isTracked: PropTypes.bool,
+  viewportIdentificator: PropTypes.string,
+};
+
+export default ThumbnailTracked;

platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.mdx

@@ -0,0 +1,39 @@
+---
+name: ThumbnailTracked
+menu: General
+route: components/ThumbnailTracked
+---
+
+import { Playground, Props } from 'docz';
+import { ThumbnailTracked } from '@ohif/ui';
+
+# ThumbnailTracked
+
+## Import
+
+```javascript
+import { ThumbnailTracked } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  <div className="flex flex-1 items-center justify-center p-4">
+    <div className="w-64">
+      <ThumbnailTracked
+        imageAltText="DisplaySet thumbnail image"
+        seriesDescription="Multiple line image series description lorem sit"
+        seriesNumber={4}
+        instanceNumber={902}
+        isActive={false}
+        onClick={() => alert('Thumbnail was clicked!')}
+        isTracked={true}
+        viewportIdentificator="A"
+      />
+    </div>
+  </div>
+</Playground>
+
+## Properties
+
+<Props of={ThumbnailTracked} />

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

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

platform/ui/src/components/index.js

@@ -32,6 +32,7 @@ import TableRow from './TableRow';
 import ThemeWrapper from './ThemeWrapper/';
 import Thumbnail from './Thumbnail';
 import ThumbnailSR from './ThumbnailSR';
+import ThumbnailTracked from './ThumbnailTracked';
 import ThumbnailList from './ThumbnailList';
 import Toolbar from './Toolbar';
 import ToolbarButton from './ToolbarButton';
@@ -75,6 +76,7 @@ export {
   ThemeWrapper,
   Thumbnail,
   ThumbnailSR,
+  ThumbnailTracked,
   ThumbnailList,
   Toolbar,
   ToolbarButton,