/**
 * @module modules/commands-sk

 * @description A list view of draw commands for a single frame, and a tool for
 * filtering them. contains the logic for processing the parsed json object from
 * wasm, and extracting things like layer info and command counts which drive
 * other modules.
 *
 * Contains play-sk as a submodule, which playes over the filtered list of
 * commands.
 *
 * Data flows along this path in one direction depending on which end triggers a
 * change.
 * filter text box <=> this._includedSet <=> histogram-sk
 *
 * @evt histogram-update: An event containing the list of histogram entries.
 *      Emitted every time the histogram is recomputed.
 *
 * @evt move-command-position: When the play-sk module or user selects a different
 * command, this event is emitted, and it's detail contains the command index in
 * the unfiltered command list for this frame.
 *
 */
import { define } from 'elements-sk/define';
import { html, TemplateResult } from 'lit-html';
import { ElementDocSk } from '../element-doc-sk/element-doc-sk';
import { PlaySk, PlaySkMoveToEventDetail } from '../play-sk/play-sk';
import { HistogramSkToggleEventDetail } from '../histogram-sk/histogram-sk'
import { DefaultMap } from '../default-map';

import 'elements-sk/icon/save-icon-sk';
import 'elements-sk/icon/content-copy-icon-sk';
import 'elements-sk/icon/image-icon-sk';

import { SkpJsonCommandList, SkpJsonCommand, SkpJsonAuditTrail, SkpJsonGpuOp } from '../debugger';

import '../play-sk';

export interface CommandsSkMovePositionEventDetail {
  // the index of a command in the frame to which the wasm view should move.
  position: number,
  // true if we're currently paused
  paused: boolean,
}

export type CommandRange = [number, number];

// Represents one of the icons that can appear on a command
export interface PrefixItem {
  icon: string,
  color: string,
  count: number,
};

/** A processed command object, created from a SkpJsonCommand */
export interface Command {
  // Index of the command in the unfiltered list.
  index: number,
  // the save/restore depth before this command is executed.
  depth: number,
  // the parsed json representation of the command. exact type depends on the command.
  details: SkpJsonCommand,
  name: string,
  // if this command is one of an indenting pair, the command index range that the pair enclose
  // (save, restore)
  range?: CommandRange,
  prefixes: PrefixItem[],
  // Whether the command will be executed during playback
  visible: boolean,
  // index of any image referenced by this command
  imageIndex?: number,
};

/** An entry of the command histogram
 *  obtained by totalling up occurances in the range filtered command list
 */
export interface HistogramEntry {
  // name of a command (original CamelCase)
  name: string,
  // number of occurances in the current frame (or the whole file for a single-frame SKP)
  countInFrame: number,
  // number of occurances in the current range filter
  countInRange: number,
}

/** An event detail containing a new histogram
 * or new filter set to be displayed by the histogram-sk module.
 * The event may update one or both of the two fields.
 */
export interface CommandsSkHistogramEventDetail {
  /** A newly computed histogram that needs to be displayed by histogram-sk */
  hist?: HistogramEntry[];
  /** whether the command is include by the filter */
  included?: Set<string>;
}

// Information about layers collected by processCommands.
// TODO(nifong): This could be collected in the C++ and returned from
// getLayerSummaries and then commands-sk wouldn't have to be involved
// with layer things at all.
export interface LayerInfo {
  // A Map from layer ids to command indices where they were drawn
  // with a DrawImageRectLayer command. Includes only layer used this frame
  uses: DefaultMap<number, number[]>;
  // A map from layer ids to names that were provided in the render node annotations.
  // This should be sufficient for it to always contain what we attempt to look up.
  // Only valid for the duration of this frame.
  names: Map<number, string>;
}

// Jumpting to a command by it's unfiltered index can be done by emitting
// 'jump-command' with this event detail
export interface CommandsSkJumpEventDetail {
  unfilteredIndex: number;
}

// event issued when the user clicks 'Image' to jump to this image with this id.
export interface CommandsSkSelectImageEventDetail {
  id: number;
}

// Colors to use for gpu op ids
const COLORS = [
    "#1B9E77",
    "#D95F02",
    "#7570B3",
    "#E7298A",
    "#66A61E",
    "#E6AB02",
    "#A6761D",
    "#666666",
    "#09c5d2",
    "#064f77",
    "#3a4ce4",
    "#d256f0",
    "#feb4c7",
    "#fa3029",
    "#ff6821",
    "#a8ff21",
    "#a5cf80",
    "#36d511",
    "#95f19c",
  ];
// Commands that increase save/restore depth
const INDENTERS: {[key: string]: PrefixItem} = {
  'Save':             { icon: 'save-icon-sk',         color: '#B2DF8A', count: 1 },
  'SaveLayer':        { icon: 'content-copy-icon-sk', color: '#FDBF6F', count: 1 },
  'BeginDrawPicture': { icon: 'image-icon-sk',        color: '#A6CEE3', count: 1 },
};
// commands that decrease save/restore depth
const OUTDENTERS: string[] = ['Restore', 'EndDrawPicture'];

export class CommandsSk extends ElementDocSk {
  private static template = (ele: CommandsSk) =>
    html`
    <div>
      ${CommandsSk.filterTemplate(ele)}
      <div class="horizontal-flex">
        <button @click=${ele._opIdFilter} class="short">Show By Op-Id</button>
        <play-sk .visual=${'full'}></play-sk>
      </div>
      <div class="list">
        ${ ele._filtered.map((i: number, filtPos: number) =>
          CommandsSk.opTemplate(ele, filtPos, ele._cmd[i])) }
      </div>
    </div>`;

  private static opTemplate = (ele: CommandsSk, filtpos: number, op: Command) =>
    html`<div class="op" id="op-${op.index}" @click=${
      (e: MouseEvent) => {ele._clickItem(e, filtpos)}}>
      <details>
        <summary class="command-summary ${ ele.position == op.index ? 'selected' : ''}">
          <div class="command-icons-group">
            <span class="index">${op.index}</span>
            ${ op.prefixes.map((pre: PrefixItem) =>
              CommandsSk.prefixItemTemplate(ele, pre)) }
          </div>
          <div class="command-title">${ op.name }</div>
          <code class="short-desc">${ op.details.shortDesc }</code>
          ${ op.range
            ? html`<button @click=${() => {ele.range = op.range!}}
        title="Range-filter the command list to this save/restore pair">Zoom</button>`
            : ''
          }
          ${ op.imageIndex
            ? html`<button @click=${()=>{ele._jumpToImage(op.imageIndex!)}}
                title="Show the image referenced by this command in the resource viewer"
                >Image</button>`
            : ''
          }
          <div class="gpu-ops-group">
            ${ (op.details.auditTrail && op.details.auditTrail.Ops)
              ? op.details.auditTrail.Ops.map((gpuOp: SkpJsonGpuOp) =>
                  CommandsSk.gpuOpIdTemplate(ele, gpuOp) )
              : ''
            }
          </div>
        </summary>
        <div>
          <checkbox-sk title="Toggle command visibility" checked=${ op.visible }
                       @change=${ele._toggleVisible(op.index)}></checkbox-sk>
          <strong>Index: </strong> <span class=index>${op.index}</span>
        </div>
        ${ele._renderRullOpRepresentation(ele, op)}
      </details>
    </div>
    <hr>`;

  private static prefixItemTemplate = (ele: CommandsSk, item: PrefixItem) =>
    html`${ ele._icon(item) }
      ${ item.count > 1
        ? html`<div title="depth of indenting operation"
          class=count>${ item.count }</div>`
        : ''
      }`;

  private static gpuOpIdTemplate = (ele: CommandsSk, gpuOp: SkpJsonGpuOp) =>
    html`<span title="GPU Op ID - group of commands this was executed with on the GPU"
            class="gpu-op-id" style="background: ${ ele._gpuOpColor(gpuOp.OpsTaskID) }"
      >${ gpuOp.OpsTaskID }</span>`;

  private static filterTemplate = (ele: CommandsSk) =>
    html`
    <div class="horizontal-flex">
      <label title="Filter command names (Single leading ! negates entire filter).
Command types can also be filted by clicking on their names in the histogram"
        >Filter</label>
      <input @change=${ele._textFilter} value="!DrawAnnotation"
             id="text-filter"></input>&nbsp;
      <label>Range</label>
      <input @change=${ele._rangeInputHandler} class=range-input value="${ ele._range[0] }"
             id="rangelo"></input>
      <b>:</b>
      <input @change=${ele._rangeInputHandler} class=range-input value="${ ele._range[1] }"
             id="rangehi"></input>
      <button @click=${ele.clearFilter} id="clear-filter-button">Clear</button>
    </div>`;

  // processed command list (no filtering applied). change with processCommands
  private _cmd: Command[] = [];
  // list of indices of commands that passed the range and name filters.
  private _filtered: number[] = [];
  // position in filtered (visible) command list
  private _item: number = 0;
  // range filter
  private _range: CommandRange = [0, 100];
  // counts of command occurances
  private _histogram: HistogramEntry[] = [];
  // known command names (set by processCommands) names are lowercased.
  private _available = new Set<string>();
  // subset of command names that should pass the command filter
  // (names are lowercased)
  private _includedSet = new Set<string>();
  // Play bar submodule
  private _playSk: PlaySk | null = null;
  // information about layers collected from commands
  private _layerInfo: LayerInfo = {
    uses: new DefaultMap<number, number[]>(() => []),
    names: new Map<number, string>(),
  };

  // the command count with no filtering
  get count() {
    return this._cmd.length;
  }
  // the command count with all filters applied
  get countFiltered() {
    return this._filtered.length;
  }

  get layerInfo(): LayerInfo {
    return this._layerInfo;
  }

  // set the current playback position in the list
  // (index in filtered list)
  set item(i: number) {
    this._item = i;
    this.querySelector<HTMLDivElement>('#op-' + this._filtered[this._item]
      )?.scrollIntoView({block: 'nearest'});
    this._render();
    // notify debugger-page-sk that it needs to draw this.position
    this.dispatchEvent(
      new CustomEvent<CommandsSkMovePositionEventDetail>(
        'move-command-position', {
          detail: {position: this.position, paused: this._playSk!.mode === 'pause'},
          bubbles: true,
        }));
    this._playSk!.movedTo(this._item);
  }

  // get the playback index in _cmd after filtering is applied.
  get position() {
    return this._filtered[this._item];
  }

  set range(range: CommandRange) {
    this._range = range;
    this._applyRangeFilter();
  }

  set textFilter(q: string) {
    this.querySelector<HTMLInputElement>('#text-filter')!.value = q;
    if (!this.count) { return; }
    this._textFilter(); // does render
  }

  // Return a list of op indices that pass the current filters.
  get filtered(): number[] {
    return this._filtered;
  }

  constructor() {
    super(CommandsSk.template);
  }

  connectedCallback() {
    super.connectedCallback();
    this._render();

    this._playSk = this.querySelector<PlaySk>('play-sk')!;

    this._playSk.addEventListener('moveto', (e) => {
      this.item = (e as CustomEvent<PlaySkMoveToEventDetail>).detail.item;
    });

    this.addDocumentEventListener('toggle-command-inclusion', (e) => {
      this._toggleName((e as CustomEvent<HistogramSkToggleEventDetail>).detail.name);
    });

    // Jump to a command by it's unfiltered index.
    this.addDocumentEventListener('jump-command', (e) => {
      const i = (e as CustomEvent<CommandsSkJumpEventDetail>).detail.unfilteredIndex;
      const filteredIndex = this._filtered.findIndex(e => e==i);
      if (filteredIndex !== undefined) {
        this.item = filteredIndex;
      }
    });
  }

  // _processCommands iterates over the commands to extract several things.
  //  * A depth at every command based on Save/Restore pairs.
  //  * A histogram showing how many times each type of command is used.
  //  * A map from layer node ids to the index of any layer use events in the command list.
  //  * The full set of command names that occur
  processCommands(cmd: SkpJsonCommandList) {
    const commands: Command[] = [];
    let depth = 0;
    const prefixes: PrefixItem[] = []; // A stack of indenting commands
    // Match up saves and restores, a stack of indices
    const matchup: number[] = [];
    // All command types that occur in this frame
    this._available = new Set<string>();
    interface tally {
      count_in_frame: number,
      count_in_range_filter: number,
    }

    this._layerInfo.uses = new DefaultMap<number, number[]>(() => []);
    this._layerInfo.names = new Map<number, string>();

    // Finds things like "RenderNode(id=10, name='DecorView')"
    const renderNodeRe = /^RenderNode\(id=([0-9]+), name='([A-Za-z0-9_]+)'\)/;

    cmd.commands.forEach((com, i) => {
      const name = com.command;
      this._available.add(name.toLowerCase());

      const out: Command = {
        index: i,
        depth: depth,
        details: com, // unaltered object from json
        name: name,
        prefixes: [],
        visible: true,
      };

      // DrawCommand.cpp will write this field if the command references an image
      if (com.imageIndex) {
        out.imageIndex = com.imageIndex;
      }

      if (name in INDENTERS) {
        depth++;

        matchup.push(i);
        // If this is the same type of indenting op we've already seen
        // then just increment the count, otherwise add as a new
        // op in prefixes.
        if (depth > 1 && prefixes[prefixes.length-1].icon
            == INDENTERS[name].icon) {
          prefixes[prefixes.length-1].count++;
        } else {
          prefixes.push(this._copyPrefix(INDENTERS[name]));
        }
      } else if (OUTDENTERS.indexOf(name) !== -1) {
        depth--;

        // Now that we can match an OUTDENTER with an INDENTER we can set
        // the _zoom property for both commands.
        const begin: number = matchup.pop()!;
        const range = [begin, i] as CommandRange;
        out.range = range;
        commands[begin].range = range;

        // Only pop the op from prefixes if its count has reached 1.
        if (prefixes[prefixes.length-1].count > 1) {
          prefixes[prefixes.length-1].count--;
        } else {
          prefixes.pop();
        }
        out.depth = depth;
      } else if (name === 'DrawImageRectLayer') {
        // A command indicating that a render node with an offscreen buffer (android only)
        // was drawn as an image.
        const node = com.layerNodeId!;
        this._layerInfo.uses.get(node).push(i);
      } else if (name === 'DrawAnnotation') {
        // DrawAnnotation is a bit of metadata added by the android view system.
        // All render nodes have names, but not all of them are drawn with offscreen buffers
        const annotationKey = com.key;
        const found = com.key!.match(renderNodeRe);
        if (found) {
          // group 1 is the render node id
          // group 2 is the name of the rendernode.
          this._layerInfo.names.set(parseInt(found[1]), found[2]);
        }
      }

      // deep copy prefixes because we want a snapshot of the current list and counts
      out.prefixes = prefixes.map((p: PrefixItem) => this._copyPrefix(p));

      commands.push(out);
    });

    this._cmd = commands;
    this.range = [0, this._cmd.length-1]; // this assignment also triggers render
  }

  // User clicked the clear filter button, clear both filters
  clearFilter() {
    this.querySelector<HTMLInputElement>('#text-filter')!.value = '';
    if (!this.count) { return; }
    this.range = [0, this._cmd.length-1]; // setter triggers _applyRangeFilter, follow that
  }

  // Stop playback and move by a given offset in the filtered list.
  keyMove(offset: number) {
    this._playSk!.mode = 'pause';
    this.item = Math.max(0, Math.min(this._item + offset, this.countFiltered));
  }

  end() {
    this.item = this._filtered.length - 1;
  }

  private _clickItem(e: MouseEvent, filtIndex: number) {
    if (this._item !== filtIndex) {
      // Don't open the dropdown unless you click the already selected item again
      e.preventDefault();
    }
    this.item = filtIndex;
  }

  // filter change coming from histogram
  private _toggleName(name: string) {
    const lowerName = name.toLowerCase();
    if (!this._available.has(lowerName)) {
      return;
    }
    if (this._includedSet.has(lowerName)) {
      this._includedSet.delete(lowerName);
    } else {
      this._includedSet.add(lowerName);
    }

    // represent _includedSet as a negative text filter and put it in the box
    const diff = new Set(this._available);
    for (let c of this._includedSet) {
        diff.delete(c)
    }
    let filter = '';
    if (diff.size > 0) {
      filter = '!'+Array.from(diff).join(' ');
    }
    this.querySelector<HTMLInputElement>('#text-filter')!.value = filter;
    // don't trigger _textFilter() since that would send an event back to histogram and
    // start an infinite loop. this._includedSet is correct, apply it and render.
    this._applyCommandFilter();
  }

  // Returns a JSON string representation of the command, augmentend with visually rich
  // or interactive elements for certain types.
  private _renderRullOpRepresentation(ele: CommandsSk, op: Command) {
    // Use json.stringify's replacer feature to replace certain objects.
    // we would like to replace them directly with html templates, but json.stringify
    // toStrings them, so instead replace them with a magic string and add the template
    // to a list, then replace those magic strings with items from the list afterwards.

    // An unlikely string meaning 'insert html template here'
    const magic = '546rftvyghbjjkjiuytre';
    // a list of templates to be used to replaces occurrences of magic.
    const inserts: TemplateResult[] = [];
    const replacer = function(name: string, value: any) {
      if (name === 'imageIndex') {
        // Show a clickable button that takes the user to the image resource viewer.
        inserts.push(html`<b>${value}</b>
          <button @click=${()=>{ele._jumpToImage(value)}}
          title="Show the image referenced by this command in the resource viewer"
          >Image</button>`);
        return magic;
      }
      return value;
    }
    const strung = JSON.stringify(op.details, replacer, 2);
    // JSON.stringify adds some quotes around the magic word.
    // including these in our delimeter removes them.
    const jsonparts = strung.split('"'+magic+'"');
    let result = [html`${jsonparts[0]}`];
    for (let i = 1; i < jsonparts.length; i++) {
      result.push(inserts[i-1]);
      result.push(html`${jsonparts[i]}`)
    }
    return html`<pre>${result}</pre>`;
  }

  private _jumpToImage(index: number){
    this.dispatchEvent(new CustomEvent<CommandsSkSelectImageEventDetail>(
      'select-image', {
        detail: { id: index },
        bubbles: true,
      }));
  }

  // (index is in the unfiltered list)
  private _toggleVisible(index: number){
    this._cmd[index].visible = !this._cmd[index].visible;
  }

  // lit-html does not appear to support setting a tag's name with a ${} so here's
  // a crummy workaround
  private _icon(item: PrefixItem) {
    if (item.icon === 'save-icon-sk') {
      return html`<save-icon-sk style="fill: ${ item.color };"
        class=icon> </save-icon-sk>`;
    } else if (item.icon === 'content-copy-icon-sk') {
      return html`<content-copy-icon-sk style="fill: ${ item.color };"
        class=icon> </content-copy-icon-sk>`;
    } else if (item.icon === 'image-icon-sk') {
      return html`<image-icon-sk style="fill: ${ item.color };"
        class=icon> </image-icon-sk>`;
    }
  }

  // Any deterministic mapping between integers and colors will do
  private _gpuOpColor(index: number) {
    return COLORS[index % COLORS.length];
  }

  // deep copy
  private _copyPrefix(p: PrefixItem): PrefixItem {
    return {icon: p.icon, color: p.color, count: p.count};
  }

  private _rangeInputHandler(e: Event) {
    const lo = parseInt(this.querySelector<HTMLInputElement>('#rangelo')!.value);
    const hi = parseInt(this.querySelector<HTMLInputElement>('#rangehi')!.value);
    this.range = [lo, hi];
  }

  // parse the text filter input, and if it is possible to represent it purely as
  // a command filter, store it in this._includedSet
  private _textFilter() {
    let rawFilter = this.querySelector<HTMLInputElement>('#text-filter'
      )!.value.trim().toLowerCase();
    const negative = (rawFilter[0] == '!');

    // make sure to copy it so we don't alter this._available
    this._includedSet = new Set<string>(this._available);

    if (rawFilter !== '') {
      if (negative) {
        rawFilter = rawFilter.slice(1).trim();
        const tokens = rawFilter.split(/\s+/);
        // negative filters can always be represented with histogram selections
        for (const token of tokens) {
          this._includedSet.delete(token);
        }
      } else {
        // for positive filters, the text could either be a set of command names,
        // or a free text search.
        const tokens = rawFilter.split(/\s+/);
        this._includedSet = new Set<string>();
        for (const token of tokens) {
          if (this._available.has(token)) {
            this._includedSet.add(token);
          } else {
            // not a command name, bail out, reset this, do a free text search
            this._includedSet = new Set<string>(this._available);
            // since we just altered this._includedSet we have to let histogram know.
            this.dispatchEvent(new CustomEvent<CommandsSkHistogramEventDetail>(
              'histogram-update', {
                detail: { included: new Set<string>(this._includedSet) },
                bubbles: true,
              }));
            this._freeTextSearch(tokens);
            // TODO(nifong): need some visual feedback to let the user know
            console.log(`Query interpreted as free text search because ${token}\
 doesn't appear to be a command name`);
            return;
          }
        }
      }
    }
    this.dispatchEvent(new CustomEvent<CommandsSkHistogramEventDetail>(
        'histogram-update', {
          detail: { included: new Set<string>(this._includedSet) },
          bubbles: true,
        }));
    this._applyCommandFilter(); // note we still do this for emtpy filters.
  }

  private _freeTextSearch(tokens: string[]) {
    // Free text search every command's json representation and include its index in
    // this._filtered if any token is found
    const matches = function(s: string) {
      for (const token of tokens) {
        if (s.indexOf(token) >= 0) {
          return true;
        }
      }
      return false;
    }
    this._filtered = [];
    for (let i = this._range[0]; i <= this._range[1]; i++) {
      const commandText = JSON.stringify(this._cmd[i].details).toLowerCase();
      if (matches(commandText)) {
        this._filtered.push(i);
      }
    }
    this._render();
    if (this._filtered.length > 0) {
      this.item = this._filtered.length - 1; // after render because it causes a scroll
    }
  }

  // Applies range filter and recalculates command name histogram.
  // The range filter is the first filter applied. The histogram shows any command
  // that passes
  // the range filter, and shows a nonzero count for any command that passes the command
  // filter.
  private _applyRangeFilter() {
    // Despite the name, there's not much to "apply" but
    // the histogram needs to change when the range filter changes which is
    // why this function is seperate from _applyCommandFilter

    // Calculate data for histogram
    // Each command type gets two different counts
    interface tally {
      count_in_frame: number,
      count_in_range_filter: number,
    }
    const counts = new DefaultMap<string, tally>(() => ({
      count_in_frame: 0,
      count_in_range_filter: 0
    }));
    for (let i = 0; i < this._cmd.length; i++) {
      let c = this._cmd[i];
      counts.get(c.name).count_in_frame += 1; // always increment first count
      if (i >= this._range[0] && i <= this._range[1]) {
        counts.get(c.name)!.count_in_range_filter += 1; // optionally increment filtered count.
      }
    }

    // Now format the histogram as a sorted array suitable for use in the template.
    // First convert the counts map into an Array of HistogramEntry.
    this._histogram = [];
    counts.forEach((value, key) => {
      this._histogram.push({
        name: key,
        countInFrame: value.count_in_frame,
        countInRange: value.count_in_range_filter,
      })
    });
    // Now sort the array, descending on the rangeCount, ascending
    // on the op name.
    // sort by rangeCount so entries don't move on enable/disable
    this._histogram.sort(function(a,b) {
      if (a.countInRange == b.countInRange) {
        if (a.name < b.name) {
          return -1;
        }
        if (a.name > b.name) {
          return 1;
        }
        return 0;
      } else {
        return b.countInRange - a.countInRange;
      }
    });

    // the user's selections are present in the text filter. Apply them now
    // triggers render
    this._textFilter();
    // that populated this._includedSet, which we also need to notify histogram of.

    // send this to the histogram element
    this.dispatchEvent(
      new CustomEvent<CommandsSkHistogramEventDetail>(
        'histogram-update', {
          detail: {
            hist: this._histogram,
            // Make a copy so listener can't accidently write to it.
            included: new Set<string>(this._includedSet),
          },
          bubbles: true,
        }));
  }

  // Apply a filter specified by this._includedSet and set the filtered list to be visible.
  private _applyCommandFilter() {
    // Try to retain the user's playback position in the unfiltered list when doing this
    // (it is not always possible)
    const oldPos = this._filtered[this._item];
    let newPos: number | null = null;
    this._filtered = [];
    for (let i = this._range[0]; i <= this._range[1]; i++) {
      if (this._includedSet.has(this._cmd[i].name.toLowerCase())) {
        this._filtered.push(i);
        if (i === oldPos) {
          newPos = this._filtered.length - 1;
        }
      }
    }
    this._playSk!.size = this._filtered.length;
    this._render(); // gotta render before you can scroll
    if (newPos !== null) {
      this.item = newPos; // setter triggers scroll
    } else {
      this.item = this._filtered.length - 1;
    }
  }

  // Filters out all but the last command of each gpu op group
  // Experimental, probably breaks assumptions elsewhere
  private _opIdFilter() {
    this._filtered = [];

    const commandsOfEachOp = new DefaultMap<number, number[]>(() => []);
    this._cmd.forEach((command, index) => {
      if (command.details.auditTrail &&
          command.details.auditTrail.Ops) {
        const opid = command.details.auditTrail.Ops[0].OpsTaskID;
        commandsOfEachOp.get(opid).push(index);
      }
    });
    const sortedKeys: number[] = Array.from(commandsOfEachOp.keys());
    sortedKeys.sort((a, b) => a - b); // force it to sort as a number, not a string
    sortedKeys.forEach((k) => {
      commandsOfEachOp.get(k)!.forEach((i) => {
        this._filtered.push(i);
      });
    });


    this._playSk!.size = this._filtered.length;
    this.item = this._filtered.length - 1;
  }
}

define('commands-sk', CommandsSk);