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/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"