<commit_before>//d3.svg.colorPicker


var instance = null;

export default function colorPicker() {


  return function getInstance() {
    if (instance == null) {
      instance = d3_color_picker();
    }
    return instance;
  }();

  function d3_color_picker() {
    // tuning defaults
    var nCellsH = 15;
    // number of cells by hues (angular)
    var minH = 0;
    // which hue do we start from: 0 to 1 instead of 0 to 365
    var nCellsL = 4;
    // number of cells by lightness (radial)
    var minL = .5;
    // which lightness to start from: 0 to 1. Recommended .3...0.5
    var satConstant = .7;
    // constant saturation for color wheel: 0 to 1. Recommended .7...0.8
    var outerL_display = .4;
    // ecxeptional saturation of the outer circle. the one displayed 0 to 1
    var outerL_meaning = .3;
    // ecxeptional saturation of the outer circle. the one actually ment 0 to 1
    var firstAngleSat = 0;
    // exceptional saturation at first angular segment. Set 0 to have shades of grey
    var minRadius = 15;
    //radius of the central hole in color wheel: px
    var maxWidth = 280;
    var maxHeight = 323;
    var margin = {
      top: .1,
      bottom: .1,
      left: .1,
      right: .1
    };
    //margins in % of container's width and height
    var colorOld = '#000';
    var colorDef = '#000';
    var colorWhite = '#f8f8f8';
    // names of CSS classes
    var css = {
      INVISIBLE: 'vzb-invisible',
      COLOR_POINTER: 'vzb-colorpicker-pointer',
      COLOR_BUTTON: 'vzb-colorpicker-cell',
      COLOR_DEFAULT: 'vzb-colorpicker-default',
      COLOR_SAMPLE: 'vzb-colorpicker-sample',
      COLOR_PICKER: 'vzb-colorpicker-svg',
      COLOR_CIRCLE: 'vzb-colorpicker-circle',
      COLOR_CIRCLES: 'vzb-colorpicker-circles',
      COLOR_SEGMENT: 'vzb-colorpicker-segment',
      COLOR_BACKGR: 'vzb-colorpicker-background'
    };
    var colorData = [];
    //here we store color data. formatted as follows:
    /*
     [
     [ // outer circle
     {display: "#123456", meaning: "#123456"}, // first angle
     ...
     {display: "#123456", meaning: "#123456"} // last angle, clockwise
     ],
     [ // next circle
     {display: "#123456", meaning: "#123456"}, // first angle
     ...
     {display: "#123456", meaning: "#123456"} // last angle, clockwise
     ],

     ...

     [ // inner circle
     {display: "#123456", meaning: "#123456"}, // first angle
     ...
     {display: "#123456", meaning: "#123456"} // last angle, clockwise
     ]
     ]
     */
    var arc = d3.svg.arc();
    var pie = d3.layout.pie().sort(null).value(function(d) {
      return 1;
    });
    var svg = null;
    var container = null;
    var colorPointer = null;
    var showColorPicker = false;
    var sampleRect = null;
    var sampleText = null;
    var background = null;
    var callback = function(value) {
      console.info('Color picker callback example. Setting color to ' + value);
    };

    function _generateColorData() {
      var result = [];
      // loop across circles
      for(var l = 0; l < nCellsL; l++) {
        var lightness = minL + (1 - minL) / nCellsL * l;
        // new circle of cells
        result.push([]);
        // loop across angles
        for(var h = 0; h <= nCellsH; h++) {
          var hue = minH + (1 - minH) / nCellsH * h;
          // new cell
          result[l].push({
            display: _hslToRgb(hue, h == 0 ? firstAngleSat : satConstant, l == 0 ? outerL_display : lightness),
            meaning: _hslToRgb(hue, h == 0 ? firstAngleSat : satConstant, l == 0 ? outerL_meaning : lightness)
          });
        }
      }
      return result;
    }

    function _hslToRgb(h, s, l) {
      var r, g, b;
      if(s == 0) {
        r = g = b = l; // achromatic
      } else {
        var _hue2rgb = function _hue2rgb(p, q, t) {
          if(t < 0)
            t += 1;
          if(t > 1)
            t -= 1;
          if(t < 1 / 6)
            return p + (q - p) * 6 * t;
          if(t < 1 / 2)
            return q;
          if(t < 2 / 3)
            return p + (q - p) * (2 / 3 - t) * 6;
          return p;
        };
        var q = l < .5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = _hue2rgb(p, q, h + 1 / 3);
        g = _hue2rgb(p, q, h);
        b = _hue2rgb(p, q, h - 1 / 3);
      }
      return '#' + Math.round(r * 255).toString(16) + Math.round(g * 255).toString(16) + Math.round(b * 255).toString(
        16);
    }

    // this is init function. call it once after you are satisfied with parameters tuning
    // container should be a D3 selection that has a div where we want to render color picker
    // that div should have !=0 width and height in its style
    function colorPicker(container) {
      colorPicker.container = container;
      svg = container.select('.' + css.COLOR_PICKER);
      if(!svg.empty()) {
        return;
      }
      container.on('click', function() {
        colorPicker.show(false);
        d3.event.stopPropagation();
      });
      colorData = _generateColorData();

      svg = container.append('svg')
        .style('position', 'absolute')
        .style('top', '0')
        .style('left', '0')
        .style('width', '100%')
        .style('max-width', maxWidth + "px")
        .style('height', '100%')
        .style('max-height', maxHeight + "px")
        .style('z-index', 9999)
        .attr('class', css.COLOR_PICKER + " vzb-dialog-shadow")
        .classed(css.INVISIBLE, !showColorPicker);

      var width = parseInt(svg.style('width'));
      var height = parseInt(svg.style('height'));
      var maxRadius = width / 2 * (1 - margin.left - margin.right);
      background = svg.append('rect')
        .attr('width', width)
        .attr('height', maxHeight)
        .attr('class', css.COLOR_BUTTON +' '+ css.COLOR_BACKGR)
        .on('mouseover',
          function(d) {
            _cellHover(colorOld);
          });          
      var circles = svg.append('g')
        .attr('class', css.COLOR_CIRCLES)
        .attr('transform', 'translate(' + (maxRadius + width * margin.left) +
        ',' + (maxRadius + height * margin.top) + ')');

      svg.append('rect')
        .attr('class', css.COLOR_SAMPLE)
        .attr('width', width / 2)
        .attr('height', height * margin.top / 2);

      sampleRect = svg.append('rect')
        .attr('class', css.COLOR_SAMPLE)
        .attr('width', width / 2)<commit_msg>Set color to old color, when mouse leaves the color picker too fast #1580<commit_after>//d3.svg.colorPicker


var instance = null;

export default function colorPicker() {


  return function getInstance() {
    if (instance == null) {
      instance = d3_color_picker();
    }
    return instance;
  }();

  function d3_color_picker() {
    // tuning defaults
    var nCellsH = 15;
    // number of cells by hues (angular)
    var minH = 0;
    // which hue do we start from: 0 to 1 instead of 0 to 365
    var nCellsL = 4;
    // number of cells by lightness (radial)
    var minL = .5;
    // which lightness to start from: 0 to 1. Recommended .3...0.5
    var satConstant = .7;
    // constant saturation for color wheel: 0 to 1. Recommended .7...0.8
    var outerL_display = .4;
    // ecxeptional saturation of the outer circle. the one displayed 0 to 1
    var outerL_meaning = .3;
    // ecxeptional saturation of the outer circle. the one actually ment 0 to 1
    var firstAngleSat = 0;
    // exceptional saturation at first angular segment. Set 0 to have shades of grey
    var minRadius = 15;
    //radius of the central hole in color wheel: px
    var maxWidth = 280;
    var maxHeight = 323;
    var margin = {
      top: .1,
      bottom: .1,
      left: .1,
      right: .1
    };
    //margins in % of container's width and height
    var colorOld = '#000';
    var colorDef = '#000';
    var colorWhite = '#f8f8f8';
    // names of CSS classes
    var css = {
      INVISIBLE: 'vzb-invisible',
      COLOR_POINTER: 'vzb-colorpicker-pointer',
      COLOR_BUTTON: 'vzb-colorpicker-cell',
      COLOR_DEFAULT: 'vzb-colorpicker-default',
      COLOR_SAMPLE: 'vzb-colorpicker-sample',
      COLOR_PICKER: 'vzb-colorpicker-svg',
      COLOR_CIRCLE: 'vzb-colorpicker-circle',
      COLOR_CIRCLES: 'vzb-colorpicker-circles',
      COLOR_SEGMENT: 'vzb-colorpicker-segment',
      COLOR_BACKGR: 'vzb-colorpicker-background'
    };
    var colorData = [];
    //here we store color data. formatted as follows:
    /*
     [
     [ // outer circle
     {display: "#123456", meaning: "#123456"}, // first angle
     ...
     {display: "#123456", meaning: "#123456"} // last angle, clockwise
     ],
     [ // next circle
     {display: "#123456", meaning: "#123456"}, // first angle
     ...
     {display: "#123456", meaning: "#123456"} // last angle, clockwise
     ],

     ...

     [ // inner circle
     {display: "#123456", meaning: "#123456"}, // first angle
     ...
     {display: "#123456", meaning: "#123456"} // last angle, clockwise
     ]
     ]
     */
    var arc = d3.svg.arc();
    var pie = d3.layout.pie().sort(null).value(function(d) {
      return 1;
    });
    var svg = null;
    var container = null;
    var colorPointer = null;
    var showColorPicker = false;
    var sampleRect = null;
    var sampleText = null;
    var background = null;
    var callback = function(value) {
      console.info('Color picker callback example. Setting color to ' + value);
    };

    function _generateColorData() {
      var result = [];
      // loop across circles
      for(var l = 0; l < nCellsL; l++) {
        var lightness = minL + (1 - minL) / nCellsL * l;
        // new circle of cells
        result.push([]);
        // loop across angles
        for(var h = 0; h <= nCellsH; h++) {
          var hue = minH + (1 - minH) / nCellsH * h;
          // new cell
          result[l].push({
            display: _hslToRgb(hue, h == 0 ? firstAngleSat : satConstant, l == 0 ? outerL_display : lightness),
            meaning: _hslToRgb(hue, h == 0 ? firstAngleSat : satConstant, l == 0 ? outerL_meaning : lightness)
          });
        }
      }
      return result;
    }

    function _hslToRgb(h, s, l) {
      var r, g, b;
      if(s == 0) {
        r = g = b = l; // achromatic
      } else {
        var _hue2rgb = function _hue2rgb(p, q, t) {
          if(t < 0)
            t += 1;
          if(t > 1)
            t -= 1;
          if(t < 1 / 6)
            return p + (q - p) * 6 * t;
          if(t < 1 / 2)
            return q;
          if(t < 2 / 3)
            return p + (q - p) * (2 / 3 - t) * 6;
          return p;
        };
        var q = l < .5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = _hue2rgb(p, q, h + 1 / 3);
        g = _hue2rgb(p, q, h);
        b = _hue2rgb(p, q, h - 1 / 3);
      }
      return '#' + Math.round(r * 255).toString(16) + Math.round(g * 255).toString(16) + Math.round(b * 255).toString(
        16);
    }

    // this is init function. call it once after you are satisfied with parameters tuning
    // container should be a D3 selection that has a div where we want to render color picker
    // that div should have !=0 width and height in its style
    function colorPicker(container) {
      colorPicker.container = container;
      svg = container.select('.' + css.COLOR_PICKER);
      if(!svg.empty()) {
        return;
      }
      container.on('click', function() {
        colorPicker.show(false);
        d3.event.stopPropagation();
      });
      colorData = _generateColorData();

      svg = container.append('svg')
        .style('position', 'absolute')
        .style('top', '0')
        .style('left', '0')
        .style('width', '100%')
        .style('max-width', maxWidth + "px")
        .style('height', '100%')
        .style('max-height', maxHeight + "px")
        .style('z-index', 9999)
        .attr('class', css.COLOR_PICKER + " vzb-dialog-shadow")
        .classed(css.INVISIBLE, !showColorPicker)
        .on('mouseout', function(d) { _cellHover(colorOld); });

      var width = parseInt(svg.style('width'));
      var height = parseInt(svg.style('height'));
      var maxRadius = width / 2 * (1 - margin.left - margin.right);
      background = svg.append('rect')
        .attr('width', width)
        .attr('height', maxHeight)
        .attr('class', css.COLOR_BUTTON +' '+ css.COLOR_BACKGR)
        .on('mouseover',
          function(d) {
            _cellHover(colorOld);
          });          
      var circles = svg.append('g')
        .attr('class', css.COLOR_CIRCLES)
        .attr('transform', 'translate(' + (maxRadius + width * margin.left) +
        ',' + (maxRadius + height * margin.top) + ')');

      svg.append('rect')
        .attr('class', css.COLOR_SAMPLE)
        .attr('width', width / 2)
        .attr('height', height * margin.top / 2);

      sampleRect = svg.append('rect')
        .attr('class', css.COLOR_SAMPLE)
        .attr('width', width / 2)
{'fraction_non_alphanumeric': 0.1450050375881578, 'fraction_numerical': 0.031155545222041385, 'mean_word_length': 1.9501600365797898, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 5, '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': '2949491', 'n_tokens_mistral': 4502, 'n_tokens_neox': 4144, 'n_words': 1205}