From ee5a1f5e1fadf1b77b5a6d82ed233a083deb334c Mon Sep 17 00:00:00 2001 From: joschne Date: Fri, 12 Apr 2024 10:22:03 +0200 Subject: [PATCH] add yasgui timeline --- lib/projectParams.ts | 44 +++++++++++- package-lock.json | 8 +-- package.json | 2 +- pages/project/[geov_id]/sparql.tsx | 58 +++++++++++++--- pages/sparql.tsx | 104 ++++++++++++++++++++++++++++- 5 files changed, 200 insertions(+), 16 deletions(-) diff --git a/lib/projectParams.ts b/lib/projectParams.ts index 1427a76..10155f7 100644 --- a/lib/projectParams.ts +++ b/lib/projectParams.ts @@ -200,7 +200,7 @@ LIMIT 10`, headOgImage: '/socialimage/maritime-history.jpg', sparqlQueryTabs: [ { - name: 'Ship Voyages', + name: 'Ship Voyages Map', sparqlEndpoint: 'https://sparql.geovistory.org/api_v1_project_84760', selectedPlugin: 'mapCircles', query: `PREFIX rdfs: @@ -257,6 +257,48 @@ WHERE { GROUP BY ?label ?long ?lat ?type ?link } }` + }, + { + name: 'Ship Voyages Timeline', + sparqlEndpoint: 'https://sparql.geovistory.org/api_v1_project_84760', + selectedPlugin: 'timeline', + query: `PREFIX rdf: +PREFIX rdfs: +PREFIX owl: +PREFIX xml: +PREFIX xsd: +PREFIX geo: +PREFIX time: +PREFIX ontome: +PREFIX geov: + +SELECT (concat(str(?e), "?p=84760") as ?entityLink) (MIN(?date) as ?startDate) (MAX(?date) as ?endDate) (SAMPLE(?l) as ?entityLabel) ?entityClassLabel +WHERE { + ### Definition of the events we want to display on a timeline + + # Geo-Place "Texel NL" -> is departure place of -> ship voyage + geov:i209502 ^ontome:p1335 ?e . + # event -> is a -> ship voyages + ?e a ontome:c523 . + # Ship voyage -> class label + ontome:c523 rdfs:label ?entityClassLabel . + + ### Join temproal information for the time line ### + + # event -> has -> time span + ?e ontome:p4 ?timespan. + # time span -> timeprop -> date time description + ?timespan ontome:p71|ontome:p72|ontome:p150|ontome:p151|ontome:p152|ontome:p153 ?dtd. + # date time description -> year;month;day + ?dtd time:year ?y ; time:month ?m ; time:day ?d . + FILTER regex(str(?y), '^-') # necessary because of https://github.com/geovistory/toolbox-streams/issues/124 + # parse to xsd:date + bind(xsd:date(concat(replace(str(?y), "^-", "" ), replace(str(?m), "^-", "" ),replace(str(?d), "^--", "" ))) as ?date) + # event -> has -> label + ?e rdfs:label ?l . +} +GROUP BY ?e ?entityClassLabel +LIMIT 10` }, { name: 'Selection of triples', diff --git a/package-lock.json b/package-lock.json index a114adc..f9b6d41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "website", "version": "1.31.0", "dependencies": { - "@geovistory/design-system-web": "1.21.1-pr-122.1", + "@geovistory/design-system-web": "1.23.0", "@ionic/core": "^6.1.13", "@triply/yasgui": "^4.2.26", "dlv": "^1.1.3", @@ -2355,9 +2355,9 @@ } }, "node_modules/@geovistory/design-system-web": { - "version": "1.21.1-pr-122.1", - "resolved": "https://registry.npmjs.org/@geovistory/design-system-web/-/design-system-web-1.21.1-pr-122.1.tgz", - "integrity": "sha512-hOw2ZJEYao9eJsXlhSe7oIIVhQHTT7BgvgtUfIEXr4HnhbawOL93fTgFu9eKUgFGlX5qJ/usgV9yUCJs/7jvbw==", + "version": "1.23.0", + "resolved": "https://registry.npmjs.org/@geovistory/design-system-web/-/design-system-web-1.23.0.tgz", + "integrity": "sha512-+IfC238Plm3oLR05ik07xncF+k1WXwaOUhUW50VdQOBdKIR3mLD0hd8u3yhGkeswVEw0j0+vG88Sakbin5gRMQ==", "hasInstallScript": true, "dependencies": { "@rollup/plugin-typescript": "^11.1.2", diff --git a/package.json b/package.json index b5cceae..9b8ec91 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "copy:icons": "node .build/copy-icons.js" }, "dependencies": { - "@geovistory/design-system-web": "1.21.1-pr-122.1", + "@geovistory/design-system-web": "1.23.0", "@ionic/core": "^6.1.13", "@triply/yasgui": "^4.2.26", "dlv": "^1.1.3", diff --git a/pages/project/[geov_id]/sparql.tsx b/pages/project/[geov_id]/sparql.tsx index df51e56..1cd4cec 100644 --- a/pages/project/[geov_id]/sparql.tsx +++ b/pages/project/[geov_id]/sparql.tsx @@ -10,7 +10,7 @@ import { projectsParams, } from '../../../lib/projectParams'; import styles from './sparql.module.css'; -import { QueryTab } from '@geovistory/design-system-web/loader'; +import { CustomPlugin, QueryTab } from '@geovistory/design-system-web/loader'; export interface ProjectSparqlProps { params: ProjectParams; @@ -33,17 +33,19 @@ const ProjectSparqlPage: NextPage = (props) => { default-plugin="table" collapse="false" ref={(el: HTMLGeovYasguiElement) => { - el.plugins = new Set<'mapCircles'>(['mapCircles']); + el.plugins = new Set(['mapCircles', 'timeline']); el.queryTabs = props.queryTabs ?? [ { - name: 'Geographical Places', + name: 'Map example', sparqlEndpoint: `https://sparql.geovistory.org/api_v1_project_${props.params.geovID}`, selectedPlugin: 'mapCircles', query: `PREFIX rdfs: PREFIX ontome: PREFIX xsd: -SELECT ?label ?long ?lat ?link ("Geographical Place" as ?type) ${props.params.geovID ? "(count(?label) as ?radius)" : ""} +SELECT ?label ?long ?lat ?link ("Geographical Place" as ?type) ${ + props.params.geovID ? '(count(?label) as ?radius)' : '' + } WHERE { # Geographical Place -had presence-> Presence -was at-> Place (lat/long) @@ -60,14 +62,54 @@ WHERE { # Append the project query param to the URI bind(concat(str(?geoplace), "?p=${props.params.geovID}") as ?link ) - ${props.params.geovID == 153 ? - `# Find how much event are linked + ${ + props.params.geovID == 153 + ? `# Find how many events are linked ?event ontome:p7 ?geoplace` - : ""} + : '' + } } GROUP BY ?label ?long ?lat ?type ?link - ` + `, + }, + { + name: 'Timeline example', + sparqlEndpoint: `https://sparql.geovistory.org/api_v1_project_${props.params.geovID}`, + selectedPlugin: 'timeline', + query: `PREFIX rdf: +PREFIX rdfs: +PREFIX owl: +PREFIX xml: +PREFIX xsd: +PREFIX geo: +PREFIX time: +PREFIX ontome: +PREFIX geov: + +SELECT +(concat(str(?e), "?p=${props.params.geovID}") as ?entityLink) +(MIN(?date) as ?startDate) (MAX(?date) as ?endDate) (SAMPLE(?l) as ?entityLabel) (SAMPLE(?classLabel) as ?entityClassLabel) +WHERE { + # event -> is a -> birth + ?e a ontome:c61 . + # event class label + ontome:c61 rdfs:label ?classLabel . + # birth -> brought into life -> person -> has label -> label + ?e ontome:p86/rdfs:label ?l . + # event -> has -> time span + ?e ontome:p4 ?timespan. + # time span -> timeprop -> date time description + ?timespan ontome:p71|ontome:p72|ontome:p150|ontome:p151|ontome:p152|ontome:p153 ?dtd. + # date time description -> year;month;day + ?dtd time:year ?y ; time:month ?m ; time:day ?d . + FILTER regex(str(?y), '^-') # necessary because of https://github.com/geovistory/toolbox-streams/issues/124 + # parse to xsd:date + bind(xsd:date(concat(replace(str(?y), "^-", "" ), replace(str(?m), "^-", "" ),replace(str(?d), "^--", "" ))) as ?date) +} +GROUP BY ?e ?classLabel +LIMIT 10 +`, }, { name: 'Selection of triples', diff --git a/pages/sparql.tsx b/pages/sparql.tsx index 4086707..08dbff2 100644 --- a/pages/sparql.tsx +++ b/pages/sparql.tsx @@ -1,6 +1,6 @@ +import { CustomPlugin } from '@geovistory/design-system-web/loader'; import type { GetStaticProps, NextPage } from 'next'; import { CCLicense } from '../components/elements/CCLicense.component'; -import { Yasgui } from '../components/elements/Yasgui.component'; import { DefaultPage, DefaultPageProps, @@ -16,7 +16,107 @@ const Sparql: NextPage = (props) => {

Access Geovistory Community Data via SPARQL

- + { + el.plugins = new Set(['mapCircles', 'timeline']); + el.queryTabs = [ + { + name: 'Selection of triples', + sparqlEndpoint: `https://sparql.geovistory.org/api_v1_community_data`, + selectedPlugin: 'table', + query: `PREFIX rdf: +PREFIX rdfs: +PREFIX owl: +PREFIX xml: +PREFIX xsd: +PREFIX geo: +PREFIX time: +PREFIX ontome: +PREFIX geov: + +SELECT ?subject ?predicate ?object +WHERE { + ?subject ?predicate ?object . +} +LIMIT 10`, + }, + { + name: 'Map example', + sparqlEndpoint: `https://sparql.geovistory.org/api_v1_community_data`, + selectedPlugin: 'mapCircles', + query: `PREFIX rdfs: +PREFIX ontome: +PREFIX xsd: + +SELECT ?label ?long ?lat ?link ("Geographical Place" as ?type) +WHERE { + +# Geographical Place -had presence-> Presence -was at-> Place (lat/long) +?geoplace ontome:p147i/ontome:p148 ?place. + +# Geographical Place -label-> label +?geoplace rdfs:label ?label. + +# Extract lat and long from WKT +bind(replace(str(?place), '', "", "i") as ?rep) +bind(xsd:float(replace(str(?rep), "^[^0-9\\\\.-]*([-]?[0-9\\\\.]+) .*$", "$1" )) as ?long ) +bind(xsd:float(replace( str(?rep), "^.* ([-]?[0-9\\\\.]+)[^0-9\\\\.]*$", "$1" )) as ?lat ) + +# Append the project query param to the URI +bind(concat(str(?geoplace)) as ?link ) + +} +GROUP BY ?label ?long ?lat ?type ?link + + ` + }, + { + name: 'Timeline example', + sparqlEndpoint: 'https://sparql.geovistory.org/api_v1_community_data', + selectedPlugin: 'timeline', + query: `PREFIX rdf: +PREFIX rdfs: +PREFIX owl: +PREFIX xml: +PREFIX xsd: +PREFIX geo: +PREFIX time: +PREFIX ontome: +PREFIX geov: + +SELECT (str(?e) as ?entityLink) (MIN(?date) as ?startDate) (MAX(?date) as ?endDate) (SAMPLE(?l) as ?entityLabel) ?entityClassLabel +WHERE { + ### Definition of the events we want to display on a timeline + + # Geo-Place "Texel NL" -> is departure place of -> ship voyage + geov:i209502 ^ontome:p1335 ?e . + # event -> is a -> ship voyages + ?e a ontome:c523 . + # Ship voyage -> class label + ontome:c523 rdfs:label ?entityClassLabel . + + ### Join temproal information for the time line ### + + # event -> has -> time span + ?e ontome:p4 ?timespan. + # time span -> timeprop -> date time description + ?timespan ontome:p71|ontome:p72|ontome:p150|ontome:p151|ontome:p152|ontome:p153 ?dtd. + # date time description -> year;month;day + ?dtd time:year ?y ; time:month ?m ; time:day ?d . + # parse to xsd:date + bind(xsd:date(concat(replace(str(?y), "^-", "" ), replace(str(?m), "^-", "" ),replace(str(?d), "^--", "" ))) as ?date) + # event -> has -> label + ?e rdfs:label ?l . +} +GROUP BY ?e ?entityClassLabel +LIMIT 10`, + }, + ]; + }} + >{' '} );