added placeholder in parameters input fields with default values

Author: RemDelaporteMathurin

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() {
               }}
             >
               <h3>{selectedNode.data.label}</h3>
-              {Object.entries(selectedNode.data)
-                .map(([key, value]) => (
-                  <div key={key} style={{ marginBottom: '10px' }}>
-                    <label>{key}:</label>
-                    <input
-                      type="text"
-                      value={value}
-                      onChange={(e) => {
-                        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 (
+                      <div key={key} style={{ marginBottom: '10px' }}>
+                        <label style={{ 
+                          color: '#ffffff', 
+                          display: 'block', 
+                          marginBottom: '4px',
+                          fontSize: '14px'
+                        }}>
+                          {key}:
+                        </label>
+                        <input
+                          type="text"
+                          value={currentValue}
+                          placeholder={placeholder}
+                          onChange={(e) => {
+                            const newValue = e.target.value;
+                            const updatedNode = {
+                              ...selectedNode,
+                              data: { ...selectedNode.data, [key]: newValue },
+                            };
 
-                      style={{ width: '100%', marginTop: 4 }}
-                    />
-                  </div>
-                ))}
+                            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'
+                          }}
+                        />
+                      </div>
+                    );
+                  });
+              })()}
 
               <br />
               <button
-                style={{ marginTop: 10 }}
+                style={{ 
+                  marginTop: 10,
+                  padding: '8px 16px',
+                  backgroundColor: '#666',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: 'pointer'
+                }}
                 onClick={() => setSelectedNode(null)}
               >
                 Close

src/backend.py

@@ -7,9 +7,10 @@
 from plotly.subplots import make_subplots
 import plotly
 import json as plotly_json
+import inspect
 
 from .convert_to_python import convert_graph_to_python
-from .pathsim_utils import make_pathsim_model
+from .pathsim_utils import make_pathsim_model, map_str_to_object
 from pathsim.blocks import Scope
 
 app = Flask(__name__)
@@ -34,6 +35,30 @@ def health_check():
     ), 200
 
 
+# returns default values for parameters of a node
+@app.route("/default-values/<string:node_type>", methods=["GET"])
+def get_default_values(node_type):
+    try:
+        if node_type not in map_str_to_object:
+            return jsonify({"error": f"Unknown node type: {node_type}"}), 400
+
+        block_class = map_str_to_object[node_type]
+        parameters_for_class = inspect.signature(block_class.__init__).parameters
+        default_values = {}
+        for param in parameters_for_class:
+            if param != "self":  # Skip 'self' parameter
+                default_value = parameters_for_class[param].default
+                if default_value is inspect._empty:
+                    default_values[param] = None  # Handle empty defaults
+                else:
+                    default_values[param] = default_value
+        return jsonify(default_values)
+    except Exception as e:
+        return jsonify(
+            {"error": f"Could not get default values for {node_type}: {str(e)}"}
+        ), 400
+
+
 # Function to save graphs
 @app.route("/save", methods=["POST"])
 def save_graph():