Adds animated resizable to run page

Author: samejr

apps/webapp/app/components/primitives/Resizable.tsx

@@ -69,12 +69,30 @@ const ResizableHandle = ({
   </PanelResizer>
 );
 
+const RESIZABLE_PANEL_ANIMATION = {
+  easing: "ease-in-out" as const,
+  duration: 200,
+};
+
+const COLLAPSIBLE_HANDLE_CLASSNAME = "transition-opacity duration-200";
+
+function collapsibleHandleClassName(show: boolean) {
+  return cn(COLLAPSIBLE_HANDLE_CLASSNAME, !show && "pointer-events-none opacity-0");
+}
+
 function useFrozenValue<T>(value: T | null | undefined): T | null | undefined {
   const ref = useRef(value);
   if (value != null) ref.current = value;
   return ref.current;
 }
 
-export { ResizableHandle, ResizablePanel, ResizablePanelGroup, useFrozenValue };
+export {
+  RESIZABLE_PANEL_ANIMATION,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+  collapsibleHandleClassName,
+  useFrozenValue,
+};
 
 export type ResizableSnapshot = React.ComponentProps<typeof PanelGroup>["snapshot"];

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx

@@ -48,10 +48,12 @@ import { Paragraph } from "~/components/primitives/Paragraph";
 import { Popover, PopoverArrowTrigger, PopoverContent } from "~/components/primitives/Popover";
 import * as Property from "~/components/primitives/PropertyTable";
 import {
+  RESIZABLE_PANEL_ANIMATION,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
   type ResizableSnapshot,
+  collapsibleHandleClassName,
 } from "~/components/primitives/Resizable";
 import { ShortcutKey, variants } from "~/components/primitives/ShortcutKey";
 import { Slider } from "~/components/primitives/Slider";
@@ -112,7 +114,7 @@ import { SpanView } from "../resources.orgs.$organizationSlug.projects.$projectP
 
 const resizableSettings = {
   parent: {
-    autosaveId: "panel-run-parent",
+    autosaveId: "panel-run-parent-v2",
     handleId: "parent-handle",
     main: {
       id: "run",
@@ -542,24 +544,36 @@ function TraceView({
             treeSnapshot={resizable.tree as ResizableSnapshot}
           />
         </ResizablePanel>
-        <ResizableHandle id={resizableSettings.parent.handleId} />
-        {selectedSpanId && (
-          <ResizablePanel
-            id={resizableSettings.parent.inspector.id}
-            default={resizableSettings.parent.inspector.default}
-            min={resizableSettings.parent.inspector.min}
-            isStaticAtRest
+        <ResizableHandle
+          id={resizableSettings.parent.handleId}
+          className={collapsibleHandleClassName(!!selectedSpanId)}
+        />
+        <ResizablePanel
+          id={resizableSettings.parent.inspector.id}
+          default={resizableSettings.parent.inspector.default}
+          min={resizableSettings.parent.inspector.min}
+          className="overflow-hidden"
+          collapsible
+          collapsed={!selectedSpanId}
+          onCollapseChange={() => {}}
+          collapsedSize="0px"
+          collapseAnimation={RESIZABLE_PANEL_ANIMATION}
+        >
+          <div
+            className="h-full"
+            style={{ minWidth: parseInt(resizableSettings.parent.inspector.min) }}
           >
-            {" "}
-            <SpanView
-              runParam={run.friendlyId}
-              spanId={selectedSpanId}
-              spanOverrides={spanOverrides as SpanOverride | undefined}
-              closePanel={() => replaceSearchParam("span")}
-              linkedRunId={selectedSpanLinkedRunId}
-            />
-          </ResizablePanel>
-        )}
+            {selectedSpanId && (
+              <SpanView
+                runParam={run.friendlyId}
+                spanId={selectedSpanId}
+                spanOverrides={spanOverrides as SpanOverride | undefined}
+                closePanel={() => replaceSearchParam("span")}
+                linkedRunId={selectedSpanLinkedRunId}
+              />
+            )}
+          </div>
+        </ResizablePanel>
       </ResizablePanelGroup>
     </div>
   );

apps/webapp/app/routes/storybook.animated-panel/route.tsx

@@ -5,9 +5,11 @@ import { Header2 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import * as Property from "~/components/primitives/PropertyTable";
 import {
+  RESIZABLE_PANEL_ANIMATION,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  collapsibleHandleClassName,
   useFrozenValue,
 } from "~/components/primitives/Resizable";
 import {
@@ -18,7 +20,6 @@ import {
   TableHeaderCell,
   TableRow,
 } from "~/components/primitives/Table";
-import { cn } from "~/utils/cn";
 
 type DemoItem = {
   id: string;
@@ -145,7 +146,7 @@ export default function Story() {
         </ResizablePanel>
         <ResizableHandle
           id="animated-panel-handle"
-          className={cn("transition-opacity duration-200", !show && "pointer-events-none opacity-0")}
+          className={collapsibleHandleClassName(show)}
         />
         <ResizablePanel
           id="animated-panel-detail"
@@ -157,7 +158,7 @@ export default function Story() {
           collapsed={!show}
           onCollapseChange={() => {}}
           collapsedSize="0px"
-          collapseAnimation={{ easing: "ease-in-out", duration: 200 }}
+          collapseAnimation={RESIZABLE_PANEL_ANIMATION}
         >
           <div className="h-full" style={{ minWidth: 280 }}>
             {displayItem && (