@eqtylab/explorer 0.0.0

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

@@ -0,0 +1,144 @@
+import {
+    Brain,
+    Database,
+    Cpu,
+    Wrench,
+    Shield,
+    FileText,
+    Table,
+    MessageSquareText,
+    MessageSquareCode,
+    MessageSquareMore,
+    MessageSquareQuote,
+    Coins,
+    Zap,
+    Bot,
+    Box,
+    LineChart,
+    Code,
+    Fence,
+    Settings2,
+} from "lucide-react";
+
+export const NODES_STYLES = {
+    default: {
+        backgroundColor: "bg-resource-unknown",
+        hoverBorderColor: "hover:border-resource-unknown hover:before:border-resource-unknown",
+        activeStyle: "border-resource-unknown",
+        icon: <Box className="size-5 text-white" />,
+    },
+    dataset: {
+        backgroundColor: "bg-resource-dataset",
+        hoverBorderColor: "hover:border-resource-dataset hover:before:border-resource-dataset",
+        activeStyle: "border-resource-dataset",
+        icon: <Table className="size-5 text-white" />,
+    },
+    model: {
+        backgroundColor: "bg-resource-model",
+        hoverBorderColor: "hover:border-resource-model hover:before:border-resource-model",
+        activeStyle: "border-resource-model",
+        icon: <Brain className="size-5 text-white" />,
+    },
+    code: {
+        backgroundColor: "bg-resource-code",
+        hoverBorderColor: "hover:border-resource-code hover:before:border-resource-code",
+        activeStyle: "border-resource-code",
+        icon: <Code className="size-5 text-white" />,
+    },
+    document: {
+        backgroundColor: "bg-resource-document",
+        hoverBorderColor: "hover:border-resource-document hover:before:border-resource-document",
+        activeStyle: "border-resource-document",
+        icon: <FileText className="size-5 text-white" />,
+    },
+    prompt: {
+        backgroundColor: "bg-resource-prompt",
+        hoverBorderColor: "hover:border-resource-prompt hover:before:border-resource-prompt",
+        activeStyle: "border-resource-prompt",
+        icon: <MessageSquareText className="size-5 text-white" />,
+    },
+    token: {
+        backgroundColor: "bg-resource-token",
+        hoverBorderColor: "hover:border-resource-token hover:before:border-resource-token",
+        activeStyle: "border-resource-token",
+        icon: <Coins className="size-5 text-white" />,
+    },
+    inference: {
+        backgroundColor: "bg-resource-inference",
+        hoverBorderColor: "hover:border-resource-inference hover:before:border-resource-inference",
+        activeStyle: "border-resource-inference",
+        icon: <Zap className="size-5 text-white" />,
+    },
+    tool: {
+        backgroundColor: "bg-resource-tools",
+        hoverBorderColor: "hover:border-resource-tools hover:before:border-resource-tools",
+        activeStyle: "border-resource-tools",
+        icon: <Wrench className="size-5 text-white" />,
+    },
+    benchmarks: {
+        backgroundColor: "bg-resource-benchmark",
+        hoverBorderColor: "hover:border-resource-benchmark hover:before:border-resource-benchmark",
+        activeStyle: "border-resource-benchmark",
+        icon: <LineChart className="size-5 text-white" />,
+    },
+    benchmark: {
+        backgroundColor: "bg-resource-benchmark",
+        hoverBorderColor: "hover:border-resource-benchmark hover:before:border-resource-benchmark",
+        activeStyle: "border-resource-benchmark",
+        icon: <LineChart className="size-5 text-white" />,
+    },
+    guards: {
+        backgroundColor: "bg-resource-guard",
+        hoverBorderColor: "hover:border-resource-guards hover:before:border-resource-guard",
+        activeStyle: "border-resource-guard",
+        icon: <Shield className="size-5 text-white" />,
+    },
+    agent: {
+        backgroundColor: "bg-resource-agent",
+        hoverBorderColor: "hover:border-resource-agent hover:before:border-resource-agent",
+        activeStyle: "border-resource-agent",
+        icon: <Bot className="size-5 text-white" />,
+    },
+    guardrail: {
+        backgroundColor: "bg-resource-guardrail",
+        hoverBorderColor: "hover:border-resource-guardrail hover:before:border-resource-guardrail",
+        activeStyle: "border-resource-guardrail",
+        icon: <Fence className="size-5 text-white" />,
+    },
+    computation: {
+        backgroundColor: "bg-resource-compute",
+        hoverBorderColor: "hover:border-resource-compute hover:before:border-resource-compute",
+        activeStyle: "border-resource-compute",
+        icon: <Cpu className="size-5 text-white" />,
+    },
+    "system-prompt": {
+        backgroundColor: "bg-resource-system-prompt",
+        hoverBorderColor: "hover:border-resource-system-prompt hover:before:border-resource-system-prompt",
+        activeStyle: "border-resource-system-prompt",
+        icon: <MessageSquareCode className="size-5 text-white" />,
+    },
+    context: {
+        backgroundColor: "bg-resource-context",
+        hoverBorderColor: "hover:border-resource-context hover:before:border-resource-context",
+        activeStyle: "border-resource-context",
+        icon: <MessageSquareQuote className="size-5 text-white" />,
+    },
+    reasoning: {
+        backgroundColor: "bg-resource-reasoning",
+        hoverBorderColor: "hover:border-resource-reasoning hover:before:border-resource-reasoning",
+        activeStyle: "border-resource-reasoning",
+        icon: <MessageSquareMore className="size-5 text-white" />,
+    },
+    "system-parameters": {
+        backgroundColor: "bg-resource-system-parameters",
+        hoverBorderColor: "hover:border-resource-system-parameters hover:before:border-resource-system-parameters",
+        activeStyle: "border-resource-system-parameters",
+        icon: <Settings2 className="size-5 text-white" />,
+    },
+    database: {
+        backgroundColor: "bg-resource-database",
+        hoverBorderColor: "hover:border-resource-database hover:before:border-resource-database",
+        activeStyle: "border-resource-database",
+        icon: <Database className="size-5 text-white" />,
+    },
+};

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

@@ -0,0 +1,167 @@
+/// This types file is for types used directly by the Explorer
+import { v4 as uuidv4 } from "uuid";
+import { Node, Edge } from "reactflow";
+import { Actor, VerifiableCredential, Anchor } from "../../integrityTypes/types";
+import {
+    GovernanceStatement,
+    MetadataStatement,
+    Statement,
+    StorageStatement,
+    VcStatement,
+    SigstoreBundle,
+} from "../../integrityTypes/StatementTypes";
+
+// Custom edge to support dagre layout
+export type LineageEdge = Edge<EdgeData>;
+
+export type EdgeData = {
+    // Used for custom styling when highlighting a subgraph in the lineage
+    isInSubGraph: boolean;
+};
+
+export function createEdge(source: string, target: string): LineageEdge {
+    const edge: LineageEdge = {
+        id: uuidv4(),
+        source: source,
+        target: target,
+        type: "custom-edge",
+        data: {
+            isInSubGraph: true,
+        },
+    };
+    return edge;
+}
+
+export type LineageNode = Node<NodeData>;
+
+// Custom data we add to the node to support later processing and display
+export type NodeData = {
+    // Display Items
+    label: string;
+    nodeShape: NodeShape;
+    icon: string;
+    displayType: string;
+    size: NodeSize;
+    customIcons?: Record<string, string>; // User supplied icons
+    sub_graph?: SubgraphInfo; // Graph the node belongs too
+
+    // Used to display the "handles" that the edges attach to
+    hasSuccessorNode: boolean;
+    hasPrecedingNode: boolean;
+
+    // Used for custom styling when highlighting a subgraph in the lineage
+    isInSubGraph: boolean;
+    sidebarData: DataNodeSidebarData | ComputeNodeSidebarData | null;
+    isActive: boolean;
+};
+
+export type MetadataLineage = {
+    statement: MetadataStatement;
+    metadata: object;
+    vc?: VerifiableCredential;
+};
+
+export type DataNodeRegistration = {
+    // can have multiple VCs and Anchors for a single statement
+    statement: Statement;
+    registeredByActor: Actor; // Actor (user DID) information
+    anchors?: Anchor;
+    vcs?: VcStatement[];
+};
+
+export type StorageLineage = {
+    statement: StorageStatement;
+    metadata: object;
+};
+
+export type DataNodeSidebarData = {
+    // Additional data for the sidebar
+    registrations?: DataNodeRegistration[];
+    metadata?: object[]; // User supplied metadata items
+    metadataLineage?: MetadataLineage[]; // Metadata Statement(s) corresponding VCs for the data
+    sourceData?: IrohData[] | string; // list of iroh files or single file blob
+    storage?: StorageLineage;
+    governance?: GovernanceStatement;
+    sigstoreBundles?: SigstoreBundle[];
+};
+
+export type ComputeNodeSidebarData = {
+    statement: Statement; // the integrity statement and anchor if available
+    metadata?: object; // User supplied metadata items
+    metadataLineage?: MetadataLineage[]; // Metadata Statement corresponding VCs for the data
+    vcStatement?: VcStatement[]; // integrity VC statement
+    registeredByActor: Actor; // Actor (user DID) information
+    executedOnActor?: Actor; // Actor (user DID) information
+    operatedByActor?: Actor; // Actor (user DID) information
+    sourceData?: IrohData[] | string; // list of iroh files or single file blob
+    anchor?: Anchor;
+    governance?: GovernanceStatement;
+};
+
+export type IrohData = {
+    path: string; // name of file in the collection
+    cid: string; // CID of the file
+    data: string | null; // Decoded data from the file
+};
+
+export const defaultNodeSize = { width: 200, height: 50 };
+export type NodeShape = "round" | "square";
+export type NodeUIComponent = "CustomNode" | "ComputationNode";
+export type NodeSize = {
+    width: number;
+    height: number;
+};
+export type NodeConfig = {
+    displayType: string;
+    shape: NodeShape;
+    icon: string;
+    component: NodeUIComponent;
+    size: NodeSize;
+};
+
+export function createDefaultNode(
+    id: string,
+    nodeConfig: NodeConfig,
+    label: string,
+    customIcons?: Record<string, string>,
+    graph?: Subgraph,
+): LineageNode {
+    const node: LineageNode = {
+        id: id,
+        type: nodeConfig.component,
+        data: {
+            label: label,
+            nodeShape: nodeConfig.shape,
+            icon: nodeConfig.icon,
+            displayType: nodeConfig.displayType,
+            size: nodeConfig.size,
+            hasSuccessorNode: true,
+            hasPrecedingNode: true,
+            isInSubGraph: true,
+            sidebarData: null,
+            customIcons: customIcons,
+            isActive: false,
+            sub_graph: graph,
+        },
+        position: { x: 0, y: 0 },
+    };
+
+    return node;
+}
+
+/// Structure of the V4 Manifest (with graphs)
+export interface GraphManifest {
+    graphs: Array<Subgraph>;
+    blobs: Record<string, string>;
+    anchors?: Anchor[];
+}
+
+export interface Subgraph extends SubgraphInfo {
+    statements: Array<object>;
+}
+
+export interface SubgraphInfo {
+    id: string;
+    name: string;
+    parent?: string;
+}

package/src/explorer-component/components/sidebar/SectionList.tsx

@@ -0,0 +1,54 @@
+import { Fragment } from "react/jsx-runtime";
+import { cn } from "@/lib/utils";
+interface DataProps {
+    label?: string;
+    value: React.ReactNode;
+    offsetTopLabel?: boolean;
+}
+
+export const SectionList = ({ data, className }: { data: DataProps[]; className?: string }) => {
+    return (
+        <SectionListWrapper className={cn("mt-6", className)}>
+            {data.map((item, index) => {
+                if (!item.value) return null;
+
+                if (!item.label) return <OneColumnListItem key={index} value={item.value} />;
+
+                return <TwoColumnListItem key={`${item.label}-${index}`} {...item} />;
+            })}
+        </SectionListWrapper>
+    );
+};
+
+export const SectionListWrapper = ({ children, className }: { children: React.ReactNode; className?: string }) => {
+    return <div className={cn("grid grid-cols-[7.125rem_minmax(0,1fr)] gap-x-3 gap-y-4", className)}>{children}</div>;
+};
+
+export const TwoColumnListItem = ({ label, value, offsetTopLabel = false }: DataProps) => {
+    return (
+        <Fragment>
+            <h5
+                className={cn(
+                    "text-sm font-medium text-text-secondary text-right capitalize",
+                    offsetTopLabel ? "mt-2" : "",
+                )}
+            >
+                {label}
+            </h5>
+            <div className="w-full text-sm break-all">{value}</div>
+        </Fragment>
+    );
+};
+
+const OneColumnListItem = ({ value }: DataProps) => {
+    return <div className="col-span-2 w-full">{value}</div>;
+};
+
+export const SectionInnerTitle = ({ title }: { title: string }) => {
+    return (
+        <div className="col-span-2 w-full flex items-center gap-3">
+            <h5 className="font-medium text-sm">{title}</h5>
+            <div className="h-px bg-border flex-1" />
+        </div>
+    );
+};

package/src/explorer-component/components/sidebar/SectionTitle.tsx

@@ -0,0 +1,10 @@
+const SectionTitle = ({ title, renderRightContent }: { title: string; renderRightContent?: () => React.ReactNode }) => {
+    return (
+        <div className="border-b border-border pb-3 flex items-center justify-between w-full">
+            <h3 className="text-lg font-medium">{title}</h3>
+            {renderRightContent && renderRightContent()}
+        </div>
+    );
+};
+
+export default SectionTitle;

package/src/explorer-component/components/sidebar/Sidebar.tsx

@@ -0,0 +1,70 @@
+import { IconButton } from "@eqtylab/equality";
+
+import { LineageNode } from "../nodes/types.ts";
+import RegistrationSection from "./sections/RegistrationSection.tsx";
+import CustomSection from "./sections/CustomSection.tsx";
+import { cn } from "@/lib/utils.ts";
+import { NODES_STYLES } from "../nodes/nodes.tsx";
+import { ParsedManifest, UploadVerification } from "@/v-comp-viewer/utils.tsx";
+import GovernanceSection from "./sections/GovernanceSection.tsx";
+import StorageSection from "./sections/StorageSection.tsx";
+import SigstoreSection from "./sections/SigstoreSection.tsx";
+import SidebarWrapper from "./SidebarWrapper.tsx";
+
+type Props = {
+    node: LineageNode | null;
+    onCloseClick: () => void;
+    vCompData: ParsedManifest | null;
+    vCompVerifyData: UploadVerification | null;
+};
+
+const Sidebar = ({ node, onCloseClick, vCompData, vCompVerifyData }: Props) => {
+    if (!node) {
+        return null;
+    }
+
+    console.log("Sidebar node data:", node.data);
+
+    const nodeType = (() => {
+        if (!node.data.displayType) return "default";
+        switch (node.data.displayType) {
+            case "Unknown":
+                return "default";
+            default:
+                return node.data.displayType.toLowerCase();
+        }
+    })() as keyof typeof NODES_STYLES;
+
+    const nodeStyle = NODES_STYLES[nodeType] || NODES_STYLES["default"];
+
+    return (
+        <SidebarWrapper>
+            {/* Header */}
+            <div className="flex items-center justify-between gap-4 bg-[linear-gradient(90deg,rgba(226,204,255,0.2)_0%,rgba(136,122,153,0.1)_100%)] py-3 pl-6 pr-4">
+                <div className="flex items-center gap-2">
+                    <div
+                        className={cn(
+                            "flex size-10 items-center justify-center rounded-full",
+                            nodeStyle.backgroundColor,
+                        )}
+                    >
+                        {nodeStyle.icon}
+                    </div>
+                    <h2 className="text-xl font-semibold capitalize">{node.data.displayType}</h2>
+                </div>
+
+                <IconButton name="X" size="md" onClick={onCloseClick}></IconButton>
+            </div>
+            {/* Content */}
+            <div className="grid gap-10 pb-14 pl-6 pr-7 pt-6 bg-background-raised">
+                <RegistrationSection node={node} vCompData={vCompData} vCompVerifyData={vCompVerifyData} />
+                <CustomSection node={node} />
+                <GovernanceSection node={node} />
+                <StorageSection node={node} />
+                <SigstoreSection node={node} />
+            </div>
+        </SidebarWrapper>
+    );
+};
+
+export default Sidebar;

package/src/explorer-component/components/sidebar/SidebarWrapper.tsx

@@ -0,0 +1,76 @@
+import { cn } from "@/lib/utils.ts";
+import { GripVertical } from "lucide-react";
+import { useState, useRef, useEffect } from "react";
+
+type Props = {
+    children: React.ReactNode;
+};
+
+const MIN_WIDTH = 34.3 * 16; // 34.3rem in pixels
+
+const SidebarWrapper = ({ children }: Props) => {
+    const [width, setWidth] = useState(MIN_WIDTH);
+    const [isResizing, setIsResizing] = useState(false);
+    const sidebarRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            if (!isResizing || !sidebarRef.current) return;
+
+            // Calculate new width based on right edge of viewport minus cursor position
+            const newWidth = window.innerWidth - e.clientX;
+            const clampedWidth = Math.max(MIN_WIDTH, newWidth);
+            setWidth(clampedWidth);
+        };
+
+        const handleMouseUp = () => {
+            setIsResizing(false);
+        };
+
+        if (isResizing) {
+            document.addEventListener("mousemove", handleMouseMove);
+            document.addEventListener("mouseup", handleMouseUp);
+            document.body.style.cursor = "ew-resize";
+            document.body.style.userSelect = "none";
+        }
+
+        return () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+        };
+    }, [isResizing]);
+
+    const handleMouseDown = () => {
+        setIsResizing(true);
+    };
+
+    return (
+        <div
+            ref={sidebarRef}
+            className="absolute right-0 top-0 z-40 h-full max-w-[80%]"
+            style={{ width: `${width}px` }}
+        >
+            <div
+                className={cn(
+                    "flex h-full w-full flex-col overflow-auto border-l border-border bg-background-raised transition-all duration-500",
+                )}
+            >
+                {children}
+            </div>
+            {/* Drag handle */}
+            <button
+                onMouseDown={handleMouseDown}
+                className={cn(
+                    "absolute top-1/2 left-0 -translate-y-1/2 -translate-x-6 hover:text-brand-primary transition-colors duration-300 px-1 py-3 border-border rounded-s-md border-y border-l bg-background-raised",
+                    isResizing ? "cursor-grabbing" : "cursor-grab",
+                )}
+            >
+                <GripVertical className="size-4" />
+            </button>
+        </div>
+    );
+};
+
+export default SidebarWrapper;