master
Niko PLP 2 weeks ago
parent 4bd1e2b7de
commit 1a97580ad1
  1. 240
      ng-app/src/apps/SocialQueryDemo.svelte

@ -10,36 +10,36 @@
--> -->
<script lang="ts"> <script lang="ts">
import { onMount, tick, onDestroy } from "svelte"; import { onMount, tick, onDestroy } from "svelte";
import { import {
sparql_update, sparql_update,
sparql_query, sparql_query,
toast_error, toast_error,
toast_success, toast_success,
active_session, active_session,
display_error, display_error,
online online
} from "../store"; } from "../store";
import ng from "../api"; import ng from "../api";
import { import {
in_memory_discrete, open_viewer, set_viewer, set_editor, set_view_or_edit, cur_tab_doc_can_edit, cur_tab in_memory_discrete, open_viewer, set_viewer, set_editor, set_view_or_edit, cur_tab_doc_can_edit, cur_tab
} from "../tab"; } from "../tab";
import{ PencilSquare, Lifebuoy } from "svelte-heros-v2"; import{ PencilSquare, Lifebuoy } from "svelte-heros-v2";
import { t } from "svelte-i18n"; import { t } from "svelte-i18n";
import { Button, Progressbar, Spinner, Alert } from "flowbite-svelte"; import { Button, Progressbar, Spinner, Alert } from "flowbite-svelte";
import Highlight, { LineNumbers } from "svelte-highlight"; import Highlight, { LineNumbers } from "svelte-highlight";
import hljs from "highlight.js"; import hljs from "highlight.js";
import { definer } from "../turtle"; import { definer } from "../turtle";
import "svelte-highlight/styles/github.css"; import "svelte-highlight/styles/github.css";
const language = { const language = {
name: "turtle", name: "turtle",
register: (hljs) => { register: (hljs) => {
return definer(hljs); return definer(hljs);
}, },
}; };
const ranking_query = `SELECT ?mail (SAMPLE(?n) as?name) (MAX(?rust_) as ?rust) (MAX(?svelte_) as ?svelte) (MAX(?tailwind_) as ?tailwind) 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) (MAX(?rdf_) as ?rdf) (MAX(?yjs_) as ?yjs) (MAX(?automerge_) as ?automerge) (SUM(?total_) as ?total)
WHERE { WHERE {
{ SELECT ?mail (SAMPLE(?name) as ?n) ?skill (AVG(?value)+1 AS ?score) { SELECT ?mail (SAMPLE(?name) as ?n) ?skill (AVG(?value)+1 AS ?score)
@ -61,20 +61,20 @@ WHERE {
} GROUP BY ?mail } GROUP BY ?mail
ORDER BY DESC(?total)`; ORDER BY DESC(?total)`;
export let commits = {graph:[]}; export let commits = {graph:[]};
let source = ""; let source = "";
$: source = commits.graph.join(" .\r\n") + (commits.graph.length ? " .":""); $: source = commits.graph.join(" .\r\n") + (commits.graph.length ? " .":"");
let results = []; let results = [];
$: if (commits.graph.length > 4) { $: if (commits.graph.length > 4) {
sparql_query(ranking_query, false).then((res) => { sparql_query(ranking_query, false).then((res) => {
//console.log(res.results?.bindings); //console.log(res.results?.bindings);
results = res.results?.bindings; results = res.results?.bindings;
}); });
} }
const query = `PREFIX vcard: <http://www.w3.org/2006/vcard/ns#> const query = `PREFIX vcard: <http://www.w3.org/2006/vcard/ns#>
PREFIX xskills: <did:ng:x:skills#> PREFIX xskills: <did:ng:x:skills#>
PREFIX ksp: <did:ng:k:skills:programming:> PREFIX ksp: <did:ng:k:skills:programming:>
PREFIX ng: <did:ng:x:ng#> PREFIX ng: <did:ng:x:ng#>
@ -109,87 +109,87 @@ WHERE {
) ) ) )
}`; }`;
const openQuery = async () => { const openQuery = async () => {
//TODO : return now if already processing (when LDO for svelte is ready) //TODO : return now if already processing (when LDO for svelte is ready)
// and even disable the button in that case // and even disable the button in that case
try { try {
await sparql_update(`INSERT DATA { <> <did:ng:x:ng#social_query_sparql> \"${query.replaceAll("\n"," ")}\".}`); await sparql_update(`INSERT DATA { <> <did:ng:x:ng#social_query_sparql> \"${query.replaceAll("\n"," ")}\".}`);
let commit_id = commits.heads[0]; let commit_id = commits.heads[0];
let commit_key = commits.head_keys[0]; let commit_key = commits.head_keys[0];
let session = $active_session; let session = $active_session;
if (!session) return; if (!session) return;
let request_nuri = "did:ng:"+$cur_tab.doc.nuri+":c:"+commit_id+":k:"+commit_key; let request_nuri = "did:ng:"+$cur_tab.doc.nuri+":c:"+commit_id+":k:"+commit_key;
await ng.social_query_start( await ng.social_query_start(
session.session_id, session.session_id,
"did:ng:a", "did:ng:a",
request_nuri, request_nuri,
"did:ng:d:c", "did:ng:d:c",
0, 0,
); );
} catch (e) { } catch (e) {
toast_error(display_error(e)); toast_error(display_error(e));
}
} }
}
onMount(()=>{ onMount(()=>{
//console.log($active_session); //console.log($active_session);
}); });
</script>
<div class="flex-col">
<p class="p-3">
Social Query
</p>
<Button
on:click={openQuery}
on:keypress={openQuery}
disabled={!$online}
class="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"
>
<Lifebuoy tabindex="-1" class="mr-2 focus:outline-none" />
Start query
</Button>
<div class="relative overflow-x-auto"> </script>
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 table-auto">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"> <div class="flex-col">
<th scope="col" class="px-6 py-3">Email</th> <p class="p-3">
<th scope="col" class="px-6 py-3">Name</th> Social Query
<th scope="col" class="px-6 py-3">Rust</th> </p>
<th scope="col" class="px-6 py-3">Svelte</th> <Button
<th scope="col" class="px-6 py-3">Tailwind</th> on:click={openQuery}
<th scope="col" class="px-6 py-3">Rdf</th> on:keypress={openQuery}
<th scope="col" class="px-6 py-3">Yjs</th> disabled={!$online}
<th scope="col" class="px-6 py-3">Automerge</th> class="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"
<th scope="col" class="px-6 py-3">Total</th> >
</thead> <Lifebuoy tabindex="-1" class="mr-2 focus:outline-none" />
<tbody> Start query
{#each results as res} </Button>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{res.mail.value}</td> <div class="relative overflow-x-auto">
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{res.name.value}</td> <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 table-auto">
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{Math.round(res.rust.value * 10) / 10 }</td> <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{Math.round(res.svelte.value * 10) / 10 }</td> <th scope="col" class="px-6 py-3">Email</th>
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{Math.round(res.tailwind.value * 10) / 10 }</td> <th scope="col" class="px-6 py-3">Name</th>
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{Math.round(res.rdf.value * 10) / 10 }</td> <th scope="col" class="px-6 py-3">Rust</th>
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{Math.round(res.yjs.value * 10) / 10 }</td> <th scope="col" class="px-6 py-3">Svelte</th>
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{Math.round(res.automerge.value * 10) / 10 }</td> <th scope="col" class="px-6 py-3">Tailwind</th>
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{Math.round(res.total.value * 10) / 10 }</td> <th scope="col" class="px-6 py-3">Rdf</th>
</tr> <th scope="col" class="px-6 py-3">Yjs</th>
{/each} <th scope="col" class="px-6 py-3">Automerge</th>
</tbody> <th scope="col" class="px-6 py-3">Total</th>
</table> </thead>
</div> <tbody>
{#each results as res}
<p class="p-3 mt-10"> <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
Raw data <td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{res.mail.value}</td>
</p> <td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{res.name.value}</td>
{#if source} <td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{Math.round(res.rust.value * 10) / 10 }</td>
<Highlight {language} code={source} class="mb-10" let:highlighted > <td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{Math.round(res.svelte.value * 10) / 10 }</td>
<LineNumbers {highlighted} wrapLines hideBorder /> <td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{Math.round(res.tailwind.value * 10) / 10 }</td>
</Highlight> <td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{Math.round(res.rdf.value * 10) / 10 }</td>
{/if} <td scope="row" class="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" class="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" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{Math.round(res.total.value * 10) / 10 }</td>
</tr>
{/each}
</tbody>
</table>
</div> </div>
<p class="p-3 mt-10">
Raw data
</p>
{#if source}
<Highlight {language} code={source} class="mb-10" let:highlighted >
<LineNumbers {highlighted} wrapLines hideBorder />
</Highlight>
{/if}
</div>

Loading…
Cancel
Save