From 02ca2772ae9a46acaafe0157bd4ac24e5fc3e1ae Mon Sep 17 00:00:00 2001 From: RemDelaporteMathurin Date: Thu, 31 Jul 2025 20:12:17 -0400 Subject: [PATCH 1/4] added placeholder in parameters input fields with default values --- src/App.jsx | 194 +++++++++++++++++++++++++------------------------ src/backend.py | 27 ++++++- 2 files changed, 127 insertions(+), 94 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index e0fd06b9..8b8bda5c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -89,6 +89,24 @@ export default function App() { // Global variables state const [globalVariables, setGlobalVariables] = useState([]); + const [defaultValues, setDefaultValues] = useState({}); + + // Function to fetch default values for a node type + const fetchDefaultValues = async (nodeType) => { + try { + const response = await fetch(`http://localhost:8000/default-values/${nodeType}`); + if (response.ok) { + const defaults = await response.json(); + return defaults; + } else { + console.error('Failed to fetch default values'); + return {}; + } + } catch (error) { + console.error('Error fetching default values:', error); + return {}; + } + }; // Function to save a graph to computer with "Save As" dialog const saveGraph = async () => { @@ -527,7 +545,7 @@ export default function App() { ); }; // Function to add a new node to the graph - const addNode = () => { + const addNode = async () => { // Get available node types from nodeTypes object const availableTypes = Object.keys(nodeTypes); @@ -555,73 +573,22 @@ export default function App() { const selectedType = availableTypes[choiceIndex]; const newNodeId = nodeCounter.toString(); - // Create appropriate data based on node type + // Fetch default values for this node type + const defaults = await fetchDefaultValues(selectedType); + + // Store default values for this node type + setDefaultValues(prev => ({ + ...prev, + [selectedType]: defaults + })); + + // Create node data with label and initialize all expected fields as empty strings let nodeData = { label: `${selectedType} ${newNodeId}` }; - // Add type-specific default parameters - switch (selectedType) { - case 'process': - nodeData = { ...nodeData, residence_time: '', source_term: '', initial_value: '' }; - break; - case 'process_horizontal': - nodeData = { ...nodeData, residence_time: '', source_term: '', initial_value: '' }; - break; - case 'constant': - nodeData = { ...nodeData, value: '' }; - break; - case 'stepsource': - nodeData = { ...nodeData, amplitude: '1', delay: '1' }; - break; - case 'pulsesource': - nodeData = { ...nodeData, amplitude: '1', T: '1', t_rise: '0.0', t_fall: '0.0', tau: '0.0', duty: '0.5' }; - break; - case 'amplifier': - nodeData = { ...nodeData, gain: ''}; - break; - case 'amplifier_reverse': - nodeData = { ...nodeData, gain: ''}; - break; - case 'multiplier': - break; - case 'integrator': - nodeData = { ...nodeData, initial_value: '', reset_times: '' }; - break; - case 'adder': - break; - case 'scope': - nodeData = { ...nodeData }; - break; - case 'function': - nodeData = { ...nodeData, expression: '' }; - break; - case 'delay': - nodeData = { ...nodeData, tau: '' }; - break; - case 'rng': - nodeData = { ...nodeData, sampling_rate: ''}; - break; - case 'pid': - nodeData = { ...nodeData, Kp: '', Ki: '', Kd: '', f_max: '' }; - break; - case 'splitter2': - nodeData = { ...nodeData, f1: '0.5', f2: '0.5' }; - break; - case 'splitter3': - nodeData = { ...nodeData, f1: '1/3', f2: '1/3', f3: '1/3' }; - break; - case 'bubbler': - nodeData = { ...nodeData, conversion_efficiency: '0.95', vial_efficiency: '0.9', replacement_times: '' }; - break; - case 'white_noise': - nodeData = { ...nodeData, spectral_density: '1', sampling_rate: '' }; - break; - case 'pink_noise': - nodeData = { ...nodeData, spectral_density: '1', num_octaves: '16', sampling_rate: '' }; - break; - default: - // For any other types, just use basic data - break; - } + // Initialize all expected parameters as empty strings + Object.keys(defaults).forEach(key => { + nodeData[key] = ''; + }); const newNode = { id: newNodeId, @@ -1069,37 +1036,78 @@ export default function App() { }} >

{selectedNode.data.label}

- {Object.entries(selectedNode.data) - .map(([key, value]) => ( -
- - { - const newValue = e.target.value; - const updatedNode = { - ...selectedNode, - data: { ...selectedNode.data, [key]: newValue }, - }; - - setNodes((nds) => - nds.map((node) => - node.id === selectedNode.id ? updatedNode : node - ) - ); - setSelectedNode(updatedNode); - - }} + {(() => { + // Get default values for this node type + const nodeDefaults = defaultValues[selectedNode.type] || {}; + + // Create a list of all possible parameters (both current data and defaults) + const allParams = new Set([ + ...Object.keys(selectedNode.data), + ...Object.keys(nodeDefaults) + ]); + + return Array.from(allParams) + .map(key => { + const currentValue = selectedNode.data[key] || ''; + const defaultValue = nodeDefaults[key]; + const placeholder = defaultValue !== undefined && defaultValue !== null ? + String(defaultValue) : ''; + + return ( +
+ + { + const newValue = e.target.value; + const updatedNode = { + ...selectedNode, + data: { ...selectedNode.data, [key]: newValue }, + }; - style={{ width: '100%', marginTop: 4 }} - /> -
- ))} + setNodes((nds) => + nds.map((node) => + node.id === selectedNode.id ? updatedNode : node + ) + ); + setSelectedNode(updatedNode); + }} + style={{ + width: '100%', + marginTop: 4, + padding: '8px', + borderRadius: '4px', + border: '1px solid #555', + backgroundColor: '#2a2a3e', + color: '#ffffff', + fontSize: '14px' + }} + /> +
+ ); + }); + })()}