MediaWiki:BibTest.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

const activeTags = new Set();

const tagButtons = document.querySelectorAll(".tag-filter");

tagButtons.forEach(btn => {
    btn.addEventListener("click", () => {

        const tag = btn.dataset.tag;

        if (activeTags.has(tag)) {
            activeTags.delete(tag);
            btn.classList.remove("active");
        } else {
            activeTags.add(tag);
            btn.classList.add("active");
        }

        filterEntries();
        drawNetwork();

    });
});

function filterEntries() {

    document.querySelectorAll(".bib-entry").forEach(entry => {

        const tags = entry.dataset.tags.split(" ");

        const match = [...activeTags].every(t => tags.includes(t));

        if (activeTags.size === 0 || match) {
            entry.style.display = "block";
        } else {
            entry.style.display = "none";
        }

    });
}

document.querySelectorAll(".view-btn").forEach(btn => {
    btn.addEventListener("click", () => {

        document.querySelectorAll(".view-btn")
            .forEach(b => b.classList.remove("active"));

        btn.classList.add("active");

        const view = btn.dataset.view;

        document.getElementById("listView").style.display =
            view === "list" ? "block" : "none";

        document.getElementById("networkCanvas").style.display =
            view === "network" ? "block" : "none";

        drawNetwork();

    });
});

// SIMPLE NETWORK GRAPH
function drawNetwork() {

    const canvas = document.getElementById("networkCanvas");
    const ctx = canvas.getContext("2d");

    ctx.clearRect(0,0,canvas.width,canvas.height);

    const entries = [...document.querySelectorAll(".bib-entry")];

    const nodes = entries.map((e, i) => ({
        id: i,
        label: e.querySelector("h3").innerText,
        tags: e.dataset.tags.split(" "),
        x: Math.random() * 800,
        y: Math.random() * 500
    }));

    // draw nodes
    nodes.forEach(n => {
        ctx.beginPath();
        ctx.arc(n.x, n.y, 6, 0, Math.PI * 2);
        ctx.fillStyle = "#008CBA";
        ctx.fill();
    });

    // draw edges if shared tags
    for (let i = 0; i < nodes.length; i++) {
        for (let j = i+1; j < nodes.length; j++) {

            const shared =
                nodes[i].tags.filter(t =>
                    nodes[j].tags.includes(t)
                );

            if (shared.length > 0) {
                ctx.beginPath();
                ctx.moveTo(nodes[i].x, nodes[i].y);
                ctx.lineTo(nodes[j].x, nodes[j].y);
                ctx.strokeStyle = "rgba(0,140,186,0.2)";
                ctx.stroke();
            }
        }
    }
}