merge: Address technical dept in topology view (#162)

This pull request aims to address some of the technical debt in the topology 
view of the OpenDC frontend.

* Add support for panning of the datacenter topology
* Isolate world coordinate space (world objects do not depend on camera scale or position)
* Split transpiled modules into a separate chunk to reduce deduplication
* Encode state in topology actions to reduce global state
* Restructure components per page
* Enable more ESLint rules through `eslint:recommended` ruleset
* Move page components in separate files.

6 files changed, 23 insertions, 99 deletions

diff --git a/opendc-web/opendc-web-ui/src/redux/actions/map.js b/opendc-web/opendc-web-ui/src/redux/actions/map.js
deleted file mode 100644
index aa14cacd..00000000
--- a/opendc-web/opendc-web-ui/src/redux/actions/map.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import {
-    MAP_MAX_SCALE,
-    MAP_MIN_SCALE,
-    MAP_SCALE_PER_EVENT,
-    MAP_SIZE_IN_PIXELS,
-} from '../../components/app/map/MapConstants'
-
-export const SET_MAP_POSITION = 'SET_MAP_POSITION'
-export const SET_MAP_DIMENSIONS = 'SET_MAP_DIMENSIONS'
-export const SET_MAP_SCALE = 'SET_MAP_SCALE'
-
-export function setMapPosition(x, y) {
-    return {
-        type: SET_MAP_POSITION,
-        x,
-        y,
-    }
-}
-
-export function setMapDimensions(width, height) {
-    return {
-        type: SET_MAP_DIMENSIONS,
-        width,
-        height,
-    }
-}
-
-export function setMapScale(scale) {
-    return {
-        type: SET_MAP_SCALE,
-        scale,
-    }
-}
-
-export function zoomInOnCenter(zoomIn) {
-    return (dispatch, getState) => {
-        const state = getState()
-
-        dispatch(zoomInOnPosition(zoomIn, state.map.dimensions.width / 2, state.map.dimensions.height / 2))
-    }
-}
-
-export function zoomInOnPosition(zoomIn, x, y) {
-    return (dispatch, getState) => {
-        const state = getState()
-
-        const centerPoint = {
-            x: x / state.map.scale - state.map.position.x / state.map.scale,
-            y: y / state.map.scale - state.map.position.y / state.map.scale,
-        }
-        const newScale = zoomIn ? state.map.scale * MAP_SCALE_PER_EVENT : state.map.scale / MAP_SCALE_PER_EVENT
-        const boundedScale = Math.min(Math.max(MAP_MIN_SCALE, newScale), MAP_MAX_SCALE)
-
-        const newX = -(centerPoint.x - x / boundedScale) * boundedScale
-        const newY = -(centerPoint.y - y / boundedScale) * boundedScale
-
-        dispatch(setMapPositionWithBoundsCheck(newX, newY))
-        dispatch(setMapScale(boundedScale))
-    }
-}
-
-export function setMapPositionWithBoundsCheck(x, y) {
-    return (dispatch, getState) => {
-        const state = getState()
-
-        const scaledMapSize = MAP_SIZE_IN_PIXELS * state.map.scale
-
-        const updatedX =
-            x > 0
-                ? 0
-                : x < -scaledMapSize + state.map.dimensions.width
-                ? -scaledMapSize + state.map.dimensions.width
-                : x
-        const updatedY =
-            y > 0
-                ? 0
-                : y < -scaledMapSize + state.map.dimensions.height
-                ? -scaledMapSize + state.map.dimensions.height
-                : y
-
-        dispatch(setMapPosition(updatedX, updatedY))
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/prefabs.js b/opendc-web/opendc-web-ui/src/redux/actions/prefabs.js
index c112feed..0ef7795f 100644
--- a/opendc-web/opendc-web-ui/src/redux/actions/prefabs.js
+++ b/opendc-web/opendc-web-ui/src/redux/actions/prefabs.js
@@ -3,10 +3,11 @@ export const DELETE_PREFAB = 'DELETE_PREFAB'
 export const DELETE_PREFAB_SUCCEEDED = 'DELETE_PREFAB_SUCCEEDED'
 export const OPEN_PREFAB_SUCCEEDED = 'OPEN_PREFAB_SUCCEEDED'
 
-export function addPrefab(name) {
+export function addPrefab(name, tileId) {
     return {
         type: ADD_PREFAB,
         name,
+        tileId,
     }
 }
 
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js b/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js
index f1a7d569..49425318 100644
--- a/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js
+++ b/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js
@@ -55,13 +55,10 @@ export function cancelNewRoomConstructionSucceeded() {
     }
 }
 
-export function startRoomEdit() {
-    return (dispatch, getState) => {
-        const { interactionLevel } = getState()
-        dispatch({
-            type: START_ROOM_EDIT,
-            roomId: interactionLevel.roomId,
-        })
+export function startRoomEdit(roomId) {
+    return {
+        type: START_ROOM_EDIT,
+        roomId: roomId,
     }
 }
 
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topology/machine.js b/opendc-web/opendc-web-ui/src/redux/actions/topology/machine.js
index 17ccce5d..170b7648 100644
--- a/opendc-web/opendc-web-ui/src/redux/actions/topology/machine.js
+++ b/opendc-web/opendc-web-ui/src/redux/actions/topology/machine.js
@@ -2,23 +2,27 @@ export const DELETE_MACHINE = 'DELETE_MACHINE'
 export const ADD_UNIT = 'ADD_UNIT'
 export const DELETE_UNIT = 'DELETE_UNIT'
 
-export function deleteMachine() {
+export function deleteMachine(rackId, position) {
     return {
         type: DELETE_MACHINE,
+        rackId,
+        position,
     }
 }
 
-export function addUnit(unitType, id) {
+export function addUnit(machineId, unitType, id) {
     return {
         type: ADD_UNIT,
+        machineId,
         unitType,
         id,
     }
 }
 
-export function deleteUnit(unitType, index) {
+export function deleteUnit(machineId, unitType, index) {
     return {
         type: DELETE_UNIT,
+        machineId,
         unitType,
         index,
     }
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topology/rack.js b/opendc-web/opendc-web-ui/src/redux/actions/topology/rack.js
index b117402e..228e3ae9 100644
--- a/opendc-web/opendc-web-ui/src/redux/actions/topology/rack.js
+++ b/opendc-web/opendc-web-ui/src/redux/actions/topology/rack.js
@@ -2,22 +2,25 @@ export const EDIT_RACK_NAME = 'EDIT_RACK_NAME'
 export const DELETE_RACK = 'DELETE_RACK'
 export const ADD_MACHINE = 'ADD_MACHINE'
 
-export function editRackName(name) {
+export function editRackName(rackId, name) {
     return {
         type: EDIT_RACK_NAME,
         name,
+        rackId,
     }
 }
 
-export function deleteRack() {
+export function deleteRack(tileId) {
     return {
         type: DELETE_RACK,
+        tileId,
     }
 }
 
-export function addMachine(position) {
+export function addMachine(rackId, position) {
     return {
         type: ADD_MACHINE,
         position,
+        rackId,
     }
 }
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js b/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js
index 80ef7c5e..e584af89 100644
--- a/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js
+++ b/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js
@@ -6,10 +6,11 @@ export const START_RACK_CONSTRUCTION = 'START_RACK_CONSTRUCTION'
 export const STOP_RACK_CONSTRUCTION = 'STOP_RACK_CONSTRUCTION'
 export const ADD_RACK_TO_TILE = 'ADD_RACK_TO_TILE'
 
-export function editRoomName(name) {
+export function editRoomName(roomId, name) {
     return {
         type: EDIT_ROOM_NAME,
         name,
+        roomId,
     }
 }
 
@@ -41,8 +42,9 @@ export function addRackToTile(positionX, positionY) {
     }
 }
 
-export function deleteRoom() {
+export function deleteRoom(roomId) {
     return {
         type: DELETE_ROOM,
+        roomId,
     }
 }