Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 31x 31x 31x 31x 31x 31x 31x 31x 31x 3x 7x 3x 7x 4x 3x 3x 3x 1x 2x 1x 3x 3x 15x 9x 9x 6x 6x 3x 3x 3x | import { AfterViewInit, Component, ElementRef, HostBinding, Input, OnInit, QueryList, ViewChild, ViewChildren } from "@angular/core" import { map, Observable } from "rxjs" import { EdgeMetricData, NodeMetricData, CcState, PrimaryMetrics } from "../../codeCharta.model" import { metricDataSelector } from "../../state/selectors/accumulatedData/metricData/metricData.selector" import { attributeDescriptorsSelector } from "../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector" import { Store } from "@ngrx/store" import { MatSelect, MatSelectTrigger } from "@angular/material/select" import { MatOption } from "@angular/material/core" import { NgIf, AsyncPipe } from "@angular/common" import { MatFormField, MatPrefix } from "@angular/material/form-field" import { MatInput } from "@angular/material/input" import { FormsModule } from "@angular/forms" import { MetricChooserValueComponent } from "./metricChooserValue/metricChooserValue.component" import { AttributeDescriptorTooltipPipe } from "../../util/pipes/attributeDescriptorTooltip.pipe" import { FilterMetricDataBySearchTermPipe } from "./filterMetricDataBySearchTerm.pipe" type MetricChooserType = "node" | "edge" @Component({ selector: "cc-metric-chooser", templateUrl: "./metricChooser.component.html", styleUrls: ["./metricChooser.component.scss"], standalone: true, imports: [ MatSelect, MatSelectTrigger, NgIf, MatFormField, MatPrefix, MatInput, FormsModule, MatOption, MetricChooserValueComponent, AsyncPipe, AttributeDescriptorTooltipPipe, FilterMetricDataBySearchTermPipe ] }) export class MetricChooserComponent implements OnInit, AfterViewInit { @Input() metricFor?: keyof PrimaryMetrics @Input() icon?: string @Input() selectedMetricName: string @Input() searchPlaceholder: string @Input() handleMetricChanged: (newSelectedMetricName: string) => void @Input() type: MetricChooserType = "node" @Input() isDisabled = false @ViewChild("searchTermInput") searchTermInput: ElementRef<HTMLInputElement> @ViewChild("matSelect") matSelect: MatSelect @ViewChildren(MatOption) matOptions: QueryList<MatOption> searchTerm = "" metricData$: Observable<NodeMetricData[] | EdgeMetricData[]> attributeDescriptors$ = this.store.select(attributeDescriptorsSelector) @HostBinding("class.hide-metric-value") hideMetricSum = false constructor(private store: Store<CcState>) {} ngOnInit(): void { this.metricData$ = this.store .select(metricDataSelector) .pipe(map(metricData => (this.type === "node" ? metricData.nodeMetricData : metricData.edgeMetricData))) } ngAfterViewInit() { this.matOptions.changes.subscribe((options: QueryList<MatOption>) => { this.setFirstItemActiveOnSearch(options) }) } setFirstItemActiveOnSearch(options: QueryList<MatOption>) { const selectedOptions = options.filter(option => option["_selected"]) const matchingOptions = options .filter(option => option.value.toLowerCase().startsWith(this.searchTerm.toLowerCase())) .sort((a, b) => a.value.localeCompare(b.value)) const searchTermExists = this.searchTerm.trim().length > 0 setTimeout(() => { if (searchTermExists && selectedOptions.length === 0 && matchingOptions.length === 0) { this.matSelect._keyManager.setActiveItem(0) } else if (searchTermExists && selectedOptions.length === 0 && matchingOptions.length > 0) { this.matSelect._keyManager.setActiveItem(matchingOptions[0]) } try { document.querySelector(".mdc-list-item--selected").scrollIntoView() } catch { // ignore } }) } handleOpenedChanged(opened: boolean) { if (opened) { this.searchTermInput.nativeElement.focus() this.hideMetricSum = true } else { this.searchTerm = "" this.hideMetricSum = false } } handleKeyDown(event: KeyboardEvent) { const { key } = event if (key !== "ArrowDown" && key !== "ArrowUp" && key !== "Enter" && key !== "Escape") { event.stopPropagation() } } } |