feat: restore selected model when navigating back to graph page (#789)

frontend/packages/core/src/hooks/useGlobalState.tsx → frontend/packages/core/src/hooks/useGlobalState.ts

@@ -4,10 +4,12 @@ import type {Dispatch} from 'react';
 
 export interface GlobalState {
     runs: string[];
+    model: FileList | File[] | null;
 }
 
 export const globalState: GlobalState = {
-    runs: []
+    runs: [],
+    model: null
 };
 
 export const GlobalStateContext = createContext<GlobalState>(globalState);

frontend/packages/core/src/hooks/useRequest.ts

@@ -21,7 +21,7 @@ function useRequest<D = unknown, E = unknown>(
     config?: ConfigInterface<D, E, fetcherFn<D>>
 ): Response<D, E> {
     const {data, error, ...other} = useSWR<D, E>(key, fetcher, config);
-    const loading = useMemo(() => !data && !error, [data, error]);
+    const loading = useMemo(() => !!key && !data && !error, [key, data, error]);
     return {data, error, loading, ...other};
 }
 

frontend/packages/core/src/pages/graph.tsx

@@ -20,6 +20,7 @@ import Search from '~/components/GraphPage/Search';
 import Title from '~/components/Title';
 import Uploader from '~/components/GraphPage/Uploader';
 import styled from 'styled-components';
+import useGlobalState from '~/hooks/useGlobalState';
 import useRequest from '~/hooks/useRequest';
 import {useTranslation} from 'react-i18next';
 
@@ -70,23 +71,30 @@ const Loading = styled.div`
 const Graph: FunctionComponent = () => {
     const {t} = useTranslation(['graph', 'common']);
 
-    const {data, loading} = useRequest<BlobResponse>('/graph/graph', blobFetcher);
+    const [globalState, globalDispatch] = useGlobalState();
 
     const graph = useRef<GraphRef>(null);
     const file = useRef<HTMLInputElement>(null);
-    const [files, setFiles] = useState<FileList | File[] | null>(null);
+    const [files, setFiles] = useState<FileList | File[] | null>(globalState.model);
     const onClickFile = useCallback(() => {
         if (file.current) {
             file.current.value = '';
             file.current.click();
         }
     }, []);
-    const onChangeFile = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-        const target = e.target;
-        if (target && target.files && target.files.length) {
-            setFiles(target.files);
-        }
-    }, []);
+    const onChangeFile = useCallback(
+        (e: React.ChangeEvent<HTMLInputElement>) => {
+            const target = e.target;
+            if (target && target.files && target.files.length) {
+                globalDispatch({model: target.files});
+                setFiles(target.files);
+            }
+        },
+        [globalDispatch]
+    );
+
+    const {data, loading} = useRequest<BlobResponse>(files ? null : '/graph/graph', blobFetcher);
+
     useEffect(() => {
         if (data?.data.size) {
             setFiles([new File([data.data], data.filename || 'unknwon_model')]);