[BUG] Show disordered sites without gaps

[jmmshn]

Show disordered sites without gaps

Currently there are rendering artifacts that results in some weird looking sites when there is partial occupancy.

This is due to some weirdness with how the phiStart and phiEnds are being parse after the python part of the code.

If I try to draw a 0.2/0.2/0.2 alloy site then it becomes more obvious that something is wrong.

The data at the python level is here:

Fe (20.0% occupancy) (3.000, 3.000, 0.000)
phiStart: 0.00 pi
phiEnd: 0.40 pi
Co (20.0% occupancy) (3.000, 3.000, 0.000)
phiStart: 0.40 pi
phiEnd: 0.80 pi
Li (20.0% occupancy) (3.000, 3.000, 0.000)
phiStart: 0.80 pi
phiEnd: 1.20 pi

Here the three colors should each be 1/5 of the circle and fit together, but it looks like the phi size of these are doubling each time we go to a new species.

Since the starting phi positions of these are still correct we can mostly fix the plots by nesting the spheres inside each other as I do in this PR. but it would be nice to figure out what exactly is going wrong.

[jmmshn]

@mkhorton, I check the data being represented in python and cannot find any problems.

The TS code here also looks fine:
https://github.com/materialsproject/mp-react-components/blob/73f1a1b38ccb4021ece5dcf38d472e95d96521dc/src/components/crystal-toolkit/scene/three_builder.ts#L423-L432

So not sure where this problem could be coming from.

[mkhorton]

This is an interesting bug, thanks for the report. Only now getting to this. I'll look into the three.js changelog/api too in case there have been changes, or perhaps we're misusing it somehow.

[jmmshn]

Additional context: figure outputs can be made to look OK with if you do a bit of "russian doll" nesting with them.
(there's some janky math you can do since the "START" of each slice is the correct.

So that is a solution to have in our back pocket if this the three.js stuff proof too difficult