JSME Integration

Related Files

boltzmann/static/ext/jsme/index.html
boltzmann/static/ext/jsme/doc.html
boltzmann/static/ext/jsme/JSME_test.html

JSME Integration

Introduction

JSME (JavaScript Molecular Editor) is a molecule editor written in JavaScript, allowing users to draw, edit, and display chemical structures within a web browser. The boltzmann repository uses JSME to facilitate chemical structure input and visualization.

Purpose and Functionality

The integration of JSME into boltzmann enables users to create and modify chemical structures, which serve as input for simulations or analyses within the boltzmann software. JSME features include:

Drawing chemical structures with bonds and atom types.
Editing structures by adding/removing atoms and bonds.
Displaying structures in SMILES, MOL, and JME formats.
Highlighting atoms or bonds.
Integration with chemical resolver services.

Relevant Files

boltzmann/static/ext/jsme/index.html: Entry point for the JSME distribution, providing an overview and example pages.
boltzmann/static/ext/jsme/doc.html: Documentation on embedding JSME into a web page.
boltzmann/static/ext/jsme/JSME_test.html: Test cases and examples demonstrating JSME functionalities.

Code Snippets

Embedding JSME

<html>
<head>
    <script type="text/javascript" src="jsme/jsme.nocache.js"></script>
    <title>JSME Example</title>
</head>
<body>
    <div code="JME.class" name="JME" archive="JME.jar" width="360" height="315" id="JME">
        Enable JavaScript to use JSME!
    </div>
</body>
</html>

Accessing SMILES

var smiles = document.JME.smiles();
alert(smiles);

Mermaid Diagram

sequenceDiagram
    participant User
    participant Browser
    participant JSME
    participant Boltzmann Backend

    Browser->>WebServer: Request page with JSME
    WebServer-->>Browser: HTML, CSS, JS
    Browser->>JSME: Load JSME library
    activate JSME
    JSME-->>Browser: JSME initialized
    User->>JSME: Draw chemical structure
    JSME-->>Browser: Structure data (SMILES)
    Browser->>Boltzmann Backend: Send SMILES data
    deactivate JSME
    activate Boltzmann Backend
    Boltzmann Backend-->>Browser: Simulation results
    deactivate Boltzmann Backend
    Browser->>User: Display results

Integration with Overall Architecture

JSME acts as a front-end component in boltzmann for chemical structure input. The application retrieves SMILES or MOL data from JSME and uses it for backend processing, such as simulations.

User draws a structure using JSME.
boltzmann retrieves structure data from JSME.
Structure data is used as input for backend processing.
Results are displayed to the user.

JSME Integration - acelot-inc/boltzmann GitHub Wiki