<commit_before><template>
  <div class="viewport treeclass" v-resize="resize">
  </div>
</template>
<script>
import resize from 'vue-resize-directive'
import * as d3 from 'd3'
import * as d3Hierarchy from 'd3-hierarchy'
Object.assign(d3, d3Hierarchy)
import euclidian from './euclidian-layout'
import circular from './circular-layout'

const layout = {
  euclidian,
  circular
}

var i = 0
var currentSelected = null
const types = ['tree', 'cluster']
const layouts = ['circular', 'euclidian']

const props = {
  data: Object,
  duration: {
    type: Number,
    default: 750
  },
  type: {
    type: String,
    default: 'tree',
    validator (value) {
      return types.indexOf(value) !== -1
    }
  },
  layoutType: {
    type: String,
    default: 'euclidian',
    validator (value) {
      return layouts.indexOf(value) !== -1
    }
  },
  marginX: {
    type: Number,
    default: 20
  },
  marginY: {
    type: Number,
    default: 20
  }
}

const directives = {
  resize
}

function compareString (a, b) {
  return (a < b) ? -1 : (a > b) ? 1 : 0
}

function drawLink (source, target, {transformNode}) {
  return 'M' + transformNode(source.x, source.y) +
         'C' + transformNode(source.x, (source.y + target.y) / 2) +
         ' ' + transformNode(target.x, (source.y + target.y) / 2) +
         ' ' + transformNode(target.x, target.y)
}

function hasChildren (d) {
  return d.children || d._children
}

function removeTextAndGraph (selection) {
  ['circle', 'text'].forEach(select => {
    selection.selectAll(select).remove()
  })
}

function translate (vector, {transformNode}) {
  return 'translate(' + transformNode(vector.x, vector.y) + ')'
}

function anchorTodx (d, el) {
  if (d === 'middle') {
    return -el.getBBox().width / 2
  } else if (d === 'end') {
    return -el.getBBox().width
  }
  return 0
}

export default {
  props,

  directives,

  mounted () {
    const size = this.getSize()
    const svg = d3.select(this.$el).append('svg')
          .attr('width', size.width)
          .attr('height', size.height)
    const g = this.layout.transformSvg(svg.append('g'), this.margin, size)
    const tree = this.tree
    this.internaldata = {
      svg,
      g,
      tree
    }
    this.sizeSvg()

    if (this.data) {
      this.onData(this.data)
    }
  },

  methods: {
    sizeSvg () {
      this.internaldata.g = this.layout.transformSvg(this.internaldata.g, this.margin, this.getSize())
    },

    getSize () {
      var width = this.$el.clientWidth
      var height = this.$el.clientHeight
      return { width, height }
    },

    resize () {
      const size = this.getSize()
      this.internaldata.svg
              .attr('width', size.width)
              .attr('height', size.height)

      this.layout.size(this.internaldata.tree, size, this.margin)
      this.redraw()
    },

    updateGraph (source) {
      const origin = {
        x: source.x0,
        y: source.y0
      }

      const root = this.internaldata.root<commit_msg>make translation reactive<commit_after><template>
  <div class="viewport treeclass" v-resize="resize">
  </div>
</template>
<script>
import resize from 'vue-resize-directive'
import * as d3 from 'd3'
import * as d3Hierarchy from 'd3-hierarchy'
Object.assign(d3, d3Hierarchy)
import euclidian from './euclidian-layout'
import circular from './circular-layout'

const layout = {
  euclidian,
  circular
}

var i = 0
var currentSelected = null
const types = ['tree', 'cluster']
const layouts = ['circular', 'euclidian']

const props = {
  data: Object,
  duration: {
    type: Number,
    default: 750
  },
  type: {
    type: String,
    default: 'tree',
    validator (value) {
      return types.indexOf(value) !== -1
    }
  },
  layoutType: {
    type: String,
    default: 'euclidian',
    validator (value) {
      return layouts.indexOf(value) !== -1
    }
  },
  marginX: {
    type: Number,
    default: 20
  },
  marginY: {
    type: Number,
    default: 20
  }
}

const directives = {
  resize
}

function compareString (a, b) {
  return (a < b) ? -1 : (a > b) ? 1 : 0
}

function drawLink (source, target, {transformNode}) {
  return 'M' + transformNode(source.x, source.y) +
         'C' + transformNode(source.x, (source.y + target.y) / 2) +
         ' ' + transformNode(target.x, (source.y + target.y) / 2) +
         ' ' + transformNode(target.x, target.y)
}

function hasChildren (d) {
  return d.children || d._children
}

function removeTextAndGraph (selection) {
  ['circle', 'text'].forEach(select => {
    selection.selectAll(select).remove()
  })
}

function translate (vector, {transformNode}) {
  return 'translate(' + transformNode(vector.x, vector.y) + ')'
}

function anchorTodx (d, el) {
  if (d === 'middle') {
    return -el.getBBox().width / 2
  } else if (d === 'end') {
    return -el.getBBox().width
  }
  return 0
}

export default {
  props,

  directives,

  mounted () {
    const size = this.getSize()
    const svg = d3.select(this.$el).append('svg')
          .attr('width', size.width)
          .attr('height', size.height)
    const g = this.layout.transformSvg(svg.append('g'), this.margin, size)
    const tree = this.tree
    this.internaldata = {
      svg,
      g,
      tree
    }
    this.sizeSvg()

    if (this.data) {
      this.onData(this.data)
    }
  },

  methods: {
    sizeSvg () {
      this.internaldata.g = this.layout.transformSvg(this.internaldata.g, this.margin, this.getSize())
    },

    getSize () {
      var width = this.$el.clientWidth
      var height = this.$el.clientHeight
      return { width, height }
    },

    resize () {
      const size = this.getSize()
      this.internaldata.svg
              .attr('width', size.width)
              .attr('height', size.height)

      this.layout.size(this.internaldata.tree, size, this.margin)
      this.layout.transformSvg(this.internaldata.g.transition().duration(this.duration), this.margin, size)
      this.redraw()
    },

    updateGraph (source) {
      const origin = {
        x: source.x0,
        y: source.y0
      }

      const root = this.internaldata.root
{'fraction_non_alphanumeric': 0.15174456879526005, 'fraction_numerical': 0.008558262014483212, 'mean_word_length': 2.5663145539906105, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 17, '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': '3571882', 'n_tokens_mistral': 2131, 'n_tokens_neox': 2061, 'n_words': 470}