Merge pull request #521 from openclimatefix/development

Quartz Energy Forecast Horizon Select [Development -> Staging]

Author: braddf

README.md

@@ -1,9 +1,19 @@
-# Solar Electricity Nowcasting
+# Quartz Energy
+### A set of forecasting products driven by the exciting modelling work in Open Climate Fix and the community
+
+The code is as open source as we can possibly make it (safely) and is powered by various forecast APIs, which are also available as services under the same Quartz umbrella.
+
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
 [![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
-This is a "meta-repository" for [Open Climate Fix](https://openclimatefix.org/)'s solar electricity nowcasting project. See [this great Wired article about OCF's solar electricity forecasting work](https://www.wired.co.uk/article/solar-weather-forecasting) for a good intro to solar electricity nowcasting.
+Head to [quartz.solar](https://quartz.solar) to find out more or to get in touch about using our Production services.
+
+
+
+## Solar Electricity Nowcasting UI
+
+The `nowcasting-app` is the repository for [Open Climate Fix](https://openclimatefix.org/)'s solar electricity nowcasting project. See [this great Wired article about OCF's solar electricity forecasting work](https://www.wired.co.uk/article/solar-weather-forecasting) for a good intro to solar electricity nowcasting.
 
 The plan is to enable the community to build the world's best near-term forecasting system for solar electricity generation, and then let anyone use it! :) We'll do this by using state-of-the-art machine learning and 5-minutely satellite imagery to predict the movement of clouds over the next few hours, and then use this to predict solar electricity generation.
 

apps/nowcasting-app/components/map/deltaMap.tsx

@@ -6,7 +6,6 @@ import mapboxgl, { Expression } from "mapbox-gl";
 import { FailedStateMap, LoadStateMap, Map, MeasuringUnit } from "./";
 import { ActiveUnit, SelectedData } from "./types";
 import { DELTA_BUCKET, VIEWS } from "../../constant";
-import ButtonGroup from "../../components/button-group";
 import gspShapeData from "../../data/gsp_regions_20220314.json";
 import useGlobalState from "../helpers/globalState";
 import { formatISODateString, formatISODateStringHuman } from "../helpers/utils";
@@ -28,7 +27,9 @@ import DeltaColorGuideBar from "./delta-color-guide-bar";
 import { safelyUpdateMapData } from "../helpers/mapUtils";
 import { generateGeoJsonForecastData } from "../helpers/data";
 import { components } from "../../types/quartz-api";
+import dynamic from "next/dynamic";
 const yellow = theme.extend.colors["ocf-yellow"].DEFAULT;
+const ButtonGroup = dynamic(() => import("../../components/button-group"), { ssr: false });
 
 const getRoundedPv = (pv: number, round: boolean = true) => {
   if (!round) return Math.round(pv);

apps/nowcasting-app/components/map/pvLatestMap.tsx

@@ -6,7 +6,6 @@ import mapboxgl, { Expression } from "mapbox-gl";
 import { FailedStateMap, LoadStateMap, Map, MeasuringUnit } from "./";
 import { ActiveUnit, SelectedData } from "./types";
 import { MAX_POWER_GENERATED, VIEWS } from "../../constant";
-import ButtonGroup from "../../components/button-group";
 import gspShapeData from "../../data/gsp_regions_20220314.json";
 import useGlobalState from "../helpers/globalState";
 import { formatISODateString, formatISODateStringHuman } from "../helpers/utils";
@@ -17,8 +16,11 @@ import { FeatureCollection } from "geojson";
 import { safelyUpdateMapData } from "../helpers/mapUtils";
 import { components } from "../../types/quartz-api";
 import { generateGeoJsonForecastData } from "../helpers/data";
+import dynamic from "next/dynamic";
 const yellow = theme.extend.colors["ocf-yellow"].DEFAULT;
 
+const ButtonGroup = dynamic(() => import("../../components/button-group"), { ssr: false });
+
 type PvLatestMapProps = {
   className?: string;
   combinedData: CombinedData;

apps/nowcasting-app/components/map/sitesMap.tsx

@@ -10,7 +10,6 @@ import {
   MAX_POWER_GENERATED,
   VIEWS
 } from "../../constant";
-import ButtonGroup from "../../components/button-group";
 import gspShapeData from "../../data/gsp_regions_20220314.json";
 import dnoShapeData from "../../data/dno_regions_lat_long_converted.json";
 import useGlobalState from "../helpers/globalState";
@@ -26,8 +25,10 @@ import { Feature, FeatureCollection } from "geojson";
 import Slider from "./sitesMapFeatures/sitesZoomSlider";
 import SitesLegend from "./sitesMapFeatures/sitesLegend";
 import { safelyUpdateMapData } from "../helpers/mapUtils";
+import dynamic from "next/dynamic";
 
 const yellow = theme.extend.colors["ocf-yellow"].DEFAULT;
+const ButtonGroup = dynamic(() => import("../../components/button-group"), { ssr: false });
 
 const getRoundedPv = (pv: number, round: boolean = true) => {
   if (!round) return Math.round(pv);

apps/quartz-app/.env.preview

@@ -0,0 +1 @@
+AUTH0_BASE_URL=https://$VERCEL_URL

apps/quartz-app/.env.production

@@ -0,0 +1 @@
+AUTH0_BASE_URL=https://$VERCEL_URL

apps/quartz-app/app/api/auth/[auth0]/route.ts

@@ -0,0 +1,14 @@
+import { handleAuth, handleLogout, HandleAuth } from "@auth0/nextjs-auth0";
+
+/**
+ * This is a GET endpoint that automatically handles authentication using Auth0.
+ * We're using a logout option override to redirect to "/logout" after logout.
+ *
+ * @function GET
+ * @returns {HandleAuth} A function that handles authentication.
+ */
+export const GET = handleAuth({
+  logout: handleLogout({
+    returnTo: "/logout",
+  }),
+});

apps/quartz-app/app/api/token/route.ts

@@ -0,0 +1,19 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getAccessToken, withApiAuthRequired } from "@auth0/nextjs-auth0";
+
+/**
+ * This is a secured GET endpoint that requires API authentication.
+ * It retrieves the access token for the authenticated user.
+ *
+ * @async
+ * @function GET
+ * @param {NextRequest} req - The Next.js API request object.
+ * @returns {NextResponse} A JSON response containing the access token.
+ */
+const GET = withApiAuthRequired(async function GET(req: NextRequest) {
+  const res = new NextResponse();
+  const { accessToken } = await getAccessToken(req, res);
+  return NextResponse.json({ accessToken }, res);
+});
+
+export { GET };

apps/quartz-app/app/globals.css

@@ -18,16 +18,24 @@
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
 }
 
 @layer utilities {
   .text-balance {
     text-wrap: balance;
   }
 }
+
+.fade-out {
+  opacity: 1;
+  animation: fade-out 2s ease-in-out forwards;
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

apps/quartz-app/app/layout.tsx

@@ -1,9 +1,9 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import Header from "../src/components/layout/Header";
-import Providers from "@/app/providers";
 import { ReactNode } from "react";
+import { UserProvider } from "@auth0/nextjs-auth0/client";
+import LayoutWrapper from "@/src/components/layout/LayoutWrapper";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -19,12 +19,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>
-        <Providers>
-          <Header />
-          {children}
-        </Providers>
-      </body>
+      <UserProvider>
+        <body className={inter.className}>
+          <LayoutWrapper>{children}</LayoutWrapper>
+        </body>
+      </UserProvider>
     </html>
   );
 }