SemanticQuery

{
    "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"
                }
            }
        ]
    }
}

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;