Merge pull request #106 from shelwinsunga/customize-controls

Revamp Home Page

ell-studio/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@heroicons/react": "^2.1.5",
+    "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-select": "^2.1.1",
@@ -19,13 +20,16 @@
     "d3-quadtree": "^3.0.1",
     "dagre": "^0.8.5",
     "dotenv": "^16.4.5",
+    "install": "^0.13.0",
     "lucide-react": "^0.424.0",
+    "npm": "^10.8.2",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
     "react-markdown": "^9.0.1",
+    "react-resizable-panels": "^2.0.22",
     "react-router-dom": "^6.18.0",
     "react-scripts": "^5.0.1",
     "react-syntax-highlighter": "^15.5.0",

ell-studio/src/components/common/Badge.js

@@ -0,0 +1,31 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { cn } from "library/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({ className, variant, ...props }) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

ell-studio/src/components/common/Card.js

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { cn } from "library/utils"
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

ell-studio/src/components/common/Resizable.js

@@ -0,0 +1,40 @@
+import { DragHandleDots2Icon } from "@radix-ui/react-icons"
+import * as ResizablePrimitive from "react-resizable-panels"
+import { cn } from "library/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <DragHandleDots2Icon className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

ell-studio/src/components/common/ScrollArea.js

@@ -0,0 +1,40 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "library/utils"
+
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

ell-studio/src/components/common/Tooltips.js

@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { cn } from "library/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

ell-studio/src/components/depgraph/DependencyGraph.css

@@ -1,6 +1,6 @@
 .dependency-graph {
   width: 100%;
-  height: 600px;
+  height: 100%;
   background-color: #f8fafc;
   border: 1px solid #e2e8f0;
   border-radius: 8px;

ell-studio/src/components/depgraph/DependencyGraph.js

@@ -16,14 +16,12 @@ import ReactFlow, {
   ReactFlowProvider,
 } from "reactflow";
 import { getBezierPath } from 'reactflow';
-
-
 import { Link } from "react-router-dom";
 import { LMPCardTitle } from "./LMPCardTitle"; // Add this import
-
 import { Card } from "../Card";
 import "reactflow/dist/style.css";
-
+import { ZoomIn, ZoomOut, Lock, Maximize, Unlock } from 'lucide-react';
+import { Button } from "components/common/Button";
 
 import { useLayoutedElements, getInitialGraph } from "./graphUtils";
 
@@ -68,26 +66,54 @@ const LayoutFlow = ({ initialNodes, initialEdges }) => {
   const nodeTypes = useMemo(() => ({ lmp: LMPNode }), []);
 
   return (
-
-    <div style={{ height: 600 }}>
-    <ReactFlow
-      nodes={nodes}
-      edges={edges}
-      onNodesChange={onNodesChange}
-      onEdgesChange={onEdgesChange}
-      nodeTypes={nodeTypes}
-      // fitView
-    >
-      <Panel>
-      </Panel>
-      <Controls />
-
-      <Background />
-    </ReactFlow>
+    <div className="h-full relative">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        nodeTypes={nodeTypes}
+      >
+        <Panel>
+        </Panel>
+        <Background />
+        <CustomControls />
+      </ReactFlow>
     </div>
   );
 };
 
+function CustomControls() {
+  const { zoomIn, zoomOut, fitView, setNodes } = useReactFlow();
+  const [nodesLocked, setNodesLocked] = useState(false);
+
+  const handleZoomIn = () => zoomIn({ duration: 300, step: 0.5 });
+  const handleZoomOut = () => zoomOut({ duration: 300, step: 0.5 });
+  const handleFitView = () => fitView({ duration: 500, padding: 0.1 });
+  const handleToggleNodeLock = () => {
+    setNodes((nodes) =>
+      nodes.map((node) => ({ ...node, draggable: nodesLocked }))
+    );
+    setNodesLocked(!nodesLocked);
+  };
+
+  return (
+    <div className="absolute top-4 left-4 flex space-x-2 z-10">
+      <Button onClick={handleZoomIn} variant="secondary" size="sm">
+        <ZoomIn className="w-4 h-4" />
+      </Button>
+      <Button onClick={handleZoomOut} variant="secondary" size="sm">
+        <ZoomOut className="w-4 h-4" />
+      </Button>
+      <Button onClick={handleFitView} variant="secondary" size="sm">
+        <Maximize className="w-4 h-4" />
+      </Button>
+      <Button onClick={handleToggleNodeLock} variant="secondary" size="sm">
+        {nodesLocked ? <Lock className="w-4 h-4" /> : <Unlock className="w-4 h-4" />}
+      </Button>
+    </div>
+  );
+}
 
 export function DependencyGraph({ lmps, traces, ...rest }) {
   // construct ndoes from LMPS
@@ -98,7 +124,7 @@ export function DependencyGraph({ lmps, traces, ...rest }) {
 
   return (
     <div
-      className="h-600px w-full rounded-lg border border-gray-700"
+      className="h-full w-full border-gray-700"
       {...rest}
     >
       <ReactFlowProvider>