MediaWiki:Gadget-GlobalGlossaryGraph.js

$(function() {
    'use strict';
    mw.loader.using(['ext.gadget.d3', 'mediawiki.api'], function() {
        $('.global-glossary-graph').each(function() {
            var $container = $(this);
            new mw.Api().get({
                action: 'askargs',
                conditions: 'Category:Glossary Entries',
                printouts: 'Glossary-Term|Glossary-Definition',
                parameters: 'limit=100', // Increased limit for global graph
                format: 'json',
                formatversion: 2
            }).done(function(data) {
                console.log('SMW API response:', JSON.stringify(data, null, 2));
                var results = data.query.results || {};
                var nodes = [];
                var edges = [];
                var nodeIndex = {};

                // Build nodes
                for (var page in results) {
                    if (results.hasOwnProperty(page)) {
                        var term = results[page].printouts['Glossary-Term'][0] || page.split(':').pop();
                        nodes.push({ id: page, label: term });
                        nodeIndex[page] = term;
                    }
                }

                // Build edges
                for (var page in results) {
                    if (results.hasOwnProperty(page)) {
                        var definitions = results[page].printouts['Glossary-Definition'] || [];
                        definitions.forEach(function(def) {
                            nodes.forEach(function(node) {
                                if (node.id !== page && def.toLowerCase().indexOf(node.label.toLowerCase()) !== -1) {
                                    edges.push({ source: page, target: node.id });
                                }
                            });
                        });
                    }
                }

                if (nodes.length === 0) {
                    $container.text('No glossary terms found.');
                    console.log('No glossary terms found.');
                    return;
                }

                $container.empty();
                var width = 800, height = 600; // Larger canvas for global graph
                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(150))
                    .force('charge', d3.forceManyBody().strength(-300))
                    .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.label)
                    .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&parameters=limit=100&format=json&formatversion=2'
                });
            });
        });
    });
});
```

- **Details**:
  - Uses `askargs` to fetch all glossary entries (`Category:Glossary Entries`) with `Glossary-Term` and `Glossary-Definition`.
  - Creates nodes for each term (using `Glossary-Term` or page title without namespace).
  - Creates edges when a term’s `Glossary-Definition` mentions another term.
  - Larger canvas (800x600) for the global graph.
  - Maintains IBM aesthetic (green `#00FF00` lines, `#00CC00` nodes, black background, green labels in `IBMPlexMono` or `Courier New`).
  - Labels show short term names (e.g., “Dictum”); tooltips show full titles (e.g., “Lingua:Dictum”).
  - Nodes are draggable for interactivity.
- Save and purge: https://www.ooda.wiki/wiki/MediaWiki:Gadget-GlobalGlossaryGraph.js?action=purge.

#### Step 3: Enable the Gadget
1. **Add to Gadgets Definition**:
   Edit https://www.ooda.wiki/wiki/MediaWiki:Gadgets-definition:
   ```
   * GlossaryGraph[ResourceLoader|dependencies=ext.gadget.d3,mediawiki.api]|GlossaryGraph.js
   * GlobalGlossaryGraph[ResourceLoader|dependencies=ext.gadget.d3,mediawiki.api]|GlobalGlossaryGraph.js
   ```
   - Save and purge: https://www.ooda.wiki/wiki/MediaWiki:Gadgets-definition?action=purge.
   - Enable the `GlobalGlossaryGraph` gadget in your user preferences (https://www.ooda.wiki/wiki/Special:Preferences#mw-prefsection-gadgets).

2. **Verify Styling**:
   Ensure https://www.ooda.wiki/wiki/MediaWiki:Common.css includes:
   ```css
   @font-face {
       font-family: "IBMPlexMono";
       src: url("https://www.ooda.wiki/resources/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
       font-weight: normal;
       font-style: normal;
   }
   .global-glossary-graph,
   .glossary-graph,
   .documentation,
   .documentation-metadata,
   .documentation-heading,
   .documentation-toolbar,
   .documentation h2,
   .documentation h3,
   .documentation h4 {
       font-family: "IBMPlexMono", "Courier New", monospace;
   }
   ```
   - Save and purge: https://www.ooda.wiki/wiki/MediaWiki:Common.css?action=purge.

#### Step 4: Test the Global Graph
1. **Visit https://www.ooda.wiki/wiki/Lingua:Global_Glossary_Graph**:
   - Should show a graph with nodes for all 26 glossary terms (e.g., “Dictum”, “TestTerm”, “Scriptum”, “Artifex”), connected by edges where one term’s `Glossary-Definition` mentions another.
   - Nodes should have green labels (`#00FF00`), green circles (`#00CC00`), green lines (`#00FF00`), black background, and be draggable with tooltips.
2. **Identify Gaps**:
   - Isolated nodes (no edges) indicate terms not mentioned in any `Glossary-Definition` (e.g., “TestTerm”).
   - Add mentions to definitions (e.g., add “TestTerm” to `Lingua:Dictum`’s `Glossary-Definition`) to create connections.
3. **Browser Console**:
   - Open DevTools (F12) > Console on the page.
   - Confirm “SMW API response” shows data (similar to previous `curl` output).
   - Check for errors.
4. **Debug Log**:
   ```bash
   cat /var/www/mediawiki/debug.log | tail -n 50
   ```

#### Step 5: Clear Cache (If Needed)
Only run if the graph doesn’t render:
```bash
php maintenance/run.php runJobs
php maintenance/run.php refreshLinks
```
Purge:
- https://www.ooda.wiki/wiki/Lingua:Global_Glossary_Graph?action=purge
- https://www.ooda.wiki/wiki/MediaWiki:Gadget-GlobalGlossaryGraph.js?action=purge
- https://www.ooda.wiki/wiki/Template:GlossaryEntry?action=purge

#### Step 6: Analyze Gaps
- **Isolated Nodes**: Terms like “TestTerm” with no incoming edges (no terms mention it) indicate missing definitions or connections.
- **Sparse Connections**: If few edges appear, review `Glossary-Definition` content in https://www.ooda.wiki/wiki/Category:Glossary_Entries to add more term mentions.
- Example: To connect `TestTerm`, edit https://www.ooda.wiki/wiki/Lingua:Dictum:
  ```wikitext
  {{GlossaryEntry
  |Term=Dictum
  |Definition=Dictum is the smallest unit of Actus within a Scriptum, enabling Fabricatio by an Artifex in AetherOS’s flux. Mentions TestTerm.
  }}
  ```
  - Purge and retest the global graph.

### Next Steps
- Create https://www.ooda.wiki/wiki/Lingua:Global_Glossary_Graph.
- Create and enable `MediaWiki:Gadget-GlobalGlossaryGraph.js`.
- Test the global graph.
- Share:
  - Console output (“SMW API response” or errors).
  - Debug log: `cat /var/www/mediawiki/debug.log | tail -n 50`.
  - Screenshot of the global graph, noting any isolated nodes or missing connections.
  - List of terms you want to prioritize for adding definitions.

This should provide a global graph to visualize all glossary connections and identify gaps. Let me know the results or any tweaks (e.g., larger canvas, different styling)!

Single line of code, an authoritative command to the CPU (e.g., MOV AX, 5), participating in the Form of computational intent.

Single line of code, an authoritative command to the CPU (e.g., MOV AX, 5), participating in the Form of computational intent.

is the smallest unit of Actus within a Scriptum, enabling Fabricatio by an Artifex in AetherOS’s flux.

is an organized collection of Dicta with unified Consilium (purpose), embodying Ordo (order) to achieve Eventus (outcome). Crafted by an Artifex, it participates in the Form of computational purpose within AetherOS’s flux, enabling virtuous Fabricatio.

Single line of code, an authoritative command to the CPU (e.g., MOV AX, 5), participating in the Form of computational intent.

Single line of code, an authoritative command to the CPU (e.g., MOV AX, 5), participating in the Form of computational intent.

Craftsman (human or AI) imposing *Ordo* on *Dicta* for *Scriptum Verum*.

is an Anima that imposes Ordo (order) on Dicta and Fragmenta through Fabricatio to create Scriptum. In AetherOS’s flux, it embodies Consilium (purpose) to achieve Eventus (outcome) or Exitus (exploratory outcome), participating in the Form of computational craftsmanship.

Craftsman (human or AI) imposing *Ordo* on *Dicta* for *Scriptum Verum*.

the process of crafting by an Animans, imposing Ordo (order) on Dicta and Fragmenta to create Scriptum Verum (true scriptum) with Consilium (purpose). As an Actus (action) in AetherOS’s flux, it participates in the Form of computational creation, aligning with Physica Aetheris’s perturbation synthesis and OODA’s Agere phase.