<commit_before>
var constructCurveEditor = function(domRootID, animationLibraryNode, options){
  
  var keyColor = FABRIC.rgb(.0, .0, .0);
  
  options = options ? options : {};
  options.timeStripe = options.timeStripe!=undefined ? options.timeStripe : true;
  options.draggable = options.draggable!=undefined ? options.draggable : true;
  options.zoomable = options.zoomable!=undefined ? options.zoomable : true;
  trackSetId =  options.trackSetId!=undefined ? options.trackSetId : 0;
  
  var timeRange = options.timeRange!=undefined ? options.timeRange : new FABRIC.Vec2(0, 100);
  var valueRange = options.valueRange!=undefined ? options.valueRange : new FABRIC.Vec2(0, 1);
  var fitEditorToKeyRanges = options.fitEditorToKeyRanges!=undefined ? options.fitEditorToKeyRanges : true;
  
  var rootDomNode = document.getElementById(domRootID);
  var windowWidth = rootDomNode.clientWidth;
  var windowHeight = rootDomNode.clientHeight;
  var isBezier = animationLibraryNode.isTypeOf('BezierKeyAnimationLibrary');
  
  
  var svgRoot = FABRIC.createSVGRootElem(domRootID);
  if(options.volumerenderdemohack){
    svgRoot.attr('style', "position:relative; top:-"+windowHeight+"px;z-index:0");
  }
  

  var graphBGRect = svgRoot.createRect().size(windowWidth, windowHeight).addClass('EventCatcher');
  var graphCenterGroup = svgRoot.createGroup().id('graphCenterGroup').translate(0, windowHeight * 0.5);
  var curvesHolderGroup = graphCenterGroup.createGroup().id('curvesHolderGroup')
  var keysHolderGroup = graphCenterGroup.createGroup().id('keysHolderGroup');
  svgRoot.svgRoot = svgRoot;
  svgRoot.state = 'Normal';
  
  
  
  var containmentRect;
  if(!fitEditorToKeyRanges){
    containmentRect = graphCenterGroup.createRect().size(windowWidth, windowHeight).translate(0, windowHeight * -0.5);;
    containmentRect.attr('fill', 'none');
    containmentRect.attr('stroke', "black");
    containmentRect.attr('stroke-width', 2);
  }
  ///////////////
  tracksData = animationLibraryNode.getTrackSet(trackSetId);
  var trackCount = tracksData.tracks.length;
  var yRange = new FABRIC.Vec2(0, 0);
  var curvesData = [];
  var trackCurves = [];
  trackDisplayNode = scene.constructNode('TrackDisplay', {
      animationLibraryNode: animationLibraryNode,
      trackSetId: trackSetId
    });
  
  for (var i = 0; i < trackCount; i++) {
    var trackData = tracksData.tracks[i];
//    var trackColor = trackData.color.toString().substring(trackData.color.toString().indexOf("rgba"));
    var trackColor;
    if (trackData.color.r === 1){
      trackColor = "red";
    }
    if (trackData.color.g === 1){
      trackColor = "green";
    }
    if (trackData.color.b === 1){
      trackColor = "blue";
    }

    $('#keyframeTracks').append('<li style=color:'+ trackColor +'>' + trackData.name + '</li>');
    trackCurves[i] = curvesHolderGroup.createPath().addClass('CurvePath').stroke(trackData.color);
  }
  

  if(!fitEditorToKeyRanges){
    yRange = valueRange;
  }

  var screenXfo = {
    tr: new FABRIC.Vec2(0, 0),
    sc: new FABRIC.Vec2(1, 1),
    fitToScreen:function(){
      if(fitEditorToKeyRanges){
        timeRange = new FABRIC.Vec2(0, 0);
        for (var i = 0; i < trackCount; i++) {
          var keys = tracksData.tracks[i].keys;
          if(keys.length <= 1){
            continue;
          }<commit_msg>Work In Progress: Displaying Track Color in the track list<commit_after>
var constructCurveEditor = function(domRootID, animationLibraryNode, options){
  
  var keyColor = FABRIC.rgb(.0, .0, .0);
  
  options = options ? options : {};
  options.timeStripe = options.timeStripe!=undefined ? options.timeStripe : true;
  options.draggable = options.draggable!=undefined ? options.draggable : true;
  options.zoomable = options.zoomable!=undefined ? options.zoomable : true;
  trackSetId =  options.trackSetId!=undefined ? options.trackSetId : 0;
  
  var timeRange = options.timeRange!=undefined ? options.timeRange : new FABRIC.Vec2(0, 100);
  var valueRange = options.valueRange!=undefined ? options.valueRange : new FABRIC.Vec2(0, 1);
  var fitEditorToKeyRanges = options.fitEditorToKeyRanges!=undefined ? options.fitEditorToKeyRanges : true;
  
  var rootDomNode = document.getElementById(domRootID);
  var windowWidth = rootDomNode.clientWidth;
  var windowHeight = rootDomNode.clientHeight;
  var isBezier = animationLibraryNode.isTypeOf('BezierKeyAnimationLibrary');
  
  
  var svgRoot = FABRIC.createSVGRootElem(domRootID);
  if(options.volumerenderdemohack){
    svgRoot.attr('style', "position:relative; top:-"+windowHeight+"px;z-index:0");
  }
  

  var graphBGRect = svgRoot.createRect().size(windowWidth, windowHeight).addClass('EventCatcher');
  var graphCenterGroup = svgRoot.createGroup().id('graphCenterGroup').translate(0, windowHeight * 0.5);
  var curvesHolderGroup = graphCenterGroup.createGroup().id('curvesHolderGroup')
  var keysHolderGroup = graphCenterGroup.createGroup().id('keysHolderGroup');
  svgRoot.svgRoot = svgRoot;
  svgRoot.state = 'Normal';
  
  
  
  var containmentRect;
  if(!fitEditorToKeyRanges){
    containmentRect = graphCenterGroup.createRect().size(windowWidth, windowHeight).translate(0, windowHeight * -0.5);;
    containmentRect.attr('fill', 'none');
    containmentRect.attr('stroke', "black");
    containmentRect.attr('stroke-width', 2);
  }
  ///////////////
  tracksData = animationLibraryNode.getTrackSet(trackSetId);
  var trackCount = tracksData.tracks.length;
  var yRange = new FABRIC.Vec2(0, 0);
  var curvesData = [];
  var trackCurves = [];
  trackDisplayNode = scene.constructNode('TrackDisplay', {
      animationLibraryNode: animationLibraryNode,
      trackSetId: trackSetId
    });
  
  for (var i = 0; i < trackCount; i++) {
    var trackData = tracksData.tracks[i];
    var trackColor = "#"+((trackData.color.r === 1) ? "FF" : "00")+((trackData.color.g === 1) ? "FF" : "00")+((trackData.color.b === 1) ? "FF" : "00");

    $('#keyframeTracks').append('<li style=color:'+ trackColor +'>' + trackData.name + '</li>');
    trackCurves[i] = curvesHolderGroup.createPath().addClass('CurvePath').stroke(trackData.color);
  }
  

  if(!fitEditorToKeyRanges){
    yRange = valueRange;
  }

  var screenXfo = {
    tr: new FABRIC.Vec2(0, 0),
    sc: new FABRIC.Vec2(1, 1),
    fitToScreen:function(){
      if(fitEditorToKeyRanges){
        timeRange = new FABRIC.Vec2(0, 0);
        for (var i = 0; i < trackCount; i++) {
          var keys = tracksData.tracks[i].keys;
          if(keys.length <= 1){
            continue;
          }
{'fraction_non_alphanumeric': 0.14414967029596687, 'fraction_numerical': 0.012574758472626898, 'mean_word_length': 4.079439252336448, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 7, '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': '3382511', 'n_tokens_mistral': 2165, 'n_tokens_neox': 2108, 'n_words': 381}