<commit_before>function getURLParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}


function getRootUrl(href){
    if (href.includes('circle-artifacts')) {
        return href.substring(0,href.lastIndexOf('/')) + '/';
    } else {
        return './';
    }
}



var rootUrl = getRootUrl(window.location.href);

var diffSliderMode = true;

function updateComparisonMode() {
    if (diffSliderMode) {
        $("#juxta").show();
        $("#sidebyside").hide();
    } else {
        $("#sidebyside").show();
        $("#juxta").hide();
    }
}

$(document).on("click", '#toggleDiffModeBtn', ()=>{
    diffSliderMode = !diffSliderMode;
    updateComparisonMode()
});

$(document).ready(function(){


    var $list = $("<ul></ul>").prependTo("body");

    errorImages.forEach((item)=>{
        $(`<li><a data-path='${item}' href="javascript:void">${item}</a></li>`).appendTo($list);
    });

    $list.on('click','a',function(){

        $list.find("a").removeClass('active');

        $(this).addClass('active');
        buildDisplay($(this).attr('data-path'),rootUrl);
    });

    $list.find("a").get(0).click();

});

function buildImagePath(ref, rootUrl){
    return {
        screenImagePath: `${rootUrl}screenshots/` + ref.replace(/^reference\//,'screen/'),
        diffImagePath: `${rootUrl}screenshots/` + ref.replace(/^reference\//,'diff/'),
        refImagePath: `${rootUrl}screenshots/${ref}`,
        imageName: ref.substring(ref.lastIndexOf('/')+1)
    }
}

function buildCurlStatement(data){

    return `curl '${data.screenImagePath}' > 'end-to-end-tests/screenshots/reference/${data.imageName}'; git add 'end-to-end-tests/screenshots/reference/${data.imageName}';`;

}


function buildDisplay(ref, rootUrl){

    var data = buildImagePath(ref,rootUrl);

    var curlStatements = errorImages.map((item)=>{
        var data = buildImagePath(item,rootUrl);
        return buildCurlStatement(data);
    });

    var template = `
     <h3 class="screenshot-name"></h3>
        <button id="toggleDiffModeBtn" style="font-size:16px">Toggle Comparison Mode</button>
        <br/><br/>
        
        <div id="juxta" class="juxtapose" style="${diffSliderMode ? '' : 'display:none'}">
            
        </div>
        
        <div id="sidebyside" style="${diffSliderMode ? 'display:none' : ''}">
            <img style="border:1px solid;" src="${data.refImagePath}" width="48%"/>
            <img style="border:1px solid;" src="${data.screenImagePath}" width="48%""/>
        </div>
        
        <h2>Screenshot Diff</h2>
        <h3 class="screenshot-name"></h3>
        <img id="diff" src="${data.diffImagePath}" />
        <h2>Help</h2>
        <p id="help-text">
        When the screenshot test fails, it means that the screenshot taken from
        your instance of the portal differs from the screenshot stored in the
        repo.<br />
        <br />
        1. If the change in the screenshot is <b>undesired</b>, i.e. there is
        regression, you should fix your PR.<br />
        <br />
        2. If the change in the screenshot is <b>desired</b>, add the screenshot
        to the repo, commit it and push it to your PR's branch, that is:
        <br />
        <br />
        <textarea class="curls">${buildCurlStatement(data)}</textarea>
        <br />
        <br />
        Then preferably use git commit --amend and change your commit message
        to explain how the commit changed the screenshot. Subsequently force
        push to your <b>own branch</b>.
        
        <br/>
        <h3>Curls for all failing screenshots</h3>
        <textarea class="curls">${curlStatements.join(' ')}</textarea>
        </p>
    `;

    $("#display").html(template);

    var slider = new juxtapose.JXSlider('#juxta',
        [
            {
                src: data.refImagePath,
                label: 'reference'
            },
            {
                src: data.screenImagePath,
                label: 'screen'
            }
        ],
        {
            animate: true,
            showLabels: true,
            startingPosition: "50%",
            makeResponsive: true
        });
}

<commit_msg>update screenshot comparison ui<commit_after>function getURLParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}


function getRootUrl(href){
    if (href.includes('circle-artifacts')) {
        return href.substring(0,href.lastIndexOf('/')) + '/';
    } else {
        return './';
    }
}



var rootUrl = getRootUrl(window.location.href);

var diffSliderMode = true;

function updateComparisonMode() {
    if (!diffSliderMode) {
        $("#juxta").show();
        $("#sidebyside").hide();
    } else {
        $("#sidebyside").show();
        $("#juxta").hide();
    }
}

$(document).on("click", '#toggleDiffModeBtn', ()=>{
    diffSliderMode = !diffSliderMode;
    updateComparisonMode()
});

$(document).ready(function(){


    var $list = $("<ul></ul>").prependTo("body");

    errorImages.forEach((item)=>{
        $(`<li><a data-path='${item}' href="javascript:void">${item}</a></li>`).appendTo($list);
    });

    $list.on('click','a',function(){

        $list.find("a").removeClass('active');

        $(this).addClass('active');
        buildDisplay($(this).attr('data-path'),rootUrl);
    });

    $list.find("a").get(0).click();

});

function buildImagePath(ref, rootUrl){
    return {
        screenImagePath: `${rootUrl}screenshots/` + ref.replace(/^reference\//,'screen/'),
        diffImagePath: `${rootUrl}screenshots/` + ref.replace(/^reference\//,'diff/'),
        refImagePath: `${rootUrl}screenshots/${ref}`,
        imageName: ref.substring(ref.lastIndexOf('/')+1)
    }
}

function buildCurlStatement(data){

    return `curl '${data.screenImagePath}' > 'end-to-end-tests/screenshots/reference/${data.imageName}'; git add 'end-to-end-tests/screenshots/reference/${data.imageName}';`;

}


function buildDisplay(ref, rootUrl){

    var data = buildImagePath(ref,rootUrl);

    var curlStatements = errorImages.map((item)=>{
        var data = buildImagePath(item,rootUrl);
        return buildCurlStatement(data);
    });

    var template = `
     <h3 class="screenshot-name"></h3>
        <button id="toggleDiffModeBtn" style="font-size:16px">Toggle Comparison Mode</button>
        <br/><br/>
        
        <div id="juxta" class="juxtapose" style="${diffSliderMode ? 'display:none' : 'display:block'}">
            
        </div>
        
       
        
        <div id="sidebyside" style="position:relative">
             <div>
                <div class="slidecontainer">
                  Reference&nbsp;
                  <input type="range" min="1" max="100" value="50" class="slider" id="opacitySlider">
                  &nbsp;Screen
                </div>
             </div>    
        
            <div style="position:relative" class="imgs"><img style="border:1px solid;" src="${data.refImagePath}"/>
            <img style="border:1px solid; position:absolute;left:0" src="${data.screenImagePath}"/>
            </div>
        </div>
        
        <h2>Screenshot Diff</h2>
        <h3 class="screenshot-name"></h3>
        <img id="diff" src="${data.diffImagePath}" />
        <h2>Help</h2>
        <p id="help-text">
        When the screenshot test fails, it means that the screenshot taken from
        your instance of the portal differs from the screenshot stored in the
        repo.<br />
        <br />
        1. If the change in the screenshot is <b>undesired</b>, i.e. there is
        regression, you should fix your PR.<br />
        <br />
        2. If the change in the screenshot is <b>desired</b>, add the screenshot
        to the repo, commit it and push it to your PR's branch, that is:
        <br />
        <br />
        <textarea class="curls">${buildCurlStatement(data)}</textarea>
        <br />
        <br />
        Then preferably use git commit --amend and change your commit message
        to explain how the commit changed the screenshot. Subsequently force
        push to your <b>own branch</b>.
        
        <br/>
        <h3>Curls for all failing screenshots</h3>
        <textarea class="curls">${curlStatements.join(' ')}</textarea>
        </p>
    `;

    $("#display").html(template);

    $("#opacitySlider").on("input", (e)=>{
       $("#sidebyside div.imgs img")[1].style.opacity = e.target.value/100;
    });

    var slider = new juxtapose.JXSlider('#juxta',
        [
            {
                src: data.refImagePath,
                label: 'reference'
            },
            {
                src: data.screenImagePath,
                label: 'screen'
            }
        ],
        {
            animate: true,
            showLabels: true,
            startingPosition: "50%",
            makeResponsive: true
        });
}


{'fraction_non_alphanumeric': 0.1783432593394694, 'fraction_numerical': 0.006388738494856524, 'mean_word_length': 2.348803480783176, 'pattern_counts': {'":': 0, '<': 106, '<?xml version=': 0, '>': 115, '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': '1874118', 'n_tokens_mistral': 2892, 'n_tokens_neox': 2809, 'n_words': 563}