Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@ export interface DataRowProps {
* queued indicators across page refresh during long Run-all dispatches.
*/
activeDispatches: ActiveDispatch[] | undefined
/** Pixel `left` value for each frozen column key; absent keys are not frozen. */
frozenOffsets?: Map<string, number>
/** Key of the rightmost frozen column, used to render a separator shadow. */
lastFrozenColKey?: string | null
}

function cellRangeRowChanged(
Expand Down Expand Up @@ -113,7 +117,9 @@ function dataRowPropsAreEqual(prev: DataRowProps, next: DataRowProps): boolean {
prev.onStopRow !== next.onStopRow ||
prev.onRunRow !== next.onRunRow ||
prev.workflowGroups !== next.workflowGroups ||
prev.activeDispatches !== next.activeDispatches
prev.activeDispatches !== next.activeDispatches ||
prev.frozenOffsets !== next.frozenOffsets ||
prev.lastFrozenColKey !== next.lastFrozenColKey
) {
return false
}
Expand Down Expand Up @@ -157,6 +163,8 @@ export const DataRow = React.memo(function DataRow({
onRunRow,
workflowGroups,
activeDispatches,
frozenOffsets,
lastFrozenColKey,
}: DataRowProps) {
const sel = normalizedSelection
/**
Expand Down Expand Up @@ -264,13 +272,23 @@ export const DataRow = React.memo(function DataRow({
const isLeftEdge = inRange ? colIndex === sel!.startCol : colIndex === 0
const isRightEdge = inRange ? colIndex === sel!.endCol : colIndex === columns.length - 1

const frozenLeft = frozenOffsets?.get(column.key)
const isFrozenCell = frozenLeft !== undefined
const isFrozenSeparator = column.key === lastFrozenColKey

return (
<td
key={column.key}
data-row={rowIndex}
data-row-id={row.id}
data-col={colIndex}
className={cn(CELL, (isHighlighted || isAnchor || isEditing) && 'relative')}
className={cn(
CELL,
(isHighlighted || isAnchor || isEditing) && 'relative',
isFrozenCell && 'z-[5] bg-[var(--bg)]',
isFrozenSeparator && '[box-shadow:2px_0_0_0_var(--border)]'
)}
style={isFrozenCell ? { position: 'sticky', left: frozenLeft } : undefined}
onMouseDown={(e) => {
if (e.button !== 0 || isEditing) return
onCellMouseDown(rowIndex, colIndex, e.shiftKey)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
'use client'

import React, { useCallback, useEffect, useRef, useState } from 'react'
import { ChevronDown } from 'lucide-react'
import { ChevronDown } from '@/components/emcn/icons'
import { cn } from '@/lib/core/utils/cn'
import type { ColumnDefinition, WorkflowGroup } from '@/lib/table'
import type { WorkflowGroup } from '@/lib/table'
import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
import { COL_WIDTH, SELECTION_TINT_BG } from '../constants'
import type { ColumnSourceInfo, DisplayColumn } from '../types'
Expand All @@ -21,7 +21,6 @@ interface ColumnHeaderMenuProps {
onRenameSubmit: () => void
onRenameCancel: () => void
onColumnSelect: (colIndex: number, shiftKey: boolean) => void
onChangeType: (columnName: string, newType: ColumnDefinition['type']) => void
onInsertLeft: (columnName: string) => void
onInsertRight: (columnName: string) => void
onDeleteColumn: (columnName: string) => void
Expand All @@ -42,6 +41,14 @@ interface ColumnHeaderMenuProps {
/** Opens a popup preview of the column's underlying workflow. Surfaced in
* the chevron menu for workflow-output columns. */
onViewWorkflow?: (workflowId: string) => void
/** Whether this column is currently frozen (pinned to the left). */
isFrozen?: boolean
/** Toggle the frozen state for this column. */
onFreezeToggle?: (columnName: string) => void
/** Left offset in pixels when frozen (drives `position: sticky`). */
stickyLeft?: number
/** Whether this is the rightmost frozen column (renders a separator shadow). */
isLastFrozen?: boolean
}

/**
Expand Down Expand Up @@ -76,6 +83,10 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
sourceInfo,
onOpenConfig,
onViewWorkflow,
isFrozen,
onFreezeToggle,
stickyLeft,
isLastFrozen,
}: ColumnHeaderMenuProps) {
const renameInputRef = useRef<HTMLInputElement>(null)
const didDragRef = useRef(false)
Expand Down Expand Up @@ -228,7 +239,12 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({

return (
<th
className='group relative border-[var(--border)] border-r border-b bg-[var(--bg)] p-0 text-left align-middle'
className={cn(
'group relative border-[var(--border)] border-r border-b bg-[var(--bg)] p-0 text-left align-middle',
stickyLeft !== undefined && 'z-[11]',
isLastFrozen && '[box-shadow:2px_0_0_0_var(--border)]'
)}
style={stickyLeft !== undefined ? { position: 'sticky', left: stickyLeft } : undefined}
draggable={!readOnly && !isRenaming}
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
Expand Down Expand Up @@ -316,6 +332,8 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
onViewWorkflow={
onViewWorkflow && ownGroup ? () => onViewWorkflow(ownGroup.workflowId) : undefined
}
isFrozen={isFrozen}
onFreezeToggle={onFreezeToggle}
/>
</div>
)}
Expand Down
Loading
Loading