Merge pull request #230 from ITISFoundation/223-outputdistributions-does-not-get-updated-upon-changing-selectedfunction

fix: outputs now update when changing function

Author: alexpargon

node/src/components/setup/AddOutputModal.tsx

@@ -66,7 +66,10 @@ export const AddOutputModal = (props: AddOutputModalProps) => {
             </MenuItem>
           ))}
         </Select>
-        <Button onClick={() => onChange(selected)} sx={{ backgroundColor: theme.palette.primary.main, marginTop: "16px" }}>
+        <Button
+          onClick={() => onChange(selected)}
+          sx={{ backgroundColor: theme.palette.primary.main, marginTop: "16px" }}
+        >
           <Typography variant="body1" color={theme.palette.text.primary}>
             Add
           </Typography>

node/src/components/setup/OutputVariableDist.tsx

@@ -42,6 +42,25 @@ export const OutputVariableDist = () => {
     [outputDistribution, selectedFunction, setOutputDistribution]
   );
 
+  useEffect(() => {
+    if (
+      outputDistribution &&
+      selectedFunction &&
+      outputDistribution[selectedFunction.uid]
+    ) {
+      setConfiguredOutputs(outputDistribution[selectedFunction.uid]);
+    } else {
+      if (outputVars && outputVars.length > 0) {
+        handlesetConfiguredOutputs(
+          Object.fromEntries(outputVars.map((v) => [v, "minimize"]))
+        );
+      } else {
+        handlesetConfiguredOutputs({});
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [outputDistribution, outputVars, selectedFunction]);
+
   if (outputVars && outputVars.length === 0) {
     return <></>;
   }

node/src/components/utils/CustomAnimatedToggle.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Box, Button, useTheme } from "@mui/material";
 
 interface CustomAnimatedToggleProps {
@@ -19,6 +19,10 @@ export const CustomAnimatedToggle = (props: CustomAnimatedToggleProps) => {
     onChange(index);
   };
 
+  useEffect(() => {
+    setSelected(value);
+  }, [value]);
+
   return (
     <Box
       sx={{