fix(DicomTagBrowser): Fix parsing problems that was limiting nested tags rendering (#3306)

* fix(DicomTagBrowser): Fix parsing problems that was limiting nested tags rendering

* Added a progress indicator when switching to a list of more than 1000 rows.

* Switched to using react-window to virtualize the dicom tag browser window.

* Added filtering to the DICOM tag browser with a new search UI widget.
Lots of tweaks and updates to the look-and-feel.

* Removed unused import.

* PR feedback including some UI tweaks.

* More PR feedback.

---------

Co-authored-by: Igor Octaviano <igor.octaviano@radicalimaging.com>
Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com>

platform/ui/src/assets/icons/icon-clear-field.svg

@@ -0,0 +1,8 @@
+<svg width="19" height="19" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <circle fill="#0944B3" cx="9.5" cy="9.5" r="9.5"/>
+        <g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+            <path d="m5.188 5.187 8.625 8.625M13.813 5.187l-8.625 8.625"/>
+        </g>
+    </g>
+</svg>

platform/ui/src/assets/icons/icon-search.svg

@@ -0,0 +1,9 @@
+<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h18v18H0z"/>
+        <g transform="translate(1 1)" stroke="#348CFD" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+            <circle cx="5.565" cy="5.565" r="5.565"/>
+            <path d="M9.5 9.5 16 16"/>
+        </g>
+    </g>
+</svg>

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

@@ -53,12 +53,14 @@ import checkboxUnchecked from './../../assets/icons/checkbox-unchecked.svg';
 import iconAlertOutline from './../../assets/icons/icons-alert-outline.svg';
 import iconAlertSmall from './../../assets/icons/icon-alert-small.svg';
 import iconClose from './../../assets/icons/icon-close.svg';
+import iconClearField from './../../assets/icons/icon-clear-field.svg';
 import iconNextInactive from './../../assets/icons/icon-next-inactive.svg';
 import iconNext from './../../assets/icons/icon-next.svg';
 import iconPlay from './../../assets/icons/icon-play.svg';
 import iconPause from './../../assets/icons/icon-pause.svg';
 import iconPrevInactive from './../../assets/icons/icon-prev-inactive.svg';
 import iconPrev from './../../assets/icons/icon-prev.svg';
+import iconSearch from './../../assets/icons/icon-search.svg';
 import iconStatusAlert from './../../assets/icons/icon-status-alert.svg';
 import iconTransferring from './../../assets/icons/icon-transferring.svg';
 import iconUpload from './../../assets/icons/icon-upload.svg';
@@ -151,9 +153,11 @@ const ICONS = {
   info: info,
   'icon-alert-outline': iconAlertOutline,
   'icon-alert-small': iconAlertSmall,
+  'icon-clear-field': iconClearField,
   'icon-close': iconClose,
   'icon-play': iconPlay,
   'icon-pause': iconPause,
+  'icon-search': iconSearch,
   'icon-status-alert': iconStatusAlert,
   'icon-transferring': iconTransferring,
   'info-action': infoAction,

platform/ui/src/components/InputRange/InputRange.css

@@ -5,8 +5,8 @@ input[type='range'] {
 input[type='range']::-webkit-slider-thumb {
   -webkit-appearance: none;
   border: none;
-  height: 10px;
-  width: 10px;
+  height: 13px;
+  width: 13px;
   border-radius: 50%;
   background: #5acce6;
 }
@@ -14,8 +14,8 @@ input[type='range']::-webkit-slider-thumb {
 input[type='range']::-moz-range-thumb {
   -webkit-appearance: none;
   border: none;
-  height: 10px;
-  width: 10px;
+  height: 13px;
+  width: 13px;
   border-radius: 50%;
   background: #5acce6;
 }

platform/ui/src/components/InputRange/InputRange.tsx

@@ -23,7 +23,9 @@ const InputRange: React.FC<{
   inputClassName?: string;
   labelClassName?: string;
   labelVariant?: string;
-  showLabel: boolean;
+  showLabel?: boolean;
+  labelPosition?: string;
+  trackColor?: string;
 }> = ({
   value,
   onChange,
@@ -36,6 +38,8 @@ const InputRange: React.FC<{
   labelClassName,
   labelVariant,
   showLabel = true,
+  labelPosition = '',
+  trackColor,
 }) => {
   const [rangeValue, setRangeValue] = useState(value);
 
@@ -63,6 +67,16 @@ const InputRange: React.FC<{
         containerClassName ? containerClassName : ''
       }`}
     >
+      {showLabel && labelPosition === 'left' && (
+        <Typography
+          variant={labelVariant ?? 'subtitle'}
+          component="p"
+          className={classNames('w-8', labelClassName ?? 'text-white')}
+        >
+          {rangeValueForStr}
+          {unit}
+        </Typography>
+      )}
       <input
         type="range"
         min={minValue}
@@ -72,14 +86,16 @@ const InputRange: React.FC<{
           inputClassName ? inputClassName : ''
         }`}
         style={{
-          background: `linear-gradient(to right, #5acce6 0%, #5acce6 ${rangeValuePercentage -
-            10}%, #3a3f99 ${rangeValuePercentage + 10}%, #3a3f99 100%)`,
+          background:
+            trackColor ||
+            `linear-gradient(to right, #5acce6 0%, #5acce6 ${rangeValuePercentage -
+              10}%, #3a3f99 ${rangeValuePercentage + 10}%, #3a3f99 100%)`,
         }}
         onChange={handleChange}
         id="myRange"
         step={step}
       />
-      {showLabel && (
+      {showLabel && (!labelPosition || labelPosition === 'right') && (
         <Typography
           variant={labelVariant ?? 'subtitle'}
           component="p"