diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx
index ec8c0eb..ef41e4f 100644
--- a/webapp/src/App.tsx
+++ b/webapp/src/App.tsx
@@ -8,6 +8,7 @@ import { FileBar } from "./AppComponents/FileBar";
import { get_model, uploadFile } from "./AppComponents/rpc";
import {
createNewModel,
+ deleteSelectedModel,
loadModelFromStorageOrCreate,
saveModelToStorage,
saveSelectedModelInStorage,
@@ -86,6 +87,12 @@ function App() {
setModel(newModel);
}
}}
+ onDelete={() => {
+ const newModel = deleteSelectedModel();
+ if (newModel) {
+ setModel(newModel);
+ }
+ }}
/>
diff --git a/webapp/src/AppComponents/FileBar.tsx b/webapp/src/AppComponents/FileBar.tsx
index e7f685f..52aa85a 100644
--- a/webapp/src/AppComponents/FileBar.tsx
+++ b/webapp/src/AppComponents/FileBar.tsx
@@ -14,6 +14,7 @@ export function FileBar(properties: {
newModel: () => void;
setModel: (key: string) => void;
onModelUpload: (blob: ArrayBuffer, fileName: string) => Promise;
+ onDelete: () => void;
}) {
const hiddenInputRef = useRef(null);
const [toast, setToast] = useState(false);
@@ -32,6 +33,7 @@ export function FileBar(properties: {
const fileName = model.getName();
await downloadModel(bytes, fileName);
}}
+ onDelete={properties.onDelete}
/>
void;
onDownload: () => void;
onModelUpload: (blob: ArrayBuffer, fileName: string) => Promise;
+ onDelete: () => void;
}) {
const [isMenuOpen, setMenuOpen] = useState(false);
const [isImportMenuOpen, setImportMenuOpen] = useState(false);
@@ -69,6 +70,17 @@ export function FileMenu(props: {
Download (.xlsx)
+
+
+ {
+ props.onDelete();
+ setMenuOpen(false);
+ }}
+ >
+ Delete workbook
+
+
{elements}
@@ -122,6 +134,13 @@ const StyledFileUp = styled(FileUp)`
padding-right: 10px;
`;
+const StyledTrash = styled(Trash2)`
+ width: 16px;
+ height: 16px;
+ color: #333333;
+ padding-right: 10px;
+`;
+
const MenuDivider = styled("div")`
width: 80%;
margin: auto;
diff --git a/webapp/src/AppComponents/storage.ts b/webapp/src/AppComponents/storage.ts
index 1778496..c00aa8d 100644
--- a/webapp/src/AppComponents/storage.ts
+++ b/webapp/src/AppComponents/storage.ts
@@ -99,14 +99,31 @@ export function saveModelToStorage(model: Model) {
localStorage.setItem("models", JSON.stringify(models));
}
-export function selectModelFromStorage(uuid: string): Model | undefined {
+export function selectModelFromStorage(uuid: string): Model | null {
localStorage.setItem("selected", uuid);
const modelBytesString = localStorage.getItem(uuid);
if (modelBytesString) {
return Model.from_bytes(base64ToBytes(modelBytesString));
}
+ return null;
}
export function getSelectedUuuid(): string | null {
return localStorage.getItem("selected");
}
+
+export function deleteSelectedModel(): Model | null {
+ const uuid = localStorage.getItem("selected");
+ if (!uuid) {
+ return null;
+ }
+ localStorage.removeItem(uuid);
+ const metadata = getModelsMetadata();
+ delete metadata[uuid];
+ localStorage.setItem("models", JSON.stringify(metadata));
+ const uuids = Object.keys(metadata);
+ if (uuids.length === 0) {
+ return createNewModel();
+ }
+ return selectModelFromStorage(uuids[0]);
+}