How to set initial visibility of a component to hidden

[gsblendorio]

Let's say I build a structure with a protein and ligand component:

const model = builder
   .download({ url: "https://www.ebi.ac.uk/pdbe/entry-files/1cbs.bcif" })
   .parse({ format: "bcif" });
const structure = model.modelStructure()
// Create protein representation
structure.component({ selector: "protein" }).representation().color({ color: "blue" })
// Create ligand representation
structure.component({ selector: "ligand" }).representation().color({ color: "red" })

Is there a way to build the components with their representations, but have the initial visibility of the ligand be hidden?

[dsehnal]

You would have to create two different states, one with the ligand component added and the other without it. Switching between them will be very fast.

[gsblendorio]

In our use case, we typically have N structures loaded simultaneously, often also including symmetry mates that are initially hidden. If we were to manage symmetry mate visibility using separate states as suggested, that would result in up to 2^N different states, which quickly becomes unmanageable.

[dsehnal]

I could see this working by adding initially_hidden custom property to the relevant nodes and a custom extension passed to the loadMVS function in Mol* that sets the initial state of the node in the builder to isHidden = true. @midlik is something like this currently achievable or would be need to add support to this?

[dsehnal]

In addition to this, I think we might add better support for being able to query MVS elements by the ref assigned in the state. This would allow building custom UIs around the state more easily.

[midlik]

Hi. I think you could also use opacity to achieve what you want:
https://molstar.org/mol-view-spec-docs/tree-schema/#opacity

I.e.

// For the state without ligand
structure.component({ selector: "ligand" }).representation().color({ color: "red" }).opacity({ opacity: 0 });
// For the state with ligand
structure.component({ selector: "ligand" }).representation().color({ color: "red" }).opacity({ opacity: 1 });

then toggle between the two states. Molstar will not need to create/dispose the representation every time, so it should be much faster.

[midlik]

I could see this working by adding initially_hidden custom property to the relevant nodes and a custom extension passed to the loadMVS function in Mol* that sets the initial state of the node in the builder to isHidden = true. @midlik is something like this currently achievable or would be need to add support to this?

Not sure if this can be done by a custom extension. The way these extensions work is that the node is first created in a regular way (i.e. calling update.to(ref).apply(transformer, params, options)), and then the extension code is invoked with the StateObjectSelector of the new node. The extension will need to change options.state.isHidden, is that possible after apply has been called, @dsehnal ? (this all happens before the whole update is committed)

[dsehnal]

is that possible after apply has been called

@midlik can we add UpdateTarget.modifyState(target: UpdateTarget, newState)? We could do this by storing the result of apply on the UpdateTarget interface (and possibly modify the base Mol* builder too).

[midlik]

Yeah, i think it should be possible to add .updateOptions in the base Molstar builder (similar to .update, which updates params). And expose that in the UpdateTarget interface.

But i don't think we really need it if we have opacity, do we?

[dsehnal]

Well, we could do that. But even with opacity, we will need setParams function that mutates the builder node.

[dsehnal]

Created molstar/molstar#1505 which should address this.

[dsehnal]

@gsblendorio molstar/molstar#1505 should address your use-case.