use metric fetched logic

web/src/app/app/_layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons.tsx

@@ -14,15 +14,15 @@ import { HideButtonContainer } from './HideButtonContainer';
 import { FileButtonContainer } from './FileButtonContainer';
 import { CreateChatButton } from './CreateChatButtont';
 import { SelectableButton } from './SelectableButton';
+import { useMetricFetched } from '@/context/Metrics';
 
 export const MetricContainerHeaderButtons: React.FC<FileContainerButtonsProps> = React.memo(() => {
-  const selectedFileView = useChatLayoutContextSelector(
-    (x) => x.selectedFileView
-  ) as MetricFileView;
   const isPureFile = useChatLayoutContextSelector((x) => x.isPureFile);
   const selectedFileId = useChatIndividualContextSelector((x) => x.selectedFileId)!;
-
   const metricId = selectedFileId;
+  const { fetched } = useMetricFetched({ metricId });
+
+  if (!fetched) return null;
 
   return (
     <FileButtonContainer>

web/src/context/Chats/ChatProvider/ChatProvider.tsx

@@ -63,6 +63,7 @@ export const useBusterChatIndividual = ({
   });
 
   const selectedChat: IBusterChat = chat || memoizedFallbackToMetricChat;
+  const fetched = chat?.created_at !== undefined;
 
   useEffect(() => {
     if (chatId) subscribeToChat({ chatId });

web/src/context/Chats/ChatProvider/helpers/useFileFallback.ts

@@ -11,16 +11,8 @@ export const useFileFallback = ({
   defaultSelectedFile?: SelectedFile;
 }) => {
   const fileId = defaultSelectedFile?.id || '';
-  const metricTitle = useBusterMetricsIndividualContextSelector((x) => x.metrics[fileId]?.title);
+  const { metricTitle, metricVersionNumber } = useMetricParams(fileId);
-  const metricVersionNumber = useBusterMetricsIndividualContextSelector(
+  const { dashboardTitle, dashboardVersionNumber } = useDashboardParams(fileId);
-    (x) => x.metrics[fileId]?.version_number
-  );
-  const dashboardTitle = useBusterDashboardContextSelector(
-    (x) => x.dashboards[fileId]?.dashboard?.title
-  );
-  const dashboardVersionNumber = useBusterDashboardContextSelector(
-    (x) => x.dashboards[fileId]?.dashboard?.version_number
-  );
 
   const fileType: 'metric' | 'dashboard' = useMemo(() => {
     if (defaultSelectedFile?.type === 'metric') {
@@ -70,7 +62,6 @@ const fallbackToFileChat = ({
   versionNumber: number;
   type?: 'metric' | 'dashboard';
 }): IBusterChat => {
-  console.log(type);
   return {
     id,
     isNewChat: true,
@@ -82,7 +73,7 @@ const fallbackToFileChat = ({
           {
             id: 'init',
             type: 'text',
-            message: `I’ve pulled in your ${type}. How can I help? Is there anything you'd like to modify?`
+            message: `I've pulled in your ${type}. How can I help? Is there anything you'd like to modify?`
           },
           {
             id,
@@ -114,3 +105,23 @@ const fallbackToFileChat = ({
     created_by_avatar: ''
   };
 };
+
+const useMetricParams = (fileId: string) => {
+  const metricTitle = useBusterMetricsIndividualContextSelector((x) => x.metrics[fileId]?.title);
+  const metricVersionNumber = useBusterMetricsIndividualContextSelector(
+    (x) => x.metrics[fileId]?.version_number
+  );
+
+  return { metricTitle, metricVersionNumber };
+};
+
+const useDashboardParams = (fileId: string) => {
+  const dashboardTitle = useBusterDashboardContextSelector(
+    (x) => x.dashboards[fileId]?.dashboard?.title
+  );
+  const dashboardVersionNumber = useBusterDashboardContextSelector(
+    (x) => x.dashboards[fileId]?.dashboard?.version_number
+  );
+
+  return { dashboardTitle, dashboardVersionNumber };
+};

web/src/context/MetricData/MOCK_DATA.ts

@@ -3,7 +3,7 @@ import type { BusterMetricData } from '../Metrics';
 import { faker } from '@faker-js/faker';
 
 const mockData = (): Record<string, string | number | null>[] => {
-  return Array.from({ length: faker.number.int({ min: 2, max: 615 }) }, (x, index) => ({
+  return Array.from({ length: faker.number.int({ min: 2, max: 100 }) }, (x, index) => ({
     sales: index + 1,
     date: faker.date.past({ years: index + 1 }).toISOString(),
     product: faker.commerce.productName()

web/src/context/Metrics/BusterMetricsIndividualProvider/index.ts

@@ -1 +1,2 @@
 export * from './BusterMetricsIndividualProvider';
+export * from './useMetricFetched';

web/src/context/Metrics/BusterMetricsIndividualProvider/useMetricFetched.ts

@@ -0,0 +1,9 @@
+import { useBusterMetricsIndividualContextSelector } from './BusterMetricsIndividualProvider';
+
+export const useMetricFetched = ({ metricId }: { metricId: string }) => {
+  const fetched = useBusterMetricsIndividualContextSelector((x) => x.metrics[metricId]?.fetched);
+  const fetching = useBusterMetricsIndividualContextSelector((x) => x.metrics[metricId]?.fetching);
+  const error = useBusterMetricsIndividualContextSelector((x) => x.metrics[metricId]?.error);
+
+  return { fetched, fetching, error };
+};