Extension:KnowledgeGraph

From mediawiki.org
This extension is maintained by a member of the MediaWiki Stakeholders' Group .
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)
Latest version 1.0 (2024-04-24)
MediaWiki 1.39+
PHP 7.4+
License GNU Affero General Public License 3.0
Download

GitHub:

Note:
No localisation updates are
provided by translatewiki.net .

Parameters
$wgKnowledgeGraphShowSidebarLink
Hooks used
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[edit]

  • 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.
  • Yes Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

Special page KnowledgeGraphDesigner[edit]

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[edit]

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[edit]

Extension parameters[edit]

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

Parser function parameters[edit]

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[edit]

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[edit]

  • 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[edit]

Retrieved from "https://www.mediawiki.org/w/index.php?title=Extension:KnowledgeGraph&oldid=6529676"