feat(lineage): vscode updated lineage

vscode/extension/tests/lineage_settings.spec.ts

@@ -47,9 +47,22 @@ test('Settings button is visible in the lineage view', async ({
       if (activeFrame) {
         try {
           await activeFrame
-            .getByRole('button', {
-              name: 'Settings',
-            })
+            .getByRole('button', { name: 'Zoom In' })
+            .waitFor({ timeout: 1000 })
+          await activeFrame
+            .getByRole('button', { name: 'Zoom Out' })
+            .waitFor({ timeout: 1000 })
+          await activeFrame
+            .getByRole('button', { name: 'Only selected nodes' })
+            .waitFor({ timeout: 1000 })
+          await activeFrame
+            .getByRole('button', { name: 'Zoom to selected node' })
+            .waitFor({ timeout: 1000 })
+          await activeFrame
+            .getByRole('button', { name: 'Show columns' })
+            .waitFor({ timeout: 1000 })
+          await activeFrame
+            .getByRole('button', { name: 'Reset' })
             .waitFor({ timeout: 1000 })
           settingsCount++
         } catch {

vscode/react/package.json

@@ -18,22 +18,21 @@
     "@headlessui/react": "^2.2.5",
     "@heroicons/react": "^2.2.0",
     "@radix-ui/react-select": "^2.2.5",
-    "@tailwindcss/postcss": "^4.1.11",
-    "@tailwindcss/vite": "^4.1.11",
     "@tanstack/react-query": "^5.83.0",
-    "@tanstack/react-router": "^1.129.8",
+    "@tanstack/react-router": "^1.131.26",
     "@tanstack/react-router-devtools": "^1.131.26",
     "@tanstack/react-virtual": "^3.13.12",
-    "@tanstack/router-plugin": "^1.129.8",
+    "@tanstack/router-plugin": "^1.131.26",
     "apache-arrow": "^19.0.1",
     "clsx": "^2.1.1",
+    "cronstrue": "3.3.0",
     "elkjs": "^0.8.2",
+    "lucide-react": "0.542.0",
     "orval": "^7.10.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router": "^7.7.0",
-    "reactflow": "^11.11.4",
-    "tailwindcss": "^4.1.11",
+    "tailwindcss": "3.4.17",
     "vscode-uri": "^3.1.0"
   },
   "devDependencies": {
@@ -48,8 +47,8 @@
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react": "^4.7.0",
-    "@vitest/browser": "3.2.3",
-    "@vitest/coverage-v8": "3.2.3",
+    "@vitest/browser": "3.2.4",
+    "@vitest/coverage-v8": "3.2.4",
     "jsdom": "^26.1.0",
     "playwright": "^1.54.1",
     "storybook": "^9.0.18",

vscode/react/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

vscode/react/src/App.css

@@ -1,5 +1,156 @@
-@import 'tailwindcss';
-@config "../tailwind.config.cjs";
+:root {
+  /*
+    Keep commented for reference.
+
+    --color-metadata-label: rgba(100, 100, 100, 1);
+    --color-metadata-value: rgba(10, 10, 10, 1);
+
+    --color-tooltip-background: rgba(150, 150, 150, 1);
+    --color-tooltip-foreground: rgba(255, 255, 255, 1);
+
+    --color-model-name-grayscale-link-underline: rgb(24, 13, 13);
+    --color-model-name-grayscale-link-underline-hover: rgba(125, 125, 125, 1);
+    --color-model-name-link-underline: rgba(0, 0, 0, 1);
+    --color-model-name-link-underline-hover: rgba(0, 0, 0, 1);
+    --color-model-name-catalog: rgba(0, 0, 0, 1);
+    --color-model-name-schema: rgba(0, 0, 0, 1);
+    --color-model-name-model: rgba(0, 0, 0, 1);
+    --color-model-name-grayscale-catalog: rgba(100, 100, 100, 1);
+    --color-model-name-grayscale-schema: rgba(50, 50, 50, 1);
+  */
+
+  --color-model-name-grayscale-model: var(--vscode-foreground);
+  --color-model-name-copy-icon: var(--vscode-foreground);
+  --color-model-name-copy-icon-hover: var(--vscode-foreground);
+  --color-model-name-copy-icon-background: transparent;
+  --color-model-name-copy-icon-background-hover: rgba(255, 255, 255, 0.1);
+
+  --color-filterable-list-counter-background: var(--vscode-input-background);
+  --color-filterable-list-counter-foreground: var(--vscode-input-foreground);
+
+  --color-filterable-list-input-background: var(--vscode-input-background);
+  --color-filterable-list-input-foreground: var(--vscode-input-foreground);
+  --color-filterable-list-input-placeholder: var(
+    --vscode-input-placeholderForeground
+  );
+  --color-filterable-list-input-border: var(--vscode-input-border);
+
+  --color-lineage-background: transparent;
+  --color-lineage-border: transparent;
+  --color-lineage-foreground: var(--vscode-foreground);
+  --color-lineage-divider: var(--vscode-text-separatorForeground);
+
+  --color-lineage-grid-dot: rgba(0, 0, 0, 0.1);
+
+  --color-lineage-control-background: var(--vscode-editor-background);
+  --color-lineage-control-border: var(--vscode-foreground);
+  --color-lineage-control-background-hover: var(--vscode-editor-background);
+  --color-lineage-control-icon-background: var(--vscode-foreground);
+  --color-lineage-control-icon-foreground: var(--vscode-editor-background);
+  --color-lineage-control-button-tooltip-background: var(
+    --vscode-editor-background
+  );
+  --color-lineage-control-button-tooltip-foreground: var(--vscode-foreground);
+  --color-lineage-control-button-tooltip-border: var(--vscode-foreground);
+
+  --xy-controls-button-background-color: var(--vscode-editor-background);
+  --xy-controls-button-background-color-hover-default: var(
+    --vscode-editor-background
+  );
+  --xy-controls-button-background-color-hover-props: var(
+    --vscode-editor-background
+  );
+  --xy-controls-button-color-default: var(--vscode-foreground);
+  --xy-attribution-background-color: var(--vscode-editor-background);
+  --xy-controls-button-border-color-default: var(--vscode-editor-background);
+  --xy-controls-button-border-color-props: var(--vscode-editor-background);
+  --xy-controls-button-border-color: var(--vscode-editor-background);
+
+  --color-lineage-node-background: var(--vscode-editor-background);
+  --color-lineage-node-foreground: var(--vscode-foreground);
+  --color-lineage-node-border: var(--vscode-text-separatorForeground);
+  --color-lineage-node-border-hover: var(--vscode-text-separatorForeground);
+
+  --color-lineage-node-current-background: var(
+    --vscode-editorLightBulb-foreground
+  );
+  --color-lineage-node-current-foreground: var(--vscode-editor-background);
+
+  --color-lineage-node-selected-border: var(
+    --vscode-editorLightBulb-foreground
+  );
+
+  --color-lineage-node-badge-background: var(--vscode-badge-background);
+  --color-lineage-node-badge-foreground: var(--vscode-badge-foreground);
+
+  --color-lineage-node-appendix-background: transparent;
+
+  --color-lineage-node-type-background-sql: var(--vscode-minimap-infoHighlight);
+  --color-lineage-node-type-foreground-sql: var(--vscode-minimap-infoHighlight);
+  --color-lineage-node-type-border-sql: var(--vscode-minimap-infoHighlight);
+
+  --color-lineage-node-type-background-python: var(
+    --vscode-editorWarning-foreground
+  );
+  --color-lineage-node-type-foreground-python: var(
+    --vscode-editorWarning-foreground
+  );
+  --color-lineage-node-type-border-python: var(
+    --vscode-editorWarning-foreground
+  );
+
+  --color-lineage-node-type-background-source: var(
+    --vscode-minimap-errorHighlight
+  );
+  --color-lineage-node-type-foreground-source: var(
+    --vscode-minimap-errorHighlight
+  );
+  --color-lineage-node-type-border-source: var(--vscode-minimap-errorHighlight);
+
+  --color-lineage-node-type-handle-icon-background: var(
+    --vscode-editor-background
+  );
+  --color-lineage-node-type-handle-icon-foreground: var(--vscode-foreground);
+
+  --color-lineage-edge: rgba(0, 0, 0, 0.1);
+
+  --color-lineage-node-port-background: rgba(0, 0, 0, 0.1);
+  --color-lineage-node-port-handle-source: var(--vscode-progressBar-background);
+  --color-lineage-node-port-handle-target: var(--vscode-progressBar-background);
+  --color-lineage-node-port-edge-source: var(--vscode-progressBar-background);
+  --color-lineage-node-port-edge-target: var(--vscode-progressBar-background);
+
+  --color-lineage-model-column-error-background: var(
+    --vscode-editor-background
+  );
+  --color-lineage-model-column-source-background: var(
+    --vscode-editor-background
+  );
+  --color-lineage-model-column-expression-background: var(
+    --vscode-editor-background
+  );
+  --color-lineage-model-column-error-icon: var(
+    --vscode-activityErrorBadge-background
+  );
+  --color-lineage-model-column-active-background: var(
+    --vscode-selection-background
+  );
+  --color-lineage-model-column-active-foreground: var(
+    --vscode-editorLightBulb-foreground
+  );
+  --color-lineage-model-column-icon: var(--vscode-text-separatorForeground);
+  --color-lineage-model-column-icon-active: var(--vscode-foreground);
+
+  --color-lineage-model-column-badge-background: var(--vscode-input-background);
+  --color-lineage-model-column-badge-foreground: var(--vscode-input-foreground);
+
+  --color-lineage-model-column-metadata-label: var(
+    --vscode-input-placeholderForeground
+  );
+  --color-lineage-model-column-metadata-value: var(--vscode-input-foreground);
+
+  --color-lineage-model-column-information-info: var(--vscode-input-foreground);
+}
 
 @tailwind base;
 @tailwind components;
@@ -65,10 +216,3 @@
     @apply outline-none ring-offset-2 ring-4;
   }
 }
-
-:root {
-  --color-graph-edge-secondary: var(--vscode-disabledForeground);
-  --color-graph-edge-main: var(--vscode-disabledForeground);
-  --color-graph-edge-selected: var(--vscode-textLink-foreground);
-  --color-graph-edge-direct: var(--vscode-disabledForeground);
-}