Merge pull request #544 from Steinbeck-Lab/development

Feat: Frontend

Author: vcnainala

CHANGELOG.md

@@ -405,7 +405,7 @@
 * add roatation to CDKDepict ([01b90f0](https://github.com/Steinbeck-Lab/cheminformatics-microservice/commit/01b90f06efa35459621c593f88ad18d130a0cb4f))
 * add rotation to CDKDepict ([9e3c29e](https://github.com/Steinbeck-Lab/cheminformatics-microservice/commit/9e3c29ed6de98606d74ac74b3274721c3bf946d9))
 * add SMILES parser error handling ([9c9202a](https://github.com/Steinbeck-Lab/cheminformatics-microservice/commit/9c9202a814cd64733edf99ecc9959e3c00780778))
-* add SRU, Murko framework and implement COCONUT related descriptors ([abf9991](https://github.com/Steinbeck-Lab/cheminformatics-microservice/commit/abf9991815adbc98c48a0c1f19fdf1e0d162d326))
+* add SRU, Murcko framework and implement COCONUT related descriptors ([abf9991](https://github.com/Steinbeck-Lab/cheminformatics-microservice/commit/abf9991815adbc98c48a0c1f19fdf1e0d162d326))
 * Add sugar removal utility [#231](https://github.com/Steinbeck-Lab/cheminformatics-microservice/issues/231) ([7d9d8cf](https://github.com/Steinbeck-Lab/cheminformatics-microservice/commit/7d9d8cfc7f9fcf5fe6619a90441dd243fd67af7f))
 * Add table preview & JSON,HTML toggle [#76](https://github.com/Steinbeck-Lab/cheminformatics-microservice/issues/76),[#77](https://github.com/Steinbeck-Lab/cheminformatics-microservice/issues/77) ([7e2e063](https://github.com/Steinbeck-Lab/cheminformatics-microservice/commit/7e2e0632f22f1bccee02dcbed387a6c67db8b3cc))
 * add test workflow ([d484b9d](https://github.com/Steinbeck-Lab/cheminformatics-microservice/commit/d484b9d347b967883cc9c121f4ced6f6e7b63501))
@@ -884,7 +884,7 @@
 
 ### Features
 
-* add SRU, Murko framework and implement COCONUT related descriptors ([abf9991](https://github.com/Steinbeck-Lab/cheminformatics-microservice/commit/abf9991815adbc98c48a0c1f19fdf1e0d162d326))
+* add SRU, Murcko framework and implement COCONUT related descriptors ([abf9991](https://github.com/Steinbeck-Lab/cheminformatics-microservice/commit/abf9991815adbc98c48a0c1f19fdf1e0d162d326))
 
 
 ### Bug Fixes

README.md

@@ -1,4 +1,4 @@
-# Cheminformatics Microservice
+# Cheminformatics Microservice & UI
 
 <p align="center">
   <a href="https://api.naturalproducts.net/" target="_blank">
@@ -17,6 +17,8 @@
   <a href="https://www.tensorflow.org"><img src="https://img.shields.io/badge/TensorFlow-2.10.1-FF6F00.svg?style=flat&logo=tensorflow" alt="tensorflow"></a>
   <a href="https://cdk.github.io"><img src="https://img.shields.io/badge/Powered%20by-CDK-blue.svg?style=flat&logo=chem" alt="Powered by CDK"></a>
   <a href="https://www.rdkit.org/"><img src="https://img.shields.io/badge/Powered%20by-RDKit-3838ff.svg?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAFVBMVEXc3NwUFP8UPP9kZP+MjP+0tP////9ZXZotAAAAAXRSTlMAQObYZgAAAAFiS0dEBmFmuH0AAAAHdElNRQfmAwsPGi+MyC9RAAAAQElEQVQI12NgQABGQUEBMENISUkRLKBsbGwEEhIyBgJFsICLC0iIUdnExcUZwnANQWfApKCK4doRBsKtQFgKAQC5Ww1JEHSEkAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wMy0xMVQxNToyNjo0NyswMDowMDzr2J4AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDMtMTFUMTU6MjY6NDcrMDA6MDBNtmAiAAAAAElFTkSuQmCC" alt="RDKit badge"></a>
+  <a href="https://reactjs.org/"><img src="https://img.shields.io/badge/React-18.2.0-61DAFB.svg?style=flat&logo=react" alt="React"></a>
+  <a href="https://tailwindcss.com/"><img src="https://img.shields.io/badge/Tailwind%20CSS-3.3.5-38B2AC.svg?style=flat&logo=tailwind-css" alt="Tailwind CSS"></a>
 </p>
 
 <p align="center">
@@ -26,7 +28,7 @@
 </p>
 
 <p align="center">
-  <a href="https://fastapi.tiangolo.com/"><img src="https://img.shields.io/badge/Framework-FastAPI-blue?style" alt="framework"></a>
+  <a href="https://fastapi.tiangolo.com/"><img src="https://img.shields.io/badge/Backend-FastAPI-blue?style" alt="backend framework"></a>
   <a href="https://api.naturalproducts.net/v1/docs#/"><img src="https://img.shields.io/badge/docs-fastapi-blue" alt="FastAPI Documentation"></a>
   <a href="https://cheminformatics-microservice.readthedocs.io/en/latest/?badge=latest"><img src="https://readthedocs.org/projects/cheminformatics-microservice/badge/?version=latest" alt="Documentation Status"></a>
   <a href="https://codecov.io/gh/Steinbeck-Lab/cheminformatics-microservice"><img src="https://codecov.io/gh/Steinbeck-Lab/cheminformatics-microservice/graph/badge.svg?token=5BIQJPNCBA" alt="codecov"></a>
@@ -35,27 +37,101 @@
 
 ## 🌐 Overview
 
-A set of microservices to support cheminformatics through API calls. It primarily works with SMILES-based inputs and offers functionalities such as:
+A comprehensive cheminformatics solution consisting of:
 
-- Translating between different machine-readable representations
-- Calculating Natural Product (NP) likeliness scores
-- Visualizing chemical structures
-- Generating descriptors
+1. **Backend Microservices API** that provides cheminformatics functionality through API calls:
+   - Translating between different machine-readable representations
+   - Calculating Natural Product (NP) likeliness scores
+   - Visualizing chemical structures
+   - Generating descriptors
+   - Hosting instances of [DECIMER](https://github.com/Kohulan/DECIMER-Image_Transformer) for optical chemical structure recognition
+
+2. **Modern React Frontend** that provides an intuitive user interface for:
+   - Chemical structure analysis and validation
+   - Format conversion (SMILES, InChI, IUPAC, etc.)
+   - 2D and 3D molecular visualization
+   - Optical Chemical Structure Recognition (OCSR)
+   - Molecular property calculation
 
-Additionally, it hosts instances of:
-- [DECIMER](https://github.com/Kohulan/DECIMER-Image_Transformer): A deep learning model for optical chemical structure recognition
 > Important Note: STOUT (Smiles-TO-iUpac-Translator) is currently unavailable due to legal issues.
 
 ## 📚 Documentation
 
+### Backend API
+
 Comprehensive documentation is available at: [https://docs.api.naturalproducts.net/](https://docs.api.naturalproducts.net/)
 
 ### API Swagger Docs
 
 - Production: [https://api.naturalproducts.net/latest/docs](https://api.naturalproducts.net/latest/docs)
 - Development: [https://dev.api.naturalproducts.net/latest/docs](https://dev.api.naturalproducts.net/latest/docs)
 
-## 💻 Installation
+## ⚛️ Frontend Application
+
+The frontend application provides a modern, user-friendly interface to the cheminformatics microservices.
+
+### Key Features
+
+- **Chemical Analysis Tools:**
+  - Structure validation and standardization
+  - Molecular descriptor calculation
+  - Stereoisomer generation
+  - Natural product likeness scoring
+  - Functional group detection (Ertl)
+  - Tautomer standardization
+  - HOSE code generation
+  - Tanimoto similarity calculation
+
+- **Format Conversion:**
+  - SMILES to various chemical formats (InChI, InChIKey, SELFIES, etc.)
+  - IUPAC name to SMILES conversion
+  - 2D/3D coordinate generation (Molblock)
+
+- **Molecule Depiction:**
+  - 2D molecule visualization with customizable settings
+  - Interactive 3D molecule visualization
+  - Batch depiction for multiple molecules
+
+- **OCSR (Optical Chemical Structure Recognition):**
+  - Convert chemical structure images to SMILES notation
+
+### Technical Stack
+
+- **React 18:** Core UI library
+- **React Router 6:** Client-side routing
+- **Tailwind CSS:** Utility-first styling
+- **Framer Motion:** Enhanced UI animations
+- **Axios:** API communication
+- **React Dropzone:** File upload handling
+
+### Frontend Architecture
+
+- **Component-Based Design:** Modular components for reusability and maintainability
+- **Service Layer:** Specialized services for API interaction
+- **Context API:** Global state management for theme, recent molecules, etc.
+- **Responsive Design:** Mobile-first approach with responsive layouts
+- **Dark/Light Theme:** Full theme support with Tailwind dark mode
+
+### Installation & Setup (Frontend)
+
+```bash
+# Clone the repository
+git clone https://github.com/Steinbeck-Lab/cheminformatics-microservice.git
+cd cheminformatics-microservice/frontend
+
+# Install dependencies
+npm install
+
+# Start development server
+npm start
+
+# Build for production
+npm run build
+```
+
+For detailed frontend configuration options, see the [Frontend Documentation](https://docs.api.naturalproducts.net/frontend.html).
+
+## 💻 Backend Installation
 
 You can run Cheminformatics Microservice in multiple ways:
 

app/main.py

@@ -32,22 +32,26 @@ def create_app_metadata() -> Dict:
         "contact": {
             "name": "Steinbeck Lab",
             "url": "https://cheminf.uni-jena.de",
-            "email": "[email protected]"
+            "email": "[email protected]",
         },
         "license_info": {
             "name": "CC BY 4.0",
-            "url": "https://creativecommons.org/licenses/by/4.0"
+            "url": "https://creativecommons.org/licenses/by/4.0",
         },
-        "openapi_tags": [{
-            "name": "Chemical Analysis",
-            "description": "Advanced molecular structure analysis and property prediction"
-        }, {
-            "name": "Visualization",
-            "description": "High-fidelity chemical structure rendering and visualization"
-        }, {
-            "name": "Conversion",
-            "description": "Sophisticated molecular format transformation tools"
-        }]
+        "openapi_tags": [
+            {
+                "name": "Chemical Analysis",
+                "description": "Advanced molecular structure analysis and property prediction",
+            },
+            {
+                "name": "Visualization",
+                "description": "High-fidelity chemical structure rendering and visualization",
+            },
+            {
+                "name": "Conversion",
+                "description": "Sophisticated molecular format transformation tools",
+            },
+        ],
     }
 
 

app/modules/coconut/descriptors.py

@@ -7,7 +7,7 @@
 from app.modules.npscorer import get_np_score
 from app.modules.toolkits.cdk_wrapper import get_CDK_descriptors
 from app.modules.toolkits.cdk_wrapper import get_CDK_MolecularFormula
-from app.modules.toolkits.cdk_wrapper import get_murko_framework
+from app.modules.toolkits.cdk_wrapper import get_murcko_framework
 from app.modules.toolkits.helpers import parse_input
 from app.modules.toolkits.rdkit_wrapper import get_rdkit_descriptors
 from app.modules.tools.sugar_removal import get_sugar_info
@@ -59,7 +59,7 @@ def get_COCONUT_descriptors(smiles: str, toolkit: str) -> Union[Dict[str, float]
 
         cdkMolecule = parse_input(smiles, "cdk", False)
         hasLinearSugar, hasCircularSugars = get_sugar_info(cdkMolecule)
-        framework = get_murko_framework(cdkMolecule)
+        framework = get_murcko_framework(cdkMolecule)
         molFormula = get_CDK_MolecularFormula(cdkMolecule)
 
         CombinedDescriptors = list(Descriptors)
@@ -93,7 +93,7 @@ def get_COCONUT_descriptors(smiles: str, toolkit: str) -> Union[Dict[str, float]
         {
             "linear_sugars": hasLinearSugar,
             "circular_sugars": hasCircularSugars,
-            "murko_framework": framework,
+            "murcko_framework": framework,
             "nplikeness": nplikeliness,
             "molecular_formula": str(molFormula),
         },

app/modules/coconut/preprocess.py

@@ -158,17 +158,17 @@ def get_representations(molecule: Chem.Mol) -> dict:
         molecule (Chem.Mol): An RDKit molecule object representing the molecular structure.
 
     Returns:
-        dict: Dictionary containing InChI, InChi Key, and Murko framework.
+        dict: Dictionary containing InChI, InChi Key, and Murcko framework.
     """
     if molecule:
         InChI = Chem.inchi.MolToInchi(molecule)
         InChI_Key = Chem.inchi.MolToInchiKey(molecule)
         cdkMolecule = parse_input(Chem.MolToSmiles(molecule), "cdk", False)
-        Murko = cdk.get_murko_framework(cdkMolecule)
+        Murcko = cdk.get_murcko_framework(cdkMolecule)
         return {
             "standard_inchi": InChI,
             "standard_inchikey": InChI_Key,
-            "murko_framework": Murko,
+            "Murcko_framework": Murcko,
         }
     else:
         return {"Error": "Check input SMILES"}