diff --git a/web/src/components/ui/charts/BusterChartJS/BusterChartJSComponent.tsx b/web/src/components/ui/charts/BusterChartJS/BusterChartJSComponent.tsx index 6d1502934..0502a6da8 100644 --- a/web/src/components/ui/charts/BusterChartJS/BusterChartJSComponent.tsx +++ b/web/src/components/ui/charts/BusterChartJS/BusterChartJSComponent.tsx @@ -195,9 +195,6 @@ export const BusterChartJSComponent = React.memo( if (selectedChartType === 'combo') return [ChartHoverBarPlugin, ChartTotalizerPlugin]; return []; }, [selectedChartType]); - console.log('datasetOptions', datasetOptions); - console.log('data', data); - console.log('options', options); return ( diff --git a/web/src/components/ui/charts/BusterChartJS/helpers/formatBarAndLineDataLabel.test.ts b/web/src/components/ui/charts/BusterChartJS/helpers/formatBarAndLineDataLabel.test.ts index cacd01ea6..5d8471d5b 100644 --- a/web/src/components/ui/charts/BusterChartJS/helpers/formatBarAndLineDataLabel.test.ts +++ b/web/src/components/ui/charts/BusterChartJS/helpers/formatBarAndLineDataLabel.test.ts @@ -1,6 +1,6 @@ import { formatBarAndLineDataLabel } from './formatBarAndLineDataLabel'; import { ColumnLabelFormat } from '@/api/asset_interfaces/metric'; -import { Context } from 'chartjs-plugin-datalabels'; +import type { Context } from 'chartjs-plugin-datalabels'; describe('formatBarAndLineDataLabel', () => { it('formats a single value without percentage', () => { @@ -33,4 +33,89 @@ describe('formatBarAndLineDataLabel', () => { expect(result).toBe('1,234.56'); }); + + // Mock chart context + const createMockContext = (datasets: any[]): Partial => ({ + chart: { + data: { + datasets + }, + $totalizer: { + stackTotals: [100], + seriesTotals: [50] + } + } as any, + dataIndex: 0, + datasetIndex: 0 + }); + + describe('useStackTotal logic', () => { + const baseDataset = { hidden: false, isTrendline: false }; + + test('should use stack total when there are multiple visible datasets', () => { + const mockContext = createMockContext([baseDataset, { ...baseDataset }]) as Context; + + const result = formatBarAndLineDataLabel(25, mockContext, 'data-label', { + style: 'number', + columnType: 'number' + }); + + // 25 out of stack total (100) = 25% + expect(result).toBe('25%'); + }); + + test('should use stack total when percentageMode is stacked', () => { + const mockContext = createMockContext([baseDataset]) as Context; + + const result = formatBarAndLineDataLabel(25, mockContext, 'stacked', { + style: 'number', + columnType: 'number' + }); + + // 25 out of stack total (100) = 25% + expect(result).toBe('25%'); + }); + + test('should use series total for single dataset and non-stacked percentage mode', () => { + const mockContext = createMockContext([baseDataset]) as Context; + + const result = formatBarAndLineDataLabel(25, mockContext, 'data-label', { + style: 'number', + columnType: 'number' + }); + + // 25 out of series total (50) = 50% + expect(result).toBe('50%'); + }); + + test('should ignore hidden datasets when counting multiple datasets', () => { + const mockContext = createMockContext([ + baseDataset, + { ...baseDataset, hidden: true } + ]) as Context; + + const result = formatBarAndLineDataLabel(25, mockContext, 'data-label', { + style: 'number', + columnType: 'number' + }); + + // 25 out of series total (50) = 50% (since second dataset is hidden) + expect(result).toBe('50%'); + }); + + test('should ignore trendline datasets when counting multiple datasets', () => { + const mockContext = createMockContext([ + baseDataset, + { ...baseDataset, isTrendline: true } + ]) as Context; + + const result = formatBarAndLineDataLabel(25, mockContext, 'data-label', { + style: 'number', + columnType: 'number' + }); + + // 25 out of series total (50) = 50% (since second dataset is a trendline) + expect(result).toBe('50%'); + }); + }); }); diff --git a/web/src/components/ui/charts/BusterChartJS/helpers/formatBarAndLineDataLabel.ts b/web/src/components/ui/charts/BusterChartJS/helpers/formatBarAndLineDataLabel.ts index 34e4359e7..569e5fd9a 100644 --- a/web/src/components/ui/charts/BusterChartJS/helpers/formatBarAndLineDataLabel.ts +++ b/web/src/components/ui/charts/BusterChartJS/helpers/formatBarAndLineDataLabel.ts @@ -17,7 +17,7 @@ export const formatBarAndLineDataLabel = ( ); const hasMultipleDatasets = shownDatasets.length > 1; - const useStackTotal = !hasMultipleDatasets || percentageMode === 'stacked'; + const useStackTotal = hasMultipleDatasets || percentageMode === 'stacked'; const total: number = useStackTotal ? context.chart.$totalizer.stackTotals[context.dataIndex] diff --git a/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/barSeriesBuilder.ts b/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/barSeriesBuilder.ts index 5edcf97de..64563063b 100644 --- a/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/barSeriesBuilder.ts +++ b/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/barSeriesBuilder.ts @@ -332,13 +332,12 @@ const getFormattedValueAndSetBarDataLabels = ( } ) => { const rawValue = context.dataset.data[context.dataIndex] as number; - const percentageModesMatch = context.chart.$barDataLabelsPercentageMode === percentageMode; - const currentValue = percentageModesMatch - ? context.chart.$barDataLabels?.[context.datasetIndex]?.[context.dataIndex] || '' - : ''; - - const formattedValue = - currentValue || formatBarAndLineDataLabel(rawValue, context, percentageMode, columnLabelFormat); + const formattedValue = formatBarAndLineDataLabel( + rawValue, + context, + percentageMode, + columnLabelFormat + ); // Store only the formatted value, rotation is handled globally setBarDataLabelsManager(context, formattedValue, percentageMode); diff --git a/web/src/layouts/ChatLayout/ChatContext/useAutoChangeLayout.ts b/web/src/layouts/ChatLayout/ChatContext/useAutoChangeLayout.ts index 425bb85c5..2a905af66 100644 --- a/web/src/layouts/ChatLayout/ChatContext/useAutoChangeLayout.ts +++ b/web/src/layouts/ChatLayout/ChatContext/useAutoChangeLayout.ts @@ -52,14 +52,6 @@ export const useAutoChangeLayout = ({ const hasReasoning = !!lastReasoningMessageId; useEffect(() => { - console.log( - 'REASONING: useEffect', - isCompletedStream, - hasReasoning, - chatId, - lastMessageId, - isFinishedReasoning - ); //this will trigger when the chat is streaming and is has not completed yet (new chat) if ( !isCompletedStream && @@ -70,14 +62,11 @@ export const useAutoChangeLayout = ({ ) { previousLastMessageId.current = lastMessageId; - console.log('REASONING: FLIP TO REASONING!', lastMessageId); - onSetSelectedFile({ id: lastMessageId, type: 'reasoning', versionNumber: undefined }); } //this will when the chat is completed and it WAS streaming else if (isCompletedStream && previousIsCompletedStream === false) { - console.log('REASONING: SELECT STREAMING FILE'); const chatMessage = getChatMessageMemoized(lastMessageId); const lastFileId = findLast(chatMessage?.response_message_ids, (id) => { const responseMessage = chatMessage?.response_messages[id]; @@ -97,7 +86,6 @@ export const useAutoChangeLayout = ({ }); if (link) { - console.log('auto change layout', link); onChangePage(link); } return; @@ -105,7 +93,6 @@ export const useAutoChangeLayout = ({ } //this will trigger on a page refresh and the chat is completed else if (isCompletedStream && chatId) { - console.log('REASONING: SELECT INITIAL CHAT FILE - PAGE LOAD'); const isChatOnlyMode = !metricId && !dashboardId && !messageId; if (isChatOnlyMode) { return; @@ -122,7 +109,6 @@ export const useAutoChangeLayout = ({ }); if (href) { - console.log('auto change layout2', href); onChangePage(href); } } diff --git a/web/src/layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx b/web/src/layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx index 45adcccb8..f053ada23 100644 --- a/web/src/layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx +++ b/web/src/layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx @@ -17,7 +17,6 @@ export const useChatLayoutContext = ({ appSplitterRef }: UseLayoutConfigProps) = const chatParams = useGetChatParams(); const animateOpenSplitter = useMemoizedFn((side: 'left' | 'right' | 'both') => { - console.log('animateOpenSplitter', !!appSplitterRef.current, { side }); if (appSplitterRef.current) { const { animateWidth, sizes } = appSplitterRef.current; const leftSize = sizes[0] ?? 0; diff --git a/web/src/layouts/ChatLayout/ChatLayoutContext/useLayoutConfig/useLayoutConfig.ts b/web/src/layouts/ChatLayout/ChatLayoutContext/useLayoutConfig/useLayoutConfig.ts index bc16551c6..2e4b1dab6 100644 --- a/web/src/layouts/ChatLayout/ChatLayoutContext/useLayoutConfig/useLayoutConfig.ts +++ b/web/src/layouts/ChatLayout/ChatLayoutContext/useLayoutConfig/useLayoutConfig.ts @@ -88,11 +88,6 @@ export const useLayoutConfig = ({ fileId?: string | undefined; secondaryView?: FileViewSecondary; }) => { - console.log('onSetFileView', { - fileView, - fileId: fileIdProp, - secondaryView - }); const fileId = fileIdProp ?? selectedFileId; if (!fileId) { onCollapseFileClick(); @@ -146,11 +141,7 @@ export const useLayoutConfig = ({ const closeSecondaryView = useMemoizedFn(async () => { if (!selectedFileId || !selectedFileViewConfig || !selectedFileView) return; - console.log('closeSecondaryView', { - selectedFileId, - selectedFileViewConfig, - selectedFileView - }); + setFileViews((prev) => { return create(prev, (draft) => { if (!draft[selectedFileId]?.fileViewConfig?.[selectedFileView]) return; @@ -162,9 +153,7 @@ export const useLayoutConfig = ({ }); const onCollapseFileClick = useMemoizedFn(async () => { - console.log('onCollapseFileClick'); const isSecondaryViewOpen = !!selectedFileViewSecondary; - console.log('isSecondaryViewOpen', chatId, isSecondaryViewOpen); if (isSecondaryViewOpen) { closeSecondaryView(); @@ -190,15 +179,6 @@ export const useLayoutConfig = ({ //we need to use for when the user clicks the back or forward in the browser useUpdateEffect(() => { - console.log('useUpdateEffect', { - metricId, - secondaryView, - chatId, - dashboardId, - messageId, - currentRoute - }); - const newInitialFileViews = initializeFileViews({ secondaryView, metricId, @@ -218,17 +198,8 @@ export const useLayoutConfig = ({ currentRoute }); - console.log('isFileViewsChanged', isFileViewsChanged); - if (!isFileViewsChanged) return; - console.log('setting file view', { - newInitialFileViews, - fileId, - fileView, - secondaryView - }); - onSetFileView({ fileId, fileView, diff --git a/web/src/layouts/ChatLayout/ChatLayoutContext/useSelectedFile/useSelectedFile.ts b/web/src/layouts/ChatLayout/ChatLayoutContext/useSelectedFile/useSelectedFile.ts index 7f8b2d9db..e1665a42e 100644 --- a/web/src/layouts/ChatLayout/ChatLayoutContext/useSelectedFile/useSelectedFile.ts +++ b/web/src/layouts/ChatLayout/ChatLayoutContext/useSelectedFile/useSelectedFile.ts @@ -31,9 +31,7 @@ export const useSelectedFile = ({ * @param file */ const onSetSelectedFile = useMemoizedFn(async (file: SelectedFile | null) => { - console.log('onSetSelectedFile', file); const handleFileCollapse = shouldCloseSplitter(file, selectedFile, appSplitterRef); - console.log('handleFileCollapse', handleFileCollapse); if (file && chatParams.chatId) { const link = assetParamsToRoute({ @@ -43,8 +41,6 @@ export const useSelectedFile = ({ versionNumber: file?.versionNumber }); - console.log('link', link); - if (link) onChangePage(link); } diff --git a/web/src/lib/objects.ts b/web/src/lib/objects.ts index 56f6645e2..7f7fba495 100644 --- a/web/src/lib/objects.ts +++ b/web/src/lib/objects.ts @@ -47,24 +47,24 @@ export const compareObjectsByKeys = ( if (typeof val1 === 'object' && typeof val2 === 'object') { const itWasEqual = isEqual(val1, val2) || isEqual(JSON.stringify(val1), JSON.stringify(val2)); - if (!itWasEqual) { - console.log('--------------NESTED KEYS NOT EQUAL------------------'); - console.log('KEY', key); - console.log('ORIGINAL', val1); - console.log('NEW', val2); - } + // if (!itWasEqual) { + // console.log('--------------NESTED KEYS NOT EQUAL------------------'); + // console.log('KEY', key); + // console.log('ORIGINAL', val1); + // console.log('NEW', val2); + // } return itWasEqual; } const itWasEqual = isEqual(val1, val2); - if (!itWasEqual) { - console.log('--------------KEYS NOT EQUAL------------------'); - console.log('KEY', key); - console.log('ORIGINAL', val1); - console.log('NEW', val2); - } + // if (!itWasEqual) { + // console.log('--------------KEYS NOT EQUAL------------------'); + // console.log('KEY', key); + // console.log('ORIGINAL', val1); + // console.log('NEW', val2); + // } return itWasEqual; });