Issue #820: fixed update site color bug; some refactorings

src/TmFv3DApp/FeatureViewConfig.ts

@@ -22,8 +22,8 @@ import {RcsbFvStateManager} from "../RcsbFvState/RcsbFvStateManager";
 
 import {RcsbFvStructureConfigInterface} from "../RcsbFvStructure/RcsbFvStructure";
 import {ViewerProps} from "@rcsb/rcsb-molstar/build/src/viewer";
-import { updateSiteColors } from "./UniTmpColor";
-import { fetchHtpDescriptor, fetchPdbtmJsvLibDescriptor, htpDescriptorToTrackData, jsvLibDescriptorToTrackData } from "./UniTmpHelper";
+import { updateSiteColors } from "./tmdet-extension/tmdet-color-theme";
+import { fetchHtpDescriptor, fetchPdbtmJsvLibDescriptor, htpDescriptorToTrackData, jsvLibDescriptorToTrackData, registerRegionDescriptorData } from "./UniTmpHelper";
 import { TmDetRcsbPreset } from "./TmTrajectoryHierarchyPreset";
 import { TmDetDescriptorCache } from "./tmdet-extension/prop";
 
@@ -75,59 +75,7 @@ export async function createFeatureViewerConfing(params: TmFvConfigParams) {
         includeAxis: true,
         length: (fvConfig!.rowConfig[0]!.trackData![0].value as string).length
     };
-
-    fvConfig.sequenceSelectionChangeCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
-        stateManager.selectionState.clearSelection("select", {modelId: modelId, labelAsymId: params.labelAsymId});
-        if(sequenceRegion.length > 0) {
-            const regions = sequenceRegion.map(r => ({
-                modelId: modelId,
-                labelAsymId: params.labelAsymId,
-                region: {begin: r.begin, end: r.end ?? r.begin, source: "sequence"} as RegionSelectionInterface
-            }));
-            stateManager.selectionState.addSelectionFromMultipleRegions(regions, "select");
-            plugin.select(regions.map(r => ({
-                ...r,
-                begin: r.region.begin,
-                end: r.region.end
-            })), "select", "set");
-        }else{
-            plugin.clearSelection("select", {modelId: modelId, labelAsymId: params.labelAsymId})
-            plugin.resetCamera();
-        }
-    };
-    fvConfig.sequenceElementClickCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
-        if(d!=null)
-            plugin.cameraFocus(modelId, params.labelAsymId, d.begin, d.end ?? d.begin);
-    };
-    fvConfig.sequenceHoverCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
-        if(elements == null || elements.length == 0)
-            plugin.clearSelection("hover");
-        else {
-            const e = elements[0];
-            plugin.select(elements.map(e=>({
-                modelId: modelId,
-                labelAsymId: params.labelAsymId,
-                begin: e.begin,
-                end: e.end ?? e.begin
-            })), "hover", "set");
-        }
-    };
-    fvConfig.structureSelectionCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
-        const sel: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition(modelId, params.labelAsymId, "select");
-        if(sel == null) {
-            pfv.clearSelection("select");
-            plugin.resetCamera();
-        }else {
-            pfv.setSelection({elements: sel.regions, mode: "select"});
-        }
-    };
-    fvConfig.structureHoverCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
-        const sel: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition(modelId, params.labelAsymId, "hover");
-        if(sel == null)
-            pfv.clearSelection("hover");
-        else
-            pfv.setSelection({elements:sel.regions, mode:"hover"});
-    };
+    setFvConfigCallbacks(fvConfig, modelId, params.labelAsymId);
 
     const block: FeatureBlockInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType> = {
         blockId: `${params.pdbEntry}_${params.labelAsymId}_block_id`,
@@ -176,16 +124,89 @@ export async function createFeatureViewerConfing(params: TmFvConfigParams) {
         rowConfig[0].trackData![0].value = sequence;
         rowConfig.push(...htpDescriptorToTrackData(htpDescriptor));
     
-        const descriptor = TmDetDescriptorCache.get(params.pdbEntry);
-        const chain = descriptor?.chains.filter(ch => ch.chain_label == params.labelAsymId)[0];
-        const offset = parseInt(chain?.residues[0].pdb_res_label!) - 1;
-        jsvlibDescriptor.regions.forEach((region: any) => {
-            region.start += offset;
-            region.end += offset;
-        });
+        alignJsvLibDescriptorTrack(jsvlibDescriptor, params);
         console.log('JSVLIB:', jsvlibDescriptor);
         rowConfig.push(...jsvLibDescriptorToTrackData(jsvlibDescriptor));
     }
 
+    // TODO: remove these test-data dump stmts.
+    // dumpPdbtmSampleTrack({ pdbEntry: '6bms', labelAsymId: 'A', side1: params.side1 as any });
+    // dumpPdbtmSampleTrack({ pdbEntry: '7khm', labelAsymId: 'B', side1: params.side1 as any });
+
     return { sequenceConfig: sequenceConfig, molstarConfig: molstarConfig };
 }
+
+function alignJsvLibDescriptorTrack(jsvlibDescriptor: any, params: any) {
+    const descriptor = TmDetDescriptorCache.get(params.pdbEntry);
+    const chain = descriptor?.chains.filter(ch => ch.chain_label == params.labelAsymId)[0];
+    const offset = parseInt(chain?.residues[0].pdb_res_label!) - 1;
+    jsvlibDescriptor.regions.forEach((region: any) => {
+        region.start += offset;
+        region.end += offset;
+    });
+}
+
+async function dumpPdbtmSampleTrack(params: { pdbEntry: string, labelAsymId: string, side1: "Inside"|"Outside"|null }) {
+    const jsvlibResponse = await fetchPdbtmJsvLibDescriptor(params.pdbEntry + '_' + params.labelAsymId);
+    await registerRegionDescriptorData(`https://pdbtm.unitmp.org/api/v1/entry/${params.pdbEntry}.json`, params.side1);
+    alignJsvLibDescriptorTrack(jsvlibResponse, params);
+    const trackData = jsvLibDescriptorToTrackData(jsvlibResponse);
+    console.log(`Sample Track of ${params.pdbEntry}_${params.labelAsymId}`);
+    console.log(JSON.stringify(trackData));
+}
+
+function setFvConfigCallbacks(fvConfig: FeatureViewInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, modelId: string, labelAsymId: string) {
+    fvConfig.sequenceSelectionChangeCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
+        stateManager.selectionState.clearSelection("select", {modelId: modelId, labelAsymId: labelAsymId});
+        if(sequenceRegion.length > 0) {
+            const regions = sequenceRegion.map(r => ({
+                modelId: modelId,
+                labelAsymId: labelAsymId,
+                region: {begin: r.begin, end: r.end ?? r.begin, source: "sequence"} as RegionSelectionInterface
+            }));
+            stateManager.selectionState.addSelectionFromMultipleRegions(regions, "select");
+            plugin.select(regions.map(r => ({
+                ...r,
+                begin: r.region.begin,
+                end: r.region.end
+            })), "select", "set");
+        }else{
+            plugin.clearSelection("select", {modelId: modelId, labelAsymId: labelAsymId})
+            plugin.resetCamera();
+        }
+    };
+    fvConfig.sequenceElementClickCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
+        if(d!=null)
+            plugin.cameraFocus(modelId, labelAsymId, d.begin, d.end ?? d.begin);
+    };
+    fvConfig.sequenceHoverCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
+        if(elements == null || elements.length == 0)
+            plugin.clearSelection("hover");
+        else {
+            const e = elements[0];
+            plugin.select(elements.map(e=>({
+                modelId: modelId,
+                labelAsymId: labelAsymId,
+                begin: e.begin,
+                end: e.end ?? e.begin
+            })), "hover", "set");
+        }
+    };
+    fvConfig.structureSelectionCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
+        const sel: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition(modelId, labelAsymId, "select");
+        if(sel == null) {
+            pfv.clearSelection("select");
+            plugin.resetCamera();
+        }else {
+            pfv.setSelection({elements: sel.regions, mode: "select"});
+        }
+    };
+    fvConfig.structureHoverCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
+        const sel: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition(modelId, labelAsymId, "hover");
+        if(sel == null)
+            pfv.clearSelection("hover");
+        else
+            pfv.setSelection({elements:sel.regions, mode:"hover"});
+    };
+
+}

src/TmFv3DApp/TmTrajectoryHierarchyPreset.ts

@@ -19,85 +19,12 @@ import {
     StateObjectSelector,
     StateObjectRef,
 } from 'molstar/lib/mol-state';
-import { Mat4 } from 'molstar/lib/mol-math/linear-algebra';
-import { Target } from '@rcsb/rcsb-molstar/build/src/viewer/helpers/selection';
 import { MembraneOrientationPreset } from './tmdet-extension/behavior';
 import { StateTransforms } from 'molstar/lib/mol-plugin-state/transforms';
 import { applyTransformations } from './tmdet-extension/transformation';
 import { TmDetDescriptorCache } from './tmdet-extension/prop';
 import { registerTmDetSymmetry } from './tmdet-extension/symmetry';
-
-type BaseProps = {
-    assemblyId?: string
-    modelIndex?: number
-    plddt?: 'off' | 'single-chain' | 'on'
-}
-
-export { Mat4 } from 'molstar/lib/mol-math/linear-algebra';
-
-export type AlignmentProps = {
-    kind: 'alignment',
-    targets?: (Target & {
-        matrix?: Mat4
-    })[],
-    colors: {
-        value: number,
-        targets: Target[]
-    }[]
-} & BaseProps
-
-export type EmptyProps = {
-    kind: 'empty'
-} & BaseProps
-
-type ValidationProps = {
-    kind: 'validation'
-    colorTheme?: string
-    showClashes?: boolean
-} & BaseProps
-
-type StandardProps = {
-    kind: 'standard'
-} & BaseProps
-
-type SymmetryProps = {
-    kind: 'symmetry'
-    symmetryIndex?: number
-} & BaseProps
-
-type FeatureProps = {
-    kind: 'feature'
-    target: Target
-} & BaseProps
-
-type DensityProps = {
-    kind: 'density'
-} & BaseProps
-
-type MembraneProps = {
-    kind: 'membrane',
-} & BaseProps
-
-type FeatureDensityProps = {
-    kind: 'feature-density',
-    target: Target,
-    radius?: number,
-    hiddenChannels?: string[]
-} & BaseProps
-
-export type MotifProps = {
-    kind: 'motif',
-    label?: string,
-    targets: Target[],
-    color?: number
-} & BaseProps
-
-export type NakbProps = {
-    kind: 'nakb'
-} & BaseProps
-
-export type PresetProps = ValidationProps | StandardProps | SymmetryProps | FeatureProps | DensityProps | AlignmentProps |
-MembraneProps | FeatureDensityProps | MotifProps | NakbProps | EmptyProps;
+import { PresetProps } from '@rcsb/rcsb-molstar/build/src/viewer/helpers/preset';
 
 const RcsbParams = () => ({
     preset: PD.Value<PresetProps>({ kind: 'standard', assemblyId: '' }, { isHidden: true })

src/TmFv3DApp/index.html

@@ -9,9 +9,9 @@
           title: 'TmSaguaro Example',
           subtitle: 'ZDH15 data',
           elementId: "tmSaguaro",
-          pdbEntry: "7khm",
+          pdbEntry: "6bms",
           labelAsymId: "A",
-          side1: "Inside",
+          side1: "Outside",
           configData: "./zdh15_saguaro.json"
       });
     </script>

src/TmFv3DApp/tmdet-viewer/TmViewer.ts

@@ -21,7 +21,7 @@ import { MembraneOrientationPreset } from '../tmdet-extension/behavior';
 import { TmDetLabelProvider } from '../tmdet-extension/labeling';
 import { loadInitialSnapshot, rotateCamera, storeCameraSnapshot } from '../tmdet-extension/camera';
 import { BuiltInTrajectoryFormat } from 'molstar/lib/mol-plugin-state/formats/trajectory';
-import { PresetProps } from '../TmTrajectoryHierarchyPreset';
+import { PresetProps } from '@rcsb/rcsb-molstar/build/src/viewer/helpers/preset';
 import { Mat4 } from 'molstar/lib/commonjs/mol-math/linear-algebra';
 import { TrajectoryHierarchyPresetProvider } from 'molstar/lib/mol-plugin-state/builder/structure/hierarchy-preset';