Merge pull request #577 from Steinbeck-Lab/development

fix: update clear InChI logs to frontend

Author: Kohulan

.github/workflows/deploy-doc.yml

@@ -1,4 +1,8 @@
+# GitHub Actions workflow to deploy documentation to GitHub Pages
+
 name: Docs Deployment - GitHub Pages
+
+# Trigger on manual dispatch or push to main branch
 on:
   workflow_dispatch: {}
   push:
@@ -7,6 +11,7 @@ on:
 
 jobs:
   deploy:
+    # Job to build and deploy docs
     runs-on: ubuntu-latest
     permissions:
       pages: write
@@ -15,22 +20,38 @@ jobs:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
     steps:
+      # Checkout repository
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
+
+      # Setup Node.js environment
       - uses: actions/setup-node@v4
         with:
           node-version: 18
           cache: npm
+
+      # Install dependencies
       - run: npm ci
+
+      # Build documentation
       - name: Build
         run: npm run docs:build
+
+      # Debug build output
       - name: Debug - Check build output
         run: ls -l docs/.vitepress/dist
+
+      # Configure GitHub Pages
       - uses: actions/configure-pages@v3
+
+      # Upload static site artifact
       - uses: actions/upload-pages-artifact@v3
         with:
           path: docs/.vitepress/dist
+
+      # Deploy to GitHub Pages
       - name: Deploy
         id: deployment
         uses: actions/deploy-pages@v4
+

.github/workflows/dev-build.yml

@@ -1,4 +1,4 @@
-# This worklflow will perform following actions when the code is pushed to development branch:
+# This workflow will perform following actions when the code is pushed to development branch:
 # - Test linting with pylint.
 # - Fetch Latest release.
 # - Build the latest docker image in development which needs test to pass first.
@@ -34,6 +34,7 @@ jobs:
           username: ${{ env.DOCKER_HUB_USERNAME  }}
           password: ${{ env.DOCKER_HUB_PASSWORD  }}
 
+      # Build and push main API Docker image
       - name: Build and push Docker image
         uses: docker/[email protected]
         with:
@@ -44,8 +45,19 @@ jobs:
             RELEASE_VERSION=dev-latest
           tags: ${{ env.REPOSITORY_NAMESPACE }}/${{ env.REPOSITORY_NAME }}:api-dev
 
+      # Check if frontend files have changed to optimize build process
+      - name: Check for frontend changes
+        uses: dorny/paths-filter@v2
+        id: frontend-changes
+        with:
+          filters: |
+            frontend:
+              - 'frontend/**'
+
+      # Build frontend Docker image only if frontend files changed
       - name: Build and push frontend Docker image
         uses: docker/[email protected]
+        if: steps.frontend-changes.outputs.frontend == 'true'
         with:
           context: ./frontend
           file: ./frontend/Dockerfile

.github/workflows/prod-build.yml

@@ -13,6 +13,8 @@ on:
   release:
     types: [published]
 
+
+# Set global environment variables
 env:
   DOCKER_HUB_USERNAME: ${{ secrets.DOCKER_USERNAME }}
   DOCKER_HUB_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
@@ -21,30 +23,31 @@ env:
 
 jobs:
   push_to_registry:
+    # Job to build and push Docker images
     name: Push Docker images to Docker Hub
     runs-on: ubuntu-latest
     steps:
+      # Checkout code
       - name: Check out the repo
         uses: actions/checkout@v4
-      
+
+      # Fetch latest GitHub release
       - name: Fetch latest release
         id: fetch-latest-release
         uses: InsonusK/[email protected]
         with:
           myToken: ${{ github.token }}
           exclude_types: "draft"
           view_top: 10
-      
-      - name: Print release name
-        run: | 
-          echo "tag_name: ${{ steps.fetch-latest-release.outputs.tag_name }}"
-      
+          
+      # Docker Hub login
       - name: Log in to Docker Hub
         uses: docker/login-action@v4
         with:
           username: ${{ env.DOCKER_HUB_USERNAME }}
           password: ${{ env.DOCKER_HUB_PASSWORD }}
 
+      # Build and push backend image
       - name: Build and push full Docker image
         uses: docker/build-push-action@v4
         with:
@@ -57,6 +60,16 @@ jobs:
             ${{ env.REPOSITORY_NAMESPACE }}/${{ env.REPOSITORY_NAME }}:${{ steps.fetch-latest-release.outputs.tag_name }}
             ${{ env.REPOSITORY_NAMESPACE }}/${{ env.REPOSITORY_NAME }}:latest
 
+      # Check if frontend files have changed to optimize build process
+      - name: Check for frontend changes
+        uses: dorny/paths-filter@v2
+        id: frontend-changes
+        with:
+          filters: |
+            frontend:
+              - 'frontend/**'
+
+      # Build and push lite version of backend image
       - name: Build and push lite Docker image
         uses: docker/build-push-action@v4
         with:
@@ -69,8 +82,10 @@ jobs:
             ${{ env.REPOSITORY_NAMESPACE }}/${{ env.REPOSITORY_NAME }}:${{ steps.fetch-latest-release.outputs.tag_name }}-lite
             ${{ env.REPOSITORY_NAMESPACE }}/${{ env.REPOSITORY_NAME }}:latest-lite
 
+      # Build frontend Docker image only if frontend files changed
       - name: Build and push frontend Docker image
         uses: docker/build-push-action@v4
+        if: steps.frontend-changes.outputs.frontend == 'true'
         with:
           context: ./frontend
           file: ./frontend/Dockerfile

.github/workflows/release-please.yml

@@ -19,7 +19,7 @@ jobs:
   release-please:
     runs-on: ubuntu-latest
     steps:
-      - uses: google-github-actions/release-please-action@v3
+      - uses: google-github-actions/release-please-action@v4
         with:
           release-type: python
           package-name: release-please-action

frontend/src/components/tools/InChIView.jsx

@@ -47,7 +47,9 @@ const InChIOptions = ({ onChange, inchiVersion, setInchiVersion }) => {
   const [t15, setT15] = useState(false);
   const [polymers, setPolymers] = useState(false);
   const [NPZz, setNPZz] = useState(false);
-  const [molecularInorganics, setMolecularInorganics] = useState(inchiVersion === "1.07.3-orgmet");
+  const [molecularInorganics, setMolecularInorganics] = useState(
+    inchiVersion === "1.07.3-orgmet"
+  );
   const [showTautomerism, setShowTautomerism] = useState(true); // Add state for tautomerism visibility
 
   // Additional stereo options
@@ -112,7 +114,8 @@ const InChIOptions = ({ onChange, inchiVersion, setInchiVersion }) => {
     if (NPZz) options.push("NPZz");
 
     // molecularInorganics is only available in the 1.07.3-orgmet version
-    if (molecularInorganics && inchiVersion === "1.07.3-orgmet") options.push("MolecularInorganics");
+    if (molecularInorganics && inchiVersion === "1.07.3-orgmet")
+      options.push("MolecularInorganics");
 
     // Format the options string as required by the API
     const optionsString = options.map((opt) => `-${opt}`).join(" ");
@@ -948,6 +951,7 @@ const InChIView = () => {
         return result;
       } catch (err) {
         console.error("Failed to generate InChI from molfile:", err);
+        setLogMessage(`Failed to generate InChI: ${err.message}`);
         setError(`Failed to generate InChI: ${err.message}`);
         throw err;
       } finally {
@@ -1000,6 +1004,7 @@ const InChIView = () => {
       await generateInChIFromMolfile(molfile);
     } catch (err) {
       console.error("Failed to generate InChI:", err);
+      setLogMessage(`Error: ${err.message}`);
       setError(`Failed to generate InChI: ${err.message}`);
       setIsLoading(false);
     }

frontend/src/components/tools/RInChIView.jsx

@@ -573,12 +573,17 @@ const RInChIView = () => {
   // Generate RInChI from Ketcher
   const generateRInChI = async () => {
     if (!isEditorReady) {
-      setError("Editor not ready. Please try again in a moment.");
+      const errorMsg = "Editor not ready. Please try again in a moment.";
+      setError(errorMsg);
+      setLogMessage(errorMsg);
       return;
     }
 
     if (!rinchiModuleLoaded) {
-      setError("RInChI module not loaded. Please wait or refresh the page.");
+      const errorMsg =
+        "RInChI module not loaded. Please wait or refresh the page.";
+      setError(errorMsg);
+      setLogMessage(errorMsg);
       return;
     }
 
@@ -595,9 +600,10 @@ const RInChIView = () => {
       // Check if there's a reaction
       const hasReaction = await checkForReaction();
       if (!hasReaction) {
-        setError(
-          "No reaction found. Please draw a reaction with reactants and products."
-        );
+        const errorMsg =
+          "No reaction found. Please draw a reaction with reactants and products.";
+        setError(errorMsg);
+        setLogMessage(errorMsg);
         setIsLoading(false);
         return;
       }
@@ -606,9 +612,10 @@ const RInChIView = () => {
       const rxnFile = await executeKetcherCommand("getRxn");
 
       if (!rxnFile || rxnFile.trim() === "") {
-        setError(
-          "Failed to get reaction data. Please ensure you've drawn a valid reaction."
-        );
+        const errorMsg =
+          "Failed to get reaction data. Please ensure you've drawn a valid reaction.";
+        setError(errorMsg);
+        setLogMessage(errorMsg);
         setIsLoading(false);
         return;
       }
@@ -626,6 +633,7 @@ const RInChIView = () => {
       await convertReactionToRinchiAndWriteResults(rxnFile, isEquilibrium);
     } catch (err) {
       console.error("Failed to generate RInChI:", err);
+      setLogMessage(`Failed to generate RInChI: ${err.message}`);
       setError(`Failed to generate RInChI: ${err.message}`);
       setIsLoading(false);
     }
@@ -685,7 +693,9 @@ const RInChIView = () => {
       return result;
     } catch (err) {
       console.error("Failed to generate RInChI from reaction:", err);
-      setError(`Failed to generate RInChI: ${err.message}`);
+      const errorMsg = `Failed to generate RInChI: ${err.message}`;
+      setError(errorMsg);
+      setLogMessage(errorMsg);
       throw err;
     } finally {
       setIsLoading(false);
@@ -707,12 +717,17 @@ const RInChIView = () => {
   // Process RXN/RD file
   const processRxnFile = async () => {
     if (!rxnfileContent.trim()) {
-      setError("Please enter or upload a RXN/RD file");
+      const errorMsg = "Please enter or upload a RXN/RD file";
+      setError(errorMsg);
+      setLogMessage(errorMsg);
       return;
     }
 
     if (!rinchiModuleLoaded) {
-      setError("RInChI module not loaded. Please wait or refresh the page.");
+      const errorMsg =
+        "RInChI module not loaded. Please wait or refresh the page.";
+      setError(errorMsg);
+      setLogMessage(errorMsg);
       return;
     }
 
@@ -731,7 +746,9 @@ const RInChIView = () => {
         !rxnfileContent.includes("$RXN") &&
         !rxnfileContent.includes("$RDFILE")
       ) {
-        setError("Invalid RXN/RD file format. Please check your input.");
+        const errorMsg = "Invalid RXN/RD file format. Please check your input.";
+        setError(errorMsg);
+        setLogMessage(errorMsg);
         setIsLoading(false);
         return;
       }
@@ -754,6 +771,7 @@ const RInChIView = () => {
       }
     } catch (err) {
       console.error("Failed to process RXN/RD file:", err);
+      setLogMessage(`Failed to process RXN/RD file: ${err.message}`);
       setError(`Failed to process RXN/RD file: ${err.message}`);
     } finally {
       setIsLoading(false);
@@ -882,6 +900,7 @@ const RInChIView = () => {
       }
     } catch (err) {
       console.error("Failed to load RInChI:", err);
+      setLogMessage(`Failed to convert RInChI to reaction: ${err.message}`);
       setError(`Failed to convert RInChI to reaction: ${err.message}`);
     } finally {
       setIsLoading(false);
@@ -938,6 +957,9 @@ const RInChIView = () => {
       );
     } catch (err) {
       console.error("Failed to convert RInChI to file:", err);
+      setLogMessage(
+        `Failed to convert RInChI to ${outputFormat} file: ${err.message}`
+      );
       setError(
         `Failed to convert RInChI to ${outputFormat} file: ${err.message}`
       );

ops/docker-compose-dev.yml

@@ -46,6 +46,12 @@ services:
       - "traefik.http.routers.web.rule=Host(`dev.api.naturalproducts.net`)"
       - "traefik.http.routers.web.entrypoints=web"
       - "traefik.http.services.web.loadbalancer.server.port=80"
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:80/"]
+      interval: 1m
+      timeout: 10s
+      retries: 5
+      start_period: 30s
     depends_on:
       - api
     restart: unless-stopped
@@ -66,7 +72,6 @@ services:
     restart: unless-stopped
     networks:
       - cm_network_dev
-
   grafana:
     image: grafana/grafana:latest
     container_name: grafana-dev

ops/docker-compose-prod.yml

@@ -53,6 +53,12 @@ services:
       - "traefik.http.routers.web.rule=Host(`app.naturalproducts.net`) || Host(`api.naturalproducts.net`)" # Catches all other traffic
       - "traefik.http.routers.web.entrypoints=web"
       - "traefik.http.services.web.loadbalancer.server.port=80" # Internal port of the frontend container
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:80/"]
+      interval: 1m
+      timeout: 10s
+      retries: 5
+      start_period: 30s
     depends_on:
       - api
     restart: unless-stopped