Skip to main content

Develop with FastTrack

SemanticQuery

 

The SemanticQuery widget queries semantic data from a database. An input field accepts native SPARQL queries. When a query is executed, it retrieves information from RDF triples in the data. The search results are returned with an array of data objects that contain information on the corresponding triple. The data is organized into subject, predicate, and object form. The SemanticQuery widget typically works alongside the NetworkGraph widget. The NetworkGraph widget displays connected nodes based on search results with triples.

Example Rendering

This is an example of the SemanticQuery widget.

The SemanticQuery widget.
Explanation

In the Example Rendering:

  • The SELECT clause identifies the three variables (s, p, o) that appear in the query results. The appearance of individual variables can be turned on or off using the widget props. See API for additional information. The remainder of the query can be modified freely through the input field.

  • The WHERE clause provides a basic pattern to match against the data.

  • The LIMIT sets the maximum number of results to 1000.

  • Clicking the Search button submits the query with a callback specified through the widget props,

  • The Reset button resets the query back to its default state.

Example Search Response

This response shows triples data in subject-predicate-object form. In the example, s refers to the subject, p refers to the predicate, and o refers to the object.

{
    "head": {
        "vars": [
            "s",
            "p",
            "o"
        ]
    },
    "results": {
        "bindings": [
            {
                "s": {
                    "type": "uri",
                    "value": "http://example.org/organization/10029.xml "
                },
                "p": {
                    "type": "uri",
                    "value": "http://example.org/employs"
                },
                "o": {
                    "type": "uri",
                    "value": "http://example.org/person/10034.xml"
                }
            }
        ]
    }
}

Example Configuration

This example React application displays a SemanticQuery widget. The widget submits a semantic query through the getSparql()a method in MarkLogicContext. The method stores the results in a sparqlResponse state object. After the query is submitted,  the object is transformed to display a summary of the results in the NetworkGraph widget.

import { useContext } from "react";
import './App.css';
import { MarkLogicContext, SemanticQuery } from "ml-fasttrack";
import { transformSparqlResult } from './config/util.config.js';
 
  function App() {
  
  const context = useContext(MarkLogicContext);   
     
  const handleSemanticQuery = (query) => {
    context.getSparql(query);
  };
  const transformSparqlResult = (data) => {
    if (!data) return;
    let transformed = {};
    data.results.bindings.forEach(r => {
      const { s, p, o } = r
      if (s && s?.value) {
        if (!transformed[s.value]) {
          transformed[s.value] = {
            label: [{ text: s?.value, position: 's' }],
            uri: s?.value
          }
        }
      }
      if (o && o?.value) {
        if (!transformed[o.value]) {
          transformed[o.value] = {
            label: [{ text: o.value, position: 's' }],
            uri: o.value
          }
        }
      }
      if (s && s?.value && o && o?.value) {
        if (!transformed[s.value + '-' + o.value]) {
          transformed[s.value + '-' + o.value] = {
            id1: s.value,
            id2: o.value,
            label: {
              text: p?.value
            }
          }
        }
      }
    })
    return transformed;
  }

  const sparqlItems = transformSparqlResult(context.sparqlResponse)
      
  return (
    <div className="App">
      <div>                    
        <SemanticQuery buttonVariant="dark" onSearch={handleSemanticQuery} inputRows={4} />
        <div>
              Found {sparqlItems ? Object.keys(sparqlItems).filter(key => !key?.includes('-'))?.length : 0} results
        </div> 
        <div>
          <NetworkGraph
            items={ sparqlItems }
            width={ '100%' }
            height={'600px' }
          />

        </div>      
      </div>
    </div>
  );
}
  
export default App;

API

Prop 

Type 

Description 

inputRows

number

Number of rows displayed for the input text box.

disableSource

boolean

Indicates whether ?s Is disabled in the select query.

disablePredicate

boolean

Indicates whether ?p is disabled in the select query.

disableObject

boolean

Indicates whether ?o is disabled in the select query.

buttonVariant

"light" | "dark" | "base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "inverse"

KendoReact theme color for the buttons.

boxVariant

"light" | "dark" | "base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "inverse"

KendoReact theme color for the side box.

containerStyle

CSSProperties

CSS styles applied to the widget.

textAreaStyle

CSSProperties

CSS styles applied to the text area.

inputGroupStyle

CSSProperties

CSS styles applied to the input group container.

actionButtonStyle

CSSProperties

CSS styles applied to the action buttons container.

onSearch

((sparqlQuery: string) => void)

Callback function triggered when the search button is clicked.
In this section: