Integrate graph generation

index.html

@@ -16,7 +16,7 @@
   <!--  <style>css/inline.css</style>-->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css"
         integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
-  <link href="https://unpkg.com/@triply/yasgui@4/build/yasgui.min.css" rel="stylesheet" type="text/css"/>
+  <link href="https://unpkg.com/@triply/yasgui/build/yasgui.min.css" rel="stylesheet" type="text/css"/>
   <link rel="stylesheet" href="css/graph.css">
   <title></title>
   <link rel="icon" href="img/favicon.svg">
@@ -38,8 +38,8 @@
 
 <footer>
 </footer>
+<script src="https://unpkg.com/@triply/yasgui/build/yasgui.min.js"></script>
 <script defer src="js/mousetrap.1.6.5.min.js"></script>
-<script src="https://unpkg.com/@triply/yasgui@4/build/yasgui.min.js"></script>
-<script src="js/graph.js" type="module" defer></script>
+<script defer src="js/graph.js" type="module"></script>
 </body>
 </html>

js/d3graph.js

@@ -1,7 +1,7 @@
 import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
 
 function getOrCreateNode(id, name, nodes, dict) {
-    var node = dict[id];
+    let node = dict[id];
     if (!node) {
         node = {}
         node.id = id;
@@ -13,17 +13,17 @@ function getOrCreateNode(id, name, nodes, dict) {
 }
 
 function toGraphData(data) {
-    var graph = {};
-    var nodes = graph.nodes = [];
-    var links = graph.links = [];
-    var idToNode = [];
-    var columns = data.head.vars;
+    let graph = {};
+    let nodes = graph.nodes = [];
+    let links = graph.links = [];
+    let idToNode = [];
+    let columns = data.head.vars;
     data.results.bindings.forEach(item => {
-        var srcID = item[columns[0]].value;
-        var trgtID = item[columns[1]].value;
-        var src = getOrCreateNode(srcID, srcID, nodes, idToNode);
-        var trgt = getOrCreateNode(trgtID, trgtID, nodes, idToNode);
-        var link = {};
+        const srcID = item[columns[0]].value;
+        const trgtID = item[columns[1]].value;
+        const src = getOrCreateNode(srcID, srcID, nodes, idToNode);
+        const trgt = getOrCreateNode(trgtID, trgtID, nodes, idToNode);
+        let link = {};
         link.source = src.id;
         link.target = trgt.id;
         links.push(link);
@@ -33,9 +33,9 @@ function toGraphData(data) {
 
 
 function drawGraph(data, containerID, width = 500, height = 300) {
-    var graph = toGraphData(data)
-    var container = d3.select(containerID);
-    var svg = container.append('svg').attr("width", width).attr("height", height);
+    let graph = toGraphData(data)
+    let container = d3.select(containerID);
+    let svg = container.append('svg').attr("width", width).attr("height", height);
     // arrow def
     svg.append('defs').append('marker')
         .attr('id', 'arrowhead')
@@ -48,26 +48,27 @@ function drawGraph(data, containerID, width = 500, height = 300) {
         .attr('xoverflow', 'visible')
         .append('svg:path')
         .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
-        .attr('fill', '#999')
+        .attr('fill', '#808080')
         .style('stroke', 'none');
 
-    var nodes = graph.nodes;
-    var links = graph.links;
-    var simulation = d3.forceSimulation()
+    let nodes = graph.nodes;
+    let links = graph.links;
+    let simulation = d3.forceSimulation()
         .force("link", d3.forceLink().id(function (d) {
             return d.id;
         }).distance(80))
         .force("charge", d3.forceManyBody().strength(-100))
         .force("center", d3.forceCenter(width / 2, height / 2));
 
-    var link = svg.selectAll(".link")
+    let link = svg.selectAll(".link")
         .data(links)
         .enter()
         .append("line")
         .attr("class", "link")
         .attr('marker-end', 'url(#arrowhead)')
+        .style('stroke', '#808080');
 
-    var node = svg.selectAll(".node")
+    let node = svg.selectAll(".node")
         .data(nodes)
         .enter()
         .append("g")
@@ -79,7 +80,7 @@ function drawGraph(data, containerID, width = 500, height = 300) {
 
     node.append("circle")
         .attr("r", 5)
-        .style("fill", "red")
+        .attr("fill", "#006496")
 
     node.append("title")
         .text(function (d) {
@@ -113,21 +114,21 @@ function drawGraph(data, containerID, width = 500, height = 300) {
 
         node.attr("transform",
             function (d) {
-                var dx = getX(d.x);
-                var dy = getY(d.y);
+                const dx = getX(d.x);
+                const dy = getY(d.y);
                 return "translate(" + dx + ", " + dy + ")";
             }
         );
 
         function getX(x) {
-            var dx = x;
+            let dx = x;
             if (dx < 20) dx = 20;
             if (dx > width - 20) dx = width - 20;
             return dx;
         }
 
         function getY(y) {
-            var dy = y;
+            let dy = y;
             if (dy < 20) dy = 20;
             if (dy > height - 20) dy = height - 20;
             return dy;
@@ -154,5 +155,5 @@ function drawGraph(data, containerID, width = 500, height = 300) {
     }
 }
 
-export { drawGraph, toGraphData };
+export {drawGraph, toGraphData};
 export default drawGraph;

js/graph.js

@@ -1,49 +1,57 @@
+"use strict";
 import { tabulate } from './d3table.js';
 import { drawGraph } from './d3graph.js';
 import { drawTree } from './d3tree.js';
-import { treeTable } from './d3treetable.js';
+// import { treeTable } from './d3treetable.js';
 import { data } from './results.js';
-import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
+// 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);
+// 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;
+    }
+}
 
-Yasqe.defaults.value = ""
-const queries_obj = ""
-
-const url = window.location.href.endsWith('/') ? window.location.href.slice(0, -1) : window.location.href;
-const endpointsList = [...new Set([url, ...Object.keys(queries_obj).map((label) => {
-    if (queries_obj[label]["endpoint"]) return queries_obj[label]["endpoint"]
-})])]
-const yasguiEndpoints = endpointsList.map((endpoint) => {
-    return {endpoint: endpoint}
-})
-
+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: true,},
-    endpointCatalogueOptions: {
-        getData: function () {
-            return yasguiEndpoints
-        },
-        keys: [],
-    },
+    requestConfig: {endpoint: url, copyEndpointOnNewTab: false},
+});
+// let tab = yasgui.getTab();
+yasgui.on("queryResponse", (instance, tab) => {
+    console.log(instance);
+    console.log(tab);
 });
-
-Object.keys(queries_obj).map((label) => {
-    const tabsLabel = Object.keys(yasgui._tabs).map(tab => yasgui._tabs[tab].persistentJson.name)
-    if (!tabsLabel.includes(label)) {
-        yasgui.addTab(
-            false,
-            {
-                ...Yasgui.Tab.getDefaults(),
-                name: label,
-                requestConfig: {endpoint: queries_obj[label]['endpoint']},
-                yasqe: {value: queries_obj[label]['query']}
-            }
-        );
-    }
-})