Cartoon nucleic with sugar visual (#727)

* add handlers to MeshBuilder

* Add ring fill visual

* Add nucleotide ring bond visual

* Add nucleotide ring element visual

* Update cartoon representation

* Fix imports

* Smooth normals

* Lint fix

* Update headers and Changelog

* Fix sugar ring mid point

* rename ring -> atomic

* refactor shared nucleotide helpers

* thicknessFactor for nucleic ring/block/fill visuals

* changelog

---------

Co-authored-by: Alexander Rose <alexander.rose@weirdbyte.de>
Co-authored-by: David Sehnal <dsehnal@users.noreply.github.com>

CHANGELOG.md

@@ -6,6 +6,8 @@ Note that since we don't clearly distinguish between a public and private interf
 
 ## [Unreleased]
 
+- Add new `cartoon` visuals to support atomic nucleotide base with sugar
+- Add `thicknessFactor` to `cartoon` representation for scaling nucleotide block/ring/atomic-fill visuals
 - Use bonds from `_struct_conn` in mmCIF files that use `label_seq_id`
 - Fix measurement label `offsetZ` default: not needed when `scaleByRadius` is enbaled
 - Support for label rendering in HeadlessPluginContext

src/mol-geo/geometry/mesh/mesh-builder.ts

@@ -67,6 +67,22 @@ export namespace MeshBuilder {
         caAdd3(indices, offset, offset + 1, offset + 2);
     }
 
+    export function addTriangleWithNormal(state: State, a: Vec3, b: Vec3, c: Vec3, n: Vec3) {
+        const { vertices, normals, indices, groups, currentGroup } = state;
+        const offset = vertices.elementCount;
+
+        // positions
+        caAdd3(vertices, a[0], a[1], a[2]);
+        caAdd3(vertices, b[0], b[1], b[2]);
+        caAdd3(vertices, c[0], c[1], c[2]);
+
+        for (let i = 0; i < 3; ++i) {
+            caAdd3(normals, n[0], n[1], n[2]); // normal
+            caAdd(groups, currentGroup); // group
+        }
+        caAdd3(indices, offset, offset + 1, offset + 2);
+    }
+
     export function addTriangleStrip(state: State, vertices: ArrayLike<number>, indices: ArrayLike<number>) {
         v3fromArray(tmpVecC, vertices, indices[0] * 3);
         v3fromArray(tmpVecD, vertices, indices[1] * 3);
@@ -89,6 +105,15 @@ export namespace MeshBuilder {
         }
     }
 
+    export function addTriangleFanWithNormal(state: State, vertices: ArrayLike<number>, indices: ArrayLike<number>, normal: Vec3) {
+        v3fromArray(tmpVecA, vertices, indices[0] * 3);
+        for (let i = 2, il = indices.length; i < il; ++i) {
+            v3fromArray(tmpVecB, vertices, indices[i - 1] * 3);
+            v3fromArray(tmpVecC, vertices, indices[i] * 3);
+            addTriangleWithNormal(state, tmpVecA, tmpVecC, tmpVecB, normal);
+        }
+    }
+
     export function addPrimitive(state: State, t: Mat4, primitive: Primitive) {
         const { vertices: va, normals: na, indices: ia } = primitive;
         const { vertices, normals, indices, groups, currentGroup } = state;
@@ -160,4 +185,4 @@ export namespace MeshBuilder {
         const gb = ChunkedArray.compact(groups, true) as Float32Array;
         return Mesh.create(vb, ib, nb, gb, state.vertices.elementCount, state.indices.elementCount, mesh);
     }
-}
+}

src/mol-repr/structure/representation/cartoon.ts

@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ * @author Gianluca Tomasello <giagitom@gmail.com>
  */
 
 import { Structure, Unit } from '../../../mol-model/structure';
@@ -12,6 +13,9 @@ import { StructureRepresentation, StructureRepresentationProvider, StructureRepr
 import { UnitsRepresentation } from '../units-representation';
 import { NucleotideBlockParams, NucleotideBlockVisual } from '../visual/nucleotide-block-mesh';
 import { NucleotideRingParams, NucleotideRingVisual } from '../visual/nucleotide-ring-mesh';
+import { NucleotideAtomicRingFillParams, NucleotideAtomicRingFillVisual } from '../visual/nucleotide-atomic-ring-fill';
+import { NucleotideAtomicBondParams, NucleotideAtomicBondVisual } from '../visual/nucleotide-atomic-bond';
+import { NucleotideAtomicElementParams, NucleotideAtomicElementVisual } from '../visual/nucleotide-atomic-element';
 import { PolymerDirectionParams, PolymerDirectionVisual } from '../visual/polymer-direction-wedge';
 import { PolymerGapParams, PolymerGapVisual } from '../visual/polymer-gap-cylinder';
 import { PolymerTraceParams, PolymerTraceVisual } from '../visual/polymer-trace-mesh';
@@ -25,7 +29,10 @@ const CartoonVisuals = {
     'polymer-gap': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, PolymerGapParams>) => UnitsRepresentation('Polymer gap cylinder', ctx, getParams, PolymerGapVisual),
     'nucleotide-block': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, NucleotideBlockParams>) => UnitsRepresentation('Nucleotide block mesh', ctx, getParams, NucleotideBlockVisual),
     'nucleotide-ring': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, NucleotideRingParams>) => UnitsRepresentation('Nucleotide ring mesh', ctx, getParams, NucleotideRingVisual),
-    'direction-wedge': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, PolymerDirectionParams>) => UnitsRepresentation('Polymer direction wedge', ctx, getParams, PolymerDirectionVisual)
+    'nucleotide-atomic-ring-fill': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, NucleotideAtomicRingFillParams>) => UnitsRepresentation('Nucleotide atomic ring fill', ctx, getParams, NucleotideAtomicRingFillVisual),
+    'nucleotide-atomic-bond': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, NucleotideAtomicBondParams>) => UnitsRepresentation('Nucleotide atomic bond', ctx, getParams, NucleotideAtomicBondVisual),
+    'nucleotide-atomic-element': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, NucleotideAtomicElementParams>) => UnitsRepresentation('Nucleotide atomic element', ctx, getParams, NucleotideAtomicElementVisual),
+    'direction-wedge': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, PolymerDirectionParams>) => UnitsRepresentation('Polymer direction wedge', ctx, getParams, PolymerDirectionVisual),
 };
 
 export const CartoonParams = {
@@ -33,9 +40,12 @@ export const CartoonParams = {
     ...PolymerGapParams,
     ...NucleotideBlockParams,
     ...NucleotideRingParams,
+    ...NucleotideAtomicBondParams,
+    ...NucleotideAtomicElementParams,
+    ...NucleotideAtomicRingFillParams,
     ...PolymerDirectionParams,
     sizeFactor: PD.Numeric(0.2, { min: 0, max: 10, step: 0.01 }),
-    visuals: PD.MultiSelect(['polymer-trace', 'polymer-gap', 'nucleotide-ring'], PD.objectToOptions(CartoonVisuals)),
+    visuals: PD.MultiSelect(['polymer-trace', 'polymer-gap', 'nucleotide-ring', 'nucleotide-atomic-ring-fill', 'nucleotide-atomic-bond', 'nucleotide-atomic-element'], PD.objectToOptions(CartoonVisuals)),
     bumpFrequency: PD.Numeric(2, { min: 0, max: 10, step: 0.1 }, BaseGeometry.ShadingCategory),
 };
 
@@ -83,4 +93,4 @@ export const CartoonRepresentationProvider = StructureRepresentationProvider({
             }
         }
     }
-});
+});

src/mol-repr/structure/visual/nucleotide-atomic-bond.ts

@@ -0,0 +1,333 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Gianluca Tomasello <giagitom@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { Vec3 } from '../../../mol-math/linear-algebra';
+import { VisualContext } from '../../visual';
+import { Unit, Structure } from '../../../mol-model/structure';
+import { Theme } from '../../../mol-theme/theme';
+import { Mesh } from '../../../mol-geo/geometry/mesh/mesh';
+import { MeshBuilder } from '../../../mol-geo/geometry/mesh/mesh-builder';
+import { Segmentation } from '../../../mol-data/int';
+import { CylinderProps } from '../../../mol-geo/primitive/cylinder';
+import { isNucleic } from '../../../mol-model/structure/model/types';
+import { addCylinder } from '../../../mol-geo/geometry/mesh/builder/cylinder';
+import { UnitsMeshParams, UnitsVisual, UnitsMeshVisual, UnitsCylindersParams, UnitsCylindersVisual } from '../units-visual';
+import { NucleotideLocationIterator, getNucleotideElementLoci, eachNucleotideElement, getNucleotideBaseType, createNucleicIndices, setSugarIndices, hasSugarIndices, setPurinIndices, hasPurinIndices, setPyrimidineIndices, hasPyrimidineIndices } from './util/nucleotide';
+import { VisualUpdateState } from '../../util';
+import { BaseGeometry } from '../../../mol-geo/geometry/base';
+import { Sphere3D } from '../../../mol-math/geometry';
+
+import { WebGLContext } from '../../../mol-gl/webgl/context';
+
+import { Cylinders } from '../../../mol-geo/geometry/cylinders/cylinders';
+import { CylindersBuilder } from '../../../mol-geo/geometry/cylinders/cylinders-builder';
+import { StructureGroup } from './util/common';
+
+const pTrace = Vec3();
+
+const pN1 = Vec3();
+const pC2 = Vec3();
+const pN3 = Vec3();
+const pC4 = Vec3();
+const pC5 = Vec3();
+const pC6 = Vec3();
+const pN7 = Vec3();
+const pC8 = Vec3();
+const pN9 = Vec3();
+
+const pC1_1 = Vec3();
+const pC2_1 = Vec3();
+const pC3_1 = Vec3();
+const pC4_1 = Vec3();
+const pO4_1 = Vec3();
+
+export const NucleotideAtomicBondParams = {
+    ...UnitsMeshParams,
+    ...UnitsCylindersParams,
+    sizeFactor: PD.Numeric(0.3, { min: 0, max: 10, step: 0.01 }),
+    radialSegments: PD.Numeric(16, { min: 2, max: 56, step: 2 }, BaseGeometry.CustomQualityParamInfo),
+    tryUseImpostor: PD.Boolean(true)
+};
+export type NucleotideAtomicBondParams = typeof NucleotideAtomicBondParams
+interface NucleotideAtomicBondImpostorProps {
+    sizeFactor: number,
+}
+
+export function NucleotideAtomicBondVisual(materialId: number, structure: Structure, props: PD.Values<NucleotideAtomicBondParams>, webgl?: WebGLContext) {
+    return props.tryUseImpostor && webgl && webgl.extensions.fragDepth
+        ? NucleotideAtomicBondImpostorVisual(materialId)
+        : NucleotideAtomicBondMeshVisual(materialId);
+}
+
+function createNucleotideAtomicBondImpostor(ctx: VisualContext, unit: Unit, structure: Structure, theme: Theme, props: NucleotideAtomicBondImpostorProps, cylinders?: Cylinders) {
+    if (!Unit.isAtomic(unit)) return Cylinders.createEmpty(cylinders);
+
+    const nucleotideElementCount = unit.nucleotideElements.length;
+    if (!nucleotideElementCount) return Cylinders.createEmpty(cylinders);
+
+    const cylindersCountEstimate = nucleotideElementCount * 15; // 15 is the average purine (17) & pirimidine (13) bonds
+    const builder = CylindersBuilder.create(cylindersCountEstimate, cylindersCountEstimate / 4, cylinders);
+
+    const { elements, model } = unit;
+    const { chainAtomSegments, residueAtomSegments } = model.atomicHierarchy;
+
+    const { moleculeType } = model.atomicHierarchy.derived.residue;
+    const pos = unit.conformation.invariantPosition;
+
+    const chainIt = Segmentation.transientSegments(chainAtomSegments, elements);
+    const residueIt = Segmentation.transientSegments(residueAtomSegments, elements);
+
+    let i = 0;
+    while (chainIt.hasNext) {
+        residueIt.setSegment(chainIt.move());
+
+        while (residueIt.hasNext) {
+            const { index: residueIndex } = residueIt.move();
+
+            if (isNucleic(moleculeType[residueIndex])) {
+                const idx = createNucleicIndices();
+
+                setSugarIndices(idx, unit, residueIndex);
+
+                if (hasSugarIndices(idx)) {
+                    pos(idx.C1_1, pC1_1); pos(idx.C2_1, pC2_1); pos(idx.C3_1, pC3_1); pos(idx.C4_1, pC4_1); pos(idx.O4_1, pO4_1);
+
+                    // trace cylinder
+                    pos(idx.trace, pTrace);
+                    builder.add(pC3_1[0], pC3_1[1], pC3_1[2], pTrace[0], pTrace[1], pTrace[2], 1, true, true, i);
+
+                    // sugar ring
+                    builder.add(pC3_1[0], pC3_1[1], pC3_1[2], pC4_1[0], pC4_1[1], pC4_1[2], 1, true, true, i);
+                    builder.add(pC4_1[0], pC4_1[1], pC4_1[2], pO4_1[0], pO4_1[1], pO4_1[2], 1, true, true, i);
+                    builder.add(pO4_1[0], pO4_1[1], pO4_1[2], pC1_1[0], pC1_1[1], pC1_1[2], 1, true, true, i);
+                    builder.add(pC1_1[0], pC1_1[1], pC1_1[2], pC2_1[0], pC2_1[1], pC2_1[2], 1, true, true, i);
+                    builder.add(pC2_1[0], pC2_1[1], pC2_1[2], pC3_1[0], pC3_1[1], pC3_1[2], 1, true, true, i);
+                }
+
+                const { isPurine, isPyrimidine } = getNucleotideBaseType(unit, residueIndex);
+
+                if (isPurine) {
+                    setPurinIndices(idx, unit, residueIndex);
+
+                    if (idx.C1_1 !== -1 && idx.N9 !== -1) {
+                        pos(idx.C1_1, pC1_1); pos(idx.N9, pN9);
+                        builder.add(pN9[0], pN9[1], pN9[2], pC1_1[0], pC1_1[1], pC1_1[2], 1, true, true, i);
+                    } else if (idx.N9 !== -1 && idx.trace !== -1) {
+                        pos(idx.N9, pN9); pos(idx.trace, pTrace);
+                        builder.add(pN9[0], pN9[1], pN9[2], pTrace[0], pTrace[1], pTrace[2], 1, true, true, i);
+                    }
+
+                    if (hasPurinIndices(idx)) {
+                        pos(idx.N1, pN1); pos(idx.C2, pC2); pos(idx.N3, pN3); pos(idx.C4, pC4); pos(idx.C5, pC5); pos(idx.C6, pC6); pos(idx.N7, pN7); pos(idx.C8, pC8); pos(idx.N9, pN9);
+
+                        // base ring
+                        builder.add(pN9[0], pN9[1], pN9[2], pC8[0], pC8[1], pC8[2], 1, true, true, i);
+                        builder.add(pC8[0], pC8[1], pC8[2], pN7[0], pN7[1], pN7[2], 1, true, true, i);
+                        builder.add(pN7[0], pN7[1], pN7[2], pC5[0], pC5[1], pC5[2], 1, true, true, i);
+                        builder.add(pC5[0], pC5[1], pC5[2], pC6[0], pC6[1], pC6[2], 1, true, true, i);
+                        builder.add(pC6[0], pC6[1], pC6[2], pN1[0], pN1[1], pN1[2], 1, true, true, i);
+                        builder.add(pN1[0], pN1[1], pN1[2], pC2[0], pC2[1], pC2[2], 1, true, true, i);
+                        builder.add(pC2[0], pC2[1], pC2[2], pN3[0], pN3[1], pN3[2], 1, true, true, i);
+                        builder.add(pN3[0], pN3[1], pN3[2], pC4[0], pC4[1], pC4[2], 1, true, true, i);
+                        builder.add(pC4[0], pC4[1], pC4[2], pC5[0], pC5[1], pC5[2], 1, true, true, i);
+                        builder.add(pC4[0], pC4[1], pC4[2], pN9[0], pN9[1], pN9[2], 1, true, true, i);
+
+                    }
+                } else if (isPyrimidine) {
+                    setPyrimidineIndices(idx, unit, residueIndex);
+
+                    if (idx.C1_1 !== -1 && idx.N1 !== -1) {
+                        pos(idx.N1, pN1); pos(idx.C1_1, pC1_1);
+                        builder.add(pN1[0], pN1[1], pN1[2], pC1_1[0], pC1_1[1], pC1_1[2], 1, true, true, i);
+                    } else if (idx.N1 !== -1 && idx.trace !== -1) {
+                        pos(idx.N1, pN1); pos(idx.trace, pTrace);
+                        builder.add(pN1[0], pN1[1], pN1[2], pTrace[0], pTrace[1], pTrace[2], 1, true, true, i);
+                    }
+
+                    if (hasPyrimidineIndices(idx)) {
+                        pos(idx.N1, pN1); pos(idx.C2, pC2); pos(idx.N3, pN3); pos(idx.C4, pC4); pos(idx.C5, pC5); pos(idx.C6, pC6);
+
+                        // base ring
+                        builder.add(pN1[0], pN1[1], pN1[2], pC6[0], pC6[1], pC6[2], 1, true, true, i);
+                        builder.add(pC6[0], pC6[1], pC6[2], pC5[0], pC5[1], pC5[2], 1, true, true, i);
+                        builder.add(pC5[0], pC5[1], pC5[2], pC4[0], pC4[1], pC4[2], 1, true, true, i);
+                        builder.add(pC4[0], pC4[1], pC4[2], pN3[0], pN3[1], pN3[2], 1, true, true, i);
+                        builder.add(pN3[0], pN3[1], pN3[2], pC2[0], pC2[1], pC2[2], 1, true, true, i);
+                        builder.add(pC2[0], pC2[1], pC2[2], pN1[0], pN1[1], pN1[2], 1, true, true, i);
+                    }
+                }
+
+                ++i;
+            }
+        }
+    }
+    const c = builder.getCylinders();
+
+    const sphere = Sphere3D.expand(Sphere3D(), unit.boundary.sphere, 1 * props.sizeFactor);
+    c.setBoundingSphere(sphere);
+
+    return c;
+}
+
+export function NucleotideAtomicBondImpostorVisual(materialId: number): UnitsVisual<NucleotideAtomicBondParams> {
+    return UnitsCylindersVisual<NucleotideAtomicBondParams>({
+        defaultProps: PD.getDefaultValues(NucleotideAtomicBondParams),
+        createGeometry: createNucleotideAtomicBondImpostor,
+        createLocationIterator: NucleotideLocationIterator.fromGroup,
+        getLoci: getNucleotideElementLoci,
+        eachLocation: eachNucleotideElement,
+        setUpdateState: (state: VisualUpdateState, newProps: PD.Values<NucleotideAtomicBondParams>, currentProps: PD.Values<NucleotideAtomicBondParams>) => {
+            state.createGeometry = (
+                newProps.sizeFactor !== currentProps.sizeFactor
+            );
+        },
+        mustRecreate: (structureGroup: StructureGroup, props: PD.Values<NucleotideAtomicBondParams>, webgl?: WebGLContext) => {
+            return !props.tryUseImpostor || !webgl;
+        }
+    }, materialId);
+}
+
+interface NucleotideAtomicBondMeshProps {
+    radialSegments: number,
+    sizeFactor: number,
+}
+
+function createNucleotideAtomicBondMesh(ctx: VisualContext, unit: Unit, structure: Structure, theme: Theme, props: NucleotideAtomicBondMeshProps, mesh?: Mesh) {
+    if (!Unit.isAtomic(unit)) return Mesh.createEmpty(mesh);
+
+    const nucleotideElementCount = unit.nucleotideElements.length;
+    if (!nucleotideElementCount) return Mesh.createEmpty(mesh);
+
+    const { sizeFactor, radialSegments } = props;
+
+    const vertexCount = nucleotideElementCount * (radialSegments * 15); // 15 is the average purine (17) & pirimidine (13) bonds
+    const builderState = MeshBuilder.createState(vertexCount, vertexCount / 4, mesh);
+
+    const { elements, model } = unit;
+    const { chainAtomSegments, residueAtomSegments } = model.atomicHierarchy;
+    const { moleculeType } = model.atomicHierarchy.derived.residue;
+    const pos = unit.conformation.invariantPosition;
+
+    const chainIt = Segmentation.transientSegments(chainAtomSegments, elements);
+    const residueIt = Segmentation.transientSegments(residueAtomSegments, elements);
+
+    const cylinderProps: CylinderProps = { radiusTop: 1 * sizeFactor, radiusBottom: 1 * sizeFactor, radialSegments };
+
+    let i = 0;
+    while (chainIt.hasNext) {
+        residueIt.setSegment(chainIt.move());
+
+        while (residueIt.hasNext) {
+            const { index: residueIndex } = residueIt.move();
+
+            if (isNucleic(moleculeType[residueIndex])) {
+                const idx = createNucleicIndices();
+
+                builderState.currentGroup = i;
+
+                setSugarIndices(idx, unit, residueIndex);
+
+                if (hasSugarIndices(idx)) {
+                    pos(idx.C1_1, pC1_1); pos(idx.C2_1, pC2_1); pos(idx.C3_1, pC3_1); pos(idx.C4_1, pC4_1); pos(idx.O4_1, pO4_1);
+
+                    // trace cylinder
+                    pos(idx.trace, pTrace);
+                    addCylinder(builderState, pC3_1, pTrace, 1, cylinderProps);
+
+                    // sugar ring
+                    addCylinder(builderState, pC3_1, pC4_1, 1, cylinderProps);
+                    addCylinder(builderState, pC4_1, pO4_1, 1, cylinderProps);
+                    addCylinder(builderState, pO4_1, pC1_1, 1, cylinderProps);
+                    addCylinder(builderState, pC1_1, pC2_1, 1, cylinderProps);
+                    addCylinder(builderState, pC2_1, pC3_1, 1, cylinderProps);
+                }
+
+                const { isPurine, isPyrimidine } = getNucleotideBaseType(unit, residueIndex);
+
+                if (isPurine) {
+                    setPurinIndices(idx, unit, residueIndex);
+
+                    if (idx.C1_1 !== -1 && idx.N9 !== -1) {
+                        pos(idx.C1_1, pC1_1); pos(idx.N9, pN9);
+                        addCylinder(builderState, pN9, pC1_1, 1, cylinderProps);
+                    } else if (idx.N9 !== -1 && idx.trace !== -1) {
+                        pos(idx.N9, pN9); pos(idx.trace, pTrace);
+                        addCylinder(builderState, pN9, pTrace, 1, cylinderProps);
+                    }
+
+                    if (hasPurinIndices(idx)) {
+                        pos(idx.N1, pN1); pos(idx.C2, pC2); pos(idx.N3, pN3); pos(idx.C4, pC4); pos(idx.C5, pC5); pos(idx.C6, pC6); pos(idx.N7, pN7); pos(idx.C8, pC8); pos(idx.N9, pN9);
+
+                        // base ring
+                        addCylinder(builderState, pN9, pC8, 1, cylinderProps);
+                        addCylinder(builderState, pC8, pN7, 1, cylinderProps);
+                        addCylinder(builderState, pN7, pC5, 1, cylinderProps);
+                        addCylinder(builderState, pC5, pC6, 1, cylinderProps);
+                        addCylinder(builderState, pC6, pN1, 1, cylinderProps);
+                        addCylinder(builderState, pN1, pC2, 1, cylinderProps);
+                        addCylinder(builderState, pC2, pN3, 1, cylinderProps);
+                        addCylinder(builderState, pN3, pC4, 1, cylinderProps);
+                        addCylinder(builderState, pC4, pC5, 1, cylinderProps);
+                        addCylinder(builderState, pC4, pN9, 1, cylinderProps);
+                    }
+                } else if (isPyrimidine) {
+                    setPyrimidineIndices(idx, unit, residueIndex);
+
+                    if (idx.C1_1 !== -1 && idx.N1 !== -1) {
+                        pos(idx.N1, pN1); pos(idx.C1_1, pC1_1);
+                        addCylinder(builderState, pN1, pC1_1, 1, cylinderProps);
+                    } else if (idx.N1 !== -1 && idx.trace !== -1) {
+                        pos(idx.N1, pN1); pos(idx.trace, pTrace);
+                        addCylinder(builderState, pN1, pTrace, 1, cylinderProps);
+                    }
+
+                    if (hasPyrimidineIndices(idx)) {
+                        pos(idx.N1, pN1); pos(idx.C2, pC2); pos(idx.N3, pN3); pos(idx.C4, pC4); pos(idx.C5, pC5); pos(idx.C6, pC6);
+
+                        // base ring
+                        addCylinder(builderState, pN1, pC6, 1, cylinderProps);
+                        addCylinder(builderState, pC6, pC5, 1, cylinderProps);
+                        addCylinder(builderState, pC5, pC4, 1, cylinderProps);
+                        addCylinder(builderState, pC4, pN3, 1, cylinderProps);
+                        addCylinder(builderState, pN3, pC2, 1, cylinderProps);
+                        addCylinder(builderState, pC2, pN1, 1, cylinderProps);
+                    }
+                }
+
+                ++i;
+            }
+        }
+    }
+
+    const m = MeshBuilder.getMesh(builderState);
+
+    const sphere = Sphere3D.expand(Sphere3D(), unit.boundary.sphere, 1 * props.sizeFactor);
+    m.setBoundingSphere(sphere);
+
+    return m;
+}
+
+
+export function NucleotideAtomicBondMeshVisual(materialId: number): UnitsVisual<NucleotideAtomicBondParams> {
+    return UnitsMeshVisual<NucleotideAtomicBondParams>({
+        defaultProps: PD.getDefaultValues(NucleotideAtomicBondParams),
+        createGeometry: createNucleotideAtomicBondMesh,
+        createLocationIterator: NucleotideLocationIterator.fromGroup,
+        getLoci: getNucleotideElementLoci,
+        eachLocation: eachNucleotideElement,
+        setUpdateState: (state: VisualUpdateState, newProps: PD.Values<NucleotideAtomicBondParams>, currentProps: PD.Values<NucleotideAtomicBondParams>) => {
+            state.createGeometry = (
+                newProps.sizeFactor !== currentProps.sizeFactor ||
+                newProps.radialSegments !== currentProps.radialSegments
+            );
+        },
+        mustRecreate: (structureGroup: StructureGroup, props: PD.Values<NucleotideAtomicBondParams>, webgl?: WebGLContext) => {
+            return props.tryUseImpostor && !!webgl;
+        }
+    }, materialId);
+}

src/mol-repr/structure/visual/nucleotide-atomic-element.ts

@@ -0,0 +1,297 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Gianluca Tomasello <giagitom@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { Vec3 } from '../../../mol-math/linear-algebra';
+import { VisualContext } from '../../visual';
+import { Unit, Structure } from '../../../mol-model/structure';
+import { Theme } from '../../../mol-theme/theme';
+import { Mesh } from '../../../mol-geo/geometry/mesh/mesh';
+import { MeshBuilder } from '../../../mol-geo/geometry/mesh/mesh-builder';
+import { Segmentation } from '../../../mol-data/int';
+import { isNucleic } from '../../../mol-model/structure/model/types';
+import { addSphere } from '../../../mol-geo/geometry/mesh/builder/sphere';
+import { UnitsMeshParams, UnitsVisual, UnitsMeshVisual, UnitsSpheresParams, UnitsSpheresVisual } from '../units-visual';
+import { NucleotideLocationIterator, getNucleotideElementLoci, eachNucleotideElement, getNucleotideBaseType, createNucleicIndices, setSugarIndices, hasSugarIndices, setPurinIndices, hasPurinIndices, setPyrimidineIndices, hasPyrimidineIndices } from './util/nucleotide';
+import { VisualUpdateState } from '../../util';
+import { BaseGeometry } from '../../../mol-geo/geometry/base';
+import { Sphere3D } from '../../../mol-math/geometry';
+import { WebGLContext } from '../../../mol-gl/webgl/context';
+import { Spheres } from '../../../mol-geo/geometry/spheres/spheres';
+import { sphereVertexCount } from '../../../mol-geo/primitive/sphere';
+import { SpheresBuilder } from '../../../mol-geo/geometry/spheres/spheres-builder';
+import { StructureGroup } from './util/common';
+
+const pTrace = Vec3();
+
+const pN1 = Vec3();
+const pC2 = Vec3();
+const pN3 = Vec3();
+const pC4 = Vec3();
+const pC5 = Vec3();
+const pC6 = Vec3();
+const pN7 = Vec3();
+const pC8 = Vec3();
+const pN9 = Vec3();
+
+const pC1_1 = Vec3();
+const pC2_1 = Vec3();
+const pC3_1 = Vec3();
+const pC4_1 = Vec3();
+const pO4_1 = Vec3();
+
+export const NucleotideAtomicElementParams = {
+    ...UnitsMeshParams,
+    ...UnitsSpheresParams,
+    sizeFactor: PD.Numeric(0.3, { min: 0, max: 10, step: 0.01 }),
+    detail: PD.Numeric(0, { min: 0, max: 3, step: 1 }, BaseGeometry.CustomQualityParamInfo),
+    tryUseImpostor: PD.Boolean(true)
+};
+export type NucleotideAtomicElementParams = typeof NucleotideAtomicElementParams
+interface NucleotideAtomicElementImpostorProps {
+    sizeFactor: number,
+}
+
+export function NucleotideAtomicElementVisual(materialId: number, structure: Structure, props: PD.Values<NucleotideAtomicElementParams>, webgl?: WebGLContext) {
+    return props.tryUseImpostor && webgl && webgl.extensions.fragDepth
+        ? NucleotideAtomicElementImpostorVisual(materialId)
+        : NucleotideAtomicElementMeshVisual(materialId);
+}
+
+function createNucleotideAtomicElementImpostor(ctx: VisualContext, unit: Unit, structure: Structure, theme: Theme, props: NucleotideAtomicElementImpostorProps, spheres?: Spheres) {
+    if (!Unit.isAtomic(unit)) return Spheres.createEmpty(spheres);
+
+    const nucleotideElementCount = unit.nucleotideElements.length;
+    if (!nucleotideElementCount) return Spheres.createEmpty(spheres);
+
+    const spheresCountEstimate = nucleotideElementCount * 15; // 15 is the average purine (17) & pirimidine (13) bonds
+    const builder = SpheresBuilder.create(spheresCountEstimate, spheresCountEstimate / 4, spheres);
+
+    const { elements, model } = unit;
+    const { chainAtomSegments, residueAtomSegments } = model.atomicHierarchy;
+
+    const { moleculeType } = model.atomicHierarchy.derived.residue;
+    const pos = unit.conformation.invariantPosition;
+
+    const chainIt = Segmentation.transientSegments(chainAtomSegments, elements);
+    const residueIt = Segmentation.transientSegments(residueAtomSegments, elements);
+
+    let i = 0;
+    while (chainIt.hasNext) {
+        residueIt.setSegment(chainIt.move());
+
+        while (residueIt.hasNext) {
+            const { index: residueIndex } = residueIt.move();
+
+            if (isNucleic(moleculeType[residueIndex])) {
+                const idx = createNucleicIndices();
+
+                setSugarIndices(idx, unit, residueIndex);
+
+                if (hasSugarIndices(idx)) {
+                    pos(idx.C1_1, pC1_1); pos(idx.C2_1, pC2_1); pos(idx.C3_1, pC3_1); pos(idx.C4_1, pC4_1); pos(idx.O4_1, pO4_1);
+
+                    // trace cylinder
+                    pos(idx.trace, pTrace);
+                    builder.add(pTrace[0], pTrace[1], pTrace[2], i);
+
+                    // sugar ring
+                    builder.add(pC3_1[0], pC3_1[1], pC3_1[2], i);
+                    builder.add(pC4_1[0], pC4_1[1], pC4_1[2], i);
+                    builder.add(pO4_1[0], pO4_1[1], pO4_1[2], i);
+                    builder.add(pC1_1[0], pC1_1[1], pC1_1[2], i);
+                    builder.add(pC2_1[0], pC2_1[1], pC2_1[2], i);
+                }
+
+                const { isPurine, isPyrimidine } = getNucleotideBaseType(unit, residueIndex);
+
+                if (isPurine) {
+                    setPurinIndices(idx, unit, residueIndex);
+
+                    if (hasPurinIndices(idx)) {
+                        pos(idx.N1, pN1); pos(idx.C2, pC2); pos(idx.N3, pN3); pos(idx.C4, pC4); pos(idx.C5, pC5); pos(idx.C6, pC6); pos(idx.N7, pN7); pos(idx.C8, pC8); pos(idx.N9, pN9);
+
+                        // base ring
+                        builder.add(pN9[0], pN9[1], pN9[2], i);
+                        builder.add(pC8[0], pC8[1], pC8[2], i);
+                        builder.add(pN7[0], pN7[1], pN7[2], i);
+                        builder.add(pC5[0], pC5[1], pC5[2], i);
+                        builder.add(pC6[0], pC6[1], pC6[2], i);
+                        builder.add(pN1[0], pN1[1], pN1[2], i);
+                        builder.add(pC2[0], pC2[1], pC2[2], i);
+                        builder.add(pN3[0], pN3[1], pN3[2], i);
+                        builder.add(pC4[0], pC4[1], pC4[2], i);
+                    }
+                } else if (isPyrimidine) {
+                    setPyrimidineIndices(idx, unit, residueIndex);
+
+                    if (hasPyrimidineIndices(idx)) {
+                        pos(idx.N1, pN1); pos(idx.C2, pC2); pos(idx.N3, pN3); pos(idx.C4, pC4); pos(idx.C5, pC5); pos(idx.C6, pC6);
+
+                        // base ring
+                        builder.add(pN1[0], pN1[1], pN1[2], i);
+                        builder.add(pC6[0], pC6[1], pC6[2], i);
+                        builder.add(pC5[0], pC5[1], pC5[2], i);
+                        builder.add(pC4[0], pC4[1], pC4[2], i);
+                        builder.add(pN3[0], pN3[1], pN3[2], i);
+                        builder.add(pC2[0], pC2[1], pC2[2], i);
+                    }
+                }
+
+                ++i;
+            }
+        }
+    }
+    const c = builder.getSpheres();
+
+    const sphere = Sphere3D.expand(Sphere3D(), unit.boundary.sphere, 1 * props.sizeFactor);
+    c.setBoundingSphere(sphere);
+
+    return c;
+}
+
+export function NucleotideAtomicElementImpostorVisual(materialId: number): UnitsVisual<NucleotideAtomicElementParams> {
+    return UnitsSpheresVisual<NucleotideAtomicElementParams>({
+        defaultProps: PD.getDefaultValues(NucleotideAtomicElementParams),
+        createGeometry: createNucleotideAtomicElementImpostor,
+        createLocationIterator: NucleotideLocationIterator.fromGroup,
+        getLoci: getNucleotideElementLoci,
+        eachLocation: eachNucleotideElement,
+        setUpdateState: (state: VisualUpdateState, newProps: PD.Values<NucleotideAtomicElementParams>, currentProps: PD.Values<NucleotideAtomicElementParams>) => {
+            state.createGeometry = (
+                newProps.sizeFactor !== currentProps.sizeFactor
+            );
+        },
+        mustRecreate: (structureGroup: StructureGroup, props: PD.Values<NucleotideAtomicElementParams>, webgl?: WebGLContext) => {
+            return !props.tryUseImpostor || !webgl;
+        }
+    }, materialId);
+}
+
+interface NucleotideAtomicElementMeshProps {
+    detail: number,
+    sizeFactor: number,
+}
+
+function createNucleotideAtomicElementMesh(ctx: VisualContext, unit: Unit, structure: Structure, theme: Theme, props: NucleotideAtomicElementMeshProps, mesh?: Mesh) {
+    if (!Unit.isAtomic(unit)) return Mesh.createEmpty(mesh);
+
+    const nucleotideElementCount = unit.nucleotideElements.length;
+    if (!nucleotideElementCount) return Mesh.createEmpty(mesh);
+
+    const { sizeFactor, detail } = props;
+
+    const vertexCount = nucleotideElementCount * sphereVertexCount(detail);
+    const builderState = MeshBuilder.createState(vertexCount, vertexCount / 2, mesh);
+
+    const { elements, model } = unit;
+    const { chainAtomSegments, residueAtomSegments } = model.atomicHierarchy;
+    const { moleculeType } = model.atomicHierarchy.derived.residue;
+    const pos = unit.conformation.invariantPosition;
+
+    const chainIt = Segmentation.transientSegments(chainAtomSegments, elements);
+    const residueIt = Segmentation.transientSegments(residueAtomSegments, elements);
+
+    const radius = 1 * sizeFactor;
+
+    let i = 0;
+    while (chainIt.hasNext) {
+        residueIt.setSegment(chainIt.move());
+
+        while (residueIt.hasNext) {
+            const { index: residueIndex } = residueIt.move();
+
+            if (isNucleic(moleculeType[residueIndex])) {
+                const idx = createNucleicIndices();
+
+                builderState.currentGroup = i;
+
+                setSugarIndices(idx, unit, residueIndex);
+
+                if (hasSugarIndices(idx)) {
+                    pos(idx.C1_1, pC1_1); pos(idx.C2_1, pC2_1); pos(idx.C3_1, pC3_1); pos(idx.C4_1, pC4_1); pos(idx.O4_1, pO4_1);
+
+                    // trace cylinder
+                    pos(idx.trace, pTrace);
+                    addSphere(builderState, pTrace, radius, detail);
+
+                    // sugar ring
+                    addSphere(builderState, pC4_1, radius, detail);
+                    addSphere(builderState, pO4_1, radius, detail);
+                    addSphere(builderState, pC1_1, radius, detail);
+                    addSphere(builderState, pC2_1, radius, detail);
+                    addSphere(builderState, pC3_1, radius, detail);
+                }
+
+                const { isPurine, isPyrimidine } = getNucleotideBaseType(unit, residueIndex);
+
+                if (isPurine) {
+                    setPurinIndices(idx, unit, residueIndex);
+
+                    if (hasPurinIndices(idx)) {
+                        pos(idx.N1, pN1); pos(idx.C2, pC2); pos(idx.N3, pN3); pos(idx.C4, pC4); pos(idx.C5, pC5); pos(idx.C6, pC6); pos(idx.N7, pN7); pos(idx.C8, pC8); pos(idx.N9, pN9);
+
+                        // base ring
+                        addSphere(builderState, pC8, radius, detail);
+                        addSphere(builderState, pN7, radius, detail);
+                        addSphere(builderState, pC5, radius, detail);
+                        addSphere(builderState, pC6, radius, detail);
+                        addSphere(builderState, pN1, radius, detail);
+                        addSphere(builderState, pC2, radius, detail);
+                        addSphere(builderState, pN3, radius, detail);
+                        addSphere(builderState, pC4, radius, detail);
+                        addSphere(builderState, pC5, radius, detail);
+                        addSphere(builderState, pN9, radius, detail);
+                    }
+                } else if (isPyrimidine) {
+                    setPyrimidineIndices(idx, unit, residueIndex);
+
+                    if (hasPyrimidineIndices(idx)) {
+                        pos(idx.N1, pN1); pos(idx.C2, pC2); pos(idx.N3, pN3); pos(idx.C4, pC4); pos(idx.C5, pC5); pos(idx.C6, pC6);
+
+                        // base ring
+                        addSphere(builderState, pC6, radius, detail);
+                        addSphere(builderState, pC5, radius, detail);
+                        addSphere(builderState, pC4, radius, detail);
+                        addSphere(builderState, pN3, radius, detail);
+                        addSphere(builderState, pC2, radius, detail);
+                        addSphere(builderState, pN1, radius, detail);
+                    }
+                }
+
+                ++i;
+            }
+        }
+    }
+
+    const m = MeshBuilder.getMesh(builderState);
+
+    const sphere = Sphere3D.expand(Sphere3D(), unit.boundary.sphere, 1 * props.sizeFactor);
+    m.setBoundingSphere(sphere);
+
+    return m;
+}
+
+
+export function NucleotideAtomicElementMeshVisual(materialId: number): UnitsVisual<NucleotideAtomicElementParams> {
+    return UnitsMeshVisual<NucleotideAtomicElementParams>({
+        defaultProps: PD.getDefaultValues(NucleotideAtomicElementParams),
+        createGeometry: createNucleotideAtomicElementMesh,
+        createLocationIterator: NucleotideLocationIterator.fromGroup,
+        getLoci: getNucleotideElementLoci,
+        eachLocation: eachNucleotideElement,
+        setUpdateState: (state: VisualUpdateState, newProps: PD.Values<NucleotideAtomicElementParams>, currentProps: PD.Values<NucleotideAtomicElementParams>) => {
+            state.createGeometry = (
+                newProps.sizeFactor !== currentProps.sizeFactor ||
+                newProps.detail !== currentProps.detail
+            );
+        },
+        mustRecreate: (structureGroup: StructureGroup, props: PD.Values<NucleotideAtomicElementParams>, webgl?: WebGLContext) => {
+            return props.tryUseImpostor && !!webgl;
+        }
+    }, materialId);
+}

src/mol-repr/structure/visual/nucleotide-atomic-ring-fill.ts

@@ -0,0 +1,195 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Gianluca Tomasello <giagitom@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { Vec3 } from '../../../mol-math/linear-algebra';
+import { NumberArray } from '../../../mol-util/type-helpers';
+import { VisualContext } from '../../visual';
+import { Unit, Structure } from '../../../mol-model/structure';
+import { Theme } from '../../../mol-theme/theme';
+import { Mesh } from '../../../mol-geo/geometry/mesh/mesh';
+import { MeshBuilder } from '../../../mol-geo/geometry/mesh/mesh-builder';
+import { Segmentation } from '../../../mol-data/int';
+import { isNucleic } from '../../../mol-model/structure/model/types';
+import { UnitsMeshParams, UnitsVisual, UnitsMeshVisual } from '../units-visual';
+import { NucleotideLocationIterator, getNucleotideElementLoci, eachNucleotideElement, getNucleotideBaseType, createNucleicIndices, setSugarIndices, hasSugarIndices, setPurinIndices, hasPyrimidineIndices, setPyrimidineIndices, hasPurinIndices } from './util/nucleotide';
+import { VisualUpdateState } from '../../util';
+import { Sphere3D } from '../../../mol-math/geometry';
+
+// TODO support ring-fills for multiple locations (including from microheterogeneity)
+
+const pN1 = Vec3();
+const pC2 = Vec3();
+const pN3 = Vec3();
+const pC4 = Vec3();
+const pC5 = Vec3();
+const pC6 = Vec3();
+const pN7 = Vec3();
+const pC8 = Vec3();
+const pN9 = Vec3();
+
+const pC1_1 = Vec3();
+const pC2_1 = Vec3();
+const pC3_1 = Vec3();
+const pC4_1 = Vec3();
+const pO4_1 = Vec3();
+
+const mid = Vec3();
+const normal = Vec3();
+const shift = Vec3();
+
+export const NucleotideAtomicRingFillMeshParams = {
+    sizeFactor: PD.Numeric(0.2, { min: 0, max: 10, step: 0.01 }),
+    thicknessFactor: PD.Numeric(1, { min: 0, max: 2, step: 0.01 }),
+};
+export const DefaultNucleotideAtomicRingFillMeshProps = PD.getDefaultValues(NucleotideAtomicRingFillMeshParams);
+export type NucleotideAtomicRingFillProps = typeof DefaultNucleotideAtomicRingFillMeshProps
+
+const positionsRing5_6 = new Float32Array(2 * 9 * 3);
+const stripIndicesRing5_6 = new Uint32Array([0, 1, 2, 3, 4, 5, 6, 7, 16, 17, 14, 15, 12, 13, 8, 9, 10, 11, 0, 1]);
+const fanIndicesTopRing5_6 = new Uint32Array([8, 12, 14, 16, 6, 4, 2, 0, 10]);
+const fanIndicesBottomRing5_6 = new Uint32Array([9, 11, 1, 3, 5, 7, 17, 15, 13]);
+
+const positionsRing5 = new Float32Array(2 * 6 * 3);
+const stripIndicesRing5 = new Uint32Array([2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 2, 3]);
+const fanIndicesTopRing5 = new Uint32Array([0, 10, 8, 6, 4, 2, 10]);
+const fanIndicesBottomRing5 = new Uint32Array([1, 3, 5, 7, 9, 11, 3]);
+
+const positionsRing6 = new Float32Array(2 * 6 * 3);
+const stripIndicesRing6 = new Uint32Array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1]);
+const fanIndicesTopRing6 = new Uint32Array([0, 10, 8, 6, 4, 2]);
+const fanIndicesBottomRing6 = new Uint32Array([1, 3, 5, 7, 9, 11]);
+
+const tmpShiftV = Vec3();
+function shiftPositions(out: NumberArray, dir: Vec3, ...positions: Vec3[]) {
+    for (let i = 0, il = positions.length; i < il; ++i) {
+        const v = positions[i];
+        Vec3.toArray(Vec3.add(tmpShiftV, v, dir), out, (i * 2) * 3);
+        Vec3.toArray(Vec3.sub(tmpShiftV, v, dir), out, (i * 2 + 1) * 3);
+    }
+}
+
+function createNucleotideAtomicRingFillMesh(ctx: VisualContext, unit: Unit, structure: Structure, theme: Theme, props: NucleotideAtomicRingFillProps, mesh?: Mesh) {
+    if (!Unit.isAtomic(unit)) return Mesh.createEmpty(mesh);
+
+    const nucleotideElementCount = unit.nucleotideElements.length;
+    if (!nucleotideElementCount) return Mesh.createEmpty(mesh);
+
+    const { sizeFactor, thicknessFactor } = props;
+
+    const vertexCount = nucleotideElementCount * 25;
+    const builderState = MeshBuilder.createState(vertexCount, vertexCount / 4, mesh);
+
+    const { elements, model } = unit;
+    const { chainAtomSegments, residueAtomSegments } = model.atomicHierarchy;
+    const { moleculeType } = model.atomicHierarchy.derived.residue;
+    const pos = unit.conformation.invariantPosition;
+
+    const chainIt = Segmentation.transientSegments(chainAtomSegments, elements);
+    const residueIt = Segmentation.transientSegments(residueAtomSegments, elements);
+
+    const thickness = sizeFactor * thicknessFactor;
+
+    let i = 0;
+    while (chainIt.hasNext) {
+        residueIt.setSegment(chainIt.move());
+
+        while (residueIt.hasNext) {
+            const { index: residueIndex } = residueIt.move();
+
+            if (isNucleic(moleculeType[residueIndex])) {
+                const idx = createNucleicIndices();
+
+                builderState.currentGroup = i;
+
+                setSugarIndices(idx, unit, residueIndex);
+                if (hasSugarIndices(idx)) {
+                    pos(idx.C1_1, pC1_1); pos(idx.C2_1, pC2_1); pos(idx.C3_1, pC3_1); pos(idx.C4_1, pC4_1); pos(idx.O4_1, pO4_1);
+
+                    // sugar ring
+                    Vec3.triangleNormal(normal, pC3_1, pC4_1, pC1_1);
+                    Vec3.scale(mid, Vec3.add(mid, pO4_1, Vec3.add(mid, pC4_1, Vec3.add(mid, pC3_1, Vec3.add(mid, pC1_1, pC2_1)))), 0.2 /* 1 / 5 */);
+
+                    Vec3.scale(shift, normal, thickness);
+                    shiftPositions(positionsRing5, shift, mid, pC3_1, pC4_1, pO4_1, pC1_1, pC2_1);
+
+                    MeshBuilder.addTriangleStrip(builderState, positionsRing5, stripIndicesRing5);
+                    MeshBuilder.addTriangleFanWithNormal(builderState, positionsRing5, fanIndicesTopRing5, normal);
+                    Vec3.negate(normal, normal);
+                    MeshBuilder.addTriangleFanWithNormal(builderState, positionsRing5, fanIndicesBottomRing5, normal);
+                }
+
+                const { isPurine, isPyrimidine } = getNucleotideBaseType(unit, residueIndex);
+
+                if (isPurine) {
+                    setPurinIndices(idx, unit, residueIndex);
+
+                    if (hasPurinIndices(idx)) {
+                        pos(idx.N1, pN1); pos(idx.C2, pC2); pos(idx.N3, pN3); pos(idx.C4, pC4); pos(idx.C5, pC5); pos(idx.C6, pC6); pos(idx.N7, pN7); pos(idx.C8, pC8), pos(idx.N9, pN9);
+
+                        // base ring
+                        Vec3.triangleNormal(normal, pN1, pC4, pC5);
+                        Vec3.scale(shift, normal, thickness);
+                        shiftPositions(positionsRing5_6, shift, pN1, pC2, pN3, pC4, pC5, pC6, pN7, pC8, pN9);
+
+                        MeshBuilder.addTriangleStrip(builderState, positionsRing5_6, stripIndicesRing5_6);
+                        MeshBuilder.addTriangleFanWithNormal(builderState, positionsRing5_6, fanIndicesTopRing5_6, normal);
+                        Vec3.negate(normal, normal);
+                        MeshBuilder.addTriangleFanWithNormal(builderState, positionsRing5_6, fanIndicesBottomRing5_6, normal);
+                    }
+                } else if (isPyrimidine) {
+                    setPyrimidineIndices(idx, unit, residueIndex);
+
+                    if (hasPyrimidineIndices(idx)) {
+                        pos(idx.N1, pN1); pos(idx.C2, pC2); pos(idx.N3, pN3); pos(idx.C4, pC4); pos(idx.C5, pC5); pos(idx.C6, pC6);
+
+                        // base ring
+                        Vec3.triangleNormal(normal, pN1, pC4, pC5);
+                        Vec3.scale(shift, normal, thickness);
+                        shiftPositions(positionsRing6, shift, pN1, pC2, pN3, pC4, pC5, pC6);
+
+                        MeshBuilder.addTriangleStrip(builderState, positionsRing6, stripIndicesRing6);
+                        MeshBuilder.addTriangleFanWithNormal(builderState, positionsRing6, fanIndicesTopRing6, normal);
+                        Vec3.negate(normal, normal);
+                        MeshBuilder.addTriangleFanWithNormal(builderState, positionsRing6, fanIndicesBottomRing6, normal);
+                    }
+                }
+
+                ++i;
+            }
+        }
+    }
+
+    const m = MeshBuilder.getMesh(builderState);
+
+    const sphere = Sphere3D.expand(Sphere3D(), unit.boundary.sphere, thickness);
+    m.setBoundingSphere(sphere);
+
+    return m;
+}
+
+export const NucleotideAtomicRingFillParams = {
+    ...UnitsMeshParams,
+    ...NucleotideAtomicRingFillMeshParams
+};
+export type NucleotideAtomicRingFillParams = typeof NucleotideAtomicRingFillParams
+
+export function NucleotideAtomicRingFillVisual(materialId: number): UnitsVisual<NucleotideAtomicRingFillParams> {
+    return UnitsMeshVisual<NucleotideAtomicRingFillParams>({
+        defaultProps: PD.getDefaultValues(NucleotideAtomicRingFillParams),
+        createGeometry: createNucleotideAtomicRingFillMesh,
+        createLocationIterator: NucleotideLocationIterator.fromGroup,
+        getLoci: getNucleotideElementLoci,
+        eachLocation: eachNucleotideElement,
+        setUpdateState: (state: VisualUpdateState, newProps: PD.Values<NucleotideAtomicRingFillParams>, currentProps: PD.Values<NucleotideAtomicRingFillParams>) => {
+            state.createGeometry = (
+                newProps.sizeFactor !== currentProps.sizeFactor ||
+                newProps.thicknessFactor !== currentProps.thicknessFactor
+            );
+        }
+    }, materialId);
+}

src/mol-repr/structure/visual/nucleotide-block-mesh.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -14,10 +14,10 @@ import { Mesh } from '../../../mol-geo/geometry/mesh/mesh';
 import { MeshBuilder } from '../../../mol-geo/geometry/mesh/mesh-builder';
 import { Segmentation } from '../../../mol-data/int';
 import { CylinderProps } from '../../../mol-geo/primitive/cylinder';
-import { isNucleic, isPurineBase, isPyrimidineBase } from '../../../mol-model/structure/model/types';
+import { isNucleic } from '../../../mol-model/structure/model/types';
 import { addCylinder } from '../../../mol-geo/geometry/mesh/builder/cylinder';
 import { UnitsMeshParams, UnitsVisual, UnitsMeshVisual } from '../units-visual';
-import { NucleotideLocationIterator, getNucleotideElementLoci, eachNucleotideElement } from './util/nucleotide';
+import { NucleotideLocationIterator, getNucleotideElementLoci, eachNucleotideElement, getNucleotideBaseType, createNucleicIndices, setPurinIndices, setPyrimidineIndices } from './util/nucleotide';
 import { VisualUpdateState } from '../../util';
 import { BaseGeometry } from '../../../mol-geo/geometry/base';
 import { Sphere3D } from '../../../mol-math/geometry';
@@ -29,7 +29,7 @@ const p2 = Vec3();
 const p3 = Vec3();
 const p4 = Vec3();
 const p5 = Vec3();
-const p6 = Vec3();
+const pt = Vec3();
 const v12 = Vec3();
 const v34 = Vec3();
 const vC = Vec3();
@@ -40,6 +40,7 @@ const box = Box();
 
 export const NucleotideBlockMeshParams = {
     sizeFactor: PD.Numeric(0.2, { min: 0, max: 10, step: 0.01 }),
+    thicknessFactor: PD.Numeric(1, { min: 0, max: 2, step: 0.01 }),
     radialSegments: PD.Numeric(16, { min: 2, max: 56, step: 2 }, BaseGeometry.CustomQualityParamInfo),
 };
 export const DefaultNucleotideBlockMeshProps = PD.getDefaultValues(NucleotideBlockMeshParams);
@@ -51,21 +52,24 @@ function createNucleotideBlockMesh(ctx: VisualContext, unit: Unit, structure: St
     const nucleotideElementCount = unit.nucleotideElements.length;
     if (!nucleotideElementCount) return Mesh.createEmpty(mesh);
 
-    const { sizeFactor, radialSegments } = props;
+    const { sizeFactor, thicknessFactor, radialSegments } = props;
 
     const vertexCount = nucleotideElementCount * (box.vertices.length / 3 + radialSegments * 2);
     const builderState = MeshBuilder.createState(vertexCount, vertexCount / 4, mesh);
 
     const { elements, model } = unit;
-    const { chainAtomSegments, residueAtomSegments, atoms, index: atomicIndex } = model.atomicHierarchy;
-    const { moleculeType, traceElementIndex } = model.atomicHierarchy.derived.residue;
-    const { label_comp_id } = atoms;
+    const { chainAtomSegments, residueAtomSegments } = model.atomicHierarchy;
+    const { moleculeType } = model.atomicHierarchy.derived.residue;
     const pos = unit.conformation.invariantPosition;
 
     const chainIt = Segmentation.transientSegments(chainAtomSegments, elements);
     const residueIt = Segmentation.transientSegments(residueAtomSegments, elements);
 
-    const cylinderProps: CylinderProps = { radiusTop: 1 * sizeFactor, radiusBottom: 1 * sizeFactor, radialSegments, bottomCap: true };
+    const radius = 1 * sizeFactor;
+    const width = 4.5;
+    const depth = thicknessFactor * sizeFactor * 2;
+
+    const cylinderProps: CylinderProps = { radiusTop: radius, radiusBottom: radius, radialSegments, bottomCap: true };
 
     let i = 0;
     while (chainIt.hasNext) {
@@ -75,51 +79,27 @@ function createNucleotideBlockMesh(ctx: VisualContext, unit: Unit, structure: St
             const { index: residueIndex } = residueIt.move();
 
             if (isNucleic(moleculeType[residueIndex])) {
-                const compId = label_comp_id.value(residueAtomSegments.offsets[residueIndex]);
-                let idx1: ElementIndex | -1 = -1, idx2: ElementIndex | -1 = -1, idx3: ElementIndex | -1 = -1, idx4: ElementIndex | -1 = -1, idx5: ElementIndex | -1 = -1, idx6: ElementIndex | -1 = -1;
-                const width = 4.5, depth = 2.5 * sizeFactor;
+                const idx = createNucleicIndices();
+                let idx1: ElementIndex | -1 = -1, idx2: ElementIndex | -1 = -1, idx3: ElementIndex | -1 = -1, idx4: ElementIndex | -1 = -1, idx5: ElementIndex | -1 = -1;
+
                 let height = 4.5;
 
-                let isPurine = isPurineBase(compId);
-                let isPyrimidine = isPyrimidineBase(compId);
-
-                if (!isPurine && !isPyrimidine) {
-                    // detect Purine or Pyrimidin based on geometry
-                    const idxC4 = atomicIndex.findAtomOnResidue(residueIndex, 'C4');
-                    const idxN9 = atomicIndex.findAtomOnResidue(residueIndex, 'N9');
-                    if (idxC4 !== -1 && idxN9 !== -1 && Vec3.distance(pos(idxC4, p1), pos(idxN9, p2)) < 1.6) {
-                        isPurine = true;
-                    } else {
-                        isPyrimidine = true;
-                    }
-                }
+                const { isPurine, isPyrimidine } = getNucleotideBaseType(unit, residueIndex);
 
                 if (isPurine) {
                     height = 4.5;
-                    idx1 = atomicIndex.findAtomOnResidue(residueIndex, 'N1');
-                    idx2 = atomicIndex.findAtomOnResidue(residueIndex, 'C4');
-                    idx3 = atomicIndex.findAtomOnResidue(residueIndex, 'C6');
-                    idx4 = atomicIndex.findAtomOnResidue(residueIndex, 'C2');
-                    idx5 = atomicIndex.findAtomOnResidue(residueIndex, 'N9');
-                    idx6 = traceElementIndex[residueIndex];
+                    setPurinIndices(idx, unit, residueIndex);
+                    idx1 = idx.N1; idx2 = idx.C4; idx3 = idx.C6; idx4 = idx.C2; idx5 = idx.N9;
                 } else if (isPyrimidine) {
                     height = 3.0;
-                    idx1 = atomicIndex.findAtomOnResidue(residueIndex, 'N3');
-                    idx2 = atomicIndex.findAtomOnResidue(residueIndex, 'C6');
-                    idx3 = atomicIndex.findAtomOnResidue(residueIndex, 'C4');
-                    idx4 = atomicIndex.findAtomOnResidue(residueIndex, 'C2');
-                    idx5 = atomicIndex.findAtomOnResidue(residueIndex, 'N1');
-                    if (idx5 === -1) {
-                        // modified ring, e.g. DZ
-                        idx5 = atomicIndex.findAtomOnResidue(residueIndex, 'C1');
-                    }
-                    idx6 = traceElementIndex[residueIndex];
+                    setPyrimidineIndices(idx, unit, residueIndex);
+                    idx1 = idx.N3; idx2 = idx.C6; idx3 = idx.C4; idx4 = idx.C2; idx5 = idx.N1;
                 }
 
-                if (idx5 !== -1 && idx6 !== -1) {
-                    pos(idx5, p5); pos(idx6, p6);
+                if (idx5 !== -1 && idx.trace !== -1) {
+                    pos(idx5, p5); pos(idx.trace, pt);
                     builderState.currentGroup = i;
-                    addCylinder(builderState, p5, p6, 1, cylinderProps);
+                    addCylinder(builderState, p5, pt, 1, cylinderProps);
                     if (idx1 !== -1 && idx2 !== -1 && idx3 !== -1 && idx4 !== -1) {
                         pos(idx1, p1); pos(idx2, p2); pos(idx3, p3); pos(idx4, p4);
                         Vec3.normalize(v12, Vec3.sub(v12, p2, p1));
@@ -140,7 +120,7 @@ function createNucleotideBlockMesh(ctx: VisualContext, unit: Unit, structure: St
 
     const m = MeshBuilder.getMesh(builderState);
 
-    const sphere = Sphere3D.expand(Sphere3D(), unit.boundary.sphere, 1 * props.sizeFactor);
+    const sphere = Sphere3D.expand(Sphere3D(), unit.boundary.sphere, radius);
     m.setBoundingSphere(sphere);
 
     return m;
@@ -162,6 +142,7 @@ export function NucleotideBlockVisual(materialId: number): UnitsVisual<Nucleotid
         setUpdateState: (state: VisualUpdateState, newProps: PD.Values<NucleotideBlockParams>, currentProps: PD.Values<NucleotideBlockParams>) => {
             state.createGeometry = (
                 newProps.sizeFactor !== currentProps.sizeFactor ||
+                newProps.thicknessFactor !== currentProps.thicknessFactor ||
                 newProps.radialSegments !== currentProps.radialSegments
             );
         }

src/mol-repr/structure/visual/nucleotide-ring-mesh.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -8,37 +8,38 @@ import { ParamDefinition as PD } from '../../../mol-util/param-definition';
 import { Vec3 } from '../../../mol-math/linear-algebra';
 import { NumberArray } from '../../../mol-util/type-helpers';
 import { VisualContext } from '../../visual';
-import { Unit, Structure, ElementIndex } from '../../../mol-model/structure';
+import { Unit, Structure } from '../../../mol-model/structure';
 import { Theme } from '../../../mol-theme/theme';
 import { Mesh } from '../../../mol-geo/geometry/mesh/mesh';
 import { MeshBuilder } from '../../../mol-geo/geometry/mesh/mesh-builder';
 import { Segmentation } from '../../../mol-data/int';
 import { CylinderProps } from '../../../mol-geo/primitive/cylinder';
-import { isNucleic, isPurineBase, isPyrimidineBase } from '../../../mol-model/structure/model/types';
+import { isNucleic } from '../../../mol-model/structure/model/types';
 import { addCylinder } from '../../../mol-geo/geometry/mesh/builder/cylinder';
 import { addSphere } from '../../../mol-geo/geometry/mesh/builder/sphere';
 import { UnitsMeshParams, UnitsVisual, UnitsMeshVisual } from '../units-visual';
-import { NucleotideLocationIterator, getNucleotideElementLoci, eachNucleotideElement } from './util/nucleotide';
+import { NucleotideLocationIterator, getNucleotideElementLoci, eachNucleotideElement, getNucleotideBaseType, createNucleicIndices, setPurinIndices, setPyrimidineIndices, hasPyrimidineIndices, hasPurinIndices } from './util/nucleotide';
 import { VisualUpdateState } from '../../util';
 import { BaseGeometry } from '../../../mol-geo/geometry/base';
 import { Sphere3D } from '../../../mol-math/geometry';
 
 // TODO support rings for multiple locations (including from microheterogeneity)
 
-const pTrace = Vec3.zero();
-const pN1 = Vec3.zero();
-const pC2 = Vec3.zero();
-const pN3 = Vec3.zero();
-const pC4 = Vec3.zero();
-const pC5 = Vec3.zero();
-const pC6 = Vec3.zero();
-const pN7 = Vec3.zero();
-const pC8 = Vec3.zero();
-const pN9 = Vec3.zero();
-const normal = Vec3.zero();
+const pTrace = Vec3();
+const pN1 = Vec3();
+const pC2 = Vec3();
+const pN3 = Vec3();
+const pC4 = Vec3();
+const pC5 = Vec3();
+const pC6 = Vec3();
+const pN7 = Vec3();
+const pC8 = Vec3();
+const pN9 = Vec3();
+const normal = Vec3();
 
 export const NucleotideRingMeshParams = {
     sizeFactor: PD.Numeric(0.2, { min: 0, max: 10, step: 0.01 }),
+    thicknessFactor: PD.Numeric(1, { min: 0, max: 2, step: 0.01 }),
     radialSegments: PD.Numeric(16, { min: 2, max: 56, step: 2 }, BaseGeometry.CustomQualityParamInfo),
     detail: PD.Numeric(0, { min: 0, max: 3, step: 1 }, BaseGeometry.CustomQualityParamInfo),
 };
@@ -55,7 +56,7 @@ const stripIndicesRing6 = new Uint32Array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,
 const fanIndicesTopRing6 = new Uint32Array([0, 10, 8, 6, 4, 2]);
 const fanIndicesBottomRing6 = new Uint32Array([1, 3, 5, 7, 9, 11]);
 
-const tmpShiftV = Vec3.zero();
+const tmpShiftV = Vec3();
 function shiftPositions(out: NumberArray, dir: Vec3, ...positions: Vec3[]) {
     for (let i = 0, il = positions.length; i < il; ++i) {
         const v = positions[i];
@@ -70,23 +71,22 @@ function createNucleotideRingMesh(ctx: VisualContext, unit: Unit, structure: Str
     const nucleotideElementCount = unit.nucleotideElements.length;
     if (!nucleotideElementCount) return Mesh.createEmpty(mesh);
 
-    const { sizeFactor, radialSegments, detail } = props;
+    const { sizeFactor, thicknessFactor, radialSegments, detail } = props;
 
     const vertexCount = nucleotideElementCount * (26 + radialSegments * 2);
     const builderState = MeshBuilder.createState(vertexCount, vertexCount / 4, mesh);
 
     const { elements, model } = unit;
-    const { chainAtomSegments, residueAtomSegments, atoms, index: atomicIndex } = model.atomicHierarchy;
-    const { moleculeType, traceElementIndex } = model.atomicHierarchy.derived.residue;
-    const { label_comp_id } = atoms;
+    const { chainAtomSegments, residueAtomSegments } = model.atomicHierarchy;
+    const { moleculeType } = model.atomicHierarchy.derived.residue;
     const pos = unit.conformation.invariantPosition;
 
     const chainIt = Segmentation.transientSegments(chainAtomSegments, elements);
     const residueIt = Segmentation.transientSegments(residueAtomSegments, elements);
 
     const radius = 1 * sizeFactor;
-    const halfThickness = 1.25 * sizeFactor;
-    const cylinderProps: CylinderProps = { radiusTop: 1 * sizeFactor, radiusBottom: 1 * sizeFactor, radialSegments };
+    const thickness = thicknessFactor * sizeFactor;
+    const cylinderProps: CylinderProps = { radiusTop: radius, radiusBottom: radius, radialSegments };
 
     let i = 0;
     while (chainIt.hasNext) {
@@ -96,58 +96,27 @@ function createNucleotideRingMesh(ctx: VisualContext, unit: Unit, structure: Str
             const { index: residueIndex } = residueIt.move();
 
             if (isNucleic(moleculeType[residueIndex])) {
-                const compId = label_comp_id.value(residueAtomSegments.offsets[residueIndex]);
-
-                let idxTrace: ElementIndex | -1 = -1, idxN1: ElementIndex | -1 = -1, idxC2: ElementIndex | -1 = -1, idxN3: ElementIndex | -1 = -1, idxC4: ElementIndex | -1 = -1, idxC5: ElementIndex | -1 = -1, idxC6: ElementIndex | -1 = -1, idxN7: ElementIndex | -1 = -1, idxC8: ElementIndex | -1 = -1, idxN9: ElementIndex | -1 = -1;
+                const idx = createNucleicIndices();
 
                 builderState.currentGroup = i;
 
-                let isPurine = isPurineBase(compId);
-                let isPyrimidine = isPyrimidineBase(compId);
-
-                if (!isPurine && !isPyrimidine) {
-                    // detect Purine or Pyrimidin based on geometry
-                    const idxC4 = atomicIndex.findAtomOnResidue(residueIndex, 'C4');
-                    const idxN9 = atomicIndex.findAtomOnResidue(residueIndex, 'N9');
-                    if (idxC4 !== -1 && idxN9 !== -1 && Vec3.distance(pos(idxC4, pC4), pos(idxN9, pN9)) < 1.6) {
-                        isPurine = true;
-                    } else {
-                        isPyrimidine = true;
-                    }
-                }
+                const { isPurine, isPyrimidine } = getNucleotideBaseType(unit, residueIndex);
 
                 if (isPurine) {
-                    idxTrace = traceElementIndex[residueIndex];
-                    idxN1 = atomicIndex.findAtomOnResidue(residueIndex, 'N1');
-                    idxC2 = atomicIndex.findAtomOnResidue(residueIndex, 'C2');
-                    idxN3 = atomicIndex.findAtomOnResidue(residueIndex, 'N3');
-                    idxC4 = atomicIndex.findAtomOnResidue(residueIndex, 'C4');
-                    idxC5 = atomicIndex.findAtomOnResidue(residueIndex, 'C5');
-                    if (idxC5 === -1) {
-                        // modified ring, e.g. DP
-                        idxC5 = atomicIndex.findAtomOnResidue(residueIndex, 'N5');
-                    }
-                    idxC6 = atomicIndex.findAtomOnResidue(residueIndex, 'C6');
-                    idxN7 = atomicIndex.findAtomOnResidue(residueIndex, 'N7');
-                    if (idxN7 === -1) {
-                        // modified ring, e.g. DP
-                        idxN7 = atomicIndex.findAtomOnResidue(residueIndex, 'C7');
-                    }
-                    idxC8 = atomicIndex.findAtomOnResidue(residueIndex, 'C8');
-                    idxN9 = atomicIndex.findAtomOnResidue(residueIndex, 'N9');
+                    setPurinIndices(idx, unit, residueIndex);
 
-                    if (idxN9 !== -1 && idxTrace !== -1) {
-                        pos(idxN9, pN9); pos(idxTrace, pTrace);
+                    if (idx.N9 !== -1 && idx.trace !== -1) {
+                        pos(idx.N9, pN9); pos(idx.trace, pTrace);
                         builderState.currentGroup = i;
                         addCylinder(builderState, pN9, pTrace, 1, cylinderProps);
                         addSphere(builderState, pN9, radius, detail);
                     }
 
-                    if (idxN1 !== -1 && idxC2 !== -1 && idxN3 !== -1 && idxC4 !== -1 && idxC5 !== -1 && idxC6 !== -1 && idxN7 !== -1 && idxC8 !== -1 && idxN9 !== -1) {
-                        pos(idxN1, pN1); pos(idxC2, pC2); pos(idxN3, pN3); pos(idxC4, pC4); pos(idxC5, pC5); pos(idxC6, pC6); pos(idxN7, pN7); pos(idxC8, pC8);
+                    if (hasPurinIndices(idx)) {
+                        pos(idx.N1, pN1); pos(idx.C2, pC2); pos(idx.N3, pN3); pos(idx.C4, pC4); pos(idx.C5, pC5); pos(idx.C6, pC6); pos(idx.N7, pN7); pos(idx.C8, pC8);
 
                         Vec3.triangleNormal(normal, pN1, pC4, pC5);
-                        Vec3.scale(normal, normal, halfThickness);
+                        Vec3.scale(normal, normal, thickness);
                         shiftPositions(positionsRing5_6, normal, pN1, pC2, pN3, pC4, pC5, pC6, pN7, pC8, pN9);
 
                         MeshBuilder.addTriangleStrip(builderState, positionsRing5_6, stripIndicesRing5_6);
@@ -155,30 +124,20 @@ function createNucleotideRingMesh(ctx: VisualContext, unit: Unit, structure: Str
                         MeshBuilder.addTriangleFan(builderState, positionsRing5_6, fanIndicesBottomRing5_6);
                     }
                 } else if (isPyrimidine) {
-                    idxTrace = traceElementIndex[residueIndex];
-                    idxN1 = atomicIndex.findAtomOnResidue(residueIndex, 'N1');
-                    if (idxN1 === -1) {
-                        // modified ring, e.g. DZ
-                        idxN1 = atomicIndex.findAtomOnResidue(residueIndex, 'C1');
-                    }
-                    idxC2 = atomicIndex.findAtomOnResidue(residueIndex, 'C2');
-                    idxN3 = atomicIndex.findAtomOnResidue(residueIndex, 'N3');
-                    idxC4 = atomicIndex.findAtomOnResidue(residueIndex, 'C4');
-                    idxC5 = atomicIndex.findAtomOnResidue(residueIndex, 'C5');
-                    idxC6 = atomicIndex.findAtomOnResidue(residueIndex, 'C6');
-
-                    if (idxN1 !== -1 && idxTrace !== -1) {
-                        pos(idxN1, pN1); pos(idxTrace, pTrace);
+                    setPyrimidineIndices(idx, unit, residueIndex);
+
+                    if (idx.N1 !== -1 && idx.trace !== -1) {
+                        pos(idx.N1, pN1); pos(idx.trace, pTrace);
                         builderState.currentGroup = i;
                         addCylinder(builderState, pN1, pTrace, 1, cylinderProps);
                         addSphere(builderState, pN1, radius, detail);
                     }
 
-                    if (idxN1 !== -1 && idxC2 !== -1 && idxN3 !== -1 && idxC4 !== -1 && idxC5 !== -1 && idxC6 !== -1) {
-                        pos(idxC2, pC2); pos(idxN3, pN3); pos(idxC4, pC4); pos(idxC5, pC5); pos(idxC6, pC6);
+                    if (hasPyrimidineIndices(idx)) {
+                        pos(idx.C2, pC2); pos(idx.N3, pN3); pos(idx.C4, pC4); pos(idx.C5, pC5); pos(idx.C6, pC6);
 
                         Vec3.triangleNormal(normal, pN1, pC4, pC5);
-                        Vec3.scale(normal, normal, halfThickness);
+                        Vec3.scale(normal, normal, thickness);
                         shiftPositions(positionsRing6, normal, pN1, pC2, pN3, pC4, pC5, pC6);
 
                         MeshBuilder.addTriangleStrip(builderState, positionsRing6, stripIndicesRing6);
@@ -194,7 +153,7 @@ function createNucleotideRingMesh(ctx: VisualContext, unit: Unit, structure: Str
 
     const m = MeshBuilder.getMesh(builderState);
 
-    const sphere = Sphere3D.expand(Sphere3D(), unit.boundary.sphere, 1 * props.sizeFactor);
+    const sphere = Sphere3D.expand(Sphere3D(), unit.boundary.sphere, radius);
     m.setBoundingSphere(sphere);
 
     return m;
@@ -216,6 +175,7 @@ export function NucleotideRingVisual(materialId: number): UnitsVisual<Nucleotide
         setUpdateState: (state: VisualUpdateState, newProps: PD.Values<NucleotideRingParams>, currentProps: PD.Values<NucleotideRingParams>) => {
             state.createGeometry = (
                 newProps.sizeFactor !== currentProps.sizeFactor ||
+                newProps.thicknessFactor !== currentProps.thicknessFactor ||
                 newProps.radialSegments !== currentProps.radialSegments
             );
         }

src/mol-repr/structure/visual/util/nucleotide.ts

@@ -1,16 +1,18 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Unit, StructureElement, Structure } from '../../../../mol-model/structure';
+import { Unit, StructureElement, Structure, ResidueIndex, ElementIndex } from '../../../../mol-model/structure';
 import { Loci, EmptyLoci } from '../../../../mol-model/loci';
 import { Interval } from '../../../../mol-data/int';
 import { LocationIterator } from '../../../../mol-geo/util/location-iterator';
 import { PickingId } from '../../../../mol-geo/geometry/picking';
 import { getResidueLoci, StructureGroup } from './common';
 import { eachAtomicUnitTracedElement } from './polymer';
+import { isPurineBase, isPyrimidineBase } from '../../../../mol-model/structure/model/types';
+import { Vec3 } from '../../../../mol-math/linear-algebra/3d/vec3';
 
 export namespace NucleotideLocationIterator {
     export function fromGroup(structureGroup: StructureGroup): LocationIterator {
@@ -68,4 +70,126 @@ export function eachNucleotideElement(loci: Loci, structureGroup: StructureGroup
         }
     }
     return changed;
-}
+}
+
+//
+
+const pC4 = Vec3();
+const pN9 = Vec3();
+
+export function getNucleotideBaseType(unit: Unit.Atomic, residueIndex: ResidueIndex) {
+    const { model } = unit;
+    const { residueAtomSegments, atoms, index: atomicIndex } = model.atomicHierarchy;
+    const { label_comp_id } = atoms;
+    const pos = unit.conformation.invariantPosition;
+
+    const compId = label_comp_id.value(residueAtomSegments.offsets[residueIndex]);
+
+    let isPurine = isPurineBase(compId);
+    let isPyrimidine = isPyrimidineBase(compId);
+
+    if (!isPurine && !isPyrimidine) {
+        // detect Purine or Pyrimidin based on geometry
+        const idxC4 = atomicIndex.findAtomOnResidue(residueIndex, 'C4');
+        const idxN9 = atomicIndex.findAtomOnResidue(residueIndex, 'N9');
+        if (idxC4 !== -1 && idxN9 !== -1 && Vec3.distance(pos(idxC4, pC4), pos(idxN9, pN9)) < 1.6) {
+            isPurine = true;
+        } else {
+            isPyrimidine = true;
+        }
+    }
+
+    return { isPurine, isPyrimidine };
+}
+
+export function createNucleicIndices() {
+    return {
+        trace: -1 as ElementIndex | -1,
+        N1: -1 as ElementIndex | -1,
+        C2: -1 as ElementIndex | -1,
+        N3: -1 as ElementIndex | -1,
+        C4: -1 as ElementIndex | -1,
+        C5: -1 as ElementIndex | -1,
+        C6: -1 as ElementIndex | -1,
+        N7: -1 as ElementIndex | -1,
+        C8: -1 as ElementIndex | -1,
+        N9: -1 as ElementIndex | -1,
+        C1_1: -1 as ElementIndex | -1,
+        C2_1: -1 as ElementIndex | -1,
+        C3_1: -1 as ElementIndex | -1,
+        C4_1: -1 as ElementIndex | -1,
+        O4_1: -1 as ElementIndex | -1,
+    };
+}
+export type NucleicIndices = ReturnType<typeof createNucleicIndices>
+
+export function setPurinIndices(idx: NucleicIndices, unit: Unit.Atomic, residueIndex: ResidueIndex) {
+    const atomicIndex = unit.model.atomicHierarchy.index;
+    const { traceElementIndex } = unit.model.atomicHierarchy.derived.residue;
+
+    idx.trace = traceElementIndex[residueIndex];
+    idx.N1 = atomicIndex.findAtomOnResidue(residueIndex, 'N1');
+    idx.C2 = atomicIndex.findAtomOnResidue(residueIndex, 'C2');
+    idx.N3 = atomicIndex.findAtomOnResidue(residueIndex, 'N3');
+    idx.C4 = atomicIndex.findAtomOnResidue(residueIndex, 'C4');
+    idx.C5 = atomicIndex.findAtomOnResidue(residueIndex, 'C5');
+    if (idx.C5 === -1) {
+        // modified ring, e.g. DP
+        idx.C5 = atomicIndex.findAtomOnResidue(residueIndex, 'N5');
+    }
+    idx.C6 = atomicIndex.findAtomOnResidue(residueIndex, 'C6');
+    idx.N7 = atomicIndex.findAtomOnResidue(residueIndex, 'N7');
+    if (idx.N7 === -1) {
+        // modified ring, e.g. DP
+        idx.N7 = atomicIndex.findAtomOnResidue(residueIndex, 'C7');
+    }
+    idx.C8 = atomicIndex.findAtomOnResidue(residueIndex, 'C8');
+    idx.N9 = atomicIndex.findAtomOnResidue(residueIndex, 'N9');
+
+    return idx;
+}
+
+export function hasPurinIndices(idx: NucleicIndices): idx is NucleicIndices & { trace: ElementIndex, N1: ElementIndex, C2: ElementIndex, N3: ElementIndex, C4: ElementIndex, C5: ElementIndex, C6: ElementIndex, N7: ElementIndex, C8: ElementIndex, N9: ElementIndex } {
+    return idx.trace !== -1 && idx.N1 !== -1 && idx.C2 !== -1 && idx.N3 !== -1 && idx.C4 !== -1 && idx.C5 !== -1 && idx.C6 !== -1 && idx.N7 !== -1 && idx.C8 !== -1 && idx.N9 !== -1;
+}
+
+export function setPyrimidineIndices(idx: NucleicIndices, unit: Unit.Atomic, residueIndex: ResidueIndex) {
+    const atomicIndex = unit.model.atomicHierarchy.index;
+    const { traceElementIndex } = unit.model.atomicHierarchy.derived.residue;
+
+    idx.trace = traceElementIndex[residueIndex];
+    idx.N1 = atomicIndex.findAtomOnResidue(residueIndex, 'N1');
+    if (idx.N1 === -1) {
+        // modified ring, e.g. DZ
+        idx.N1 = atomicIndex.findAtomOnResidue(residueIndex, 'C1');
+    }
+    idx.C2 = atomicIndex.findAtomOnResidue(residueIndex, 'C2');
+    idx.N3 = atomicIndex.findAtomOnResidue(residueIndex, 'N3');
+    idx.C4 = atomicIndex.findAtomOnResidue(residueIndex, 'C4');
+    idx.C5 = atomicIndex.findAtomOnResidue(residueIndex, 'C5');
+    idx.C6 = atomicIndex.findAtomOnResidue(residueIndex, 'C6');
+
+    return idx;
+}
+
+export function hasPyrimidineIndices(idx: NucleicIndices): idx is NucleicIndices & { trace: ElementIndex, N1: ElementIndex, C2: ElementIndex, N3: ElementIndex, C4: ElementIndex, C5: ElementIndex, C6: ElementIndex } {
+    return idx.trace !== -1 && idx.N1 !== -1 && idx.C2 !== -1 && idx.N3 !== -1 && idx.C4 !== -1 && idx.C5 !== -1 && idx.C6 !== -1;
+}
+
+export function setSugarIndices(idx: NucleicIndices, unit: Unit.Atomic, residueIndex: ResidueIndex) {
+    const atomicIndex = unit.model.atomicHierarchy.index;
+    const { traceElementIndex } = unit.model.atomicHierarchy.derived.residue;
+
+    idx.trace = traceElementIndex[residueIndex];
+    idx.C1_1 = atomicIndex.findAtomOnResidue(residueIndex, "C1'");
+    idx.C2_1 = atomicIndex.findAtomOnResidue(residueIndex, "C2'");
+    idx.C3_1 = atomicIndex.findAtomOnResidue(residueIndex, "C3'");
+    idx.C4_1 = atomicIndex.findAtomOnResidue(residueIndex, "C4'");
+    idx.O4_1 = atomicIndex.findAtomOnResidue(residueIndex, "O4'");
+
+    return idx;
+}
+
+export function hasSugarIndices(idx: NucleicIndices): idx is NucleicIndices & { trace: ElementIndex, C1_1: ElementIndex, C2_1: ElementIndex, C3_1: ElementIndex, C4_1: ElementIndex, O4_1: ElementIndex } {
+    return idx.trace !== -1 && idx.C1_1 !== -1 && idx.C2_1 !== -1 && idx.C3_1 !== -1 && idx.C4_1 !== -1 && idx.O4_1 !== -1;
+}