v0.5.0: Quartz Energy app release + Quartz Solar improvements & zoom

.github/workflows/yarn_test.yaml

@@ -0,0 +1,31 @@
+name: Node CI
+
+on: [push]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+    - name: install yarn
+      run: |
+        cd apps/nowcasting-app
+        yarn install
+    - name: build & start app
+      run: |
+        cd apps/nowcasting-app
+        yarn build
+    - name: run tests
+      run: |
+        cd apps/nowcasting-app
+        yarn start & sleep 5 && yarn test --coverage --coverageDirectory=../..

.gitignore

@@ -1,2 +1,5 @@
 node_modules
 .turbo
+build/**
+dist/**
+.next/**

apps/nowcasting-app/README.md

@@ -34,6 +34,9 @@ AUTH0_ISSUER_BASE_URL='https://nowcasting-dev.eu.auth0.com'
 AUTH0_CLIENT_ID='<client id>'
 # Your Auth0 application's Client Secret
 AUTH0_CLIENT_SECRET='<client secret>'
+# Disable Sentry on local to avoid noise 
+# (should default to off in development env anyway but just to make sure)
+NEXT_PUBLIC_SENTRY_DISABLED='true'
 ```
 
 ### Running the App

apps/nowcasting-app/components/charts/DataLoadingChartStatus.tsx

@@ -73,10 +73,14 @@ const EndpointStatusList = <K extends NationalEndpointStates | SitesEndpointStat
 }: EndpointStatusListProps<K>) => {
   const endpointsArray = Array.from(Object.entries(endpointStates));
   return (
-    <div className="absolute -top-4 right-4 flex items-center h-9 z-40">
+    <div
+      className={`absolute -top-4 right-4 flex items-center h-9 ${isLoadingData ? "z-40" : "z-0"}`}
+    >
       <div
         className={`chart-data-loading-message flex flex-row relative h-6 cursor-default justify-between items-center rounded-sm bg-mapbox-black  ${
-          isLoadingData ? "pr-2 pl-1.5" : "bg-mapbox-black-600 px-1.5"
+          isLoadingData
+            ? "pr-2 pl-1.5"
+            : "bg-mapbox-black-600 px-1.5 fade-out pointer-events-none select-none"
         }`}
       >
         {!!isLoadingData && <SpinnerTextInline className="mr-2" />}

apps/nowcasting-app/components/charts/delta-view/delta-view-chart.tsx

@@ -77,7 +77,7 @@ const GspDeltaColumn: FC<{
   let hasRows = false;
   return (
     <>
-      <div className={`flex flex-col flex-1 mb-24 ${!negative ? "pl-3" : "pr-3 "}`}>
+      <div className={`flex flex-col flex-1 mb-24 ${!negative ? "pl-1" : "pr-1 "}`}>
         {deltaArray.sort(sortFunc).map((gspDelta) => {
           let bucketColor = "";
           let dataKey = "";
@@ -150,7 +150,7 @@ const GspDeltaColumn: FC<{
             gspDelta.delta > 0 ? `bg-ocf-delta-900` : `bg-ocf-delta-100`
           }`;
 
-          const selectedClasses = `${bucketColor} transition duration-200 ease-out hover:ease-in items-end`;
+          const selectedClasses = `${bucketColor} transition duration-200 ease-out hover:ease-in items-start`;
 
           const selectedDeltaClass = `bg-ocf-gray-800 ${bucketColor} items-end`;
 
@@ -165,30 +165,49 @@ const GspDeltaColumn: FC<{
               onClick={() => setClickedGspId(gspDelta.gspId)}
             >
               <div
-                className={`static items-center flex flex-1 py-2 justify-between pl-1 pr-1 ${
+                className={`static items-start xl:items-center flex flex-col xl:flex-row flex-1 py-2 justify-between pl-1 pr-1 ${
                   clickedGspId === gspDelta.gspId ? selectedDeltaClass : selectedClasses
                 } ${gspDelta.delta > 0 ? `border-l-8` : `border-r-8`}`}
                 key={`gspCol${gspDelta.gspId}`}
               >
-                <div className="flex-initial pl-1 max-w-[35%] dash:max-w-full">
+                <div className="flex-initial flex justify-between self-stretch items-center pl-1 dash:max-w-full">
                   <span className="">{gspDelta.gspRegion}</span>
+                  {/* normalized percentage: delta value/gsp installed mw capacity */}
+                  <div className="block flex-initial xl:hidden">
+                    <DeltaForecastLabel
+                      tip={
+                        <div className="w-28 text-xs">
+                          <p>{"Normalized Delta"}</p>
+                        </div>
+                      }
+                    >
+                      <div className="flex text-right opacity-80 text-sm">
+                        <p>
+                          {negative ? "-" : "+"}
+                          {deltaNormalizedPercentage}%
+                        </p>
+                      </div>
+                    </DeltaForecastLabel>
+                  </div>
                 </div>
-                <div className="flex flex-initial flex-end justify-around items-center">
+                <div className="flex flex-initial flex-end justify-between self-stretch items-center">
                   {/* normalized percentage: delta value/gsp installed mw capacity */}
-                  <DeltaForecastLabel
-                    tip={
-                      <div className="w-28 text-xs">
-                        <p>{"Normalized Delta"}</p>
+                  <div className="hidden xl:block">
+                    <DeltaForecastLabel
+                      tip={
+                        <div className="w-28 text-xs">
+                          <p>{"Normalized Delta"}</p>
+                        </div>
+                      }
+                    >
+                      <div className="flex pr-3 text-right opacity-80 text-sm">
+                        <p>
+                          {negative ? "-" : "+"}
+                          {deltaNormalizedPercentage}%
+                        </p>
                       </div>
-                    }
-                  >
-                    <div className="flex pr-3 text-right opacity-80 text-sm">
-                      <p>
-                        {negative ? "-" : "+"}
-                        {deltaNormalizedPercentage}%
-                      </p>
-                    </div>
-                  </DeltaForecastLabel>
+                    </DeltaForecastLabel>
+                  </div>
 
                   {/* delta value in mw */}
                   <DeltaForecastLabel
@@ -210,21 +229,23 @@ const GspDeltaColumn: FC<{
                   </DeltaForecastLabel>
 
                   {/* currentYield/forecasted yield */}
-                  <DeltaForecastLabel
-                    tip={
-                      <div className="w-28 text-xs">
-                        <p>{"Actual PV / Forecast"}</p>
-                      </div>
-                    }
-                  >
-                    <div className="flex flex-col pr-1 text-left font-semibold text-sm">
-                      <div>
-                        {Number(gspDelta.currentYield).toFixed(0)}/
-                        {Number(gspDelta.forecast).toFixed(0)}{" "}
-                        <span className={`opacity-80 text-xs font-thin`}>MW</span>
+                  <div>
+                    <DeltaForecastLabel
+                      tip={
+                        <div className="w-28 text-xs">
+                          <p>{"Actual PV / Forecast"}</p>
+                        </div>
+                      }
+                    >
+                      <div className="flex flex-col pr-1 text-right font-semibold text-sm">
+                        <div>
+                          {Number(gspDelta.currentYield).toFixed(0)}/
+                          {Number(gspDelta.forecast).toFixed(0)}{" "}
+                          <span className={`opacity-80 text-xs font-thin`}>MW</span>
+                        </div>
                       </div>
-                    </div>
-                  </DeltaForecastLabel>
+                    </DeltaForecastLabel>
+                  </div>
                 </div>
               </div>
               <div className={`absolute bottom-0 right-0 left-0 ${bucketColor}`}>
@@ -233,7 +254,12 @@ const GspDeltaColumn: FC<{
                     gspDelta.delta > 0 ? `bottom-0 flex-row-reverse ml-2` : `mr-2`
                   }`}
                 >
-                  <div className={tickerColor} style={{ width: `1px` }}></div>
+                  <div
+                    className={`${
+                      clickedGspId === gspDelta.gspId ? `h-2.5` : `h-2`
+                    } ${progressLineColor}`}
+                    style={{ width: `1px` }}
+                  ></div>
                   <div
                     className={`${
                       clickedGspId === gspDelta.gspId ? `h-1.5` : `h-1`
@@ -273,6 +299,7 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
   const [show4hView] = useGlobalState("show4hView");
   const [clickedGspId, setClickedGspId] = useGlobalState("clickedGspId");
   const [visibleLines] = useGlobalState("visibleLines");
+  const [globalZoomArea] = useGlobalState("globalZoomArea");
   const [selectedBuckets] = useGlobalState("selectedBuckets");
   const [selectedISOTime, setSelectedISOTime] = useGlobalState("selectedISOTime");
   const [timeNow] = useGlobalState("timeNow");
@@ -285,7 +312,8 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
   const halfHourAgo = `${formatISODateString(new Date(halfHourAgoDate).toISOString())}:00Z`;
   const hasGspPvInitialForSelectedTime = !!combinedData.pvRealDayInData?.find(
     (d) =>
-      d.datetimeUtc === `${formatISODateString(selectedTimeHalfHourSlot.toISOString())}:00+00:00`
+      d.datetimeUtc.slice(0, 16) ===
+      `${formatISODateString(selectedTimeHalfHourSlot.toISOString())}`
   );
 
   const {

apps/nowcasting-app/components/charts/forecast-header/ui.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { theme } from "../../../tailwind.config";
 import { ClockIcon } from "../../icons/icons";
 import ForecastLabel from "../../national_forecast_labels";
@@ -18,7 +17,10 @@ export const ForecastHeadlineFigure: React.FC<{
       : "dash:3xl:text-6xl dash:xl:text-5xl lg:text-3xl"
   }`;
   return (
-    <div className="flex gap-3 items-center m-auto h-10 dash:h-14 justify-between">
+    <div
+      data-test="pvlive-ocf-headline-figure"
+      className="flex gap-3 items-center m-auto h-10 dash:h-14 justify-between"
+    >
       <div className="flex flex-1 self-center items-center justify-center">
         <div className={`flex items-center ${textSizeClasses}`}>
           <ForecastLabel
@@ -105,7 +107,10 @@ export const NextForecast: React.FC<{ pv: string; tip: string; time: string; col
   color = yellow
 }) => {
   return (
-    <div className="flex gap-3 items-center m-auto h-10 dash:h-14 justify-between">
+    <div
+      data-test="forecast-label-tooltip"
+      className="flex gap-3 items-center m-auto h-10 dash:h-14 justify-between"
+    >
       <ForecastLabel
         className="dash:order-2"
         tip={
@@ -140,6 +145,7 @@ export const NextForecast: React.FC<{ pv: string; tip: string; time: string; col
 };
 
 type ForecastHeaderProps = {
+  children: React.ReactNode;
   forecastNextPV: string;
   forecastPV: string;
   actualPV: string;
@@ -158,7 +164,7 @@ const ForecastHeaderUI: React.FC<ForecastHeaderProps> = ({
   forecastNextTimeOnly
 }) => {
   return (
-    <div className="flex content-between bg-ocf-gray-800 h-auto">
+    <div data-test="national-chart-header" className="flex content-between bg-ocf-gray-800 h-auto">
       <div className="text-white dash:3xl:text-5xl dash:2xl:text-4xl dash:xl:text-3xl dash:tracking-wide lg:text-2xl md:text-lg text-base font-black m-auto ml-5 flex justify-evenly">
         National
       </div>

apps/nowcasting-app/components/charts/gsp-pv-remix-chart/forecast-header-gsp.tsx

@@ -1,7 +1,7 @@
-import React from "react";
 import { CloseButtonIcon, DownArrow, UpArrow } from "../../icons/icons";
 import { ForecastHeadlineFigure } from "../forecast-header/ui";
 import { DeltaHeaderBlock } from "../delta-view/delta-header-block";
+import React, { FC } from "react";
 
 type ForecastHeaderGSPProps = {
   title: string;
@@ -14,9 +14,10 @@ type ForecastHeaderGSPProps = {
   forecastPV?: string;
   forecastNextTimeOnly?: string;
   forecastNextPV?: string;
+  children?: React.ReactNode;
 };
 
-const ForecastHeaderGSP: React.FC<ForecastHeaderGSPProps> = ({
+const ForecastHeaderGSP: FC<ForecastHeaderGSPProps> = ({
   title,
   deltaView,
   deltaValue,

apps/nowcasting-app/components/charts/gsp-pv-remix-chart/index.tsx

@@ -1,4 +1,3 @@
-import { FC } from "react";
 import RemixLine from "../remix-line";
 import useFormatChartData from "../use-format-chart-data";
 import {
@@ -12,6 +11,7 @@ import useGetGspData from "./use-get-gsp-data";
 import useGlobalState, { get30MinNow, getNext30MinSlot } from "../../helpers/globalState";
 import Spinner from "../../icons/spinner";
 import { ForecastValue } from "../../types";
+import React, { FC } from "react";
 
 // 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
@@ -63,7 +63,6 @@ const GspPvRemixChart: FC<{
     console.log(errors);
     return <div>failed to load</div>;
   }
-
   const now30min = formatISODateString(get30MinNow());
   const dataMissing = !gspForecastDataOneGSP || !pvRealDataIn || !pvRealDataAfter;
   const forecastAtSelectedTime: NonNullable<typeof gspForecastDataOneGSP>[number] =

apps/nowcasting-app/components/charts/pv-remix-chart.tsx

@@ -27,6 +27,7 @@ const PvRemixChart: FC<{
   const { stopTime, resetTime } = useStopAndResetTime();
   const selectedTime = formatISODateString(selectedISOTime || new Date().toISOString());
   const [loadingState] = useGlobalState("loadingState");
+  const [globalZoomArea] = useGlobalState("globalZoomArea");
 
   const {
     nationalForecastData,