<commit_before>import { ref, computed } from '@vue/composition-api'
import { BridgeEvents, parse } from '@vue-devtools/shared-utils'
import { formatTime } from '@front/util/format'

const startTime = ref(0)
const endTime = ref(0)
const minTime = ref(0)
const maxTime = ref(0)

const layers = ref([])

const selectedEvent = ref(null)

export function resetTimeline () {
  const now = Date.now()
  startTime.value = now - 1000
  endTime.value = now
  minTime.value = now - 1000
  maxTime.value = now

  layers.value = [
    {
      id: 'mouse',
      label: 'Mouse',
      color: 0xA451AF,
      events: []
    },
    {
      id: 'keyboard',
      label: 'Keyboard',
      color: 0x8151AF,
      events: []
    },
    {
      id: 'component-event',
      label: 'Component events',
      color: 0x41B883,
      events: []
    }
  ]
}

export function useTime () {
  return {
    startTime,
    endTime,
    minTime,
    maxTime
  }
}

export function useLayers () {
  return {
    layers
  }
}

export function useSelectedEvent () {
  return {
    selectedEvent,
    selectedEventData: computed(() => parse(selectedEvent.value.data)),
    selectedEventTime: computed(() => formatTime(selectedEvent.value.time - minTime.value))
  }
}

export function setupTimelineBridgeEvents (bridge) {
  resetTimeline()

  bridge.on(BridgeEvents.TO_FRONT_TIMELINE_EVENT, ({ layerId, event }) => {
    const layer = layers.value.find(l => l.id === layerId)
    if (!layer) {
      console.error(`Layer ${layerId} not found`)
      return
    }

    // Update scrollbar
    const scrollTime = Math.round(event.time + (maxTime.value - minTime.value) * 0.02)
    if (scrollTime > maxTime.value) {
      if (endTime.value === maxTime.value) {<commit_msg>fix(timeline): event time display<commit_after>import { ref, computed } from '@vue/composition-api'
import { BridgeEvents, parse } from '@vue-devtools/shared-utils'
import { formatTime } from '@front/util/format'

const startTime = ref(0)
const endTime = ref(0)
const minTime = ref(0)
const maxTime = ref(0)

const layers = ref([])

const selectedEvent = ref(null)

export function resetTimeline () {
  const now = Date.now()
  startTime.value = now - 1000
  endTime.value = now
  minTime.value = now - 1000
  maxTime.value = now

  layers.value = [
    {
      id: 'mouse',
      label: 'Mouse',
      color: 0xA451AF,
      events: []
    },
    {
      id: 'keyboard',
      label: 'Keyboard',
      color: 0x8151AF,
      events: []
    },
    {
      id: 'component-event',
      label: 'Component events',
      color: 0x41B883,
      events: []
    }
  ]
}

export function useTime () {
  return {
    startTime,
    endTime,
    minTime,
    maxTime
  }
}

export function useLayers () {
  return {
    layers
  }
}

export function useSelectedEvent () {
  return {
    selectedEvent,
    selectedEventData: computed(() => parse(selectedEvent.value.data)),
    selectedEventTime: computed(() => formatTime(selectedEvent.value.time, 'ms'))
  }
}

export function setupTimelineBridgeEvents (bridge) {
  resetTimeline()

  bridge.on(BridgeEvents.TO_FRONT_TIMELINE_EVENT, ({ layerId, event }) => {
    const layer = layers.value.find(l => l.id === layerId)
    if (!layer) {
      console.error(`Layer ${layerId} not found`)
      return
    }

    // Update scrollbar
    const scrollTime = Math.round(event.time + (maxTime.value - minTime.value) * 0.02)
    if (scrollTime > maxTime.value) {
      if (endTime.value === maxTime.value) {
{'fraction_non_alphanumeric': 0.13529073114565343, 'fraction_numerical': 0.017271157167530225, 'mean_word_length': 2.8568257491675917, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3309523', 'n_tokens_mistral': 1186, 'n_tokens_neox': 1135, 'n_words': 263}