Make full settings panel work

kausaltech · Oct 14, 2024 · 7ed6061 · 7ed6061
1 parent ed6b068
commit 7ed6061
Show file tree

Hide file tree

Showing 14 changed files with 138 additions and 152 deletions.
diff --git a/components/paths/NormalizationWidget.tsx b/components/paths/NormalizationWidget.tsx
@@ -3,11 +3,13 @@ import {
   SetNormalizationMutation,
   SetNormalizationMutationVariables,
 } from 'common/__generated__/paths/graphql';
-import { GET_PARAMETERS } from 'queries/getParameters';
-import { useTranslation } from 'react-i18next';
+import { useTranslations } from 'next-intl';
+import { GET_PARAMETERS } from 'queries/paths/get-paths-parameters';
 import { FormGroup, Input, Label } from 'reactstrap';
 import styled from 'styled-components';
 
+import { usePaths } from '@/context/paths/paths';
+import { getHttpHeaders } from '@/utils/paths/paths.utils';
 import { gql, useMutation, useQuery } from '@apollo/client';
 
 const SwitchWrapper = styled.div`
@@ -32,11 +34,15 @@ type NormalizationWidgetProps = {
 };
 
 function NormalizationWidget(props: NormalizationWidgetProps) {
-  const { t } = useTranslation();
-
+  const t = useTranslations();
+  const paths = usePaths();
   const { loading, error, data, previousData, refetch, networkStatus } =
     useQuery<GetParametersQuery>(GET_PARAMETERS, {
       notifyOnNetworkStatusChange: true,
+      context: {
+        uri: '/api/graphql-paths',
+        headers: getHttpHeaders({ instanceIdentifier: paths?.instance.id }),
+      },
     });
 
   const [
@@ -45,6 +51,10 @@ function NormalizationWidget(props: NormalizationWidgetProps) {
   ] = useMutation<SetNormalizationMutation, SetNormalizationMutationVariables>(
     SET_NORMALIZATION_MUTATION,
     {
+      context: {
+        uri: '/api/graphql-paths',
+        headers: getHttpHeaders({ instanceIdentifier: paths?.instance.id }),
+      },
       refetchQueries: 'active',
     }
   );

diff --git a/components/paths/graphs/DimensionalBarGraph.tsx b/components/paths/graphs/DimensionalBarGraph.tsx
@@ -92,9 +92,9 @@ const DimensionalBarGraph = ({ metric, endYear }: DimensionalBarGraphProps) => {
     !cube.hasDimension('greenhouse_gases')
   ) {
     if (metric.unit.short === 't/Einw./a') {
-      longUnit = t('tco2-e-inhabitant');
+      longUnit = t.raw('tco2-e-inhabitant');
     } else if (metric.unit.short === 'kt/a') {
-      longUnit = t('ktco2-e');
+      longUnit = t.raw('ktco2-e');
     }
   }
 

diff --git a/components/paths/toolbar/CompleteSettings.tsx b/components/paths/toolbar/CompleteSettings.tsx
@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 
+import RangeSelector from 'components/paths/RangeSelector';
 import { useTranslations } from 'next-intl';
 import {
   Button,
@@ -13,15 +14,14 @@ import styled from 'styled-components';
 
 import Icon from '@/components/common/Icon';
 import GoalSelector from '@/components/paths/GoalSelector';
-import RangeSelector from '@/components/paths/RangeSelector';
 import ScenarioSelector from '@/components/paths/ScenarioSelector';
-//import ScenarioBadge from 'components/paths/ScenarioBadge';
-import GlobalParameters from '@/components/paths/toolbar/GlobalParameters';
 import GoalOutcomeBar from '@/components/paths/toolbar/GoalOutcomeBar';
 import { activeScenarioVar, yearRangeVar } from '@/context/paths/cache';
 import { usePaths } from '@/context/paths/paths';
 import { useReactiveVar } from '@apollo/client';
 
+import NormalizationWidget from '../NormalizationWidget';
+
 const SettingsHeader = styled.div`
   padding: 1rem 0;
   background-color: ${(props) => props.theme.graphColors.grey010};
@@ -80,16 +80,17 @@ const Card = styled.div`
 const CompleteSettings = (props) => {
   const t = useTranslations();
   const paths = usePaths();
-  const instance = useInstance();
+  const instance = paths?.instance;
   const activeScenario = useReactiveVar(activeScenarioVar);
 
   const hasGlobalParameters =
-    site.parameters.find((param) => param.isCustomizable) !== undefined;
-  const hasNormalizations = site.availableNormalizations.length > 0;
+    paths.parameters.find((param) => param.isCustomizable) !== undefined;
+  const hasNormalizations = paths.availableNormalizations.length > 0;
 
   // State of display settings
   // Year range
   const yearRange = useReactiveVar(yearRangeVar);
+
   const setYearRange = useCallback(
     (newRange: [number, number]) => {
       yearRangeVar(newRange);
@@ -101,7 +102,7 @@ const CompleteSettings = (props) => {
   const nrGoals = instance.goals.length;
 
   // Normalization
-  const availableNormalizations = site.availableNormalizations;
+  const availableNormalizations = paths.availableNormalizations;
   return (
     <>
       <SettingsHeader>
@@ -114,7 +115,7 @@ const CompleteSettings = (props) => {
           <SettingsSection>
             <AccordionHeader color="primary" id="display-toggler">
               <h4>{t('display')}</h4>
-              <Icon name="angleDown" width="24px" height="24px" />
+              <Icon name="angle-down" width="24px" height="24px" />
             </AccordionHeader>
             <UncontrolledCollapse toggler="#display-toggler" defaultOpen>
               <Card>
@@ -124,24 +125,20 @@ const CompleteSettings = (props) => {
                       <Col md="5">
                         <h5>{t('comparing-years')}</h5>
                         <RangeSelector
-                          min={site.minYear}
-                          max={site.maxYear}
+                          min={instance.minimumHistoricalYear}
+                          max={instance.modelEndYear}
+                          referenceYear={instance.referenceYear}
                           defaultMin={yearRange[0]}
                           defaultMax={yearRange[1]}
-                          referenceYear={
-                            instance.referenceYear ?? site.referenceYear
-                          }
                           handleChange={setYearRange}
                         />
                       </Col>
                       {hasNormalizations && (
                         <Col md="3">
                           <h5>{t('normalization')}</h5>
-                          {/*
                           <NormalizationWidget
                             availableNormalizations={availableNormalizations}
-                          />*/}
-                          (coming soon)
+                          />
                         </Col>
                       )}
                       {nrGoals > 1 && (
@@ -159,9 +156,9 @@ const CompleteSettings = (props) => {
           <SettingsSection>
             <AccordionHeader color="primary" id="scenario-toggler">
               <h4>
-                {t('scenario')}: {activeScenario.name}
+                {t('scenario')}: {activeScenario?.name}
               </h4>
-              <Icon name="angleDown" width="24px" height="24px" />
+              <Icon name="angle-down" width="24px" height="24px" />
             </AccordionHeader>
             <UncontrolledCollapse toggler="#scenario-toggler" defaultOpen>
               <Card>
@@ -179,7 +176,6 @@ const CompleteSettings = (props) => {
                     {hasGlobalParameters && (
                       <>
                         <h5>Global settings</h5>
-                        <GlobalParameters parameters={site.parameters} />
                       </>
                     )}
                   </Widget>

diff --git a/components/paths/toolbar/GoalOutcomeBar.tsx b/components/paths/toolbar/GoalOutcomeBar.tsx
@@ -189,21 +189,23 @@ const outcomeAsText = (
   t
 ) => {
   if (isForecast)
-    return t('outcome-bar-summary-forecast', {
-      scenarioName,
-      goalType,
-      selectedYear,
-      selectedYearValue,
-      nearestGoalYear,
-      nearestGoalValue,
+    return t.markup('outcome-bar-summary-forecast', {
+      scenarioName: 'sfsdfsd',
+      goalType: goalType,
+      selectedYear: selectedYear,
+      selectedYearValue: selectedYearValue,
+      nearestGoalYear: nearestGoalYear,
+      nearestGoalValue: nearestGoalValue,
+      strong: (chunks) => `<b>${chunks}</b>`,
       interpolation: { escapeValue: false },
     });
-  return t('outcome-bar-summary-historical', {
-    goalType,
-    selectedYear,
-    selectedYearDifference,
-    nearestGoalYear,
-    nearestGoalValue,
+  return t.markup('outcome-bar-summary-historical', {
+    goalType: goalType,
+    selectedYear: selectedYear,
+    selectedYearDifference: selectedYearDifference,
+    nearestGoalYear: nearestGoalYear,
+    nearestGoalValue: nearestGoalValue,
+    strong: (chunks) => `<b>${chunks}</b>`,
     interpolation: { escapeValue: false },
   });
 };
@@ -322,9 +324,9 @@ const GoalOutcomeBar: React.FC<GoalOutcomeBarProps> = (props) => {
   // FIXME: Nasty hack to show 'CO2e' where it might be applicable until
   // the backend gets proper support for unit specifiers.
   if (unit === 't∕(Einw.·a)') {
-    longUnit = t('tco2-e-inhabitant');
+    longUnit = t.raw('tco2-e-inhabitant');
   } else if (unit === 'kt∕a') {
-    longUnit = t('ktco2-e');
+    longUnit = t.raw('ktco2-e');
   }
 
   const verbalizedOutcome = outcomeAsText(

diff --git a/components/paths/toolbar/MediumSettings.tsx b/components/paths/toolbar/MediumSettings.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 
 import GoalSelector from 'components/paths/GoalSelector';
 import RangeSelector from 'components/paths/RangeSelector';
@@ -8,11 +8,7 @@ import { useTranslations } from 'next-intl';
 import { Col, Container, Popover, PopoverBody, Row } from 'reactstrap';
 import styled from 'styled-components';
 
-import {
-  activeGoalVar,
-  activeScenarioVar,
-  yearRangeVar,
-} from '@/context/paths/cache';
+import { yearRangeVar } from '@/context/paths/cache';
 import { usePaths } from '@/context/paths/paths';
 import { useReactiveVar } from '@apollo/client';
 
@@ -160,45 +156,7 @@ function getColumnSizes(hasMultipleGoals: boolean) {
 
 const MediumSettings = (props) => {
   const paths = usePaths();
-  const activeGoal = useReactiveVar(activeGoalVar);
-  const activeScenario = useReactiveVar(activeScenarioVar);
-  const yearRange = useReactiveVar(yearRangeVar);
-  const { instance, scenarios } = paths;
-  useEffect(() => {
-    if (!paths || paths.instance.id === 'unknown') return;
-
-    const firstActiveScenario = scenarios.find((sc) => sc.isActive);
-    const goals = instance.goals;
-
-    if (!activeGoal) {
-      const defaultGoal =
-        goals.length > 1 ? goals.find((goal) => goal.default) : goals[0];
-      activeGoalVar(defaultGoal ?? null);
-    }
-
-    if (!activeScenario) {
-      activeScenarioVar(firstActiveScenario ?? undefined);
-    }
-
-    if (!yearRange) {
-      const initialYearRange: [number, number] = [
-        instance.minimumHistoricalYear ?? instance.referenceYear ?? 2010,
-        instance.targetYear ?? instance.modelEndYear,
-      ];
-      yearRangeVar(initialYearRange);
-    }
-  }, [paths?.instance.id]);
-
-  /*
   const instance = paths?.instance;
-  // Target
-  const minYear = instance.minimumHistoricalYear;
-  const maxYear = instance.modelEndYear;
-  const referenceYear = instance.referenceYear;
-  const nrGoals = instance.goals.length;
-  const hasMultipleGoals = nrGoals > 1;
-  const columnSizes = getColumnSizes(hasMultipleGoals);
-*/
   const nrGoals = instance.goals.length;
   const hasMultipleGoals = nrGoals > 1;
   const columnSizes = getColumnSizes(hasMultipleGoals);

diff --git a/components/paths/toolbar/SettingsPanelFull.tsx b/components/paths/toolbar/SettingsPanelFull.tsx
@@ -1,13 +1,19 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useTranslations } from 'next-intl';
-import { transparentize } from 'polished';
 import { Button } from 'reactstrap';
 import styled from 'styled-components';
 
 import Icon from '@/components/common/Icon';
+import {
+  activeGoalVar,
+  activeScenarioVar,
+  yearRangeVar,
+} from '@/context/paths/cache';
+import { usePaths } from '@/context/paths/paths';
+import { useReactiveVar } from '@apollo/client';
 
 import CompleteSettings from './CompleteSettings';
 import MediumSettings from './MediumSettings';
@@ -38,18 +44,6 @@ const FixedPanel = styled.aside`
 
   &.panel-lg {
     height: 95%;
-
-    &::before {
-      content: '';
-      position: fixed;
-      z-index: -50;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: ${(props) =>
-        transparentize(0.15, props.theme.graphColors.grey090)};
-    }
   }
 `;
 
@@ -84,11 +78,37 @@ const MODE = {
 };
 
 const SettingsPanelFull: React.FC = () => {
-  //const paths = usePaths();
-  //const instance = paths.instance;
-  // console.log("Site", "Instance", site, instance);
+  const paths = usePaths();
+  const activeGoal = useReactiveVar(activeGoalVar);
+  const activeScenario = useReactiveVar(activeScenarioVar);
+  const yearRange = useReactiveVar(yearRangeVar);
+  const { instance, scenarios } = paths;
+  const [mode, setMode] = useState(MODE.LG);
+
+  useEffect(() => {
+    if (!paths || paths.instance.id === 'unknown') return;
+
+    const firstActiveScenario = scenarios.find((sc) => sc.isActive);
+    const goals = instance.goals;
 
-  const [mode, setMode] = useState(MODE.MD);
+    if (!activeGoal) {
+      const defaultGoal =
+        goals.length > 1 ? goals.find((goal) => goal.default) : goals[0];
+      activeGoalVar(defaultGoal ?? null);
+    }
+
+    if (!activeScenario) {
+      activeScenarioVar(firstActiveScenario ?? undefined);
+    }
+
+    if (!yearRange) {
+      const initialYearRange: [number, number] = [
+        instance.minimumHistoricalYear ?? instance.referenceYear ?? 2010,
+        instance.targetYear ?? instance.modelEndYear,
+      ];
+      yearRangeVar(initialYearRange);
+    }
+  }, [paths?.instance.id]);
 
   const handleToggle = (e) => {
     e.preventDefault();