Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

splitter updates

This commit is contained in:
Nate Kelley 2025-04-08 18:39:27 -06:00
parent 2c2213042a
commit 00801b9ad5
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
8 changed files with 78 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/features/versionHistory/VersionHistoryPanel.tsx
View File

@ -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">

3
web/src/components/features/versionHistory/useListVersionHistories.tsx
View File

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

2
web/src/components/ui/buttons/Button.tsx
View File

@ -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,

7
web/src/components/ui/layouts/AppSplitter/AppSplitter.tsx
View File

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

5
web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeader.tsx
View File

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

27
web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeaderVersionHistory/FileContainerHeaderVersionHistory.tsx
View File

@ -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(
({ onCloseVersionHistory }: { onCloseVersionHistory: () => void }) => {
const ExitVersionHistoryButton = React.memo(({}: {}) => {
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';

28
web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeaderVersionHistory/useCloseVersionHistory.ts
View File

@ -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 removeVersionHistoryQueryParams = useMemoizedFn(async () => {
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(() => {
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;
};

20
web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/config.ts
View File

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