• 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.js';
17import { SelectionParam } from '../../../../bean/BoxSelection.js';
18import { LitTable } from '../../../../../base-ui/table/lit-table.js';
19import { resizeObserver } from '../SheetUtils.js';
20import { FrameDynamicStruct } from '../../../../database/ui-worker/ProcedureWorkerFrameDynamic.js';
21import { FrameAnimationSelect } from '../../../../bean/FrameComponentBean.js';
22import { Utils } from '../../base/Utils.js';
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(((frameDynamicParam.rightNs -
34      frameDynamicParam.leftNs) / secondToMillisecond).toFixed(fixedNumber))} ms`;
35    this.buildDynamicTable(frameDynamicParam.frameDynamic);
36  }
37
38  buildDynamicTable(dynamicDataList: FrameDynamicStruct[], isClickSelect: boolean = false): void {
39    if (isClickSelect) {
40      this.range!.style.visibility = 'hidden';
41    } else {
42      this.range!.style.visibility = 'visible';
43    }
44    let result: FrameAnimationSelect[] = [];
45    dynamicDataList.forEach(dynamic => {
46      result.push({
47        id: dynamic.id,
48        value: dynamic.typeValue,
49        timestamp: Utils.getTimeString(dynamic.ts)
50      });
51    });
52    this.frameDynamicSource = result;
53    this.frameDynamicTbl!.recycleDataSource = result;
54  }
55
56  initElements(): void {
57    this.frameDynamicTbl = this.shadowRoot?.querySelector<LitTable>('#tb-frame-dynamic');
58    this.range = this.shadowRoot?.querySelector('#frame-dynamic-time-range');
59    this.frameDynamicTbl!.addEventListener('column-click', (evt) => {
60      // @ts-ignore
61      this.sortByColumn(evt.detail);
62    });
63  }
64
65  connectedCallback(): void {
66    super.connectedCallback();
67    resizeObserver(this.parentElement!, this.frameDynamicTbl!);
68  }
69
70  initHtml(): string {
71    return `
72        <style>
73        .frames-label{
74          height: 20px;
75          text-align: end;
76        }
77        :host{
78            padding: 10px 10px;
79            display: flex;
80            flex-direction: column;
81        }
82        </style>
83        <label id="frame-dynamic-time-range" class="frame-dynamic-label" style="width: 100%;font-size: 10pt;
84        margin-bottom: 5px;height: 20px;text-align: end;">Selected range:0.0 ms</label>
85        <lit-table id="tb-frame-dynamic" style="height: auto">
86            <lit-table-column class="frame-dynamic-column" title="Timestamp" width="1fr"
87            data-index="timestamp" key="timestamp"  align="flex-start" order >
88            </lit-table-column>
89            <lit-table-column class="frame-dynamic-column" title="Index" width="1fr"
90            data-index="id" key="id"  align="flex-start" order>
91            </lit-table-column>
92            <lit-table-column class="frame-dynamic-column" title="Value" width="1fr"
93            data-index="value" key="value"  align="flex-start" order >
94            </lit-table-column>
95
96        </lit-table>
97        `;
98  }
99
100  private sortByColumn(framesDetail: {
101    sort: number,
102    key: string,
103  }): void {
104    let compare = function (property: string, sort: number, type: string) {
105      return function (frameDynamicLeft: FrameAnimationSelect, frameDynamicRight: FrameAnimationSelect): number {
106        let firstSortNumber: number = -1;
107        let SecondSortNumber: number = 1;
108        let thirdSortNumber: number = 2;
109        // @ts-ignore
110        let rightData = frameDynamicRight[property];
111        // @ts-ignore
112        let leftData = frameDynamicLeft[property];
113        if (type === 'number') {
114          return sort === thirdSortNumber ? parseFloat(rightData) - parseFloat(leftData) :
115            parseFloat(leftData) - parseFloat(rightData);
116        } else {
117          if (rightData > leftData) {
118            return sort === thirdSortNumber ? SecondSortNumber : firstSortNumber;
119          } else {
120            if (rightData === leftData) {
121              return 0;
122            } else {
123              return sort === thirdSortNumber ? firstSortNumber : SecondSortNumber;
124            }
125          }
126        }
127      };
128    };
129
130    if (framesDetail.key === 'timestamp') {
131      this.frameDynamicSource.sort(compare(framesDetail.key, framesDetail.sort, 'string'));
132    } else {
133      this.frameDynamicSource.sort(compare(framesDetail.key, framesDetail.sort, 'number'));
134    }
135    this.frameDynamicTbl!.recycleDataSource = this.frameDynamicSource;
136  }
137}
138