feat: move functionality to new menu (#263)

* chore: do not bust cache on .gitignore

* refactor: cleanup

* feat: add layer toggles to new menu

* refactor: cleanup

* feat: edit experiment modal

* chore: remove unused code

* refactor: moved reset button to new component

* fix: styling

* refactor: move modal to new component

* refactor: naming

* fix: styling

* refactor: cleaning up

* fix: modal styling

* feat: add logo

* feat: show modal with kibana link

* fix: naming

* feat: show experiment id

Author: Alexander Czigler

packages/simulator/web/routes.js

@@ -34,6 +34,7 @@ function start(socket) {
   socket.data.experiment = experiment
   experiment.subscriptions = subscribe(experiment, socket)
   experiment.virtualTime.waitUntil(moment().endOf('day').valueOf()).then(() => {
+    socket.emit('reset')
     info('Experiment finished. Restarting...')
     process.kill(process.pid, 'SIGUSR2')
   })
@@ -58,7 +59,7 @@ function register(io) {
     socket.data.emitTaxiUpdates = defaultEmitters.includes('taxis')
     socket.data.emitBusUpdates = defaultEmitters.includes('buses')
 
-    socket.emit('reset')
+    socket.emit('init')
     socket.on('reset', () => {
       socket.data.experiment.subscriptions.map((e) => e.unsubscribe())
       start(socket)
@@ -70,7 +71,7 @@ function register(io) {
     socket.on('experimentParameters', (value) => {
       info('New expiriment settings: ', value)
       save(value)
-      socket.emit('reset')
+      socket.emit('init')
     })
 
     socket.emit('parameters', socket.data.experiment.parameters)

packages/visualisation/.dockerignore

@@ -1,5 +1,7 @@
-dist/
 .dockerignore
+.gitignore
+
+dist/
 Dockerfile
 node_modules
 README.md

packages/visualisation/src/App.jsx

@@ -1,19 +1,14 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
+import 'jsoneditor-react/es/editor.min.css'
 import { useSocket } from './hooks/useSocket.js'
+
 import Map from './Map.jsx'
-import PlaybackOptions from './components/PlaybackOptions'
 import Loading from './components/Loading'
-import styled from 'styled-components'
-import ResetIcon from './icons/svg/resetIcon.svg'
-import TransparentButton from './components/TransparentButton'
-import SideMenu from './components/SideMenu'
-
-const Wrapper = styled.div`
-  position: absolute;
-  z-index: 2;
-  bottom: 3rem;
-  left: 11.3rem;
-`
+import PlaybackOptions from './components/PlaybackOptions'
+import ResetExperiment from './components/ResetExperiment'
+import EditExperimentModal from './components/EditExperimentModal'
+import Logo from './components/Logo'
+import ExperimentDoneModal from './components/ExperimentDoneModal/index.jsx'
 
 const App = () => {
   const [activeCar, setActiveCar] = useState(null)
@@ -30,9 +25,12 @@ const App = () => {
   const [commercialAreasLayer, setCommercialAreasLayer] = useState(false)
   const [busLineLayer, setBusLineLayer] = useState(true)
   const [kommunLayer, setKommunLayer] = useState(true)
-  const [newParameters, setNewParameters] = useState({})
+  const [experimentParameters, setExperimentParameters] = useState({})
   const [currentParameters, setCurrentParameters] = useState({})
   const [fleets, setFleets] = useState({})
+  const [showEditExperimentModal, setShowEditExperimentModal] = useState(false)
+  const [showExperimentDoneModal, setShowExperimentDoneModal] = useState(false)
+  const [previousExperimentId, setPreviousExperimentId] = useState(null)
 
   const [connected, setConnected] = useState(false)
 
@@ -61,12 +59,13 @@ const App = () => {
     setBusLineLayer,
   }
 
-  const newExperiment = () => {
-    socket.emit('experimentParameters', newParameters)
+  const restartSimulation = () => {
+    setShowEditExperimentModal(false)
+    socket.emit('experimentParameters', experimentParameters)
   }
 
-  useSocket('reset', () => {
-    console.log('received reset')
+  useSocket('init', () => {
+    console.log('Init experiment')
     setBookings([])
     setPassengers([])
     setCars([])
@@ -78,6 +77,12 @@ const App = () => {
     socket.emit('speed', speed) // reset speed on server
   })
 
+  useSocket('reset', () => {
+    console.log('Reset experiment')
+    setPreviousExperimentId(experimentParameters.id)
+    setShowExperimentDoneModal(true)
+  })
+
   function upsert(array, object, idProperty = 'id', deep = false) {
     const currentIndex = array.findIndex(
       (k) => k[idProperty] === object[idProperty]
@@ -183,7 +188,11 @@ const App = () => {
   })
 
   useSocket('parameters', (currentParameters) => {
-    console.log('new experimentId', currentParameters.id)
+    console.log('ExperimentId', currentParameters.id)
+
+    if (!previousExperimentId) {
+      setPreviousExperimentId(currentParameters.id)
+    }
 
     setCurrentParameters(currentParameters)
     const layerSetFunctions = {
@@ -206,10 +215,8 @@ const App = () => {
       }
     })
 
-    console.log(currentParameters)
     setFleets(currentParameters.fleets)
-
-    setNewParameters(currentParameters)
+    setExperimentParameters(currentParameters)
   })
   const [passengers, setPassengers] = React.useState([])
   useSocket('passengers', (passengers) => {
@@ -257,27 +264,18 @@ const App = () => {
     setConnected(true)
   })
 
+  /**
+   * Update the fleets part of the parameters.
+   */
+  const saveFleets = (updatedJson) => {
+    setExperimentParameters({ ...experimentParameters, fleets: updatedJson })
+  }
+
   return (
     <>
-      <Wrapper>
-        <TransparentButton onClick={() => resetSimulation()}>
-          <img src={ResetIcon} alt="Reset" />
-        </TransparentButton>
-      </Wrapper>
-      <SideMenu
-        activeLayers={activeLayers}
-        currentParameters={currentParameters}
-        newParameters={newParameters}
-        newExperiment={newExperiment}
-        setNewParameters={setNewParameters}
-        fleets={fleets}
-      />
+      <Logo />
 
-      <PlaybackOptions
-        onPause={onPause}
-        onPlay={onPlay}
-        onSpeedChange={onSpeedChange}
-      />
+      {/* Loader. */}
       {(!connected || reset || !cars.length || !bookings.length) && (
         <Loading
           connected={connected}
@@ -290,6 +288,34 @@ const App = () => {
           parameters={currentParameters}
         />
       )}
+
+      {/* Playback controls. */}
+      <PlaybackOptions
+        onPause={onPause}
+        onPlay={onPlay}
+        onSpeedChange={onSpeedChange}
+      />
+
+      {/* Reset experiment button. */}
+      <ResetExperiment resetSimulation={resetSimulation} />
+
+      {/* Edit experiment modal. */}
+      <EditExperimentModal
+        fleets={fleets}
+        show={showEditExperimentModal}
+        setShow={setShowEditExperimentModal}
+        restartSimulation={restartSimulation}
+        saveFleets={saveFleets}
+      />
+
+      {/* Experiment done modal. */}
+      <ExperimentDoneModal
+        experimentId={previousExperimentId}
+        show={showExperimentDoneModal}
+        setShow={setShowExperimentDoneModal}
+      />
+
+      {/* Map. */}
       <Map
         activeLayers={activeLayers}
         passengers={passengers}
@@ -303,6 +329,9 @@ const App = () => {
         time={time}
         setActiveCar={setActiveCar}
         lineShapes={lineShapes}
+        showEditExperimentModal={showEditExperimentModal}
+        setShowEditExperimentModal={setShowEditExperimentModal}
+        experimentId={currentParameters.id}
       />
     </>
   )

packages/visualisation/src/Map.jsx

@@ -10,14 +10,10 @@ import DeckGL, {
 import { GeoJsonLayer } from '@deck.gl/layers'
 import inside from 'point-in-polygon'
 import { ParagraphLarge } from './components/Typography'
-
 import KommunStatisticsBox from './components/KommunStatisticsBox'
 import TimeProgressBar from './components/TimeProgressBar'
-
 import LayersMenu from './components/LayersMenu/index.jsx'
-import mapboxgl from 'mapbox-gl'
 import HoverInfoBox from './components/HoverInfoBox'
-import { IconButton, Menu, MenuItem } from '@mui/material'
 
 const transitionInterpolator = new LinearInterpolator(['bearing'])
 
@@ -34,6 +30,8 @@ const Map = ({
   activeCar,
   setActiveCar,
   time,
+  setShowEditExperimentModal,
+  experimentId,
 }) => {
   const [mapState, setMapState] = useState({
     latitude: 65.0964472642777,
@@ -379,7 +377,7 @@ const Map = ({
 
   const bookingLayer = new ScatterplotLayer({
     id: 'booking-layer',
-    data: bookings.filter(b => b.type !== 'busstop'), //.filter((b) => !b.assigned), // TODO: revert change
+    data: bookings.filter((b) => b.type !== 'busstop'), //.filter((b) => !b.assigned), // TODO: revert change
     opacity: 1,
     stroked: false,
     filled: true,
@@ -619,12 +617,15 @@ const Map = ({
         }}
       >
         <LayersMenu
+          activeLayers={activeLayers}
           showArcLayer={showArcLayer}
           setShowArcLayer={setShowArcLayer}
           showActiveDeliveries={showActiveDeliveries}
           setShowActiveDeliveries={setShowActiveDeliveries}
           showAssignedBookings={showAssignedBookings}
           setShowAssignedBookings={setShowAssignedBookings}
+          setShowEditExperimentModal={setShowEditExperimentModal}
+          experimentId={experimentId}
         />
       </div>
       <StaticMap
@@ -636,7 +637,11 @@ const Map = ({
         mapboxApiAccessToken={import.meta.env.VITE_MAPBOX_ACCESS_TOKEN}
       />
       {hoverInfo && mapState.zoom > 6 && <HoverInfoBox data={hoverInfo} />}
+
+      {/* Time progress bar. */}
       <TimeProgressBar time={time} />
+
+      {/* Experiment clock. */}
       <div
         style={{
           right: '3rem',
@@ -656,6 +661,8 @@ const Map = ({
           <br />i simuleringen
         </ParagraphLarge>
       </div>
+
+      {/* Municipality stats. */}
       {kommunInfo && <KommunStatisticsBox {...kommunInfo} />}
     </DeckGL>
   )