Code editor. (Not saving edits yet.)

examples/word2vec.py

@@ -2,8 +2,10 @@ from lynxkite.core.ops import op
 import staticvectors
 import pandas as pd
 
+ENV = "LynxKite Graph Analytics"
 
-@op("LynxKite Graph Analytics", "Word2vec for the top 1000 words", cache=True)
+
+@op(ENV, "Word2vec for the top 1000 words", cache=True)
 def word2vec_1000():
     model = staticvectors.StaticVectors("neuml/word2vec-quantized")
     with open("wordlist.txt") as f:
@@ -17,6 +19,6 @@ def word2vec_1000():
     return df
 
 
-@op("LynxKite Graph Analytics", "Take first N")
+@op(ENV, "Take first N")
 def first_n(df: pd.DataFrame, *, n=10):
     return df.head(n)

lynxkite-app/src/lynxkite_app/main.py

@@ -39,6 +39,15 @@ def get_catalog(workspace: str):
     return {k: {op.name: op.model_dump() for op in v.values()} for k, v in ops.CATALOGS.items()}
 
 
+@app.get("/api/getCode")
+def get_code(path: str):
+    path = data_path / path
+    assert path.is_relative_to(data_path)
+    with open(path) as f:
+        code = f.read()
+    return {"code": code}
+
+
 class SaveRequest(workspace.BaseConfig):
     path: str
     ws: workspace.Workspace

lynxkite-app/web/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@esbuild/linux-x64": "^0.25.0",
         "@iconify-json/tabler": "^1.2.10",
+        "@monaco-editor/react": "^4.7.0",
         "@svgr/core": "^8.1.0",
         "@svgr/plugin-jsx": "^8.1.0",
         "@swc/core": "^1.10.1",
@@ -1105,6 +1106,29 @@
       "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==",
       "license": "MIT"
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.5.0.tgz",
+      "integrity": "sha512-hKoGSM+7aAc7eRTRjpqAZucPmoNOC4UUbknb/VNoTkEIkCPhqV8LfbsgM1webRM7S/z21eHEx9Fkwx8Z/C/+Xw==",
+      "license": "MIT",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
+      "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.5.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -5436,6 +5460,13 @@
         "ufo": "^1.5.4"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.52.2",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz",
+      "integrity": "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -6437,6 +6468,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "license": "MIT"
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",

lynxkite-app/web/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@esbuild/linux-x64": "^0.25.0",
     "@iconify-json/tabler": "^1.2.10",
+    "@monaco-editor/react": "^4.7.0",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@swc/core": "^1.10.1",

lynxkite-app/web/src/Code.tsx

@@ -0,0 +1,74 @@
+// Full-page editor for code files.
+
+import Editor from "@monaco-editor/react";
+import { loader } from "@monaco-editor/react";
+import { useEffect } from "react";
+import { useParams } from "react-router";
+import useSWR, { type Fetcher } from "swr";
+// @ts-ignore
+import Atom from "~icons/tabler/atom.jsx";
+// @ts-ignore
+import Backspace from "~icons/tabler/backspace.jsx";
+// @ts-ignore
+import Close from "~icons/tabler/x.jsx";
+import favicon from "./assets/favicon.ico";
+import theme from "./code-theme.ts";
+
+export default function Code() {
+  useEffect(() => {
+    const initMonaco = async () => {
+      const monaco = await loader.init();
+      monaco.editor.defineTheme("lynxkite", theme);
+    };
+    initMonaco();
+  }, []);
+  const { path } = useParams();
+  const parentDir = path!.split("/").slice(0, -1).join("/");
+  const fetcher: Fetcher<{ code: string }> = (resource: string, init?: RequestInit) =>
+    fetch(resource, init).then((res) => res.json());
+  const code = useSWR(`/api/getCode?path=${path}`, fetcher);
+  return (
+    <div className="workspace">
+      <div className="top-bar bg-neutral">
+        <a className="logo" href="">
+          <img alt="" src={favicon} />
+        </a>
+        <div className="ws-name">{path}</div>
+        <div className="tools text-secondary">
+          <a href="">
+            <Atom />
+          </a>
+          <a href="">
+            <Backspace />
+          </a>
+          <a href={`/dir/${parentDir}`}>
+            <Close />
+          </a>
+        </div>
+      </div>
+      {code.isLoading && (
+        <div className="loading">
+          <div className="loading-text">Loading...</div>
+        </div>
+      )}
+      {code.error && (
+        <div className="error">
+          <div className="error-text">Error: {code.error}</div>
+        </div>
+      )}
+      {code.data && (
+        <Editor
+          defaultLanguage="python"
+          defaultValue={code.data.code}
+          theme="lynxkite"
+          options={{
+            cursorStyle: "block",
+            cursorBlinking: "solid",
+            minimap: { enabled: false },
+            renderLineHighlight: "none",
+          }}
+        />
+      )}
+    </div>
+  );
+}

lynxkite-app/web/src/code-theme.ts

@@ -0,0 +1,38 @@
+// A simple theme using the LynxKite colors.
+
+import type { editor } from "monaco-editor/esm/vs/editor/editor.api";
+
+const theme: editor.IStandaloneThemeData = {
+  base: "vs-dark",
+  inherit: true,
+  rules: [
+    {
+      foreground: "ff8800",
+      token: "keyword",
+    },
+    {
+      foreground: "0088ff",
+      fontStyle: "italic",
+      token: "comment",
+    },
+    {
+      foreground: "39bcf3",
+      token: "string",
+    },
+    {
+      foreground: "ffc600",
+      token: "",
+    },
+  ],
+  colors: {
+    "editor.foreground": "#FFFFFF",
+    "editor.background": "#002a4c",
+    "editor.selectionBackground": "#0050a4",
+    "editor.lineHighlightBackground": "#1f4662",
+    "editorCursor.foreground": "#ffc600",
+    "editorWhitespace.foreground": "#7f7f7fb2",
+    "editorIndentGuide.background": "#3b5364",
+    "editorIndentGuide.activeBackground": "#ffc600",
+  },
+};
+export default theme;

lynxkite-app/web/src/main.tsx

@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
 import "@xyflow/react/dist/style.css";
 import "./index.css";
 import { BrowserRouter, Route, Routes } from "react-router";
+import Code from "./Code.tsx";
 import Directory from "./Directory.tsx";
 import Workspace from "./workspace/Workspace.tsx";
 
@@ -14,6 +15,7 @@ createRoot(document.getElementById("root")!).render(
         <Route path="/dir" element={<Directory />} />
         <Route path="/dir/:path" element={<Directory />} />
         <Route path="/edit/:path" element={<Workspace />} />
+        <Route path="/code/:path" element={<Code />} />
       </Routes>
     </BrowserRouter>
   </StrictMode>,

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

@@ -1,3 +1,5 @@
+// The LynxKite workspace editor.
+
 import { getYjsDoc, syncedStore } from "@syncedstore/core";
 import {
   type Connection,
@@ -16,7 +18,6 @@ import {
 } from "@xyflow/react";
 import axios from "axios";
 import { type MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
-// The LynxKite workspace editor.
 import { useParams } from "react-router";
 import useSWR, { type Fetcher } from "swr";
 import { WebsocketProvider } from "y-websocket";