fix(web/ui): Only display selected metrics

This change fixes an issue with the web interface where all available
metrics were shown to the user, instead of the metrics belonging to the
portfolio.

2 files changed, 21 insertions, 19 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/portfolios/PortfolioResults.js b/opendc-web/opendc-web-ui/src/components/portfolios/PortfolioResults.js
index f63f0c7f..33604896 100644
--- a/opendc-web/opendc-web-ui/src/components/portfolios/PortfolioResults.js
+++ b/opendc-web/opendc-web-ui/src/components/portfolios/PortfolioResults.js
@@ -20,10 +20,10 @@
  * SOFTWARE.
  */
 
-import React from 'react'
+import React, { useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { Bar, CartesianGrid, ComposedChart, ErrorBar, ResponsiveContainer, Scatter, XAxis, YAxis } from 'recharts'
-import { AVAILABLE_METRICS, METRIC_NAMES, METRIC_UNITS } from '../../util/available-metrics'
+import { METRIC_NAMES, METRIC_UNITS } from '../../util/available-metrics'
 import { mean, std } from 'mathjs'
 import approx from 'approximate-number'
 import {
@@ -46,10 +46,9 @@ import { usePortfolio } from '../../data/project'
 import PortfolioResultInfo from './PortfolioResultInfo'
 import NewScenario from './NewScenario'
 
-const PortfolioResults = ({ projectId, portfolioId }) => {
-    const { status, data: scenarios = [] } = usePortfolio(projectId, portfolioId, {
-        select: (portfolio) => portfolio.scenarios,
-    })
+function PortfolioResults({ projectId, portfolioId }) {
+    const { status, data: portfolio } = usePortfolio(projectId, portfolioId)
+    const scenarios = portfolio?.scenarios ?? []
 
     if (status === 'loading') {
         return (
@@ -94,21 +93,24 @@ const PortfolioResults = ({ projectId, portfolioId }) => {
         )
     }
 
-    const dataPerMetric = {}
-
-    AVAILABLE_METRICS.forEach((metric) => {
-        dataPerMetric[metric] = scenarios
-            .filter((scenario) => scenario.job?.results)
-            .map((scenario) => ({
-                name: scenario.name,
-                value: mean(scenario.job.results[metric]),
-                errorX: std(scenario.job.results[metric]),
-            }))
-    })
+    const metrics = portfolio?.targets?.metrics ?? []
+    const dataPerMetric = useMemo(() => {
+        const dataPerMetric = {}
+        metrics.forEach((metric) => {
+            dataPerMetric[metric] = scenarios
+                .filter((scenario) => scenario.job?.results)
+                .map((scenario) => ({
+                    name: scenario.name,
+                    value: mean(scenario.job.results[metric]),
+                    errorX: std(scenario.job.results[metric]),
+                }))
+        })
+        return dataPerMetric
+    }, [scenarios, metrics])
 
     return (
         <Grid hasGutter>
-            {AVAILABLE_METRICS.map((metric) => (
+            {metrics.map((metric) => (
                 <GridItem xl={6} lg={12} key={metric}>
                     <Card>
                         <CardHeader>
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 68345d0b..4b9aa437 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
@@ -45,7 +45,7 @@ import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
 import PortfolioOverview from '../../../../components/portfolios/PortfolioOverview'
 import { usePortfolio } from '../../../../data/project'
 
-const PortfolioResults = dynamic(() => import('../../../../components/portfolios/PortfolioResults'))
+const PortfolioResults = dynamic(() => import('../../../../components/portfolios/PortfolioResults'), { ssr: false })
 
 /**
  * Page that displays the results in a portfolio.