diff --git a/vscode/react/src/components/graph/ModelColumns.tsx b/vscode/react/src/components/graph/ModelColumns.tsx index 7046907026..40b2c49d0c 100644 --- a/vscode/react/src/components/graph/ModelColumns.tsx +++ b/vscode/react/src/components/graph/ModelColumns.tsx @@ -1,11 +1,4 @@ -import React, { - useEffect, - useMemo, - useState, - useCallback, - Fragment, - useRef, -} from 'react' +import React, { useEffect, useMemo, useCallback } from 'react' import { Handle, Position, useUpdateNodeInternals } from 'reactflow' import 'reactflow/dist/base.css' import { mergeLineageWithColumns, mergeConnections } from './help' @@ -20,18 +13,12 @@ import { } from '@/utils/index' import { EnumSide, type Side } from './types' import { NoSymbolIcon } from '@heroicons/react/24/solid' -import { - InformationCircleIcon, - ClockIcon, - ExclamationCircleIcon, -} from '@heroicons/react/24/outline' +import { ClockIcon, ExclamationCircleIcon } from '@heroicons/react/24/outline' import clsx from 'clsx' import { type ColumnDescription, type ColumnLineageApiLineageModelNameColumnNameGet200, type LineageColumn, - type LineageColumnSource, - type LineageColumnExpression, } from '@/api/client' import Loading from '@/components/loading/Loading' import Spinner from '@/components/logo/Spinner' @@ -41,21 +28,19 @@ import { type ModelSQLMeshModel, } from '@/domain/sqlmesh-model' import { useLineageFlow } from './context' -import { Popover, Transition } from '@headlessui/react' import { useApiColumnLineage } from '@/api/index' import SourceList from '@/components/sourceList/SourceList' import type { Lineage } from '@/domain/lineage' import type { ModelName } from '@/domain/models' import type { Column } from '@/domain/column' -export default function ModelColumns({ +export function ModelColumns({ nodeId, columns, disabled, className, limit = 5, withHandles = false, - withSource = false, withDescription = true, maxHeight = '50vh', }: { @@ -65,7 +50,6 @@ export default function ModelColumns({ className?: string limit?: number withHandles?: boolean - withSource?: boolean withDescription?: boolean maxHeight?: string }): JSX.Element { @@ -224,17 +208,6 @@ export default function ModelColumns({ } withHandles={withHandles} withDescription={withDescription} - expression={ - withSource - ? getColumnFromLineage(lineage, nodeId, column.name) - ?.expression - : undefined - } - source={ - withSource - ? getColumnFromLineage(lineage, nodeId, column.name)?.source - : undefined - } isEmpty={ isNotNil(getColumnFromLineage(lineage, nodeId, column.name)) && Object.keys( @@ -273,17 +246,6 @@ export default function ModelColumns({ } withHandles={withHandles} withDescription={withDescription} - expression={ - withSource - ? getColumnFromLineage(lineage, nodeId, column.name) - ?.expression - : undefined - } - source={ - withSource - ? getColumnFromLineage(lineage, nodeId, column.name)?.source - : undefined - } isEmpty={ isNotNil(getColumnFromLineage(lineage, nodeId, column.name)) && Object.keys( @@ -330,17 +292,6 @@ export default function ModelColumns({ } withHandles={withHandles} withDescription={withDescription} - expression={ - withSource - ? getColumnFromLineage(lineage, nodeId, item.name) - ?.expression - : undefined - } - source={ - withSource - ? getColumnFromLineage(lineage, nodeId, item.name)?.source - : undefined - } isEmpty={ isNotNil(getColumnFromLineage(lineage, nodeId, item.name)) && Object.keys( @@ -373,8 +324,6 @@ function ModelColumn({ selectManually, withHandles = false, withDescription = true, - source, - expression, }: { id: string nodeId: string @@ -385,8 +334,6 @@ function ModelColumn({ hasRight?: boolean isEmpty?: boolean withHandles?: boolean - source?: LineageColumnSource - expression?: LineageColumnExpression withDescription?: boolean updateColumnLineage: ( lineage: ColumnLineageApiLineageModelNameColumnNameGet200, @@ -447,12 +394,6 @@ function ModelColumn({ disabled={disabled} className="px-2" > - {isNotNil(source) && ( - - )} (null) - // const { handleClickModel } = useLineageFlow() - - // const modelExtensions = useSQLMeshModelExtensions(undefined, model => { - // handleClickModel?.(model.name) - // }) - - const [isShowing, setIsShowing] = useState(false) - - useEffect(() => { - if (isShowing) { - scrollToExpression() - } - }, [isShowing, expression]) - - function scrollToExpression(): void { - // NOTE: This is a hack to scroll to the expression - // and should be replaced with a code mirror extension - setTimeout(() => { - const lines = Array.from( - elSourceContainer.current?.querySelector('[role="textbox"].cm-content') - ?.children ?? [], - ) - - for (const node of lines) { - if (node.textContent?.trim() === expression) { - node.scrollIntoView({ - behavior: 'smooth', - block: 'center', - inline: 'nearest', - }) - setTimeout(() => node.classList.add('sqlmesh-expression'), 500) - return - } - } - }, 300) - } - - return ( - setIsShowing(false)} - onMouseOver={() => setIsShowing(true)} - className="flex" - > - - - e.stopPropagation()} - > - {/* */} - - - - ) -} - function getColumnFromLineage( lineage: Record, nodeId: string, diff --git a/vscode/react/src/components/graph/ModelNode.tsx b/vscode/react/src/components/graph/ModelNode.tsx index dda072ada0..5b974ca76f 100644 --- a/vscode/react/src/components/graph/ModelNode.tsx +++ b/vscode/react/src/components/graph/ModelNode.tsx @@ -5,8 +5,8 @@ import { ModelType, type Model } from '@/api/client' import { useLineageFlow } from './context' import { type GraphNodeData } from './help' import { Position, type NodeProps } from 'reactflow' -import ModelNodeHeaderHandles from './ModelNodeHeaderHandles' -import ModelColumns from './ModelColumns' +import { ModelNodeHeaderHandles } from './ModelNodeHeaderHandles' +import { ModelColumns } from './ModelColumns' import { fromAPIColumn, type Column } from '@/domain/column' export const EnumLineageNodeModelType = { @@ -229,7 +229,6 @@ export default function ModelNode({ columns={columns} disabled={shouldDisableColumns} withHandles={true} - withSource={true} withDescription={false} maxHeight="10rem" /> diff --git a/vscode/react/src/components/graph/ModelNodeHeaderHandles.tsx b/vscode/react/src/components/graph/ModelNodeHeaderHandles.tsx index 040cd1dba6..35b1428154 100644 --- a/vscode/react/src/components/graph/ModelNodeHeaderHandles.tsx +++ b/vscode/react/src/components/graph/ModelNodeHeaderHandles.tsx @@ -8,7 +8,7 @@ import { ArrowRightCircleIcon } from '@heroicons/react/24/solid' import clsx from 'clsx' import { type LineageNodeModelType } from './ModelNode' -export default function ModelNodeHeaderHandles({ +export function ModelNodeHeaderHandles({ id, className, hasLeft = false,