Typescript/JavaScript Angular Problem: Hashmap a dictionary of rescaled one dimensional coordinate values to their corresponding indices for a position based array mapping and more

Okay, so the title is rather a big one, but the problem goes like this:

You've had to squeeze your data down in such a way so that it fits into your canvas graphic...that is, it makes little sense if you have big numbers that can't be viewed because their plot values are outside of the dimension of your screen.  This problem is of 'squeezing' the data is otherwise re scaling it so that it fits into visual dimensions that can be read.  Its really not a big deal doing that since you can refactor a plot without changing its shape/form attributes by using a global scale factor.  But let's say you wanted to have a quick and easy search algorithm that matches a screen based coordinate that a user has supplied, say from mouseover position that relates to a position on the graph or at least as directly related to your big data.  How to do this?

As it turns out you may have stored your big data, in some sort of collection type that contains points which may have something like: x, y in 2 dimensions, and this collection type may be structured in the form of an array.  The problem is that with any mouseover, your first inclination may be to search the set of points and then break at a common match, but this is slow!  I say this since you are constantly search iterating points to find the match based on a screen position that is supplied.  Why not create an inverse map on the set of points and hashmap these?

As it turns out you can do it in Typescript/Javascript, but as I found out, keys say with the {} type string values.  If your data is on the other hand given by positions which are 'number' types you'd first have to likely Math.round(), Math.floor() or Math.ceiling your numbers.  Then you'd convert this to string using the position.x.toString(),  'number' types have a .toString() method.  Then you'd key the value while storing its array index in value position.

A sketch:

    public setScreenXCoords(){

        //called after screen coordinates have been setSceenXCoords

        //and that this.points is a screen coordinate set.  

        var i = 0;

        for (let pvec of this.screenpoints){

            let x = pvec.x;

            x = Math.round(x);

            /*

            console.log("key: ");

            console.log(x);

            console.log("value");

            console.log(i);

            */

            this.screenToIndex[x.toString()] = i;

            i += 1; 

        }

    }

In a given data range set of points, it is important to keep in mind that keying position data means also that truncation (by floor, rounding, or ceiling a number) may necessarily supply more than one position for a given key, and for this you may need to bucket the values in an array, and provide additional searching algorithms in refining a search, but at least this method provides nice fast lookup position addressing.

So when you search you need to account for undefined key values.  These are screen positions that do not have a corresponding key in, for instance, inverse2dVectorsMap.  For this, you simply omit the user supplied position until they have sufficiently toggled a position that corresponds to a point on the data set.

And example sketch:

    public getScreenPoint(xpos: number){

        let xpostr = xpos.toString();

        if (xpostr in this.screenToIndex){

            return this.screenToIndex[xpostr];

        }

        return undefined;

    }

Then filter 'undefined' return values relative to non 'undefined' ones.

For example:

    private mouseMoved(e: MouseEvent){

        //(mousemove)="mouseMoved($event)"

        console.log(e.offsetX);

        let xstr = e.offsetX.toString();

        

        console.log("screen index: ");

        

        if (e.offsetX != undefined){

            let ind = this.dataCharts[0].getScreenPoint(e.offsetX - 80.0);

            console.log(ind);

            if (ind != undefined){

            this.pointindex[0] = ind;

            this.pointindex2 = ind;

            }

        }

    }