<commit_before>
var explanationPointBigDiamondHalfWidth = 22;
var explanationPointSmallDiamondHalfWidth = 16;
var explanationBoxMap = {};
var showingDecisionNumber;

function renderExplanationSelectors() {
	var explanation_steps = replaySessionConfig.getExplanationStepsList();
	var expl_count = explanation_steps.length;
	var index = 0;
	explanationBoxMap = {};
	while (index < expl_count){
		var step = explanation_steps[index];
		var uiIndex =index + 1;
		configureExplanationSelectorDiamond(uiIndex, step);
		index = index + 1;
	}
}

function configureExplanationSelectorDiamond(uiIndex,step){
	var x = getXOriginOfDecisionPointAtStep(step);
	var y = explanationControlYPosition;
	var halfWidth;
	var halfHeight;
	
	var currentStep = sessionIndexManager.getCurrentIndex();
	var ctx = expl_ctrl_ctx;
	if (currentStep == step) {
		showingDecisionNumber = uiIndex;
        $("#winning-action-label").html("Chosen move at D" + uiIndex + ": " + winningActionForStep[step]);
		ctx.font = "16px Arial bold";
		halfWidth = explanationPointBigDiamondHalfWidth;
        halfHeight = explanationPointBigDiamondHalfWidth;
        

        var rectForExplanationControlPanel = document.getElementById("explanation-control-panel").getBoundingClientRect();
        var absoluteXExpCtrlPanel = rectForExplanationControlPanel.left;
        var absoluteYExpCtrlPanel = rectForExplanationControlPanel.top;

		var yPositionOfWhyButton = absoluteYExpCtrlPanel + 60;// relative to the next container below
        var xPositionOfWhyButton = absoluteXExpCtrlPanel + x - 37;
        // why button rendering handled outside of chartV2 as chartV2 is created later upon explDetails arriving
        if (userStudyMode){
            if (treatmentID == "1"){
                // send explain command to back end
                askBackendForExplanationRewardInfo(step);
            }
            else if (treatmentID == "2" ||treatmentID == "3"){
                renderWhyButton(step, xPositionOfWhyButton, yPositionOfWhyButton);
            }
        }
        else {
            renderWhyButton(step, xPositionOfWhyButton, yPositionOfWhyButton);
        }
		
        boldThisStepInLegend(step);
        if (userStudyMode){
            userActionMonitor.stepToDecisionPoint(step);
            stateMonitor.setDecisionPoint(step);
		}
		if (currentExplManager.chartVisible){
			// send a request to back end for focusing on this new step
			askBackendForExplanationRewardInfo(step);
		}
		selectedDecisionStep = step;
	}
	else {
		ctx.font = "12px Arial bold";
		halfWidth = explanationPointSmallDiamondHalfWidth;
		halfHeight = explanationPointSmallDiamondHalfWidth;
		unboldThisStepInLegend(step);
	}
	
	ctx.beginPath();
	
	ctx.fillStyle = 'black';
	
	ctx.strokeStyle = 'black';
	ctx.lineWidth = 2;
	var leftVertexX = x - halfWidth;;
	var leftVertexY = explanationControlYPosition;
	var rightVertexX = x + halfWidth;
	var rightVertexY = explanationControlYPosition;
	var topVertexX = x ;
	var topVertexY = explanationControlYPosition - halfHeight;
	var bottomVertexX = x;
	var bottomVertexY = explanationControlYPosition + halfHeight;
	
	ctx.moveTo(leftVertexX, leftVertexY);
	ctx.lineTo(topVertexX,topVertexY);
	ctx.lineTo(rightVertexX, rightVertexY);
	ctx.lineTo(bottomVertexX, bottomVertexY);
	ctx.lineTo(leftVertexX, leftVertexY);
	ctx.closePath();
	ctx.fill();
	
	ctx.fillStyle = 'white';
	if (currentStep == step) {
		var textCenterX = ((rightVertexX - leftVertexX) / 2) + leftVertexX - 10;
	}
	else {
		var textCenterX = ((rightVertexX - leftVertexX) / 2) + leftVertexX - 7;
	}
	ctx.font = "Arial";
	var textCenterY = explanationControlYPosition + 5;
	ctx.fillText('D' + uiIndex,textCenterX,textCenterY);

	//ctx.rect(upper_left_x, upper_left_y, rect_width, rect_height);
	var eBox = getExplanationBox(leftVertexX, rightVertexX, topVertexY, bottomVertexY, step);
    explanationBoxMap[step] = eBox;
}


function getExplanationBox(left_x,right_x, upper_y, lower_y, step){
	eBox = {};
	eBox.left_x = left_x;
	eBox.right_x = right_x;
	eBox.upper_y = upper_y;
	eBox.lower_y = lower_y;
	eBox.step = step;<commit_msg>rename uiIndex to decisionPointNumber for clarity<commit_after>
var explanationPointBigDiamondHalfWidth = 22;
var explanationPointSmallDiamondHalfWidth = 16;
var explanationBoxMap = {};
var showingDecisionNumber;

function renderExplanationSelectors() {
	var explanation_steps = replaySessionConfig.getExplanationStepsList();
	var expl_count = explanation_steps.length;
	var index = 0;
	explanationBoxMap = {};
	while (index < expl_count){
		var step = explanation_steps[index];
		var decisionPointNumber =index + 1;
		configureExplanationSelectorDiamond(decisionPointNumber, step);
		index = index + 1;
	}
}

function configureExplanationSelectorDiamond(decisionPointNumber,step){
	var x = getXOriginOfDecisionPointAtStep(step);
	var y = explanationControlYPosition;
	var halfWidth;
	var halfHeight;
	
	var currentStep = sessionIndexManager.getCurrentIndex();
	var ctx = expl_ctrl_ctx;
	if (currentStep == step) {
		showingDecisionNumber = decisionPointNumber;
        $("#winning-action-label").html("Chosen move at D" + decisionPointNumber + ": " + winningActionForStep[step]);
		ctx.font = "16px Arial bold";
		halfWidth = explanationPointBigDiamondHalfWidth;
        halfHeight = explanationPointBigDiamondHalfWidth;
        

        var rectForExplanationControlPanel = document.getElementById("explanation-control-panel").getBoundingClientRect();
        var absoluteXExpCtrlPanel = rectForExplanationControlPanel.left;
        var absoluteYExpCtrlPanel = rectForExplanationControlPanel.top;

		var yPositionOfWhyButton = absoluteYExpCtrlPanel + 60;// relative to the next container below
        var xPositionOfWhyButton = absoluteXExpCtrlPanel + x - 37;
        // why button rendering handled outside of chartV2 as chartV2 is created later upon explDetails arriving
        if (userStudyMode){
            if (treatmentID == "1"){
                // send explain command to back end
                askBackendForExplanationRewardInfo(step);
            }
            else if (treatmentID == "2" ||treatmentID == "3"){
                renderWhyButton(step, xPositionOfWhyButton, yPositionOfWhyButton);
            }
        }
        else {
            renderWhyButton(step, xPositionOfWhyButton, yPositionOfWhyButton);
        }
		
        boldThisStepInLegend(step);
        if (userStudyMode){
            userActionMonitor.stepToDecisionPoint(step);
            stateMonitor.setDecisionPoint(step);
		}
		if (currentExplManager.chartVisible){
			// send a request to back end for focusing on this new step
			askBackendForExplanationRewardInfo(step);
		}
		selectedDecisionStep = step;
	}
	else {
		ctx.font = "12px Arial bold";
		halfWidth = explanationPointSmallDiamondHalfWidth;
		halfHeight = explanationPointSmallDiamondHalfWidth;
		unboldThisStepInLegend(step);
	}
	
	ctx.beginPath();
	
	ctx.fillStyle = 'black';
	
	ctx.strokeStyle = 'black';
	ctx.lineWidth = 2;
	var leftVertexX = x - halfWidth;;
	var leftVertexY = explanationControlYPosition;
	var rightVertexX = x + halfWidth;
	var rightVertexY = explanationControlYPosition;
	var topVertexX = x ;
	var topVertexY = explanationControlYPosition - halfHeight;
	var bottomVertexX = x;
	var bottomVertexY = explanationControlYPosition + halfHeight;
	
	ctx.moveTo(leftVertexX, leftVertexY);
	ctx.lineTo(topVertexX,topVertexY);
	ctx.lineTo(rightVertexX, rightVertexY);
	ctx.lineTo(bottomVertexX, bottomVertexY);
	ctx.lineTo(leftVertexX, leftVertexY);
	ctx.closePath();
	ctx.fill();
	
	ctx.fillStyle = 'white';
	if (currentStep == step) {
		var textCenterX = ((rightVertexX - leftVertexX) / 2) + leftVertexX - 10;
	}
	else {
		var textCenterX = ((rightVertexX - leftVertexX) / 2) + leftVertexX - 7;
	}
	ctx.font = "Arial";
	var textCenterY = explanationControlYPosition + 5;
	ctx.fillText('D' + decisionPointNumber,textCenterX,textCenterY);

	//ctx.rect(upper_left_x, upper_left_y, rect_width, rect_height);
	var eBox = getExplanationBox(leftVertexX, rightVertexX, topVertexY, bottomVertexY, step);
    explanationBoxMap[step] = eBox;
}


function getExplanationBox(left_x,right_x, upper_y, lower_y, step){
	eBox = {};
	eBox.left_x = left_x;
	eBox.right_x = right_x;
	eBox.upper_y = upper_y;
	eBox.lower_y = lower_y;
	eBox.step = step;
{'fraction_non_alphanumeric': 0.0937801350048216, 'fraction_numerical': 0.006509161041465767, 'mean_word_length': 4.172693266832917, 'pattern_counts': {'":': 2, '<': 5, '<?xml version=': 0, '>': 3, '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': '2756326', 'n_tokens_mistral': 2711, 'n_tokens_neox': 2514, 'n_words': 552}