MediaWiki:Gadget-GlossaryGraph.js: Difference between revisions
Jump to navigation
Jump to search
AdminIsidore (talk | contribs) Created page with "$(function() { // Find all the places on the page where a graph should be drawn $('.glossary-graph').each(function() { var $container = $(this); var pageTitle = $container.data('page-title'); if (!pageTitle) return; // Use the MediaWiki API to get all links from the specified page new mw.Api().get({ action: 'query', prop: 'links', titles: pageTitle, pllimit: 'max' })...." |
AdminIsidore (talk | contribs) No edit summary |
||
(12 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
$(function() { | $(function() { | ||
'use strict'; | |||
$('.glossary-graph').each(function() { | mw.loader.using(['ext.gadget.d3', 'mediawiki.api'], function() { | ||
$('.glossary-graph').each(function() { | |||
var $container = $(this); | |||
var pageTitle = $container.data('page-title'); | |||
if (!pageTitle) { | |||
$container.text('Error: No page title'); | |||
console.error('No page title found for container'); | |||
return; | |||
} | |||
var term = pageTitle.split(':').pop().toLowerCase(); | |||
new mw.Api().get({ | |||
action: 'askargs', | |||
conditions: 'Category:Glossary Entries', | |||
printouts: 'Glossary-Term|Glossary-Definition', | |||
parameters: 'limit=50', | |||
format: 'json', | |||
formatversion: 2 | |||
}).done(function(data) { | |||
console.log('SMW API response:', JSON.stringify(data, null, 2)); | |||
var results = data.query.results || {}; | |||
var links = []; | |||
for (var page in results) { | |||
if (results.hasOwnProperty(page) && page !== pageTitle) { | |||
var definitions = results[page].printouts['Glossary-Definition'] || []; | |||
if (definitions.length > 0 && definitions.some(function(def) { | |||
return def.toLowerCase().indexOf(term) !== -1; | |||
})) { | |||
links.push({ title: page }); | |||
} | |||
} | |||
} | |||
if (links.length === 0) { | |||
$container.text('No connections found.'); | |||
console.log('No connections found for term:', term); | |||
return; | |||
} | |||
var nodes = [{ id: pageTitle }]; | |||
var edges = []; | |||
links.forEach(function(link) { | |||
nodes.push({ id: link.title }); | |||
edges.push({ source: pageTitle, target: link.title }); | |||
}); | |||
$container.empty(); | |||
var width = 400, height = 300; | |||
var svg = d3.select($container[0]) | |||
.append('svg') | |||
.attr('width', width) | |||
.attr('height', height) | |||
.style('background-color', '#000000'); | |||
var simulation = d3.forceSimulation(nodes) | |||
.force('link', d3.forceLink(edges).id(d => d.id).distance(100)) | |||
.force('charge', d3.forceManyBody().strength(-200)) | |||
.force('center', d3.forceCenter(width / 2, height / 2)); | |||
var link = svg.append('g') | |||
.selectAll('line') | |||
.data(edges) | |||
.enter().append('line') | |||
.attr('stroke', '#00FF00') | |||
.attr('stroke-width', 2); | |||
var node = svg.append('g') | |||
.selectAll('g') | |||
.data(nodes) | |||
.enter().append('g') | |||
.call(d3.drag() | |||
.on('start', function(event, d) { | |||
if (!event.active) simulation.alphaTarget(0.3).restart(); | |||
d.fx = d.x; | |||
d.fy = d.y; | |||
}) | |||
.on('drag', function(event, d) { | |||
d.fx = event.x; | |||
d.fy = event.y; | |||
}) | |||
.on('end', function(event, d) { | |||
if (!event.active) simulation.alphaTarget(0); | |||
d.fx = null; | |||
d.fy = null; | |||
})); | |||
node.append('circle') | |||
.attr('r', 10) | |||
.attr('fill', '#00CC00'); | |||
node.append('text') | |||
.attr('dx', 12) | |||
.attr('dy', '.35em') | |||
.text(d => d.id.split(':').pop()) // Show short term name (e.g., "Dictum") | |||
.style('fill', '#00FF00') | |||
.style('font-family', 'IBMPlexMono, "Courier New", monospace') | |||
.style('font-size', '12px'); | |||
node.append('title').text(d => d.id); | |||
simulation.on('tick', function() { | |||
link.attr('x1', d => d.source.x) | |||
.attr('y1', d => d.source.y) | |||
.attr('x2', d => d.target.x) | |||
.attr('y2', d => d.target.y); | |||
node.attr('transform', d => `translate(${d.x},${d.y})`); | |||
}); | |||
}).fail(function(jqXHR, textStatus, errorThrown) { | |||
$container.text('Error: API request failed'); | |||
console.error('SMW API error details:', { | |||
status: textStatus, | |||
error: errorThrown, | |||
responseText: jqXHR.responseText, | |||
statusCode: jqXHR.status, | |||
url: 'https://www.ooda.wiki/api.php?action=askargs&conditions=Category:Glossary%20Entries&printouts=Glossary-Term|Glossary-Definition¶meters=limit=50&format=json&formatversion=2' | |||
}); | |||
}); | }); | ||
}); | }); | ||
}); | }); | ||
}); | }); |
Latest revision as of 02:42, 30 August 2025
$(function() {
'use strict';
mw.loader.using(['ext.gadget.d3', 'mediawiki.api'], function() {
$('.glossary-graph').each(function() {
var $container = $(this);
var pageTitle = $container.data('page-title');
if (!pageTitle) {
$container.text('Error: No page title');
console.error('No page title found for container');
return;
}
var term = pageTitle.split(':').pop().toLowerCase();
new mw.Api().get({
action: 'askargs',
conditions: 'Category:Glossary Entries',
printouts: 'Glossary-Term|Glossary-Definition',
parameters: 'limit=50',
format: 'json',
formatversion: 2
}).done(function(data) {
console.log('SMW API response:', JSON.stringify(data, null, 2));
var results = data.query.results || {};
var links = [];
for (var page in results) {
if (results.hasOwnProperty(page) && page !== pageTitle) {
var definitions = results[page].printouts['Glossary-Definition'] || [];
if (definitions.length > 0 && definitions.some(function(def) {
return def.toLowerCase().indexOf(term) !== -1;
})) {
links.push({ title: page });
}
}
}
if (links.length === 0) {
$container.text('No connections found.');
console.log('No connections found for term:', term);
return;
}
var nodes = [{ id: pageTitle }];
var edges = [];
links.forEach(function(link) {
nodes.push({ id: link.title });
edges.push({ source: pageTitle, target: link.title });
});
$container.empty();
var width = 400, height = 300;
var svg = d3.select($container[0])
.append('svg')
.attr('width', width)
.attr('height', height)
.style('background-color', '#000000');
var simulation = d3.forceSimulation(nodes)
.force('link', d3.forceLink(edges).id(d => d.id).distance(100))
.force('charge', d3.forceManyBody().strength(-200))
.force('center', d3.forceCenter(width / 2, height / 2));
var link = svg.append('g')
.selectAll('line')
.data(edges)
.enter().append('line')
.attr('stroke', '#00FF00')
.attr('stroke-width', 2);
var node = svg.append('g')
.selectAll('g')
.data(nodes)
.enter().append('g')
.call(d3.drag()
.on('start', function(event, d) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
})
.on('drag', function(event, d) {
d.fx = event.x;
d.fy = event.y;
})
.on('end', function(event, d) {
if (!event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}));
node.append('circle')
.attr('r', 10)
.attr('fill', '#00CC00');
node.append('text')
.attr('dx', 12)
.attr('dy', '.35em')
.text(d => d.id.split(':').pop()) // Show short term name (e.g., "Dictum")
.style('fill', '#00FF00')
.style('font-family', 'IBMPlexMono, "Courier New", monospace')
.style('font-size', '12px');
node.append('title').text(d => d.id);
simulation.on('tick', function() {
link.attr('x1', d => d.source.x)
.attr('y1', d => d.source.y)
.attr('x2', d => d.target.x)
.attr('y2', d => d.target.y);
node.attr('transform', d => `translate(${d.x},${d.y})`);
});
}).fail(function(jqXHR, textStatus, errorThrown) {
$container.text('Error: API request failed');
console.error('SMW API error details:', {
status: textStatus,
error: errorThrown,
responseText: jqXHR.responseText,
statusCode: jqXHR.status,
url: 'https://www.ooda.wiki/api.php?action=askargs&conditions=Category:Glossary%20Entries&printouts=Glossary-Term|Glossary-Definition¶meters=limit=50&format=json&formatversion=2'
});
});
});
});
});