Inform user some compounds will be ignored

Author: lars-petter-hauge

frontend/src/components/Simulation/ModelInputs.tsx

@@ -117,10 +117,19 @@ const ModelInputs: React.FC<{
         }))
     );
 
+    const firstModelValidSubstances =
+        selectedModels.length > 0 ? new Set(selectedModels[0].validSubstances) : new Set<string>();
+
     const allValidSubstances = new Set(selectedModels.flatMap((m) => m.validSubstances));
     const invisible = Array.from(allValidSubstances).filter((name) => concentrations[name] === undefined);
 
     const handleSubmit = () => {
+        const validConcentrations = Object.fromEntries(
+            Object.entries(concentrations).filter(
+                ([substance]) => selectedModels.length === 0 || firstModelValidSubstances.has(substance)
+            )
+        );
+
         const models = sortModelsByCategory(selectedModels).map((model) => {
             const store = getModelInputStore(model);
             const parameters = store.getState().parameters;
@@ -130,36 +139,64 @@ const ModelInputs: React.FC<{
             };
         });
 
-        onSubmit({ concentrations, models });
+        onSubmit({ concentrations: validConcentrations, models });
     };
 
+    const hasInvalidSubstances = Object.keys(concentrations).some(
+        (substance) => selectedModels.length > 0 && !firstModelValidSubstances.has(substance)
+    );
+    const hasNoValidSubstances = Object.keys(concentrations).every(
+        (substance) => selectedModels.length > 0 && !firstModelValidSubstances.has(substance)
+    );
+
     return (
         <div>
             <Columns>
                 <div>
                     <Typography variant="h3">Concentrations</Typography>
-                    {Object.entries(concentrations).map(([name, value]) => (
-                        <TextField
-                            type="number"
-                            key={name}
-                            label={optionName(name)}
-                            style={{ paddingTop: "5px" }}
-                            step="any"
-                            unit="ppm"
-                            max={PPM_MAX}
-                            value={value}
-                            onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                                setConcentration(name, Math.min(e.target.valueAsNumber, PPM_MAX))
-                            }
-                        />
-                    ))}
+                    {Object.entries(concentrations).map(([name, value]) => {
+                        const invalid = selectedModels.length > 0 && !firstModelValidSubstances.has(name);
+
+                        return (
+                            <TextField
+                                type="number"
+                                key={name}
+                                label={optionName(name)}
+                                style={{
+                                    paddingTop: "5px",
+                                    opacity: invalid ? 0.6 : 1,
+                                }}
+                                step="any"
+                                unit="ppm"
+                                max={PPM_MAX}
+                                value={value}
+                                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                                    setConcentration(name, Math.min(e.target.valueAsNumber, PPM_MAX))
+                                }
+                                helperText={invalid ? "⚠️ Not supported by selected models" : undefined}
+                                variant={invalid ? "error" : undefined}
+                            />
+                        );
+                    })}
                     <SubstanceAdder invisible={invisible} onAdd={(item: string) => setConcentration(item, 0)} />
                 </div>
                 {selectedModels.map((model) => (
                     <ModelParametersWrapper key={model.modelId} model={model} />
                 ))}
             </Columns>
-            <Button style={{ marginTop: "1em" }} onClick={handleSubmit}>
+            {hasInvalidSubstances && (
+                <Typography
+                    variant="body_short"
+                    style={{ marginTop: "1em", color: "var(--eds_interactive_warning__text, #ff9200)" }}
+                >
+                    ⚠️ Some substances are not supported by the first model and will be excluded from the simulation.
+                </Typography>
+            )}
+            <Button
+                style={{ marginTop: "1em" }}
+                onClick={handleSubmit}
+                disabled={hasNoValidSubstances || selectedModels.length === 0}
+            >
                 Run Simulation
             </Button>
         </div>