|  | @@ -1,9 +1,6 @@
 | 
	
		
			
				|  |  | -import { memo, useCallback } from 'react'
 | 
	
		
			
				|  |  | +import { memo } from 'react'
 | 
	
		
			
				|  |  |  import { useTranslation } from 'react-i18next'
 | 
	
		
			
				|  |  | -import {
 | 
	
		
			
				|  |  | -  DEFAULT_WEIGHTED_SCORE,
 | 
	
		
			
				|  |  | -  WeightedScoreEnum,
 | 
	
		
			
				|  |  | -} from '@/models/datasets'
 | 
	
		
			
				|  |  | +import './weighted-score.css'
 | 
	
		
			
				|  |  |  import Slider from '@/app/components/base/slider'
 | 
	
		
			
				|  |  |  import cn from '@/utils/classnames'
 | 
	
		
			
				|  |  |  
 | 
	
	
		
			
				|  | @@ -17,7 +14,6 @@ const formatNumber = (value: number) => {
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  type Value = {
 | 
	
		
			
				|  |  | -  type: WeightedScoreEnum
 | 
	
		
			
				|  |  |    value: number[]
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  
 | 
	
	
		
			
				|  | @@ -30,78 +26,31 @@ const WeightedScore = ({
 | 
	
		
			
				|  |  |    onChange = () => {},
 | 
	
		
			
				|  |  |  }: WeightedScoreProps) => {
 | 
	
		
			
				|  |  |    const { t } = useTranslation()
 | 
	
		
			
				|  |  | -  const options = [
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -      value: WeightedScoreEnum.SemanticFirst,
 | 
	
		
			
				|  |  | -      label: t('dataset.weightedScore.semanticFirst'),
 | 
	
		
			
				|  |  | -    },
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -      value: WeightedScoreEnum.KeywordFirst,
 | 
	
		
			
				|  |  | -      label: t('dataset.weightedScore.keywordFirst'),
 | 
	
		
			
				|  |  | -    },
 | 
	
		
			
				|  |  | -    {
 | 
	
		
			
				|  |  | -      value: WeightedScoreEnum.Customized,
 | 
	
		
			
				|  |  | -      label: t('dataset.weightedScore.customized'),
 | 
	
		
			
				|  |  | -    },
 | 
	
		
			
				|  |  | -  ]
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -  const disabled = value.type !== WeightedScoreEnum.Customized
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -  const handleTypeChange = useCallback((type: WeightedScoreEnum) => {
 | 
	
		
			
				|  |  | -    const result = { ...value, type }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    if (type === WeightedScoreEnum.SemanticFirst)
 | 
	
		
			
				|  |  | -      result.value = [DEFAULT_WEIGHTED_SCORE.semanticFirst.semantic, DEFAULT_WEIGHTED_SCORE.semanticFirst.keyword]
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    if (type === WeightedScoreEnum.KeywordFirst)
 | 
	
		
			
				|  |  | -      result.value = [DEFAULT_WEIGHTED_SCORE.keywordFirst.semantic, DEFAULT_WEIGHTED_SCORE.keywordFirst.keyword]
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    onChange(result)
 | 
	
		
			
				|  |  | -  }, [value, onChange])
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |    return (
 | 
	
		
			
				|  |  |      <div>
 | 
	
		
			
				|  |  | -      <div className='flex items-center mb-1 space-x-4'>
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -          options.map(option => (
 | 
	
		
			
				|  |  | -            <div
 | 
	
		
			
				|  |  | -              key={option.value}
 | 
	
		
			
				|  |  | -              className='flex py-1.5 max-w-[calc((100%-32px)/3)] system-sm-regular text-text-secondary cursor-pointer'
 | 
	
		
			
				|  |  | -              onClick={() => handleTypeChange(option.value)}
 | 
	
		
			
				|  |  | -            >
 | 
	
		
			
				|  |  | -              <div
 | 
	
		
			
				|  |  | -                className={cn(
 | 
	
		
			
				|  |  | -                  'shrink-0 mr-2 w-4 h-4 bg-components-radio-bg border border-components-radio-border rounded-full shadow-xs',
 | 
	
		
			
				|  |  | -                  value.type === option.value && 'border-[5px] border-components-radio-border-checked',
 | 
	
		
			
				|  |  | -                )}
 | 
	
		
			
				|  |  | -              ></div>
 | 
	
		
			
				|  |  | -              <div className='truncate' title={option.label}>{option.label}</div>
 | 
	
		
			
				|  |  | -            </div>
 | 
	
		
			
				|  |  | -          ))
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -      </div>
 | 
	
		
			
				|  |  | -      <div className='flex items-center px-3 h-9 space-x-3 rounded-lg border border-components-panel-border'>
 | 
	
		
			
				|  |  | -        <div className='shrink-0 flex items-center w-[90px] system-xs-semibold-uppercase text-util-colors-blue-blue-500'>
 | 
	
		
			
				|  |  | -          <div className='mr-1 truncate uppercase' title={t('dataset.weightedScore.semantic') || ''}>
 | 
	
		
			
				|  |  | -            {t('dataset.weightedScore.semantic')}
 | 
	
		
			
				|  |  | -          </div>
 | 
	
		
			
				|  |  | -          {formatNumber(value.value[0])}
 | 
	
		
			
				|  |  | -        </div>
 | 
	
		
			
				|  |  | +      <div className='px-3 pt-5 h-[52px] space-x-3 rounded-lg border border-components-panel-border'>
 | 
	
		
			
				|  |  |          <Slider
 | 
	
		
			
				|  |  | -          className={cn('grow h-0.5 bg-gradient-to-r from-[#53B1FD] to-[#2ED3B7]', disabled && 'cursor-not-allowed')}
 | 
	
		
			
				|  |  | +          className={cn('grow h-0.5 !bg-util-colors-teal-teal-500 rounded-full')}
 | 
	
		
			
				|  |  |            max={1.0}
 | 
	
		
			
				|  |  |            min={0}
 | 
	
		
			
				|  |  |            step={0.1}
 | 
	
		
			
				|  |  |            value={value.value[0]}
 | 
	
		
			
				|  |  | -          onChange={v => onChange({ type: value.type, value: [v, (10 - v * 10) / 10] })}
 | 
	
		
			
				|  |  | -          disabled={disabled}
 | 
	
		
			
				|  |  | -          thumbClassName={cn(disabled && '!cursor-not-allowed')}
 | 
	
		
			
				|  |  | -          trackClassName='!bg-transparent'
 | 
	
		
			
				|  |  | +          onChange={v => onChange({ value: [v, (10 - v * 10) / 10] })}
 | 
	
		
			
				|  |  | +          trackClassName='weightedScoreSliderTrack'
 | 
	
		
			
				|  |  |          />
 | 
	
		
			
				|  |  | -        <div className='shrink-0 flex items-center justify-end w-[90px] system-xs-semibold-uppercase text-util-colors-cyan-cyan-500'>
 | 
	
		
			
				|  |  | -          {formatNumber(value.value[1])}
 | 
	
		
			
				|  |  | -          <div className='ml-1 truncate uppercase' title={t('dataset.weightedScore.keyword') || ''}>
 | 
	
		
			
				|  |  | -            {t('dataset.weightedScore.keyword')}
 | 
	
		
			
				|  |  | +        <div className='flex justify-between mt-1'>
 | 
	
		
			
				|  |  | +          <div className='shrink-0 flex items-center w-[90px] system-xs-semibold-uppercase text-util-colors-blue-light-blue-light-500'>
 | 
	
		
			
				|  |  | +            <div className='mr-1 truncate uppercase' title={t('dataset.weightedScore.semantic') || ''}>
 | 
	
		
			
				|  |  | +              {t('dataset.weightedScore.semantic')}
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +            {formatNumber(value.value[0])}
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +          <div className='shrink-0 flex items-center justify-end w-[90px] system-xs-semibold-uppercase text-util-colors-teal-teal-500'>
 | 
	
		
			
				|  |  | +            {formatNumber(value.value[1])}
 | 
	
		
			
				|  |  | +            <div className='ml-1 truncate uppercase' title={t('dataset.weightedScore.keyword') || ''}>
 | 
	
		
			
				|  |  | +              {t('dataset.weightedScore.keyword')}
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  |            </div>
 | 
	
		
			
				|  |  |          </div>
 | 
	
		
			
				|  |  |        </div>
 |