Extension:KnowledgeGraph

MediaWiki extensions manual

KnowledgeGraph Release status: beta
Implementation	User interface, Parser function
Description	Allows to visualize knowledge graphs in Semantic MediaWiki with vis-network.js. Includes a KnowledgeGraph Designer to create/export graphs interactively.
Author(s)	thomas-topway-it, Bernhard Krabina
Latest version	1.0 (2024-04-24)
MediaWiki	1.39+
PHP	7.4+
License	GNU Affero General Public License 3.0
Download	GitHub: project page git repository URL [help ] commit history Note: No localisation updates are provided by translatewiki.net .
Parameters $wgKnowledgeGraphShowSidebarLink
Hooks used BeforePageDisplay ParserFirstCallInit OutputPageParserOutput
SemanticMediaWiki 4.0+

The KnowledgeGraph extension provides the #knowledgegraph parser function to visualize the knowledge graph in Semantic MediaWiki (SMW) with vis-network.js. It includes a KnowledgeGraph Designer to create/export graphs interactively.

Installation

• Semantic MediaWiki needs to be installed first for this extension to work.
• Download and place the file(s) in a directory called KnowledgeGraph in your extensions/ folder.
• Add the following code at the bottom of your LocalSettings.php file:

  wfLoadExtension( 'KnowledgeGraph' );
  

• Configure as required.
•  Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

Special page KnowledgeGraphDesigner

The special page "Special:KnowledgeGraphDesigner" offers a set of tools to design a graph without tinkering with the parser function parameters. It also allows you to export the created graph as a parser function (completed with the corresponding parameters) to be easily used on your wiki.

(toolbar)

Nodes can be created/imported in the graph in the following ways:

• by article
• by properties
• by categories

The first will import all the properties related to a specific article in the graph. The second will import all articles containing the entered properties, and the third will import all articles (and related properties), belonging to one or more category.

This set of functions, together with the depth, limit, and offset options, allows to query and to show on the graph a large number of pages on your wiki, effectively displaying the wiki semantic data and the relationships between articles and properties.

(dialog insert by categories)

The graph designer also provides easy access to the native set of Vis Network's options (although, at present, there is a bug in the library when editing the node's color). The generated options can be saved in the exported graph using the parameter property-options or property-options?[property label] with as value the article title in the MediaWiki namespace with the saved settings (in javascript format). See section #Configuration parameters and #Graph options.

(graph settings)

Parser function knowledgegraph

By contrast to the special page Special:KnowledgeGraphDesigner, the parser function knowledgegraph is only meant to display the graph to users after that has been created. Therefore, it does not include a toolbar to edit it. In return, it provides a panel to toggle properties on the graph to make the graph more readable by selectively showing/hiding properties.

(properties toggle buttons, this idea has been taken from the Special:MyLanguage/Extension:InteractiveSemanticGraph)

Example parameters

{{#knowledgegraph:
 |nodes= Ffdfd, Test d
 |properties=A,B, Prop a, Prop_b
 |depth=0
 |show-property-type=false
 |graph-options=MediaWiki:KnowledgeGraphOptions
 |property-options?Organization logo=KnowledgeGraphOptionsImage
 |width=100%
 |height=400px 
 |properties-panel=true
}}

Configuration

Extension parameters

variable	description	default
$wgKnowledgeGraphShowSidebarLink	show sidebar link to special page KnowledgeGraphDesigner	false

Parser function parameters

variable	description	default
nodes	articles to be shown on the graph
properties	limit to the specified set of properties
depth	maximum depth when a property is a page	3
show-property-type	show property type besides the property names	false
graph-options	configuration options for the entire graph (see next section)
property-options?[property label]	configuration options for a specific property or node (see next section)
width	set width of the graph	400px
height	set height of the graph	400px
properties-panel	show/hide properties panel	false

Graph options

After running php maintenance/update.php, the extension creates an article with the title "MediaWiki:KnowledgeGraphOptions" (javascript content model) by which to edit all the available options for the graph.

This, in conjunction with the parameter property-options?[property label] allows, for instance, to display specific properties or nodes with a particular shape (default is 'ellipse', see here for a demo of other possible shapes) and to edit virtually all or almost all the available options for the graph, also for each different property or node!

export default {
	autoResize: true,
	height: '100%',
	width: '100%',
	locale: 'en',
	// locales: locales,
	clickToUse: false,
	configure: {
		enabled: false,
		filter: 'nodes,edges',
		// container: undefined,
		showButton: true,
	},
	edges: {
		arrows: {
			to: {
				enabled: false,
				// imageHeight: undefined,
				// imageWidth: undefined,
				scaleFactor: 1,
				// src: undefined,
				type: 'arrow',
			},
			middle: {
				enabled: false,
				imageHeight: 32,
				imageWidth: 32,
				scaleFactor: 1,
				src: 'https://visjs.org/images/visjs_logo.png',
				type: 'image',
			},
			from: {
				enabled: false,
				// imageHeight: undefined,
				// imageWidth: undefined,
				scaleFactor: 1,
				// src: undefined,
				type: 'arrow',
			},
		},
		endPointOffset: {
			from: 0,
			to: 0,
		},
		arrowStrikethrough: true,
		chosen: true,
		color: {
			color: '#848484',
			highlight: '#848484',
			hover: '#848484',
			inherit: 'from',
			opacity: 1.0,
		},
		dashes: false,
		font: {
			color: '#343434',
			size: 14, // px
			face: 'arial',
			background: 'none',
			strokeWidth: 2, // px
			strokeColor: '#ffffff',
			align: 'horizontal',
			multi: false,
			vadjust: 0,
			bold: {
				color: '#343434',
				size: 14, // px
				face: 'arial',
				vadjust: 0,
				mod: 'bold',
			},
			ital: {
				color: '#343434',
				size: 14, // px
				face: 'arial',
				vadjust: 0,
				mod: 'italic',
			},
			boldital: {
				color: '#343434',
				size: 14, // px
				face: 'arial',
				vadjust: 0,
				mod: 'bold italic',
			},
			mono: {
				color: '#343434',
				size: 15, // px
				face: 'courier new',
				vadjust: 2,
				mod: '',
			},
		},
		hidden: false,
		hoverWidth: 1.5,
		label: undefined,
		labelHighlightBold: true,
		length: undefined,
		physics: true,
		scaling: {
			min: 1,
			max: 15,
			label: {
				enabled: true,
				min: 14,
				max: 30,
				maxVisible: 30,
				drawThreshold: 5,
			},
			customScalingFunction: function (min, max, total, value) {
				if (max === min) {
					return 0.5;
				} else {
					var scale = 1 / (max - min);
					return Math.max(0, (value - min) * scale);
				}
			},
		},
		selectionWidth: 1,
		selfReferenceSize: 20,
		selfReference: {
			size: 20,
			angle: Math.PI / 4,
			renderBehindTheNode: true,
		},
		shadow: {
			enabled: false,
			color: 'rgba(0,0,0,0.5)',
			size: 10,
			x: 5,
			y: 5,
		},
		smooth: {
			enabled: true,
			type: 'dynamic',
			roundness: 0.5,
		},
		title: undefined,
		value: undefined,
		width: 1,
		widthConstraint: false,
	},

	nodes: {
		borderWidth: 1,
		borderWidthSelected: 2,
		brokenImage: undefined,
		chosen: true,
		color: {
			border: '#2B7CE9',
			background: '#97C2FC',
			highlight: {
				border: '#2B7CE9',
				background: '#D2E5FF',
			},
			hover: {
				border: '#2B7CE9',
				background: '#D2E5FF',
			},
		},
		opacity: 1,
		fixed: {
			x: false,
			y: false,
		},
		font: {
			color: '#343434',
			size: 14, // px
			face: 'arial',
			background: 'none',
			strokeWidth: 0, // px
			strokeColor: '#ffffff',
			align: 'center',
			multi: false,
			vadjust: 0,
			bold: {
				color: '#343434',
				size: 14, // px
				face: 'arial',
				vadjust: 0,
				mod: 'bold',
			},
			ital: {
				color: '#343434',
				size: 14, // px
				face: 'arial',
				vadjust: 0,
				mod: 'italic',
			},
			boldital: {
				color: '#343434',
				size: 14, // px
				face: 'arial',
				vadjust: 0,
				mod: 'bold italic',
			},
			mono: {
				color: '#343434',
				size: 15, // px
				face: 'courier new',
				vadjust: 2,
				mod: '',
			},
		},
		group: undefined,
		heightConstraint: false,
		hidden: false,
		icon: {
			face: 'FontAwesome',
			// code: undefined,
			// weight: undefined,
			size: 50, //50,
			color: '#2B7CE9',
		},
		// image: undefined,
		imagePadding: {
			left: 0,
			top: 0,
			bottom: 0,
			right: 0,
		},
		label: undefined,
		labelHighlightBold: true,
		level: undefined,
		mass: 1,
		physics: true,
		scaling: {
			min: 10,
			max: 30,
			label: {
				enabled: false,
				min: 14,
				max: 30,
				maxVisible: 30,
				drawThreshold: 5,
			},
			customScalingFunction: function (min, max, total, value) {
				if (max === min) {
					return 0.5;
				} else {
					var scale = 1 / (max - min);
					return Math.max(0, (value - min) * scale);
				}
			},
		},
		shadow: {
			enabled: false,
			color: 'rgba(0,0,0,0.5)',
			size: 10,
			x: 5,
			y: 5,
		},
		shape: 'ellipse',
		shapeProperties: {
			borderDashes: false, // only for borders
			borderRadius: 6, // only for box shape
			interpolation: false, // only for image and circularImage shapes
			useImageSize: false, // only for image and circularImage shapes
			useBorderWithImage: false, // only for image shape
			coordinateOrigin: 'center', // only for image and circularImage shapes
		},
		size: 25,
		title: undefined,
		value: undefined,
		widthConstraint: false,
		// x: undefined,
		// y: undefined,
	},
	groups: {
		useDefaultGroups: true,
		myGroupId: {
			/*node options*/
		},
	},
	layout: {
		randomSeed: undefined,
		improvedLayout: true,
		clusterThreshold: 150,
		hierarchical: {
			enabled: false,
			levelSeparation: 150,
			nodeSpacing: 100,
			treeSpacing: 200,
			blockShifting: true,
			edgeMinimization: true,
			parentCentralization: true,
			direction: 'UD', // UD, DU, LR, RL
			sortMethod: 'hubsize', // hubsize, directed
			shakeTowards: 'leaves', // roots, leaves
		},
	},
	interaction: {
		dragNodes: true,
		dragView: true,
		hideEdgesOnDrag: false,
		hideEdgesOnZoom: false,
		hideNodesOnDrag: false,
		hover: false,
		hoverConnectedEdges: true,
		keyboard: {
			enabled: false,
			speed: { x: 10, y: 10, zoom: 0.02 },
			bindToWindow: true,
			autoFocus: true,
		},
		multiselect: false,
		navigationButtons: false,
		selectable: true,
		selectConnectedEdges: true,
		tooltipDelay: 300,
		zoomSpeed: 1,
		zoomView: true,
	},
	manipulation: {
		enabled: false,
		initiallyActive: false,
		addNode: true,
		addEdge: true,
		// editNode: undefined,
		editEdge: true,
		deleteNode: true,
		deleteEdge: true,
		controlNodeStyle: {
			// all node options are valid.
		},
	},
	physics: {
		enabled: true,
		barnesHut: {
			theta: 0.5,
			gravitationalConstant: -2000,
			centralGravity: 0.3,
			springLength: 95,
			springConstant: 0.04,
			damping: 0.09,
			avoidOverlap: 0,
		},
		forceAtlas2Based: {
			theta: 0.5,
			gravitationalConstant: -50,
			centralGravity: 0.01,
			springConstant: 0.08,
			springLength: 100,
			damping: 0.4,
			avoidOverlap: 0,
		},
		repulsion: {
			centralGravity: 0.2,
			springLength: 200,
			springConstant: 0.05,
			nodeDistance: 100,
			damping: 0.09,
		},
		hierarchicalRepulsion: {
			centralGravity: 0.0,
			springLength: 100,
			springConstant: 0.01,
			nodeDistance: 120,
			damping: 0.09,
			avoidOverlap: 0,
		},
		maxVelocity: 50,
		minVelocity: 0.1,
		solver: 'barnesHut',
		stabilization: {
			enabled: true,
			iterations: 1000,
			updateInterval: 100,
			onlyDynamicEdges: false,
			fit: true,
		},
		timestep: 0.5,
		adaptiveTimestep: true,
		wind: { x: 0, y: 0 },
	},
};

Below is the reference for each suboject of the configuration object above taken from the original Vis Network docs.

Vis Network config module	description
configure	Generates an interactive option editor with filtering.
edges	Handles the creation and deletion of edges and contains the global edge options and styles.
groups	Contains the groups and some options for handling nodes with non-existing groups.
interaction	Used for all user interaction with the network. Handles mouse and touch events and selection, the navigation buttons, and the popups.
layout	Governs the initial and hierarchical positioning.
manipulation	Supplies an API and optional GUI to alter the data in the network.
nodes	Handles the creation and deletion of nodes and contains the global node options and styles.
physics	Does all the simulation moving the nodes and edges to their final positions also govern stabilization?

Road map

• additional dialog in the special page KnowledgeGraghDesigner through which setting exported parser function settings like show-property-type and more
• enhanced visualization for data values based on their type

See also

• Extension:InteractiveSemanticGraph KnowledeGraph was inspired by InteractiveSemanticGraph, but is now completely rewritten.
• Extension:Network similar, but visualizes links between pages only (without semantics)
• Extension:Semantic MediaWiki Graph (unmaintained)
• Extension:Semantic Graph (archived)
• Extension:VIKI (archived)