ui: Restructure OpenDC frontend

This change updates the structure of the OpenDC frontend in order to
improve the maintainability of the frontend.

6 files changed, 0 insertions, 338 deletions

diff --git a/opendc-web/opendc-web-ui/src/store/configure-store.js b/opendc-web/opendc-web-ui/src/store/configure-store.js
deleted file mode 100644
index 149536a3..00000000
--- a/opendc-web/opendc-web-ui/src/store/configure-store.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useMemo } from 'react'
-import { applyMiddleware, compose, createStore } from 'redux'
-import { createLogger } from 'redux-logger'
-import persistState from 'redux-localstorage'
-import createSagaMiddleware from 'redux-saga'
-import thunk from 'redux-thunk'
-import { authRedirectMiddleware } from '../auth/index'
-import rootReducer from '../reducers/index'
-import rootSaga from '../sagas/index'
-import { viewportAdjustmentMiddleware } from './middlewares/viewport-adjustment'
-
-let store
-
-function initStore(initialState) {
-    const sagaMiddleware = createSagaMiddleware()
-
-    const middlewares = [thunk, sagaMiddleware, authRedirectMiddleware, viewportAdjustmentMiddleware]
-
-    if (process.env.NODE_ENV !== 'production') {
-        middlewares.push(createLogger())
-    }
-
-    let enhancer = applyMiddleware(...middlewares)
-
-    if (global.localStorage) {
-        enhancer = compose(persistState('auth'), enhancer)
-    }
-
-    const configuredStore = createStore(rootReducer, enhancer)
-    sagaMiddleware.run(rootSaga)
-    store = configuredStore
-
-    return configuredStore
-}
-
-export const initializeStore = (preloadedState) => {
-    let _store = store ?? initStore(preloadedState)
-
-    // After navigating to a page with an initial Redux state, merge that state
-    // with the current state in the store, and create a new store
-    if (preloadedState && store) {
-        _store = initStore({
-            ...store.getState(),
-            ...preloadedState,
-        })
-        // Reset the current store
-        store = undefined
-    }
-
-    // For SSG and SSR always create a new store
-    if (typeof window === 'undefined') return _store
-    // Create the store once in the client
-    if (!store) store = _store
-
-    return _store
-}
-
-export function useStore(initialState) {
-    return useMemo(() => initializeStore(initialState), [initialState])
-}
diff --git a/opendc-web/opendc-web-ui/src/store/hooks/experiments.js b/opendc-web/opendc-web-ui/src/store/hooks/experiments.js
deleted file mode 100644
index aef512e5..00000000
--- a/opendc-web/opendc-web-ui/src/store/hooks/experiments.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import { useSelector } from 'react-redux'
-
-/**
- * Return the available traces to experiment with.
- */
-export function useTraces() {
-    return useSelector((state) => Object.values(state.objects.trace))
-}
-
-/**
- * Return the available schedulers to experiment with.
- */
-export function useSchedulers() {
-    return useSelector((state) => Object.values(state.objects.scheduler))
-}
diff --git a/opendc-web/opendc-web-ui/src/store/hooks/map.js b/opendc-web/opendc-web-ui/src/store/hooks/map.js
deleted file mode 100644
index 6aef6ac5..00000000
--- a/opendc-web/opendc-web-ui/src/store/hooks/map.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import { useSelector } from 'react-redux'
-
-/**
- * Return the map scale.
- */
-export function useMapScale() {
-    return useSelector((state) => state.map.scale)
-}
-
-/**
- * Return the map position.
- */
-export function useMapPosition() {
-    return useSelector((state) => state.map.position)
-}
-
-export function useMapDimensions() {
-    return useSelector((state) => state.map.dimensions)
-}
diff --git a/opendc-web/opendc-web-ui/src/store/hooks/project.js b/opendc-web/opendc-web-ui/src/store/hooks/project.js
deleted file mode 100644
index 0db49fdd..00000000
--- a/opendc-web/opendc-web-ui/src/store/hooks/project.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import { useSelector } from 'react-redux'
-
-/**
- * Return the current active project.
- */
-export function useActiveProject() {
-    return useSelector((state) =>
-        state.currentProjectId !== '-1' ? state.objects.project[state.currentProjectId] : undefined
-    )
-}
-
-/**
- * Return the active portfolio.
- */
-export function useActivePortfolio() {
-    return useSelector((state) => state.objects.portfolio[state.currentPortfolioId])
-}
-
-/**
- * Return the active scenario.
- */
-export function useActiveScenario() {
-    return useSelector((state) => state.objects.scenario[state.currentScenarioId])
-}
-
-/**
- * Return the portfolios for the specified project id.
- */
-export function usePortfolios(projectId) {
-    return useSelector((state) => {
-        let portfolios = state.objects.project[projectId]
-            ? state.objects.project[projectId].portfolioIds.map((t) => state.objects.portfolio[t])
-            : []
-        if (portfolios.filter((t) => !t).length > 0) {
-            portfolios = []
-        }
-
-        return portfolios
-    })
-}
-
-/**
- * Return the scenarios for the specified portfolio id.
- */
-export function useScenarios(portfolioId) {
-    return useSelector((state) => {
-        let scenarios = state.objects.portfolio[portfolioId]
-            ? state.objects.portfolio[portfolioId].scenarioIds.map((t) => state.objects.scenario[t])
-            : []
-        if (scenarios.filter((t) => !t).length > 0) {
-            scenarios = []
-        }
-
-        return scenarios
-    })
-}
diff --git a/opendc-web/opendc-web-ui/src/store/hooks/topology.js b/opendc-web/opendc-web-ui/src/store/hooks/topology.js
deleted file mode 100644
index d3ffb3e1..00000000
--- a/opendc-web/opendc-web-ui/src/store/hooks/topology.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import { useSelector } from 'react-redux'
-
-/**
- * Return the current active topology.
- */
-export function useActiveTopology() {
-    return useSelector((state) => state.currentTopologyId !== '-1' && state.objects.topology[state.currentTopologyId])
-}
-
-/**
- * Return the topologies for the active project.
- */
-export function useProjectTopologies() {
-    return useSelector(({ currentProjectId, objects }) => {
-        if (currentProjectId === '-1' || !objects.project[currentProjectId]) {
-            return []
-        }
-
-        const topologies = objects.project[currentProjectId].topologyIds.map((t) => objects.topology[t])
-
-        if (topologies.filter((t) => !t).length > 0) {
-            return []
-        }
-
-        return topologies
-    })
-}
diff --git a/opendc-web/opendc-web-ui/src/store/middlewares/viewport-adjustment.js b/opendc-web/opendc-web-ui/src/store/middlewares/viewport-adjustment.js
deleted file mode 100644
index b4472c54..00000000
--- a/opendc-web/opendc-web-ui/src/store/middlewares/viewport-adjustment.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { SET_MAP_DIMENSIONS, setMapPosition, setMapScale } from '../../actions/map'
-import { SET_CURRENT_TOPOLOGY } from '../../actions/topology/building'
-import {
-    MAP_MAX_SCALE,
-    MAP_MIN_SCALE,
-    SIDEBAR_WIDTH,
-    TILE_SIZE_IN_PIXELS,
-    VIEWPORT_PADDING,
-} from '../../components/app/map/MapConstants'
-import { calculateRoomListBounds } from '../../util/tile-calculations'
-
-export const viewportAdjustmentMiddleware = (store) => (next) => (action) => {
-    const state = store.getState()
-
-    let topologyId = '-1'
-    let mapDimensions = {}
-    if (action.type === SET_CURRENT_TOPOLOGY && action.topologyId !== '-1') {
-        topologyId = action.topologyId
-        mapDimensions = state.map.dimensions
-    } else if (action.type === SET_MAP_DIMENSIONS && state.currentTopologyId !== '-1') {
-        topologyId = state.currentTopologyId
-        mapDimensions = { width: action.width, height: action.height }
-    }
-
-    if (topologyId !== '-1') {
-        const roomIds = state.objects.topology[topologyId].roomIds
-        const rooms = roomIds.map((id) => Object.assign({}, state.objects.room[id]))
-        rooms.forEach((room) => (room.tiles = room.tileIds.map((tileId) => state.objects.tile[tileId])))
-
-        let hasNoTiles = true
-        for (let i in rooms) {
-            if (rooms[i].tiles.length > 0) {
-                hasNoTiles = false
-                break
-            }
-        }
-
-        if (!hasNoTiles) {
-            const viewportParams = calculateParametersToZoomInOnRooms(rooms, mapDimensions.width, mapDimensions.height)
-            store.dispatch(setMapPosition(viewportParams.newX, viewportParams.newY))
-            store.dispatch(setMapScale(viewportParams.newScale))
-        }
-    }
-
-    next(action)
-}
-
-function calculateParametersToZoomInOnRooms(rooms, mapWidth, mapHeight) {
-    const bounds = calculateRoomListBounds(rooms)
-    const newScale = calculateNewScale(bounds, mapWidth, mapHeight)
-
-    // Coordinates of the center of the room, relative to the global origin of the map
-    const roomCenterCoordinates = {
-        x: bounds.center.x * TILE_SIZE_IN_PIXELS * newScale,
-        y: bounds.center.y * TILE_SIZE_IN_PIXELS * newScale,
-    }
-
-    const newX = -roomCenterCoordinates.x + mapWidth / 2
-    const newY = -roomCenterCoordinates.y + mapHeight / 2
-
-    return { newScale, newX, newY }
-}
-
-function calculateNewScale(bounds, mapWidth, mapHeight) {
-    const width = bounds.max.x - bounds.min.x
-    const height = bounds.max.y - bounds.min.y
-
-    const scaleX = (mapWidth - 2 * SIDEBAR_WIDTH) / (width * TILE_SIZE_IN_PIXELS + 2 * VIEWPORT_PADDING)
-    const scaleY = mapHeight / (height * TILE_SIZE_IN_PIXELS + 2 * VIEWPORT_PADDING)
-    const newScale = Math.min(scaleX, scaleY)
-
-    return Math.min(Math.max(MAP_MIN_SCALE, newScale), MAP_MAX_SCALE)
-}