import { useMemo } from "react"; import { useSQLQuery, useDiveState } from "@motherduck/react-sql-query"; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"; export const REQUIRED_DATABASES = [ { type: 'share', path: 'md:_share/duck_power_public/61ea6fb2-5a45-414b-b261-da79f258d55d', alias: 'duck_power_public' } ]; const N = (v) => (v != null ? Number(v) : 0); const STYLE = { blue: "#69bdf2", yellow: "#ffd51f", ink: "#242424", paper: "#fffaf0", ready: "#0677a8", stretch: "#f28c18", under: "#d2d2d2", cpu: "#3d8db8", gpu: "#d95432" }; const headingFont = "Courier New, ui-monospace, monospace"; const shortName = (v, max = 52) => String(v || "").length > max ? `${String(v || "").slice(0, max)}...` : String(v || ""); const typeLabel = (v) => String(v || "unknown").toUpperCase(); const clamp = (value, min, max) => Math.max(min, Math.min(max, value)); function LoadingBlock({ height = 80 }) { return

; } function PosterPanel({ children, style = {}, className = "" }) { return

{children}

; } function DuckIcon({ src, size = 34 }) { if (!src) return 🦆; return Duck Power marker

; } function ReadinessPill({ value }) { const bg = value === "Ready" ? STYLE.ready : value === "Stretch" ? STYLE.stretch : STYLE.under; return {String(value).toUpperCase()}; } function PressureScatter({ rows, selectedTaskId, onSelect, duckMarker }) { const orderedRows = [...rows.filter((row) => row.task_id !== selectedTaskId), ...rows.filter((row) => row.task_id === selectedTaskId)]; const plot = { left: 128, top: 24, width: 704, height: 210 }; const xFor = (row, radius) => clamp(plot.left + (clamp(N(row.gpu_pressure), 0, 100) / 100) * plot.width, plot.left + radius + 6, plot.left + plot.width - radius - 6); const yFor = (row, radius) => clamp(plot.top + (1 - clamp(N(row.required_duck_power), 0, 100) / 100) * plot.height, plot.top + radius + 6, plot.top + plot.height - radius - 6); return ; } export default function DuckPowerWorkloadPlanner() { const [selectedTaskId, setSelectedTaskId] = useDiveState("taskId", "rag_chatbot"); const [selectedSizeId, setSelectedSizeId] = useDiveState("workloadSize", "medium"); const [selectedType, setSelectedType] = useDiveState("componentType", "all"); const assetQuery = useSQLQuery(`SELECT asset_id, data_url FROM "duck_power_public"."hardware"."dashboard_assets" WHERE asset_id IN ('duck_power_blue_banner', 'duck_power_duck_marker')`); const taskQuery = useSQLQuery(`SELECT task_id, task_name, task_category, component_focus, minimum_duck_power_index, recommended_duck_power_index, cpu_weight, gpu_weight, business_question, what_it_means, example_workloads FROM "duck_power_public"."hardware"."ai_business_tasks" ORDER BY recommended_duck_power_index, task_name`); const sizeQuery = useSQLQuery(`SELECT workload_size_id, workload_size_label, threshold_multiplier, user_base_label, workload_size_description FROM "duck_power_public"."hardware"."workload_sizes" ORDER BY threshold_multiplier`); const fitSummaryQuery = useSQLQuery(`SELECT task_id, workload_size_id, component_type, readiness, count(*) as components, round(avg(task_duck_power), 2) as avg_task_duck_power, round(max(task_duck_power), 2) as max_task_duck_power FROM "duck_power_public"."hardware"."task_component_fit" GROUP BY task_id, workload_size_id, component_type, readiness`); const topFitQuery = useSQLQuery(`SELECT task_id, workload_size_id, workload_size_label, task_name, component_type, component_name, vendor, source_dataset, duck_power_index, task_duck_power, readiness, readiness_explanation, score_basis, task_rank_in_component_type FROM "duck_power_public"."hardware"."task_component_fit" WHERE readiness IN ('Ready', 'Stretch') AND task_rank_in_component_type <= 30 ORDER BY task_id, workload_size_id, component_type, task_rank_in_component_type`); const assetRows = Array.isArray(assetQuery.data) ? assetQuery.data : []; const tasks = Array.isArray(taskQuery.data) ? taskQuery.data : []; const sizes = Array.isArray(sizeQuery.data) ? sizeQuery.data : []; const fitSummary = Array.isArray(fitSummaryQuery.data) ? fitSummaryQuery.data : []; const topFits = Array.isArray(topFitQuery.data) ? topFitQuery.data : []; const bannerImage = assetRows.find((row) => row.asset_id === "duck_power_blue_banner")?.data_url; const duckMarker = assetRows.find((row) => row.asset_id === "duck_power_duck_marker")?.data_url; const selectedTask = useMemo(() => tasks.find((task) => task.task_id === selectedTaskId) || tasks[0] || {}, [tasks, selectedTaskId]); const selectedSize = useMemo(() => sizes.find((size) => size.workload_size_id === selectedSizeId) || sizes[1] || sizes[0] || {}, [sizes, selectedSizeId]); const selectedSummary = useMemo(() => fitSummary.filter((row) => row.task_id === selectedTask.task_id && row.workload_size_id === selectedSize.workload_size_id), [fitSummary, selectedTask, selectedSize]); const visibleFits = useMemo(() => { const rows = topFits.filter((row) => row.task_id === selectedTask.task_id && row.workload_size_id === selectedSize.workload_size_id); return selectedType === "all" ? rows : rows.filter((row) => row.component_type === selectedType); }, [topFits, selectedTask, selectedSize, selectedType]); const availabilityTotals = useMemo(() => { const totals = { Ready: 0, Stretch: 0, Underpowered: 0 }; selectedSummary.forEach((row) => { totals[row.readiness] = (totals[row.readiness] || 0) + N(row.components); }); return totals; }, [selectedSummary]); const chartRows = useMemo(() => ["cpu", "gpu"].map((componentType) => { const row = { component_type: typeLabel(componentType), Ready: 0, Stretch: 0, Underpowered: 0 }; selectedSummary.filter((item) => item.component_type === componentType).forEach((item) => { row[item.readiness] = N(item.components); }); return row; }), [selectedSummary]); const scatterRows = useMemo(() => { const multiplier = N(selectedSize.threshold_multiplier) || 1; return tasks.map((task) => ({ ...task, gpu_pressure: N(task.gpu_weight) * 100, required_duck_power: Math.min(100, N(task.recommended_duck_power_index) * multiplier) })); }, [tasks, selectedSize]); const selectedMinimum = Math.min(100, N(selectedTask.minimum_duck_power_index) * (N(selectedSize.threshold_multiplier) || 1)); const selectedRecommended = Math.min(100, N(selectedTask.recommended_duck_power_index) * (N(selectedSize.threshold_multiplier) || 1)); return

DUCK POWER
ANALYTICS

SIZE WORKLOADS WITH
MOTHERDUCK

DUCK POWER MOTHERDUCK WORKLOAD SIZING CPU VS GPU HARDWARE AVAILABILITY MOTHERDUCK DUCK POWER WORKLOAD SIZING

{[{label:"Workload types", value: taskQuery.isLoading ? null : tasks.length}, {label:"Ready components", value: fitSummaryQuery.isLoading ? null : N(availabilityTotals.Ready).toLocaleString()}, {label:"Stretch components", value: fitSummaryQuery.isLoading ? null : N(availabilityTotals.Stretch).toLocaleString()}, {label:"Recommended Duck Power", value: selectedRecommended.toFixed(0)}].map((metric) => {metric.value == null ? :

{metric.value}

}

{metric.label}

)}

WORKLOAD TYPE

{taskQuery.isLoading ? :

{tasks.map((task) => )}

}

WORKLOAD PRESSURE

{taskQuery.isLoading || sizeQuery.isLoading ? : }

SELECTED WORKLOAD

{sizes.map((size) => )}

{selectedTask.task_name || "Selected workload"}

{selectedTask.business_question}

{selectedTask.what_it_means}

USER BASE

{selectedSize.user_base_label}

SIZE EFFECT

{N(selectedSize.threshold_multiplier).toFixed(2)}x thresholds

MINIMUM

{selectedMinimum.toFixed(0)} Duck Power

RECOMMENDED

{selectedRecommended.toFixed(0)} Duck Power

HARDWARE AVAILABILITY

{fitSummaryQuery.isLoading ? :

}

CPU VS GPU NEED

CPU PRESSURE{Math.round(N(selectedTask.cpu_weight) * 100)}%

GPU PRESSURE{Math.round(N(selectedTask.gpu_weight) * 100)}%

{selectedSize.workload_size_description}

MATCHING HARDWARE SHELF

{["all", "cpu", "gpu"].map((type) => )}

{topFitQuery.isLoading ? :

{visibleFits.map((row, index) =>

{shortName(row.component_name, 46)}

{typeLabel(row.component_type)} · {row.vendor || "vendor unknown"}

DUCK POWER

{N(row.duck_power_index).toFixed(1)}

TASK POWER

{N(row.task_duck_power).toFixed(1)}

{row.readiness_explanation}

PURCHASE OPTIONS)}{!visibleFits.length ?

No matching hardware for this filter.

: null}

}

DISCLAIMER: Thresholds are planning archetypes, not vendor guarantees.

; }

DUCK POWERANALYTICS

Duck Power Analytics

Comments