MediaWiki:Gadget-GlobalGlossaryGraph.js - Revision history

AdminIsidore at 16:33, 30 August 2025

2025-08-30T16:33:23Z

← Older revision		Revision as of 16:33, 30 August 2025
Line 121:		Line 121:
	});		});
	});		});
	~~```~~

	~~- 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)!~~

AdminIsidore: Created page with "$(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 f..."

2025-08-30T16:32:58Z

Created page with "$(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 f..."

New page

$(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)!