UPDATE: Add placeholders for all functions

webapp/src/App.tsx

@@ -5,7 +5,11 @@ import styled from "@emotion/styled";
 import init, { Model } from "@ironcalc/wasm";
 import { useEffect, useState } from "react";
 import { FileBar } from "./AppComponents/FileBar";
-import { get_model, uploadFile } from "./AppComponents/rpc";
+import {
+  get_documentation_model,
+  get_model,
+  uploadFile,
+} from "./AppComponents/rpc";
 import {
   createNewModel,
   deleteSelectedModel,
@@ -20,7 +24,7 @@ import { IronCalcIcon } from "./icons";
 function App() {
   const [model, setModel] = useState<Model | null>(null);
   const [workbookState, setWorkbookState] = useState<WorkbookState | null>(
-    null,
+    null
   );
 
   useEffect(() => {
@@ -29,6 +33,7 @@ function App() {
       const queryString = window.location.search;
       const urlParams = new URLSearchParams(queryString);
       const modelHash = urlParams.get("model");
+      const filename = urlParams.get("filename");
       // If there is a model name ?model=modelHash we try to load it
       // if there is not, or the loading failed we load an empty model
       if (modelHash) {
@@ -41,6 +46,16 @@ function App() {
         } catch (e) {
           alert("Model not found, or failed to load");
         }
+      }
+      if (filename) {
+        try {
+          const model_bytes = await get_documentation_model(filename);
+          const importedModel = Model.from_bytes(model_bytes);
+          localStorage.removeItem("selected");
+          setModel(importedModel);
+        } catch (e) {
+          alert("Model not found, or failed to load");
+        }
       } else {
         // try to load from local storage
         const newModel = loadModelFromStorageOrCreate();
@@ -121,7 +136,7 @@ const Loading = styled("div")`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-family: 'Inter';
+  font-family: "Inter";
   font-size: 14px;
 `;
 

webapp/src/AppComponents/rpc.ts

@@ -21,6 +21,12 @@ export async function get_model(modelHash: string): Promise<Uint8Array> {
   );
 }
 
+export async function get_documentation_model(filename: string): Promise<Uint8Array> {
+  return new Uint8Array(
+    await (await fetch(`/models/${filename}.ic`)).arrayBuffer(),
+  );
+}
+
 export async function downloadModel(bytes: Uint8Array, fileName: string) {
   const response = await fetch("/api/download", {
     method: "POST",