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