• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (C) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { BaseElement, element } from '../../../../../base-ui/BaseElement';
17import { type SelectionParam } from '../../../../bean/BoxSelection';
18import { type LitTable } from '../../../../../base-ui/table/lit-table';
19import { resizeObserver } from '../SheetUtils';
20import { type FrameDynamicStruct } from '../../../../database/ui-worker/ProcedureWorkerFrameDynamic';
21import { type FrameAnimationSelect } from '../../../../bean/FrameComponentBean';
22import { Utils } from '../../base/Utils';
23
24@element('tabpane-frame-dynamic')
25export class TabPaneFrameDynamic extends BaseElement {
26  private frameDynamicTbl: LitTable | null | undefined;
27  private range: HTMLLabelElement | null | undefined;
28  private frameDynamicSource: Array<FrameAnimationSelect> = [];
29
30  set data(frameDynamicParam: SelectionParam) {
31    let secondToMillisecond: number = 1000_000.0;
32    let fixedNumber: number = 5;
33    this.range!.textContent = `Selected range:  ${parseFloat(
34      ((frameDynamicParam.rightNs - frameDynamicParam.leftNs) / secondToMillisecond).toFixed(fixedNumber)
35    )} ms`;
36    this.buildDynamicTable(frameDynamicParam.frameDynamic);
37  }
38
39  buildDynamicTable(dynamicDataList: FrameDynamicStruct[], isClickSelect: boolean = false): void {
40    if (isClickSelect) {
41      this.range!.style.visibility = 'hidden';
42    } else {
43      this.range!.style.visibility = 'visible';
44    }
45    let result: FrameAnimationSelect[] = [];
46    dynamicDataList.forEach((dynamic) => {
47      result.push({
48        id: dynamic.id,
49        value: dynamic.typeValue,
50        timestamp: Utils.getTimeString(dynamic.ts),
51      });
52    });
53    this.frameDynamicSource = result;
54    this.frameDynamicTbl!.recycleDataSource = result;
55  }
56
57  initElements(): void {
58    this.frameDynamicTbl = this.shadowRoot?.querySelector<LitTable>('#tb-frame-dynamic');
59    this.range = this.shadowRoot?.querySelector('#frame-dynamic-time-range');
60    this.frameDynamicTbl!.addEventListener('column-click', (evt) => {
61      // @ts-ignore
62      this.sortByColumn(evt.detail);
63    });
64  }
65
66  connectedCallback(): void {
67    super.connectedCallback();
68    resizeObserver(this.parentElement!, this.frameDynamicTbl!);
69  }
70
71  initHtml(): string {
72    return `
73        <style>
74        .frames-label{
75          height: 20px;
76          text-align: end;
77        }
78        :host{
79            padding: 10px 10px;
80            display: flex;
81            flex-direction: column;
82        }
83        </style>
84        <label id="frame-dynamic-time-range" class="frame-dynamic-label" style="width: 100%;font-size: 10pt;
85        margin-bottom: 5px;height: 20px;text-align: end;">Selected range:0.0 ms</label>
86        <lit-table id="tb-frame-dynamic" style="height: auto">
87            <lit-table-column class="frame-dynamic-column" title="Timestamp" width="1fr"
88            data-index="timestamp" key="timestamp"  align="flex-start" order >
89            </lit-table-column>
90            <lit-table-column class="frame-dynamic-column" title="Index" width="1fr"
91            data-index="id" key="id"  align="flex-start" order>
92            </lit-table-column>
93            <lit-table-column class="frame-dynamic-column" title="Value" width="1fr"
94            data-index="value" key="value"  align="flex-start" order >
95            </lit-table-column>
96
97        </lit-table>
98        `;
99  }
100
101  private sortByColumn(framesDetail: { sort: number; key: string }): void {
102    let compare = function (property: string, sort: number, type: string) {
103      return function (frameDynamicLeft: FrameAnimationSelect, frameDynamicRight: FrameAnimationSelect): number {
104        let firstSortNumber: number = -1;
105        let SecondSortNumber: number = 1;
106        let thirdSortNumber: number = 2;
107        // @ts-ignore
108        let rightData = frameDynamicRight[property];
109        // @ts-ignore
110        let leftData = frameDynamicLeft[property];
111        if (type === 'number') {
112          return sort === thirdSortNumber
113            ? parseFloat(rightData) - parseFloat(leftData)
114            : parseFloat(leftData) - parseFloat(rightData);
115        } else {
116          if (rightData > leftData) {
117            return sort === thirdSortNumber ? SecondSortNumber : firstSortNumber;
118          } else {
119            if (rightData === leftData) {
120              return 0;
121            } else {
122              return sort === thirdSortNumber ? firstSortNumber : SecondSortNumber;
123            }
124          }
125        }
126      };
127    };
128
129    if (framesDetail.key === 'timestamp') {
130      this.frameDynamicSource.sort(compare(framesDetail.key, framesDetail.sort, 'string'));
131    } else {
132      this.frameDynamicSource.sort(compare(framesDetail.key, framesDetail.sort, 'number'));
133    }
134    this.frameDynamicTbl!.recycleDataSource = this.frameDynamicSource;
135  }
136}
137