demo.web: initial version of the root node viewer

demos/web/angular-model-browser/src/app/editor.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { SRootNode } from '../../../../../mps-cli-ts/src/model/snode';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EditorService {
+
+  private rootNodeSource = new BehaviorSubject<SRootNode | undefined>(undefined);
+  currentRootNode = this.rootNodeSource.asObservable();
+
+  changeRootNode(rootNode : SRootNode) {
+    this.rootNodeSource.next(rootNode)
+  }
+}

demos/web/angular-model-browser/src/app/node-viewer/node-viewer.component.html

@@ -0,0 +1,22 @@
+<section *ngIf="node != undefined">
+    <p>node: {{ node!.getProperty("name") === undefined ? "" : node!.getProperty("name") }} ({{ node!.myConcept.name }})</p>
+    <ul class="px-2 list-disc list-inside">
+        <li>properties:</li>
+        <ul class="px-4 list-disc list-inside" *ngFor="let prop of propertiesKeys()">
+            <li> {{ prop[0].name }} :: {{ prop[1] }} </li>
+        </ul>
+    </ul>
+    <ul class="px-2 list-disc list-inside">
+        <li>references:</li>
+        <ul class="px-4 list-disc list-inside" *ngFor="let ref of referencesKeys()">
+            <li> {{ ref[0].name }} :: {{ ref[1] }} </li>
+        </ul>
+    </ul>
+    <ul class="px-2 list-disc list-inside">
+        <li>children: {{childrenKeys().length}}</li>
+        <ul class="px-4 list-disc list-inside" *ngFor="let ref of childrenKeys()">
+            <li> {{ ref.name }} : </li> 
+            <app-node-viewer *ngFor="let child of children(ref)" [node]="child"></app-node-viewer>
+        </ul>
+    </ul>
+</section>

demos/web/angular-model-browser/src/app/node-viewer/node-viewer.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input } from '@angular/core';
+import { SNode } from '../../../../../../mps-cli-ts/src/model/snode';
+import { NgFor, NgIf } from '@angular/common';
+import { SChildLink, SProperty, SReferenceLink } from '../../../../../../mps-cli-ts/src/model/sconcept';
+
+@Component({
+  selector: 'app-node-viewer',
+  standalone: true,
+  imports: [ NgFor, NgIf ],
+  templateUrl: './node-viewer.component.html',
+  styleUrl: './node-viewer.component.css'
+})
+export class NodeViewerComponent {
+  @Input() node : SNode | undefined;
+
+  propertiesKeys() {
+    return Array.from(this.node!.properties)
+  }
+
+  referencesKeys() {
+    return Array.from(this.node!.links).filter(it => it instanceof SReferenceLink)
+  }
+
+  childrenKeys() {
+    return Array.from(this.node!.links.keys()).filter(it => it instanceof SChildLink)
+  }
+
+  children(link : SChildLink) : SNode[] {
+    let myChildren = this.node?.links.get(link)!;
+    return myChildren.filter(it => it instanceof SNode) as SNode[]
+  }
+
+  //key! : SProperty;
+  //value! : string;
+}

demos/web/angular-model-browser/src/app/repository/repository.component.html

@@ -8,7 +8,7 @@
         </form>
         <ul class="list-disc list-inside"><app-module *ngFor="let module of modules" [module]="module"></app-module></ul>
     </section>    
-    <section class="border-8 grid-span-3 grow">
+    <section class="border-8 col-span-3">
         HELLOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
         <app-root-node-editor> </app-root-node-editor>
     </section>

demos/web/angular-model-browser/src/app/repository/repository.component.ts

@@ -3,11 +3,12 @@ import { ModuleComponent } from '../module/module.component';
 import { SAbstractModule, SSolution } from '../../../../../../mps-cli-ts/src/model/smodule';
 import { NgFor } from '@angular/common';
 import axios, { AxiosResponse } from 'axios';
+import { RootNodeEditorComponent } from '../root-node-editor/root-node-editor.component';
 
 @Component({
   selector: 'app-repository',
   standalone: true,
-  imports: [ ModuleComponent, NgFor ],
+  imports: [ ModuleComponent, NgFor, RootNodeEditorComponent ],
   templateUrl: './repository.component.html',
   styleUrl: './repository.component.css'
 })

demos/web/angular-model-browser/src/app/root-node-editor/root-node-editor.component.html

@@ -0,0 +1,2 @@
+<p>Root: {{ viewedRootNode === undefined ? "No Node Selected" : viewedRootNode.getProperty("name") }}</p>
+<app-node-viewer [node]="this.viewedRootNode"></app-node-viewer>

demos/web/angular-model-browser/src/app/root-node-editor/root-node-editor.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { SNode, SRootNode } from '../../../../../../mps-cli-ts/src/model/snode';
+import { EditorService } from '../editor.service';
+import { Subscription } from 'rxjs';
+import { NodeViewerComponent } from '../node-viewer/node-viewer.component';
+
+@Component({
+  selector: 'app-root-node-editor',
+  standalone: true,
+  imports: [ NodeViewerComponent ],
+  templateUrl: './root-node-editor.component.html',
+  styleUrl: './root-node-editor.component.css'
+})
+export class RootNodeEditorComponent implements OnInit, OnDestroy {
+
+  viewedRootNode : SRootNode | undefined;
+  subscription! : Subscription;
+
+  constructor(public editorService : EditorService) {}
+
+  ngOnInit() {
+    this.subscription = this.editorService.currentRootNode.subscribe(rootNode => this.viewedRootNode = rootNode)
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+
+}

demos/web/angular-model-browser/src/app/root-node/root-node.component.html

@@ -1,2 +1,2 @@
 
-<li>root: {{ rootNode.getProperty("name") }}</li>
+<li>root: {{ rootNode.getProperty("name") }} <button class="btn" (click)="openRootNode()">Open</button></li>

demos/web/angular-model-browser/src/app/root-node/root-node.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { SRootNode } from '../../../../../../mps-cli-ts/src/model/snode';
+import { EditorService } from '../editor.service';
 
 @Component({
   selector: 'app-root-node',
@@ -9,4 +10,10 @@ import { SRootNode } from '../../../../../../mps-cli-ts/src/model/snode';
 })
 export class RootNodeComponent {
   @Input() rootNode! : SRootNode
+
+  constructor(private editorService : EditorService) {}
+
+  openRootNode() {
+    this.editorService.changeRootNode(this.rootNode)
+  }
 }