From a97e74474f9fcab4f257f6e5ee298ac295a3ee17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aleks=20R=C5=ABti=C5=86=C5=A1?= <aleks@rutins.com>
Date: Sun, 2 Jun 2024 11:41:37 -0400
Subject: [PATCH] Repressors & Leaks

---
 assets/math.js            | 10 ++---
 layouts/base.html         | 22 +++++++++--
 pages/repressors.md       | 81 ++++++++++++++++++++++++++++++++++++++-
 pages/simplest-circuit.md |  6 +--
 4 files changed, 106 insertions(+), 13 deletions(-)

diff --git a/assets/math.js b/assets/math.js
index 0f0ed2c..3e5d093 100644
--- a/assets/math.js
+++ b/assets/math.js
@@ -12,7 +12,7 @@ function defineVars(vars) {
     });
 }
 
-function plot(target, fn, deps) {
+function plot(target, fns, deps) {
     const depsEl = deps.map(document.querySelector.bind(document));
     const plot = () => {
         functionPlot({
@@ -21,11 +21,9 @@ function plot(target, fn, deps) {
             height: 400,
             yAxis: { domain: [-1, 9] },
             grid: true,
-            data: [
-                {
-                    fn: fn(...(depsEl.map(el => el.value)))
-                }
-            ]
+            data: fns(...(depsEl.map(el => parseFloat(el.value)))).map(fn => ({
+                    fn
+                }))
         });
     }
 
diff --git a/layouts/base.html b/layouts/base.html
index 9f50275..9a5c38a 100644
--- a/layouts/base.html
+++ b/layouts/base.html
@@ -9,8 +9,24 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous">
     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js" integrity="sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd" crossorigin="anonymous"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/mhchem.min.js" integrity="sha384-ifpG+NlgMq0kvOSGqGQxW1mJKpjjMDmZdpKGq3tbvD3WPhyshCEEYClriK/wRVU0"  crossorigin="anonymous"></script>
-    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"
-        onload="renderMathInElement(document.body);"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"></script>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            renderMathInElement(document.body, {
+                // customised options
+                // • auto-render specific keys, e.g.:
+                delimiters: [
+                    {left: '$$', right: '$$', display: true},
+                    {left: '$', right: '$', display: false},
+                    {left: '\\(', right: '\\)', display: false},
+                    {left: '\\[', right: '\\]', display: true}
+                ],
+                // • rendering keys, e.g.:
+                throwOnError : false
+            });
+        });
+    </script>
 
     <script src="/assets/math.js"></script>
 
@@ -22,7 +38,7 @@
             <slot></slot>
             <footer>
                 <p>&copy; 2024 <a href="https://farthergate.com">Aleks Rūtiņš</a></p>
-                <p>Built with <a href="https://cheetah.farthergate.com">Cheetah</a></p>
+                <p>Built with <a href="https://cheetah.farthergate.com">Cheetah</a>, <a href="https://mauriciopoppe.github.io/function-plot/">Function Plot</a>, and <a href="https://katex.org/">$\KaTeX$</a></p>
                 <p>
                     With the exception of pasted graphics, where the source is noted, this work is licensed under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution License CC BY-NC-SA 4.0</a>. All code contained herein is licensed under an <a href="https://opensource.org/license/mit">MIT license</a>.
                 </p>
diff --git a/pages/repressors.md b/pages/repressors.md
index b238fc2..eca5577 100644
--- a/pages/repressors.md
+++ b/pages/repressors.md
@@ -4,4 +4,83 @@
 
 # Repressors & Leaks
 
-<nav-links back="/simplest-circuit.html" next="/activators.html"></nav-links>
\ No newline at end of file
+Theoretically, a single gene could keep producing a single protein indefinitely, if it had the energy. From a circuit design perspective, though, that's not very interesting. In order to do something more interesting, we need some way to regulate production.
+
+**Repressors** enable gene regulation. They bind to specific binding sites at or near the promoter of a gene (remember, that's where transcription starts) and inhibit transcription initiation. An example of this in bacteria is the Lacl repressor in _E. coli_. Normally, it inhibits the gene for lactase production. When lactose is present, though, a modified form of lactose (allolactose) binds to Lacl, and prevents it from inhibiting lactase production. Lactase is then produced, and the lactose is digested. Lacl is then free to bind to the gene again, inhibiting lactase production until the next time lactose appears.
+
+Binding and unbiunding a repressor can be modeled through this chemical equation:
+
+$$\ce{P + R <=>[k_+][k_-] P_\mathrm{bound}}$$
+
+We can model the dynamics of this reaction using mass action kinetics: essentially, the rate of a reaction is proportional to the product of the concentrations of its products. Within a single cell, an individual site is either bound or unbound. Averaged over a population of cells, though, we can talk about the mean occupancy of a site. If \\(r\\) is the concentration of repressor, \\(p\\) is the concentration of unbound promoter, and \\(p_\text{bound}\\) is the concentration of bound promoter, we can say that:
+
+$$\frac{dp}{dt}=-k_+pr+k_-p_\text{bound}$$
+
+For this situation, we can assume a separation of timescales, because the rate at which the repressor binds to and unbinds from the DNA is generally very fast compared to the rates at which mRNA and protein concentrations vary. This is generally a reasonable assumption in bacteria, but be aware that in some situations, as in some genes in mammals, it might not work. Here, though, we can handily assume that the binding and unbinding is happening quickly enough that \\(\frac{dp}{dt}\approx0\\). To find the concentrations, then, we can set the above equal to zero and solve for whatever we want.
+
+Specifically, if \\(p_\text{tot}\\) is the total concentration of promoters, both bound and unbound, then we can set \\(p_\text{bound}=p_\text{tot}-p\\) and rearrange the equation to give the fraction of free promoters:
+
+$$\frac{p}{p_\text{tot}}=\frac1{(1+r/K_d)}$$
+
+Where \\(K_d\\) is the **dissociation constant** &mdash; a measurement of the likelyhood that a repressor will unbind from its binding site &mdash; calculated as \\(\frac{k_-}{k_+}\\). Becayse we have a separation of timescales and can simplify things, the rate of production of gene product should be proportional to the probability of the promoter being unbound:
+
+$$\beta(r)=\beta_0\frac{p}{p_\text{tot}}=\frac{\beta_0}{1 + r/K_d}$$
+
+This is the **simple binding curve**. We'll be using and building on it over the course of the next few sections. It has three parameters:
+
+- \\(K_d\\) is the concentration of repressor at which the production is reduced to half its maximum value.
+- \\(\beta_0\\) is the maximum expression level, acting as a coefficient for the rest of the function.
+- \\(r\\) is the concentration of repressor.
+
+For small values of \\(r\\), note that the slope is \\(-\frac{\beta_0}{K_d}\\). Here's a graph to play around with (the line represents the initial slope):
+
+<div class="graph">
+    <div id="binding-curve"></div>
+    <div>
+        <label for="kd">K<sub>d</sub</label>
+        <input type="range" id="kd" value=1>
+    </div>
+    <div>
+        <label for="beta0">β<sub>0</sub></label>
+        <input type="range" id="beta0" value=1>
+    </div>
+</div>
+
+## Leaky expression
+
+Unfortunately, repressors aren't perfect. Many genes can never get entirely repressed, and have a baseline, or "basal", level or expression. We can represent this by adding another term, $\alpha_0$, to $\beta(r)$:
+
+$$\beta(r)=\frac{\beta_0}{1 + r/K_d}+\alpha_0$$
+
+<div class="graph">
+    <div id="binding-curve-leaky"></div>
+    <div>
+        <label for="leaky-kd">K<sub>d</sub</label>
+        <input type="range" id="leaky-kd" value=1>
+    </div>
+    <div>
+        <label for="leaky-beta0">β<sub>0</sub></label>
+        <input type="range" id="leaky-beta0" value=1>
+    </div>
+    <div>
+        <label for="leaky-alpha0">α<sub>0</sub></label>
+        <input type="range" id="leaky-alpha0" value=1>
+    </div>
+</div>
+
+Why does this happen, you ask? There are a couple of reasons:
+
+1. Molecular interactions inside a cell are always probabilistic, and repressors are constantly binding and unbinding.
+2. Even if there are more repressors than genes to repress, there is typically a small, but finite, amount of time between the unbinding and re-binding of a repressor. During this time, transcription initiation can still happen. Remember: repressors only bind to the promoter, so once transcription is initiated, protein synthesis can still happen, even if a repressor binds during the process.
+
+Because leaks are so common, it's important to make sure that important parts of your circuits don't depend on the complete absence of leaky expression.
+
+Onwards!
+
+<nav-links back="/simplest-circuit.html" next="/activators.html"></nav-links>
+
+<script>
+    plot('#binding-curve', (kd, beta0) => [`${beta0}/(1 + x/(${kd}))`, `-(${beta0})x/(${kd}) + ${beta0}`], ['#kd', '#beta0'])
+
+    plot('#binding-curve-leaky', (kd, beta0, alpha0) => [`${beta0}/(1 + x/(${kd})) + ${alpha0}`, `-(${beta0})x/(${kd}) + ${beta0} + ${alpha0}`], ['#leaky-kd', '#leaky-beta0', '#leaky-alpha0'])
+</script>
\ No newline at end of file
diff --git a/pages/simplest-circuit.md b/pages/simplest-circuit.md
index 7864f40..632d371 100644
--- a/pages/simplest-circuit.md
+++ b/pages/simplest-circuit.md
@@ -94,13 +94,13 @@ Here's a graph to play with:
     </div>
 </div>
 
-Onwards!
+It's still a line. Onwards!
 
 <nav-links back="/concepts.html" next="/repressors.html"></nav-links>
 
 <script>
-    plot('#concentration-graph', (beta, gamma) => `(${beta}x)/${gamma}`, ['#beta', '#gamma'])
-    plot('#concentration-graph-2step', (betap, gammap, betam, gammam) => `((${betap})(${betam})x)/((${gammap})(${gammam}))`, ['#betap', '#gammap', '#betam', '#gammam'])
+    plot('#concentration-graph', (beta, gamma) => [`(${beta}x)/${gamma}`], ['#beta', '#gamma'])
+    plot('#concentration-graph-2step', (betap, gammap, betam, gammam) => [`((${betap})(${betam})x)/((${gammap})(${gammam}))`], ['#betap', '#gammap', '#betam', '#gammam'])
     defineVars([
         ['γ', 'The rate constant for reduction of concentration.'],
         ['β', 'The rate of production, in molecules per unit time.'],