Merge pull request #75 from biggraph/darabos-ga

.github/workflows/test.yaml

@@ -24,7 +24,20 @@ jobs:
         run: |
           eval `ssh-agent -s`
           ssh-add - <<< '${{ secrets.LYNXSCRIBE_DEPLOY_KEY }}'
-          uv pip install -e lynxkite-core/[dev] -e lynxkite-app/[dev] -e lynxkite-graph-analytics/[dev] -e lynxkite-bio -e lynxkite-lynxscribe/ -e lynxkite-pillow-example/
+          uv pip install \
+            -e lynxkite-core/[dev] \
+            -e lynxkite-app/[dev] \
+            -e lynxkite-graph-analytics/[dev] \
+            -e lynxkite-bio \
+            -e lynxkite-lynxscribe/ \
+            -e lynxkite-pillow-example/
+        env:
+            UV_SYSTEM_PYTHON: 1
+
+      - name: Run pre-commits
+        run: |
+          uv pip install pre-commit
+          pre-commit run --all-files
         env:
             UV_SYSTEM_PYTHON: 1
 
@@ -43,6 +56,13 @@ jobs:
           cd lynxkite-graph-analytics
           pytest
 
+      - name: Try building the documentation
+        run: |
+          uv pip install mkdocs-material mkdocstrings[python]
+          mkdocs build
+        env:
+            UV_SYSTEM_PYTHON: 1
+
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*

.gitignore

@@ -16,3 +16,9 @@ joblib-cache
 *.egg-info
 
 lynxkite_crdt_data
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

docs/lynxkite-graph-analytics.md

@@ -3,4 +3,4 @@
 This is the classical LynxKite experience!
 The graph analytics plugin is a collection of graph algorithms that can be run on a LynxKite graph.
 
-::: lynxkite_plugins.graph_analytics.lynxkite_ops
+::: lynxkite_graph_analytics.lynxkite_ops

lynxkite-app/web/src/workspace/Workspace.tsx

@@ -180,6 +180,40 @@ function LynxKiteFlow() {
     }),
     [],
   );
+
+  // Global keyboard shortcuts.
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Show the node search dialog on "/".
+      if (
+        event.key === "/" &&
+        !nodeSearchSettings &&
+        !isTypingInFormElement()
+      ) {
+        event.preventDefault();
+        setNodeSearchSettings({
+          pos: { x: 100, y: 100 },
+          boxes: catalog.data![state.workspace.env!],
+        });
+      }
+    };
+    // TODO: Switch to keydown once https://github.com/xyflow/xyflow/pull/5055 is merged.
+    document.addEventListener("keyup", handleKeyDown);
+    return () => {
+      document.removeEventListener("keyup", handleKeyDown);
+    };
+  }, [catalog.data, nodeSearchSettings, state.workspace.env]);
+
+  function isTypingInFormElement() {
+    const activeElement = document.activeElement;
+    return (
+      activeElement &&
+      (activeElement.tagName === "INPUT" ||
+        activeElement.tagName === "TEXTAREA" ||
+        (activeElement as HTMLElement).isContentEditable)
+    );
+  }
+
   const closeNodeSearch = useCallback(() => {
     setNodeSearchSettings(undefined);
     setSuppressSearchUntil(Date.now() + 200);

lynxkite-app/web/tests/basic.spec.ts

@@ -21,6 +21,9 @@ test("Box creation & deletion per env", async () => {
   const envs = await workspace.getEnvs();
   for (const env of envs) {
     await workspace.setEnv(env);
+    // TODO: Opening the catalog immediately after setting the env can fail.
+    // Let's fix this!
+    await new Promise((resolve) => setTimeout(resolve, 500));
     const catalog = await workspace.getCatalog();
     expect(catalog).not.toHaveLength(0);
     const op = catalog[0];

lynxkite-app/web/tests/examples.spec.ts

@@ -4,49 +4,49 @@ import { Workspace } from "./lynxkite";
 
 test("LynxKite Graph Analytics example", async ({ page }) => {
   const ws = await Workspace.open(page, "NetworkX demo");
-  expect(await ws.isErrorFree(process.env.CI ? 2000 : 1000)).toBeTruthy();
+  await ws.expectErrorFree(process.env.CI ? 2000 : 1000);
 });
 
 test("Bio example", async ({ page }) => {
   const ws = await Workspace.open(page, "Bio demo");
-  expect(await ws.isErrorFree()).toBeTruthy();
+  await ws.expectErrorFree();
 });
 
 test("Pytorch example", async ({ page }) => {
   const ws = await Workspace.open(page, "PyTorch demo");
-  expect(await ws.isErrorFree()).toBeTruthy();
+  await ws.expectErrorFree();
 });
 
 test.fail("AIMO example", async ({ page }) => {
   // Fails because of missing OPENAI_API_KEY
   const ws = await Workspace.open(page, "AIMO");
-  expect(await ws.isErrorFree()).toBeTruthy();
+  await ws.expectErrorFree();
 });
 
 test.fail("LynxScribe example", async ({ page }) => {
   // Fails because of missing OPENAI_API_KEY
   const ws = await Workspace.open(page, "LynxScribe demo");
-  expect(await ws.isErrorFree()).toBeTruthy();
+  await ws.expectErrorFree();
 });
 
 test.fail("Graph RAG", async ({ page }) => {
   // Fails due to some issue with ChromaDB
   const ws = await Workspace.open(page, "Graph RAG");
-  expect(await ws.isErrorFree(process.env.CI ? 2000 : 500)).toBeTruthy();
+  await ws.expectErrorFree(process.env.CI ? 2000 : 500);
 });
 
 test.fail("RAG chatbot app", async ({ page }) => {
   // Fail due to all operation being unknown
   const ws = await Workspace.open(page, "RAG chatbot app");
-  expect(await ws.isErrorFree()).toBeTruthy();
+  await ws.expectErrorFree();
 });
 
 test("Airlines demo", async ({ page }) => {
   const ws = await Workspace.open(page, "Airlines demo");
-  expect(await ws.isErrorFree(process.env.CI ? 10000 : 500)).toBeTruthy();
+  await ws.expectErrorFree(process.env.CI ? 10000 : 500);
 });
 
 test("Pillow example", async ({ page }) => {
   const ws = await Workspace.open(page, "Image processing");
-  expect(await ws.isErrorFree()).toBeTruthy();
+  await ws.expectErrorFree();
 });

lynxkite-app/web/tests/lynxkite.ts

@@ -54,7 +54,7 @@ export class Workspace {
 
   async addBox(boxName) {
     //TODO: Support passing box parameters (id, position, etc.)
-    const allBoxes = await this.getBoxes();
+    const allBoxes = await this.getBoxes().all();
     if (allBoxes) {
       // Avoid overlapping with existing nodes
       const numNodes = allBoxes.length || 1;
@@ -63,13 +63,10 @@ export class Workspace {
     }
 
     // Some x,y offset, otherwise the box handle may fall outside the viewport.
-    await this.page
-      .locator(".react-flow__pane")
-      .click({ position: { x: 20, y: 20 } });
+    await this.page.locator(".ws-name").click();
+    await this.page.keyboard.press("/");
     await this.page.locator(".node-search").getByText(boxName).click();
-    await this.page.keyboard.press("Escape");
-    // Workaround to wait for the deselection animation after choosing a box. Otherwise, the next box will not be added.
-    await new Promise((resolve) => setTimeout(resolve, 200));
+    await expect(this.getBoxes()).toHaveCount(allBoxes.length + 1);
   }
 
   async getCatalog() {
@@ -79,14 +76,22 @@ export class Workspace {
       .allInnerTexts();
     // Dismiss the catalog menu
     await this.page.keyboard.press("Escape");
-    await new Promise((resolve) => setTimeout(resolve, 200));
+    await expect(this.page.locator(".node-search")).not.toBeVisible();
     return catalog;
   }
 
+  async selectBox(boxId: string) {
+    const box = this.getBox(boxId);
+    // Click on the resizer, so we don't click on any parameters by accident.
+    await box.locator(".react-flow__resize-control").click();
+    await expect(box).toHaveClass(/selected/);
+  }
+
   async deleteBoxes(boxIds: string[]) {
     for (const boxId of boxIds) {
-      await this.getBoxHandle(boxId).first().click();
+      await this.selectBox(boxId);
       await this.page.keyboard.press("Backspace");
+      await expect(this.getBox(boxId)).not.toBeVisible();
     }
   }
 
@@ -95,7 +100,7 @@ export class Workspace {
   }
 
   getBoxes() {
-    return this.page.locator(".react-flow__node").all();
+    return this.page.locator(".react-flow__node");
   }
 
   getBoxHandle(boxId: string, pos?: string) {
@@ -144,19 +149,13 @@ export class Workspace {
     await this.page.mouse.up();
   }
 
-  async isErrorFree(executionWaitTime?): Promise<boolean> {
+  async expectErrorFree(executionWaitTime?) {
     // TODO: Workaround, to account for workspace execution. Once
     // we have a load indicator we can use that instead.
     await new Promise((resolve) =>
       setTimeout(resolve, executionWaitTime ? executionWaitTime : 500),
     );
-    const boxes = await this.getBoxes();
-    for (const box of boxes) {
-      if (await box.locator(".error").isVisible()) {
-        return false;
-      }
-    }
-    return true;
+    await expect(this.getBoxes().locator(".error")).not.toBeVisible();
   }
 
   async close() {