add components for lineage

Author: mykalmax

pnpm-lock.yaml

@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite'
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-docs', '@storybook/addon-onboarding'],
+  addons: ['@storybook/addon-docs'],
   framework: {
     name: '@storybook/react-vite',
     options: {},

web/common/.storybook/main.ts

@@ -1,6 +1,9 @@
 {
   "name": "@tobikodata/sqlmesh-common",
   "version": "0.0.1",
+  "dependencies": {
+    "cronstrue": "^3.3.0"
+  },
   "devDependencies": {
     "@eslint/js": "^9.31.0",
     "@radix-ui/react-slot": "^1.2.3",
@@ -12,6 +15,8 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
+    "@types/dagre": "^0.7.53",
+    "@types/lodash": "^4.17.20",
     "@types/node": "^20.11.25",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
@@ -21,11 +26,14 @@
     "autoprefixer": "^10.4.21",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "dagre": "^0.8.5",
+    "deepmerge": "^4.3.1",
     "eslint": "^9.31.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-storybook": "^9.1.5",
     "fuse.js": "^7.1.0",
     "globals": "^16.3.0",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.542.0",
     "playwright": "^1.54.1",
     "postcss": "^8.5.6",
@@ -72,7 +80,10 @@
     "@xyflow/react": "^12.8.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "dagre": "^0.8.5",
+    "deepmerge": "^4.3.1",
     "fuse.js": "^7.1.0",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.542.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

web/common/package.json

@@ -0,0 +1,3 @@
+.react-flow__node {
+  height: auto !important;
+}

web/common/src/components/Lineage/Lineage.css

@@ -0,0 +1,55 @@
+import React from 'react'
+
+import {
+  type AdjacencyListColumnKey,
+  type AdjacencyListKey,
+  type PortId,
+} from '../utils'
+
+export type LineageColumn = {
+  source?: string | null
+  expression?: string | null
+  models: Record<string, string[]>
+}
+
+export type ColumnLevelModelConnections = Record<
+  AdjacencyListKey,
+  AdjacencyListKey[]
+>
+export type ColumnLevelDetails = Omit<LineageColumn, 'models'> & {
+  models: ColumnLevelModelConnections
+}
+export type ColumnLevelConnections = Record<
+  AdjacencyListColumnKey,
+  ColumnLevelDetails
+>
+export type ColumnLevelLineageAdjacencyList = Record<
+  AdjacencyListKey,
+  ColumnLevelConnections
+>
+
+export type ColumnLevelLineageContextValue = {
+  adjacencyListColumnLevel: ColumnLevelLineageAdjacencyList
+  selectedColumns: Set<PortId>
+  columnLevelLineage: Map<PortId, ColumnLevelLineageAdjacencyList>
+  setColumnLevelLineage: React.Dispatch<
+    React.SetStateAction<Map<PortId, ColumnLevelLineageAdjacencyList>>
+  >
+  showColumns: boolean
+  setShowColumns: React.Dispatch<React.SetStateAction<boolean>>
+  fetchingColumns: Set<PortId>
+  setFetchingColumns: React.Dispatch<React.SetStateAction<Set<PortId>>>
+}
+
+export const initial = {
+  adjacencyListColumnLevel: {},
+  selectedColumns: new Set<PortId>(),
+  columnLevelLineage: new Map<PortId, ColumnLevelLineageAdjacencyList>(),
+  setColumnLevelLineage: () => {},
+  showColumns: false,
+  setShowColumns: () => {},
+  fetchingColumns: new Set<PortId>(),
+  setFetchingColumns: () => {},
+}
+
+export type ColumnLevelLineageContextHook = () => ColumnLevelLineageContextValue