add/remove baths

src/Laboratory/Bath.jsx

@@ -3,7 +3,7 @@ import {
   Group,
 } from 'react-konva';
 
-const Bath = ({ position }) => {
+const Bath = ({ operatorKey, position }) => {
   const { x, y } = position;
   const width = 30;
   const waveArray = [
@@ -22,10 +22,11 @@ const Bath = ({ position }) => {
         <Ellipse
           x={0}
           y={0}
+          rotation={operatorKey === 'Sm' ? -2 : 2}
           radius={{ x: x, y: (7 * y) / 12 }}
           shadowBlur={30}
-          shadowColor="red"
-          fill="#ff00001f"
+          shadowColor={operatorKey === 'Sm' ? "cyan"  :"red"}
+          fill={operatorKey === 'Sm' ? "#00ffff1f" : "#ff00001f"}
         />
       </Group>
     </>

src/Laboratory/BathModal.tsx

@@ -22,7 +22,7 @@ export default function BathModal({ onCancel, onSubmit, disabledOptions }) {
         color: "white",
         fontFamily: "monospace",
         fontSize: 20,
-        bottom: 140,
+        bottom: 40,
         left: "50%",
         transform: "translateX(-50%)",
         background: "#252525",
@@ -65,6 +65,7 @@ export default function BathModal({ onCancel, onSubmit, disabledOptions }) {
           style={{ padding: "10px 30px" }}
           disabled={operatorSelected === undefined || scalar === 0}
           onClick={() => onSubmit({
+            operatorKey: operatorSelected,
             operator: operatorSelected ? operatorSelectOptions[operatorSelected] : undefined,
             scalar,
           })}

src/Laboratory/Qubit.jsx

@@ -104,11 +104,12 @@ export const QubitMenu = ({
   onClose,
   onAddInteraction,
   onRemoveInteraction,
-  onToggleBath,
+  onAddBath,
+  onRemoveBath,
   onAddLaser,
   onRemoveQubit,
 }) => {
-  const size = qubitRadius;
+  const size = 40;
   const width = 150;
   const menuItems = [
     { label: "Toggle Laser", onClick: onAddLaser },
@@ -118,15 +119,18 @@ export const QubitMenu = ({
     ...(onRemoveInteraction
       ? [{ label: "Remove Interaction", onClick: onRemoveInteraction }]
       : []),
-    { label: "Toggle Bath", onClick: onToggleBath },
+    { label: "Add Bath", onClick: onAddBath },
+    ...(onRemoveBath
+      ? [{ label: "Remove Bath", onClick: onRemoveBath }]
+      : []),
     { label: "Remove Qubit", onClick: onRemoveQubit },
   ];
   const textPadding = { y: size / 2 - 5, x: 5 };
   return (
     <>
       <Group visible={visible} x={x} y={y}>
         <Rect fill="black" width={width} height={size} stroke="black" />
-        <Text text="×" x={7} fill="white" fontSize={40} />
+        <Text text="×" x={7} fill="white" fontSize={40} y={0} />
         <ClickTarget
           stroke="white"
           onClick={onClose}

src/Laboratory/RemoveBathModal.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+
+// @ts-ignore
+import { InlineMath } from 'react-katex';
+
+import {
+  PauliMinus,
+  PauliPlus,
+} from '../simulationUtils';
+
+export default function RemoveBathModal({ onCancel, onSubmit, disabledOptions }) {
+  const operatorSelectOptions = {
+    Sp: PauliPlus,
+    Sm: PauliMinus
+  }
+  const [operatorSelected, setOperatorSelected] = useState<'Sp' | 'Sm' | undefined>();
+  return (
+    <div
+      style={{
+        position: "absolute",
+        color: "white",
+        fontFamily: "monospace",
+        fontSize: 20,
+        bottom: 40,
+        left: "50%",
+        transform: "translateX(-50%)",
+        background: "#252525",
+        padding: "10px 12px",
+        border: "1px solid white",
+      }}
+    >
+      Operator:{" "}
+      {Object.entries(operatorSelectOptions).map(([key, operator]) => (
+        <label key={key}>
+          <input
+            type="radio"
+            value={key}
+            onChange={(e) => setOperatorSelected(e.target.value as 'Sm' | 'Sp')}
+            checked={operatorSelected === key}
+            disabled={disabledOptions.includes(key)}
+          />
+          <InlineMath>{operator.label}</InlineMath>
+        </label>
+      ))}
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          width: "100%",
+          justifyContent: "space-around",
+          margin: "20px 0 10px 0",
+        }}
+      >
+        <button
+          style={{ padding: "10px 30px" }}
+          disabled={operatorSelected === undefined}
+          onClick={() => onSubmit({
+            operatorKey: operatorSelected,
+          })}
+        >
+          OK
+        </button>
+        <button style={{ padding: "10px 30px" }} onClick={onCancel}>
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}

src/Laboratory/index.tsx

@@ -16,16 +16,17 @@ import {
   type PauliOperator,
   type PauliOperatorKey,
   PauliOperators,
-  PauliX,
   type QubitId,
 } from '../simulationUtils';
 import AddInteractionModal from './AddInteractionModal';
 import Bath from './Bath';
+import BathModal from './BathModal';
 import Grid from './Grid';
 import Interaction from './Interaction';
 import InteractionModal from './InteractionModal';
 import Laser from './Laser';
 import Qubit, { QubitMenu } from './Qubit';
+import RemoveBathModal from './RemoveBathModal';
 import RemoveInteractionModal from './RemoveInteractionModal';
 import useResize from './useResize';
 
@@ -84,6 +85,10 @@ export default function Laboratory() {
   const [interactionTargetQubit, setInteractionTargetQubit] = useState<undefined | QubitPosition>();
   const [interactionModalVisible, setInteractionModalVisible] = useState<boolean>(false);
   const [interactions, setInteractions] = useState<Array<{ qubits: QubitPosition[], label: PauliOperatorKey, id: string }>>([])
+  const [isAddingBath, setIsAddingBath] = useState(false)
+  const [bathModalVisible, setBathModalVisible] = useState(false)
+  const [baths, setBaths] = useState<Array<'Sm' | 'Sp'>>([])
+  const [isRemovingBath, setIsRemovingBath] = useState(false)
 
   const numActiveQubits = useMemo(() => {
     return Object.values(activeQubits).reduce(
@@ -110,11 +115,17 @@ export default function Laboratory() {
     return []
   }, [interactions, interactionSourceQubit, interactionTargetQubit])
 
+  const disabledBathOptions = useMemo(() => {
+    const options: Array<'Sm' | 'Sp'> = ['Sm', 'Sp']
+    return options.filter(op => !baths.includes(op))
+  }, [baths])
+
   const handleAddQubit = (position) => {
     setActiveQubits((positions) => ({
       ...positions,
       [position]: true
     }));
+    setQubitSelected(undefined)
 
     let newConfigQubits = [...new Set([...config.qubits, qubitIds[position]])]
     setConfig((config) => ({
@@ -266,26 +277,56 @@ export default function Laboratory() {
     ))
   }
 
-  const handleToggleBath = () => {
+  const handleAddBath = () => {
+    setIsAddingBath(true)
+    setBathModalVisible(true)
+  }
+
+  const handleCancelAddBath = () => {
+    setIsAddingBath(false)
+    setBathModalVisible(false)
     setQubitSelected(undefined)
+  }
+
+  const handleFinishAddBath = ({ operatorKey, operator, scalar }) => {
+    setIsAddingBath(false)
+    setBaths(baths => [...baths, operatorKey])
     setConfig(config => ({
       ...config,
-      baths: config.baths.length
-        ? []
-        : [
-          {
-            label: '',
-            operator: PauliX,
-            parameter: {
-              label: '\\gamma_p^{(n)}',
-              src: 'gamma_p',
-              value: 1
-            },
-          }
-        ]
+      baths: [...config.baths, {
+        label: `bath-${config.baths.length}`,
+        operator,
+        parameter: {
+          label: operatorKey === 'Sm' ? '\\gamma^{(n)}_-' : '\\gamma^{(n)}_+',
+          src: `gamma_${operatorKey}`,
+          value: scalar
+        }
+      }]
     }))
+    setQubitSelected(undefined)
+  }
+
+  const handleRemoveBath = () => {
+    setIsRemovingBath(true)
+  }
+
+  const handleFinishRemoveBath = ({operatorKey}) => {
+    setQubitSelected(undefined)
+    setBaths(baths => baths.filter(bath => (bath !== operatorKey)))
+    setConfig(config => ({
+      ...config,
+      baths: config.baths.filter(bath => (bath.operator.key !== operatorKey))
+    }))
+    setIsRemovingBath(false)
   };
 
+  const handleCancelRemoveBath = () => {
+    setIsRemovingBath(false)
+  }
+
+  console.log(baths)
+  console.log(config.baths)
+
   return (
     <>
       <Stage
@@ -295,7 +336,9 @@ export default function Laboratory() {
       >
         <Layer>
           <Grid width={width} height={height} />
-          {(Object.entries(config.baths)).map(([key, { }]) => <Bath position={center} key={key + 'b'} />)}
+        </Layer>
+        <Layer>
+          {baths.map((operatorKey) => <Bath operatorKey={operatorKey} position={center} key={operatorKey + 'b'} />)}
           {(Object.entries(lasers) as Array<[QubitPosition, { orientation, on }]>).map(([key, { orientation, on }]) => (
             activeQubits[key] && <Laser
               on={on}
@@ -346,7 +389,8 @@ export default function Laboratory() {
                   visible={qubitSelected === key}
                   onClose={() => setQubitSelected(undefined)}
                   onRemoveQubit={() => handleRemoveQubit(key)}
-                  onToggleBath={() => handleAddBath()}
+                  onAddBath={() => handleAddBath()}
+                  onRemoveBath={baths.length ? () => handleRemoveBath() : undefined}
                   onAddLaser={() => handleToggleLaser(key)}
                   onAddInteraction={numActiveQubits > 1 ? () => handleAddInteraction(key) : false}
                   onRemoveInteraction={interactionsByQubit[key]?.length ? () => handleRemoveInteraction(key) : false}
@@ -365,6 +409,12 @@ export default function Laboratory() {
       {isRemovingInteraction && (
         <RemoveInteractionModal onCancel={handleCancelRemoveInteraction} />
       )}
+      {isAddingBath && bathModalVisible && (
+        <BathModal disabledOptions={baths} onCancel={handleCancelAddBath} onSubmit={handleFinishAddBath} />
+      )}
+      {isRemovingBath && (
+        <RemoveBathModal disabledOptions={disabledBathOptions} onCancel={handleCancelRemoveBath} onSubmit={handleFinishRemoveBath} />
+      )}
     </>
   );
 }

src/simulationUtils.tsx

@@ -18,7 +18,16 @@ export const PauliZ = {
     src: "sigmaz()",
     label: "\\sigma_z"
 } as const
-
+export const PauliPlus = {
+    src: "sigmap()",
+    label: "\\sigma_+",
+    key: 'Sp'
+} as const
+export const PauliMinus = {
+    src: "sigmam()",
+    label: "\\sigma_-",
+    key: 'Sm'
+} as const
 
 export type PauliOperator = (typeof PauliX) | typeof PauliY | typeof PauliZ
 
@@ -53,7 +62,7 @@ export type InteractionOperator = {
 
 type CollapseOperator = {
     label: string;
-    operator: PauliOperator;
+    operator: typeof PauliPlus | typeof PauliMinus;
     parameter: SimulationParameter
 }