cameleer-server/ui/src/api/queries/diagrams.ts

import { useQuery } from '@tanstack/react-query';
import { api } from '../client';

export interface DiagramNode {
  id?: string;
  label?: string;
  type?: string;
  x?: number;
  y?: number;
  width?: number;
  height?: number;
  children?: DiagramNode[];
}

interface DiagramLayout {
  width?: number;
  height?: number;
  nodes?: DiagramNode[];
  edges?: Array<{ from?: string; to?: string }>;
}

export function useDiagramLayout(contentHash: string | null) {
  return useQuery({
    queryKey: ['diagrams', 'layout', contentHash],
    queryFn: async () => {
      const { data, error } = await api.GET('/diagrams/{contentHash}/render', {
        params: { path: { contentHash: contentHash! } },
        headers: { Accept: 'application/json' },
      });
      if (error) throw new Error('Failed to load diagram layout');
      return data as DiagramLayout;
    },
    enabled: !!contentHash,
  });
}

export function useDiagramByRoute(application: string | undefined, routeId: string | undefined) {
  return useQuery({
    queryKey: ['diagrams', 'byRoute', application, routeId],
    queryFn: async () => {
      const { data, error } = await api.GET('/diagrams', {
        params: { query: { application: application!, routeId: routeId! } },
      });
      if (error) throw new Error('Failed to load diagram for route');
      return data!;
    },
    enabled: !!application && !!routeId,
  });
}