# liseda-lab/vowlmap architecture

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

- Interactive diagram: https://gitdiagram.com/liseda-lab/vowlmap
- Repository: https://github.com/liseda-lab/vowlmap

## Overview

VOWLMap is a browser-based WebVOWL extension for interactively inspecting and validating ontology alignments. Users load a prepared alignment visualization, explore mappings and ontology elements with search, filtering, and graph controls, then export results; a separate converter creates the JSON input from ontology JSON and an alignment RDF file. The graph separates alignment-specific interaction from WebVOWL parsing/rendering and general controls. Some runtime wiring is not shown in the excerpts, so uncertain connections are omitted or marked dashed.

Main entry points: [`src/app/js/app.js`](https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/app.js) (App Orchestrator), [`src/app/js/menu/alignmentPane.js`](https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/menu/alignmentPane.js) (Alignment Pane), [`src/webvowl/js/graph.js`](https://github.com/liseda-lab/vowlmap/blob/main/src/webvowl/js/graph.js) (Ontology Graph), [`src/webvowl/js/parser.js`](https://github.com/liseda-lab/vowlmap/blob/main/src/webvowl/js/parser.js) (VOWL Parser)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application UI"]
  node_app_entry["App Orchestrator<br/>[app.js]"]
  node_loading["Load Ontology<br/>[loadingModule.js]"]
  node_sidebars["Sidebars and Editing<br/>[sidebar.js]"]
  node_controls["Menus and Controls<br/>[filterMenu.js]"]
end

subgraph group_alignment["Alignment Review"]
  node_alignment_pane["Alignment Pane<br/>[alignmentPane.js]"]
  node_search["Search<br/>[searchMenu.js]"]
  node_source_search["Source Search<br/>[srcSearchMenu.js]"]
  node_target_search["Target Search<br/>[tgtSearchMenu.js]"]
end

subgraph group_webvowl["WebVOWL Runtime"]
  node_parser["VOWL Parser<br/>[parser.js]"]
  node_attribute_parser["Attribute Parsing<br/>[attributeParser.js]"]
  node_graph["Ontology Graph<br/>[graph.js]"]
  node_graph_elements["Graph Elements<br/>[BaseNode.js]"]
  node_property_elements["Property Elements<br/>[BaseProperty.js]"]
  node_mapping_property["Mapping Relation<br/>[MappingProperty.js]"]
  node_render_helpers["Drawing Helpers<br/>[drawTools.js]"]
  node_statistics["Graph Statistics<br/>[statistics.js]"]
end

subgraph group_data["Input and Export"]
  node_converter["Alignment Converter<br/>[converter.py]"]
  node_inputs["Ontology and Alignment Files"]
  node_export["Export Tools<br/>[exportMenu.js]"]
  node_ttl_export["TTL Export<br/>[exportTTLModule.js]"]
end

node_user(("Reviewer"))

node_user -->|"uses"| node_app_entry
node_user -->|"converts inputs"| node_converter
node_inputs -->|"provides files"| node_converter
node_converter -.->|"produces JSON"| node_loading
node_app_entry -->|"sets up"| node_loading
node_app_entry -->|"sets up"| node_sidebars
node_app_entry -->|"sets up"| node_controls
node_app_entry -->|"sets up"| node_alignment_pane
node_loading -.->|"loads data"| node_graph
node_graph -.->|"parses ontology"| node_parser
node_parser -->|"parses attributes"| node_attribute_parser
node_parser -.->|"creates elements"| node_graph_elements
node_parser -.->|"creates properties"| node_property_elements
node_property_elements -->|"draws with"| node_render_helpers
node_mapping_property -.->|"extends"| node_property_elements
node_alignment_pane -->|"explores mappings"| node_graph
node_alignment_pane -.->|"uses source search"| node_source_search
node_alignment_pane -.->|"uses target search"| node_target_search
node_search -.->|"searches elements"| node_graph
node_controls -->|"filters mappings"| node_alignment_pane
node_sidebars -.->|"references pane"| node_alignment_pane
node_graph -.->|"computes statistics"| node_statistics
node_app_entry -->|"sets up"| node_export
node_export -->|"uses TTL export"| node_ttl_export

click node_app_entry "https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/app.js"
click node_loading "https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/loadingModule.js"
click node_sidebars "https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/sidebar.js"
click node_controls "https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/menu/filterMenu.js"
click node_alignment_pane "https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/menu/alignmentPane.js"
click node_search "https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/menu/searchMenu.js"
click node_source_search "https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/srcSearchMenu.js"
click node_target_search "https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/tgtSearchMenu.js"
click node_parser "https://github.com/liseda-lab/vowlmap/blob/main/src/webvowl/js/parser.js"
click node_attribute_parser "https://github.com/liseda-lab/vowlmap/blob/main/src/webvowl/js/parsing/attributeParser.js"
click node_graph "https://github.com/liseda-lab/vowlmap/blob/main/src/webvowl/js/graph.js"
click node_graph_elements "https://github.com/liseda-lab/vowlmap/blob/main/src/webvowl/js/elements/nodes/BaseNode.js"
click node_property_elements "https://github.com/liseda-lab/vowlmap/blob/main/src/webvowl/js/elements/properties/BaseProperty.js"
click node_mapping_property "https://github.com/liseda-lab/vowlmap/blob/main/src/webvowl/js/elements/properties/implementations/MappingProperty.js"
click node_render_helpers "https://github.com/liseda-lab/vowlmap/blob/main/src/webvowl/js/elements/drawTools.js"
click node_statistics "https://github.com/liseda-lab/vowlmap/blob/main/src/webvowl/js/modules/statistics.js"
click node_converter "https://github.com/liseda-lab/vowlmap/blob/main/converter.py"
click node_export "https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/menu/exportMenu.js"
click node_ttl_export "https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/menu/exportTTLModule.js"

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_app_entry,node_loading,node_sidebars,node_controls,node_user toneBlue
class node_alignment_pane,node_search,node_source_search,node_target_search toneAmber
class node_parser,node_attribute_parser,node_graph,node_graph_elements,node_property_elements,node_mapping_property,node_render_helpers,node_statistics toneMint
class node_converter,node_inputs,node_export,node_ttl_export toneRose
```

## Components

### Application UI

- [App Orchestrator](https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/app.js): `src/app/js/app.js`
- [Load Ontology](https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/loadingModule.js): `src/app/js/loadingModule.js`
- [Sidebars and Editing](https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/sidebar.js): `src/app/js/sidebar.js`
- [Menus and Controls](https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/menu/filterMenu.js): `src/app/js/menu/filterMenu.js`

### Alignment Review

- [Alignment Pane](https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/menu/alignmentPane.js): `src/app/js/menu/alignmentPane.js`
- [Search](https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/menu/searchMenu.js): `src/app/js/menu/searchMenu.js`
- [Source Search](https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/srcSearchMenu.js): `src/app/js/srcSearchMenu.js`
- [Target Search](https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/tgtSearchMenu.js): `src/app/js/tgtSearchMenu.js`

### WebVOWL Runtime

- [VOWL Parser](https://github.com/liseda-lab/vowlmap/blob/main/src/webvowl/js/parser.js): `src/webvowl/js/parser.js`
- [Attribute Parsing](https://github.com/liseda-lab/vowlmap/blob/main/src/webvowl/js/parsing/attributeParser.js): `src/webvowl/js/parsing/attributeParser.js`
- [Ontology Graph](https://github.com/liseda-lab/vowlmap/blob/main/src/webvowl/js/graph.js): `src/webvowl/js/graph.js`
- [Graph Elements](https://github.com/liseda-lab/vowlmap/blob/main/src/webvowl/js/elements/nodes/BaseNode.js): `src/webvowl/js/elements/nodes/BaseNode.js`
- [Property Elements](https://github.com/liseda-lab/vowlmap/blob/main/src/webvowl/js/elements/properties/BaseProperty.js): `src/webvowl/js/elements/properties/BaseProperty.js`
- [Mapping Relation](https://github.com/liseda-lab/vowlmap/blob/main/src/webvowl/js/elements/properties/implementations/MappingProperty.js): `src/webvowl/js/elements/properties/implementations/MappingProperty.js`
- [Drawing Helpers](https://github.com/liseda-lab/vowlmap/blob/main/src/webvowl/js/elements/drawTools.js): `src/webvowl/js/elements/drawTools.js`
- [Graph Statistics](https://github.com/liseda-lab/vowlmap/blob/main/src/webvowl/js/modules/statistics.js): `src/webvowl/js/modules/statistics.js`

### Input and Export

- [Alignment Converter](https://github.com/liseda-lab/vowlmap/blob/main/converter.py): `converter.py`
- **Ontology and Alignment Files**
- [Export Tools](https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/menu/exportMenu.js): `src/app/js/menu/exportMenu.js`
- [TTL Export](https://github.com/liseda-lab/vowlmap/blob/main/src/app/js/menu/exportTTLModule.js): `src/app/js/menu/exportTTLModule.js`

### Other components

- **Reviewer**

## Connections

- Reviewer → App Orchestrator: uses
- Reviewer → Alignment Converter: converts inputs
- Ontology and Alignment Files → Alignment Converter: provides files
- Alignment Converter → Load Ontology: produces JSON
- App Orchestrator → Load Ontology: sets up (evidence: `src/app/js/app.js`)
- App Orchestrator → Sidebars and Editing: sets up (evidence: `src/app/js/app.js`)
- App Orchestrator → Menus and Controls: sets up (evidence: `src/app/js/app.js`)
- App Orchestrator → Alignment Pane: sets up (evidence: `src/app/js/app.js`)
- Load Ontology → Ontology Graph: loads data
- Ontology Graph → VOWL Parser: parses ontology
- VOWL Parser → Attribute Parsing: parses attributes (evidence: `src/webvowl/js/parser.js`)
- VOWL Parser → Graph Elements: creates elements
- VOWL Parser → Property Elements: creates properties
- Property Elements → Drawing Helpers: draws with (evidence: `src/webvowl/js/elements/properties/BaseProperty.js`)
- Mapping Relation → Property Elements: extends
- Alignment Pane → Ontology Graph: explores mappings (evidence: `src/app/js/menu/alignmentPane.js`)
- Alignment Pane → Source Search: uses source search (evidence: `src/app/js/srcSearchMenu.js`)
- Alignment Pane → Target Search: uses target search (evidence: `src/app/js/tgtSearchMenu.js`)
- Search → Ontology Graph: searches elements
- Menus and Controls → Alignment Pane: filters mappings (evidence: `src/app/js/menu/filterMenu.js`)
- Sidebars and Editing → Alignment Pane: references pane (evidence: `src/app/js/sidebar.js`)
- Ontology Graph → Graph Statistics: computes statistics
- App Orchestrator → Export Tools: sets up (evidence: `src/app/js/app.js`)
- Export Tools → TTL Export: uses TTL export (evidence: `src/app/js/menu/exportMenu.js`)