anchor.diff:    //-----------------------------------------
   
     const refreshEventControls = () => {
  -    const prevIndex = getPrevEventIndex();
  -    const nextIndex = getNextEventIndex();
  -    refreshTag($('#prev-tag'), prevIndex);
  -    $('#tag-number-container').html(tagHtml());
  -    refreshTag($('#next-tag'), nextIndex);
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const getPrevEventIndex = () => {
  -    const n = getEventIndex(param.nowIndex);
  +    refreshTag($('#prev-tag'), prevEventIndex());
  +    $('#tag-number-container').html(eventHtml());
  +    refreshTag($('#next-tag'), nextEventIndex());
  +  };
  +
  +  // - - - - - - - - - - - - - - - - - - - - - - - -
  +
  +  const prevEventIndex = () => {
  +    const n = param.nowIndex;
       if (n === null || n === 1) {
         return null;
       } else {
  -      return param.events[n - 1].index;
  -    }
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const getNextEventIndex = () => {
  -    const n = getEventIndex(param.nowIndex);
  +      return n - 1;
  +    }
  +  };
  +
  +  // - - - - - - - - - - - - - - - - - - - - - - - -
  +
  +  const nextEventIndex = () => {
  +    const n = param.nowIndex;
       if (n === null || n === param.events.length - 1) {
         return null;
       } else {
  -      return param.events[n + 1].index;
  -    }
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const getEventIndex = (n) => {
  -    // Finds the index of the event in the param.events
  -    // array whose index equals n.
  -    for (let i = 0; i !== param.events.length; i++) {
  -      if (param.events[i].index === n) {
  -        return i;
  -      }
  -    }
  -    return null;
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const tagHtml = () => {
  +      return n + 1;
  +    }
  +  };
  +
  +  // - - - - - - - - - - - - - - - - - - - - - - - -
  +
  +  const eventHtml = () => {
       return tagTrafficLightHtml(param.nowIndex);
     };
   
     // - - - - - - - - - - - - - - - - - - - - - - - -
   
     const tagTrafficLightHtml = (n) => {
  -    const i = getEventIndex(n);
  -    const colour = (i === null) ? '' : param.events[i].colour;
  +    const colour = param.events[n].colour;
       return `<div id="tag-number" class="${colour}">${n}</div>`;
     };
   
  
positive.code:       .bind('click', () => {
          param.id = id;
          if (inDiffMode()) {
            // Move to the new avatar's first tag.
            // tag zero is created for an avatar when it joins a session.
            // I am assuming that this review page/dialog will only ever
            // be displayed for a tag greater than zero, that is, for a
            // tag corresponding to an actual kata/edit event, even if
            // that event is a non-test event.
            show(1);
          } else {
            // Move to the new avatar's last event.
            // Note: the refresh() will cause nowIndex/wasIndex to become
            // the actual last event.index (rather than -1).
            // Note: The param.avatarName is set above but the
            // param.events array will not match param.avatarName until
            // after refresh() has completed (which is an async call).
            const lastIndex = -1;
            param.wasIndex = lastIndex;
            param.nowIndex = lastIndex;
  
negative.code:     param.nowIndex = index;
      // preserve diff on/off state
      if (diffCheckBox().is(':checked')) {
        param.wasIndex = (prevEventIndex() || 0);
      } else {
        param.wasIndex = index;
      }
  