Identifying edge cases of a one-dimensional array in Javascript

Question

I'm creating a 2-dimensional heat map which has functionality when you click on any pixel. It grabs data associated with the index of every pixel (including adjacent pixels) and plots it. It currently looks like this:

The problem that I'm encountering is when I click on a left or right edge pixel, since it grabs data from adjacent pixels, it can retrieve data from the opposite side of the graph since it is all within a one-dimensional array. I am trying to create a conditional which checks if the clicked pixel is an edge case, and then configures the magnified graph accordingly to not show points from the other side of the main graph. This is the code I have so far:

// pushes all dataMagnified arrays left and right of i to magMainStore
var dataGrabber = function(indexGrabbed, arrayPushed) {

  // iterates through all 5 pixels being selected
  for (var b = -2; b <= 2; b++) {

    var divValue = toString(i / cropLength + b);

    // checks if selected index exists, and if it is not in the prior row, or if it is equal to zero
    if (dataMagnified[indexGrabbed + b] != undefined && (& divValue.indexOf(".")!=-1)) {
      dataMagnified[indexGrabbed + b].forEach(function(z) {
        arrayPushed.push(z);
      })
    }
  }
};

I am trying to get the same result as if I had a two dimensional array, and finding when the adjacent values within a single array is undefined. This is the line where I'm creating a conditional for that

if (dataMagnified[indexGrabbed + b] != undefined && (& divValue.indexOf(".")!=-1)) {

The second condition after the and is my attempts so far trying to figure this out. I'm unsure if I can even do this within a for loop that iterates 5 times or if I have to create multiple conditions for this. In addition, here's an image displaying what I'm trying to do:

Thank you!

Answer 1

Your approach looks overly complex and will perform rather slowly. For example, converting numbers to strings to be able to use .indexOf() to find a decimal point just for the sake of checking for integer numbers doesn't seem right.

A much simpler and more elegant solution might be the following function which will return the selection range bounded by the limits of the row:

function getBoundedSelection(indexGrabbed, selectionWidth) {
  return dataMagnified.slice(
    Math.max(Math.floor(indexGrabbed/cropLength) * cropLength, indexGrabbed - selectionWidth),
    Math.min(rowStartIndex + cropLength, indexGrabbed + selectionWidth)
  );
}

Here, to keep it as flexible as possible, selectionWidth determines the width of the selected range to either side of indexGrabbed. This would be 2 in your case.

As an explanation of what this does, I have broken it down:

function getBoundedSelection(indexGrabbed, selectionWidth) {
    // Calculate the row indexGrabbed is on.
    var row = Math.floor(indexGrabbed/cropLength);

    // Determine the first index on that row.
    var rowStartIndex = row * cropLength;

    // Get the start index of the selection range or the start of the row,
    // whatever is larger.
    var selStartIndex = Math.max(rowStartIndex, indexGrabbed - selectionWidth);

    // Determine the last index on that row
    var rowEndIndex = rowStartIndex + cropLength;

    // Get the end index of the selection range or the end of the row,
    //whatever is smaller.
    var selEndIndex = Math.min(rowEndIndex, indexGrabbed + selectionWidth);

    // Return the slice bounded by the row's limits.
    return  dataMagnified.slice(selStartIndex, selEndIndex);  
}