Issue#2: updated color codes and PDBTMRegion type

src/apps/viewer/index.html

@@ -55,7 +55,7 @@
             });
 
             // Set PDB Id here
-            var pdbId = '1afo';
+            var pdbId = '1a0s';
             function loadPdb() {
                 molstar.loadWithUNITMPMembraneRepresentation(viewer.plugin, {
                     structureUrl: `https://cs.litemol.org/${pdbId}/full`,

src/extensions/tmdet/behavior.ts

@@ -147,8 +147,7 @@ type PDBTMChain = {
         site_data?: { site_id_ref: number, confidence_classification: string }[]
     }[]
 };
-type PDBTMResidue = PDBTMChain['residues'][0]
-    & { site: string, auth_ids: number[], color: number[] };
+type PDBTMRegion = { site: string, auth_ids: number[], color: number[] };
 type PDBTMTransformationMatrixRow = { x: number, y: number, z: number, t: number };
 type PDBTMTransformationMatrix = {
     rowx: PDBTMTransformationMatrixRow,
@@ -196,32 +195,33 @@ async function createStructureRepresentation(plugin: PluginUIContext, pdbtmDescr
 
     await buildStructureRepresentation(plugin, components);
 
+    // TODO: colors of not curated sites
     const siteColors = [
-        [0, 0, 255], // Side1
-        [255, 0, 0], // Side2
-        [255,255,0], // TM alpha
-        [255,255,0], // TM beta
-        [255,255,0], // TM re-entrant loop
-        [0,0,  255], // Interfacial Helix
-        [0,0,  255], // Unknow localization
-        [0,0,  255], // Membrane Inside
+        [255,100,100], // Side1
+        [100,100,255], // Side2
+        [255,255,0],   // TM alpha
+        [255,255,0],   // TM beta
+        [255,127,0],   // TM re-entrant loop
+        [0,255,  0],   // Interfacial Helix
+        [196,196,196], // Unknow localization
+        [0,255,  0],   // Membrane Inside
     ];
     const siteDefinitions = pdbtmDescriptor.sites.map(
         (siteDefinition: any) => siteDefinition.label
     );
     pdbtmDescriptor.chains.forEach((chain: any) => {
 
-        const regionUpdates = plugin.build();
         for (let residueItem of chain.residues) {
             const siteIndex = residueItem.site_data[0].site_id_ref - 1;
-            const residue: PDBTMResidue = {
+            const residue: PDBTMRegion = {
                 "auth_ids": [ Number(residueItem.pdb_res_label) ],
                 "color": siteColors[siteIndex],
                 "site": siteDefinitions[siteIndex]
             };
+            const regionUpdates = plugin.build();
             createRegionRepresentation(plugin, chain.chain_label, residue, regionUpdates.to(structure));
+            regionUpdates.commit();
         }
-        regionUpdates.commit();
     });
 }
 
@@ -233,7 +233,7 @@ async function createStructureComponents(plugin: PluginUIContext, structure: Sta
     };
 }
 
-function createRegionRepresentation(plugin: PluginUIContext, chain: string, residue: PDBTMResidue, update: StateBuilder.To<any, any>) {
+function createRegionRepresentation(plugin: PluginUIContext, chain: string, residue: PDBTMRegion, update: StateBuilder.To<any, any>) {
     console.log('RESI', residue);
     const regionLabel: string = `${chain}: ${residue.auth_ids[0]} | ${residue.site}`;
     const color: Color = Color.fromArray(residue.color, 0);