Implementation:TobikoData Sqlmesh SplitPane

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Components, Layout
Last Updated	2026-02-07 20:00 GMT

Overview

A wrapper component around react-split that provides resizable split pane layouts with drag callbacks.

Description

SplitPane is a React component that wraps the react-split library to create resizable split layouts for the SQLMesh UI. The component supports both vertical and horizontal split directions and provides granular control over sizing behavior through props like sizes (initial size percentages), minSize/maxSize constraints, snapOffset for snap-to-edge behavior, and expandToMin for automatic expansion. It uses a fixed gutter size of 2px and centers the resize handle. The component exposes lifecycle callbacks (handleDrag and onDragEnd) that receive both the current sizes array and a reference to the split element, enabling parent components to persist or react to resize operations. The implementation uses a ref to access the underlying Split component instance.

Usage

Use this component when you need to create resizable panel layouts, such as editor panes, side-by-side comparisons, or primary/secondary content areas. The component is commonly used in the SQLMesh UI for code editor layouts, data comparison views, and any interface requiring user-adjustable content proportions.

Code Reference

Source Location

• Repository: TobikoData_Sqlmesh
• File: web/client/src/library/components/splitPane/SplitPane.tsx

Signature

export default function SplitPane({
  className,
  children,
  sizes,
  minSize,
  maxSize,
  direction,
  expandToMin = false,
  snapOffset,
  cursor,
  handleDrag,
  onDragEnd,
}: SplitProps & {
  className?: string
  children: React.ReactNode
  handleDrag?: (sizes: number[], elSplit?: Maybe<HTMLElement & any>) => void
  onDragEnd?: (sizes: number[], elSplit?: Maybe<HTMLElement & any>) => void
}): JSX.Element

Import

import SplitPane from '@components/splitPane/SplitPane'

I/O Contract

Inputs

Name	Type	Required	Description
children	React.ReactNode	Yes	Child elements to be split (typically 2 for two panes)
sizes	number[]	No	Initial size percentages for each pane (e.g., [50, 50])
direction	'vertical'	No	Direction of the split
minSize	number[]	No	Minimum size(s) in pixels for panes
maxSize	number[]	No	Maximum size(s) in pixels for panes
snapOffset	number	No	Distance from edge to trigger snap behavior
expandToMin	boolean	No	Whether to expand panes to minimum size (defaults to false)
cursor	string	No	CSS cursor style for the gutter
className	string	No	Additional CSS classes for the container
handleDrag	(sizes: number[], elSplit?: Maybe<HTMLElement>) => void	No	Callback during drag with current sizes
onDragEnd	(sizes: number[], elSplit?: Maybe<HTMLElement>) => void	No	Callback after drag completes

Outputs

Name	Type	Description
JSX.Element	React component	Resizable split pane layout with configurable direction and sizing

Usage Examples

import SplitPane from '@components/splitPane/SplitPane'

// Horizontal split with equal sizes
function EditorLayout() {
  return (
    <SplitPane
      direction="horizontal"
      sizes={[50, 50]}
      minSize={200}
      snapOffset={30}
      className="h-full"
    >
      <div>Left Panel</div>
      <div>Right Panel</div>
    </SplitPane>
  )
}

// Vertical split with size persistence
function DataComparisonView() {
  const [sizes, setSizes] = useState([60, 40])

  return (
    <SplitPane
      direction="vertical"
      sizes={sizes}
      minSize={100}
      onDragEnd={(newSizes) => setSizes(newSizes)}
      className="w-full h-full"
    >
      <div>Source Data</div>
      <div>Target Data</div>
    </SplitPane>
  )
}

Related Pages

• Environment:TobikoData_Sqlmesh_Web_UI_Stack