Spaces:
Runtime error
Runtime error
File size: 5,727 Bytes
5b12974 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 | import { useState, useMemo, forwardRef, useRef, useEffect } from "react";
import { Graph, type GraphRef } from "./graph";
import { GraphPopovers } from "./graph-popover";
import type { RawTriplet, NodePopupContent, EdgePopupContent } from "./type";
import { createLabelColorMap } from "./node-colors";
import { toGraphTriplets } from "./utils";
export interface GraphVisualizationProps {
triplets: RawTriplet[];
width?: number;
height?: number;
zoomOnMount?: boolean;
className?: string;
}
export const GraphVisualization = forwardRef<GraphRef, GraphVisualizationProps>(
(
{
triplets,
width = window.innerWidth * 0.85,
height = window.innerHeight * 0.85,
zoomOnMount = true,
className = "rounded-md h-full overflow-hidden relative",
},
ref,
) => {
// Graph state for popovers
const [showNodePopup, setShowNodePopup] = useState<boolean>(false);
const [showEdgePopup, setShowEdgePopup] = useState<boolean>(false);
const [nodePopupContent, setNodePopupContent] =
useState<NodePopupContent | null>(null);
const [edgePopupContent, setEdgePopupContent] =
useState<EdgePopupContent | null>(null);
// Convert raw triplets to graph triplets
const graphTriplets = useMemo(() => toGraphTriplets(triplets), [triplets]);
// Extract all unique labels from triplets
const allLabels = useMemo(() => {
const labels = new Set<string>();
labels.add("Entity"); // Always include Entity as default
graphTriplets.forEach((triplet) => {
if (triplet.source.primaryLabel)
labels.add(triplet.source.primaryLabel);
if (triplet.target.primaryLabel)
labels.add(triplet.target.primaryLabel);
});
return Array.from(labels).sort((a, b) => {
// Always put "Entity" first
if (a === "Entity") return -1;
if (b === "Entity") return 1;
// Sort others alphabetically
return a.localeCompare(b);
});
}, [graphTriplets]);
// Create a shared label color map
const sharedLabelColorMap = useMemo(() => {
return createLabelColorMap(allLabels);
}, [allLabels]);
// Handle node click
const handleNodeClick = (nodeId: string) => {
// Find the triplet that contains this node
const triplet = triplets.find(
(t) => t.sourceNode.uuid === nodeId || t.targetNode.uuid === nodeId,
);
if (!triplet) return;
// Determine which node was clicked (source or target)
const node =
triplet.sourceNode.uuid === nodeId
? triplet.sourceNode
: triplet.targetNode;
// Set popup content and show the popup
setNodePopupContent({
id: nodeId,
node: node,
});
setShowNodePopup(true);
setShowEdgePopup(false);
};
// Handle edge click
const handleEdgeClick = (edgeId: string) => {
// Find the triplet that contains this edge
const triplet = triplets.find((t) => t.edge.uuid === edgeId);
if (!triplet) return;
// Set popup content and show the popup
setEdgePopupContent({
id: edgeId,
source: triplet.sourceNode,
target: triplet.targetNode,
relation: triplet.edge,
});
setShowEdgePopup(true);
setShowNodePopup(false);
};
// Handle popover close
const handlePopoverClose = () => {
setShowNodePopup(false);
setShowEdgePopup(false);
};
return (
<div className={className}>
{/* Entity Types Legend Button */}
<div className="absolute top-4 left-4 z-50">
{/* <HoverCard>
<HoverCardTrigger asChild>
<button className="bg-primary/10 text-primary hover:bg-primary/20 rounded-md px-2.5 py-1 text-xs transition-colors">
Entity Types
</button>
</HoverCardTrigger>
<HoverCardContent className="w-40" side="bottom" align="start">
<div className="space-y-2">
<div className="max-h-[300px] space-y-1.5 overflow-y-auto pr-2">
{allLabels.map((label) => (
<div key={label} className="flex items-center gap-2">
<div
className="h-4 w-4 flex-shrink-0 rounded-full"
style={{
backgroundColor: getNodeColor(
label,
isDarkMode,
sharedLabelColorMap,
),
}}
/>
<span className="text-xs">{label}</span>
</div>
))}
</div>
</div>
</HoverCardContent>
</HoverCard> */}
</div>
{triplets.length > 0 ? (
<Graph
ref={ref}
triplets={graphTriplets}
width={width}
height={height}
onNodeClick={handleNodeClick}
onEdgeClick={handleEdgeClick}
onBlur={handlePopoverClose}
zoomOnMount={zoomOnMount}
labelColorMap={sharedLabelColorMap}
/>
) : (
<div className="flex h-full items-center justify-center">
<p className="text-muted-foreground">No graph data to visualize.</p>
</div>
)}
<GraphPopovers
showNodePopup={showNodePopup}
showEdgePopup={showEdgePopup}
nodePopupContent={nodePopupContent}
edgePopupContent={edgePopupContent}
onOpenChange={handlePopoverClose}
labelColorMap={sharedLabelColorMap}
/>
</div>
);
},
);
|