Extension:KnowledgeGraph
 Release status: unknown |
|
|---|---|
| Implementation | User interface, Parser function |
| Description | Provides the #knowledgegraph parser function to visualize the knowledge graph in Semantic MediaWiki with vis-network.js. Includes a KnowledgeGraph Designer through which interactively create/export graphs. |
| Author(s) | thomas-topway-it, Bernhard Krabina |
| MediaWiki | |
| License | GNU General Public License 2.0 or later |
| Download | No link |
| Translate the KnowledgeGraph extension if it is available at translatewiki.net | |
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 through which interactively create/export graphs.
 | The extension is not released yet. It is planned to present it at the MediaWiki Users and Developers Conference 2024 |
Installation[edit]
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, and allows 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 of the library when editing the nodes color) and 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 to users the graph after that has been created, therefore it does not include the toolbar to edit it, and in return it provides a panel to toggle properties on the graph, as a way 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
}}
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
|
Global parameters[edit]
| variable | description | default |
|---|---|---|
$wgKnowledgeGraphShowSidebarLink |
show sidebar link to special page KnowledgeGraphDesigner | false
|
Graph options[edit]
After running php maintenance/update.php the extension creates an article with 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 on how to handle nodes with non-existing groups. |
| interaction | Used for all user interaction with the network. Handles mouse and touch events and selection as well as 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 governs stabilization. |
Road map[edit]
- additional dialog in the special page KnowledgeGraghDesigner through which setting exported parser function settings like
show-property-typeand 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)