ui: Fetch scenarios and portfolios using React Query

18 files changed, 120 insertions, 408 deletions

diff --git a/opendc-web/opendc-web-ui/src/api/portfolios.js b/opendc-web/opendc-web-ui/src/api/portfolios.js
index 28898e6a..36709b36 100644
--- a/opendc-web/opendc-web-ui/src/api/portfolios.js
+++ b/opendc-web/opendc-web-ui/src/api/portfolios.js
@@ -22,12 +22,12 @@
 
 import { request } from './index'
 
-export function addPortfolio(auth, projectId, portfolio) {
-    return request(auth, `projects/${projectId}/portfolios`, 'POST', { portfolio })
+export function fetchPortfolio(auth, portfolioId) {
+    return request(auth, `portfolios/${portfolioId}`)
 }
 
-export function getPortfolio(auth, portfolioId) {
-    return request(auth, `portfolios/${portfolioId}`)
+export function addPortfolio(auth, portfolio) {
+    return request(auth, `projects/${portfolio.projectId}/portfolios`, 'POST', { portfolio })
 }
 
 export function updatePortfolio(auth, portfolioId, portfolio) {
diff --git a/opendc-web/opendc-web-ui/src/api/scenarios.js b/opendc-web/opendc-web-ui/src/api/scenarios.js
index 095aa788..3a7c7e6f 100644
--- a/opendc-web/opendc-web-ui/src/api/scenarios.js
+++ b/opendc-web/opendc-web-ui/src/api/scenarios.js
@@ -22,12 +22,12 @@
 
 import { request } from './index'
 
-export function addScenario(auth, portfolioId, scenario) {
-    return request(auth, `portfolios/${portfolioId}/scenarios`, 'POST', { scenario })
+export function fetchScenario(auth, scenarioId) {
+    return request(auth, `scenarios/${scenarioId}`)
 }
 
-export function getScenario(auth, scenarioId) {
-    return request(auth, `scenarios/${scenarioId}`)
+export function addScenario(auth, scenario) {
+    return request(auth, `portfolios/${scenario.portfolioId}/scenarios`, 'POST', { scenario })
 }
 
 export function updateScenario(auth, scenarioId, scenario) {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js b/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js
index ce7d5514..f9a380cb 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js
@@ -1,32 +1,15 @@
 import React from 'react'
-import { useSelector } from 'react-redux'
 import PortfolioResultsComponent from '../../../components/app/results/PortfolioResultsComponent'
 import { useRouter } from 'next/router'
+import { usePortfolio, useScenarios } from '../../../data/project'
 
 const PortfolioResultsContainer = (props) => {
     const router = useRouter()
     const { portfolio: currentPortfolioId } = router.query
-    const { scenarios, portfolio } = useSelector((state) => {
-        if (
-            !currentPortfolioId ||
-            !state.objects.portfolio[currentPortfolioId] ||
-            state.objects.portfolio[currentPortfolioId].scenarioIds
-                .map((scenarioId) => state.objects.scenario[scenarioId])
-                .some((s) => s === undefined)
-        ) {
-            return {
-                portfolio: undefined,
-                scenarios: [],
-            }
-        }
-
-        return {
-            portfolio: state.objects.portfolio[currentPortfolioId],
-            scenarios: state.objects.portfolio[currentPortfolioId].scenarioIds.map(
-                (scenarioId) => state.objects.scenario[scenarioId]
-            ),
-        }
-    })
+    const { data: portfolio } = usePortfolio(currentPortfolioId)
+    const scenarios = useScenarios(portfolio?.scenarioIds ?? [])
+        .filter((res) => res.data)
+        .map((res) => res.data)
 
     return <PortfolioResultsComponent {...props} scenarios={scenarios} portfolio={portfolio} />
 }
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js
index 1b539b8f..01183724 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js
@@ -2,17 +2,36 @@ import React, { useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { useRouter } from 'next/router'
 import PortfolioListComponent from '../../../../components/app/sidebars/project/PortfolioListComponent'
-import { addPortfolio, deletePortfolio } from '../../../../redux/actions/portfolios'
-import { getState } from '../../../../util/state-utils'
-import { setCurrentTopology } from '../../../../redux/actions/topology/building'
 import NewPortfolioModalComponent from '../../../../components/modals/custom-components/NewPortfolioModalComponent'
-import { useActivePortfolioId, useActiveProjectId, usePortfolios, useProject } from '../../../../data/project'
+import { usePortfolios, useProject } from '../../../../data/project'
+import { useMutation, useQueryClient } from 'react-query'
+import { addPortfolio, deletePortfolio } from '../../../../api/portfolios'
+import { useAuth } from '../../../../auth'
 
 const PortfolioListContainer = () => {
     const router = useRouter()
     const { project: currentProjectId, portfolio: currentPortfolioId } = router.query
     const { data: currentProject } = useProject(currentProjectId)
-    const portfolios = usePortfolios(currentProjectId)
+    const portfolios = usePortfolios(currentProject?.portfolioIds ?? [])
+        .filter((res) => res.data)
+        .map((res) => res.data)
+
+    const auth = useAuth()
+    const queryClient = useQueryClient()
+    const addMutation = useMutation((data) => addPortfolio(auth, data), {
+        onSuccess: async (result) => {
+            await queryClient.invalidateQueries(['projects', currentProjectId])
+        },
+    })
+    const deleteMutation = useMutation((id) => deletePortfolio(auth, id), {
+        onSuccess: async (result) => {
+            queryClient.setQueryData(['projects', currentProjectId], (old) => ({
+                ...old,
+                portfolioIds: old.portfolioIds.filter((id) => id !== result._id),
+            }))
+            queryClient.removeQueries(['portfolios', result._id])
+        },
+    })
 
     const dispatch = useDispatch()
     const [isVisible, setVisible] = useState(false)
@@ -23,21 +42,14 @@ const PortfolioListContainer = () => {
         },
         onDeletePortfolio: async (id) => {
             if (id) {
-                const state = await getState(dispatch)
-                dispatch(deletePortfolio(id))
-                dispatch(setCurrentTopology(currentProject.topologyIds[0]))
+                await deleteMutation.mutateAsync(id)
                 await router.push(`/projects/${currentProjectId}`)
             }
         },
     }
     const callback = (name, targets) => {
         if (name) {
-            dispatch(
-                addPortfolio(currentProjectId, {
-                    name,
-                    targets,
-                })
-            )
+            addMutation.mutate({ projectId: currentProjectId, name, targets })
         }
         setVisible(false)
     }
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js
index 7acc13ee..6bfc8599 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js
@@ -1,20 +1,40 @@
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
-import { useDispatch } from 'react-redux'
 import ScenarioListComponent from '../../../../components/app/sidebars/project/ScenarioListComponent'
-import { addScenario, deleteScenario } from '../../../../redux/actions/scenarios'
 import NewScenarioModalComponent from '../../../../components/modals/custom-components/NewScenarioModalComponent'
 import { useProjectTopologies } from '../../../../data/topology'
-import { useScenarios } from '../../../../data/project'
+import { usePortfolio, useScenarios } from '../../../../data/project'
 import { useSchedulers, useTraces } from '../../../../data/experiments'
+import { useAuth } from '../../../../auth'
+import { useMutation, useQueryClient } from 'react-query'
+import { addScenario, deleteScenario } from '../../../../api/scenarios'
 
 const ScenarioListContainer = ({ portfolioId }) => {
-    const scenarios = useScenarios(portfolioId)
+    const { data: portfolio } = usePortfolio(portfolioId)
+    const scenarios = useScenarios(portfolio?.scenarioIds ?? [])
+        .filter((res) => res.data)
+        .map((res) => res.data)
     const topologies = useProjectTopologies()
     const traces = useTraces().data ?? []
     const schedulers = useSchedulers().data ?? []
 
-    const dispatch = useDispatch()
+    const auth = useAuth()
+    const queryClient = useQueryClient()
+    const addMutation = useMutation((data) => addScenario(auth, data), {
+        onSuccess: async (result) => {
+            await queryClient.invalidateQueries(['portfolios', portfolioId])
+        },
+    })
+    const deleteMutation = useMutation((id) => deleteScenario(auth, id), {
+        onSuccess: async (result) => {
+            queryClient.setQueryData(['portfolios', portfolioId], (old) => ({
+                ...old,
+                scenarioIds: old.scenarioIds.filter((id) => id !== result._id),
+            }))
+            queryClient.removeQueries(['scenarios', result._id])
+        },
+    })
+
     const [isVisible, setVisible] = useState(false)
 
     const onNewScenario = (currentPortfolioId) => {
@@ -22,20 +42,18 @@ const ScenarioListContainer = ({ portfolioId }) => {
     }
     const onDeleteScenario = (id) => {
         if (id) {
-            dispatch(deleteScenario(id))
+            deleteMutation.mutate(id)
         }
     }
     const callback = (name, portfolioId, trace, topology, operational) => {
         if (name) {
-            dispatch(
-                addScenario({
-                    portfolioId,
-                    name,
-                    trace,
-                    topology,
-                    operational,
-                })
-            )
+            addMutation.mutate({
+                portfolioId,
+                name,
+                trace,
+                topology,
+                operational,
+            })
         }
 
         setVisible(false)
diff --git a/opendc-web/opendc-web-ui/src/data/project.js b/opendc-web/opendc-web-ui/src/data/project.js
index 308930e5..5cf620da 100644
--- a/opendc-web/opendc-web-ui/src/data/project.js
+++ b/opendc-web/opendc-web-ui/src/data/project.js
@@ -20,11 +20,12 @@
  * SOFTWARE.
  */
 
-import { useSelector } from 'react-redux'
-import { useQuery } from 'react-query'
+import { useQueries, useQuery } from 'react-query'
 import { fetchProject, fetchProjects } from '../api/projects'
 import { useAuth } from '../auth'
 import { useRouter } from 'next/router'
+import { fetchPortfolio } from '../api/portfolios'
+import { fetchScenario } from '../api/scenarios'
 
 /**
  * Return the available projects.
@@ -39,45 +40,48 @@ export function useProjects() {
  */
 export function useProject(projectId) {
     const auth = useAuth()
-    return useQuery(`projects/${projectId}`, () => fetchProject(auth, projectId), { enabled: !!projectId })
+    return useQuery(['projects', projectId], () => fetchProject(auth, projectId), { enabled: !!projectId })
 }
 
 /**
- * Return the current active project identifier.
+ * Return the portfolio with the specified identifier.
  */
-export function useActiveProjectId() {
-    const router = useRouter()
-    const { project } = router.query
-    return project
+export function usePortfolio(portfolioId) {
+    const auth = useAuth()
+    return useQuery(['portfolios', portfolioId], () => fetchPortfolio(auth, portfolioId), { enabled: !!portfolioId })
 }
 
 /**
  * Return the portfolios for the specified project id.
  */
-export function usePortfolios(projectId) {
-    const { data: project } = useProject(projectId)
-    return useSelector((state) => {
-        let portfolios = project?.portfolioIds?.map((t) => state.objects.portfolio[t]) ?? []
-        if (portfolios.filter((t) => !t).length > 0) {
-            portfolios = []
-        }
-
-        return portfolios
-    })
+export function usePortfolios(portfolioIds) {
+    const auth = useAuth()
+    return useQueries(
+        portfolioIds.map((portfolioId) => ({
+            queryKey: ['portfolios', portfolioId],
+            queryFn: () => fetchPortfolio(auth, portfolioId),
+        }))
+    )
 }
 
 /**
- * Return the scenarios for the specified portfolio id.
+ * Return the scenarios with the specified identifiers.
  */
-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 = []
-        }
+export function useScenarios(scenarioIds) {
+    const auth = useAuth()
+    return useQueries(
+        scenarioIds.map((scenarioId) => ({
+            queryKey: ['scenario', scenarioId],
+            queryFn: () => fetchScenario(auth, scenarioId),
+        }))
+    )
+}
 
-        return scenarios
-    })
+/**
+ * Return the current active project identifier.
+ */
+export function useActiveProjectId() {
+    const router = useRouter()
+    const { project } = router.query
+    return project
 }
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
index b21db44c..d3d61271 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -23,12 +23,11 @@
 import { useRouter } from 'next/router'
 import Head from 'next/head'
 import AppNavbarContainer from '../../../../containers/navigation/AppNavbarContainer'
-import React, { useEffect } from 'react'
+import React from 'react'
 import { useProject } from '../../../../data/project'
 import ProjectSidebarContainer from '../../../../containers/app/sidebars/project/ProjectSidebarContainer'
 import PortfolioResultsContainer from '../../../../containers/app/results/PortfolioResultsContainer'
 import { useDispatch } from 'react-redux'
-import { openPortfolioSucceeded } from '../../../../redux/actions/portfolios'
 
 /**
  * Page that displays the results in a portfolio.
@@ -41,11 +40,6 @@ function Portfolio() {
     const title = project?.name ? project?.name + ' - OpenDC' : 'Simulation - OpenDC'
 
     const dispatch = useDispatch()
-    useEffect(() => {
-        if (portfolioId) {
-            dispatch(openPortfolioSucceeded(projectId, portfolioId))
-        }
-    }, [projectId, portfolioId, dispatch])
 
     return (
         <div className="page-container full-height">
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/portfolios.js b/opendc-web/opendc-web-ui/src/redux/actions/portfolios.js
deleted file mode 100644
index 923cd217..00000000
--- a/opendc-web/opendc-web-ui/src/redux/actions/portfolios.js
+++ /dev/null
@@ -1,34 +0,0 @@
-export const ADD_PORTFOLIO = 'ADD_PORTFOLIO'
-export const UPDATE_PORTFOLIO = 'UPDATE_PORTFOLIO'
-export const DELETE_PORTFOLIO = 'DELETE_PORTFOLIO'
-export const OPEN_PORTFOLIO_SUCCEEDED = 'OPEN_PORTFOLIO_SUCCEEDED'
-
-export function addPortfolio(projectId, portfolio) {
-    return {
-        type: ADD_PORTFOLIO,
-        projectId,
-        portfolio,
-    }
-}
-
-export function updatePortfolio(portfolio) {
-    return {
-        type: UPDATE_PORTFOLIO,
-        portfolio,
-    }
-}
-
-export function deletePortfolio(id) {
-    return {
-        type: DELETE_PORTFOLIO,
-        id,
-    }
-}
-
-export function openPortfolioSucceeded(projectId, portfolioId) {
-    return {
-        type: OPEN_PORTFOLIO_SUCCEEDED,
-        projectId,
-        portfolioId,
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/scenarios.js b/opendc-web/opendc-web-ui/src/redux/actions/scenarios.js
deleted file mode 100644
index 644933d6..00000000
--- a/opendc-web/opendc-web-ui/src/redux/actions/scenarios.js
+++ /dev/null
@@ -1,34 +0,0 @@
-export const ADD_SCENARIO = 'ADD_SCENARIO'
-export const UPDATE_SCENARIO = 'UPDATE_SCENARIO'
-export const DELETE_SCENARIO = 'DELETE_SCENARIO'
-export const OPEN_SCENARIO_SUCCEEDED = 'OPEN_SCENARIO_SUCCEEDED'
-
-export function addScenario(scenario) {
-    return {
-        type: ADD_SCENARIO,
-        scenario,
-    }
-}
-
-export function updateScenario(scenario) {
-    return {
-        type: UPDATE_SCENARIO,
-        scenario,
-    }
-}
-
-export function deleteScenario(id) {
-    return {
-        type: DELETE_SCENARIO,
-        id,
-    }
-}
-
-export function openScenarioSucceeded(projectId, portfolioId, scenarioId) {
-    return {
-        type: OPEN_SCENARIO_SUCCEEDED,
-        projectId,
-        portfolioId,
-        scenarioId,
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/redux/middleware/viewport-adjustment.js b/opendc-web/opendc-web-ui/src/redux/middleware/viewport-adjustment.js
index 6b22eb80..bee6becd 100644
--- a/opendc-web/opendc-web-ui/src/redux/middleware/viewport-adjustment.js
+++ b/opendc-web/opendc-web-ui/src/redux/middleware/viewport-adjustment.js
@@ -22,7 +22,7 @@ export const viewportAdjustmentMiddleware = (store) => (next) => (action) => {
         mapDimensions = { width: action.width, height: action.height }
     }
 
-    if (topologyId !== '-1') {
+    if (topologyId && 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])))
diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/construction-mode.js b/opendc-web/opendc-web-ui/src/redux/reducers/construction-mode.js
index 257dddd2..5bac7fea 100644
--- a/opendc-web/opendc-web-ui/src/redux/reducers/construction-mode.js
+++ b/opendc-web/opendc-web-ui/src/redux/reducers/construction-mode.js
@@ -9,8 +9,6 @@ import {
     START_ROOM_EDIT,
 } from '../actions/topology/building'
 import { DELETE_ROOM, START_RACK_CONSTRUCTION, STOP_RACK_CONSTRUCTION } from '../actions/topology/room'
-import { OPEN_PORTFOLIO_SUCCEEDED } from '../actions/portfolios'
-import { OPEN_SCENARIO_SUCCEEDED } from '../actions/scenarios'
 
 export function currentRoomInConstruction(state = '-1', action) {
     switch (action.type) {
@@ -20,8 +18,6 @@ export function currentRoomInConstruction(state = '-1', action) {
             return action.roomId
         case CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED:
         case FINISH_NEW_ROOM_CONSTRUCTION:
-        case OPEN_PORTFOLIO_SUCCEEDED:
-        case OPEN_SCENARIO_SUCCEEDED:
         case FINISH_ROOM_EDIT:
         case SET_CURRENT_TOPOLOGY:
         case DELETE_ROOM:
@@ -36,8 +32,6 @@ export function inRackConstructionMode(state = false, action) {
         case START_RACK_CONSTRUCTION:
             return true
         case STOP_RACK_CONSTRUCTION:
-        case OPEN_PORTFOLIO_SUCCEEDED:
-        case OPEN_SCENARIO_SUCCEEDED:
         case SET_CURRENT_TOPOLOGY:
         case GO_DOWN_ONE_INTERACTION_LEVEL:
             return false
diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/interaction-level.js b/opendc-web/opendc-web-ui/src/redux/reducers/interaction-level.js
index 8bf81b98..9f23949f 100644
--- a/opendc-web/opendc-web-ui/src/redux/reducers/interaction-level.js
+++ b/opendc-web/opendc-web-ui/src/redux/reducers/interaction-level.js
@@ -1,4 +1,3 @@
-import { OPEN_PORTFOLIO_SUCCEEDED } from '../actions/portfolios'
 import {
     GO_DOWN_ONE_INTERACTION_LEVEL,
     GO_FROM_BUILDING_TO_ROOM,
@@ -6,12 +5,9 @@ import {
     GO_FROM_ROOM_TO_RACK,
 } from '../actions/interaction-level'
 import { SET_CURRENT_TOPOLOGY } from '../actions/topology/building'
-import { OPEN_SCENARIO_SUCCEEDED } from '../actions/scenarios'
 
 export function interactionLevel(state = { mode: 'BUILDING' }, action) {
     switch (action.type) {
-        case OPEN_PORTFOLIO_SUCCEEDED:
-        case OPEN_SCENARIO_SUCCEEDED:
         case SET_CURRENT_TOPOLOGY:
             return {
                 mode: 'BUILDING',
diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/index.js b/opendc-web/opendc-web-ui/src/redux/sagas/index.js
index 939be691..74d9efb6 100644
--- a/opendc-web/opendc-web-ui/src/redux/sagas/index.js
+++ b/opendc-web/opendc-web-ui/src/redux/sagas/index.js
@@ -1,6 +1,5 @@
 import { takeEvery } from 'redux-saga/effects'
-import { ADD_PORTFOLIO, DELETE_PORTFOLIO, OPEN_PORTFOLIO_SUCCEEDED, UPDATE_PORTFOLIO } from '../actions/portfolios'
-import { ADD_PROJECT, DELETE_PROJECT, FETCH_PROJECTS, OPEN_PROJECT_SUCCEEDED } from '../actions/projects'
+import { OPEN_PROJECT_SUCCEEDED } from '../actions/projects'
 import {
     ADD_TILE,
     CANCEL_NEW_ROOM_CONSTRUCTION,
@@ -10,7 +9,6 @@ import {
 import { ADD_UNIT, DELETE_MACHINE, DELETE_UNIT } from '../actions/topology/machine'
 import { ADD_MACHINE, DELETE_RACK, EDIT_RACK_NAME } from '../actions/topology/rack'
 import { ADD_RACK_TO_TILE, DELETE_ROOM, EDIT_ROOM_NAME } from '../actions/topology/room'
-import { onAddPortfolio, onDeletePortfolio, onOpenPortfolioSucceeded, onUpdatePortfolio } from './portfolios'
 import { onOpenProjectSucceeded } from './projects'
 import {
     onAddMachine,
@@ -30,15 +28,11 @@ import {
     onStartNewRoomConstruction,
 } from './topology'
 import { ADD_TOPOLOGY, DELETE_TOPOLOGY } from '../actions/topologies'
-import { ADD_SCENARIO, DELETE_SCENARIO, OPEN_SCENARIO_SUCCEEDED, UPDATE_SCENARIO } from '../actions/scenarios'
-import { onAddScenario, onDeleteScenario, onOpenScenarioSucceeded, onUpdateScenario } from './scenarios'
 import { onAddPrefab } from './prefabs'
 import { ADD_PREFAB } from '../actions/prefabs'
 
 export default function* rootSaga() {
     yield takeEvery(OPEN_PROJECT_SUCCEEDED, onOpenProjectSucceeded)
-    yield takeEvery(OPEN_PORTFOLIO_SUCCEEDED, onOpenPortfolioSucceeded)
-    yield takeEvery(OPEN_SCENARIO_SUCCEEDED, onOpenScenarioSucceeded)
 
     yield takeEvery(ADD_TOPOLOGY, onAddTopology)
     yield takeEvery(DELETE_TOPOLOGY, onDeleteTopology)
@@ -56,13 +50,5 @@ export default function* rootSaga() {
     yield takeEvery(ADD_UNIT, onAddUnit)
     yield takeEvery(DELETE_UNIT, onDeleteUnit)
 
-    yield takeEvery(ADD_PORTFOLIO, onAddPortfolio)
-    yield takeEvery(UPDATE_PORTFOLIO, onUpdatePortfolio)
-    yield takeEvery(DELETE_PORTFOLIO, onDeletePortfolio)
-
-    yield takeEvery(ADD_SCENARIO, onAddScenario)
-    yield takeEvery(UPDATE_SCENARIO, onUpdateScenario)
-    yield takeEvery(DELETE_SCENARIO, onDeleteScenario)
-
     yield takeEvery(ADD_PREFAB, onAddPrefab)
 }
diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/objects.js b/opendc-web/opendc-web-ui/src/redux/sagas/objects.js
index fe826014..88f71fe4 100644
--- a/opendc-web/opendc-web-ui/src/redux/sagas/objects.js
+++ b/opendc-web/opendc-web-ui/src/redux/sagas/objects.js
@@ -1,7 +1,5 @@
 import { call, put, select, getContext } from 'redux-saga/effects'
 import { addToStore } from '../actions/objects'
-import { fetchSchedulers } from '../../api/schedulers'
-import { fetchTraces } from '../../api/traces'
 import { getTopology, updateTopology } from '../../api/topologies'
 import { uuid } from 'uuidv4'
 
@@ -21,24 +19,9 @@ export const OBJECT_SELECTORS = {
     topology: (state) => state.objects.topology,
 }
 
-function* fetchAndStoreObject(objectType, id, apiCall) {
-    const objectStore = yield select(OBJECT_SELECTORS[objectType])
-    let object = objectStore[id]
-    if (!object) {
-        object = yield apiCall
-        yield put(addToStore(objectType, object))
-    }
-    return object
-}
-
-function* fetchAndStoreObjects(objectType, apiCall) {
-    const objects = yield apiCall
-    for (let object of objects) {
-        yield put(addToStore(objectType, object))
-    }
-    return objects
-}
-
+/**
+ * Fetches and normalizes the topology with the specified identifier.
+ */
 export const fetchAndStoreTopology = function* (id) {
     const topologyStore = yield select(OBJECT_SELECTORS['topology'])
     const roomStore = yield select(OBJECT_SELECTORS['room'])
@@ -135,12 +118,15 @@ const generateIdIfNotPresent = (obj) => {
 }
 
 export const updateTopologyOnServer = function* (id) {
-    const topology = yield getTopologyAsObject(id, true)
+    const topology = yield denormalizeTopology(id, true)
     const auth = yield getContext('auth')
     yield call(updateTopology, auth, topology)
 }
 
-export const getTopologyAsObject = function* (id, keepIds) {
+/**
+ * Denormalizes the topology representation in order to be stored on the server.
+ */
+export const denormalizeTopology = function* (id, keepIds) {
     const topologyStore = yield select(OBJECT_SELECTORS['topology'])
     const rooms = yield getAllRooms(topologyStore[id].roomIds, keepIds)
     return {
diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/portfolios.js b/opendc-web/opendc-web-ui/src/redux/sagas/portfolios.js
deleted file mode 100644
index 68956225..00000000
--- a/opendc-web/opendc-web-ui/src/redux/sagas/portfolios.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import { call, put, select, delay, getContext } from 'redux-saga/effects'
-import { addToStore } from '../actions/objects'
-import { addPortfolio, deletePortfolio, getPortfolio, updatePortfolio } from '../../api/portfolios'
-import { fetchProject } from '../../api/projects'
-import { getScenario } from '../../api/scenarios'
-
-export function* onOpenPortfolioSucceeded(action) {
-    try {
-        const auth = yield getContext('auth')
-        const queryClient = yield getContext('queryClient')
-        const project = yield call(() =>
-            queryClient.fetchQuery(`projects/${action.projectId}`, () => fetchProject(auth, action.projectId))
-        )
-        yield fetchAndStoreAllTopologiesOfProject(action.projectId)
-        yield fetchPortfoliosOfProject(project)
-
-        yield watchForPortfolioResults(action.portfolioId)
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* watchForPortfolioResults(portfolioId) {
-    try {
-        let unfinishedScenarios = yield getCurrentUnfinishedScenarios(portfolioId)
-
-        while (unfinishedScenarios.length > 0) {
-            yield delay(3000)
-            yield fetchPortfolioWithScenarios(portfolioId)
-            unfinishedScenarios = yield getCurrentUnfinishedScenarios(portfolioId)
-        }
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* getCurrentUnfinishedScenarios(portfolioId) {
-    try {
-        if (!portfolioId) {
-            return []
-        }
-
-        const scenarioIds = yield select((state) => state.objects.portfolio[portfolioId].scenarioIds)
-        const scenarioObjects = yield select((state) => state.objects.scenario)
-        const scenarios = scenarioIds.map((s) => scenarioObjects[s])
-        return scenarios.filter((s) => !s || s.simulation.state === 'QUEUED' || s.simulation.state === 'RUNNING')
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* fetchPortfoliosOfProject(project) {
-    try {
-        for (const i in project.portfolioIds) {
-            yield fetchPortfolioWithScenarios(project.portfolioIds[i])
-        }
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* fetchPortfolioWithScenarios(portfolioId) {
-    try {
-        const auth = yield getContext('auth')
-        const portfolio = yield call(getPortfolio, auth, portfolioId)
-        yield put(addToStore('portfolio', portfolio))
-
-        for (let i in portfolio.scenarioIds) {
-            const scenario = yield call(getScenario, auth, portfolio.scenarioIds[i])
-            yield put(addToStore('scenario', scenario))
-        }
-        return portfolio
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* onAddPortfolio(action) {
-    try {
-        const { projectId } = action
-        const auth = yield getContext('auth')
-        const portfolio = yield call(
-            addPortfolio,
-            auth,
-            projectId,
-            Object.assign({}, action.portfolio, {
-                projectId: projectId,
-                scenarioIds: [],
-            })
-        )
-        yield put(addToStore('portfolio', portfolio))
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* onUpdatePortfolio(action) {
-    try {
-        const auth = yield getContext('auth')
-        const portfolio = yield call(updatePortfolio, auth, action.portfolio._id, action.portfolio)
-        yield put(addToStore('portfolio', portfolio))
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* onDeletePortfolio(action) {
-    try {
-        const auth = yield getContext('auth')
-        yield call(deletePortfolio, auth, action.id)
-    } catch (error) {
-        console.error(error)
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/projects.js b/opendc-web/opendc-web-ui/src/redux/sagas/projects.js
index 6dc3c682..5809d4d2 100644
--- a/opendc-web/opendc-web-ui/src/redux/sagas/projects.js
+++ b/opendc-web/opendc-web-ui/src/redux/sagas/projects.js
@@ -1,18 +1,8 @@
-import { call, getContext } from 'redux-saga/effects'
 import { fetchAndStoreAllTopologiesOfProject } from './topology'
-import { fetchPortfoliosOfProject } from './portfolios'
-import { fetchProject } from '../../api/projects'
 
 export function* onOpenProjectSucceeded(action) {
     try {
-        const auth = yield getContext('auth')
-        const queryClient = yield getContext('queryClient')
-        const project = yield call(() =>
-            queryClient.fetchQuery(`projects/${action.id}`, () => fetchProject(auth, action.id))
-        )
-
         yield fetchAndStoreAllTopologiesOfProject(action.id, true)
-        yield fetchPortfoliosOfProject(project)
     } catch (error) {
         console.error(error)
     }
diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/scenarios.js b/opendc-web/opendc-web-ui/src/redux/sagas/scenarios.js
deleted file mode 100644
index 10ab3547..00000000
--- a/opendc-web/opendc-web-ui/src/redux/sagas/scenarios.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { call, put, select, getContext } from 'redux-saga/effects'
-import { addPropToStoreObject, addToStore } from '../actions/objects'
-import { fetchProject } from '../../api/projects'
-import { fetchAndStoreAllTopologiesOfProject } from './topology'
-import { addScenario, deleteScenario, updateScenario } from '../../api/scenarios'
-import { fetchPortfolioWithScenarios, watchForPortfolioResults } from './portfolios'
-
-export function* onOpenScenarioSucceeded(action) {
-    try {
-        const auth = yield getContext('auth')
-        const queryClient = yield getContext('queryClient')
-        const project = yield call(() =>
-            queryClient.fetchQuery(`projects/${action.projectId}`, () => fetchProject(auth, action.projectId))
-        )
-        yield put(addToStore('project', project))
-        yield fetchAndStoreAllTopologiesOfProject(project._id)
-        yield fetchPortfolioWithScenarios(action.portfolioId)
-
-        // TODO Fetch scenario-specific metrics
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* onAddScenario(action) {
-    try {
-        const auth = yield getContext('auth')
-        const scenario = yield call(addScenario, auth, action.scenario.portfolioId, action.scenario)
-        yield put(addToStore('scenario', scenario))
-
-        const scenarioIds = yield select((state) => state.objects.portfolio[action.scenario.portfolioId].scenarioIds)
-        yield put(
-            addPropToStoreObject('portfolio', action.scenario.portfolioId, {
-                scenarioIds: scenarioIds.concat([scenario._id]),
-            })
-        )
-        yield watchForPortfolioResults(action.scenario.portfolioId)
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* onUpdateScenario(action) {
-    try {
-        const auth = yield getContext('auth')
-        const scenario = yield call(updateScenario, auth, action.scenario._id, action.scenario)
-        yield put(addToStore('scenario', scenario))
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* onDeleteScenario(action) {
-    try {
-        const auth = yield getContext('auth')
-        const scenario = yield select((state) => state.objects.scenario[action.id])
-        yield call(deleteScenario, auth, action.id)
-
-        const scenarioIds = yield select((state) => state.objects.portfolio[scenario.portfolioId].scenarioIds)
-
-        yield put(
-            addPropToStoreObject('scenario', scenario.portfolioId, {
-                scenarioIds: scenarioIds.filter((id) => id !== action.id),
-            })
-        )
-    } catch (error) {
-        console.error(error)
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
index 3f41e1d4..efa125c6 100644
--- a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
+++ b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
@@ -16,7 +16,7 @@ import {
     DEFAULT_RACK_SLOT_CAPACITY,
     MAX_NUM_UNITS_PER_MACHINE,
 } from '../../components/app/map/MapConstants'
-import { fetchAndStoreTopology, getTopologyAsObject, updateTopologyOnServer } from './objects'
+import { fetchAndStoreTopology, denormalizeTopology, updateTopologyOnServer } from './objects'
 import { uuid } from 'uuidv4'
 import { addTopology, deleteTopology } from '../../api/topologies'
 import { fetchProject } from '../../api/projects'
@@ -26,7 +26,7 @@ export function* fetchAndStoreAllTopologiesOfProject(projectId, setTopology = fa
         const auth = yield getContext('auth')
         const queryClient = yield getContext('queryClient')
         const project = yield call(() =>
-            queryClient.fetchQuery(`projects/${projectId}`, () => fetchProject(auth, projectId))
+            queryClient.fetchQuery(['projects', projectId], () => fetchProject(auth, projectId))
         )
 
         for (let i in project.topologyIds) {
@@ -47,7 +47,7 @@ export function* onAddTopology(action) {
 
         let topologyToBeCreated
         if (duplicateId) {
-            topologyToBeCreated = yield getTopologyAsObject(duplicateId, false)
+            topologyToBeCreated = yield denormalizeTopology(duplicateId, false)
             topologyToBeCreated = { ...topologyToBeCreated, name }
         } else {
             topologyToBeCreated = { name: action.name, rooms: [] }
@@ -67,7 +67,7 @@ export function* onDeleteTopology(action) {
         const auth = yield getContext('auth')
         const queryClient = yield getContext('queryClient')
         const project = yield call(() =>
-            queryClient.fetchQuery(`projects/${action.projectId}`, () => fetchProject(auth, action.projectId))
+            queryClient.fetchQuery(['projects', action.projectId], () => fetchProject(auth, action.projectId))
         )
         const topologyIds = project?.topologyIds ?? []