Specify uri from data in pos-rich-link

core/CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- `Thing.reverseRelations()`: Now takes optional predicate to filter by
+
 ## 0.17.0
 
 ### Changed

core/src/thing/Thing.reverseRelations.spec.ts

@@ -142,5 +142,30 @@ describe("Thing", function () {
         },
       ]);
     });
+
+    it("only follows the given predicate if provided", () => {
+      const store = graph();
+      const uri = "https://jane.doe.example/container/file.ttl#fragment";
+      store.add(
+        sym("https://pod.example/first"),
+        sym("http://vocab.test/first"),
+
+        sym(uri),
+      );
+      store.add(
+        sym("https://pod.example/second"),
+        sym("http://vocab.test/second"),
+        sym(uri),
+      );
+      const it = new Thing(uri, store);
+      const result = it.reverseRelations("http://vocab.test/first");
+      expect(result).toEqual([
+        {
+          predicate: "http://vocab.test/first",
+          label: "first",
+          uris: ["https://pod.example/first"],
+        },
+      ]);
+    });
   });
 });

core/src/thing/Thing.ts

@@ -89,10 +89,10 @@ export class Thing {
     }));
   }
 
-  reverseRelations(): Relation[] {
+  reverseRelations(predicate?: string): Relation[] {
     const statements = this.store.statementsMatching(
       undefined,
-      undefined,
+      predicate ? sym(predicate) : null,
       sym(this.uri),
     );
 

docs/elements/apps/pos-app-browser/readme.md

@@ -7,10 +7,10 @@
 
 ## Properties
 
-| Property                 | Attribute                  | Description                                                                                                                                                                           | Type                    | Default        |
-| ------------------------ | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -------------- |
-| `mode`                   | `mode`                     | The mode the app is running in:  - standalone:  use this when you deploy it as a standalone web application - pod: use this when you host this app as a default interface for you pod | `"pod" \| "standalone"` | `'standalone'` |
-| `restorePreviousSession` | `restore-previous-session` |                                                                                                                                                                                       | `boolean`               | `false`        |
+| Property                 | Attribute                  | Description                                                                                                                                                                          | Type                    | Default        |
+| ------------------------ | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- | -------------- |
+| `mode`                   | `mode`                     | The mode the app is running in:  - standalone: use this when you deploy it as a standalone web application - pod: use this when you host this app as a default interface for you pod | `"pod" \| "standalone"` | `'standalone'` |
+| `restorePreviousSession` | `restore-previous-session` |                                                                                                                                                                                      | `boolean`               | `false`        |
 
 
 ## Dependencies
@@ -55,9 +55,9 @@ graph TD;
   pos-make-findable --> pos-label
   pos-resource --> ion-progress-bar
   ion-searchbar --> ion-icon
-  pos-rich-link --> pos-resource
   pos-rich-link --> pos-label
   pos-rich-link --> pos-description
+  pos-rich-link --> pos-resource
   pos-login --> pos-resource
   pos-login --> pos-picture
   pos-login --> pos-label

docs/elements/apps/pos-app-dashboard/pos-example-resources/readme.md

@@ -16,9 +16,9 @@
 ```mermaid
 graph TD;
   pos-example-resources --> pos-rich-link
-  pos-rich-link --> pos-resource
   pos-rich-link --> pos-label
   pos-rich-link --> pos-description
+  pos-rich-link --> pos-resource
   pos-resource --> ion-progress-bar
   pos-app-dashboard --> pos-example-resources
   style pos-example-resources fill:#f9f,stroke:#333,stroke-width:4px

docs/elements/apps/pos-app-dashboard/readme.md

@@ -19,9 +19,9 @@ graph TD;
   pos-app-dashboard --> pos-getting-started
   pos-app-dashboard --> pos-example-resources
   pos-example-resources --> pos-rich-link
-  pos-rich-link --> pos-resource
   pos-rich-link --> pos-label
   pos-rich-link --> pos-description
+  pos-rich-link --> pos-resource
   pos-resource --> ion-progress-bar
   pos-internal-router --> pos-app-dashboard
   style pos-app-dashboard fill:#f9f,stroke:#333,stroke-width:4px

docs/elements/apps/pos-app-generic/readme.md

@@ -39,9 +39,9 @@ graph TD;
   pos-add-literal-value --> pos-select-term
   pos-relations --> pos-predicate
   pos-relations --> pos-rich-link
-  pos-rich-link --> pos-resource
   pos-rich-link --> pos-label
   pos-rich-link --> pos-description
+  pos-rich-link --> pos-resource
   pos-resource --> ion-progress-bar
   pos-reverse-relations --> pos-predicate
   pos-reverse-relations --> pos-rich-link

docs/elements/apps/pos-app-ldp-container/readme.md

@@ -28,9 +28,9 @@ graph TD;
   pos-resource --> ion-progress-bar
   pos-container-item --> ion-icon
   pos-subjects --> pos-rich-link
-  pos-rich-link --> pos-resource
   pos-rich-link --> pos-label
   pos-rich-link --> pos-description
+  pos-rich-link --> pos-resource
   pos-type-badges --> ion-badge
   pos-type-badges --> ion-icon
   pos-literals --> pos-predicate

docs/elements/apps/pos-app-rdf-document/readme.md

@@ -22,9 +22,9 @@ graph TD;
   pos-app-rdf-document --> pos-type-badges
   pos-app-rdf-document --> pos-literals
   pos-subjects --> pos-rich-link
-  pos-rich-link --> pos-resource
   pos-rich-link --> pos-label
   pos-rich-link --> pos-description
+  pos-rich-link --> pos-resource
   pos-resource --> ion-progress-bar
   pos-type-badges --> ion-badge
   pos-type-badges --> ion-icon

docs/elements/components/pos-internal-router/readme.md

@@ -29,9 +29,9 @@ graph TD;
   pos-app-dashboard --> pos-getting-started
   pos-app-dashboard --> pos-example-resources
   pos-example-resources --> pos-rich-link
-  pos-rich-link --> pos-resource
   pos-rich-link --> pos-label
   pos-rich-link --> pos-description
+  pos-rich-link --> pos-resource
   pos-resource --> ion-progress-bar
   pos-app-browser --> pos-internal-router
   style pos-internal-router fill:#f9f,stroke:#333,stroke-width:4px

docs/elements/components/pos-navigation-bar/readme.md

@@ -42,9 +42,9 @@ graph TD;
   pos-make-findable --> pos-label
   pos-resource --> ion-progress-bar
   ion-searchbar --> ion-icon
-  pos-rich-link --> pos-resource
   pos-rich-link --> pos-label
   pos-rich-link --> pos-description
+  pos-rich-link --> pos-resource
   pos-app-browser --> pos-navigation-bar
   style pos-navigation-bar fill:#f9f,stroke:#333,stroke-width:4px
 ```

docs/elements/components/pos-relations/readme.md

@@ -29,9 +29,9 @@ graph TD;
   pos-relations --> pos-predicate
   pos-relations --> pos-rich-link
   pos-predicate --> ion-icon
-  pos-rich-link --> pos-resource
   pos-rich-link --> pos-label
   pos-rich-link --> pos-description
+  pos-rich-link --> pos-resource
   pos-resource --> ion-progress-bar
   pos-app-generic --> pos-relations
   style pos-relations fill:#f9f,stroke:#333,stroke-width:4px

docs/elements/components/pos-reverse-relations/readme.md

@@ -29,9 +29,9 @@ graph TD;
   pos-reverse-relations --> pos-predicate
   pos-reverse-relations --> pos-rich-link
   pos-predicate --> ion-icon
-  pos-rich-link --> pos-resource
   pos-rich-link --> pos-label
   pos-rich-link --> pos-description
+  pos-rich-link --> pos-resource
   pos-resource --> ion-progress-bar
   pos-app-generic --> pos-reverse-relations
   style pos-reverse-relations fill:#f9f,stroke:#333,stroke-width:4px

docs/elements/components/pos-rich-link/readme.md

@@ -7,16 +7,20 @@
 
 ## Properties
 
-| Property | Attribute | Description | Type     | Default     |
-| -------- | --------- | ----------- | -------- | ----------- |
-| `uri`    | `uri`     |             | `string` | `undefined` |
+| Property | Attribute | Description                                                                               | Type     | Default     |
+| -------- | --------- | ----------------------------------------------------------------------------------------- | -------- | ----------- |
+| `rel`    | `rel`     | Link will be obtained by following the predicate with this URI forward from a resource    | `string` | `undefined` |
+| `rev`    | `rev`     | Link will be obtained by following the predicate with this URI in reverse from a resource | `string` | `undefined` |
+| `uri`    | `uri`     | Link will use this URI                                                                    | `string` | `undefined` |
 
 
 ## Events
 
-| Event         | Description | Type               |
-| ------------- | ----------- | ------------------ |
-| `pod-os:link` |             | `CustomEvent<any>` |
+| Event             | Description | Type               |
+| ----------------- | ----------- | ------------------ |
+| `pod-os:error`    |             | `CustomEvent<any>` |
+| `pod-os:link`     |             | `CustomEvent<any>` |
+| `pod-os:resource` |             | `CustomEvent<any>` |
 
 
 ## Dependencies
@@ -31,16 +35,16 @@
 
 ### Depends on
 
-- [pos-resource](../pos-resource)
 - [pos-label](../pos-label)
 - [pos-description](../pos-description)
+- [pos-resource](../pos-resource)
 
 ### Graph
 ```mermaid
 graph TD;
-  pos-rich-link --> pos-resource
   pos-rich-link --> pos-label
   pos-rich-link --> pos-description
+  pos-rich-link --> pos-resource
   pos-resource --> ion-progress-bar
   pos-example-resources --> pos-rich-link
   pos-navigation-bar --> pos-rich-link

docs/elements/components/pos-subjects/readme.md

@@ -27,9 +27,9 @@
 ```mermaid
 graph TD;
   pos-subjects --> pos-rich-link
-  pos-rich-link --> pos-resource
   pos-rich-link --> pos-label
   pos-rich-link --> pos-description
+  pos-rich-link --> pos-resource
   pos-resource --> ion-progress-bar
   pos-app-ldp-container --> pos-subjects
   pos-app-rdf-document --> pos-subjects

elements/CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+### Changed
+
+- [pos-rich-link](../docs/elements/components/pos-rich-link):
+  - can now receive a resource to use for the link
+  - can now follow `rel` and `rev` to discover a resource to use for the link
+
 ### Fixed
 
 - [pos-app-browser](../docs/elements/apps/pos-app-browser): prevent error message flashing up while uri is unset on hard refresh

elements/src/components.d.ts

@@ -121,7 +121,18 @@ export namespace Components {
     interface PosReverseRelations {
     }
     interface PosRichLink {
-        "uri": string;
+        /**
+          * Link will be obtained by following the predicate with this URI forward from a resource
+         */
+        "rel"?: string;
+        /**
+          * Link will be obtained by following the predicate with this URI in reverse from a resource
+         */
+        "rev"?: string;
+        /**
+          * Link will use this URI
+         */
+        "uri"?: string;
     }
     /**
      * The responsibility of pos-router is to handle the `uri` query param, that specifies the URI of the resource that is currently opened.
@@ -724,6 +735,8 @@ declare global {
     };
     interface HTMLPosRichLinkElementEventMap {
         "pod-os:link": any;
+        "pod-os:resource": any;
+        "pod-os:error": any;
     }
     interface HTMLPosRichLinkElement extends Components.PosRichLink, HTMLStencilElement {
         addEventListener<K extends keyof HTMLPosRichLinkElementEventMap>(type: K, listener: (this: HTMLPosRichLinkElement, ev: PosRichLinkCustomEvent<HTMLPosRichLinkElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1066,7 +1079,20 @@ declare namespace LocalJSX {
         "onPod-os:resource"?: (event: PosReverseRelationsCustomEvent<any>) => void;
     }
     interface PosRichLink {
+        "onPod-os:error"?: (event: PosRichLinkCustomEvent<any>) => void;
         "onPod-os:link"?: (event: PosRichLinkCustomEvent<any>) => void;
+        "onPod-os:resource"?: (event: PosRichLinkCustomEvent<any>) => void;
+        /**
+          * Link will be obtained by following the predicate with this URI forward from a resource
+         */
+        "rel"?: string;
+        /**
+          * Link will be obtained by following the predicate with this URI in reverse from a resource
+         */
+        "rev"?: string;
+        /**
+          * Link will use this URI
+         */
         "uri"?: string;
     }
     /**