Extension:KnowledgeGraph
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: |
$wgKnowledgeGraphShowSidebarLink |
|
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 yourextensions/
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
[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.
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.
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.
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]- 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)