@eqtylab/explorer 0.0.0

package/src/explorer-component/components/sidebar/sections/RegistrationSection.tsx

@@ -0,0 +1,254 @@
+import { IconButton } from "@eqtylab/equality";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@eqtylab/equality";
+
+import { DataNodeRegistration, LineageNode } from "../../nodes/types";
+import { StatementVerficationIcon, VCVerficationIcon } from "./registration/VerificationIcon";
+import { ActorBadge } from "./registration/actor/ActorBadge";
+import {
+    Actor,
+    Anchor,
+    Statement,
+    ComputationStatement,
+    VcStatement,
+    RegistrationTypes,
+} from "@/explorer-component/integrityTypes/types";
+import SectionTitle from "../SectionTitle";
+import { SectionList } from "../SectionList";
+import ContainerDidDetails from "@/v-comp-viewer/components/container-did-details";
+import { ParsedManifest, UploadVerification } from "@/v-comp-viewer/utils";
+import SystemDidDetails from "@/v-comp-viewer/components/system-did-details";
+import { useEffect, useState } from "react";
+import { formatTimestamp } from "@/explorer-component/utils/formatTimestamp";
+import DisplayCode from "@/components/ui/display-code";
+
+type Props = {
+    node: LineageNode;
+    vCompData: ParsedManifest | null;
+    vCompVerifyData: UploadVerification | null;
+};
+
+const RegistrationSection = ({ node, vCompData, vCompVerifyData }: Props) => {
+    const sidebarData = node?.data.sidebarData;
+
+    if (sidebarData && "registrations" in sidebarData) {
+        // Display Registration(s) for Data Node
+        const registrations = sidebarData.registrations;
+
+        if (!registrations) return null;
+
+        return (
+            <div>
+                <SectionTitle title="Registration" />
+                <MultipleRegistrationsDisplay
+                    node={node}
+                    registrations={registrations}
+                    vCompData={vCompData}
+                    vCompVerifyData={vCompVerifyData}
+                />
+            </div>
+        );
+    } else if (sidebarData && "statement" in sidebarData) {
+        // Display Registration for Compute Node
+        return (
+            <div>
+                <SectionTitle title="Registration" />
+                <RegistrationDisplay
+                    node={node}
+                    statement={sidebarData.statement}
+                    registeredByActor={sidebarData.registeredByActor}
+                    executedOnActor={sidebarData.executedOnActor}
+                    operatedByActor={sidebarData.operatedByActor}
+                    anchor={sidebarData.anchor}
+                    vc={sidebarData.vcStatement}
+                    vCompData={vCompData}
+                    vCompVerifyData={vCompVerifyData}
+                />
+            </div>
+        );
+    }
+};
+
+const MultipleRegistrationsDisplay = ({
+    node,
+    registrations,
+    vCompData,
+    vCompVerifyData,
+}: {
+    node: LineageNode;
+    registrations: DataNodeRegistration[];
+    storedOn?: string;
+    vCompData: ParsedManifest | null;
+    vCompVerifyData: UploadVerification | null;
+}) => {
+    const [statementIndex, setStatementIndex] = useState(0);
+
+    const handleStatementIndexChange = (index: number) => {
+        setStatementIndex(index);
+    };
+
+    useEffect(() => {
+        setStatementIndex(0);
+    }, [node]);
+
+    const { statement, registeredByActor, anchors, vcs } = registrations[statementIndex] || registrations[0];
+
+    return (
+        <RegistrationDisplay
+            node={node}
+            handleStatementIndexChange={handleStatementIndexChange}
+            statement={statement}
+            registrations={registrations}
+            registeredByActor={registeredByActor}
+            anchor={anchors}
+            vc={vcs}
+            vCompData={vCompData}
+            vCompVerifyData={vCompVerifyData}
+        />
+    );
+};
+
+const RegistrationDisplay = ({
+    node,
+    handleStatementIndexChange,
+    statement,
+    registrations,
+    registeredByActor,
+    executedOnActor,
+    operatedByActor,
+    anchor,
+    vc,
+    vCompData,
+    vCompVerifyData,
+}: {
+    node: LineageNode;
+    handleStatementIndexChange?: (index: number) => void;
+    statement: Statement;
+    registrations?: DataNodeRegistration[];
+    registeredByActor?: Actor;
+    executedOnActor?: Actor;
+    operatedByActor?: Actor;
+    anchor?: Anchor;
+    vc?: VcStatement[];
+    vCompData: ParsedManifest | null;
+    vCompVerifyData: UploadVerification | null;
+}) => {
+    const isComputeNode = node.type === "ComputationNode";
+
+    const registeredByContainerInfo = (vCompData && vCompData.containers[statement.registeredBy]) || null;
+
+    const executedOnSystemInfo =
+        (vCompData && vCompData.systems[(statement as ComputationStatement).executedOn || ""]) || null;
+
+    const data = [
+        {
+            label: "Node ID",
+            value: <DisplayCode value={node.id} />,
+            offsetTopLabel: true,
+        },
+        // {
+        //     label: "SubGraph",
+        //     value: <p> {node.data.sub_graph?.name} </p>,
+        // },
+        {
+            label: isComputeNode ? "Timestamp" : "Instance",
+            value:
+                registrations && registrations.length > 1 && handleStatementIndexChange ? (
+                    <Select onValueChange={(value) => handleStatementIndexChange(parseInt(value))} defaultValue="0">
+                        <SelectTrigger>
+                            <SelectValue placeholder="Select a statement" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {registrations.map((registration, index) => {
+                                const id = registration.statement.id;
+                                const timestamp = formatTimestamp(registration.statement.timestamp);
+                                return (
+                                    <SelectItem value={String(index)} key={id}>
+                                        {`${id.split("cid:")[1].slice(0, 5)}...${id.slice(-4)} (${timestamp})`}
+                                    </SelectItem>
+                                );
+                            })}
+                        </SelectContent>
+                    </Select>
+                ) : statement ? (
+                    <p>{formatTimestamp(statement.timestamp)}</p>
+                ) : null,
+            offsetTopLabel: registrations && registrations.length > 1 ? true : false,
+        },
+        {
+            label: "Registered By",
+            value: statement && <ActorBadge didString={statement.registeredBy} actor={registeredByActor} />,
+            offsetTopLabel: true,
+        },
+        {
+            value: isComputeNode && registeredByContainerInfo && (
+                <ContainerDidDetails containerInfo={registeredByContainerInfo} />
+            ),
+        },
+        {
+            label: "Executed On",
+            value: statement.type == RegistrationTypes.Computation &&
+                (statement as ComputationStatement).executedOn && (
+                    <ActorBadge
+                        didString={(statement as ComputationStatement).executedOn || ""}
+                        actor={executedOnActor}
+                    />
+                ),
+            offsetTopLabel: true,
+        },
+        {
+            value: isComputeNode && executedOnSystemInfo && (
+                <SystemDidDetails systemInfo={executedOnSystemInfo} vCompVerifyData={vCompVerifyData} />
+            ),
+        },
+        {
+            label: "Operated By",
+            value: statement.type == RegistrationTypes.Computation &&
+                (statement as ComputationStatement).operatedBy && (
+                    <ActorBadge
+                        didString={(statement as ComputationStatement).operatedBy || ""}
+                        actor={operatedByActor}
+                    />
+                ),
+            offsetTopLabel: true,
+        },
+        {
+            label: "Anchors",
+            value: anchor && (
+                <div className="space-y-2">
+                    {anchor.locations.map((location) => {
+                        return (
+                            <div className="space-y-2" key={`${location.type}:${location.txHash}`}>
+                                <DisplayCode
+                                    value={`${location.type}:${location.txHash}`}
+                                    actions={
+                                        <IconButton
+                                            name="ExternalLink"
+                                            href={location.urls?.[0]}
+                                            label="View"
+                                            onClick={() => console.log("Open clicked")}
+                                        />
+                                    }
+                                />
+                            </div>
+                        );
+                    })}
+                </div>
+            ),
+            offsetTopLabel: true,
+        },
+        {
+            label: "Statement",
+            value: statement && <StatementVerficationIcon statement={statement} displayText={true} />,
+        },
+        {
+            label: "Credential",
+            value: statement && (
+                <VCVerficationIcon vc={vc?.[0].credential} statementId={statement.id} displayText={true} />
+            ),
+        },
+    ];
+
+    return <SectionList data={data} />;
+};
+
+export default RegistrationSection;

package/src/explorer-component/components/sidebar/sections/SigstoreSection.tsx

@@ -0,0 +1,37 @@
+import { CodeBlock } from "@eqtylab/equality";
+import { LineageNode } from "../../nodes/types";
+import SectionTitle from "../SectionTitle";
+import { Fragment } from "react/jsx-runtime";
+
+const SigstoreSection = ({ node }: { node: LineageNode }) => {
+    const sidebarData = node?.data.sidebarData;
+
+    if (!sidebarData || !("sigstoreBundles" in sidebarData)) return null;
+
+    const bundles = sidebarData.sigstoreBundles;
+    if (!bundles || bundles.length === 0) return null;
+
+    return (
+        <div className="overflow-auto w-full">
+            <SectionTitle title="Sigstore Bundles" />
+            <div className="space-y-4 mt-6">
+                {bundles.map((bundle, idx) => (
+                    <Fragment key={idx}>
+                        <CodeBlock
+                            title={`Sigstore Bundle (${idx + 1})`}
+                            code={JSON.stringify(bundle, null, 2)}
+                            language="json"
+                        />
+                        <CodeBlock
+                            title={`DSSE Payload (${idx + 1})`}
+                            code={JSON.stringify(JSON.parse(atob(bundle.dsseEnvelope.payload)), null, 2)}
+                            language="json"
+                        />
+                    </Fragment>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default SigstoreSection;

package/src/explorer-component/components/sidebar/sections/StorageSection.tsx

@@ -0,0 +1,73 @@
+import { Button } from "@eqtylab/equality";
+
+import SectionTitle from "@/explorer-component/components/sidebar/SectionTitle";
+import { DataNodeSidebarData, LineageNode } from "@/explorer-component/components/nodes/types";
+import { SectionList } from "@/explorer-component/components/sidebar/SectionList";
+import { formatTimestamp } from "@/explorer-component/utils/formatTimestamp";
+import { FileViewer } from "./FileViewer";
+import DisplayCode from "@/components/ui/display-code";
+
+const StorageSection = ({ node }: { node: LineageNode }) => {
+    const storage = (node.data.sidebarData as DataNodeSidebarData)?.storage;
+
+    if (!storage) return null;
+
+    const data = [
+        {
+            label: "Context",
+            value: <DisplayCode value={storage.statement.context} />,
+            offsetTopLabel: true,
+        },
+        {
+            label: "Data",
+            value: <DisplayCode value={storage.statement.data} />,
+            offsetTopLabel: true,
+        },
+        {
+            label: "Registration ID",
+            value: <DisplayCode value={storage.statement.id} />,
+            offsetTopLabel: true,
+        },
+        {
+            label: "Operated By",
+            value: <DisplayCode value={storage.statement.operatedBy} />,
+            offsetTopLabel: true,
+        },
+        {
+            label: "Registered By",
+            value: <DisplayCode value={storage.statement.registeredBy} />,
+            offsetTopLabel: true,
+        },
+        {
+            label: "Stored On",
+            value: storage.statement.storedOn && (
+                <div className="space-y-2">
+                    <DisplayCode value={storage.statement.storedOn} />
+                    <FileViewer
+                        filename="Stored On"
+                        language="json"
+                        content={JSON.stringify(storage.metadata, null, 2)}
+                    >
+                        <Button variant="tertiary" size="sm">
+                            View json
+                        </Button>
+                    </FileViewer>
+                </div>
+            ),
+            offsetTopLabel: true,
+        },
+        {
+            label: "Timestamp",
+            value: <p>{formatTimestamp(storage.statement.timestamp)}</p>,
+        },
+    ];
+
+    return (
+        <div>
+            <SectionTitle title="Storage" />
+            <SectionList data={data} />
+        </div>
+    );
+};
+
+export default StorageSection;

package/src/explorer-component/components/sidebar/sections/custom/IrohCollectionsView.tsx

@@ -0,0 +1,139 @@
+import { useEffect, useState } from "react";
+import { Download } from "lucide-react";
+import { Button, TableContainer, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@eqtylab/equality";
+
+import { FileViewer } from "../FileViewer";
+import { IrohData } from "../../../nodes/types";
+import DisplayCode from "@/components/ui/display-code";
+
+const TEXT_FILE_EXTS = [
+    "txt",
+    "md",
+    "json",
+    "csv",
+    "xml",
+    "yaml",
+    "yml",
+    "html",
+    "htm",
+    "js",
+    "jsx",
+    "ts",
+    "tsx",
+    "css",
+    "scss",
+    "sass",
+    "less",
+    "py",
+    "java",
+    "c",
+    "cpp",
+    "h",
+    "hpp",
+    "cs",
+    "php",
+    "sh",
+    "bat",
+    "ps1",
+    "r",
+    "rb",
+    "rs",
+    "go",
+    "pl",
+    "perl",
+    "sas",
+    "sql",
+    "log",
+    "ini",
+    "conf",
+    "config",
+];
+
+const filenameIsForText = (filename: string) => {
+    const extension = filename.split(".").pop();
+    return TEXT_FILE_EXTS.includes(extension || "");
+};
+
+export interface IrohCollectionViewProps {
+    data: IrohData[] | null | undefined | string;
+}
+
+const IrohCollectionView = ({ data }: IrohCollectionViewProps) => {
+    const [dataUrls, setDataUrls] = useState<Record<string, string | undefined>>({});
+
+    useEffect(() => {
+        if (!data || typeof data === "string") return;
+
+        const precalculatedDataUrls: Record<string, string | undefined> = {};
+
+        data.forEach((item) => {
+            const key = item.path;
+            const data = item.data && filenameIsForText(item.path) ? item.data.toString() : null;
+            const blob = data ? new Blob([data], { type: "text/plain" }) : undefined;
+            const dataUrl = blob ? URL.createObjectURL(blob) : undefined;
+            precalculatedDataUrls[key] = dataUrl;
+        });
+
+        setDataUrls(precalculatedDataUrls);
+
+        // This needs to be done in a useEffect so we can revoke the URLs when the component unmounts
+        return () => {
+            Object.values(precalculatedDataUrls).forEach((url) => {
+                if (url) URL.revokeObjectURL(url);
+            });
+        };
+    }, [data]);
+
+    if (!data || typeof data === "string") return <p> No data</p>;
+
+    const hasActions =
+        data.filter((item) => {
+            const data = item.data && filenameIsForText(item.path) ? item.data.toString() : null;
+            return data !== null;
+        }).length > 0;
+
+    return (
+        <div className="mt-4 overflow-hidden rounded-md border border-border max-w-full">
+            <TableContainer style={{ tableLayout: "fixed" }}>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead className={hasActions ? "" : "w-[65%]"}>Path</TableHead>
+                        <TableHead className={hasActions ? "" : "w-[35%]"}>CID</TableHead>
+                        {hasActions && <TableHead className="w-52">Actions</TableHead>}
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {data.map((item) => {
+                        const data = item.data && filenameIsForText(item.path) ? item.data.toString() : null;
+                        return (
+                            <TableRow key={item.path}>
+                                <TableCell className="font-medium whitespace-pre-wrap break-all">{item.path}</TableCell>
+                                <TableCell>
+                                    <DisplayCode value={item.cid.toString()} truncate={true} />
+                                </TableCell>
+                                {data && dataUrls[item.path] && (
+                                    <TableCell>
+                                        <div className="flex items-center gap-2">
+                                            <FileViewer filename={item.path} content={data} buttonText="View" />
+                                            <Button
+                                                variant="tertiary"
+                                                size="sm"
+                                                prefix={<Download />}
+                                                href={dataUrls[item.path]}
+                                                download={item.path}
+                                            >
+                                                Download
+                                            </Button>
+                                        </div>
+                                    </TableCell>
+                                )}
+                            </TableRow>
+                        );
+                    })}
+                </TableBody>
+            </TableContainer>
+        </div>
+    );
+};
+
+export default IrohCollectionView;

package/src/explorer-component/components/sidebar/sections/registration/VerificationIcon.tsx

@@ -0,0 +1,108 @@
+import { Button } from "@eqtylab/equality";
+
+import { useState, useEffect } from "react";
+import { FileViewer } from "../FileViewer";
+import { VerifiableCredential, Statement, StatementToJSON } from "@/explorer-component/integrityTypes/types";
+import { initVerifier, getVerifier } from "./verifierClient";
+import VerifyStateBadge from "@/components/ui/verify-state-badge";
+import { useManifestStore } from "@/app/stores/manifestStore";
+
+// type VerificationType = "ZK" | "TEE" | null;
+// type VerificationResult = {
+//     verificationStatus: NodeVerification;
+//     verificationType: VerificationType;
+// };
+
+type VerificationState = "verifying" | "unverified" | "verified";
+
+type Props = {
+    displayText?: boolean;
+    onClick?: () => {};
+};
+type VCVerifyProps = Props & {
+    vc?: VerifiableCredential;
+    statementId?: string;
+};
+
+type StatementVerifyProps = Props & {
+    statement: Statement;
+};
+
+export const StatementVerficationIcon = ({ statement, displayText, onClick }: StatementVerifyProps) => {
+    const [verifyState, setVerifyState] = useState<VerificationState>("verifying");
+    const manifest = useManifestStore((state) => state.manifest);
+
+    const statementJson = StatementToJSON(statement);
+    useEffect(() => {
+        const getVerification = async () => {
+            try {
+                await initVerifier(); // safe to call multiple times
+                const verifier = getVerifier();
+                const contexts = manifest?.contexts ?? {};
+                if (!(await verifier.verify_statement(JSON.stringify(statementJson), contexts))) {
+                    setVerifyState("unverified");
+                } else {
+                    setVerifyState("verified");
+                }
+            } catch {
+                setVerifyState("unverified");
+            }
+        };
+        if (statement) getVerification();
+    }, [statement, manifest]);
+
+    if (!statement) {
+        return (
+            <FileViewer content={" "} filename="Statement.json" buttonText="View">
+                <VerifyStateBadge state="unverified" displayText={displayText} />
+            </FileViewer>
+        );
+    }
+
+    return (
+        <div className="flex items-center gap-2">
+            <VerifyStateBadge state={verifyState} displayText={displayText} />
+            <FileViewer statement={statement} filename="Statement.json" buttonText="View">
+                <Button variant="tertiary" size="sm" onClick={onClick}>
+                    View json
+                </Button>
+            </FileViewer>
+        </div>
+    );
+};
+
+export const VCVerficationIcon = ({ vc, statementId, displayText, onClick }: VCVerifyProps) => {
+    const [verifyState, setVerifyState] = useState<VerificationState>("verifying");
+
+    useEffect(() => {
+        const getVerification = async () => {
+            try {
+                await initVerifier(); // safe to call multiple times
+                const verifier = getVerifier();
+                if (!(await verifier.verify_vc(JSON.stringify(vc), statementId || ""))) {
+                    setVerifyState("unverified");
+                } else {
+                    setVerifyState("verified");
+                }
+            } catch {
+                setVerifyState("unverified");
+            }
+        };
+        if (vc && statementId) getVerification();
+    }, [vc, statementId]);
+
+    if (!vc || !statementId) {
+        return <VerifyStateBadge state="unverified" displayText={displayText} />;
+    }
+
+    return (
+        <div className="flex items-center gap-2">
+            <VerifyStateBadge state={verifyState} displayText={displayText} />
+            <FileViewer content={JSON.stringify(vc, null, 2)} filename="VC.json" buttonText="View">
+                <Button variant="tertiary" size="sm" onClick={onClick}>
+                    View json
+                </Button>
+            </FileViewer>
+        </div>
+    );
+};

package/src/explorer-component/components/sidebar/sections/registration/actor/ActorBadge.tsx

@@ -0,0 +1,62 @@
+import NvidiaLogo from "./svg/NvidiaLogo";
+import AMDLogo from "./svg/AMDLogo";
+import IntelLogo from "./svg/IntelLogo";
+import AzureLogo from "./svg/AzureLogo";
+import { Actor, TeeEnvType } from "@/explorer-component/integrityTypes/VCTypes.ts";
+import DisplayCode from "@/components/ui/display-code";
+import { TwoColumnListItem } from "@/explorer-component/components/sidebar/SectionList";
+
+export interface ActorBadgeProps {
+    didString: string;
+    actor?: Actor;
+}
+
+export function ActorBadge({ didString, actor }: ActorBadgeProps) {
+    if (!actor) return <DisplayCode value={didString} />;
+
+    const { did, teeEnv, usesNvidia, metadata } = actor;
+
+    const bottomRow = teeEnv || usesNvidia;
+
+    return (
+        <DisplayCode
+            value={did}
+            slot={
+                <div className="space-y-2">
+                    {metadata && Object.entries(metadata).length > 0 ? (
+                        <div className="grid grid-cols-[2fr_5fr] gap-3 max-w-lg">
+                            {Object.entries(metadata).map(([key, value]) => (
+                                <TwoColumnListItem label={key} value={value} key={key} />
+                            ))}
+                        </div>
+                    ) : (
+                        <p className="text-xs">No additional data available</p>
+                    )}
+                    {bottomRow && (
+                        <div className="flex flex-wrap items-center gap-2">
+                            {renderTeeEnvLogo(teeEnv)}
+                            {usesNvidia && <NvidiaLogo />}
+                        </div>
+                    )}
+                </div>
+            }
+        />
+    );
+}
+
+function renderTeeEnvLogo(teeEnv: TeeEnvType) {
+    if (!teeEnv) return null;
+
+    switch (teeEnv) {
+        case "AMD SEV":
+            return <AMDLogo />;
+        case "Intel TDX":
+            return <IntelLogo />;
+        case "Azure":
+            return <AzureLogo />;
+        case "EQTY Docker":
+            return <div>VComp Container</div>;
+        default:
+            return null;
+    }
+}