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>
2023-05-26 12:42:25 -03:00 · 2023-05-26 12:42:25 -03:00 · b684d80426
commit b684d80426
parent 217b330d7b
12 changed files with 407 additions and 166 deletions
--- a/extensions/default/package.json
+++ b/extensions/default/package.json
@ -38,6 +38,7 @@
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-i18next": "^12.2.2",
+    "react-window": "^1.8.9",
    "webpack": "^5.50.0",
    "webpack-merge": "^5.7.3"
  },
--- a/extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx
+++ b/extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx
@ -1,27 +1,41 @@
 import dcmjs from 'dcmjs';
 import moment from 'moment';
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect, useRef } from 'react';
 import { classes } from '@ohif/core';
+import { Icon, InputRange, Select, Typography } from '@ohif/ui';
+import debounce from 'lodash.debounce';
+import classNames from 'classnames';
+
 import DicomTagTable from './DicomTagTable';
 import './DicomTagBrowser.css';
-import { InputRange, Select, Typography } from '@ohif/ui';

 const { ImageSet } = classes;
 const { DicomMetaDictionary } = dcmjs.data;
 const { nameMap } = DicomMetaDictionary;

 const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
+  // The column indices that are to be excluded during a filter of the table.
+  // At present the column indices are:
+  // 0: DICOM tag
+  // 1: VR
+  // 2: Keyword
+  // 3: Value
+  const excludedColumnIndicesForFilter: Set<number> = new Set([1]);
+
  const [
    selectedDisplaySetInstanceUID,
    setSelectedDisplaySetInstanceUID,
  ] = useState(displaySetInstanceUID);
  const [instanceNumber, setInstanceNumber] = useState(1);
+  const [filterValue, setFilterValue] = useState('');

  const onSelectChange = value => {
    setSelectedDisplaySetInstanceUID(value.value);
    setInstanceNumber(1);
  };

+  const searchInputRef = useRef(null);
+
  const activeDisplaySet = displaySets.find(
    ds => ds.displaySetInstanceUID === selectedDisplaySetInstanceUID
  );
@ -54,64 +68,130 @@ const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
    });
  }, [displaySets]);

+  const rows = useMemo(() => {
+    let metadata;
+    if (isImageStack) {
+      metadata = activeDisplaySet.images[instanceNumber - 1];
+    } else {
+      metadata = activeDisplaySet.instance || activeDisplaySet;
+    }
+    const tags = getSortedTags(metadata);
+    return getFormattedRowsFromTags(tags, metadata);
+  }, [instanceNumber, selectedDisplaySetInstanceUID]);
+
+  const filteredRows = useMemo(() => {
+    if (!filterValue) {
+      return rows;
+    }
+
+    const filterValueLowerCase = filterValue.toLowerCase();
+    return rows.filter(row => {
+      return row.reduce((keepRow, col, colIndex) => {
+        if (keepRow) {
+          // We are already keeping the row, why do more work so return now.
+          return keepRow;
+        }
+
+        if (excludedColumnIndicesForFilter.has(colIndex)) {
+          return keepRow;
+        }
+
+        return keepRow || col.toLowerCase().includes(filterValueLowerCase);
+      }, false);
+    });
+  }, [rows, filterValue]);
+
+  const debouncedSetFilterValue = useMemo(() => {
+    return debounce(setFilterValue, 200);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      debouncedSetFilterValue?.cancel();
+    };
+  }, []);
+
  return (
    <div className="dicom-tag-browser-content">
-      <div className="flex flex-row items-center mb-2">
-        <Typography variant="subtitle" className="w-1/2 mr-8">
-          Series
-        </Typography>
-        {showInstanceList && (
-          <Typography variant="subtitle" className="w-1/2">
-            Instance Number
+      <div className="flex flex-row mb-6 items-center pl-1">
+        <div className="flex flex-row items-center w-1/2">
+          <Typography variant="subtitle" className="mr-4">
+            Series
          </Typography>
-        )}
-      </div>
-      <div className="flex flex-row items-center mb-6">
-        <div className="w-1/2 mr-8">
-          <Select
-            isClearable={false}
-            onChange={onSelectChange}
-            options={displaySetList}
-            value={displaySetList.find(
-              ds => ds.value === selectedDisplaySetInstanceUID
-            )}
-            className="text-white"
-          />
-        </div>
-        {showInstanceList ? (
-          <div className="w-1/2">
-            <InputRange
-              value={instanceNumber}
-              key={selectedDisplaySetInstanceUID}
-              onChange={value => {
-                setInstanceNumber(parseInt(value));
-              }}
-              minValue={1}
-              maxValue={activeDisplaySet.images.length}
-              step={1}
+          <div className="grow mr-8">
+            <Select
+              id="display-set-selector"
+              isClearable={false}
+              onChange={onSelectChange}
+              options={displaySetList}
+              value={displaySetList.find(
+                ds => ds.value === selectedDisplaySetInstanceUID
+              )}
+              className="text-white"
            />
          </div>
-        ) : null}
+        </div>
+        <div className="flex flex-row items-center w-1/2">
+          {showInstanceList && (
+            <Typography variant="subtitle" className="mr-4">
+              Instance Number
+            </Typography>
+          )}
+          {showInstanceList && (
+            <div className="grow">
+              <InputRange
+                value={instanceNumber}
+                key={selectedDisplaySetInstanceUID}
+                onChange={value => {
+                  setInstanceNumber(parseInt(value));
+                }}
+                minValue={1}
+                maxValue={activeDisplaySet.images.length}
+                step={1}
+                inputClassName="w-full"
+                labelPosition="left"
+                trackColor={'#3a3f99'}
+              />
+            </div>
+          )}
+        </div>
      </div>
-      <DicomTagTable
-        rows={getFormattedRowsFromTags(activeDisplaySet, instanceNumber)}
-      ></DicomTagTable>
+      <div className="w-full h-1 bg-black"></div>
+      <div className="flex flex-row my-3 w-1/2">
+        {/* TODO - refactor the following into its own reusable component */}
+        <label className="relative block w-full mr-8">
+          <span className="absolute inset-y-0 left-0 flex items-center pl-2">
+            <Icon name="icon-search"></Icon>
+          </span>
+          <input
+            ref={searchInputRef}
+            type="text"
+            className="block bg-black w-full shadow transition duration-300 appearance-none border border-inputfield-main focus:border-inputfield-focus focus:outline-none disabled:border-inputfield-disabled rounded w-full py-2 px-9 text-base leading-tight placeholder:text-inputfield-placeholder"
+            placeholder="Search metadata..."
+            onChange={event => debouncedSetFilterValue(event.target.value)}
+            autoComplete="off"
+          ></input>
+          <span className="absolute inset-y-0 right-0 flex items-center pr-2">
+            <Icon
+              name="icon-clear-field"
+              className={classNames(
+                'cursor-pointer',
+                filterValue ? '' : 'hidden'
+              )}
+              onClick={() => {
+                searchInputRef.current.value = '';
+                debouncedSetFilterValue('');
+              }}
+            ></Icon>
+          </span>
+        </label>
+      </div>
+      <DicomTagTable rows={filteredRows} />
    </div>
  );
 };

-function getFormattedRowsFromTags(displaySet, instanceNumber) {
-  const isImageStack = _isImageStack(displaySet);
-
-  let metadata;
-
-  if (isImageStack) {
-    metadata = displaySet.images[instanceNumber - 1];
-  } else {
-    metadata = displaySet;
-  }
-
-  const tags = getSortedTags(metadata);
+function getFormattedRowsFromTags(tags, metadata) {
  const rows = [];

  tags.forEach(tagInfo => {
@ -126,7 +206,7 @@ function getFormattedRowsFromTags(displaySet, instanceNumber) {
      const { values } = tagInfo;

      values.forEach((item, index) => {
-        const formatedRowsFromTags = getFormattedRowsFromTags(item);
+        const formatedRowsFromTags = getFormattedRowsFromTags(item, metadata);

        rows.push([
          `${item[0].tagIndent}(FFFE,E000)`,
@ -140,34 +220,21 @@ function getFormattedRowsFromTags(displaySet, instanceNumber) {
    } else {
      if (tagInfo.vr === 'xs') {
        try {
-          /*  const dataset = metadataProvider.getStudyDataset(
-              meta.StudyInstanceUID
-            );*/
-          //  console.log(dataset);
-          //  const tag = dcmjs.data.Tag.fromPString(tagInfo.tag).toCleanString();
-          // const originalTagInfo = dataset[tag];
-          //  tagInfo.vr = originalTagInfo.vr;
+          const tag = dcmjs.data.Tag.fromPString(tagInfo.tag).toCleanString();
+          const originalTagInfo = metadata[tag];
+          tagInfo.vr = originalTagInfo.vr;
        } catch (error) {
          console.error(
            `Failed to parse value representation for tag '${tagInfo.keyword}'`
          );
        }
      }
-      if (tagInfo.vr === 'PN') {
-        rows.push([
-          `${tagInfo.tagIndent}${tagInfo.tag}`,
-          tagInfo.vr,
-          tagInfo.keyword,
-          tagInfo.value,
-        ]);
-      } else {
-        rows.push([
-          `${tagInfo.tagIndent}${tagInfo.tag}`,
-          tagInfo.vr,
-          tagInfo.keyword,
-          tagInfo.value,
-        ]);
-      }
+      rows.push([
+        `${tagInfo.tagIndent}${tagInfo.tag}`,
+        tagInfo.vr,
+        tagInfo.keyword,
+        tagInfo.value,
+      ]);
    }
  });

--- a/extensions/default/src/DicomTagBrowser/DicomTagTable.tsx
+++ b/extensions/default/src/DicomTagBrowser/DicomTagTable.tsx
@ -1,97 +1,224 @@
-import React from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { VariableSizeList as List } from 'react-window';
+import classNames from 'classnames';
+import debounce from 'lodash.debounce';

-function ColumnHeaders() {
+const lineHeightPx = 20;
+const lineHeightClassName = `leading-[${lineHeightPx}px]`;
+const rowVerticalPaddingPx = 10;
+const rowBottomBorderPx = 1;
+const rowVerticalPaddingStyle = { padding: `${rowVerticalPaddingPx}px 0` };
+const rowStyle = {
+  borderBottomWidth: `${rowBottomBorderPx}px`,
+  ...rowVerticalPaddingStyle,
+};
+
+function ColumnHeaders({ tagRef, vrRef, keywordRef, valueRef }) {
  return (
-    <div className="m-auto flex flex-col py-2 bg-secondary-light">
-      <div className="flex flex-row w-full">
-        <div className="px-3 w-5/24">
-          <label className="flex flex-col flex-1 text-white text-lg pl-1 select-none">
-            <span className="flex flex-row items-center focus:outline-none">
-              Tag
-            </span>
-          </label>
-        </div>
-        <div className="px-3 w-4/24">
-          <label className="flex flex-col flex-1 text-white text-lg pl-1 select-none">
-            <span className="flex flex-row items-center focus:outline-none">
-              VR
-            </span>
-          </label>
-        </div>
-        <div className="px-3 w-6/24">
-          <label className="flex flex-col flex-1 text-white text-lg pl-1 select-none">
-            <span className="flex flex-row items-center focus:outline-none">
-              Keyword
-            </span>
-          </label>
-        </div>
-        <div className="px-3 w-5/24">
-          <label className="flex flex-col flex-1 text-white text-lg pl-1 select-none">
-            <span className="flex flex-row items-center focus:outline-none">
-              Value
-            </span>
-          </label>
-        </div>
+    <div
+      className={classNames(
+        'flex flex-row w-full bg-secondary-dark ohif-scrollbar overflow-y-scroll'
+      )}
+      style={rowVerticalPaddingStyle}
+    >
+      <div className="px-3 w-4/24">
+        <label
+          ref={tagRef}
+          className="flex flex-col flex-1 text-white text-lg pl-1 select-none"
+        >
+          <span className="flex flex-row items-center focus:outline-none">
+            Tag
+          </span>
+        </label>
+      </div>
+      <div className="px-3 w-2/24">
+        <label
+          ref={vrRef}
+          className="flex flex-col flex-1 text-white text-lg pl-1 select-none"
+        >
+          <span className="flex flex-row items-center focus:outline-none">
+            VR
+          </span>
+        </label>
+      </div>
+      <div className="px-3 w-6/24">
+        <label
+          ref={keywordRef}
+          className="flex flex-col flex-1 text-white text-lg pl-1 select-none"
+        >
+          <span className="flex flex-row items-center focus:outline-none">
+            Keyword
+          </span>
+        </label>
+      </div>
+      <div className="px-3 w-5/24 grow">
+        <label
+          ref={valueRef}
+          className="flex flex-col flex-1 text-white text-lg pl-1 select-none"
+        >
+          <span className="flex flex-row items-center focus:outline-none">
+            Value
+          </span>
+        </label>
      </div>
    </div>
  );
 }

 function DicomTagTable({ rows }) {
+  const listRef = useRef();
+  const canvasRef = useRef();
+
+  const [tagHeaderElem, setTagHeaderElem] = useState(null);
+  const [vrHeaderElem, setVrHeaderElem] = useState(null);
+  const [keywordHeaderElem, setKeywordHeaderElem] = useState(null);
+  const [valueHeaderElem, setValueHeaderElem] = useState(null);
+
+  // Here the refs are inturn stored in state to trigger a render of the table.
+  // This virtualized table does NOT render until the header is rendered because the header column widths are used to determine the row heights in the table.
+  // Therefore whenever the refs change (in particular the first time the refs are set), we want to trigger a render of the table.
+  const tagRef = elem => {
+    if (elem) {
+      setTagHeaderElem(elem);
+    }
+  };
+  const vrRef = elem => {
+    if (elem) {
+      setVrHeaderElem(elem);
+    }
+  };
+  const keywordRef = elem => {
+    if (elem) {
+      setKeywordHeaderElem(elem);
+    }
+  };
+  const valueRef = elem => {
+    if (elem) {
+      setValueHeaderElem(elem);
+    }
+  };
+
+  /**
+   * When new rows are set, scroll to the top and reset the virtualization.
+   */
+  useEffect(() => {
+    if (!listRef?.current) {
+      return;
+    }
+
+    listRef.current.scrollTo(0);
+    listRef.current.resetAfterIndex(0);
+  }, [rows]);
+
+  /**
+   * When the browser window resizes, update the row virtualization (i.e. row heights)
+   */
+  useEffect(() => {
+    const debouncedResize = debounce(
+      () => listRef.current.resetAfterIndex(0),
+      100
+    );
+
+    window.addEventListener('resize', debouncedResize);
+
+    return () => {
+      debouncedResize.cancel();
+      window.removeEventListener('resize', debouncedResize);
+    };
+  }, []);
+
+  const Row = useCallback(
+    ({ index, style }) => {
+      const row = rows[index];
+
+      return (
+        <div
+          style={{ ...style, ...rowStyle }}
+          className={classNames(
+            'hover:bg-secondary-main transition duration-300 bg-black flex flex-row w-full border-secondary-light items-center text-base break-all',
+            lineHeightClassName
+          )}
+          key={`DICOMTagRow-${index}`}
+        >
+          <div className="px-3 w-4/24">{row[0]}</div>
+          <div className="px-3 w-2/24">{row[1]}</div>
+          <div className="px-3 w-6/24">{row[2]}</div>
+          <div className="px-3 w-5/24 grow">{row[3]}</div>
+        </div>
+      );
+    },
+    [rows]
+  );
+
+  /**
+   * Whenever any one of the column headers is set, then the header is rendered.
+   * Here we chose the tag header.
+   */
+  const isHeaderRendered = useCallback(() => tagHeaderElem !== null, [
+    tagHeaderElem,
+  ]);
+
+  /**
+   * Get the item/row size. We use the header column widths to calculate the various row heights.
+   * @param index the row index
+   * @returns the row height
+   */
+  const getItemSize = useCallback(
+    index => {
+      const headerWidths = [
+        tagHeaderElem.offsetWidth,
+        vrHeaderElem.offsetWidth,
+        keywordHeaderElem.offsetWidth,
+        valueHeaderElem.offsetWidth,
+      ];
+
+      const context = canvasRef.current.getContext('2d');
+      context.font = getComputedStyle(canvasRef.current).font;
+
+      return rows[index]
+        .map((colText, index) => {
+          const colOneLineWidth = context.measureText(colText).width;
+          const numLines = Math.ceil(colOneLineWidth / headerWidths[index]);
+          return (
+            numLines * lineHeightPx +
+            2 * rowVerticalPaddingPx +
+            rowBottomBorderPx
+          );
+        })
+        .reduce((maxHeight, colHeight) => Math.max(maxHeight, colHeight));
+    },
+    [rows, keywordHeaderElem, tagHeaderElem, valueHeaderElem, vrHeaderElem]
+  );
+
  return (
    <div>
-      {ColumnHeaders()}
+      <canvas
+        style={{ visibility: 'hidden', position: 'absolute' }}
+        className="text-base"
+        ref={canvasRef}
+      />
+      <ColumnHeaders
+        tagRef={tagRef}
+        vrRef={vrRef}
+        keywordRef={keywordRef}
+        valueRef={valueRef}
+      />
      <div
-        className="m-auto relative border-2 border-secondary-light overflow-hidden ohif-scrollbar"
+        className="m-auto relative border-2 border-black bg-black"
        style={{ height: '32rem' }}
      >
-        <table className="w-full text-white">
-          <tbody>
-            {rows.map((row, index) => {
-              const className = row.className ? row.className : null;
-
-              return (
-                <tr
-                  className="hover:bg-secondary-main transition duration-300 bg-primary-dark"
-                  key={`DICOMTagRow-${index}`}
-                >
-                  <td
-                    style={{ maxWidth: '0px' }}
-                    className="px-4 py-2 text-base break-all border-b border-secondary-light w-5/24"
-                  >
-                    <div className="flex">
-                      <div className="inline-flex max-w-full">{row[0]}</div>
-                    </div>
-                  </td>
-                  <td
-                    style={{ maxWidth: '0px' }}
-                    className="px-4 py-2 text-base break-all border-b border-secondary-light w-4/24"
-                  >
-                    <div className="flex">
-                      <div className="inline-flex max-w-full">{row[1]}</div>
-                    </div>
-                  </td>
-                  <td
-                    style={{ maxWidth: '0px' }}
-                    className="px-4 py-2 text-base break-all border-b border-secondary-light w-6/24"
-                  >
-                    <div className="flex">
-                      <div className="inline-flex max-w-full">{row[2]}</div>
-                    </div>
-                  </td>
-                  <td
-                    style={{ maxWidth: '0px' }}
-                    className="px-4 py-2 text-base break-all border-b border-secondary-light w-14/24"
-                  >
-                    <div className="flex">
-                      <div className="inline-flex max-w-full">{row[3]}</div>
-                    </div>
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
+        {isHeaderRendered() && (
+          <List
+            ref={listRef}
+            height={500}
+            itemCount={rows.length}
+            itemSize={getItemSize}
+            width={'100%'}
+            className="ohif-scrollbar"
+          >
+            {Row}
+          </List>
+        )}
      </div>
    </div>
  );
--- a/platform/ui/package.json
+++ b/platform/ui/package.json
@ -47,6 +47,7 @@
    "react-outside-click-handler": "^1.3.0",
    "react-select": "3.0.8",
    "react-with-direction": "^1.3.1",
+    "react-window": "^1.8.9",
    "swiper": "^8.4.2",
    "webpack": "^5.81.0"
  },
--- a/platform/ui/src/assets/icons/icon-clear-field.svg
+++ b/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>
--- a/platform/ui/src/assets/icons/icon-search.svg
+++ b/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>
--- a/platform/ui/src/components/Icon/getIcon.js
+++ b/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,
--- a/platform/ui/src/components/InputRange/InputRange.css
+++ b/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;
 }
--- a/platform/ui/src/components/InputRange/InputRange.tsx
+++ b/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"
--- a/platform/ui/tailwind.config.js
+++ b/platform/ui/tailwind.config.js
@ -39,7 +39,7 @@ module.exports = {
        main: '#3a3f99',
        disabled: '#2b166b',
        focus: '#5acce6',
-        placeholder: '#39383f'
+        placeholder: '#39383f',
      },

      secondary: {
--- a/platform/viewer/tailwind.config.js
+++ b/platform/viewer/tailwind.config.js
@ -50,7 +50,7 @@ module.exports = {
        main: '#3a3f99',
        disabled: '#2b166b',
        focus: '#5acce6',
-        placeholder: '#39383f'
+        placeholder: '#39383f',
      },

      secondary: {
--- a/yarn.lock
+++ b/yarn.lock
@ -1302,7 +1302,7 @@
    core-js-pure "^3.25.1"
    regenerator-runtime "^0.13.11"

-"@babel/runtime@7.17.9", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.6", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.6", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@7.17.9", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.6", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.6", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
  version "7.21.0"
  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
  integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
@ -13975,7 +13975,7 @@ memfs@^3.1.2, memfs@^3.4.1, memfs@^3.4.3:
  dependencies:
    fs-monkey "^1.0.3"

-memoize-one@^5.0.0:
+"memoize-one@>=3.1.1 <6", memoize-one@^5.0.0:
  version "5.2.1"
  resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
@ -17518,6 +17518,14 @@ react-waypoint@^10.3.0:
    prop-types "^15.0.0"
    react-is "^17.0.1 || ^18.0.0"

+react-window@^1.8.9:
+  version "1.8.9"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.9.tgz#24bc346be73d0468cdf91998aac94e32bc7fa6a8"
+  integrity sha512-+Eqx/fj1Aa5WnhRfj9dJg4VYATGwIUP2ItwItiJ6zboKWA6EX3lYDAXfGF2hyNqplEprhbtjbipiADEcwQ823Q==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    memoize-one ">=3.1.1 <6"
+
 react-with-direction@^1.3.1:
  version "1.4.0"
  resolved "https://registry.npmjs.org/react-with-direction/-/react-with-direction-1.4.0.tgz#ebdf64d685d0650ce966e872e6431ad5a2485444"