apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-06-06 19:35:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix glitchy behavior in scenario configs

Browse source
This commit is contained in:
akhisud3195 2025-02-18 21:03:31 +05:30
parent 4a29984658
commit 694e1f90ae
2 changed files with 40 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

15
apps/rowboat/app/projects/[projectId]/simulation/app.tsx
View file

@ -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);

50
apps/rowboat/app/projects/[projectId]/simulation/components/ScenarioComponents.tsx
View file

@ -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>