support/rework modified residues

CHANGELOG.md

@@ -2,7 +2,10 @@
 
 [Semantic Versioning](https://semver.org/)
 
-## [2.4.2] - 2022-06-01
+## [2.5.0] - 2022-06-??
+### Added
+- Strucmotif UI: improve handling of modified & non-standard components
+
 ### Bug fixes
 - Strucmotif UI: call `blur()` to update CSS style properly
 

src/viewer/ui/exchanges.tsx

@@ -7,7 +7,7 @@ import * as React from 'react';
 import { Button } from 'molstar/lib/mol-plugin-ui/controls/common';
 import { MAX_EXCHANGES, Residue } from './strucmotif';
 
-export const DefaultExchanges = [
+export const DefaultExchanges: Map<string, string> = new Map([
     ['ALA', 'Alanine'],
     ['CYS', 'Cysteine'],
     ['ASP', 'Aspartic Acid'],
@@ -28,15 +28,15 @@ export const DefaultExchanges = [
     ['VAL', 'Valine'],
     ['TRP', 'Tryptophan'],
     ['TYR', 'Tyrosine'],
-    ['A', 'Adenosine'],
-    ['C', 'Cytidine'],
     ['DA', 'Deoxyadenosine'],
     ['DC', 'Deoxycytidine'],
     ['DG', 'Deoxyguanosine'],
-    ['G', ',Guanosine'],
-    ['T', 'Thymidine'],
-    ['U', 'Uridine']
-];
+    ['DT', 'Deoxythymidine'],
+    ['A', 'Adenosine'],
+    ['C', 'Cytidine'],
+    ['G', 'Guanosine'],
+    ['U', 'Uridine'],
+]);
 
 export class ExchangesControl extends React.Component<{ handler: Residue }> {
     onClickSwatch = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -47,16 +47,19 @@ export class ExchangesControl extends React.Component<{ handler: Residue }> {
     };
 
     swatch() {
-        return <div className='msp-combined-color-swatch'>
-            {DefaultExchanges.map(e => {
-                const isSelected = this.props.handler.hasExchange(e[0]);
-                const className = isSelected ? 'msp-control-current' : '';
-                const isDisabled = this.props.handler.exchanges.size >= MAX_EXCHANGES && !isSelected;
+        const out: JSX.Element[] = [];
+        DefaultExchanges.forEach((v, k) => {
+            const isSelected = this.props.handler.hasExchange(k);
+            const className = isSelected ? 'msp-control-current' : '';
+            const isDisabled = this.props.handler.exchanges.size >= MAX_EXCHANGES && !isSelected;
+
+            out[out.length] = <Button key={k} title={v} inline data-id={k} onClick={this.onClickSwatch} style={{ padding: 0, fontSize: '13px' }} className={className} disabled={isDisabled}>
+                {k && isSelected ? <b>{k}</b> : k}
+            </Button>;
+        });
 
-                return <Button key={e[0]} title={e[1]} inline data-id={e[0]} onClick={this.onClickSwatch} style={{ padding: 0, fontSize: '13px' }} className={className} disabled={isDisabled}>
-                    {e[0] && isSelected ? <b>{e[0]}</b> : e[0]}
-                </Button>;
-            })}
+        return <div className='msp-combined-color-swatch'>
+            { out }
         </div>;
     }
 

src/viewer/ui/strucmotif.tsx

@@ -19,7 +19,7 @@ import { StructureSelectionHistoryEntry } from 'molstar/lib/mol-plugin-state/man
 import { StructureElement, StructureProperties } from 'molstar/lib/mol-model/structure/structure';
 import { ToggleSelectionModeButton } from 'molstar/lib/mol-plugin-ui/structure/selection';
 import { OrderedSet } from 'molstar/lib/mol-data/int';
-import { ExchangesControl } from './exchanges';
+import { DefaultExchanges, ExchangesControl } from './exchanges';
 import { Vec3 } from 'molstar/lib/mol-math/linear-algebra/3d/vec3';
 import { Structure } from 'molstar/lib/mol-model/structure/structure/structure';
 import { Unit } from 'molstar/lib/mol-model/structure/structure/unit';
@@ -231,10 +231,10 @@ class SubmitControls extends PurePluginUIComponent<{}, { isBusy: boolean, residu
                     residue_ids: residueIds.sort((a, b) => this.sortResidueIds(a, b))
                 },
                 rmsd_cutoff: 2,
-                atom_pairing_scheme: 'ALL',
-                exchanges: exchanges
+                atom_pairing_scheme: 'ALL'
             }
         };
+        if (exchanges.length) Object.assign(query.parameters, { exchanges });
         // console.log(query);
         const sierraUrl = (this.plugin.customState as ViewerState).detachedFromSierra ? ABSOLUTE_ADVANCED_SEARCH_URL : RELATIVE_ADVANCED_SEARCH_URL;
         const url = sierraUrl + encodeURIComponent(JSON.stringify(query)) + RETURN_TYPE;
@@ -357,7 +357,12 @@ export class Residue {
         const structure = entry.loci.structure;
         const e = entry.loci.elements[0];
         StructureElement.Location.set(location, structure, e.unit, e.unit.elements[OrderedSet.getAt(e.indices, 0)]);
-        this.exchanges.add(StructureProperties.atom.label_comp_id(location));
+
+        const comp = StructureProperties.atom.label_comp_id(location);
+        if (DefaultExchanges.has(comp)) {
+            this.exchanges.add(comp);
+            return;
+        }
     }
 
     toggleExchange(val: string): void {