@eqtylab/explorer 0.0.0

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

@@ -0,0 +1,238 @@
+import { Download } from "lucide-react";
+import { useEffect, useState } from "react";
+import {
+    Button,
+    ListOrGridViewToggle,
+    ResourceBadge,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@eqtylab/equality";
+
+import { LineageNode, MetadataLineage } from "../../nodes/types.ts";
+import IrohCollectionView from "../sections/custom/IrohCollectionsView.tsx";
+import { StatementVerficationIcon, VCVerficationIcon } from "./registration/VerificationIcon";
+import { FileViewer } from "./FileViewer.tsx";
+import SectionTitle from "../SectionTitle.tsx";
+import { SectionList } from "../SectionList.tsx";
+import { formatTimestamp } from "@/explorer-component/utils/formatTimestamp.ts";
+import { getExtensionFromLanguage, getLanguageFromContent } from "./FileViewer.tsx";
+import { getResourceTypeFromDisplayType } from "@/lib/resource-types.ts";
+
+type Props = {
+    node: LineageNode;
+};
+
+// Convert camelCase, snake_case, and kebab-case to seperate words with the first letter capitalized
+const formatKeyLabel = (rawKey: string): string => {
+    return rawKey
+        .replace(/([a-z0-9])([A-Z])/g, "$1 $2") // camelCase → camel Case
+        .replace(/[_-]/g, " ") // snake_case, kebab-case → snake case
+        .toLowerCase()
+        .replace(/\b\w/g, (char) => char.toUpperCase()); // capitalize each word
+};
+
+const MetadataSection = ({
+    metadataStatements,
+    displayType,
+}: {
+    metadataStatements: MetadataLineage[];
+    displayType: string;
+}) => {
+    const [metadataIndex, setMetadataIndex] = useState(0);
+
+    const metadataObject = metadataStatements[metadataIndex] || metadataStatements[0];
+
+    if (!metadataObject) return null;
+
+    const data = [
+        {
+            label: "Instance",
+            value:
+                metadataStatements.length > 1 ? (
+                    <Select onValueChange={(value) => setMetadataIndex(parseInt(value))} defaultValue="0">
+                        <SelectTrigger>
+                            <SelectValue placeholder="Select a statement" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {metadataStatements.map((data, index) => {
+                                const id = data.statement.id;
+                                const timestamp = formatTimestamp(data.statement.timestamp);
+                                return (
+                                    <SelectItem value={String(index)} key={id}>
+                                        {`${id.split("cid:")[1].slice(0, 5)}...${id.slice(-4)} (${timestamp})`}
+                                    </SelectItem>
+                                );
+                            })}
+                        </SelectContent>
+                    </Select>
+                ) : (
+                    <p>{formatTimestamp(metadataObject.statement.timestamp)}</p>
+                ),
+            offsetTopLabel: metadataStatements.length > 1 ? true : false,
+        },
+        ...Object.entries(metadataObject.metadata).map(([key, value]) => {
+            const isAssetType = key === "assetType";
+
+            if (isAssetType) {
+                const resourceType = getResourceTypeFromDisplayType(displayType);
+                const item = {
+                    label: "Asset Type",
+                    value: value && <ResourceBadge type={resourceType} />, // Display badge if showing asset type
+                };
+                return item;
+            }
+
+            const item = {
+                label: formatKeyLabel(key),
+                value: value && <p>{String(value)}</p>,
+            };
+            return item;
+        }),
+        {
+            label: "Statement",
+            value: metadataObject.statement && (
+                <StatementVerficationIcon statement={metadataObject.statement} displayText={true} />
+            ),
+        },
+        {
+            label: "Credential",
+            value: metadataObject.vc && (
+                <VCVerficationIcon
+                    vc={metadataObject.vc}
+                    displayText={true}
+                    statementId={metadataObject.statement.id}
+                />
+            ),
+        },
+    ];
+
+    return <SectionList data={data} />;
+};
+
+export type SourceDataType = "irohCollection" | "singleFile" | undefined;
+
+const CustomSection = ({ node }: Props) => {
+    const [viewMode, setViewMode] = useState<"grid" | "list">("list");
+    const [sourceDetails, setSourceDetails] = useState<{
+        dataType: SourceDataType;
+        data: string | undefined;
+        sourceDataBlob: Blob | undefined;
+        sourceDataLanguage: string | null;
+        sourceDataLanguageExt: string | null;
+        sourceDataUrl: string | undefined;
+    }>({
+        dataType: undefined,
+        data: undefined,
+        sourceDataBlob: undefined,
+        sourceDataLanguage: null,
+        sourceDataLanguageExt: null,
+        sourceDataUrl: undefined,
+    });
+    const metadataLineage = node?.data.sidebarData?.metadataLineage;
+    const displayType = node.data.displayType;
+    const header = displayType || "Custom";
+
+    useEffect(() => {
+        if (viewMode === "grid") setViewMode("list");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [node.id]);
+
+    useEffect(() => {
+        let sourceDataType: SourceDataType;
+        let sourceData: string | undefined;
+        let sourceDataBlob: Blob | undefined;
+        let sourceDataLanguage: string | null = null;
+        let sourceDataLanguageExt: string | null = null;
+        let sourceDataUrl: string | undefined;
+        if (Array.isArray(node?.data.sidebarData?.sourceData)) {
+            sourceDataType = "irohCollection";
+        } else if (typeof node.data.sidebarData?.sourceData === "string") {
+            sourceDataType = "singleFile";
+            sourceData = node.data.sidebarData?.sourceData;
+            // base64 decoded
+            // TODO: handle blobs as raw bytes everywhere instead of base64 strings
+            //       only base64 decode and try utf-8 parsing where necessary (e.g. FileViewer)
+            const bytes = Buffer.from(sourceData, "base64");
+            sourceDataLanguage = getLanguageFromContent(bytes);
+            sourceDataLanguageExt = sourceDataLanguage ? getExtensionFromLanguage(sourceDataLanguage) : null;
+            sourceDataBlob = new Blob([bytes]);
+            sourceDataUrl = URL.createObjectURL(sourceDataBlob);
+        }
+
+        setSourceDetails({
+            dataType: sourceDataType,
+            data: sourceData,
+            sourceDataBlob: sourceDataBlob,
+            sourceDataLanguage: sourceDataLanguage,
+            sourceDataLanguageExt: sourceDataLanguageExt,
+            sourceDataUrl: sourceDataUrl,
+        });
+
+        // This needs to be done in a useEffect so we can revoke the URL when the component unmounts
+        return () => {
+            if (sourceDataUrl) URL.revokeObjectURL(sourceDataUrl);
+        };
+    }, [node.data.sidebarData?.sourceData]);
+
+    // Nothing to display. Hide the whole section
+    if (!sourceDetails.data && (!metadataLineage || metadataLineage.length === 0)) {
+        return null;
+    }
+
+    const data = node.data.sidebarData?.sourceData;
+
+    return (
+        <div>
+            <SectionTitle
+                title={header === "Unknown" ? "Metadata" : header}
+                renderRightContent={() => {
+                    return (
+                        <div className="flex items-center gap-2">
+                            {sourceDetails.dataType === "singleFile" && sourceDetails.data && (
+                                <>
+                                    <FileViewer
+                                        filename={
+                                            (metadataLineage?.[0].metadata as unknown as { name: string }).name ??
+                                            "source"
+                                        }
+                                        content={sourceDetails.data}
+                                        language={sourceDetails.sourceDataLanguage || undefined}
+                                        decodeContent={true}
+                                        buttonText="View"
+                                    />
+                                    {sourceDetails.sourceDataUrl && (
+                                        <Button
+                                            variant="tertiary"
+                                            size="sm"
+                                            prefix={<Download />}
+                                            href={sourceDetails.sourceDataUrl}
+                                            download={`${node.id}.${sourceDetails.sourceDataLanguageExt}`}
+                                        >
+                                            Download
+                                        </Button>
+                                    )}
+                                </>
+                            )}
+                            {sourceDetails.dataType === "irohCollection" && (
+                                <ListOrGridViewToggle
+                                    viewMode={viewMode}
+                                    onViewModeChange={setViewMode}
+                                    order={["list", "grid"]}
+                                />
+                            )}
+                        </div>
+                    );
+                }}
+            />
+            {metadataLineage && viewMode === "list" && (
+                <MetadataSection metadataStatements={metadataLineage} displayType={displayType} />
+            )}
+            {viewMode === "grid" && data && typeof data !== "string" && <IrohCollectionView data={data} />}
+        </div>
+    );
+};
+
+export default CustomSection;

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

@@ -0,0 +1,229 @@
+import React, { useState, useEffect } from "react";
+import {
+    Button,
+    CodeBlock,
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogContainer,
+} from "@eqtylab/equality";
+import { ExternalLink } from "lucide-react";
+
+import { Statement, StatementToJSON } from "@/explorer-component/integrityTypes/types";
+
+import filetype from "magic-bytes.js";
+
+interface BaseViewerProps {
+    children?: React.ReactNode;
+    buttonText?: string;
+}
+
+export type FileViewerProps =
+    | ({ statement: Statement } & BaseViewerProps)
+    | ({ filename: string; content: string; language?: string; decodeContent?: boolean } & BaseViewerProps);
+
+interface ModalSettings {
+    filename: string;
+    showLineNumbers: boolean;
+    language: string;
+    content: string;
+    decodeContent: boolean;
+}
+
+export const FileViewer = (props: FileViewerProps) => {
+    const settings = processProps(props);
+
+    const [decodedContent, setDecodedContent] = useState(settings.content);
+    const [formattedContent, setFormattedContent] = useState(settings.content);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const showModal = async () => {
+        setIsModalOpen(true);
+    };
+
+    const handleOk = () => {
+        setIsModalOpen(false);
+    };
+
+    useEffect(() => {
+        if (settings.decodeContent) {
+            try {
+                setDecodedContent(atob(settings.content));
+            } catch (error) {
+                console.error("Failed to decode base64 content:", error);
+                setDecodedContent(settings.content);
+            }
+        } else {
+            setDecodedContent(settings.content);
+        }
+    }, [settings.content, settings.decodeContent]);
+
+    useEffect(() => {
+        if (settings.language === "json") {
+            try {
+                const prettyJson = JSON.stringify(JSON.parse(decodedContent), null, 2);
+                setFormattedContent(prettyJson);
+            } catch (error) {
+                console.error("Failed to format JSON content:", error);
+                setFormattedContent(decodedContent);
+            }
+        } else {
+            setFormattedContent(decodedContent);
+        }
+    }, [decodedContent, settings.language]);
+
+    return (
+        <>
+            {React.isValidElement(props.children) && typeof props.children.type !== "string" ? (
+                React.cloneElement(props.children as React.ReactElement<any>, { onClick: showModal })
+            ) : props.children ? (
+                props.children
+            ) : (
+                <Button variant="tertiary" size="sm" onClick={showModal}>
+                    {props.buttonText}
+                </Button>
+            )}
+            {settings.language === "html" && (
+                <Button
+                    variant="tertiary"
+                    size="sm"
+                    prefix={<ExternalLink />}
+                    onClick={() => {
+                        const newWindow = window.open();
+                        if (newWindow) {
+                            newWindow.document.write(formattedContent);
+                            newWindow.document.close();
+                        }
+                    }}
+                >
+                    Open
+                </Button>
+            )}
+
+            <Dialog open={isModalOpen} onOpenChange={handleOk}>
+                <DialogContainer size="lg" className="h-dvh">
+                    <DialogHeader>
+                        <DialogTitle>{settings.filename}</DialogTitle>
+                    </DialogHeader>
+                    <DialogContent>
+                        <CodeBlock
+                            code={formattedContent}
+                            // TODO: once syntax highlighting performance issues are resolved, re-enable for html
+                            language={settings.language === "html" ? undefined : settings.language}
+                            className="min-h-full"
+                        />
+                    </DialogContent>
+                </DialogContainer>
+            </Dialog>
+        </>
+    );
+};
+
+function processProps(props: FileViewerProps): ModalSettings {
+    if (typeof props === "object" && "content" in props && typeof props.content === "string") {
+        const language = (() => {
+            // 1st priority: explicit language prop
+            if (props.language) {
+                return props.language;
+            }
+            // 2nd priority: infer from file extension
+            const langFromExt = getLanguageFromFilename(props.filename);
+            if (langFromExt) {
+                return langFromExt;
+            }
+            // 3rd priority: magic bytes
+            const langFromMagicBytes = getLanguageFromContent(
+                Buffer.from(props.content, props.decodeContent ? "base64" : "utf-8"),
+            );
+            if (langFromMagicBytes) {
+                return langFromMagicBytes;
+            }
+            // Fallback to text if all else fails
+            return "text";
+        })();
+        const showLineNumbers = language !== "text";
+
+        return {
+            language,
+            showLineNumbers,
+            content: props.content,
+            filename: props.filename,
+            decodeContent: props.decodeContent || false,
+        };
+    } else if (typeof props === "object" && "statement" in props) {
+        const content = JSON.stringify(StatementToJSON(props.statement), null, 2);
+        return {
+            language: "json",
+            showLineNumbers: true,
+            content,
+            decodeContent: false,
+            filename: "Statement",
+        };
+    } else {
+        return {
+            language: "text",
+            showLineNumbers: true,
+            content: "",
+            decodeContent: false,
+            filename: "No Data",
+        };
+    }
+}
+
+const langMap: Record<string, string> = {
+    html: "html",
+    js: "javascript",
+    json: "json",
+    ts: "typescript",
+    py: "python",
+    r: "r",
+    rs: "rust",
+    sas: "sas",
+    yml: "yaml",
+    yaml: "yaml",
+    txt: "text",
+};
+
+export function getExtensionFromLanguage(language: string): string | null {
+    const entry = Object.entries(langMap).find(([_, lang]) => lang === language);
+    return entry ? entry[0] : null;
+}
+
+export function getLanguageFromFilename(fileName: string): string | null {
+    return langMap[fileName.split(".").pop() || ""] || null;
+}
+
+export function getLanguageFromContent(bytes: Uint8Array): string | null {
+    const fileTypes = filetype(bytes);
+
+    // Try using magic-bytes.js
+    const detectedLang =
+        fileTypes.length > 0 && fileTypes[0].extension ? getLanguageFromFilename(fileTypes[0].extension) : null;
+
+    if (detectedLang) {
+        return detectedLang;
+    }
+
+    // Text formats not detected by magic-bytes.js
+    const text = new TextDecoder().decode(bytes);
+
+    // HTML: check for doctype or HTML tags
+    if (/^<!doctype\s+html/i.test(text) || /^<html/i.test(text)) {
+        return "html";
+    }
+    // Python: shebang or keywords
+    if (/^#!.*python/.test(text) || /\b(def|class|import|from)\b/.test(text)) {
+        return "python";
+    }
+    // JavaScript: import/export/function patterns
+    if (/\b(function|const|let|var|import|export)\b/.test(text)) {
+        return "javascript";
+    }
+    // YAML: starts with --- or contains key: value pattern
+    if (/^---/.test(text) || /^[A-Za-z0-9_-]+:\s/.test(text)) {
+        return "yaml";
+    }
+
+    return null;
+}

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

@@ -0,0 +1,52 @@
+import SectionTitle from "@/explorer-component/components/sidebar/SectionTitle";
+import { LineageNode } from "@/explorer-component/components/nodes/types";
+import { SectionList } from "@/explorer-component/components/sidebar/SectionList";
+import { formatTimestamp } from "@/explorer-component/utils/formatTimestamp";
+import DisplayCode from "@/components/ui/display-code";
+
+const GovernanceSection = ({ node }: { node: LineageNode }) => {
+    const governance = node.data.sidebarData?.governance;
+
+    if (!governance) return null;
+
+    const data = [
+        {
+            label: "Context",
+            value: <DisplayCode value={governance.context} />,
+            offsetTopLabel: true,
+        },
+        {
+            label: "Registration ID",
+            value: <DisplayCode value={governance.id} />,
+            offsetTopLabel: true,
+        },
+        {
+            label: "Registered By",
+            value: <DisplayCode value={governance.registeredBy} />,
+            offsetTopLabel: true,
+        },
+        {
+            label: "Timestamp",
+            value: <p>{formatTimestamp(governance.timestamp)}</p>,
+        },
+        {
+            label: "Subject",
+            value: <DisplayCode value={governance.subject} />,
+            offsetTopLabel: true,
+        },
+        {
+            label: "Document",
+            value: <DisplayCode value={governance.document} />,
+            offsetTopLabel: true,
+        },
+    ];
+
+    return (
+        <div>
+            <SectionTitle title="Governance" />
+            <SectionList data={data} />
+        </div>
+    );
+};
+
+export default GovernanceSection;