Merge pull request #571 from Steinbeck-Lab/development

Development

Author: Kohulan

.github/workflows/dev-build.yml

@@ -50,6 +50,8 @@ jobs:
           context: ./frontend
           file: ./frontend/Dockerfile
           push: true
+          build-args: |
+            REACT_APP_API_URL=https://dev.api.naturalproducts.net/latest
           # REACT_APP_API_URL will use the default from frontend/Dockerfile (https://dev.api.naturalproducts.net/latest)
           # If a specific one is needed for this dev build, add build-args here.
           # build-args: |

.github/workflows/prod-build.yml

@@ -1,4 +1,4 @@
-# This worklflow will perform following actions when a release is published:
+# This workflow will perform the following actions when a release is published:
 # - Fetch Latest release.
 # - Build the latest docker image in production.
 # - Push the docker image to Github Artifact Registry-Prod.
@@ -7,15 +7,15 @@
 #   - name: Nisha Sharma
 #   - email: [email protected]
 
-name : Prod Build, Test and Publish
+name: Prod Build, Test and Publish
 
 on:
   release:
     types: [published]
 
 env:
-  DOCKER_HUB_USERNAME : ${{ secrets.DOCKER_USERNAME  }}
-  DOCKER_HUB_PASSWORD : ${{ secrets.DOCKER_PASSWORD  }}
+  DOCKER_HUB_USERNAME: ${{ secrets.DOCKER_USERNAME }}
+  DOCKER_HUB_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
   REPOSITORY_NAME: cheminformatics-microservice
   REPOSITORY_NAMESPACE: nfdi4chem
 
@@ -35,12 +35,11 @@ jobs:
           exclude_types: "draft"
           view_top: 10
 
-      - name: "Print release name"
-        run: |
-          echo "tag_name: ${{ steps.fetch-latest-release.outputs.tag_name }}"
+      - name: Print release name
+        run: echo "tag_name: ${{ steps.fetch-latest-release.outputs.tag_name }}"
 
       - name: Log in to Docker Hub
-        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
+        uses: docker/login-action@v4
         with:
           username: ${{ env.DOCKER_HUB_USERNAME }}
           password: ${{ env.DOCKER_HUB_PASSWORD }}
@@ -76,7 +75,7 @@ jobs:
           file: ./frontend/Dockerfile
           push: true
           build-args: |
-            REACT_APP_API_URL=/api/latest # For prod Traefik setup
+            REACT_APP_API_URL=https://api.naturalproducts.net/latest
           tags: |
             ${{ env.REPOSITORY_NAMESPACE }}/${{ env.REPOSITORY_NAME }}:app-${{ steps.fetch-latest-release.outputs.tag_name }}
-            ${{ env.REPOSITORY_NAMESPACE }}/${{ env.REPOSITORY_NAME }}:app
+            ${{ env.REPOSITORY_NAMESPACE }}/${{ env.REPOSITORY_NAME }}:app

frontend/src/components/chem/AllFiltersView.jsx

@@ -23,7 +23,7 @@ const AllFiltersView = () => {
   const [error, setError] = useState(null);
   const [results, setResults] = useState([]);
   const [copied, setCopied] = useState(false);
-  const [filterOperator, setFilterOperator] = useState("AND"); // Default to AND logic
+  const [filterOperator, setFilterOperator] = useState("OR"); // Default to OR logic
   const [showInfoModal, setShowInfoModal] = useState(false); // State for showing info modal
   const { addRecentMolecule } = useAppContext(); // Assuming context provides this function
 
@@ -800,9 +800,8 @@ const AllFiltersView = () => {
         </div>
       )}
 
-      {/* Initial State / Info Box */}
-      {/* Show only if not loading, no error, no input has been entered, and no results */}
-      {!loading && !error && !smilesInput.trim() && results.length === 0 && (
+      {/* About Chemical Filters Info Box - Always visible */}
+      {!loading && !error && (
         <div
           className="bg-blue-50 dark:bg-blue-900 dark:bg-opacity-20 border border-blue-200 dark:border-blue-800 rounded-lg p-6 shadow"
           role="complementary"

frontend/src/components/common/Header.jsx

@@ -126,10 +126,10 @@ const Header = () => {
   const logoDark = "https://raw.githubusercontent.com/Steinbeck-Lab/cheminformatics-microservice/main/public/img/logo_small_inverted.png";
   const logoLight = "https://raw.githubusercontent.com/Steinbeck-Lab/cheminformatics-microservice/main/public/img/logo_small.png";
 
-  // Calculate header background classes based on scroll state
+  // Calculate header background classes based on scroll state - always white in light mode
   const headerBgClasses = isScrolled
-    ? `backdrop-blur-lg ${isDarkMode ? 'bg-slate-900/90' : 'bg-white/90'} shadow-lg ${isDarkMode ? 'shadow-slate-900/30' : 'shadow-slate-200/50'}`
-    : `backdrop-blur-sm ${isDarkMode ? 'bg-slate-900/80' : 'bg-white/80'} shadow-md ${isDarkMode ? 'shadow-slate-900/20' : 'shadow-slate-200/30'}`;
+    ? `backdrop-blur-lg ${isDarkMode ? 'bg-slate-900/90' : 'bg-white'} shadow-lg ${isDarkMode ? 'shadow-slate-900/30' : 'shadow-slate-200/50'}`
+    : `backdrop-blur-sm ${isDarkMode ? 'bg-slate-900/80' : 'bg-white'} shadow-md ${isDarkMode ? 'shadow-slate-900/20' : 'shadow-slate-200/30'}`;
 
   return (
     <motion.header
@@ -295,7 +295,7 @@ const Header = () => {
             className={`md:hidden absolute top-full left-0 right-0 overflow-hidden backdrop-blur-md ${
               isDarkMode 
                 ? 'bg-slate-900/95 border-t border-slate-800/40 shadow-lg shadow-slate-900/50' 
-                : 'bg-white/95 border-t border-slate-200/70 shadow-lg shadow-slate-200/50'
+                : 'bg-white border-t border-slate-200/70 shadow-lg shadow-slate-200/50'
             }`}
             variants={mobileMenuVariants}
             initial="hidden"

frontend/src/components/depict/Depict2DMultiView.jsx

@@ -337,31 +337,52 @@ const BatchDepictionView = () => {
   };
 
   // Download a single depiction image
-  const downloadSingleDepiction = (depiction) => {
-    // Check if depictService and the method exist before proceeding
-    if (!depictService || typeof depictService.get2DDepictionUrl !== 'function') {
-      console.error("depictService.get2DDepictionUrl is not available for single download.");
-      setError("Depiction service is not configured correctly.");
-      return;
+  const downloadSingleDepiction = async (depiction) => {
+    try {
+      // Check if depictService and the method exist before proceeding
+      if (!depictService || typeof depictService.get2DDepictionUrl !== 'function') {
+        console.error("depictService.get2DDepictionUrl is not available for single download.");
+        setError("Depiction service is not configured correctly.");
+        return;
+      }
+      
+      setLoading(true); // Show loading indicator while downloading
+      const rotation = rotations[depiction.id] || 0;
+      
+      // Generate URL with current options and selected download format
+      const options = {
+        toolkit, width, height, rotate: rotation,
+        CIP: toolkit === 'cdk' ? showCIP : undefined,
+        unicolor: useUnicolor, highlight: highlight || undefined,
+        format: downloadFormat // Use selected format for single download too
+      };
+      
+      // Get the URL for fetching the image
+      const url = depictService.get2DDepictionUrl(depiction.smiles, options);
+      
+      // Fetch the image data as a blob
+      const response = await fetch(url);
+      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+      
+      const blob = await response.blob();
+      const downloadUrl = URL.createObjectURL(blob);
+      
+      // Trigger download using an anchor tag
+      const a = document.createElement('a');
+      a.href = downloadUrl;
+      a.download = `${depiction.title.replace(/[^a-z0-9]/gi, '_').toLowerCase() || 'molecule'}.${downloadFormat}`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      
+      // Clean up the blob URL
+      URL.revokeObjectURL(downloadUrl);
+    } catch (err) {
+      console.error("Error downloading single depiction:", err);
+      setError(`Error downloading depiction: ${err.message || 'Unknown error'}`);
+    } finally {
+      setLoading(false); // Hide loading indicator
     }
-    const rotation = rotations[depiction.id] || 0;
-    // Generate URL with current options and selected download format
-    const options = {
-      toolkit, width, height, rotate: rotation,
-      CIP: toolkit === 'cdk' ? showCIP : undefined,
-      unicolor: useUnicolor, highlight: highlight || undefined,
-      format: downloadFormat // Use selected format for single download too
-    };
-    // Use a potentially different URL for download if format differs
-    const url = depictService.get2DDepictionUrl(depiction.smiles, options);
-
-    // Trigger download using an anchor tag
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `${depiction.title.replace(/[^a-z0-9]/gi, '_').toLowerCase() || 'molecule'}.${downloadFormat}`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
   };
 
 
@@ -722,6 +743,7 @@ const BatchDepictionView = () => {
                     className="p-1.5 rounded-md text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors focus:outline-none focus:ring-1 focus:ring-blue-500"
                     title={`Download ${downloadFormat.toUpperCase()}`}
                     aria-label={`Download ${depiction.title} as ${downloadFormat.toUpperCase()}`}
+                    disabled={loading}
                   >
                     <HiOutlineDownload className="h-5 w-5" />
                   </button>

frontend/src/components/depict/Depict3DView.jsx

@@ -430,12 +430,33 @@ const Depict3DView = ({ isActive = true }) => {
 
   // Handler to reset the camera view
   const handleResetView = () => {
-    if (!viewerRef.current || !viewerInitialized) return;
+    if (!viewerRef.current || !viewerInitialized || !modelRef.current) return;
     try {
+      // Stop spinning if active
+      if (spin) {
+        viewerRef.current.spin(false);
+      }
+      
+      // Make sure we have a valid model before resetting
+      if (viewerRef.current.getModel() && modelRef.current) {
+        // Reset the view more safely
+        viewerRef.current.setView(new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]), 
+                                  100); // Use identity matrix
+      }
+      
+      // Center the molecule
       viewerRef.current.zoomTo();
+      
+      // Re-apply spin if needed
+      if (spin) {
+        viewerRef.current.spin(spin);
+      }
+      
+      // Render the updated view
       viewerRef.current.render();
     } catch (e) {
-      console.warn("Error resetting view:", e);
+      console.error("Error resetting view:", e);
+      setError(`Failed to reset view: ${e.message}`);
     }
   };
 

frontend/src/components/depict/StructureDrawView.jsx

@@ -3,7 +3,6 @@ import {
   HiOutlineClipboardCopy, 
   HiOutlineCheck, 
   HiOutlineExclamationCircle,
-  HiOutlineBeaker,
   HiOutlineInformationCircle,
   HiOutlineRefresh,
   HiOutlinePencil,
@@ -383,7 +382,7 @@ const StructureDrawView = () => {
   };
 
   return (
-    <div className="flex flex-col gap-6 p-4 md:p-6 bg-gradient-to-br from-sky-50 to-indigo-100 dark:from-gray-900 dark:to-slate-900 min-h-screen">
+    <div className="flex flex-col gap-6 p-4 md:p-6 bg-white dark:bg-gray-900 min-h-screen">
       {/* Header with animated background */}
       <div className="bg-gradient-to-r from-blue-600 to-purple-700 dark:from-blue-700 dark:to-purple-900 rounded-xl shadow-xl overflow-hidden relative">
         {/* Animated background elements */}
@@ -393,20 +392,7 @@ const StructureDrawView = () => {
           <div className="absolute left-1/3 top-1/2 w-32 h-32 rounded-full bg-white transform -translate-y-1/2"></div>
         </div>
 
-        <div className="relative p-8 md:p-10 flex flex-col md:flex-row items-center justify-between gap-6">
-          {/* Title and description */}
-          <div className="text-white space-y-2 text-center md:text-left">
-            <h1 className="text-3xl md:text-4xl font-bold">Molecular Structure Editor</h1>
-            <p className="text-blue-100 dark:text-blue-200 opacity-90 max-w-xl">
-              Draw, edit, and convert chemical structures
-            </p>
-          </div>
-          
-          {/* Decorative icon */}
-          <div className="hidden md:flex items-center justify-center bg-white/10 backdrop-blur-sm p-6 rounded-full w-24 h-24 border border-white/20 shadow-lg">
-            <HiOutlineBeaker className="w-12 h-12 text-white" />
-          </div>
-        </div>
+        
       </div>
 
       {/* Copy Modal - For fallback copying */}

frontend/src/components/depict/StructureVisualizerView.jsx

@@ -172,7 +172,7 @@ const StructureVisualizerView = () => {
   };
 
   return (
-    <div className="flex flex-col gap-6 p-4 md:p-6 bg-gradient-to-br from-sky-50 to-indigo-100 dark:from-gray-900 dark:to-slate-900 min-h-screen">
+    <div className="flex flex-col gap-6 p-4 md:p-6 bg-white dark:bg-gray-900 min-h-screen">
       {/* Header with animated background */}
 
       {/* Main content area */}

frontend/src/components/tools/StructureGenView.jsx

@@ -106,12 +106,12 @@ const StructureGenView = () => {
               value={formula}
               onChange={(e) => setFormula(e.target.value)}
               placeholder="e.g., C6H6"
-              className="w-full form-control text-sm" // Use adaptive form-control
+              className="w-full form-control text-sm text-[var(--text-primary)] dark:text-[var(--text-primary)] placeholder-slate-400 dark:placeholder-slate-500" // Enhanced styling for dark mode visibility
               required
             />
             {/* Use adaptive text color */}
             <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
-              Enter a molecular formula (e.g., C6H6, C8H10N4O2). Max 10 heavy atoms.
+              Enter a molecular formula (e.g., C6H6, C8H10). Max 10 heavy atoms.
             </p>
           </div>
 

frontend/src/pages/DepictPage.jsx

@@ -28,9 +28,7 @@ const tabs = [
     name: "2D Depiction",
     component: Depict2DMultiView,
     icon: HiOutlineViewGrid,
-    description: `Generate 2D depictions for multiple molecules at once. 
-                 Enter one SMILES string per line. 
-                 Optional: add a title after each SMILES separated by a space or tab.`,
+    description: "Generate 2D depictions for multiple molecules at once.",
   },
   {
     id: "3d-depiction",