Changes for SLS Simulation Builder (slider)

Changes for SLS Simulation Builder

Fazli

Path: Simulation builder (220720) - Source code\website\src\components\uiItems\Slider.tsx

Most of the changes were made in function getMarkings() which is responsible in displaying the slider markings on the left/bottom of the slider, based on user input.

There were some errors in the display of the slider markers when the steps were 0 < n < 1. The error was found out to be a computer error due to computers having issues when working with decimals. 

error detected during workshop 20230522 by tim

In order to overcome this, I decided to revamp most of the function. I first iterated through a for loop starting from min to max and incrementing by step and stored the values in numberRange. I then checked if the last value of numberRange is equal to max as step may not lead to a remainder and store the boolean value in hasMax

for (let i = min; i <= max; i += step) {

    i = fixPrecisionToStep(i);

    numberRange.push(i);

}

if (numberRange.slice(-1) == max) {

    hasMax = true;

}

fixed!

Edited function

function getMarkings() {

    let range = (max - min);

    let elements: Array<React.ReactElement> = [];

    let numberRange = [];

    let hasMax = false;

    

    
    for (let i = min; i <= max; i += step) {

        i = fixPrecisionToStep(i);

        numberRange.push(i);

    }

    if (numberRange.slice(-1) == max) {

        hasMax = true;

    }

    if (step === 0) { return elements; }

        // fazli

        for (let i = numberRange.length-1; i >= 0; i--) {

            let isBottom = i === 0;

            let isTop = false;

            if (hasMax) {

                isTop = i === numberRange.length-1;

            }

            elements.push(<div className={`flex justify-end my-auto leading-[0px] ${isTop ? 'mt-0' : isBottom ? 'mb-0' : ''}`}>

                    {numberRange[i]}

                    <span dangerouslySetInnerHTML={{ __html: units }} />

                    <hr className="w-4 ml-2 border-black" />

            </div>);

        }

    } else {

        // fazli

        for (let i = 0; i <= numberRange.length-1; i++) {

            let isBottom = i === 0;

            let isTop = false;

            if (hasMax) {

                isTop = i === numberRange.length-1;

            }

            elements.push(

            orientation === 0

            ? <>

                <div className={`flex justify-end my-auto leading-[0px] ${isTop ? 'mt-0' : isBottom ? 'mb-0' : ''}`}>

                    {numberRange[i]}

                    <span dangerouslySetInnerHTML={{ __html: units }} />

                    <hr className="w-4 ml-2 border-black" />

                </div>

            </>

            : <>

                <div className={`flex flex-col justify-center text-center items-end mx-auto w-0 ${isTop ? 'mr-0' : isBottom ? 'ml-0' : ''}`}>

                    <div className="flex items-end mb-1" style={{ marginRight: `-${0.25*(htmlToText(numberRange[i] + units).length)}em` }}>

                        {numberRange[i]}

                        <span dangerouslySetInnerHTML={{ __html: units }} />

                    </div>

                    <div className="h-4 w-1 bg-black" style={{ width: 1 }} />

                </div>

            </>);

        }

    }

    return elements;

}