merge: Address issues with web UI (#145)

This pull request addresses several issues that have been reported for the OpenDC web UI.

## Implementation Notes :hammer_and_pick:

* Update dependencies for web UI
* Inform user when deleted topology is still used
* Do not offset hover layer after dragging
* Fix access to machines on lower shelves 
* Do not allow selection of empty unit
* Fix rack deletion

Fixes #135, #136, #137, #138, #139

7 files changed, 68 insertions, 63 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
index 1b9fff72..e2b626ec 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
@@ -1,9 +1,8 @@
-import React, { useRef, useState, useContext } from 'react'
+import React, { useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { Stage } from 'react-konva'
 import { MAP_MAX_SCALE, MAP_MIN_SCALE, MAP_MOVE_PIXELS_PER_EVENT, MAP_SCALE_PER_EVENT } from './MapConstants'
-import { ReactReduxContext } from 'react-redux'
 import useResizeObserver from 'use-resize-observer'
 import { mapContainer } from './MapStage.module.css'
 import MapLayer from './layers/MapLayer'
@@ -13,7 +12,6 @@ import ScaleIndicator from './controls/ScaleIndicator'
 import Toolbar from './controls/Toolbar'
 
 function MapStage({ hotkeysRef }) {
-    const reduxContext = useContext(ReactReduxContext)
     const stageRef = useRef(null)
     const { width = 500, height = 500 } = useResizeObserver({ ref: stageRef.current?.attrs?.container })
     const [[x, y], setPos] = useState([0, 0])
@@ -68,11 +66,9 @@ function MapStage({ hotkeysRef }) {
                 x={x}
                 y={y}
             >
-                <ReactReduxContext.Provider value={reduxContext}>
-                    <MapLayer />
-                    <RoomHoverLayer />
-                    <ObjectHoverLayer />
-                </ReactReduxContext.Provider>
+                <MapLayer />
+                <RoomHoverLayer />
+                <ObjectHoverLayer />
             </Stage>
             <ScaleIndicator scale={scale} />
             <Toolbar onZoom={onZoomButton} onExport={onExport} />
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/HoverLayerComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/HoverLayerComponent.js
index 2b1060c0..d7e0c56a 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/HoverLayerComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/HoverLayerComponent.js
@@ -15,11 +15,11 @@ function HoverLayerComponent({ isEnabled, isValid, onClick, children }) {
 
         const stage = layer.getStage()
 
-        // Transform used to convert mouse coordinates to world coordinates
-        const transform = stage.getAbsoluteTransform().copy()
-        transform.invert()
-
         stage.on('mousemove.hover', () => {
+            // Transform used to convert mouse coordinates to world coordinates
+            const transform = stage.getAbsoluteTransform().copy()
+            transform.invert()
+
             const { x, y } = transform.point(stage.getPointerPosition())
             setPos([x, y])
         })
@@ -38,7 +38,7 @@ function HoverLayerComponent({ isEnabled, isValid, onClick, children }) {
     const y = gridY * TILE_SIZE_IN_PIXELS
 
     return (
-        <Layer opacity={0.6} ref={layerRef}>
+        <Layer opacity={0.2} ref={layerRef}>
             <HoverTile x={x} y={y} isValid={valid} onClick={() => (valid ? onClick(gridX, gridY) : undefined)} />
             {children ? React.cloneElement(children, { x, y, scale: 1 }) : undefined}
         </Layer>
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js
index 1f00de36..5e741a3b 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js
@@ -27,7 +27,7 @@ import { findTileWithPosition } from '../../../../util/tile-calculations'
 import HoverLayerComponent from './HoverLayerComponent'
 import TilePlusIcon from '../elements/TilePlusIcon'
 
-function ObjectHoverLayer() {
+export default function ObjectHoverLayer() {
     const isEnabled = useSelector((state) => state.construction.inRackConstructionMode)
     const isValid = useSelector((state) => (x, y) => {
         if (state.interactionLevel.mode !== 'ROOM') {
@@ -49,5 +49,3 @@ function ObjectHoverLayer() {
         </HoverLayerComponent>
     )
 }
-
-export default ObjectHoverLayer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
index 727f4e25..b9cfcaf4 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
@@ -30,7 +30,7 @@ import {
 } from '../../../../util/tile-calculations'
 import HoverLayerComponent from './HoverLayerComponent'
 
-function RoomHoverLayer() {
+export default function RoomHoverLayer() {
     const dispatch = useDispatch()
     const onClick = (x, y) => dispatch(toggleTileAtLocation(x, y))
     const isEnabled = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
@@ -57,5 +57,3 @@ function RoomHoverLayer() {
 
     return <HoverLayerComponent onClick={onClick} isEnabled={isEnabled} isValid={isValid} />
 }
-
-export default RoomHoverLayer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js
index 6f89e10b..8a4c33dc 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js
@@ -15,7 +15,13 @@ import { useSelector } from 'react-redux'
 function MachineSidebar({ tileId, position }) {
     const machine = useSelector(({ topology }) => {
         const rack = topology.racks[topology.tiles[tileId].rack]
-        return topology.machines[rack.machines[position - 1]]
+
+        for (const machineId of rack.machines) {
+            const machine = topology.machines[machineId]
+            if (machine.position === position) {
+                return machine
+            }
+        }
     })
     const machineId = machine.id
     return (
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js
index 4507b409..18cba23a 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js
@@ -27,7 +27,7 @@ function UnitAddComponent({ units, onAdd }) {
                     </SelectOption>
                 ))}
             </Select>
-            <Button icon={<PlusIcon />} variant="control" onClick={() => onAdd(selected)}>
+            <Button icon={<PlusIcon />} variant="control" onClick={() => onAdd(selected)} isDisabled={!selected}>
                 Add
             </Button>
         </InputGroup>
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js
index de7a2140..02c97730 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js
@@ -17,49 +17,56 @@ import { Machine } from '../../../../shapes'
 function MachineListComponent({ machines = [], onSelect, onAdd }) {
     return (
         <DataList aria-label="Rack Units">
-            {machines.map((machine, index) =>
-                machine ? (
-                    <DataListItem key={index} onClick={() => onSelect(index + 1)}>
-                        <DataListItemRow>
-                            <DataListItemCells
-                                dataListCells={[
-                                    <DataListCell isIcon key="icon">
-                                        <Badge isRead>{machines.length - index}U</Badge>
-                                    </DataListCell>,
-                                    <DataListCell key="primary content">
-                                        <MachineComponent onClick={() => onSelect(index + 1)} machine={machine} />
-                                    </DataListCell>,
-                                ]}
-                            />
-                            <DataListAction id="goto" aria-label="Goto Machine" aria-labelledby="goto">
-                                <Button isSmall variant="plain" className="pf-u-p-0">
-                                    <AngleRightIcon />
-                                </Button>
-                            </DataListAction>
-                        </DataListItemRow>
-                    </DataListItem>
-                ) : (
-                    <DataListItem key={index}>
-                        <DataListItemRow>
-                            <DataListItemCells
-                                dataListCells={[
-                                    <DataListCell isIcon key="icon">
-                                        <Badge isRead>{machines.length - index}U</Badge>
-                                    </DataListCell>,
-                                    <DataListCell key="add" className="text-secondary">
-                                        Empty Slot
-                                    </DataListCell>,
-                                ]}
-                            />
-                            <DataListAction id="add" aria-label="Add Machine" aria-labelledby="add">
-                                <Button isSmall variant="plain" className="pf-u-p-0" onClick={() => onAdd(index + 1)}>
-                                    <PlusIcon />
-                                </Button>
-                            </DataListAction>
-                        </DataListItemRow>
-                    </DataListItem>
+            {machines
+                .map((machine, index) =>
+                    machine ? (
+                        <DataListItem key={index} onClick={() => onSelect(index + 1)}>
+                            <DataListItemRow>
+                                <DataListItemCells
+                                    dataListCells={[
+                                        <DataListCell isIcon key="icon">
+                                            <Badge isRead>{index + 1}U</Badge>
+                                        </DataListCell>,
+                                        <DataListCell key="primary content">
+                                            <MachineComponent onClick={() => onSelect(index + 1)} machine={machine} />
+                                        </DataListCell>,
+                                    ]}
+                                />
+                                <DataListAction id="goto" aria-label="Goto Machine" aria-labelledby="goto">
+                                    <Button isSmall variant="plain" className="pf-u-p-0">
+                                        <AngleRightIcon />
+                                    </Button>
+                                </DataListAction>
+                            </DataListItemRow>
+                        </DataListItem>
+                    ) : (
+                        <DataListItem key={index}>
+                            <DataListItemRow>
+                                <DataListItemCells
+                                    dataListCells={[
+                                        <DataListCell isIcon key="icon">
+                                            <Badge isRead>{index + 1}U</Badge>
+                                        </DataListCell>,
+                                        <DataListCell key="add" className="text-secondary">
+                                            Empty Slot
+                                        </DataListCell>,
+                                    ]}
+                                />
+                                <DataListAction id="add" aria-label="Add Machine" aria-labelledby="add">
+                                    <Button
+                                        isSmall
+                                        variant="plain"
+                                        className="pf-u-p-0"
+                                        onClick={() => onAdd(index + 1)}
+                                    >
+                                        <PlusIcon />
+                                    </Button>
+                                </DataListAction>
+                            </DataListItemRow>
+                        </DataListItem>
+                    )
                 )
-            )}
+                .reverse()}
         </DataList>
     )
 }