From 5ff1870ad65218fac7623d91f331ca56a81451ba Mon Sep 17 00:00:00 2001 From: Tomasz Pluskiewicz Date: Mon, 18 Nov 2024 11:18:58 +0100 Subject: [PATCH 1/2] fix: better resource links --- .changeset/lemon-ties-carry.md | 5 ++ .changeset/young-lamps-approve.md | 5 ++ .../details/details/details.component.ts | 21 ----- .../explore-header.component.ts | 88 ++++++++++--------- 4 files changed, 56 insertions(+), 63 deletions(-) create mode 100644 .changeset/lemon-ties-carry.md create mode 100644 .changeset/young-lamps-approve.md diff --git a/.changeset/lemon-ties-carry.md b/.changeset/lemon-ties-carry.md new file mode 100644 index 0000000..9f155f7 --- /dev/null +++ b/.changeset/lemon-ties-carry.md @@ -0,0 +1,5 @@ +--- +"blueprint": patch +--- + +Use configured `endpointUrl` when creating the resource SPARQL console link (fixes #44) diff --git a/.changeset/young-lamps-approve.md b/.changeset/young-lamps-approve.md new file mode 100644 index 0000000..d5f020c --- /dev/null +++ b/.changeset/young-lamps-approve.md @@ -0,0 +1,5 @@ +--- +"blueprint": patch +--- + +The links on resource explorer page can now be copied diff --git a/projects/blueprint/src/app/core/component/details/details/details.component.ts b/projects/blueprint/src/app/core/component/details/details/details.component.ts index 2e17d55..eabaa0f 100644 --- a/projects/blueprint/src/app/core/component/details/details/details.component.ts +++ b/projects/blueprint/src/app/core/component/details/details/details.component.ts @@ -103,27 +103,6 @@ export class DetailsComponent implements OnDestroy, AfterViewInit { }); } - toSparqlQuery(iri: string): string { - const query = ` -PREFIX rdf: -PREFIX rdfs: - -SELECT * WHERE { - <${iri}> ?p ?o . -} -`; - - return `${this.config.sparqlConsoleUrl}=${encodeURIComponent( - query - )}&contentTypeConstruct=text%2Fturtle&contentTypeSelect=application%2Fsparql-results%2Bjson&endpoint=https%3A%2F%2Fld.flux.zazuko.com%2Fquery&requestMethod=POST&tabTitle=Query+2&headers=%7B%7D&outputFormat=table`; - } - - toGraphExplorer(iri: string): string { - return `${this.config.graphExplorerUrl}=${encodeURIComponent( - iri - )}`; - } - ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); diff --git a/projects/blueprint/src/app/features/explore/explore-header/explore-header.component.ts b/projects/blueprint/src/app/features/explore/explore-header/explore-header.component.ts index 31a0e59..c9608a3 100644 --- a/projects/blueprint/src/app/features/explore/explore-header/explore-header.component.ts +++ b/projects/blueprint/src/app/features/explore/explore-header/explore-header.component.ts @@ -1,4 +1,4 @@ -import { Component, inject, input } from '@angular/core'; +import {Component, inject, input} from '@angular/core'; import { CommonModule } from '@angular/common'; import { Clipboard } from '@angular/cdk/clipboard'; @@ -35,64 +35,68 @@ export class ExploreHeaderComponent { public readonly config = inject(LibraryConfigurationService); public readonly clipboard = inject(Clipboard); - items: MenuItem[] = [ - { - label: 'Copy IRI', - icon: 'pi pi-copy', - command: () => { - this.copyIri(); + get items(): MenuItem[] { + return [ + { + label: 'Copy IRI', + icon: 'pi pi-copy', + command: () => { + this.copyIri(); + } + }, + { + label: 'Dereference', + icon: 'pi pi-link', + url: this.iri(), + target: '_blank' + }, + { + label: 'SPARQL', + icon: 'pi pi-share-alt', + url: this.sparqlConsoleUrl(), + target: '_blank' + }, + { + label: 'Graph Explorer', + icon: 'pi pi-compass', + url: this.graphExplorerUrl(), + target: '_blank' } - }, - { - label: 'Dereference', - icon: 'pi pi-link', - command: () => { - this.openDereference(); - } - }, - { - label: 'SPARQL', - icon: 'pi pi-share-alt', - command: () => { - this.openSparqlConsole(); - } - }, - { - label: 'Graph Explorer', - icon: 'pi pi-compass', - command: () => { - this.openGraphExplorer(); - } - } - ]; + ] + } public copyIri(): void { this.clipboard.copy(this.iri()); } - public openSparqlConsole(): void { + public sparqlConsoleUrl(): string { const query = ` PREFIX rdf: PREFIX rdfs: - + SELECT * WHERE { <${this.iri()}> ?p ?o . - } + } `; - const url = `${this.config.sparqlConsoleUrl}=${encodeURIComponent( + const params = new URLSearchParams({ + contentTypeConstruct: 'text/turtle', + contentTypeSelect: 'application/sparql-results+json', + endpoint: this.config.endpointUrl, + outputFormat: 'table', + requestMethod: 'POST', query - )}&contentTypeConstruct=text%2Fturtle&contentTypeSelect=application%2Fsparql-results%2Bjson&endpoint=https%3A%2F%2Fld.flux.zazuko.com%2Fquery&requestMethod=POST&tabTitle=Query+2&headers=%7B%7D&outputFormat=table`; - window.open(url, '_blank'); - } + }); + const url = new URL(this.config.sparqlConsoleUrl); + url.hash = '#' + params.toString(); - public openGraphExplorer(): void { - const url = `${this.config.graphExplorerUrl}=${encodeURIComponent(this.iri())}`; - window.open(url, '_blank'); + return url.toString() } - public openDereference(): void { - window.open(this.iri(), '_blank'); + public graphExplorerUrl(): string { + const url = new URL(this.config.graphExplorerUrl); + url.searchParams.set('resource', this.iri()); + return url.toString() } } From 2fbf0d3b52aed7b7355361c39ccfdd7202614dbe Mon Sep 17 00:00:00 2001 From: "Hofstetter Benjamin (extern)" Date: Mon, 18 Nov 2024 13:13:56 +0100 Subject: [PATCH 2/2] add template for menu options --- .../explore-header.component.html | 18 +++++++++++- .../explore-header.component.ts | 29 ++++++++++++------- 2 files changed, 36 insertions(+), 11 deletions(-) diff --git a/projects/blueprint/src/app/features/explore/explore-header/explore-header.component.html b/projects/blueprint/src/app/features/explore/explore-header/explore-header.component.html index c840693..52b8ddf 100644 --- a/projects/blueprint/src/app/features/explore/explore-header/explore-header.component.html +++ b/projects/blueprint/src/app/features/explore/explore-header/explore-header.component.html @@ -26,7 +26,23 @@

{{subjectLabel()}}

- + + + @if(item.url) { + + + {{ item.label }} + + } @else { + + + {{ item.label }} + + } + + +
diff --git a/projects/blueprint/src/app/features/explore/explore-header/explore-header.component.ts b/projects/blueprint/src/app/features/explore/explore-header/explore-header.component.ts index c9608a3..e47cb75 100644 --- a/projects/blueprint/src/app/features/explore/explore-header/explore-header.component.ts +++ b/projects/blueprint/src/app/features/explore/explore-header/explore-header.component.ts @@ -1,4 +1,4 @@ -import {Component, inject, input} from '@angular/core'; +import { Component, computed, inject, input } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Clipboard } from '@angular/cdk/clipboard'; @@ -8,6 +8,7 @@ import { ToastModule } from 'primeng/toast'; import { ButtonModule } from 'primeng/button'; import { MenuItem, MessageService } from 'primeng/api'; import { SkeletonModule } from 'primeng/skeleton'; +import { RippleModule } from 'primeng/ripple'; import { Avatar, AvatarComponent } from '../../../core/component/avatar/avatar.component'; @@ -20,12 +21,12 @@ import { LibraryConfigurationService } from '@blueprint/service/library-configur standalone: true, templateUrl: './explore-header.component.html', styleUrls: ['./explore-header.component.scss'], - imports: [CommonModule, MenuModule, ButtonModule, ToastModule, AvatarComponent, SkeletonModule], + imports: [CommonModule, MenuModule, ButtonModule, ToastModule, AvatarComponent, SkeletonModule, RippleModule], animations: [fadeIn], providers: [MessageService] }) export class ExploreHeaderComponent { - iri = input(''); + iri = input.required(); subjectLabel = input.required(); subjectClassLabel = input.required(); avatars = input.required(); @@ -35,35 +36,43 @@ export class ExploreHeaderComponent { public readonly config = inject(LibraryConfigurationService); public readonly clipboard = inject(Clipboard); - get items(): MenuItem[] { + + items = computed(() => { + const iri = this.iri(); return [ { label: 'Copy IRI', icon: 'pi pi-copy', command: () => { this.copyIri(); - } + }, + tabindex: '-1', }, { label: 'Dereference', icon: 'pi pi-link', - url: this.iri(), - target: '_blank' + url: iri, + target: '_blank', + tabindex: '-1', }, { label: 'SPARQL', icon: 'pi pi-share-alt', url: this.sparqlConsoleUrl(), - target: '_blank' + target: '_blank', + visible: this.config.sparqlConsoleUrl !== null, + tabindex: '-1', }, { label: 'Graph Explorer', icon: 'pi pi-compass', url: this.graphExplorerUrl(), - target: '_blank' + target: '_blank', + tabindex: '-1', } ] - } + }); + public copyIri(): void { this.clipboard.copy(this.iri());