<commit_before><template>

  <div class="k-timecontroller-container"
       @click="onTimelineClick" @mousemove="onTimelineMouseMove" @mouseout="onTimelineMouseOut">

    <q-resize-observer @resize="onResize" />

    <div v-bind:style="pointerContainerStyle"
         class="k-interval-pointer-container"
    >
      <k-time-pointer
        :position="position"
        :time="currentValue"
        :formatter="timeFormatter"
        :componentLeft="componentLeft"
        :componentWidth="componentWidth"
        :pointerColor="pointerColor"
        :pointerTextColor="pointerTextColor"
        @change="onChangePosition"
        @changePointer="onChangePointer"
      />

      <k-time-indicator
        :position="timeIndicatorPosition"
        :time="timeIndicatorValue"
        :visible="timeIndicatorIsVisible"
        :formatter="timeFormatter"
        :componentLeft="componentLeft"
        :componentWidth="componentWidth"
        :color="color"
        :textColor="pointerTextColor"
        :timePointerLeft="timePointerLeft"
        :timePointerRight="timePointerRight"
        :timePointerHeight="timePointerHeight"
      />
    </div>

    <div class="k-timecontroller-currenttime" v-bind:style="currentTimeStyle"></div>

    <div class="k-timecontroller-activebar" v-bind:style="activeBarStyle"></div>
    <div class="k-timecontroller-bar" v-bind:style="barStyle" ref="timeControllerBar"></div>

    <div v-bind:style="tickContainerStyle"
         class="k-interval-ticks-container"
    >
      <k-time-interval
        v-for="interval in timeIntervals" :key="interval.value"
        :color="color"
        :interval="interval"
        :formatter="timeFormatter"
        :intervalDisplayWidth="intervalDisplayWidth"
        :labelFontSize="labelFontSize"
      />
    </div>

  </div>

</template>

<script>
import { QResizeObserver, colors } from 'quasar'
import mixins from '../../mixins'
import KTimeInterval from './KTimeInterval'
import KTimePointer from './KTimePointer'
import KTimeIndicator from './KTimeIndicator'

export default {
  name: 'k-time-controller',
  components: {
    QResizeObserver,
    KTimeInterval,
    KTimePointer,
    KTimeIndicator
  },
  mixins: [mixins.rangeCompute],
  props: {
    lineHeight: { type: Number, default: 4 },
    color: { type: String, default: colors.getBrand('primary') },
    activeColor: { type: String, default: colors.getBrand('secondary') },
    pointerColor: { type: String, default: colors.getBrand('secondary') },
    pointerTextColor: { type: String, default: 'white' },
    labelFontSize: { type: Number, default: 16 }
  },
  data () {
    return {
      componentLeft: null,
      componentWidth: null,
      timeIndicatorPosition: null,
      timeIndicatorValue: null,
      timeIndicatorIsVisible: false,
      timeNow: null,
      timeUpdater: null,
      timePointerLeft: null,
      timePointerRight: null,
      timePointerHeight: null
    }
  },
  mounted () {
    this.updateComponentDimensions()

    // update current time immediately, and then every 30 seconds
    this.updateTime()
    this.timeUpdater = setInterval(this.updateTime, 30000)
  },
  beforeDestroy () {
    clearInterval(this.timeUpdater)
  },
  computed: {
    barStyle () {
      return {
        height: this.barHeight(),
        width: '100%',
        backgroundColor: this.color,
        borderRadius: '2px'
      }
    },
    activeBarStyle () {
      const activeBarWidth = this.activeBarWidth()

      return {
        height: this.barHeight(),
        width: activeBarWidth,
        backgroundColor: this.activeColor,
        borderRadius: activeBarWidth === '100%' ? '2px' : '2px 0 0 2px'
      }
    },
    currentTimeStyle () {
      const timeNowPosition = this.calculatePosition(this.timeNow, this.min, this.max, this.componentWidth)

      return {
        marginLeft: timeNowPosition + 'px',
        height: this.barHeight(),
        width: '6px',
        backgroundColor: this.pointerColor
      }
    },
    tickContainerStyle () {
      return {
        height: '18px', // TODO make configurable
        top: this.barHeight()
      }
    },<commit_msg>Changed current time color in time controller<commit_after><template>

  <div class="k-timecontroller-container"
       @click="onTimelineClick" @mousemove="onTimelineMouseMove" @mouseout="onTimelineMouseOut">

    <q-resize-observer @resize="onResize" />

    <div v-bind:style="pointerContainerStyle"
         class="k-interval-pointer-container"
    >
      <k-time-pointer
        :position="position"
        :time="currentValue"
        :formatter="timeFormatter"
        :componentLeft="componentLeft"
        :componentWidth="componentWidth"
        :pointerColor="pointerColor"
        :pointerTextColor="pointerTextColor"
        @change="onChangePosition"
        @changePointer="onChangePointer"
      />

      <k-time-indicator
        :position="timeIndicatorPosition"
        :time="timeIndicatorValue"
        :visible="timeIndicatorIsVisible"
        :formatter="timeFormatter"
        :componentLeft="componentLeft"
        :componentWidth="componentWidth"
        :color="color"
        :textColor="pointerTextColor"
        :timePointerLeft="timePointerLeft"
        :timePointerRight="timePointerRight"
        :timePointerHeight="timePointerHeight"
      />
    </div>

    <div class="k-timecontroller-currenttime" v-bind:style="currentTimeStyle"></div>

    <div class="k-timecontroller-activebar" v-bind:style="activeBarStyle"></div>
    <div class="k-timecontroller-bar" v-bind:style="barStyle" ref="timeControllerBar"></div>

    <div v-bind:style="tickContainerStyle"
         class="k-interval-ticks-container"
    >
      <k-time-interval
        v-for="interval in timeIntervals" :key="interval.value"
        :color="color"
        :interval="interval"
        :formatter="timeFormatter"
        :intervalDisplayWidth="intervalDisplayWidth"
        :labelFontSize="labelFontSize"
      />
    </div>

  </div>

</template>

<script>
import { QResizeObserver, colors } from 'quasar'
import mixins from '../../mixins'
import KTimeInterval from './KTimeInterval'
import KTimePointer from './KTimePointer'
import KTimeIndicator from './KTimeIndicator'

export default {
  name: 'k-time-controller',
  components: {
    QResizeObserver,
    KTimeInterval,
    KTimePointer,
    KTimeIndicator
  },
  mixins: [mixins.rangeCompute],
  props: {
    lineHeight: { type: Number, default: 4 },
    color: { type: String, default: colors.getBrand('primary') },
    activeColor: { type: String, default: colors.getBrand('secondary') },
    pointerColor: { type: String, default: colors.getBrand('secondary') },
    pointerTextColor: { type: String, default: 'white' },
    labelFontSize: { type: Number, default: 16 }
  },
  data () {
    return {
      componentLeft: null,
      componentWidth: null,
      timeIndicatorPosition: null,
      timeIndicatorValue: null,
      timeIndicatorIsVisible: false,
      timeNow: null,
      timeUpdater: null,
      timePointerLeft: null,
      timePointerRight: null,
      timePointerHeight: null
    }
  },
  mounted () {
    this.updateComponentDimensions()

    // update current time immediately, and then every 30 seconds
    this.updateTime()
    this.timeUpdater = setInterval(this.updateTime, 30000)
  },
  beforeDestroy () {
    clearInterval(this.timeUpdater)
  },
  computed: {
    barStyle () {
      return {
        height: this.barHeight(),
        width: '100%',
        backgroundColor: this.color,
        borderRadius: '2px'
      }
    },
    activeBarStyle () {
      const activeBarWidth = this.activeBarWidth()

      return {
        height: this.barHeight(),
        width: activeBarWidth,
        backgroundColor: this.activeColor,
        borderRadius: activeBarWidth === '100%' ? '2px' : '2px 0 0 2px'
      }
    },
    currentTimeStyle () {
      const timeNowPosition = this.calculatePosition(this.timeNow, this.min, this.max, this.componentWidth)

      return {
        marginLeft: timeNowPosition + 'px',
        height: this.barHeight(),
        width: '6px',
        backgroundColor: this.pointerTextColor
      }
    },
    tickContainerStyle () {
      return {
        height: '18px', // TODO make configurable
        top: this.barHeight()
      }
    },
{'fraction_non_alphanumeric': 0.12436609514609998, 'fraction_numerical': 0.006037189084762135, 'mean_word_length': 2.934916864608076, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 41, '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': '7478952', 'n_tokens_mistral': 2432, 'n_tokens_neox': 2397, 'n_words': 444}