golden/modules/search-controls-sk/search-controls-sk-demo.ts

import './index';
import { ParamSet, fromParamSet } from '../../../infra-sk/modules/query';
import { $$ } from '../../../infra-sk/modules/dom';
import { SearchControlsSk, SearchCriteria } from './search-controls-sk';

const corpora = [
  'canvaskit',
  'colorImage',
  'gm',
  'image',
  'pathkit',
  'skp',
  'svg',
];

const paramSet: ParamSet = {
  'car make': ['chevrolet', 'dodge', 'ford', 'lincoln motor company'],
  color: ['blue', 'green', 'red'],
  used: ['yes', 'no'],
  year: ['2020', '2019', '2018', '2017', '2016', '2015'],
};

let currentValue: SearchCriteria = {
  corpus: 'gm',
  leftHandTraceFilter: {
    'car make': ['chevrolet', 'dodge', 'ford'],
    color: ['blue'],
    year: ['2020', '2019'],
  },
  rightHandTraceFilter: { color: ['blue'], used: ['yes'] },
  includePositiveDigests: true,
  includeNegativeDigests: true,
  includeUntriagedDigests: true,
  includeDigestsNotAtHead: false,
  includeIgnoredDigests: false,
  minRGBADelta: 100,
  maxRGBADelta: 200,
  mustHaveReferenceImage: true,
  sortOrder: 'descending',
};
updateSearchCriteriaPreview();

const searchControlsSk = new SearchControlsSk();
searchControlsSk.paramSet = paramSet;
searchControlsSk.corpora = corpora;
searchControlsSk.searchCriteria = currentValue;
searchControlsSk.addEventListener('search-controls-sk-change', (e: Event) => {
  currentValue = (e as CustomEvent<SearchCriteria>).detail;
  updateSearchCriteriaPreview();
});
$$('.container')!.appendChild(searchControlsSk);

$$<HTMLButtonElement>('#clear')!.addEventListener('click', () => {
  searchControlsSk.searchCriteria = {
    corpus: 'canvaskit',
    leftHandTraceFilter: {},
    rightHandTraceFilter: {},
    includePositiveDigests: false,
    includeNegativeDigests: false,
    includeUntriagedDigests: false,
    includeDigestsNotAtHead: false,
    includeIgnoredDigests: false,
    minRGBADelta: 0,
    maxRGBADelta: 0,
    mustHaveReferenceImage: false,
    sortOrder: 'ascending',
  };
  currentValue = searchControlsSk.searchCriteria;
  updateSearchCriteriaPreview();
});

// Updates the "Search criteria" section of the demo page.
function updateSearchCriteriaPreview() {
  const set = (selector: string, text: string | number | boolean) =>
    ($$<HTMLSpanElement>(`.preview ${selector}`)!.innerText = text.toString());

  set('.corpus', currentValue.corpus);
  set(
    '.left-hand-trace-filter',
    fromParamSet(currentValue.leftHandTraceFilter)
  );
  set(
    '.right-hand-trace-filter',
    fromParamSet(currentValue.rightHandTraceFilter)
  );
  set('.include-positive-digests', currentValue.includePositiveDigests);
  set('.include-negative-digests', currentValue.includeNegativeDigests);
  set('.include-untriaged-digests', currentValue.includeUntriagedDigests);
  set('.include-digests-not-at-head', currentValue.includeDigestsNotAtHead);
  set('.include-ignored-digests', currentValue.includeIgnoredDigests);
  set('.min-rgba-delta', currentValue.minRGBADelta);
  set('.max-rgba-delta', currentValue.maxRGBADelta);
  set('.sort-order', currentValue.sortOrder);
  set('.must-have-reference-image', currentValue.mustHaveReferenceImage);
}