Mercurial > hg > ugly-duckling
view src/app/feature-extraction-menu/feature-extraction-menu.component.ts @ 100:bf8826d4e2c6
Use @angular/material select component.
author | Lucas Thompson <dev@lucas.im> |
---|---|
date | Thu, 02 Mar 2017 15:06:24 +0000 |
parents | 2c3fe51ad1f0 |
children | 53ea6406d601 |
line wrap: on
line source
import { Component, OnInit, Output, EventEmitter, Input, OnDestroy } from '@angular/core'; import {FeatureExtractionService} from "../services/feature-extraction/feature-extraction.service"; import {ListResponse} from "piper"; import {Subscription} from "rxjs"; export interface ExtractorOutputInfo { extractorKey: string; combinedKey: string; outputId: string; name: string; } @Component({ selector: 'app-feature-extraction-menu', templateUrl: './feature-extraction-menu.component.html', styleUrls: ['./feature-extraction-menu.component.css'] }) export class FeatureExtractionMenuComponent implements OnInit, OnDestroy { @Input() set disabled(isDisabled: boolean) { this.isDisabled = isDisabled; } get disabled() { return this.isDisabled; } @Output() requestOutput: EventEmitter<ExtractorOutputInfo>; private isDisabled: boolean; private extractorsMap: Map<string, ExtractorOutputInfo>; private populateExtractors: (available: ListResponse) => void; extractors: Iterable<ExtractorOutputInfo>; private librariesUpdatedSubscription: Subscription; constructor(private piperService: FeatureExtractionService) { this.extractorsMap = new Map(); this.extractors = []; this.requestOutput = new EventEmitter<ExtractorOutputInfo>(); this.isDisabled = true; this.populateExtractors = available => { const maxCharacterLimit = 50; available.available.forEach(staticData => { const isSingleOutputExtractor = staticData.basicOutputInfo.length === 1; staticData.basicOutputInfo.forEach(output => { const combinedKey = `${staticData.key}:${output.identifier}`; this.extractorsMap.set(combinedKey, { extractorKey: staticData.key, combinedKey: combinedKey, name: ( isSingleOutputExtractor ? staticData.basic.name : `${staticData.basic.name}: ${output.name}` ).substr(0, maxCharacterLimit) + '...', outputId: output.identifier }); }); }); this.extractors = [...this.extractorsMap.values()]; }; } ngOnInit() { this.piperService.list().then(this.populateExtractors); this.librariesUpdatedSubscription = this.piperService.librariesUpdated$.subscribe(this.populateExtractors); } extract(combinedKey: string): void { const info: ExtractorOutputInfo = this.extractorsMap.get(combinedKey); if (info) { this.requestOutput.emit(info); } } load(): void { this.piperService.updateAvailableLibraries().subscribe(res => { Object.keys(res).forEach(key => this.piperService.load(key)); }); } ngOnDestroy(): void { this.librariesUpdatedSubscription.unsubscribe(); } }