Improve filter query display performance

Signed-off-by: trivernis <trivernis@protonmail.com>

mediarepo-ui/angular.json

@@ -11,7 +11,8 @@
             "projectType": "application",
             "schematics": {
                 "@schematics/angular:component": {
-                    "style": "scss"
+                    "style": "scss",
+                    "changeDetection": "OnPush"
                 },
                 "@schematics/angular:application": {
                     "strict": true

mediarepo-ui/src-tauri/Cargo.lock

@@ -40,7 +40,7 @@ checksum = "84450d0b4a8bd1ba4144ce8ce718fbc5d071358b1e5384bace6536b3d1f2d5b3"
 
 [[package]]
 name = "app"
-version = "0.12.0"
+version = "0.13.0"
 dependencies = [
  "mediarepo-api",
  "serde",

mediarepo-ui/src/app/components/shared/app-common/app-common.module.ts

@@ -14,6 +14,7 @@ import {MetadataEntryComponent} from "./metadata-entry/metadata-entry.component"
 import {BusyDialogComponent} from "./busy-dialog/busy-dialog.component";
 import {SelectableComponent} from "./selectable/selectable.component";
 import {MatProgressBarModule} from "@angular/material/progress-bar";
+import {HasPropertyPipe} from "./pipes/has-property.pipe";
 
 
 @NgModule({
@@ -26,6 +27,7 @@ import {MatProgressBarModule} from "@angular/material/progress-bar";
         MetadataEntryComponent,
         BusyDialogComponent,
         SelectableComponent,
+        HasPropertyPipe,
     ],
     exports: [
         ConfirmDialogComponent,
@@ -35,6 +37,7 @@ import {MatProgressBarModule} from "@angular/material/progress-bar";
         InputReceiverDirective,
         MetadataEntryComponent,
         SelectableComponent,
+        HasPropertyPipe,
     ],
     imports: [
         CommonModule,

mediarepo-ui/src/app/components/shared/app-common/pipes/has-property.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { HasPropertyPipe } from './has-property.pipe';
+
+describe('HasPropertyPipe', () => {
+  it('create an instance', () => {
+    const pipe = new HasPropertyPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

mediarepo-ui/src/app/components/shared/app-common/pipes/has-property.pipe.ts

@@ -0,0 +1,11 @@
+import {Pipe, PipeTransform} from "@angular/core";
+
+@Pipe({
+    name: "hasProperty"
+})
+export class HasPropertyPipe implements PipeTransform {
+
+    transform(value: any, propertyName: string): unknown {
+        return propertyName in value;
+    }
+}

mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-dialog/filter-expression-list-item/filter-expression-list-item.component.html

@@ -7,10 +7,10 @@
             <app-selectable #componentSelectable
                             (appSelect)="this.entrySelect.emit(entry)"
                             (appUnselect)="this.entryUnselect.emit(entry)">
-                <app-property-query-item *ngIf="this.queryIs(entry[1], 'Property')"
+                <app-property-query-item *ngIf="entry[1] | hasProperty: 'Property'"
-                                         [propertyQuery]="this.propertyQuery(entry[1]).Property"></app-property-query-item>
+                                         [propertyQuery]="entry[1] | getPropertyQuery"></app-property-query-item>
-                <app-tag-query-item *ngIf="this.queryIs(entry[1], 'Tag')"
+                <app-tag-query-item *ngIf="entry[1] | hasProperty: 'Tag'"
-                                    [tagQuery]="this.tagQuery(entry[1]).Tag"></app-tag-query-item>
+                                    [tagQuery]="entry[1] | getTagQuery"></app-tag-query-item>
             </app-selectable>
         </mat-list-item>
     </mat-list>
@@ -19,9 +19,9 @@
     <app-selectable #singleSelectable
                     (appSelect)="this.appSelect.emit(this.query)"
                     (appUnselect)="this.appUnselect.emit(this.query)">
-        <app-property-query-item *ngIf="this.queryIs(this.query, 'Property')"
+        <app-property-query-item *ngIf="this.query | hasProperty: 'Property'"
-                                 [propertyQuery]="this.propertyQuery(this.query).Property"></app-property-query-item>
+                                 [propertyQuery]="this.query | getPropertyQuery"></app-property-query-item>
-        <app-tag-query-item *ngIf="this.queryIs(this.query, 'Tag')"
+        <app-tag-query-item *ngIf="this.query | hasProperty: 'Tag'"
-                            [tagQuery]="this.tagQuery(this.query).Tag"></app-tag-query-item>
+                            [tagQuery]="this.query | getTagQuery"></app-tag-query-item>
     </app-selectable>
 </span>

mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-dialog/filter-expression-list-item/filter-expression-list-item.component.ts

@@ -1,16 +1,12 @@
-import {Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from "@angular/core";
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from "@angular/core";
-import {
+import {FilterExpression, FilterQuery} from "../../../../../../../api/api-types/files";
-    FilterExpression,
-    FilterQuery,
-    FilterQueryProperty,
-    FilterQueryTag
-} from "../../../../../../../api/api-types/files";
 import {enumerate} from "../../../../../../utils/list-utils";
 
 @Component({
     selector: "app-filter-expression-list-item",
     templateUrl: "./filter-expression-list-item.component.html",
-    styleUrls: ["./filter-expression-list-item.component.scss"]
+    styleUrls: ["./filter-expression-list-item.component.scss"],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FilterExpressionListItemComponent implements OnChanges {
 
@@ -35,18 +31,6 @@ export class FilterExpressionListItemComponent implements OnChanges {
         }
     }
 
-    public queryIs(query: FilterQuery, key: "Property" | "Tag"): boolean {
-        return key in query;
-    }
-
-    public propertyQuery(query: FilterQuery): FilterQueryProperty {
-        return query as FilterQueryProperty;
-    }
-
-    public tagQuery(query: FilterQuery): FilterQueryTag {
-        return query as FilterQueryTag;
-    }
-
     private parseFilter() {
         if (this.filter && "OrExpression" in this.filter) {
             this.orExpression = enumerate(this.filter.OrExpression);

mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-expression-item/filter-expression-item.component.html

@@ -1,15 +1,15 @@
-<span *ngIf="is('OrExpression')" class="or-expression">
+<span *ngIf="this.orExpression" class="or-expression">
-    <ng-container *ngFor="let query of this.orExpression().OrExpression">
+    <ng-container *ngFor="let query of this.orExpression">
-        <app-property-query-item *ngIf="this.queryIs(query, 'Property')"
+    <app-property-query-item *ngIf="query | hasProperty: 'Property'"
-                                 [propertyQuery]="this.propertyQuery(query).Property"></app-property-query-item>
+                             [propertyQuery]="query | getPropertyQuery"></app-property-query-item>
-        <app-tag-query-item *ngIf="this.queryIs(query, 'Tag')"
+    <app-tag-query-item *ngIf="query | hasProperty: 'Tag'"
-                            [tagQuery]="this.tagQuery(query).Tag"></app-tag-query-item>
+                        [tagQuery]="query | getTagQuery"></app-tag-query-item>
         <span class="or-combinator"> OR </span>
     </ng-container>
 </span>
-<span *ngIf="is('Query')" class="query">
+<span *ngIf="this.query" class="query">
-    <app-property-query-item *ngIf="this.queryIs(this.query().Query, 'Property')"
+    <app-property-query-item *ngIf="this.query | hasProperty: 'Property'"
-                             [propertyQuery]="this.propertyQuery(this.query().Query).Property"></app-property-query-item>
+                             [propertyQuery]="this.query | getPropertyQuery"></app-property-query-item>
-    <app-tag-query-item *ngIf="this.queryIs(this.query().Query, 'Tag')"
+    <app-tag-query-item *ngIf="this.query | hasProperty: 'Tag'"
-                        [tagQuery]="this.tagQuery(this.query().Query).Tag"></app-tag-query-item>
+                        [tagQuery]="this.query | getTagQuery"></app-tag-query-item>
 </span>

mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-expression-item/filter-expression-item.component.ts

@@ -1,47 +1,35 @@
-import {Component, Input} from "@angular/core";
+import {ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges} from "@angular/core";
-import {
+import {FilterExpression, FilterQuery} from "../../../../../../api/api-types/files";
-    FilterExpression,
-    FilterExpressionOrExpression,
-    FilterExpressionQuery,
-    FilterQuery,
-    FilterQueryProperty,
-    FilterQueryTag
-} from "../../../../../../api/api-types/files";
 
 @Component({
     selector: "app-filter-expression-item",
     templateUrl: "./filter-expression-item.component.html",
-    styleUrls: ["./filter-expression-item.component.scss"]
+    styleUrls: ["./filter-expression-item.component.scss"],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class FilterExpressionItemComponent {
+export class FilterExpressionItemComponent implements OnInit, OnChanges {
-
-
     @Input() filter!: FilterExpression;
+    public orExpression?: FilterQuery[];
+    public query?: FilterQuery;
 
     constructor() {
     }
 
-    public is(key: "OrExpression" | "Query"): boolean {
+    public ngOnInit(): void {
-        return key in this.filter;
+        this.parseQuery();
-    }
-
-    public orExpression(): FilterExpressionOrExpression {
-        return this.filter as FilterExpressionOrExpression;
     }
 
-    public query(): FilterExpressionQuery {
+    public ngOnChanges(changes: SimpleChanges): void {
-        return this.filter as FilterExpressionQuery;
+        if (changes["filter"]) {
+            this.parseQuery();
         }
-
-    public queryIs(query: FilterQuery, key: "Property" | "Tag"): boolean {
-        return key in query;
     }
 
-    public propertyQuery(query: FilterQuery): FilterQueryProperty {
+    private parseQuery() {
-        return query as FilterQueryProperty;
+        if ("Query" in this.filter) {
+            this.query = this.filter.Query;
+        } else {
+            this.orExpression = this.filter.OrExpression;
         }
-
-    public tagQuery(query: FilterQuery): FilterQueryTag {
-        return query as FilterQueryTag;
     }
 }

mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-pipes/get-property-query.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { GetPropertyQueryPipe } from './get-property-query.pipe';
+
+describe('GetPropertyQueryPipe', () => {
+  it('create an instance', () => {
+    const pipe = new GetPropertyQueryPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-pipes/get-property-query.pipe.ts

@@ -0,0 +1,13 @@
+import {Pipe, PipeTransform} from "@angular/core";
+import {FilterQuery, FilterQueryProperty, PropertyQuery} from "../../../../../../api/api-types/files";
+
+@Pipe({
+    name: "getPropertyQuery"
+})
+export class GetPropertyQueryPipe implements PipeTransform {
+
+    transform(value: FilterQuery): PropertyQuery {
+        return (value as FilterQueryProperty).Property;
+    }
+
+}

mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-pipes/get-tag-query.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { GetTagQueryPipe } from './get-tag-query.pipe';
+
+describe('GetTagQueryPipe', () => {
+  it('create an instance', () => {
+    const pipe = new GetTagQueryPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-pipes/get-tag-query.pipe.ts

@@ -0,0 +1,12 @@
+import {Pipe, PipeTransform} from "@angular/core";
+import {FilterQuery, FilterQueryTag, TagQuery} from "../../../../../../api/api-types/files";
+
+@Pipe({
+    name: "getTagQuery"
+})
+export class GetTagQueryPipe implements PipeTransform {
+
+    transform(value: FilterQuery): TagQuery {
+        return (value as FilterQueryTag).Tag;
+    }
+}

mediarepo-ui/src/app/components/shared/sidebar/sidebar.module.ts

@@ -46,6 +46,8 @@ import {
 import {
     FilterExpressionListItemComponent
 } from "./file-search/filter-dialog/filter-expression-list-item/filter-expression-list-item.component";
+import { GetTagQueryPipe } from './file-search/filter-pipes/get-tag-query.pipe';
+import { GetPropertyQueryPipe } from './file-search/filter-pipes/get-property-query.pipe';
 
 
 @NgModule({
@@ -62,6 +64,8 @@ import {
         TagQueryItemComponent,
         PropertyQueryItemComponent,
         FilterExpressionListItemComponent,
+        GetTagQueryPipe,
+        GetPropertyQueryPipe,
     ],
     exports: [
         TagEditComponent,