import React, { FunctionComponent, useState } from 'react'; import { LifebuoyIcon } from '@heroicons/react/24/outline' import { useLdo, dataset, useNextGraphAuth, useResource, useSubject} from './reactMethods'; import { SocialQueryShapeType } from "./.ldo/socialquery.shapeTypes.ts"; import { namedNode } from "@rdfjs/data-model"; import type { Quad } from "@rdfjs/types"; import type { DatasetChanges } from "@ldo/rdf-utils"; import './App.css' import "../../../common/src/styles.css"; const query_string = `PREFIX vcard: PREFIX xskills: PREFIX ksp: PREFIX ng: CONSTRUCT { [ vcard:hasEmail ?email; vcard:fn ?name; a vcard:Individual; ng:site ?public_profile; ng:protected ?protected_profile; xskills:hasRating [ a xskills:Rating ; xskills:rated ?level; xskills:skill ?skill ] ] } WHERE { ?contact a vcard:Individual. ?contact vcard:fn ?name. ?contact vcard:hasEmail ?email. OPTIONAL { ?contact ng:site ?public_profile . ?contact ng:site_inbox ?public_inbox } OPTIONAL { ?contact ng:protected ?protected_profile . ?contact ng:protected_inbox ?prot_inbox } ?contact xskills:hasRating [ a xskills:Rating ; xskills:rated ?level; xskills:skill ?skill ]. ?contact xskills:hasRating/xskills:skill ksp:rust. ?contact xskills:hasRating/xskills:skill ksp:svelte. FILTER ( ?skill IN ( ksp:rust, ksp:svelte, ksp:rdf, ksp:tailwind, ksp:yjs, ksp:automerge ) ) }`; const ranking_query = `SELECT ?mail (SAMPLE(?n) as?name) (MAX(?rust_) as ?rust) (MAX(?svelte_) as ?svelte) (MAX(?tailwind_) as ?tailwind) (MAX(?rdf_) as ?rdf) (MAX(?yjs_) as ?yjs) (MAX(?automerge_) as ?automerge) (SUM(?total_) as ?total) WHERE { { SELECT ?mail (SAMPLE(?name) as ?n) ?skill (AVG(?value)+1 AS ?score) WHERE { ?rating ?mail. ?rating ?name. ?rating ?hasrating. ?hasrating ?value. ?hasrating ?skill. } GROUP BY ?mail ?skill } BIND (IF(sameTerm(?skill, ), ?score, 0) AS ?rust_) BIND (IF(sameTerm(?skill, ), ?score, 0) AS ?svelte_) BIND (IF(sameTerm(?skill, ), ?score, 0) AS ?tailwind_) BIND (IF(sameTerm(?skill, ), ?score, 0) AS ?rdf_) BIND (IF(sameTerm(?skill, ), ?score, 0) AS ?yjs_) BIND (IF(sameTerm(?skill, ), ?score, 0) AS ?automerge_) BIND (?tailwind_+?svelte_+?rust_+?rdf_+?yjs_+?automerge_ AS ?total_) } GROUP BY ?mail ORDER BY DESC(?total)`; const Query: FunctionComponent = () => { const { createData, commitData, changeData } = useLdo(); const { session } = useNextGraphAuth(); const [resourceUri, setResourceUri] = useState(""); useResource(resourceUri, { subscribe: true }); const [nuri, setNuri] = useState(""); const [querying, setQuerying] = useState(false); const [results, setResults] = useState([]); let social_query = useSubject(SocialQueryShapeType, session.sessionId && nuri ? nuri : undefined); React.useEffect(() => { async function start() { let res = await session.ng.app_request_with_nuri_command(nuri, {Fetch:"CurrentHeads"}, session.sessionId); let request_nuri = res.V0?.Text; console.log(request_nuri); // finally start the social query res = await session.ng.social_query_start( session.sessionId, "did:ng:a", request_nuri, "did:ng:d:c", 0, ); } if (social_query?.socialQuerySparql) { if (!social_query?.socialQueryForwarder) { //console.log(social_query?.socialQuerySparql); start(); } else { console.log("ready to receive results") dataset.on( [null, null, null, namedNode(resourceUri)], (changes: DatasetChanges) => { session.ng.sparql_query(session.sessionId, ranking_query, undefined, resourceUri).then((res) => { setResults(res.results?.bindings); }); }, ); } } }, [resourceUri, nuri, social_query, session]) const openQuery = async () => { setQuerying(true); try { let resource = await dataset.createResource("nextgraph", { primaryClass: "social:query:skills:programming" }); if (!resource.isError) { console.log("Created resource:", resource.uri); setResourceUri(resource.uri); setNuri(resource.uri.substring(0,53)); const query = createData( SocialQueryShapeType, nuri, resource ); query.type = { "@id": "SocialQuery" }; const result = await commitData(query); if (result.isError) { console.error(result.message); } // then add the did:ng:x:ng#social_query_sparql //await session.ng.sparql_update(session.sessionId,`INSERT DATA { <${nuri}> \"${query_string.replaceAll("\n"," ")}\".}`, resource.uri); let editing_query = changeData(query, resource); editing_query.socialQuerySparql = query_string.replaceAll("\n"," "); // const changes = transactionChanges(editing_query); // console.log(changes.added?.toString()) // console.log(changes.removed?.toString()) let res = await commitData(editing_query); if (res.isError) { console.error(result.message); } } else { console.error(resource); } } catch (e) { console.error(e) } }; if (!session.sessionId) return <>; return (
{!querying &&

}
{ results.map((res) => ) }
Email Name Rust Svelte Tailwind Rdf Yjs Automerge Total
{res.mail.value} {res.name.value} {Math.round(res.rust.value * 10) / 10 } {Math.round(res.svelte.value * 10) / 10 } {Math.round(res.tailwind.value * 10) / 10 } {Math.round(res.rdf.value * 10) / 10 } {Math.round(res.yjs.value * 10) / 10 } {Math.round(res.automerge.value * 10) / 10 } {Math.round(res.total.value * 10) / 10 }
); } export default Query