- );
- },
-);
-
-GpuCostInputGroup.displayName = 'GpuCostInputGroup';
+import CustomGpuValuePanel from '@/components/inference/ui/CustomGpuValuePanel';
const CustomPowers = memo(({ loading }: { loading: boolean }) => {
- // Use the shared hardware context to ensure both charts use the same state
-
- const {
- selectedYAxisMetric,
- selectedPrecisions,
- selectedModel,
- selectedSequence,
- setUserPowers,
- } = useInference();
-
- const [inputErrors, setInputErrors] = useState<{ [gpuKey: string]: string }>({});
- const [defaultValues, setDefaultValues] = useState<{ [gpuKey: string]: string }>({});
- const [lastCalculatedValues, setLastCalculatedValues] = useState<{
- [gpuKey: string]: string | number;
- }>({});
-
- // Track previous filter values to detect changes within this component
- const previousFiltersRef = useRef({
- model: selectedModel,
- sequence: selectedSequence,
- precisions: selectedPrecisions,
- yAxisMetric: selectedYAxisMetric,
- });
-
- // One power input per physical GPU — derived from GPU_SPECS (deduplicated by design).
- const stableGpus = React.useMemo(() => {
- return Object.entries(GPU_SPECS)
- .filter(([, specs]) => specs.power > 0)
- .map(([base, specs]) => ({ base, label: base.toUpperCase(), specs }));
- }, []);
-
- // Initialize default values and auto-apply so chart renders immediately
- useEffect(() => {
- const defaults: { [gpuKey: string]: string } = {};
- const numericDefaults: { [gpuKey: string]: number } = {};
-
- stableGpus.forEach((gpu) => {
- defaults[gpu.base] = gpu.specs.power.toString();
- numericDefaults[gpu.base] = gpu.specs.power;
- });
-
- setDefaultValues(defaults);
- setLastCalculatedValues(defaults);
- setInputErrors({});
- setUserPowers(numericDefaults);
- }, [stableGpus, setUserPowers]);
-
- // Reset last calculated values when filters change (model, sequence, precision, y-axis)
- useEffect(() => {
- const prevFilters = previousFiltersRef.current;
- const filtersChanged =
- prevFilters.model !== selectedModel ||
- prevFilters.sequence !== selectedSequence ||
- prevFilters.precisions.join(',') !== selectedPrecisions.join(',') ||
- prevFilters.yAxisMetric !== selectedYAxisMetric;
-
- if (filtersChanged) {
- // Reset last calculated values to defaults when filters change
- setLastCalculatedValues(defaultValues);
- setInputErrors({});
-
- // Update previous filters
- previousFiltersRef.current = {
- model: selectedModel,
- sequence: selectedSequence,
- precisions: selectedPrecisions,
- yAxisMetric: selectedYAxisMetric,
- };
- }
- }, [selectedModel, selectedSequence, selectedPrecisions, selectedYAxisMetric, defaultValues]);
-
- // Validate input value
- const validateInput = useCallback((value: string): string => {
- if (!value.trim()) {
- return '';
- }
-
- const numValue = parseFloat(value);
- if (isNaN(numValue)) {
- return 'Must be a valid number';
- }
- if (numValue < 0) {
- return 'Must be a positive number';
- }
-
- return '';
- }, []);
-
- // Handle input change with validation
- const handleInputChange = useCallback(
- (gpuKey: string, value: string) => {
- const validationError = validateInput(value);
-
- setInputErrors((prev) => ({
- ...prev,
- [gpuKey]: validationError,
- }));
- setLastCalculatedValues((prev) => ({
- ...prev,
- [gpuKey]: value,
- }));
- },
- [validateInput, setLastCalculatedValues, setUserPowers],
- );
-
- // Handle reset button click
- const handleReset = useCallback(() => {
- track('inference_custom_powers_reset', {
- metric: selectedYAxisMetric,
- gpuCount: stableGpus.length,
- });
- const defaultInputs: { [gpuKey: string]: number } = {};
-
- stableGpus.forEach((gpu) => {
- defaultInputs[gpu.base] = gpu.specs.power;
- });
-
- setUserPowers(defaultInputs);
- setLastCalculatedValues(defaultInputs);
- setInputErrors({});
-
- // Don't update lastCalculatedValues here - we want to keep the last calculated values
- // so that when reset is clicked, we can compare the new (default) values with the last calculated values
- }, [stableGpus]);
-
- // Handle recalculate button click
- const handleRecalculate = useCallback(() => {
- const hasErrors = Object.values(inputErrors).some((error) => error !== '');
- if (hasErrors) {
- return;
- }
- track('inference_custom_powers_calculated', {
- metric: selectedYAxisMetric,
- gpuCount: stableGpus.length,
- });
-
- // Store the current values as the last calculated values before calculating
- const currentValues: { [gpuKey: string]: number } = {};
- stableGpus.forEach((gpu) => {
- const currentValue = lastCalculatedValues[gpu.base] ?? 0;
- if (currentValue) {
- currentValues[gpu.base] = parseFloat(currentValue.toString());
- }
- });
- setUserPowers(currentValues);
-
- // costs.calculateCosts();
- }, [inputErrors, stableGpus, lastCalculatedValues]);
-
- // Show skeleton when hardware data is loading
- // Use loading flag from useChartData to ensure consistency with parent component
- if (loading || stableGpus.length === 0) {
- return (
-
-
-
Custom GPU Costs
-
- Enter your own Token Throughput per All in Utility MW (tok/s/MW) values for each GPU.
- These values will be used to calculate custom power metrics.
-
- Enter your own Token Throughput per All in Utility MW (tok/s/MW) values for each GPU.
- These values will be used to calculate custom power metrics.
-