fix jsroot and results (#436)(#358) (#471)

* fix start script

* fix results refreshing

* fix 1d graph

README.md

@@ -4,12 +4,18 @@
 
 The development version is unstable, without many features and with lot o bugs.
 It is released automatically after every commit to the main branch of this repository and is available for testing here:
-https://yaptide.github.io/web_dev/
+<https://yaptide.github.io/web_dev/>
 
 The stable version is not released yet, have patience.
 
 ## For developers
 
+Start by downloading submodules:
+
+```bash
+git submodule update --init --recursive
+```
+
 Before starting the local version of the web interface, you need to install the necessary dependencies by typing:
 
 ```bash
@@ -26,15 +32,20 @@ Then open [http://localhost:3000/web_dev](http://localhost:3000/web_dev) to view
 
 The page will reload if you make edits.
 
+## Requirements
+
+- Node.js 16.x or higher
+- Python 3.9+
+
 ## Credits
 
 This project adapts source code from the following libraries:
 
--   CSG javascript library https://github.com/manthrax/THREE-CSGMesh
-    -   parts of its code copied into `src/ThreeEditor/js/libs/csg/`
-    -   adapted by adding types in separate file
--   ThreeJS editor https://threejs.org/editor/
-    -   most of its code copied from [github mrdoob repo](https://github.com/mrdoob/three.js/tree/r132/editor) into `src/ThreeEditor`, starting from v.132
-    -   most of copied code adapted to yaptide needs
+- CSG javascript library <https://github.com/manthrax/THREE-CSGMesh>
+  - parts of its code copied into `src/ThreeEditor/js/libs/csg/`
+  - adapted by adding types in separate file
+- ThreeJS editor <https://threejs.org/editor/>
+  - most of its code copied from [github mrdoob repo](https://github.com/mrdoob/three.js/tree/r132/editor) into `src/ThreeEditor`, starting from v.132
+  - most of copied code adapted to yaptide needs
 
-This work was partially funded by EuroHPC PL Project, Smart Growth Operational Programme 4.2
+This work was partially funded by EuroHPC PL Project, Smart Growth Operational Programme 4.2

buildPython.js

@@ -2,6 +2,7 @@ const fs = require("fs");
 const glob = require("glob")
 const { execSync } = require("child_process");
 const { exit } = require("process");
+const commandExists = require('command-exists');
 
 
 const SKIP = process.argv[2] === 'skip';
@@ -29,6 +30,11 @@ const saveFileName = (destFolder, fileName) => {
 }
 
 (async () => {
+    const PYTHON = await commandExists('python3').then(_ => 'python3')
+        .catch(_ => commandExists('python')).then(_ => 'python')
+        .catch(_ => { console.error("Python does not found"); exit(1) });
+
+
     const installedPath = await globPromise(destFolder + 'yaptide_converter-*-py3-none-any.whl').then(files => files[0]);
     const installedFileName = installedPath?.split('/').pop();
 
@@ -51,13 +57,13 @@ const saveFileName = (destFolder, fileName) => {
 
 
         measureTime('Installing build module for python', () => {
-            execSync("python3 -m pip install build", {
+            execSync(`${PYTHON} -m pip install build`, {
                 cwd: srcFolder
             });
         });
 
         measureTime('Building yaptide_converter', () => {
-            execSync("python3 -m build", {
+            execSync(`${PYTHON} -m build`, {
                 cwd: srcFolder
             })
         });

package.json

@@ -19,6 +19,7 @@
 		"@types/throttle-debounce": "^5.0.0",
 		"@uiw/react-textarea-code-editor": "^2.0.2",
 		"comlink": "^4.3.1",
+		"command-exists": "^1.2.9",
 		"glob": "^8.0.3",
 		"ky": "^0.31.0",
 		"notistack": "^2.0.5",

src/JsRoot/JsRootGraph1D.tsx

@@ -6,7 +6,7 @@ import { Page1D } from './GraphData';
 
 export function JsRootGraph1D(props: Page1D) {
 	const { JSROOT } = useJSROOT();
-	// Custom react hook, visible contains the percentage of the containterEl 
+	// Custom react hook, visible contains the percentage of the containterEl
 	// that is currently visible on screen
 	const [containerEl, visible] = useVisible<HTMLDivElement>();
 
@@ -15,13 +15,13 @@ export function JsRootGraph1D(props: Page1D) {
 	const [isVisible, setIsVisible] = useState(false);
 
 	useEffect(() => {
-		// Update isVisible if more than 30% of containerEl is visible 
+		// Update isVisible if more than 30% of containerEl is visible
 		setIsVisible(visible > 0.3);
 		return () => setIsVisible(false);
 	}, [visible]);
 
 	useEffect(() => {
-		if (drawn || !visible) return;
+		if (!visible) return;
 		// create example graph
 		const npoints = props.data.values.length;
 		const y = props.data.values;
@@ -34,7 +34,7 @@ export function JsRootGraph1D(props: Page1D) {
 
 		setObj(graph);
 		setDrawn(false);
-	}, [JSROOT, drawn, props, visible]);
+	}, [JSROOT, props, visible]);
 
 	useEffect(() => {
 		if (obj && !drawn && isVisible) {

src/JsRoot/JsRootService.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useRef, useState } from 'react';
 import { createGenericContext } from '../util/GenericContext';
 import makeAsyncScriptLoader from 'react-async-script';
 
@@ -27,9 +27,10 @@ const [useJSROOT, JsRootContextProvider] = createGenericContext<IJsRoot>();
 
 const JsRoot = (props: JsRootProps) => {
 	const [value, setValue] = useState<IJsRoot>();
+	const painterScript = useRef<HTMLScriptElement>();
 
 	useEffect(() => {
-		if (!props.JSROOT) return;
+		if (!props.JSROOT || painterScript.current) return;
 
 		const script = document.createElement('script');
 
@@ -42,6 +43,7 @@ const JsRoot = (props: JsRootProps) => {
 				if (prop === 'Painter') {
 					// detect JSROOT.Painter loaded
 					setValue({ JSROOT: window.JSROOT });
+					painterScript.current = script;
 				}
 				return true;
 			}
@@ -52,6 +54,15 @@ const JsRoot = (props: JsRootProps) => {
 		document.body.appendChild(script);
 	}, [props.JSROOT]);
 
+	useEffect(() => {
+		return () => {
+			if (painterScript.current) {
+				painterScript.current.remove();
+				painterScript.current = undefined;
+			}
+		};
+	}, []);
+
 	return (
 		<JsRootContextProvider value={value}>
 			{value?.JSROOT && props.children}

src/WrapperApp/components/ResultsPanel.tsx

@@ -11,14 +11,14 @@ function ResultsPanel() {
 
 	const [tabsValue, setTabsValue] = useState(0);
 
+	useEffect(() => {
+		setTabsValue(0);
+	}, [simulation]);
+
 	const handleChange = (_event: SyntheticEvent, newValue: number) => {
 		setTabsValue(newValue);
 	};
 
-	useEffect(() => {
-		console.log(simulation);
-	}, [simulation]);
-
 	return (
 		<Box>
 			{simulation && (
@@ -45,52 +45,56 @@ function ResultsPanel() {
 					maxWidth: '100vw',
 					width: '100%'
 				}}>
-				<Card
-					sx={{
-						margin: '0.5rem',
-						height: 'min-content',
-						overflow: 'unset'
-					}}>
-					<CardContent>
-						<Tabs
-							sx={{ flexShrink: 0 }}
-							orientation='vertical'
-							variant='scrollable'
-							value={tabsValue}
-							onChange={handleChange}>
-							{simulation?.result?.estimators.map((estimator, idx) => {
-								return (
-									<Tab
-										key={`tab_${estimator.name}`}
-										label={estimator.name}
-										value={idx}
-									/>
-								);
-							})}
-						</Tabs>
-					</CardContent>
-				</Card>
-				<Card
-					sx={{
-						margin: '0.5rem',
-						bgcolor: prefersDarkMode ? 'text.disabled' : 'background.paper'
-					}}>
-					<CardContent>
-						{simulation?.result?.estimators.map((estimator, idx) => {
-							return (
-								<TabPanel
-									key={`tab_panel_${estimator.name}`}
+				{(simulation?.result?.estimators?.length ?? 0) > 0 && (
+					<>
+						<Card
+							sx={{
+								margin: '0.5rem',
+								height: 'min-content',
+								overflow: 'unset'
+							}}>
+							<CardContent>
+								<Tabs
+									sx={{ flexShrink: 0 }}
+									orientation='vertical'
+									variant='scrollable'
 									value={tabsValue}
-									index={idx}
-									persistent>
-									<Grid container spacing={1}>
-										{generateGraphs(estimator)}
-									</Grid>
-								</TabPanel>
-							);
-						})}
-					</CardContent>
-				</Card>
+									onChange={handleChange}>
+									{simulation?.result?.estimators.map((estimator, idx) => {
+										return (
+											<Tab
+												key={`tab_${estimator.name}`}
+												label={estimator.name}
+												value={idx}
+											/>
+										);
+									})}
+								</Tabs>
+							</CardContent>
+						</Card>
+						<Card
+							sx={{
+								margin: '0.5rem',
+								bgcolor: prefersDarkMode ? 'text.disabled' : 'background.paper'
+							}}>
+							<CardContent>
+								{simulation?.result?.estimators.map((estimator, idx) => {
+									return (
+										<TabPanel
+											key={`tab_panel_${estimator.name}`}
+											value={tabsValue}
+											index={idx}
+											persistentIfVisited>
+											<Grid container spacing={1}>
+												{generateGraphs(estimator)}
+											</Grid>
+										</TabPanel>
+									);
+								})}
+							</CardContent>
+						</Card>
+					</>
+				)}
 			</Box>
 		</Box>
 	);