src/frontend/record_widgets.ts

// Copyright (C) 2019 The Android Open Source Project
//
// 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 {Draft, produce} from 'immer';
import m from 'mithril';

import {copyToClipboard} from '../base/clipboard';
import {assertExists} from '../base/logging';
import {Actions} from '../common/actions';
import {RecordConfig} from '../controller/record_config_types';

import {globals} from './globals';

export declare type Setter<T> = (draft: Draft<RecordConfig>, val: T) => void;
export declare type Getter<T> = (cfg: RecordConfig) => T;

function defaultSort(a: string, b: string) {
  return a.localeCompare(b);
}

// +---------------------------------------------------------------------------+
// | Docs link with 'i' in circle icon.                                        |
// +---------------------------------------------------------------------------+

interface DocsChipAttrs {
  href: string;
}

class DocsChip implements m.ClassComponent<DocsChipAttrs> {
  view({attrs}: m.CVnode<DocsChipAttrs>) {
    return m(
      'a.inline-chip',
      {href: attrs.href, title: 'Open docs in new tab', target: '_blank'},
      m('i.material-icons', 'info'),
      ' Docs',
    );
  }
}

// +---------------------------------------------------------------------------+
// | Probe: the rectangular box on the right-hand-side with a toggle box.      |
// +---------------------------------------------------------------------------+

export interface ProbeAttrs {
  title: string;
  img: string | null;
  compact?: boolean;
  descr: m.Children;
  isEnabled: Getter<boolean>;
  setEnabled: Setter<boolean>;
}

export class Probe implements m.ClassComponent<ProbeAttrs> {
  view({attrs, children}: m.CVnode<ProbeAttrs>) {
    const onToggle = (enabled: boolean) => {
      const traceCfg = produce(globals.state.recordConfig, (draft) => {
        attrs.setEnabled(draft, enabled);
      });
      globals.dispatch(Actions.setRecordConfig({config: traceCfg}));
    };

    const enabled = attrs.isEnabled(globals.state.recordConfig);

    return m(
      `.probe${attrs.compact ? '.compact' : ''}${enabled ? '.enabled' : ''}`,
      attrs.img &&
        m('img', {
          src: `${globals.root}assets/${attrs.img}`,
          onclick: () => onToggle(!enabled),
        }),
      m(
        'label',
        m(`input[type=checkbox]`, {
          checked: enabled,
          oninput: (e: InputEvent) => {
            onToggle((e.target as HTMLInputElement).checked);
          },
        }),
        m('span', attrs.title),
      ),
      attrs.compact
        ? ''
        : m(
            `div${attrs.img ? '' : '.extended-desc'}`,
            m('div', attrs.descr),
            m('.probe-config', children),
          ),
    );
  }
}

export function CompactProbe(args: {
  title: string;
  isEnabled: Getter<boolean>;
  setEnabled: Setter<boolean>;
}) {
  return m(Probe, {
    title: args.title,
    img: null,
    compact: true,
    descr: '',
    isEnabled: args.isEnabled,
    setEnabled: args.setEnabled,
  } as ProbeAttrs);
}

// +-------------------------------------------------------------+
// | Toggle: an on/off switch.
// +-------------------------------------------------------------+

export interface ToggleAttrs {
  title: string;
  descr: string;
  cssClass?: string;
  isEnabled: Getter<boolean>;
  setEnabled: Setter<boolean>;
}

export class Toggle implements m.ClassComponent<ToggleAttrs> {
  view({attrs}: m.CVnode<ToggleAttrs>) {
    const onToggle = (enabled: boolean) => {
      const traceCfg = produce(globals.state.recordConfig, (draft) => {
        attrs.setEnabled(draft, enabled);
      });
      globals.dispatch(Actions.setRecordConfig({config: traceCfg}));
    };

    const enabled = attrs.isEnabled(globals.state.recordConfig);

    return m(
      `.toggle${enabled ? '.enabled' : ''}${attrs.cssClass || ''}`,
      m(
        'label',
        m(`input[type=checkbox]`, {
          checked: enabled,
          oninput: (e: InputEvent) => {
            onToggle((e.target as HTMLInputElement).checked);
          },
        }),
        m('span', attrs.title),
      ),
      m('.descr', attrs.descr),
    );
  }
}

// +---------------------------------------------------------------------------+
// | Slider: draggable horizontal slider with numeric spinner.                 |
// +---------------------------------------------------------------------------+

export interface SliderAttrs {
  title: string;
  icon?: string;
  cssClass?: string;
  isTime?: boolean;
  unit: string;
  values: number[];
  get: Getter<number>;
  set: Setter<number>;
  min?: number;
  description?: string;
  disabled?: boolean;
  zeroIsDefault?: boolean;
}

export class Slider implements m.ClassComponent<SliderAttrs> {
  onValueChange(attrs: SliderAttrs, newVal: number) {
    const traceCfg = produce(globals.state.recordConfig, (draft) => {
      attrs.set(draft, newVal);
    });
    globals.dispatch(Actions.setRecordConfig({config: traceCfg}));
  }

  onTimeValueChange(attrs: SliderAttrs, hms: string) {
    try {
      const date = new Date(`1970-01-01T${hms}.000Z`);
      if (isNaN(date.getTime())) return;
      this.onValueChange(attrs, date.getTime());
    } catch {}
  }

  onSliderChange(attrs: SliderAttrs, newIdx: number) {
    this.onValueChange(attrs, attrs.values[newIdx]);
  }

  view({attrs}: m.CVnode<SliderAttrs>) {
    const id = attrs.title.replace(/[^a-z0-9]/gim, '_').toLowerCase();
    const maxIdx = attrs.values.length - 1;
    const val = attrs.get(globals.state.recordConfig);
    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
    let min = attrs.min || 1;
    if (attrs.zeroIsDefault) {
      min = Math.min(0, min);
    }
    const description = attrs.description;
    const disabled = attrs.disabled;

    // Find the index of the closest value in the slider.
    let idx = 0;
    for (; idx < attrs.values.length && attrs.values[idx] < val; idx++) {}

    let spinnerCfg = {};
    if (attrs.isTime) {
      spinnerCfg = {
        type: 'text',
        pattern: '(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}', // hh:mm:ss
        value: new Date(val).toISOString().substr(11, 8),
        oninput: (e: InputEvent) => {
          this.onTimeValueChange(attrs, (e.target as HTMLInputElement).value);
        },
      };
    } else {
      const isDefault = attrs.zeroIsDefault && val === 0;
      spinnerCfg = {
        type: 'number',
        value: isDefault ? '' : val,
        placeholder: isDefault ? '(default)' : '',
        oninput: (e: InputEvent) => {
          this.onValueChange(attrs, +(e.target as HTMLInputElement).value);
        },
      };
    }
    return m(
      '.slider' + (attrs.cssClass || ''),
      m('header', attrs.title),
      description ? m('header.descr', attrs.description) : '',
      attrs.icon !== undefined ? m('i.material-icons', attrs.icon) : [],
      m(`input[id="${id}"][type=range][min=0][max=${maxIdx}][value=${idx}]`, {
        disabled,
        oninput: (e: InputEvent) => {
          this.onSliderChange(attrs, +(e.target as HTMLInputElement).value);
        },
      }),
      m(`input.spinner[min=${min}][for=${id}]`, spinnerCfg),
      m('.unit', attrs.unit),
    );
  }
}

// +---------------------------------------------------------------------------+
// | Dropdown: wrapper around <select>. Supports single an multiple selection. |
// +---------------------------------------------------------------------------+

export interface DropdownAttrs {
  title: string;
  cssClass?: string;
  options: Map<string, string>;
  sort?: (a: string, b: string) => number;
  get: Getter<string[]>;
  set: Setter<string[]>;
}

export class Dropdown implements m.ClassComponent<DropdownAttrs> {
  resetScroll(dom: HTMLSelectElement) {
    // Chrome seems to override the scroll offset on creationa, b without this,
    // even though we call it after having marked the options as selected.
    setTimeout(() => {
      // Don't reset the scroll position if the element is still focused.
      if (dom !== document.activeElement) dom.scrollTop = 0;
    }, 0);
  }

  onChange(attrs: DropdownAttrs, e: Event) {
    const dom = e.target as HTMLSelectElement;
    const selKeys: string[] = [];
    for (let i = 0; i < dom.selectedOptions.length; i++) {
      const item = assertExists(dom.selectedOptions.item(i));
      selKeys.push(item.value);
    }
    const traceCfg = produce(globals.state.recordConfig, (draft) => {
      attrs.set(draft, selKeys);
    });
    globals.dispatch(Actions.setRecordConfig({config: traceCfg}));
  }

  view({attrs}: m.CVnode<DropdownAttrs>) {
    const options: m.Children = [];
    const selItems = attrs.get(globals.state.recordConfig);
    let numSelected = 0;
    const entries = [...attrs.options.entries()];
    const f = attrs.sort === undefined ? defaultSort : attrs.sort;
    entries.sort((a, b) => f(a[1], b[1]));
    for (const [key, label] of entries) {
      const opts = {value: key, selected: false};
      if (selItems.includes(key)) {
        opts.selected = true;
        numSelected++;
      }
      options.push(m('option', opts, label));
    }
    const label = `${attrs.title} ${numSelected ? `(${numSelected})` : ''}`;
    return m(
      `select.dropdown${attrs.cssClass || ''}[multiple=multiple]`,
      {
        onblur: (e: Event) => this.resetScroll(e.target as HTMLSelectElement),
        onmouseleave: (e: Event) =>
          this.resetScroll(e.target as HTMLSelectElement),
        oninput: (e: Event) => this.onChange(attrs, e),
        oncreate: (vnode) => this.resetScroll(vnode.dom as HTMLSelectElement),
      },
      m('optgroup', {label}, options),
    );
  }
}

// +---------------------------------------------------------------------------+
// | Textarea: wrapper around <textarea>.                                      |
// +---------------------------------------------------------------------------+

export interface TextareaAttrs {
  placeholder: string;
  docsLink?: string;
  cssClass?: string;
  get: Getter<string>;
  set: Setter<string>;
  title?: string;
}

export class Textarea implements m.ClassComponent<TextareaAttrs> {
  onChange(attrs: TextareaAttrs, dom: HTMLTextAreaElement) {
    const traceCfg = produce(globals.state.recordConfig, (draft) => {
      attrs.set(draft, dom.value);
    });
    globals.dispatch(Actions.setRecordConfig({config: traceCfg}));
  }

  view({attrs}: m.CVnode<TextareaAttrs>) {
    return m(
      '.textarea-holder',
      m(
        'header',
        attrs.title,
        attrs.docsLink && [' ', m(DocsChip, {href: attrs.docsLink})],
      ),
      m(`textarea.extra-input${attrs.cssClass || ''}`, {
        onchange: (e: Event) =>
          this.onChange(attrs, e.target as HTMLTextAreaElement),
        placeholder: attrs.placeholder,
        value: attrs.get(globals.state.recordConfig),
      }),
    );
  }
}

// +---------------------------------------------------------------------------+
// | CodeSnippet: command-prompt-like box with code snippets to copy/paste.    |
// +---------------------------------------------------------------------------+

export interface CodeSnippetAttrs {
  text: string;
  hardWhitespace?: boolean;
}

export class CodeSnippet implements m.ClassComponent<CodeSnippetAttrs> {
  view({attrs}: m.CVnode<CodeSnippetAttrs>) {
    return m(
      '.code-snippet',
      m(
        'button',
        {
          title: 'Copy to clipboard',
          onclick: () => copyToClipboard(attrs.text),
        },
        m('i.material-icons', 'assignment'),
      ),
      m('code', attrs.text),
    );
  }
}

export interface CategoryGetter {
  get: Getter<string[]>;
  set: Setter<string[]>;
}

type CategoriesCheckboxListParams = CategoryGetter & {
  categories: Map<string, string>;
  title: string;
};

export class CategoriesCheckboxList
  implements m.ClassComponent<CategoriesCheckboxListParams>
{
  updateValue(
    attrs: CategoriesCheckboxListParams,
    value: string,
    enabled: boolean,
  ) {
    const traceCfg = produce(globals.state.recordConfig, (draft) => {
      const values = attrs.get(draft);
      const index = values.indexOf(value);
      if (enabled && index === -1) {
        values.push(value);
      }
      if (!enabled && index !== -1) {
        values.splice(index, 1);
      }
    });
    globals.dispatch(Actions.setRecordConfig({config: traceCfg}));
  }

  view({attrs}: m.CVnode<CategoriesCheckboxListParams>) {
    const enabled = new Set(attrs.get(globals.state.recordConfig));
    return m(
      '.categories-list',
      m(
        'h3',
        attrs.title,
        m(
          'button.config-button',
          {
            onclick: () => {
              const config = produce(globals.state.recordConfig, (draft) => {
                attrs.set(draft, Array.from(attrs.categories.keys()));
              });
              globals.dispatch(Actions.setRecordConfig({config}));
            },
          },
          'All',
        ),
        m(
          'button.config-button',
          {
            onclick: () => {
              const config = produce(globals.state.recordConfig, (draft) => {
                attrs.set(draft, []);
              });
              globals.dispatch(Actions.setRecordConfig({config}));
            },
          },
          'None',
        ),
      ),
      m(
        'ul.checkboxes',
        Array.from(attrs.categories.entries()).map(([key, value]) => {
          const id = `category-checkbox-${key}`;
          return m(
            'label',
            {for: id},
            m(
              'li',
              m('input[type=checkbox]', {
                id,
                checked: enabled.has(key),
                onclick: (e: InputEvent) => {
                  const target = e.target as HTMLInputElement;
                  this.updateValue(attrs, key, target.checked);
                },
              }),
              value,
            ),
          );
        }),
      ),
    );
  }
}