From 236be2ab753aacdb1435cb59dd09cb76096d43ab Mon Sep 17 00:00:00 2001
From: Tero Tikkanen <tero.tikkanen@gmail.com>
Date: Sun, 13 Oct 2024 19:54:38 +0300
Subject: [PATCH] Handle refetch on mutations

---
 components/common/SelectDropdown.tsx          |  13 +-
 components/paths/ActionParameters.tsx         |   1 -
 components/paths/CategoryCard.tsx             |  26 ++--
 components/paths/ParameterWidget.tsx          |   2 +-
 components/paths/ScenarioSelector.tsx         |   4 +-
 .../contentblocks/CategoryTypeListBlock.tsx   |   3 +-
 .../paths/contentblocks/PathsOutcomeBlock.tsx | 139 ++++++++++--------
 .../paths/graphs/DimensionalNodePlot.tsx      |  23 +--
 .../paths/outcome/OutcomeNodeContent.tsx      |   3 -
 utils/paths/metric.ts                         |  11 +-
 10 files changed, 124 insertions(+), 101 deletions(-)

diff --git a/components/common/SelectDropdown.tsx b/components/common/SelectDropdown.tsx
index d7376078d..c85b78184 100644
--- a/components/common/SelectDropdown.tsx
+++ b/components/common/SelectDropdown.tsx
@@ -1,16 +1,17 @@
 import React, { useEffect, useState } from 'react';
+
+import PopoverTip from 'components/common/PopoverTip';
+import Highlighter from 'react-highlight-words';
 import Select, {
   components,
   DropdownIndicatorProps,
   MultiValueProps,
+  OptionProps,
   Theme as SelectTheme,
   ValueContainerProps,
-  OptionProps,
 } from 'react-select';
-import styled, { DefaultTheme, useTheme } from 'styled-components';
-import Highlighter from 'react-highlight-words';
 import { FormGroup, Label as BSLabel } from 'reactstrap';
-import PopoverTip from 'components/common/PopoverTip';
+import styled, { DefaultTheme, useTheme } from 'styled-components';
 
 const Label = styled(BSLabel)`
   font-weight: ${(props) => props.theme.formLabelFontWeight};
@@ -262,7 +263,7 @@ type SelectDropdownProps<Option extends SelectDropdownOption> = Parameters<
 
 function SelectDropdown<
   Option extends SelectDropdownOption,
-  IsMulti extends boolean = false
+  IsMulti extends boolean
 >(props: SelectDropdownProps<Option>) {
   const {
     size,
@@ -272,7 +273,7 @@ function SelectDropdown<
     onChange,
     helpText,
     invert,
-    isMulti,
+    isMulti = false,
     ...rest
   } = props;
   const theme = useTheme();
diff --git a/components/paths/ActionParameters.tsx b/components/paths/ActionParameters.tsx
index 994785771..b8f59ff0d 100644
--- a/components/paths/ActionParameters.tsx
+++ b/components/paths/ActionParameters.tsx
@@ -17,7 +17,6 @@ const Parameters = styled.div`
 
 const ActionParameters = (props: { parameters: ParameterInterface[] }) => {
   const { parameters } = props;
-
   if (!parameters) {
     return null;
   }
diff --git a/components/paths/CategoryCard.tsx b/components/paths/CategoryCard.tsx
index 0c3e3f964..0fe8186c8 100644
--- a/components/paths/CategoryCard.tsx
+++ b/components/paths/CategoryCard.tsx
@@ -17,7 +17,7 @@ import {
 import { DimensionalMetric } from '@/utils/paths/metric';
 import { getHttpHeaders } from '@/utils/paths/paths.utils';
 import PathsActionNode from '@/utils/paths/PathsActionNode';
-import { useQuery, useReactiveVar } from '@apollo/client';
+import { NetworkStatus, useQuery, useReactiveVar } from '@apollo/client';
 
 const ContentLoader = styled(Spinner)`
   margin: 0 auto;
@@ -43,8 +43,9 @@ const Card = styled.div`
     ${(props) => transparentize(0.9, props.theme.themeColors.dark)};
 `;
 
-const CardContentBlock = styled.div`
+const CardContentBlock = styled.div<{ $disabled?: boolean }>`
   margin: ${({ theme }) => `0 ${theme.spaces.s100} ${theme.spaces.s100}`};
+  opacity: ${({ $disabled = false }) => ($disabled ? 0.5 : 1)};
 `;
 const CardHeader = styled.h3`
   margin: ${({ theme }) => `0 ${theme.spaces.s100} ${theme.spaces.s100}`};
@@ -61,17 +62,20 @@ const PathsBasicNodeContent = (props) => {
   const { categoryId, node, pathsInstance, onLoaded } = props;
   const yearRange = useReactiveVar(yearRangeVar);
   const activeGoal = useReactiveVar(activeGoalVar);
-  const t = useTranslations();
+  // const t = useTranslations();
 
-  const { data, loading, error } = useQuery(GET_NODE_CONTENT, {
+  const { data, loading, error, networkStatus } = useQuery(GET_NODE_CONTENT, {
     fetchPolicy: 'no-cache',
     variables: { node: node, goal: activeGoal?.id },
+    notifyOnNetworkStatusChange: true,
     context: {
       uri: '/api/graphql-paths',
       headers: getHttpHeaders({ instanceIdentifier: pathsInstance }),
     },
   });
 
+  const refetching = networkStatus === NetworkStatus.refetch;
+
   useEffect(() => {
     if (data) {
       const nodeMetric = new DimensionalMetric(data.node.metricDim!);
@@ -91,7 +95,7 @@ const PathsBasicNodeContent = (props) => {
     }
   }, [activeGoal, data, yearRange]);
 
-  if (loading) {
+  if (loading && !refetching) {
     return <ContentLoader type="grow" />;
   }
   if (error) {
@@ -128,8 +132,7 @@ const PathsBasicNodeContent = (props) => {
       const unit = nodeMetric.getUnit();
 
       return (
-        <CardContentBlock>
-          <div>{nodeMetric.getName()}</div>
+        <CardContentBlock $disabled={refetching}>
           {yearTotal && (
             <>
               <h5>{label}</h5>
@@ -153,15 +156,18 @@ const PathsActionNodeContent = (props) => {
   const activeGoal = useReactiveVar(activeGoalVar);
   const t = useTranslations();
 
-  const { data, loading, error } = useQuery(GET_PATHS_ACTION, {
+  const { data, loading, error, networkStatus } = useQuery(GET_PATHS_ACTION, {
     fetchPolicy: 'no-cache',
     variables: { action: node, goal: activeGoal?.id },
+    notifyOnNetworkStatusChange: true,
     context: {
       uri: '/api/graphql-paths',
       headers: getHttpHeaders({ instanceIdentifier: pathsInstance }),
     },
   });
 
+  const refetching = networkStatus === NetworkStatus.refetch;
+
   useEffect(() => {
     if (data) {
       const pathsAction = new PathsActionNode(data.action);
@@ -170,7 +176,7 @@ const PathsActionNodeContent = (props) => {
     }
   }, [activeGoal, data, yearRange]);
 
-  if (loading) {
+  if (loading && !refetching) {
     return <ContentLoader type="grow" />;
   }
   if (error) {
@@ -180,7 +186,7 @@ const PathsActionNodeContent = (props) => {
     const pathsAction = new PathsActionNode(data.action);
     const impact = pathsAction.getYearlyImpact(yearRange[1]) || 0;
     return (
-      <CardContentBlock>
+      <CardContentBlock $disabled={refetching}>
         {t('impact')} {yearRange[1]}
         <h4>
           {yearRange ? beautifyValue(impact) : <span>---</span>}
diff --git a/components/paths/ParameterWidget.tsx b/components/paths/ParameterWidget.tsx
index 130259ddb..2496bc809 100644
--- a/components/paths/ParameterWidget.tsx
+++ b/components/paths/ParameterWidget.tsx
@@ -239,7 +239,7 @@ const ParameterWidget = (props: ParameterWidgetProps) => {
   const paths = usePaths();
   const [SetParameter, { loading: mutationLoading, error: mutationError }] =
     useMutation(SET_PARAMETER, {
-      refetchQueries: ['GetPathsActionList', 'GetScenarios'],
+      refetchQueries: 'active',
       context: {
         uri: '/api/graphql-paths',
         headers: getHttpHeaders({ instanceIdentifier: paths?.instance.id }),
diff --git a/components/paths/ScenarioSelector.tsx b/components/paths/ScenarioSelector.tsx
index e3ae8e2df..a33e35b97 100644
--- a/components/paths/ScenarioSelector.tsx
+++ b/components/paths/ScenarioSelector.tsx
@@ -23,6 +23,8 @@ import { GET_SCENARIOS } from '@/queries/paths/get-paths-scenarios';
 import { getHttpHeaders } from '@/utils/paths/paths.utils';
 import { gql, useMutation, useQuery } from '@apollo/client';
 
+const pathsQueries = 'active';
+
 const ACTIVATE_SCENARIO = gql`
   mutation ActivateScenario($scenarioId: ID!) {
     activateScenario(id: $scenarioId) {
@@ -78,7 +80,7 @@ const ScenarioSelector = () => {
         uri: '/api/graphql-paths',
         headers: getHttpHeaders({ instanceIdentifier: paths?.instance.id }),
       },
-      refetchQueries: ['GetPathsActionList', 'GetScenarios'],
+      refetchQueries: pathsQueries,
     });
 
   if (loading) {
diff --git a/components/paths/contentblocks/CategoryTypeListBlock.tsx b/components/paths/contentblocks/CategoryTypeListBlock.tsx
index 55a83e29e..df02e2c18 100644
--- a/components/paths/contentblocks/CategoryTypeListBlock.tsx
+++ b/components/paths/contentblocks/CategoryTypeListBlock.tsx
@@ -155,7 +155,7 @@ const CategoryList = (props) => {
       }
       return updatedCategories;
     });
-    console.log('categoriesPathsData', categoriesPathsData);
+    //console.log('categoriesPathsData', categoriesPathsData);
     //setLoadedCards(prev => ({ ...prev, [id]: impact }));
   };
 
@@ -275,7 +275,6 @@ const CategoryTypeListBlock = (props: CategoryTypeListBlockProps) => {
   const { id = '', heading, groupByLevel, listByLevel, categoryType } = props;
   const plan = usePlan();
 
-  console.log('categorytypelistblockprops', props);
   const { data, loading, error } = useQuery(
     GET_CATEGORIES_FOR_CATEGORY_TYPE_LIST,
     {
diff --git a/components/paths/contentblocks/PathsOutcomeBlock.tsx b/components/paths/contentblocks/PathsOutcomeBlock.tsx
index 83f038822..aea36095e 100644
--- a/components/paths/contentblocks/PathsOutcomeBlock.tsx
+++ b/components/paths/contentblocks/PathsOutcomeBlock.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 
 import { useTranslations } from 'next-intl';
 import { Card, CardBody, Col, Container, Row } from 'reactstrap';
@@ -15,14 +15,14 @@ import { activeScenarioVar, yearRangeVar } from '@/context/paths/cache';
 import { usePaths } from '@/context/paths/paths';
 import GET_PAGE from '@/queries/paths/get-paths-page';
 import { getHttpHeaders } from '@/utils/paths/paths.utils';
-import { useQuery, useReactiveVar } from '@apollo/client';
+import { NetworkStatus, useQuery, useReactiveVar } from '@apollo/client';
 
 const ErrorBackground = styled.div`
   background-color: ${(props) => props.theme.brandDark};
   min-height: 800px;
 `;
 
-const StyledCard = styled(Card)`
+const StyledCard = styled(Card)<{ $disabled?: boolean }>`
   margin-top: 5rem;
   width: 100%;
   transition: all 0.5s ease;
@@ -40,6 +40,10 @@ const StyledCard = styled(Card)`
     margin-bottom: 2rem;
     fill: ${(props) => props.theme.brandDark};
   }
+
+  .card-body {
+    opacity: ${({ $disabled = false }) => ($disabled ? 0.5 : 1)};
+  }
 `;
 
 const findVisibleNodes = (allNodes, lastNodeId: string, visibleNodes) => {
@@ -53,15 +57,20 @@ const findVisibleNodes = (allNodes, lastNodeId: string, visibleNodes) => {
   return visibleNodes;
 };
 
-export default function PathsOutcomeBlock(props) {
-  const { heading, helpText, outcomeNodeId } = props;
+export default function PathsOutcomeBlock() {
+  //const { heading, helpText, outcomeNodeId } = props;
   const t = useTranslations();
   const pathsInstance = usePaths();
   const yearRange = useReactiveVar(yearRangeVar);
   const activeScenario = useReactiveVar(activeScenarioVar);
   const path = '';
-  const { data } = useQuery<GetPageQuery, GetPageQueryVariables>(GET_PAGE, {
+  const [lastActiveNodeId, setLastActiveNodeId] = useState<string | undefined>(
+    undefined
+  );
+  const queryResp = useQuery<GetPageQuery, GetPageQueryVariables>(GET_PAGE, {
     variables: { path, goal: null },
+    fetchPolicy: 'cache-and-network',
+    notifyOnNetworkStatusChange: true,
     context: {
       uri: '/api/graphql-paths',
       headers: getHttpHeaders({
@@ -70,65 +79,69 @@ export default function PathsOutcomeBlock(props) {
     },
   });
 
-  if (!data) {
+  const { loading, error, previousData, networkStatus } = queryResp;
+  const refetching = networkStatus === NetworkStatus.refetch;
+
+  const data = queryResp.data ?? previousData;
+
+  if (loading && !refetching) {
     return <ContentLoader />;
   }
 
-  const { outcomeNode } = data.page;
-  const { upstreamNodes } = outcomeNode;
-  const allNodes = useMemo(
-    () => new Map(upstreamNodes.map((node) => [node.id, node])),
-    [upstreamNodes]
-  );
-  allNodes.set(outcomeNode.id, outcomeNode);
-  const [lastActiveNodeId, setLastActiveNodeId] = useState<string | undefined>(
-    outcomeNode.id
-  );
-  const activeNodeId = outcomeNode.id;
-  // TODO: filtering out empty nodes, in some instances there are some -> investigate why
-  const visibleNodes = findVisibleNodes(allNodes, activeNodeId, []).filter(
-    (node) => node?.id
-  );
+  if (data?.page) {
+    const outcomeNode = data.page?.outcomeNode ?? null;
+    const upstreamNodes = outcomeNode?.upstreamNodes ?? [];
 
-  const outcomeType = visibleNodes[0].quantity;
-
-  return (
-    <ErrorBackground className="mb-5">
-      <Container>
-        <Row>
-          <Col>
-            <StyledCard>
-              <CardBody>
-                {visibleNodes.map((node, index) => (
-                  <OutcomeCardSet
-                    key={node.id}
-                    // Hacky solution to support different sub node titles depending on level
-                    subNodesTitle={
-                      index === 0
-                        ? t('outcome-sub-nodes')
-                        : t('outcome-sub-nodes-secondary')
-                    }
-                    nodeMap={allNodes}
-                    rootNode={node}
-                    startYear={yearRange[0]}
-                    endYear={yearRange[1]}
-                    activeScenario={activeScenario?.name || ''}
-                    parentColor="#666"
-                    activeNodeId={
-                      index < visibleNodes.length - 1
-                        ? visibleNodes[index + 1].id
-                        : undefined
-                    }
-                    lastActiveNodeId={lastActiveNodeId}
-                    setLastActiveNodeId={setLastActiveNodeId}
-                    refetching={false}
-                  />
-                ))}
-              </CardBody>
-            </StyledCard>
-          </Col>
-        </Row>
-      </Container>
-    </ErrorBackground>
-  );
+    const allNodes = new Map(upstreamNodes.map((node) => [node.id, node]));
+
+    allNodes.set(outcomeNode.id, outcomeNode);
+    //setLastActiveNodeId(outcomeNode.id);
+    const activeNodeId = outcomeNode.id;
+    // TODO: filtering out empty nodes, in some instances there are some -> investigate why
+    const visibleNodes = findVisibleNodes(allNodes, activeNodeId, []).filter(
+      (node) => node?.id
+    );
+
+    //const outcomeType = visibleNodes[0].quantity;
+
+    return (
+      <ErrorBackground className="mb-5">
+        <Container>
+          <Row>
+            <Col>
+              <StyledCard $disabled={refetching}>
+                <CardBody>
+                  {visibleNodes.map((node, index) => (
+                    <OutcomeCardSet
+                      key={node.id}
+                      // Hacky solution to support different sub node titles depending on level
+                      subNodesTitle={
+                        index === 0
+                          ? t('outcome-sub-nodes')
+                          : t('outcome-sub-nodes-secondary')
+                      }
+                      nodeMap={allNodes}
+                      rootNode={node}
+                      startYear={yearRange[0]}
+                      endYear={yearRange[1]}
+                      activeScenario={activeScenario?.name || ''}
+                      parentColor="#666"
+                      activeNodeId={
+                        index < visibleNodes.length - 1
+                          ? visibleNodes[index + 1].id
+                          : undefined
+                      }
+                      lastActiveNodeId={lastActiveNodeId}
+                      setLastActiveNodeId={setLastActiveNodeId}
+                      refetching={refetching}
+                    />
+                  ))}
+                </CardBody>
+              </StyledCard>
+            </Col>
+          </Row>
+        </Container>
+      </ErrorBackground>
+    );
+  }
 }
diff --git a/components/paths/graphs/DimensionalNodePlot.tsx b/components/paths/graphs/DimensionalNodePlot.tsx
index aa3cfdf2a..d05a1d42b 100644
--- a/components/paths/graphs/DimensionalNodePlot.tsx
+++ b/components/paths/graphs/DimensionalNodePlot.tsx
@@ -1,6 +1,9 @@
 import { useEffect, useMemo, useState } from 'react';
 
-import type { DimensionalNodeMetricFragment } from 'common/__generated__/graphql';
+import type {
+  DimensionalNodeMetricFragment,
+  InstanceGoalEntry,
+} from 'common/__generated__/paths/graphql';
 import SelectDropdown from 'components/common/SelectDropdown';
 import { isEqual } from 'lodash';
 import { useTranslations } from 'next-intl';
@@ -95,7 +98,7 @@ type PlotData = { x: number[]; y: number[] };
 
 function getDefaultSliceConfig(
   cube: DimensionalMetric,
-  activeGoal: InstanceGoal | null
+  activeGoal: InstanceGoalEntry | null
 ) {
   /**
    * By default, we group by the first dimension `metric` has, whatever it is.
@@ -210,13 +213,14 @@ export default function DimensionalNodePlot({
   const paths = usePaths();
   const instance = paths?.instance;
   const referenceYear = instance?.referenceYear || undefined;
+  const minimumHistoricalYear = instance?.minimumHistoricalYear || undefined;
   const baselineName = ''; //TODO: get from instance
   const baselineVisibleInGraphs =
     instance?.features?.baselineVisibleInGraphs ?? false;
 
   const defaultColor = color || theme.graphColors.blue070;
   const shapes: Plotly.Layout['shapes'] = [];
-  const plotData: Partial<Plotly.PlotData>[] = [];
+  const plotData: Plotly.Data[] = [];
   const rangeMode = metric.stackable ? 'tozero' : 'normal';
   const filled = metric.stackable;
 
@@ -270,9 +274,9 @@ export default function DimensionalNodePlot({
     !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');
     }
   }
 
@@ -383,15 +387,14 @@ export default function DimensionalNodePlot({
 
     if (goals.length === 1) {
       const goal = goals[goals.length - 1];
-
+      const x1 =
+        startYear === referenceYear ? minimumHistoricalYear : startYear;
+      const x2 = goal.year > usableEndYear ? usableEndYear : goal.year;
       plotData.push({
         xaxis: 'x2',
         showlegend: false,
         hoverinfo: 'skip',
-        x: [
-          startYear === referenceYear ? site.minYear : startYear,
-          goal.year > usableEndYear ? usableEndYear : goal.year,
-        ],
+        x: [x1 || 0, x2 || 0],
         y: [goal.value, goal.value],
         mode: 'lines',
         line: lineConfig,
diff --git a/components/paths/outcome/OutcomeNodeContent.tsx b/components/paths/outcome/OutcomeNodeContent.tsx
index dca838e77..3530ad361 100644
--- a/components/paths/outcome/OutcomeNodeContent.tsx
+++ b/components/paths/outcome/OutcomeNodeContent.tsx
@@ -11,7 +11,6 @@ import {
   getMetricChange,
   getMetricValue,
 } from '@/common/paths/preprocess';
-import ContentLoader from '@/components/common/ContentLoader';
 import Icon from '@/components/common/Icon';
 import DataTable from '@/components/paths/graphs/DataTable';
 import DimensionalNodePlot from '@/components/paths/graphs/DimensionalNodePlot';
@@ -309,8 +308,6 @@ const OutcomeNodeContent = ({
           )}
         </TabNavigation>
 
-        {refetching && <ContentLoader />}
-
         <TabContent
           activeTab={activeTabId}
           id={`${node.id}-panel-${activeTabId}`}
diff --git a/utils/paths/metric.ts b/utils/paths/metric.ts
index 1bee49277..5692c74bb 100644
--- a/utils/paths/metric.ts
+++ b/utils/paths/metric.ts
@@ -1,9 +1,12 @@
 import dayjs from 'dayjs';
 import { Font, Style } from 'exceljs';
-//import slugify from 'slugify';
-import { DimensionalMetricFragment } from 'queries/paths/get-paths-page';
 
-import { InstanceGoalEntry } from '@/common/__generated__/paths/graphql';
+//import slugify from 'slugify';
+//import { DimensionalMetricFragment } from 'queries/paths/get-paths-page';
+import {
+  DimensionalMetricFragment,
+  InstanceGoalEntry,
+} from '@/common/__generated__/paths/graphql';
 import { DocumentNode, gql } from '@apollo/client';
 
 type CatValue = number | null;
@@ -12,7 +15,7 @@ type DimValues = {
   categories: Map<string, CatValue[]>;
 };
 
-type Metric = NonNullable<typeof DimensionalMetricFragment>;
+type Metric = NonNullable<DimensionalMetricFragment>;
 
 type MetricDimensionInput = Metric['dimensions'][0];
 type MetricDimension = Omit<MetricDimensionInput, 'groups'> & {