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[];
}

export interface DiagramEdge {
  sourceId: string;
  targetId: string;
  label?: string;
  points: number[][];
}

export interface DiagramLayout {
  width?: number;
  height?: number;
  nodes?: DiagramNode[];
  edges?: DiagramEdge[];
}

export function useDiagramLayout(
  contentHash: string | null,
  direction: 'LR' | 'TB' = 'LR',
) {
  return useQuery({
    queryKey: ['diagrams', 'layout', contentHash, direction],
    queryFn: async () => {
      const { data, error } = await api.GET('/diagrams/{contentHash}/render', {
        params: {
          path: { contentHash: contentHash! },
          query: { direction },
        },
        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,
  direction: 'LR' | 'TB' = 'LR',
) {
  return useQuery({
    queryKey: ['diagrams', 'byRoute', application, routeId, direction],
    queryFn: async () => {
      const { data, error } = await api.GET('/diagrams', {
        params: { query: { application: application!, routeId: routeId!, direction } },
      });
      if (error) throw new Error('Failed to load diagram for route');
      return data as DiagramLayout;
    },
    enabled: !!application && !!routeId,
  });
}