Enforce "half a data point or soccer ball is occluded" design

[samreid]

The design called for half of a data point (or soccer ball?) to be occluded/clipped when going out of bounds, so it is clear there is more. We haven't enforced this programmatically. Should we enforce this somehow, or just manually adjust it? Is this still an important aspect of the design?

[matthew-blackman]

5/8 design check-in with @catherinecarter:

@catherinecarter agrees that being able to see a partial ball is important, but not essential to make sure that it is exactly half. The sim should require that a minimum amount of any occluded ball is shown.

Note: In the chart we may autoscale the size of the data points to accomodate this.

The devs will decide on an appropriate implementation strategy.

#187 was opened to address autoscaling of data points in the accordion box.

[matthew-blackman]

Upon further discussion, the devs determined that this problem is more complicated than adjusting the size of the soccer balls. Because the top question bar and accordion box are floating and not limited to dev bounds, the height of the play area is dynamic.

@samreid suggested the following design solution:
If a soccer ball goes behind the collapsed accordion box or behind the question bar, make the occluding element partially transparent. This could help make it clear how many balls are being occluded.

We'd like to review with the full CaV design team @amanda-phet @ariel-phet @kathy-phet before proceeding with a solution. In the meantime, @catherinecarter offered to mock up this idea to propose to the team.

[catherinecarter]

@samreid had the idea of making the accordion box semi-transparent when the accordion box is closed to see in case the balls are stacked in a way that they would be hidden. This might alleviate the issue of forcing a non-full ball under the accordion box edge. Here's a mockup:

[samreid]

From today's design meeting:

• In the worst case scenario (window is short and wide), we would like to see at least part of a soccer ball cut off by the collapsed accordion box. When the accordion box is expanded, it would be nice to see a fractional ball. But the user put those soccer balls there on purpose, so they will know they are there. And they can collapse the accordion box to see more.

The main thing is on screen 1 where there is a max of 15 balls that the entire stack should be under collapsed accordion box.

We will start with that bolded part, and re-evaluate if we determine students are being confused by occluded/clipped soccer balls.

We also like the soccer balls somewhat overlapping, but will need to fix the z-ordering in reorganize stack.

[samreid]

After recent adjustments, the stack looks like this in screen 1 with the collapsed accordion box:

I'm not really sure what this comment is about, but let's work on that in a separate issue:

We also like the soccer balls somewhat overlapping, but will need to fix the z-ordering in reorganize stack.

[phet-dev]

Reopening because there is a TODO marked for this issue.