Skip to content
Merged
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
149 changes: 3 additions & 146 deletions vscode/react/src/components/graph/ModelColumns.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'
Expand All @@ -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',
}: {
Expand All @@ -65,7 +50,6 @@ export default function ModelColumns({
className?: string
limit?: number
withHandles?: boolean
withSource?: boolean
withDescription?: boolean
maxHeight?: string
}): JSX.Element {
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -373,8 +324,6 @@ function ModelColumn({
selectManually,
withHandles = false,
withDescription = true,
source,
expression,
}: {
id: string
nodeId: string
Expand All @@ -385,8 +334,6 @@ function ModelColumn({
hasRight?: boolean
isEmpty?: boolean
withHandles?: boolean
source?: LineageColumnSource
expression?: LineageColumnExpression
withDescription?: boolean
updateColumnLineage: (
lineage: ColumnLineageApiLineageModelNameColumnNameGet200,
Expand Down Expand Up @@ -447,12 +394,6 @@ function ModelColumn({
disabled={disabled}
className="px-2"
>
{isNotNil(source) && (
<ColumnSource
source={source}
expression={expression}
/>
)}
<ColumnStatus
isFetching={isFetching}
isError={isError}
Expand Down Expand Up @@ -644,90 +585,6 @@ function ColumnStatus({
)
}

function ColumnSource({
// source,
expression,
}: {
source: LineageColumnSource
expression?: LineageColumnExpression
}): JSX.Element {
const elSourceContainer = useRef<HTMLDivElement>(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 (
<Popover
onMouseLeave={() => setIsShowing(false)}
onMouseOver={() => setIsShowing(true)}
className="flex"
>
<InformationCircleIcon
className={clsx(
'inline-block mr-3 w-4 h-4',
isShowing ? 'text-inherit' : 'text-prose',
)}
/>
<Transition
show={isShowing}
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 -translate-y-[40%]"
enterTo="opacity-100 -translate-y-[50%]"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 -translate-y-[50%]"
leaveTo="opacity-0 -translate-y-[40%]"
>
<Popover.Panel
ref={elSourceContainer}
className="fixed -translate-x-[100%] -translate-y-[50%] z-10 content transform cursor-pointer rounded-lg bg-theme border-4 border-neutral-200 dark:border-neutral-600"
onClick={e => e.stopPropagation()}
>
{/* <CodeEditorDefault
content={source as string}
type={EnumFileExtensions.SQL}
className="w-full h-[25rem] text-xs rounded-lg scrollbar scrollbar--vertical scrollbar--horizontal overflow-auto max-w-[40rem]"
extensions={modelExtensions}
/> */}
</Popover.Panel>
</Transition>
</Popover>
)
}

function getColumnFromLineage(
lineage: Record<string, Lineage>,
nodeId: string,
Expand Down
5 changes: 2 additions & 3 deletions vscode/react/src/components/graph/ModelNode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -229,7 +229,6 @@ export default function ModelNode({
columns={columns}
disabled={shouldDisableColumns}
withHandles={true}
withSource={true}
withDescription={false}
maxHeight="10rem"
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down