YASGUI

https://yasgui-doc.matdata.eu/
Admin
YASGUI (Yet Another SPARQL GUI) is a powerful, user-friendly web-based interface for querying and...
Tokens:42,984
Snippets:454
Trust Score:5.8
Update:4 months ago
Show doc for...
Tokens:
Raw
### Complete YASGUI Initialization with Endpoint Buttons

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

A comprehensive example of YASGUI initialization, including request configuration and a list of endpoint buttons. This setup allows for quick switching between different SPARQL endpoints.

```javascript
const yasgui = new Yasgui(document.getElementById("yasgui"), {
  requestConfig: {
    endpoint: "https://dbpedia.org/sparql"
  },
  endpointButtons: [
    { endpoint: "https://dbpedia.org/sparql", label: "DBpedia" },
    { endpoint: "https://query.wikidata.org/bigdata/namespace/wdq/sparql", label: "Wikidata" },
    { endpoint: "https://graph.data.era.europa.eu/repositories/rinf-plus", label: "ERA" }
  ]
});
```

--------------------------------

### Install Dependencies

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Install the necessary project dependencies using npm.

```bash
npm install  
```

--------------------------------

### Install YASGUI with Yarn

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Install the main YASGUI package using Yarn.

```bash
yarn add @matdata/yasgui
```

--------------------------------

### Install and Run Simple CORS Proxy from Source

Source: https://yasgui-doc.matdata.eu/docs/user-guide

Install the simple CORS proxy from its GitHub repository and run it locally. This is an alternative to using Docker for development.

```bash
git clone https://github.com/Matdata-eu/simple-cors-proxy.git  
cd simple-cors-proxy  
npm install  
npm start  

```

--------------------------------

### Prefix Autocompletion Example

Source: https://yasgui-doc.matdata.eu/docs/user-guide

When typing a prefix declaration, YASGUI queries prefix.cc to suggest standard URIs. This example shows the start of a foaf prefix declaration.

```sparql
PREFIX foaf: <  # Auto-suggests http://xmlns.com/foaf/0.1/
```

--------------------------------

### Install Plugin via npm

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Instruct users on how to install your plugin using npm. This command downloads the plugin package and adds it to the project's dependencies.

```bash
npm install yasr-my-plugin  
```

--------------------------------

### Install YASGUI via npm

Source: https://yasgui-doc.matdata.eu/docs

Install the YASGUI package using npm for integration into your application.

```bash
npm install @matdata/yasgui
```

--------------------------------

### Clone and Build YASGUI from Source

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Clone the YASGUI repository, install dependencies, and build the project from source.

```bash
git clone https://github.com/Matdata-eu/Yasgui.git  
cd Yasgui  
npm install  
npm run build
```

--------------------------------

### Run Development Server

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Start the development server to view YASGUI in action locally. Visit http://localhost:5173/demo.

```bash
npm run dev  
```

--------------------------------

### Install YASGUI individual packages with npm

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Install specific YASGUI components like the query editor, results viewer, or utilities individually using npm.

```bash
npm install @matdata/yasqe    # Query editor only  
npm install @matdata/yasr     # Results viewer only  
npm install @matdata/yasgui-utils  # Utilities only  
```

--------------------------------

### Install Graph Plugin via NPM

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Install the Graph Plugin using NPM. This is the recommended method for Node.js projects.

```bash
npm install @matdata/yasgui-graph-plugin  

```

--------------------------------

### Simple Authentication Example

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Demonstrates a basic configuration for YASGUI with username and password for Basic Authentication. Ensure the endpoint is correctly specified.

```javascript
const yasgui = new Yasgui(document.getElementById("yasgui"), {
  requestConfig: {
    endpoint: "https://secure-endpoint.example.com/sparql",
    basicAuth: {
      username: "user",
      password: "pass"
    }
  }
});
```

--------------------------------

### Install Geo Plugin via npm

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Install the Geo Plugin using npm. This is the recommended method for Node.js projects.

```bash
npm install @matdata/yasgui-geo-plugin  

```

--------------------------------

### Example YASGUI Initialization with Configuration

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Illustrates initializing YASGUI with a comprehensive configuration object, including basic settings, endpoint details, persistence, and YASQE/YASR specific options.

```javascript
const yasgui = new Yasgui(document.getElementById('yasgui'), {
  // Basic settings
  autofocus: true,
  tabName: 'My Query',
  theme: 'dark',
  orientation: 'horizontal',

  // Endpoint configuration
  requestConfig: {
    endpoint: 'https://dbpedia.org/sparql',
    method: 'POST'
  },

  // Quick-switch buttons
  endpointButtons: [
    { endpoint: 'https://dbpedia.org/sparql', label: 'DBpedia' },
    { endpoint: 'https://query.wikidata.org/sparql', label: 'Wikidata' }
  ],

  // Persistence
  persistenceId: 'my-yasgui-instance',
  persistencyExpire: 60 * 60 * 24 * 7,  // 7 days

  // YASQE config
  yasqe: {
    value: 'SELECT * WHERE { ?s ?p ?o } LIMIT 10',
    lineNumbers: true,
    showQueryButton: true
  },

  // YASR config
  yasr: {
    defaultPlugin: 'table',
    maxPersistentResponseSize: 500000
  }
});
```

--------------------------------

### Chart Plugin Example

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

A complete example of a chart visualization plugin for Yasr. This plugin handles SELECT results with numeric values and draws a bar chart using Chart.js. Ensure Chart.js is installed and imported.

```typescript
import { Plugin } from '@matdata/yasr';
import Chart from 'chart.js/auto';

export default class ChartPlugin implements Plugin {
  private yasr: Yasr;
  private container: HTMLElement;
  private canvas: HTMLCanvasElement;
  private chart: Chart | null = null;
    
  public priority = 7;
  public label = 'Chart';
  public helpReference = 'https://example.com/chart-help';
  
  constructor(yasr: Yasr) {
    this.yasr = yasr;
    this.container = document.createElement('div');
    this.container.className = 'yasr-chart-plugin';
    this.canvas = document.createElement('canvas');
    this.container.appendChild(this.canvas);
    yasr.resultsEl.appendChild(this.container);
  }
  
  canHandleResults(): boolean {
    if (!this.yasr.results) return false;
      
    // Only handle SELECT results with numeric values
    const results = this.yasr.results;
    if (results.getType() !== 'json') return false;
      
    const vars = results.getVariables();
    const bindings = results.getBindings();
      
    // Need at least 2 variables (label and value)
    if (!vars || vars.length < 2 || !bindings || bindings.length === 0) {
      return false;
    }
      
    // Check if second variable contains numbers
    const firstBinding = bindings[0];
    const valueVar = vars[1];
    const value = firstBinding[valueVar]?.value;
      
    return !isNaN(parseFloat(value));
  }
  
  getIcon(): Element | undefined {
    const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    icon.setAttribute('viewBox', '0 0 24 24');
    icon.setAttribute('width', '24');
    icon.setAttribute('height', '24');
      
    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path.setAttribute('d', 'M3 13h2v8H3zm4-4h2v12H7zm4-4h2v16h-2zm4 2h2v14h-2zm4 4h2v10h-2z');
    path.setAttribute('fill', 'currentColor');
      
    icon.appendChild(path);
    return icon;
  }
  
  async draw(persistentConfig: any, runtimeConfig?: any): Promise<void> {
    if (!this.yasr.results) return;
      
    const results = this.yasr.results;
    const vars = results.getVariables();
    const bindings = results.getBindings();
      
    if (!vars || !bindings) return;
      
    // Extract data
    const labels: string[] = [];
    const data: number[] = [];
      
    bindings.forEach(binding => {
      const label = binding[vars[0]]?.value || '';
      const value = parseFloat(binding[vars[1]]?.value || '0');
      labels.push(label);
      data.push(value);
    });
      
    // Destroy previous chart
    if (this.chart) {
      this.chart.destroy();
    }
      
    // Create chart
    const ctx = this.canvas.getContext('2d');
    if (!ctx) return;
      
    this.chart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [{
          label: vars[1],
          data: data,
          backgroundColor: 'rgba(75, 192, 192, 0.6)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  }
  
  destroy(): void {
    if (this.chart) {
      this.chart.destroy();
    }
    this.container.remove();
  }
}

```

--------------------------------

### Conventional Commit Examples

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Examples of commit messages following the conventional commit format for better commit history.

```git
feat: add new plugin system  
fix: resolve query execution bug  
docs: update API documentation  
style: format code  
refactor: restructure plugin loading  
test: add unit tests for parser  
chore: update dependencies  
```

--------------------------------

### CONSTRUCT Query Validation Example

Source: https://yasgui-doc.matdata.eu/docs/user-guide

This example demonstrates how YASGUI detects undefined variables in a CONSTRUCT query. Variables used in the CONSTRUCT template but not defined in the WHERE clause will be flagged with a warning.

```sparql
PREFIX ex: <http://example.org/> 
CONSTRUCT { 
  ?s ex:hasName ?name . 
  ?s ex:hasAge ?age .      # ⚠️ Warning: ?age not defined in WHERE  
} 
WHERE { 
  ?s ex:name ?name .       # Only ?s and ?name are defined  
}  

```

--------------------------------

### Example SPARQL Request Configuration

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Demonstrates how to set up a request configuration object for a SPARQL endpoint, including endpoint URL, method, accept headers, named graphs, custom headers, and query adjustment.

```javascript
const config = {
  requestConfig: {
    endpoint: 'https://dbpedia.org/sparql',
    method: 'POST',

    acceptHeaderSelect: 'application/sparql-results+json',
    acceptHeaderGraph: 'text/turtle',

    namedGraphs: ['http://dbpedia.org'],

    headers: {
      'User-Agent': 'MyApp/1.0'
    },

    args: [
      { name: 'timeout', value: '30000' },
      { name: 'debug', value: 'on' }
    ],

    adjustQueryBeforeRequest: (query) => {
      // Add timestamp comment
      return `# Query executed at ${new Date().toISOString()}\n${query}`;
    }
  }
};
```

--------------------------------

### Example SPARQL Query for Node Icons and Images

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

A CONSTRUCT query demonstrating how to use schema:image and schema:icon properties for node visualization. It also shows how compact mode inherits icons from classes.

```sparql
CONSTRUCT {  
  ex:alice  schema:image <https://example.com/alice.png> .  
  ex:alice  rdf:type ex:Person .  
  ex:Person schema:icon "👤" .  
  ex:bob    rdf:type ex:Person .  
}  
WHERE {}  

```

--------------------------------

### Run YASGUI with Docker

Source: https://yasgui-doc.matdata.eu/docs/user-guide

Start YASGUI locally using Docker. This is useful for querying local SPARQL endpoints without browser mixed content restrictions or permission prompts.

```bash
docker run -p 8080:8080 mathiasvda/yasgui  

```

--------------------------------

### Run Simple CORS Proxy with Docker

Source: https://yasgui-doc.matdata.eu/docs/user-guide

Quickly start a local CORS proxy using Docker for development purposes. This proxy helps resolve preflight authentication issues with Virtuoso.

```bash
docker run -d --name simple-cors-proxy -p 8080:8080 mathiasvda/simple-cors-proxy  

```

--------------------------------

### JSDoc for API Documentation

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Example of documenting a public API function using JSDoc comments, including parameters, return types, potential errors, and usage examples.

```typescript
/**  
 * Execute a SPARQL query against the configured endpoint.  
 *   
 * @param query - The SPARQL query string  
 * @param options - Optional request configuration  
 * @returns Promise resolving to query results  
 * @throws {Error} If query is invalid or network request fails  
 *   
 * @example  
 * ```typescript  
 * const results = await yasqe.query(  
 *   'SELECT * WHERE { ?s ?p ?o } LIMIT 10',  
 *   { endpoint: 'https://dbpedia.org/sparql' }  
 * );  
 * ```  
 */  
async query(query: string, options?: RequestConfig): Promise<any> {  
  // Implementation  
}  
```

--------------------------------

### Running a Local SPARQL Endpoint with Docker

Source: https://yasgui-doc.matdata.eu/docs/user-guide

This command starts a local Apache Jena Fuseki SPARQL endpoint with GeoSPARQL support. It is useful for testing YASGUI workspaces locally.

```bash
docker run -p 3030:3030 mathiasvda/apache-jena-fuseki-geosparql
```

--------------------------------

### Example SPARQL Query for Graph Plugin

Source: https://yasgui-doc.matdata.eu/docs/user-guide

This CONSTRUCT query demonstrates how to assign an image to a node, define a relationship, set an emoji icon for a class, and specify a node's type. It's useful for setting up initial graph data with visual properties.

```sparql
CONSTRUCT {
  ex:alice schema:image <https://example.com/alice.png> .
  ex:alice ex:knows ex:bob .
  ex:Person schema:icon "👤" .
  ex:alice rdf:type ex:Person .
}
WHERE {}
```

--------------------------------

### TypeScript Interface and Function Example

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Demonstrates good practice in TypeScript by defining an interface for configuration and using it in a function, contrasting with the avoidance of 'any' types.

```typescript
// Good  
interface PluginConfig {  
  priority: number;  
  enabled: boolean;  
}  
  
function configurePlugin(config: PluginConfig): void {  
  // Implementation  
}  
  
// Avoid  
function configurePlugin(config: any) {  
  // Implementation  
}  
```

--------------------------------

### Programmatically Control YASGUI Theme

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Get the current theme, set a specific theme ('dark' or 'light'), or toggle between themes using YASGUI instance methods.

```javascript
// Get current theme  
const currentTheme = yasgui.getTheme(); // Returns 'light' or 'dark'  
  
// Set theme  
yasgui.setTheme('dark');  // Switch to dark theme  
yasgui.setTheme('light'); // Switch to light theme  
  
// Toggle theme  
const newTheme = yasgui.toggleTheme(); // Switch and return new theme  
```

--------------------------------

### Example SPARQL Query

Source: https://yasgui-doc.matdata.eu/docs/user-guide

A basic SPARQL query to select subjects, predicates, and objects, limited to 10 results. This can be used in the YASGUI editor.

```sparql
SELECT ?subject ?predicate ?object  
WHERE {  
  ?subject ?predicate ?object  
}  
LIMIT 10  

```

--------------------------------

### Example YASGUI Configuration in RDF Turtle

Source: https://yasgui-doc.matdata.eu/docs/user-guide

This snippet shows the structure of a YASGUI configuration exported in RDF Turtle format. It includes settings for prefixes, auto-capture, and a specific query tab with its endpoint and parameters.

```turtle
@prefix yasgui: <https://yasgui.matdata.eu/ontology#> .
@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .

[] a yasgui:Configuration ;
  yasgui:activeTab "tab1" ;
  yasgui:prefixes """PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>""" ;
  yasgui:autoCaptureEnabled "true"^^xsd:boolean ;
  yasgui:tab [
    yasgui:tabId "tab1" ;
    yasgui:tabName "My Query" ;
    yasgui:query "SELECT * WHERE { ?s ?p ?o } LIMIT 10" ;
    yasgui:endpoint "https://dbpedia.org/sparql" ;
    yasgui:requestMethod "POST"
  ] .

```

--------------------------------

### Basic CONSTRUCT Query Example

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

A fundamental CONSTRUCT query that defines basic triples for entities 'Alice' and 'Bob', including their type and a 'knows' relationship.

```sparql
PREFIX ex: <http://example.org/>
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>

CONSTRUCT {
  ex:Alice rdf:type ex:Person .
  ex:Alice ex:knows ex:Bob .
  ex:Alice ex:name "Alice" .
  ex:Bob rdf:type ex:Person .
  ex:Bob ex:name "Bob" .
}
WHERE {}
```

--------------------------------

### DESCRIBE Query Example

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

A DESCRIBE query to retrieve a description of specific resources. This query type is handled by the Graph Plugin for visualization.

```sparql
PREFIX ex: <http://example.org/>

DESCRIBE ex:Alice ex:Bob
```

--------------------------------

### CONSTRUCT Query with Schema Icons

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

An example of a CONSTRUCT query that utilizes schema.org icons for visual representation of entity types. Ensure the 'schema:icon' predicate is used correctly.

```sparql
PREFIX ex: <http://example.org/>
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX schema: <https://schema.org/>

CONSTRUCT {
  ex:Alice rdf:type ex:Person .
  ex:Person schema:icon "👤" .
  ex:Alice ex:worksFor ex:Company .
  ex:Company rdf:type ex:Organization .
  ex:Organization schema:icon "🏢" .
}
WHERE {}
```

--------------------------------

### Track Query Execution Time and Results in YASGUI

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

An example demonstrating how to track the duration of a SPARQL query and inspect its results using YASGUI's event listeners for 'queryBefore', 'queryResponse', and 'queryAbort'. It also shows how to access result details like type and bindings.

```javascript
const yasgui = new Yasgui(element);

yasgui.on('queryBefore', (instance, tab) => {
  tab.queryStartTime = Date.now();
  console.log('Query started:', tab.getQuery());
});

yasgui.on('queryResponse', (instance, tab) => {
  const duration = Date.now() - tab.queryStartTime;
  console.log('Query completed in', duration, 'ms');
    
  const yasr = tab.getYasr();
  if (yasr.results) {
    console.log('Result type:', yasr.results.getType());
    if (yasr.results.getType() === 'json') {
      const bindings = yasr.results.getBindings();
      console.log('Result count:', bindings?.length || 0);
    }
  }
});

yasgui.on('queryAbort', (instance, tab) => {
  console.log('Query aborted after', Date.now() - tab.queryStartTime, 'ms');
});
```

--------------------------------

### Query WKT Points with Custom Colors and Tooltips

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Example SPARQL query to select WKT points and bind custom colors and tooltip text. Uses BIND with STRDT and CONCAT for WKT literal creation.

```sparql
PREFIX geo: <http://www.opengis.net/ont/geosparql#>
  
SELECT * WHERE {
  VALUES (?name ?lat ?lon ?wktColor) {
    ("Brussels"  50.8503 4.3517  "blue")
    ("Antwerp"   51.2194 4.4025  "red")
    ("Ghent"     51.0543 3.7174  "green")
  }
  BIND(STRDT(CONCAT("POINT(", STR(?lon), " ", STR(?lat), ")"), geo:wktLiteral) AS ?wkt)
  BIND(?name AS ?wktTooltip)
}

```

--------------------------------

### Configure YASGUI Endpoint with Local Virtuoso and Proxy

Source: https://yasgui-doc.matdata.eu/docs/user-guide

Configure the YASGUI endpoint to use a local Virtuoso instance through the simple CORS proxy. This setup is useful for development environments.

```text
http://localhost:8080/proxy/http://host.docker.internal:8890/sparql-auth  

```

--------------------------------

### Toggle YASGUI Theme and Get New Theme

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Switch the YASGUI interface between light and dark themes and return the name of the newly applied theme.

```javascript
const newTheme = yasgui.toggleTheme();  
console.log('Switched to:', newTheme);  
```

--------------------------------

### Example SPARQL Workspace Data Structure

Source: https://yasgui-doc.matdata.eu/docs/user-guide

This RDF data demonstrates how a managed query with multiple versions is stored within a SPARQL workspace. It includes prefixes for common vocabularies and defines a workspace, a managed query, and its successive versions with associated metadata.

```turtle
PREFIX dcterms:  <http://purl.org/dc/terms/>  
PREFIX prov:     <http://www.w3.org/ns/prov#>
PREFIX rdf:      <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs:     <http://www.w3.org/2000/01/rdf-schema#>
PREFIX sp:       <http://spinrdf.org/sp#>
PREFIX spin:     <http://spinrdf.org/spin#>
PREFIX ssd:      <http://www.w3.org/ns/sparql-service-description#>
PREFIX xsd:      <http://www.w3.org/2001/XMLSchema#>
PREFIX yasgui:   <https://matdata.eu/ns/yasgui#>
PREFIX yasgui-d: <http://matdata.eu/d/yasgui/>

# Workspace definition
yasgui-d:ws1  rdf:type  yasgui:Workspace .

# Managed query (with stable identifier)
yasgui-d:ws1_mq_aaf6a7e1-6dfa-4d06-89c4-7fbd8de475c4
        rdf:type          yasgui:ManagedQuery;
        rdfs:label        "DemoQuery";
        dcterms:isPartOf  yasgui-d:ws1 .

# Version 1 (original version with endpoint and description)
yasgui-d:ws1_mq_v_1e1c4bec-0d79-474a-a930-6f38ec8f90b5
        rdf:type             yasgui:ManagedQueryVersion;
        dcterms:created      "2026-01-06T21:31:33.736Z"^^xsd:dateTime;
        dcterms:description  "This is a demo query to use as example in the user documentation of Yasgui";
        dcterms:isVersionOf  yasgui-d:ws1_mq_aaf6a7e1-6dfa-4d06-89c4-7fbd8de475c4;
        spin:text            "PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#}\nPREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#}\nSELECT * WHERE {\n  ?sub ?pred ?obj .\n} LIMIT 10";
        prov:used            [ rdf:type      ssd:Service;  
                               ssd:endpoint  <https://graph.data.era.europa.eu/repositories/rinf-plus>
                             ] .

# Version 2 (updated query text)
yasgui-d:ws1_mq_v_a7aa79b3-f6b9-441b-a33c-c4a7569b2d89
        rdf:type             yasgui:ManagedQueryVersion;
        dcterms:created      "2026-01-06T21:31:52.422Z"^^xsd:dateTime;
        dcterms:isVersionOf  yasgui-d:ws1_mq_aaf6a7e1-6dfa-4d06-89c4-7fbd8de475c4;
        spin:text            "PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#}\nPREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#}\nSELECT * WHERE {\n  # New version\n  ?s ?p ?o .\n} LIMIT 10" .

# Version 3 (latest version with formatting changes)
yasgui-d:ws1_mq_v_21c919b1-cc80-4dea-a94f-9ab1cb8b7df5
        rdf:type             yasgui:ManagedQueryVersion;
        dcterms:created      "2026-01-06T21:32:19.959Z"^^xsd:dateTime;
        dcterms:isVersionOf  yasgui-d:ws1_mq_aaf6a7e1-6dfa-4d06-89c4-7fbd8de475c4;
        spin:text            "PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#}\nPREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#}\n\nSELECT *\nWHERE {\n  # New version\n  ?s ?p ?o .\n}\nLIMIT 10" .

# Endpoint reference (can be shared across queries)
[ rdf:type      ssd:Service;
  ssd:endpoint  <https://dbpedia.org/sparql>
] .

```

--------------------------------

### Initialize YASQE Editor with Configuration

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Demonstrates how to initialize the YASQE editor with custom configuration, including query value, theme, and request settings.

```javascript
import Yasqe from '@matdata/yasqe';

const yasqe = new Yasqe(document.getElementById('yasqe'), {
  value: `PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>

SELECT ?label WHERE {
  ?s rdfs:label ?label
} LIMIT 10`,

  theme: 'material-palenight',
  lineNumbers: true,
  lineWrapping: false,
  showQueryButton: true,
  editorHeight: '400px',

  requestConfig: {
    endpoint: 'https://dbpedia.org/sparql',
    method: 'POST',
    headers: {
      'Accept': 'application/sparql-results+json'
    }
  },

  autocomplete: {
    enabled: true,
    completerConfigs: [
      { name: 'prefixes', enabled: true },
      { name: 'properties', enabled: true },
      { name: 'classes', enabled: true }
    ]
  }
});

```

--------------------------------

### Initialize YASGUI with Theme Configuration

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Configure the initial theme (light or dark) and control the visibility of the theme toggle button when creating a new Yasgui instance.

```javascript
const yasgui = new Yasgui(element, {
  theme: 'dark',           // 'light' or 'dark'
  showThemeToggle: true    // Show/hide theme toggle button (default: true)
});  
```

--------------------------------

### Create a Changeset

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Initiate the process for creating a new release changeset.

```bash
npx changeset  
```

--------------------------------

### Get YASGUI Tab Instance

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Retrieve a specific tab instance by its ID, or get the currently active tab if no ID is provided.

```javascript
const currentTab = yasgui.getTab();  
const specificTab = yasgui.getTab('tab-123');  
```

--------------------------------

### Initialize YASGUI with Basic Authentication

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Configure YASGUI to use basic authentication by providing username and password during initialization. This sets initial credentials that can also be managed via the UI.

```javascript
const yasgui = new Yasgui(document.getElementById("yasgui"), {
  requestConfig: {
    endpoint: "https://example.com/sparql",
    basicAuth: {
      username: "myuser",
      password: "mypassword"
    }
  }
});
```

--------------------------------

### Configure Basic Authentication with Prompt

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Prompts the user for username and password to authenticate with a secure SPARQL endpoint. WARNING: Storing credentials in localStorage is insecure and for demonstration only. Use secure alternatives for production.

```javascript
const yasgui = new Yasgui(document.getElementById("yasgui"), {
  requestConfig: {
    endpoint: "https://secure-endpoint.example.com/sparql",
    basicAuth: (yasqe) => {
      // WARNING: This example stores credentials in localStorage for demonstration only.
      // In production, use more secure alternatives (session tokens, OAuth, etc.)

      const username = prompt("Enter username:");
      const password = prompt("Enter password:");

      if (username && password) {
        return { username, password };
      }

      return undefined;
    }
  }
});
```

--------------------------------

### getValue(): string

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Get the current query text from the YASQE editor instance.

```APIDOC
## getValue(): string

### Description
Get the query text.

### Method
```javascript
const query = yasqe.getValue();
```
```

--------------------------------

### Get Tab ID

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Retrieve the unique identifier for a query tab instance.

```javascript
const id = tab.getId();  
```

--------------------------------

### Get Tab Name

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Retrieve the current name of a query tab instance.

```javascript
const name = tab.getName();  
```

--------------------------------

### Get current query from a tab

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Retrieves the current SPARQL query string from a tab.

```javascript
const query = tab.getQuery();
console.log('Current query:', query);
```

--------------------------------

### Get all registered plugins in Yasr

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Retrieves a map of all available plugins registered with the Yasr viewer.

```javascript
const plugins = yasr.getPlugins();
console.log('Available plugins:', Object.keys(plugins));
```

--------------------------------

### FILTER Snippet

Source: https://yasgui-doc.matdata.eu/docs/user-guide

An example of a FILTER pattern. Use this snippet to add conditions to your query to restrict the results.

```sparql
SELECT ?s WHERE {
  ?s ?p ?o .
  FILTER(?o = "value")
}
```

--------------------------------

### Get Current YASGUI Theme

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Retrieve the current theme of the YASGUI interface, which will be either 'light' or 'dark'.

```javascript
const theme = yasgui.getTheme();  
console.log('Current theme:', theme);  
```

--------------------------------

### Build YASGUI

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Generate a production build of YASGUI.

```bash
npm run build  
```

--------------------------------

### Run Tests

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Execute the test suite for YASGUI.

```bash
npm test  
```

--------------------------------

### getYasr(): Yasr

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Get the YASR instance associated with the current tab. This instance can be used to interact with the results viewer.

```APIDOC
## getYasr(): Yasr

### Description
Get YASR instance for this tab.

### Method
```javascript
const yasr = tab.getYasr();
yasr.draw();
```
```

--------------------------------

### Get prefixes from Yasqe query

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Retrieves all defined prefixes within the current SPARQL query in the Yasqe editor.

```javascript
const prefixes = yasqe.getPrefixes();
console.log('Prefixes:', prefixes);
```

--------------------------------

### Initialize YASGUI with SPARQL Endpoint Configuration

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Instantiate the Yasgui class, attaching it to a parent DOM element and providing initial configuration, such as the SPARQL endpoint URL.

```javascript
const yasgui = new Yasgui(document.getElementById('yasgui'), {
  requestConfig: { endpoint: 'https://dbpedia.org/sparql' }
});  
```

--------------------------------

### Get query text from Yasqe editor

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Retrieves the current SPARQL query text from the Yasqe editor instance.

```javascript
const query = yasqe.getValue();
```

--------------------------------

### Initialize YASGUI with API Key Authentication

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Configure YASGUI to authenticate using an API Key sent in a custom header. Specify the header name and the API key value.

```javascript
const yasgui = new Yasgui(document.getElementById("yasgui"), {
  requestConfig: {
    endpoint: "https://api.example.com/sparql",
    apiKeyAuth: {
      headerName: "X-API-Key",
      apiKey: "your-api-key-here"
    }
  }
});
```

--------------------------------

### Share Query via wget

Source: https://yasgui-doc.matdata.eu/docs/user-guide

Generates a wget command to execute a SPARQL query. Includes configured headers and authentication credentials if present. Use with caution if sensitive information is included.

```shell
wget 'https://example.com/sparql' \
  --body-data 'query=SELECT%20...' \
  --method POST \
  --header 'Authorization: Bearer token' \
  --header 'Accept: application/sparql-results+json' \
  -O -
```

--------------------------------

### Get YASR instance and draw

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Retrieve the YASR instance associated with a tab and trigger a redraw. Useful for updating the visualization after changes.

```javascript
const yasr = tab.getYasr();
yasr.draw();
```

--------------------------------

### Configure Endpoint Buttons

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Initializes YASGUI with a list of predefined SPARQL endpoint buttons for quick switching. Users can also add their own custom buttons via the settings.

```javascript
const yasgui = new Yasgui(document.getElementById("yasgui"), {
  endpointButtons: [
    { endpoint: "https://dbpedia.org/sparql", label: "DBpedia" },
    { endpoint: "https://query.wikidata.org/sparql", label: "Wikidata" },
    { endpoint: "https://example.com/sparql", label: "Custom" }
  ]
});
```

--------------------------------

### Perform Release

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Command for maintainers to publish a new release.

```bash
npm run release  
```

--------------------------------

### Tab Class Methods

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Provides methods for interacting with individual query tabs, such as getting and setting their names, IDs, and associated YASQE instances.

```APIDOC
## Tab Class

Represents a query tab.

### Methods

##### `getName(): string`

Get tab name.

```javascript
const name = tab.getName();
```

##### `setName(name: string): void`

Set tab name.

```javascript
tab.setName('My Query Tab');
```

##### `getId(): string`

Get tab ID.

```javascript
const id = tab.getId();
```

##### `getYasqe(): Yasqe`

Get YASQE instance for this tab.

```javascript
const yasqe = tab.getYasqe();
yasqe.setValue('SELECT * WHERE { ?s ?p ?o }');
```
```

--------------------------------

### Run Linter

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Check code style and identify potential issues using the linter.

```bash
npm run util:lint  
```

--------------------------------

### Get All YASGUI Tabs

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Retrieve an object containing all currently open query tabs, keyed by their IDs, and iterate over them to access tab details.

```javascript
const allTabs = yasgui.getTabs();  
Object.keys(allTabs).forEach(id => {  
  console.log('Tab:', allTabs[id].getName());  
});  
```

--------------------------------

### SELECT Query Snippet

Source: https://yasgui-doc.matdata.eu/docs/user-guide

A basic template for constructing a SELECT query. Insert this snippet to quickly start writing a query that retrieves data.

```sparql
SELECT ?s ?p ?o WHERE {
  ?s ?p ?o .
}
```

--------------------------------

### Basic Share Configuration for SPARQL Queries

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Configure YASGUI to allow users to share SPARQL queries via URLs, cURL, PowerShell, and wget. This includes enabling the share button and parsing shared links.

```typescript
interface YasqeConfig {  
  // ... other config options  
    
  // Function to create a shareable link (required to show share button)  
  createShareableLink?: (yasqe: Yasqe) => string;  
    
  // Optional URL shortener function  
  createShortLink?: (yasqe: Yasqe, longUrl: string) => Promise<string>;  
    
  // Function to consume/parse shared links  
  consumeShareLink?: (yasqe: Yasqe) => void;  
}  
```

```javascript
import Yasqe from '@matdata/yasqe';  
  
const yasqe = new Yasqe(document.getElementById('yasqe'), {  
  requestConfig: {  
    endpoint: 'https://dbpedia.org/sparql',  
    method: 'POST'  
  },  
    
  // Enable share button with URL generation  
  createShareableLink: (yasqe) => {  
    const query = yasqe.getValue();  
    const endpoint = yasqe.getRequestConfig().endpoint;  
      
    // Create shareable URL with query parameters  
    const params = new URLSearchParams({  
      query: query,  
      endpoint: endpoint  
    });  
      
    return `${window.location.origin}${window.location.pathname}?${params.toString()}`;  
  },  
    
  // Parse shared URLs on page load  
  consumeShareLink: (yasqe) => {  
    const params = new URLSearchParams(window.location.search);  
    const query = params.get('query');  
    const endpoint = params.get('endpoint');  
      
    if (query) yasqe.setValue(query);  
    if (endpoint) {  
      yasqe.setRequestConfig({  
        ...yasqe.getRequestConfig(),  
        endpoint: endpoint  
      });  
    }  
  }  
});  
```

--------------------------------

### Register Geo Plugin with Yasgui (npm)

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Register the Geo Plugin with Yasgui after installation via npm. Ensure this is done before constructing the Yasgui instance.

```javascript
import Yasgui from '@matdata/yasgui';  
import GeoPlugin from '@matdata/yasgui-geo-plugin';  
  
Yasgui.Yasr.registerPlugin('geo', GeoPlugin);  
  
const yasgui = new Yasgui(document.getElementById('yasgui'));  

```

--------------------------------

### Register Graph Plugin with YASGUI (NPM)

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Register the Graph Plugin with YASGUI after installing it via NPM. This involves importing the plugin and registering it with Yasgui.Yasr.

```javascript
import Yasgui from '@matdata/yasgui';  
import GraphPlugin from '@matdata/yasgui-graph-plugin';  
  
Yasgui.Yasr.registerPlugin('Graph', GraphPlugin);  
  
const yasgui = new Yasgui(document.getElementById('yasgui'));  

```

--------------------------------

### Create Short Link using Custom Backend

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Implement URL shortening by calling a custom backend API endpoint. Assumes an '/api/shorten' endpoint exists.

```javascript
createShortLink: async (yasqe, longUrl) => {
  const response = await fetch('/api/shorten', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ url: longUrl })
  });

  const data = await response.json();
  return data.shortUrl;
}
```

--------------------------------

### Query Temporal Data

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Example SPARQL query for temporal data, binding a specific date to the `?date` variable. This can be used with the time slider functionality.

```sparql
PREFIX geo: <http://www.opengis.net/ont/geosparql#>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
  
SELECT ?name ?wkt ?date WHERE {
  # ... your query ...
  BIND("2024-03-15"^^xsd:date AS ?date)
}

```

--------------------------------

### Run Unit and E2E Tests

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Commands to run different types of tests for YASGUI.

```bash
npm run unit-test        # Unit tests  
npm run puppeteer-test   # E2E tests  
```

--------------------------------

### Query Lat/Lon with Auto-Detection

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Example SPARQL query to select cities with latitude and longitude. When `latLonAutoDetect` is enabled, the plugin synthesizes a POINT geometry automatically.

```sparql
SELECT ?name ?lat ?lon WHERE {
  ?city a <http://dbpedia.org/ontology/City> ;
        <http://www.w3.org/2000/01/rdf-schema#label>    ?name ;
        <http://www.w3.org/2003/01/geo/wgs84_pos#lat>   ?lat ;
        <http://www.w3.org/2003/01/geo/wgs84_pos#long>  ?lon .
  FILTER(LANG(?name) = 'en')
} LIMIT 100

```

--------------------------------

### Theme Configuration

Source: https://yasgui-doc.matdata.eu/docs/developer-guide

Configure YASGUI's appearance with light and dark themes, including programmatic control and persistence.

```APIDOC
## Theme Configuration

### Initializing with Theme

```javascript
const yasgui = new Yasgui(element, {
  theme: 'dark', // 'light' or 'dark'
  showThemeToggle: true // Show/hide theme toggle button (default: true)
});
```

### Programmatic Theme Control

```javascript
// Get current theme
const currentTheme = yasgui.getTheme(); // Returns 'light' or 'dark'

// Set theme
yasgui.setTheme('dark'); // Switch to dark theme
yasgui.setTheme('light'); // Switch to light theme

// Toggle theme
const newTheme = yasgui.toggleTheme(); // Switch and return new theme
```

### TypeScript Support

```typescript
import Yasgui, { Theme } from '@matdata/yasgui';

const theme: Theme = 'dark'; // Type-safe: only 'light' or 'dark' allowed
yasgui.setTheme(theme);
```

### CSS Customization

```css
/* Custom dark theme colors */
[data-theme="dark"] {
  --yasgui-bg-primary: #0d1117;
  --yasgui-accent-color: #58a6ff;
  /* Override other variables as needed */
}
```

### Available CSS Custom Properties

- `--yasgui-bg-primary`: Primary background color
- `--yasgui-bg-secondary`: Secondary background (hover states, etc.)
- `--yasgui-bg-tertiary`: Tertiary background
- `--yasgui-text-primary`: Primary text color
- `--yasgui-text-secondary`: Secondary text color
- `--yasgui-text-muted`: Muted text color
- `--yasgui-border-color`: Primary border color
- `--yasgui-link-color`: Link color
- `--yasgui-accent-color`: Accent color for highlights
- `--yasgui-error-color`: Error message color
- `... and more`
```
Tokens:
Raw