add horizon info icon/tooltip

apps/quartz-app/src/components/InfoTooltip.tsx

@@ -0,0 +1,59 @@
+type TooltipProps = {
+  children: React.ReactNode;
+  tip: string | React.ReactNode;
+  position?: "left" | "right" | "middle" | "top";
+  className?: string;
+  fullWidth?: boolean;
+};
+
+const Tooltip: React.FC<TooltipProps> = ({
+  children,
+  tip,
+  position,
+  className,
+  fullWidth = false,
+}) => {
+  let containerPositionClass = "";
+  let tipPositionClass = "";
+  switch (position) {
+    case "left":
+      containerPositionClass = "right-1";
+      tipPositionClass = "-right-1 top-2";
+      break;
+    case "right":
+      containerPositionClass = "left-1";
+      tipPositionClass = "-left-1 top-2";
+      break;
+    // case "middle":
+    //   containerPositionClass = "right-5";
+    //   // containerPositionClass = "left-1/2 transform -translate-x-1/2";
+    //   tipPositionClass = "-right-1 top-0";
+    //   break;
+    // case "top":
+    //   containerPositionClass = "bottom-5 right-2";
+    //   tipPositionClass = "-right-2 bottom-0";
+  }
+  return (
+    <div
+      className={`relative flex flex-col group z-20 ${
+        fullWidth ? "w-full" : "w-max items-center"
+      } 
+      ${className || ""}`}
+    >
+      {position !== "top" && children}
+      <div
+        className={`absolute flex-col items-center hidden mt-6 group-hover:flex w-fit ${containerPositionClass}`}
+      >
+        <span
+          className={`absolute ${tipPositionClass} mb-1 z-30 p-2 text-xs leading-none text-white whitespace-no-wrap bg-ocf-black shadow-lg rounded-md`}
+        >
+          {tip}
+        </span>
+        {/*<div className="w-3 h-5 -mt-[6px] rotate-45 bg-ocf-black "></div>*/}
+      </div>
+      {position === "top" && children}
+    </div>
+  );
+};
+
+export default Tooltip;

apps/quartz-app/src/components/charts/Charts.tsx

@@ -19,7 +19,6 @@ import {
   SOLAR_COLOR,
   WIND_COLOR,
 } from "@/src/constants";
-import { LegendContainer } from "@/src/components/charts/legend/LegendContainer";
 import {
   formatEpochToHumanDayName,
   formatEpochToPrettyTime,
@@ -32,8 +31,7 @@ import { useChartData } from "@/src/hooks/useChartData";
 import { CustomLabel } from "@/src/components/charts/labels/CustomLabel";
 import { useGlobalState } from "../helpers/globalState";
 import { DateTime } from "luxon";
-import { components } from "@/src/types/schema";
-import Spinner, { SpinnerTextInline } from "@/src/components/icons/icons";
+import { Spinner, SpinnerTextInline } from "@/src/components/icons/icons";
 import HorizonSelect from "@/src/components/charts/HorizonSelect";
 
 type ChartsProps = {

apps/quartz-app/src/components/charts/HorizonSelect.tsx

@@ -1,6 +1,44 @@
 import { ChangeEvent, FC } from "react";
 import { components } from "@/src/types/schema";
 import useGlobalState from "../helpers/globalState";
+import { InfoIcon } from "../icons/icons";
+import InfoTooltip from "../InfoTooltip";
+
+const HorizonInfo: FC = () => {
+  return (
+    <InfoTooltip
+      tip={
+        <div className="rounded-md w-max max-w-64 leading-4 flex flex-col gap-2">
+          <div>
+            <b className="text-sm">Latest</b>
+            <p>The most up-to-date forecast data available</p>
+          </div>
+          <div>
+            <b className="text-sm">Horizon 1.5h/3h</b>
+            <p>The forecast made N hours before the target time. </p>
+            <p>
+              E.g. The 3 hour horizon forecast for 11am, was created at 8am the
+              same day.
+            </p>
+          </div>
+          <div>
+            <b className="text-sm">Day Ahead</b>
+            <p>Forecast at 9.00 IST the day before. </p>
+            <p>
+              E.g. The forecast for 11am, or any time in a day, was created at
+              9am the day before.
+            </p>
+          </div>
+        </div>
+      }
+      position="left"
+      className={""}
+      fullWidth
+    >
+      <InfoIcon className="text-white self-center ml-2" />
+    </InfoTooltip>
+  );
+};
 
 const HorizonSelect: FC = () => {
   const [forecastHorizon, setForecastHorizon] =
@@ -37,11 +75,11 @@ const HorizonSelect: FC = () => {
     }
   };
   return (
-    <>
+    <div className="flex flex-1 mr-2 z-20">
       <label>
-        <span className="text-white mr-2">Forecast</span>
+        <span className="text-gray-200 mr-2 text-xs uppercase">Forecast</span>
         <select
-          className="capitalize rounded-md py-1 px-2 bg-ocf-grey-900 text-white"
+          className="capitalize rounded-md py-1 px-2 text-sm bg-ocf-grey-900 text-white"
           onChange={handleUpdateHorizon}
           value={
             forecastHorizon.includes("horizon")
@@ -81,7 +119,10 @@ const HorizonSelect: FC = () => {
           })}
         </select>
       </label>
-    </>
+      <div className="flex items-center">
+        <HorizonInfo />
+      </div>
+    </div>
   );
 };
 

apps/quartz-app/src/components/icons/icons.tsx

@@ -205,7 +205,7 @@ type SpinnerProps = {
   children?: React.ReactNode;
 };
 
-const Spinner: React.FC<SpinnerProps> = ({ className = "" }) => {
+export const Spinner: React.FC<SpinnerProps> = ({ className = "" }) => {
   return (
     <svg
       role="status"
@@ -227,8 +227,6 @@ const Spinner: React.FC<SpinnerProps> = ({ className = "" }) => {
   );
 };
 
-export default Spinner;
-
 export const SpinnerSmall = (props: React.SVGProps<SVGSVGElement>) => (
   <svg
     className={`animate-spin fill-white ${props.className}`}

apps/quartz-app/src/components/layout/LayoutWrapper.tsx

@@ -4,7 +4,7 @@ import { useUser } from "@auth0/nextjs-auth0/client";
 import { FC, ReactNode } from "react";
 import Header from "@/src/components/layout/Header";
 import Providers from "@/app/providers";
-import Spinner from "@/src/components/icons/icons";
+import { Spinner } from "@/src/components/icons/icons";
 
 const LayoutWrapper: FC<{
   children: ReactNode;