Skip to content

Commit 8d799ec

Browse files
mykalmaxmykalmax
committed
set up lineage for vscode ext
1 parent 6919e69 commit 8d799ec

File tree

13 files changed

+1260
-42
lines changed

13 files changed

+1260
-42
lines changed

‎vscode/react/package.json‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,22 +18,25 @@
1818
"@headlessui/react": "^2.2.5",
1919
"@heroicons/react": "^2.2.0",
2020
"@radix-ui/react-select": "^2.2.5",
21-
"@tailwindcss/postcss": "^4.1.11",
22-
"@tailwindcss/vite": "^4.1.11",
2321
"@tanstack/react-query": "^5.83.0",
2422
"@tanstack/react-router": "^1.129.8",
2523
"@tanstack/react-router-devtools": "^1.131.26",
2624
"@tanstack/react-virtual": "^3.13.12",
2725
"@tanstack/router-plugin": "^1.129.8",
26+
"@tobikodata/sqlmesh-common": "0.0.17",
27+
"@xyflow/react": "12.8.4",
2828
"apache-arrow": "^19.0.1",
2929
"clsx": "^2.1.1",
30+
"cronstrue": "3.3.0",
3031
"elkjs": "^0.8.2",
32+
"lodash": "4.17.21",
33+
"lucide-react": "0.542.0",
3134
"orval": "^7.10.0",
3235
"react": "^18.3.1",
3336
"react-dom": "^18.3.1",
3437
"react-router": "^7.7.0",
3538
"reactflow": "^11.11.4",
36-
"tailwindcss": "^4.1.11",
39+
"tailwindcss": "3.4.17",
3740
"vscode-uri": "^3.1.0"
3841
},
3942
"devDependencies": {
@@ -45,6 +48,7 @@
4548
"@storybook/react-vite": "^9.0.18",
4649
"@testing-library/dom": "^10.4.1",
4750
"@testing-library/react": "^16.3.0",
51+
"@types/lodash": "4.17.20",
4852
"@types/react": "^18.3.23",
4953
"@types/react-dom": "^18.3.7",
5054
"@vitejs/plugin-react": "^4.7.0",

‎vscode/react/postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎vscode/react/src/App.css‎

Lines changed: 150 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,153 @@
1-
@import 'tailwindcss';
2-
@config "../tailwind.config.cjs";
1+
@import url('@tobikodata/sqlmesh-common/design/index.css');
2+
@import url('@tobikodata/sqlmesh-common/styles/sqlmesh-common.min.css');
3+
4+
:root {
5+
/*
6+
Keep commented for reference.
7+
8+
--color-metadata-label: rgba(100, 100, 100, 1);
9+
--color-metadata-value: rgba(10, 10, 10, 1);
10+
11+
--color-tooltip-background: rgba(150, 150, 150, 1);
12+
--color-tooltip-foreground: rgba(255, 255, 255, 1);
13+
14+
--color-model-name-grayscale-link-underline: rgb(24, 13, 13);
15+
--color-model-name-grayscale-link-underline-hover: rgba(125, 125, 125, 1);
16+
--color-model-name-link-underline: rgba(0, 0, 0, 1);
17+
--color-model-name-link-underline-hover: rgba(0, 0, 0, 1);
18+
--color-model-name-catalog: rgba(0, 0, 0, 1);
19+
--color-model-name-schema: rgba(0, 0, 0, 1);
20+
--color-model-name-model: rgba(0, 0, 0, 1);
21+
--color-model-name-grayscale-catalog: rgba(100, 100, 100, 1);
22+
--color-model-name-grayscale-schema: rgba(50, 50, 50, 1);
23+
*/
24+
25+
--color-model-name-grayscale-model: var(--vscode-foreground);
26+
--color-model-name-copy-icon: var(--vscode-foreground);
27+
--color-model-name-copy-icon-hover: rgba(0, 0, 0, 0.1);
28+
29+
--color-filterable-list-counter-background: var(--vscode-input-background);
30+
--color-filterable-list-counter-foreground: var(--vscode-input-foreground);
31+
32+
--color-filterable-list-input-background: var(--vscode-input-background);
33+
--color-filterable-list-input-foreground: var(--vscode-input-foreground);
34+
--color-filterable-list-input-placeholder: var(
35+
--vscode-input-placeholderForeground
36+
);
37+
--color-filterable-list-input-border: var(--vscode-input-border);
38+
39+
--color-lineage-background: transparent;
40+
--color-lineage-foreground: var(--vscode-foreground);
41+
--color-lineage-border: var(--vscode-editor-background);
42+
--color-lineage-divider: var(--vscode-text-separatorForeground);
43+
44+
--color-lineage-grid-dot: rgba(0, 0, 0, 0.1);
45+
46+
--color-lineage-control-background: var(--vscode-editor-background);
47+
--color-lineage-control-background-hover: var(--vscode-editor-background);
48+
--color-lineage-control-icon-background: var(--vscode-foreground);
49+
--color-lineage-control-icon-foreground: var(--vscode-editor-background);
50+
--color-lineage-control-button-tooltip-background: var(
51+
--vscode-editor-background
52+
);
53+
--color-lineage-control-button-tooltip-foreground: var(--vscode-foreground);
54+
55+
--xy-controls-button-background-color: var(--vscode-editor-background);
56+
--xy-controls-button-background-color-hover-default: var(
57+
--vscode-editor-background
58+
);
59+
--xy-controls-button-background-color-hover-props: var(
60+
--vscode-editor-background
61+
);
62+
--xy-controls-button-color-default: var(--vscode-foreground);
63+
--xy-attribution-background-color: var(--vscode-editor-background);
64+
--xy-controls-button-border-color-default: var(--vscode-editor-background);
65+
--xy-controls-button-border-color-props: var(--vscode-editor-background);
66+
--xy-controls-button-border-color: var(--vscode-editor-background);
67+
68+
--color-lineage-node-background: var(--vscode-editor-background);
69+
--color-lineage-node-foreground: var(--vscode-foreground);
70+
--color-lineage-node-border: var(--vscode-text-separatorForeground);
71+
--color-lineage-node-border-hover: var(--vscode-text-separatorForeground);
72+
73+
--color-lineage-node-selected-border: var(
74+
--vscode-editorLightBulb-foreground
75+
);
76+
77+
--color-lineage-node-badge-background: var(--vscode-badge-background);
78+
--color-lineage-node-badge-foreground: var(--vscode-badge-foreground);
79+
80+
--color-lineage-node-appendix-background: transparent;
81+
82+
--color-lineage-node-type-background-sql: var(--vscode-errorForeground);
83+
--color-lineage-node-type-foreground-sql: var(--vscode-errorForeground);
84+
--color-lineage-node-type-border-sql: var(--vscode-errorForeground);
85+
86+
--color-lineage-node-type-background-python: var(
87+
--vscode-list-warningForeground
88+
);
89+
--color-lineage-node-type-foreground-python: var(
90+
--vscode-list-warningForeground
91+
);
92+
--color-lineage-node-type-border-python: var(--vscode-list-warningForeground);
93+
94+
--color-lineage-node-type-background-source: var(
95+
--vscode-minimap-infoHighlight
96+
);
97+
--color-lineage-node-type-foreground-source: var(
98+
--vscode-minimap-infoHighlight
99+
);
100+
--color-lineage-node-type-border-source: var(--vscode-minimap-infoHighlight);
101+
102+
--color-lineage-node-type-background-cte-subquery: var(
103+
--vscode-minimap-selectionOccurrenceHighlight
104+
);
105+
--color-lineage-node-type-foreground-cte-subquery: var(
106+
--vscode-minimap-selectionOccurrenceHighlight
107+
);
108+
--color-lineage-node-type-border-cte-subquery: var(
109+
--vscode-minimap-selectionOccurrenceHighlight
110+
);
111+
112+
--color-lineage-node-type-handle-icon-background: var(
113+
--vscode-editor-background
114+
);
115+
--color-lineage-node-type-handle-icon-foreground: var(--vscode-foreground);
116+
117+
--color-lineage-edge: rgba(0, 0, 0, 0.1);
118+
119+
--color-lineage-node-port-background: rgba(0, 0, 0, 0.1);
120+
--color-lineage-node-port-handle-source: var(--vscode-progressBar-background);
121+
--color-lineage-node-port-handle-target: var(--vscode-progressBar-background);
122+
--color-lineage-node-port-edge-source: var(--vscode-progressBar-background);
123+
--color-lineage-node-port-edge-target: var(--vscode-progressBar-background);
124+
125+
--color-lineage-model-column-error-background: var(
126+
--vscode-editor-background
127+
);
128+
--color-lineage-model-column-source-background: var(
129+
--vscode-editor-background
130+
);
131+
--color-lineage-model-column-expression-background: var(
132+
--vscode-editor-background
133+
);
134+
--color-lineage-model-column-error-icon: var(
135+
--vscode-activityErrorBadge-background
136+
);
137+
--color-lineage-model-column-active: rgba(0, 0, 0, 0.1);
138+
--color-lineage-model-column-icon: var(--vscode-text-separatorForeground);
139+
--color-lineage-model-column-icon-active: var(--vscode-foreground);
140+
141+
--color-lineage-model-column-badge-background: var(--vscode-input-background);
142+
--color-lineage-model-column-badge-foreground: var(--vscode-input-foreground);
143+
144+
--color-lineage-model-column-metadata-label: var(
145+
--vscode-input-placeholderForeground
146+
);
147+
--color-lineage-model-column-metadata-value: var(--vscode-input-foreground);
148+
149+
--color-lineage-model-column-information-info: var(--vscode-input-foreground);
150+
}
3151

4152
@tailwind base;
5153
@tailwind components;
@@ -65,10 +213,3 @@
65213
@apply outline-none ring-offset-2 ring-4;
66214
}
67215
}
68-
69-
:root {
70-
--color-graph-edge-secondary: var(--vscode-disabledForeground);
71-
--color-graph-edge-main: var(--vscode-disabledForeground);
72-
--color-graph-edge-selected: var(--vscode-textLink-foreground);
73-
--color-graph-edge-direct: var(--vscode-disabledForeground);
74-
}

‎vscode/react/src/main.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { EventBusProvider } from './hooks/eventBus.tsx'
55
import { TableDiffPage } from './pages/tablediff.tsx'
66
import { LineagePage } from './pages/lineage.tsx'
77

8+
import './App.css'
9+
810
// Detect panel type
911
declare global {
1012
interface Window {

0 commit comments

Comments
 (0)