@eqtylab/explorer 0.0.0

package/src/explorer-component/utils/statementHelpers.ts

@@ -0,0 +1,252 @@
+import { stripCidPrefix } from "./stripPrefix.ts";
+import {
+    Actor,
+    createEmptyActor,
+    vcFromString,
+    isVCompType,
+    VCompType,
+    VCompEvidence,
+    VCompEvidenceList,
+    Statement,
+    StorageStatement,
+    StorageStatementFromJSON,
+    VcStatement,
+    MetadataStatement,
+    MetadataStatementFromJSON,
+    VcStatementFromJSON,
+    RegistrationTypes,
+    GovernanceStatement,
+    GovernanceStatementFromJSON,
+    SigstoreStatement,
+    SigstoreStatementFromJSON,
+    SigstoreBundle,
+} from "../integrityTypes/types";
+import { MetadataLineage, StorageLineage } from "@/explorer-component/components/nodes/types.ts";
+
+const statementTypePriority: Record<string, number> = {
+    CredentialRegistration: 0,
+    MetadataRegistration: 1,
+    DidRegistration: 2,
+    DataRegistration: 3,
+    ComputationRegistration: 4,
+};
+
+// Sort the statements by type, and then by timestamp to that indexing doesn't need to repeatedly iterate all the statements looking for VCs, metadata, etc
+export function sortStatements(statements: Record<string, object>): Map<string, object> {
+    const sortedStatements = Object.entries(statements).sort(([, a], [, b]) => {
+        const typeA = (a as any)["@type"] || "";
+        const typeB = (b as any)["@type"] || "";
+
+        const priorityDiff = (statementTypePriority[typeA] ?? 99) - (statementTypePriority[typeB] ?? 99);
+        if (priorityDiff !== 0) return priorityDiff;
+
+        const timeA = new Date((a as any)["timestamp"] ?? 0).getTime();
+        const timeB = new Date((b as any)["timestamp"] ?? 0).getTime();
+
+        return timeB - timeA; // sort by descending timestamp
+    });
+
+    return new Map(sortedStatements);
+}
+
+/// Iterates over the statments to resolve related nodes (metadata, etc)
+// The provided statements Map MUST be sorted
+export function indexStatements(
+    statements: Map<string, object>,
+    blobs: Record<string, string>,
+): {
+    metadataLineage: Map<string, MetadataLineage[]>;
+    vcs: Map<string, VcStatement[]>;
+    actors: Map<string, any>;
+    storage: Map<string, StorageLineage>;
+    governance: Map<string, GovernanceStatement>;
+    sigstoreBundles: Map<string, SigstoreBundle[]>;
+} {
+    const metadataJsonMap: Map<string, any[]> = new Map(); // key=subject cid, value=user defined json
+    const metadataStatements: Map<string, MetadataLineage[]> = new Map(); // key=subject cid
+    const vcMap: Map<string, VcStatement[]> = new Map(); // key=subject ID
+    const actorsMap: Map<string, Actor> = new Map(); // key=did
+    const storageMap: Map<string, StorageLineage> = new Map(); // key=data CID
+    const governanceMap: Map<string, GovernanceStatement> = new Map(); // key=subject CID
+    const sbMap: Map<string, SigstoreBundle[]> = new Map(); // key=subject CID, value=sigstore statement
+
+    for (const [, statement] of statements) {
+        // @ts-ignore
+        switch (statement["@type"]) {
+            case RegistrationTypes.Metadata: {
+                const metadataStatement: MetadataStatement = MetadataStatementFromJSON(statement);
+
+                if (metadataStatement.subject.startsWith("urn:cid:")) {
+                    // metadata for a CID
+                    const blobStr = blobs[stripCidPrefix(metadataStatement.metadata)] || "";
+
+                    const metadataJson = blobStr.length > 0 ? JSON.parse(atob(blobStr)) : null;
+                    const existingJson = metadataJsonMap.get(metadataStatement.subject) || [];
+                    existingJson.push(metadataJson);
+                    metadataJsonMap.set(metadataStatement.subject, existingJson);
+
+                    const existingStatement = metadataStatements.get(metadataStatement.subject) || [];
+                    const metadataVC = vcMap.get(metadataStatement.id);
+                    existingStatement.push({
+                        statement: metadataStatement,
+                        metadata: metadataJson,
+                        vc: metadataVC?.[0]?.credential,
+                    });
+                    metadataStatements.set(metadataStatement.subject, existingStatement);
+                } else if (metadataStatement.subject.startsWith("did:")) {
+                    // metadata for a DID
+                    const did = metadataStatement.subject;
+
+                    const blobStr = blobs[stripCidPrefix(metadataStatement.metadata)] || "";
+
+                    const metadataJson = blobStr.length > 0 ? JSON.parse(atob(blobStr)) : null;
+
+                    // TODO: handle multiple metadata statements for the same DID similarly to how we handle metadata for CIDs
+                    if (!actorsMap.has(did)) {
+                        actorsMap.set(did, createEmptyActor(did));
+                    }
+                    const actor = actorsMap.get(did);
+                    if (actor) {
+                        actor.actorName = metadataJson.name || null;
+                        actor.metadata = metadataJson;
+                    }
+                }
+
+                break;
+            }
+            case RegistrationTypes.Credential: {
+                if ("sigstoreBundle" in statement) {
+                    const sbStatement: SigstoreStatement = SigstoreStatementFromJSON(statement);
+                    const sb = JSON.parse(atob(sbStatement.sigstoreBundle));
+                    const subjectId = sbStatement.subject;
+                    if (!sbMap.has(subjectId)) {
+                        sbMap.set(subjectId, []);
+                    }
+                    sbMap.get(subjectId)!.push(sb);
+                } else {
+                    const vcStatement: VcStatement = VcStatementFromJSON(statement);
+                    const vc = vcFromString(vcStatement.credential);
+                    if (!vc) {
+                        continue;
+                    }
+                    const subjectId = vc.credentialSubject.id;
+
+                    if (!vcMap.has(subjectId)) {
+                        vcMap.set(subjectId, []);
+                    }
+
+                    vcMap.get(subjectId)!.push(vcStatement);
+                }
+                break;
+            }
+            case RegistrationTypes.Did: {
+                handleDidRegistration(statement, actorsMap, vcMap);
+                break;
+            }
+            case RegistrationTypes.Storage: {
+                const storageStatement: StorageStatement = StorageStatementFromJSON(statement);
+                const blobStr = blobs[stripCidPrefix(storageStatement.storedOn)] || "";
+                const data = blobStr.length > 0 ? JSON.parse(atob(blobStr)) : null;
+
+                const storage = { statement: storageStatement, metadata: data };
+                storageMap.set(storageStatement.data, storage);
+                break;
+            }
+            case RegistrationTypes.Governance: {
+                const governanceStatement: GovernanceStatement = GovernanceStatementFromJSON(statement);
+                governanceMap.set(governanceStatement.subject, governanceStatement);
+                break;
+            }
+        }
+    }
+
+    if (metadataJsonMap.keys.length !== metadataStatements.keys.length) {
+        throw new Error("Count mismatch with the number of metadatastatements and metadata blobs");
+    }
+    return {
+        metadataLineage: metadataStatements,
+        vcs: vcMap,
+        actors: actorsMap,
+        storage: storageMap,
+        governance: governanceMap,
+        sigstoreBundles: sbMap,
+    };
+}
+
+// Update the ActorMap with DidRegistration details
+function handleDidRegistration(statement: object, actorsMap: Map<string, Actor>, vcMap: Map<string, VcStatement[]>) {
+    const sVal = JSON.parse(JSON.stringify(statement));
+    const id = sVal["@id"];
+    const did = sVal["did"];
+    const vcomp = sVal["vcomp"];
+    if (!vcomp || typeof vcomp !== "object") return;
+
+    const vcompType = vcomp["@type"];
+
+    if (!isVCompType(vcompType)) {
+        console.warn("Unknown vcomp type:", vcompType);
+        return;
+    }
+
+    const vcompStatementsMap = new Map<VCompType, Statement[]>();
+    const vcompEvidenceMap = new Map<VCompEvidence, VcStatement[]>();
+
+    if (!vcompStatementsMap.has(vcompType)) {
+        vcompStatementsMap.set(vcompType, []);
+    }
+
+    vcompStatementsMap.get(vcompType)!.push(VcStatementFromJSON(statement));
+
+    for (const evidenceType of VCompEvidenceList) {
+        const vcStatements = vcMap.get(id);
+        if (vcStatements) {
+            for (const vc of vcStatements) {
+                const type = (vc.credential as any)?.evidence?.type;
+                if (Array.isArray(type) && type.includes(evidenceType)) {
+                    vcompEvidenceMap.set(evidenceType, vcStatements);
+                }
+            }
+        }
+    }
+
+    const teeEnv = (() => {
+        if (!vcompStatementsMap) return null;
+
+        if (vcompStatementsMap.has("EqtyVCompAmdSevV1") && vcompEvidenceMap.has("EqtyVCompAmdSevV1Evidence")) {
+            return "AMD SEV";
+        }
+
+        if (vcompStatementsMap.has("EqtyVCompIntelTdxV0") && vcompEvidenceMap.has("EqtyVCompIntelTdxV0Evidence")) {
+            return "Intel TDX";
+        }
+
+        if (vcompStatementsMap.has("EqtyVCompAzureV1") && vcompEvidenceMap.has("EqtyVCompAzureV1Evidence")) {
+            return "Azure";
+        }
+
+        if (vcompStatementsMap.has("EqtyVCompDockerV1")) {
+            return "EQTY Docker";
+        }
+
+        return null;
+    })();
+
+    const usesNvidia = (() => {
+        if (vcompEvidenceMap.has("EqtyVCompNvidiaCcV0Evidence")) {
+            return true;
+        }
+
+        return false;
+    })();
+
+    if (!actorsMap.has(did)) {
+        actorsMap.set(did, createEmptyActor(did));
+    }
+    const actor = actorsMap.get(did);
+    if (actor) {
+        actor.vcompStatements = vcompStatementsMap;
+        actor.vcompEvidence = vcompEvidenceMap;
+        actor.usesNvidia = usesNvidia;
+        actor.teeEnv = teeEnv;
+    }
+}

package/src/explorer-component/utils/stripPrefix.ts

@@ -0,0 +1,4 @@
+export function stripCidPrefix(cid: string) {
+    const prefix = "urn:cid:";
+    return cid.startsWith(prefix) ? cid.slice(prefix.length) : cid;
+}

package/src/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+    React.useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener("change", onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener("change", onChange);
+    }, []);
+
+    return !!isMobile;
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+import "./main.css";
+export * from "./explorer-component";
+export { useVComp } from "./v-comp-viewer/useVComp";

package/src/lib/resource-types.ts

@@ -0,0 +1,31 @@
+import { ResourceType } from "@eqtylab/equality";
+
+// lowercase display type to resource type
+const DISPLAY_TYPE_TO_RESOURCE_TYPE: Record<string, ResourceType> = {
+    default: "unknown",
+    unknown: "unknown",
+    dataset: "dataset",
+    model: "model",
+    code: "code",
+    document: "document",
+    prompt: "prompt",
+    token: "token",
+    inference: "inference",
+    tool: "tools",
+    benchmarks: "benchmark",
+    benchmark: "benchmark",
+    guards: "guard",
+    agent: "agent",
+    guardrail: "guardrail",
+    computation: "compute",
+    systemprompt: "system-prompt",
+    context: "context",
+    reasoning: "reasoning",
+    systemparameters: "system-parameters",
+    database: "database",
+};
+
+export const getResourceTypeFromDisplayType = (displayType: string): ResourceType => {
+    const lowercasedDisplayType = displayType.toLowerCase() as keyof typeof DISPLAY_TYPE_TO_RESOURCE_TYPE;
+    return DISPLAY_TYPE_TO_RESOURCE_TYPE[lowercasedDisplayType] || "unknown";
+};

package/src/lib/use-escape-key.tsx

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const useEscapeKey = (value: any, callback: () => void) =>
+    useEffect(() => {
+        const handleDocumentKeydown = (event: KeyboardEvent) => {
+            if (!value) return;
+            if (event.key === "Escape") {
+                callback();
+            }
+        };
+        document.addEventListener("keydown", handleDocumentKeydown);
+        return () => {
+            document.removeEventListener("keydown", handleDocumentKeydown);
+        };
+    }, [value, callback]);

package/src/lib/utils.ts

@@ -0,0 +1,19 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+export function toNumber(value: string | undefined | null) {
+    return value ? parseInt(value, 10) : undefined;
+}
+
+export function formatFileSize(bytes: number): string {
+    if (bytes === 0) return "0 Bytes";
+
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+
+    return `${parseFloat((bytes / Math.pow(1024, i)).toFixed(2))} ${sizes[i]}`;
+}

package/src/main.css

@@ -0,0 +1,82 @@
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme) theme(inline);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+@import "@eqtylab/equality/theme-config.css";
+
+@layer base {
+    main {
+        @apply bg-background font-sans text-text-primary transition-colors;
+    }
+
+    /* COLORS */
+    html {
+        /* Primary */
+        --brand-lineage-explorer: var(--color-blue-600);
+    }
+
+    html[data-equality-theme="dark"] {
+        --brand-lineage-explorer: var(--color-blue-300);
+    }
+}
+
+@theme inline {
+    /* COLORS */
+    --color-brand-lineage-explorer: var(--brand-lineage-explorer);
+}
+
+@layer utilities {
+    :root {
+        font-synthesis: none;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+}
+
+@font-face {
+    font-family: "TWK Lausanne";
+    src:
+        url("./assets/fonts/TWKLausanne-300.woff") format("woff"),
+        url("./assets/fonts/TWKLausanne-300.woff2") format("woff2");
+    font-style: normal;
+    font-weight: 300;
+}
+
+@font-face {
+    font-family: "TWK Lausanne";
+    src:
+        url("./assets/fonts/TWKLausanne-400.woff") format("woff"),
+        url("./assets/fonts/TWKLausanne-400.woff2") format("woff2");
+    font-style: normal;
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: "TWK Lausanne";
+    src:
+        url("./assets/fonts/TWKLausanne-500.woff") format("woff"),
+        url("./assets/fonts/TWKLausanne-500.woff2") format("woff2");
+    font-style: normal;
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: "TWK Lausanne";
+    src:
+        url("./assets/fonts/TWKLausanne-600.woff") format("woff"),
+        url("./assets/fonts/TWKLausanne-600.woff2") format("woff2");
+    font-style: normal;
+    font-weight: 600;
+}
+
+iframe {
+    color-scheme: light;
+}
+
+/* This is needed to prevent edges from getting cut off*/
+.react-flow__pane {
+    width: 320rem !important;
+    height: 320rem !important;
+}

package/src/main.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { createBrowserRouter, redirect, RouterProvider } from "react-router-dom";
+import "@fontsource/ibm-plex-mono";
+
+import "./main.css";
+
+const router = createBrowserRouter([
+    {
+        children: [
+            {
+                path: "/",
+                lazy: () => import("./app/pages/index"),
+                id: "graph",
+            },
+            {
+                // adding redirect to root to catch any static links/demos that are using this url
+                path: "/explorer/lineage",
+                loader: async ({ request }) => {
+                    const url = new URL(request.url);
+                    const searchParams = url.searchParams.toString();
+                    return redirect(`/?${searchParams}`);
+                },
+            },
+            // {
+            // 	path: "/prolly-proof/:cid/:id",
+            // 	loader: async (req) => prollyProofLoader(req),
+            // },
+        ],
+    },
+]);
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+    <React.StrictMode>
+        <main>
+            <RouterProvider router={router} />
+        </main>
+    </React.StrictMode>,
+);

package/src/v-comp-viewer/components/container-did-details.tsx

@@ -0,0 +1,53 @@
+import Details from "@/components/ui/details";
+import { SectionList } from "@/explorer-component/components/sidebar/SectionList";
+import { VCompContainerInfo } from "@/v-comp-viewer/utils";
+import DisplayCode from "@/components/ui/display-code";
+
+const ContainerDidDetails = ({ containerInfo }: { containerInfo: VCompContainerInfo }) => {
+    const data = [
+        {
+            label: "Container Notary",
+            value: <DisplayCode value={`${containerInfo.did.value}`} validated={containerInfo.did.validated} />,
+            offsetTopLabel: true,
+        },
+        {
+            label: "Docker Compose",
+            value: (
+                <DisplayCode
+                    value={`cid:${containerInfo.dockerComposeId.value}`}
+                    validated={containerInfo.dockerComposeId.validated}
+                />
+            ),
+            offsetTopLabel: true,
+        },
+        {
+            label: "Docker Images",
+            value: (
+                <div className="space-y-4">
+                    {containerInfo.dockerImages.images.map((image: { name: string; sha256: string }) => {
+                        return (
+                            <DisplayCode
+                                key={image.name}
+                                value={`sha256:${image.sha256}`}
+                                validated={containerInfo.dockerImages.validated}
+                                slot={<code>{image.name}</code>}
+                            />
+                        );
+                    })}
+                </div>
+            ),
+            offsetTopLabel: true,
+        },
+        {
+            label: "Signed By",
+            value: (
+                <DisplayCode value={`${containerInfo.signedBy.value}`} validated={containerInfo.signedBy.validated} />
+            ),
+            offsetTopLabel: true,
+        },
+    ];
+
+    return <Details title="Details" content={<SectionList data={data} className="mt-4 pb-4" />} />;
+};
+
+export default ContainerDidDetails;