Show docstrings on UI.

examples/fake_data.py

@@ -7,6 +7,11 @@ faker = Faker()
 
 @op("LynxKite Graph Analytics", "Fake data")
 def fake(*, n=10):
+    """Creates a DataFrame with random-generated names and postal addresses.
+
+    Parameters:
+        n: Number of rows to create.
+    """
     df = pd.DataFrame(
         {
             "name": [faker.name() for _ in range(n)],

lynxkite-app/web/src/index.css

@@ -91,10 +91,19 @@ body {
       display: flex;
       flex-direction: column;
     }
+
+    .node-documentation {
+      padding: 8px;
+      border-radius: 4px;
+      background: #fffa;
+      box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.1);
+      backdrop-filter: blur(10px);
+      font-size: 12px;
+      font-weight: initial;
+    }
   }
 
   .expanded .lynxkite-node {
-    overflow-y: auto;
     height: 100%;
   }
 

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

@@ -1,8 +1,16 @@
 import { Handle, NodeResizeControl, type Position, useReactFlow } from "@xyflow/react";
+import type React from "react";
 import { ErrorBoundary } from "react-error-boundary";
+import Markdown from "react-markdown";
+// @ts-ignore
+import AlertTriangle from "~icons/tabler/alert-triangle-filled.jsx";
 // @ts-ignore
 import ChevronDownRight from "~icons/tabler/chevron-down-right.jsx";
 // @ts-ignore
+import Dots from "~icons/tabler/dots.jsx";
+// @ts-ignore
+import Help from "~icons/tabler/help.jsx";
+// @ts-ignore
 import Skull from "~icons/tabler/skull.jsx";
 
 interface LynxKiteNodeProps {
@@ -82,8 +90,17 @@ function LynxKiteNodeComponent(props: LynxKiteNodeProps) {
           onClick={titleClicked}
         >
           {data.title}
-          {data.error && <span className="title-icon">⚠️</span>}
-          {expanded || <span className="title-icon">⋯</span>}
+          {data.error && (
+            <span className="title-icon">
+              <AlertTriangle />
+            </span>
+          )}
+          {expanded || (
+            <span className="title-icon">
+              <Dots />
+            </span>
+          )}
+          <NodeDocumentation doc={data.meta?.value?.doc} width={props.width - 60} />
         </div>
         {expanded && (
           <>
@@ -137,3 +154,19 @@ export default function LynxKiteNode(Component: React.ComponentType<any>) {
     );
   };
 }
+
+function NodeDocumentation(props: any) {
+  if (!props.doc) return null;
+  return (
+    <div className="dropdown dropdown-hover dropdown-top dropdown-end title-icon">
+      <button tabIndex={0}>
+        <Help />
+      </button>
+      <div className="node-documentation dropdown-content" style={{ width: props.width }}>
+        {props.doc.map(
+          (section: any) => section.kind === "text" && <Markdown>{section.value}</Markdown>,
+        )}
+      </div>
+    </div>
+  );
+}

lynxkite-core/src/lynxkite/core/ops.py

@@ -1,19 +1,23 @@
 """API for implementing LynxKite operations."""
 
 from __future__ import annotations
+
 import asyncio
 import enum
 import functools
+import json
+import griffe
 import importlib
 import inspect
 import pathlib
 import subprocess
 import traceback
-import joblib
 import types
-import pydantic
 import typing
 from dataclasses import dataclass
+
+import joblib
+import pydantic
 from typing_extensions import Annotated
 
 if typing.TYPE_CHECKING:
@@ -180,6 +184,7 @@ class Op(BaseConfig):
     # TODO: Make type an enum with the possible values.
     type: str = "basic"  # The UI to use for this operation.
     color: str = "orange"  # The color of the operation in the UI.
+    doc: object = None
 
     def __call__(self, *inputs, **params):
         # Convert parameters.
@@ -236,6 +241,7 @@ def op(
     """Decorator for defining an operation."""
 
     def decorator(func):
+        doc = get_doc(func)
         sig = inspect.signature(func)
         _view = view
         if view == "matplotlib":
@@ -262,6 +268,7 @@ def op(
             _outputs = [Output(name="output", type=None)] if view == "basic" else []
         op = Op(
             func=func,
+            doc=doc,
             name=name,
             params=_params,
             inputs=inputs,
@@ -279,10 +286,11 @@ def op(
 
 def matplotlib_to_image(func):
     """Decorator for converting a matplotlib figure to an image."""
-    import matplotlib.pyplot as plt
     import base64
     import io
 
+    import matplotlib.pyplot as plt
+
     @functools.wraps(func)
     def wrapper(*args, **kwargs):
         func(*args, **kwargs)
@@ -423,3 +431,10 @@ def run_user_script(script_path: pathlib.Path):
     spec = importlib.util.spec_from_file_location(script_path.stem, str(script_path))
     module = importlib.util.module_from_spec(spec)
     spec.loader.exec_module(module)
+
+
+def get_doc(func):
+    if func.__doc__ is None:
+        return None
+    doc = griffe.Docstring(func.__doc__).parse("google")
+    return json.loads(json.dumps(doc, cls=griffe.JSONEncoder))

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

@@ -8,7 +8,6 @@ from collections import deque
 
 from . import core
 import grandcypher
-import joblib
 import matplotlib
 import networkx as nx
 import pandas as pd
@@ -16,7 +15,6 @@ import polars as pl
 import json
 
 
-mem = joblib.Memory(".joblib-cache")
 op = ops.op_registration(core.ENV)
 
 
@@ -82,8 +80,7 @@ def import_parquet(*, filename: str):
     return pd.read_parquet(filename)
 
 
-@op("Import CSV")
-@mem.cache
+@op("Import CSV", slow=True)
 def import_csv(*, filename: str, columns: str = "<from file>", separator: str = "<auto>"):
     """Imports a CSV file."""
     return pd.read_csv(
@@ -93,8 +90,7 @@ def import_csv(*, filename: str, columns: str = "<from file>", separator: str =
     )
 
 
-@op("Import GraphML")
-@mem.cache
+@op("Import GraphML", slow=True)
 def import_graphml(*, filename: str):
     """Imports a GraphML file."""
     files = fsspec.open_files(filename, compression="infer")
@@ -105,8 +101,7 @@ def import_graphml(*, filename: str):
     raise ValueError(f"No .graphml file found at {filename}")
 
 
-@op("Graph from OSM")
-@mem.cache
+@op("Graph from OSM", slow=True)
 def import_osm(*, location: str):
     import osmnx as ox