/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // Amino Acid Physiochemical Groups (default configuration) const DEFAULT_AA_GROUPS = [ { name: "Positive Charged", key: "positiveCharged", aminoAcids: ["K", "R", "H"], color: "#3498db", // Blue }, { name: "Negative Charged", key: "negativeCharged", aminoAcids: ["D", "E"], color: "#e74c3c", // Red }, { name: "Polar", key: "polar", aminoAcids: ["S", "T", "N", "Q", "G", "C"], color: "#2ecc71", // Green }, { name: "Non-Polar", key: "nonPolar", aminoAcids: ["A", "V", "I", "L", "M", "P"], color: "#f39c12", // Orange }, { name: "Aromatic", key: "aromatic", aminoAcids: ["F", "Y", "W"], color: "#9b59b6", // Purple },]; const ALL_AMINO_ACIDS = "ACDEFGHIKLMNPQRSTVWY".split(""); const EXAMPLE_UNIPROT_IDS = [ "P53_HUMAN", // p53 tumor suppressor "SPIKE_SARS2", // SARS-CoV-2 spike protein "INSR_HUMAN", // Insulin receptor ]; const getSequenceComposition = (sequence, aaGroups) => { // Initialize composition object with all current groups const composition = aaGroups.reduce((acc, group) => { acc[group.key] = 0; return acc; }, {}); // Count amino acids for each group sequence.split("").forEach(aa => { const group = aaGroups.find(g => g.aminoAcids.includes(aa.toUpperCase())); const groupKey = group ? group.key : "other"; composition[groupKey] = (composition[groupKey] || 0) + 1; }); return composition; }; function GroupConfigModal({ groups, onClose, onSave, onAddGroup, onDeleteGroup, }) { const [editingGroups, setEditingGroups] = useState(groups); const [newGroupName, setNewGroupName] = useState(""); const updateGroup = (index, updates) => { const newGroups = [...editingGroups]; newGroups[index] = { ...newGroups[index], ...updates }; setEditingGroups(newGroups); }; const toggleAminoAcid = (index, aa) => { const group = editingGroups[index]; const currentAminoAcids = new Set(group.aminoAcids); if (currentAminoAcids.has(aa)) { currentAminoAcids.delete(aa); } else { currentAminoAcids.add(aa); } updateGroup(index, { aminoAcids: Array.from(currentAminoAcids).sort(), }); }; return (

Configure Amino Acid Groups

{editingGroups.map((group, index) => (

updateGroup(index, { name: e.target.value })} style={{ flex: 1, marginRight: "10px" }} /> updateGroup(index, { color: e.target.value })} /> {editingGroups.length > 1 && ( )}

{ALL_AMINO_ACIDS.map(aa => (

toggleAminoAcid(index, aa)} style={{ border: "1px solid #ddd", padding: "5px", margin: "2px", backgroundColor: group.aminoAcids.includes(aa) ? group.color : "white", color: group.aminoAcids.includes(aa) ? "white" : "black", cursor: "pointer", }} > {aa}

))}

setNewGroupName(e.target.value)} style={{ marginRight: "10px" }} />

); } function App() { const [sequence, setSequence] = useState(""); const [uniprotId, setUniprotId] = useState(""); const [aaGroups, setAaGroups] = useState(DEFAULT_AA_GROUPS); const [font, setFont] = useState("Courier"); const [fontSize, setFontSize] = useState(14); const [error, setError] = useState(""); const [isLoading, setIsLoading] = useState(false); const [copyStatus, setCopyStatus] = useState(""); const [lineWidth, setLineWidth] = useState(50); const [showGroupConfig, setShowGroupConfig] = useState(false); const textAreaRef = useRef(null); const fetchUniprotSequence = async () => { if (!uniprotId.trim()) { setError("Please enter a UniProt ID"); return; } try { setError(""); setIsLoading(true); const response = await fetch(`https://rest.uniprot.org/uniprotkb/${uniprotId}.fasta`); if (!response.ok) { throw new Error("Sequence not found"); } const fastaText = await response.text(); const sequenceLines = fastaText.split("\n"); const extractedSequence = sequenceLines.slice(1).join("").replace(/\s/g, ""); setSequence(extractedSequence); } catch (error) { console.error("Error fetching UniProt sequence:", error); setError(`Could not retrieve sequence for ${uniprotId}. Check UniProt ID.`); } finally { setIsLoading(false); } }; const copySequence = () => { // Fallback copy method using textarea if (textAreaRef.current) { textAreaRef.current.value = sequence; textAreaRef.current.select(); try { const successful = document.execCommand("copy"); setCopyStatus(successful ? "✅ Copied!" : "❌ Copy failed"); } catch (err) { setCopyStatus("❌ Copy failed"); } return; } // Preferred method: Clipboard API if (navigator.clipboard) { navigator.clipboard.writeText(sequence) .then(() => { setCopyStatus("✅ Copied!"); setTimeout(() => setCopyStatus(""), 2000); }) .catch((err) => { console.error("Clipboard write failed", err); setCopyStatus("❌ Copy failed"); }); } }; const determineAminoAcidGroup = (aa) => { const group = aaGroups.find(g => g.aminoAcids.includes(aa.toUpperCase())); return group ? group.key : "other"; }; const handleAddGroup = (newGroupName) => { const newGroup = { name: newGroupName, key: newGroupName.toLowerCase().replace(/\s+/g, ""), aminoAcids: [], color: `#${Math.floor(Math.random() * 16777215).toString(16)}`, }; setAaGroups([...aaGroups, newGroup]); }; const handleDeleteGroup = (groupKey) => { setAaGroups(aaGroups.filter(g => g.key !== groupKey)); }; const renderSequence = () => { if (!sequence) return null; const lines = []; for (let i = 0; i < sequence.length; i += lineWidth) { const lineSequence = sequence.slice(i, i + lineWidth); const lineElements = lineSequence.split("").map((aa, index) => { const group = aaGroups.find(g => g.aminoAcids.includes(aa.toUpperCase())) || aaGroups.find(g => g.key === "other"); return ( {aa} ); }); lines.push(

{i + 1}

{lineElements}

, ); } return lines; }; const sequenceComposition = getSequenceComposition(sequence, aaGroups); return (

{showGroupConfig && ( setShowGroupConfig(false)} onSave={(newGroups) => { setAaGroups(newGroups); setShowGroupConfig(false); }} onAddGroup={handleAddGroup} onDeleteGroup={handleDeleteGroup} /> )} {/* Left Panel: Input & Settings */}

🧬 Protein Sequence Visualizer

UniProt Retrieval

setUniprotId(e.target.value)} style={{ width: "100%", padding: "5px", marginBottom: "10px" }} />

{error &&

{error}

}

Manual Sequence Input

setSequence(e.target.value)}
            placeholder="Enter protein sequence"
            style={{ width: "100%", padding: "5px" }}
          />
        </div>

<div>
          <h3>Visualization Settings</h3>
          <div style={{ display: "flex", flexDirection: "column", gap: "10px", marginBottom: "10px" }}>
            <label>
              Font:
              <select
                value={font}
                onChange={(e) => setFont(e.target.value)}
                style={{ marginLeft: "10px" }}
              >
                <option value="Courier">Courier</option>
                <option value="monospace">Monospace</option>
                <option value="Arial">Arial</option>
              </select>
            </label>
            <label>
              Font Size:
              <input
                type="number"
                value={fontSize}
                onChange={(e) => setFontSize(Number(e.target.value))}
                style={{ width: "50px", marginLeft: "10px" }}
              />
            </label>
            <label>
              Line Width (AA per line):
              <input
                type="number"
                value={lineWidth}
                onChange={(e) => setLineWidth(Number(e.target.value))}
                style={{ width: "50px", marginLeft: "10px" }}
                min="10"
                max="200"
              />
            </label>
          </div>
        </div>

<div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <h3>Amino acid groups</h3>
            <button onClick={() => setShowGroupConfig(true)}>
              ⚙️ Configure Groups
            </button>
          </div>
        </div>
      </div>

{/* Right Panel: Visualization */}
      <div
        style={{
          width: "70%",
          padding: "20px",
          overflowY: "auto",
          backgroundColor: "white",
        }}
      >
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            marginBottom: "15px",
          }}
        >
          <h3>Protein Sequence</h3>
          {sequence && (
            <div>
              <strong>Length:</strong> {sequence.length} AA
              <button
                onClick={copySequence}
                style={{ marginLeft: "15px" }}
              >
                📋 {copyStatus || "Copy"}
              </button>
            </div>
          )}
        </div>

<div
          style={{
            fontFamily: font,
            fontSize: `${fontSize}px`,
            lineHeight: "1.5",
          }}
        >
          {sequence ? renderSequence() : (
            <p style={{ color: "#888" }}>
              Enter or fetch a protein sequence to visualize
            </p>
          )}
        </div>

{sequence && (
          <div style={{ marginTop: "20px" }}>
            <h4>Sequence Composition</h4>
            <div style={{ display: "flex", gap: "15px", flexWrap: "wrap" }}>
              {aaGroups.map((group) => {
                const count = sequenceComposition[group.key] || 0;
                return (
                  <div
                    key={group.key}
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: "10px",
                      backgroundColor: `${group.color}20`, // Slightly transparent background
                      padding: "5px 10px",
                      borderRadius: "5px",
                    }}
                  >
                    <div
                      style={{
                        width: "15px",
                        height: "15px",
                        backgroundColor: group.color,
                      }}
                    />
                    <strong>{group.name}:</strong>
                    {count} ({((count / sequence.length) * 100).toFixed(1)}%)
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

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

export default async function server(request: Request): Promise<Response> {
  return new Response(
    `
    <html>
      <head>
        <title>Protein Sequence Visualizer</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Permissions-Policy" content="clipboard-write=(self)">
        <style>
          body { margin: 0; font-family: Arial, sans-serif; }
          * { box-sizing: border-box; }
          button { 
            background-color: #3498db; 
            color: white; 
            border: none; 
            padding: 5px 10px; 
            cursor: pointer; 
          }
          button:disabled {
            background-color: #bdc3c7;
            cursor: not-allowed;
          }
        </style>
      </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" },
    },
  );
}</article></body></html>

PaintSeq