+
+ ),
+ {
+ fonts: [
+ {
+ name: "inconsolata",
+ data: inconsolataRegularFont,
+ style: "normal",
+ weight: 400,
+ },
+ ],
+ },
+ );
+};
+
+export default OgImage;
diff --git a/src/pages/experiments/[id].tsx b/src/pages/experiments/[id].tsx
index 0157fdc..6f490a2 100644
--- a/src/pages/experiments/[id].tsx
+++ b/src/pages/experiments/[id].tsx
@@ -10,6 +10,9 @@ import {
VStack,
} from "@chakra-ui/react";
import Link from "next/link";
+import { type GetServerSidePropsContext } from "next";
+import { createServerSideHelpers } from "@trpc/react-query/server";
+import superjson from "superjson";
import { useRouter } from "next/router";
import { useState, useEffect } from "react";
@@ -22,13 +25,43 @@ import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks";
import { useAppStore } from "~/state/store";
import { useSyncVariantEditor } from "~/state/sync";
import { HeaderButtons } from "~/components/experiments/HeaderButtons/HeaderButtons";
+import Head from "next/head";
+import { appRouter } from "~/server/api/root.router";
+import { createInnerTRPCContext } from "~/server/api/trpc";
+
+export const getServerSideProps = async (context: GetServerSidePropsContext<{ id: string }>) => {
+ const experimentId = context.params?.id as string;
+
+ const helpers = createServerSideHelpers({
+ router: appRouter,
+ ctx: createInnerTRPCContext({ session: null }),
+ transformer: superjson, // optional - adds superjson serialization
+ });
+
+ // prefetch query
+ await helpers.experiments.stats.prefetch({ id: experimentId });
+
+ return {
+ props: {
+ trpcState: helpers.dehydrate(),
+ },
+ };
+};
export default function Experiment() {
const router = useRouter();
- const experiment = useExperiment();
const utils = api.useContext();
useSyncVariantEditor();
+ const experiment = useExperiment();
+ const experimentStats = api.experiments.stats.useQuery(
+ { id: router.query.id as string },
+ {
+ enabled: !!router.query.id,
+ },
+ );
+ const stats = experimentStats.data;
+
useEffect(() => {
useAppStore.getState().sharedVariantEditor.loadMonaco().catch(console.error);
});
@@ -62,53 +95,65 @@ export default function Experiment() {
const canModify = experiment.data?.access.canModify ?? false;
return (
-
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+
+
+
+ OpenPipe
+ {experimentLabel}
+
+
+
+ Variants: {variantsCount}
+
+
+ Scenarios: {scenariosCount}
+
+