Allow recursive trees

package.json

@@ -21,16 +21,16 @@
     "url": "https://github.com/zazuko/blueprint/issues"
   },
   "dependencies": {
-    "@angular/animations": "^18.1.0",
-    "@angular/cdk": "^18.1.0",
-    "@angular/common": "^18.1.0",
-    "@angular/compiler": "^18.1.0",
-    "@angular/core": "^18.1.0",
-    "@angular/forms": "^18.1.0",
-    "@angular/platform-browser": "^18.1.0",
-    "@angular/platform-browser-dynamic": "^18.1.0",
-    "@angular/router": "^18.1.0",
-    "@angular/service-worker": "^18.1.0",
+    "@angular/animations": "^18.2.5",
+    "@angular/cdk": "^18.2.5",
+    "@angular/common": "^18.2.5",
+    "@angular/compiler": "^18.2.5",
+    "@angular/core": "^18.2.5",
+    "@angular/forms": "^18.2.5",
+    "@angular/platform-browser": "^18.2.5",
+    "@angular/platform-browser-dynamic": "^18.2.5",
+    "@angular/router": "^18.2.5",
+    "@angular/service-worker": "^18.2.5",
     "@fortawesome/fontawesome-free": "^6.5.2",
     "@rdfjs/formats": "^4.0.0",
     "@zazuko/env": "^2.2.0",
@@ -47,17 +47,17 @@
     "tslib": "^2.5.0",
     "util": "^0.12.5",
     "webcola": "^3.4.0",
-    "zone.js": "~0.14.3"
+    "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.1.0",
-    "@angular-eslint/builder": "18.1.0",
-    "@angular-eslint/eslint-plugin": "18.1.0",
-    "@angular-eslint/eslint-plugin-template": "18.1.0",
-    "@angular-eslint/schematics": "18.1.0",
-    "@angular-eslint/template-parser": "18.1.0",
-    "@angular/cli": "^18.1.0",
-    "@angular/compiler-cli": "^18.1.0",
+    "@angular-devkit/build-angular": "^18.2.5",
+    "@angular-eslint/builder": "18.3.1",
+    "@angular-eslint/eslint-plugin": "18.3.1",
+    "@angular-eslint/eslint-plugin-template": "18.3.1",
+    "@angular-eslint/schematics": "18.3.1",
+    "@angular-eslint/template-parser": "18.3.1",
+    "@angular/cli": "^18.2.5",
+    "@angular/compiler-cli": "^18.2.5",
     "@changesets/cli": "^2.27.7",
     "@types/clownface": "^2.0.7",
     "@types/jasmine": "~3.10.0",

projects/blueprint/src/app/core/component/avatar/avatar.component.ts

@@ -21,4 +21,5 @@ export interface Avatar {
   label: string;
   icon: string;
   color: string;
+  classIri: string;
 }

projects/blueprint/src/app/core/model/clownface-object/clownface-object.ts

@@ -18,6 +18,16 @@ export abstract class ClownfaceObject {
         return [...predicateSet];
     }
 
+    static logTable(node: GraphPointer): void {
+        console.table([...node.dataset.match(rdfEnvironment.namedNode(node.value))].map(quad => {
+            return {
+                subject: quad.subject.value,
+                predicate: quad.predicate.value,
+                object: quad.object.value
+            };
+        }));
+    }
+
     protected readonly _node: GraphPointer;
 
     /**
@@ -46,4 +56,11 @@ export abstract class ClownfaceObject {
     availablePredicates(): string[] {
         return ClownfaceObject.getPredicatesForNode(this._node);
     }
+
+    /**
+     * Logs the predicates of the node in the RDF graph to the console
+     */
+    logTable(): void {
+        ClownfaceObject.logTable(this._node);
+    }
 }

projects/blueprint/src/app/core/model/node-element/node-element.class.ts

@@ -151,7 +151,8 @@ export class NodeElement extends ClownfaceObject implements INodeElement {
                 return {
                     label: uiMetadata.label,
                     icon: uiMetadata.icon,
-                    color: uiMetadata.color
+                    color: uiMetadata.color,
+                    classIri: uiMetadata.targetNode.value
                 }
             })
         }

projects/blueprint/src/app/core/ontology/blueprint/blueprint.ts

@@ -1293,6 +1293,37 @@ class BlueprintOntology extends Ontology {
         return this.namespace('CompositionLinkResult');
     }
 
+
+    /**
+     * Get the hasColumn predicate.
+     * 
+     * @readonly
+     */
+    get hasColumn(): string {
+        return this.namespace('hasColumn').value;
+    }
+
+    /**
+     * Get the prefixed hasColumn predicate.
+     * 
+     * @readonly
+     */
+    get hasColumnPrefixed(): string {
+        return `${this.prefix()}:hasColumn`;
+    }
+
+    /**
+     * Get the hasColumn predicate as NamedNode.
+     * 
+     * @readonly
+     */
+    get hasColumnNamedNode(): NamedNode {
+        return this.namespace('hasColumn');
+    }
+
+
+
+
 }
 
 export const blueprint = new BlueprintOntology();

projects/blueprint/src/app/core/ontology/shacl/shacl.ts

@@ -397,6 +397,33 @@ class ShaclOntology extends Ontology {
         return this.namespace('PropertyGroup');
     }
 
+    /**
+     * Get the zeroOrMorePath predicate.
+     * 
+     * @readonly
+     */
+    get zeroOrMorePath(): string {
+        return this.namespace('zeroOrMorePath').value;
+    }
+
+    /**
+     * Get the prefixed zeroOrMorePath predicate.
+     * 
+     * @readonly
+     */
+    get zeroOrMorePathPrefixed(): string {
+        return `${this.prefix()}:zeroOrMorePath`;
+    }
+
+    /**
+     * Get the zeroOrMorePath predicate as NamedNode.
+     * 
+     * @readonly
+     */
+    get zeroOrMorePathNamedNode(): NamedNode {
+        return this.namespace('zeroOrMorePath');
+    }
+
 }
 
 export const shacl = new ShaclOntology();

projects/blueprint/src/app/core/service/ui-config/ui-detail/model/ui-detail-configuration-element.ts

@@ -6,6 +6,7 @@ export interface UiDetailConfigurationElement {
     label: string;
     iri: string;
     order: number;
+    path: string;
 }
 
 export class RdfDetailConfigurationElement implements UiDetailConfigurationElement {
@@ -60,13 +61,21 @@ export class RdfDetailConfigurationElement implements UiDetailConfigurationEleme
         return this._renderLiteralAs;
     }
 
+    get renderLiteralAsNode(): string {
+        return this._node.out(blueprint.showAsNamedNode).value;
+    }
+
     get order(): number {
         if (this._order === null) {
             this._order = Number(this._node.out(shacl.orderNamedNode).value);
         }
         return this._order;
     }
 
+    get path(): string {
+        return this._node.out(shacl.pathNamedNode).value;
+    }
+
     getSparqlDetailQueryForSubject(subjectIri: string): string {
         const path = this._node.out(shacl.pathNamedNode).value;
         const label = this.label;

projects/blueprint/src/app/core/ui-view/view-component-library/aggregate-relation/aggregate-relation.component.scss

@@ -12,6 +12,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    padding-top: 10px;
+    padding-bottom: 10px;
 
     .this-box {
         display: flex;
@@ -22,6 +24,8 @@
         margin-top: 10px;
         margin-bottom: 10px;
         height: 100%;
+        border: 1px dashed lightgrey;
+        border-radius: 5px;
 
         bp-avatar {
             margin-bottom: 10px;
@@ -36,20 +40,9 @@
             align-items: flex-start;
             justify-content: center;
         }
-
-        // a nice dashed lightgrey border with round corners
-        border: 1px dashed lightgrey;
-        border-radius: 5px;
     }
-
-    padding-top: 10px;
-    padding-bottom: 10px;
-
-
 }
 
-
-
 .arrow {
     width: 100px;
     display: flex;
@@ -77,15 +70,6 @@
     align-items: center;
     justify-content: stretch;
     width: 100%;
-
-    .text {
-        margin-left: 10px;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: center;
-    }
-
     // a nice dashed lightgrey border with round corners
     border: 1px dashed lightgrey;
     border-radius: 5px;
@@ -95,6 +79,16 @@
     padding-bottom: 20px;
     margin: 10px;
 
+    &.text {
+        margin-left: 10px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+    }
+
+
+
 
 }
 

projects/blueprint/src/app/core/ui-view/view-component-library/hierarchy/hierarchy.component.html

@@ -7,7 +7,7 @@ <h3>{{label}}</h3>
             <div class="row">
 
                 <bp-avatar size="normal" shape="square"
-                    [avatars]="[{label:'',icon: element.icon, color: element.color}]" />
+                    [avatars]="[{label:'',icon: element.icon, color: element.color, classIri: element.classIri}]" />
             </div>
             <div class="line"></div>
         </div>
@@ -19,7 +19,8 @@ <h3>{{label}}</h3>
 
         } @else {
         <div class="el"></div>
-        <bp-avatar size="normal" shape="circle" [avatars]="[{label:'',icon: element.icon, color: element.color}]" />
+        <bp-avatar size="normal" shape="circle"
+            [avatars]="[{label:'',icon: element.icon, color: element.color, classIri: element.classIri}]" />
 
         <div [pTooltip]="element.label" class="label-container last">
             <div class="label">{{element.label}}</div>

projects/blueprint/src/app/core/ui-view/view-component-library/tree-view/model/tree-node.model.ts

@@ -0,0 +1,32 @@
+import { Avatar } from "@blueprint/component/avatar/avatar.component";
+import { NodeElement } from "@blueprint/model/node-element/node-element.class";
+import { blueprint } from "@blueprint/ontology";
+import { GraphPointer } from "clownface";
+
+
+export interface TreeNode {
+    label: string;
+    secondaryLabel: string;
+    avatars: Avatar[];
+    children: TreeNode[];
+}
+
+
+export class RdfTreeNode extends NodeElement implements TreeNode {
+    #_children: TreeNode[] | null = null;
+
+    constructor(node: GraphPointer) {
+        super(node);
+    }
+
+    get secondaryLabel(): string {
+        return this.classLabel.join(', ');
+    }
+
+    get children(): TreeNode[] {
+        if (this.#_children === null) {
+            this.#_children = this._node.out(blueprint.ChildNamedNode).map(n => new RdfTreeNode(n)) as TreeNode[];
+        }
+        return this.#_children;
+    }
+}