All files / app/codeCharta/ui/ribbonBar/edgeMetricChooser edgeMetricChooser.component.ts

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
3x
3x
3x
 
3x
3x
3x
3x
3x
3x
3x
3x
 
 
 
 
 
 
 
 
3x
7x
7x
7x
 
 
7x
7x
 
 
 
1x
 
 
 
7x
 
11x
 
 
 
 
7x
11x
7x
 
 
4x
4x
 
 
 
4x
 
 
8x
 
 
import { Component } from "@angular/core"
import { Store } from "@ngrx/store"
import { combineLatest, map } from "rxjs"
import { CcState, CodeMapNode, Node } from "../../../codeCharta.model"
import { isEdgeMetricVisibleSelector } from "../../../state/store/appSettings/isEdgeMetricVisible/isEdgeMetricVisible.selector"
import { setEdgeMetric } from "../../../state/store/dynamicSettings/edgeMetric/edgeMetric.actions"
import { edgeMetricSelector } from "../../../state/store/dynamicSettings/edgeMetric/edgeMetric.selector"
import { NodeSelectionService } from "../../metricChooser/nodeSelection.service"
import { MetricChooserComponent } from "../../metricChooser/metricChooser.component"
import { RoundedBoxComponent } from "../roundedBox/roundedBox.component"
import { MetricChooserTypeComponent } from "../../metricChooser/metricChooserType/metricChooserType.component"
import { AsyncPipe } from "@angular/common"
 
@Component({
    selector: "cc-edge-metric-chooser",
    templateUrl: "./edgeMetricChooser.component.html",
    styleUrls: ["./edgeMetricChooser.component.scss"],
    standalone: true,
    imports: [MetricChooserComponent, RoundedBoxComponent, MetricChooserTypeComponent, AsyncPipe]
})
export class EdgeMetricChooserComponent {
    edgeValue$ = this.createEdgeValue()
    edgeMetric$ = this.store.select(edgeMetricSelector)
    isEdgeMetricVisible$ = this.store.select(isEdgeMetricVisibleSelector)
 
    constructor(
        private store: Store<CcState>,
        private nodeSelectionService: NodeSelectionService
    ) {}
 
    handleEdgeMetricChanged(value: string) {
        this.store.dispatch(setEdgeMetric({ value }))
    }
 
    private createEdgeValue() {
        return combineLatest([this.store.select(edgeMetricSelector), this.nodeSelectionService.createNodeObservable()]).pipe(
            map(([edgeMetric, node]) => {
                return this.formatHoveredEdgeValue(edgeMetric, node)
            })
        )
    }
 
    private formatHoveredEdgeValue = (edgeMetric: string, node: CodeMapNode | Node) => {
        if (!node) {
            return null
        }
 
        const edgeValues = node.edgeAttributes[edgeMetric]
        Iif (!edgeValues) {
            return null
        }
 
        return `${this.formatValue(edgeValues.incoming)} / ${this.formatValue(edgeValues.outgoing)}`
    }
 
    private formatValue = (x?: number) => (typeof x === "number" ? x.toLocaleString() : "-")
}