changes to chart component

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 { metricId, metric_version_number } = useGetMetricParams();
-  const { metric_version_number } = Route.useSearch();
 
   return <MetricViewChart metricId={metricId} versionNumber={metric_version_number} />;
 };

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 />;
+};

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 };
+};

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,

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,
+  ...metricChartServerAssetContext,
-})
+});
-
-function RouteComponent() {
-  return (
-    <div>
-      Hello "/app/_app/_asset/dashboards/$dashboardId/metrics/$metricId/chart"!
-    </div>
-  )
-}

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,
 });