Implementation:TobikoData Sqlmesh EnvironmentChangesPreview

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

Overview

A popover component that displays detailed change information when hovering over change count badges in the environment details bar.

Description

EnvironmentChangesPreview is a React component that uses HeadlessUI's Popover component to display a detailed preview of changes when users hover over change count badges. It shows a circular badge with the number of changes and renders a floating panel on hover that displays the full list of changed models using the PlanChangePreview component. The component uses mouse enter/leave events to control the popover visibility, creating a smooth hover interaction.

The badge is color-coded based on the change type (green for additions, red for removals, blue for direct changes, etc.) and includes transition animations for smooth appearance and disappearance. The popover panel is positioned above the badge and constrained to reasonable viewport dimensions with scrolling for large change lists.

Usage

Use this component within the EnvironmentChanges component to display individual change category badges with hover-activated previews. Each badge represents a specific type of change (added, modified, removed, etc.).

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/client/src/library/components/environmentDetails/EnvironmentChangesPreview.tsx

Signature

export default function EnvironmentChangesPreview({
  headline,
  type,
  changes,
  className,
}: {
  headline?: string
  type: PlanChangeType
  changes: ModelSQLMeshChangeDisplay[]
  className?: string
}): JSX.Element

Import

import EnvironmentChangesPreview from '@components/environmentDetails/EnvironmentChangesPreview'

I/O Contract

Inputs

Name	Type	Required	Description
headline	string	No	Title displayed in the popover panel (e.g., "Added", "Removed")
type	PlanChangeType	Yes	Type of change determining badge color and styling
changes	ModelSQLMeshChangeDisplay[]	Yes	Array of change objects to display
className	string	No	Additional CSS classes for positioning and styling

Outputs

Name	Type	Description
JSX.Element	JSX.Element	The rendered badge with hover-activated popover

Badge Styling

The badge changes color based on change type:

<span
  className={clsx(
    'transition-all flex min-w-[1rem] h-4 text-center mx-0.5 px-1 rounded-full',
    'text-[10px] font-black text-neutral-100 cursor-default border border-inherit',
    type === EnumPlanChangeType.Add && 'bg-success-500 border-success-500',
    type === EnumPlanChangeType.Remove && 'bg-danger-500 border-danger-500',
    type === EnumPlanChangeType.Direct && 'bg-secondary-500 border-secondary-500',
    type === EnumPlanChangeType.Indirect && 'bg-warning-500 border-warning-500',
    type === EnumPlanChangeType.Metadata && 'bg-neutral-400 border-neutral-400',
    type === EnumPlanChangeType.Default && 'bg-neutral-600 border-neutral-600',
    className,
  )}
>
  {changes.length}
</span>

Color Mapping

Change Type	Color	Hex
Add	Green	success-500
Remove	Red	danger-500
Direct	Blue	secondary-500
Indirect	Yellow	warning-500
Metadata	Gray	neutral-400
Default (Backfills)	Dark Gray	neutral-600

Hover Interaction

The component uses mouse events to control visibility:

const [isShowing, setIsShowing] = useState(false)

<Popover
  onMouseEnter={() => {
    setIsShowing(true)
  }}
  onMouseLeave={() => {
    setIsShowing(false)
  }}
  className="relative flex"
>

Mouse enter: Shows the popover
Mouse leave: Hides the popover

Popover Panel

The floating panel includes transitions and constraints:

<Transition
  show={isShowing}
  as={Fragment}
  enter="transition ease-out duration-200"
  enterFrom="opacity-0 translate-y-1"
  enterTo="opacity-100 translate-y-0"
  leave="transition ease-in duration-150"
  leaveFrom="opacity-100 translate-y-0"
  leaveTo="opacity-0 translate-y-1"
>
  <Popover.Panel className="absolute top-6 right-0 z-10 transform flex p-2 bg-theme-lighter shadow-xl focus:ring-2 ring-opacity-5 rounded-lg">
    <PlanChangePreview
      headline={headline}
      type={type}
      className="w-full h-full max-w-[50vw] max-h-[40vh] overflow-hidden overflow-y-auto hover:scrollbar scrollbar--vertical"
    >
      <PlanChangePreview.Default
        type={type}
        changes={changes}
      />
    </PlanChangePreview>
  </Popover.Panel>
</Transition>

Panel Features

Positioning: Absolute, positioned 6px below badge, aligned right
Animation: 200ms enter, 150ms leave with opacity and translation
Size constraints: Max 50% viewport width, 40% viewport height
Scrolling: Vertical scroll for long change lists
Styling: Themed background, shadow, rounded corners, focus ring

Usage Example

import EnvironmentChangesPreview from '@components/environmentDetails/EnvironmentChangesPreview'
import { EnumPlanChangeType } from '@components/plan/context'

<EnvironmentChangesPreview
  headline="Added Models"
  type={EnumPlanChangeType.Add}
  changes={addedModels}
  className="-mr-2 group-hover:mr-0 z-[5]"
/>

Transition Timing

The component uses different timing for enter and leave:

Enter transition: 200ms (slower for visual clarity)
Leave transition: 150ms (faster for responsiveness)

This creates a natural feel where the popover appears smoothly but dismisses quickly.

Z-Index Layering

When used in groups, badges can be layered with z-index:

// Example from EnvironmentChanges
<EnvironmentChangesPreview className="z-[5]" />  // Added (top)
<EnvironmentChangesPreview className="z-[4]" />  // Direct
<EnvironmentChangesPreview className="z-[3]" />  // Indirect
<EnvironmentChangesPreview className="z-[2]" />  // Metadata
<EnvironmentChangesPreview className="z-[1]" />  // Removed (bottom)

This ensures proper stacking when badges overlap.

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment