react-cheminfo 0.11.0 → 0.13.0

package/src/molecule3d/ui/measurements.ts

@@ -0,0 +1,178 @@
+/**
+ * Distances, angles and dihedral angles over the displayed molecule.
+ *
+ * molstar ships the measuring itself — `managers.structure.measurement` draws
+ * the lines and labels — but its only way to pick the atoms is the panel of its
+ * own UI, which this component does not mount. That panel works from the
+ * selection history, and so does this module: while a tool is active the
+ * plugin is in selection mode, a click toggles one atom into the history
+ * instead of moving the camera, and once enough atoms are in it they become a
+ * measurement.
+ */
+
+import { OrderedSet } from 'molstar/lib/mol-data/int.js';
+import type { Loci } from 'molstar/lib/mol-model/loci.js';
+import type { UnitIndex } from 'molstar/lib/mol-model/structure/structure/element/util.js';
+import type { Structure } from 'molstar/lib/mol-model/structure.js';
+import { StructureElement } from 'molstar/lib/mol-model/structure.js';
+import type { PluginContext } from 'molstar/lib/mol-plugin/context.js';
+import { MeasurementGroupTag } from 'molstar/lib/mol-plugin-state/manager/structure/measurement.js';
+import { StateSelection, StateTransform } from 'molstar/lib/mol-state/index.js';
+
+import type {
+  AtomReference,
+  Measurement,
+  MeasurementKind,
+} from '../core/measurement.ts';
+import { MEASUREMENT_ATOM_COUNTS } from '../core/measurement.ts';
+
+import { moleculeStructure } from './renderMolecule.ts';
+
+// Lowercased: it is a factory, not a constructor.
+const elementLoci = StructureElement.Loci;
+
+/**
+ * Draw exactly `measurements` over the current molecule. An atom the structure
+ * does not have skips its measurement rather than failing the scene.
+ * @param plugin - The molstar context.
+ * @param measurements - Everything to show, replacing what is shown.
+ * @returns Nothing; resolves once every label is on screen.
+ */
+export async function renderMeasurements(
+  plugin: PluginContext,
+  measurements: readonly Measurement[],
+): Promise<void> {
+  await clearMeasurements(plugin);
+  const structure = moleculeStructure(plugin);
+  if (structure === undefined) return;
+  const manager = plugin.managers.structure.measurement;
+  for (const measurement of measurements) {
+    const [a, b, c, d] = atomLoci(structure, measurement.atoms);
+    /* eslint-disable no-await-in-loop -- each add commits to the state tree, and commits must not interleave */
+    if (measurement.kind === 'distance' && a && b) {
+      await manager.addDistance(a, b);
+    } else if (measurement.kind === 'angle' && a && b && c) {
+      await manager.addAngle(a, b, c);
+    } else if (measurement.kind === 'dihedral' && a && b && c && d) {
+      await manager.addDihedral(a, b, c, d);
+    }
+    /* eslint-enable no-await-in-loop */
+  }
+}
+
+/**
+ * Remove every measurement from the scene.
+ * @param plugin - The molstar context.
+ * @returns Nothing; resolves once the labels are gone.
+ */
+export async function clearMeasurements(plugin: PluginContext): Promise<void> {
+  const ref = StateSelection.findTagInSubtree(
+    plugin.state.data.tree,
+    StateTransform.RootRef,
+    MeasurementGroupTag,
+  );
+  if (ref === undefined) return;
+  await plugin.build().delete(ref).commit();
+}
+
+/** Turns the clicks on atoms into measurements, while a tool is active. */
+export class MeasurementPicker {
+  readonly #plugin: PluginContext;
+  readonly #onMeasure: (measurement: Measurement) => void;
+  readonly #unsubscribe: () => void;
+  #kind: MeasurementKind | null = null;
+
+  /**
+   * Start listening to the selection history of `plugin`.
+   * @param plugin - The molstar context.
+   * @param onMeasure - Called with each measurement once its atoms are picked.
+   */
+  constructor(
+    plugin: PluginContext,
+    onMeasure: (measurement: Measurement) => void,
+  ) {
+    this.#plugin = plugin;
+    this.#onMeasure = onMeasure;
+    // A molfile is one residue: at molstar's default granularity a click
+    // would pick the whole molecule.
+    plugin.managers.interactivity.setProps({ granularity: 'element' });
+    const subscription =
+      plugin.managers.structure.selection.events.additionsHistoryUpdated.subscribe(
+        () => {
+          this.#collect();
+        },
+      );
+    this.#unsubscribe = () => {
+      subscription.unsubscribe();
+    };
+  }
+
+  /**
+   * Choose what the next clicks measure. Atoms already picked are dropped.
+   * @param kind - The measurement to build, or `null` to give clicks back to
+   * the camera.
+   */
+  setKind(kind: MeasurementKind | null): void {
+    if (kind === this.#kind) return;
+    this.#kind = kind;
+    this.#plugin.selectionMode = kind !== null;
+    this.#plugin.managers.interactivity.lociSelects.deselectAll();
+  }
+
+  /** Stop listening to the plugin. */
+  dispose(): void {
+    this.#unsubscribe();
+  }
+
+  #collect(): void {
+    const kind = this.#kind;
+    const structure = moleculeStructure(this.#plugin);
+    if (kind === null || structure === undefined) return;
+    const needed = MEASUREMENT_ATOM_COUNTS[kind];
+    // The history is newest first.
+    const history = this.#plugin.managers.structure.selection.additionsHistory;
+    const atoms: AtomReference[] = [];
+    for (let i = 0; i < history.length && atoms.length < needed; i++) {
+      const entry = history[i];
+      const atom = entry && atomReference(structure, entry.loci);
+      if (atom !== undefined) atoms.push(atom);
+    }
+    if (atoms.length < needed) return;
+    this.#plugin.managers.interactivity.lociSelects.deselectAll();
+    this.#onMeasure({ kind, atoms: atoms.toReversed() });
+  }
+}
+
+function atomReference(
+  structure: Structure,
+  loci: Loci,
+): AtomReference | undefined {
+  if (!StructureElement.Loci.is(loci)) return undefined;
+  if (StructureElement.Loci.size(loci) !== 1) return undefined;
+  const entry = loci.elements[0];
+  if (entry === undefined) return undefined;
+  const units = structure.units;
+  for (let unit = 0; unit < units.length; unit++) {
+    if (units[unit]?.id === entry.unit.id) {
+      return { unit, element: OrderedSet.getAt(entry.indices, 0) };
+    }
+  }
+  return undefined;
+}
+
+function atomLoci(
+  structure: Structure,
+  atoms: readonly AtomReference[],
+): StructureElement.Loci[] {
+  const loci: StructureElement.Loci[] = [];
+  for (const atom of atoms) {
+    const unit = structure.units[atom.unit];
+    if (unit === undefined || atom.element >= unit.elements.length) return [];
+    loci.push(
+      elementLoci(structure, [
+        { unit, indices: OrderedSet.ofSingleton(atom.element as UnitIndex) },
+      ]),
+    );
+  }
+  return loci;
+}

package/src/molecule3d/ui/molecule3dIcons.tsx

@@ -0,0 +1,108 @@
+/**
+ * The glyphs of the molecule toolbar that Blueprint has no icon for, drawn in
+ * one language: atoms as dots, bonds as lines, 16 px, in `currentColor` so
+ * they follow the button's own state.
+ */
+
+import type { ReactElement } from 'react';
+
+import type { MeasurementKind } from '../core/measurement.ts';
+
+/** The atoms a measurement joins, drawn as dots and the bonds between them. */
+const ICON_POINTS: Record<MeasurementKind, ReadonlyArray<[number, number]>> = {
+  distance: [
+    [2.5, 8],
+    [13.5, 8],
+  ],
+  angle: [
+    [13, 3],
+    [3, 13],
+    [13.5, 13],
+  ],
+  dihedral: [
+    [2, 4],
+    [6, 12.5],
+    [10, 3.5],
+    [14, 12],
+  ],
+};
+
+/**
+ * The glyph of one measuring tool.
+ * @param props - Which measurement.
+ * @param props.kind - The measurement the tool builds.
+ * @returns The 16 px glyph.
+ */
+export function MeasureIcon(props: { kind: MeasurementKind }): ReactElement {
+  const { kind } = props;
+  const points = ICON_POINTS[kind];
+  return (
+    <svg width={16} height={16} viewBox="0 0 16 16" aria-hidden>
+      <polyline
+        points={points.map((point) => point.join(',')).join(' ')}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={1.3}
+        strokeDasharray={kind === 'distance' ? '2 1.5' : undefined}
+      />
+      {points.map(([x, y]) => (
+        <circle key={`${x},${y}`} cx={x} cy={y} r={1.9} fill="currentColor" />
+      ))}
+    </svg>
+  );
+}
+
+/**
+ * A measured distance crossed out: the button removes measurements, and only
+ * measurements, which a generic trash can would not say.
+ * @returns The 16 px glyph.
+ */
+export function ClearMeasurementsIcon(): ReactElement {
+  return (
+    <svg width={16} height={16} viewBox="0 0 16 16" aria-hidden>
+      <polyline
+        points="2.2,5.5 11,5.5"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={1.3}
+        strokeDasharray="2 1.5"
+      />
+      <circle cx={2.2} cy={5.5} r={1.9} fill="currentColor" />
+      <circle cx={11} cy={5.5} r={1.9} fill="currentColor" />
+      <path
+        d="M9.6 9.6l4.8 4.8M14.4 9.6l-4.8 4.8"
+        stroke="currentColor"
+        strokeWidth={1.8}
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * A three-atom molecule wrapped in a translucent blob: the surface drawn over
+ * the model.
+ * @returns The 16 px glyph.
+ */
+export function SurfaceIcon(): ReactElement {
+  return (
+    <svg width={16} height={16} viewBox="0 0 16 16" aria-hidden>
+      <path
+        d="M8 1.2c2.9 0 5.9 1.7 6.3 4.6.3 1.9-.7 2.9-.4 4.4.4 2.2-1.9 4.6-5.1 4.6-3 0-6.3-1.6-6.8-4.4C1.6 8.8 2.6 7.8 2.4 6.2 2 3.4 5 1.2 8 1.2Z"
+        fill="currentColor"
+        fillOpacity={0.18}
+        stroke="currentColor"
+        strokeWidth={0.9}
+      />
+      <polyline
+        points="5.1,10.2 8,5.8 10.9,10.2"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={1.1}
+      />
+      <circle cx={5.1} cy={10.2} r={1.4} fill="currentColor" />
+      <circle cx={8} cy={5.8} r={1.4} fill="currentColor" />
+      <circle cx={10.9} cy={10.2} r={1.4} fill="currentColor" />
+    </svg>
+  );
+}

package/src/molecule3d/ui/moleculeViewer3DProps.ts

@@ -0,0 +1,98 @@
+import type { ReactNode } from 'react';
+
+import type { ViewerCapability } from '../../orbital/ui/capability.ts';
+import type { Measurement } from '../core/measurement.ts';
+import type {
+  Molecule3DFile,
+  Molecule3DSettings,
+  Molecule3DTools,
+} from '../core/settings.ts';
+
+/**
+ * Props of `MoleculeViewer3D`.
+ *
+ * Settings, spin and measurements are each either owned by the site — pass
+ * the value and its `on…Change` — or left to the component, which then starts
+ * from the `default…` value.
+ */
+export interface MoleculeViewer3DProps {
+  /** The molecule to draw, with 3D coordinates, or `null` for none. */
+  molfile: Molecule3DFile | null;
+  /**
+   * Which buttons the toolbar over the canvas shows; tools not named stay on.
+   * @default every tool
+   */
+  tools?: Partial<Molecule3DTools>;
+  /**
+   * How the model is drawn, when the site owns it.
+   * @default undefined
+   */
+  settings?: Molecule3DSettings;
+  /**
+   * Starting settings when the component owns them.
+   * @default DEFAULT_MOLECULE_3D_SETTINGS
+   */
+  defaultSettings?: Partial<Molecule3DSettings>;
+  /**
+   * Called with the new settings after any change from the toolbar.
+   * @default undefined
+   */
+  onSettingsChange?: (settings: Molecule3DSettings) => void;
+  /**
+   * Whether the model turns on its own, when the site owns it.
+   * @default undefined
+   */
+  spinning?: boolean;
+  /**
+   * Starting spin when the component owns it.
+   * @default false
+   */
+  defaultSpinning?: boolean;
+  /**
+   * Called when the spin toggle is pressed.
+   * @default undefined
+   */
+  onSpinningChange?: (spinning: boolean) => void;
+  /**
+   * Turn rate, in molstar's own spin unit.
+   * @default 1 / 3
+   */
+  spinSpeed?: number;
+  /**
+   * The measurements drawn over the model, when the site owns them. They name
+   * atoms by position, so they carry over to another conformer of the same
+   * molecule; a site showing an unrelated molecule should clear them.
+   * @default undefined
+   */
+  measurements?: readonly Measurement[];
+  /**
+   * Called with the whole list after a measurement is added or cleared.
+   * @default undefined
+   */
+  onMeasurementsChange?: (measurements: readonly Measurement[]) => void;
+  /**
+   * Name of an exported image, without its extension.
+   * @default 'molecule'
+   */
+  fileName?: string;
+  /**
+   * Scene background, as `#rrggbb`.
+   * @default '#ffffff'
+   */
+  background?: string;
+  /**
+   * Smallest height of the canvas, pixels.
+   * @default 320
+   */
+  minHeight?: number;
+  /**
+   * What to show while molstar is downloading.
+   * @default 'Loading the 3D viewer…'
+   */
+  fallback?: ReactNode;
+  /**
+   * What to show when the machine cannot render at all.
+   * @default undefined — `capability.message` is written
+   */
+  renderUnsupported?: (capability: ViewerCapability) => ReactNode;
+}

package/src/molecule3d/ui/polarityColorTheme.ts

@@ -0,0 +1,125 @@
+/**
+ * A molstar colour theme showing the polar ends of a molecule: red over the
+ * positive end — cations, and the hydrogens bonded to nitrogen or oxygen —
+ * blue over the negative end — anions, nitrogen and oxygen — and grey over the
+ * rest.
+ */
+
+import type { Location } from 'molstar/lib/mol-model/location.js';
+import type {
+  ElementIndex,
+  Structure,
+} from 'molstar/lib/mol-model/structure.js';
+import { StructureElement, Unit } from 'molstar/lib/mol-model/structure.js';
+import { ColorThemeCategory } from 'molstar/lib/mol-theme/color/categories.js';
+import type { ColorTheme } from 'molstar/lib/mol-theme/color.js';
+import type { ThemeDataContext } from 'molstar/lib/mol-theme/theme.js';
+import { Color } from 'molstar/lib/mol-util/color/color.js';
+import { ParamDefinition as PD } from 'molstar/lib/mol-util/param-definition.js';
+
+import { SURFACE_CHARGE_COLORS } from '../core/settings.ts';
+
+/** Registry name of the theme. */
+export const POLARITY_COLOR_THEME = 'molecule3d-polarity';
+
+const POLARITY_PARAMS = {};
+
+type PolarityParams = typeof POLARITY_PARAMS;
+
+const POSITIVE = Color.fromHexStyle(SURFACE_CHARGE_COLORS.positive);
+const NEGATIVE = Color.fromHexStyle(SURFACE_CHARGE_COLORS.negative);
+const NEUTRAL = Color.fromHexStyle(SURFACE_CHARGE_COLORS.neutral);
+
+/** The theme provider, registered on a plugin by {@link registerPolarityTheme}. */
+export const polarityColorThemeProvider: ColorTheme.Provider<
+  PolarityParams,
+  typeof POLARITY_COLOR_THEME
+> = {
+  name: POLARITY_COLOR_THEME,
+  label: 'Polarity',
+  category: ColorThemeCategory.Atom,
+  factory: polarityColorTheme,
+  getParams: () => POLARITY_PARAMS,
+  defaultValues: PD.getDefaultValues(POLARITY_PARAMS),
+  isApplicable: (context: ThemeDataContext) => context.structure !== undefined,
+};
+
+/**
+ * Make the theme available to a plugin. Idempotent.
+ * @param registry - The plugin's structure colour theme registry.
+ */
+export function registerPolarityTheme(registry: ColorTheme.Registry): void {
+  if (!registry.has(polarityColorThemeProvider)) {
+    registry.add(polarityColorThemeProvider);
+  }
+}
+
+function polarityColorTheme(
+  context: ThemeDataContext,
+  props: PD.Values<PolarityParams>,
+): ColorTheme<PolarityParams> {
+  const signs =
+    context.structure === undefined
+      ? new Int8Array(0)
+      : atomSigns(context.structure);
+  function color(location: Location): Color {
+    if (!StructureElement.Location.is(location)) return NEUTRAL;
+    const sign = signs[location.element];
+    if (sign === 1) return POSITIVE;
+    if (sign === -1) return NEGATIVE;
+    return NEUTRAL;
+  }
+  return {
+    factory: polarityColorTheme,
+    granularity: 'group',
+    preferSmoothing: true,
+    color,
+    props,
+    description: 'Positive end in red, negative end in blue, the rest in grey.',
+  };
+}
+
+/**
+ * The sign of every atom's partial charge, as far as the structure tells it.
+ * A formal charge decides first; otherwise nitrogen and oxygen are negative
+ * and a hydrogen bonded to either is positive.
+ * @param structure - The atoms, with their bonds and formal charges.
+ * @returns 1, -1 or 0 at the model index of every atom.
+ */
+function atomSigns(structure: Structure): Int8Array {
+  let size = 0;
+  for (const unit of structure.units) {
+    size = Math.max(size, unit.model.atomicHierarchy.atoms._rowCount);
+  }
+  const signs = new Int8Array(size);
+  for (const unit of structure.units) {
+    if (!Unit.isAtomic(unit)) continue;
+    const { elements, model, bonds } = unit;
+    const { type_symbol: symbols, pdbx_formal_charge: charges } =
+      model.atomicHierarchy.atoms;
+    const { offset, b } = bonds;
+    for (let index = 0; index < elements.length; index++) {
+      const element = elements[index] as ElementIndex;
+      const charge = charges.value(element);
+      if (charge !== 0) {
+        signs[element] = charge > 0 ? 1 : -1;
+        continue;
+      }
+      const symbol = symbols.value(element);
+      if (symbol === 'N' || symbol === 'O') {
+        signs[element] = -1;
+        continue;
+      }
+      if (symbol !== 'H') continue;
+      const end = offset[index + 1] ?? 0;
+      for (let bond = offset[index] ?? end; bond < end; bond++) {
+        const neighbour = symbols.value(elements[b[bond] ?? 0] as ElementIndex);
+        if (neighbour === 'N' || neighbour === 'O') {
+          signs[element] = 1;
+          break;
+        }
+      }
+    }
+  }
+  return signs;
+}

package/src/molecule3d/ui/renderMolecule.ts

@@ -0,0 +1,179 @@
+/**
+ * The 3D model of one molecule, built from an in-memory molfile.
+ *
+ * The whole molecule hangs off a single data node, and the drawn model hangs
+ * off the structure under it with a fixed ref of its own, so a surface can
+ * attach to the same atoms and loading another molecule deletes the subtree —
+ * surface included.
+ */
+
+import type { Structure } from 'molstar/lib/mol-model/structure.js';
+import type { PluginContext } from 'molstar/lib/mol-plugin/context.js';
+import { createStructureRepresentationParams } from 'molstar/lib/mol-plugin-state/helpers/structure-representation-params.js';
+import { PluginStateObject } from 'molstar/lib/mol-plugin-state/objects.js';
+import { StructureFromModel } from 'molstar/lib/mol-plugin-state/transforms/model.js';
+import { StructureRepresentation3D } from 'molstar/lib/mol-plugin-state/transforms/representation.js';
+import type { StateTransformer } from 'molstar/lib/mol-state/index.js';
+
+import type { Molecule3DFile, RepresentationId } from '../core/settings.ts';
+
+import type { MoleculeStyle } from './viewerTypes.ts';
+
+/** State-tree ref of the structure every representation hangs off. */
+export const MOLECULE_STRUCTURE_REF = 'molecule3d-structure';
+
+/** Root of the molecule subtree: deleting it removes model and surface. */
+const MOLECULE_DATA_REF = 'molecule3d-data';
+
+/** The drawn model, replaced in place whenever the style changes. */
+const MODEL_REPRESENTATION_REF = 'molecule3d-model';
+
+/**
+ * molstar's ball-and-stick radius factor that a size factor of 1 stands for:
+ * thin sticks and readable balls.
+ */
+const NATURAL_SIZE_FACTOR = 0.25;
+
+/** Bond radius as a fraction of the atom radius; molstar's own default. */
+const BALL_AND_STICK_ASPECT_RATIO = 2 / 3;
+
+/** Spacefill multiplies the van der Waals radius, whose honest value is 1. */
+const SPACEFILL_SCALE = 4;
+
+/** Sticks take the factor as a radius in ångström; 0.3 Å is licorice. */
+const STICK_SCALE = 1.2;
+
+/**
+ * Replace the displayed molecule. Everything already on screen goes first.
+ * @param plugin - The molstar context.
+ * @param molfile - Molfile text plus the format id.
+ * @param style - See {@link MoleculeStyle}.
+ * @returns Nothing; resolves once the model is on screen.
+ * @throws {Error} When the file parses to zero atoms. molstar's `mol` parser returns
+ * exactly that on a V3000 file, with no error, so without this check the viewer
+ * would show an empty scene and report nothing.
+ */
+export async function renderMolecule(
+  plugin: PluginContext,
+  molfile: Molecule3DFile,
+  style: MoleculeStyle = {},
+): Promise<void> {
+  const { representation = 'ball-and-stick', sizeFactor = 1 } = style;
+  await clearMolecule(plugin);
+  const data = await plugin.builders.data.rawData(
+    { data: molfile.data },
+    { ref: MOLECULE_DATA_REF, state: { isGhost: true } },
+  );
+  const trajectory = await plugin.builders.structure.parseTrajectory(
+    data,
+    molfile.format,
+  );
+  const model = await plugin.builders.structure.createModel(trajectory);
+  const atomCount = model.data?.atomicHierarchy.atoms._rowCount ?? 0;
+  if (atomCount === 0) {
+    await clearMolecule(plugin);
+    throw new Error(
+      `molstar parsed 0 atoms from this ${molfile.format} file without reporting an error; a V3000 molfile must be parsed as "sdf".`,
+    );
+  }
+  await plugin
+    .build()
+    .to(model)
+    .apply(StructureFromModel, undefined, { ref: MOLECULE_STRUCTURE_REF })
+    .commit();
+  const structure = moleculeStructure(plugin);
+  if (structure === undefined) {
+    throw new Error('molstar built no structure from this molfile.');
+  }
+  await plugin
+    .build()
+    .to(MOLECULE_STRUCTURE_REF)
+    .applyOrUpdate(
+      MODEL_REPRESENTATION_REF,
+      StructureRepresentation3D,
+      modelParams(
+        plugin,
+        structure,
+        representation,
+        sizeFactor * NATURAL_SIZE_FACTOR,
+      ),
+    )
+    .commit();
+}
+
+/**
+ * Remove the molecule, and with it any surface drawn on the same atoms.
+ * @param plugin - The molstar context.
+ * @returns Nothing; resolves once the scene is empty.
+ */
+export async function clearMolecule(plugin: PluginContext): Promise<void> {
+  if (!plugin.state.data.cells.has(MOLECULE_DATA_REF)) return;
+  await plugin.build().delete(MOLECULE_DATA_REF).commit();
+}
+
+/**
+ * The atoms currently on screen, for anything that draws on top of them.
+ * @param plugin - The molstar context.
+ * @returns The loaded structure, or `undefined` when no molecule is displayed.
+ */
+export function moleculeStructure(
+  plugin: PluginContext,
+): Structure | undefined {
+  const object = plugin.state.data.cells.get(MOLECULE_STRUCTURE_REF)?.obj;
+  if (!PluginStateObject.Molecule.Structure.is(object)) return undefined;
+  return object.data;
+}
+
+/**
+ * Translate one of the three representations into molstar's own. `stick` is a
+ * genuine licorice model: a uniform size theme and an aspect ratio of 1 give
+ * atoms and bonds one radius, so the joints are caps of the stick's thickness.
+ * @param plugin - The molstar context.
+ * @param structure - The atoms to draw.
+ * @param representation - Which representation.
+ * @param sizeFactor - molstar's own radius factor.
+ * @returns The parameters of the representation node.
+ */
+function modelParams(
+  plugin: PluginContext,
+  structure: Structure,
+  representation: RepresentationId,
+  sizeFactor: number,
+): StateTransformer.Params<StructureRepresentation3D> {
+  const color = 'element-symbol' as const;
+  const colorParams = {
+    carbonColor: { name: 'element-symbol', params: {} },
+  } as const;
+  if (representation === 'spacefill') {
+    return createStructureRepresentationParams(plugin, structure, {
+      type: 'spacefill',
+      typeParams: { sizeFactor: sizeFactor * SPACEFILL_SCALE },
+      color,
+      colorParams,
+    });
+  }
+  if (representation === 'stick') {
+    return createStructureRepresentationParams(plugin, structure, {
+      type: 'ball-and-stick',
+      typeParams: {
+        sizeFactor: sizeFactor * STICK_SCALE,
+        sizeAspectRatio: 1,
+        aromaticBonds: false,
+      },
+      color,
+      colorParams,
+      size: 'uniform',
+      sizeParams: { value: 1 },
+    });
+  }
+  return createStructureRepresentationParams(plugin, structure, {
+    type: 'ball-and-stick',
+    typeParams: {
+      sizeFactor,
+      sizeAspectRatio: BALL_AND_STICK_ASPECT_RATIO,
+      aromaticBonds: false,
+    },
+    color,
+    colorParams,
+  });
+}