@manta-eu/react 0.1.8 → 0.1.10

package/src/graph/GraphControls.tsx

@@ -0,0 +1,187 @@
+import { useViewport, type ReactFlowInstance } from "@xyflow/react";
+import { toPng } from "html-to-image";
+import {
+  ArrowLeftRight,
+  ArrowUpDown,
+  Copy,
+  Download,
+  ListChecks,
+  Maximize,
+  Maximize2,
+  Minimize2,
+  Network,
+  LayoutGrid,
+  ZoomIn,
+  ZoomOut,
+} from "lucide-react";
+import { memo, useCallback, useMemo } from "react";
+import type { RefObject } from "react";
+import { toast } from "sonner";
+import type { RdfGraph } from "../lib/rdf-helpers";
+import type { GraphViewMode, LayoutDirection } from "./graph-state";
+import type { RDFEdge } from "./graph-utils";
+import { serializeRdfGraph } from "./graph-utils";
+import { useGraphTheme } from "./themes";
+import type { RDFNode } from "./types";
+import { Button } from "#components/button/index";
+
+export type GraphControlsProps = {
+  reactFlowInstance: RefObject<ReactFlowInstance<RDFNode, RDFEdge> | null>;
+  graphContainerRef: RefObject<HTMLDivElement | null>;
+  graph: RdfGraph;
+  isFullscreen: boolean;
+  onToggleFullscreen: () => void;
+  layoutDirection: LayoutDirection;
+  onToggleLayoutDirection: () => void;
+  isSummaryView: boolean;
+  onToggleSummaryView: () => void;
+  viewMode: GraphViewMode;
+  onToggleViewMode: () => void;
+  disableSummaryView?: boolean;
+};
+
+export const GraphControls = memo(function GraphControls(props: GraphControlsProps) {
+  const {
+    reactFlowInstance,
+    graphContainerRef,
+    graph,
+    isFullscreen,
+    onToggleFullscreen,
+    layoutDirection,
+    onToggleLayoutDirection,
+    isSummaryView,
+    onToggleSummaryView,
+    viewMode,
+    onToggleViewMode,
+    disableSummaryView = false,
+  } = props;
+
+  const isListView = viewMode === "list";
+
+  const { zoom } = useViewport();
+  const zoomPercent = Math.round(zoom * 100);
+  const theme = useGraphTheme();
+
+  const controlsStyle = useMemo(
+    () => ({
+      backgroundColor: theme.node.background,
+      borderColor: theme.node.border,
+      color: theme.node.text,
+    }),
+    [theme],
+  );
+
+  const handleCopyJson = useCallback(() => {
+    const text = JSON.stringify(serializeRdfGraph(graph), null, 2);
+    void navigator.clipboard.writeText(text).then(
+      () => toast.success("Graph data copied to clipboard"),
+      () => toast.error("Failed to copy graph data"),
+    );
+  }, [graph]);
+
+  const handleZoomIn = useCallback(() => {
+    void reactFlowInstance.current?.zoomIn({ duration: 200 });
+  }, [reactFlowInstance]);
+
+  const handleZoomOut = useCallback(() => {
+    void reactFlowInstance.current?.zoomOut({ duration: 200 });
+  }, [reactFlowInstance]);
+
+  const handleFitView = useCallback(() => {
+    void reactFlowInstance.current?.fitView({ padding: 0.2, duration: 300 });
+  }, [reactFlowInstance]);
+
+  const exportGraph = useCallback(() => {
+    if (!graphContainerRef.current) {
+      console.error("Graph container not found");
+      return;
+    }
+
+    const viewport = graphContainerRef.current.querySelector(".react-flow__viewport") as HTMLElement | null;
+    if (!viewport) {
+      console.error("React Flow viewport not found");
+      return;
+    }
+
+    toPng(viewport, {
+      backgroundColor: theme.canvas.background,
+      pixelRatio: 2,
+    })
+      .then((dataUrl) => {
+        const link = document.createElement("a");
+        link.setAttribute("href", dataUrl);
+        link.setAttribute("download", "graph.png");
+        link.click();
+      })
+      .catch((error) => {
+        console.error("Failed to export graph:", error);
+      });
+  }, [graphContainerRef, theme.canvas.background]);
+
+  return (
+    <div className="flex gap-1 backdrop-blur-sm rounded-md p-1 border shadow-sm" style={controlsStyle}>
+      {!isListView && (
+        <>
+          <Button onClick={handleZoomIn} variant="ghost" size="sm" iconOnly icon={ZoomIn} aria-label="Zoom In" />
+          <span
+            className="flex items-center justify-center typography-small min-w-[36px] text-center align-center tabular-nums"
+            style={{ color: theme.node.textMuted }}
+          >
+            {zoomPercent}%
+          </span>
+          <Button onClick={handleZoomOut} variant="ghost" size="sm" iconOnly icon={ZoomOut} aria-label="Zoom Out" />
+          {!disableSummaryView && (
+            <Button
+              onClick={onToggleSummaryView}
+              variant="ghost"
+              size="sm"
+              iconOnly
+              icon={isSummaryView ? LayoutGrid : Network}
+              aria-label={isSummaryView ? "Switch to Detailed View" : "Switch to Summary View"}
+            />
+          )}
+        </>
+      )}
+      <Button
+        onClick={onToggleViewMode}
+        variant="ghost"
+        size="sm"
+        iconOnly
+        icon={isListView ? Network : ListChecks}
+        aria-label={isListView ? "Switch to Graph View" : "Switch to List View"}
+      />
+      {!isListView && (
+        <>
+          <Button onClick={handleFitView} variant="ghost" size="sm" iconOnly icon={Maximize} aria-label="Fit View" />
+          <Button
+            onClick={onToggleLayoutDirection}
+            variant="ghost"
+            size="sm"
+            iconOnly
+            icon={layoutDirection === "LR" ? ArrowUpDown : ArrowLeftRight}
+            aria-label={layoutDirection === "LR" ? "Switch to Vertical Layout" : "Switch to Horizontal Layout"}
+          />
+          <Button
+            onClick={handleCopyJson}
+            variant="ghost"
+            size="sm"
+            iconOnly
+            icon={Copy}
+            aria-label="Copy graph data to clipboard"
+          />
+        </>
+      )}
+      {isFullscreen && !isListView && (
+        <Button onClick={exportGraph} variant="ghost" size="sm" iconOnly icon={Download} aria-label="Export PNG" />
+      )}
+      <Button
+        onClick={onToggleFullscreen}
+        variant="ghost"
+        size="sm"
+        iconOnly
+        icon={isFullscreen ? Minimize2 : Maximize2}
+        aria-label={isFullscreen ? "Exit Fullscreen" : "Fullscreen"}
+      />
+    </div>
+  );
+});

package/src/graph/GraphErrorBoundary.tsx

@@ -0,0 +1,44 @@
+import type { ErrorInfo, ReactNode } from "react";
+import { Component } from "react";
+
+export type ErrorBoundaryState = {
+  hasError: boolean;
+  error?: Error;
+};
+
+export type GraphErrorBoundaryProps = {
+  children: ReactNode;
+  fallback?: ReactNode;
+};
+
+export class GraphErrorBoundary extends Component<GraphErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: GraphErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("Graph component error:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        this.props.fallback || (
+          <div className="p-4 border border-error-border bg-error rounded-md">
+            <h3 className="typography-small-medium text-error-foreground">Graph Visualization Error</h3>
+            <p className="typography-small text-error-foreground mt-1">
+              Failed to render graph: {this.state.error?.message || "Unknown error"}
+            </p>
+          </div>
+        )
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/graph/GraphListView.tsx

@@ -0,0 +1,139 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useEffect, useMemo, type ReactNode } from "react";
+import { flattenVisibleRows, listPageSize } from "./graph-list-utils";
+import type { RDFNode } from "./types";
+import { Button } from "#components/button/index";
+
+export type GraphListViewRenderHeaderArgs = {
+  nodes: RDFNode[];
+  nodeMap: Map<string, RDFNode>;
+  planGraphIri?: string;
+};
+
+export type GraphListViewRenderRowArgs = {
+  node: RDFNode;
+  depth: number;
+  parentLabel?: string;
+  isSelected: boolean;
+  isCollapsed: boolean;
+  planGraphIri?: string;
+};
+
+export type GraphListViewProps = {
+  nodes: RDFNode[];
+  parentChildMap: Map<string, string[]>;
+  collapsedNodeIds: Set<string>;
+  selectedNodeId?: string;
+  planGraphIri?: string;
+  currentPage: number;
+  onPageChange: (page: number) => void;
+  renderHeader: (args: GraphListViewRenderHeaderArgs) => ReactNode;
+  renderRow: (args: GraphListViewRenderRowArgs) => ReactNode;
+};
+
+export function GraphListView(props: GraphListViewProps) {
+  const {
+    nodes,
+    parentChildMap,
+    collapsedNodeIds,
+    selectedNodeId,
+    planGraphIri,
+    currentPage,
+    onPageChange,
+    renderHeader,
+    renderRow,
+  } = props;
+
+  const nodeMap = useMemo(() => new Map(nodes.map((node) => [node.id, node])), [nodes]);
+
+  const visibleRows = useMemo(
+    () => flattenVisibleRows({ nodes, parentChildMap, collapsedNodeIds }),
+    [nodes, parentChildMap, collapsedNodeIds],
+  );
+
+  const totalPages = Math.max(1, Math.ceil(visibleRows.length / listPageSize));
+  const page = Math.min(currentPage, totalPages);
+
+  useEffect(() => {
+    if (page !== currentPage) {
+      onPageChange(page);
+    }
+  }, [currentPage, onPageChange, page]);
+
+  const pageStart = (page - 1) * listPageSize;
+  const pageRows = visibleRows.slice(pageStart, pageStart + listPageSize);
+
+  return (
+    <div className="flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-background">
+      <div className="border-b border-default-border px-4 py-3">
+        <div className="typography-small-medium text-default-foreground">List view</div>
+        <div className="typography-tiny text-muted-foreground">
+          {visibleRows.length} visible row{visibleRows.length === 1 ? "" : "s"}
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-auto pb-16">
+        {pageRows.length === 0 ? (
+          <div className="flex h-full items-center justify-center px-6">
+            <span className="typography-small text-muted-foreground">No graph rows available.</span>
+          </div>
+        ) : (
+          <div>
+            {renderHeader({ nodes: pageRows.map((r) => r.node), nodeMap, planGraphIri })}
+            <div>
+              {pageRows.map(({ node, depth }) => {
+                const parentNode = node.data.parentId ? nodeMap.get(node.data.parentId) : undefined;
+                return (
+                  <div key={node.id}>
+                    {renderRow({
+                      node,
+                      depth,
+                      parentLabel: parentNode?.data.label,
+                      isSelected: selectedNodeId === node.id,
+                      isCollapsed: collapsedNodeIds.has(node.id),
+                      planGraphIri,
+                    })}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="border-t border-default-border bg-background/95 px-4 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/80">
+        <div className="flex items-center justify-between gap-3">
+          <span className="typography-tiny text-muted-foreground">
+            Showing {visibleRows.length === 0 ? 0 : pageStart + 1}-
+            {Math.min(pageStart + listPageSize, visibleRows.length)} of {visibleRows.length}
+          </span>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              rounded="md"
+              icon={ChevronLeft}
+              label="Previous"
+              onClick={() => onPageChange(page - 1)}
+              disabled={page <= 1}
+            />
+            <span className="typography-tiny min-w-[4.5rem] text-center text-muted-foreground">
+              Page {page} / {totalPages}
+            </span>
+            <Button
+              variant="ghost"
+              size="sm"
+              rounded="md"
+              icon={ChevronRight}
+              showRightIcon={true}
+              showLeftIcon={false}
+              label="Next"
+              onClick={() => onPageChange(page + 1)}
+              disabled={page >= totalPages}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/graph/NodeContextMenu.tsx

@@ -0,0 +1,158 @@
+import { Download, ExternalLink, Link, Maximize2, Minimize2 } from "lucide-react";
+import { memo, useCallback } from "react";
+import { useNodeExternalLink } from "./special-nodes/use-node-external-link";
+import type { RDFNodeData } from "./types";
+import { cn } from "#style";
+
+export type NodeContextMenuProps = {
+  nodeId: string;
+  nodeLabel: string;
+  nodeData?: RDFNodeData;
+  x: number;
+  y: number;
+  onClose: () => void;
+  onLoadRelationships?: (nodeId: string) => void;
+  onExpandAll?: (nodeId: string) => void;
+  onCollapseAll?: (nodeId: string) => void;
+  onExportNode?: (nodeId: string) => void;
+  canLoadRelationships?: boolean;
+  isExpanded?: boolean;
+};
+
+export const NodeContextMenu = memo(function NodeContextMenu(props: NodeContextMenuProps) {
+  const {
+    nodeId,
+    nodeLabel,
+    nodeData,
+    x,
+    y,
+    onClose,
+    onLoadRelationships,
+    onExpandAll,
+    onCollapseAll,
+    onExportNode,
+    canLoadRelationships = true,
+    isExpanded = false,
+  } = props;
+
+  const externalLink = useNodeExternalLink(nodeData);
+
+  const handleLoadRelationships = useCallback(() => {
+    onLoadRelationships?.(nodeId);
+    onClose();
+  }, [nodeId, onLoadRelationships, onClose]);
+
+  const handleToggleExpand = useCallback(() => {
+    if (isExpanded) {
+      onCollapseAll?.(nodeId);
+    } else {
+      onExpandAll?.(nodeId);
+    }
+    onClose();
+  }, [nodeId, isExpanded, onExpandAll, onCollapseAll, onClose]);
+
+  const handleExportNode = useCallback(() => {
+    onExportNode?.(nodeId);
+    onClose();
+  }, [nodeId, onExportNode, onClose]);
+
+  const handleOpenExternal = useCallback(() => {
+    if (externalLink) {
+      window.open(externalLink.url, "_blank", "noopener,noreferrer");
+    }
+    onClose();
+  }, [externalLink, onClose]);
+
+  return (
+    <>
+      <div className="fixed inset-0 z-[9998]" onClick={onClose} />
+
+      <div
+        className={cn(
+          "fixed z-[9999]",
+          "bg-background",
+          "border border-default-border",
+          "rounded-lg shadow-xl overflow-hidden",
+          "min-w-[220px] max-w-[280px]",
+        )}
+        style={{ left: `${x}px`, top: `${y}px` }}
+      >
+        <div className="px-3 py-2 border-b border-default-border bg-background">
+          <div className="typography-small-medium truncate text-default-foreground">{nodeLabel}</div>
+          <div className="typography-tiny text-muted-foreground truncate font-mono">{nodeId}</div>
+        </div>
+
+        <div className="py-1">
+          {externalLink && (
+            <button
+              onClick={handleOpenExternal}
+              className={cn(
+                "w-full px-3 py-2 text-left typography-small",
+                "flex items-center gap-2",
+                "text-default-foreground",
+                "hover:bg-muted",
+                "transition-colors",
+              )}
+            >
+              <ExternalLink className="size-4" />
+              {externalLink.label}
+            </button>
+          )}
+
+          {canLoadRelationships && (
+            <button
+              onClick={handleLoadRelationships}
+              className={cn(
+                "w-full px-3 py-2 text-left typography-small",
+                "flex items-center gap-2",
+                "text-default-foreground",
+                "hover:bg-background/50",
+                "transition-colors",
+              )}
+            >
+              <Link className="size-4" />
+              Load relationships
+            </button>
+          )}
+
+          <button
+            onClick={handleToggleExpand}
+            className={cn(
+              "w-full px-3 py-2 text-left typography-small",
+              "flex items-center gap-2",
+              "text-default-foreground",
+              "hover:bg-muted",
+              "transition-colors",
+            )}
+          >
+            {isExpanded ? (
+              <>
+                <Minimize2 className="size-4" />
+                Collapse all children
+              </>
+            ) : (
+              <>
+                <Maximize2 className="size-4" />
+                Expand all children
+              </>
+            )}
+          </button>
+
+          <button
+            onClick={handleExportNode}
+            className={cn(
+              "w-full px-3 py-2 text-left typography-small",
+              "flex items-center gap-2",
+              "text-default-foreground",
+              "hover:bg-background/50",
+              "transition-colors",
+            )}
+          >
+            <Download className="size-4" />
+            Export node data
+          </button>
+        </div>
+      </div>
+    </>
+  );
+});

package/src/graph/NodeDetailPanel/NodeDetailPanel.tsx

@@ -0,0 +1,159 @@
+import { arrayWrap } from "@manta-eu/lib/array";
+import { isPresent } from "@manta-eu/lib/present";
+import { expandPrefix } from "@manta-eu/rdf-lib/namespaces";
+import { ChevronLeft, ExternalLink } from "lucide-react";
+import { type ReactNode, useEffect, useMemo, useState } from "react";
+import { NodeJsonView } from "../NodeJsonView";
+import { getNodeChannel } from "../special-nodes/node-data";
+import { useNodeExternalLink } from "../special-nodes/use-node-external-link";
+import type { RDFNode, RDFNodeData, SampleInstance } from "../types";
+import { InstanceDetailView, TypeSummaryListView } from "./TypeSummaryPanel";
+import { ChannelIcon } from "#components/channel-icon/index";
+import { EntityRelationTree } from "#entity-tree/index";
+import { useConnectedAccountEntityIris } from "#hooks/use-connected-account-entity-iris";
+import { jsonLdToTurtle } from "#shacl/jsonld-to-turtle";
+import { ShaclForm } from "#shacl/ShaclForm";
+import { findShapeForTypes } from "#shacl/shape-registry";
+import { cn } from "#style";
+
+export type RenderPropertyDiffArgs = {
+  node: RDFNodeData;
+  nodeIri: string;
+  planGraphIri?: string;
+};
+
+export type NodeDetailPanelProps = {
+  node: RDFNodeData;
+  allNodes?: RDFNode[];
+  planGraphIri?: string;
+  onClose?: () => void;
+  renderPropertyDiff?: (args: RenderPropertyDiffArgs) => ReactNode;
+};
+
+export function NodeDetailPanel(props: NodeDetailPanelProps) {
+  const { node, planGraphIri, onClose, renderPropertyDiff } = props;
+
+  const isSummaryNode = Array.isArray(node.allInstances);
+  const [selectedInstance, setSelectedInstance] = useState<SampleInstance | null>(null);
+
+  const nodeKey = `${node.label}-${node.type ?? ""}`;
+  useEffect(() => {
+    setSelectedInstance(null);
+  }, [nodeKey]);
+
+  const nodeTypes = useMemo(() => {
+    if (node.type) return [node.type];
+    const jsonLdNode = node.jsonLd as { "@type"?: string | string[] };
+    if (jsonLdNode["@type"]) {
+      return arrayWrap(jsonLdNode["@type"]);
+    }
+    return [];
+  }, [node]);
+
+  const shape = useMemo(() => findShapeForTypes(nodeTypes), [nodeTypes]);
+
+  const nodeIri = useMemo(() => {
+    const jsonLdNode = node.jsonLd as { "@id"?: string };
+    return expandPrefix(jsonLdNode["@id"] || "");
+  }, [node]);
+
+  const { iris: connectedAccountIris } = useConnectedAccountEntityIris();
+  const isConnectedAccountRoot = isPresent(nodeIri) && connectedAccountIris.has(nodeIri);
+  const rootTypeIri = useMemo(() => {
+    if (!isConnectedAccountRoot) return;
+    return nodeTypes.map(expandPrefix)[0];
+  }, [isConnectedAccountRoot, nodeTypes]);
+
+  const valuesTurtle = useMemo(() => {
+    if (!shape || !nodeIri) return;
+    try {
+      return jsonLdToTurtle(node.jsonLd, nodeIri);
+    } catch {
+      return;
+    }
+  }, [shape, node.jsonLd, nodeIri]);
+
+  const headerTitle = isSummaryNode && selectedInstance ? selectedInstance.label : node.label;
+
+  const externalLink = useNodeExternalLink(node);
+  const channel = getNodeChannel(node);
+
+  return (
+    <div className="w-full bg-background border border-default-border rounded-lg shadow-lg overflow-hidden">
+      <div className="px-3 py-2 border-b border-default-border bg-background flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2 min-w-0 flex-1">
+          {isSummaryNode && selectedInstance && (
+            <button
+              type="button"
+              onClick={() => setSelectedInstance(null)}
+              className="text-muted-foreground hover:text-default-foreground transition-colors shrink-0 -ml-1"
+              aria-label="Back to list"
+            >
+              <ChevronLeft className="size-4" />
+            </button>
+          )}
+          {channel && <ChannelIcon channel={channel} iconClassName="size-4" />}
+          <h3
+            className="typography-small-semibold text-default-foreground min-w-0 flex-1 break-all line-clamp-1"
+            title={headerTitle}
+          >
+            {headerTitle}
+          </h3>
+        </div>
+        <div className="flex items-center gap-1 shrink-0">
+          {externalLink && (
+            <a
+              href={externalLink.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-muted-foreground hover:text-default-foreground transition-colors p-0.5"
+              aria-label={externalLink.label}
+              title={externalLink.label}
+            >
+              <ExternalLink className="size-4" />
+            </a>
+          )}
+          {onClose && (
+            <button
+              type="button"
+              onClick={onClose}
+              className={cn("text-muted-foreground hover:text-default-foreground", "transition-colors")}
+              aria-label="Close panel"
+            >
+              <svg className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          )}
+        </div>
+      </div>
+
+      {isSummaryNode ? (
+        selectedInstance ? (
+          <InstanceDetailView instance={selectedInstance} />
+        ) : (
+          <TypeSummaryListView node={node} onSelectInstance={setSelectedInstance} />
+        )
+      ) : (
+        <div className="p-3 overflow-auto max-h-[50vh] space-y-4">
+          {shape && valuesTurtle ? (
+            <ShaclForm
+              shapes={shape.shapeTurtle}
+              values={valuesTurtle}
+              valuesSubject={nodeIri}
+              viewMode={true}
+              collapse="open"
+            />
+          ) : nodeIri && renderPropertyDiff ? (
+            renderPropertyDiff({ node, nodeIri, planGraphIri })
+          ) : !isConnectedAccountRoot ? (
+            <NodeJsonView jsonLd={node.jsonLd} message="No form definition available for this type" />
+          ) : null}
+          {isConnectedAccountRoot && nodeIri ? (
+            <EntityRelationTree rootIri={nodeIri} rootLabel={node.label} rootTypeIri={rootTypeIri} />
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}