Merge pull request #73 from biggraph/darabos-rdkit

.github/workflows/test.yaml

@@ -24,7 +24,7 @@ jobs:
         run: |
           eval `ssh-agent -s`
           ssh-add - <<< '${{ secrets.LYNXSCRIBE_DEPLOY_KEY }}'
-          uv pip install -e lynxkite-core/[dev] lynxkite-app/[dev] lynxkite-graph-analytics/[dev] lynxkite-lynxscribe/ 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
 

README.md

@@ -14,6 +14,7 @@ original LynxKite. The primary goals of this rewrite are:
 - `lynxkite-graph-analytics`: Graph analytics plugin. The classical LynxKite experience!
 - `lynxkite-pillow`: A simple example plugin.
 - `lynxkite-lynxscribe`: A plugin for building and running LynxScribe applications.
+- `lynxkite-bio`: Bioinformatics additions for LynxKite Graph Analytics.
 - `docs`: User-facing documentation. It's shared between all packages.
 
 ## Development
@@ -25,7 +26,7 @@ uv venv
 source .venv/bin/activate
 uvx pre-commit install
 # The [dev] tag is only needed if you intend on running tests
-uv pip install -e lynxkite-core/[dev] -e lynxkite-app/[dev] -e lynxkite-graph-analytics/[dev] -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/
 ```
 
 This also builds the frontend, hopefully very quickly. To run it:

examples/Image processing

@@ -281,4 +281,4 @@
       "targetHandle": "image"
     }
   ]
-}
+}

examples/PyTorch demo

@@ -620,4 +620,4 @@
       "targetHandle": "x"
     }
   ]
-}
+}

lynxkite-app/src/lynxkite_app/crdt.py

@@ -3,7 +3,6 @@
 import asyncio
 import contextlib
 import enum
-import pathlib
 import fastapi
 import os.path
 import pycrdt

lynxkite-app/web/package-lock.json

@@ -8,7 +8,7 @@
       "name": "lynxkite",
       "version": "0.0.0",
       "dependencies": {
-        "@esbuild/linux-x64": "^0.24.0",
+        "@esbuild/linux-x64": "^0.25.0",
         "@iconify-json/tabler": "^1.2.10",
         "@svgr/core": "^8.1.0",
         "@svgr/plugin-jsx": "^8.1.0",
@@ -632,9 +632,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.2.tgz",
-      "integrity": "sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q==",
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.0.tgz",
+      "integrity": "sha512-9yl91rHw/cpwMCNytUDxwj2XjFpxML0y9HAOH9pNVQDpQrBxHy01Dx+vaMu0N1CKa/RzBD2hB4u//nfc+Sd3Cw==",
       "cpu": [
         "x64"
       ],
@@ -3055,6 +3055,23 @@
         "@esbuild/win32-x64": "0.24.2"
       }
     },
+    "node_modules/esbuild/node_modules/@esbuild/linux-x64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.2.tgz",
+      "integrity": "sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",

lynxkite-app/web/package.json

@@ -11,7 +11,7 @@
     "preview": "npx vite preview"
   },
   "dependencies": {
-    "@esbuild/linux-x64": "^0.24.0",
+    "@esbuild/linux-x64": "^0.25.0",
     "@iconify-json/tabler": "^1.2.10",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",

lynxkite-app/web/src/index.css

@@ -286,13 +286,19 @@ body {
   .entry-list .entry {
     display: flex;
     border-bottom: 1px solid whitesmoke;
-    padding-left: 10px;
     color: #004165;
     cursor: pointer;
     user-select: none;
-    text-decoration: none;
-    justify-content: space-between;
-    padding-right: 10px;
+
+    a {
+      text-decoration: none;
+      flex: 1;
+      padding-left: 10px;
+    }
+
+    button {
+      padding-right: 10px;
+    }
   }
 
   .entry-list .open .entry,
@@ -316,11 +322,6 @@ body {
   }
 }
 
-path.react-flow__edge-path {
-  stroke-width: 2;
-  stroke: black;
-}
-
 .react-flow__edge.selected path.react-flow__edge-path {
   outline: var(--xy-selection-border, var(--xy-selection-border-default));
   outline-offset: 10px;
@@ -354,13 +355,14 @@ path.react-flow__edge-path {
   margin-top: 10px;
 }
 
-.graph-tables, .graph-relations {
-    flex: 1;
-    padding-left: 10px;
-    padding-right: 10px; 
+.graph-tables,
+.graph-relations {
+  flex: 1;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
-.graph-table-header{
+.graph-table-header {
   display: flex;
   justify-content: space-between;
   font-weight: bold;
@@ -400,7 +402,7 @@ path.react-flow__edge-path {
   font-weight: bold;
   display: block;
   margin-bottom: 2px;
-  color: #666;  /* Lighter text for labels */
+  color: #666; /* Lighter text for labels */
 }
 
 .graph-relation-attributes input {
@@ -428,4 +430,4 @@ path.react-flow__edge-path {
 
 .add-relationship-button:hover {
   background-color: #218838;
-}
+}

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

@@ -41,11 +41,11 @@ import NodeSearch, {
   type Catalog,
   type Catalogs,
 } from "./NodeSearch.tsx";
+import NodeWithGraphCreationView from "./nodes/GraphCreationNode.tsx";
 import NodeWithImage from "./nodes/NodeWithImage.tsx";
 import NodeWithParams from "./nodes/NodeWithParams";
 import NodeWithTableView from "./nodes/NodeWithTableView.tsx";
 import NodeWithVisualization from "./nodes/NodeWithVisualization.tsx";
-import NodeWithGraphCreationView from "./nodes/GraphCreationNode.tsx";
 
 export default function (props: any) {
   return (
@@ -78,6 +78,9 @@ function LynxKiteFlow() {
         if (!state.workspace) return;
         if (!state.workspace.nodes) return;
         if (!state.workspace.edges) return;
+        for (const n of state.workspace.nodes) {
+          n.dragHandle = ".bg-primary";
+        }
         setNodes([...state.workspace.nodes] as Node[]);
         setEdges([...state.workspace.edges] as Edge[]);
         for (const node of state.workspace.nodes) {
@@ -284,7 +287,18 @@ function LynxKiteFlow() {
             proOptions={{ hideAttribution: true }}
             maxZoom={3}
             minZoom={0.3}
-            defaultEdgeOptions={{ markerEnd: { type: MarkerType.Arrow } }}
+            defaultEdgeOptions={{
+              markerEnd: {
+                type: MarkerType.ArrowClosed,
+                color: "black",
+                width: 15,
+                height: 15,
+              },
+              style: {
+                strokeWidth: 2,
+                stroke: "black",
+              },
+            }}
           >
             <Controls />
             <MiniMap />

lynxkite-app/web/src/workspace/nodes/LynxKiteNode.tsx

@@ -64,7 +64,7 @@ export default function LynxKiteNode(props: LynxKiteNodeProps) {
 
   return (
     <div
-      className={`node-container·${expanded ? "expanded" : "collapsed"} `}
+      className={`node-container ${expanded ? "expanded" : "collapsed"} `}
       style={{
         width: props.width || 200,
         height: expanded ? props.height || 200 : undefined,

lynxkite-app/web/src/workspace/nodes/NodeParameter.tsx

@@ -31,7 +31,7 @@ export default function NodeParameter({
         <>
           <ParamName name={name} />
           <textarea
-            className="textarea textarea-bordered w-full max-w-xs"
+            className="textarea textarea-bordered w-full"
             rows={6}
             value={value}
             onChange={(evt) => onChange(evt.currentTarget.value, { delay: 2 })}
@@ -42,7 +42,7 @@ export default function NodeParameter({
         <>
           <ParamName name={name} />
           <select
-            className="select select-bordered w-full max-w-xs"
+            className="select select-bordered w-full"
             value={value || meta.type.enum[0]}
             onChange={(evt) => onChange(evt.currentTarget.value)}
           >
@@ -69,7 +69,7 @@ export default function NodeParameter({
         <>
           <ParamName name={name} />
           <input
-            className="input input-bordered w-full max-w-xs"
+            className="input input-bordered w-full"
             value={value || ""}
             onChange={(evt) => onChange(evt.currentTarget.value, { delay: 2 })}
             onBlur={(evt) => onChange(evt.currentTarget.value, { delay: 0 })}

lynxkite-app/web/src/workspace/nodes/NodeWithTableView.tsx

@@ -19,45 +19,45 @@ export default function NodeWithTableView(props: any) {
   const display = props.data.display?.value;
   const single =
     display?.dataframes && Object.keys(display?.dataframes).length === 1;
+  const dfs = Object.entries(display?.dataframes || {});
+  dfs.sort();
   return (
     <LynxKiteNode {...props}>
       {display && [
-        Object.entries(display.dataframes || {}).map(
-          ([name, df]: [string, any]) => (
-            <React.Fragment key={name}>
-              {!single && (
-                <div
-                  key={`${name}-header`}
-                  className="df-head"
-                  onClick={() => setOpen({ ...open, [name]: !open[name] })}
-                >
-                  {name}
-                </div>
-              )}
-              {(single || open[name]) &&
-                (df.data.length > 1 ? (
-                  <Table
-                    key={`${name}-table`}
-                    columns={df.columns}
-                    data={df.data}
-                  />
-                ) : df.data.length ? (
-                  <dl key={`${name}-dl`}>
-                    {df.columns.map((c: string, i: number) => (
-                      <React.Fragment key={`${name}-${c}`}>
-                        <dt>{c}</dt>
-                        <dd>
-                          <Markdown>{toMD(df.data[0][i])}</Markdown>
-                        </dd>
-                      </React.Fragment>
-                    ))}
-                  </dl>
-                ) : (
-                  JSON.stringify(df.data)
-                ))}
-            </React.Fragment>
-          ),
-        ),
+        dfs.map(([name, df]: [string, any]) => (
+          <React.Fragment key={name}>
+            {!single && (
+              <div
+                key={`${name}-header`}
+                className="df-head"
+                onClick={() => setOpen({ ...open, [name]: !open[name] })}
+              >
+                {name}
+              </div>
+            )}
+            {(single || open[name]) &&
+              (df.data.length > 1 ? (
+                <Table
+                  key={`${name}-table`}
+                  columns={df.columns}
+                  data={df.data}
+                />
+              ) : df.data.length ? (
+                <dl key={`${name}-dl`}>
+                  {df.columns.map((c: string, i: number) => (
+                    <React.Fragment key={`${name}-${c}`}>
+                      <dt>{c}</dt>
+                      <dd>
+                        <Markdown>{toMD(df.data[0][i])}</Markdown>
+                      </dd>
+                    </React.Fragment>
+                  ))}
+                </dl>
+              ) : (
+                JSON.stringify(df.data)
+              ))}
+          </React.Fragment>
+        )),
         Object.entries(display.others || {}).map(([name, o]) => (
           <>
             <div

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

@@ -7,6 +7,11 @@ test("LynxKite Graph Analytics example", async ({ page }) => {
   expect(await ws.isErrorFree(process.env.CI ? 2000 : 1000)).toBeTruthy();
 });
 
+test("Bio example", async ({ page }) => {
+  const ws = await Workspace.open(page, "Bio demo");
+  expect(await ws.isErrorFree()).toBeTruthy();
+});
+
 test("Pytorch example", async ({ page }) => {
   const ws = await Workspace.open(page, "PyTorch demo");
   expect(await ws.isErrorFree()).toBeTruthy();

lynxkite-app/web/tests/lynxkite.ts

@@ -113,7 +113,7 @@ export class Workspace {
     targetPosition?: { x: number; y: number },
   ) {
     // Move a box around, it is a best effort operation, the exact target position may not be reached
-    const box = await this.getBox(boxId).boundingBox();
+    const box = await this.getBox(boxId).locator(".title").boundingBox();
     if (!box) {
       return;
     }

lynxkite-core/pyproject.toml

@@ -10,4 +10,4 @@ dependencies = [
 [project.optional-dependencies]
 dev = [
     "pytest",
-]
+]

lynxkite-core/src/lynxkite/core/workspace.py

@@ -1,5 +1,6 @@
 """For working with LynxKite workspaces."""
 
+import json
 from typing import Optional
 import dataclasses
 import os
@@ -65,7 +66,8 @@ async def execute(ws: Workspace):
 
 def save(ws: Workspace, path: str):
     """Persist a workspace to a local file in JSON format."""
-    j = ws.model_dump_json(indent=2) + "\n"
+    j = ws.model_dump()
+    j = json.dumps(j, indent=2, sort_keys=True) + "\n"
     dirname, basename = os.path.split(path)
     os.makedirs(dirname, exist_ok=True)
     # Create temp file in the same directory to make sure it's on the same filesystem.

lynxkite-graph-analytics/src/lynxkite_graph_analytics/__init__.py

@@ -1,3 +1,3 @@
-from . import lynxkite_ops  # noqa (imported to trigger registration)
+from .lynxkite_ops import *  # noqa (imported to trigger registration)
 from . import networkx_ops  # noqa (imported to trigger registration)
 from . import pytorch_model_ops  # noqa (imported to trigger registration)

lynxkite-graph-analytics/src/lynxkite_graph_analytics/lynxkite_ops.py

@@ -83,12 +83,26 @@ class Bundle:
         # TODO: Use relations.
         graph = nx.DiGraph()
         if "nodes" in self.dfs:
-            graph.add_nodes_from(
-                self.dfs["nodes"].set_index("id").to_dict("index").items()
+            df = self.dfs["nodes"]
+            if df.index.name != "id":
+                df = df.set_index("id")
+            graph.add_nodes_from(df.to_dict("index").items())
+        if "edges" in self.dfs:
+            edges = self.dfs["edges"]
+            graph.add_edges_from(
+                [
+                    (
+                        e["source"],
+                        e["target"],
+                        {
+                            k: e[k]
+                            for k in edges.columns
+                            if k not in ["source", "target"]
+                        },
+                    )
+                    for e in edges.to_records()
+                ]
             )
-        graph.add_edges_from(
-            self.dfs["edges"][["source", "target"]].itertuples(index=False, name=None)
-        )
         return graph
 
     def copy(self):
@@ -104,7 +118,7 @@ class Bundle:
             "dataframes": {
                 name: {
                     "columns": [str(c) for c in df.columns],
-                    "data": collect(df)[:limit],
+                    "data": df_for_frontend(df, limit).values.tolist(),
                 }
                 for name, df in self.dfs.items()
             },
@@ -336,8 +350,14 @@ def _map_color(value):
 
 
 @op("Visualize graph", view="visualization")
-def visualize_graph(graph: Bundle, *, color_nodes_by: ops.NodeAttribute = None):
-    nodes = graph.dfs["nodes"].copy()
+def visualize_graph(
+    graph: Bundle,
+    *,
+    color_nodes_by: ops.NodeAttribute = None,
+    label_by: ops.NodeAttribute = None,
+    color_edges_by: ops.EdgeAttribute = None,
+):
+    nodes = df_for_frontend(graph.dfs["nodes"], 10_000)
     if color_nodes_by:
         nodes["color"] = _map_color(nodes[color_nodes_by])
     for cols in ["x y", "long lat"]:
@@ -367,15 +387,21 @@ def visualize_graph(graph: Bundle, *, color_nodes_by: ops.NodeAttribute = None):
         )
         curveness = 0.3
     nodes = nodes.to_records()
-    edges = graph.dfs["edges"].drop_duplicates(["source", "target"])
+    edges = df_for_frontend(
+        graph.dfs["edges"].drop_duplicates(["source", "target"]), 10_000
+    )
+    if color_edges_by:
+        edges["color"] = _map_color(edges[color_edges_by])
     edges = edges.to_records()
     v = {
         "animationDuration": 500,
         "animationEasingUpdate": "quinticInOut",
+        "tooltip": {"show": True},
         "series": [
             {
                 "type": "graph",
-                "roam": True,
+                # Mouse zoom/panning is disabled for now. It interacts badly with ReactFlow.
+                # "roam": True,
                 "lineStyle": {
                     "color": "gray",
                     "curveness": curveness,
@@ -386,6 +412,7 @@ def visualize_graph(graph: Bundle, *, color_nodes_by: ops.NodeAttribute = None):
                         "width": 10,
                     },
                 },
+                "label": {"position": "top", "formatter": "{b}"},
                 "data": [
                     {
                         "id": str(n.id),
@@ -394,11 +421,24 @@ def visualize_graph(graph: Bundle, *, color_nodes_by: ops.NodeAttribute = None):
                         # Adjust node size to cover the same area no matter how many nodes there are.
                         "symbolSize": 50 / len(nodes) ** 0.5,
                         "itemStyle": {"color": n.color} if color_nodes_by else {},
+                        "label": {"show": label_by is not None},
+                        "name": str(getattr(n, label_by, "")) if label_by else None,
+                        "value": str(getattr(n, color_nodes_by, ""))
+                        if color_nodes_by
+                        else None,
                     }
                     for n in nodes
                 ],
                 "links": [
-                    {"source": str(r.source), "target": str(r.target)} for r in edges
+                    {
+                        "source": str(r.source),
+                        "target": str(r.target),
+                        "lineStyle": {"color": r.color} if color_edges_by else {},
+                        "value": str(getattr(r, color_edges_by, ""))
+                        if color_edges_by
+                        else None,
+                    }
+                    for r in edges
                 ],
             },
         ],
@@ -406,12 +446,18 @@ def visualize_graph(graph: Bundle, *, color_nodes_by: ops.NodeAttribute = None):
     return v
 
 
-def collect(df: pd.DataFrame):
+def df_for_frontend(df: pd.DataFrame, limit: int) -> pd.DataFrame:
+    """Returns a DataFrame with values that are safe to send to the frontend."""
+    df = df[:limit]
     if isinstance(df, pl.LazyFrame):
         df = df.collect()
     if isinstance(df, pl.DataFrame):
-        return [[d[c] for c in df.columns] for d in df.to_dicts()]
-    return df.values.tolist()
+        df = df.to_pandas()
+    # Convert non-numeric columns to strings.
+    for c in df.columns:
+        if not pd.api.types.is_numeric_dtype(df[c]):
+            df[c] = df[c].astype(str)
+    return df
 
 
 @op("View tables", view="table_view")

lynxkite-graph-analytics/src/lynxkite_graph_analytics/pytorch_model_ops.py

@@ -72,4 +72,4 @@ ops.register_passive_op(
     inputs=[ops.Input(name="input", position="top", type="tensor")],
     outputs=[ops.Output(name="output", position="bottom", type="tensor")],
     params=[ops.Parameter.basic("times", 1, int)],
-)
+)