Merge pull request #45 from zazuko/menu-links

fix: better resource links
zazuko · Nov 18, 2024 · cb98b58 · cb98b58
2 parents 612aaa3 + 2fbf0d3
commit cb98b58
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 66 deletions.
diff --git a/.changeset/lemon-ties-carry.md 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
@@ -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
@@ -103,27 +103,6 @@ export class DetailsComponent implements OnDestroy, AfterViewInit {
       });
   }
 
-  toSparqlQuery(iri: string): string {
-    const query = `
-PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
-PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
-    
-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
@@ -26,7 +26,23 @@ <h1 class="title">{{subjectLabel()}}</h1>
     </div>
     <div>
         <p-toast></p-toast>
-        <p-menu #menu [model]="items" [popup]="true"></p-menu>
+        <p-menu #menu [model]="items()" [popup]="true">
+            <ng-template pTemplate="item" let-item>
+                @if(item.url) {
+                <a pRipple [href]="item.url" target="_blank" class="p-menuitem-link" [tabIndex]="item.tabIndex">
+                    <span class="p-menuitem-icon" [class]="item.icon"></span>
+                    <span class="ml-2">{{ item.label }}</span>
+                </a>
+                } @else {
+                <a pRipple class="flex align-items-center p-menuitem-link" (click)="item.command"
+                    [tabindex]="item.tabindex" (keyup.enter)="item.command">
+                    <span class="p-menuitem-icon" [class]="item.icon"></span>
+                    <span class="ml-2">{{ item.label }}</span>
+                </a>
+                }
+            </ng-template>
+
+        </p-menu>
         <p-button icon="pi pi-ellipsis-v" (click)="menu.toggle($event)" [rounded]="true" [outlined]="true"></p-button>
     </div>
 

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
@@ -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<string>('');
+  iri = input.required<string>();
   subjectLabel = input.required<string>();
   subjectClassLabel = input.required<string>();
   avatars = input.required<Avatar[]>();
@@ -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<MenuItem[]>(() => {
+    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: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
     PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
-        
+
     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()
   }
 }