[V0_FILE]typescriptreact:file="app/page.tsx" import { DescriptorCalculator } from "@/components/descriptor-calculator"; export default function Home() { return (

{/* Header */}

{/* Hero Section */}

{/* Background Image */}

{/* Optional background image or gradient could go here */}

{/* Content */}

{/* Heading with neutral accent */}

Molecular Descriptor Calculator

{/* Description */}

Upload your CSV with SMILES strings and generate powerful molecular descriptors effortlessly.

{/* Call to Action */}

Get Started

{/* Descriptor Calculator Section */}

); } [V0_FILE]typescriptreact:file="lib/file-validator.ts" export async function validateCsvFile(file: File): Promise { // Check file type if (!file.name.endsWith(".csv")) { throw new Error("Please upload a CSV file") } // Check file size (rough estimate for 50,000 entries) const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10MB as a reasonable limit if (file.size > MAX_FILE_SIZE) { throw new Error("File size exceeds the maximum limit") } // Read the file to check for SMILES column return new Promise((resolve, reject) => { const reader = new FileReader() reader.onload = (e) => { try { const content = e.target?.result as string if (!content) { reject(new Error("Failed to read file content")) return } // Get the header line const lines = content.split("\n") if (lines.length === 0) { reject(new Error("CSV file is empty")) return } const header = lines[0].trim() const columns = header.split(",").map((col) => col.trim().replace(/^"|"$/g, "")) // Check for SMILES column if (!columns.some((col) => col.toUpperCase() === "SMILES")) { reject(new Error('CSV file must contain a "SMILES" column')) return } // Check number of entries (rows) if (lines.length > 50001) { // Header + 50,000 entries reject(new Error("CSV file exceeds the limit of 50,000 entries")) return } resolve() } catch (error) { reject(new Error("Failed to validate CSV file")) } } reader.onerror = () => { reject(new Error("Failed to read the file")) } // Read the first few KB to check the header const slice = file.slice(0, 4096) reader.readAsText(slice) }) } [V0_FILE]typescriptreact:file="components/molecule-structure_placeholder.tsx" isMoved="true" "use client" import { useState, useEffect } from "react" import Image from "next/image" interface MoleculeStructureProps { smiles: string size?: "small" | "medium" | "large" } export function MoleculeStructure({ smiles, size = "small" }: MoleculeStructureProps) { const [imageUrl, setImageUrl] = useState(null) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { const fetchMoleculeImage = async () => { try { setIsLoading(true) setError(null) // This is a placeholder for an actual API call to generate molecule images // In a real application, you would call an API that generates molecule images from SMILES // For example: RDKit, CDK, or a service like PubChem // Simulate API call delay await new Promise((resolve) => setTimeout(resolve, 500)) // For demonstration, we're using a placeholder image // In a real app, you would set the actual image URL from the API response setImageUrl(`/placeholder.svg?height=150&width=150&text=${encodeURIComponent(smiles.substring(0, 10))}`) } catch (err) { setError("Failed to load molecule structure") console.error(err) } finally { setIsLoading(false) } } if (smiles) { fetchMoleculeImage() } }, [smiles]) // Size mappings const dimensions = { small: { width: 100, height: 100 }, medium: { width: 150, height: 150 }, large: { width: 200, height: 200 }, } const { width, height } = dimensions[size] if (isLoading) { return

} if (error) { return

Error loading structure

} return imageUrl ? ( {`Molecular

) : null } [V0_FILE]typescriptreact:file="app/api/calculate-descriptors/route.ts" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { // Get the form data from the request const formData = await request.formData() // Forward the request to the actual API endpoint const response = await fetch("https://molecular-descriptor.own3.aganitha.ai/calculate-descriptors", { method: "POST", body: formData, }) if (!response.ok) { throw new Error(`API responded with status: ${response.status}`) } // Get the response data const data = await response.text() // Return the response return new NextResponse(data, { status: 200, headers: { "Content-Type": "application/json", }, }) } catch (error) { console.error("API proxy error:", error) return new NextResponse(JSON.stringify({ error: "Failed to fetch data from API" }), { status: 500, headers: { "Content-Type": "application/json", }, }) } } export const config = { api: { bodyParser: false, }, } [V0_FILE]typescriptreact:file="components/descriptor-calculator.tsx" isQuickEdit="true" "use client" import { useState, useRef } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Label } from "@/components/ui/label" import { Alert, AlertDescription } from "@/components/ui/alert" import { AlertCircle, FileUp, Loader2 } from "lucide-react" import { ResultsTable } from "@/components/results-table" import { validateCsvFile } from "@/lib/file-validator" export function DescriptorCalculator() { const [file, setFile] = useState(null) const [descriptorType, setDescriptorType] = useState("1D/2D") const [method, setMethod] = useState("RDKit") const [filterOption, setFilterOption] = useState("None") const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const [results, setResults] = useState(null) const [columns, setColumns] = useState([]) const fileInputRef = useRef(null) const handleFileChange = async (e: React.ChangeEvent) => { setError(null) setResults(null) if (e.target.files && e.target.files.length > 0) { const selectedFile = e.target.files[0] try { await validateCsvFile(selectedFile) setFile(selectedFile) } catch (err) { setFile(null) setError(err instanceof Error ? err.message : String(err)) if (fileInputRef.current) { fileInputRef.current.value = "" } } } } const handleSubmit = async () => { if (!file) { setError("Please upload a CSV file first.") return } setIsLoading(true) setError(null) setResults(null) try { const formData = new FormData() formData.append("file", file) formData.append("descriptor_type", descriptorType) formData.append("method", method) formData.append("filter_option", filterOption) const response = await fetch("/api/calculate-descriptors", { method: "POST", body: formData, }) if (!response.ok) { throw new Error(`API error: ${response.status}`) } const responseText = await response.text() let parsedData try { parsedData = JSON.parse(responseText) } catch { throw new Error("Failed to parse API response") } if (Array.isArray(parsedData) && parsedData.length > 0) { const columnNames = Object.keys(parsedData[0]) setColumns(columnNames) const chunkSize = 100 const processedResults = [] for (let i = 0; i < Math.min(parsedData.length, 1000); i += chunkSize) { const chunk = parsedData.slice(i, i + chunkSize) processedResults.push(...chunk) if (i + chunkSize < parsedData.length) { await new Promise((resolve) => setTimeout(resolve, 0)) } } setResults(processedResults) } else { throw new Error("No molecules pass the filter") } } catch (err) { setError(err instanceof Error ? err.message : String(err)) } finally { setIsLoading(false) } } return (

{/* File Upload */}

Upload CSV File (Max 50,000 entries)

{/* Dropdowns */}

Descriptor Type

Calculation Method

Filter Option

{/* Submit Button */}

{/* Error Alert */} {error && ( {error} )} {/* Results Table */} {results && results.length > 0 && (

)}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" import type React from "react" import "@/app/globals.css" import { ThemeProvider } from "@/components/theme-provider" import type { Metadata } from "next" import "./globals.css" export const metadata: Metadata = { title: "Chemical Descriptor Calculator", description: "Calculate molecular descriptors from SMILES strings", generator: "v0.dev", } export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {/* Add AG Grid styles */} {children} ) } [V0_FILE]typescriptreact:file="lib/export-utils.ts" // export-utils.ts import * as XLSX from "xlsx/dist/xlsx.full.min.js" export function downloadCSV(data: any[], columns: string[], filename = "results.csv") { const csvContent = columns.join(",") + "\n" + data .map((row) => columns .map((col) => { let value = row[col] ?? "" if (col === "Structure" && typeof value === "string" && value.startsWith("data:image")) { const base64 = value.split(",")[1] || "" return JSON.stringify(base64) } return JSON.stringify(value) }) .join(",") ) .join("\n") const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" }) const url = URL.createObjectURL(blob) const link = document.createElement("a") link.href = url link.setAttribute("download", filename) document.body.appendChild(link) link.click() document.body.removeChild(link) } [V0_FILE]typescriptreact:file="components/results-table.tsx" "use client" import { useState } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { ChevronUp, ChevronDown, Download } from "lucide-react" import { downloadCSV } from "@/lib/export-utils" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" interface ResultsTableProps { results: any[] columns: string[] } export function ResultsTable({ results, columns }: ResultsTableProps) { const [currentPage, setCurrentPage] = useState(1) const [columnFilters, setColumnFilters] = useState<{ [key: string]: string }>({}) const [sortConfig, setSortConfig] = useState<{ key: string | null; direction: "asc" | "desc" | null }>({ key: null, direction: null, }) const [expandedImage, setExpandedImage] = useState<{ rowIndex: number; colIndex: number } | null>(null) const [isExporting, setIsExporting] = useState(false) const [fileName, setFileName] = useState("") const itemsPerPage = 10 const displayColumns = columns.filter((col) => !col.includes("fingerprint") && !col.includes("Fingerprint")) const handleSort = (key: string) => { setSortConfig((prev) => ({ key, direction: prev.key === key && prev.direction === "asc" ? "desc" : prev.key === key && prev.direction === "desc" ? null : "asc", })) setCurrentPage(1) } const filteredResults = results.filter((result) => displayColumns.every((col) => { const filterValue = columnFilters[col]?.toLowerCase() ?? "" const cellValue = result[col] return !filterValue || cellValue?.toString().toLowerCase().includes(filterValue) }) ) const sortedResults = [...filteredResults].sort((a, b) => { if (!sortConfig.key) return 0 const aValue = a[sortConfig.key] const bValue = b[sortConfig.key] const isNumeric = !isNaN(Number(aValue)) && !isNaN(Number(bValue)) if (isNumeric) { return sortConfig.direction === "asc" ? aValue - bValue : bValue - aValue } return sortConfig.direction === "asc" ? String(aValue).localeCompare(String(bValue)) : String(bValue).localeCompare(String(aValue)) }) const totalPages = Math.ceil(sortedResults.length / itemsPerPage) const paginatedResults = sortedResults.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage) const handleExport = () => { setIsExporting(true) const name = prompt("Enter filename (without extension):", "results") || "results" setFileName(name) downloadCSV(filteredResults, displayColumns, `${name}.csv`) setIsExporting(false) } return (

{/* Export Controls */}

{/* Table */}

{displayColumns.map((column) => ( handleSort(column)} style={{ minWidth: column === "SMILES" || column === "Structure" ? "200px" : "120px" }} >

{column} {sortConfig.key === column && sortConfig.direction !== null ? ( sortConfig.direction === "asc" ? ( ) : ( ) ) : (

)}

{column !== "Structure" && ( { setColumnFilters((prev) => ({ ...prev, [column]: e.target.value })) setCurrentPage(1) }} className="text-sm h-7 w-32 py-1 px-2" onClick={(e) => e.stopPropagation()} /> )} ))} {paginatedResults.length > 0 ? ( paginatedResults.map((result, rowIndex) => ( {displayColumns.map((column, colIndex) => ( {column === "Structure" ? ( result[column]?.startsWith("data:image") ? (

setExpandedImage( expandedImage?.rowIndex === rowIndex && expandedImage?.colIndex === colIndex ? null : { rowIndex, colIndex } ) } /> ) : ( No image available ) ) : (

{typeof result[column] === "object" ? JSON.stringify(result[column]).substring(0, 50) + "..." : String(result[column]).length > 50 ? String(result[column]).substring(0, 50) + "..." : result[column]}

)} ))} )) ) : ( No molecules pass the filter. )}

{/* Pagination */} {totalPages > 1 && ( setCurrentPage(Math.max(1, currentPage - 1))} disabled={currentPage === 1} className="cursor-pointer" /> {Array.from({ length: totalPages }, (_, i) => i + 1) .slice(Math.max(0, currentPage - 3), Math.min(totalPages, currentPage + 2)) .map((page) => ( setCurrentPage(page)} isActive={currentPage === page} className="cursor-pointer" > {page} ))} setCurrentPage(Math.min(totalPages, currentPage + 1))} disabled={currentPage === totalPages} className="cursor-pointer" /> )}

Showing {paginatedResults.length} of {filteredResults.length} results

) }