# sb-ncbr/pdbcharges_website architecture

> Architecture diagram of the GitHub repository sb-ncbr/pdbcharges_website, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-11). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sb-ncbr/pdbcharges_website
- Repository: https://github.com/sb-ncbr/pdbcharges_website

## Overview

PDBCharges is a web application for obtaining and viewing partial atomic charges on protein structures. Its documented scientific workflow prepares structures with added, optimized hydrogens and computes charges; the browser viewer displays charge annotations, sequence information, and structure controls. The Flask route, templates, and static scripts are present, but their detailed request flow is not shown in the excerpts, so those links are left unverified. Viewer component relationships and charge-property/theme registration are supported by sampled source.

Main entry points: [`viewer/src/charges-extension/behavior.ts`](https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/charges-extension/behavior.ts) (Charge behavior), [`app/routes.py`](https://github.com/sb-ncbr/pdbcharges_website/blob/main/app/routes.py) (Flask routes), [`viewer/src/components/ViewerLayout.tsx`](https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/components/ViewerLayout.tsx) (Viewer layout), [`viewer/src/charges-extension/preset.ts`](https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/charges-extension/preset.ts) (Charge preset)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web application"]
  node_routes["Flask routes<br/>[routes.py]"]
  node_templates["Web templates"]
  node_scripts["Web scripts"]
end

subgraph group_science["Charge computation"]
  node_structures[("Calculated structures")]
  node_parameters["Method parameters"]
  node_prep["Structure preparation<br/>[routes.py]"]
  node_calculation["Charge calculation<br/>[routes.py]"]
end

subgraph group_viewer["Structure viewer"]
  node_appentry["Viewer entry<br/>[main.tsx]"]
  node_viewer["Molstar viewer<br/>[MolstarViewer.tsx]"]
  node_layout["Viewer layout<br/>[ViewerLayout.tsx]"]
  node_sequence["Sequence view<br/>[SequenceView.tsx]"]
  node_seqcharges["Charge sequence"]
  node_context["Viewer context<br/>[context-model.ts]"]
end

subgraph group_extension["Charge annotations"]
  node_behavior["Charge behavior<br/>[behavior.ts]"]
  node_property["Charge property<br/>[property.ts]"]
  node_color["Charge coloring<br/>[color.ts]"]
  node_labels["Charge labels<br/>[labels.ts]"]
  node_preset["Charge preset<br/>[preset.ts]"]
end

node_user(("User"))
node_hydride["Hydride"]
node_moleculekit["MoleculeKit"]
node_gfnff["GFN-FF optimization"]
node_gfn1["GFN1-xTB"]
node_browser(("Browser"))

node_user -.->|"submits request"| node_routes
node_routes -.->|"renders pages"| node_templates
node_routes -.->|"starts preparation"| node_prep
node_prep -.->|"adds hydrogens"| node_hydride
node_prep -.->|"prepares structure"| node_moleculekit
node_prep -.->|"optimizes hydrogens"| node_gfnff
node_routes -.->|"starts calculation"| node_calculation
node_calculation -.->|"computes charges"| node_gfn1
node_parameters -.->|"configures methods"| node_calculation
node_calculation -.->|"stores results"| node_structures
node_browser -.->|"opens viewer"| node_appentry
node_appentry -->|"renders"| node_viewer
node_viewer -->|"renders"| node_layout
node_layout -->|"renders"| node_sequence
node_sequence -->|"uses"| node_seqcharges
node_layout -->|"subscribes to"| node_context
node_context -.->|"registers extension"| node_behavior
node_behavior -->|"registers provider"| node_property
node_behavior -->|"registers theme"| node_color
node_behavior -->|"registers labels"| node_labels
node_behavior -->|"registers preset"| node_preset
node_color -->|"reads charges"| node_property
node_preset -->|"checks applicability"| node_property
node_preset -->|"selects theme"| node_color

click node_routes "https://github.com/sb-ncbr/pdbcharges_website/blob/main/app/routes.py"
click node_templates "https://github.com/sb-ncbr/pdbcharges_website/tree/main/app/templates"
click node_scripts "https://github.com/sb-ncbr/pdbcharges_website/tree/main/app/static"
click node_structures "https://github.com/sb-ncbr/pdbcharges_website/tree/main/app/calculated_structures"
click node_parameters "https://github.com/sb-ncbr/pdbcharges_website/tree/main/app/parameters"
click node_prep "https://github.com/sb-ncbr/pdbcharges_website/blob/main/app/routes.py"
click node_calculation "https://github.com/sb-ncbr/pdbcharges_website/blob/main/app/routes.py"
click node_appentry "https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/main.tsx"
click node_viewer "https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/components/MolstarViewer.tsx"
click node_layout "https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/components/ViewerLayout.tsx"
click node_sequence "https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/components/SequenceView.tsx"
click node_seqcharges "https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/components/PdbChargesSequence.tsx"
click node_context "https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/models/context-model.ts"
click node_behavior "https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/charges-extension/behavior.ts"
click node_property "https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/charges-extension/property.ts"
click node_color "https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/charges-extension/color.ts"
click node_labels "https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/charges-extension/labels.ts"
click node_preset "https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/charges-extension/preset.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_routes,node_templates,node_scripts,node_user,node_browser toneBlue
class node_structures,node_parameters,node_prep,node_calculation toneAmber
class node_appentry,node_viewer,node_layout,node_sequence,node_seqcharges,node_context toneMint
class node_behavior,node_property,node_color,node_labels,node_preset toneRose
class node_hydride,node_moleculekit,node_gfnff,node_gfn1 toneIndigo
```

## Components

### Web application

- [Flask routes](https://github.com/sb-ncbr/pdbcharges_website/blob/main/app/routes.py): `app/routes.py`
- [Web templates](https://github.com/sb-ncbr/pdbcharges_website/tree/main/app/templates): `app/templates`
- [Web scripts](https://github.com/sb-ncbr/pdbcharges_website/tree/main/app/static): `app/static`

### Charge computation

- [Calculated structures](https://github.com/sb-ncbr/pdbcharges_website/tree/main/app/calculated_structures): `app/calculated_structures`
- [Method parameters](https://github.com/sb-ncbr/pdbcharges_website/tree/main/app/parameters): `app/parameters`
- [Structure preparation](https://github.com/sb-ncbr/pdbcharges_website/blob/main/app/routes.py): `app/routes.py`
- [Charge calculation](https://github.com/sb-ncbr/pdbcharges_website/blob/main/app/routes.py): `app/routes.py`

### Structure viewer

- [Viewer entry](https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/main.tsx): `viewer/src/main.tsx`
- [Molstar viewer](https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/components/MolstarViewer.tsx): `viewer/src/components/MolstarViewer.tsx`
- [Viewer layout](https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/components/ViewerLayout.tsx): `viewer/src/components/ViewerLayout.tsx`
- [Sequence view](https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/components/SequenceView.tsx): `viewer/src/components/SequenceView.tsx`
- [Charge sequence](https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/components/PdbChargesSequence.tsx): `viewer/src/components/PdbChargesSequence.tsx`
- [Viewer context](https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/models/context-model.ts): `viewer/src/models/context-model.ts`

### Charge annotations

- [Charge behavior](https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/charges-extension/behavior.ts): `viewer/src/charges-extension/behavior.ts`
- [Charge property](https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/charges-extension/property.ts): `viewer/src/charges-extension/property.ts`
- [Charge coloring](https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/charges-extension/color.ts): `viewer/src/charges-extension/color.ts`
- [Charge labels](https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/charges-extension/labels.ts): `viewer/src/charges-extension/labels.ts`
- [Charge preset](https://github.com/sb-ncbr/pdbcharges_website/blob/main/viewer/src/charges-extension/preset.ts): `viewer/src/charges-extension/preset.ts`

### Other components

- **User**
- **Hydride**
- **MoleculeKit**
- **GFN-FF optimization**
- **GFN1-xTB**
- **Browser**

## Connections

- User → Flask routes: submits request
- Flask routes → Web templates: renders pages
- Flask routes → Structure preparation: starts preparation (evidence: `app/routes.py`)
- Structure preparation → Hydride: adds hydrogens (evidence: `README.md`)
- Structure preparation → MoleculeKit: prepares structure (evidence: `README.md`)
- Structure preparation → GFN-FF optimization: optimizes hydrogens (evidence: `README.md`)
- Flask routes → Charge calculation: starts calculation (evidence: `app/routes.py`)
- Charge calculation → GFN1-xTB: computes charges (evidence: `README.md`)
- Method parameters → Charge calculation: configures methods
- Charge calculation → Calculated structures: stores results
- Browser → Viewer entry: opens viewer
- Viewer entry → Molstar viewer: renders (evidence: `viewer/src/main.tsx`)
- Molstar viewer → Viewer layout: renders (evidence: `viewer/src/components/MolstarViewer.tsx`)
- Viewer layout → Sequence view: renders (evidence: `viewer/src/components/ViewerLayout.tsx`)
- Sequence view → Charge sequence: uses (evidence: `viewer/src/components/SequenceView.tsx`)
- Viewer layout → Viewer context: subscribes to (evidence: `viewer/src/components/ViewerLayout.tsx`)
- Viewer context → Charge behavior: registers extension (evidence: `viewer/src/models/context-model.ts`)
- Charge behavior → Charge property: registers provider (evidence: `viewer/src/charges-extension/behavior.ts`)
- Charge behavior → Charge coloring: registers theme (evidence: `viewer/src/charges-extension/behavior.ts`)
- Charge behavior → Charge labels: registers labels (evidence: `viewer/src/charges-extension/behavior.ts`)
- Charge behavior → Charge preset: registers preset (evidence: `viewer/src/charges-extension/behavior.ts`)
- Charge coloring → Charge property: reads charges (evidence: `viewer/src/charges-extension/color.ts`)
- Charge preset → Charge property: checks applicability (evidence: `viewer/src/charges-extension/preset.ts`)
- Charge preset → Charge coloring: selects theme (evidence: `viewer/src/charges-extension/preset.ts`)