Merge pull request #135 from biggraph/darabos-monaco

examples/matplotlib_example.py

@@ -0,0 +1,34 @@
+# From https://matplotlib.org/stable/gallery/images_contours_and_fields/contour_corner_mask.html
+import matplotlib.pyplot as plt
+import numpy as np
+from lynxkite.core.ops import op
+
+
+@op("LynxKite Graph Analytics", "Matplotlib example", view="matplotlib")
+def example():
+    # Data to plot.
+    x, y = np.meshgrid(np.arange(7), np.arange(10))
+    z = np.sin(0.5 * x) * np.cos(0.52 * y)
+
+    # Mask various z values.
+    mask = np.zeros_like(z, dtype=bool)
+    mask[2, 3:5] = True
+    mask[3:5, 4] = True
+    mask[7, 2] = True
+    mask[5, 0] = True
+    mask[0, 6] = True
+    z = np.ma.array(z, mask=mask)
+    print(z)
+
+    corner_masks = [False, True]
+    fig, axs = plt.subplots(ncols=2)
+    for ax, corner_mask in zip(axs, corner_masks):
+        cs = ax.contourf(x, y, z, corner_mask=corner_mask)
+        ax.contour(cs, colors="k")
+        ax.set_title(f"{corner_mask=}")
+
+        # Plot grid.
+        ax.grid(c="k", ls="-", alpha=0.3)
+
+        # Indicate masked points with red circles.
+        ax.plot(np.ma.array(x, mask=~mask), y, "ro")

examples/requirements.txt

@@ -1,2 +1,3 @@
 # Example of a requirements.txt file. LynxKite will automatically install anything you put here.
 faker
+matplotlib

lynxkite-app/web/src/Code.tsx

@@ -3,7 +3,7 @@
 import Editor, { type Monaco } from "@monaco-editor/react";
 import type { editor } from "monaco-editor";
 import { useEffect, useRef } from "react";
-import { useParams } from "react-router";
+import { Link, useParams } from "react-router";
 import { WebsocketProvider } from "y-websocket";
 import * as Y from "yjs";
 // @ts-ignore
@@ -22,9 +22,12 @@ export default function Code() {
   const wsProviderRef = useRef<any>();
   const monacoBindingRef = useRef<any>();
   const yMonacoRef = useRef<any>();
+  const yMonacoLoadingRef = useRef(false);
   const editorRef = useRef<any>();
   useEffect(() => {
     const loadMonaco = async () => {
+      if (yMonacoLoadingRef.current) return;
+      yMonacoLoadingRef.current = true;
       // y-monaco is gigantic. The other Monaco packages are small.
       yMonacoRef.current = await import("y-monaco");
       initCRDT();
@@ -34,7 +37,9 @@ export default function Code() {
   function beforeMount(monaco: Monaco) {
     monaco.editor.defineTheme("lynxkite", theme);
   }
-  function onMount(_editor: editor.IStandaloneCodeEditor) {
+  function onMount(_editor: editor.IStandaloneCodeEditor, monaco: Monaco) {
+    // Do nothing on Ctrl+S. We save after every keypress anyway.
+    _editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {});
     editorRef.current = _editor;
     initCRDT();
   }
@@ -66,9 +71,9 @@ export default function Code() {
   return (
     <div className="workspace">
       <div className="top-bar bg-neutral">
-        <a className="logo" href="">
+        <Link className="logo" to="">
           <img alt="" src={favicon} />
-        </a>
+        </Link>
         <div className="ws-name">{path}</div>
         <div className="tools text-secondary">
           <button className="btn btn-link">
@@ -77,9 +82,9 @@ export default function Code() {
           <button className="btn btn-link">
             <Backspace />
           </button>
-          <a href={`/dir/${parentDir}`} className="btn btn-link">
+          <Link to={`/dir/${parentDir}`} className="btn btn-link">
             <Close />
-          </a>
+          </Link>
         </div>
       </div>
       <Editor

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

@@ -222,13 +222,17 @@ def op(env: str, name: str, *, view="basic", outputs=None, params=None, slow=Fal
             _outputs = {name: Output(name=name, type=None) for name in outputs}
         else:
             _outputs = {"output": Output(name="output", type=None)} if view == "basic" else {}
+        _view = view
+        if view == "matplotlib":
+            _view = "image"
+            func = matplotlib_to_image(func)
         op = Op(
             func=func,
             name=name,
             params=_params,
             inputs=inputs,
             outputs=_outputs,
-            type=view,
+            type=_view,
         )
         CATALOGS.setdefault(env, {})
         CATALOGS[env][name] = op
@@ -238,6 +242,24 @@ def op(env: str, name: str, *, view="basic", outputs=None, params=None, slow=Fal
     return decorator
 
 
+def matplotlib_to_image(func):
+    import matplotlib.pyplot as plt
+    import base64
+    import io
+
+    @functools.wraps(func)
+    def wrapper(*args, **kwargs):
+        func(*args, **kwargs)
+        buf = io.BytesIO()
+        plt.savefig(buf, format="png")
+        plt.close()
+        buf.seek(0)
+        image_base64 = base64.b64encode(buf.read()).decode("utf-8")
+        return f"data:image/png;base64,{image_base64}"
+
+    return wrapper
+
+
 def input_position(**kwargs):
     """Decorator for specifying unusual positions for the inputs."""