From ec07753e2621c638530258f2bb8f7435c4385f67 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Tue, 19 Aug 2025 12:04:26 -0600
Subject: [PATCH] changes to chart component

---
 .../metricChartServerAssetContext.tsx          | 18 ++++++++++++++----
 ...xt.ts => metricIndexServerAssetContext.tsx} |  7 +++++--
 .../metric-server/useGetMetricParams.ts        | 18 ++++++++++++++++++
 apps/web-tss/src/routes/app/_app/_asset.tsx    |  3 ---
 ...ds.$dashboardId.metrics.$metricId.chart.tsx | 17 +++++------------
 .../app/_app/_asset/metrics.$metricId.tsx      |  3 +--
 6 files changed, 43 insertions(+), 23 deletions(-)
 rename apps/web-tss/src/context/BusterAssets/metric-server/{metricIndexServerAssetContext.ts => metricIndexServerAssetContext.tsx} (94%)
 create mode 100644 apps/web-tss/src/context/BusterAssets/metric-server/useGetMetricParams.ts

diff --git a/apps/web-tss/src/context/BusterAssets/metric-server/metricChartServerAssetContext.tsx b/apps/web-tss/src/context/BusterAssets/metric-server/metricChartServerAssetContext.tsx
index 292901b62..a5d5fa1a0 100644
--- a/apps/web-tss/src/context/BusterAssets/metric-server/metricChartServerAssetContext.tsx
+++ b/apps/web-tss/src/context/BusterAssets/metric-server/metricChartServerAssetContext.tsx
@@ -1,11 +1,21 @@
-import { getRouteApi } from '@tanstack/react-router';
+import {
+  useChildMatches,
+  useLinkProps,
+  useLocation,
+  useMatch,
+  useMatchRoute,
+  useParams,
+  useParentMatches,
+  useSearch,
+  useStableCallback,
+} from '@tanstack/react-router';
 import { MetricViewChart } from '@/controllers/MetricController/MetricViewChart';
+import { useGetMetricParams } from './useGetMetricParams';
 
-const Route = getRouteApi('/app/_app/_asset/metrics/$metricId');
+//const Route = getRouteApi('/app/_app/_asset/metrics/$metricId');
 
 export const component = () => {
-  const { metricId } = Route.useParams();
-  const { metric_version_number } = Route.useSearch();
+  const { metricId, metric_version_number } = useGetMetricParams();
 
   return <MetricViewChart metricId={metricId} versionNumber={metric_version_number} />;
 };
diff --git a/apps/web-tss/src/context/BusterAssets/metric-server/metricIndexServerAssetContext.ts b/apps/web-tss/src/context/BusterAssets/metric-server/metricIndexServerAssetContext.tsx
similarity index 94%
rename from apps/web-tss/src/context/BusterAssets/metric-server/metricIndexServerAssetContext.ts
rename to apps/web-tss/src/context/BusterAssets/metric-server/metricIndexServerAssetContext.tsx
index 324f52190..c817245b3 100644
--- a/apps/web-tss/src/context/BusterAssets/metric-server/metricIndexServerAssetContext.ts
+++ b/apps/web-tss/src/context/BusterAssets/metric-server/metricIndexServerAssetContext.tsx
@@ -1,9 +1,8 @@
 import type { AssetType } from '@buster/server-shared/assets';
 import type { QueryClient } from '@tanstack/react-query';
-import { MatchRoute, redirect } from '@tanstack/react-router';
+import { Outlet, redirect } from '@tanstack/react-router';
 import { z } from 'zod';
 import { prefetchGetMetric } from '@/api/buster_rest/metrics';
-import type { AppRouterContext } from '@/router';
 import type { FileRouteTypes } from '@/routeTree.gen';
 
 export const validateSearch = z.object({
@@ -68,3 +67,7 @@ export const head = ({ loaderData }: { loaderData?: { title: string | undefined
     { name: 'og:description', content: 'View detailed metric analysis and insights' },
   ],
 });
+
+export const component = () => {
+  return <Outlet />;
+};
diff --git a/apps/web-tss/src/context/BusterAssets/metric-server/useGetMetricParams.ts b/apps/web-tss/src/context/BusterAssets/metric-server/useGetMetricParams.ts
new file mode 100644
index 000000000..3a31eae29
--- /dev/null
+++ b/apps/web-tss/src/context/BusterAssets/metric-server/useGetMetricParams.ts
@@ -0,0 +1,18 @@
+import { useParams, useParentMatches, useSearch } from '@tanstack/react-router';
+
+export const useGetMetricParams = () => {
+  const parentMatches = useParentMatches();
+  const lastMatch = parentMatches.find((match) => match.fullPath.endsWith('/metrics/$metricId'));
+  const routeId = lastMatch?.routeId as
+    | '/app/_app/_asset/dashboards/$dashboardId/metrics/$metricId'
+    | '/app/_app/_asset/metrics/$metricId';
+
+  const { metricId } = useParams({
+    from: routeId,
+  });
+  const { metric_version_number } = useSearch({
+    from: routeId,
+  });
+
+  return { metricId, metric_version_number };
+};
diff --git a/apps/web-tss/src/routes/app/_app/_asset.tsx b/apps/web-tss/src/routes/app/_app/_asset.tsx
index 4839dc33a..ee90783bb 100644
--- a/apps/web-tss/src/routes/app/_app/_asset.tsx
+++ b/apps/web-tss/src/routes/app/_app/_asset.tsx
@@ -18,7 +18,6 @@ export const Route = createFileRoute('/app/_app/_asset')({
   beforeLoad: async ({ matches }) => {
     const assetType = [...matches].reverse().find(({ staticData }) => staticData?.assetType)
       ?.staticData?.assetType as AssetType;
-    console.log('assetType', assetType);
     return {
       assetType,
     };
@@ -32,8 +31,6 @@ function RouteComponent() {
   const search = useSearch({ strict: false });
   const { assetId, versionNumber } = getAssetIdAndVersionNumber(assetType, params, search);
   const passwordConfig = useGetAssetPasswordConfig(assetId, assetType, versionNumber);
-  console.log('assetType', assetType);
-  console.log('assetId', assetId);
 
   const containerParams: AppAssetCheckLayoutProps = {
     assetId,
diff --git a/apps/web-tss/src/routes/app/_app/_asset/dashboards.$dashboardId.metrics.$metricId.chart.tsx b/apps/web-tss/src/routes/app/_app/_asset/dashboards.$dashboardId.metrics.$metricId.chart.tsx
index 059bd4253..063751977 100644
--- a/apps/web-tss/src/routes/app/_app/_asset/dashboards.$dashboardId.metrics.$metricId.chart.tsx
+++ b/apps/web-tss/src/routes/app/_app/_asset/dashboards.$dashboardId.metrics.$metricId.chart.tsx
@@ -1,15 +1,8 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router';
+import * as metricChartServerAssetContext from '@/context/BusterAssets/metric-server/metricChartServerAssetContext';
 
 export const Route = createFileRoute(
-  '/app/_app/_asset/dashboards/$dashboardId/metrics/$metricId/chart',
+  '/app/_app/_asset/dashboards/$dashboardId/metrics/$metricId/chart'
 )({
-  component: RouteComponent,
-})
-
-function RouteComponent() {
-  return (
-    <div>
-      Hello "/app/_app/_asset/dashboards/$dashboardId/metrics/$metricId/chart"!
-    </div>
-  )
-}
+  ...metricChartServerAssetContext,
+});
diff --git a/apps/web-tss/src/routes/app/_app/_asset/metrics.$metricId.tsx b/apps/web-tss/src/routes/app/_app/_asset/metrics.$metricId.tsx
index c5811aae8..5a32070d5 100644
--- a/apps/web-tss/src/routes/app/_app/_asset/metrics.$metricId.tsx
+++ b/apps/web-tss/src/routes/app/_app/_asset/metrics.$metricId.tsx
@@ -1,7 +1,6 @@
-import { createFileRoute, Outlet } from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router';
 import * as metricServerContext from '@/context/BusterAssets/metric-server/metricIndexServerAssetContext';
 
 export const Route = createFileRoute('/app/_app/_asset/metrics/$metricId')({
   ...metricServerContext,
-  component: Outlet,
 });