How to update CustomStructureProperty value and have custom theme pick up changes

I’m working on trying to inject some dynamic data (i.e. I can’t hardcode it) into a custom theme to use to colour atoms.

The approach I’m try to use is have a CustomStructureProperty and PluginBehavior, update the value in the provider as needed and read it in our custom theme

In a state action I call

StructureColorPropertyProvider.set(
  structure,
  { pocket: params.extra.pocket },
    params.extra.pocket
);

where params is some data we get from react props, to set the value

However by this point the theme has already been run once and doesn’t seem to get triggered again (as in the top level function does not run again) I have to call

plugin.dataTransaction(async () => {
  for (const s of plugin.managers.structure.hierarchy.current.structures) {
    await plugin.managers.structure.component.updateRepresentationsTheme(
      s.components,
      { color: CustomThemeProvider.name as any }
    );
  }
});

to make the theme refresh, which doesn’t seem correct because it’s re-applying the theme to every structure and it couples the behaviour to a single theme. Is there a better way of doing this?

[dsehnal]

The state tree was designed around the idea that the information needed is contained in the props of a node and it uses react-like state reconciliation to update what is rendered. That is why you need to pass the dummy prop.

What you were/are doing with your approach would be analogous to assigning the value returned by useState in react and expecting the component to re-render.

[dsehnal]

Right, sorry. You can try passing the existing params (selector.cell?.transform.params), or use an empty callback .update(x => {}).

Also, the preset itself might be an overkill for your use case and you might just include the model/structure creation, assign the custom prop, and then create your representation.