@eqtylab/explorer 0.0.0

package/src/components/ui/display-code.tsx

@@ -0,0 +1,47 @@
+import { DisplayField, DisplayFieldProps } from "@eqtylab/equality";
+
+import { Validated } from "@/v-comp-viewer/utils";
+
+type DisplayCodeProps = DisplayFieldProps & {
+    value: string;
+    validated?: Validated;
+};
+
+const DisplayCode = ({ value, validated, ...props }: DisplayCodeProps) => {
+    const splitValue = value.split(":");
+    let prefix = "";
+    let id = value;
+    if (splitValue.length === 3) {
+        prefix = splitValue[1];
+        id = splitValue[2];
+    } else if (splitValue.length === 2) {
+        prefix = splitValue[0];
+        id = splitValue[1];
+    } else if (!prefix && value.startsWith("0x")) {
+        prefix = "0x";
+    }
+
+    const isHexadecimal = prefix.startsWith("0x");
+    const truncatedString = isHexadecimal ? id.slice(2) : id;
+
+    const variants: Partial<Record<Validated, DisplayFieldProps["variant"]>> = {
+        valid: "success",
+        partial: "neutral",
+        invalid: "failure",
+    };
+
+    return (
+        <DisplayField
+            className="break-normal"
+            variant={props.variant || (validated ? variants[validated] : undefined)}
+            prefix={props.prefix || (isHexadecimal ? prefix : prefix.toUpperCase())}
+            truncate={props.truncate || "middle"}
+            elevation="raised"
+            {...props}
+        >
+            {truncatedString}
+        </DisplayField>
+    );
+};
+
+export default DisplayCode;

package/src/components/ui/panel-label.tsx

@@ -0,0 +1,12 @@
+import { cn } from "@/lib/utils";
+
+interface PanelLabelProps {
+    className?: string;
+    label: string;
+}
+
+const PanelLabel = ({ className, label }: PanelLabelProps) => {
+    return <div className={cn("text-xxs font-semibold uppercase tracking-[0.5px]", className)}>{label}</div>;
+};
+
+export default PanelLabel;

package/src/components/ui/verify-state-badge.tsx

@@ -0,0 +1,32 @@
+import { Badge, BadgeProps } from "@eqtylab/equality";
+
+export type VerificationStateType = "verifying" | "verified" | "unverified" | "partial";
+
+interface VerifyStateBadgeProps {
+    state: VerificationStateType;
+    displayText?: boolean;
+}
+
+const getConfig = (state: VerificationStateType): { icon?: string; variant: BadgeProps["variant"]; label: string } => {
+    switch (state) {
+        case "verifying":
+            return { icon: "Ellipsis", variant: "neutral", label: "Verifying" };
+        case "verified":
+            return { variant: "success", label: "Verified" };
+        case "partial":
+            return { variant: "warning", label: "Partially Verified" };
+        case "unverified":
+            return { variant: "danger", label: "Unverified" };
+    }
+};
+
+const VerifyStateBadge = ({ state, displayText }: VerifyStateBadgeProps) => {
+    const { icon, variant, label } = getConfig(state);
+    return (
+        <Badge variant={variant} icon={icon} display={displayText ? "both" : "icon-only"}>
+            {displayText && <span>{label}</span>}
+        </Badge>
+    );
+};
+
+export default VerifyStateBadge;

package/src/explorer-component/LineageExplorer.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from "react";
+import { ReactFlowProvider } from "reactflow";
+import "@xyflow/react/dist/style.css";
+import LineageFlow from "./components/LineageFlow.tsx";
+import { generateGraphFromStatements, generateGraphFromGraphs } from "./utils/generateGraph.ts";
+import { LineageNode, LineageEdge } from "./components/nodes/types.ts";
+import Sidebar from "./components/sidebar/Sidebar.tsx";
+import { ExplorerConfig } from "./utils/config";
+import { ParsedManifest, UploadVerification } from "@/v-comp-viewer/utils";
+
+interface LineageExplorerProps {
+    manifestJson: any;
+    config: ExplorerConfig;
+    customIcons?: Record<string, string>;
+    vCompData: ParsedManifest | null;
+    vCompVerifyData: UploadVerification | null;
+}
+
+const LineageExplorer: React.FC<LineageExplorerProps> = ({
+    manifestJson,
+    config,
+    customIcons,
+    vCompData,
+    vCompVerifyData,
+}: LineageExplorerProps) => {
+    const [nodes, setNodes] = useState<LineageNode[]>([]);
+    const [edges, setEdges] = useState<LineageEdge[]>([]);
+    const [selectedNode, setSelectedNode] = useState<LineageNode | null>(null);
+
+    const isSidebarOpen = selectedNode !== null;
+
+    useEffect(() => {
+        if (!manifestJson || Object.keys(manifestJson).length === 0) {
+            setNodes([]);
+            setEdges([]);
+            setSelectedNode(null);
+            return;
+        }
+        setSelectedNode(null);
+
+        let nodes: LineageNode[];
+        let edges: LineageEdge[];
+
+        // Check if this is the new graph-based manifest format or the legacy format
+        if (manifestJson.version == "4") {
+            console.log("Processing V4 manifest");
+            // New format: manifest has graphs array with nested statements
+            [nodes, edges] = generateGraphFromGraphs(config, manifestJson, customIcons);
+        } else {
+            // Legacy format: manifest has flat statements object
+            [nodes, edges] = generateGraphFromStatements(
+                config,
+                manifestJson.statements,
+                manifestJson.blobs,
+                manifestJson.anchors,
+                customIcons,
+            );
+        }
+
+        setNodes(nodes);
+        setEdges(edges);
+    }, [manifestJson]);
+
+    return (
+        <div
+            id="lineage-explorer"
+            className="relative size-full bg-background font-sans text-text-primary transition-colors"
+        >
+            <ReactFlowProvider>
+                <LineageFlow
+                    manifestJson={manifestJson}
+                    nodes={nodes}
+                    edges={edges}
+                    onNodeSelect={setSelectedNode}
+                    sidebarOpen={isSidebarOpen}
+                />
+            </ReactFlowProvider>
+            <Sidebar
+                node={selectedNode}
+                onCloseClick={() => setSelectedNode(null)}
+                vCompData={vCompData}
+                vCompVerifyData={vCompVerifyData}
+            />
+            <div id="explorer-portal-root" />
+        </div>
+    );
+};
+
+export default LineageExplorer;

package/src/explorer-component/components/CustomEdge.tsx

@@ -0,0 +1,28 @@
+import { BaseEdge, EdgeProps, getBezierPath } from "reactflow";
+import { motion } from "framer-motion";
+import { LineageEdge } from "./nodes/types.ts";
+
+const CustomEdge: React.FC<EdgeProps<LineageEdge["data"]>> = ({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    data,
+}) => {
+    const [edgePath] = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
+
+    return (
+        <motion.g
+            animate={{ opacity: data?.isInSubGraph ? 1 : 0.1 }}
+            initial={{ opacity: 0 }}
+            transition={{ duration: 1.5 }}
+            className="*:stroke-text-secondary! *:stroke-2!"
+        >
+            <BaseEdge path={edgePath} />
+        </motion.g>
+    );
+};
+
+export default CustomEdge;

package/src/explorer-component/components/LineageFlow.tsx

@@ -0,0 +1,220 @@
+import React, { useEffect, useCallback, useState, useRef } from "react";
+import ReactFlow, { useReactFlow, Background, NodeChange } from "reactflow";
+import { CustomNode, ComputationNode } from "./nodes";
+import CustomEdge from "./CustomEdge.tsx";
+import { LineageNode, LineageEdge } from "./nodes/types.ts";
+
+const nodeTypes = {
+    CustomNode,
+    ComputationNode,
+};
+const edgeTypes = { "custom-edge": CustomEdge };
+
+interface Props {
+    manifestJson: any;
+    nodes: LineageNode[];
+    edges: LineageEdge[];
+    onNodeSelect: (node: LineageNode | null) => void;
+    sidebarOpen: boolean;
+}
+
+const LineageFlow: React.FC<Props> = ({ nodes, edges, onNodeSelect, sidebarOpen }) => {
+    const [graphNodes, setNodes] = useState<LineageNode[]>(nodes);
+    const [graphEdges, setEdges] = useState<LineageEdge[]>(edges);
+    const reactFlowInstance = useReactFlow();
+
+    useEffect(() => {
+        if (!sidebarOpen) {
+            // Handling closed sidebar
+            setActiveSubGraph(null);
+        }
+    }, [sidebarOpen]);
+
+    useEffect(() => {
+        setNodes(nodes);
+    }, [nodes]);
+
+    useEffect(() => {
+        setEdges(edges);
+    }, [edges]);
+
+    // Finds the node that was selected and passes it to the onNodeSelect callback
+    const handleNodesChange = useCallback(
+        (changes: NodeChange[]) => {
+            for (const change of changes) {
+                if (change.type === "select" && change.selected) {
+                    const node = nodes.find((n) => n.id === change.id);
+                    if (node) {
+                        setActiveSubGraph(node);
+                        onNodeSelect(node);
+                        // Delay subgraph update to avoid UI jump
+                        setTimeout(() => zoomToNode(node), 300);
+                    }
+                }
+            }
+        },
+        [graphNodes],
+    );
+
+    // Returns the IDs of all ancestor and descendant nodes and edges in the lineage chain
+    const findNeighbors = (nodeId: string | null): string[] => {
+        if (!nodeId) return [];
+
+        const visitedNodes = new Set<string>();
+        const visitedEdges = new Set<string>();
+        const allConnectedIds: string[] = [];
+
+        const traverseAncestors = (currentNodeId: string) => {
+            if (visitedNodes.has(currentNodeId)) return;
+
+            visitedNodes.add(currentNodeId);
+
+            // Find edges where the current node is the TARGET (meaning we go backwards in lineage)
+            const incomingEdges = edges.filter((edge) => edge.target === currentNodeId);
+
+            for (const edge of incomingEdges) {
+                if (!visitedEdges.has(edge.id)) {
+                    visitedEdges.add(edge.id);
+                    allConnectedIds.push(edge.id);
+
+                    // Get the source node (the ancestor)
+                    const ancestorNodeId = edge.source;
+
+                    // Recursively traverse the ancestor node
+                    traverseAncestors(ancestorNodeId);
+                }
+            }
+        };
+
+        const traverseDescendants = (currentNodeId: string) => {
+            if (visitedNodes.has(currentNodeId)) return;
+
+            visitedNodes.add(currentNodeId);
+
+            // Find edges where the current node is the SOURCE (meaning we go forwards in lineage)
+            const outgoingEdges = edges.filter((edge) => edge.source === currentNodeId);
+
+            for (const edge of outgoingEdges) {
+                if (!visitedEdges.has(edge.id)) {
+                    visitedEdges.add(edge.id);
+                    allConnectedIds.push(edge.id);
+
+                    // Get the target node (the descendant)
+                    const descendantNodeId = edge.target;
+
+                    // Recursively traverse the descendant node
+                    traverseDescendants(descendantNodeId);
+                }
+            }
+        };
+
+        // First traverse ancestors (this will mark the original node as visited)
+        traverseAncestors(nodeId);
+
+        // Then traverse descendants (starting fresh from the original node)
+        // We need to reset the visited state for the original node to allow descendant traversal
+        visitedNodes.delete(nodeId);
+        traverseDescendants(nodeId);
+
+        // Add all visited node IDs (excluding the original node)
+        const connectedNodeIds = Array.from(visitedNodes).filter((id) => id !== nodeId);
+
+        return [...allConnectedIds, ...connectedNodeIds];
+    };
+
+    // Updates Node and Edge Property `isInSubGraph`
+    const setActiveSubGraph = (node: LineageNode | null) => {
+        let updatedNodes: LineageNode[] = [];
+        let updatedEdges: LineageEdge[] = [];
+        if (!node) {
+            // If no node is selected, all elements are 'active' in the graph
+            updatedNodes = nodes.map((n) => ({
+                ...n,
+                data: {
+                    ...n.data,
+                    isInSubGraph: true,
+                },
+            }));
+            updatedEdges = edges.map((edge) => ({
+                ...edge,
+                data: {
+                    ...edge.data,
+                    isInSubGraph: true,
+                },
+            }));
+        } else {
+            // If the node or edge is a neighbor to the selected node, set isInSubGraph = true, else set it to false
+            const neighbors = findNeighbors(node.id);
+
+            updatedNodes = nodes.map((n) => ({
+                ...n,
+                data: {
+                    ...n.data,
+                    isInSubGraph: neighbors.includes(n.id) || n.id === node.id,
+                    isActive: n.id === node.id,
+                },
+            }));
+            updatedEdges = edges.map((edge) => ({
+                ...edge,
+                data: {
+                    ...edge.data,
+                    isInSubGraph: neighbors.includes(edge.id),
+                },
+            }));
+        }
+
+        setNodes(updatedNodes);
+        setEdges(updatedEdges);
+    };
+
+    // moves the graph to the center of the screen on load
+    const hasFitViewRun = useRef(false);
+    // Reset whenever the nodes prop changes (meaning, new data)
+    useEffect(() => {
+        hasFitViewRun.current = false;
+    }, [nodes]);
+    useEffect(() => {
+        if (!reactFlowInstance || hasFitViewRun.current || nodes.length === 0) return;
+
+        hasFitViewRun.current = true;
+
+        const timeout = setTimeout(() => {
+            reactFlowInstance.fitView({
+                duration: 1200,
+                padding: 0.3,
+            });
+        }, 100);
+
+        return () => clearTimeout(timeout);
+    }, [reactFlowInstance, nodes]);
+
+    const zoomToNode = (node: LineageNode) => {
+        if (!reactFlowInstance) return;
+
+        const sidebarOffset = 250;
+        reactFlowInstance.setCenter(node.position.x + sidebarOffset, node.position.y, { zoom: 1.05, duration: 1000 });
+    };
+
+    return (
+        <div className="size-full">
+            <ReactFlow
+                nodes={graphNodes}
+                edges={graphEdges}
+                onNodesChange={handleNodesChange}
+                snapToGrid={false}
+                defaultViewport={{ x: -500, y: -500, zoom: 0.5 }}
+                minZoom={0.05}
+                proOptions={{ hideAttribution: true }}
+                nodeTypes={nodeTypes}
+                edgeTypes={edgeTypes}
+                nodesDraggable={false}
+                nodesConnectable={false}
+                edgesFocusable={false}
+            >
+                <Background gap={12} size={1} />
+            </ReactFlow>
+        </div>
+    );
+};
+
+export default LineageFlow;

package/src/explorer-component/components/NodeIconLoader.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { BuiltInIcons } from "@/explorer-component/icons";
+
+interface NodeIconLoaderProps {
+    path: string;
+    className?: string;
+    iconMap?: Record<string, string | React.FC<React.SVGProps<SVGSVGElement>>>;
+}
+
+const NodeIconLoader: React.FC<NodeIconLoaderProps> = ({ path, className, iconMap }) => {
+    const iconEntry = iconMap?.[path] ?? BuiltInIcons[path];
+
+    if (!iconEntry) {
+        console.error(`Icon "${path}" not found.`);
+        return null;
+    }
+
+    if (typeof iconEntry === "string") {
+        return <img src={iconEntry} className={className} alt={path} />;
+    }
+
+    const SvgComponent = iconEntry;
+    return <SvgComponent className={className} />;
+};
+
+export default NodeIconLoader;

package/src/explorer-component/components/nodes/ComputationNode.tsx

@@ -0,0 +1,56 @@
+import { motion } from "framer-motion";
+import { Handle, Position, NodeProps } from "reactflow";
+
+import { cn } from "@/lib/utils.ts";
+
+import { NODES_STYLES } from "./nodes.tsx";
+
+import { LineageNode } from "./types.ts";
+
+export const ComputationNode: React.FC<NodeProps<LineageNode["data"]>> = ({ data }) => {
+    const { hasPrecedingNode, hasSuccessorNode, isInSubGraph, isActive } = data;
+
+    return (
+        <motion.div
+            animate={{ opacity: isInSubGraph ? 1 : 0.1 }}
+            initial={{ opacity: 0 }}
+            transition={{ duration: 1.5 }}
+        >
+            <div className="relative z-20">
+                <div
+                    className={cn(
+                        "flex size-14 items-center justify-center rounded-full bg-resource-compute border hover:border-resource-compute transition-all",
+                        isActive ? "border-resource-compute" : "border-background",
+                    )}
+                >
+                    {NODES_STYLES["computation"].icon}
+                </div>
+
+                {hasPrecedingNode && (
+                    <Handle
+                        type="target"
+                        position={Position.Left}
+                        id="left"
+                        className="-translate-x-full! -translate-y-1/2! border! border-text-primary! bg-card-background!"
+                    />
+                )}
+                {hasSuccessorNode && (
+                    <Handle
+                        type="source"
+                        position={Position.Right}
+                        id="source"
+                        className="-translate-y-1/2! translate-x-full! border! border-text-primary! bg-card-background!"
+                    />
+                )}
+            </div>
+            <motion.div
+                className="absolute inset-0 size-full opacity-50"
+                animate={{ scale: isActive ? 1 : 0 }}
+                initial={{ scale: 0 }}
+                transition={{ duration: 1 }}
+            >
+                <div className="rounded-full size-full scale-[1.25] animate-pulse bg-resource-compute" />
+            </motion.div>
+        </motion.div>
+    );
+};

package/src/explorer-component/components/nodes/CustomNode.tsx

@@ -0,0 +1,112 @@
+import { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+import { Handle, Position, useReactFlow, NodeProps } from "reactflow";
+
+import { LineageNode } from "./types.ts";
+import { cn } from "@/lib/utils.ts";
+import { NODES_STYLES } from "./nodes.tsx";
+
+import PanelLabel from "@/components/ui/panel-label.tsx";
+
+export const CustomNode: React.FC<NodeProps<LineageNode["data"]>> = ({ data }) => {
+    const { getZoom } = useReactFlow();
+    const [showLabel, setShowLabel] = useState(true);
+
+    const { label, displayType, hasSuccessorNode, hasPrecedingNode, isInSubGraph, isActive } = data;
+
+    const maxLength = 19;
+    const nodeLabel = label.length > maxLength ? label.substring(0, maxLength - 3) + "..." : label;
+
+    useEffect(() => {
+        const handleZoom = () => {
+            const zoom = getZoom();
+            setShowLabel(zoom > 0.5);
+        };
+        // Polling as zoom change listener isn't exposed directly
+        const interval = setInterval(handleZoom, 300);
+        return () => clearInterval(interval);
+    }, [getZoom]);
+
+    const nodeType = (() => {
+        if (!displayType) return "default";
+        switch (displayType) {
+            case "Unknown":
+                return "default";
+            default:
+                return displayType.toLowerCase();
+        }
+    })() as keyof typeof NODES_STYLES;
+
+    const nodeStyle = NODES_STYLES[nodeType] || NODES_STYLES["default"];
+
+    return (
+        <motion.div
+            animate={{ opacity: isInSubGraph ? 1 : 0.1 }}
+            initial={{ opacity: 0 }}
+            transition={{ duration: 1.5 }}
+        >
+            <div
+                className={cn(
+                    "relative border border-card-border bg-card-background p-2 transition-all rounded-full z-20",
+                    nodeStyle.hoverBorderColor,
+                    isActive ? nodeStyle.activeStyle : "",
+                )}
+            >
+                <div className="grid w-50 min-w-50 grid-cols-[auto_1fr] items-center gap-3">
+                    <div
+                        className={cn(
+                            "flex size-10 items-center justify-center rounded-full",
+                            nodeStyle.backgroundColor,
+                        )}
+                    >
+                        {nodeStyle.icon}
+                    </div>
+                    <div className="relative">
+                        <div className={cn("transition-all", showLabel ? "opacity-100" : "opacity-0")}>
+                            <PanelLabel label={displayType} className="opacity-70" />
+                            <p className="mt-0.5 line-clamp-2 text-sm leading-[1.1] text-foreground">{nodeLabel}</p>
+                        </div>
+                        <div
+                            className={cn(
+                                "transition-all absolute top-1/2 left-0 -translate-y-1/2",
+                                !showLabel ? "opacity-100" : "opacity-0",
+                            )}
+                        >
+                            <p>{displayType}</p>
+                        </div>
+                    </div>
+                </div>
+
+                {hasPrecedingNode && (
+                    <Handle
+                        type="target"
+                        position={Position.Left}
+                        id="left"
+                        className="-translate-x-full! -translate-y-1/2! border! border-text-secondary! bg-card-background!"
+                    />
+                )}
+                {hasSuccessorNode && (
+                    <Handle
+                        type="source"
+                        position={Position.Right}
+                        id="source"
+                        className="-translate-y-1/2! translate-x-full! border! border-text-secondary! bg-card-background!"
+                    />
+                )}
+            </div>
+            <motion.div
+                className={cn("absolute inset-0 size-full opacity-50")}
+                animate={{ scale: isActive ? 1 : 0 }}
+                initial={{ scale: 0 }}
+                transition={{ duration: 1 }}
+            >
+                <div
+                    className={cn(
+                        "rounded-full size-full scale-x-[1.06] scale-y-[1.20] animate-pulse",
+                        nodeStyle.backgroundColor,
+                    )}
+                />
+            </motion.div>
+        </motion.div>
+    );
+};

package/src/explorer-component/components/nodes/index.ts

@@ -0,0 +1,4 @@
+import { ComputationNode } from "./ComputationNode";
+import { CustomNode } from "./CustomNode";
+
+export { ComputationNode, CustomNode };