From 00801b9ad53452a5c595fc3c080f34c3e47f3838 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Tue, 8 Apr 2025 18:39:27 -0600 Subject: [PATCH] splitter updates --- .../versionHistory/VersionHistoryPanel.tsx | 6 ++- .../useListVersionHistories.tsx | 3 +- web/src/components/ui/buttons/Button.tsx | 2 +- .../ui/layouts/AppSplitter/AppSplitter.tsx | 7 ++++ .../FileContainerHeader.tsx | 7 ++-- .../FileContainerHeaderVersionHistory.tsx | 35 +++++++++++------ .../useCloseVersionHistory.ts | 38 +++++++++++++------ .../FileContainerHeader/config.ts | 20 +++++----- 8 files changed, 78 insertions(+), 40 deletions(-) diff --git a/web/src/components/features/versionHistory/VersionHistoryPanel.tsx b/web/src/components/features/versionHistory/VersionHistoryPanel.tsx index 5b6758dd9..e0feffb8f 100644 --- a/web/src/components/features/versionHistory/VersionHistoryPanel.tsx +++ b/web/src/components/features/versionHistory/VersionHistoryPanel.tsx @@ -47,9 +47,11 @@ export const VersionHistoryPanel = React.memo( ( - + onCloseVersionHistory({ assetId, type, chatId })} + /> ), - [] + [onCloseVersionHistory, assetId, type, chatId] )} scrollable headerBorderVariant="ghost"> diff --git a/web/src/components/features/versionHistory/useListVersionHistories.tsx b/web/src/components/features/versionHistory/useListVersionHistories.tsx index 971c38934..a48caf977 100644 --- a/web/src/components/features/versionHistory/useListVersionHistories.tsx +++ b/web/src/components/features/versionHistory/useListVersionHistories.tsx @@ -17,6 +17,7 @@ export const useListVersionHistories = ({ assetId: string; type: 'metric' | 'dashboard'; }) => { + const chatId = useChatLayoutContextSelector((x) => x.chatId); const onCloseVersionHistory = useCloseVersionHistory(); const onChangePage = useAppLayoutContextSelector((x) => x.onChangePage); const { @@ -78,7 +79,7 @@ export const useListVersionHistories = ({ } } - onCloseVersionHistory(); + onCloseVersionHistory({ assetId, type, chatId }); } ); diff --git a/web/src/components/ui/buttons/Button.tsx b/web/src/components/ui/buttons/Button.tsx index 50918f8ca..cea59b2e3 100644 --- a/web/src/components/ui/buttons/Button.tsx +++ b/web/src/components/ui/buttons/Button.tsx @@ -36,7 +36,7 @@ const sizeVariants = { }; export const buttonVariants = cva( - 'inline-flex items-center overflow-hidden text-base justify-center gap-1.5 shadow rounded transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed data-[loading=true]:cursor-progress', + 'inline-flex whitespace-nowrap items-center overflow-hidden text-base justify-center gap-1.5 shadow rounded transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed data-[loading=true]:cursor-progress', { variants: { variant: buttonTypeClasses, diff --git a/web/src/components/ui/layouts/AppSplitter/AppSplitter.tsx b/web/src/components/ui/layouts/AppSplitter/AppSplitter.tsx index 2d36017cf..53927c83b 100644 --- a/web/src/components/ui/layouts/AppSplitter/AppSplitter.tsx +++ b/web/src/components/ui/layouts/AppSplitter/AppSplitter.tsx @@ -21,6 +21,7 @@ import { import Cookies from 'js-cookie'; import { cn } from '@/lib/classMerge'; import './splitterStyles.css'; +import { timeout } from '@/lib'; // First, define the ref type export interface AppSplitterRef { @@ -172,6 +173,12 @@ export const AppSplitter = React.memo( const containerWidth = container.getBoundingClientRect().width; let targetPercentage: number; + // If the container width is 0, wait for 10ms and try again + if (containerWidth === 0) { + await timeout(25); + return animateWidth(width, side, duration); + } + // Convert target width to percentage if (targetUnit === 'px') { targetPercentage = convertPxToPercentage(targetValue, containerWidth); diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeader.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeader.tsx index b8124bb11..de7f993b3 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeader.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeader.tsx @@ -52,7 +52,7 @@ const FileContainerHeaderStandard: React.FC<{ return ( <> -
+
)}
- - +
+ +
); }; diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeaderVersionHistory/FileContainerHeaderVersionHistory.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeaderVersionHistory/FileContainerHeaderVersionHistory.tsx index 42fe7b05c..2086027dc 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeaderVersionHistory/FileContainerHeaderVersionHistory.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeaderVersionHistory/FileContainerHeaderVersionHistory.tsx @@ -5,13 +5,12 @@ import { ArrowLeft } from '@/components/ui/icons'; import React from 'react'; import { useCloseVersionHistory } from './useCloseVersionHistory'; import { VersionHistoryHeaderButtons } from './VersionHistoryHeaderButtons'; +import { useChatLayoutContextSelector } from '@/layouts/ChatLayout/ChatLayoutContext'; export const FileContainerHeaderVersionHistory = React.memo(() => { - const onCloseVersionHistory = useCloseVersionHistory(); - return (
- +
); @@ -19,13 +18,25 @@ export const FileContainerHeaderVersionHistory = React.memo(() => { FileContainerHeaderVersionHistory.displayName = 'FileContainerHeaderVersionHistory'; -const ExitVersionHistoryButton = React.memo( - ({ onCloseVersionHistory }: { onCloseVersionHistory: () => void }) => { - return ( - - ); - } -); +const ExitVersionHistoryButton = React.memo(({}: {}) => { + const onCloseVersionHistory = useCloseVersionHistory(); + const { selectedFile } = useChatLayoutContextSelector((x) => x); + const chatId = useChatLayoutContextSelector((x) => x.chatId); + + return ( + + ); +}); ExitVersionHistoryButton.displayName = 'ExitVersionHistoryButton'; diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeaderVersionHistory/useCloseVersionHistory.ts b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeaderVersionHistory/useCloseVersionHistory.ts index 7a14dad00..10b210ce7 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeaderVersionHistory/useCloseVersionHistory.ts +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeaderVersionHistory/useCloseVersionHistory.ts @@ -1,3 +1,4 @@ +import { useGetFileLink } from '@/context/Assets/useGetFileLink'; import { useAppLayoutContextSelector } from '@/context/BusterAppLayout'; import { useMemoizedFn } from '@/hooks'; import { useChatLayoutContextSelector } from '@/layouts/ChatLayout/ChatLayoutContext'; @@ -6,17 +7,32 @@ import { useTransition } from 'react'; export const useCloseVersionHistory = () => { const [isPending, startTransition] = useTransition(); - const chatId = useChatLayoutContextSelector((x) => x.chatId); - const onChangeQueryParams = useAppLayoutContextSelector((x) => x.onChangeQueryParams); + const { getFileLink } = useGetFileLink(); const closeSecondaryView = useChatLayoutContextSelector((x) => x.closeSecondaryView); + const onChangePage = useAppLayoutContextSelector((x) => x.onChangePage); + const onCloseVersionHistory = useMemoizedFn( + async ({ + assetId, + type, + chatId + }: { + assetId: string; + type: 'metric' | 'dashboard'; + chatId: string | undefined; + }) => { + closeSecondaryView(); + await timeout(chatId ? 250 : 0); + startTransition(() => { + const link = getFileLink({ + fileId: assetId, + fileType: type, + chatId + }); + alert(link); + if (link) onChangePage(link); + }); + } + ); - const removeVersionHistoryQueryParams = useMemoizedFn(async () => { - closeSecondaryView(); - await timeout(chatId ? 250 : 0); - startTransition(() => { - onChangeQueryParams({ metric_version_number: null, dashboard_version_number: null }); - }); - }); - - return removeVersionHistoryQueryParams; + return onCloseVersionHistory; }; diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/config.ts b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/config.ts index cdeb1d8a9..1c44d418f 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/config.ts +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/config.ts @@ -6,16 +6,6 @@ import { DashboardContainerHeaderSegment } from './DashboardContainerHeaderSegme import { MetricContainerHeaderSegment } from './MetricContainerHeaderSegment'; import { ReasoningContainerHeaderSegment } from './ReasoningContainerHeaderSegment'; -export const SelectedFileButtonsRecord: Record> = { - metric: MetricContainerHeaderButtons, - dashboard: DashboardContainerHeaderButtons, - reasoning: () => null - // value: ValueContainerHeaderButtons, - // term: TermContainerHeaderButtons, - // dataset: DatasetContainerHeaderButtons, - // collection: CollectionContainerHeaderButtons -}; - export const SelectedFileSegmentRecord: Record> = { metric: MetricContainerHeaderSegment, dashboard: DashboardContainerHeaderSegment, @@ -25,3 +15,13 @@ export const SelectedFileSegmentRecord: Record> = { + metric: MetricContainerHeaderButtons, + dashboard: DashboardContainerHeaderButtons, + reasoning: () => null + // value: ValueContainerHeaderButtons, + // term: TermContainerHeaderButtons, + // dataset: DatasetContainerHeaderButtons, + // collection: CollectionContainerHeaderButtons +};