apps/canvas/front/src/Details.tsx

import { useNodes } from "@xyflow/react";
import { nodeLabel, useMode } from "@/lib/state";
import { NodeDetails } from "@/components/node-details";
import { Accordion, AccordionContent, AccordionTrigger } from "./components/ui/accordion";
import { AccordionItem } from "@radix-ui/react-accordion";
import { useMemo, useState } from "react";
import { Separator } from "./components/ui/separator";
import { Name } from "./components/node-name";
import { AppNode, NodeType } from "config";

function unique<T>(v: T, i: number, a: T[]) {
	return a.indexOf(v) === i;
}

const nodeTypeIndex = new Map<NodeType, number>([
	["github", 1],
	// ["gitlab", 2],
	["volume", 3],
	["postgresql", 4],
	["mongodb", 5],
	["app", 6],
	["gateway-tcp", 7],
	["gateway-https", 8],
]);

function cmpNodes(x: AppNode, y: AppNode): number {
	if (x.type === y.type) {
		if (nodeLabel(x) < nodeLabel(y)) {
			return -1;
		} else if (nodeLabel(x) > nodeLabel(y)) {
			return 1;
		}
		return 0;
	}
	// TODO(gio): why !
	return (nodeTypeIndex.get(x.type!) || 0) - (nodeTypeIndex.get(y.type!) || 0);
}

export function Details() {
	const nodes = useNodes<AppNode>();
	const sorted = useMemo(() => nodes.filter((n) => n.type !== "network").sort(cmpNodes), [nodes]);
	const [open, setOpen] = useState<string[]>([]);
	const selected = useMemo(() => nodes.filter((n) => n.selected).map((n) => n.id), [nodes]);
	const all = useMemo(() => open.concat(selected).filter(unique), [open, selected]);
	const mode = useMode();
	const isDeployMode = mode === "deploy";
	return (
		<Accordion
			type="multiple"
			value={all}
			onValueChange={(v) => setOpen(v)}
			className="flex flex-col overflow-y-auto"
		>
			{sorted.map((n, index) => (
				<>
					{index > 0 && <Separator />}
					<AccordionItem key={n.id} value={n.id} className="px-1">
						<AccordionTrigger className="!h-fit">
							<Name node={n} editing={all.includes(n.id)} />
						</AccordionTrigger>
						<AccordionContent className="pt-1">
							<NodeDetails node={n} disabled={isDeployMode} showName={false} />
						</AccordionContent>
					</AccordionItem>
				</>
			))}
		</Accordion>
	);
}