55 Add Dynamic Configurations

src/client/App.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
@@ -33,12 +33,11 @@ import {
 
 import QuickActions from './components/QuickActions';
 import TabContainer from './components/Layouts/TabContainer';
-import Options from './components/Options/index';
+import RenderingOptions from './components/Options/RenderingOptions';
 import Benchmark from './components/Benchmark';
 import CodeEditor from './components/Editors/CodeEditor';
 import DebugPanel from './components/Debug';
-import TitledSlider from './components/Inputs/TitledSlider';
-import CodeEditorSection from './components/Editors/CodeEditor/CodeEditorSection';
+import SceneConfigurations from './components/Options/SceneConfigurations';
 
 import exampleConfigs from '../scenes';
 
@@ -60,9 +59,9 @@ const App = () => {
   const [selectedBackgroundField, setSelectedBackgroundField] = useState(getDefaultField(config?.env?.fields) ?? null);
   const [benchSettings, setBenchSettings] = useState(exampleConfigs[selectedScene].benchmarkConfig);
   const [description, setDescription] = useState(exampleConfigs[selectedScene].description);
-  const [uiEnabled, setUiEnabled] = useState(false);
+  const [uiEnabled, setUiEnabled] = useState(true);
   const [time, setTime] = useState(0);
-  const [robotParams, setRobotParams] = useState({ velocityScale: 1 });
+  const [dynamicParams, setDynamicParams] = useState({});
   const [renderSkip, setRenderSkip] = useState(1);
   const [paused, setPaused] = useState(false);
   const [benchmarkData, setBenchmarkData] = useState({});
@@ -87,11 +86,14 @@ const App = () => {
     setSelectedScene(newScene);
   };
 
-  const onRobotParamsChange = ({ velocityScale }) => {
-    const v = parseFloat(velocityScale);
-    setRobotParams((oldParams) => ({ ...oldParams, velocityScale: v }));
-    sceneSetRobotParams(v);
-  };
+  const onDynamicPropsChange = useCallback((props) => {
+    setDynamicParams((oldParams) => {
+      const newProps = { ...oldParams, ...props };
+      sceneSetRobotParams(newProps);
+      resetRenderer();
+      return newProps;
+    });
+  }, []);
 
   const onRenderSkipChange = (newRS) => {
     const rs = parseInt(newRS);
@@ -106,6 +108,7 @@ const App = () => {
   };
 
   const reset = (newConfig = config, stopBench = false, useDefaultController = true) => {
+    // TODO: setLoading until scene is initialized
     if (stopBench && isBenchmarking()) {
       stopBenchmark();
     }
@@ -140,7 +143,20 @@ const App = () => {
     });
 
     resetSimulation(usedConfig, onUpdate, updateDefaultControllerCode);
-    onRobotParamsChange({ velocityScale: newConfig?.robots?.params?.velocityScale || 1 });
+
+    const defaultDynamicValues = usedConfig.dynamicPropertyDefinitions.reduce((acc, pDef) => {
+      let defaultVal = pDef.defaultValue;
+
+      if (defaultVal && typeof defaultVal === 'function') {
+        defaultVal = defaultVal(usedConfig);
+      }
+
+      acc[pDef.name] = defaultVal;
+
+      return acc;
+    }, {});
+
+    onDynamicPropsChange(defaultDynamicValues);
     onRenderSkipChange(newConfig.env.renderSkip);
     setPaused(false);
     resetRenderer();
@@ -226,35 +242,20 @@ const App = () => {
     </div>
   );
 
-  const optionsElem = initialized ? (
-    <Options
+  const renderingOptionsElem = initialized ? (
+    <RenderingOptions
       renderSkip={renderSkip}
       setRenderSkip={onRenderSkipChange}
       renderingElements = {uniqueRenderingElements(config.renderables)}
       setElementEnabled={setElementEnabled}
     />
   ) : <></>;
 
-  const configurationsElem = (
-    <>
-      <TitledSlider
-        title='Velocity'
-        value={robotParams.velocityScale}
-        setValue={(newV) => onRobotParamsChange({ velocityScale: newV })}
-        toolTip='Controls robots velocity, only works when supported in robot controller.'
-      />
-      <CodeEditorSection
-        title='Scene Configuration (Read Only)'
-        code={JSON.stringify(config, null, 2)}
-        setCode={() => {
-          // TODO: update current configuration
-        }}
-        foldAll
-        readOnly
-      />
-      {/* <p> TODO: Change other runtime parameters, simulation configuration, and benchmarking configuration.</p> */}
-    </>
-  );
+  const configurationsElem = <SceneConfigurations
+    sceneConfig={config}
+    dynamicParams={dynamicParams}
+    onDynamicPropsChange={onDynamicPropsChange}
+  />;
 
   const benchElem = initialized ? (
     <Benchmark simConfig={config} benchSettings={benchSettings} reset={reset} data={benchmarkData}/>
@@ -290,7 +291,7 @@ const App = () => {
   );
 
   const tabContents = [
-    { label: 'Options', content: optionsElem },
+    { label: 'Rendering', content: renderingOptionsElem },
     { label: 'Configuration', content: configurationsElem },
     { label: 'Benchmark', content: benchElem },
     { label: 'Controller', content: controllerCodeEditor },

src/client/components/Editors/CodeEditor/CodeEditorSection.jsx

@@ -42,8 +42,8 @@ function CodeEditorSection({
   return (
     <Grid container item xs={12} md={12} lg={12} spacing={1}>
       <Grid item xs={10} md={11} lg={11}>
-        <div className="code-section-header">
-          <Typography variant="subtitle1" gutterBottom className="code-section-header-title">
+        <div className="input-section-header">
+          <Typography variant="subtitle1" gutterBottom className="input-section-header-title">
             {title ?? 'Code Editor'}
           </Typography>
         </div>

src/client/components/Inputs/TitledSlider.jsx

@@ -2,35 +2,36 @@ import React from 'react';
 import propTypes from 'prop-types';
 import { Box, Grid, Slider, Typography, Tooltip } from '@mui/material';
 
-const TitledSlider = ({ title, value, setValue, toolTip, minValue, maxValue }) => (
-  <Box sx={{ width: '100%', height: '75px' }}>
-    <Grid container spacing={2} item sm={12} lg={10} xl={8}>
-      <Grid item sm={3} md={2}>
+const TitledSlider = ({ title, value, setValue, toolTip, min, max, step }) => (
+  <Grid container spacing={2} item sm={12} lg={12} xl={12}>
+    <Grid item sm={2} md={2} lg={1}>
+      <Box display="flex" justifyContent="left" alignItems="center">
         <Tooltip title={toolTip}>
-          <Typography variant="h6">
+          <Typography variant="h7">
             {title}
           </Typography>
         </Tooltip>
-      </Grid>
-      <Grid item xs sm={9} md={10}>
-        <Slider
-          min={minValue || 0}
-          max={maxValue || 50}
-          step={0.1}
-          value={value}
-          valueLabelDisplay='auto'
-          onChange={(event, newValue) => setValue(newValue)}
-        />
-      </Grid>
+      </Box>
     </Grid>
-  </Box>
+    <Grid item xs sm={10} md={10} lg={11}>
+      <Slider
+        min={min || 0}
+        max={max || 50}
+        step={step || 1}
+        value={value}
+        valueLabelDisplay='auto'
+        onChange={(event, newValue) => setValue(newValue)}
+      />
+    </Grid>
+  </Grid>
 );
 
 TitledSlider.propTypes = {
   title: propTypes.string.isRequired,
   value: propTypes.number.isRequired,
-  minValue: propTypes.number,
-  maxValue: propTypes.number,
+  min: propTypes.number,
+  max: propTypes.number,
+  step: propTypes.number,
   setValue: propTypes.func.isRequired,
   toolTip: propTypes.string
 };

src/client/components/Layouts/TitledInputSection.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Typography, Stack } from '@mui/material';
+
+const TitledInputSection = ({ title, children }) => (
+  <Stack className="input-stack-vertical">
+    <div className="input-section-header">
+      <Typography variant="subtitle1" gutterBottom className="input-section-header-title">
+        {title}
+      </Typography>
+    </div>
+    <Stack className="input-stack-vertical">
+      {children}
+    </Stack>
+  </Stack>
+);
+
+// Dynamic Configurations
+
+TitledInputSection.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]).isRequired
+};
+
+export default TitledInputSection;

src/client/components/Options/RenderingElements.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import {
+  Grid,
+  FormGroup,
+  FormControlLabel,
+  Switch
+} from '@mui/material';
+
+import TitledInputSection from '../Layouts/TitledInputSection';
+
+const RenderingElements = ({ renderingElements, setElementEnabled }) => (
+  <TitledInputSection title="Rendering Elements">
+    <FormGroup row>
+      {renderingElements.map((element, index) => (
+        <Grid item xs={4} key={index}>
+          <FormControlLabel
+            onChange={(event) => setElementEnabled(element, event.target.checked)}
+            control={<Switch defaultChecked />}
+            label={element}
+          />
+        </Grid>
+      ))}
+    </FormGroup>
+  </TitledInputSection>
+);
+
+RenderingElements.propTypes = {
+  renderingElements: propTypes.array.isRequired,
+  setElementEnabled: propTypes.func.isRequired
+};
+
+export default RenderingElements;

src/client/components/Options/index.jsx → src/client/components/Options/RenderingOptions.jsx

@@ -1,36 +1,40 @@
-import React from 'react';
+import React, { memo } from 'react';
 import propTypes from 'prop-types';
 
 import TitledSlider from '../Inputs/TitledSlider';
-import RenderingSettings from './RenderingSettings';
+import RenderingElements from './RenderingElements';
+import TitledInputSection from '../Layouts/TitledInputSection';
 
-const Options = ({
+const RenderingOptions = ({
   renderSkip,
   setRenderSkip,
   renderingElements,
   setElementEnabled
 }) => (
   <>
+  <TitledInputSection title='Rendering Options'>
     <TitledSlider
       title='Render Skip'
       value={renderSkip}
-      minValue={1}
-      maxValue={100}
+      min={1}
+      max={100}
+      step={1}
       setValue={setRenderSkip}
       toolTip='Number of simulation steps to run between frames, speeds up simulation but can cause app lag.'
     />
-    <RenderingSettings
+  </TitledInputSection>
+    <RenderingElements
       renderingElements={renderingElements}
       setElementEnabled={setElementEnabled}
     />
   </>
 );
 
-Options.propTypes = {
+RenderingOptions.propTypes = {
   renderSkip: propTypes.number.isRequired,
   setRenderSkip: propTypes.func.isRequired,
   renderingElements: propTypes.array.isRequired,
   setElementEnabled: propTypes.func.isRequired
 };
 
-export default Options;
+export default memo(RenderingOptions);