@eqtylab/explorer 0.0.0

package/src/animations/variants.ts

@@ -0,0 +1,52 @@
+// Framer Motion animation variants
+import { cubicBezier } from "framer-motion";
+
+const easeOut = cubicBezier(0.25, 0.46, 0.45, 0.94);
+const easeInOut = cubicBezier(0.42, 0, 0.58, 1);
+
+export const expandAndCollapseVariant = {
+    expanded: {
+        opacity: 1,
+        height: "auto",
+        transition: {
+            duration: 0.5,
+            opacity: {
+                delay: 0.2,
+                duration: 0.4,
+                ease: easeOut,
+            },
+        },
+    },
+    collapsed: {
+        opacity: 0,
+        height: 0,
+        overflow: "hidden",
+        transition: {
+            duration: 0.4,
+            ease: easeOut,
+        },
+    },
+};
+
+export const slideInFromRightVariant = (delay: number = 0) => ({
+    hidden: {
+        x: "100%",
+        transition: {
+            duration: 0.4,
+            ease: easeOut,
+        },
+    },
+    visible: {
+        x: 0,
+        transition: {
+            duration: 0.5,
+            ease: easeOut,
+            delay,
+        },
+    },
+});
+
+export const fadeInAndOutVariant = {
+    hidden: { opacity: 0, transition: { duration: 0.3, ease: easeInOut } },
+    visible: { opacity: 1, transition: { duration: 0.5, ease: easeInOut } },
+};

package/src/app/apiClient/integrityService/fetchAttributes.ts

@@ -0,0 +1,29 @@
+import { PossibleAttributeList } from "./types";
+
+export async function fetchPossibleAttributes(
+    token: string,
+    integrityServiceUrl: string,
+): Promise<PossibleAttributeList> {
+    const url = `${integrityServiceUrl}/manifest/v1/filters`;
+
+    const response = await fetch(url, {
+        headers: {
+            Authorization: `Bearer ${token}`,
+        },
+    });
+
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const json = await response.json();
+
+    const sortedData = Object.keys(json)
+        .sort()
+        .reduce((acc: PossibleAttributeList, key: string) => {
+            acc[key] = json[key];
+            return acc;
+        }, {});
+
+    return sortedData;
+}

package/src/app/apiClient/integrityService/fetchManifest.ts

@@ -0,0 +1,28 @@
+import { SelectedAttributeList } from "./types";
+
+export async function fetchManifest(
+    token: string,
+    integrityServiceUrl: string,
+    selectedAttributes: SelectedAttributeList,
+): Promise<any> {
+    let params = "include_context=false";
+    for (const [key, value] of Object.entries(selectedAttributes)) {
+        if (value.length > 0) {
+            params += `&${key}=${value}`;
+        }
+    }
+
+    const response = await fetch(`${integrityServiceUrl}/manifest/v1?${params}`, {
+        headers: {
+            Authorization: `Bearer ${token}`,
+        },
+    });
+
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const manifest = await response.json();
+
+    return manifest;
+}

package/src/app/apiClient/integrityService/types.ts

@@ -0,0 +1,12 @@
+export interface PossibleAttributeSummary {
+    n: number;
+    values?: any[];
+}
+
+export interface PossibleAttributeList {
+    [key: string]: PossibleAttributeSummary;
+}
+
+export interface SelectedAttributeList {
+    [key: string]: any;
+}

package/src/app/components/integrityService/IntegrityService.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+
+import FiltersToggle from "@/app/components/integrityService/components/FiltersToggle";
+
+import { LineageExplorer } from "@/explorer-component";
+import { useNavigate } from "react-router-dom";
+import { useManifestStore } from "@/app/stores/manifestStore";
+import { fetchPossibleAttributes } from "@/app/apiClient/integrityService/fetchAttributes";
+import { fetchManifest } from "@/app/apiClient/integrityService/fetchManifest";
+import { DarkModeSwitch } from "@/components/dark-mode-switch";
+
+import AuthButton from "./components/AuthButton";
+import { useAuth0 } from "@auth0/auth0-react";
+import { PossibleAttributeList, SelectedAttributeList } from "@/app/apiClient/integrityService/types";
+import { Config } from "@/app/config";
+import EQTYLabLogo from "@/assets/vectors/eqtylab.svg";
+import { useVComp } from "@/v-comp-viewer/useVComp";
+
+interface IntegrityServiceProps {
+    searchParams: URLSearchParams;
+    config: Config;
+}
+
+const IntegrityService = ({ searchParams, config }: IntegrityServiceProps) => {
+    const navigate = useNavigate();
+    const { isAuthenticated } = useAuth0();
+    const { getAccessTokenSilently } = useAuth0();
+    const [integrityServiceUrl, setIntegrityServiceUrl] = useState("");
+    const [possibleAttributeList, setPossibleAttributeList] = useState<PossibleAttributeList>({});
+    const [attributeFilterCount, setAttributeFilterCount] = useState<number>(0);
+    const { manifest } = useManifestStore.getState();
+
+    useEffect(() => {
+        const integrityServiceUrl = searchParams.get("integrity_service_url");
+        if (integrityServiceUrl) {
+            setIntegrityServiceUrl(integrityServiceUrl);
+        } else {
+            setIntegrityServiceUrl(import.meta.env.VITE_INTEGRITY_SERVICE_URL);
+        }
+    }, [searchParams]);
+
+    useEffect(() => {
+        (async () => {
+            const token = await getAccessTokenSilently();
+            const list = await fetchPossibleAttributes(token, integrityServiceUrl);
+            setPossibleAttributeList(list);
+        })();
+    }, [integrityServiceUrl, isAuthenticated]);
+
+    const getManifestFromIntegrityService = async (attributeFilters: SelectedAttributeList) => {
+        setAttributeFilterCount(Object.entries(attributeFilters).length);
+        const token = await getAccessTokenSilently();
+        const manifest = await fetchManifest(token, integrityServiceUrl, attributeFilters);
+        const { setManifest } = useManifestStore.getState();
+        setManifest(manifest);
+        navigate(`/?${searchParams.toString()}`);
+    };
+
+    const { vCompData, vCompVerifyData } = useVComp({ manifestJson: manifest });
+
+    return (
+        <div className="flex flex-col h-screen w-screen overflow-hidden">
+            <div className="w-full border-b border-border/10 bg-background py-3.5 px-4 z-50">
+                <div className="flex w-full items-center justify-between">
+                    <div className="flex items-center gap-3">
+                        <div className="[&>svg]:h-auto [&>svg]:w-28 [&>svg]:fill-text-primary">
+                            <EQTYLabLogo />
+                        </div>
+                        <div className="h-6 w-px bg-text-primary/20" />
+                        <span className="text-lg text-brand-lineage-explorer">Lineage Explorer</span>
+                    </div>
+                    <div className="flex items-center gap-4">
+                        <DarkModeSwitch />
+                        {isAuthenticated && (
+                            <FiltersToggle
+                                label={
+                                    attributeFilterCount > 0
+                                        ? `Filters Applied (${attributeFilterCount})`
+                                        : "Filter Results"
+                                }
+                                allAttributesList={possibleAttributeList}
+                                handleApply={getManifestFromIntegrityService}
+                            />
+                        )}
+                        <AuthButton />
+                    </div>
+                </div>
+            </div>
+            {isAuthenticated ? (
+                <LineageExplorer
+                    manifestJson={manifest}
+                    config={config}
+                    vCompData={vCompData}
+                    vCompVerifyData={vCompVerifyData}
+                />
+            ) : (
+                <div className="flex flex-col items-center justify-center h-full">
+                    <p className="text-lg font-medium">You must log in to view the lineage</p>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default IntegrityService;

package/src/app/components/integrityService/components/AuthButton.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+import { Button } from "@eqtylab/equality";
+
+const AuthButton: React.FC = () => {
+    const { isAuthenticated, loginWithRedirect, logout } = useAuth0();
+
+    return (
+        <div>
+            {isAuthenticated ? (
+                <Button
+                    variant="primary"
+                    onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}
+                >
+                    Log out
+                </Button>
+            ) : (
+                <Button variant="primary" onClick={() => loginWithRedirect()}>
+                    Log in
+                </Button>
+            )}
+        </div>
+    );
+};
+
+export default AuthButton;

package/src/app/components/integrityService/components/FiltersModal.tsx

@@ -0,0 +1,214 @@
+import { useEffect, useState } from "react";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+    Button,
+    IconButton,
+    TooltipProvider,
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+    Label,
+} from "@eqtylab/equality";
+
+import {
+    PossibleAttributeList,
+    PossibleAttributeSummary,
+    SelectedAttributeList,
+} from "@/app/apiClient/integrityService/types";
+
+import { CirclePlus } from "lucide-react";
+
+interface FiltersModalProps {
+    // All possible filterable attributes, as returned from the integrity service
+    allAttributesList: PossibleAttributeList;
+    handleApply: (attributeFilters: SelectedAttributeList) => Promise<void>;
+}
+
+export const FiltersModal = ({ allAttributesList, handleApply }: FiltersModalProps) => {
+    const [selectedAttributes, setSelectedAttributes] = useState<SelectedAttributeList>({});
+    // The filters that have already been selected and/or applied
+    const [selectedFilters, setSelectedFilters] = useState<PossibleAttributeList>({});
+    // Attributes the user hasn't added to the filter list
+    const [unusedAttributesList, setUnusedAttributesList] = useState<PossibleAttributeList>({});
+    // The options available to add to the filter list
+    const [filterOptions, setFilterOptions] = useState<any[]>([]);
+
+    // Initialize unusedAttributesList based on allAttributesList and selectedFilters
+    useEffect(() => {
+        const unusedAttrs = Object.keys(allAttributesList).reduce((acc, key) => {
+            if (!selectedFilters[key]) {
+                acc[key] = allAttributesList[key];
+            }
+            return acc;
+        }, {} as PossibleAttributeList);
+        setUnusedAttributesList(unusedAttrs);
+    }, [allAttributesList, selectedFilters]);
+
+    // Update the "add new filter button" based on available and unselected filters
+    useEffect(() => {
+        const options = Object.entries(unusedAttributesList).length
+            ? [
+                  ...Object.entries(unusedAttributesList).map(([attr, v]) => ({
+                      key: attr,
+                      label: attr.replace(/_/g, " "),
+                      onClick: () => handleNewFilterSelected(attr, v),
+                  })),
+              ]
+            : [];
+
+        setFilterOptions(options);
+    }, [unusedAttributesList]);
+
+    // Add filter selection dropdown
+    const handleNewFilterSelected = (attribute: string, summary: PossibleAttributeSummary) => {
+        // Update the unusedAttributesList to exclude the newly selected filter
+        setUnusedAttributesList((prevList) => {
+            const newList = { ...prevList };
+            delete newList[attribute];
+            return newList;
+        });
+
+        // Add the selected attribute to the list of selected filters
+        setSelectedFilters((prevList: PossibleAttributeList) => ({
+            ...prevList,
+            [attribute]: summary,
+        }));
+    };
+
+    // Reset filters back to initial view
+    const handleReset = () => {
+        setSelectedFilters({});
+        setSelectedAttributes({});
+        setUnusedAttributesList(allAttributesList);
+    };
+
+    // Handler for when an attribute filter is UN-selected.
+    const handleUnselectedFilter = (attr: string) => {
+        const newSelectedAttributes = { ...selectedAttributes };
+        delete newSelectedAttributes[attr];
+        setSelectedAttributes(newSelectedAttributes);
+    };
+
+    // Handler for when an attribute filter is selected.
+    const handleSelectFilter = (attr: string, value: string) => {
+        setSelectedAttributes((prev) => {
+            const updatedAttributes = { ...prev };
+            updatedAttributes[attr] = value;
+            return updatedAttributes;
+        });
+    };
+
+    // Handler for removing a filter option from the list of active filters, and returning it to the unusedAttributeList
+    const handleRemoveFilter = (attr: string) => {
+        setSelectedFilters((prevList) => {
+            const newList = { ...prevList };
+            delete newList[attr];
+            return newList;
+        });
+
+        setUnusedAttributesList((prevList) => ({
+            ...prevList,
+            [attr]: allAttributesList[attr],
+        }));
+
+        handleUnselectedFilter(attr);
+    };
+
+    return (
+        <div className="space-y-3">
+            <h3 className="text-lg font-medium">Filter Results</h3>
+            <div className="grid grid-cols-3 gap-2">
+                {Object.entries(selectedFilters).map(([attr, v], i) => {
+                    const label = attr.replace(/_/g, " ");
+                    const selectedValue = selectedAttributes[attr];
+
+                    const options = v.values
+                        ? [
+                              ...v.values.map((value) => ({
+                                  key: value,
+                                  label: value,
+                                  onClick: () => {
+                                      handleSelectFilter(attr, value);
+                                      if (selectedValue === value) handleUnselectedFilter(attr);
+                                  },
+                              })),
+                          ]
+                        : [];
+
+                    return (
+                        <div key={`d1-${i}`} className="space-y-1">
+                            <div className="flex items-center justify-between gap-2 pr-1">
+                                <Label className="capitalize">{label}</Label>
+                                <IconButton name="X" size="sm" onClick={() => handleRemoveFilter(attr)}></IconButton>
+                            </div>
+                            <Select
+                                value={selectedValue}
+                                onValueChange={(value) => {
+                                    handleSelectFilter(attr, value);
+                                    if (selectedValue === value) handleUnselectedFilter(attr);
+                                }}
+                            >
+                                <SelectTrigger>
+                                    <span>
+                                        {selectedValue?.length > 24 ? (
+                                            <TooltipProvider>
+                                                <Tooltip>
+                                                    <TooltipTrigger asChild>
+                                                        <span>{selectedValue.substring(0, 24 - 3) + "..."}</span>
+                                                    </TooltipTrigger>
+                                                    <TooltipContent>{selectedValue}</TooltipContent>
+                                                </Tooltip>
+                                            </TooltipProvider>
+                                        ) : selectedValue ? (
+                                            <span>{selectedValue}</span>
+                                        ) : (
+                                            "Select..."
+                                        )}
+                                    </span>
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {options.map((option) => (
+                                        <SelectItem key={option.key} value={option.key} onClick={option.onClick}>
+                                            {option.label}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+                    );
+                })}
+            </div>
+            <div className="flex gap-2">
+                <Button variant="tertiary" size="sm" onClick={() => handleApply(selectedAttributes)}>
+                    Apply
+                </Button>
+                {filterOptions.length > 0 && (
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button size="sm" variant="tertiary" suffix={<CirclePlus />}>
+                                Add new filter
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start">
+                            {filterOptions.map((option) => (
+                                <DropdownMenuItem key={option.key} onSelect={option.onClick}>
+                                    {option.label}
+                                </DropdownMenuItem>
+                            ))}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                )}
+                <Button variant="tertiary" size="sm" onClick={handleReset}>
+                    Reset
+                </Button>
+            </div>
+        </div>
+    );
+};

package/src/app/components/integrityService/components/FiltersToggle.tsx

@@ -0,0 +1,28 @@
+import { ListFilter } from "lucide-react";
+import { Button, Popover, PopoverContent, PopoverTrigger } from "@eqtylab/equality";
+
+import { FiltersModal } from "./FiltersModal";
+import { PossibleAttributeList, SelectedAttributeList } from "@/app/apiClient/integrityService/types";
+
+interface FiltersToggleProps {
+    label: string;
+    allAttributesList: PossibleAttributeList;
+    handleApply: (attributeFilters: SelectedAttributeList) => Promise<void>;
+}
+
+const FiltersToggle = ({ label, allAttributesList, handleApply }: FiltersToggleProps) => {
+    return (
+        <Popover>
+            <PopoverTrigger asChild>
+                <Button variant="tertiary" prefix={<ListFilter />}>
+                    {label}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-175!">
+                <FiltersModal allAttributesList={allAttributesList} handleApply={handleApply} />
+            </PopoverContent>
+        </Popover>
+    );
+};
+
+export default FiltersToggle;

package/src/app/components/manifestViewer/ManifestViewer.tsx

@@ -0,0 +1,90 @@
+import { useRevalidator } from "react-router-dom";
+
+import { LineageExplorer } from "@/explorer-component";
+import { useManifestStore } from "../../stores/manifestStore";
+import { AppHeader } from "@/components/app-header";
+import { Config } from "@/app/config";
+import { useVComp } from "@/v-comp-viewer/useVComp";
+
+export interface AttributeList {
+    [key: string]: {
+        values?: string[];
+        description?: string;
+        type?: string;
+    };
+}
+
+interface ManifestProps {
+    config: Config;
+    customIcons?: Record<string, string>;
+}
+
+async function getManifestSampleFromPath(path: string): Promise<string | undefined> {
+    const fullPath = `/manifests/${path}.json`;
+    try {
+        const response = await fetch(fullPath);
+        return await response.json();
+    } catch (error) {
+        console.error(`Failed to load JSON from path: ${path}`, error);
+        return undefined;
+    }
+}
+
+const ManifestViewer = ({ config, customIcons }: ManifestProps) => {
+    const { setManifest, manifest: manifestJson } = useManifestStore();
+    const revalidator = useRevalidator();
+
+    const useSampleManifest = async (event: string) => {
+        const sampleData = await getManifestSampleFromPath(event);
+
+        if (sampleData) {
+            setManifest(sampleData);
+            revalidator.revalidate();
+        }
+    };
+
+    const handleFileChange = (file: File) => {
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            if (e.target) {
+                const fileContent = e.target.result as string;
+                setManifest(JSON.parse(fileContent));
+                revalidator.revalidate();
+            }
+        };
+        reader.readAsText(file);
+    };
+
+    const { vCompData, vCompVerifyData, uploads, handleDetectedUploads, onFilesSelected, handleDeleteUpload } =
+        useVComp({
+            manifestJson,
+        });
+
+    return (
+        <div className="flex flex-col h-screen w-screen overflow-hidden">
+            <AppHeader
+                config={config}
+                useSampleManifest={useSampleManifest}
+                handleFileChange={handleFileChange}
+                allowArtifactsUploads={!!vCompData}
+                handleDetectedUploads={handleDetectedUploads}
+                onFilesSelected={onFilesSelected}
+                uploads={uploads}
+                hasManifest={!!manifestJson}
+                handleDeleteManifest={() => setManifest(null)}
+                handleDeleteUpload={handleDeleteUpload}
+            />
+            <LineageExplorer
+                manifestJson={manifestJson}
+                config={config}
+                customIcons={customIcons}
+                vCompData={vCompData}
+                vCompVerifyData={vCompVerifyData}
+            />
+        </div>
+    );
+};
+
+export default ManifestViewer;