snap segment based on the route 🦔

web/src/context/Dashboards/useIsDashboardReadOnly.tsx

@@ -47,6 +47,7 @@ export const useIsDashboardReadOnly = ({
   return {
     isVersionHistoryMode,
     isReadOnly,
-    isViewingOldVersion
+    isViewingOldVersion,
+    isFetched
   };
 };

web/src/context/Metrics/useIsMetricReadOnly.tsx

@@ -53,6 +53,7 @@ export const useIsMetricReadOnly = ({
   ]);
 
   return {
+    isFetched,
     isVersionHistoryMode,
     isReadOnly,
     isViewingOldVersion

web/src/layouts/ChatLayout/ChatContext/useAutoChangeLayout.ts

@@ -124,15 +124,12 @@ export const useAutoChangeLayout = ({
 
       //dashboard_mode
       if (dashboardId) {
-        console.log('dashboardId', dashboardId);
         if (!dashboardVersionNumber) {
           const lastMatchingDashboardInChat = chat?.message_ids.reduce<
             BusterChatResponseMessage_file | undefined
           >((acc, chatMessageId) => {
             const chatMessage = getChatMessageMemoized(chatMessageId);
 
-            console.log('chatMessage', chatMessage);
-
             chatMessage?.response_message_ids.forEach((responseMessageId) => {
               const message = chatMessage?.response_messages[responseMessageId]!;
               const isFile =

web/src/layouts/ChatLayout/ChatLayoutContext/useLayoutConfig/useLayoutConfig.ts

@@ -3,7 +3,7 @@
 import { FileType } from '@/api/asset_interfaces/chat';
 import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { FileConfig, FileView, FileViewConfig, FileViewSecondary } from './interfaces';
-import { useMemoizedFn } from '@/hooks';
+import { useMemoizedFn, useUpdateEffect } from '@/hooks';
 import { create } from 'mutative';
 import { ChatLayoutView } from '../../interfaces';
 import type { SelectedFile } from '../../interfaces';
@@ -165,6 +165,19 @@ export const useLayoutConfig = ({
     return 'file';
   }, [selectedFileId, chatId]);
 
+  //we need to use for when the user clicks the back or forward in the browser
+  useUpdateEffect(() => {
+    const newInitialFileViews = initializeFileViews({ metricId, dashboardId, currentRoute });
+    const fileId = Object.keys(newInitialFileViews)[0];
+    const fileView = newInitialFileViews[fileId]?.selectedFileView;
+    const secondaryView = newInitialFileViews[fileId]?.fileViewConfig?.[fileView]?.secondaryView;
+    onSetFileView({
+      fileId,
+      fileView,
+      secondaryView
+    });
+  }, [metricId, dashboardId, currentRoute]);
+
   useEffect(() => {
     if (
       isVersionHistoryMode &&

web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderSegment/DashboardContainerHeaderSegment.tsx

@@ -12,10 +12,12 @@ import { Text } from '@/components/ui/typography';
 export const DashboardContainerHeaderSegment: React.FC<FileContainerSegmentProps> = React.memo(
   (props) => {
     const { selectedFileId } = props;
-    const { isViewingOldVersion } = useIsDashboardReadOnly({
+    const { isViewingOldVersion, isFetched } = useIsDashboardReadOnly({
       dashboardId: selectedFileId || ''
     });
 
+    if (!isFetched) return null;
+
     if (isViewingOldVersion) {
       return <DashboardOldVersion />;
     }
@@ -61,7 +63,7 @@ const DashboardSegments: React.FC<FileContainerSegmentProps> = ({
           label: 'File',
           value: 'file',
           link: createBusterRoute({
-            route: BusterRoutes.APP_CHAT_ID_DASHBOARD_ID,
+            route: BusterRoutes.APP_CHAT_ID_DASHBOARD_ID_FILE,
             dashboardId: selectedFileId || '',
             chatId
           })

web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderSegment.tsx

@@ -13,10 +13,12 @@ import { useIsMetricReadOnly } from '@/context/Metrics/useIsMetricReadOnly';
 export const MetricContainerHeaderSegment: React.FC<FileContainerSegmentProps> = React.memo(
   (props) => {
     const { selectedFileId } = props;
-    const { isViewingOldVersion } = useIsMetricReadOnly({
+    const { isViewingOldVersion, isFetched } = useIsMetricReadOnly({
       metricId: selectedFileId || ''
     });
 
+    if (!isFetched) return null;
+
     if (isViewingOldVersion) {
       return <MetricOldVersion />;
     }
@@ -27,14 +29,6 @@ export const MetricContainerHeaderSegment: React.FC<FileContainerSegmentProps> =
 
 MetricContainerHeaderSegment.displayName = 'MetricContainerHeaderSegment';
 
-const MetricOldVersion: React.FC = () => {
-  return (
-    <Text truncate variant={'secondary'}>
-      You are viewing an old version of this metric
-    </Text>
-  );
-};
-
 const MetricSegments: React.FC<FileContainerSegmentProps> = ({ selectedFileView, chatId }) => {
   const onSetFileView = useChatLayoutContextSelector((x) => x.onSetFileView);
   const metricId = useChatLayoutContextSelector((x) => x.metricId) || '';
@@ -105,3 +99,11 @@ const MetricSegments: React.FC<FileContainerSegmentProps> = ({ selectedFileView,
     />
   );
 };
+
+const MetricOldVersion: React.FC = () => {
+  return (
+    <Text truncate variant={'secondary'}>
+      You are viewing an old version of this metric
+    </Text>
+  );
+};

web/src/lib/canvas.ts

@@ -12,7 +12,7 @@ const getCanvasContext = () => {
 };
 
 export const measureTextWidth = memoize(
-  (text: string, font: any = {}) => {
+  (text: string | number, font: any = {}) => {
     if (!isServer) {
       const { fontSize, fontFamily = 'sans-serif', fontWeight, fontStyle, fontVariant } = font;
       const ctx = getCanvasContext();
@@ -20,7 +20,9 @@ export const measureTextWidth = memoize(
       ctx.font = [fontStyle, fontWeight, fontVariant, `${fontSize || 13.6}px`, fontFamily].join(
         ' '
       );
-      const metrics = ctx.measureText(typeof text === 'string' ? text : '');
+      const metrics = ctx.measureText(
+        typeof text === 'string' || typeof text === 'number' ? String(text) : ''
+      );
 
       return {
         width: metrics.width,
@@ -32,5 +34,5 @@ export const measureTextWidth = memoize(
       height: 0
     };
   },
-  (text: string, font = {}) => [text, ...Object.values(font)].join('')
+  (text: string | number, font = {}) => [text, ...Object.values(font)].join('')
 );

web/src/lib/metrics/messageAutoChartHandler/createDefaultTableColumnWidths.ts

@@ -22,7 +22,7 @@ export const createDefaultTableColumnWidths = (
   return initial;
 };
 
-const OFFSET = 40;
+const OFFSET = 32; //there are 16px of x padding
 
 const getDefaultColumnWidth = (
   rows: Record<string, string | number | null | Date>[],
@@ -37,6 +37,5 @@ const getDefaultColumnWidth = (
     return acc.length > currString.length ? acc : currString;
   }, headerString);
   const longestWidth = measureTextWidth(longestString).width + OFFSET;
-  const width = clamp(longestWidth, MIN_COLUMN_WIDTH, MAX_COLUMN_WIDTH);
-  return width;
+  return clamp(longestWidth, MIN_COLUMN_WIDTH, MAX_COLUMN_WIDTH);
 };