Control visibility of chart points when draw them

[masalinas]

Exist any flag to be used to decide what points to be draw by the chart?

Exammple

this.scatterplot.draw(this.pointsChart);

Where pointsChart is an array where ypou define the [X, Y, group], but exist any config flag where decide is a point must be visible to be draw by the chart?

[flekschas]

Have you tried scatterplot.filter()? It sounds like that's the function you're looking for.

[masalinas]

Yes you are right, I tried use the filter function in my plot. A piece of code is that:

  ....

   // refresh scatter plot with all chart points
    this.scatterplot.clear();
    this.scatterplot.draw(this.pointsChart); 

    // set hidden points  
    this.scatterplot.filter(hiddenPointsChart);

Where this.pointsChart is all points to be draw in my case 8883 points, and hiddenPointsChart is the array of point indices to be hidden, but anything happends, the points selected from chart and included in the array hiddenPointsChart are not disappeared in my plot executing the filter function. Something is wrong from my side or maybe is a issue ...

In this video show how select an array of points set a color and later try to hidden these points of the group, the previous piece of code is executed to filter as you say but any point is hidden as you see.

https://github.com/flekschas/regl-scatterplot/assets/1216181/9128040c-cf5e-42c7-ac6e-9771a98ef256

[flekschas]

Not sure what's going on in your application but filter works just fine for me:

https://github.com/flekschas/regl-scatterplot/assets/932103/909f11fd-4349-41ed-99a4-cada8598dd4f

Does the console throw any errors?

[masalinas]

No error from my console, the code pasted to you is very clarifying and simple as you see:

....
....

 // refresh scatter plot with all chart points
   this.scatterplot.clear();
   this.scatterplot.draw(this.pointsChart); 

    // set hidden points  
    this.scatterplot.filter(hiddenPointsChart)

Debugging my arrays, this.pointsChart has the 8883 points to be drawn and they are drawn correctly and the hiddenPointsChart contains the point indices to be hidden as you say but nothing happens. I tried to use a single point and use a large number of points but nothing happens, as you see when I draw the points correctly I don't add any special settings at any time (is need it?). If you have any ideas (I know it's complicated to find the problem, it will be very helpful), can you tell me the example where you use the filter function to hide points? To verify your code and compare it with me.

I'm using this version from package json:

"regl-scatterplot": "^1.8.5",

Thanks

[masalinas]

I have been checking the code of the sample multiple-instances showed in you video right?, but when go to the line when filter function is used, I found this piece of code:

const syncSelection = (source, selectedPoints, classIds) => {
  scatterplots
    .filter((sp) => sp !== source)
    .forEach((sp) => {
      sp.select(selectedPoints, { preventEvent: true });
    });

  scatterplots.forEach((sp) => {
    sp.zoomToPoints(selectedPoints, {
      padding: 0.2,
      transition: true,
      transitionDuration: 1500,
    });
  });

  const pointId =
    selectedPoints[Math.floor(Math.random() * (selectedPoints.length - 1))];
  showImg(pointId, classIds[pointId]);
};

If I understand you select all points in one canvas and in the rest ones you select the same points (similar to the demo offered by you from repository), but in your video you show me an example where only these points are visible, can you share the code about your video please or where can I download to take a glance?

[flekschas]

hidePointsChart contains the point indices to be hidden as you say but nothing happens

That's not how filter works. You have to pass the point indices that you want to keep. Please see the example from https://github.com/flekschas/regl-scatterplot?tab=readme-ov-file#scatterplot.filter

I have been checking the code of the sample multiple-instances showed in you video right?, but when go to the line when filter function is used, I found this piece of code:

I've adjusted the code as follows to produce the video above:

const syncSelection = (source, selectedPoints, classIds) => {
  scatterplots
    .filter((sp) => sp !== source)
    .forEach((sp) => {
      sp.filter(selectedPoints, { preventEvent: true });
    });

  const pointId =
    selectedPoints[Math.floor(Math.random() * (selectedPoints.length - 1))];

  showImg(pointId, classIds[pointId]);
};

const syncDeselection = (source) => {
  scatterplots
    .filter((sp) => sp !== source)
    .forEach((sp) => {
      sp.unfilter({ preventEvent: true });
    });

  hideImg();
};

See how filter takes as input an array of point indices and filter down those points, meaning all the other points are hidden.

[flekschas]

So my guess is that the issue lies hiddenPointsChart. What you want is to create an array called visiblePointIndices and then call filter(visiblePointIndices)

[masalinas]

Hello finally I have been able to make it works. You are right something was wrong in my code and it provoke the issue I made some refactor using the filter function and now works ok. I had to code some extra code because the unregister function, not has any parameter to select a group of points, and I must to have this capacity, but I resolved it from some extra code from my side.

Thanks a lot for your support :)

I have other problem with the lasso functionality I will create other task to answer you about my problem. Regards