ui: Add replay functionality

Signed-off-by: Tobias Falkenstein <[email protected]>

Author: Patrick Schuster

ui/src/App.js

@@ -25,6 +25,7 @@ import hash from "object-hash";
 import jp from "jsonpath";
 import { Icon as LegacyIcon } from "@ant-design/compatible";
 import * as mathjs from "mathjs";
+import { STREAMINGTYPES } from "../enums";
 
 class Controller extends Component {
   constructor(props) {
@@ -36,6 +37,7 @@ class Controller extends Component {
     this.sources = {};
     this.groupsVisibility = props.layout;
     this.uiEnabled = true;
+    this.streamingType = props.streamingType;
   }
 
   render() {
@@ -84,6 +86,17 @@ class Controller extends Component {
           this.uiEnabled = false;
         });
     }
+    // In replay mode the parent component provides the uiConfigData.
+    // Check if the provided uiConfigData has entries (should be done once).
+    else if (Object.keys(this.props.uiConfigData).length > 0) {
+      let data = this.props.uiConfigData.controller;
+      this.paths = data.paths;
+      this.layout = data.layout;
+      this.title = data.title;
+      this.action = data.action;
+      this.elements = this.generateElements(data.elements);
+      this.uiSpecificationLoaded = true;
+    }
   };
 
   generateElements = (specifiedElements) => {
@@ -107,6 +120,15 @@ class Controller extends Component {
             }
           });
       }
+    } else if (this.streamingType === STREAMINGTYPES.REPLAY) {
+      for (const endpoint in this.sources) {
+        for (const path in this.sources[endpoint]) {
+          const fetchEndpoint = this.resolveEndpoint(endpoint).replace("/api", "");
+          if (Object.keys(this.props.cloeData).length > 0) {
+            this.sources[endpoint][path] = jp.value(this.props.cloeData[fetchEndpoint], path);
+          }
+        }
+      }
     }
   };
 
@@ -291,7 +313,7 @@ class Controller extends Component {
         <Timebar
           key={timebarElement.id}
           controllerState={value}
-          newSimTime={this.props.simTime}
+          newSimTime={this.props.cloeData.simTime}
           simulationID={this.props.simulationID}
           colorTrue={timebarElement.params.color_true}
           colorFalse={timebarElement.params.color_false}
@@ -317,7 +339,7 @@ class Controller extends Component {
           key={linechartElement.id}
           sourcePaths={sourcePaths}
           nextYValues={values}
-          nextXValue={this.props.simTime / 1000}
+          nextXValue={this.props.cloeData.simTime / 1000}
           simulationID={this.props.simulationID}
           colors={linechartElement.params.colors}
         />

ui/src/components/controller.jsx

@@ -0,0 +1,61 @@
+/*
+ * Copyright 2021 Robert Bosch GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { Component } from "react";
+
+// This component shows different error messages depending on content.
+class ErrorMessage extends Component {
+  constructor(props) {
+    super(props);
+    this.fileType = props.fileType || null;
+    this.errorMessage = props.errorMessage;
+    this.state = {
+      showErrorMessage: true
+    };
+  }
+
+  removeErrorMessage = () => {
+    this.setState({ showErrorMessage: false });
+  };
+
+  render() {
+    if (this.state.showErrorMessage) {
+      return (
+        <div
+          className="alert alert-warning alert-dismissible fade show"
+          style={{ position: "absolute", right: "10px", top: "150px", zIndex: "9999" }}
+          role="alert"
+        >
+          <strong>{this.fileType}</strong>
+          {this.errorMessage}
+          <button
+            type="button"
+            className="close"
+            onClick={(e) => {
+              this.removeErrorMessage();
+            }}
+            aria-label="Close"
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+      );
+    } else {
+      return <React.Fragment></React.Fragment>;
+    }
+  }
+}
+
+export default ErrorMessage;

ui/src/components/errorMessage.jsx

@@ -0,0 +1,96 @@
+/*
+ * Copyright 2021 Robert Bosch GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { useState } from "react";
+import { UploadOutlined } from "@ant-design/icons";
+import pako from "pako";
+import ErrorMessage from "./errorMessage";
+
+const FileUploader = (props) => {
+  const { connected } = props;
+  const hiddenFileInput = React.useRef(null);
+  const [state, setState] = useState({ showErrorMessage: false, fileType: "" });
+  // This method triggers the handleChange() event.
+  const handleClick = (event) => {
+    hiddenFileInput.current.click();
+  };
+  // This method is processing the file with the FileReader API
+  // and sends the content to the parent method.
+  const handleChange = (event) => {
+    const fileUploaded = event.target.files[0];
+    if (fileUploaded === undefined) {
+      return;
+    }
+    let reader = new FileReader();
+    if (fileUploaded.type === "application/json") {
+      reader.onload = function(e) {
+        props.handleFileUpload(fileUploaded, e.target.result);
+      };
+      reader.readAsText(fileUploaded);
+    } else if (
+      fileUploaded.type === "application/x-gzip" ||
+      fileUploaded.type === "application/gzip"
+    ) {
+      reader.onload = function(e) {
+        let result = pako.inflate(e.target.result, { to: "string" });
+        props.handleFileUpload(fileUploaded, result);
+      };
+      reader.readAsArrayBuffer(fileUploaded);
+    } else {
+      // Show error message for 5 seconds.
+      setState({
+        ...state,
+        showErrorMessage: true,
+        fileType: fileUploaded.type
+      });
+      setTimeout(() => {
+        setState({
+          ...state,
+          showErrorMessage: false
+        });
+      }, 5000);
+    }
+    event.target.value = "";
+  };
+  return (
+    <>
+      {state.showErrorMessage && (
+        <ErrorMessage
+          errorMessage={" not supported. Try .json or .json.gz files"}
+          fileType={state.fileType}
+        ></ErrorMessage>
+      )}
+      <input
+        type="file"
+        ref={hiddenFileInput}
+        onChange={handleChange}
+        style={{ display: "none" }}
+        accept=".json, .json.gz"
+      />
+      <div className="navbar-nav ml-auto mr-2">
+        <div className="float-left my-lg-0 m-auto">
+          <UploadOutlined
+            className={connected ? "icon" : "icon-white"}
+            style={{ fontSize: "26px" }}
+            onClick={(e) => {
+              handleClick(e);
+            }}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+export default FileUploader;

ui/src/components/fileUploader.jsx

@@ -17,10 +17,16 @@ import React from "react";
 import { MoreOutlined } from "@ant-design/icons";
 import { Popover } from "antd";
 import { copyToClipboard } from "../helpers";
+import FileUploader from "./fileUploader";
 
 function NavBar(props) {
   const { connected, version } = props;
   const versionString = version.package_version;
+  // Propagate the file to parent app.js.
+  const handleFileUpload = (file, content) => {
+    props.getSimulationDataFromJSON(file, content);
+  };
+
   return (
     <nav
       className={`navbar navbar-expand-lg navbar-light shadow-sm ${
@@ -54,7 +60,8 @@ function NavBar(props) {
           </small>
         </Popover>
       </div>
-      <div className="navbar-nav ml-auto">
+      <FileUploader handleFileUpload={handleFileUpload} connected={connected}></FileUploader>
+      <div className="navbar-nav mx-1">
         <div className="float-left my-lg-0 m-auto">
           <MoreOutlined
             className={connected ? "icon" : "icon-white"}

ui/src/components/navbar.jsx

@@ -21,6 +21,7 @@ import Slider from "react-rangeslider";
 import { Select, Tag } from "antd";
 import { SettingFilled, UndoOutlined } from "@ant-design/icons";
 import SpriteText from "three-spritetext";
+import ReplayControlls from "./replayControls";
 
 const OrbitControls = require("three-orbit-controls")(THREE);
 var randomColor = require("randomcolor");
@@ -105,7 +106,7 @@ class Rendering extends Component {
 
   render() {
     // Make sensors available for input fields.
-    const { sensors } = this.props;
+    const { sensors, replayState, streamingType } = this.props;
     const selectObjSensors = this.getAvailSensors(sensors, this.sensorType.Object);
     const selectLaneSensors = this.getAvailSensors(sensors, this.sensorType.Lane);
 
@@ -178,6 +179,14 @@ class Rendering extends Component {
               </div>
             </div>
           </div>
+          <ReplayControlls
+            replayState={replayState}
+            streamingType={streamingType}
+            isRecording={isRecording}
+            toggleReplay={this.toggleReplay}
+            fastForward={this.fastForward}
+            rewind={this.rewind}
+          ></ReplayControlls>
           <div
             className="m-0 mt-2 text-light"
             style={{
@@ -937,6 +946,18 @@ class Rendering extends Component {
     this.setState({ optionsVisible: !this.state.optionsVisible });
   };
 
+  toggleReplay = (isRunning) => {
+    this.props.toggleReplay(isRunning);
+  };
+
+  fastForward = () => {
+    this.props.fastForward();
+  };
+
+  rewind = () => {
+    this.props.rewind();
+  };
+
   resetRenderOptions = () => {
     if (this.state.helperAxesVisible) {
       this.scene.remove(this.axes);