From a7528fe99039b75ef007c8550c3be704ef9eda8b Mon Sep 17 00:00:00 2001 From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com> Date: Mon, 21 Jun 2021 15:37:43 +0200 Subject: [PATCH 1/2] Loading symbols after migrating to v3 --- src/app/cartography/widgets/node.ts | 14 +------ .../common/symbols/symbols.component.html | 2 +- .../common/symbols/symbols.component.scss | 1 - .../common/symbols/symbols.component.ts | 8 +--- .../project-map/project-map.component.html | 2 +- .../project-map/project-map.component.ts | 8 ---- .../template/template.component.html | 8 ++-- .../components/template/template.component.ts | 7 ++-- src/app/services/symbol.service.ts | 41 +++++++++++-------- 9 files changed, 36 insertions(+), 55 deletions(-) diff --git a/src/app/cartography/widgets/node.ts b/src/app/cartography/widgets/node.ts index c97957e2..0273169b 100644 --- a/src/app/cartography/widgets/node.ts +++ b/src/app/cartography/widgets/node.ts @@ -1,11 +1,9 @@ import { EventEmitter, Injectable } from '@angular/core'; -import { SymbolService } from '../../services/symbol.service'; import { event, select } from 'd3-selection'; import { MapSettingsService } from '../../services/mapsettings.service'; import { ClickedDataEvent } from '../events/event-source'; import { NodeClicked, NodeContextMenu } from '../events/nodes'; import { NodesEventSource } from '../events/nodes-event-source'; -import { GraphDataManager } from '../managers/graph-data-manager'; import { SelectionManager } from '../managers/selection-manager'; import { MapNode } from '../models/map/map-node'; import { SVGSelection } from '../models/types'; @@ -19,12 +17,10 @@ export class NodeWidget implements Widget { public onNodeClicked = new EventEmitter(); constructor( - private graphDataManager: GraphDataManager, private selectionManager: SelectionManager, private labelWidget: LabelWidget, private nodesEventSource: NodesEventSource, - private mapSettingsService: MapSettingsService, - private symbolService: SymbolService + private mapSettingsService: MapSettingsService ) {} public draw(view: SVGSelection) { @@ -90,13 +86,7 @@ export class NodeWidget implements Widget { event.preventDefault(); self.onContextConsoleMenu.emit(new NodeContextMenu(event, n)); }) - .attr('xnode:href', (n: MapNode) => { - let symbol = this.symbolService.get(n.symbol.split('/')[2]); - if (symbol) { - return 'data:image/svg+xml;base64,' + btoa(symbol.raw); - } - return ''; - }) + .attr('xnode:href', (n: MapNode) => n.symbolUrl) .attr('width', (n: MapNode) => { if (!n.width) return 60; return n.width; diff --git a/src/app/components/preferences/common/symbols/symbols.component.html b/src/app/components/preferences/common/symbols/symbols.component.html index a182fa8b..c9c11bd4 100644 --- a/src/app/components/preferences/common/symbols/symbols.component.html +++ b/src/app/components/preferences/common/symbols/symbols.component.html @@ -32,7 +32,7 @@ lazyimg [ngClass]="{ imageSelected: isSelected === symbol.symbol_id }" class="image" - [src]="getImageSourceForTemplate(symbol.symbol_id)| authImage: server | async" + [src]="getImageSourceForTemplate(symbol.symbol_id)" /> diff --git a/src/app/components/preferences/common/symbols/symbols.component.scss b/src/app/components/preferences/common/symbols/symbols.component.scss index 608fc79d..0e0cde8c 100644 --- a/src/app/components/preferences/common/symbols/symbols.component.scss +++ b/src/app/components/preferences/common/symbols/symbols.component.scss @@ -20,7 +20,6 @@ } .buttonSelected { - border-width: 3px; background: #0097a7 !important; } diff --git a/src/app/components/preferences/common/symbols/symbols.component.ts b/src/app/components/preferences/common/symbols/symbols.component.ts index 4ed42f18..e7a13d95 100644 --- a/src/app/components/preferences/common/symbols/symbols.component.ts +++ b/src/app/components/preferences/common/symbols/symbols.component.ts @@ -1,5 +1,4 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { DomSanitizer } from '@angular/platform-browser'; import { Server } from '../../../../models/server'; import { Symbol } from '../../../../models/symbol'; import { SymbolService } from '../../../../services/symbol.service'; @@ -19,7 +18,7 @@ export class SymbolsComponent implements OnInit { isSelected: string = ''; searchText: string = ''; - constructor(private symbolService: SymbolService, private domSanitizer: DomSanitizer) {} + constructor(private symbolService: SymbolService) {} ngOnInit() { this.isSelected = this.symbol; @@ -77,11 +76,6 @@ export class SymbolsComponent implements OnInit { width=\"${imageToUpload.width}\">\n\n`; } - getImage(symbolFilename: string) { - let symbol = this.symbolService.get(symbolFilename); - return this.domSanitizer.bypassSecurityTrustUrl(`data:image/svg+xml;base64,${btoa(symbol.raw)}`); - } - getImageSourceForTemplate(symbol: string) { return `${this.server.protocol}//${this.server.host}:${this.server.port}/v3/symbols/${symbol}/raw`; } diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html index 57cd12ee..000f83de 100644 --- a/src/app/components/project-map/project-map.component.html +++ b/src/app/components/project-map/project-map.component.html @@ -1,6 +1,6 @@
; tools = { @@ -183,9 +182,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy { ngOnInit() { this.getSettings(); this.progressService.activate(); - this.symbolService.symbolsLoaded.subscribe(loaded => { - this.symbolsLoaded = true; - }); if (this.serverService.isServiceInitialized) { this.getData(); @@ -321,10 +317,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy { mergeMap((server: Server) => { if (!server) this.router.navigate(['/servers']); this.server = server; - - // load symbols - this.symbolService.load(this.server); - return this.projectService.get(server, paramMap.get('project_id')).pipe( map((project) => { return project; diff --git a/src/app/components/template/template.component.html b/src/app/components/template/template.component.html index 26a3794e..917e30e2 100644 --- a/src/app/components/template/template.component.html +++ b/src/app/components/template/template.component.html @@ -43,25 +43,25 @@
- Image +
{{ filteredTemplates[i].name }}
- Image +
{{ filteredTemplates[i + 1].name }}
- Image +
{{ filteredTemplates[i + 2].name }}
- Image +
{{ filteredTemplates[i + 3].name }}
 diff --git a/src/app/components/template/template.component.ts b/src/app/components/template/template.component.ts index 1b8a028d..a855940d 100644 --- a/src/app/components/template/template.component.ts +++ b/src/app/components/template/template.component.ts @@ -129,9 +129,10 @@ export class TemplateComponent implements OnInit, OnDestroy { } getImageSourceForTemplate(template: Template) { - let symbol = this.symbolService.getSymbolFromTemplate(template); - if (symbol) return this.domSanitizer.bypassSecurityTrustUrl(`data:image/svg+xml;base64,${btoa(symbol.raw)}`); - return this.domSanitizer.bypassSecurityTrustUrl('data:image/svg+xml;base64,'); + return this.symbolService.getSymbolFromTemplate(this.server, template); + // let symbol = this.symbolService.getSymbolFromTemplate(template); + // if (symbol) return this.domSanitizer.bypassSecurityTrustUrl(`data:image/svg+xml;base64,${btoa(symbol.raw)}`); + // return this.domSanitizer.bypassSecurityTrustUrl('data:image/svg+xml;base64,'); } ngOnDestroy() { diff --git a/src/app/services/symbol.service.ts b/src/app/services/symbol.service.ts index 13eff74c..97706022 100644 --- a/src/app/services/symbol.service.ts +++ b/src/app/services/symbol.service.ts @@ -1,35 +1,28 @@ import { Injectable } from '@angular/core'; -import { BehaviorSubject, Observable, Subject } from 'rxjs'; +import { Template } from '../models/template'; +import { BehaviorSubject, Observable } from 'rxjs'; import { shareReplay } from 'rxjs/operators'; import { Node } from '../cartography/models/node'; import { Server } from '../models/server'; import { Symbol } from '../models/symbol'; import { HttpServer } from './http-server.service'; -import { Template } from '../models/template'; + +const CACHE_SIZE = 1; @Injectable() export class SymbolService { - private symbols: Symbol[] = []; + public symbols: BehaviorSubject = new BehaviorSubject([]); + private cache: Observable; private maximumSymbolSize: number = 80; - public symbolsLoaded: Subject = new Subject(); constructor(private httpServer: HttpServer) {} - async load(server: Server) { - let symbols = await this.httpServer.get(server, '/symbols').toPromise(); - await symbols.forEach(async symbol => { - symbol.raw = await this.raw(server, symbol.symbol_id).toPromise(); - this.symbols.push(symbol); - }); - this.symbolsLoaded.next(true); - } - getMaximumSymbolSize() { return this.maximumSymbolSize; } get(symbol_id: string): Symbol { - return this.symbols.find((symbol: Symbol) => symbol.filename === symbol_id); + return this.symbols.getValue().find((symbol: Symbol) => symbol.symbol_id === symbol_id); } getDimensions(server: Server, symbol_id: string): Observable { @@ -45,22 +38,34 @@ export class SymbolService { }; } + getByFilename(symbol_filename: string) { + return this.symbols.getValue().find((symbol: Symbol) => symbol.filename === symbol_filename); + } + add(server: Server, symbolName: string, symbol: string) { - this.load(server); + this.cache = null; return this.httpServer.post(server, `/symbols/${symbolName}/raw`, symbol); } - list(server: Server) { + load(server: Server): Observable { return this.httpServer.get(server, '/symbols'); } + list(server: Server) { + if (!this.cache) { + this.cache = this.load(server).pipe(shareReplay(CACHE_SIZE)); + } + + return this.cache; + } + raw(server: Server, symbol_id: string) { const encoded_uri = encodeURI(symbol_id); return this.httpServer.getText(server, `/symbols/${encoded_uri}/raw`); } - getSymbolFromTemplate(template: Template) { - return this.symbols.find((symbol: Symbol) => symbol.filename === template.symbol.split('/')[2]); + getSymbolFromTemplate(server: Server, template: Template) { + return `${server.protocol}//${server.host}:${server.port}/v3/symbols/${template.symbol}/raw`; } } From 02c5c8514838e60c7dbf2ede9f95c4d837f2499d Mon Sep 17 00:00:00 2001 From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com> Date: Mon, 21 Jun 2021 15:45:02 +0200 Subject: [PATCH 2/2] Update symbol.service.spec.ts --- src/app/services/symbol.service.spec.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/app/services/symbol.service.spec.ts b/src/app/services/symbol.service.spec.ts index 1c834000..1fce0b1e 100644 --- a/src/app/services/symbol.service.spec.ts +++ b/src/app/services/symbol.service.spec.ts @@ -48,12 +48,4 @@ describe('SymbolService', () => { const req = httpTestingController.expectOne('http://127.0.0.1:3080/v3/symbols/:my/tested.png/raw'); expect(req.request.method).toEqual('GET'); })); - - it('should call load symbols while adding symbol', inject([SymbolService], (service: SymbolService) => { - spyOn(service, 'load'); - - service.add(server, 'symbolName', 'symbol'); - - expect(service.load).toHaveBeenCalled(); - })); });