chore: cleaning up lineage (#4907)

Author: benfdking

pnpm-lock.yaml

@@ -31,6 +31,7 @@ import { useApiColumnLineage } from '@/api/index'
 import SourceList from '@/components/sourceList/SourceList'
 import type { Lineage } from '@/domain/lineage'
 import type { Column, ColumnName } from '@/domain/column'
+import type { ModelEncodedFQN } from '@/domain/models'
 
 export function ModelColumns({
   nodeId,
@@ -42,7 +43,7 @@ export function ModelColumns({
   withDescription = true,
   maxHeight = '50vh',
 }: {
-  nodeId: string
+  nodeId: ModelEncodedFQN
   columns: Column[]
   disabled?: boolean
   className?: string
@@ -131,7 +132,7 @@ export function ModelColumns({
 
       if (isNil(selectedModel) || isNil(selectedColumn)) return false
 
-      return selectedModel.name === nodeId && selectedColumn.name === columnName
+      return selectedModel.fqn === nodeId && selectedColumn.name === columnName
     },
     [nodeId, manuallySelectedColumn],
   )

vscode/react/src/components/divider/Divider.tsx

@@ -1,8 +1,7 @@
 import { useApiModelLineage, useApiModels } from '@/api/index'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { type ModelSQLMeshModel } from '@/domain/sqlmesh-model'
 import { type HighlightedNodes, useLineageFlow } from './context'
-import { ChevronDownIcon } from '@heroicons/react/24/solid'
 import ReactFlow, {
   Controls,
   Background,
@@ -14,14 +13,12 @@ import ReactFlow, {
   useReactFlow,
   type Edge,
   type Node,
-  Panel,
   ReactFlowProvider,
 } from 'reactflow'
 import Loading from '@/components/loading/Loading'
 import Spinner from '@/components/logo/Spinner'
 import { createLineageWorker } from '@/workers/index'
 import { isArrayEmpty, isFalse, isNil, isNotNil } from '@/utils/index'
-import ListboxShow from '@/components/listbox/ListboxShow'
 import clsx from 'clsx'
 import ModelNode from './ModelNode'
 import {
@@ -32,9 +29,6 @@ import {
   getUpdatedEdges,
   createGraphLayout,
 } from './help'
-import { Popover } from '@headlessui/react'
-import ModelLineageDetails from './ModelLineageDetails'
-import { Divider } from '@/components/divider/Divider'
 import { SettingsControl } from '@/components/graph/SettingsControl'
 import {
   toModelLineage,
@@ -209,7 +203,6 @@ function ModelColumnLineage(): JSX.Element {
     connectedNodes,
     connections,
     nodesMap,
-    showControls,
     handleError,
     setActiveNodes,
     setWithColumns,
@@ -337,7 +330,6 @@ function ModelColumnLineage(): JSX.Element {
 
     setEdges(newEdges)
     setNodes(newNodes)
-    console.log('newActiveNodes', newActiveNodes)
     setActiveNodes(newActiveNodes)
   }, [
     connections,
@@ -385,15 +377,6 @@ function ModelColumnLineage(): JSX.Element {
         snapGrid={[16, 16]}
         snapToGrid
       >
-        {showControls && (
-          <Panel
-            position="top-right"
-            className="bg-theme !m-0 w-full !z-10"
-          >
-            <GraphControls nodes={nodes} />
-            <Divider />
-          </Panel>
-        )}
         <Controls
           className="bg-light p-1 rounded-md !border-none !shadow-lg"
           showInteractive={false}
@@ -417,104 +400,3 @@ function ModelColumnLineage(): JSX.Element {
     </>
   )
 }
-
-function GraphControls({ nodes = [] }: { nodes: Node[] }): JSX.Element {
-  const {
-    withColumns,
-    // mainNode,
-    selectedNodes,
-    withConnected,
-    withImpacted,
-    withSecondary,
-    hasBackground,
-    activeNodes,
-    // highlightedNodes,
-    // setSelectedNodes,
-    setWithColumns,
-    setWithConnected,
-    setWithImpacted,
-    setWithSecondary,
-    setHasBackground,
-  } = useLineageFlow()
-
-  useEffect(() => {
-    setWithColumns(true)
-    setWithSecondary(true)
-    setWithConnected(true)
-    setWithImpacted(true)
-  }, [setWithSecondary])
-
-  const lineageInfoTrigger = useRef<HTMLButtonElement>(null)
-
-  // const highlightedNodeModels = useMemo(
-  //   () => Object.values(highlightedNodes ?? {}).flat(),
-  //   [highlightedNodes],
-  // )
-  // function handleSelect(model: { name: string; description: string }): void {
-  //   if (highlightedNodeModels.includes(model.name) || mainNode === model.name)
-  //     return
-
-  //   setSelectedNodes(current => {
-  //     if (current.has(model.name)) {
-  //       current.delete(model.name)
-  //     } else {
-  //       current.add(model.name)
-  //     }
-
-  //     return new Set(current)
-  //   })
-  // }
-
-  return (
-    <div className="px-2 flex items-center text-xs text-neutral-400 @container">
-      <div className="contents">
-        <Popover
-          className="flex @lg:hidden bg-none border-none"
-          aria-label="Show lineage node details"
-        >
-          <Popover.Button
-            ref={lineageInfoTrigger}
-            className="flex items-center relative w-full cursor-pointer bg-primary-10 text-xs rounded-full text-primary-500 py-1 px-3 text-center focus:outline-none focus-visible:border-accent-500 focus-visible:ring-2 focus-visible:ring-light focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-brand-300 border-1 border-transparent"
-          >
-            Details
-            <ChevronDownIcon
-              className="ml-2 h-4 w-4"
-              aria-hidden="true"
-            />
-          </Popover.Button>
-          <Popover.Panel className="absolute left-2 right-2 flex-col z-50 mt-8 transform flex px-4 py-3 bg-theme-lighter shadow-xl focus:ring-2 ring-opacity-5 rounded-lg">
-            <ModelLineageDetails nodes={nodes} />
-          </Popover.Panel>
-        </Popover>
-        <div className="hidden @lg:contents w-full">
-          <ModelLineageDetails nodes={nodes} />
-        </div>
-      </div>
-      <div className="flex w-full justify-end items-center">
-        {/* <ModelLineageSearch handleSelect={handleSelect} /> */}
-        <ListboxShow
-          options={{
-            Background: setHasBackground,
-            Columns:
-              activeNodes.size > 0 && selectedNodes.size === 0
-                ? undefined
-                : setWithColumns,
-            Connected: activeNodes.size > 0 ? undefined : setWithConnected,
-            'Upstream/Downstream':
-              activeNodes.size > 0 ? undefined : setWithImpacted,
-            All: activeNodes.size > 0 ? undefined : setWithSecondary,
-          }}
-          value={
-            [
-              withColumns && 'Columns',
-              hasBackground && 'Background',
-              withConnected && 'Connected',
-              withImpacted && 'Upstream/Downstream',
-              withSecondary && 'All',
-            ].filter(Boolean) as string[]
-          }
-        />
-      </div>
-    </div>
-  )
-}