|
@@ -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>
|