android-12.1.0_r1/s

/*
 * Copyright 2020, 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 _ from "lodash";
import { nanos_to_string } from "../transform";
import { transitionMap } from "../utils/consts";

/**
 * Represents a continuous section of the timeline that is rendered into the
 * timeline svg.
 */
class Block {
  /**
   * Create a block.
   * @param {number} startPos - The start position of the block as a percentage
   * of the timeline width.
   * @param {number} width - The width of the block as a percentage of the
   * timeline width.
   */
  constructor(startPos, width) {
    this.startPos = startPos;
    this.width = width;
  }
}

//Represents a continuous section of the tag display that relates to a specific transition
class Transition {
  /**
   * Create a transition.
   * @param {number} startPos - The position of the start tag as a percentage
   * of the timeline width.
   * @param {number} startTime - The start timestamp in ms of the transition.
   * @param {number} endTime - The end timestamp in ms of the transition.
   * @param {number} width - The width of the transition as a percentage of the
   * timeline width.
   * @param {string} color - the color of transition depending on type.
   * @param {number} overlap - number of transitions with which this transition overlaps.
   * @param {string} tooltip - The tooltip of the transition, minus the type of transition.
   */
  constructor(startPos, startTime, endTime, width, color, overlap, tooltip) {
    this.startPos = startPos;
    this.startTime = startTime;
    this.endTime = endTime;
    this.width = width;
    this.color = color;
    this.overlap = overlap;
    this.tooltip = tooltip;
  }
}

/**
 * This Mixin should only be injected into components which have the following:
 * - An element in the template referenced as 'timeline' (this.$refs.timeline).
 */

export default {
  name: 'timeline',
  props: {
    /**
     * A 'timeline' as an array of timestamps
     */
    'timeline': {
      type: Array,
    },
    /**
     * A scale factor is an array of two elements, the min and max timestamps of
     * the timeline
     */
    'scale': {
      type: Array,
    },
    'tags': {
      type: Array,
    },
    'errors': {
      type: Array,
    },
    'flickerMode': {
      type: Boolean,
    }
  },
  data() {
    return {
      /**
       * Is a number representing the percentage of the timeline a block should
       * be at a minimum or what percentage of the timeline a single entry takes
       * up when rendered.
       */
      pointWidth: 1,
    };
  },
  computed: {
    /**
     * Converts the timeline (list of timestamps) to an array of blocks to be
     * displayed. This is to have fewer elements in the rendered timeline.
     * Instead of having one rect for each timestamp in the timeline we only
     * have one for each continuous segment of the timeline. This is to improve
     * both the Vue patching step's performance and the DOM rendering
     * performance.
     */
    timelineBlocks() {
      const blocks = [];

      // The difference in time between two timestamps after which they are no
      // longer rendered as a continuous segment/block.
      const overlapDistanceInTs = (this.scale[1] - this.scale[0]) *
        ((this.crop?.right ?? 1) - (this.crop?.left ?? 0)) *
        1 / (100 - this.pointWidth);

      let blockStartTs = this.timeline[0];
      for (let i = 1; i < this.timeline.length; i++) {
        const lastTs = this.timeline[i - 1];
        const ts = this.timeline[i];
        if (ts - lastTs > overlapDistanceInTs) {
          const block = this.generateTimelineBlock(blockStartTs, lastTs);
          blocks.push(block);
          blockStartTs = ts;
        }
      }

      const blockEndTs = this.timeline[this.timeline.length - 1];
      const block = this.generateTimelineBlock(blockStartTs, blockEndTs);
      blocks.push(block);

      return Object.freeze(blocks);
    },

    //Generates list of transitions to be displayed in flicker mode
    timelineTransitions() {
      const transitions = [];

      //group tags by transition and 'id' property
      const groupedTags = _.groupBy(this.tags, tag => `"${tag.transition} ${tag.id}"`);

      for (const transitionId in groupedTags) {
        const id = groupedTags[transitionId];
        //there are at least two tags per id, maybe more if multiple traces
        // determine which tag is the start (min of start times), which is end (max of end times)
        const startTimes = id.filter(tag => tag.isStartTag).map(tag => tag.timestamp);
        const endTimes = id.filter(tag => !tag.isStartTag).map(tag => tag.timestamp);

        const transitionStartTime = Math.min(...startTimes);
        const transitionEndTime = Math.max(...endTimes);

        //do not freeze new transition, as overlap still to be handled (defaulted to 0)
        const transition = this.generateTransition(
          transitionStartTime,
          transitionEndTime,
          id[0].transition,
          0,
          id[0].layerId,
          id[0].taskId,
          id[0].windowToken
        );
        transitions.push(transition);
      }

      //sort transitions in ascending start position in order to handle overlap
      transitions.sort((a, b) => (a.startPos > b.startPos) ? 1 : -1);

      //compare each transition to the ones that came before
      for (let curr=0; curr<transitions.length; curr++) {
        let processedTransitions = [];

        for (let prev=0; prev<curr; prev++) {
          processedTransitions.push(transitions[prev]);

          if (this.isSimultaneousTransition(transitions[curr], transitions[prev])) {
            transitions[curr].overlap++;
          }
        }

        let overlapStore = processedTransitions.map(transition => transition.overlap);

        if (transitions[curr].overlap === Math.max(...overlapStore)) {
          let previousTransition = processedTransitions.find(transition => {
            return transition.overlap===transitions[curr].overlap;
          });
          if (this.isSimultaneousTransition(transitions[curr], previousTransition)) {
            transitions[curr].overlap++;
          }
        }
      }

      return Object.freeze(transitions);
    },
    errorPositions() {
      if (!this.flickerMode) return [];
      const errorPositions = this.errors.map(
        error => ({ pos: this.position(error.timestamp), ts: error.timestamp })
      );
      return Object.freeze(errorPositions);
    },
  },
  methods: {
    position(item) {
      let pos;
      pos = this.translate(item);
      pos = this.applyCrop(pos);

      return pos * (100 - this.pointWidth);
    },

    translate(cx) {
      const scale = [...this.scale];
      if (scale[0] >= scale[1]) {
        return cx;
      }

      return (cx - scale[0]) / (scale[1] - scale[0]);
    },

    untranslate(pos) {
      const scale = [...this.scale];
      if (scale[0] >= scale[1]) {
        return pos;
      }

      return pos * (scale[1] - scale[0]) + scale[0];
    },

    applyCrop(cx) {
      if (!this.crop) {
        return cx;
      }

      return (cx - this.crop.left) / (this.crop.right - this.crop.left);
    },

    unapplyCrop(pos) {
      if (!this.crop) {
        return pos;
      }

      return pos * (this.crop.right - this.crop.left) + this.crop.left;
    },

    objectWidth(startTs, endTs) {
      return this.position(endTs) - this.position(startTs) + this.pointWidth;
    },

    isSimultaneousTransition(currTransition, prevTransition) {
      return prevTransition.startPos <= currTransition.startPos
        && currTransition.startPos <= prevTransition.startPos+prevTransition.width
        && currTransition.overlap === prevTransition.overlap;
    },

    /**
     * Converts a position as a percentage of the timeline width to a timestamp.
     * @param {number} position - target position as a percentage of the
     *                            timeline's width.
     * @return {number} The index of the closest timestamp in the timeline to
     *                  the target position.
     */
    positionToTsIndex(position) {
      let targetTimestamp = position / (100 - this.pointWidth);
      targetTimestamp = this.unapplyCrop(targetTimestamp);
      targetTimestamp = this.untranslate(targetTimestamp);

      // The index of the timestamp in the timeline that is closest to the
      // targetTimestamp.
      const closestTsIndex = this.findClosestTimestampIndexTo(targetTimestamp);

      return closestTsIndex;
    },

    indexOfClosestElementTo(target, array) {
      let smallestDiff = Math.abs(target - array[0]);
      let closestIndex = 0;
      for (let i = 1; i < array.length; i++) {
        const elem = array[i];
        if (Math.abs(target - elem) < smallestDiff) {
          closestIndex = i;
          smallestDiff = Math.abs(target - elem);
        }
      }

      return closestIndex;
    },

    findClosestTimestampIndexTo(ts) {
      let left = 0;
      let right = this.timeline.length - 1;
      let mid = Math.floor((left + right) / 2);

      while (left < right) {
        if (ts < this.timeline[mid]) {
          right = mid - 1;
        } else if (ts > this.timeline[mid]) {
          left = mid + 1;
        } else {
          return mid;
        }
        mid = Math.floor((left + right) / 2);
      }

      const candidateElements = this.timeline.slice(left - 1, right + 2);
      const closestIndex =
        this.indexOfClosestElementTo(ts, candidateElements) + (left - 1);
      return closestIndex;
    },

    /**
     * Transforms an absolute position in the timeline to a timestamp present in
     * the timeline.
     * @param {number} absolutePosition - Pixels from the left of the timeline.
     * @return {number} The timestamp in the timeline that is closest to the
     *                  target position.
     */
    absolutePositionAsTimestamp(absolutePosition) {
      const timelineWidth = this.$refs.timeline.clientWidth;
      const position = (absolutePosition / timelineWidth) * 100;

      return this.timeline[this.positionToTsIndex(position)];
    },

    /**
     * Handles the block click event.
     * When a block in the timeline is clicked this function will determine
     * the target timeline index and update the timeline to match this index.
     * @param {MouseEvent} e - The mouse event of the click on a timeline block.
     */
    onBlockClick(e) {
      const clickOffset = e.offsetX;
      const timelineWidth = this.$refs.timeline.clientWidth;
      const clickOffsetAsPercentage = (clickOffset / timelineWidth) * 100;

      const clickedOnTsIndex =
        this.positionToTsIndex(clickOffsetAsPercentage - this.pointWidth / 2);

      if (this.disabled) {
        return;
      }

      var timestamp = parseInt(this.timeline[clickedOnTsIndex]);

      //pointWidth is always 1
      //if offset percentage < 1, clickedOnTsIndex becomes negative, leading to a negative index
      if (clickedOnTsIndex < 0) {
        timestamp = parseInt(this.timeline[0])
      }
      this.$store.dispatch('updateTimelineTime', timestamp);
    },

    /**
     * Handles the error click event.
     * When an error in the timeline is clicked this function will update the timeline
     * to match the error timestamp.
     * @param {number} errorTimestamp
     */
    onErrorClick(errorTimestamp) {
      this.$store.dispatch('updateTimelineTime', errorTimestamp);
    },

    /**
     * Generate a block object that can be used by the timeline SVG to render
     * a transformed block that starts at `startTs` and ends at `endTs`.
     * @param {number} startTs - The timestamp at which the block starts.
     * @param {number} endTs - The timestamp at which the block ends.
     * @return {Block} A block object transformed to the timeline's crop and
     *                 scale parameter.
     */
    generateTimelineBlock(startTs, endTs) {
      const blockWidth = this.objectWidth(startTs, endTs);
      return Object.freeze(new Block(this.position(startTs), blockWidth));
    },
    /**
     * Generate a transition object that can be used by the tag-timeline to render
     * a transformed transition that starts at `startTs` and ends at `endTs`.
     * @param {number} startTs - The timestamp at which the transition starts.
     * @param {number} endTs - The timestamp at which the transition ends.
     * @param {string} transitionType - The type of transition.
     * @param {number} overlap - The degree to which the transition overlaps with others.
     * @param {number} layerId - Helps determine if transition is associated with SF trace.
     * @param {number} taskId - Helps determine if transition is associated with WM trace.
     * @param {number} windowToken - Helps determine if transition is associated with WM trace.
     * @return {Transition} A transition object transformed to the timeline's crop and
     *                 scale parameter.
     */
    generateTransition(startTs, endTs, transitionType, overlap, layerId, taskId, windowToken) {
      const transitionWidth = this.objectWidth(startTs, endTs);
      const transitionDesc = transitionMap.get(transitionType).desc;
      const transitionColor = transitionMap.get(transitionType).color;
      var tooltip = `${transitionDesc}. Start: ${nanos_to_string(startTs)}. End: ${nanos_to_string(endTs)}.`;

      if (layerId !== 0 && taskId === 0 && windowToken === "") {
        tooltip += " SF only.";
      } else if ((taskId !== 0 || windowToken !== "") && layerId === 0) {
        tooltip += " WM only.";
      }

      return new Transition(this.position(startTs), startTs, endTs, transitionWidth, transitionColor, overlap, tooltip);
    },
  },
};