feat: add size warning dialog

README.md

@@ -44,7 +44,7 @@ Or you can use the WASM version in the browser: [GSA Treemap](https://gsa.zxilly
 > Due to the limitation of the browser, the wasm version is much slower than the native version.
 > Normally costs 10x time to analyze the same binary.
 > 
-> Only recommended for analysing small applications (less than 15MB in size)
+> Only recommended for analysing small applications (less than 30 MB in size)
 
 The web page will look like this:
 

README_zh-CN.md

@@ -42,7 +42,7 @@ $ gsa --web golang-compiled-binary
 > 由于浏览器的限制，wasm 版本比原生版本慢得多。
 > 通常分析相同二进制文件需要 10 倍的时间。
 > 
-> 仅建议用于分析小型应用程序（大小小于 15MB）
+> 仅建议用于分析小型应用程序（大小小于 30 MB）
 
 网页将如下所示：
 

ui/src/explorer_main.tsx

@@ -1,13 +1,23 @@
 import {useAsync} from "react-use";
 import ReactDOM from "react-dom/client";
-import React, {ReactNode, useEffect, useMemo} from "react";
-import {Box, Button, CssBaseline, Dialog, DialogContent, DialogContentText, DialogTitle, Link} from "@mui/material";
+import React, {ReactNode, useCallback, useEffect, useMemo, useState} from "react";
+import {
+    Box,
+    Button,
+    CssBaseline,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    Link
+} from "@mui/material";
 
 import "./tool/wasm_exec.js"
 
 import gsa from "../gsa.wasm?init"
 
-import {loadDataFromWasmResult} from "./tool/utils.ts";
+import {formatBytes, loadDataFromWasmResult} from "./tool/utils.ts";
 import {Entry} from "./tool/entry.ts";
 import TreeMap from "./TreeMap.tsx";
 
@@ -23,12 +33,58 @@ type ModalState = {
 
 type fileChangeHandler = (file: File) => void
 
+const SizeLimit = 1024 * 1024 * 30
+
 const FileSelector = ({handler}: {
     value?: File | null,
     handler: fileChangeHandler
 }) => {
+    const [open, setOpen] = useState(false)
+    const [pendingFile, setPendingFile] = useState<File | null>(null)
+
+    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        if (!e.target.files || e.target.files.length === 0) {
+            return
+        }
+
+        const f = e.target.files[0]
+
+        if (f.size > SizeLimit) {
+            setOpen(true)
+            setPendingFile(f)
+            return
+        } else {
+            handler(f)
+        }
+
+    }, [])
+
+    const handleClose = useCallback(() => {
+        setOpen(false)
+    }, [])
+
     return (
         <>
+            <Dialog
+                open={open}
+            >
+                <DialogTitle>
+                    Binary too large
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText>
+                        The selected binary {pendingFile?.name} has a size of {formatBytes(pendingFile?.size || 0)}.
+                        It is not recommended to use the wasm version for binary files larger than 30MB.
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={handleClose}>Cancel</Button>
+                    <Button onClick={() => {
+                        handler(pendingFile!)
+                        setOpen(false)
+                    }}>Continue</Button>
+                </DialogActions>
+            </Dialog>
             <Box
                 display="flex"
                 justifyContent="center"
@@ -42,12 +98,8 @@ const FileSelector = ({handler}: {
                     Select file
                     <input
                         type="file"
-                        onChange={(e) => {
-                            const file = e.target.files?.item(0)
-                            if (file) {
-                                handler(file)
-                            }
-                        }}
+                        multiple={false}
+                        onChange={handleChange}
                         hidden
                     />
                 </Button>

ui/src/main.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import TreeMap from './TreeMap.tsx'
 
+import TreeMap from './TreeMap.tsx'
 import {loadDataFromEmbed} from "./tool/utils.ts";
 import {Entry} from "./tool/entry.ts";