clean up thigns

MadcowD · Aug 12, 2024 · 05ea5c0 · 05ea5c0
1 parent 0f8c533
commit 05ea5c0
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 41 deletions.
diff --git a/ell-studio/src/components/HierarchicalTable.js b/ell-studio/src/components/HierarchicalTable.js
@@ -2,6 +2,8 @@ import React, { useMemo, useRef, useEffect, useState, useCallback } from 'react'
 import {  FiChevronDown, FiArrowUp, FiArrowDown, FiChevronLeft, FiChevronRight, FiChevronsLeft, FiChevronsRight } from 'react-icons/fi';
 import { HierarchicalTableProvider, useHierarchicalTable } from './HierarchicalTableContext';
 import { Checkbox } from "components/common/Checkbox"
+import { debounce } from 'lodash';
+
 // Update the SmoothLine component
 const SmoothLine = ({ index, startX, startY, endX: endXPreprocess, special, endY, color, animated, opacity, offset }) => {
   const endX = endXPreprocess;
@@ -83,34 +85,44 @@ const TableRow = ({ item, schema, level = 0, onRowClick, columnWidths, updateWid
   }, [isNew]);
 
   const primaryColumnRef = useRef(null);
-
+  
   useEffect(() => {
     if (!primaryColumnRef.current) return;
 
+    const table = primaryColumnRef.current.closest('table');
+    let tableRect = table.getBoundingClientRect();
+
     const updatePosition = () => {
-      const tableRect = primaryColumnRef.current.closest('table').getBoundingClientRect();
-      const rowRect = primaryColumnRef.current.getBoundingClientRect();
-      const relativeX = rowRect.left - tableRect.left;
-      const relativeY = rowRect.top - tableRect.top + rowRect.height / 2;
-      setRowRef(item.id, { id: item.id, x: relativeX, y: relativeY, visible: true });
+      requestAnimationFrame(() => {
+        if (!primaryColumnRef.current) return;
+        const rowRect = primaryColumnRef.current.getBoundingClientRect();
+        const relativeX = rowRect.left - tableRect.left;
+        const relativeY = rowRect.top - tableRect.top + rowRect.height / 2;
+        setRowRef(item.id, { id: item.id, x: relativeX, y: relativeY, visible: true });
+      });
     };
 
-    // Initial position update
-    updatePosition();
+    const debouncedUpdatePosition = debounce(updatePosition, 100);
+
+    // Shared ResizeObserver
+    const resizeObserver = new ResizeObserver(() => {
+      tableRect = table.getBoundingClientRect(); // Update tableRect
+      debouncedUpdatePosition();
+    });
 
-    // Create a ResizeObserver
-    const resizeObserver = new ResizeObserver(updatePosition);
+    // Observe only the table
+    resizeObserver.observe(table);
 
-    // Observe both the row and the table
-    resizeObserver.observe(primaryColumnRef.current);
-    resizeObserver.observe(primaryColumnRef.current.closest('table'));
+    // Initial position update
+    updatePosition();
 
     // Clean up
     return () => {
       setRowRef(item.id, {visible: false});
       resizeObserver.disconnect();
+      debouncedUpdatePosition.cancel();
     };
-  }, [item.id, setRowRef, sortedData.length, expandedRows, linkColumn]);
+  }, [item.id, setRowRef]);
 
   return (
     <React.Fragment>

diff --git a/ell-studio/src/components/common/StatItem.js b/ell-studio/src/components/common/StatItem.js
@@ -1,17 +1,16 @@
 import React from 'react';
-import { motion } from 'framer-motion';
 
 const StatItem = ({ icon: Icon, label, value }) => (
-  <motion.div 
-    whileHover={{ scale: 1.05 }}
+  <div 
+
     className="flex items-center justify-between text-sm py-2 border-b border-gray-700 last:border-b-0"
   >
     <span className="flex items-center text-gray-400">
       <Icon className="mr-2" size={14} />
       {label}
     </span>
     <span className="font-medium text-gray-200">{value}</span>
-  </motion.div>
+  </div>
 );
 
 export default StatItem;
diff --git a/ell-studio/src/components/layouts/GenericPageLayout.js b/ell-studio/src/components/layouts/GenericPageLayout.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "../common/Resizable";
 import { ScrollArea } from '../common/ScrollArea';
 import InvocationsLayout from '../invocations/InvocationsLayout';
@@ -10,9 +10,15 @@ const GenericPageLayout = ({
   sidebarContent,
   showSidebar = true,
 }) => {
+  const [sidebarVisible, setSidebarVisible] = useState(!selectedTrace && showSidebar);
+
+  useEffect(() => {
+    setSidebarVisible(!selectedTrace && showSidebar);
+  }, [selectedTrace, showSidebar]);
+
   return (
     <ResizablePanelGroup direction="horizontal" className="w-full h-screen">
-      <ResizablePanel defaultSize={selectedTrace ? 100 : 70} minSize={30}>
+      <ResizablePanel defaultSize={sidebarVisible ? 70 : 100} minSize={30}>
         <InvocationsLayout
           selectedTrace={selectedTrace}
           setSelectedTrace={setSelectedTrace}
@@ -24,16 +30,12 @@ const GenericPageLayout = ({
             </div>
         </InvocationsLayout>
       </ResizablePanel>
-      {!selectedTrace && showSidebar && (
-        <>
-          <ResizableHandle withHandle className="my-handle" />
-          <ResizablePanel defaultSize={30} minSize={20} className="bg-[#0d1117">
-            <ScrollArea className="h-full">
-              {sidebarContent}
-            </ScrollArea>
-          </ResizablePanel>
-        </>
-      )}
+      <ResizableHandle withHandle className="my-handle" />
+      <ResizablePanel defaultSize={30} minSize={20} className="bg-[#0d1117]" style={{ display: sidebarVisible ? 'block' : 'none' }}>
+        <ScrollArea className="h-full">
+          {sidebarContent}
+        </ScrollArea>
+      </ResizablePanel>
     </ResizablePanelGroup>
   );
 };

diff --git a/ell-studio/src/pages/LMP.js b/ell-studio/src/pages/LMP.js
@@ -21,7 +21,7 @@ import { LMPCardTitle } from "../components/depgraph/LMPCardTitle";
 import InvocationsLayout from "../components/invocations/InvocationsLayout";
 import ToggleSwitch from "../components/common/ToggleSwitch";
 import LMPDetailsSidePanel from "../components/LMPDetailsSidePanel";
-import {Card} from "../components/common/Card";
+import { Card } from "../components/common/Card";
 
 import GenericPageLayout from "../components/layouts/GenericPageLayout";
 function LMP() {
@@ -100,6 +100,16 @@ function LMP() {
       });
   };
 
+  const sidebar = useMemo(
+    () => (
+      <LMPDetailsSidePanel
+        lmp={lmp}
+        uses={uses}
+        versionHistory={versionHistory}
+      />
+    ),
+    [lmp, uses, versionHistory]
+  );
   const handleViewModeToggle = () => {
     setViewMode((prevMode) => (prevMode === "Source" ? "Diff" : "Source"));
   };
@@ -117,20 +127,14 @@ function LMP() {
     <GenericPageLayout
       selectedTrace={selectedTrace}
       setSelectedTrace={setSelectedTrace}
-      sidebarContent={
-        <LMPDetailsSidePanel
-          lmp={lmp}
-          uses={uses}
-          versionHistory={versionHistory}
-        />
-      }
+      sidebarContent={sidebar}
     >
       <div className="flex justify-between items-center mb-6">
         <h1 className="text-lg flex items-center">
           <Link to={`/lmp/${lmp?.name}`}>
-          <Card>
-            <LMPCardTitle lmp={lmp} />
-          </Card>
+            <Card>
+              <LMPCardTitle lmp={lmp} />
+            </Card>
           </Link>
         </h1>
       </div>