rdf-cytoscape

React component for rendering RDF graphs and datasets using n3.js and cytoscape.js

You can render either RDF Datasets or RDF Graphs. Datasets use react-panelgroup to split up the different graphs. Both elements take an N3Store as a required prop; for Graphs you just specify the graph name that you want to element to render.

import Graph from "rdf-cytoscape/lib/graph"
import Dataset from "rdf-cytoscape"

interface GraphProps {
	store: N3Store
	graph: string
	focus?: string
	context?: {}
	onSelect?(focus: string): void
	onUnselect?(focus: string): void
	onMouseOver?(focus: string): void
	onMouseOut?(focus: string): void
	onMount?(cy: cytoscape.Core): void
	onDestroy?(): void
}

interface DatasetProps {
	context: {}
	store: N3Store
	focus: string
	onFocus(focus: string): void
}

Either way you need to include rdf-cytoscape/rdf-cytoscape.css in your HTML somewhere, and you need to add the rdf-cytoscape CSS class to the immediate parent.