fix: tree view aas-table updated

FraunhoferIOSB · Apr 11, 2024 · da29833 · da29833
1 parent dbe36d4
commit da29833
Show file tree

Hide file tree

Showing 14 changed files with 201 additions and 140 deletions.
diff --git a/projects/aas-lib/src/lib/aas-table/aas-table.component.html b/projects/aas-lib/src/lib/aas-table/aas-table.component.html
@@ -99,7 +99,7 @@
                     <div class="d-flex" style="overflow-x: hidden">
                         <div [ngStyle]="{'width': (row.level * 16) + 'px'}"></div>
                         @if (row.isLeaf) {
-                        <div class="text-muted wh-4"></div>
+                        <div class="wh-4"></div>
                         }@else {
                             @if (row.expanded) {
                             <a href="javascript:void(0);" (click)="collapse(row)">

diff --git a/projects/aas-lib/src/lib/aas-table/aas-table.component.ts b/projects/aas-lib/src/lib/aas-table/aas-table.component.ts
@@ -29,7 +29,8 @@ export class AASTableComponent implements OnInit, OnChanges, OnDestroy {
     private readonly store: Store<AASTableFeatureState>;
     private readonly subscription: Subscription = new Subscription();
     private _selected: AASDocument[] = [];
-    private _filter: Observable<string> | null = null;
+    private filter$: Observable<string> | null = null;
+    private filterSubscription?: Subscription;
     private shiftKey = false;
     private altKey = false;
 
@@ -72,17 +73,20 @@ export class AASTableComponent implements OnInit, OnChanges, OnDestroy {
 
     @Input()
     public get filter(): Observable<string> | null {
-        return this._filter;
+        return this.filter$;
     }
 
     public set filter(value: Observable<string> | null) {
-        if (value !== this._filter) {
-            this._filter = value;
-            if (this._filter) {
-                this.subscription.add(
-                    this._filter.subscribe(value => this.store.dispatch(AASTableActions.setFilter({ filter: value }))),
-                );
-            }
+        if (this.filterSubscription) {
+            this.filterSubscription.unsubscribe();
+            this.filterSubscription = undefined;
+        }
+
+        this.filter$ = value;
+        if (value) {
+            this.filterSubscription = value.subscribe(value =>
+                this.store.dispatch(AASTableActions.setFilter({ filter: value })),
+            );
         }
     }
 
@@ -130,6 +134,7 @@ export class AASTableComponent implements OnInit, OnChanges, OnDestroy {
 
     public ngOnDestroy(): void {
         this.subscription.unsubscribe();
+        this.filterSubscription?.unsubscribe();
         this.window.removeEventListener('keyup', this.keyup);
         this.window.removeEventListener('keydown', this.keydown);
     }

diff --git a/projects/aas-lib/src/lib/aas-table/aas-table.effects.ts b/projects/aas-lib/src/lib/aas-table/aas-table.effects.ts
@@ -83,7 +83,7 @@ export class AASTableEffects {
     }
 
     private addRoot(nodes: AASDocument[], rows: AASTableRow[]): AASTableRow[] {
-        const root = nodes.find(node => node.parent === null);
+        const root = nodes.find(node => !node.parentId);
         const index = findLastIndex(rows, row => row.level === 0);
         if (root) {
             const children = nodes.filter(node => this.isChild(root, node));
@@ -107,48 +107,55 @@ export class AASTableEffects {
                 rows[index] = previous;
             }
 
-            this.traverse(root, nodes, rows, 1);
+            this.traverse(root, nodes, rows, 0, 1);
         }
 
         return rows;
     }
 
-    private traverse(parent: AASDocument, nodes: AASDocument[], rows: AASTableRow[], level: number): void {
+    private traverse(
+        parent: AASDocument,
+        nodes: AASDocument[],
+        rows: AASTableRow[],
+        parentIndex: number,
+        level: number,
+    ): void {
         let previous: AASTableRow | null = null;
         const children = nodes.filter(node => this.isChild(parent, node));
         for (const child of children) {
             const row = new AASTableRow(
                 child,
-                rows.length - 1,
+                parentIndex,
                 false,
                 false,
                 false,
-                children.length === 0,
+                !nodes.some(node => this.isChild(child, node)),
                 level,
                 -1,
                 -1,
             );
 
+            const index = rows.length;
             rows.push(row);
             if (previous) {
-                previous.nextSibling = rows.length - 1;
+                previous.nextSibling = index;
             }
 
             if (children.length > 0) {
                 row.firstChild = rows.length;
-                this.traverse(child, nodes, rows, level + 1);
+                this.traverse(child, nodes, rows, index, level + 1);
             }
 
             previous = row;
         }
     }
 
     private isChild(parent: AASDocument, node: AASDocument): boolean {
-        if (!node.parent) {
+        if (!node.parentId) {
             return false;
         }
 
-        return node.parent.endpoint === parent.endpoint && node.parent.id === parent.id;
+        return node.parentId === parent.id;
     }
 
     private clone(row: AASTableRow): AASTableRow {

diff --git a/projects/aas-lib/src/lib/aas-table/aas-table.selectors.ts b/projects/aas-lib/src/lib/aas-table/aas-table.selectors.ts
@@ -8,7 +8,7 @@
 
 import { createSelector } from '@ngrx/store';
 import { AASDocument } from 'common';
-import { AASTableRow, AASTableFeatureState } from './aas-table.state';
+import { AASTableRow, AASTableFeatureState, AASTableTree } from './aas-table.state';
 import { TranslateService } from '@ngx-translate/core';
 import { AASTableFilter } from './aas-table.filter';
 
@@ -31,11 +31,15 @@ export const selectEverySelected = createSelector(getRows, (rows: AASTableRow[])
 
 export const selectRows = (translate: TranslateService) => {
     return createSelector(getState, state => {
-        if (state.filter) {
-            const filter = new AASTableFilter(state.filter, translate.currentLang);
-            return state.rows.filter(row => filter.match(row.document));
+        if (state.viewMode === 'list') {
+            if (state.filter) {
+                const filter = new AASTableFilter(state.filter, translate.currentLang);
+                return state.rows.filter(row => filter.match(row.document));
+            }
+
+            return state.rows;
+        } else {
+            return new AASTableTree(state.rows).expanded;
         }
-
-        return state.rows;
     });
 };
diff --git a/projects/aas-lib/src/lib/aas-tree/aas-tree.component.html b/projects/aas-lib/src/lib/aas-tree/aas-tree.component.html
@@ -126,12 +126,3 @@
         }
     </tbody>
 </table>
-
-<!--                    
-
-@case('boolean') {
-    <input class="form-check-input" [readonly]="true" [checked]="getValue(node)">
-}
-@case ('url') {
-<a href="javascript:void(0);" class="text-nowrap me-2" (click)="open(node)">{{node.value}}</a>
-} -->
diff --git a/projects/aas-lib/src/lib/aas-tree/aas-tree.state.ts b/projects/aas-lib/src/lib/aas-tree/aas-tree.state.ts
@@ -212,6 +212,8 @@ class TreeInitialize {
 
     private getChildren(referable: aas.Referable): aas.Referable[] {
         switch (referable.modelType) {
+            case 'AnnotatedRelationshipElement':
+                return (referable as aas.AnnotatedRelationshipElement).annotations ?? [];
             case 'AssetAdministrationShell': {
                 const shell = referable as aas.AssetAdministrationShell;
                 const children: aas.Referable[] = [];
@@ -226,14 +228,14 @@ class TreeInitialize {
 
                 return children;
             }
+            case 'Entity':
+                return (referable as aas.Entity).statements ?? [];
             case 'Submodel':
                 return (referable as aas.Submodel).submodelElements ?? [];
             case 'SubmodelElementCollection':
                 return (referable as aas.SubmodelElementCollection).value ?? [];
             case 'SubmodelElementList':
                 return (referable as aas.SubmodelElementList).value ?? [];
-            case 'Entity':
-                return (referable as aas.Entity).statements ?? [];
             default:
                 return [];
         }

diff --git a/projects/aas-portal/src/app/about/about.component.html b/projects/aas-portal/src/app/about/about.component.html
@@ -10,7 +10,7 @@
     <h1>AASPortal</h1>
     <p>The AASPortal is a web portal for the visualization and management of Asset Administration Shells (AAS) licensed under the Apache License 2.0.</p>
     <p>The implementation uses the concepts of the document "Details of the Asset Administration Shell" published on www.plattform-i40.de which is licensed under Creative Commons CC BY 4.0.</p>
-    <p>Copyright (c) 2019-2023 Fraunhofer IOSB-INA Lemgo, eine rechtlich nicht selbstaendige Einrichtung der Fraunhofer-Gesellschaft
+    <p>Copyright (c) 2019-2024 Fraunhofer IOSB-INA Lemgo, eine rechtlich nicht selbstaendige Einrichtung der Fraunhofer-Gesellschaft
 zur Foerderung der angewandten Forschung e.V.</p>
     <p>
         <span>Internet:&nbsp;</span><a [href]="homepage" target="_blank">{{homepage}}</a><br>

diff --git a/projects/aas-portal/src/app/start/favorites.service.ts b/projects/aas-portal/src/app/start/favorites.service.ts
@@ -15,33 +15,35 @@ import { AuthService } from 'aas-lib';
     providedIn: 'root',
 })
 export class FavoritesService {
-    private _lists: FavoritesList[];
+    private _lists?: FavoritesList[];
 
-    public constructor(private readonly auth: AuthService) {
-        const value = auth.getCookie('.Favorites');
-        this._lists = value ? JSON.parse(value) : [];
-    }
+    public constructor(private readonly auth: AuthService) {}
 
     public get lists(): FavoritesList[] {
+        if (!this._lists) {
+            const value = this.auth.getCookie('.Favorites');
+            this._lists = value ? (JSON.parse(value) as FavoritesList[]) : [];
+        }
+
         return this._lists;
     }
 
     public has(name: string): boolean {
-        return this._lists.some(list => list.name === name);
+        return this.lists.some(list => list.name === name);
     }
 
     public get(name: string): FavoritesList | undefined {
-        return this._lists.find(list => list.name === name);
+        return this.lists.find(list => list.name === name);
     }
 
     public delete(name: string): void {
-        this._lists = this._lists.filter(list => list.name !== name);
+        this._lists = this.lists.filter(list => list.name !== name);
         this.auth.setCookie('.Favorites', JSON.stringify(this._lists));
     }
 
     public add(documents: AASDocument[], name: string, newName?: string): void {
-        const i = this._lists.findIndex(list => list.name === name);
-        const lists = [...this._lists];
+        const i = this.lists.findIndex(list => list.name === name);
+        const lists = [...this.lists];
         let list: FavoritesList;
         if (i < 0) {
             list = { name, documents: [] };
@@ -66,7 +68,7 @@ export class FavoritesService {
     }
 
     public remove(documents: AASDocument[], name: string): void {
-        const i = this._lists.findIndex(list => list.name === name);
+        const i = this.lists.findIndex(list => list.name === name);
         if (i < 0) return;
 
         const lists = [...this.lists];

diff --git a/projects/aas-portal/src/app/start/start.selectors.ts b/projects/aas-portal/src/app/start/start.selectors.ts
@@ -11,14 +11,13 @@ import { StartFeatureState } from './start.state';
 import { ViewMode } from 'aas-lib';
 
 const getState = (state: StartFeatureState) => state.start;
-const getFilter = (state: StartFeatureState) => state.start.filter;
 const getViewMode = (state: StartFeatureState) => state.start.viewMode;
 const getLimit = (state: StartFeatureState) => state.start.limit;
 const getDocuments = (state: StartFeatureState) => state.start.documents;
 
 export const selectState = createSelector(getState, state => state);
 
-export const selectFilter = createSelector(getFilter, filter => filter);
+export const selectFilter = createSelector(getState, state => (state.favorites === '-' ? '' : state.filter));
 
 export const selectViewMode = createSelector(getViewMode, viewMode => viewMode);
 

diff --git a/projects/aas-server/src/app/aas-index/mysql/mysql-index.ts b/projects/aas-server/src/app/aas-index/mysql/mysql-index.ts
@@ -174,12 +174,12 @@ export class MySqlIndex extends AASIndex {
     }
 
     public override async find(endpoint: string | undefined, id: string): Promise<AASDocument | undefined> {
-        const document = endpoint ? await this.getEndpointDocument(endpoint, id) : await this.getDocument(id);
-        if (document) {
-            return this.toDocument(document);
+        const document = endpoint ? await this.selectEndpointDocument(endpoint, id) : await this.selectDocument(id);
+        if (!document) {
+            return undefined;
         }
 
-        return undefined;
+        return this.toDocument(document);
     }
 
     public override async remove(endpointName: string, id: string): Promise<boolean> {
@@ -347,7 +347,7 @@ export class MySqlIndex extends AASIndex {
         };
     }
 
-    private async getEndpointDocument(endpoint: string, id: string): Promise<MySqlDocument> {
+    private async selectEndpointDocument(endpoint: string, id: string): Promise<MySqlDocument | undefined> {
         const [results] = await (
             await this.connection
         ).query<MySqlDocument[]>('SELECT * FROM `documents` WHERE endpoint = ? AND (id = ? OR assetId = ?)', [
@@ -357,19 +357,19 @@ export class MySqlIndex extends AASIndex {
         ]);
 
         if (results.length === 0) {
-            throw new Error(`A document with the id "${id}" does not exist in "${endpoint}".`);
+            return undefined;
         }
 
         return results[0];
     }
 
-    private async getDocument(id: string): Promise<MySqlDocument> {
+    private async selectDocument(id: string): Promise<MySqlDocument | undefined> {
         const [results] = await (
             await this.connection
         ).query<MySqlDocument[]>('SELECT * FROM `documents` WHERE (id = ? OR assetId = ?)', [id, id]);
 
         if (results.length === 0) {
-            throw new Error(`A document with the id "${id}" does not exist.`);
+            return undefined;
         }
 
         return results[0];