perf(pricing): reduce dynamic pricing table render work
- reuse dynamic pricing field metadata instead of rebuilding it inside table columns. - precompute formatted dynamic prices per tier and group to avoid repeated entry mapping for each cell. - simplify select option construction in related dialogs while preserving the same choices.
This commit is contained in:
QuentinHsu
+5
-7
@@ -55,10 +55,10 @@ import {
|
||||
} from '@/components/ui/tooltip'
|
||||
import {
|
||||
DataTableBulkActions as BulkActionsToolbar,
|
||||
DataTablePagination,
|
||||
DataTableView,
|
||||
useDataTable,
|
||||
} from '@/components/data-table'
|
||||
import { DataTablePagination } from '@/components/data-table'
|
||||
import { Dialog } from '@/components/dialog'
|
||||
import {
|
||||
sideDrawerContentClassName,
|
||||
@@ -539,12 +539,10 @@ export function ChannelTestDialog({
|
||||
<div className='grid gap-2'>
|
||||
<Label htmlFor='endpoint-type'>{t('Endpoint Type')}</Label>
|
||||
<Select
|
||||
items={[
|
||||
...endpointTypeOptions.map((option) => {
|
||||
const itemValue = option.value
|
||||
return { value: itemValue, label: t(option.label) }
|
||||
}),
|
||||
]}
|
||||
items={endpointTypeOptions.map((option) => ({
|
||||
value: option.value,
|
||||
label: t(option.label),
|
||||
}))}
|
||||
value={endpointType}
|
||||
onValueChange={(v) => v !== null && setEndpointType(v)}
|
||||
>
|
||||
|
||||
+7
-7
@@ -65,6 +65,8 @@ const FIELD_LABELS: Record<string, string> = {
|
||||
enable_groups: 'Enable Groups',
|
||||
}
|
||||
|
||||
const PAGE_SIZE_OPTIONS = [5, 10, 20, 50] as const
|
||||
|
||||
const formatValue = (value: unknown) => {
|
||||
if (value === null || value === undefined) return '—'
|
||||
if (typeof value === 'string') return value || '—'
|
||||
@@ -546,12 +548,10 @@ export function UpstreamConflictDialog({
|
||||
{t('Rows per page')}
|
||||
</span>
|
||||
<Select
|
||||
items={[
|
||||
...[5, 10, 20, 50].map((size) => ({
|
||||
value: String(size),
|
||||
label: size,
|
||||
})),
|
||||
]}
|
||||
items={PAGE_SIZE_OPTIONS.map((size) => ({
|
||||
value: String(size),
|
||||
label: size,
|
||||
}))}
|
||||
value={String(pageSize)}
|
||||
onValueChange={(value) => {
|
||||
setPageSize(Number(value))
|
||||
@@ -563,7 +563,7 @@ export function UpstreamConflictDialog({
|
||||
</SelectTrigger>
|
||||
<SelectContent alignItemWithTrigger={false}>
|
||||
<SelectGroup>
|
||||
{[5, 10, 20, 50].map((size) => (
|
||||
{PAGE_SIZE_OPTIONS.map((size) => (
|
||||
<SelectItem key={size} value={String(size)}>
|
||||
{size}
|
||||
</SelectItem>
|
||||
|
||||
+77
-70
@@ -577,6 +577,36 @@ function AutoGroupChain(props: { model: PricingModel; autoGroups: string[] }) {
|
||||
)
|
||||
}
|
||||
|
||||
function getDynamicPriceFields(
|
||||
tiers: ReturnType<typeof getDynamicPricingTiers>,
|
||||
options: Parameters<typeof getDynamicPriceEntries>[1]
|
||||
) {
|
||||
return Array.from(
|
||||
new Map(
|
||||
tiers
|
||||
.flatMap((tier) => getDynamicPriceEntries(tier, options))
|
||||
.map((entry) => [entry.field, entry])
|
||||
).values()
|
||||
)
|
||||
}
|
||||
|
||||
function getDynamicFormattedPricesByTier(
|
||||
tiers: ReturnType<typeof getDynamicPricingTiers>,
|
||||
options: Parameters<typeof getDynamicPriceEntries>[1]
|
||||
) {
|
||||
return new Map(
|
||||
tiers.map((tier) => [
|
||||
tier,
|
||||
new Map(
|
||||
getDynamicPriceEntries(tier, options).map((entry) => [
|
||||
entry.field,
|
||||
entry.formatted,
|
||||
])
|
||||
),
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Group pricing table
|
||||
// ----------------------------------------------------------------------------
|
||||
@@ -667,21 +697,13 @@ function GroupPricingSection(props: {
|
||||
)
|
||||
}
|
||||
|
||||
const priceFields = Array.from(
|
||||
new Map(
|
||||
dynamicTiers
|
||||
.flatMap((tier) =>
|
||||
getDynamicPriceEntries(tier, {
|
||||
tokenUnit: props.tokenUnit,
|
||||
showRechargePrice,
|
||||
priceRate: props.priceRate,
|
||||
usdExchangeRate: props.usdExchangeRate,
|
||||
groupRatioMultiplier: 1,
|
||||
})
|
||||
)
|
||||
.map((entry) => [entry.field, entry])
|
||||
).values()
|
||||
)
|
||||
const priceFields = getDynamicPriceFields(dynamicTiers, {
|
||||
tokenUnit: props.tokenUnit,
|
||||
showRechargePrice,
|
||||
priceRate: props.priceRate,
|
||||
usdExchangeRate: props.usdExchangeRate,
|
||||
groupRatioMultiplier: 1,
|
||||
})
|
||||
|
||||
return (
|
||||
<section>
|
||||
@@ -690,6 +712,17 @@ function GroupPricingSection(props: {
|
||||
<div className='space-y-3'>
|
||||
{availableGroups.map((group) => {
|
||||
const ratio = props.groupRatio[group] || 1
|
||||
const formattedPricesByTier = getDynamicFormattedPricesByTier(
|
||||
dynamicTiers,
|
||||
{
|
||||
tokenUnit: props.tokenUnit,
|
||||
showRechargePrice,
|
||||
priceRate: props.priceRate,
|
||||
usdExchangeRate: props.usdExchangeRate,
|
||||
groupRatioMultiplier: ratio,
|
||||
}
|
||||
)
|
||||
|
||||
return (
|
||||
<div key={group} className='overflow-hidden rounded-lg border'>
|
||||
<div className='bg-muted/20 flex items-center justify-between gap-3 border-b px-3 py-2'>
|
||||
@@ -719,19 +752,10 @@ function GroupPricingSection(props: {
|
||||
header: t(fieldEntry.shortLabel),
|
||||
className: `${thClass} text-right`,
|
||||
cellClassName: 'py-2.5 text-right font-mono',
|
||||
cell: (tier: (typeof dynamicTiers)[number]) => {
|
||||
const entries = getDynamicPriceEntries(tier, {
|
||||
tokenUnit: props.tokenUnit,
|
||||
showRechargePrice,
|
||||
priceRate: props.priceRate,
|
||||
usdExchangeRate: props.usdExchangeRate,
|
||||
groupRatioMultiplier: ratio,
|
||||
})
|
||||
const entryMap = new Map(
|
||||
entries.map((entry) => [entry.field, entry])
|
||||
)
|
||||
return entryMap.get(fieldEntry.field)?.formatted ?? '-'
|
||||
},
|
||||
cell: (tier: (typeof dynamicTiers)[number]) =>
|
||||
formattedPricesByTier
|
||||
.get(tier)
|
||||
?.get(fieldEntry.field) ?? '-',
|
||||
})),
|
||||
]}
|
||||
/>
|
||||
@@ -746,6 +770,27 @@ function GroupPricingSection(props: {
|
||||
)
|
||||
}
|
||||
|
||||
const renderGroupPrice = (group: string, type: PriceType) =>
|
||||
formatGroupPrice(
|
||||
props.model,
|
||||
group,
|
||||
type,
|
||||
props.tokenUnit,
|
||||
showRechargePrice,
|
||||
props.priceRate,
|
||||
props.usdExchangeRate,
|
||||
props.groupRatio
|
||||
)
|
||||
const renderFixedGroupPrice = (group: string) =>
|
||||
formatFixedPrice(
|
||||
props.model,
|
||||
group,
|
||||
showRechargePrice,
|
||||
props.priceRate,
|
||||
props.usdExchangeRate,
|
||||
props.groupRatio
|
||||
)
|
||||
|
||||
return (
|
||||
<section>
|
||||
<SectionTitle>{t('Pricing by Group')}</SectionTitle>
|
||||
@@ -778,51 +823,21 @@ function GroupPricingSection(props: {
|
||||
header: t('Input'),
|
||||
className: `${thClass} text-right`,
|
||||
cellClassName: 'py-2.5 text-right font-mono',
|
||||
cell: (group: string) =>
|
||||
formatGroupPrice(
|
||||
props.model,
|
||||
group,
|
||||
'input',
|
||||
props.tokenUnit,
|
||||
showRechargePrice,
|
||||
props.priceRate,
|
||||
props.usdExchangeRate,
|
||||
props.groupRatio
|
||||
),
|
||||
cell: (group: string) => renderGroupPrice(group, 'input'),
|
||||
},
|
||||
{
|
||||
id: 'output',
|
||||
header: t('Output'),
|
||||
className: `${thClass} text-right`,
|
||||
cellClassName: 'py-2.5 text-right font-mono',
|
||||
cell: (group: string) =>
|
||||
formatGroupPrice(
|
||||
props.model,
|
||||
group,
|
||||
'output',
|
||||
props.tokenUnit,
|
||||
showRechargePrice,
|
||||
props.priceRate,
|
||||
props.usdExchangeRate,
|
||||
props.groupRatio
|
||||
),
|
||||
cell: (group: string) => renderGroupPrice(group, 'output'),
|
||||
},
|
||||
...extraPriceTypes.map((ep) => ({
|
||||
id: ep.type,
|
||||
header: ep.label,
|
||||
className: `${thClass} text-right`,
|
||||
cellClassName: 'py-2.5 text-right font-mono',
|
||||
cell: (group: string) =>
|
||||
formatGroupPrice(
|
||||
props.model,
|
||||
group,
|
||||
ep.type,
|
||||
props.tokenUnit,
|
||||
showRechargePrice,
|
||||
props.priceRate,
|
||||
props.usdExchangeRate,
|
||||
props.groupRatio
|
||||
),
|
||||
cell: (group: string) => renderGroupPrice(group, ep.type),
|
||||
})),
|
||||
]
|
||||
: [
|
||||
@@ -831,15 +846,7 @@ function GroupPricingSection(props: {
|
||||
header: t('Price'),
|
||||
className: `${thClass} text-right`,
|
||||
cellClassName: 'py-2.5 text-right font-mono',
|
||||
cell: (group: string) =>
|
||||
formatFixedPrice(
|
||||
props.model,
|
||||
group,
|
||||
showRechargePrice,
|
||||
props.priceRate,
|
||||
props.usdExchangeRate,
|
||||
props.groupRatio
|
||||
),
|
||||
cell: renderFixedGroupPrice,
|
||||
},
|
||||
]),
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user