fix: web histories memory leak

frontend/src/App.tsx

@@ -42,7 +42,7 @@ import {
   Sick,
   Token,
 } from "@mui/icons-material";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { storeAtom } from "./store";
 import { useAtom } from "jotai";
 import { getList } from "./shared";
@@ -53,6 +53,7 @@ import HistoryDialog from "./components/History/HistoryDialog";
 import HistoryList from "./components/History/HistoryList";
 import MarkdownDiv from "./components/Common/MarkdownDiv";
 import InlineBox from "./components/Common/InlineBox";
+import useFunixHistory from "./shared/useFunixHistory";
 
 const drawerWidth = 240;
 
@@ -205,6 +206,7 @@ const App = () => {
     },
     setStore,
   ] = useAtom(storeAtom);
+  const { getHistories } = useFunixHistory();
 
   const funixBackend: string | undefined = process.env.REACT_APP_FUNIX_BACKEND;
   const selectedFunctionSecret: string | null = selectedFunction?.secret
@@ -226,6 +228,7 @@ const App = () => {
   const [tempAppSecret, setTempAppSecret] = useState(appSecret);
   const [functionListWidth, setFunctionListWidth] = useState(drawerWidth);
   const [onResizing, setOnResizing] = useState(false);
+  const historyLoaded = useRef<boolean>(false);
 
   const handlePointerMoveLeftSidebar = useCallback((e: PointerEvent | any) => {
     setFunctionListWidth(e.clientX - document.body.offsetLeft);
@@ -263,6 +266,27 @@ const App = () => {
       });
   }, [window.location.origin]);
 
+  useEffect(() => {
+    if (historyLoaded.current) {
+      return;
+    }
+    getHistories().then((histories) => {
+      setStore((store) => ({
+        ...store,
+        histories,
+      }));
+    });
+  }, [historyLoaded]);
+
+  window.addEventListener("funix-history-update", () => {
+    getHistories().then((histories) => {
+      setStore((store) => ({
+        ...store,
+        histories,
+      }));
+    });
+  });
+
   useEffect(() => {
     if (typeof backendURL === "undefined") return;
     setStore((store) => {
@@ -576,8 +600,8 @@ const App = () => {
               spacing={2}
             >
               <Typography variant="body2">
-                Power by <Link href="http://funix.io">Funix.io</Link>, minimally
-                building apps in Python
+                Power by <Link href="https://funix.io">Funix.io</Link>,
+                minimally building apps in Python
               </Typography>
               <Box>
                 <Link href="https://github.com/TexteaInc/funix">

frontend/src/components/FunixFunction/InputPanel.tsx

@@ -6,8 +6,7 @@ import {
   FormControlLabel,
   Grid,
 } from "@mui/material";
-import Card from "@mui/material/Card";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+import Card from "@mui/material/Card"; // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import Form from "@rjsf/material-ui/v5";
 import React, { useEffect, useState } from "react";
@@ -128,8 +127,18 @@ const InputPanel = (props: {
           }
         : form
       : form;
+    const isLarge =
+      Object.values(props.detail.schema.properties).findIndex((value) => {
+        const newValue = value as unknown as any;
+        const largeWidgets = ["image", "video", "audio", "file"];
+        if ("items" in newValue) {
+          return largeWidgets.includes(newValue.items.widget);
+        } else {
+          return largeWidgets.includes(newValue.widget);
+        }
+      }) !== -1;
 
-    if (saveHistory) {
+    if (saveHistory && !isLarge) {
       try {
         await setInput(now, props.preview.name, props.preview.path, newForm);
       } catch (error) {

frontend/src/components/FunixFunction/ObjectFieldExtendedTemplate.tsx

@@ -520,7 +520,7 @@ const ObjectFieldExtendedTemplate = (props: ObjectFieldProps) => {
           const result = props.properties.filter(
             (prop: any) => prop.name === rowItem.argument
           );
-          console.log(rowItem, result);
+          // console.log(rowItem, result);
           if (result.length === 0) {
             rowElement = null;
           } else {

frontend/src/components/History/HistoryDialog.tsx

@@ -30,7 +30,7 @@ import {
   FileDownload,
   Preview,
 } from "@mui/icons-material";
-import React, { useEffect } from "react";
+import React from "react";
 import {
   Timeline,
   TimelineConnector,
@@ -101,7 +101,9 @@ const HistoryDialog = (props: {
   open: boolean;
   setOpen: (open: boolean) => void;
 }) => {
-  const { getHistories, clearHistory, removeHistory, setHistoryNameAndPath } =
+  const [{ histories }] = useAtom(storeAtom);
+
+  const { clearHistory, removeHistory, setHistoryNameAndPath } =
     useFunixHistory();
   const [{ functions }, setStore] = useAtom(storeAtom);
   const [isAscending, setAscending] = React.useState(true);
@@ -114,6 +116,7 @@ const HistoryDialog = (props: {
   const [singleCollapsedMap, setSingleCollapsedMap] = React.useState<
     Record<string, Record<InputAndOutput, boolean>>
   >({});
+  // const loaded = useRef<boolean>(false);
   // const [backdropOpen, setBackdropOpen] = React.useState(false);
   // const [rewindSnackbarOpen, setRewindSnackbarOpen] = React.useState(false);
 
@@ -138,15 +141,19 @@ const HistoryDialog = (props: {
   //   backHistory(history);
   // };
 
-  const [histories, setHistories] = React.useState<History[]>([]);
-
-  useEffect(() => {
-    getHistories().then((h) => setHistories(h));
-  }, []);
-
-  window.addEventListener("funix-history-update", () => {
-    getHistories().then((h) => setHistories(h));
-  });
+  // const [histories, setHistories] = React.useState<History[]>([]);
+  //
+  // useEffect(() => {
+  //   if (loaded.current) {
+  //     return;
+  //   }
+  //   getHistories().then((h) => setHistories(h));
+  //   loaded.current = true;
+  // }, [loaded]);
+  //
+  // window.addEventListener("funix-history-update", () => {
+  //   getHistories().then((h) => setHistories(h));
+  // });
 
   return (
     <>
@@ -243,9 +250,7 @@ const HistoryDialog = (props: {
         <DialogActions>
           <Button
             onClick={() => {
-              getHistories().then((histories) => {
-                exportHistories(histories);
-              });
+              exportHistories(histories);
             }}
           >
             Export All
@@ -417,7 +422,7 @@ const HistoryDialog = (props: {
                                 history.input !== null &&
                                 getSingleCollapsed(history.uuid, "input")
                               }
-                              onChange={(event, expanded) => {
+                              onChange={(_event, expanded) => {
                                 setSingleCollapsedMap((prevState) => {
                                   return {
                                     ...prevState,
@@ -455,7 +460,7 @@ const HistoryDialog = (props: {
                                 history.output !== null &&
                                 getSingleCollapsed(history.uuid, "output")
                               }
-                              onChange={(event, expanded) => {
+                              onChange={(_event, expanded) => {
                                 setSingleCollapsedMap((prevState) => {
                                   return {
                                     ...prevState,
@@ -559,7 +564,7 @@ const HistoryDialog = (props: {
                               size="small"
                               color="error"
                               startIcon={<Delete />}
-                              onClick={() => removeHistory(history.uuid)}
+                              onClick={() => removeHistory(history.timestamp)}
                             >
                               Delete
                             </Button>

frontend/src/components/History/HistoryList.tsx

@@ -30,29 +30,19 @@ import React, { useEffect, useState } from "react";
 import { exportHistory } from "../../shared";
 
 const HistoryList = () => {
-  const { getHistories, setHistoryNameAndPath, removeHistory } =
-    useFunixHistory();
-  const [{ selectedFunction }, setStore] = useAtom(storeAtom);
+  const { setHistoryNameAndPath, removeHistory } = useFunixHistory();
+  const [{ selectedFunction, histories }, setStore] = useAtom(storeAtom);
   const [selectedHistoryTimestamp, setSelectedHistoryTimestamp] = useState(-1);
   const [selectedHistory, setSelectedHistory] = useState<null | History>(null);
   const [renameDialogOpen, setRenameDialogOpen] = useState(false);
   const [tempRename, setTempRename] = useState("");
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const [histories, setHistories] = useState<History[]>([]);
   const open = Boolean(anchorEl);
 
   useEffect(() => {
     setSelectedHistoryTimestamp(-1);
   }, [selectedFunction]);
 
-  useEffect(() => {
-    getHistories().then((h) => setHistories(h));
-  }, []);
-
-  window.addEventListener("funix-history-update", () => {
-    getHistories().then((h) => setHistories(h));
-  });
-
   if (selectedFunction === null || histories.length === 0) {
     return (
       <List component="nav">
@@ -133,7 +123,7 @@ const HistoryList = () => {
         <MenuItem
           onClick={() => {
             if (selectedHistory !== null) {
-              removeHistory(selectedHistory.uuid);
+              removeHistory(selectedHistory.timestamp);
             }
             setSelectedHistory(null);
             setAnchorEl(null);

frontend/src/components/History/HistoryUtils.tsx

@@ -21,19 +21,21 @@ export type HistoryInfoProps = {
 export const getHistoryInfo = (history: History): HistoryInfoProps => {
   let status: HistoryEnum;
 
-  if (history.input === null) {
+  if (history.input === null || history.input === undefined) {
     status = HistoryEnum.Unknown;
   } else {
-    if (history.output === null) {
+    if (history.output === null || history.output === undefined) {
       status = HistoryEnum.Pending;
     } else {
       status = HistoryEnum.Done;
     }
   }
 
   const hasSecret =
-    history.input !== null ? "__funix_secret" in history.input : false;
-  if (history.output !== null) {
+    history.input !== null && history.input !== undefined
+      ? "__funix_secret" in history.input
+      : false;
+  if (history.output !== null && history.output !== undefined) {
     try {
       let output = history.output;
       if (typeof history.output === "string") {