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.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 31a0e59..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,64 +36,76 @@ 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(); - } - }, - { - 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(); + + 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: iri, + target: '_blank', + tabindex: '-1', + }, + { + label: 'SPARQL', + icon: 'pi pi-share-alt', + url: this.sparqlConsoleUrl(), + target: '_blank', + visible: this.config.sparqlConsoleUrl !== null, + tabindex: '-1', + }, + { + label: 'Graph Explorer', + icon: 'pi pi-compass', + url: this.graphExplorerUrl(), + target: '_blank', + tabindex: '-1', } - } - ]; + ] + }); + 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() } }