making progress with the server

Author: benfdking

docs/development.md

@@ -122,3 +122,9 @@ graph TD
     React [React Server] --> |passes on api requests| B
     C --> |reads react webpages from| React
 ```
+ 
+In development mode, the React app is not embedded into the python server. Instead a separate instance of the React app is run. This allows you to make changes to the UI and see them immediately.
+
+The React App runs on the port 5173. The VSCode extension will automatically open the React app in a new tab.
+The python server will run on the port 5174.
+

vscode/extension/src/web-server/server.ts

@@ -3,6 +3,7 @@ import { isErr, ok, Result } from "../functional/result"
 import getPort from "../get-port"
 import { sqlmesh_exec } from "../sqlmesh/sqlmesh"
 import * as vscode from 'vscode'
+import { isProduction } from "../is_dev"
 
 export interface Server {
     port: number;
@@ -15,7 +16,7 @@ export const startWebServer = async (outputChannel: vscode.OutputChannel): Promi
     if (isErr(sqlmesh)) {
         return sqlmesh
     }
-    const port = await getPort()
+    const port = !isProduction() ? 5174 : await getPort()
     const { bin, workspacePath, env } = sqlmesh.value
     const process = spawn(bin, ['ui', '--port', port.toString()], {
         cwd: workspacePath,

vscode/react/src/components/graph/Graph.css

@@ -0,0 +1,24 @@
+.react-flow__node {
+  z-index: 10 !important;
+}
+.react-flow__handle {
+  background-color: currentColor;
+}
+.react-flow__node.react-flow__node-model:hover,
+.react-flow__node.react-flow__node-model:active {
+  z-index: 20 !important;
+}
+react-flow__attribution {
+  background: transparent;
+}
+.lineage__column-source b {
+  font-weight: 900;
+  color: var(--color-primary);
+}
+.react-flow__edge {
+  pointer-events: none !important;
+  z-index: -1 !important;
+}
+.react-flow__background path {
+  stroke: inherit;
+}