modules

next_app/src/assets/icons/index.ts

@@ -12,6 +12,7 @@ import collapseSVG from "./collapse.svg";
 import blueprintSVG from "./blueprint.svg";
 import tickSVG from "./tick.svg";
 import editSVG from "./edit.svg";
+import moduleSVG from "./module.svg";
 
-const Icons = { downloadSVG, mailSVG, sendSVG, folderSVG, newProjectSVG, runSVG, disconnectSVG, settingsSVG, deleteSVG, loadingSVG, collapseSVG, blueprintSVG, tickSVG, editSVG };
+const Icons = { downloadSVG, mailSVG, sendSVG, folderSVG, newProjectSVG, runSVG, disconnectSVG, settingsSVG, deleteSVG, loadingSVG, collapseSVG, blueprintSVG, tickSVG, editSVG, moduleSVG };
 export default Icons;

next_app/src/components/ao/modules.tsx

@@ -0,0 +1,85 @@
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import Icons from "@/assets/icons";
+import { useGlobalState } from "@/states";
+import { toast } from "../ui/use-toast";
+import { useState } from "react";
+import { Combobox } from "../ui/combo-box";
+import { useProjectManager } from "@/hooks";
+import { runLua, parseOutupt } from "@/lib/ao-vars";
+import { ReloadIcon } from "@radix-ui/react-icons"
+
+import { source as graphSource } from "@/modules/ao/graph";
+
+const modules = [
+    "graph.lua"
+]
+
+export default function Modules() {
+    const globalState = useGlobalState();
+    const projectManager = useProjectManager();
+    const [open, setOpen] = useState(false);
+    const [code, setCode] = useState("");
+    const [loading, setLoading] = useState(false);
+
+    return <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger onClick={(e) => {
+            e.preventDefault();
+            setCode("");
+            if (!globalState.activeProject) return toast({ title: "No active project", description: "You need to have an active project to use Modules" });
+            if (globalState.activeMode != "AO") return toast({ title: "Not in AO mode", description: "Modules only work in AO" });
+            const project = projectManager.getProject(globalState.activeProject);
+            if (!project) return toast({ title: "Project not found", description: "The active project was not found" });
+            if (!project.process) return toast({ title: "Process id missing", description: "The active project doesnot seem to have a process id" });
+            setOpen(true);
+        }}>
+            <Button variant="link" className="p-2 h-10">
+                <Image src={Icons.moduleSVG} alt="Modules" width={25} height={25} />
+            </Button>
+        </DialogTrigger>
+        <DialogContent className="">
+            <DialogHeader>
+                <DialogTitle>Load a Module</DialogTitle>
+                <DialogDescription>
+                    Modules are tools that allow you to add extra functionality to AO through this IDE.
+                </DialogDescription>
+            </DialogHeader>
+            <div className="flex flex-col gap-3 items-center justify-center">
+                <Combobox
+                    placeholder="Select a module"
+                    options={modules.map((m) => ({ label: m, value: m }))}
+                    onChange={async (val) => {
+                        console.log(val);
+                        switch (val) {
+                            case "graph.lua":
+                                setCode(graphSource);
+                                break;
+                            default:
+                                setCode("");
+                        }
+                    }}
+                    onOpen={() => { }}
+                />
+                <pre className="w-full max-w-[450px] text-xs h-[300px] overflow-scroll ring-1 ring-btr-grey-2 rounded-md p-1">
+                    {code}
+                </pre>
+                <Button disabled={loading} onClick={async () => {
+                    setLoading(true);
+                    const project = projectManager.getProject(globalState.activeProject);
+                    const res = await runLua(code, project.process, [
+                        { name: "BetterIDEa-Function", value: "load-module" }
+                    ]);
+                    console.log(res);
+                    const output = parseOutupt(res);
+                    console.log(output);
+                    setLoading(false);
+                    setOpen(false);
+                }}>
+                    {loading && <ReloadIcon className="animate-spin mr-2" />}
+                    Load
+                </Button>
+            </div>
+        </DialogContent>
+    </Dialog>
+}

next_app/src/components/layout.tsx

@@ -114,6 +114,7 @@ const CodeCell = ({
           const parsedData = JSON.parse(outputData.output);
           setShowGfx(parsedData.__render_gfx);
           fileContent.cells[cellId].output = parsedData;
+          console.log(fileContent.cells[cellId].output)
         }
         catch {
           setShowGfx(false);
@@ -205,7 +206,7 @@ const CodeCell = ({
           options={monacoConfig.CodeCell}
         />
       </div>
-      {showGfx ? <div className="relative w-full flex items-center justify-center">
+      {cell.output.__render_gfx ? <div className="relative w-full flex items-center justify-center">
         <Plot className={"rounded-lg mx-auto"} data={cell.output.data}
           layout={{
             ...cell.output.layout,

next_app/src/components/top-bar.tsx

@@ -8,6 +8,7 @@ import Link from "next/link";
 import { toast } from "./ui/use-toast";
 import { useState } from "react";
 import Blueprints from "./ao/blueprints";
+import Modules from "./ao/modules";
 
 export default function TopBar() {
   const router = useRouter();
@@ -40,8 +41,11 @@ export default function TopBar() {
 
       <div className="flex gap-1 items-center">
         {globalState.activeMode == "AO"
-          && globalState.activeProject &&
-          <Blueprints />}
+          && globalState.activeProject && <>
+            <Modules />
+            <Blueprints />
+          </>
+        }
 
         {/* <Button variant="link" className="p-2 h-7 hover:invert">
           <Image src={Icons.mailSVG} alt="Inbox" width={15} height={15} />

next_app/src/modules/ao/graph.ts

@@ -0,0 +1,64 @@
+export const source = `function NewGraph(options)
+    local graph = {
+        data = {
+
+        },
+        layout = {
+            title = "Simple Graph",
+            xaxis = { title = "x-axis" },
+            yaxis = { title = "y-axis" }
+        }
+    }
+    return graph
+end
+
+function SetTitle(graph, title)
+    graph.layout.title = title
+end
+
+function SetXAxisTitle(graph, title)
+    graph.layout.xaxis.title = title
+end
+
+function SetYAxisTitle(graph, title)
+    graph.layout.yaxis.title = title
+end
+
+function AddLine(graph, x1, y1, x2, y2, color)
+    if type(x1) ~= "number" or type(y1) ~= "number" or type(x2) ~= "number" or type(y2) ~= "number" then
+        error("x1, y1, x2, y2 must be integers")
+    end
+    local data = {
+        x = { x1, x2 },
+        y = { y1, y2 },
+        type = "scatter",
+        mode = "lines"
+    }
+    if color then
+        data.line = { color = color }
+    end
+    table.insert(graph.data, data)
+end
+
+function AddPoint(graph, x, y, color)
+    if type(x) ~= "number" or type(y) ~= "number" then
+        error("x and y must be integers")
+    end
+    local data = {
+        x = {x},
+        y = {y},
+        type = "scatter"
+    }
+    if color then
+        data.marker = { color = color }
+    end
+    table.insert(graph.data, data)
+end
+
+function ShowGraph(graph)
+    local json = require("json")
+    local x = graph
+    x.__render_gfx = true
+    return json.encode(x)
+end
+`