enable selection of zones

openclimatefix · Nov 22, 2024 · 87afcb4 · 87afcb4
1 parent b9057c7
commit 87afcb4
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 11 deletions.
diff --git a/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/index.tsx b/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/index.tsx
@@ -12,6 +12,7 @@ import useGlobalState, { get30MinNow, getNext30MinSlot } from "../../helpers/glo
 import Spinner from "../../icons/spinner";
 import { ForecastValue } from "../../types";
 import React, { FC } from "react";
+import { NationalAggregation } from "../../map/types";
 
 // We want to have the ymax of the graph to be related to the capacity of the GspPvRemixChart
 // If we use the raw values, the graph looks funny, i.e y major ticks are 0 100 232
@@ -39,14 +40,24 @@ const GspPvRemixChart: FC<{
   visibleLines,
   deltaView = false
 }) => {
-  const {
+  const [nationalAggregationLevel] = useGlobalState("nationalAggregationLevel");
+  let {
     errors,
     pvRealDataAfter,
     pvRealDataIn,
     gspLocationInfo,
     gspForecastDataOneGSP,
     gspNHourData
   } = useGetGspData(gspId);
+  // TODO – if aggregation is zone, we need to get the data for all GSPs in the zone
+  if (nationalAggregationLevel === NationalAggregation.zone) {
+    errors = [];
+    pvRealDataAfter = [];
+    pvRealDataIn = [];
+    gspLocationInfo = [];
+    gspForecastDataOneGSP = [];
+    gspNHourData = [];
+  }
   // const gspData = fcAll?.forecasts.find((fc) => fc.location.gspId === gspId);
   const gspInstalledCapacity = gspLocationInfo?.[0]?.installedCapacityMw;
   const gspName = gspLocationInfo?.[0]?.regionName;
@@ -112,12 +123,15 @@ const GspPvRemixChart: FC<{
   let yMax = gspInstalledCapacity || 100;
   yMax = getRoundedTickBoundary(yMax, yMax_levels);
 
+  const title =
+    nationalAggregationLevel === NationalAggregation.GSP ? gspName || "" : String(gspId);
+
   return (
     <>
       <div className="flex-initial">
         <ForecastHeaderGSP
           onClose={close}
-          title={gspName || ""}
+          title={title}
           mwpercent={Math.round(pvPercentage)}
           pvTimeOnly={convertISODateStringToLondonTime(latestPvActualDatetime)}
           pvValue={Number(latestPvActualInMW)?.toFixed(1)}

diff --git a/apps/nowcasting-app/components/helpers/data.ts b/apps/nowcasting-app/components/helpers/data.ts
@@ -105,7 +105,7 @@ const mapGspFeatures: (
     const updatedFeatureObj: MapFeatureObject = {
       ...featureObj,
       properties: setFeatureObjectProps(
-        featureObj.properties,
+        { ...featureObj.properties, id: featureObj.properties?.gsp_id },
         gspSystemInfo,
         selectedFCValue,
         selectedActualValueMW
@@ -171,6 +171,7 @@ const mapZoneFeatures: (
     });
     return {
       ...feature,
+      id: feature.properties.id,
       type: "Feature" as "Feature",
       properties: setFeatureObjectProps(
         feature.properties,
@@ -215,6 +216,7 @@ export const generateGeoJsonForecastData: (
   gspDeltas,
   aggregation = NationalAggregation.GSP
 ) => {
+  console.log("aggregation", aggregation);
   const gspForecastsDataByTimestamp = forecastData || [];
   const gspShapeJson = gspShapeData as FeatureCollection;
   let features = gspShapeJson.features;
@@ -236,7 +238,6 @@ export const generateGeoJsonForecastData: (
     );
   }
   const forecastGeoJson = {
-    ...gspShapeData,
     type: "FeatureCollection" as "FeatureCollection",
     features
   };

diff --git a/apps/nowcasting-app/components/layout/layout.tsx b/apps/nowcasting-app/components/layout/layout.tsx
@@ -3,6 +3,7 @@ import { API_PREFIX, getViewTitle } from "../../constant";
 import { useLoadDataFromApi } from "../hooks/useLoadDataFromApi";
 import { SolarStatus } from "../types";
 import useGlobalState from "../helpers/globalState";
+import { useEffect } from "react";
 
 interface ILayout {
   children: React.ReactNode;
@@ -12,9 +13,15 @@ interface ILayout {
 const Layout = ({ children }: ILayout) => {
   const { data: solarStatus } = useLoadDataFromApi<SolarStatus>(`${API_PREFIX}/solar/GB/status`);
   const [view] = useGlobalState("view");
+  const [nationalAggregationLevel] = useGlobalState("nationalAggregationLevel");
+  const [, setClickedGspId] = useGlobalState("clickedGspId");
   const viewTitle = getViewTitle(view);
   const pageTitle = view && viewTitle ? `Quartz Solar - ${viewTitle}` : "Quartz Solar";
 
+  useEffect(() => {
+    setClickedGspId(undefined);
+  }, [nationalAggregationLevel]);
+
   return (
     <>
       <Head>

diff --git a/apps/nowcasting-app/components/map/deltaMap.tsx b/apps/nowcasting-app/components/map/deltaMap.tsx
@@ -46,6 +46,7 @@ const DeltaMap: React.FC<DeltaMapProps> = ({
   activeUnit
 }) => {
   const [selectedISOTime] = useGlobalState("selectedISOTime");
+  const [nationalAggregationLevel] = useGlobalState("nationalAggregationLevel");
 
   const latestForecastValue = 0;
   const isNormalized = activeUnit === ActiveUnit.percentage;
@@ -67,7 +68,8 @@ const DeltaMap: React.FC<DeltaMapProps> = ({
         initForecastData,
         selectedISOTime,
         combinedData,
-        gspDeltas
+        gspDeltas,
+        nationalAggregationLevel
       );
 
       map.addSource("latestPV", {
@@ -145,7 +147,8 @@ const DeltaMap: React.FC<DeltaMapProps> = ({
         initForecastData,
         selectedISOTime,
         combinedData,
-        gspDeltas
+        gspDeltas,
+        nationalAggregationLevel
       );
       map.addSource("latestPV", {
         type: "geojson",

diff --git a/apps/nowcasting-app/components/map/pvLatestMap.tsx b/apps/nowcasting-app/components/map/pvLatestMap.tsx
@@ -210,7 +210,8 @@ const PvLatestMap: React.FC<PvLatestMapProps> = ({
       const { forecastGeoJson } = generatedGeoJsonForecastData;
       map.addSource("latestPV", {
         type: "geojson",
-        data: forecastGeoJson
+        data: forecastGeoJson,
+        promoteId: "id"
       });
     } else {
       source.setData(generatedGeoJsonForecastData.forecastGeoJson);

diff --git a/apps/nowcasting-app/components/map/use-update-map-state-on-click.ts b/apps/nowcasting-app/components/map/use-update-map-state-on-click.ts
@@ -1,26 +1,44 @@
 import { useEffect, useRef } from "react";
 import useGlobalState from "../helpers/globalState";
+import { NationalAggregation } from "./types";
 
 type UseUpdateMapStateOnClickProps = {
   map?: mapboxgl.Map;
   isMapReady: boolean;
 };
 const useUpdateMapStateOnClick = ({ map, isMapReady }: UseUpdateMapStateOnClickProps) => {
   const [clickedGspId, setClickedGspId] = useGlobalState("clickedGspId");
+  const [nationalAggregationLevel] = useGlobalState("nationalAggregationLevel");
 
   const clickedGspIdRef = useRef(clickedGspId);
   const isEventRegistertedRef = useRef(false);
   useEffect(() => {
     if (clickedGspIdRef.current) {
       map?.setFeatureState(
-        { source: "latestPV", id: clickedGspIdRef.current - 1 },
+        {
+          source: "latestPV",
+          id:
+            clickedGspId && nationalAggregationLevel === NationalAggregation.GSP
+              ? clickedGspIdRef.current
+              : clickedGspIdRef.current
+        },
         { click: false }
       );
     }
 
     if (clickedGspId) {
+      console.log("map", map?.getFeatureState({ source: "latestPV", id: clickedGspId }));
       clickedGspIdRef.current = clickedGspId;
-      map?.setFeatureState({ source: "latestPV", id: clickedGspId - 1 }, { click: true });
+      map?.setFeatureState(
+        {
+          source: "latestPV",
+          id:
+            nationalAggregationLevel === NationalAggregation.GSP
+              ? Number(clickedGspId)
+              : clickedGspId
+        },
+        { click: true }
+      );
     } else {
       clickedGspIdRef.current = undefined;
     }
@@ -32,8 +50,11 @@ const useUpdateMapStateOnClick = ({ map, isMapReady }: UseUpdateMapStateOnClickP
       map.on("click", "latestPV-forecast", (e) => {
         const clickedFeature = e.features && e.features[0];
         if (clickedFeature) {
-          const gspId = clickedFeature.properties?.gsp_id;
-          if (gspId !== clickedGspIdRef.current) setClickedGspId(gspId);
+          const id =
+            nationalAggregationLevel === NationalAggregation.GSP
+              ? clickedFeature.properties?.id
+              : clickedFeature.properties?.id;
+          if (id !== clickedGspIdRef.current) setClickedGspId(id);
           else setClickedGspId(undefined);
         }
       });