From 694e1f90aea7f39d5d02be6107745de6ce704650 Mon Sep 17 00:00:00 2001
From: akhisud3195 <akhileshs.s4@gmail.com>
Date: Tue, 18 Feb 2025 21:03:31 +0530
Subject: [PATCH] Fix glitchy behavior in scenario configs

---
 .../projects/[projectId]/simulation/app.tsx   | 15 +++++-
 .../components/ScenarioComponents.tsx         | 50 ++++++++++---------
 2 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/apps/rowboat/app/projects/[projectId]/simulation/app.tsx b/apps/rowboat/app/projects/[projectId]/simulation/app.tsx
index 7d07e84b..f1ec05b2 100644
--- a/apps/rowboat/app/projects/[projectId]/simulation/app.tsx
+++ b/apps/rowboat/app/projects/[projectId]/simulation/app.tsx
@@ -174,6 +174,17 @@ export default function SimulationApp() {
 
   const handleUpdateScenario = async (updatedScenario: ScenarioType) => {
     if (!projectId) return;
+    
+    // First verify the scenario exists and get its current state
+    const currentScenarios = await getScenarios(projectId as string);
+    const existingScenario = currentScenarios.find(s => s._id === updatedScenario._id);
+    
+    if (!existingScenario) {
+      console.error('Scenario not found');
+      return;
+    }
+
+    // Only update the specific fields that have changed
     await updateScenario(
       projectId as string,
       updatedScenario._id,
@@ -184,9 +195,11 @@ export default function SimulationApp() {
         context: updatedScenario.context,
       }
     );
-    // Refresh scenarios list
+
+    // Refresh scenarios list and update only the modified scenario
     const updatedScenarios = await getScenarios(projectId as string);
     setScenarios(updatedScenarios);
+    
     const refreshedScenario = updatedScenarios.find(s => s._id === updatedScenario._id);
     if (refreshedScenario) {
       setSelectedScenario(refreshedScenario);
diff --git a/apps/rowboat/app/projects/[projectId]/simulation/components/ScenarioComponents.tsx b/apps/rowboat/app/projects/[projectId]/simulation/components/ScenarioComponents.tsx
index bd6978b9..c509f99f 100644
--- a/apps/rowboat/app/projects/[projectId]/simulation/components/ScenarioComponents.tsx
+++ b/apps/rowboat/app/projects/[projectId]/simulation/components/ScenarioComponents.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, ChangeEvent } from 'react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { WithStringId } from '../../../../lib/types/types';
 import { Scenario } from "../../../../lib/types/testing_types";
@@ -23,24 +23,25 @@ export function ScenarioViewer({ scenario, onSave, onClose }: ScenarioViewerProp
     setEditedScenario(scenario);
   }, [scenario]);
 
-  const handleChange = useCallback((field: keyof ScenarioType, value: string) => {
+  const handleChange = useCallback((field: keyof ScenarioType, event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    event.preventDefault();
+    const value = event.target.value;
+    
     setEditedScenario(prev => ({
       ...prev,
       [field]: value,
     }));
 
-    // Clear existing timeout
     if (saveTimeout) {
       clearTimeout(saveTimeout);
     }
 
-    // Set new timeout
     const timeoutId = setTimeout(() => {
       onSave({
         ...editedScenario,
         [field]: value,
       });
-    }, 500);
+    }, 1000); // Increased debounce time to 1 second
 
     setSaveTimeout(timeoutId);
   }, [editedScenario, onSave, saveTimeout]);
@@ -54,6 +55,11 @@ export function ScenarioViewer({ scenario, onSave, onClose }: ScenarioViewerProp
     };
   }, [saveTimeout]);
 
+  const adjustTextareaHeight = useCallback((element: HTMLTextAreaElement) => {
+    element.style.height = 'auto';
+    element.style.height = `${element.scrollHeight}px`;
+  }, []);
+
   return (
     <div>
       <div className="flex justify-between items-center mb-6">
@@ -72,8 +78,10 @@ export function ScenarioViewer({ scenario, onSave, onClose }: ScenarioViewerProp
           <input
             type="text"
             value={editedScenario.name}
-            onChange={(e) => handleChange('name', e.target.value)}
+            onChange={(e) => handleChange('name', e)}
             className="text-base border border-gray-200 rounded px-2 py-1 hover:border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+            autoComplete="off"
+            spellCheck="false"
           />
         </div>
         
@@ -83,14 +91,12 @@ export function ScenarioViewer({ scenario, onSave, onClose }: ScenarioViewerProp
           <div className="text-sm font-medium text-gray-500 uppercase tracking-wider mb-4">DESCRIPTION</div>
           <textarea
             value={editedScenario.description}
-            onChange={(e) => handleChange('description', e.target.value)}
+            onChange={(e) => handleChange('description', e)}
+            onInput={(e) => adjustTextareaHeight(e.target as HTMLTextAreaElement)}
             className="text-base border border-gray-200 rounded px-2 py-1 hover:border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 min-h-[24px] resize-none"
             style={{ height: 'auto', minHeight: '24px' }}
-            onInput={(e) => {
-              const target = e.target as HTMLTextAreaElement;
-              target.style.height = 'auto';
-              target.style.height = `${target.scrollHeight}px`;
-            }}
+            autoComplete="off"
+            spellCheck="false"
           />
         </div>
         
@@ -100,14 +106,12 @@ export function ScenarioViewer({ scenario, onSave, onClose }: ScenarioViewerProp
           <div className="text-sm font-medium text-gray-500 uppercase tracking-wider mb-4">CRITERIA</div>
           <textarea
             value={editedScenario.criteria}
-            onChange={(e) => handleChange('criteria', e.target.value)}
+            onChange={(e) => handleChange('criteria', e)}
+            onInput={(e) => adjustTextareaHeight(e.target as HTMLTextAreaElement)}
             className="text-base border border-gray-200 rounded px-2 py-1 hover:border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 min-h-[24px] resize-none"
             style={{ height: 'auto', minHeight: '24px' }}
-            onInput={(e) => {
-              const target = e.target as HTMLTextAreaElement;
-              target.style.height = 'auto';
-              target.style.height = `${target.scrollHeight}px`;
-            }}
+            autoComplete="off"
+            spellCheck="false"
           />
         </div>
 
@@ -117,14 +121,12 @@ export function ScenarioViewer({ scenario, onSave, onClose }: ScenarioViewerProp
           <div className="text-sm font-medium text-gray-500 uppercase tracking-wider mb-4">CONTEXT</div>
           <textarea
             value={editedScenario.context}
-            onChange={(e) => handleChange('context', e.target.value)}
+            onChange={(e) => handleChange('context', e)}
+            onInput={(e) => adjustTextareaHeight(e.target as HTMLTextAreaElement)}
             className="text-base border border-gray-200 rounded px-2 py-1 hover:border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 min-h-[24px] resize-none"
             style={{ height: 'auto', minHeight: '24px' }}
-            onInput={(e) => {
-              const target = e.target as HTMLTextAreaElement;
-              target.style.height = 'auto';
-              target.style.height = `${target.scrollHeight}px`;
-            }}
+            autoComplete="off"
+            spellCheck="false"
           />
         </div>
       </div>