diff --git a/platform/ui/index.js b/platform/ui/index.js
index a6cf7e3fb..e03d2a056 100644
--- a/platform/ui/index.js
+++ b/platform/ui/index.js
@@ -46,6 +46,7 @@ export {
ThemeWrapper,
Thumbnail,
ThumbnailSR,
+ ThumbnailTracked,
ThumbnailList,
Toolbar,
ToolbarButton,
diff --git a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx
new file mode 100644
index 000000000..921180d08
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ {viewportIdentificator}
+
+
+
+
+
+ Series is tracked
+
+ {viewportIdentificator && (
+
+ in viewport
+
+ {viewportIdentificator}
+
+
+ )}
+
+
+
+
+
+
+
+
+ {isTracked && (
+
+ )}
+
+
+
+ );
+};
+
+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;
diff --git a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.mdx b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.mdx
new file mode 100644
index 000000000..cbb408d7b
--- /dev/null
+++ b/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
+
+
+
+
+ alert('Thumbnail was clicked!')}
+ isTracked={true}
+ viewportIdentificator="A"
+ />
+
+
+
+
+## Properties
+
+
diff --git a/platform/ui/src/components/ThumbnailTracked/index.js b/platform/ui/src/components/ThumbnailTracked/index.js
new file mode 100644
index 000000000..cf623a61f
--- /dev/null
+++ b/platform/ui/src/components/ThumbnailTracked/index.js
@@ -0,0 +1,2 @@
+import ThumbnailTracked from './ThumbnailTracked';
+export default ThumbnailTracked;
diff --git a/platform/ui/src/components/index.js b/platform/ui/src/components/index.js
index 8894a28ad..67e69abad 100644
--- a/platform/ui/src/components/index.js
+++ b/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,