Merge pull request #2 from Matdata-eu/001-construct-graph-viz

001 construct graph viz

Author: MathiasVDA

.github/workflows/deploy-demo.yml

@@ -0,0 +1,50 @@
+name: Deploy Demo to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build plugin
+        run: npm run build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './demo'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -3,16 +3,16 @@
 [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
 [![npm version](https://img.shields.io/npm/v/yasgui-graph-plugin.svg)](https://www.npmjs.com/package/yasgui-graph-plugin)
 
-A YASGUI plugin for visualizing SPARQL CONSTRUCT query results as interactive graphs with nodes (subjects/objects) and edges (predicates).
+A YASGUI plugin for visualizing SPARQL CONSTRUCT and DESCRIBE query results as interactive graphs with nodes (subjects/objects) and edges (predicates).
 
 ## ✨ Features
 
 - **🔷 Interactive Graph Visualization**: Automatic force-directed layout with smooth physics-based positioning
 - **🎨 Smart Color Coding**: 
-  - 🔵 Blue = URIs
-  - 🟢 Green = rdf:type objects (classes)
-  - 🔘 Grey = Literals
-  - 🟡 Yellow = Blank nodes
+  - 🔵 Light Blue (#97C2FC) = URIs
+  - 🟢 Light Green (#a6c8a6ff) = rdf:type objects (classes)
+  - ⚪ Light Grey (#c5c5c5ff) = Literals
+  - 🟠 Orange (#e15b13ff) = Blank nodes
 - **🔍 Navigation**: Mouse wheel zoom, drag to pan, "Zoom to Fit" button
 - **✋ Drag & Drop**: Reorganize nodes by dragging them to new positions
 - **💬 Tooltips**: Hover for full URI/literal details (300ms delay)
@@ -66,8 +66,9 @@ const yasgui = new Yasgui(document.getElementById('yasgui'), {
 });
 ```
 
-### Sample CONSTRUCT Query
+### Sample Queries
 
+**CONSTRUCT Query:**
 ```sparql
 PREFIX ex: <http://example.org/>
 PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
@@ -82,6 +83,14 @@ CONSTRUCT {
 WHERE {}
 ```
 
+**DESCRIBE Query:**
+```sparql
+PREFIX ex: <http://example.org/>
+
+# Returns all triples about the specified resources
+DESCRIBE ex:Alice ex:Bob
+```
+
 After running the query, click the **"Graph"** tab to see the visualization.
 
 ## 🎮 User Guide
@@ -99,10 +108,10 @@ After running the query, click the **"Graph"** tab to see the visualization.
 
 | Color | Meaning | Example |
 |-------|---------|---------|
-| 🔵 Blue | URI nodes | `ex:Person`, `ex:Alice` |
-| 🟢 Green | rdf:type objects (classes) | `ex:Person` in `ex:Alice rdf:type ex:Person` |
-| 🔘 Grey | Literal values | `"Alice"`, `"30"^^xsd:integer` |
-| 🟡 Yellow | Blank nodes | `_:b1`, `_:addr1` |
+| 🔵 Light Blue (#97C2FC) | URI nodes | `ex:Person`, `ex:Alice` |
+| 🟢 Light Green (#a6c8a6ff) | rdf:type objects (classes) | `ex:Person` in `ex:Alice rdf:type ex:Person` |
+| ⚪ Light Grey (#c5c5c5ff) | Literal values | `"Alice"`, `"30"^^xsd:integer` |
+| 🟠 Orange (#e15b13ff) | Blank nodes | `_:b1`, `_:addr1` |
 
 ## ⚙️ Configuration
 
@@ -213,17 +222,18 @@ Contributions welcome! Please follow the project constitution (`.specify/memory/
 ## 🐛 Troubleshooting
 
 ### Plugin tab not showing
-- Ensure query type is **CONSTRUCT** (not SELECT/ASK/DESCRIBE)
+- Verify plugin is registered correctly
 - Check browser console for errors
 - Verify YASGUI version is ^4.0.0
 
 ### Empty visualization
-- Confirm CONSTRUCT query returns triples (check "Table" or "Response" tab)
-- Verify results have subject/predicate/object structure
+- Ensure query type is **CONSTRUCT** or **DESCRIBE**
+- Confirm query returns triples (check "Table" or "Response" tab)
+- Verify results have RDF structure
 
 ### Performance issues
 - Limit results to <1000 nodes for best performance
-- Disable physics after initial layout (automatic)
+- Disable physics after initial layout
 - Consider using LIMIT clause in SPARQL query
 
 For more help, see [Quickstart Guide - Troubleshooting](./specs/001-construct-graph-viz/quickstart.md#troubleshooting).

demo/index.html

@@ -14,7 +14,7 @@
   <title>YASGUI Graph Plugin Demo</title>
 
   <!-- YASGUI CSS -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zazuko/yasgui@4/build/yasgui.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zazuko/yasgui@4.6.1/build/yasgui.min.css">
 
   <!-- Font Awesome for icons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@@ -111,12 +111,11 @@ <h2 onclick="toggleInstructions()">
     </h2>
     <div class="instructions-content collapsed">
       <ul>
-        <li>Click the <strong>"Graph"</strong> tab after running a CONSTRUCT query</li>
-        <li><strong>Sample queries</strong> are pre-loaded (see tabs: Basic, Ontology, Blank Nodes, Multiple Edges)</li>
+        <li>Click the <strong>"Graph"</strong> tab after running a CONSTRUCT or DESCRIBE query</li>
+        <li><strong>Sample queries</strong> are pre-loaded (see tabs: Basic, Ontology, Blank Nodes, Multiple Edges, DESCRIBE)</li>
         <li><strong>Navigate</strong>: Mouse wheel to zoom, drag background to pan, click "Zoom to Fit" button</li>
         <li><strong>Reorganize</strong>: Drag individual nodes to rearrange the layout</li>
         <li><strong>Inspect</strong>: Hover over nodes/edges to see full details (300ms delay)</li>
-        <li><strong>Export</strong>: Click "Export PNG" to save the current viewport as an image</li>
         <li><strong>Color coding</strong>: <span style="color: #c5c5c5ff">⬤ Grey</span> = literals, 
             <span style="color: #e15b13ff">⬤ Orange</span> = blank nodes, 
             <span style="color: #a6c8a6ff">⬤ Green</span> = rdf:type objects, 
@@ -137,7 +136,7 @@ <h2 onclick="toggleInstructions()">
   <div id="yasgui"></div>
 
   <!-- YASGUI JavaScript -->
-  <script src="https://cdn.jsdelivr.net/npm/@zazuko/yasgui@4/build/yasgui.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@zazuko/yasgui@4.6.1/build/yasgui.min.js"></script>
 
   <!-- vis-network (required dependency) -->
   <script src="https://unpkg.com/[email protected]/standalone/umd/vis-network.min.js"></script>
@@ -159,87 +158,36 @@ <h2 onclick="toggleInstructions()">
 
     // Initialize YASGUI after plugin is registered
     const yasgui = new Yasgui(document.getElementById('yasgui'), {
-      endpoint: 'http://localhost:3030/g',
+      // Set the SPARQL endpoint
+      requestConfig: {
+        endpoint: 'http://localhost:3030/g',
+      },
+      yasr: {
+        pluginOrder: ['Table', 'Response', 'Graph'], 
+        defaultPlugin: 'Graph',
+      },
       copyEndpointOnNewTab: false,
     });
 
-    // Helper to create mock results from CONSTRUCT query
-    function createMockResults(query) {
-      const bindings = [];
-      
-      // Parse triples from CONSTRUCT clause
-      const constructMatch = query.match(/CONSTRUCT\s*{([^}]+)}/i);
-      if (!constructMatch) return { getBindings: () => [] };
-      
-      const constructBody = constructMatch[1];
-      const tripleLines = constructBody.split('\n')
-        .map(line => line.trim())
-        .filter(line => line && !line.startsWith('PREFIX'));
-      
-      tripleLines.forEach(line => {
-        // Simple triple parsing (subject predicate object .)
-        const match = line.match(/^([^\s]+)\s+([^\s]+)\s+(.+?)\s*\.?\s*$/);
-        if (match) {
-          const [, subject, predicate, objectStr] = match;
-          
-          // Parse object
-          let object;
-          if (objectStr.startsWith('"')) {
-            // Literal
-            const literalMatch = objectStr.match(/"([^"]+)"(?:\^\^<([^>]+)>)?/);
-            if (literalMatch) {
-              object = {
-                value: literalMatch[1],
-                type: 'literal',
-                datatype: literalMatch[2]
-              };
-            } else {
-              object = { value: objectStr.replace(/"/g, ''), type: 'literal' };
-            }
-          } else {
-            // URI or blank node
-            object = {
-              value: objectStr.replace(/<|>/g, ''),
-              type: objectStr.startsWith('_:') ? 'bnode' : 'uri'
-            };
-          }
-          
-          bindings.push({
-            subject: { value: subject.replace(/<|>/g, ''), type: subject.startsWith('_:') ? 'bnode' : 'uri' },
-            predicate: { value: predicate.replace(/<|>/g, ''), type: 'uri' },
-            object: object
-          });
-        }
-      });
-      
-      return {
-        getBindings: () => bindings,
-        getVariables: () => ({ prefixes: {
-          'ex': 'http://example.org/',
-          'rdf': 'http://www.w3.org/1999/02/22-rdf-syntax-ns#',
-          'rdfs': 'http://www.w3.org/2000/01/rdf-schema#',
-          'owl': 'http://www.w3.org/2002/07/owl#',
-          'xsd': 'http://www.w3.org/2001/XMLSchema#'
-        }}),
-        getResponseTime: () => 0,
-        getType: () => 'construct',
-        getOriginalResponseAsString: () => '',
-        getOriginalResponse: () => null,
-        getError: () => null,
-        getContentType: () => 'application/sparql-results+json'
-      };
-    }
-    
     // Add sample query tabs
     const tabs = [
-      { name: 'Basic Graph', query: queries.basic },
       { name: 'Ontology', query: queries.ontology },
       { name: 'Blank Nodes', query: queries.blankNodes },
-      { name: 'Multiple Edges', query: queries.multiplePredicates }
+      { name: 'Multiple Edges', query: queries.multiplePredicates },
+      { name: 'DESCRIBE Query', query: queries.describe },
+      { name: 'Basic Graph', query: queries.basic },
     ];
 
-    // Clear default tab
-    yasgui.getTab().close();
+    // Close all existing tabs
+    let tab;
+    while ((tab = yasgui.getTab()) != null) {
+      try {
+      tab.close();
+      } catch (e) {
+      console.error('Failed to close tab:', e);
+      break;
+      }
+    }
 
     // Add sample tabs
     tabs.forEach((tab, index) => {
@@ -249,14 +197,7 @@ <h2 onclick="toggleInstructions()">
           name: tab.name,
           yasqe: { value: tab.query }
         }
-      );
-      
-      // Simulate query results for demo (since we have no real endpoint)
-      setTimeout(() => {
-        // Mock CONSTRUCT results
-        yasguiTab.yasr.results = createMockResults(tab.query);
-        yasguiTab.yasr.draw();
-      }, 100);
+      );      
     });
   </script>
 </body>

demo/queries.js

@@ -56,5 +56,12 @@ CONSTRUCT {
   ex:Person2 ex:knows ex:Person3 .
   ex:Person3 ex:knows ex:Person1 .
 }
-WHERE {}`
+WHERE {}`,
+
+  describe: `PREFIX ex: <http://example.org/>
+PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+PREFIX foaf: <http://xmlns.com/foaf/0.1/>
+
+# DESCRIBE returns all triples about a resource
+DESCRIBE ex:Alice ex:Bob`
 };

esbuild.config.js

@@ -13,7 +13,7 @@ const config = {
   external: [],
   // Resolve ES module extensions
   loader: {
-    '.js': 'jsx',
+    '.js': 'js',
   },
 };
 

package-lock.json

@@ -2,7 +2,7 @@
   "name": "@matdata/yasgui-graph-plugin",
   "private": false,
   "version": "0.1.0",
-  "description": "YASGUI plugin for visualizing SPARQL CONSTRUCT query results as interactive graphs",
+  "description": "YASGUI plugin for visualizing SPARQL CONSTRUCT and DESCRIBE query results as interactive graphs",
   "main": "dist/yasgui-graph-plugin.min.js",
   "scripts": {
     "dev": "vite",

package.json

@@ -35,14 +35,13 @@
 
 **Clarity Assessment**:
 - 5 user stories prioritized (P1-P5) with clear dependencies
-- 31 functional requirements organized by category (parsing, rendering, interaction, export, edge cases)
+- 31 functional requirements organized by category (parsing, rendering, interaction, edge cases)
 - 11 edge cases explicitly handled with defined behaviors
 - 8 success criteria all measurable and technology-agnostic
 - 8 assumptions documented for context
 
 **No Clarifications Needed**: Specification is complete with informed defaults applied:
 - Layout algorithm: Force-directed or hierarchical (standard graph viz approach)
-- Export format: PNG/SVG (industry standard image formats)
 - Performance target: 2 seconds for 1,000 nodes (aligned with constitution)
 - Color scheme: Grey/green/blue with semantic meaning (clear visual hierarchy)
 - Label truncation: ~50 chars for literals (reasonable reading length)

specs/001-construct-graph-viz/checklists/requirements.md

@@ -374,27 +374,6 @@ network.once('stabilizationIterationsDone', () => {
   network.setOptions({physics: {enabled: false}});
 });
 ```
-
-## Export Functionality
-
-```javascript
-// Get canvas element
-const canvas = network.canvas.frame.canvas;
-
-// Export as PNG
-canvas.toBlob(blob => {
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = 'graph.png';
-  link.click();
-  URL.revokeObjectURL(url);
-}, 'image/png');
-
-// Or get data URL
-const dataURL = canvas.toDataURL('image/png');
-```
-
 ## Performance Optimization
 
 ### Disable Physics After Layout