Molecular Motion

Visualizing Membrane Receptor Signalling

A receptor in a lipid bilayer binds its ligand outside the cell, dimerizes, and is phosphorylated inside it. The example is the activation of the EGF receptor, with every receptor and ligand drawn as an individual copy.

EGFR activation by ligand-induced dimerization

Step through the mechanism with the controls or the arrow keys, or open it in the viewer for the timeline, the thumbnails and SVG or PNG export.

Trans-autophosphorylationShown: EGF ×2 (bound to EGFR); EGFR ×2 (active).
EGFR activation by ligand-induced dimerization: Trans-autophosphorylation.

The mechanism

The EGF receptor (EGFR) is a receptor tyrosine kinase that spans the plasma membrane. Each monomer binds one molecule of EGF on its extracellular domain, which exposes a dimerization arm, and two liganded receptors form a dimer.

Dimerization activates the kinase domains inside the cell, and the receptors phosphorylate tyrosines on each other’s C-terminal tails. A phosphorylated tyrosine, here Tyr1068, is a docking site: the adaptor GRB2 binds it through its SH2 domain and links the receptor to RAS–MAPK signalling, which this example does not show.

  1. 1 Inactive monomers

    Two EGFR monomers sit in the membrane

  2. 2 Ligand binding

    Each receptor binds one EGF

    • EGF binds the extracellular domain of each receptor
    • Ligand binding exposes the dimerization arm

  3. 3 Dimerization

    The two liganded receptors form a dimer

    • The receptors bind each other through their dimerization interfaces
    • One ligand per receptor; the dimer is symmetric at the dimerization interface

  4. 4 Trans-autophosphorylation

    Each kinase phosphorylates its partner

    • Dimerization activates both kinase domains
    • Each receptor phosphorylates Tyr1068 on the other receptor's tail

  5. 5 GRB2 recruitment

    GRB2 docks on phosphorylated Tyr1068

    • The SH2 domain of GRB2 recognises phosphorylated Tyr1068
    • GRB2 couples the active receptor to downstream RAS–MAPK signalling (not shown)

A schematic, explanatory model: it shows the order of events, not stoichiometry or kinetics.

How Molecular Motion represents it

The document declares three compartments: extracellular, membrane and cytoplasm. A compartment of kind membrane is drawn as a lipid bilayer across the figure, and a protein whose compartment is that membrane is drawn spanning it, with a domain on each side. Nothing in the file says how to draw a receptor.

EGF stays outside and GRB2 inside because of the compartment each one is declared in: a partner docks on the side of the bilayer its own compartment lies on. copies: 2 gives two receptors and two ligands, addressed as egfr#1 and egfr#2, so the figure shows who binds whom.

Each contact uses a named interface: the ligand pocket, the dimerization interface, the SH2 domain of GRB2. phosphorylate puts a phosphate on the site y1068 of one receptor, by the other, and GRB2 then binds that site, so the tag and the adaptor are drawn at the same place on the cytoplasmic side.

From examples/egfr-dimerization.yaml
actors:
  - id: egfr
    type: protein
    label: EGFR
    color: "#5aa9a0"
    compartment: membrane
    copies: 2
    initial: { activity: inactive }
    interfaces:
      - { id: ligand }
      - { id: dimer }
    sites:
      - id: y1068
        label: Tyr1068

steps:
  - id: dimer
    title: Dimerization
    summary: The two liganded receptors form a dimer
    keyEvents:
      - The receptors bind each other through their dimerization interfaces
      - One ligand per receptor; the dimer is symmetric at the dimerization interface
    actions:
      - { type: bind, actor: "egfr#2", interface: dimer, target: "egfr#1", targetInterface: dimer }

  - id: autophosphorylation
    title: Trans-autophosphorylation
    summary: Each kinase phosphorylates its partner
    keyEvents:
      - Dimerization activates both kinase domains
      - Each receptor phosphorylates Tyr1068 on the other receptor's tail
    actions:
      - parallel:
          - { type: activate, actor: "egfr#1", by: "egfr#2" }
          - { type: activate, actor: "egfr#2", by: "egfr#1" }
      - parallel:
          - { type: phosphorylate, actor: "egfr#1", site: y1068, by: "egfr#2" }
          - { type: phosphorylate, actor: "egfr#2", site: y1068, by: "egfr#1" }

That is part of the complete file. Showing it on a page takes a few lines:

Figure.tsx
import { parseMechanism } from '@molecular-motion/core/yaml';
import { MolecularMechanism } from '@molecular-motion/react';
import source from './egfr-dimerization.yaml?raw';   // Vite; any way of reading the file as text works

export function Figure() {
  return <MolecularMechanism definition={parseMechanism(source)} controls />;
}

The language describes actors, sites and coordinates, and Actions lists every action used here. To change this mechanism and see the result, paste the file into the playground.

References

All examples · About Molecular Motion · Source on GitHub