feat(segmentation mode): Add create, and export SEG with Brushes (#3632)

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

@@ -4,23 +4,30 @@ input[type='range'] {
 
 input[type='range']::-webkit-slider-thumb {
   -webkit-appearance: none;
-  border: none;
+  @apply border-primary-dark  bg-primary-light border-[2px] border-solid;
   height: 13px;
   width: 13px;
   border-radius: 50%;
-  background: #5acce6;
 }
 
 input[type='range']::-moz-range-thumb {
-  -webkit-appearance: none;
-  border: none;
+  @apply border-primary-dark  bg-primary-light border-[2px] border-solid;
   height: 13px;
   width: 13px;
   border-radius: 50%;
-  background: #5acce6;
 }
 
-.input-range-thumb-design[type='range']::-webkit-slider-thumb {
-  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.521);
-  border: 1.5px solid #090c29;
+input[type='range']::-webkit-slider-runnable-track {
+  border: none !important;
+}
+
+input[type='range']::-moz-range-track {
+  border: none !important;
+}
+
+.range-track {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
 }

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

@@ -1,7 +1,8 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import classNames from 'classnames';
-import Typography from '../Typography';
+import { InputNumber } from '../../components';
 import './InputRange.css';
+import getMaxDigits from '../../utils/getMaxDigits';
 
 /**
  * React Range Input component
@@ -11,10 +12,9 @@ import './InputRange.css';
  *
  *
  */
-
-const InputRange: React.FC<{
+type InputRangeProps = {
   value: number;
-  onChange: (value) => void;
+  onChange: (value: number) => void;
   minValue: number;
   maxValue: number;
   step: number;
@@ -26,7 +26,11 @@ const InputRange: React.FC<{
   showLabel?: boolean;
   labelPosition?: string;
   trackColor?: string;
-}> = ({
+  allowNumberEdit?: boolean;
+  showAdjustmentArrows?: boolean;
+};
+
+const InputRange: React.FC<InputRangeProps> = ({
   value,
   onChange,
   minValue,
@@ -38,72 +42,76 @@ const InputRange: React.FC<{
   labelClassName,
   labelVariant,
   showLabel = true,
-  labelPosition = '',
+  labelPosition = 'right',
   trackColor,
+  allowNumberEdit = false,
+  showAdjustmentArrows = true,
 }) => {
   const [rangeValue, setRangeValue] = useState(value);
 
-  // Allow for the value property to update the range value.
+  const maxDigits = getMaxDigits(maxValue, step);
+  const labelWidth = `${maxDigits * 10}px`;
+
   useEffect(() => setRangeValue(value), [value]);
 
   const handleChange = useCallback(
     e => {
-      const rangeValue = Number(e.target.value);
-      setRangeValue(rangeValue);
-      onChange(rangeValue);
+      const val = Number(e.target.value);
+      setRangeValue(val);
+      onChange(val);
     },
-    [onChange, setRangeValue]
+    [onChange]
   );
 
   const rangeValuePercentage = ((rangeValue - minValue) / (maxValue - minValue)) * 100;
 
-  const rangeValueForStr = step >= 1 ? rangeValue.toFixed(0) : rangeValue.toFixed(1);
+  const LabelOrEditableNumber = allowNumberEdit ? (
+    <InputNumber
+      minValue={minValue}
+      maxValue={maxValue}
+      value={rangeValue}
+      onChange={val => {
+        setRangeValue(val);
+        onChange(val);
+      }}
+      step={step}
+      showAdjustmentArrows={showAdjustmentArrows}
+    />
+  ) : (
+    <span className={classNames(labelClassName ?? 'text-white')}>
+      {rangeValue}
+      {unit}
+    </span>
+  );
 
   return (
     <div
-      className={`flex cursor-pointer items-center space-x-1 ${
-        containerClassName ? containerClassName : ''
-      }`}
+      className={`flex cursor-pointer items-center ${containerClassName ?? ''}`}
+      onClick={e => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
     >
-      {showLabel && labelPosition === 'left' && (
-        <Typography
-          variant={labelVariant ?? 'subtitle'}
-          component="p"
-          className={classNames('w-8', labelClassName ?? 'text-white')}
-        >
-          {rangeValueForStr}
-          {unit}
-        </Typography>
-      )}
-      <input
-        type="range"
-        min={minValue}
-        max={maxValue}
-        value={rangeValue}
-        className={`input-range-thumb-design h-[3px] appearance-none rounded-lg ${
-          inputClassName ? inputClassName : ''
-        }`}
-        style={{
-          background:
-            trackColor ||
-            `linear-gradient(to right, #5acce6 0%, #5acce6 ${rangeValuePercentage - 10}%, #3a3f99 ${
-              rangeValuePercentage + 10
-            }%, #3a3f99 100%)`,
-        }}
-        onChange={handleChange}
-        id="myRange"
-        step={step}
-      />
-      {showLabel && (!labelPosition || labelPosition === 'right') && (
-        <Typography
-          variant={labelVariant ?? 'subtitle'}
-          component="p"
-          className={classNames('w-8', labelClassName ?? 'text-white')}
-        >
-          {rangeValueForStr}
-          {unit}
-        </Typography>
-      )}
+      <div className="relative flex w-full items-center">
+        {showLabel && labelPosition === 'left' && LabelOrEditableNumber}
+        <div className="range-track"></div>
+        <input
+          type="range"
+          min={minValue}
+          max={maxValue}
+          value={rangeValue}
+          className={`h-[3px] appearance-none rounded-md ${inputClassName ?? ''}`}
+          style={{
+            background: `linear-gradient(to right, #5acce6 0%, #5acce6 ${rangeValuePercentage}%, #3a3f99 ${rangeValuePercentage}%, #3a3f99 100%)`,
+          }}
+          onChange={handleChange}
+          id="myRange"
+          step={step}
+        />
+        {showLabel && labelPosition === 'right' && (
+          <div style={{ width: labelWidth }}>{LabelOrEditableNumber}</div>
+        )}
+      </div>
     </div>
   );
 };

platform/ui/src/components/InputRange/__stories__/inputRange.stories.mdx

@@ -1,4 +1,4 @@
-import InputRange from '../InputRange';
+import { InputRange } from '../../../components';
 import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
 
 export const argTypes = {
@@ -36,7 +36,7 @@ InputRange is a component that allows you to use as a boolean value
     args={{
       value: 10,
       minValue: 0,
-      maxValue: 300,
+      maxValue: 100,
       step: 10,
       unit: '%',
       onChange: () => console.log('input range change'),