graph-view/js/graph.js

"use strict";
import { tabulate } from './d3table.js';
import { drawGraph } from './d3graph.js';
import { drawTree } from './d3tree.js';
// import { treeTable } from './d3treetable.js';
import { data } from './results.js';
// import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

// const div = d3.selectAll("div");
// tabulate(data, "#figure1");
// drawGraph(data, "#figure2", 1280, 650);
// drawTree(data, "#figure3", "root", false, 1280, 650, 150);
// treeTable(data, "#figure4");

class GraphPlugin {
    priority = 10;
    hideFromSelection = false;
    constructor(yasr) {
        this.yasr = yasr;
    }
    draw() {
        const el = document.createElement("div");
        console.log(this.yasr.results);
        this.yasr.resultsEl.style.width = "100%";
        drawGraph(this.yasr.results.json, this.yasr.resultsEl, this.yasr.resultsEl.offsetWidth, 650);
    }
    canHandleResults() {
        return true;
        return (
            this.yasr.results.getBoolean &&
            (this.yasr.results.getBoolean() === true || this.yasr.results.getBoolean() == false)
        );
    }
    getIcon() {
        const tabElement = document.createElement("div");
        tabElement.classList.add("svgImg");
        tabElement.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 416H64v-96h160v96zm0-160H64v-96h160v96zm224 160H288v-96h160v96zm0-160H288v-96h160v96z\"></path></svg>"
        return tabElement;
    }
}

Yasr.registerPlugin("Graph", GraphPlugin);
Yasqe.defaults.value = "PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>\n" +
    "PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>\n" +
    "SELECT * WHERE {\n" +
    "  ?sub ?pred ?obj .\n" +
    "} LIMIT 10";
// https://triply.cc/docs/yasgui-api/
const url = "https://fuseki.rys.app/example/";
const yasgui = new Yasgui(document.getElementById("yasgui"), {
    requestConfig: {endpoint: url, copyEndpointOnNewTab: false},
});
// let tab = yasgui.getTab();
yasgui.on("queryResponse", (instance, tab) => {
    console.log(instance);
    console.log(tab);
});