Add KiDerivation modal for Competitive Binding module

src/components/modals/KiDerivation.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from "react";
+import { Flex, Steps } from "antd";
+
+import { AB, D } from "../agent-symbols";
+
+import styles from "./kd-derivation.module.css";
+import { SecondaryButton } from "../shared/ButtonLibrary";
+import {
+    variables,
+    reactionSteps,
+    getEquationFromStep,
+} from "./KiDerivationContent";
+
+const KiDerivation: React.FC = () => {
+    const [current, setCurrent] = useState(0);
+
+    const next = () => {
+        if (current >= reactionSteps.length - 1) {
+            return setCurrent(0);
+        }
+        setCurrent(current + 1);
+    };
+    return (
+        <Flex vertical className={styles.container}>
+            <div>
+                <p>
+                    The inhibition constant {variables.ki} is analogous to{" "}
+                    K<sub>d</sub>, but for our competitive inhibitor <D />. It
+                    can be determined by finding the {variables.ic50} — the
+                    concentration of <D /> at equilibrium where the amount of{" "}
+                    <AB /> formed is reduced by half. You can think of it as{" "}
+                    <em>
+                        "how little <D /> do I need to cut <AB /> formation in
+                        half?"
+                    </em>{" "}
+                </p>
+                <ul>
+                    <li>
+                        <strong>high</strong> {variables.ki} ={" "}
+                        <strong>low</strong> inhibitor potency
+                    </li>
+                    <li>
+                        <strong>low</strong> {variables.ki} ={" "}
+                        <strong>high</strong> inhibitor potency
+                    </li>
+                </ul>
+                <p>
+                    A reaction with a <strong>high</strong> {variables.ki}{" "}
+                    means you need a lot of <D /> to cut <AB /> formation in
+                    half, so the inhibitor has <strong>low</strong> potency. A{" "}
+                    <strong>low</strong> {variables.ki} means you don't need
+                    very much <D />, so the inhibitor has{" "}
+                    <strong>high</strong> potency.
+                </p>
+            </div>
+            <div>
+                <Flex className={styles.titleSection}>
+                    <h3 className={styles.title}>
+                        Derivation of {variables.ki}
+                    </h3>
+                    <Flex
+                        align="center"
+                        gap={4}
+                        className={styles.mainEquation}
+                    >
+                        <span>{variables.ki}</span> ={" "}
+                        {getEquationFromStep(current)}
+                    </Flex>
+                    <SecondaryButton
+                        style={{ margin: "0 8px" }}
+                        onClick={() => next()}
+                    >
+                        {current < reactionSteps.length - 1
+                            ? "Next"
+                            : "Restart"}
+                    </SecondaryButton>
+                </Flex>
+                <Steps
+                    className={styles.steps}
+                    direction="vertical"
+                    current={current}
+                    size="small"
+                    items={reactionSteps.map((step) => ({
+                        title: step.title,
+                        description: step.content,
+                    }))}
+                ></Steps>
+            </div>
+        </Flex>
+    );
+};
+
+export default KiDerivation;

src/components/modals/KiDerivationContent.tsx

@@ -0,0 +1,93 @@
+import { Flex } from "antd";
+import { AB, D } from "../agent-symbols";
+import Fraction from "../shared/Fraction";
+import { GRAY_COLOR } from "../plots/constants";
+
+const unitStyle = { color: GRAY_COLOR };
+
+const variables = {
+    ki: (
+        <>
+            K<sub>i</sub>
+        </>
+    ),
+    ic50: (
+        <>
+            IC<sub>50</sub>
+        </>
+    ),
+    abMax: (
+        <>
+            [<AB />]<sub>max</sub>
+        </>
+    ),
+};
+
+const units = {
+    constant: <>mM</>,
+};
+
+const reactionSteps = [
+    {
+        title: (
+            <>
+                First, run the experiment with no inhibitor present ([<D />] =
+                0) to measure {variables.abMax} — the maximum amount of{" "}
+                <AB /> that can form
+            </>
+        ),
+        content: (
+            <>
+                {variables.abMax} = [<AB />]{" "}
+                <span style={unitStyle}>
+                    (at equilibrium, when [<D />] = 0)
+                </span>
+            </>
+        ),
+    },
+    {
+        title: (
+            <>
+                {variables.ki} (also called the {variables.ic50}) is the
+                concentration of <D /> at equilibrium where [<AB />] has
+                dropped to half of {variables.abMax}
+            </>
+        ),
+        content: (
+            <Flex align="center" gap={4}>
+                <Fraction top={<>[<AB />]</>} bottom={variables.abMax} />
+                <span>= ½</span>
+            </Flex>
+        ),
+    },
+    {
+        title: (
+            <>
+                Therefore, {variables.ki} equals the concentration of <D />{" "}
+                (at equilibrium) that reduces the formation of <AB /> by half
+            </>
+        ),
+        content: (
+            <Flex align="center" gap={4}>
+                <span>{variables.ki} = </span>
+                <span>
+                    [<D />]
+                </span>
+                <span style={unitStyle}>{units.constant}</span>
+            </Flex>
+        ),
+    },
+];
+
+const getEquationFromStep = (step: number) => {
+    if (step < 2) {
+        return <span>?</span>;
+    }
+    return (
+        <span>
+            [<D />]
+        </span>
+    );
+};
+
+export { variables, units, reactionSteps, getEquationFromStep };

src/content/Competitive.tsx

@@ -1,4 +1,5 @@
 import { A, AB, AD, B, D } from "../components/agent-symbols";
+import KiDerivation from "../components/modals/KiDerivation";
 import StartExperiment from "../components/StartExperiment";
 import {
     PLAY_BUTTON_ID,
@@ -180,6 +181,10 @@ export const competitiveArray: PageContent[] = [
                 where the amount of <AB /> complex is reduced by half.
             </>
         ),
+        modal: {
+            title: "Learn how to derive Ki",
+            content: <KiDerivation />,
+        },
         moreInfo: (
             <>
                 IC<sub>50</sub> = [<D />] (at equilibrium when [<AB />] is half