OpenHarmony-v5.0-Beta1/s

/*
 * Copyright (C) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { BaseElement, element } from '../../../../base-ui/BaseElement';
import { type LitTable } from '../../../../base-ui/table/lit-table';
import '../../../../base-ui/table/lit-table-column';
import { AllAppStartupStruct } from '../../../database/ui-worker/ProcedureWorkerAllAppStartup';

import { type WakeupBean } from '../../../bean/WakeupBean';
import { SpApplication } from '../../../SpApplication';
import { TraceRow } from '../base/TraceRow';
import { CpuStruct } from '../../../database/ui-worker/cpu/ProcedureWorkerCPU';
import { ThreadStruct } from '../../../database/ui-worker/ProcedureWorkerThread';
import { FuncStruct } from '../../../database/ui-worker/ProcedureWorkerFunc';
import { ProcessMemStruct } from '../../../database/ui-worker/ProcedureWorkerMem';
import { ClockStruct } from '../../../database/ui-worker/ProcedureWorkerClock';
import { ColorUtils } from '../base/ColorUtils';
import { IrqStruct } from '../../../database/ui-worker/ProcedureWorkerIrq';
import { BinderArgBean } from '../../../bean/BinderArgBean';
import { JankStruct } from '../../../database/ui-worker/ProcedureWorkerJank';
import { Utils } from '../base/Utils';
import { SpSystemTrace } from '../../SpSystemTrace';
import { AppStartupStruct } from '../../../database/ui-worker/ProcedureWorkerAppStartup';
import { SoStruct } from '../../../database/ui-worker/ProcedureWorkerSoInit';
import { type SelectionParam } from '../../../bean/BoxSelection';
import { type FrameAnimationStruct } from '../../../database/ui-worker/ProcedureWorkerFrameAnimation';
import {
  queryBinderByArgsId,
  queryBinderBySliceId,
  queryFlowsData,
  queryPrecedingData,
  queryThreadByItid,
  queryFpsSourceList,
  queryStateFreqList,
} from '../../../database/sql/SqlLite.sql';
import {
  queryBinderArgsByArgset,
  queryRunnableTimeByRunning,
  queryThreadNearData,
  queryThreadStateArgs,
  queryThreadWakeUp,
  queryThreadWakeUpFrom,
} from '../../../database/sql/ProcessThread.sql';
import { queryGpuDur } from '../../../database/sql/Gpu.sql';
import { queryWakeupListPriority } from '../../../database/sql/Cpu.sql';
import { TabPaneCurrentSelectionHtml } from './TabPaneCurrentSelection.html';
import { queryRealTime } from '../../../database/sql/Clock.sql';
import { PerfToolStruct } from '../../../database/ui-worker/ProcedureWorkerPerfTool';

const INPUT_WORD =
  'This is the interval from when the task became eligible to run \n(e.g.because of notifying a wait queue it was a suspended on) to\n when it started running.';

const CLOCK_STARTTIME_ABSALUTED_ID: string = 'clockStartTimeAbsaluteId';
const CLOCK_TRANSF_BTN_ID: string = 'clockTransfBtnId';
const CPU_STARTTIME_ABSALUTED_ID: string = 'cpuStartTimeAbsaluteId';
const CPU_TRANSF_BTN_ID: string = 'cpuTransfBtnId';
const THREAD_STARTTIME_ABSALUTED_ID: string = 'threadStartTimeAbsaluteId';
const THREAD_TRANSF_BTN_ID: string = 'threadTransfBtnId';
const FUN_STARTTIME_ABSALUTED_ID: string = 'funStartTimeAbsaluteId';
const FUN_TRANSF_BTN_ID: string = 'funTransfBtnId';

export function getTimeString(ns: number): string {
  if (ns === 0) {
    return '0';
  }
  let currentTimeNs = ns;
  let hour1 = 3600_000_000_000;
  let minute1 = 60_000_000_000;
  let second1 = 1_000_000_000; // 1 second
  let millisecond1 = 1_000_000; // 1 millisecond
  let microsecond1 = 1_000; // 1 microsecond
  let res = '';
  if (currentTimeNs >= hour1) {
    res += Math.floor(currentTimeNs / hour1) + 'h ';
    currentTimeNs = currentTimeNs - Math.floor(currentTimeNs / hour1) * hour1;
  }
  if (currentTimeNs >= minute1) {
    res += Math.floor(currentTimeNs / minute1) + 'm ';
    currentTimeNs = currentTimeNs - Math.floor(ns / minute1) * minute1;
  }
  if (currentTimeNs >= second1) {
    res += Math.floor(currentTimeNs / second1) + 's ';
    currentTimeNs = currentTimeNs - Math.floor(currentTimeNs / second1) * second1;
  }
  if (currentTimeNs >= millisecond1) {
    res += Math.floor(currentTimeNs / millisecond1) + 'ms ';
    currentTimeNs = currentTimeNs - Math.floor(currentTimeNs / millisecond1) * millisecond1;
  }
  if (currentTimeNs >= microsecond1) {
    res += Math.floor(currentTimeNs / microsecond1) + 'μs ';
    currentTimeNs = currentTimeNs - Math.floor(currentTimeNs / microsecond1) * microsecond1;
  }
  if (currentTimeNs > 0) {
    res += currentTimeNs.toFixed(0) + 'ns ';
  }
  return res;
}

@element('tabpane-current-selection')
export class TabPaneCurrentSelection extends BaseElement {
  weakUpBean: WakeupBean | null | undefined;
  selectWakeupBean: unknown;
  private currentSelectionTbl: LitTable | null | undefined;
  private tableObserver: MutationObserver | undefined;
  private wakeupListTbl: LitTable | undefined | null;
  private scrollView: HTMLDivElement | null | undefined;
  // @ts-ignore
  private dpr = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1;
  private wakeUp: string = '';
  private isFpsAvailable: boolean = true;
  private realTime: number = 0;
  private bootTime: number = 0;

  set data(selection: unknown) {
    // @ts-ignore
    if (selection !== undefined && selection.constructor && selection.constructor.name !== 'SelectionParam') {
      // @ts-ignore
      this.setCpuData(selection);
    }
  }

  /**
   * 创建StartTime的Dom节点
   * @param selectTable面板的dom树对象
   * @param startTs 开始时间
   * @param transfBtnId 转换按钮id
   * @param startTimeAbsaluteId 开始时间的id
   */
  createStartTimeNode(list: unknown[], startTs: number, transfBtnId: string, startTimeAbsaluteId: string): void {
    let timeStr: string = '';
    let startTimeValue: string = '';
    // @ts-ignore
    let startTimeAbsolute = startTs + (window as unknown).recordStartNS;
    if (this.realTime > 0) {
      if (Utils.isTransformed) {
        timeStr = this.getRealTimeStr(startTimeAbsolute);
      } else {
        timeStr = startTimeAbsolute / 1000000000 + 's';
      }
      startTimeValue = `<div style="white-space: nowrap;display: flex;align-items: center">
                            <div id="${startTimeAbsaluteId}" style="white-space:pre-wrap" >${timeStr}</div>
                            <lit-icon id="${transfBtnId}" class="temp-icon" title="Convert to realtime" name="restore" size="30"
                                  style="position: relative; top: 5px; left: 10px;"></lit-icon>
                        </div>`;
    } else {
      startTimeValue = startTimeAbsolute / 1000000000 + 's';
    }
    list.push({
      name: 'StartTime(Absolute)',
      value: startTimeValue,
    });
  }

  /**
   * 给转换按钮添加点击事件
   * @param startTimeAbsolute 开始时间
   * @param transfBtnId 转换按钮id
   * @param startTimeAbsaluteId 开始时间ID
   */
  addClickToTransfBtn(startTimeAbsolute: number, transfBtnId: string, startTimeAbsaluteId: string): void {
    let transfBtn = this.currentSelectionTbl?.shadowRoot?.querySelector(`#${transfBtnId}`);
    transfBtn?.addEventListener('click', () => {
      let startTimeAbsalute = this.currentSelectionTbl?.shadowRoot?.querySelector(`#${startTimeAbsaluteId}`);
      if (startTimeAbsalute) {
        if (Utils.isTransformed) {
          startTimeAbsalute!.innerHTML = startTimeAbsolute / 1000000000 + 's';
          Utils.isTransformed = false;
        } else {
          startTimeAbsalute!.innerHTML = this.getRealTimeStr(startTimeAbsolute);
          Utils.isTransformed = true;
        }
      }
    });
  }

  async setCpuData(
    data: CpuStruct,
    callback: ((data: WakeupBean | null) => void) | undefined = undefined,
    scrollCallback?: (data: CpuStruct) => void
  ): Promise<void> {
    await this.setRealTime();
    this.setTableHeight('650px');
    let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
    if (leftTitle) {
      leftTitle.innerText = 'Slice Details';
    }
    let list: unknown[] = [];
    this.updateUI(data, list);
    Promise.all([this.queryThreadStateDArgs(data.argSetID), this.queryCPUWakeUpFromData(data)]).then((resArr) => {
      let args = resArr[0];
      let bean = resArr[1];
      if (callback) {
        callback(bean);
      }
      if (args.length > 0) {
        args.forEach((arg) => {
          list.push({ name: arg.keyName, value: arg.strValue });
        });
      }
      this.currentSelectionTbl!.dataSource = list;
      // @ts-ignore
      let startTimeAbsolute = (data.startTime || 0) + (window as unknown).recordStartNS;
      this.addClickToTransfBtn(startTimeAbsolute, CPU_TRANSF_BTN_ID, CPU_STARTTIME_ABSALUTED_ID);

      let rightArea: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#table-right');
      let rightTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightTitle');
      let rightButton: HTMLElement | null | undefined = this?.shadowRoot
        ?.querySelector('#rightButton')
        ?.shadowRoot?.querySelector('#custom-button');
      let rightStar: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#right-star');
      this.threadClickEvent(scrollCallback, data);
      let canvas = this.initCanvas();
      if (bean !== null) {
        this.selectWakeupBean = {
          process: `${this.transferString(data.processName || 'Process')}(${data.processId})`,
          thread: `${this.transferString(data.name || 'Thread')}(${data.tid})`,
          cpu: data.cpu,
          dur: data.dur,
          priority: data.priority,
          isSelected: false,
        };

        this.weakUpBean = bean;
        this.updateRightTitleUI(rightArea!, rightTitle!, rightButton!, rightStar!);
        this.drawRight(canvas, bean);
      } else {
        this.handleNullBeanUI(rightArea!, rightTitle!, rightButton!, rightStar!);
      }
    });
  }

  private threadClickEvent(scrollCallback: ((data: CpuStruct) => void) | undefined, data: CpuStruct): void {
    let threadClick = this.currentSelectionTbl?.shadowRoot?.querySelector('#thread-id');
    threadClick?.addEventListener('click', () => {
      //cpu点击
      if (scrollCallback) {
        data.state = 'Running';
        scrollCallback(data);
      }
    });
  }

  private updateRightTitleUI(
    rightArea: HTMLElement,
    rightTitle: HTMLElement,
    rightButton: HTMLElement,
    rightStar: HTMLElement
  ): void {
    if (rightArea !== null && rightArea) {
      rightArea.style.visibility = 'visible';
    }
    if (rightTitle !== null && rightTitle) {
      rightTitle.style.visibility = 'visible';
      rightButton!.style.visibility = 'visible';
      rightStar!.style.visibility = 'hidden';
      SpSystemTrace.btnTimer = null;
    }
  }

  private handleNullBeanUI(
    rightArea: HTMLElement,
    rightTitle: HTMLElement,
    rightButton: HTMLElement,
    rightStar: HTMLElement
  ): void {
    this.weakUpBean = null;
    if (rightArea !== null && rightArea) {
      rightArea.style.visibility = 'hidden';
    }
    if (rightTitle !== null && rightTitle) {
      rightTitle.style.visibility = 'hidden';
      rightButton!.style.visibility = 'hidden';
      rightStar!.style.visibility = 'hidden';
    }
  }

  private updateUI(data: CpuStruct, list: unknown[]): void {
    let process = this.transferString(data.processName || 'Process');
    let processId = data.processId || data.tid;
    let state = '';
    if (data.end_state) {
      state = Utils.getEndState(data.end_state);
    } else if (data.end_state === '' || data.end_state === null) {
      state = '';
    } else {
      state = 'Unknown State';
    }
    list.push({
      name: 'Process',
      value: `${process || 'Process'} [${processId}]`,
    });
    let name = this.transferString(data.name ?? '');
    if (data.processId) {
      list.push({
        name: 'Thread',
        value: `<div style="white-space: nowrap;display: flex;align-items: center">
<div style="white-space:pre-wrap">${name || 'Process'} [${data.tid}]</div>
<lit-icon style="cursor:pointer;margin-left: 5px" id="thread-id" name="select" color="#7fa1e7" size="20"></lit-icon>
</div>`,
      });
    } else {
      list.push({
        name: 'Thread',
        value: `<div style="white-space: nowrap;display: flex;align-items: center">
<div style="white-space:pre-wrap">${name || 'Process'} [${data.tid}]</div>
</div>`,
      });
    }

    list.push({ name: 'StartTime(Relative)', value: getTimeString(data.startTime || 0) });
    this.createStartTimeNode(list, data.startTime || 0, CPU_TRANSF_BTN_ID, CPU_STARTTIME_ABSALUTED_ID);
    list.push({ name: 'Duration', value: getTimeString(data.dur || 0) });
    list.push({ name: 'Prio', value: data.priority || 0 });
    list.push({ name: 'End State', value: state });
  }
  // 设置真实时间和启动时间的值
  private async setRealTime(): Promise<unknown> {
    return queryRealTime().then((result) => {
      if (result && result.length > 0) {
        result.forEach((item) => {
          if (item.name === 'realtime') {
            this.realTime = item.ts;
          } else {
            this.bootTime = item.ts;
          }
        });
      }
    });
  }

  async setFunctionData(data: FuncStruct, scrollCallback: Function): Promise<void> {
    //方法信息
    await this.setRealTime();
    this.tabCurrentSelectionInit('Slice Details');
    let list: unknown[] = [];
    let name = this.transferString(data.funName ?? '');
    let isBinder = FuncStruct.isBinder(data);
    let isAsyncBinder = isBinder && FuncStruct.isBinderAsync(data);
    if (data.argsetid !== undefined && data.argsetid !== null && data.argsetid >= 0) {
      this.setTableHeight('700px');
      if (isAsyncBinder) {
        this.handleAsyncBinder(data, list, name, scrollCallback);
      } else if (isBinder) {
        this.handleBinder(data, list, name, scrollCallback);
      } else {
        this.handleNonBinder(data, list, name);
      }
    } else {
      this.setTableHeight('auto');
      list.push({ name: 'Name', value: name });
      list.push({
        name: 'StartTime(Relative)',
        value: getTimeString(data.startTs || 0),
      });
      this.createStartTimeNode(list, data.startTs || 0, FUN_TRANSF_BTN_ID, FUN_STARTTIME_ABSALUTED_ID);
      list.push({
        name: 'Duration',
        value: getTimeString(data.dur || 0),
      });
      list.push({ name: 'depth', value: data.depth });
      this.currentSelectionTbl!.dataSource = list;
      // @ts-ignore
      let startTimeAbsolute = (data.startTs || 0) + (window as unknown).recordStartNS;
      this.addClickToTransfBtn(startTimeAbsolute, FUN_TRANSF_BTN_ID, FUN_STARTTIME_ABSALUTED_ID);
    }
  }

  // 计算真实时间
  private getRealTimeStr(startTs: number): string {
    // @ts-ignore
    let time = (startTs || 0) + (window as unknown).recordStartNS - this.bootTime + this.realTime;
    const formateDateStr =
      this.getDate(parseInt(time.toString().substring(0, 13))) + '.' + time.toString().substring(10);
    return formateDateStr;
  }

  // 格式化时间戳为字符串格式 yyyy/mm/dd hh:mi:ss
  private getDate(timestamp: number): string {
    let date = new Date(timestamp);
    let gmt = date.toLocaleString();
    return gmt;
  }

  private handleNonBinder(data: FuncStruct, list: unknown[], name: string): void {
    queryBinderArgsByArgset(data.argsetid!).then((argset) => {
      list.push({ name: 'Name', value: name });
      argset.forEach((item) => {
        list.push({ name: item.keyName, value: item.strValue });
      });
      this.addTabPanelContent(list, data);
      this.currentSelectionTbl!.dataSource = list;
    });
  }

  private handleBinder(data: FuncStruct, list: unknown[], name: string, scrollCallback: Function): void {
    queryBinderArgsByArgset(data.argsetid!).then((argset) => {
      let binderSliceId = -1;
      argset.forEach((item) => {
        if (item.keyName === 'destination slice id') {
          binderSliceId = Number(item.strValue);
          list.unshift({
            name: 'Name',
            value: `<div style="white-space: nowrap;display: flex;align-items: center">
<div style="white-space:pre-wrap">${name || 'binder'}</div>
<lit-icon style="cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="function-jump" name="select" color="#7fa1e7" size="20"></lit-icon>
</div>`,
          });
        }
        list.push({ name: item.keyName, value: item.strValue });
      });
      if (binderSliceId === -1) {
        list.unshift({ name: 'Name', value: name });
      }
      this.addTabPanelContent(list, data);
      this.currentSelectionTbl!.dataSource = list;
      let funcClick = this.currentSelectionTbl?.shadowRoot?.querySelector('#function-jump');
      funcClick?.addEventListener('click', () => {
        if (!Number.isNaN(binderSliceId) && binderSliceId !== -1) {
          queryBinderBySliceId(binderSliceId).then((result: unknown[]) => {
            if (result.length > 0) {
              // @ts-ignore
              result[0].type = TraceRow.ROW_TYPE_FUNC;
              scrollCallback(result[0]);
            }
          });
        }
      });
    });
  }

  private handleAsyncBinder(data: FuncStruct, list: unknown[], name: string, scrollCallback: Function): void {
    Promise.all([
      queryBinderByArgsId(data.argsetid!, data.startTs!, !data.funName!.endsWith('rcv')),
      queryBinderArgsByArgset(data.argsetid!),
    ]).then((result) => {
      let asyncBinderRes = result[0];
      let argsBinderRes = result[1];
      let asyncBinderStract: unknown;
      if (asyncBinderRes.length > 0) {
        //@ts-ignore
        asyncBinderRes[0].type = TraceRow.ROW_TYPE_FUNC;
        asyncBinderStract = asyncBinderRes[0];
      }
      if (argsBinderRes.length > 0) {
        argsBinderRes.forEach((item) => {
          list.push({
            name: item.keyName,
            value: item.strValue,
          });
        });
      }
      if (asyncBinderStract !== undefined) {
        list.unshift({
          name: 'Name',
          value: `<div style="white-space: nowrap;display: flex;align-items: center">
<div style="white-space:pre-wrap">${name || 'binder'}</div>
<lit-icon style="cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="function-jump" name="select" color="#7fa1e7" size="20"></lit-icon>
</div>`,
        });
      } else {
        list.unshift({ name: 'Name', value: name });
      }
      this.addTabPanelContent(list, data);
      this.currentSelectionTbl!.dataSource = list;
      let funcClick = this.currentSelectionTbl?.shadowRoot?.querySelector('#function-jump');
      funcClick?.addEventListener('click', () => {
        scrollCallback(asyncBinderStract);
      });
    });
  }

  private addTabPanelContent(contentList: unknown[], data: FuncStruct): void {
    contentList.push({
      name: 'StartTime(Relative)',
      value: getTimeString(data.startTs || 0),
    });
    contentList.push({
      name: 'StartTime(Absolute)',
      // @ts-ignore
      value: ((data.startTs || 0) + (window as unknown).recordStartNS) / 1000000000 + 's',
    });
    contentList.push({
      name: 'Duration',
      value: getTimeString(data.dur || 0),
    });
    contentList.push({ name: 'depth', value: data.depth });
    if (data.argsetid && data.argsetid > -1) {
      contentList.push({ name: 'arg_set_id', value: data.argsetid });
    }
  }

  private tabCurrentSelectionInit(leftTitleStr: string): void {
    this.initCanvas();
    let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
    this.setTitleAndButtonStyle();
    if (leftTitle) {
      leftTitle.innerText = leftTitleStr;
    }
  }

  private setTitleAndButtonStyle(): void {
    let rightTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightTitle');
    let rightButton: HTMLElement | null | undefined = this?.shadowRoot
      ?.querySelector('#rightButton')
      ?.shadowRoot?.querySelector('#custom-button');
    let rightStar: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#right-star');
    if (rightTitle) {
      rightTitle.style.visibility = 'hidden';
      rightButton!.style.visibility = 'hidden';
      rightStar!.style.visibility = 'hidden';
    }
  }

  async setClockData(data: ClockStruct): Promise<void> {
    await this.setRealTime();
    this.setTableHeight('auto');
    //时钟信息
    this.tabCurrentSelectionInit('Counter Details');
    let list: unknown[] = [];
    list.push({
      name: 'StartTime(Relative)',
      value: getTimeString(data.startNS || 0),
    });
    this.createStartTimeNode(list, data.startNS || 0, CLOCK_TRANSF_BTN_ID, CLOCK_STARTTIME_ABSALUTED_ID);
    list.push({
      name: 'Value',
      value: ColorUtils.formatNumberComma(data.value || 0),
    });
    list.push({ name: 'Duration', value: getTimeString(data.dur || 0) });
    this.currentSelectionTbl!.dataSource = list;
    // @ts-ignore
    let startTimeAbsolute = (data.startNS || 0) + (window as unknown).recordStartNS;
    this.addClickToTransfBtn(startTimeAbsolute, CLOCK_TRANSF_BTN_ID, CLOCK_STARTTIME_ABSALUTED_ID);
  }

  setPerfToolsData(data: PerfToolStruct): void {
    this.setTableHeight('auto');
    //Perf Tools info
    this.tabCurrentSelectionInit('Slice Details');
    let list: unknown[] = [];
    list.push({
      name: 'Name',
      value: data.name,
    });
    list.push({
      name: 'StartTime(Relative)',
      value: getTimeString(data.startNS || 0),
    });
    list.push({
      name: 'StartTime(Absolute)',
      // @ts-ignore
      value: ((data.startNS || 0) + (window as unknown).recordStartNS) / 1000000000 + 's',
    });
    list.push({
      name: 'Value',
      value: Number(data.count),
    });
    list.push({ name: 'Duration', value: getTimeString(data.dur || 0) });
    this.currentSelectionTbl!.dataSource = list;
  }

  setMemData(data: ProcessMemStruct): void {
    this.setTableHeight('auto');
    //时钟信息
    this.initCanvas();
    let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
    if (leftTitle) {
      leftTitle.innerText = 'Counter Details';
    }
    let list: object[] = [];
    list.push({
      name: 'StartTime(Relative)',
      value: getTimeString(data.startTime || 0),
    });
    list.push({
      name: 'StartTime(Absolute)',
      // @ts-ignore
      value: ((data.startTime || 0) + (window as unknown).recordStartNS) / 1000000000 + 's',
    });
    list.push({ name: 'Value', value: data.value });
    list.push({ name: 'Delta', value: data.delta });
    list.push({
      name: 'Duration',
      value: getTimeString(data.duration || 0),
    });
    this.currentSelectionTbl!.dataSource = list;
  }

  setIrqData(data: IrqStruct): void {
    this.setTableHeight('550px');
    this.initCanvas();
    this.setTitleAndButtonStyle();
    let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
    if (leftTitle) {
      leftTitle.innerText = 'Counter Details';
    }
    let list: object[] = [];
    list.push({
      name: 'StartTime(Relative)',
      value: getTimeString(data.startNS || 0),
    });
    list.push({
      name: 'StartTime(Absolute)',
      // @ts-ignore
      value: ((data.startNS || 0) + (window as unknown).recordStartNS) / 1000000000 + 's',
    });
    list.push({ name: 'Name', value: data.name });
    list.push({ name: 'Duration', value: getTimeString(data.dur || 0) });
    queryBinderArgsByArgset(data.argSetId || 0).then((argsBinderRes) => {
      if (argsBinderRes.length > 0) {
        argsBinderRes.forEach((item) => {
          list.push({ name: item.keyName, value: item.strValue });
        });
      }
      this.currentSelectionTbl!.dataSource = list;
    });
  }

  async setThreadData(
    data: ThreadStruct,
    scrollCallback: ((d: unknown) => void) | undefined,
    scrollWakeUp: (d: unknown) => void | undefined,
    callback?: (data: Array<unknown>, str: string) => void
  ): Promise<void> {
    //线程信息
    await this.setRealTime();
    this.setTableHeight('550px');
    this.initCanvas();
    let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
    this.setTitleAndButtonStyle();
    if (leftTitle) {
      leftTitle.innerText = 'Thread State';
    }
    let list: unknown[] = [];
    let jankJumperList: Array<ThreadTreeNode> = [];
    this.prepareThreadInfo(list, data);
    let cpu = new CpuStruct();
    cpu.id = data.id;
    cpu.startTime = data.startTime;
    this.queryThreadDetails(data, list, jankJumperList, callback, scrollWakeUp, scrollCallback);
  }

  private sortByNearData(nearData: unknown[], data: ThreadStruct, list: unknown[]): unknown[] {
    let preData: unknown = undefined;
    let nextData: unknown = undefined;

    nearData
      // @ts-ignore
      .sort((near1, near2) => near1.startTime - near2.startTime)
      .forEach((near) => {
        // @ts-ignore
        if (near.itid === data.id) {
          // @ts-ignore
          if (near.startTime < data.startTime!) {
            preData = near;
            list.push({
              name: 'Previous State',
              value: `<div style="white-space: nowrap;display: flex;align-items: center">
              <div style="white-space:pre-wrap">${
                // @ts-ignore
                Utils.getEndState(near.state)
              }</div>
              <lit-icon style="cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="previous-state-click" name="select" color="#7fa1e7" size="20"></lit-icon>
              </div>`,
            });
          } else {
            nextData = near;
            list.push({
              name: 'Next State',
              value: `<div style="white-space: nowrap;display: flex;align-items: center">
              <div style="white-space:pre-wrap">${
                // @ts-ignore
                Utils.getEndState(near.state)
              }</div>
              <lit-icon style="cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="next-state-click" name="select" color="#7fa1e7" size="20"></lit-icon>
              </div>`,
            });
          }
        }
      });
    return [preData, nextData];
  }

  private setWakeupData(fromBean: WakeupBean | undefined, wakeUps: WakeupBean[], list: unknown[]): void {
    if (fromBean !== null && fromBean !== undefined && fromBean.pid !== 0 && fromBean.tid !== 0) {
      list.push({
        name: 'wakeup from tid',
        value: `<div style="white-space: nowrap;display: flex;align-items: center">
            <div style="white-space:pre-wrap">${fromBean.tid}</div>
            <lit-icon style="cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="wakeup-from"
            class="wakeup-click"  name="select" color="#7fa1e7" size="20"></lit-icon>
            </div>`,
      });
    }
    if (wakeUps !== null) {
      wakeUps.map((e) => {
        list.push({
          name: 'wakeup tid',
          value: `<div style="white-space: nowrap;display: flex;align-items: center">
            <div style="white-space:pre-wrap">${e.tid}</div>
            <lit-icon style="cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="wakeup-${e.tid}"
            class="wakeup-click" name="select" color="#7fa1e7" size="20"></lit-icon>
            </div>`,
        });
      });
    }
  }

  private queryThreadDetails(
    data: ThreadStruct,
    list: unknown[],
    jankJumperList: ThreadTreeNode[],
    callback: ((data: Array<unknown>, str: string) => void) | undefined,
    scrollWakeUp: (d: unknown) => void | undefined,
    scrollCallback: ((d: unknown) => void) | undefined
  ): void {
    Promise.all([
      this.queryThreadWakeUpFromData(data.id!, data.startTime!, data.dur!),
      this.queryThreadWakeUpData(data.id!, data.startTime!, data.dur!),
      this.queryThreadStateDArgs(data.argSetID),
      queryThreadNearData(data.id!, data.startTime!),
    ]).then((result) => {
      let fromBean = result[0] as WakeupBean;
      let wakeUps = result[1] as WakeupBean[];
      let args = result[2];
      let [preData, nextData] = this.sortByNearData(result[3], data, list);
      this.setWakeupData(fromBean, wakeUps, list);
      if (args.length > 0) {
        args.forEach((arg) => {
          list.push({ name: arg.keyName, value: arg.strValue });
        });
      }
      this.currentSelectionTbl!.dataSource = list;
      // @ts-ignore
      let startTimeAbsolute = (data.startTime || 0) + (window as unknown).recordStartNS;
      this.addClickToTransfBtn(startTimeAbsolute, THREAD_TRANSF_BTN_ID, THREAD_STARTTIME_ABSALUTED_ID);
      let timeLineNode = new ThreadTreeNode(data.tid!, data.pid!, data.startTime!);
      jankJumperList.push(timeLineNode);
      if (callback) {
        callback(jankJumperList, this.wakeUp);
        this.wakeUp = '';
      }
      this.stateClickHandler(preData, nextData, data, scrollWakeUp, scrollCallback);
      this.wakeupClickHandler(wakeUps, fromBean, scrollWakeUp);
    });
  }

  private wakeupClickHandler(
    wakeUps: WakeupBean[],
    fromBean: WakeupBean | undefined,
    scrollWakeUp: (d: unknown) => void | undefined
  ): void {
    this.currentSelectionTbl?.shadowRoot?.querySelector('#wakeup-from')?.addEventListener('click', () => {
      //点击跳转，唤醒和被唤醒的 线程
      if (fromBean && scrollWakeUp) {
        scrollWakeUp({
          processId: fromBean.pid,
          tid: fromBean.tid,
          startTime: fromBean.ts,
          dur: fromBean.dur,
          cpu: fromBean.cpu,
          id: fromBean.itid,
          state: 'Running',
          argSetID: fromBean.argSetID,
        });
      }
      this.wakeUp = 'wakeup tid';
    });
    if (wakeUps) {
      wakeUps.map((up) => {
        this.currentSelectionTbl?.shadowRoot?.querySelector(`#wakeup-${up.tid}`)?.addEventListener('click', () => {
          //点击跳转，唤醒和被唤醒的 线程
          if (up && scrollWakeUp !== undefined) {
            scrollWakeUp({
              processId: up.pid,
              tid: up.tid,
              startTime: up.ts,
              dur: up.dur,
              cpu: up.cpu,
              id: up.itid,
              state: up.state,
              argSetID: up.argSetID,
            });
          }
          this.wakeUp = 'wakeup tid';
        });
      });
    }
  }

  private stateClickHandler(
    preData: unknown,
    nextData: unknown,
    data: ThreadStruct,
    scrollWakeUp: (d: unknown) => void | undefined,
    scrollCallback: ((d: unknown) => void) | undefined
  ): void {
    this.currentSelectionTbl?.shadowRoot?.querySelector('#next-state-click')?.addEventListener('click', () => {
      if (nextData && scrollWakeUp !== undefined) {
        scrollWakeUp({
          // @ts-ignore
          processId: nextData.pid,
          // @ts-ignore
          tid: nextData.tid,
          // @ts-ignore
          startTime: nextData.startTime,
          // @ts-ignore
          dur: nextData.dur,
          // @ts-ignore
          cpu: nextData.cpu,
          // @ts-ignore
          id: nextData.itid,
          // @ts-ignore
          state: nextData.state,
          // @ts-ignore
          argSetID: nextData.argSetID,
        });
      }
    });

    this.currentSelectionTbl?.shadowRoot?.querySelector('#previous-state-click')?.addEventListener('click', () => {
      if (preData && scrollWakeUp !== undefined) {
        scrollWakeUp({
          // @ts-ignore
          processId: preData.pid,
          // @ts-ignore
          tid: preData.tid,
          // @ts-ignore
          startTime: preData.startTime,
          // @ts-ignore
          dur: preData.dur,
          // @ts-ignore
          cpu: preData.cpu,
          // @ts-ignore
          id: preData.itid,
          // @ts-ignore
          state: preData.state,
          // @ts-ignore
          argSetID: preData.argSetID,
        });
      }
    });

    this.currentSelectionTbl?.shadowRoot?.querySelector('#state-click')?.addEventListener('click', () => {
      //线程点击
      if (scrollCallback) {
        scrollCallback(data);
      }
    });
  }

  private async prepareThreadInfo(list: unknown[], data: ThreadStruct): Promise<void> {
    list.push({
      name: 'StartTime(Relative)',
      value: getTimeString(data.startTime || 0),
    });
    this.createStartTimeNode(list, data.startTime || 0, THREAD_TRANSF_BTN_ID, THREAD_STARTTIME_ABSALUTED_ID);
    list.push({ name: 'Duration', value: getTimeString(data.dur || 0) });
    let state;
    if (data.state) {
      state = Utils.getEndState(data.state);
    } else if (data.state === '' || data.state === null) {
      state = '';
    } else {
      state = 'Unknown State';
    }
    if ('Running' === state) {
      state = state + ' on CPU ' + data.cpu;
      list.push({
        name: 'State',
        value: `<div style="white-space: nowrap;display: flex;align-items: center">
            <div style="white-space:pre-wrap">${state}</div>
            <lit-icon style="cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="state-click" name="select" color="#7fa1e7" size="20"></lit-icon>
            </div>`,
      });
    } else {
      list.push({ name: 'State', value: `${state}` });
    }
    if (state.includes('Running')) {
      let startTime: number = data.startTime || 0;
      let endTime: number = (data.startTime || 0) + (data.dur || 0);
      let freqList: Array<unknown> = [];
      let str = '';
      freqList = await queryStateFreqList(startTime, endTime, data.cpu || 0);
      freqList.forEach((it) => {
        // @ts-ignore
        if (it.startTime < startTime! && it.endTime > endTime!) {
          // @ts-ignore
          it.stateDur = data.dur;
          // @ts-ignore
        } else if (it.startTime < startTime! && startTime! < it.endTime && it.endTime < endTime!) {
          // @ts-ignore
          it.stateDur = it.endTime - startTime!;
          // @ts-ignore
        } else if (it.startTime > startTime! && startTime! < it.endTime && it.endTime < endTime!) {
          // @ts-ignore
          it.stateDur = it.dur;
          // @ts-ignore
        } else if (it.startTime > startTime! && endTime! > it.startTime && it.endTime > endTime!) {
          // @ts-ignore
          it.stateDur = endTime! - it.startTime;
        }
        // @ts-ignore
        str += '[' + it.value + ': ' + (it.stateDur || 0) / 1000 + ']' + ',';
      });
      list.push({ name: 'Freq [KHz,μs]', value: str.substring(0, str.length - 1) });
    }
    let slice = Utils.SCHED_SLICE_MAP.get(`${data.id}-${data.startTime}`);
    if (slice) {
      list.push({ name: 'Prio', value: `${slice.priority}` });
    }
    let processName = Utils.PROCESS_MAP.get(data.pid!);
    if (
      processName === null ||
      processName === undefined ||
      processName === '' ||
      processName.toLowerCase() === 'null'
    ) {
      processName = Utils.THREAD_MAP.get(data.tid!) || 'null';
    }
    list.push({
      name: 'Process',
      value: this.transferString(processName ?? '') + ' [' + data.pid + '] ',
    });
  }

  setJankData(
    data: JankStruct,
    callback: ((data: Array<unknown>) => void) | undefined = undefined,
    scrollCallback: ((d: unknown) => void) | undefined
  ): void {
    //线程信息
    this.setTableHeight('750px');
    this.tabCurrentSelectionInit('Slice Details');
    let list: unknown[] = [];
    this.setJankCommonMessage(list, data);
    if (data.type === '0') {
      this.handleTypeJank(data, list, scrollCallback, callback);
    } else {
      this.currentSelectionTbl!.dataSource = list;
    }
  }

  private handleTypeJank(
    data: JankStruct,
    list: unknown[],
    scrollCallback: ((d: unknown) => void) | undefined,
    callback: ((data: Array<unknown>) => void) | undefined
  ): void {
    this.setJankType(data, list);
    let jankJumperList: Array<JankTreeNode> = [];
    if (data.frame_type === 'render_service') {
      queryGpuDur(data.id!).then((it) => {
        if (it.length > 0) {
          //@ts-ignore
          list.push({ name: 'Gpu Duration', value: getTimeString(it[0].gpu_dur) });
        }
      });
      this.handleRenderServiceJank(data, list, jankJumperList, scrollCallback, callback);
    } else if (data.frame_type === 'app') {
      this.handleAppJank(list, data, jankJumperList, scrollCallback, callback);
    } else if (data.frame_type === 'frameTime') {
      this.handleFrameTimeJank(data, list, jankJumperList, scrollCallback, callback);
    }
  }

  private handleFrameTimeJank(
    data: JankStruct,
    list: unknown[],
    jankJumperList: JankTreeNode[],
    scrollCallback: ((d: unknown) => void) | undefined,
    callback: ((data: Array<unknown>) => void) | undefined
  ): void {
    queryGpuDur(data.id!).then((it) => {
      if (it.length > 0) {
        list.push({
          name: 'Gpu Duration',
          //@ts-ignore
          value: getTimeString(it[0].gpu_dur),
        });
      }
      this.addAppFrameDetails(data, list);
      this.addRenderServiceFrameDetails(data, list);
      this.addFollowingDetails(list, data);
      let appNode = new JankTreeNode(data.name!, data.pid!, 'app');
      let rsNode = new JankTreeNode(data.rs_vsync!, data.rs_pid!, 'render_service');
      appNode.children.push(rsNode);
      jankJumperList.push(appNode);
      this.currentSelectionTbl!.dataSource = list;
      this.addJankScrollCallBackEvent(scrollCallback, callback, jankJumperList);
    });
  }

  private addRenderServiceFrameDetails(data: JankStruct, list: unknown[]): void {
    if (data.rs_name) {
      list.push({
        name: 'RenderService Frame',
        value: '',
      });
      list.push({
        name: 'Process',
        value: 'render_service ' + data.rs_pid,
      });
      list.push({
        name: 'StartTime(Relative)',
        value: getTimeString(data.rs_ts || 0),
      });
      list.push({
        name: 'StartTime(Absolute)',
        // @ts-ignore
        value: ((data.rs_ts || 0) + (window as unknown).recordStartNS) / 1000000000 + 's',
      });
      list.push({
        name: 'end time',
        value: getTimeString(data.rs_ts! + data.rs_dur! || 0),
      });
    }
  }

  private addFollowingDetails(list: unknown[], data: JankStruct): void {
    list.push({
      name: 'Following',
      value: '',
    });
    list.push({
      name: 'Slice',
      value:
        data.cmdline +
        ' [' +
        data.name +
        ']' +
        `<lit-icon class="jank_cla" style="display: inline-flex;cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="${data.type}-${data.pid}" slice_name="${data.name}"  pid="${data.pid}" name="select" color="#7fa1e7" size="20"></lit-icon>`,
    });
  }

  private addAppFrameDetails(data: JankStruct, list: unknown[]): void {
    if (data.name) {
      list.push({
        name: 'App Frame',
        value: '',
      });
      list.push({
        name: 'Process',
        value: data.cmdline + ' ' + data.pid,
      });
      list.push({
        name: 'StartTime(Relative)',
        value: getTimeString(data.ts || 0),
      });
      list.push({
        name: 'StartTime(Absolute)',
        // @ts-ignore
        value: ((data.ts || 0) + (window as unknown).recordStartNS) / 1000000000 + 's',
      });
      list.push({
        name: 'end time',
        value: getTimeString(data!.ts! + data.dur! || 0),
      });
    }
  }

  private handleAppJank(
    list: unknown[],
    data: JankStruct,
    jankJumperList: JankTreeNode[],
    scrollCallback: ((d: unknown) => void) | undefined,
    callback: ((data: Array<unknown>) => void) | undefined
  ): void {
    list.push({
      name: 'FrameTimeLine flows',
      value: '',
    });
    list.push({
      name: 'Slice',
      value:
        data.cmdline +
        ' [' +
        data.name +
        ']' +
        `<lit-icon  class="jank_cla" style="display: inline-flex;cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="actual frameTime"  slice_name="${data.name}"  pid="${data.pid}" name="select" color="#7fa1e7" size="20"></lit-icon>`,
    });
    let timeLineNode = new JankTreeNode(data.name!, data.pid!, 'frameTime');
    jankJumperList.push(timeLineNode);
    if (data.dst_slice) {
      queryPrecedingData(data.dst_slice).then((it) => {
        if (it.length > 0) {
          list.push({
            name: 'Preceding flows',
            value: '',
          });
          it.forEach((a: unknown) => {
            // @ts-ignore
            let rsNode = new JankTreeNode(a.name, a.pid, 'render_service');
            jankJumperList.push(rsNode);
            list.push({
              name: 'Slice',
              value:
                // @ts-ignore
                a.cmdline +
                ' [' +
                // @ts-ignore
                a.name +
                ']' +
                // @ts-ignore
                `<lit-icon class="jank_cla" style="display: inline-flex;cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="${a.type}-${a.pid}" slice_name="${a.name}" pid="${a.pid}" name="select" color="#7fa1e7" size="20"></lit-icon>`,
            });
          });
          this.currentSelectionTbl!.dataSource = list;
          this.addJankScrollCallBackEvent(scrollCallback, callback, jankJumperList);
        }
      });
    } else {
      this.currentSelectionTbl!.dataSource = list;
      this.addJankScrollCallBackEvent(scrollCallback, callback, jankJumperList);
    }
  }

  private handleRenderServiceJank(
    data: JankStruct,
    list: unknown[],
    jankJumperList: JankTreeNode[],
    scrollCallback: ((d: unknown) => void) | undefined,
    callback: ((data: Array<unknown>) => void) | undefined
  ): void {
    if (data.src_slice) {
      queryFlowsData(data.src_slice!.split(',')).then((it) => {
        if (it.length > 0) {
          list.push({
            name: 'FrameTimeLine flows',
            value: '',
          });
          it.forEach((a: unknown) => {
            // @ts-ignore
            let appNode = new JankTreeNode(a.name, a.pid, 'app');
            // @ts-ignore
            appNode.children.push(new JankTreeNode(a.name, a.pid, 'frameTime'));
            jankJumperList.push(appNode);
            list.push({
              name: 'Slice',
              value:
                // @ts-ignore
                a.cmdline +
                ' [' +
                // @ts-ignore
                a.name +
                ']' +
                // @ts-ignore
                `<lit-icon  class="jank_cla" style="display: inline-flex;cursor: pointer;transform: scaleX(-1);margin-left: 5px" id="actual frameTime" slice_name="${a.name}" pid="${a.pid}" name="select" color="#7fa1e7" size="20"></lit-icon>`,
            });
          });
          list.push({
            name: 'Following flows',
            value: '',
          });
          it.forEach((a: unknown) => {
            list.push({
              name: 'Slice',
              value:
                // @ts-ignore
                a.cmdline +
                ' [' +
                // @ts-ignore
                a.name +
                ']' +
                // @ts-ignore
                `<lit-icon class="jank_cla" style="display: inline-flex;cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="${a.type}-${a.pid}" slice_name="${a.name}"  pid="${a.pid}" name="select" color="#7fa1e7" size="20"></lit-icon>`,
            });
          });
          this.currentSelectionTbl!.dataSource = list;
          this.addJankScrollCallBackEvent(scrollCallback, callback, jankJumperList);
        }
      });
    } else {
      this.currentSelectionTbl!.dataSource = list;
    }
  }

  setAllStartupData(data: AllAppStartupStruct, scrollCallback: Function): void {
    this.setTableHeight('550px');
    this.initCanvas();
    let allStartUpLeftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
    let allStartUpmiddleTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightText');
    let allStartUpRightButton: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightButton');
    if (allStartUpmiddleTitle) {
      allStartUpmiddleTitle.style.visibility = 'hidden';
    }
    if (allStartUpRightButton) {
      allStartUpRightButton.style.visibility = 'hidden';
    }
    if (allStartUpLeftTitle) {
      allStartUpLeftTitle.innerText = 'Details';
    }
    let list: unknown[] = [];
    list.push({ name: 'Name', value: data.stepName! });
    list.push({
      name: 'StartTime(Relative)',
      value: getTimeString(data.startTs || 0),
    });
    list.push({
      name: 'StartTime(Absolute)',
      // @ts-ignore
      value: ((data.startTs || 0) + (window as unknown).recordStartNS) / 1000000000 + 's',
    });
    list.push({
      name: 'EndTime(Relative)',
      value: getTimeString((data.startTs || 0) + (data.dur || 0)),
    });
    list.push({
      name: 'EndTime(Abslute)',
      // @ts-ignore
      value: ((data.startTs || 0) + (data.dur || 0) + (window as unknown).recordStartNS) / 1000000000 + 's',
    });
    list.push({
      name: 'Dur',
      value: getTimeString(data.dur || 0),
    });
    this.currentSelectionTbl!.dataSource = list;
  }

  setStartupData(data: AppStartupStruct, scrollCallback: Function, rowData: unknown): void {
    this.setTableHeight('550px');
    this.initCanvas();
    this.setStartUpStyle();
    let list: unknown[] = [];
    list.push({ name: 'Name', value: AppStartupStruct.getStartupName(data.startName) });
    list.push({
      name: 'StartTime(Relative)',
      value: `
      <div style="display: flex;white-space: nowrap;align-items: center">
<div style="white-space:pre-wrap">${getTimeString(data.startTs || 0)}</div>
<lit-icon style="cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="start-jump" name="select" color="#7fa1e7" size="20"></lit-icon>
</div>`,
    });
    list.push({
      name: 'StartTime(Absolute)',
      // @ts-ignore
      value: ((data.startTs || 0) + (window as unknown).recordStartNS) / 1000000000 + 's',
    });
    if (data.dur && data.dur > 0) {
      list.push({
        name: 'EndTime(Relative)',
        value: `<div style="white-space: nowrap;display: flex;align-items: center">
<div style="white-space:pre-wrap">${getTimeString((data.startTs || 0) + (data.dur || 0))}</div>
<lit-icon style="cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="end-jump" name="select" color="#7fa1e7" size="20"></lit-icon>
</div>`,
      });
      list.push({
        name: 'EndTime(Absolute)',
        // @ts-ignore
        value: ((data.startTs || 0) + (data.dur || 0) + (window as unknown).recordStartNS) / 1000000000 + 's',
      });
    } else {
      list.push({
        name: 'EndTime(Relative)',
        value: 'Unknown Time',
      });
      list.push({
        name: 'EndTime(Absolute)',
        value: 'Unknown Time',
      });
    }
    list.push({ name: 'Duration', value: getTimeString(data.dur || 0) });
    // @ts-ignore
    let sortedArray = rowData.slice().sort(function (a: { startTs: number }, b: { startTs: number }) {
      return a.startTs - b.startTs;
    });
    sortedArray.forEach((item: unknown, index: number) => {
      // @ts-ignore
      if (item.startName === data.startName) {
        list.push({
          name: 'StartSlice',
          value:
            index === 0
              ? 'NULL'
              : `${AppStartupStruct.getStartupName(sortedArray[index - 1].startName)}     ${getTimeString(
                  sortedArray[index - 1].startTs + sortedArray[index - 1].dur
                )}`,
        });
        list.push({
          name: 'EndSlice',
          value:
            index === sortedArray.length - 1
              ? 'NULL'
              : `${AppStartupStruct.getStartupName(sortedArray[index + 1].startName)}      ${getTimeString(
                  sortedArray[index + 1].startTs
                )}`,
        });
      }
    });
    this.currentSelectionTbl!.dataSource = list;
    this.attachScrollHandlers(data, scrollCallback);
  }

  private setStartUpStyle(): void {
    let rightButton: HTMLElement | null | undefined = this?.shadowRoot
      ?.querySelector('#rightButton')
      ?.shadowRoot?.querySelector('#custom-button');
    let startUpRightTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightTitle');
    if (startUpRightTitle) {
      startUpRightTitle.style.visibility = 'hidden';
      rightButton!.style.visibility = 'hidden';
    }
    let startUpLeftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
    if (startUpLeftTitle) {
      startUpLeftTitle.innerText = 'Details';
    }
  }

  private attachScrollHandlers(data: AppStartupStruct, scrollCallback: Function): void {
    let startIcon = this.currentSelectionTbl?.shadowRoot?.querySelector('#start-jump');
    let endIcon = this.currentSelectionTbl?.shadowRoot?.querySelector('#end-jump');
    let scrollClick = (type: number): void => {
      // @ts-ignore
      let recordNs: number = (window as unknown).recordStartNS;
      let useEnd = type === 1 && data.startName! < 6;
      queryThreadByItid(
        useEnd ? data.endItid! : data.itid!,
        useEnd ? recordNs + data.startTs! + data.dur! : recordNs + data.startTs!
      ).then((result) => {
        if (result.length > 0) {
          //@ts-ignore
          let pt: {
            pid: number;
            tid: number;
            dur: number;
            name: string;
            depth: number;
          } = result[0];
          scrollCallback({
            pid: pt.pid,
            tid: pt.tid,
            type: 'func',
            dur: pt.dur,
            depth: pt.depth,
            funName: pt.name,
            startTs: useEnd ? (data.startTs || 0) + (data.dur || 0) : data.startTs,
            keepOpen: true,
          });
        }
      });
    };
    if (startIcon) {
      startIcon.addEventListener('click', () => scrollClick(0));
    }
    if (endIcon) {
      endIcon.addEventListener('click', () => scrollClick(1));
    }
  }

  setStaticInitData(data: SoStruct, scrollCallback: Function): void {
    this.setTableHeight('550px');
    this.initCanvas();
    this.setStaticInitStyle();
    let list: unknown[] = [];
    list.push({ name: 'Name', value: data.soName });
    list.push({
      name: 'StartTime(Relative)',
      value: `<div style="white-space: nowrap;display: flex;align-items: center">
<div style="white-space:pre-wrap">${getTimeString(data.startTs || 0)}</div>
<lit-icon id="start-jump" style="cursor:pointer;transform: scaleX(-1);margin-left: 5px" name="select" color="#7fa1e7" size="20"></lit-icon>
</div>`,
    });
    list.push({
      name: 'StartTime(Absolute)',
      // @ts-ignore
      value: ((data.startTs || 0) + (window as unknown).recordStartNS) / 1000000000 + 's',
    });
    list.push({ name: 'Duration', value: getTimeString(data.dur || 0) });
    this.currentSelectionTbl!.dataSource = list;
    this.startIconClickEvent(data, scrollCallback);
  }

  private setStaticInitStyle(): void {
    let rightTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightTitle');
    let rightButton: HTMLElement | null | undefined = this?.shadowRoot
      ?.querySelector('#rightButton')
      ?.shadowRoot?.querySelector('#custom-button');
    if (rightTitle) {
      rightTitle.style.visibility = 'hidden';
      rightButton!.style.visibility = 'hidden';
    }
    let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
    if (leftTitle) {
      leftTitle.innerText = 'Details';
    }
  }

  private startIconClickEvent(data: SoStruct, scrollCallback: Function): void {
    let startIcon = this.currentSelectionTbl?.shadowRoot?.querySelector('#start-jump');
    if (startIcon) {
      startIcon.addEventListener('click', () => {
        // @ts-ignore
        let recordNs: number = (window as unknown).recordStartNS;
        queryThreadByItid(data.itid!, recordNs + data.startTs!).then((result) => {
          if (result.length > 0) {
            //@ts-ignore
            let pt: {
              pid: number;
              tid: number;
              dur: number;
              name: string;
              depth: number;
            } = result[0];
            scrollCallback({
              pid: pt.pid,
              tid: pt.tid,
              type: 'func',
              dur: pt.dur,
              depth: pt.depth,
              funName: pt.name,
              startTs: data.startTs,
              keepOpen: true,
            });
          }
        });
      });
    }
  }

  async setFrameAnimationData(data: FrameAnimationStruct, scrollCallback: Function): Promise<void> {
    this.setTableHeight('550px');
    this.tabCurrentSelectionInit('Animation Details');
    let list = [];
    let dataTs: number = data.startTs < 0 ? 0 : data.startTs;
    list.push({ name: 'Name', value: data.name });
    list.push({ name: 'Start time(Relative)', value: `${Utils.getTimeString(dataTs)}` });
    list.push({
      name: 'Start time(Absolute)',
      // @ts-ignore
      value: ((dataTs || 0) + (window as unknown).recordStartNS) / 1000000000 + 's',
    });
    list.push({
      name: 'End time(Relative)',
      value: `${Utils.getTimeString(dataTs + (data.dur || 0))}`,
    });
    list.push({
      name: 'End time(Absolute)',
      // @ts-ignore
      value: (dataTs + (data.dur || 0) + (window as unknown).recordStartNS) / 1000000000 + 's',
    });
    list.push({ name: 'Duration', value: `${Utils.getTimeString(data.dur || 0)}` });
    if (data.status === 'Completion delay') {
      let frameFpsMessage = data.frameInfo?.split(':');
      if (frameFpsMessage) {
        if (frameFpsMessage[1] !== '0') {
          if (this.isFpsAvailable) {
            list.push({
              name: 'FPS',
              value: `<div style="white-space: nowrap;display: flex;align-items: center">
            <div style="white-space:pre-wrap">${frameFpsMessage[1]}</div>
            <lit-icon style="cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="fps-jump" name="select" color="#7fa1e7" size="20"></lit-icon>
            </div>`,
            });
          } else {
            list.push({ name: 'FPS', value: `${frameFpsMessage[1]}` });
          }
        } else {
          let fixedNumber: number = 2;
          let fpsValue: number = Number(frameFpsMessage[0]) / (data.dur / 1000_000_000);
          list.push({ name: 'FPS', value: `${fpsValue.toFixed(fixedNumber) || 0}` });
        }
      }
    }
    this.currentSelectionTbl!.dataSource = list;
    this.fpsClickEvent(data, scrollCallback);
  }

  private fpsClickEvent(data: FrameAnimationStruct, scrollCallback: Function): void {
    let queryJoinName = `${data.frameInfo?.split(':')[1]}: ${data.name?.split(':')![1]}`;
    // @ts-ignore
    let recordNs: number = (window as unknown).recordStartNS;
    this.currentSelectionTbl?.shadowRoot?.querySelector('#fps-jump')?.addEventListener('click', () => {
      queryFpsSourceList(data.inputTime, data.endTime, queryJoinName).then((result) => {
        if (result.length > 0) {
          this.isFpsAvailable = true;
          let pt: {
            pid: number;
            tid: number;
            name: string;
            ts: number;
            dur: number;
            depth: number;
          } = result[0];
          scrollCallback({
            pid: pt.tid,
            tid: pt.tid,
            dur: pt.dur,
            type: 'func',
            depth: pt.depth,
            funName: pt.name,
            startTs: pt.ts - recordNs,
            keepOpen: true,
          });
        } else {
          this.isFpsAvailable = false;
        }
      });
    });
  }

  private setJankType(data: JankStruct, list: unknown[]): void {
    if (data.jank_tag === 1) {
      if (data.frame_type === 'render_service') {
        list.push({ name: 'Jank Type', value: 'RenderService Deadline Missed' });
      } else if (data.frame_type === 'app') {
        list.push({ name: 'Jank Type', value: 'APP Deadline Missed' });
      } else if (data.frame_type === 'frameTime') {
        list.push({ name: 'Jank Type', value: 'Deadline Missed' });
      }
    } else if (data.jank_tag === 3) {
      list.push({ name: 'Jank Type', value: 'Deadline Missed' });
    } else {
      list.push({ name: 'Jank Type', value: 'NONE' });
    }
  }

  private setJankCommonMessage(list: unknown[], data: JankStruct): void {
    list.push({ name: 'Name', value: data.name });
    list.push({ name: 'StartTime(Relative)', value: getTimeString(data.ts || 0) });
    list.push({
      name: 'StartTime(Absolute)',
      // @ts-ignore
      value: ((data.ts || 0) + (window as unknown).recordStartNS) / 1000000000 + 's',
    });
    list.push({ name: 'Duration', value: data.dur ? getTimeString(data.dur) : ' ' });
    if (data.frame_type !== 'frameTime') {
      list.push({ name: 'Process', value: data.cmdline + ' ' + data.pid });
    }
  }

  private setTableHeight(height: string): void {
    this.scrollView!.scrollTop = 0;
    this.currentSelectionTbl!.style.height = height;
    this.wakeupListTbl!.style.display = 'none';
  }

  private addJankScrollCallBackEvent(
    scrollCallback: ((d: unknown) => void) | undefined,
    callback: ((data: Array<unknown>) => void) | undefined,
    jankJumperList: JankTreeNode[]
  ): void {
    let all = this.currentSelectionTbl?.shadowRoot?.querySelectorAll('.jank_cla');
    all!.forEach((a) => {
      a.addEventListener('click', () => {
        if (scrollCallback) {
          scrollCallback({
            rowId: a.id,
            name: a.getAttribute('slice_name'),
            pid: a.getAttribute('pid'),
          });
        }
      });
    });
    if (callback) {
      callback(jankJumperList);
    }
  }

  async queryThreadStateDArgs(argSetID: number | undefined): Promise<BinderArgBean[]> {
    let list: Array<BinderArgBean> = [];
    if (argSetID !== undefined && argSetID > 0) {
      list = await queryThreadStateArgs(argSetID);
    }
    return list;
  }

  /**
   * 查询出 线程被唤醒的 线程信息
   * @param data
   */
  async queryCPUWakeUpFromData(data: CpuStruct): Promise<WakeupBean | null> {
    let wb: WakeupBean | null = null;
    if (data.id === undefined || data.startTime === undefined) {
      return null;
    }
    let wakeup = await queryRunnableTimeByRunning(data.tid!, data.startTime);
    if (wakeup && wakeup[0]) {
      let wakeupTs = wakeup[0].ts as number;
      let recordStartTs = window.recordStartNS;
      let wf = await queryThreadWakeUpFrom(data.id, wakeupTs);
      if (wf && wf[0]) {
        wb = wf[0];
        if (wb !== null) {
          wb.wakeupTime = wakeupTs - recordStartTs;
          wb.process = Utils.PROCESS_MAP.get(wb.pid!) || 'Process';
          wb.thread = Utils.THREAD_MAP.get(wb.tid!) || 'Thread';
          wb.schedulingLatency = (data.startTime || 0) - (wb.wakeupTime || 0);
          wb.schedulingDesc = INPUT_WORD;
        }
      }
    }
    return wb;
  }

  /**
   * 查询出 线程被唤醒的 线程链信息
   * @param data
   */
  static async queryCPUWakeUpListFromBean(data: WakeupBean): Promise<WakeupBean | null> {
    let wb: WakeupBean | null = null;
    let wakeup = await queryRunnableTimeByRunning(data.tid!, data.ts!);
    if (wakeup && wakeup[0]) {
      let wakeupTs = wakeup[0].ts as number;
      // @ts-ignore
      let recordStartTs = (window as unknown).recordStartNS;
      let wf = await queryThreadWakeUpFrom(data.itid!, wakeupTs);
      if (wf && wf[0]) {
        wb = wf[0];
        if (wb !== null) {
          wb.wakeupTime = wakeupTs - recordStartTs;
          wb.process = Utils.PROCESS_MAP.get(wb.pid!) || 'Process';
          wb.thread = Utils.THREAD_MAP.get(wb.tid!) || 'Thread';
          wb.schedulingLatency = (data.ts || 0) - (wb.wakeupTime || 0);
          wb.schedulingDesc = INPUT_WORD;
        }
      }
    }
    return wb;
  }

  /**
   * 查询出 线程唤醒了哪些线程信息
   */
  async queryThreadWakeUpFromData(itid: number, startTime: number, dur: number): Promise<unknown> {
    // @ts-ignore
    let wakeUps = await queryThreadWakeUpFrom(itid, startTime + (window as unknown).recordStartNS);
    if (wakeUps !== undefined && wakeUps.length > 0) {
      return wakeUps[0];
    } else {
      return;
    }
  }

  /**
   * 查询出 线程唤醒了哪些线程信息
   */
  async queryThreadWakeUpData(itid: number, startTime: number, dur: number): Promise<Array<WakeupBean>> {
    let list: Array<WakeupBean> = [];
    if (itid === undefined || startTime === undefined) {
      return list;
    }
    let wakeUps = await queryThreadWakeUp(itid, startTime, dur); //  3,4835380000
    if (wakeUps !== undefined && wakeUps.length > 0) {
      list.push(...wakeUps);
    }
    return list;
  }

  initCanvas(): HTMLCanvasElement | null {
    let canvas = this.shadowRoot!.querySelector<HTMLCanvasElement>('#rightDraw');
    let width = getComputedStyle(this.currentSelectionTbl!).getPropertyValue('width');
    if (canvas !== null) {
      canvas.width = Math.round(Number(width.replace('px', '')) * this.dpr);
      canvas.height = Math.round(Number(200 * this.dpr));
      canvas.style.width = width;
      canvas.style.height = '200px';
      canvas.getContext('2d')!.scale(this.dpr, this.dpr);
    }
    SpApplication.skinChange = (val: boolean): void => {
      this.drawRight(canvas, this.weakUpBean!);
    };
    return canvas;
  }

  drawRight(cavs: HTMLCanvasElement | null, wakeupBean: WakeupBean | null): void {
    if (cavs === null) {
      return;
    }
    let context = cavs.getContext('2d');
    if (context !== null) {
      //绘制竖线
      this.drawVerticalLine(context);
      //绘制菱形
      context.lineWidth = 1;
      context.beginPath();
      context.moveTo(10, 30);
      context.lineTo(4, 40);
      context.lineTo(10, 50);
      context.lineTo(16, 40);
      context.lineTo(10, 30);
      context.closePath();
      context.fill();
      context.font = 12 + 'px sans-serif';
      //绘制wake up 文字
      let strList = [];
      strList.push('wakeup @ ' + getTimeString(wakeupBean?.wakeupTime || 0) + ' on CPU ' + wakeupBean?.cpu + ' by');
      strList.push('P:' + wakeupBean?.process + ' [ ' + wakeupBean?.pid + ' ]');
      strList.push('T:' + wakeupBean?.thread + ' [ ' + wakeupBean?.tid + ' ]');
      strList.forEach((str, index) => {
        if (context !== null) {
          context.fillText(str, 40, 40 + 16 * index);
        }
      });
      context.lineWidth = 2;
      context.lineJoin = 'bevel';
      context.moveTo(10, 95);
      context.lineTo(20, 90);
      context.moveTo(10, 95);
      context.lineTo(20, 100);
      context.moveTo(10, 95);
      context.lineTo(80, 95);
      context.lineTo(70, 90);
      context.moveTo(80, 95);
      context.lineTo(70, 100);
      context.stroke();
      //绘制latency
      context.font = 12 + 'px sans-serif';
      context.fillText('Scheduling latency:' + getTimeString(wakeupBean?.schedulingLatency || 0), 90, 100);
      //绘制最下方提示语句
      context.font = 10 + 'px sans-serif';
      INPUT_WORD.split('\n').forEach((str, index) => {
        context?.fillText(str, 90, 120 + 12 * index);
      });
    }
  }

  private drawVerticalLine(context: CanvasRenderingContext2D): void {
    if (document.querySelector<SpApplication>('sp-application')!.dark) {
      context.strokeStyle = '#ffffff';
      context.fillStyle = '#ffffff';
    } else {
      context.strokeStyle = '#000000';
      context.fillStyle = '#000000';
    }
    context.lineWidth = 2;
    context.moveTo(10, 15);
    context.lineTo(10, 125);
    context.stroke();
  }

  transferString(str: string): string {
    let s = '';
    if (str.length === 0) {
      return '';
    }
    s = str.replace(/&/g, '&amp;');
    s = s.replace(/</g, '&lt;');
    s = s.replace(/>/g, '&gt;');
    s = s.replace(/\'/g, '&#39;');
    s = s.replace(/\"/g, '&#quat;');
    return s;
  }

  initElements(): void {
    this.currentSelectionTbl = this.shadowRoot?.querySelector<LitTable>('#selectionTbl');
    this.wakeupListTbl = this.shadowRoot?.querySelector<LitTable>('#wakeupListTbl');
    this.scrollView = this.shadowRoot?.querySelector<HTMLDivElement>('#scroll_view');
    this.currentSelectionTbl?.addEventListener('column-click', (ev: unknown): void => {}); //@ts-ignore
    window.subscribe(window.SmartEvent.UI.WakeupList, (data: Array<WakeupBean>) => this.showWakeupListTableData(data));
  }

  showWakeupListTableData(data: Array<WakeupBean>): void {
    this.wakeupListTbl!.style.display = 'flex';
    let cpus: number[] = [];
    let itids: number[] = [];
    let ts: number[] = [];
    let maxPriority = 0;
    let maxPriorityDuration = 0;
    let maxDuration = 0;
    data.forEach((it) => {
      cpus.push(it.cpu!);
      itids.push(it.itid!);
      ts.push(it.ts!);
    });
    queryWakeupListPriority(itids, ts, cpus).then((res) => {
      let resource = data.map((it) => {
        let wake = {
          process: `${it.process}(${it.pid})`,
          thread: `${it.thread}(${it.tid})`,
          cpu: it.cpu,
          dur: it.dur,
          priority: 0,
          isSelected: false,
        };
        //@ts-ignore
        let find = res.find((re) => re.cpu === it.cpu && re.itid === it.itid && re.ts === it.ts);
        if (find) {
          //@ts-ignore
          wake.priority = find.priority;
        }
        maxDuration = Math.max(maxDuration, it.dur!);
        maxPriority = Math.max(maxPriority, wake.priority);
        return wake;
      });
      if (this.selectWakeupBean) {
        // 点击第一层唤醒树时向数组头部添加当前点击信息
        if (data[0].schedulingLatency) {
          // @ts-ignore
          resource.unshift(this.selectWakeupBean);
        }
        // @ts-ignore
        maxDuration = Math.max(maxDuration, this.selectWakeupBean.dur);
        // @ts-ignore
        maxPriority = Math.max(maxPriority, this.selectWakeupBean.priority);
      }
      resource.forEach((it) => {
        if (it.priority === maxPriority) {
          maxPriorityDuration = Math.max(it.dur || 0, maxPriorityDuration);
        }
      });
      this.updateTableSettings(maxPriority, maxPriorityDuration, maxDuration);
      this.wakeupListTbl!.recycleDataSource = resource;
    });
  }

  private updateTableSettings(maxPriority: number, maxPriorityDuration: number, maxDuration: number): void {
    this.wakeupListTbl!.getItemTextColor = (data: unknown): string => {
      // @ts-ignore
      if ((data.priority === maxPriority && data.dur === maxPriorityDuration) || data.dur === maxDuration) {
        return '#f44336';
      } else {
        return '#262626';
      }
    };
  }

  addTableObserver(): void {
    let leftTable = this.shadowRoot?.querySelector('.table-left');
    this.tableObserver?.observe(leftTable!, {
      attributes: true,
      attributeFilter: ['style'],
      attributeOldValue: true,
    });
  }

  initHtml(): string {
    return TabPaneCurrentSelectionHtml;
  }
}

export class JankTreeNode {
  name: string = '';
  pid: number = -1;
  frameType: string = '';
  type: number = 0;

  constructor(name: string, pid: number, frameType: string) {
    this.name = name;
    this.pid = pid;
    this.frameType = frameType;
  }

  children: Array<JankTreeNode> = [];
}

export class ThreadTreeNode {
  tid: number = 0;
  pid: number = -1;
  startTime: number = 1;

  constructor(tid: number, pid: number, startTime: number) {
    this.tid = tid;
    this.pid = pid;
    this.startTime = startTime;
  }
}