Prevent scenario from dragging when input is hovered (#8)

* Prevent scenario from dragging when input is hovered

* Prevent VariantHeader from dragging when input is hovered

src/components/OutputsTable/ScenarioEditor.tsx

@@ -21,6 +21,7 @@ export default function ScenarioEditor({
   const savedValues = scenario.variableValues as Record<string, string>;
   const utils = api.useContext();
   const [isDragTarget, setIsDragTarget] = useState(false);
+  const [variableInputHovered, setVariableInputHovered] = useState(false);
 
   const [values, setValues] = useState<Record<string, string>>(savedValues);
 
@@ -72,7 +73,7 @@ export default function ScenarioEditor({
       pr={cellPadding.x}
       py={cellPadding.y}
       height="100%"
-      draggable
+      draggable={!variableInputHovered}
       onDragStart={(e) => {
         e.dataTransfer.setData("text/plain", scenario.id);
         e.currentTarget.style.opacity = "0.4";
@@ -154,6 +155,8 @@ export default function ScenarioEditor({
                   borderColor={hasChanged ? "blue.300" : "transparent"}
                   _hover={{ borderColor: "gray.300" }}
                   _focus={{ borderColor: "blue.500", outline: "none", bg: "white" }}
+                  onMouseEnter={() => setVariableInputHovered(true)}
+                  onMouseLeave={() => setVariableInputHovered(false)}
                 />
               </Flex>
             );

src/components/OutputsTable/VariantHeader.tsx

@@ -11,6 +11,7 @@ import AutoResizeTextArea from "../AutoResizeTextArea";
 export default function VariantHeader(props: { variant: PromptVariant }) {
   const utils = api.useContext();
   const [isDragTarget, setIsDragTarget] = useState(false);
+  const [isInputHovered, setIsInputHovered] = useState(false);
   const [label, setLabel] = useState(props.variant.label);
 
   const updateMutation = api.promptVariants.update.useMutation();
@@ -53,7 +54,7 @@ export default function VariantHeader(props: { variant: PromptVariant }) {
       spacing={4}
       alignItems="center"
       minH={headerMinHeight}
-      draggable
+      draggable={!isInputHovered}
       onDragStart={(e) => {
         e.dataTransfer.setData("text/plain", props.variant.id);
         e.currentTarget.style.opacity = "0.4";
@@ -91,6 +92,8 @@ export default function VariantHeader(props: { variant: PromptVariant }) {
         _focus={{ borderColor: "blue.500", outline: "none" }}
         flex={1}
         px={cellPadding.x}
+        onMouseEnter={() => setIsInputHovered(true)}
+        onMouseLeave={() => setIsInputHovered(false)}
       />
       <Tooltip label="Hide Variant" hasArrow>
         <Button variant="ghost" colorScheme="gray" size="sm" onClick={onHide}>