Skip to content

Commit

Permalink
wip(spu-ui): queue and experiment refactor
Browse files Browse the repository at this point in the history 
changes to kanban-like styled queue, still have to integrate the tray and console to experiment and clean up the queue components
  • Loading branch information
@matyson
matyson committed Dec 4, 2024
1 parent 3e0f0a5 commit e19aab6
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 85 deletions.
53 changes: 8 additions & 45 deletions apps/spu-ui/src/app/_components/experiment.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
"use client";

import type {
DragEndEvent,
DragStartEvent,
UniqueIdentifier,
} from "@dnd-kit/core";
import { useCallback, useState } from "react";
import { DndContext, DragOverlay } from "@dnd-kit/core";
import { Trash2Icon, UploadIcon } from "lucide-react";
import { Button } from "@sophys-web/ui/button";
import { toast } from "@sophys-web/ui/sonner";
Expand All @@ -22,6 +16,7 @@ import {
setSamples as setServerSamples,
} from "../actions/samples";
import { Console } from "./console";
import { ControlPlane } from "./control-plane";
import { Queue } from "./queue";
import { SampleItem } from "./sample";
import { Tray } from "./tray";
Expand All @@ -47,10 +42,9 @@ export default function Experiment({
const [samples] = useSSEData("/api/samples", {
initialData: initialSamples,
});
const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);

const addToQueue = useCallback(
async (sampleIds: UniqueIdentifier[]) => {
async (sampleIds: (string | number)[]) => {
sampleIds.forEach(async (id) => {
const sample = samples.find((s) => s.id === id);
if (!sample) {
Expand Down Expand Up @@ -118,25 +112,11 @@ export default function Experiment({
await setServerSamples(updatedSamples);
};

const handleDragStart = (event: DragStartEvent) => {
const { active } = event;
setActiveId(active.id);
};

const handleDragEnd = async (event: DragEndEvent) => {
const { over } = event;

if (over && over.id === "queue-dropzone") {
await addToQueue([activeId ?? 0]);
}

setActiveId(null);
};

return (
<DndContext onDragEnd={handleDragEnd} onDragStart={handleDragStart}>
<div className="flex h-screen flex-col items-center gap-4 pt-4">
<ControlPlane />
<div className="flex h-[calc(100vh-64px)] items-start justify-center gap-4 px-4 pt-4">
<Tabs className="space-y-2" defaultValue="tray1">
{/* <Tabs className="space-y-2" defaultValue="tray1">
<TabsContent value="tray1">
<Tray
activeId={activeId}
Expand All @@ -163,26 +143,9 @@ export default function Experiment({
Clear Samples
</Button>
</div>
</Tabs>
<div className="flex flex-col gap-4">
<Queue />
<Console />
</div>
</Tabs> */}
<Queue />
</div>
<DragOverlay>
{activeId ? (
<SampleItem
isDragging
sample={
samples.find((s) => s.id === activeId) ?? {
id: activeId,
relativePosition: "",
type: null,
}
}
/>
) : null}
</DragOverlay>
</DndContext>
</div>
);
}
67 changes: 27 additions & 40 deletions apps/spu-ui/src/app/_components/queue.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ function RunningItem({ props }: { props: QueueItemProps }) {
return <UnknownItem props={props} status="running" />;
}
return (
<Card className="relative border border-sky-500 bg-sky-50">
<Card className="relative">
<CardHeader>
<CardTitle className="flex items-center gap-4">
<span>{props?.name}</span>
Expand Down Expand Up @@ -185,9 +185,6 @@ function RunningItem({ props }: { props: QueueItemProps }) {
</Badge>
<Badge variant="default">{planParams.sampleTag}</Badge>
</div>
{/* <div className="absolute right-1 top-1 flex gap-2">
<RemoveButton uid={props?.itemUid} />
</div> */}
</CardContent>
</Card>
);
Expand Down Expand Up @@ -298,9 +295,9 @@ function QueueSkeleton() {
function QueueCounter() {
const { queue } = useQueue();
return (
<div className="flex items-center rounded-md border border-sky-500 bg-sky-200 p-1 text-sky-700">
<span className="mr-2 font-medium uppercase">On Queue</span>
<span className="rounded-md border border-sky-500 bg-sky-100 px-1 font-bold">
<div className="flex items-center justify-center rounded-md border border-muted bg-slate-50 p-1 text-center text-muted-foreground">
<span className="mr-2 font-medium">Queue</span>
<span className="rounded-md border-none bg-slate-200 px-2 font-bold">
{queue.data?.items.length}
</span>
</div>
Expand All @@ -318,45 +315,37 @@ export function Queue() {
}

return (
<div className="flex">
<Dropzone id="queue-dropzone">
<div className="flex flex-col gap-2">
<QueueControls />
<ScrollArea className="relative flex h-[calc(100vh-350px)] flex-col">
{isEmpty ? (
<p className="text-center text-muted-foreground">
Queue is empty. Drag samples here to add them to the queue.
</p>
) : (
<ul className="space-y-2">
{queue.data?.items.map((item) => (
<QueueItem key={item.itemUid} props={item} />
))}
</ul>
)}
</ScrollArea>
</div>
</Dropzone>
<div className="flex h-fit flex-col gap-1 px-4">
<div className="flex items-center justify-between gap-2">
<div className="flex w-full items-center justify-center rounded-lg border border-sky-500 bg-sky-200 p-1 text-sky-700">
<span className="mr-2 font-medium uppercase">
{status.data?.reState}
</span>
<Spinner />
</div>
<RunEngineControls />
</div>
<div className="grid max-w-screen-xl grid-cols-3 gap-2">
<div className="flex flex-col gap-2">
<QueueCounter />
<ScrollArea className="relative flex h-[calc(100vh-200px)] flex-col">
{isEmpty ? (
<p className="text-center text-muted-foreground">Queue is empty.</p>
) : (
<ul className="space-y-2">
{queue.data?.items.map((item) => (
<QueueItem key={item.itemUid} props={item} />
))}
</ul>
)}
</ScrollArea>
</div>
<div className="flex h-fit flex-col gap-2">
<span className="items-center justify-center rounded-md border border-muted bg-slate-50 p-1 text-center capitalize text-muted-foreground">
{status.data?.reState}
</span>
{queue.data?.runningItem?.itemUid ? (
<RunningItem
key={queue.data.runningItem.itemUid}
props={queue.data.runningItem}
/>
) : (
<PlaceholderItem />
<span className="text-center text-muted-foreground">
No running item.
</span>
)}
<History />
</div>
<History />
</div>
);
}
Expand Down Expand Up @@ -400,7 +389,6 @@ export function QueueControls() {

return (
<div className="flex items-center justify-start gap-2">
<QueueCounter />
<EnvMenu />
<Button
disabled={!status.data?.reState || status.data.itemsInQueue === 0}
Expand All @@ -422,7 +410,6 @@ export function QueueControls() {
</>
)}
</Button>
{/* <RunEngineControls /> */}
<Button
disabled={status.data?.itemsInQueue === 0}
onClick={clearQueue}
Expand Down

0 comments on commit e19aab6

Please sign in to comment.