<commit_before>import * as ts from 'typescript'
import './style.css'

// TODO: Calculate width for different fonts
const FONT_WIDTH = 7.223
const FILE_HEAD_HEIGHT = 43
const GUTTER_WIDTH = 60
const LINE_HEIGHT = 20
const CLASS_NAME = 'intelli-github'
const CLASS_NAME_DEFINITION = `${CLASS_NAME}-definition`
const CLASS_NAME_USAGE = `${CLASS_NAME}-usage`
const FILE_NAME = 'test.ts'

function getPosition(e: MouseEvent, $dom: HTMLElement) {
  const rect = $dom.getBoundingClientRect()
  // console.log(e.clientX, e.clientY, rect)
  return {
    x: Math.floor((e.clientX - rect.left - GUTTER_WIDTH) / FONT_WIDTH),
    y: Math.floor((e.clientY - rect.top) / LINE_HEIGHT)
  }
}

// Clear all
function clear() {
  const doms = document.querySelectorAll(`.${CLASS_NAME}`)
  ; [].forEach.call(doms, ($node: HTMLElement) => {
    $node.remove()
  })
}

// TODO: Fix overflow when length is large
function draw(range: ts.LineAndCharacter, width: number, className: string) {
  const $mask = document.createElement('div')

  // Set style
  $mask.className = `${CLASS_NAME} ${className}`
  $mask.style.width = `${width * FONT_WIDTH}px`
  $mask.style.top = `${range.line * LINE_HEIGHT + FILE_HEAD_HEIGHT}px`
  $mask.style.left = `${range.character * FONT_WIDTH + GUTTER_WIDTH}px`

  // Append
  const $container = document.querySelector('.file-header')
  $container.appendChild($mask)
}

function drawDefinition(range: ts.LineAndCharacter, width: number) {
  return draw(range, width, CLASS_NAME_DEFINITION)
}

function drawUsage(range: ts.LineAndCharacter, width: number) {
  return draw(range, width, CLASS_NAME_USAGE)
}

export function main() {
  const $dom = document.querySelector('table')
  if (!$dom) {
    return
  }

  // FIXME: Replace tab with 8 space, GitHub's tab size
  const code: string = $dom.innerText.replace(/\t/g, '        ')

  // https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API#incremental-build-support-using-the-language-services
  const servicesHost: ts.LanguageServiceHost = {
    getScriptFileNames: () => [FILE_NAME],
    getScriptVersion: () => '0', // Version matters not here since no file change
    getScriptSnapshot: () => ts.ScriptSnapshot.fromString(code),
    getCurrentDirectory: () => '/',
    getCompilationSettings: () => ({ module: ts.ModuleKind.CommonJS }),
    getDefaultLibFileName: (options) => ts.getDefaultLibFilePath(options),
  }

  // Create the language service files
  const services: ts.LanguageService = ts.createLanguageService(servicesHost, ts.createDocumentRegistry())
  const program: ts.Program = services.getProgram()
  const source: ts.SourceFile = program.getSourceFile(FILE_NAME)

  $dom.addEventListener('click', function (e) {<commit_msg>Use actual dom sizes to calculate constants<commit_after>import * as ts from 'typescript'
import './style.css'

const $dom = document.querySelector('table')
const testDOM = $dom.querySelector('span')

// https://github.com/Microsoft/TypeScript/issues/3263#issuecomment-105292587
const fileHeader = <HTMLElement>document.querySelector('.file-header')
const firstLineGutter = <HTMLElement>document.querySelector('#L1')
const firstLine = <HTMLElement>document.querySelector('#LC1')

const FONT_WIDTH = testDOM.offsetWidth / testDOM.innerText.length
const FILE_HEAD_HEIGHT = fileHeader.offsetHeight
const GUTTER_WIDTH = firstLineGutter.offsetWidth + parseInt(getComputedStyle(firstLine).paddingLeft, 10)
const LINE_HEIGHT = firstLine.offsetHeight
const CLASS_NAME = 'intelli-github'
const CLASS_NAME_DEFINITION = `${CLASS_NAME}-definition`
const CLASS_NAME_USAGE = `${CLASS_NAME}-usage`
const FILE_NAME = 'test.ts'

function getPosition(e: MouseEvent, $dom: HTMLElement) {
  const rect = $dom.getBoundingClientRect()
  // console.log(e.clientX, e.clientY, rect)
  return {
    x: Math.floor((e.clientX - rect.left - GUTTER_WIDTH) / FONT_WIDTH),
    y: Math.floor((e.clientY - rect.top) / LINE_HEIGHT)
  }
}

// Clear all
function clear() {
  const doms = document.querySelectorAll(`.${CLASS_NAME}`)
  ; [].forEach.call(doms, ($node: HTMLElement) => {
    $node.remove()
  })
}

// TODO: Fix overflow when length is large
function draw(range: ts.LineAndCharacter, width: number, className: string) {
  const $mask = document.createElement('div')

  // Set style
  $mask.className = `${CLASS_NAME} ${className}`
  $mask.style.width = `${width * FONT_WIDTH}px`
  $mask.style.top = `${range.line * LINE_HEIGHT + FILE_HEAD_HEIGHT}px`
  $mask.style.left = `${range.character * FONT_WIDTH + GUTTER_WIDTH}px`

  // Append
  fileHeader.appendChild($mask)
}

function drawDefinition(range: ts.LineAndCharacter, width: number) {
  return draw(range, width, CLASS_NAME_DEFINITION)
}

function drawUsage(range: ts.LineAndCharacter, width: number) {
  return draw(range, width, CLASS_NAME_USAGE)
}

export function main() {
  if (!$dom) {
    return
  }

  // FIXME: Replace tab with 8 space, GitHub's tab size
  const code: string = $dom.innerText.replace(/\t/g, '        ')

  // https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API#incremental-build-support-using-the-language-services
  const servicesHost: ts.LanguageServiceHost = {
    getScriptFileNames: () => [FILE_NAME],
    getScriptVersion: () => '0', // Version matters not here since no file change
    getScriptSnapshot: () => ts.ScriptSnapshot.fromString(code),
    getCurrentDirectory: () => '/',
    getCompilationSettings: () => ({ module: ts.ModuleKind.CommonJS }),
    getDefaultLibFileName: (options) => ts.getDefaultLibFilePath(options),
  }

  // Create the language service files
  const services: ts.LanguageService = ts.createLanguageService(servicesHost, ts.createDocumentRegistry())
  const program: ts.Program = services.getProgram()
  const source: ts.SourceFile = program.getSourceFile(FILE_NAME)

  $dom.addEventListener('click', function (e) {
{'fraction_non_alphanumeric': 0.13855112176742593, 'fraction_numerical': 0.0053091282753896215, 'mean_word_length': 4.675413022351798, 'pattern_counts': {'":': 0, '<': 6, '<?xml version=': 0, '>': 20, 'https://': 3, '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': '2304280', 'n_tokens_mistral': 1872, 'n_tokens_neox': 1848, 'n_words': 399}