splitter updates

web/src/components/features/versionHistory/VersionHistoryPanel.tsx

@@ -47,9 +47,11 @@ export const VersionHistoryPanel = React.memo(
       <AppPageLayout
         header={useMemo(
           () => (
-            <PanelHeader onCloseVersionHistory={onCloseVersionHistory} />
+            <PanelHeader
+              onCloseVersionHistory={() => onCloseVersionHistory({ assetId, type, chatId })}
+            />
           ),
-          []
+          [onCloseVersionHistory, assetId, type, chatId]
         )}
         scrollable
         headerBorderVariant="ghost">

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 });
     }
   );
 

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,

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);

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

@@ -52,7 +52,7 @@ const FileContainerHeaderStandard: React.FC<{
 
   return (
     <>
-      <div className="flex items-center gap-1.5">
+      <div className="flex min-w-0 shrink items-center gap-1.5 overflow-hidden">
         <CollapseFileButton
           showCollapseButton={showCollapseButton}
           onCollapseFileClick={onCollapseFileClick}
@@ -65,8 +65,9 @@ const FileContainerHeaderStandard: React.FC<{
           />
         )}
       </div>
-
+      <div className="flex-1">
         <SelectedFileButtons selectedFileView={selectedFileView} selectedFileId={selectedFileId} />
+      </div>
     </>
   );
 };

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 (
     <div className="flex w-full items-center justify-between gap-x-1.5">
-      <ExitVersionHistoryButton onCloseVersionHistory={onCloseVersionHistory} />
+      <ExitVersionHistoryButton />
       <VersionHistoryHeaderButtons />
     </div>
   );
@@ -19,13 +18,25 @@ export const FileContainerHeaderVersionHistory = React.memo(() => {
 
 FileContainerHeaderVersionHistory.displayName = 'FileContainerHeaderVersionHistory';
 
-const ExitVersionHistoryButton = React.memo(
+const ExitVersionHistoryButton = React.memo(({}: {}) => {
-  ({ onCloseVersionHistory }: { onCloseVersionHistory: () => void }) => {
+  const onCloseVersionHistory = useCloseVersionHistory();
+  const { selectedFile } = useChatLayoutContextSelector((x) => x);
+  const chatId = useChatLayoutContextSelector((x) => x.chatId);
+
   return (
-      <Button variant="link" prefix={<ArrowLeft />} onClick={onCloseVersionHistory}>
+    <Button
+      variant="link"
+      prefix={<ArrowLeft />}
+      onClick={() =>
+        selectedFile?.type &&
+        onCloseVersionHistory({
+          assetId: selectedFile?.id,
+          type: selectedFile?.type as 'metric' | 'dashboard',
+          chatId
+        })
+      }>
       Exit version history
     </Button>
   );
-  }
+});
-);
 ExitVersionHistoryButton.displayName = 'ExitVersionHistoryButton';

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 { getFileLink } = useGetFileLink();
-  const onChangeQueryParams = useAppLayoutContextSelector((x) => x.onChangeQueryParams);
   const closeSecondaryView = useChatLayoutContextSelector((x) => x.closeSecondaryView);
-
+  const onChangePage = useAppLayoutContextSelector((x) => x.onChangePage);
-  const removeVersionHistoryQueryParams = useMemoizedFn(async () => {
+  const onCloseVersionHistory = useMemoizedFn(
+    async ({
+      assetId,
+      type,
+      chatId
+    }: {
+      assetId: string;
+      type: 'metric' | 'dashboard';
+      chatId: string | undefined;
+    }) => {
       closeSecondaryView();
       await timeout(chatId ? 250 : 0);
       startTransition(() => {
-      onChangeQueryParams({ metric_version_number: null, dashboard_version_number: null });
+        const link = getFileLink({
+          fileId: assetId,
+          fileType: type,
+          chatId
         });
+        alert(link);
+        if (link) onChangePage(link);
       });
+    }
+  );
 
-  return removeVersionHistoryQueryParams;
+  return onCloseVersionHistory;
 };

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<FileType, React.FC<FileContainerButtonsProps>> = {
-  metric: MetricContainerHeaderButtons,
-  dashboard: DashboardContainerHeaderButtons,
-  reasoning: () => null
-  // value: ValueContainerHeaderButtons,
-  // term: TermContainerHeaderButtons,
-  // dataset: DatasetContainerHeaderButtons,
-  // collection: CollectionContainerHeaderButtons
-};
-
 export const SelectedFileSegmentRecord: Record<FileType, React.FC<FileContainerSegmentProps>> = {
   metric: MetricContainerHeaderSegment,
   dashboard: DashboardContainerHeaderSegment,
@@ -25,3 +15,13 @@ export const SelectedFileSegmentRecord: Record<FileType, React.FC<FileContainerS
   // dataset: DatasetContainerHeaderSegment,
   // collection: CollectionContainerHeaderSegment
 };
+
+export const SelectedFileButtonsRecord: Record<FileType, React.FC<FileContainerButtonsProps>> = {
+  metric: MetricContainerHeaderButtons,
+  dashboard: DashboardContainerHeaderButtons,
+  reasoning: () => null
+  // value: ValueContainerHeaderButtons,
+  // term: TermContainerHeaderButtons,
+  // dataset: DatasetContainerHeaderButtons,
+  // collection: CollectionContainerHeaderButtons
+};