From 538c5928fd366c939c9571c82adeaf6790c69377 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Mon, 14 Apr 2025 16:53:04 -0600 Subject: [PATCH] =?UTF-8?q?snap=20segment=20based=20on=20the=20route=20?= =?UTF-8?q?=F0=9F=A6=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Dashboards/useIsDashboardReadOnly.tsx | 3 ++- .../context/Metrics/useIsMetricReadOnly.tsx | 1 + .../ChatContext/useAutoChangeLayout.ts | 3 --- .../useLayoutConfig/useLayoutConfig.ts | 15 +++++++++++++- .../DashboardContainerHeaderSegment.tsx | 6 ++++-- .../MetricContainerHeaderSegment.tsx | 20 ++++++++++--------- web/src/lib/canvas.ts | 8 +++++--- .../createDefaultTableColumnWidths.ts | 5 ++--- 8 files changed, 39 insertions(+), 22 deletions(-) diff --git a/web/src/context/Dashboards/useIsDashboardReadOnly.tsx b/web/src/context/Dashboards/useIsDashboardReadOnly.tsx index d69eb99dd..07f3fdea6 100644 --- a/web/src/context/Dashboards/useIsDashboardReadOnly.tsx +++ b/web/src/context/Dashboards/useIsDashboardReadOnly.tsx @@ -47,6 +47,7 @@ export const useIsDashboardReadOnly = ({ return { isVersionHistoryMode, isReadOnly, - isViewingOldVersion + isViewingOldVersion, + isFetched }; }; diff --git a/web/src/context/Metrics/useIsMetricReadOnly.tsx b/web/src/context/Metrics/useIsMetricReadOnly.tsx index 2d9a5ea43..218d597c2 100644 --- a/web/src/context/Metrics/useIsMetricReadOnly.tsx +++ b/web/src/context/Metrics/useIsMetricReadOnly.tsx @@ -53,6 +53,7 @@ export const useIsMetricReadOnly = ({ ]); return { + isFetched, isVersionHistoryMode, isReadOnly, isViewingOldVersion diff --git a/web/src/layouts/ChatLayout/ChatContext/useAutoChangeLayout.ts b/web/src/layouts/ChatLayout/ChatContext/useAutoChangeLayout.ts index d8e51341f..12b4d84f8 100644 --- a/web/src/layouts/ChatLayout/ChatContext/useAutoChangeLayout.ts +++ b/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 = diff --git a/web/src/layouts/ChatLayout/ChatLayoutContext/useLayoutConfig/useLayoutConfig.ts b/web/src/layouts/ChatLayout/ChatLayoutContext/useLayoutConfig/useLayoutConfig.ts index 2acc49c12..6f1cd17d0 100644 --- a/web/src/layouts/ChatLayout/ChatLayoutContext/useLayoutConfig/useLayoutConfig.ts +++ b/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 && diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderSegment/DashboardContainerHeaderSegment.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderSegment/DashboardContainerHeaderSegment.tsx index 4098c9cd4..3b77d4f93 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderSegment/DashboardContainerHeaderSegment.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderSegment/DashboardContainerHeaderSegment.tsx @@ -12,10 +12,12 @@ import { Text } from '@/components/ui/typography'; export const DashboardContainerHeaderSegment: React.FC = React.memo( (props) => { const { selectedFileId } = props; - const { isViewingOldVersion } = useIsDashboardReadOnly({ + const { isViewingOldVersion, isFetched } = useIsDashboardReadOnly({ dashboardId: selectedFileId || '' }); + if (!isFetched) return null; + if (isViewingOldVersion) { return ; } @@ -61,7 +63,7 @@ const DashboardSegments: React.FC = ({ label: 'File', value: 'file', link: createBusterRoute({ - route: BusterRoutes.APP_CHAT_ID_DASHBOARD_ID, + route: BusterRoutes.APP_CHAT_ID_DASHBOARD_ID_FILE, dashboardId: selectedFileId || '', chatId }) diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderSegment.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderSegment.tsx index c9ed732a9..638caade9 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderSegment.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderSegment.tsx @@ -13,10 +13,12 @@ import { useIsMetricReadOnly } from '@/context/Metrics/useIsMetricReadOnly'; export const MetricContainerHeaderSegment: React.FC = React.memo( (props) => { const { selectedFileId } = props; - const { isViewingOldVersion } = useIsMetricReadOnly({ + const { isViewingOldVersion, isFetched } = useIsMetricReadOnly({ metricId: selectedFileId || '' }); + if (!isFetched) return null; + if (isViewingOldVersion) { return ; } @@ -27,14 +29,6 @@ export const MetricContainerHeaderSegment: React.FC = MetricContainerHeaderSegment.displayName = 'MetricContainerHeaderSegment'; -const MetricOldVersion: React.FC = () => { - return ( - - You are viewing an old version of this metric - - ); -}; - const MetricSegments: React.FC = ({ selectedFileView, chatId }) => { const onSetFileView = useChatLayoutContextSelector((x) => x.onSetFileView); const metricId = useChatLayoutContextSelector((x) => x.metricId) || ''; @@ -105,3 +99,11 @@ const MetricSegments: React.FC = ({ selectedFileView, /> ); }; + +const MetricOldVersion: React.FC = () => { + return ( + + You are viewing an old version of this metric + + ); +}; diff --git a/web/src/lib/canvas.ts b/web/src/lib/canvas.ts index 5e47b509a..dd393caaa 100644 --- a/web/src/lib/canvas.ts +++ b/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('') ); diff --git a/web/src/lib/metrics/messageAutoChartHandler/createDefaultTableColumnWidths.ts b/web/src/lib/metrics/messageAutoChartHandler/createDefaultTableColumnWidths.ts index 5107cb8fa..9757f95e3 100644 --- a/web/src/lib/metrics/messageAutoChartHandler/createDefaultTableColumnWidths.ts +++ b/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[], @@ -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); };