feat(insights): implement many tweaks & improvements

- Use 1-day aggregations for scores
- Make median score card not clickable / don't break down averages
- Add explainer tooltips to column headers for score breakdowns
- Add evaluation date in score breakdown explainers
- Filter price feeds by status
- Add price view to component table

Author: cprussin

apps/insights/src/app/price-feeds/[slug]/layout.ts

@@ -1,13 +1,13 @@
 import type { Metadata } from "next";
 
-import { Cluster, getData } from "../../../services/pyth";
+import { Cluster, getFeeds } from "../../../services/pyth";
 export { PriceFeedLayout as default } from "../../../components/PriceFeed/layout";
 
 export const metadata: Metadata = {
   title: "Price Feeds",
 };
 
 export const generateStaticParams = async () => {
-  const data = await getData(Cluster.Pythnet);
-  return data.map(({ symbol }) => ({ slug: encodeURIComponent(symbol) }));
+  const feeds = await getFeeds(Cluster.Pythnet);
+  return feeds.map(({ symbol }) => ({ slug: encodeURIComponent(symbol) }));
 };

apps/insights/src/components/Explain/index.module.scss

@@ -0,0 +1,23 @@
+@use "@pythnetwork/component-library/theme";
+
+.trigger {
+  @each $size, $values in theme.$button-sizes {
+    &[data-size="#{$size}"] {
+      margin: -#{theme.map-get-strict($values, "padding")};
+    }
+  }
+}
+
+.description {
+  p {
+    margin: 0;
+  }
+
+  b {
+    font-weight: theme.font-weight("semibold");
+  }
+
+  ul {
+    margin: 0;
+  }
+}

apps/insights/src/components/Explain/index.tsx

@@ -0,0 +1,35 @@
+import { Info } from "@phosphor-icons/react/dist/ssr/Info";
+import { Lightbulb } from "@phosphor-icons/react/dist/ssr/Lightbulb";
+import { Alert, AlertTrigger } from "@pythnetwork/component-library/Alert";
+import { Button } from "@pythnetwork/component-library/Button";
+import type { ComponentProps, ReactNode } from "react";
+
+import styles from "./index.module.scss";
+
+type Props = {
+  size: ComponentProps<typeof Button>["size"];
+  title: string;
+  children: ReactNode;
+};
+
+export const Explain = ({ size, title, children }: Props) => (
+  <AlertTrigger>
+    <Button
+      className={styles.trigger ?? ""}
+      variant="ghost"
+      size={size}
+      beforeIcon={(props) => <Info weight="fill" {...props} />}
+      rounded
+      hideText
+    >
+      Explain {title}
+    </Button>
+    <Alert
+      title={title}
+      icon={<Lightbulb />}
+      bodyClassName={styles.description}
+    >
+      {children}
+    </Alert>
+  </AlertTrigger>
+);

apps/insights/src/components/Explanations/index.tsx

@@ -0,0 +1,92 @@
+import { Button } from "@pythnetwork/component-library/Button";
+import { useMemo } from "react";
+
+import { Explain } from "../Explain";
+import { FormattedDate } from "../FormattedDate";
+
+export const ExplainAverage = ({
+  scoreTime,
+}: {
+  scoreTime?: Date | undefined;
+}) => {
+  return (
+    <Explain size="xs" title="Average Feed Score">
+      <p>
+        Each <b>Price Feed Component</b> that a <b>Publisher</b> provides has an
+        associated <b>Score</b>, which is determined by that component{"'"}s{" "}
+        <b>Uptime</b>, <b>Price Deviation</b>, and <b>Staleness</b>. The{" "}
+        <b>Average Feed Score</b> is the average of the scores for all{" "}
+        <b>Price Feed Components</b>.
+      </p>
+      {scoreTime && <EvaluationTime scoreTime={scoreTime} />}
+      <Button
+        size="xs"
+        variant="solid"
+        href="https://docs.pyth.network/home/oracle-integrity-staking/publisher-quality-ranking"
+        target="_blank"
+      >
+        Learn more
+      </Button>
+    </Explain>
+  );
+};
+
+export const EvaluationTime = ({ scoreTime }: { scoreTime: Date }) => {
+  const startTime = useMemo(() => {
+    const date = new Date(scoreTime);
+    date.setDate(date.getDate() - 1);
+    return date;
+  }, [scoreTime]);
+
+  return (
+    <p>
+      This value is calculated based on feed performance from{" "}
+      <b>
+        <FormattedDate
+          value={startTime}
+          dateStyle="long"
+          timeStyle="long"
+          timeZone="utc"
+        />
+      </b>{" "}
+      to{" "}
+      <b>
+        <FormattedDate
+          value={scoreTime}
+          dateStyle="long"
+          timeStyle="long"
+          timeZone="utc"
+        />
+      </b>
+      .
+    </p>
+  );
+};
+
+export const ExplainActive = () => (
+  <Explain size="xs" title="Active Feeds">
+    <p>
+      This is the number of feeds which the publisher is permissioned for, where
+      the publisher{"'"}s feed has 50% or better uptime over the last day.
+    </p>
+    <NeitherActiveNorInactiveNote />
+  </Explain>
+);
+
+export const ExplainInactive = () => (
+  <Explain size="xs" title="Inactive Feeds">
+    <p>
+      This is the number of feeds which the publisher is permissioned for, but
+      for which the publisher{"'"}s feed has less than 50% uptime over the last
+      day.
+    </p>
+    <NeitherActiveNorInactiveNote />
+  </Explain>
+);
+
+const NeitherActiveNorInactiveNote = () => (
+  <p>
+    Note that a publisher{"'"}s feed may not be considered either active or
+    inactive if Pyth has not yet calculated quality rankings for it.
+  </p>
+);

apps/insights/src/components/NoResults/index.tsx

@@ -33,7 +33,7 @@ export const NoResults = ({ onClearSearch, ...props }: Props) => (
       <p className={styles.body}>
         {"body" in props
           ? props.body
-          : `We couldn't find any results for "${props.query}".`}
+          : `We couldn't find any results for ${props.query === "" ? "your query" : `"${props.query}"`}.`}
       </p>
     </div>
     {onClearSearch && (

apps/insights/src/components/PriceComponentDrawer/index.tsx

@@ -4,6 +4,7 @@ import { Spinner } from "@pythnetwork/component-library/Spinner";
 import { StatCard } from "@pythnetwork/component-library/StatCard";
 import { useRouter } from "next/navigation";
 import { type ReactNode, useState, useRef, useCallback } from "react";
+import { RouterProvider } from "react-aria";
 import { z } from "zod";
 
 import styles from "./index.module.scss";
@@ -78,14 +79,11 @@ export const PriceComponentDrawer = ({
         <>
           {headingExtra}
           <StatusComponent status={status} />
-          <Button
-            size="sm"
-            variant="outline"
-            onPress={handleOpenFeed}
-            href={navigateHref}
-          >
-            {navigateButtonText}
-          </Button>
+          <RouterProvider navigate={handleOpenFeed}>
+            <Button size="sm" variant="outline" href={navigateHref}>
+              {navigateButtonText}
+            </Button>
+          </RouterProvider>
         </>
       }
       isOpen={isFeedDrawerOpen}

apps/insights/src/components/PriceFeed/publishers-card.module.scss renamed to apps/insights/src/components/PriceComponentsCard/index.module.scss

@@ -1,6 +1,6 @@
 @use "@pythnetwork/component-library/theme";
 
-.publisherName {
+.componentName {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;