fix(parameterComponent): import cloneDeep from lodash to fix missing import error

feat(parameterComponent): add support for process.env.PORT environment variable to be able to run app on a configurable port
fix(PageComponent): add conditional logic to fit the view based on the number of nodes in the flow

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -1,3 +1,4 @@
+import { cloneDeep } from "lodash";
 import React, {
   ReactNode,
   useContext,
@@ -68,7 +69,7 @@ export default function ParameterComponent({
   const { setErrorData } = useContext(alertContext);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
-  const { setTabsState, tabId, flows } = useContext(FlowsContext);
+  const { setTabsState, tabId, flows, tabsState } = useContext(FlowsContext);
 
   const flow = flows.find((flow) => flow.id === tabId)?.data?.nodes ?? null;
 
@@ -126,19 +127,14 @@ export default function ParameterComponent({
     data.node!.template[name].value = newValue;
     // Set state to pending
     //@ts-ignore
-    setTabsState((prev: TabsState) => {
+    if (data.node!.template[name].value !== newValue) {
-      if (!prev[tabId]) {
+      const tabs = cloneDeep(tabsState);
-        return prev;
+      tabs[tabId].isPending = false;
-      }
+      tabs[tabId].formKeysData = tabsState[tabId].formKeysData;
-      return {
+      setTabsState({
-        ...prev,
+        ...tabs,
-        [tabId]: {
+      });
-          ...prev[tabId],
+    }
-          isPending: true,
-          formKeysData: prev[tabId].formKeysData,
-        },
-      };
-    });
     renderTooltips();
   };
 

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -187,6 +187,15 @@ export default function Page({
     };
   }, []);
 
+  //remove this if you dont want to see the whole flow on fork
+  useEffect(() => {
+    setTimeout(() => {
+      flow?.data!.nodes!.length > 3
+        ? reactFlowInstance?.fitView({ padding: 0.1 })
+        : reactFlowInstance?.fitView({ padding: 0.5 });
+    }, 200);
+  }, []);
+
   const onEdgesChangeMod = useCallback(
     (change: EdgeChange[]) => {
       updateFlow({