MediaWiki:Gadget-GlossaryGraph.js: Difference between revisions

From OODA WIKI
Jump to navigation Jump to search
AdminIsidore (talk | contribs)
No edit summary
AdminIsidore (talk | contribs)
No edit summary
Line 10: Line 10:
             }
             }


             // Query SemanticMediaWiki for related terms
            // Extract term from page title (e.g., "Lingua:Dictum" -> "Dictum")
            var term = pageTitle.split(':').pop();
 
             // Query SMW for pages with Glossary-Definition containing the term
            var smwQuery = encodeURIComponent('[[Glossary-Definition::+*' + term + '*]]|?Glossary-Term');
             new mw.Api().get({
             new mw.Api().get({
                 action: 'ask',
                 action: 'ask',
                 query: '[[Glossary-Definition::+]][[Glossary-Definition::' + pageTitle + '||*' + pageTitle + '*]]|?Glossary-Term',
                 query: smwQuery,
                 format: 'json'
                 format: 'json'
             }).done(function(data) {
             }).done(function(data) {
Line 29: Line 33:
                 }
                 }


                // Transform data into nodes and links
                 var nodes = [{ id: pageTitle }];
                 var nodes = [{ id: pageTitle }];
                 var edges = [];
                 var edges = [];
Line 37: Line 40:
                 });
                 });


                // Clear container and create SVG
                 $container.empty();
                 $container.empty();
                 var width = 400, height = 300;
                 var width = 400, height = 300;
Line 46: Line 48:
                     .style('background-color', '#000000');
                     .style('background-color', '#000000');


                // Force simulation
                 var simulation = d3.forceSimulation(nodes)
                 var simulation = d3.forceSimulation(nodes)
                     .force('link', d3.forceLink(edges).id(d => d.id).distance(100))
                     .force('link', d3.forceLink(edges).id(d => d.id).distance(100))
Line 52: Line 53:
                     .force('center', d3.forceCenter(width / 2, height / 2));
                     .force('center', d3.forceCenter(width / 2, height / 2));


                // Draw links
                 var link = svg.append('g')
                 var link = svg.append('g')
                     .selectAll('line')
                     .selectAll('line')
Line 60: Line 60:
                     .attr('stroke-width', 2);
                     .attr('stroke-width', 2);


                // Draw nodes
                 var node = svg.append('g')
                 var node = svg.append('g')
                     .selectAll('circle')
                     .selectAll('circle')
Line 83: Line 82:
                         }));
                         }));


                // Add tooltips
                 node.append('title').text(d => d.id);
                 node.append('title').text(d => d.id);


                // Update positions on tick
                 simulation.on('tick', function() {
                 simulation.on('tick', function() {
                     link.attr('x1', d => d.source.x)
                     link.attr('x1', d => d.source.x)

Revision as of 00: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');
                return;
            }

            // Extract term from page title (e.g., "Lingua:Dictum" -> "Dictum")
            var term = pageTitle.split(':').pop();

            // Query SMW for pages with Glossary-Definition containing the term
            var smwQuery = encodeURIComponent('[[Glossary-Definition::+*' + term + '*]]|?Glossary-Term');
            new mw.Api().get({
                action: 'ask',
                query: smwQuery,
                format: 'json'
            }).done(function(data) {
                var results = data.query.results || {};
                var links = [];
                for (var page in results) {
                    if (results.hasOwnProperty(page) && page !== pageTitle) {
                        links.push({ title: page });
                    }
                }

                if (links.length === 0) {
                    $container.text('No connections found.');
                    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('circle')
                    .data(nodes)
                    .enter().append('circle')
                    .attr('r', 10)
                    .attr('fill', '#00CC00')
                    .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('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('cx', d => d.x)
                        .attr('cy', d => d.y);
                });
            }).fail(function(error) {
                $container.text('Error: API request failed');
            });
        });
    });
});