ensure themes with dependencies are updated

src/mol-model-props/computed/themes/accessible-surface-area.ts

@@ -14,6 +14,7 @@ import { AccessibleSurfaceAreaProvider } from '../accessible-surface-area';
 import { AccessibleSurfaceArea } from '../accessible-surface-area/shrake-rupley';
 import { CustomProperty } from '../../common/custom-property';
 import { Location } from '../../../mol-model/location';
+import { hash2 } from '../../../mol-data/util';
 
 const DefaultColor = Color(0xFAFAFA);
 const Description = 'Assigns a color based on the relative accessible surface area of a residue.';
@@ -36,7 +37,7 @@ export function AccessibleSurfaceAreaColorTheme(ctx: ThemeDataContext, props: PD
     });
 
     const accessibleSurfaceArea = ctx.structure && AccessibleSurfaceAreaProvider.get(ctx.structure);
-    const contextHash = accessibleSurfaceArea?.version;
+    const contextHash = accessibleSurfaceArea ? hash2(accessibleSurfaceArea.id, accessibleSurfaceArea.version) : -1;
 
     if (accessibleSurfaceArea?.value && ctx.structure) {
         const asa = accessibleSurfaceArea.value;

src/mol-model-props/computed/themes/interaction-type.ts

@@ -14,6 +14,7 @@ import { InteractionType } from '../interactions/common';
 import { TableLegend } from '../../../mol-util/legend';
 import { Interactions } from '../interactions/interactions';
 import { CustomProperty } from '../../common/custom-property';
+import { hash2 } from '../../../mol-data/util';
 
 const DefaultColor = Color(0xCCCCCC);
 const Description = 'Assigns colors according the interaction type of a link.';
@@ -73,7 +74,7 @@ export function InteractionTypeColorTheme(ctx: ThemeDataContext, props: PD.Value
     let color: LocationColor;
 
     const interactions = ctx.structure ? InteractionsProvider.get(ctx.structure) : undefined;
-    const contextHash = interactions?.version;
+    const contextHash = interactions ? hash2(interactions.id, interactions.version) : -1;
 
     if (interactions && interactions.value) {
         color = (location: Location) => {

src/mol-plugin-state/transforms/representation.ts

@@ -36,7 +36,6 @@ import { DihedralParams, DihedralRepresentation } from '../../mol-repr/shape/loc
 import { ModelSymmetry } from '../../mol-model-formats/structure/property/symmetry';
 import { Clipping } from '../../mol-theme/clipping';
 import { ObjectKeys } from '../../mol-util/type-helpers';
-import { deepEqual } from '../../mol-util';
 
 export { StructureRepresentation3D };
 export { ExplodeStructureRepresentation3D };
@@ -146,13 +145,12 @@ const StructureRepresentation3D = PluginStateTransform.BuiltIn({
             const propertyCtx = { runtime: ctx, assetManager: plugin.managers.asset };
             if (provider.ensureCustomProperties) await provider.ensureCustomProperties.attach(propertyCtx, a.data);
 
-            if (!deepEqual(oldParams, newParams) || a.data.hashCode !== b.data.source.data.hashCode) {
-                // dispose isn't called on update so we need to handle it manually
-                Theme.releaseDependencies(plugin.representation.structure.themes, { structure: b.data.source.data }, oldParams);
-
-                await Theme.ensureDependencies(propertyCtx, plugin.representation.structure.themes, { structure: a.data }, newParams);
-                b.data.repr.setTheme(Theme.create(plugin.representation.structure.themes, { structure: a.data }, newParams));
-            }
+            // TODO: if themes had a .needsUpdate method the following block could
+            //       be optimized and only executed conditionally
+            // dispose isn't called on update so we need to handle it manually
+            Theme.releaseDependencies(plugin.representation.structure.themes, { structure: b.data.source.data }, oldParams);
+            await Theme.ensureDependencies(propertyCtx, plugin.representation.structure.themes, { structure: a.data }, newParams);
+            b.data.repr.setTheme(Theme.create(plugin.representation.structure.themes, { structure: a.data }, newParams));
 
             const props = { ...b.data.repr.props, ...newParams.type.params };
             await b.data.repr.createOrUpdate(props, a.data).runInContext(ctx);

src/mol-theme/color/secondary-structure.ts

@@ -16,6 +16,7 @@ import { TableLegend } from '../../mol-util/legend';
 import { SecondaryStructureProvider, SecondaryStructureValue } from '../../mol-model-props/computed/secondary-structure';
 import { getAdjustedColorMap } from '../../mol-util/color/color';
 import { CustomProperty } from '../../mol-model-props/common/custom-property';
+import { hash2 } from '../../mol-data/util';
 
 // from Jmol http://jmol.sourceforge.net/jscolors/ (shapely)
 const SecondaryStructureColors = ColorMap({
@@ -85,7 +86,7 @@ export function secondaryStructureColor(colorMap: SecondaryStructureColors, unit
 export function SecondaryStructureColorTheme(ctx: ThemeDataContext, props: PD.Values<SecondaryStructureColorThemeParams>): ColorTheme<SecondaryStructureColorThemeParams> {
 
     const computedSecondaryStructure = ctx.structure && SecondaryStructureProvider.get(ctx.structure);
-    const contextHash = computedSecondaryStructure && computedSecondaryStructure.version;
+    const contextHash = computedSecondaryStructure ? hash2(computedSecondaryStructure.id, computedSecondaryStructure.version) : -1;
 
     const colorMap = getAdjustedColorMap(SecondaryStructureColors, props.saturation, props.lightness);