commit
17a7ea706c
@ -0,0 +1,24 @@ |
||||
# Logs |
||||
logs |
||||
*.log |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
pnpm-debug.log* |
||||
lerna-debug.log* |
||||
|
||||
node_modules |
||||
dist |
||||
dist-ssr |
||||
*.local |
||||
|
||||
# Editor directories and files |
||||
.vscode/* |
||||
!.vscode/extensions.json |
||||
.idea |
||||
.DS_Store |
||||
*.suo |
||||
*.ntvs* |
||||
*.njsproj |
||||
*.sln |
||||
*.sw? |
||||
@ -0,0 +1,36 @@ |
||||
# demo-berlin |
||||
|
||||
Example of a Web app made with NextGraph, using React and LDO, and Vite. |
||||
|
||||
It demonstrate the feature of Social Queries. |
||||
|
||||
## NextGraph |
||||
|
||||
> NextGraph brings about the convergence of P2P and Semantic Web technologies, towards a decentralized, secure and privacy-preserving cloud, based on CRDTs. |
||||
> |
||||
> This open source ecosystem provides solutions for end-users (a platform) and software developers (a framework), wishing to use or create **decentralized** apps featuring: **live collaboration** on rich-text documents, peer to peer communication with **end-to-end encryption**, offline-first, **local-first**, portable and interoperable data, total ownership of data and software, security and privacy. Centered on repositories containing **semantic data** (RDF), **rich text**, and structured data formats like **JSON**, synced between peers belonging to permissioned groups of users, it offers strong eventual consistency, thanks to the use of **CRDTs**. Documents can be linked together, signed, shared securely, queried using the **SPARQL** language and organized into sites and containers. |
||||
> |
||||
> More info here [https://nextgraph.org](https://nextgraph.org) |
||||
|
||||
## For developing against a public Broker |
||||
|
||||
``` |
||||
npm install |
||||
npm run dev |
||||
``` |
||||
|
||||
You will have to use a Wallet that was created on one of our public Broker Service Providers ([nextgraph.eu](https://nextgraph.eu) by example) before you can actually login. We didn't implement yet the option to create a Wallet while you are using or developing a 3rd party app. |
||||
|
||||
## License |
||||
|
||||
Licensed under either of |
||||
|
||||
- Apache License, Version 2.0 ([LICENSE-APACHE2](LICENSE-APACHE2) or http://www.apache.org/licenses/LICENSE-2.0) |
||||
- MIT license ([LICENSE-MIT](LICENSE-MIT) or http://opensource.org/licenses/MIT) |
||||
at your option. |
||||
|
||||
`SPDX-License-Identifier: Apache-2.0 OR MIT` |
||||
|
||||
--- |
||||
|
||||
NextGraph received funding through the [NGI Assure Fund](https://nlnet.nl/assure) and the [NGI Zero Commons Fund](https://nlnet.nl/commonsfund/), both funds established by [NLnet](https://nlnet.nl/) Foundation with financial support from the European Commission's [Next Generation Internet](https://ngi.eu/) programme, under the aegis of DG Communications Networks, Content and Technology under grant agreements No 957073 and No 101092990, respectively. |
||||
@ -0,0 +1,28 @@ |
||||
import js from '@eslint/js' |
||||
import globals from 'globals' |
||||
import reactHooks from 'eslint-plugin-react-hooks' |
||||
import reactRefresh from 'eslint-plugin-react-refresh' |
||||
import tseslint from 'typescript-eslint' |
||||
|
||||
export default tseslint.config( |
||||
{ ignores: ['dist'] }, |
||||
{ |
||||
extends: [js.configs.recommended, ...tseslint.configs.recommended], |
||||
files: ['**/*.{ts,tsx}'], |
||||
languageOptions: { |
||||
ecmaVersion: 2020, |
||||
globals: globals.browser, |
||||
}, |
||||
plugins: { |
||||
'react-hooks': reactHooks, |
||||
'react-refresh': reactRefresh, |
||||
}, |
||||
rules: { |
||||
...reactHooks.configs.recommended.rules, |
||||
'react-refresh/only-export-components': [ |
||||
'warn', |
||||
{ allowConstantExport: true }, |
||||
], |
||||
}, |
||||
}, |
||||
) |
||||
@ -0,0 +1,12 @@ |
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
<title>NextGraph WebApp React SocialQuery example</title> |
||||
</head> |
||||
<body> |
||||
<div id="app"></div> |
||||
<script type="module" src="/src/main.tsx"></script> |
||||
</body> |
||||
</html> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,45 @@ |
||||
{ |
||||
"name": "example-webapp-react-socialquery", |
||||
"private": true, |
||||
"version": "0.0.1", |
||||
"type": "module", |
||||
"scripts": { |
||||
"dev": "vite --host", |
||||
"build": "tsc --noEmit && vite build", |
||||
"lint": "eslint .", |
||||
"preview": "vite preview", |
||||
"build:ldo": "ldo build --input src/.shapes --output src/.ldo" |
||||
}, |
||||
"dependencies": { |
||||
"@heroicons/react": "^2.2.0", |
||||
"@ldo/connected-nextgraph": "^1.0.0-alpha.15", |
||||
"@ldo/ldo": "^1.0.0-alpha.14", |
||||
"@ldo/react": "^1.0.0-alpha.15", |
||||
"@rdfjs/data-model": "^1.2.0", |
||||
"@rdfjs/types": "^1.0.1", |
||||
"nextgraphweb": "^0.1.1-alpha.4", |
||||
"nextgraph-react": "^0.1.1-alpha.1", |
||||
"react": "^19.0.0", |
||||
"react-dom": "^19.0.0", |
||||
"react-router": "^7.6.0" |
||||
}, |
||||
"devDependencies": { |
||||
"@eslint/js": "^9.22.0", |
||||
"@ldo/cli": "^1.0.0-alpha.15", |
||||
"@types/jsonld": "^1.5.15", |
||||
"@types/react": "^19.0.10", |
||||
"@types/react-dom": "^19.0.4", |
||||
"@types/shexj": "^2.1.7", |
||||
"@vitejs/plugin-react": "^4.3.4", |
||||
"autoprefixer": "^10.4.21", |
||||
"eslint": "^9.22.0", |
||||
"eslint-plugin-react-hooks": "^5.2.0", |
||||
"eslint-plugin-react-refresh": "^0.4.19", |
||||
"globals": "^16.0.0", |
||||
"postcss": "^8.5.3", |
||||
"tailwindcss": "^3.4.17", |
||||
"typescript": "~5.7.2", |
||||
"typescript-eslint": "^8.26.1", |
||||
"vite": "^6.3.1" |
||||
} |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
export default { |
||||
plugins: { |
||||
tailwindcss: {}, |
||||
autoprefixer: {}, |
||||
}, |
||||
} |
||||
@ -0,0 +1,35 @@ |
||||
|
||||
# Platform ontologies: |
||||
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> |
||||
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> |
||||
PREFIX owl: <http://www.w3.org/2002/07/owl#> |
||||
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#> |
||||
PREFIX dc: <http://purl.org/dc/terms/> |
||||
|
||||
# Domain ontology for Contacts in vcard-like form |
||||
PREFIX vcard: <http://www.w3.org/2006/vcard/ns#> |
||||
PREFIX schem: <http://schema.org/> |
||||
PREFIX foaf: <http://xmlns.com/foaf/0.1/> |
||||
PREFIX ngc: <did:ng:x:class#> |
||||
PREFIX xskills: <did:ng:x:skills#> |
||||
PREFIX ksp: <did:ng:k:skills:programming:> |
||||
|
||||
ngc:SocialContact EXTRA a { |
||||
a [ vcard:Individual ] |
||||
// rdfs:comment "Defines the node as an Individual (from vcard)" ; |
||||
a [ schem:Person ] |
||||
// rdfs:comment "Defines the node as a Person (from Schema.org)" ; |
||||
a [ foaf:Person ] |
||||
// rdfs:comment "Defines the node as a Person (from foaf)" ; |
||||
vcard:fn xsd:string |
||||
// rdfs:comment "The formatted name of a person. Example: John Smith" ; |
||||
vcard:hasEmail xsd:string ? |
||||
// rdfs:comment "The person's email." ; |
||||
xskills:hasRating @ngc:HasRating *; |
||||
} |
||||
|
||||
ngc:HasRating { |
||||
a [ xskills:Rating ]; |
||||
xskills:rated xsd:integer; |
||||
xskills:skill [ ksp:svelte ksp:nextjs ksp:react ksp:vuejs ksp:tailwind ksp:rdf ksp:rust ksp:yjs ksp:automerge ] |
||||
} |
||||
@ -0,0 +1,24 @@ |
||||
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#> |
||||
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> |
||||
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> |
||||
PREFIX ldp: <http://www.w3.org/ns/ldp#> |
||||
PREFIX ldps: <http://www.w3.org/ns/lddps#> |
||||
PREFIX dct: <http://purl.org/dc/terms/> |
||||
PREFIX stat: <http://www.w3.org/ns/posix/stat#> |
||||
PREFIX tur: <http://www.w3.org/ns/iana/media-types/text/turtle#> |
||||
PREFIX pim: <http://www.w3.org/ns/pim/space#> |
||||
|
||||
ldps:Container EXTRA a { |
||||
$ldps:ContainerShape ( |
||||
a [ ldp:Container ldp:Resource ]* |
||||
// rdfs:comment "A container"; |
||||
dct:modified xsd:string? |
||||
// rdfs:comment "Date modified"; |
||||
ldp:contains IRI * |
||||
// rdfs:comment "Defines a Resource"; |
||||
stat:mtime xsd:decimal? |
||||
// rdfs:comment "?"; |
||||
stat:size xsd:integer? |
||||
// rdfs:comment "size of this container"; |
||||
) |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
|
||||
# Platform ontologies: |
||||
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> |
||||
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> |
||||
PREFIX owl: <http://www.w3.org/2002/07/owl#> |
||||
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#> |
||||
PREFIX dc: <http://purl.org/dc/terms/> |
||||
|
||||
PREFIX ngs: <did:ng:x:shape#> |
||||
PREFIX ngc: <did:ng:x:class#> |
||||
PREFIX ng: <did:ng:x:ng#> |
||||
|
||||
ngs:SocialQuery EXTRA a { |
||||
a [ ngc:SocialQuery ]; |
||||
ng:social_query_sparql xsd:string ?; |
||||
ng:social_query_forwarder IRI ?; |
||||
ng:social_query_ended xsd:dateTime ?; |
||||
} |
||||
@ -0,0 +1,46 @@ |
||||
|
||||
|
||||
.centered { |
||||
/*max-width: 1280px;*/ |
||||
margin: 0 auto; |
||||
padding: 0rem; |
||||
text-align: center; |
||||
width: fit-content; |
||||
} |
||||
|
||||
.contact { |
||||
width: 300px; |
||||
height: 300px; |
||||
background-color: #f6f6f6; |
||||
position: relative; |
||||
overflow-wrap: anywhere; |
||||
} |
||||
|
||||
.name { |
||||
padding: 5px; |
||||
height: 35px; |
||||
overflow: hidden; |
||||
background-color: #e0e0e0d0; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.email-logo { |
||||
|
||||
} |
||||
|
||||
.email { |
||||
padding: 5px; |
||||
overflow-wrap: anywhere; |
||||
} |
||||
|
||||
input { |
||||
margin: 5px; |
||||
} |
||||
|
||||
.button { |
||||
background-color:rgb(73, 114, 165); |
||||
color:white; |
||||
cursor:pointer; |
||||
} |
||||
@ -0,0 +1,29 @@ |
||||
|
||||
import React, { FunctionComponent } from 'react'; |
||||
import { Header } from './Header'; |
||||
import { Contacts } from './Contacts'; |
||||
import Query from './Query'; |
||||
import { BrowserNGLdoProvider } from './reactMethods'; |
||||
import { BrowserRouter, Routes, Route } from "react-router"; |
||||
|
||||
import './App.css' |
||||
import "./styles.css"; |
||||
|
||||
const App: FunctionComponent = () => { |
||||
|
||||
return ( |
||||
<div className="App"> |
||||
<BrowserNGLdoProvider> |
||||
<Header /> |
||||
<BrowserRouter> |
||||
<Routes> |
||||
<Route path="/" element={<Contacts />} /> |
||||
<Route path="/query" element={<Query />} /> |
||||
</Routes> |
||||
</BrowserRouter> |
||||
</BrowserNGLdoProvider> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default App |
||||
@ -0,0 +1,19 @@ |
||||
import { default as React, FunctionComponent } from "react"; |
||||
import { SocialContactShapeType } from "./.ldo/contact.shapeTypes.ts"; |
||||
import { useSubscribeToResource, useResource, useSubject, useLdo, useNextGraphAuth } from "./reactMethods.ts"; |
||||
import { StarIcon } from '@heroicons/react/24/solid' |
||||
import { StarIcon as StarIconOutline } from '@heroicons/react/24/outline' |
||||
import { |
||||
startTransaction, |
||||
transactionChanges, |
||||
toSparqlUpdate, |
||||
commitTransaction, |
||||
} from "@ldo/ldo"; |
||||
|
||||
export const Contact: FunctionComponent = ({nuri}) => { |
||||
|
||||
|
||||
return <> |
||||
|
||||
</>; |
||||
}; |
||||
@ -0,0 +1,17 @@ |
||||
import { FunctionComponent } from "react"; |
||||
import { useNextGraphAuth } from "./reactMethods"; |
||||
import { ContainerShapeType } from "./.ldo/container.shapeTypes.ts"; |
||||
import { useSubscribeToResource, useResource, useSubject } from "./reactMethods.ts"; |
||||
import { Contact } from "./Contact"; |
||||
import { MakeContact } from "./MakeContact"; |
||||
import { Link } from "react-router"; |
||||
import { LifebuoyIcon } from '@heroicons/react/24/outline' |
||||
|
||||
export const Contacts: FunctionComponent = () => { |
||||
const { session } = useNextGraphAuth(); |
||||
|
||||
return <> |
||||
|
||||
</>; |
||||
}; |
||||
|
||||
@ -0,0 +1,46 @@ |
||||
import { FunctionComponent } from "react"; |
||||
import { useNextGraphAuth } from "./reactMethods"; |
||||
|
||||
|
||||
export const Header: FunctionComponent = () => { |
||||
|
||||
const { session, login, logout } = useNextGraphAuth(); |
||||
|
||||
return ( |
||||
<div className="full-layout"> |
||||
|
||||
{session.sessionId ? ( |
||||
// If the session is logged in
|
||||
<div className="p-1 text-white text-center fixed top-0 left-0 right-0" style={{zIndex:1000, height:'36px', backgroundColor:'rgb(73, 114, 165)'}}> |
||||
You are logged in. |
||||
{/* <span className="font-bold clickable" onClick={logout}> Log out</span> */} |
||||
</div> |
||||
) : ( |
||||
// If the session is not logged in
|
||||
<> |
||||
<h1 className="text-2xl text-center mb-10">Welcome to the mini-LinkedIn demo</h1> |
||||
<h1 className="text-lg text-center mb-10">An example use of Social Queries with NextGraph</h1> |
||||
<div className="text-center text-xl p-1 text-white fixed top-0 left-0 right-0" style={{zIndex:1000, height:'36px', backgroundColor:'rgb(73, 114, 165)'}}> |
||||
Please <span className="font-bold clickable" onClick={login}> Log in</span> |
||||
</div> |
||||
|
||||
<div className="text-center max-w-6xl lg:px-8 mx-auto px-4 text-blue-800"> |
||||
|
||||
<svg onClick={login} |
||||
onKeyUp={login} className="cursor-pointer mt-10 h-16 w-16 mx-auto" data-slot="icon" fill="none" strokeWidth="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> |
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15M12 9l3 3m0 0-3 3m3-3H2.25"></path> |
||||
</svg> |
||||
|
||||
<button |
||||
onClick={login} |
||||
onKeyUp={login} |
||||
className="select-none ml-0 mt-2 mb-10 text-white bg-blue-800 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55" |
||||
> |
||||
Please Log in |
||||
</button> |
||||
</div> |
||||
</> |
||||
)} |
||||
</div> |
||||
); |
||||
}; |
||||
@ -0,0 +1,9 @@ |
||||
import { FormEvent, FunctionComponent, useCallback, useState } from "react"; |
||||
import { useLdo, dataset, useNextGraphAuth } from './reactMethods'; |
||||
import { SocialContactShapeType } from "./.ldo/contact.shapeTypes.ts"; |
||||
|
||||
export const MakeContact: FunctionComponent = () => { |
||||
return ( |
||||
<></> |
||||
); |
||||
}; |
||||
@ -0,0 +1,211 @@ |
||||
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"; |
||||
|
||||
|
||||
const query_string = `PREFIX vcard: <http://www.w3.org/2006/vcard/ns#>
|
||||
PREFIX xskills: <did:ng:x:skills#> |
||||
PREFIX ksp: <did:ng:k:skills:programming:> |
||||
PREFIX ng: <did:ng:x: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 <http://www.w3.org/2006/vcard/ns#hasEmail> ?mail. |
||||
?rating <http://www.w3.org/2006/vcard/ns#fn> ?name. |
||||
?rating <did:ng:x:skills#hasRating> ?hasrating. |
||||
?hasrating <did:ng:x:skills#rated> ?value. |
||||
?hasrating <did:ng:x:skills#skill> ?skill. |
||||
} GROUP BY ?mail ?skill
|
||||
} |
||||
BIND (IF(sameTerm(?skill, <did:ng:k:skills:programming:rust>), ?score, 0) AS ?rust_) |
||||
BIND (IF(sameTerm(?skill, <did:ng:k:skills:programming:svelte>), ?score, 0) AS ?svelte_) |
||||
BIND (IF(sameTerm(?skill, <did:ng:k:skills:programming:tailwind>), ?score, 0) AS ?tailwind_) |
||||
BIND (IF(sameTerm(?skill, <did:ng:k:skills:programming:rdf>), ?score, 0) AS ?rdf_) |
||||
BIND (IF(sameTerm(?skill, <did:ng:k:skills:programming:yjs>), ?score, 0) AS ?yjs_) |
||||
BIND (IF(sameTerm(?skill, <did:ng:k:skills:programming:automerge>), ?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<Quad>) => { |
||||
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}> <did:ng:x:ng#social_query_sparql> \"${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 ( |
||||
<div className="centered"> |
||||
<div className="flex flex-col justify-center gap-5 mt-10 mb-5"> |
||||
{!querying && <p className="p-3"> |
||||
<button |
||||
onClick={openQuery} |
||||
onKeyPress={openQuery}
|
||||
className="button select-none ml-2 mt-2 mb-2 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55" |
||||
> |
||||
<LifebuoyIcon tabIndex={-1} className="mr-2 focus:outline-none size-6" /> |
||||
Start query |
||||
</button> |
||||
</p> |
||||
} |
||||
|
||||
<div className="relative overflow-x-auto"> |
||||
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 table-auto"> |
||||
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"> |
||||
<tr> |
||||
<th scope="col" className="px-6 py-3">Email</th> |
||||
<th scope="col" className="px-6 py-3">Name</th> |
||||
<th scope="col" className="px-6 py-3">Rust</th> |
||||
<th scope="col" className="px-6 py-3">Svelte</th> |
||||
<th scope="col" className="px-6 py-3">Tailwind</th> |
||||
<th scope="col" className="px-6 py-3">Rdf</th> |
||||
<th scope="col" className="px-6 py-3">Yjs</th> |
||||
<th scope="col" className="px-6 py-3">Automerge</th> |
||||
<th scope="col" className="px-6 py-3">Total</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{
|
||||
results.map((res) =>
|
||||
<tr key={res.mail.value} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200"> |
||||
<td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{res.mail.value}</td> |
||||
<td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{res.name.value}</td> |
||||
<td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{Math.round(res.rust.value * 10) / 10 }</td> |
||||
<td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{Math.round(res.svelte.value * 10) / 10 }</td> |
||||
<td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{Math.round(res.tailwind.value * 10) / 10 }</td> |
||||
<td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{Math.round(res.rdf.value * 10) / 10 }</td> |
||||
<td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{Math.round(res.yjs.value * 10) / 10 }</td> |
||||
<td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{Math.round(res.automerge.value * 10) / 10 }</td> |
||||
<td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{Math.round(res.total.value * 10) / 10 }</td> |
||||
</tr> |
||||
) |
||||
} |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default Query |
||||
@ -0,0 +1,3 @@ |
||||
@tailwind base; |
||||
@tailwind components; |
||||
@tailwind utilities; |
||||
@ -0,0 +1,9 @@ |
||||
import { createRoot } from 'react-dom/client' |
||||
import './index.css' |
||||
import App from './App.tsx' |
||||
|
||||
createRoot(document.getElementById('app')!).render( |
||||
|
||||
<App /> |
||||
|
||||
) |
||||
@ -0,0 +1,18 @@ |
||||
import { nextGraphConnectedPlugin } from "@ldo/connected-nextgraph"; |
||||
import { createLdoReactMethods } from "@ldo/react"; |
||||
import { createBrowserNGReactMethods } from "nextgraph-react"; |
||||
|
||||
export const { |
||||
dataset, |
||||
useLdo, |
||||
useMatchObject, |
||||
useMatchSubject, |
||||
useResource, |
||||
useSubject, |
||||
useSubscribeToResource, |
||||
} = createLdoReactMethods([nextGraphConnectedPlugin]); |
||||
|
||||
const methods = createBrowserNGReactMethods(dataset); |
||||
|
||||
export const { BrowserNGLdoProvider, useNextGraphAuth } = methods; |
||||
|
||||
@ -0,0 +1,226 @@ |
||||
/* |
||||
// Copyright (c) 2022-2025 Niko Bonnieure, Par le Peuple, NextGraph.org developers |
||||
// All rights reserved. |
||||
// Licensed under the Apache License, Version 2.0 |
||||
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0> |
||||
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>, |
||||
// at your option. All files in the project carrying such |
||||
// notice may not be copied, modified, or distributed except |
||||
// according to those terms. |
||||
*/ |
||||
|
||||
|
||||
/** To format paths, like Settings > Wallet > Generate Wallet QR */ |
||||
.path { |
||||
font-family: monospace; |
||||
background-color: rgba(73, 114, 165, 0.1); |
||||
} |
||||
/* .splash-loaded { |
||||
display: none; |
||||
} */ |
||||
|
||||
|
||||
.toggle * { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.error-popover h3 { |
||||
text-align: center; |
||||
color: rgb(200 30 30); |
||||
} |
||||
.error-popover > div:first-child { |
||||
background-color: rgb(200 30 30); |
||||
} |
||||
.error-popover > div:first-child > h3 { |
||||
color: white; |
||||
} |
||||
|
||||
|
||||
|
||||
.logo { |
||||
padding: 1.5em; |
||||
will-change: filter; |
||||
transition: 0.75s; |
||||
padding-bottom: 1em; |
||||
} |
||||
|
||||
@keyframes pulse-logo-color { |
||||
0%, |
||||
100% { |
||||
fill: rgb(73, 114, 165); |
||||
stroke: rgb(73, 114, 165); |
||||
} |
||||
50% { |
||||
/* Mid-transition color */ |
||||
stroke: #bbb; |
||||
fill: #bbb; |
||||
} |
||||
} |
||||
|
||||
.logo-pulse path { |
||||
animation: pulse-logo-color 2s infinite; |
||||
animation-timing-function: cubic-bezier(0.65, 0.01, 0.59, 0.83); |
||||
} |
||||
|
||||
.logo-gray path { |
||||
fill: #bbb; |
||||
stroke: #bbb; |
||||
} |
||||
|
||||
.logo-blue path { |
||||
fill: rgb(73, 114, 165); |
||||
stroke: rgb(73, 114, 165); |
||||
} |
||||
|
||||
.jse-absolute-popup-content { |
||||
left: 0 !important; |
||||
} |
||||
|
||||
.container3 { |
||||
margin: 0; |
||||
|
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
text-align: center; |
||||
} |
||||
|
||||
.container3 aside { |
||||
width: 20rem !important; |
||||
} |
||||
|
||||
div[role="alert"] div { |
||||
display: block; |
||||
} |
||||
|
||||
.spinner-overlay button { |
||||
display: none; |
||||
} |
||||
|
||||
.choice-button { |
||||
min-width: 305px; |
||||
} |
||||
|
||||
.clickable { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.row { |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.deactivated-menu > svg { |
||||
color: rgb(156 163 175) !important; |
||||
} |
||||
|
||||
:root { |
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif; |
||||
font-size: 16px; |
||||
line-height: 24px; |
||||
font-weight: 400; |
||||
|
||||
color: #0f0f0f; |
||||
background-color: white; |
||||
|
||||
font-synthesis: none; |
||||
text-rendering: optimizeLegibility; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
-webkit-text-size-adjust: 100%; |
||||
} |
||||
|
||||
body { |
||||
margin: 0; |
||||
display: flex; |
||||
place-items: center; |
||||
min-width: 305px; |
||||
min-height: 100vh; |
||||
} |
||||
|
||||
#app { |
||||
width: 100%; |
||||
} |
||||
/* #app { |
||||
/*max-width: 1280px; |
||||
margin: 0 auto; |
||||
padding: 0rem; |
||||
text-align: center; |
||||
} */ |
||||
|
||||
/* .container2 { |
||||
padding-top: 10vh; |
||||
} */ |
||||
|
||||
a { |
||||
font-weight: 500; |
||||
color: #646cff; |
||||
text-decoration: inherit; |
||||
} |
||||
|
||||
a:hover { |
||||
color: #535bf2; |
||||
} |
||||
|
||||
.toast { |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
z-index: 49; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
input, |
||||
button { |
||||
border-radius: 8px; |
||||
border: 1px solid transparent; |
||||
padding: 0.6em 1.2em; |
||||
font-size: 1em; |
||||
font-weight: 500; |
||||
font-family: inherit; |
||||
color: #0f0f0f; |
||||
background-color: #ffffff; |
||||
transition: border-color 0.25s; |
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); |
||||
} |
||||
|
||||
button { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
button:hover { |
||||
border-color: #396cd8; |
||||
} |
||||
button:active { |
||||
border-color: #396cd8; |
||||
background-color: #e8e8e8; |
||||
} |
||||
|
||||
/* input, |
||||
button { |
||||
outline: none; |
||||
} */ |
||||
|
||||
button:focus, |
||||
button:focus-visible { |
||||
outline: 4px auto -webkit-focus-ring-color; |
||||
} |
||||
|
||||
/* @media (prefers-color-scheme: dark) { |
||||
:root { |
||||
color: #f6f6f6; |
||||
background-color: #2f2f2f; |
||||
} |
||||
|
||||
a:hover { |
||||
color: #24c8db; |
||||
} |
||||
|
||||
input, |
||||
button { |
||||
color: #ffffff; |
||||
background-color: #0f0f0f98; |
||||
} |
||||
button:active { |
||||
background-color: #0f0f0f69; |
||||
} |
||||
} */ |
||||
@ -0,0 +1 @@ |
||||
/// <reference types="vite/client" />
|
||||
@ -0,0 +1,12 @@ |
||||
/** @type {import('tailwindcss').Config} */ |
||||
export default { |
||||
content: [ |
||||
"./index.html", |
||||
"./src/**/*.{js,jsx,ts,tsx}" |
||||
], |
||||
theme: { |
||||
extend: {}, |
||||
}, |
||||
plugins: [], |
||||
} |
||||
|
||||
@ -0,0 +1,26 @@ |
||||
{ |
||||
"compilerOptions": { |
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", |
||||
"target": "ES2020", |
||||
"useDefineForClassFields": true, |
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"], |
||||
"module": "ESNext", |
||||
"skipLibCheck": true, |
||||
|
||||
/* Bundler mode */ |
||||
"moduleResolution": "bundler", |
||||
"allowImportingTsExtensions": true, |
||||
"isolatedModules": true, |
||||
"moduleDetection": "force", |
||||
"noEmit": true, |
||||
"jsx": "react-jsx", |
||||
|
||||
/* Linting */ |
||||
"strict": true, |
||||
"noUnusedLocals": true, |
||||
"noUnusedParameters": true, |
||||
"noFallthroughCasesInSwitch": true, |
||||
"noUncheckedSideEffectImports": true |
||||
}, |
||||
"include": ["src"] |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
{ |
||||
"files": [], |
||||
"references": [ |
||||
{ "path": "./tsconfig.app.json" }, |
||||
{ "path": "./tsconfig.node.json" } |
||||
] |
||||
} |
||||
@ -0,0 +1,24 @@ |
||||
{ |
||||
"compilerOptions": { |
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", |
||||
"target": "ES2022", |
||||
"lib": ["ES2023"], |
||||
"module": "ESNext", |
||||
"skipLibCheck": true, |
||||
|
||||
/* Bundler mode */ |
||||
"moduleResolution": "bundler", |
||||
"allowImportingTsExtensions": true, |
||||
"isolatedModules": true, |
||||
"moduleDetection": "force", |
||||
"noEmit": true, |
||||
|
||||
/* Linting */ |
||||
"strict": true, |
||||
"noUnusedLocals": true, |
||||
"noUnusedParameters": true, |
||||
"noFallthroughCasesInSwitch": true, |
||||
"noUncheckedSideEffectImports": true |
||||
}, |
||||
"include": ["vite.config.ts"] |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
import { defineConfig } from 'vite' |
||||
import react from '@vitejs/plugin-react' |
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({ |
||||
plugins: [react()], |
||||
}) |
||||
Loading…
Reference in new issue