infra-sk/modules/paramset-sk/paramset-sk-demo.ts

import './index';
import { ParamSetSk, ParamSetSkClickEventDetail } from './paramset-sk';
import { ParamSet } from 'common-sk/modules/query';

const paramset: ParamSet = {
  arch: ['Arm7', 'Arm64', 'x86_64', 'x86'],
  bench_type: ['micro', 'playback', 'recording'],
  compiler: ['GCC', 'MSVC', 'Clang'],
  cpu_or_gpu: ['GPU', 'CPU'],
};

const paramset2: ParamSet = {
  arch: ['Arm7'],
  bench_type: ['playback', 'recording'],
  compiler: [],
  extra_config: ['Android', 'Android_NoGPUThreads'],
  cpu_or_gpu: ['GPU'],
};

const set1 = document.querySelector<ParamSetSk>('#set1')!;
const set2 = document.querySelector<ParamSetSk>('#set2')!;
const set3 = document.querySelector<ParamSetSk>('#set3')!;

const key = document.querySelector<HTMLPreElement>('#key')!;
const value = document.querySelector<HTMLPreElement>('#value')!;

set1.paramsets = [paramset];

set2.paramsets = [paramset, paramset2];
set2.titles = ['Set 1', 'Set 2'];

set3.paramsets = [paramset];
set3.titles = ['Clickable Values Only'];

set2.addEventListener('paramset-key-click', (e: Event) => {
  const detail = (e as CustomEvent<ParamSetSkClickEventDetail>).detail;
  key.textContent = JSON.stringify(detail, null, '  ');
});

set2.addEventListener('paramset-key-value-click', (e) => {
  const detail = (e as CustomEvent<ParamSetSkClickEventDetail>).detail;
  value.textContent = JSON.stringify(detail, null, '  ');
});

set3.addEventListener('paramset-key-value-click', (e) => {
  const detail = (e as CustomEvent<ParamSetSkClickEventDetail>).detail;
  value.textContent = JSON.stringify(detail, null, '  ');
});

document.querySelector('#highlight')!.addEventListener('click', () => {
  set1.highlight = { arch: 'Arm7', cpu_or_gpu: 'GPU' };
  set2.highlight = { arch: 'Arm7', cpu_or_gpu: 'GPU' };
  set3.highlight = { arch: 'Arm7', cpu_or_gpu: 'GPU' };
});

document.querySelector('#clear')!.addEventListener('click', () => {
  set1.highlight = {};
  set2.highlight = {};
  set3.highlight = {};
});