From 6bee8f6062c13d1c480162485a81821941cad03c Mon Sep 17 00:00:00 2001
From: Shreya Shankar <ss.shankar505@gmail.com>
Date: Thu, 14 Nov 2024 11:29:11 -0800
Subject: [PATCH] feat: add indicators for selectivity

---
 website/src/components/Output.tsx          | 53 +++++++++++++++++++++-
 website/src/components/operations/args.tsx | 13 +++++-
 2 files changed, 62 insertions(+), 4 deletions(-)

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 (
+    <div className="relative w-4 h-4 flex items-center justify-center">
+      <svg
+        className="w-4 h-4 -rotate-90"
+        viewBox={`0 0 ${size} ${size}`}
+        width={size}
+        height={size}
+      >
+        <circle
+          cx={center}
+          cy={center}
+          r={radius}
+          className="fill-none stroke-gray-200"
+          strokeWidth={strokeWidth}
+        />
+        <circle
+          cx={center}
+          cy={center}
+          r={radius}
+          className={clsx(
+            "fill-none transition-all duration-500 ease-out",
+            percentage > 100 ? "stroke-emerald-500" : "stroke-rose-500"
+          )}
+          strokeWidth={strokeWidth}
+          strokeDasharray={strokeDasharray}
+        />
+      </svg>
+    </div>
+  );
+};
+
 export const ConsoleContent: React.FC = () => {
   const { terminalOutput, setTerminalOutput, optimizerProgress } =
     usePipelineContext();
@@ -442,7 +483,7 @@ export const Output: React.FC = () => {
               <TooltipProvider>
                 <Tooltip>
                   <TooltipTrigger>
-                    <div className="flex items-center px-2 py-1 border border-gray-200 rounded-md">
+                    <div className="flex items-center px-2 py-1 border border-gray-200 rounded-md cursor-help">
                       <span
                         className={clsx(
                           "font-medium",
@@ -457,6 +498,14 @@ export const Output: React.FC = () => {
                       >
                         {selectivityFactor}×
                       </span>
+                      {selectivityFactor !== "N/A" &&
+                        Number(selectivityFactor) < 1 && (
+                          <div className="ml-1">
+                            <TinyPieChart
+                              percentage={Number(selectivityFactor) * 100}
+                            />
+                          </div>
+                        )}
                     </div>
                   </TooltipTrigger>
                   <TooltipContent>
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<CodeInputProps> = React.memo(
             </Tooltip>
           </TooltipProvider>
         </div>
-        <div className="border">
+        <div
+          className="border"
+          style={{
+            resize: "vertical",
+            overflow: "auto",
+            minHeight: "200px",
+            height: "200px", // Set initial height explicitly
+            backgroundColor: "var(--background)", // Match editor background
+          }}
+        >
           <Editor
-            height="200px"
+            height="100%"
             defaultLanguage="python"
             value={code || getPlaceholder()}
             onChange={(value) => onChange(value || "")}