diff --git a/frontend/packages/core/src/hooks/useGlobalState.tsx b/frontend/packages/core/src/hooks/useGlobalState.ts similarity index 88% rename from frontend/packages/core/src/hooks/useGlobalState.tsx rename to frontend/packages/core/src/hooks/useGlobalState.ts index d39236131..ee59f9092 100644 --- a/frontend/packages/core/src/hooks/useGlobalState.tsx +++ b/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); diff --git a/frontend/packages/core/src/hooks/useRequest.ts b/frontend/packages/core/src/hooks/useRequest.ts index fa4b0efa5..96b2f3ac5 100644 --- a/frontend/packages/core/src/hooks/useRequest.ts +++ b/frontend/packages/core/src/hooks/useRequest.ts @@ -21,7 +21,7 @@ function useRequest( config?: ConfigInterface> ): Response { const {data, error, ...other} = useSWR(key, fetcher, config); - const loading = useMemo(() => !data && !error, [data, error]); + const loading = useMemo(() => !!key && !data && !error, [key, data, error]); return {data, error, loading, ...other}; } diff --git a/frontend/packages/core/src/pages/graph.tsx b/frontend/packages/core/src/pages/graph.tsx index 1c8bb47ec..46da33756 100644 --- a/frontend/packages/core/src/pages/graph.tsx +++ b/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('/graph/graph', blobFetcher); + const [globalState, globalDispatch] = useGlobalState(); const graph = useRef(null); const file = useRef(null); - const [files, setFiles] = useState(null); + const [files, setFiles] = useState(globalState.model); const onClickFile = useCallback(() => { if (file.current) { file.current.value = ''; file.current.click(); } }, []); - const onChangeFile = useCallback((e: React.ChangeEvent) => { - const target = e.target; - if (target && target.files && target.files.length) { - setFiles(target.files); - } - }, []); + const onChangeFile = useCallback( + (e: React.ChangeEvent) => { + const target = e.target; + if (target && target.files && target.files.length) { + globalDispatch({model: target.files}); + setFiles(target.files); + } + }, + [globalDispatch] + ); + + const {data, loading} = useRequest(files ? null : '/graph/graph', blobFetcher); + useEffect(() => { if (data?.data.size) { setFiles([new File([data.data], data.filename || 'unknwon_model')]);