NextGraph
/
nextgraph-rs
1
4
Fork 1
Code Issues 3 Pull Requests Packages Projects 2 Releases 3 Activity

formatting

Browse Source
master
Niko PLP 2 weeks ago
parent 4bd1e2b7de
commit 1a97580ad1
1 changed files with 120 additions and 120 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 240
      ng-app/src/apps/SocialQueryDemo.svelte

240
ng-app/src/apps/SocialQueryDemo.svelte
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save