diff --git a/frontend/packages/core/src/components/Loader/RunList.tsx b/frontend/packages/core/src/components/Loader/RunList.tsx
index 4ce412bf02da5b137f73dd56c8cf7f3da105e4c1..fab31cea766fc438012205540ccf3a515030468b 100644
--- a/frontend/packages/core/src/components/Loader/RunList.tsx
+++ b/frontend/packages/core/src/components/Loader/RunList.tsx
@@ -22,11 +22,11 @@ const RunList: FunctionComponent<{count?: number}> = ({count}) => {
return (
{Array.from({length: count ?? 2}).map((_, i) => (
- <>
+
- >
+
))}
);
diff --git a/frontend/packages/core/src/pages/graph.tsx b/frontend/packages/core/src/pages/graph.tsx
index 7efdd1e39cbf7b2f70681caffa6059ecbbf9fad9..b8b9fb1e20548bcd9286bce0d1b92a626d0891e3 100644
--- a/frontend/packages/core/src/pages/graph.tsx
+++ b/frontend/packages/core/src/pages/graph.tsx
@@ -94,6 +94,13 @@ const Graph: FunctionComponent = () => {
const graph = useRef(null);
const file = useRef(null);
const [files, setFiles] = useState(storeModel);
+ const setModelFile = useCallback(
+ (f: FileList | File[]) => {
+ storeDispatch(actions.graph.setModel(f));
+ setFiles(f);
+ },
+ [storeDispatch]
+ );
const onClickFile = useCallback(() => {
if (file.current) {
file.current.value = '';
@@ -104,11 +111,10 @@ const Graph: FunctionComponent = () => {
(e: React.ChangeEvent) => {
const target = e.target;
if (target && target.files && target.files.length) {
- storeDispatch(actions.graph.setModel(target.files));
- setFiles(target.files);
+ setModelFile(target.files);
}
},
- [storeDispatch]
+ [setModelFile]
);
const {data, loading} = useRequest(files ? null : '/graph/graph');
@@ -280,7 +286,10 @@ const Graph: FunctionComponent = () => {
nodeDocumentation
]);
- const uploader = useMemo(() => , [onClickFile]);
+ const uploader = useMemo(() => , [
+ onClickFile,
+ setModelFile
+ ]);
return (
<>