Graph Viewer

import { type Theme, lightTheme } from "reagraph";
import {
  DEFAULT_NODE_COLOR,
  NODE_TYPE_PALETTE,
  getIconForType,
  type GraphEdge,
  type GraphNode,
  type GraphThemeConfig,
  type GraphVisualConfig,
} from "./types";

// =============================================================================
// Visual Configuration Defaults
// =============================================================================

export const DEFAULT_VISUAL_CONFIG: GraphVisualConfig = {
  pathHighlightColor: "#22c55e",
  pathHighlightSize: 3,
  iconSize: 64,
  defaultNodeColor: DEFAULT_NODE_COLOR,
  nodeTypePalette: NODE_TYPE_PALETTE,
};

// =============================================================================
// Theme Configuration Defaults
// =============================================================================

export const DEFAULT_THEME_CONFIG: GraphThemeConfig = {
  canvas: {
    background: "#FAFBFC",
  },
  node: {
    opacity: 1,
    selectedOpacity: 1,
    inactiveOpacity: 0.3,
    label: {
      color: "#1E293B",
      stroke: "#FFFFFF",
      strokeWidth: 3,
      activeColor: "#0F172A",
      fontSize: 12,
    },
  },
  edge: {
    fill: "#94A3B8",
    activeFill: "#3B82F6",
    opacity: 0.7,
    selectedOpacity: 1,
    inactiveOpacity: 0.2,
    label: {
      color: "#64748B",
      stroke: "#FFFFFF",
      strokeWidth: 2,
      activeColor: "#3B82F6",
      fontSize: 10,
    },
  },
  ring: {
    fill: "#3B82F6",
    activeFill: "#2563EB",
  },
  arrow: {
    fill: "#94A3B8",
    activeFill: "#3B82F6",
  },
  cluster: {
    stroke: "#E2E8F0",
    fill: "#F8FAFC",
    label: {
      color: "#475569",
    },
  },
  lasso: {
    border: "#3B82F6",
    background: "rgba(59, 130, 246, 0.1)",
  },
};

// =============================================================================
// Icon Paths
// =============================================================================

export const ICON_PATHS: Record<string, string> = {
  Plug: "M6 8h12v8H6z M9 8V5 M12 8V5 M15 8V5 M9 16v3 M12 16v3 M15 16v3",
  Minus: "M3 12h18 M3 10v4 M21 10v4",
  Cable:
    "M4 6c3 0 5 3 8 6c3-3 5-6 8-6 M4 12h4c2 0 3 1 4 2c1-1 2-2 4-2h4 M4 18c3 0 5-3 8-6c3 3 5 6 8 6",
  CircleDot: "M12 6a6 6 0 0 1 6 6v6H6v-6a6 6 0 0 1 6-6z M12 10v4 M10 12h4",
  Zap: "M12 3L6 12h5v6l6-9h-5V3z",
  Cpu: "M7 7h10v10H7z M10 7V4 M14 7V4 M10 17v3 M14 17v3 M7 10H4 M7 14H4 M17 10h3 M17 14h3",
  ArrowDownToLine: "M12 3v10 M7 13h10 M9 16h6 M11 19h2",
  Type: "M6 6h12 M12 6v12 M8 18h8",
  LayoutGrid: "M4 4h6v6H4z M14 4h6v6h-6z M4 14h6v6H4z M14 14h6v6h-6z",
  GitCommit: "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z M3 12h5 M16 12h5",
  FileText:
    "M6 2h8l4 4v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z M14 2v4h4 M8 12h8 M8 16h8",
  Activity: "M3 12h4l2-6 3 12 2-6h7",
  Box: "M3 8l9-5 9 5v8l-9 5-9-5V8z M12 8v14 M3 8l9 5 9-5",
  Wrench: "M14 4l-4 4 6 6 4-4a5 5 0 0 0-6-6z M10 8L4 14l4 4 6-6",
  MapPin:
    "M12 2a8 8 0 0 0-8 8c0 6 8 12 8 12s8-6 8-12a8 8 0 0 0-8-8z M12 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6z",
  Building:
    "M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16 M9 7h2 M13 7h2 M9 11h2 M13 11h2 M9 15h6",
  AlertTriangle: "M12 3L2 20h20L12 3z M12 9v5 M12 16v2",
  Circle: "M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16z",
  Package: "M3 8l9-5 9 5-9 5-9-5z M3 8v8l9 5V13 M21 8v8l-9 5V13",
  ClipboardList: "M8 4h8v2H8V4z M6 6h12v14H6V6z M9 10h6 M9 14h6",
  Cog: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M12 4v2 M12 18v2 M5 12H3 M21 12h-2 M6.3 6.3l1.4 1.4 M16.3 16.3l1.4 1.4 M6.3 17.7l1.4-1.4 M16.3 7.7l1.4-1.4",
  default: "M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16z",
};

// =============================================================================
// Helper Functions
// =============================================================================

export function buildReagraphTheme(config: Partial<GraphThemeConfig> = {}): Theme {
  const theme = { ...DEFAULT_THEME_CONFIG, ...config };

  return {
    ...lightTheme,
    canvas: {
      ...lightTheme.canvas,
      background: theme.canvas.background,
    },
    node: {
      ...lightTheme.node,
      opacity: theme.node.opacity,
      selectedOpacity: theme.node.selectedOpacity,
      inactiveOpacity: theme.node.inactiveOpacity,
      label: {
        ...lightTheme.node.label,
        color: theme.node.label.color,
        stroke: theme.node.label.stroke,
        activeColor: theme.node.label.activeColor,
      },
    },
    edge: {
      ...lightTheme.edge,
      fill: theme.edge.fill,
      activeFill: theme.edge.activeFill,
      opacity: theme.edge.opacity,
      selectedOpacity: theme.edge.selectedOpacity,
      inactiveOpacity: theme.edge.inactiveOpacity,
      label: {
        ...lightTheme.edge.label,
        color: theme.edge.label.color,
        stroke: theme.edge.label.stroke,
        activeColor: theme.edge.label.activeColor,
      },
    },
    ring: {
      ...lightTheme.ring,
      fill: theme.ring.fill,
      activeFill: theme.ring.activeFill,
    },
    arrow: {
      ...lightTheme.arrow,
      fill: theme.arrow.fill,
      activeFill: theme.arrow.activeFill,
    },
    cluster: {
      ...lightTheme.cluster,
      stroke: theme.cluster.stroke,
      fill: theme.cluster.fill,
      label: {
        ...lightTheme.cluster?.label,
        color: theme.cluster.label.color,
      },
    },
    lasso: {
      ...lightTheme.lasso,
      border: theme.lasso.border,
      background: theme.lasso.background,
    },
  };
}

export function mergeVisualConfig(config?: Partial<GraphVisualConfig>): GraphVisualConfig {
  return { ...DEFAULT_VISUAL_CONFIG, ...config };
}

// =============================================================================
// Icon Generation
// =============================================================================

const iconUrlCache = new Map<string, string>();

export function getIconUrl(iconName: string, bgColor: string, iconSize = 64): string {
  const cacheKey = `${iconName}:${bgColor}:${iconSize}`;
  if (iconUrlCache.has(cacheKey)) {
    return iconUrlCache.get(cacheKey)!;
  }

  const pathData = ICON_PATHS[iconName] || ICON_PATHS.default;

  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${iconSize}" height="${iconSize}" viewBox="0 0 ${iconSize} ${iconSize}">
    <circle cx="${iconSize / 2}" cy="${iconSize / 2}" r="${iconSize / 2 - 2}" fill="${bgColor}"/>
    <circle cx="${iconSize / 2}" cy="${iconSize / 2}" r="${iconSize / 2 - 4}" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="2"/>
    <g transform="translate(${iconSize * 0.1875}, ${iconSize * 0.1875}) scale(${iconSize * 0.026})" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
      <path d="${pathData}"/>
    </g>
  </svg>`;

  const dataUrl = `data:image/svg+xml;base64,${btoa(svg)}`;
  iconUrlCache.set(cacheKey, dataUrl);
  return dataUrl;
}

// =============================================================================
// Node/Edge Transformations (Reagraph format)
// =============================================================================

export function transformNodes(
  nodes: GraphNode[],
  visualConfig: GraphVisualConfig
): Array<{
  id: string;
  label: string;
  fill: string;
  icon: string;
  data: GraphNode;
}> {
  return nodes.map((node) => {
    const typeExternalId = node.data?.type?.externalId;
    const iconName = getIconForType(typeExternalId);
    const fillColor = node.fill || visualConfig.defaultNodeColor;
    const iconUrl = getIconUrl(iconName, fillColor, visualConfig.iconSize);

    return {
      id: node.id,
      label: node.label,
      fill: fillColor,
      icon: iconUrl,
      data: node,
    };
  });
}

export function transformEdges(
  connections: GraphEdge[],
  highlightedConnectionIds?: Set<string>,
  visualConfig?: Partial<GraphVisualConfig>
): Array<{
  id: string;
  source: string;
  target: string;
  label?: string;
  fill?: string;
  size?: number;
  data: GraphEdge;
}> {
  const config = visualConfig || {
    pathHighlightColor: "#22c55e",
    pathHighlightSize: 3,
  };

  return connections.map((edge) => {
    const isHighlighted = highlightedConnectionIds?.has(edge.id) ?? false;
    return {
      id: edge.id,
      source: edge.source,
      target: edge.target,
      label: edge.label,
      data: edge,
      ...(isHighlighted && {
        fill: config.pathHighlightColor,
        size: config.pathHighlightSize,
      }),
    };
  });
}

import type { CogniteClient } from "@cognite/sdk";
import type {
  CDFEdge,
  CDFNode,
  DataModelInfo,
  GraphData,
  ReverseRelationQuery,
  ViewPriorityConfig,
} from "./types";

// =============================================================================
// Node Type Detection
// =============================================================================

const DEFAULT_VIEW_TYPE_PRIORITY = [
  "ISA95Asset",
  "Equipment",
  "Area",
  "Site",
  "Enterprise",
  "WorkCell",
  "WorkCenter",
  "ProcessCell",
  "ProcessArea",
  "ProductionLine",
  "ProductionRun",
  "Product",
  "WorkOrder",
  "WorkUnit",
  "QualityAlert",
  "FaultCode",
  "CogniteAsset",
  "CogniteEquipment",
  "CogniteFile",
  "CogniteTimeSeries",
  "CogniteActivity",
  "Cognite3DModel",
  "CogniteDescribable",
  "CogniteSourceable",
  "CogniteVisualizable",
  "CogniteSchedulable",
];

const DEFAULT_SKIP_VIEWS_FOR_TYPE = new Set([
  "CogniteDescribable",
  "CogniteSourceable",
  "CogniteVisualizable",
  "CogniteSchedulable",
  "CogniteSourceSystem",
]);

const DEFAULT_SKIP_VIEWS_FOR_PROPERTIES = new Set([
  "CogniteSourceable",
  "CogniteVisualizable",
  "CogniteSchedulable",
]);

function deriveNodeTypeFromProperties(
  properties: Record<string, Record<string, unknown>> | undefined,
  viewPriorityConfig?: ViewPriorityConfig
): { space: string; externalId: string } | undefined {
  if (!properties) return undefined;

  const viewTypePriority = viewPriorityConfig?.viewTypePriority ?? DEFAULT_VIEW_TYPE_PRIORITY;
  const skipViewsForType = viewPriorityConfig?.skipViewsForType
    ? new Set(viewPriorityConfig.skipViewsForType)
    : DEFAULT_SKIP_VIEWS_FOR_TYPE;

  const viewKeys: Array<{
    space: string;
    externalId: string;
    priority: number;
  }> = [];

  for (const [spaceKey, viewsObj] of Object.entries(properties)) {
    if (typeof viewsObj !== "object" || viewsObj === null) continue;

    for (const viewKey of Object.keys(viewsObj)) {
      const viewExternalId = viewKey.split("/")[0];
      if (skipViewsForType.has(viewExternalId)) continue;

      const priorityIndex = viewTypePriority.indexOf(viewExternalId);
      const priority = priorityIndex >= 0 ? priorityIndex : 100;

      viewKeys.push({
        space: spaceKey,
        externalId: viewExternalId,
        priority,
      });
    }
  }

  if (viewKeys.length === 0) return undefined;

  viewKeys.sort((a, b) => a.priority - b.priority);

  return {
    space: viewKeys[0].space,
    externalId: viewKeys[0].externalId,
  };
}

// =============================================================================
// Query with cursor-based pagination
// =============================================================================

const QUERY_PAGE_LIMIT = 10_000;

/**
 * Paginate a CDF instances.query selection until either:
 *   1. the API has no more cursors,
 *   2. the cumulative number of items reaches `maxTotal` (hard cap), or
 *   3. an empty page is returned.
 *
 * `maxTotal` is a HARD MAXIMUM. The function never returns more than `maxTotal`
 * items, and it stops fetching additional pages as soon as the cap is reached.
 * Pass `Infinity` to disable the cap (legacy "fetch everything" behaviour).
 */
async function queryWithCursorPagination<T>(
  client: CogniteClient,
  selectionName: string,
  query: {
    with: Record<
      string,
      {
        nodes?: { filter?: unknown };
        edges?: { filter?: unknown };
        limit?: number;
      }
    >;
    select: Record<string, { sources?: unknown[]; sort?: unknown[] }>;
    includeTyping?: boolean;
  },
  limitPerPage: number = QUERY_PAGE_LIMIT,
  maxTotal: number = Infinity
): Promise<T[]> {
  const results: T[] = [];
  let cursors: Record<string, string> | undefined;

  while (results.length < maxTotal) {
    const remaining = maxTotal - results.length;
    const pageLimit = Math.max(1, Math.min(limitPerPage, remaining));

    const withWithLimit = { ...query.with };
    const firstKey = Object.keys(withWithLimit)[0];
    if (firstKey && withWithLimit[firstKey]) {
      withWithLimit[firstKey] = {
        ...withWithLimit[firstKey],
        limit: pageLimit,
      };
    }
    const request = {
      ...query,
      with: withWithLimit,
      cursors,
    };
    const res = await client.instances.query(
      request as Parameters<CogniteClient["instances"]["query"]>[0]
    );
    const chunk = (res.items[selectionName] ?? []) as T[];
    results.push(...chunk);
    cursors =
      res.nextCursor && Object.keys(res.nextCursor).length > 0
        ? (res.nextCursor as Record<string, string>)
        : undefined;
    if (chunk.length === 0 || !cursors?.[selectionName]) break;
  }

  return results.length > maxTotal ? results.slice(0, maxTotal) : results;
}

// =============================================================================
// fetchNodeDetails
// =============================================================================

export async function fetchNodeDetails(
  client: CogniteClient | null,
  space: string,
  externalId: string
): Promise<CDFNode | null> {
  if (!client) {
    throw new Error("CDF client is not available");
  }

  try {
    const inspectResult = await client.instances.inspect({
      items: [
        {
          instanceType: "node" as const,
          space,
          externalId,
        },
      ],
      inspectionOperations: {
        involvedViews: {
          allVersions: false,
        },
      },
    });

    const involvedViews = inspectResult.items?.[0]?.inspectionResults?.involvedViews || [];

    const sources = involvedViews.slice(0, 10).map((view) => ({
      source: {
        type: "view" as const,
        space: view.space,
        externalId: view.externalId,
        version: view.version ?? "latest",
      },
    }));

    const response = await client.instances.retrieve({
      items: [
        {
          instanceType: "node" as const,
          space,
          externalId,
        },
      ],
      includeTyping: true,
      sources: sources.length > 0 ? sources : undefined,
    });

    if (response.items.length === 0) {
      return null;
    }

    const item = response.items[0];
    const properties = item.properties as Record<string, Record<string, unknown>>;
    const derivedType = deriveNodeTypeFromProperties(properties);

    return {
      space: item.space,
      externalId: item.externalId,
      instanceType: "node" as const,
      version: item.version,
      createdTime: item.createdTime,
      lastUpdatedTime: item.lastUpdatedTime,
      type: item.type || derivedType,
      properties,
    };
  } catch (error) {
    console.error("[GraphViewer] Error fetching node details:", error);
    return null;
  }
}

// =============================================================================
// fetchConnectedNodes
// =============================================================================

export interface ExpandNodeResult {
  newNodes: CDFNode[];
  newEdges: CDFEdge[];
  connectedNodeIds: string[];
}

export async function fetchConnectedNodes(
  client: CogniteClient | null,
  nodeSpace: string,
  nodeExternalId: string,
  existingNodeIds: Set<string>,
  _dataModel?: DataModelInfo,
  limit = 100,
  whitelistedRelationProps?: Set<string>,
  coreReverseQueries?: ReverseRelationQuery[],
  viewPriorityConfig?: ViewPriorityConfig
): Promise<ExpandNodeResult> {
  if (!client) {
    throw new Error("CDF client is not available. Please ensure you are authenticated.");
  }

  const extractDirectRelations = (
    properties: Record<string, Record<string, unknown>> | undefined
  ): Array<{ space: string; externalId: string }> => {
    if (!properties) return [];

    const refs: Array<{ space: string; externalId: string }> = [];
    const seen = new Set<string>();

    const processValue = (val: unknown) => {
      if (val && typeof val === "object" && "space" in val && "externalId" in val) {
        const ref = val as { space: string; externalId: string };
        if (typeof ref.space === "string" && typeof ref.externalId === "string") {
          const key = `${ref.space}:${ref.externalId}`;
          if (!seen.has(key)) {
            seen.add(key);
            refs.push({ space: ref.space, externalId: ref.externalId });
          }
        }
      } else if (Array.isArray(val)) {
        val.forEach(processValue);
      }
    };

    for (const spaceObj of Object.values(properties)) {
      if (typeof spaceObj !== "object" || spaceObj === null) continue;
      for (const viewObj of Object.values(spaceObj)) {
        if (typeof viewObj !== "object" || viewObj === null) continue;
        for (const [propName, propVal] of Object.entries(viewObj as Record<string, unknown>)) {
          if (!whitelistedRelationProps || whitelistedRelationProps.has(propName)) {
            processValue(propVal);
          }
        }
      }
    }

    return refs;
  };

  const [sourceNodeRefs, edgeResponse] = await Promise.all([
    (async () => {
      try {
        const sourceInspect = await client.instances.inspect({
          items: [
            {
              instanceType: "node" as const,
              space: nodeSpace,
              externalId: nodeExternalId,
            },
          ],
          inspectionOperations: { involvedViews: { allVersions: false } },
        });

        if (sourceInspect.items.length > 0) {
          const involvedViews =
            (
              sourceInspect.items[0] as {
                inspectionResults?: {
                  involvedViews?: Array<{
                    space: string;
                    externalId: string;
                    version: string;
                  }>;
                };
              }
            ).inspectionResults?.involvedViews || [];

          const sources = involvedViews.slice(0, 10).map((v) => ({
            source: {
              type: "view" as const,
              space: v.space,
              externalId: v.externalId,
              version: v.version,
            },
          }));

          if (sources.length > 0) {
            const sourceNodeResponse = await client.instances.retrieve({
              items: [
                {
                  instanceType: "node" as const,
                  space: nodeSpace,
                  externalId: nodeExternalId,
                },
              ],
              sources,
              includeTyping: true,
            });

            if (sourceNodeResponse.items.length > 0) {
              const props = sourceNodeResponse.items[0].properties as Record<
                string,
                Record<string, unknown>
              >;
              return extractDirectRelations(props);
            }
          }
        }
        return [];
      } catch {
        return [];
      }
    })(),

    (async () => {
      type EdgeItem = {
        space: string;
        externalId: string;
        version: number;
        createdTime: number;
        lastUpdatedTime: number;
        type: { space: string; externalId: string };
        startNode: { space: string; externalId: string };
        endNode: { space: string; externalId: string };
        properties?: Record<string, Record<string, unknown>>;
      };
      const items = await queryWithCursorPagination<EdgeItem>(
        client,
        "edges",
        {
          with: {
            edges: {
              edges: {
                filter: {
                  or: [
                    {
                      equals: {
                        property: ["edge", "startNode"],
                        value: { space: nodeSpace, externalId: nodeExternalId },
                      },
                    },
                    {
                      equals: {
                        property: ["edge", "endNode"],
                        value: { space: nodeSpace, externalId: nodeExternalId },
                      },
                    },
                  ],
                },
              },
            },
          },
          select: { edges: {} },
          includeTyping: true,
        },
        Math.min(limit * 2, QUERY_PAGE_LIMIT),
        // Hard cap: never return more than `limit` edges per expansion. This
        // upper bound protects the consumer from runaway pagination and matches
        // the documented contract of `initialConnectionLimit`.
        limit
      );
      return { items };
    })(),
  ]);

  const newEdges: CDFEdge[] = edgeResponse.items.map((edgeItem) => {
    const item = edgeItem as {
      space: string;
      externalId: string;
      version: number;
      createdTime: number;
      lastUpdatedTime: number;
      type: { space: string; externalId: string };
      startNode: { space: string; externalId: string };
      endNode: { space: string; externalId: string };
      properties?: Record<string, Record<string, unknown>>;
    };

    return {
      space: item.space,
      externalId: item.externalId,
      instanceType: "edge" as const,
      version: item.version,
      createdTime: item.createdTime,
      lastUpdatedTime: item.lastUpdatedTime,
      type: item.type,
      startNode: item.startNode,
      endNode: item.endNode,
      properties: item.properties,
    };
  });

  const connectedNodeRefs = new Map<string, { space: string; externalId: string }>();

  for (const edge of newEdges) {
    const startKey = `${edge.startNode.space}:${edge.startNode.externalId}`;
    const endKey = `${edge.endNode.space}:${edge.endNode.externalId}`;

    if (!existingNodeIds.has(startKey)) {
      connectedNodeRefs.set(startKey, edge.startNode);
    }
    if (!existingNodeIds.has(endKey)) {
      connectedNodeRefs.set(endKey, edge.endNode);
    }
  }

  const sourceNodeKey = `${nodeSpace}:${nodeExternalId}`;
  const directRelationEdges: CDFEdge[] = [];

  for (const ref of sourceNodeRefs) {
    const refKey = `${ref.space}:${ref.externalId}`;
    if (
      refKey !== sourceNodeKey &&
      !existingNodeIds.has(refKey) &&
      !connectedNodeRefs.has(refKey)
    ) {
      connectedNodeRefs.set(refKey, ref);

      directRelationEdges.push({
        space: nodeSpace,
        externalId: `synthetic:${nodeExternalId}->direct->${ref.externalId}`,
        instanceType: "edge" as const,
        version: 1,
        createdTime: Date.now(),
        lastUpdatedTime: Date.now(),
        type: { space: "synthetic", externalId: "direct-relation" },
        startNode: { space: nodeSpace, externalId: nodeExternalId },
        endNode: { space: ref.space, externalId: ref.externalId },
        properties: {},
      });
    }
  }

  newEdges.push(...directRelationEdges);

  // Reverse relation queries
  const reverseRelationRefs: Array<{ space: string; externalId: string }> = [];
  const CORE_REVERSE_QUERIES = coreReverseQueries ?? [];

  try {
    const nodeRef = { space: nodeSpace, externalId: nodeExternalId };

    // Spread the per-expansion budget across all configured reverse queries so
    // the total number of nodes contributed by reverse relations stays within
    // `limit`. Each query gets at least 1 row.
    const perQueryLimit =
      CORE_REVERSE_QUERIES.length > 0
        ? Math.max(1, Math.ceil(limit / CORE_REVERSE_QUERIES.length))
        : limit;

    const queryPromises = CORE_REVERSE_QUERIES.map(
      async ([viewSpace, viewExternalId, viewVersion, propertyName, isList]) => {
        try {
          const propertyPath = [
            viewSpace,
            `${viewExternalId}/${viewVersion}`,
            propertyName,
          ];

          const filter = isList
            ? {
                containsAny: {
                  property: propertyPath,
                  values: [nodeRef],
                },
              }
            : {
                equals: {
                  property: propertyPath,
                  value: nodeRef,
                },
              };

          const items = await queryWithCursorPagination<{
            space: string;
            externalId: string;
          }>(
            client,
            "nodes",
            {
              with: {
                nodes: {
                  nodes: { filter },
                },
              },
              select: { nodes: {} },
              includeTyping: false,
            },
            Math.min(50, perQueryLimit),
            perQueryLimit
          );
          return items.map((item) => ({
            space: item.space,
            externalId: item.externalId,
          }));
        } catch {
          return [];
        }
      }
    );

    const results = await Promise.all(queryPromises);
    for (const refs of results) {
      reverseRelationRefs.push(...refs);
    }
  } catch {
    // Silently ignore reverse relation query failures
  }

  const syntheticEdges: CDFEdge[] = [];

  for (const ref of reverseRelationRefs) {
    const refKey = `${ref.space}:${ref.externalId}`;
    if (
      refKey !== sourceNodeKey &&
      !existingNodeIds.has(refKey) &&
      !connectedNodeRefs.has(refKey)
    ) {
      connectedNodeRefs.set(refKey, ref);

      syntheticEdges.push({
        space: ref.space,
        externalId: `synthetic:${ref.externalId}->assets->${nodeExternalId}`,
        instanceType: "edge" as const,
        version: 1,
        createdTime: Date.now(),
        lastUpdatedTime: Date.now(),
        type: { space: "cdf_cdm", externalId: "references-asset" },
        startNode: { space: ref.space, externalId: ref.externalId },
        endNode: { space: nodeSpace, externalId: nodeExternalId },
        properties: {},
      });
    }
  }

  newEdges.push(...syntheticEdges);

  const connectedNodeIds = newEdges.flatMap((edge) => [
    `${edge.startNode.space}:${edge.startNode.externalId}`,
    `${edge.endNode.space}:${edge.endNode.externalId}`,
  ]);

  const nodesToFetch = Array.from(connectedNodeRefs.values()).slice(0, limit);

  let newNodes: CDFNode[] = [];

  if (nodesToFetch.length > 0) {
    const inspectResponse = await client.instances.inspect({
      items: nodesToFetch.map((ref) => ({
        instanceType: "node" as const,
        space: ref.space,
        externalId: ref.externalId,
      })),
      inspectionOperations: { involvedViews: {} },
    });

    const nodeTypeMap = new Map<string, { space: string; externalId: string }>();
    const allViews = new Map<string, { space: string; externalId: string; version: string }>();

    for (const inspectItem of inspectResponse.items) {
      const item = inspectItem as {
        space: string;
        externalId: string;
        inspectionResults?: {
          involvedViews?: Array<{
            space: string;
            externalId: string;
            version: string;
          }>;
        };
      };
      const key = `${item.space}:${item.externalId}`;
      const views = item.inspectionResults?.involvedViews || [];

      const skipViewsForProperties = viewPriorityConfig?.skipViewsForProperties
        ? new Set(viewPriorityConfig.skipViewsForProperties)
        : DEFAULT_SKIP_VIEWS_FOR_PROPERTIES;
      const skipViewsForType = viewPriorityConfig?.skipViewsForType
        ? new Set(viewPriorityConfig.skipViewsForType)
        : DEFAULT_SKIP_VIEWS_FOR_TYPE;

      for (const view of views) {
        if (!skipViewsForProperties.has(view.externalId)) {
          const viewKey = `${view.space}:${view.externalId}`;
          if (!allViews.has(viewKey)) {
            allViews.set(viewKey, view);
          }
        }
      }

      const domainView = views.find(
        (v) => !v.space.startsWith("cdf_cdm") && !skipViewsForType.has(v.externalId)
      );
      const cdmView = views.find(
        (v) => v.space.startsWith("cdf_cdm") && !skipViewsForType.has(v.externalId)
      );
      const bestView = domainView || cdmView;

      if (bestView) {
        nodeTypeMap.set(key, {
          space: bestView.space,
          externalId: bestView.externalId,
        });
      }
    }

    const sources = [
      {
        source: {
          type: "view" as const,
          space: "cdf_cdm",
          externalId: "CogniteDescribable",
          version: "v1",
        },
      },
      ...Array.from(allViews.values()).map((v) => ({
        source: {
          type: "view" as const,
          space: v.space,
          externalId: v.externalId,
          version: v.version,
        },
      })),
    ];

    const retrieveItems = nodesToFetch.map((ref) => ({
      instanceType: "node" as const,
      space: ref.space,
      externalId: ref.externalId,
    }));

    let nodeResponse: Awaited<ReturnType<CogniteClient["instances"]["retrieve"]>>;
    try {
      nodeResponse = await client.instances.retrieve({
        items: retrieveItems,
        includeTyping: true,
      });
    } catch {
      nodeResponse = { items: [] };
    }

    const propertiesMap = new Map<string, Record<string, Record<string, unknown>>>();
    if (sources.length > 0 && nodeResponse.items.length > 0) {
      try {
        const propsResponse = await client.instances.retrieve({
          items: retrieveItems,
          sources,
          includeTyping: true,
        });

        for (const item of propsResponse.items) {
          const key = `${item.space}:${item.externalId}`;
          if (item.properties) {
            propertiesMap.set(key, item.properties as Record<string, Record<string, unknown>>);
          }
        }
      } catch {
        // Continue without additional properties
      }
    }

    const nodesWithoutProps = retrieveItems.filter((item) => {
      const key = `${item.space}:${item.externalId}`;
      return !propertiesMap.has(key);
    });

    if (nodesWithoutProps.length > 0) {
      const individualFetches = nodesWithoutProps.map(async (nodeRef) => {
        const key = `${nodeRef.space}:${nodeRef.externalId}`;
        try {
          const inspectResult = await client.instances.inspect({
            items: [nodeRef],
            inspectionOperations: { involvedViews: { allVersions: false } },
          });

          const views =
            (
              inspectResult.items?.[0] as {
                inspectionResults?: {
                  involvedViews?: Array<{
                    space: string;
                    externalId: string;
                    version: string;
                  }>;
                };
              }
            )?.inspectionResults?.involvedViews || [];

          if (views.length > 0) {
            const nodeSources = views.slice(0, 10).map((v) => ({
              source: {
                type: "view" as const,
                space: v.space,
                externalId: v.externalId,
                version: v.version,
              },
            }));

            const propsResp = await client.instances.retrieve({
              items: [nodeRef],
              sources: nodeSources,
              includeTyping: true,
            });

            if (propsResp.items.length > 0 && propsResp.items[0].properties) {
              propertiesMap.set(
                key,
                propsResp.items[0].properties as Record<string, Record<string, unknown>>
              );
            }
          }
        } catch {
          // Silently ignore individual fetch failures
        }
      });

      await Promise.all(individualFetches);
    }

    newNodes = nodeResponse.items
      .filter(
        (item): item is typeof item & { instanceType: "node" } =>
          (item as { instanceType?: string }).instanceType === "node" || !("instanceType" in item)
      )
      .map((item) => {
        const key = `${item.space}:${item.externalId}`;
        const inspectType = nodeTypeMap.get(key);
        const mergedProps =
          propertiesMap.get(key) || (item.properties as Record<string, Record<string, unknown>>);
        const derivedType =
          deriveNodeTypeFromProperties(mergedProps, viewPriorityConfig) || inspectType;

        return {
          space: item.space,
          externalId: item.externalId,
          instanceType: "node" as const,
          version: item.version,
          createdTime: item.createdTime,
          lastUpdatedTime: item.lastUpdatedTime,
          type: item.type || derivedType,
          properties: mergedProps,
        };
      });
  }

  return { newNodes, newEdges, connectedNodeIds };
}

// =============================================================================
// Graph utility functions (pure, no API calls)
// =============================================================================

export function getGraphStats(graphData: GraphData) {
  const nodeTypes = new Map<string, number>();
  const connectionTypes = new Map<string, number>();

  graphData.nodes.forEach((node) => {
    const type = node.data.type?.externalId || "Unknown";
    nodeTypes.set(type, (nodeTypes.get(type) || 0) + 1);
  });

  graphData.connections.forEach((connection) => {
    const type = connection.data.type.externalId;
    connectionTypes.set(type, (connectionTypes.get(type) || 0) + 1);
  });

  return {
    totalNodes: graphData.nodes.length,
    totalConnections: graphData.connections.length,
    nodeTypes: Object.fromEntries(nodeTypes),
    connectionTypes: Object.fromEntries(connectionTypes),
  };
}

export function getConnectedNodes(graphData: GraphData, nodeId: string) {
  const connectedNodeIds = new Set<string>();

  graphData.connections.forEach((connection) => {
    if (connection.source === nodeId) {
      connectedNodeIds.add(connection.target);
    }
    if (connection.target === nodeId) {
      connectedNodeIds.add(connection.source);
    }
  });

  return graphData.nodes.filter((node) => connectedNodeIds.has(node.id));
}

export function getNodeEdges(graphData: GraphData, nodeId: string) {
  return graphData.connections.filter(
    (connection) => connection.source === nodeId || connection.target === nodeId
  );
}

import { useCallback, useRef } from "react";
import {
  GraphCanvas as ReagraphCanvas,
  type GraphCanvasRef,
  type LayoutTypes,
} from "reagraph";
import type { Theme } from "reagraph";
import type { GraphData, GraphEdge, GraphNode, LayoutType } from "./types";
import { ZoomControls } from "./ZoomControls";
import { GraphViewerLegend } from "./GraphViewerLegend";
import { useCanvasResize } from "./useCanvasResize";
import type { LiteFeatureFlags } from "./types";

const LAYOUT_MAP: Record<LayoutType, LayoutTypes> = {
  forceDirected2d: "forceDirected2d",
  forceDirected3d: "forceDirected3d",
  treeTd2d: "treeTd2d",
  treeLr2d: "treeLr2d",
  radialOut2d: "radialOut2d",
  circular2d: "circular2d",
};

const DOUBLE_CLICK_MS = 300;

export interface GraphViewerCanvasProps {
  reagraphNodes: Array<{
    id: string;
    label: string;
    fill: string;
    icon: string;
    data: GraphNode;
  }>;
  reagraphEdges: Array<{
    id: string;
    source: string;
    target: string;
    label?: string;
    fill?: string;
    size?: number;
    data: GraphEdge;
  }>;
  displayedGraphData: GraphData;
  layout: LayoutType;
  theme: Theme;
  selections: string[];
  selectedNode: GraphNode | null;
  selectedEdge: GraphEdge | null;
  features: LiteFeatureFlags;
  selectedNodeType: string | null;
  graphRef: React.RefObject<GraphCanvasRef | null>;
  onNodeClick: (node: GraphNode) => void;
  onEdgeClick: (edge: GraphEdge) => void;
  onCanvasClick: () => void;
  onExpandNode: (nodeId: string) => void;
  onNodeTypeClick: (typeKey: string) => void;
  onClearNodeTypeSelection: () => void;
  className?: string;
}

export function GraphViewerCanvas({
  reagraphNodes,
  reagraphEdges,
  displayedGraphData,
  layout,
  theme,
  selections,
  features,
  selectedNodeType,
  graphRef,
  onNodeClick,
  onEdgeClick,
  onCanvasClick,
  onExpandNode,
  onNodeTypeClick,
  onClearNodeTypeSelection,
  className,
}: GraphViewerCanvasProps) {
  const canvasContainerRef = useRef<HTMLDivElement>(null);
  const lastClickedIdRef = useRef<string | null>(null);
  const lastClickTimeRef = useRef(0);
  const pendingClickRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  useCanvasResize(canvasContainerRef, graphRef as React.RefObject<GraphCanvasRef>);

  const handleNodeClick = useCallback(
    (node: { id: string }) => {
      const graphNode = displayedGraphData.nodes.find((n) => n.id === node.id);
      if (!graphNode) return;

      const now = Date.now();
      const isDoubleClick =
        lastClickedIdRef.current === node.id &&
        now - lastClickTimeRef.current < DOUBLE_CLICK_MS;

      lastClickedIdRef.current = node.id;
      lastClickTimeRef.current = now;

      if (isDoubleClick && features.enableNodeExpansion) {
        if (pendingClickRef.current) {
          clearTimeout(pendingClickRef.current);
          pendingClickRef.current = null;
        }
        onExpandNode(node.id);
        return;
      }

      pendingClickRef.current = setTimeout(() => {
        pendingClickRef.current = null;
        onNodeClick(graphNode);
      }, DOUBLE_CLICK_MS);
    },
    [displayedGraphData.nodes, onNodeClick, onExpandNode, features.enableNodeExpansion]
  );

  const handleEdgeClick = useCallback(
    (edge: { id: string }) => {
      const graphEdge = displayedGraphData.connections.find((c) => c.id === edge.id);
      if (graphEdge) {
        onEdgeClick(graphEdge);
      }
    },
    [displayedGraphData.connections, onEdgeClick]
  );

  const hasNodes = reagraphNodes.length > 0;

  return (
    <div
      ref={canvasContainerRef}
      className={`relative w-full h-full min-h-0 min-w-0 ${className ?? ""}`}
    >
      {hasNodes && (
        <ReagraphCanvas
          ref={graphRef}
          nodes={reagraphNodes}
          edges={reagraphEdges}
          layoutType={LAYOUT_MAP[layout]}
          theme={theme}
          labelType="nodes"
          edgeLabelPosition="natural"
          edgeArrowPosition="end"
          draggable
          animated
          onNodeClick={handleNodeClick}
          onEdgeClick={handleEdgeClick}
          onCanvasClick={onCanvasClick}
          selections={selections}
          cameraMode={layout.includes("3d") ? "rotate" : "pan"}
        />
      )}

      {!hasNodes && (
        <div className="absolute inset-0 flex items-center justify-center text-muted-foreground text-sm">
          No nodes to display
        </div>
      )}

      {features.enableZoomControls && hasNodes && (
        <ZoomControls
          onZoomIn={() => graphRef.current?.zoomIn()}
          onZoomOut={() => graphRef.current?.zoomOut()}
          onFitView={() => graphRef.current?.fitNodesInView()}
        />
      )}

      {features.enableLegend &&
        displayedGraphData.nodeTypes.length > 0 && (
          <GraphViewerLegend
            nodeTypes={displayedGraphData.nodeTypes}
            selectedNodeType={selectedNodeType}
            onNodeTypeClick={onNodeTypeClick}
            onClearSelection={onClearNodeTypeSelection}
          />
        )}
    </div>
  );
}

import * as LucideIcons from "lucide-react";
import type { NodeTypeInfo } from "./types";
import { getIconForType } from "./types";

type LucideIconComponent = React.ComponentType<{
  size?: number;
  color?: string;
  strokeWidth?: number;
  className?: string;
}>;

function getLucideIcon(iconName: string): LucideIconComponent {
  const icons = LucideIcons as unknown as Record<string, LucideIconComponent>;
  const icon = icons[iconName];
  if (!icon) {
    console.warn(`[getLucideIcon] Icon "${iconName}" not found, using Circle`);
  }
  return icon || icons.Circle;
}

const POSITION_CLASSES = {
  "bottom-left": "bottom-4 left-4",
  "bottom-right": "bottom-4 right-4",
  "top-left": "top-4 left-4",
  "top-right": "top-4 right-4",
};

export interface LegendProps {
  nodeTypes: NodeTypeInfo[];
  selectedNodeType: string | null;
  onNodeTypeClick: (typeKey: string) => void;
  onClearSelection: () => void;
  maxVisibleTypes?: number;
  position?: keyof typeof POSITION_CLASSES;
}

export function GraphViewerLegend({
  nodeTypes,
  selectedNodeType,
  onNodeTypeClick,
  onClearSelection,
  maxVisibleTypes = 12,
  position = "bottom-left",
}: LegendProps) {
  if (!nodeTypes || nodeTypes.length === 0) {
    return null;
  }

  const visibleTypes = nodeTypes.slice(0, maxVisibleTypes);
  const remainingCount = nodeTypes.length - maxVisibleTypes;

  return (
    <div
      className={`absolute ${POSITION_CLASSES[position]} bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg dark:shadow-gray-950/50 p-3 max-w-sm z-10`}
    >
      <p className="text-xs font-semibold text-gray-700 dark:text-gray-200 mb-2 flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-[#00205B] dark:bg-primary animate-pulse" />
        Node Types ({nodeTypes.length})
        {selectedNodeType && (
          <button
            type="button"
            onClick={onClearSelection}
            className="ml-auto text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors"
            title="Clear filter"
          >
            ✕
          </button>
        )}
      </p>
      <div className="flex flex-wrap gap-2">
        {visibleTypes.map((nodeType) => {
          const iconName = getIconForType(nodeType.externalId);
          const IconComponent = getLucideIcon(iconName);
          const typeKey = `${nodeType.space}:${nodeType.externalId}`;
          const isSelected = selectedNodeType === typeKey;

          return (
            <button
              type="button"
              key={typeKey}
              onClick={() => onNodeTypeClick(typeKey)}
              className={`flex items-center gap-1.5 px-2 py-1.5 rounded-lg transition-all cursor-pointer border ${
                isSelected
                  ? "bg-[#00205B] border-[#00205B] dark:bg-primary dark:border-primary shadow-md"
                  : "bg-gray-50 border-gray-200 hover:bg-gray-100 hover:border-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-500"
              }`}
              title={`Click to highlight ${nodeType.externalId} nodes`}
            >
              <div className="w-5 h-5 relative shrink-0">
                <div
                  className="absolute inset-0 rounded-full shadow-sm"
                  style={{ backgroundColor: nodeType.color }}
                />
                <div className="absolute inset-0 flex items-center justify-center">
                  <IconComponent size={11} className="shrink-0" color="#ffffff" strokeWidth={2.5} />
                </div>
              </div>
              <span
                className={`text-xs truncate max-w-[80px] font-medium ${
                  isSelected ? "text-white" : "text-gray-700 dark:text-gray-200"
                }`}
                title={nodeType.externalId}
              >
                {nodeType.externalId}
              </span>
              <span
                className={`text-xs tabular-nums ${isSelected ? "text-gray-300 dark:text-white/70" : "text-gray-400 dark:text-gray-500"}`}
              >
                {nodeType.count}
              </span>
            </button>
          );
        })}
        {remainingCount > 0 && (
          <span className="text-xs text-gray-400 dark:text-gray-500 px-2 py-1">
            +{remainingCount} more
          </span>
        )}
      </div>
    </div>
  );
}

export { useGraphViewer } from "./useGraphViewer";
export type {
  UseGraphViewerConfig,
  UseGraphViewerOptions,
  UseGraphViewerReturn,
  LiteFeatureFlags,
  GraphStats,
  LayoutType,
  GraphData,
  GraphNode,
  GraphEdge,
  NodeTypeInfo,
  CDFNode,
  CDFEdge,
  DataModelInfo,
  ReverseRelationQuery,
  ViewReference,
  ViewPriorityConfig,
  GraphThemeConfig,
  GraphVisualConfig,
} from "./types";

import type { GraphCanvasRef } from "reagraph";

// =============================================================================
// Layout
// =============================================================================

export type LayoutType =
  | "forceDirected2d"
  | "forceDirected3d"
  | "treeTd2d"
  | "treeLr2d"
  | "radialOut2d"
  | "circular2d";

export interface LayoutOption {
  id: LayoutType;
  label: string;
}

export const LAYOUT_OPTIONS: LayoutOption[] = [
  { id: "forceDirected2d", label: "Force 2D" },
  { id: "forceDirected3d", label: "Force 3D" },
  { id: "treeTd2d", label: "Tree (Top-Down)" },
  { id: "treeLr2d", label: "Tree (Left-Right)" },
  { id: "radialOut2d", label: "Radial" },
  { id: "circular2d", label: "Circular" },
];

// =============================================================================
// CDF Data Model Types
// =============================================================================

export interface ViewReference {
  space: string;
  externalId: string;
  version?: string;
}

export interface DataModelInfo {
  space: string;
  externalId: string;
  name?: string;
  description?: string;
  version?: string;
  views: ViewReference[];
}

/**
 * Tuple describing a reverse-relation query to run on node expansion.
 *
 * `[space, viewExternalId, viewVersion, propertyName, isList]`
 *
 * - `space`           - space of the view that defines the relation.
 * - `viewExternalId`  - external id of the view that defines the relation.
 * - `viewVersion`     - version of the view (e.g. `"v1"`, `"1"`). Required so the
 *                       lookup is not pinned to any specific version.
 * - `propertyName`    - direct relation property on the view that points back to
 *                       the node being expanded.
 * - `isList`          - `true` when the relation is `list<direct>`, otherwise `false`.
 */
export type ReverseRelationQuery = [
  space: string,
  viewExternalId: string,
  viewVersion: string,
  propertyName: string,
  isList: boolean,
];

export interface ViewPriorityConfig {
  viewTypePriority?: string[];
  priorityViewNames?: string[];
  skipViewsForType?: string[];
  skipViewsForProperties?: string[];
}

// =============================================================================
// CDF Instance Types
// =============================================================================

export interface CDFNode {
  instanceType: "node";
  space: string;
  externalId: string;
  version?: number;
  createdTime?: number;
  lastUpdatedTime?: number;
  type?: { space: string; externalId: string };
  properties?: Record<string, unknown>;
}

export interface CDFEdge {
  instanceType: "edge";
  space: string;
  externalId: string;
  version?: number;
  createdTime?: number;
  lastUpdatedTime?: number;
  type: { space: string; externalId: string };
  startNode: { space: string; externalId: string };
  endNode: { space: string; externalId: string };
  properties?: Record<string, unknown>;
}

// =============================================================================
// Graph Data Types
// =============================================================================

export interface GraphNode {
  id: string;
  label: string;
  fill?: string;
  data: CDFNode;
}

export interface GraphEdge {
  id: string;
  source: string;
  target: string;
  label?: string;
  fill?: string;
  size?: number;
  data: CDFEdge;
}

export interface NodeTypeInfo {
  externalId: string;
  space: string;
  color: string;
  count: number;
}

export interface GraphData {
  nodes: GraphNode[];
  connections: GraphEdge[];
  nodeTypes: NodeTypeInfo[];
}

export interface GraphSelection {
  type: "node" | "edge" | null;
  id: string | null;
  node?: GraphNode;
  edge?: GraphEdge;
}

// =============================================================================
// Visual / Theme Configuration
// =============================================================================

export interface GraphThemeConfig {
  canvas: {
    background: string;
  };
  node: {
    opacity: number;
    selectedOpacity: number;
    inactiveOpacity: number;
    label: {
      color: string;
      stroke: string;
      strokeWidth: number;
      activeColor: string;
      fontSize: number;
    };
  };
  edge: {
    fill: string;
    activeFill: string;
    opacity: number;
    selectedOpacity: number;
    inactiveOpacity: number;
    label: {
      color: string;
      stroke: string;
      strokeWidth: number;
      activeColor: string;
      fontSize: number;
    };
  };
  ring: {
    fill: string;
    activeFill: string;
  };
  arrow: {
    fill: string;
    activeFill: string;
  };
  cluster: {
    stroke: string;
    fill: string;
    label: {
      color: string;
    };
  };
  lasso: {
    border: string;
    background: string;
  };
}

export interface GraphVisualConfig {
  pathHighlightColor: string;
  pathHighlightSize: number;
  iconSize: number;
  defaultNodeColor: string;
  nodeTypePalette: string[];
}

// =============================================================================
// Node Color Palette & Icons
// =============================================================================

export const NODE_TYPE_PALETTE = [
  "#3b82f6",
  "#22c55e",
  "#ef4444",
  "#a855f7",
  "#f59e0b",
  "#06b6d4",
  "#e11d48",
  "#0ea5e9",
  "#8b5cf6",
  "#f97316",
  "#14b8a6",
  "#f43f5e",
];

export const DEFAULT_NODE_COLOR = "#94a3b8";

export const NODE_TYPE_ICONS: Record<string, string> = {
  Connector: "Plug",
  Wire: "Minus",
  Cable: "Cable",
  Cavity: "CircleDot",
  Shunt: "Zap",
  ShuntCollection: "LayoutGrid",
  GroundReference: "ArrowDownToLine",
  HardwareOccurence: "Cpu",
  TextElement: "Type",
  WireExtermity: "GitCommitHorizontal",
  CogniteFile: "FileText",
  CogniteFileCategory: "FolderOpen",
  CogniteTimeSeries: "Activity",
  CogniteDatapoint: "TrendingUp",
  CogniteAsset: "Box",
  CogniteEquipment: "Wrench",
  CogniteEquipmentType: "Settings",
  CogniteAssetClass: "Layers",
  CogniteAssetType: "Tag",
  ISA95Asset: "Factory",
  Enterprise: "Building2",
  Site: "Building",
  Area: "MapPin",
  ProcessCell: "Grid3X3",
  ProcessArea: "LayoutGrid",
  ProductionLine: "ArrowRightLeft",
  ProductionUnit: "Cpu",
  Equipment: "Cog",
  EquipmentModule: "CircuitBoard",
  WorkCell: "Workflow",
  WorkCenter: "Server",
  WorkUnit: "Puzzle",
  WorkOrder: "ClipboardList",
  CogniteActivity: "Calendar",
  MaintenanceOrder: "Hammer",
  FaultCode: "AlertTriangle",
  QualityAlert: "ShieldAlert",
  Product: "Package",
  ProductComponent: "Component",
  ProductNode: "Boxes",
  Batch: "Beaker",
  Cognite3DModel: "Box",
  CogniteCADModel: "Box",
  CogniteCADNode: "Shapes",
  Cognite360Image: "Image",
  CognitePointCloudModel: "Scan",
  CogniteAnnotation: "MessageSquare",
  CogniteDiagramAnnotation: "StickyNote",
  CogniteSourceSystem: "Database",
  default: "Circle",
};

export function getIconForType(typeExternalId: string | undefined): string {
  if (!typeExternalId) return NODE_TYPE_ICONS.default;

  if (NODE_TYPE_ICONS[typeExternalId]) {
    return NODE_TYPE_ICONS[typeExternalId];
  }

  const lower = typeExternalId.toLowerCase();

  if (lower.includes("connector") || lower.includes("plug")) return "Plug";
  if (lower.includes("wire")) return "Minus";
  if (lower.includes("cable")) return "Cable";
  if (lower.includes("cavity")) return "CircleDot";
  if (lower.includes("shunt") && lower.includes("collection")) return "LayoutGrid";
  if (lower.includes("shunt")) return "Zap";
  if (lower.includes("ground")) return "ArrowDownToLine";
  if (lower.includes("hardware")) return "Cpu";
  if (lower.includes("file") || lower.includes("document")) return "FileText";
  if (lower.includes("timeseries") || lower.includes("series")) return "Activity";
  if (lower.includes("asset")) return "Box";
  if (lower.includes("equipment")) return "Wrench";
  if (lower.includes("work") || lower.includes("order") || lower.includes("maintenance"))
    return "ClipboardList";
  if (lower.includes("product")) return "Package";
  if (lower.includes("area") || lower.includes("location")) return "MapPin";
  if (lower.includes("site") || lower.includes("building")) return "Building";
  if (lower.includes("3d") || lower.includes("model") || lower.includes("cad")) return "Box";
  if (lower.includes("image") || lower.includes("photo")) return "Image";
  if (lower.includes("batch")) return "Beaker";
  if (lower.includes("alert") || lower.includes("fault")) return "AlertTriangle";

  return NODE_TYPE_ICONS.default;
}

// =============================================================================
// Instance ID Helpers
// =============================================================================

export function createInstanceId(space: string, externalId: string) {
  return `${space}:${externalId}`;
}

export function parseInstanceId(id: string) {
  const [space, ...rest] = id.split(":");
  return { space, externalId: rest.join(":") };
}

// =============================================================================
// Node Label
// =============================================================================

function findNameInObject(obj: Record<string, unknown> | unknown): string | undefined {
  if (!obj || typeof obj !== "object") return undefined;
  const objRecord = obj as Record<string, unknown>;
  if (typeof objRecord.name === "string" && objRecord.name.trim().length > 0) return objRecord.name;
  for (const value of Object.values(objRecord)) {
    if (value && typeof value === "object") {
      const nested = findNameInObject(value);
      if (nested) return nested;
    }
  }
  return undefined;
}

export function getNodeLabel(node: CDFNode): string {
  if (node.properties && typeof node.properties === "object") {
    for (const viewObj of Object.values(node.properties)) {
      if (viewObj && typeof viewObj === "object") {
        const maybe = findNameInObject(viewObj);
        if (maybe) return maybe;
      }
    }
  }
  if (node.type?.externalId) {
    return node.type.externalId;
  }
  return node.externalId;
}

// =============================================================================
// Lite Hook API Types
// =============================================================================

/**
 * CDF-friendly input configuration for the `useGraphViewer` hook.
 */
export interface UseGraphViewerConfig {
  dataModel: {
    space: string;
    externalId: string;
    version: string;
  };
  instance?: {
    space: string;
    externalId: string;
  };
  options?: UseGraphViewerOptions;
}

export interface UseGraphViewerOptions {
  maxNodes?: number;
  layout?: LayoutType;
  whitelistedRelationProps?: string[];
  coreReverseQueries?: ReverseRelationQuery[];
  viewPriorityConfig?: ViewPriorityConfig;
  initialConnectionLimit?: number;
  visualConfig?: Partial<GraphVisualConfig>;
  themeConfig?: Partial<GraphThemeConfig>;
  features?: Partial<LiteFeatureFlags>;
}

export interface LiteFeatureFlags {
  enableLegend: boolean;
  enableZoomControls: boolean;
  enableNodeExpansion: boolean;
}

export const DEFAULT_LITE_FEATURES: LiteFeatureFlags = {
  enableLegend: true,
  enableZoomControls: true,
  enableNodeExpansion: true,
};

export interface GraphStats {
  totalNodes: number;
  totalConnections: number;
  nodeTypes: Record<string, number>;
  connectionTypes: Record<string, number>;
}

export interface UseGraphViewerReturn {
  GraphCanvas: React.FC<{ className?: string }>;
  isLoading: boolean;
  error: string | null;
  graphData: GraphData;
  stats: GraphStats | null;
  layout: LayoutType;
  setLayout: (layout: LayoutType) => void;
  selections: string[];
  setSelections: (ids: string[]) => void;
  selectedNode: GraphNode | null;
  selectedEdge: GraphEdge | null;
  expandNode: (nodeId: string) => Promise<void>;
  loadInstance: (space: string, externalId: string) => Promise<void>;
  fitView: () => void;
  zoomIn: () => void;
  zoomOut: () => void;
  clear: () => void;
  graphRef: React.RefObject<GraphCanvasRef | null>;
}