How to distinguish between spheres which are created using "addSphere()" and "state.currentGroup"?

I created three groups where each group consists of two spheres using this code as follows (refer to the figure below). Group 1 (two red spheres), Group 2 (two green spheres), and Group 3 (two blue spheres).

const state = MeshBuilder.createState(data.centers.length * 128, data.centers.length * 128 / 2, mesh);
state.currentGroup = 0;
for(let i=0, j=0; i < data.centers.length; i +=3, ++j){
    state.currentGroup = j;
    addSphere(state, Vec3.create(data.centers[i],data.centers[i+1],data.centers[i+2]), data.radii[j], 3);
}
MeshBuilder.getMesh(state);

Because I assigned an unique “state.currentGroup” to each sphere as in the code above, my code worked fine to capture the interaction of each sphere.

My questions are as follows.

Q1) How can I distinguish between spheres in the same group using some kind of “Id”, e.g. state.currentGroup? I.e. is there a way either to use state.currentGroup of a sphere or to store an “ID” for the sphere so that my program identifies clicked sphere?

Q2) How can I determine first two arguments “initialCount” and “chunkSize” of MeshBuilder.createState()? Currently, I just used values of example code in the repository of Molstar.

[dsehnal]

The event also contains the information about the representation you clicked on, you can distinguish between the spheres like that, by including some more info in the sourceData field (or something like this) when you are creating your shape.

[simonryu]

@dsehnal I store the information in a string array (named “InfoMap”) when I create each sphere in advance. Then molstar successfully shows the label (in this example radius of the sphere) in InfoMap which corresponds to a clicked sphere as illustrated in the figure below. Thank you again!

@dsehnal Is there a way to identify “the id (or label whatever)” of the clicked sphere and then instantly to process something using “the identified id” rather than showing the information stored in advance when I create the sphere?

I tried to identify the label of the clicked sphere using the following code.

...
Shape.create(
...
(groupId: number) => 'ID: ' + SphereIDMap[groupId],
...
);

this.plugin.behaviors.interaction.click.subscribe(e => {
            type Loci = {
                [key: string]: any;
            };
            const lc : Loci = e.current.loci;
            console.log(lc.shape.getLabel());
}

I stored a globally unique id in “SphereIDMap” rather than an unique within the same representation (shape). Still, molstar successfully shows the label in right lower corner of its pane.

However, the console shows “ID: undefined” only (i.e. “lc.shape.getLabel()” does not return the stored id). If my program can get the unique id of clicked sphere, I could do my job.

@dsehnal

Should I follow another way? Or, did I make any mistake?