<commit_before>/**
 * Creation of sub-components used in a ressource request row
 */

import {RectData} from "../../typing/rect-data.d"
import TimeBlock from "../../typing/time-block"
import * as svg from "../../helpers/svg"
import * as misc from "../../helpers/misc"



/**
 * Creates the `rect` that represent the timings in `rectData`
 * @param  {RectData} rectData - Data for block
 * @param  {string} className - className for block `rect`
 */
function makeBlock(rectData: RectData, className: string) {
  const blockHeight = rectData.height - 1
  let rect = svg.newEl("rect", {
    "width": misc.roundNumber(rectData.width / rectData.unit, 2) + "%",
    "height": blockHeight,
    "x": misc.roundNumber(rectData.x / rectData.unit, 2) + "%",
    "y": rectData.y,
    "class": className
  })
  if (rectData.label) {
    rect.appendChild(svg.newEl("title", {
      "text": rectData.label
    })) // Add tile to wedge path
  }
  if (rectData.showOverlay && rectData.hideOverlay) {
    rect.addEventListener("mouseenter", rectData.showOverlay(rectData))
    rect.addEventListener("mouseleave", rectData.hideOverlay(rectData))
  }

  return rect
}

/**
 * Converts a segment to RectData
 * @param  {TimeBlock} segment
 * @param  {RectData} rectData
 * @returns RectData
 */
function segmentToRectData(segment: TimeBlock, rectData: RectData): RectData {
  return {
    "width": segment.total,
    "height": (rectData.height - 6),
    "x": segment.start || 0.001,
    "y": rectData.y,
    "cssClass": segment.cssClass,
    "label": segment.name + " (" + Math.round(segment.start) + "ms - "
    + Math.round(segment.end) + "ms | total: " + Math.round(segment.total) + "ms)",
    "unit": rectData.unit,
    "showOverlay": rectData.showOverlay,
    "hideOverlay": rectData.hideOverlay
  } as RectData
}

/**
 * @param  {RectData} rectData
 * @param  {number} timeTotal
 * @param  {number} firstX
 * @returns SVGTextElement
 */
function createTimingLable(rectData: RectData, timeTotal: number, firstX: number): SVGTextElement {
  const minWidth = 500 // minimum supported diagram width that should show the timing lable uncropped
  const spacingPerc = (5 / minWidth * 100)
  const y = rectData.y + rectData.height / 1.5

  let percStart = (rectData.x + rectData.width) / rectData.unit + spacingPerc
  let txtEl = svg.newTextEl(`${timeTotal}ms`, y, `${misc.roundNumber(percStart, 2)}%`)

  //(pessimistic) estimation of text with to avoid performance penalty of `getBBox`
  let roughTxtWidth = `${timeTotal}ms`.length * 8

  if (percStart + (roughTxtWidth / minWidth * 100) > 100) {
    percStart = firstX / rectData.unit - spacingPerc
    txtEl = svg.newTextEl(`${timeTotal}ms`, y, `${misc.roundNumber(percStart, 2)}%`, { "textAnchor": "end" })
  }

  return txtEl
}

/**
 * Render the block and timings for a request
 * @param  {RectData}         rectData Basic dependencys and globals
 * @param  {Array<TimeBlock>} segments Request and Timing Data
 * @param  {number} timeTotal  - total time of the request
 * @return {SVGElement}                Renerated SVG (rect or g element)
 */
export function createRect(rectData: RectData, segments: Array<TimeBlock>, timeTotal: number): SVGElement {<commit_msg>round time shown in row to ms<commit_after>/**
 * Creation of sub-components used in a ressource request row
 */

import {RectData} from "../../typing/rect-data.d"
import TimeBlock from "../../typing/time-block"
import * as svg from "../../helpers/svg"
import * as misc from "../../helpers/misc"



/**
 * Creates the `rect` that represent the timings in `rectData`
 * @param  {RectData} rectData - Data for block
 * @param  {string} className - className for block `rect`
 */
function makeBlock(rectData: RectData, className: string) {
  const blockHeight = rectData.height - 1
  let rect = svg.newEl("rect", {
    "width": misc.roundNumber(rectData.width / rectData.unit, 2) + "%",
    "height": blockHeight,
    "x": misc.roundNumber(rectData.x / rectData.unit, 2) + "%",
    "y": rectData.y,
    "class": className
  })
  if (rectData.label) {
    rect.appendChild(svg.newEl("title", {
      "text": rectData.label
    })) // Add tile to wedge path
  }
  if (rectData.showOverlay && rectData.hideOverlay) {
    rect.addEventListener("mouseenter", rectData.showOverlay(rectData))
    rect.addEventListener("mouseleave", rectData.hideOverlay(rectData))
  }

  return rect
}

/**
 * Converts a segment to RectData
 * @param  {TimeBlock} segment
 * @param  {RectData} rectData
 * @returns RectData
 */
function segmentToRectData(segment: TimeBlock, rectData: RectData): RectData {
  return {
    "width": segment.total,
    "height": (rectData.height - 6),
    "x": segment.start || 0.001,
    "y": rectData.y,
    "cssClass": segment.cssClass,
    "label": segment.name + " (" + Math.round(segment.start) + "ms - "
    + Math.round(segment.end) + "ms | total: " + Math.round(segment.total) + "ms)",
    "unit": rectData.unit,
    "showOverlay": rectData.showOverlay,
    "hideOverlay": rectData.hideOverlay
  } as RectData
}

/**
 * @param  {RectData} rectData
 * @param  {number} timeTotal
 * @param  {number} firstX
 * @returns SVGTextElement
 */
function createTimingLable(rectData: RectData, timeTotal: number, firstX: number): SVGTextElement {
  const minWidth = 500 // minimum supported diagram width that should show the timing lable uncropped
  const spacingPerc = (5 / minWidth * 100)
  const y = rectData.y + rectData.height / 1.5
  const totalLabel = `${Math.round(timeTotal)} ms`

  let percStart = (rectData.x + rectData.width) / rectData.unit + spacingPerc
  let txtEl = svg.newTextEl(totalLabel, y, `${misc.roundNumber(percStart, 2)}%`)

  //(pessimistic) estimation of text with to avoid performance penalty of `getBBox`
  let roughTxtWidth = totalLabel.length * 8

  if (percStart + (roughTxtWidth / minWidth * 100) > 100) {
    percStart = firstX / rectData.unit - spacingPerc
    txtEl = svg.newTextEl(totalLabel, y, `${misc.roundNumber(percStart, 2)}%`, { "textAnchor": "end" })
  }

  return txtEl
}

/**
 * Render the block and timings for a request
 * @param  {RectData}         rectData Basic dependencys and globals
 * @param  {Array<TimeBlock>} segments Request and Timing Data
 * @param  {number} timeTotal  - total time of the request
 * @return {SVGElement}                Renerated SVG (rect or g element)
 */
export function createRect(rectData: RectData, segments: Array<TimeBlock>, timeTotal: number): SVGElement {
{'fraction_non_alphanumeric': 0.14177136652706684, 'fraction_numerical': 0.008065767023421747, 'mean_word_length': 3.6421886249100073, 'pattern_counts': {'":': 32, '<': 7, '<?xml version=': 0, '>': 9, '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': '6430556', 'n_tokens_mistral': 2138, 'n_tokens_neox': 2085, 'n_words': 570}