/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useRef, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function DNAFoldingApp() { const [sequence, setSequence] = useState(''); const [foldingResult, setFoldingResult] = useState(null); const [foldingType, setFoldingType] = useState('secondary_structure'); const canvasRef = useRef(null); // DNA Folding Utility Functions const calculateBasePairing = (sequence) => { const complementMap = { 'A': 'T', 'T': 'A', 'C': 'G', 'G': 'C' }; const pairs = []; const sequenceUpper = sequence.toUpperCase(); for (let i = 0; i < sequenceUpper.length; i++) { for (let j = i + 4; j < sequenceUpper.length; j++) { if (complementMap[sequenceUpper[i]] === sequenceUpper[j]) { pairs.push({ start: i, end: j }); } } } return pairs; }; const calculateMinimumFreeEnergy = (sequence) => { // Simplified free energy calculation const baseEnergyValues = { 'AA': -1.0, 'TT': -1.0, 'AT': -0.9, 'TA': -0.9, 'CA': -1.1, 'TG': -1.1, 'GT': -1.1, 'AC': -1.1 }; let totalEnergy = 0; const sequenceUpper = sequence.toUpperCase(); for (let i = 0; i < sequenceUpper.length - 1; i++) { const dinucleotide = sequenceUpper.slice(i, i + 2); totalEnergy += baseEnergyValues[dinucleotide] || 0; } return totalEnergy; }; const visualizeFoldingStructure = (pairs) => { const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); // Clear previous drawing ctx.clearRect(0, 0, canvas.width, canvas.height); // Set up drawing parameters ctx.strokeStyle = '#3498db'; ctx.lineWidth = 2; // Draw circular representation const centerX = canvas.width / 2; const centerY = canvas.height / 2; const radius = Math.min(centerX, centerY) - 20; // Draw base circle ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI); ctx.stroke(); // Draw base pairing connections pairs.forEach(pair => { const startAngle = (pair.start / sequence.length) * 2 * Math.PI; const endAngle = (pair.end / sequence.length) * 2 * Math.PI; const x1 = centerX + radius * Math.cos(startAngle); const y1 = centerY + radius * Math.sin(startAngle); const x2 = centerX + radius * Math.cos(endAngle); const y2 = centerY + radius * Math.sin(endAngle); ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); }); }; const performFoldingAnalysis = () => { if (!sequence) { alert('Please enter a DNA/RNA sequence'); return; } let result; switch(foldingType) { case 'secondary_structure': result = calculateBasePairing(sequence); visualizeFoldingStructure(result); break; case 'free_energy': result = calculateMinimumFreeEnergy(sequence); break; default: result = 'Invalid folding analysis type'; } setFoldingResult(result); }; const renderResult = () => { if (!foldingResult) return null; if (foldingType === 'secondary_structure') { return (

Potential Base Pairings: {foldingResult.length}

); } return (

{foldingType === 'free_energy' ? `Minimum Free Energy: ${foldingResult} kcal/mol` : foldingResult}

); }; return (

🧬 DNA Folding Analyzer

Created by Shubham Pandey, Student of KK Wagh College of Engineering

setSequence(e.target.value)}
          rows={4}
        />

<label>Select Folding Analysis Type:</label>
        <select 
          value={foldingType}
          onChange={(e) => setFoldingType(e.target.value)}
        >
          <option value="secondary_structure">Secondary Structure</option>
          <option value="free_energy">Minimum Free Energy</option>
        </select>

<button onClick={performFoldingAnalysis}>Analyze Folding</button>
      </div>

{foldingResult && (
        <div className="result-section">
          <h3>Folding Analysis Result</h3>
          {renderResult()}
        </div>
      )}

<div className="analysis-notes">
        <h4>Notes on DNA Folding:</h4>
        <ul>
          <li>Secondary structure shows potential base pairings</li>
          <li>Free energy indicates structural stability</li>
          <li>Lower free energy suggests more stable structure</li>
          <li>Visualization is a simplified representation</li>
        </ul>
      </div>

<a 
        href={import.meta.url.replace("esm.town", "val.town")} 
        target="_top" 
        className="source-link"
      >
        View Source
      </a>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<DNAFoldingApp />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  return new Response(`
    <html>
      <head>
        <title>DNA Folding Analyzer</title>
        <style>${css}</style>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `, {
    headers: { "content-type": "text/html" }
  });
}

const css = `
body {
  font-family: 'Arial', sans-serif;
  background-color: #f0f4f8;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.dna-folding-app {
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
  padding: 30px;
  text-align: center;
}

.creator-credit {
  font-size: 0.8em;
  color: #7f8c8d;
  margin-bottom: 15px;
  font-style: italic;
}

h2 {
  color: #2c3e50;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.input-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #bdc3c7;
  border-radius: 6px;
  resize: vertical;
  min-height: 100px;
}

label {
  text-align: left;
  color: #34495e;
  font-weight: 500;
}

select {
  padding: 12px;
  border: 1px solid #bdc3c7;
  border-radius: 6px;
  font-size: 16px;
}

button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #2980b9;
}

.result-section {
  background-color: #f1f5f8;
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
  word-break: break-all;
}

.result-details {
  font-size: 16px;
  color: #2c3e50;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center;
}

canvas {
  max-width: 100%;
  height: auto;
}

.analysis-notes {
  background-color: #e8f4f8;
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
  text-align: left;
}

.analysis-notes h4 {
  margin-top: 0;
  color: #2c3e50;
}

.analysis-notes ul {
  padding-left: 20px;
  color: #34495e;
}

.source-link {
  display: block;
  margin-top: 20px;
  color: #7f8c8d;
  text-decoration: none;
  font-size: 0.9em;
}

.source-link:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .dna-folding-app {
    width: 95%;
    margin: 10px;
    padding: 20px;
  }
}
`;</article></body></html>

Scoder