WIP on using react-window-splitter

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

@@ -1,28 +1,25 @@
 "use client";
 
-import * as ResizablePrimitive from "react-resizable-panels";
+import { PanelGroup, Panel, PanelResizer } from "react-window-splitter";
 import { cn } from "~/utils/cn";
 
-const ResizablePanelGroup = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
+const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps<typeof PanelGroup>) => (
+  <PanelGroup
     className={cn("flex w-full data-[panel-group-direction=vertical]:flex-col", className)}
     {...props}
   />
 );
 
-const ResizablePanel = ResizablePrimitive.Panel;
+const ResizablePanel = Panel;
 
 const ResizableHandle = ({
-  withHandle,
+  withHandle = true,
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+}: React.ComponentProps<typeof PanelResizer> & {
   withHandle?: boolean;
 }) => (
-  <ResizablePrimitive.PanelResizeHandle
+  <PanelResizer
     className={cn(
       "focus-visible:ring-ring group relative flex w-0.75 items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 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 hover:w-0.75 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 [&[data-panel-group-direction=vertical]>div]:rotate-90",
       className
@@ -37,7 +34,7 @@ const ResizableHandle = ({
         ))}
       </div>
     )}
-  </ResizablePrimitive.PanelResizeHandle>
+  </PanelResizer>
 );
 
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

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

@@ -254,16 +254,8 @@ function TraceView({ run, trace, maximumLiveReloadingSetting, resizeSettings }:
 
   return (
     <div className={cn("grid h-full max-h-full grid-cols-1 overflow-hidden")}>
-      <ResizablePanelGroup
-        direction="horizontal"
-        className="h-full max-h-full"
-        onLayout={(layout) => {
-          if (layout.length !== 2) return;
-          if (!selectedSpanId) return;
-          setResizableRunSettings(document, layout);
-        }}
-      >
-        <ResizablePanel order={1} minSize={30} defaultSize={resizeSettings.layout?.[0] ?? 70}>
+      <ResizablePanelGroup autosaveId="pnl-run-parent" className="h-full max-h-full">
+        <ResizablePanel id="run" min="20%">
           <TasksTreeView
             selectedId={selectedSpanId}
             key={events[0]?.id ?? "-"}
@@ -286,9 +278,9 @@ function TraceView({ run, trace, maximumLiveReloadingSetting, resizeSettings }:
             maximumLiveReloadingSetting={maximumLiveReloadingSetting}
           />
         </ResizablePanel>
-        <ResizableHandle withHandle />
+        <ResizableHandle />
         {selectedSpanId && (
-          <ResizablePanel order={2} minSize={25} defaultSize={resizeSettings.layout?.[1] ?? 30}>
+          <ResizablePanel id="span" default="350px">
             <SpanView
               runParam={run.friendlyId}
               spanId={selectedSpanId}

apps/webapp/package.json

@@ -151,6 +151,7 @@
     "react-resizable-panels": "^2.0.9",
     "react-stately": "^3.29.1",
     "react-use": "^17.4.0",
+    "react-window-splitter": "^0.2.0",
     "recharts": "^2.12.6",
     "regression": "^2.0.1",
     "remix-auth": "^3.6.0",