diff --git a/website/src/components/Output.tsx b/website/src/components/Output.tsx index 7829a168..2aef5f0a 100644 --- a/website/src/components/Output.tsx +++ b/website/src/components/Output.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo } from "react"; import { ColumnType } from "@/components/ResizableDataTable"; import ResizableDataTable from "@/components/ResizableDataTable"; import { usePipelineContext } from "@/contexts/PipelineContext"; -import { Loader2, Download, ChevronDown } from "lucide-react"; +import { Loader2, Download, ChevronDown, Circle } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Progress } from "@/components/ui/progress"; import BookmarkableText from "@/components/BookmarkableText"; @@ -19,6 +19,47 @@ import { useWebSocket } from "@/contexts/WebSocketContext"; import AnsiRenderer from "./AnsiRenderer"; import clsx from "clsx"; +const TinyPieChart: React.FC<{ percentage: number }> = ({ percentage }) => { + const size = 16; + const radius = 6; + const strokeWidth = 2; + const center = size / 2; + const circumference = 2 * Math.PI * radius; + const strokeDasharray = `${ + (percentage * circumference) / 100 + } ${circumference}`; + + return ( +
+ + + 100 ? "stroke-emerald-500" : "stroke-rose-500" + )} + strokeWidth={strokeWidth} + strokeDasharray={strokeDasharray} + /> + +
+ ); +}; + export const ConsoleContent: React.FC = () => { const { terminalOutput, setTerminalOutput, optimizerProgress } = usePipelineContext(); @@ -442,7 +483,7 @@ export const Output: React.FC = () => { -
+
{ > {selectivityFactor}× + {selectivityFactor !== "N/A" && + Number(selectivityFactor) < 1 && ( +
+ +
+ )}
diff --git a/website/src/components/operations/args.tsx b/website/src/components/operations/args.tsx index fd59d708..11a871c5 100644 --- a/website/src/components/operations/args.tsx +++ b/website/src/components/operations/args.tsx @@ -471,9 +471,18 @@ export const CodeInput: React.FC = React.memo(
-
+
onChange(value || "")}