UPDATE[WebApp]: we can now delete models on the localStorage

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);
+          }
+        }}
       />
       <Workbook model={model} workbookState={workbookState} />
     </Wrapper>

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<void>;
+  onDelete: () => void;
 }) {
   const hiddenInputRef = useRef<HTMLInputElement>(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}
       />
       <WorkbookTitle
         name={properties.model.getName()}

webapp/src/AppComponents/FileMenu.tsx

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Menu, MenuItem, Modal } from "@mui/material";
-import { FileDown, FileUp, Plus } from "lucide-react";
+import { FileDown, FileUp, Plus, Trash2 } from "lucide-react";
 import { useRef, useState } from "react";
 import { UploadFileDialog } from "./UploadFileDialog";
 import { getModelsMetadata, getSelectedUuuid } from "./storage";
@@ -10,6 +10,7 @@ export function FileMenu(props: {
   setModel: (key: string) => void;
   onDownload: () => void;
   onModelUpload: (blob: ArrayBuffer, fileName: string) => Promise<void>;
+  onDelete: () => void;
 }) {
   const [isMenuOpen, setMenuOpen] = useState(false);
   const [isImportMenuOpen, setImportMenuOpen] = useState(false);
@@ -69,6 +70,17 @@ export function FileMenu(props: {
             Download (.xlsx)
           </MenuItemText>
         </MenuItemWrapper>
+        <MenuItemWrapper>
+          <StyledTrash />
+          <MenuItemText
+            onClick={() => {
+              props.onDelete();
+              setMenuOpen(false);
+            }}
+          >
+            Delete workbook
+          </MenuItemText>
+        </MenuItemWrapper>
         <MenuDivider />
         {elements}
       </Menu>
@@ -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;

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]);
+}