Merge branch 'main' into render-height-map

# Conflicts:
#	src/components/ParametersBar.tsx
#	src/pages/index.tsx

CHANGELOG.md

@@ -3,7 +3,7 @@
 
 
 <a name="Unreleased"></a>
-## Unreleased - 2023-10-04
+## Unreleased - 2023-10-07
 ### Ci
 - **actions:** create github action files ([#24](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/24))
 - **changelog:** fix the permission error ([#25](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/25))
@@ -26,37 +26,38 @@
 - **ParmetersBar:** initialize parameters bar with standard components
 - **README:** add badges
 - **Simulation:** completed the data interchange between the shader and the model
-- **Simulator:** readd basic hardware accelerated rendering of float arrays
-- **Simulator:** implement force interaction with model ([#13](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/13))
 - **Simulator:** added base code for rendering model output.
-- **Simulator:** add proper rendering of model output
 - **Simulator:** readd basic hardware accelerated rendering of float arrays Co-authored-by: Chenzhu <u7171958[@anu](https://github.com/anu).edu.au>
+- **Simulator:** add proper rendering of model output
+- **Simulator:** readd basic hardware accelerated rendering of float arrays
 - **Simulator:** added base code for rendering model output.
-- **about:** changed styling and content of about page and refactored docs
+- **Simulator:** implement force interaction with model ([#13](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/13))
 - **about:** add content for about page ([#12](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/12))
+- **about:** changed styling and content of about page and refactored docs
 - **app:** create the template for further development
 - **autosave:** implement autosave for models ([#147](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/147))
-- **index:** add simulator integration ([#14](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/14))
 - **index:** add ControlBar for simulation ([#21](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/21))
+- **index:** add simulator integration ([#14](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/14))
 - **model:** add model defination file to public ([#128](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/128))
 - **model-runtime:** add tfjs as a backend ([#88](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/88))
+- **modelService:** add support for switching backends ([#129](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/129))
 - **modelService:** add fps limitation when model running ([#9](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/9))
 - **modelService:** add fps limitation when model running
-- **modelService:** add support for switching backends ([#129](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/129))
-- **modelWorker:** change the output to density
 - **modelWorker:** add modelWorker to resolve foreground blocking ([#4](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/4))
+- **modelWorker:** change the output to density
+- **para-bar:** add ui to choose between model and initial statement ([#164](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/164))
 - **parameter-pane:** create components for parameter pane ([#52](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/52))
-- **persistence:** add the ability to serialize the model when needed ([#105](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/105))
 - **persistence:** add save/load to worker and buttons ([#116](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/116))
+- **persistence:** add the ability to serialize the model when needed ([#105](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/105))
 - **project:** re-init the project to use Nextjs, add contribution guide and related deps ([#2](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/2))
+- **simulator:** render a colored plane with threejs
 - **simulator:** add parameters setting ([#7](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/7))
-- **simulator:** add basic renderer and physics engine support
 - **simulator:** convert rendering to texture ([#19](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/19))
-- **simulator:** render a colored plane with threejs
+- **simulator:** add basic renderer and physics engine support
 - **theme:** add initial code for website themes ([#16](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/16))
 - **webgpu-rendering-context:** import webgpu renderer ([#99](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/99))
-- **website:** implement the responsive design ([#45](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/45))
 - **website:** add Navbar to the website;
+- **website:** implement the responsive design ([#45](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/45))
 - **website analytics:** add GA to web application
 
 ### Fix
@@ -75,6 +76,7 @@
 - **onnxruntime:** bump wasm version to 1.16.0 ([#127](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/127))
 - **package.json:** fix issue prevent dynamic reloading before
 - **project:** add/update return type for react funtions
+- **style:** fix style issue in index page & about page ([#163](https://github.com/techlauncher-mlai-edge-physics/physics_in_the_browser/issues/163))
 - **styles:** remove the margin for body element
 - **styles:** declare css module
 

package.json

@@ -29,7 +29,7 @@
     "rehype-sanitize": "^6.0.0",
     "styled-components": "^6.0.8",
     "three": "^0.157.0",
-    "vite": "^4.4.9"
+    "vite": "^4.4.11"
   },
   "devDependencies": {
     "@axe-core/react": "^4.7.3",
@@ -38,8 +38,8 @@
     "@types/react": "^18.2.23",
     "@types/react-dom": "^18.2.10",
     "@types/three": "^0.156.0",
-    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^6.7.3",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
     "@vitejs/plugin-react-swc": "^3.4.0",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",

src/components/ControlBar.tsx

@@ -1,7 +1,7 @@
 import { Button, Space } from 'antd';
 import styled from 'styled-components';
 import { type ModelSave } from '../services/model/modelService';
-import { useEffect, useRef, type ChangeEvent } from 'react';
+import { useEffect } from 'react';
 
 export const ControlBarContainer = styled(Space)`
   position: absolute;
@@ -44,10 +44,11 @@ export const RestoreBtn = styled(Button)`
 interface ControlBarProps {
   modelSaveSubs: Array<(save: ModelSave) => void>;
   worker: Worker;
+  setRestorePopupVisible: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export default function ControlBar(props: ControlBarProps): React.ReactElement {
-  const { modelSaveSubs, worker } = props;
+  const { modelSaveSubs, worker, setRestorePopupVisible } = props;
 
   useEffect(() => {
     modelSaveSubs.push((sav: ModelSave) => {
@@ -76,34 +77,9 @@ export default function ControlBar(props: ControlBarProps): React.ReactElement {
   }, [modelSaveSubs]);
 
   // take a file and send its contents to the worker
-  function load(file: File): void {
-    console.log('reading file ', file);
-
-    const reader = new FileReader();
-    reader.onload = () => {
-      const text: string = reader.result?.toString() ?? '';
-      const data = JSON.parse(text) as ModelSave;
-      console.log('got', data);
-      worker.postMessage({ func: 'deserialize', args: data });
-    };
-    reader.readAsText(file);
-  }
-
-  const inputFile = useRef<HTMLInputElement | null>(null);
-  const onChange = (e: ChangeEvent<HTMLInputElement>): void => {
-    e.persist();
-    load(e.target.files![0]);
-  };
 
   return (
     <>
-      <input
-        type="file"
-        id="file"
-        ref={inputFile}
-        style={{ display: 'none' }}
-        onChange={onChange}
-      />
       <SaveBtn
         onClick={() => {
           worker.postMessage({ func: 'serialize' });
@@ -113,7 +89,8 @@ export default function ControlBar(props: ControlBarProps): React.ReactElement {
       </SaveBtn>
       <RestoreBtn
         onClick={() => {
-          inputFile.current?.click();
+          // create a RestorePopup component to handle input
+          setRestorePopupVisible(true);
         }}
       >
         Restore Model