Skip to content

Commit

Permalink
set process option
Browse files Browse the repository at this point in the history
  • Loading branch information
@ankushKun
ankushKun committed May 21, 2024
1 parent 19a418d commit 170919a
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 23 deletions.
25 changes: 13 additions & 12 deletions next_app/src/components/ao/new-ao-project-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export function NewAOProjectDialog({ manager, collapsed }: { manager: ProjectMan
const [newProjName, setNewProjName] = useState("");
const [processUsed, setProcessUsed] = useState("");
const [newProcessName, setNewProcessName] = useState("");
const [defaultFiletype, setDefaultFiletype] = useState<"NORMAL" | "NOTEBOOK">("NORMAL");
const [defaultFiletype, setDefaultFiletype] = useState<"NORMAL" | "NOTEBOOK">("NOTEBOOK");
const [selectedTemplate, setSelectedTemplate] = useState("");
const [loadingProcess, setLoadingProcess] = useState(false);

Expand Down Expand Up @@ -165,33 +165,34 @@ export function NewAOProjectDialog({ manager, collapsed }: { manager: ProjectMan

<Combobox placeholder="Select Template" options={Object.keys(templates).map((key) => ({ label: key, value: key })).filter((e) => e.value != "")}
onChange={(e) => setSelectedTemplate(e)} onOpen={() => { }} />
<RadioGroup defaultValue="NORMAL" className="py-2" onValueChange={(e) => setDefaultFiletype(e as "NORMAL" | "NOTEBOOK")}>
<RadioGroup defaultValue="NOTEBOOK" className="py-2" onValueChange={(e) => setDefaultFiletype(e as "NORMAL" | "NOTEBOOK")}>
<div>
What type of files do you want to use? <span className="text-sm text-muted">(can be changed later)</span>
</div>

<div className="flex flex-col gap-2 items-center justify-center">
<div className="flex flex-row items-center gap-4 justify-between w-full">
<div className="flex flex-row gap-0 items-center justify-between w-full">
<div className="flex items-center space-x-2 p-2">
<RadioGroupItem value="NORMAL" id="option-one" />
<Label data-selected={defaultFiletype == "NORMAL"} className="data-[selected=true]:text-primary" htmlFor="option-one">
Regular
<RadioGroupItem value="NOTEBOOK" id="option-one" className="" />
<Label data-selected={defaultFiletype == "NOTEBOOK"} className="data-[selected=true]:text-primary" htmlFor="option-one">
Notebook
</Label>
</div>

<div className="text-sm col-span-2">Write code line by line - simple & efficient</div>
<div className="text-sm col-span-2 text-right">Split code in cells - For Rapid development and testing</div>
</div>

<div className="flex flex-row gap-0 items-center justify-between w-full">
<div className="flex flex-row items-center gap-4 justify-between w-full">
<div className="flex items-center space-x-2 p-2">
<RadioGroupItem value="NOTEBOOK" id="option-two" />
<Label data-selected={defaultFiletype == "NOTEBOOK"} className="data-[selected=true]:text-primary" htmlFor="option-two">
Notebook
<RadioGroupItem value="NORMAL" id="option-two" />
<Label data-selected={defaultFiletype == "NORMAL"} className="data-[selected=true]:text-primary" htmlFor="option-two">
Regular
</Label>
</div>

<div className="text-sm col-span-2 text-right">Split code in cells - For Rapid development and testing</div>
<div className="text-sm col-span-2">Write code line by line - simple & efficient</div>
</div>

</div>
</RadioGroup>

Expand Down
79 changes: 75 additions & 4 deletions next_app/src/components/settings-tab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,20 @@ import { Separator } from "./ui/separator";
import { Checkbox } from "./ui/checkbox";
import { Label } from "./ui/label";
import { ScrollArea } from "./ui/scroll-area";
import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
import { MoonIcon, ReloadIcon, SunIcon } from "@radix-ui/react-icons"
import { useTheme } from "next-themes"

import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Combobox } from "./ui/combo-box";
import { useEffect, useState } from "react";
import { GraphQLClient, gql } from "graphql-request";
import { spawnProcess } from "@/lib/ao-vars";
import { Icons } from "plotly.js";

function Title({ title }: { title: string }) {
return (
Expand All @@ -30,10 +34,65 @@ function Title({ title }: { title: string }) {
export default function SettingsTab() {
const manager = useProjectManager();
const globalState = useGlobalState();
const [processUsed, setProcessUsed] = useState("");
const { theme, setTheme } = useTheme()
const [processes, setProcesses] = useState([{ label: "+ Create New", value: "NEW_PROCESS" }]);
const [newProcessName, setNewProcessName] = useState("");
const [spawning, setSpawning] = useState(false);

const project = globalState.activeProject && manager.getProject(globalState.activeProject);


async function fetchProcesses() {
const client = new GraphQLClient("https://arweave.net/graphql");
const address = await window.arweaveWallet.getActiveAddress();

const query = gql`
query {
transactions(owners: "${address}", tags: [{ name: "Data-Protocol", values: ["ao"] }, { name: "Type", values: ["Process"] }]) {
edges {
node {
id
tags {
name
value
}
}
}
}
}
`;

const res: any = await client.request(query);

const ids = res.transactions.edges.map((edge: any) => ({
label: `${edge.node.tags[2].value} (${edge.node.id})`,
value: edge.node.id,
}));

setProcesses([{ label: "+ Create New", value: "NEW_PROCESS" }, ...ids]);
}

useEffect(() => {
fetchProcesses();
}, []);

async function setProcess() {
const p = manager.getProject(globalState.activeProject);
if (processUsed === "NEW_PROCESS") {
setSpawning(true);
const np = await spawnProcess(newProcessName, [
{ name: "File-Type", value: p.defaultFiletype == "NOTEBOOK" ? "Notebook" : "Normal" }
]);
manager.setProjectProcess(p, np);
setSpawning(false);
} else {
manager.setProjectProcess(p, processUsed);
}
setNewProcessName("");
setProcessUsed("");
}

return (
<ScrollArea className="w-full h-full">
<div className="h-full w-full p-8 max-w-4xl mx-auto">
Expand All @@ -42,13 +101,25 @@ export default function SettingsTab() {
</div> */}

<Title title="CURRENT PROJECT" />
<div className="my-8 grid grid-cols-3">
<div className="my-8 grid grid-cols-3 items-center">
<div>Owner Wallet</div>
<div className="col-span-2">{project.ownerWallet || "NA"}</div>
<div>Process</div>
<div>Current Process</div>
<div className="col-span-2">{project.process || "NA"}</div>
<div>Default Filetype</div>
<div className="col-span-2">{project.defaultFiletype || "NA"}</div>
<div className="col-span-3 h-5"></div>
<div>Change Process</div>
<div className="col-span-2 flex flex-col gap-1 items-center">
<Combobox placeholder="Select Process" disabled={spawning} options={processes} onChange={(e) => setProcessUsed(e)} onOpen={fetchProcesses} />
{processUsed == "NEW_PROCESS" && <Input disabled={spawning} type="text" placeholder="Enter new process name" className="w-[83%]" onChange={(e) => { setNewProcessName(e.target.value) }} />}
<Button size="sm" disabled={
processUsed === "" || (processUsed === "NEW_PROCESS" && newProcessName === "") || spawning
} onClick={setProcess}>
{spawning && <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />}
Confirm
</Button>
</div>
</div>

<Title title="GLOBAL" />
Expand Down
4 changes: 2 additions & 2 deletions next_app/src/components/ui/combo-box.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";

export function Combobox({ placeholder, options, onChange, onOpen }: { placeholder: string, options: { label: string; value: string }[]; onChange: (val: string) => void; onOpen: () => void }) {
export function Combobox({ placeholder, options, onChange, onOpen, disabled = false }: { placeholder: string, options: { label: string; value: string }[]; onChange: (val: string) => void; onOpen: () => void; disabled?: boolean }) {
const [open, setOpen] = React.useState(false);
const [value, setValue] = React.useState("");

Expand All @@ -18,7 +18,7 @@ export function Combobox({ placeholder, options, onChange, onOpen }: { placehold
onOpen();
}}
>
<PopoverTrigger asChild>
<PopoverTrigger asChild disabled={disabled}>
<Button variant="outline" role="combobox" aria-expanded={open} className="w-[460px] mx-auto overflow-clip truncate justify-between">
{value ? value : placeholder}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
Expand Down
14 changes: 9 additions & 5 deletions next_app/src/pages/codecell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Ansi from "ansi-to-react";
import { toast } from "sonner"
import { useSearchParams } from "next/navigation";
import { GraphQLClient, gql } from "graphql-request";
import { useTheme } from "next-themes";

export default function CodeCell() {
const searchParams = useSearchParams();
Expand All @@ -22,6 +23,7 @@ export default function CodeCell() {
const [code, setCode] = useState<string>('print("Hello AO!")');
const [output, setOutput] = useState<string>("");
const [appname, setAppname] = useState<string>("");
const { theme } = useTheme();

console.log("autoconn", autoconnect)

Expand Down Expand Up @@ -175,13 +177,13 @@ export default function CodeCell() {
}, [aosProcess, code, appname])

const Loader = () => {
return <div className="absolute top-0 left-0 w-full h-full bg-btr-grey-3 z-50 flex justify-center items-center" suppressHydrationWarning>
<div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-btr-green" suppressHydrationWarning></div>
return <div className="absolute top-0 left-0 w-full h-full z-50 flex justify-center items-center" suppressHydrationWarning>
<div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-primary" suppressHydrationWarning></div>
</div>
}

return <div suppressHydrationWarning
className="relative h-screen w-screen overflow-clip flex flex-col justify-start p-0 bg-btr-grey-3"
className="relative h-screen w-screen overflow-clip flex flex-col justify-start p-0 "
>
{autoconnect == undefined && <Loader />}
{aosProcess ? <><div suppressHydrationWarning className="flex w-full h-full relative justify-start rounded-t-md border-b border-btr-grey-2/70 min-h-[69px] p-0 m-0">
Expand All @@ -197,7 +199,7 @@ export default function CodeCell() {
data-running={running}
width={30}
height={30}
className="data-[running=true]:animate-spin"
className="data-[running=true]:animate-spin data-[running=true]:bg-black rounded-full"
/>
</Button>
<Editor
Expand All @@ -206,7 +208,9 @@ export default function CodeCell() {
"notebook",
notebookTheme as editor.IStandaloneThemeData
);
monaco.editor.setTheme("notebook");
// monaco.editor.setTheme("notebook");
if (theme == "dark") monaco.editor.setTheme("notebook");
else monaco.editor.setTheme("vs-light");
// set font family
editor.updateOptions({ fontFamily: "DM mono" });
}}
Expand Down

0 comments on commit 170919a

Please sign in to comment.