feat(4D): Add 4D dynamic volume rendering and new pre-clinical 4d pt/ct mode (#3664)

Co-authored-by: Alireza <ar.sedghi@gmail.com>
Co-authored-by: Neil <neil.a.macphee@gmail.com>

platform/ui/src/components/ProgressDropdown/ProgressDiscreteBar.tsx

@@ -0,0 +1,27 @@
+import React, { ReactElement } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { ProgressDropdownOption, ProgressDropdownOptionPropType } from './types';
+
+const ProgressDiscreteBar = ({ options }: { options: ProgressDropdownOption[] }): ReactElement => {
+  return (
+    <div className="flex">
+      {options.map((option, i) => (
+        <div
+          key={i}
+          className={classnames('mr-1 h-1 grow first:rounded-l-sm last:mr-0 last:rounded-r-sm', {
+            'bg-black': !option.activated && !option.completed,
+            'bg-primary-main': option.activated && !option.completed,
+            'bg-primary-light': option.completed,
+          })}
+        />
+      ))}
+    </div>
+  );
+};
+
+ProgressDiscreteBar.propTypes = {
+  options: PropTypes.arrayOf(ProgressDropdownOptionPropType).isRequired,
+};
+
+export default ProgressDiscreteBar;