@manta-eu/react 0.1.0

package/dist/graph/property-formatters.js

@@ -0,0 +1,128 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { format, formatDuration, isValid, parseISO } from "date-fns";
+import { match } from "ts-pattern";
+function isCurrencyLabel(label) {
+    if (label.includes("factor"))
+        return false;
+    return /budget|revenue|spend|cost|return/.test(label);
+}
+// node-property-display's ratioFraction keeps a sibling list (incl. score/confidence) for its bars.
+function isPercentLabel(label) {
+    if (label.includes("score"))
+        return false;
+    return /margin|ctr|rate|share|percent/.test(label);
+}
+function isMultiplierLabel(label) {
+    return label.includes("roas") || /(^|[^a-z])mer(\d|[^a-z]|$)/.test(label);
+}
+function isIdentifierLabel(label) {
+    return (label.includes("identifier") ||
+        /(^|[^a-z])id(\d|[^a-z]|$)/.test(label) ||
+        label.includes("phone") ||
+        label.includes("telephone") ||
+        label.includes("zip") ||
+        label.includes("postal") ||
+        label.includes("year"));
+}
+function classifyValueKind(label) {
+    if (isCurrencyLabel(label))
+        return "currency";
+    if (isPercentLabel(label))
+        return "percent";
+    if (isMultiplierLabel(label))
+        return "multiplier";
+    if (isIdentifierLabel(label))
+        return "identifier";
+    return "plain";
+}
+export function parseNumeric(value) {
+    const trimmed = value.trim();
+    if (trimmed === "")
+        return null;
+    const numericValue = Number(trimmed);
+    if (!Number.isFinite(numericValue))
+        return null;
+    if (/^-?\d+$/.test(trimmed) && !Number.isSafeInteger(numericValue))
+        return null;
+    return numericValue;
+}
+const decimalFormatter = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
+const currencyFormatters = new Map();
+function currencyFormatter(currency) {
+    let formatter = currencyFormatters.get(currency);
+    if (!formatter) {
+        formatter = new Intl.NumberFormat("en-US", { style: "currency", currency });
+        currencyFormatters.set(currency, formatter);
+    }
+    return formatter;
+}
+export function normalizeCurrencyCode(value) {
+    if (!value)
+        return null;
+    const normalized = value.trim().toUpperCase();
+    return /^[A-Z]{3}$/.test(normalized) ? normalized : null;
+}
+export function formatCurrency(value, currencyCode) {
+    const currency = normalizeCurrencyCode(currencyCode);
+    return currency ? currencyFormatter(currency).format(value) : decimalFormatter.format(value);
+}
+export function formatNumber(value) {
+    return isPresent(value) ? decimalFormatter.format(value) : undefined;
+}
+export function formatTermCurrency(value, term, currency) {
+    if (term === undefined)
+        return undefined;
+    if (typeof value !== "number" || !Number.isFinite(value))
+        return undefined;
+    return formatCurrency(value / (term.valueScale ?? 1), currency ?? null);
+}
+// For values already on the 0-100 percent scale; formatPercent guesses the scale, this does not.
+export function formatPercentValue(value) {
+    return `${decimalFormatter.format(value)}%`;
+}
+// For 0-1 fractions, including the ones that legitimately exceed 1 where formatPercent stops scaling.
+export function formatPercentFraction(value) {
+    return formatPercentValue(value * 100);
+}
+export function formatPercent(value) {
+    return formatPercentValue(Math.abs(value) <= 1 ? value * 100 : value);
+}
+function formatDateOffset(value) {
+    const match = value.match(/^<DateOffset:\s*days=(\d+),\s*microseconds=\d+,\s*months=(\d+),\s*nanoseconds=\d+>$/);
+    if (!match)
+        return null;
+    const duration = { months: Number(match[2]), days: Number(match[1]) };
+    return formatDuration(duration, { delimiter: ", " }) || "0 days";
+}
+function humanizeToken(value) {
+    if (/^[A-Z][A-Z0-9_]+$/.test(value)) {
+        return value.charAt(0) + value.slice(1).toLowerCase().replace(/_/g, " ");
+    }
+    if (value.includes("_") && !/^https?:\/\//.test(value)) {
+        return value.replace(/_/g, " ").replace(/\b[a-z]/g, (character) => character.toUpperCase());
+    }
+    return value;
+}
+export function formatDisplayValue(value, options) {
+    const combinedLabel = `${options?.predicateLabel ?? ""} ${options?.predicate ?? ""}`.toLowerCase();
+    const numericValue = parseNumeric(value);
+    if (numericValue !== null) {
+        const scale = options?.valueScale && options.valueScale > 0 ? options.valueScale : null;
+        const scaled = scale ? numericValue / scale : numericValue;
+        return match(classifyValueKind(combinedLabel))
+            .with("currency", () => formatCurrency(scaled, options?.currencyCode ?? null))
+            .with("percent", () => formatPercent(scaled))
+            .with("multiplier", () => `${decimalFormatter.format(scaled)}x`)
+            .with("identifier", () => value)
+            .with("plain", () => decimalFormatter.format(scaled))
+            .exhaustive();
+    }
+    if (combinedLabel.includes("currency"))
+        return value;
+    if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(value)) {
+        const date = parseISO(value);
+        if (isValid(date))
+            return format(date, "MMM d, yyyy");
+    }
+    return formatDateOffset(value) ?? humanizeToken(value);
+}

package/dist/graph/rdf-type-colors.d.ts

@@ -0,0 +1,2 @@
+export declare const rdfTypeColors: Record<string, string>;
+//# sourceMappingURL=rdf-type-colors.d.ts.map

package/dist/graph/rdf-type-colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rdf-type-colors.d.ts","sourceRoot":"","sources":["../../src/graph/rdf-type-colors.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAwBhD,CAAC"}

package/dist/graph/rdf-type-colors.js

@@ -0,0 +1,21 @@
+import { google, m, meta, schema } from "@manta-eu/ldo/namespaces";
+export const rdfTypeColors = {
+    // Core Business Entities
+    [m.Company]: "#8b5cf6",
+    // Advertising Entities
+    [google.Campaign]: "#4285f4",
+    // E-commerce Entities
+    [m.Product]: "#f59e0b",
+    // Meta Platform Entities
+    [meta.AdAccount]: "#4c1d95",
+    [meta.Campaign]: "#6d28d9",
+    [meta.AdSet]: "#7c3aed",
+    [meta.Ad]: "#8b5cf6",
+    [meta.AdCreative]: "#a78bfa",
+    [meta.AdAccountDiagnostic]: "#f3e8ff",
+    [meta.AdAccountActivity]: "#5b21b6",
+    // UI & Actions
+    [schema.Action]: "#a3e635",
+    // Input Types
+    [m.Body_generate_meta_product_catalog_creative_texts_api_facebook_creatives_product_catalog_texts_post]: "#6366f1",
+};

package/dist/graph/relation-helpers.d.ts

@@ -0,0 +1,4 @@
+import type { RDFNodeData } from "./types.js";
+export declare function hasIncomingRelations(data: RDFNodeData): boolean;
+export declare function hasOutgoingRelations(data: RDFNodeData): boolean;
+//# sourceMappingURL=relation-helpers.d.ts.map

package/dist/graph/relation-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relation-helpers.d.ts","sourceRoot":"","sources":["../../src/graph/relation-helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,CAE/D;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,CAE/D"}

package/dist/graph/relation-helpers.js

@@ -0,0 +1,6 @@
+export function hasIncomingRelations(data) {
+    return Boolean(data.parentId);
+}
+export function hasOutgoingRelations(data) {
+    return data.childIds.length > 0;
+}

package/dist/graph/special-nodes/BaseNode.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+export type BaseNodeProps = {
+    id: string;
+    selected: boolean;
+    label: string;
+    badge?: string;
+    accentColor?: string;
+    children: ReactNode;
+    onContextMenu?: (e: React.MouseEvent) => void;
+};
+export declare const BaseNode: import("react").NamedExoticComponent<BaseNodeProps>;
+export type CollapsibleNodeProps = {
+    id: string;
+    selected: boolean;
+    label: string;
+    hasChildren: boolean;
+    isCollapsed: boolean;
+    childCount: number;
+    accentColor?: string;
+    children: ReactNode;
+};
+export declare const CollapsibleNode: import("react").NamedExoticComponent<CollapsibleNodeProps>;
+//# sourceMappingURL=BaseNode.d.ts.map

package/dist/graph/special-nodes/BaseNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../src/graph/special-nodes/BaseNode.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEF,eAAO,MAAM,QAAQ,qDAqDnB,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,eAAe,4DAwB1B,CAAC"}

package/dist/graph/special-nodes/BaseNode.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Handle, Position } from "@xyflow/react";
+import { memo, useCallback } from "react";
+import { useGraphContext } from "../GraphContext.js";
+import { useGraphTheme } from "../themes.js";
+import { cn } from "#style";
+export const BaseNode = memo(function BaseNode(props) {
+    const { selected, label, badge, accentColor, children, onContextMenu } = props;
+    const theme = useGraphTheme();
+    return (_jsxs(_Fragment, { children: [_jsx(Handle, { type: "target", position: Position.Left, className: "w-2! h-2!", style: { backgroundColor: theme.edge.default } }), _jsxs("div", { className: cn("rounded-lg shadow-md overflow-hidden", "transition-all duration-200", selected && "ring-2 ring-offset-2"), style: {
+                    backgroundColor: theme.node.background,
+                    borderColor: accentColor ?? theme.node.border,
+                    borderWidth: 2,
+                    borderStyle: "solid",
+                    ...(selected && { ringColor: theme.node.selectedRing }),
+                }, onContextMenu: onContextMenu, children: [_jsxs("div", { className: "px-3 py-2 flex items-center justify-between gap-2", style: { backgroundColor: accentColor ? `${accentColor}15` : undefined }, children: [_jsx("span", { className: "typography-small truncate max-w-[200px]", style: { color: theme.node.text }, title: label, children: label }), badge && (_jsx("span", { className: "px-1.5 py-0.5 rounded typography-tiny flex-shrink-0 text-primary-foreground", style: { backgroundColor: accentColor ?? theme.node.selectedRing }, children: badge }))] }), children] }), _jsx(Handle, { type: "source", position: Position.Right, className: "w-2! h-2!", style: { backgroundColor: theme.edge.default } })] }));
+});
+export const CollapsibleNode = memo(function CollapsibleNode(props) {
+    const { id, selected, label, hasChildren, isCollapsed, childCount, accentColor, children } = props;
+    const { onNodeContextMenu } = useGraphContext();
+    const handleContextMenu = useCallback((e) => {
+        e.preventDefault();
+        onNodeContextMenu(id, label, e.clientX, e.clientY);
+    }, [id, label, onNodeContextMenu]);
+    return (_jsx(BaseNode, { id: id, selected: selected, label: label, badge: hasChildren && isCollapsed ? `+${childCount}` : undefined, accentColor: accentColor, onContextMenu: handleContextMenu, children: children }));
+});

package/dist/graph/special-nodes/DynamicNode.d.ts

@@ -0,0 +1,4 @@
+import type { NodeProps } from "@xyflow/react";
+import type { RDFNode } from "../types.js";
+export declare const DynamicNode: import("react").NamedExoticComponent<NodeProps<RDFNode>>;
+//# sourceMappingURL=DynamicNode.d.ts.map

package/dist/graph/special-nodes/DynamicNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicNode.d.ts","sourceRoot":"","sources":["../../../src/graph/special-nodes/DynamicNode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAGxC,eAAO,MAAM,WAAW,0DAKtB,CAAC"}

package/dist/graph/special-nodes/DynamicNode.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { getNodeComponent } from "./router.js";
+export const DynamicNode = memo(function DynamicNode(props) {
+    const { data } = props;
+    const NodeComponent = getNodeComponent(data.type, data.actionShape);
+    return _jsx(NodeComponent, { ...props });
+});

package/dist/graph/special-nodes/GenericNode.d.ts

@@ -0,0 +1,4 @@
+import type { NodeProps } from "@xyflow/react";
+import type { RDFNode } from "../types.js";
+export declare const GenericNode: import("react").NamedExoticComponent<NodeProps<RDFNode>>;
+//# sourceMappingURL=GenericNode.d.ts.map

package/dist/graph/special-nodes/GenericNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenericNode.d.ts","sourceRoot":"","sources":["../../../src/graph/special-nodes/GenericNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAI/C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAKxC,eAAO,MAAM,WAAW,0DA8BtB,CAAC"}

package/dist/graph/special-nodes/GenericNode.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+import { useGraphContext } from "../GraphContext.js";
+import { useGraphTheme } from "../themes.js";
+import { GenericView } from "./GenericView.js";
+import { hasIncomingRelations, hasOutgoingRelations } from "./node-data.js";
+import { NodeFrame } from "./NodeFrame.js";
+export const GenericNode = memo(function GenericNode(props) {
+    const { data, selected, id } = props;
+    const { onToggleCollapse, onNodeContextMenu, previewHints } = useGraphContext();
+    const theme = useGraphTheme();
+    const onContextMenu = useCallback((e) => {
+        e.preventDefault();
+        onNodeContextMenu(id, data.label, e.clientX, e.clientY);
+    }, [id, data.label, onNodeContextMenu]);
+    const toggleCollapse = useCallback(() => onToggleCollapse(id), [onToggleCollapse, id]);
+    return (_jsx(NodeFrame, { showTargetHandle: hasIncomingRelations(data), showSourceHandle: hasOutgoingRelations(data), edgeHandleColor: theme.edge.default, children: _jsx(GenericView, { data: data, selected: selected, onContextMenu: onContextMenu, previewHints: previewHints, onToggleCollapse: toggleCollapse }) }));
+});

package/dist/graph/special-nodes/GenericView.d.ts

@@ -0,0 +1,8 @@
+import { type PreviewFieldHints } from "../graph-list-utils.js";
+import type { EntityViewProps } from "../types.js";
+export type GenericViewProps = EntityViewProps & {
+    previewHints?: PreviewFieldHints;
+    onToggleCollapse?: () => void;
+};
+export declare const GenericView: import("react").NamedExoticComponent<GenericViewProps>;
+//# sourceMappingURL=GenericView.d.ts.map

package/dist/graph/special-nodes/GenericView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenericView.d.ts","sourceRoot":"","sources":["../../../src/graph/special-nodes/GenericView.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAK7B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAmBhD,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAAG;IAC/C,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,WAAW,wDAwJtB,CAAC"}

package/dist/graph/special-nodes/GenericView.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { expandPrefix } from "@manta-eu/rdf-lib/namespaces";
+import { ChevronRight } from "lucide-react";
+import { memo, useCallback, useMemo } from "react";
+import { getCurrencyCode, isDisplayablePreviewKey, selectPriorityPreviewFields, } from "../graph-list-utils.js";
+import { ontologyTermIrisForProperties, withOntologyLabels } from "../ontology-labels.js";
+import { rdfTypeColors } from "../rdf-type-colors.js";
+import { statusColors } from "../status-utils.js";
+import { useGraphTheme } from "../themes.js";
+import { getStatus } from "./node-data.js";
+import { useOntologyTerms } from "#hooks/use-ontology-terms";
+import { cn } from "#style";
+const defaultColor = "#6b7280";
+const explainCardMaxFacts = 5;
+function getNodeColor(type) {
+    if (!type)
+        return defaultColor;
+    return rdfTypeColors[type] ?? rdfTypeColors[expandPrefix(type)] ?? defaultColor;
+}
+function getStatusStyle(status) {
+    return statusColors[status.toLowerCase()] ?? { bg: "#94a3b8", text: "#ffffff" };
+}
+export const GenericView = memo(function GenericView(props) {
+    const { data, selected = false, onContextMenu, previewHints, onToggleCollapse } = props;
+    const theme = useGraphTheme();
+    const color = useMemo(() => getNodeColor(data.type), [data.type]);
+    const hasChildren = data.hasChildren;
+    const isCollapsed = data.isCollapsed;
+    const handleToggleClick = useCallback((e) => {
+        e.stopPropagation();
+        onToggleCollapse?.();
+    }, [onToggleCollapse]);
+    const status = useMemo(() => getStatus(data), [data]);
+    const ontologyTerms = useOntologyTerms(useMemo(() => ontologyTermIrisForProperties(data.properties), [data.properties]));
+    const labeledProperties = useMemo(() => withOntologyLabels(data.properties, ontologyTerms), [data.properties, ontologyTerms]);
+    const { displayProperties, hiddenPropertiesCount } = useMemo(() => {
+        const properties = status ? labeledProperties.filter((prop) => prop.key !== status.key) : labeledProperties;
+        if (previewHints) {
+            const fields = selectPriorityPreviewFields(properties, previewHints, getCurrencyCode([], properties), {
+                limit: explainCardMaxFacts,
+                keepUnmatched: true,
+            });
+            const total = properties.filter((prop) => isDisplayablePreviewKey(prop.key)).length;
+            const facts = fields.map((field) => ({
+                label: field.label,
+                value: field.value,
+                highlighted: field.isHighlighted ?? false,
+            }));
+            return { displayProperties: facts, hiddenPropertiesCount: Math.max(0, total - facts.length) };
+        }
+        const importantKeys = ["name", "title", "label", "description", "id"];
+        const important = [];
+        const other = [];
+        for (const prop of properties) {
+            const keyLower = prop.key.toLowerCase();
+            if (importantKeys.some((k) => keyLower.includes(k))) {
+                important.push(prop);
+            }
+            else {
+                other.push(prop);
+            }
+        }
+        const maxProperties = 4;
+        const allDisplayed = [...important, ...other]
+            .slice(0, maxProperties)
+            .map((prop) => ({ label: prop.label ?? prop.key, value: prop.value, highlighted: false }));
+        return {
+            displayProperties: allDisplayed,
+            hiddenPropertiesCount: Math.max(0, important.length + other.length - maxProperties),
+        };
+    }, [labeledProperties, status, previewHints]);
+    return (_jsxs("div", { className: "rounded-lg shadow-md min-w-60 max-w-80 transition-all duration-200 overflow-hidden", style: {
+            backgroundColor: theme.node.background,
+            borderColor: color,
+            borderWidth: 2,
+            borderStyle: "solid",
+            ...(selected && { boxShadow: `0 0 0 2px ${theme.node.selectedRing}` }),
+        }, onContextMenu: onContextMenu, children: [_jsxs("div", { className: "px-3 py-2 flex items-center justify-between gap-2", style: { backgroundColor: `${color}20` }, children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [hasChildren && onToggleCollapse && (_jsx("button", { onClick: handleToggleClick, className: cn("w-5 h-5 rounded flex items-center justify-center shrink-0", "bg-muted", "hover:bg-muted transition-all duration-200"), style: { color: theme.node.text }, title: isCollapsed ? "Expand" : "Collapse", children: _jsx(ChevronRight, { className: cn("w-3 h-3 transition-transform duration-200", !isCollapsed && "rotate-90") }) })), _jsx("div", { className: "typography-small truncate", style: { color: theme.node.text }, title: data.label, children: data.label })] }), _jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [status && (_jsx("span", { className: "px-1.5 py-0.5 rounded typography-tiny", style: { backgroundColor: getStatusStyle(status.value).bg, color: getStatusStyle(status.value).text }, children: status.value.toLowerCase() })), hasChildren && isCollapsed && (_jsxs("span", { className: "px-1.5 py-0.5 rounded typography-tiny text-primary-foreground", style: { backgroundColor: color }, children: ["+", data.childIds.length] }))] })] }), isPresent(displayProperties) && (_jsxs("div", { className: "px-3 py-2 space-y-1", children: [displayProperties.map(({ label, value, highlighted }, index) => (_jsxs("div", { className: "flex justify-between typography-tiny gap-2", children: [_jsxs("span", { style: { color: theme.node.textMuted }, className: "shrink-0", children: [label, ":"] }), _jsx("span", { style: {
+                                    color: highlighted ? theme.node.selectedRing : theme.node.text,
+                                    fontWeight: highlighted ? 600 : undefined,
+                                }, className: "truncate text-right tabular-nums", title: value, children: value })] }, index))), hiddenPropertiesCount > 0 && (_jsxs("div", { className: "typography-tiny italic", style: { color: theme.node.textMuted }, children: ["+", hiddenPropertiesCount, " more"] }))] }))] }));
+});

package/dist/graph/special-nodes/NodeFrame.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+export type NodeFrameProps = {
+    showTargetHandle: boolean;
+    showSourceHandle: boolean;
+    edgeHandleColor?: string;
+    children: ReactNode;
+};
+export declare const NodeFrame: import("react").NamedExoticComponent<NodeFrameProps>;
+//# sourceMappingURL=NodeFrame.d.ts.map

package/dist/graph/special-nodes/NodeFrame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeFrame.d.ts","sourceRoot":"","sources":["../../../src/graph/special-nodes/NodeFrame.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,MAAM,MAAM,cAAc,GAAG;IAC3B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,SAAS,sDAWpB,CAAC"}

package/dist/graph/special-nodes/NodeFrame.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Handle, Position } from "@xyflow/react";
+import { memo } from "react";
+export const NodeFrame = memo(function NodeFrame(props) {
+    const { showTargetHandle, showSourceHandle, edgeHandleColor, children } = props;
+    const handleStyle = edgeHandleColor ? { backgroundColor: edgeHandleColor } : undefined;
+    return (_jsxs(_Fragment, { children: [showTargetHandle && _jsx(Handle, { type: "target", position: Position.Left, className: "w-2! h-2!", style: handleStyle }), children, showSourceHandle && _jsx(Handle, { type: "source", position: Position.Right, className: "w-2! h-2!", style: handleStyle })] }));
+});

package/dist/graph/special-nodes/TypeSummaryNode.d.ts

@@ -0,0 +1,4 @@
+import { type NodeProps } from "@xyflow/react";
+import type { RDFNode } from "../types.js";
+export declare const TypeSummaryNode: import("react").NamedExoticComponent<NodeProps<RDFNode>>;
+//# sourceMappingURL=TypeSummaryNode.d.ts.map

package/dist/graph/special-nodes/TypeSummaryNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypeSummaryNode.d.ts","sourceRoot":"","sources":["../../../src/graph/special-nodes/TypeSummaryNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AASjE,OAAO,KAAK,EAAE,OAAO,EAAkB,MAAM,UAAU,CAAC;AAqExD,eAAO,MAAM,eAAe,0DAmG1B,CAAC"}

package/dist/graph/special-nodes/TypeSummaryNode.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { expandPrefix } from "@manta-eu/rdf-lib/namespaces";
+import { Handle, Position } from "@xyflow/react";
+import { Globe, Infinity as InfinityIcon, Layers } from "lucide-react";
+import { memo, useMemo } from "react";
+import { shortenUri } from "../graph-utils.js";
+import { useGraphContext } from "../GraphContext.js";
+import { formatDisplayValue } from "../property-formatters.js";
+import { rdfTypeColors } from "../rdf-type-colors.js";
+import { filterStatusProps, getStatusFromProperties, statusColors } from "../status-utils.js";
+import { useGraphTheme } from "../themes.js";
+import { cn } from "#style";
+const defaultColor = "#6b7280";
+function getNodeColor(type) {
+    if (!type)
+        return defaultColor;
+    return rdfTypeColors[type] ?? rdfTypeColors[expandPrefix(type)] ?? defaultColor;
+}
+function humanizeTypeName(type) {
+    const short = shortenUri(type);
+    return short
+        .replace(/^[:#]/, "")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/[_-]/g, " ");
+}
+function getTypeIcon(type) {
+    const typeStr = (type ?? "").toLowerCase();
+    if (typeStr.includes("meta") || typeStr.includes("facebook")) {
+        return _jsx(InfinityIcon, { size: 14, className: "flex-shrink-0 text-muted-foreground" });
+    }
+    if (typeStr.includes("google") || typeStr.includes("gads")) {
+        return _jsx(Globe, { size: 14, className: "flex-shrink-0 text-muted-foreground" });
+    }
+    return _jsx(Layers, { size: 14, className: "flex-shrink-0 text-muted-foreground" });
+}
+function SampleInstanceRow(props) {
+    const { instance, textColor, mutedColor } = props;
+    const status = getStatusFromProperties(instance.properties);
+    const statusStyle = status ? statusColors[status.toLowerCase()] : undefined;
+    const displayProperties = filterStatusProps(instance.properties);
+    return (_jsxs("div", { className: "px-3 py-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("div", { className: "typography-small truncate", style: { color: textColor }, title: instance.label, children: instance.label }), status && statusStyle && (_jsx("span", { className: "px-1.5 py-0.5 rounded typography-tiny flex-shrink-0", style: { backgroundColor: statusStyle.bg, color: statusStyle.text }, children: status.toLowerCase() }))] }), displayProperties.length > 0 && (_jsx("div", { className: "flex gap-2 mt-0.5 flex-wrap", children: displayProperties.slice(0, 2).map((prop) => (_jsxs("span", { className: "typography-tiny", style: { color: mutedColor }, children: [prop.key, ": ", formatDisplayValue(prop.value)] }, prop.key))) }))] }));
+}
+export const TypeSummaryNode = memo(function TypeSummaryNode(props) {
+    const { data, selected } = props;
+    const theme = useGraphTheme();
+    const { layoutDirection } = useGraphContext();
+    const color = useMemo(() => getNodeColor(data.type), [data.type]);
+    const typeName = useMemo(() => {
+        if (data.type)
+            return humanizeTypeName(data.type);
+        return data.label;
+    }, [data.type, data.label]);
+    const count = data.connectionCount;
+    const sampleInstances = (data.sampleInstances ?? []);
+    const isInEgoChain = (data.isInEgoChain ?? false);
+    const remaining = Math.max(0, count - sampleInstances.length);
+    const isVertical = layoutDirection === "TB";
+    const targetPosition = isVertical ? Position.Top : Position.Left;
+    const sourcePosition = isVertical ? Position.Bottom : Position.Right;
+    return (_jsxs(_Fragment, { children: [_jsx(Handle, { type: "target", position: targetPosition, className: "w-2! h-2!", style: { backgroundColor: theme.edge.default } }), _jsxs("div", { className: "w-fit flex flex-col items-start gap-[4px]", children: [_jsxs("div", { className: "flex items-center gap-[5px] px-1", children: [getTypeIcon(data.type), _jsxs("span", { className: "typography-tiny truncate max-w-[200px] whitespace-nowrap text-muted-foreground", children: [typeName, ": ", count, " items"] })] }), _jsxs("div", { className: cn("rounded-xl shadow-md min-w-[360px] max-w-[420px]", "transition-all duration-200 overflow-hidden"), style: {
+                            backgroundColor: theme.node.background,
+                            borderColor: color,
+                            borderWidth: 2,
+                            borderStyle: "solid",
+                            ...(selected && { boxShadow: `0 0 0 2px ${theme.node.selectedRing}` }),
+                        }, children: [_jsxs("div", { className: "px-4 py-3 flex items-center justify-between gap-3", style: { backgroundColor: `${color}20` }, children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("div", { className: cn("size-3 rounded-full flex-shrink-0", isInEgoChain && "ring-2 ring-offset-1"), style: {
+                                                    backgroundColor: color,
+                                                    ...(isInEgoChain && { "--tw-ring-color": color }),
+                                                } }), _jsx("div", { className: "typography-small truncate", style: { color: theme.node.text }, title: typeName, children: typeName })] }), _jsx("span", { className: "px-2 py-0.5 rounded-full typography-small flex-shrink-0 text-primary-foreground tabular-nums", style: { backgroundColor: color }, children: count })] }), sampleInstances.length > 0 && (_jsx("div", { className: "divide-y", style: { borderColor: `${theme.node.border}` }, children: sampleInstances.map((instance) => (_jsx(SampleInstanceRow, { instance: instance, textColor: theme.node.text, mutedColor: theme.node.textMuted }, instance.id))) })), remaining > 0 && (_jsxs("div", { className: "px-3 py-2 typography-tiny", style: { color: theme.node.textMuted }, children: ["+ ", remaining, " more"] }))] })] }), _jsx(Handle, { type: "source", position: sourcePosition, className: "w-2! h-2!", style: { backgroundColor: theme.edge.default } })] }));
+});

package/dist/graph/special-nodes/index.d.ts

@@ -0,0 +1,11 @@
+export { BaseNode, CollapsibleNode, type BaseNodeProps, type CollapsibleNodeProps } from "./BaseNode.js";
+export { GenericNode } from "./GenericNode.js";
+export { GenericView, type GenericViewProps } from "./GenericView.js";
+export { TypeSummaryNode } from "./TypeSummaryNode.js";
+export { DynamicNode } from "./DynamicNode.js";
+export { getNodeComponent, getEntityView } from "./router.js";
+export { NodeFrame, type NodeFrameProps } from "./NodeFrame.js";
+export { getChannelFromId, getExternalLinkTarget, getImageUrl, getNodeChannel, getNumericProperty, getProperty, getStatus, type ExternalLinkTarget, } from "./node-data.js";
+export { useNodeExternalLink } from "./use-node-external-link.js";
+export { normalizeKey, truncateText } from "./utils.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/graph/special-nodes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/graph/special-nodes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,KAAK,aAAa,EAAE,KAAK,oBAAoB,EAAE,MAAM,YAAY,CAAC;AACtG,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACL,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,cAAc,EACd,kBAAkB,EAClB,WAAW,EACX,SAAS,EACT,KAAK,kBAAkB,GACxB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/graph/special-nodes/index.js

@@ -0,0 +1,10 @@
+export { BaseNode, CollapsibleNode } from "./BaseNode.js";
+export { GenericNode } from "./GenericNode.js";
+export { GenericView } from "./GenericView.js";
+export { TypeSummaryNode } from "./TypeSummaryNode.js";
+export { DynamicNode } from "./DynamicNode.js";
+export { getNodeComponent, getEntityView } from "./router.js";
+export { NodeFrame } from "./NodeFrame.js";
+export { getChannelFromId, getExternalLinkTarget, getImageUrl, getNodeChannel, getNumericProperty, getProperty, getStatus, } from "./node-data.js";
+export { useNodeExternalLink } from "./use-node-external-link.js";
+export { normalizeKey, truncateText } from "./utils.js";

package/dist/graph/special-nodes/node-data.d.ts

@@ -0,0 +1,20 @@
+import { hasIncomingRelations, hasOutgoingRelations } from "../relation-helpers.js";
+import type { RDFNode, RDFNodeData } from "../types.js";
+import type { Channel } from "#components/channel-icon/index";
+export declare function getChannelFromId(id: string): Channel | undefined;
+export declare function getNodeChannel(data: RDFNodeData): Channel | undefined;
+export declare function getProperty(data: RDFNode["data"], key: string): string | undefined;
+export declare function getImageUrl(data: RDFNode["data"]): string | undefined;
+export declare function getStatus(data: RDFNode["data"]): {
+    key: string;
+    value: string;
+} | undefined;
+export declare function getNumericProperty(data: RDFNode["data"], key: string): number | undefined;
+export { hasIncomingRelations, hasOutgoingRelations };
+export type ExternalLinkTarget = {
+    entityTypeUri: string;
+    externalId: string;
+    nodeIri?: string;
+};
+export declare function getExternalLinkTarget(data: RDFNodeData): ExternalLinkTarget | undefined;
+//# sourceMappingURL=node-data.d.ts.map

package/dist/graph/special-nodes/node-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-data.d.ts","sourceRoot":"","sources":["../../../src/graph/special-nodes/node-data.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACjF,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAS9D,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAGhE;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,GAAG,SAAS,CAGrE;AAMD,wBAAgB,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAIlF;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,SAAS,CASrE;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAQ3F;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAKzF;AAED,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAC;AAsBtD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAMF,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,WAAW,GAAG,kBAAkB,GAAG,SAAS,CASvF"}

package/dist/graph/special-nodes/node-data.js

@@ -0,0 +1,85 @@
+import { externalLinkTypes } from "@manta-eu/ldo/external-links";
+import { arrayWrap } from "@manta-eu/lib/array";
+import { isPresent } from "@manta-eu/lib/present";
+import { expandPrefix } from "@manta-eu/rdf-lib/namespaces";
+import { hasIncomingRelations, hasOutgoingRelations } from "../relation-helpers.js";
+const prefixChannelMap = {
+    meta: "META",
+    google: "GOOGLE_ADS",
+    snap: "SNAPCHAT",
+    shopify: "SHOPIFY",
+};
+export function getChannelFromId(id) {
+    const prefix = id.split(":")[0];
+    return prefix ? prefixChannelMap[prefix] : undefined;
+}
+export function getNodeChannel(data) {
+    const jsonLdNode = data.jsonLd;
+    return getChannelFromId(jsonLdNode["@id"] || "");
+}
+function normalizePropertyKey(key) {
+    return key.toLowerCase().replace(/[^a-z0-9]/g, "");
+}
+export function getProperty(data, key) {
+    const normalizedKey = normalizePropertyKey(key);
+    const property = data.properties.find((p) => normalizePropertyKey(p.key) === normalizedKey);
+    return property?.value;
+}
+export function getImageUrl(data) {
+    const imageProperty = data.properties.find((p) => p.key.toLowerCase().includes("image") || p.key.toLowerCase().includes("url"));
+    if (imageProperty?.value)
+        return imageProperty.value;
+    const imageUrlPattern = /https?:\/\/.*\.(png|jpg|jpeg|gif|webp|svg)/i;
+    const urlProperty = data.properties.find((p) => imageUrlPattern.test(p.value));
+    return urlProperty?.value;
+}
+export function getStatus(data) {
+    const candidates = data.properties.filter((p) => {
+        const key = p.key.toLowerCase().trim();
+        return key === "status" || key.endsWith(" status");
+    });
+    if (candidates.length === 0)
+        return undefined;
+    candidates.sort((a, b) => a.key.length - b.key.length);
+    return candidates[0];
+}
+export function getNumericProperty(data, key) {
+    const value = getProperty(data, key);
+    if (value === undefined)
+        return undefined;
+    const parsed = parseFloat(value);
+    return isNaN(parsed) ? undefined : parsed;
+}
+export { hasIncomingRelations, hasOutgoingRelations };
+function resolveEntityType(type) {
+    if (!type)
+        return undefined;
+    if (type.startsWith("http"))
+        return type;
+    return expandPrefix(type);
+}
+function jsonLdId(data) {
+    const id = data.jsonLd["@id"];
+    return typeof id === "string" ? id : undefined;
+}
+function nodeTypeUris(data) {
+    const declaredTypes = arrayWrap(data.jsonLd["@type"]);
+    const resolved = [data.type, ...declaredTypes].filter(isPresent).flatMap((type) => {
+        const uri = resolveEntityType(type);
+        return uri ? [uri] : [];
+    });
+    return new Set(resolved);
+}
+function getExternalIdentifier(data) {
+    return getProperty(data, "external id") ?? getProperty(data, "identifier");
+}
+export function getExternalLinkTarget(data) {
+    const entityTypeUri = [...nodeTypeUris(data)].find((uri) => externalLinkTypes.has(uri));
+    if (!entityTypeUri)
+        return undefined;
+    const externalId = getExternalIdentifier(data);
+    if (!externalId)
+        return undefined;
+    const id = jsonLdId(data);
+    return { entityTypeUri, externalId, nodeIri: id ? expandPrefix(id) : undefined };
+}