From f7b8d87c01102c824efaf1ba21a57da5e977a7b7 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Tue, 11 Mar 2025 17:01:39 -0600 Subject: [PATCH] update some grid layout stuff --- web/package-lock.json | 2 +- web/package.json | 2 +- .../api/buster_rest/metrics/queryRequests.ts | 20 +++- web/src/api/buster_rest/metrics/requests.ts | 14 +-- web/src/api/query_keys/chat.ts | 2 +- web/src/api/query_keys/metric.ts | 19 +-- .../chats/[chatId]/metric/[metricId]/page.tsx | 3 - .../(chat_experience)/chats/[chatId]/page.tsx | 11 +- .../new-user/_NewUserController.tsx | 3 +- .../SidebarUserFooter/SidebarUserFooter.tsx | 1 + .../table/AppDataGrid/AppDataGrid.stories.tsx | 112 ++++++++++++++++++ .../ui/table/AppDataGrid/AppDataGrid.tsx | 20 +++- web/src/controllers/AppNoPageAccess.tsx | 2 +- web/src/controllers/AppPasswordAccess.tsx | 2 +- .../DashboardMetricItem/MetricTitle.tsx | 8 +- .../MetricViewChart/MetricViewChartHeader.tsx | 2 +- .../ChatLayoutContext/ChatLayoutContext.tsx | 8 +- .../CollapseFileButton.tsx | 19 +-- .../FileContainerHeader.tsx | 8 +- .../MetricContainerHeaderButtons.tsx | 5 +- .../FileContainerHeader/SelectableButton.tsx | 1 - .../ChatLayout/hooks/useLayoutCollapse.tsx | 47 ++------ 22 files changed, 191 insertions(+), 120 deletions(-) create mode 100644 web/src/components/ui/table/AppDataGrid/AppDataGrid.stories.tsx diff --git a/web/package-lock.json b/web/package-lock.json index 4cd7a8300..9489165a8 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -62,7 +62,7 @@ "prettier-plugin-tailwindcss": "^0.6.11", "react": "^18", "react-color": "^2.19.3", - "react-data-grid": "^7.0.0-beta.48", + "react-data-grid": "^7.0.0-beta.47", "react-day-picker": "^9.6.1", "react-dom": "^18", "react-hotkeys-hook": "^4.6.1", diff --git a/web/package.json b/web/package.json index d20a6adb8..f585c67e7 100644 --- a/web/package.json +++ b/web/package.json @@ -70,7 +70,7 @@ "prettier-plugin-tailwindcss": "^0.6.11", "react": "^18", "react-color": "^2.19.3", - "react-data-grid": "^7.0.0-beta.48", + "react-data-grid": "^7.0.0-beta.47", "react-day-picker": "^9.6.1", "react-dom": "^18", "react-hotkeys-hook": "^4.6.1", diff --git a/web/src/api/buster_rest/metrics/queryRequests.ts b/web/src/api/buster_rest/metrics/queryRequests.ts index e033c8e5d..7a0ade099 100644 --- a/web/src/api/buster_rest/metrics/queryRequests.ts +++ b/web/src/api/buster_rest/metrics/queryRequests.ts @@ -14,24 +14,34 @@ import type { GetMetricParams, ListMetricsParams } from './interfaces'; import { upgradeMetricToIMetric } from '@/lib/chat'; import { queryKeys } from '@/api/query_keys'; import { useMemo } from 'react'; +import { useBusterAssetsContextSelector } from '@/context/Assets/BusterAssetsProvider'; export const useGetMetric = (params: GetMetricParams) => { + const queryClient = useQueryClient(); + const setAssetPasswordError = useBusterAssetsContextSelector( + (state) => state.setAssetPasswordError + ); + const queryFn = useMemoizedFn(async () => { const result = await getMetric(params); - return upgradeMetricToIMetric(result, null); + const oldMetric = queryClient.getQueryData(queryKeys.metricsGetMetric(params.id).queryKey); + return upgradeMetricToIMetric(result, oldMetric || null); }); return useQuery({ - ...queryKeys.useMetricsGetMetric(params.id), - queryFn, - enabled: false //this is handle via a socket query? maybe it should not be? + ...queryKeys.metricsGetMetric(params.id), + throwOnError: (error, query) => { + setAssetPasswordError(params.id, error.message || 'An error occurred'); + return false; + }, + queryFn }); }; export const prefetchGetMetric = async (params: GetMetricParams, queryClientProp?: QueryClient) => { const queryClient = queryClientProp || new QueryClient(); await queryClient.prefetchQuery({ - ...queryKeys.useMetricsGetMetric(params.id), + ...queryKeys.metricsGetMetric(params.id), queryFn: async () => { const result = await getMetric_server(params); return upgradeMetricToIMetric(result, null); diff --git a/web/src/api/buster_rest/metrics/requests.ts b/web/src/api/buster_rest/metrics/requests.ts index f06688630..fdec7e129 100644 --- a/web/src/api/buster_rest/metrics/requests.ts +++ b/web/src/api/buster_rest/metrics/requests.ts @@ -9,18 +9,22 @@ import type { export const getMetric = async ({ id, password }: GetMetricParams) => { return mainApi - .get(`/metrics/get`, { + .get(`/metrics/${id}`, { params: { id, ...(password && { password }) } }) .then((res) => res.data); }; export const getMetric_server = async ({ id, password }: GetMetricParams) => { - return await serverFetch(`/metrics/get`, { - params: { id, ...(password && { password }) } + return await serverFetch(`/metrics/${id}`, { + params: { ...(password && { password }) } }); }; +export const getMetricData = async ({ id }: { id: string }) => { + return mainApi.get(`/metrics/${id}/data`).then((res) => res.data); +}; + export const listMetrics = async (params: ListMetricsParams) => { return mainApi.get('/metrics/list', { params }).then((res) => res.data); }; @@ -29,10 +33,6 @@ export const listMetrics_server = async (params: ListMetricsParams) => { return await serverFetch('/metrics/list', { params }); }; -export const getMetricData = async ({ id }: { id: string }) => { - return mainApi.get(`/metrics/${id}/data`).then((res) => res.data); -}; - export const updateMetric = async (params: UpdateMetricParams) => { return mainApi .put(`/metrics/update/${params.id}`, { params }) diff --git a/web/src/api/query_keys/chat.ts b/web/src/api/query_keys/chat.ts index 104457e8b..8a44950d7 100644 --- a/web/src/api/query_keys/chat.ts +++ b/web/src/api/query_keys/chat.ts @@ -36,7 +36,7 @@ const chatsBlackBoxMessages = (messageId: string) => queryOptions({ queryKey: ['chats', 'messages', messageId, 'black-box'] as const, staleTime: Infinity, - enabled: false, + enabled: false, //this is local queryFn: () => Promise.resolve(null) }); diff --git a/web/src/api/query_keys/metric.ts b/web/src/api/query_keys/metric.ts index b9eed35f8..be6922422 100644 --- a/web/src/api/query_keys/metric.ts +++ b/web/src/api/query_keys/metric.ts @@ -2,32 +2,16 @@ import { queryOptions } from '@tanstack/react-query'; import type { - BusterMetricData, BusterMetricListItem, IBusterMetric, IBusterMetricData } from '@/api/asset_interfaces/metric'; -import { useBusterAssetsContextSelector } from '@/context/Assets/BusterAssetsProvider'; import { ListMetricsParams } from '../buster_rest/metrics'; export const metricsGetMetric = (metricId: string) => { return queryOptions({ queryKey: ['metrics', 'get', metricId] as const, - staleTime: 30 * 60 * 1000, - enabled: false - }); -}; - -export const useMetricsGetMetric = (metricId: string) => { - const setAssetPasswordError = useBusterAssetsContextSelector( - (state) => state.setAssetPasswordError - ); - return queryOptions({ - ...metricsGetMetric(metricId), - throwOnError: (error, query) => { - setAssetPasswordError(metricId, error.message || 'An error occurred'); - return false; - } + staleTime: 30 * 60 * 1000 }); }; @@ -45,7 +29,6 @@ export const metricsGetData = (id: string) => export const metricsQueryKeys = { metricsGetMetric, - useMetricsGetMetric, metricsGetList, metricsGetData }; diff --git a/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/metric/[metricId]/page.tsx b/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/metric/[metricId]/page.tsx index cab9c05c5..7585a8c57 100644 --- a/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/metric/[metricId]/page.tsx +++ b/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/metric/[metricId]/page.tsx @@ -8,9 +8,6 @@ export default async function Page(props: { const { chatId, metricId } = params; - console.log('chatId', chatId); - console.log('metricId', metricId); - return ( diff --git a/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/page.tsx b/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/page.tsx index ad58e85ac..7fde6bd9c 100644 --- a/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/page.tsx +++ b/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/page.tsx @@ -13,10 +13,11 @@ export default function Page(params: { params: { chatId: string } }) { } return ( - +
+ +
); } diff --git a/web/src/app/app/(primary_layout)/new-user/_NewUserController.tsx b/web/src/app/app/(primary_layout)/new-user/_NewUserController.tsx index a236c8b00..9cb2be61c 100644 --- a/web/src/app/app/(primary_layout)/new-user/_NewUserController.tsx +++ b/web/src/app/app/(primary_layout)/new-user/_NewUserController.tsx @@ -38,7 +38,7 @@ export const NewUserController = () => { }); onChangePage({ - route: BusterRoutes.APP_METRIC + route: BusterRoutes.APP_HOME }); } catch (error) { // @@ -81,7 +81,6 @@ export const NewUserController = () => { placeholder="What is your full name" className="w-full" value={name || ''} - defaultValue={user?.name || ''} name="name" onChange={(e) => setName(e.target.value)} /> diff --git a/web/src/components/features/sidebars/SidebarUserFooter/SidebarUserFooter.tsx b/web/src/components/features/sidebars/SidebarUserFooter/SidebarUserFooter.tsx index 3a3b422d2..8f58af840 100644 --- a/web/src/components/features/sidebars/SidebarUserFooter/SidebarUserFooter.tsx +++ b/web/src/components/features/sidebars/SidebarUserFooter/SidebarUserFooter.tsx @@ -38,6 +38,7 @@ export const SidebarUserFooterComponent: React.FC<{ email: string; signOut: () => Promise<{ error: string }>; }> = React.memo(({ name, avatarUrl, email, signOut }) => { + if (!name || !email) return null; return (
diff --git a/web/src/components/ui/table/AppDataGrid/AppDataGrid.stories.tsx b/web/src/components/ui/table/AppDataGrid/AppDataGrid.stories.tsx new file mode 100644 index 000000000..5a3568664 --- /dev/null +++ b/web/src/components/ui/table/AppDataGrid/AppDataGrid.stories.tsx @@ -0,0 +1,112 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { AppDataGrid } from './AppDataGrid'; + +const meta: Meta = { + title: 'UI/table/AppDataGrid', + component: AppDataGrid, + parameters: { + layout: 'centered' + }, + tags: ['autodocs'] +}; + +export default meta; +type Story = StoryObj; + +const sampleData = [ + { id: 1, name: 'John Doe', age: 30, email: 'john@example.com', joinDate: new Date('2023-01-15') }, + { + id: 2, + name: 'Jane Smith', + age: 25, + email: 'jane@example.com', + joinDate: new Date('2023-02-20') + }, + { + id: 3, + name: 'Bob Johnson', + age: 35, + email: 'bob@example.com', + joinDate: new Date('2023-03-10') + }, + { + id: 4, + name: 'Alice Brown', + age: 28, + email: 'alice@example.com', + joinDate: new Date('2023-04-05') + } +]; + +export const Default: Story = { + args: { + rows: sampleData, + animate: true, + resizable: true, + draggable: true, + sortable: true + } +}; + +export const NonResizable: Story = { + args: { + rows: sampleData, + resizable: false, + draggable: true, + sortable: true + } +}; + +export const NonDraggable: Story = { + args: { + rows: sampleData, + resizable: true, + draggable: false, + sortable: true + } +}; + +export const NonSortable: Story = { + args: { + rows: sampleData, + resizable: true, + draggable: true, + sortable: false + } +}; + +export const CustomColumnOrder: Story = { + args: { + rows: sampleData, + columnOrder: ['name', 'email', 'age', 'id', 'joinDate'], + resizable: true, + draggable: true, + sortable: true + } +}; + +export const CustomFormatting: Story = { + args: { + rows: sampleData, + headerFormat: (value, columnName) => columnName.toUpperCase(), + cellFormat: (value, columnName) => { + if (columnName === 'joinDate' && value instanceof Date) { + return value.toLocaleDateString(); + } + return String(value); + }, + resizable: true, + draggable: true, + sortable: true + } +}; + +export const WithInitialWidth: Story = { + args: { + rows: sampleData, + initialWidth: 800, + resizable: true, + draggable: true, + sortable: true + } +}; diff --git a/web/src/components/ui/table/AppDataGrid/AppDataGrid.tsx b/web/src/components/ui/table/AppDataGrid/AppDataGrid.tsx index f717492be..8437298d0 100644 --- a/web/src/components/ui/table/AppDataGrid/AppDataGrid.tsx +++ b/web/src/components/ui/table/AppDataGrid/AppDataGrid.tsx @@ -35,7 +35,6 @@ import { defaultHeaderFormat, MIN_WIDTH } from './helpers'; -import styles from './AppDataGrid.module.css'; type Row = Record; @@ -339,6 +338,19 @@ export const AppDataGrid: React.FC = React.memo( }); }); + const columnsX = [ + { key: 'id', name: 'ID' }, + { key: 'title', name: 'Title' } + ]; + + const rowsX = [ + { id: 0, title: 'Example' }, + { id: 1, title: 'Demo' } + ]; + + console.log('columnsX', columnsX); + console.log('rowsX', rowsX); + return ( @@ -348,7 +360,9 @@ export const AppDataGrid: React.FC = React.memo( style={{ transition: animate ? 'opacity 0.25s' : undefined }}> - + + {/* = React.memo( onColumnsReorder={onColumnsReorder} defaultColumnOptions={DEFAULT_COLUMN_WIDTH} direction={'ltr'} - /> + /> */}
diff --git a/web/src/controllers/AppNoPageAccess.tsx b/web/src/controllers/AppNoPageAccess.tsx index a36d7be44..b2d5e2ebf 100644 --- a/web/src/controllers/AppNoPageAccess.tsx +++ b/web/src/controllers/AppNoPageAccess.tsx @@ -20,7 +20,7 @@ export const AppNoPageAccess: React.FC<{
-
+
{`It looks like you don’t have access to this file...`} diff --git a/web/src/controllers/AppPasswordAccess.tsx b/web/src/controllers/AppPasswordAccess.tsx index f07b6107f..42c6b38a4 100644 --- a/web/src/controllers/AppPasswordAccess.tsx +++ b/web/src/controllers/AppPasswordAccess.tsx @@ -63,7 +63,7 @@ const AppPasswordInputComponent: React.FC<{ style={{ marginTop: '25vh' }}> -
+
diff --git a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricTitle.tsx b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricTitle.tsx index d714b28d3..cc425b00c 100644 --- a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricTitle.tsx +++ b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricTitle.tsx @@ -53,7 +53,7 @@ export const MetricTitle: React.FC<{ {`${title}`} @@ -96,11 +96,7 @@ const ThreeDotPlaceholder: React.FC<{ }> = React.memo(({ className }) => { return (
- {/*
); }); diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricViewChartHeader.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricViewChartHeader.tsx index e29ff323e..743d80d82 100644 --- a/web/src/controllers/MetricController/MetricViewChart/MetricViewChartHeader.tsx +++ b/web/src/controllers/MetricController/MetricViewChart/MetricViewChartHeader.tsx @@ -19,7 +19,7 @@ export const MetricViewChartHeader: React.FC<{ {title} -
+
{!!timeFrame && ( <> diff --git a/web/src/layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx b/web/src/layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx index f1524823a..0e71830a0 100644 --- a/web/src/layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx +++ b/web/src/layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx @@ -1,7 +1,7 @@ 'use client'; import { createContext, useContextSelector } from 'use-context-selector'; -import React, { PropsWithChildren, useTransition } from 'react'; +import React, { PropsWithChildren } from 'react'; import { useMemoizedFn } from '@/hooks'; import type { AppSplitterRef } from '@/components/ui/layouts'; import { DEFAULT_CHAT_OPTION_SIDEBAR_SIZE } from './config'; @@ -38,9 +38,7 @@ export const useChatLayout = ({ appSplitterRef }: UseChatSplitterProps) => { renderViewLayoutKey } = useSelectedFileAndLayout({ animateOpenSplitter }); - const { collapseDirection, isCollapseOpen, onCollapseFileClick } = useLayoutCollapse({ - selectedFile, - selectedLayout, + const { onCollapseFileClick } = useLayoutCollapse({ animateOpenSplitter }); @@ -56,8 +54,6 @@ export const useChatLayout = ({ appSplitterRef }: UseChatSplitterProps) => { renderViewLayoutKey, selectedFileType: selectedFile?.type, selectedFile, - collapseDirection, - isCollapseOpen, onCollapseFileClick, onSetSelectedFile, animateOpenSplitter diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/CollapseFileButton.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/CollapseFileButton.tsx index 46b243ae9..adc52c388 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/CollapseFileButton.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/CollapseFileButton.tsx @@ -1,4 +1,4 @@ -import { DoubleChevronRight, DoubleChevronLeft } from '@/components/ui/icons'; +import { DoubleChevronRight } from '@/components/ui/icons'; import { Button } from '@/components/ui/buttons'; import React, { useMemo } from 'react'; import { AnimatePresence, motion } from 'framer-motion'; @@ -6,30 +6,21 @@ import { useMemoizedFn } from '@/hooks'; export const CollapseFileButton: React.FC<{ showCollapseButton: boolean; - isOpen: boolean; - collapseDirection: 'left' | 'right'; onCollapseFileClick: (value?: boolean) => void; -}> = React.memo(({ showCollapseButton, isOpen, collapseDirection, onCollapseFileClick }) => { - const icon = useMemo(() => { - if (collapseDirection === 'left') { - return isOpen ? : ; - } - return isOpen ? : ; - }, [isOpen, collapseDirection]); +}> = React.memo(({ showCollapseButton, onCollapseFileClick }) => { + const icon = ; const onClick = useMemoizedFn(() => { onCollapseFileClick(); }); const animation = useMemo(() => { - const baseAnimation = { + return { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }; - - return baseAnimation; - }, [collapseDirection, isOpen]); + }, []); return ( diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeader.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeader.tsx index 7409eda09..d356714d0 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeader.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeader.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { CollapseFileButton } from './CollapseFileButton'; -import type { FileType } from '@/api/asset_interfaces'; +import type { FileType } from '@/api/asset_interfaces/chat'; import { FileContainerSegmentProps, FileContainerButtonsProps } from './interfaces'; import { DashboardContainerHeaderButtons } from './DashboardContainerHeaderButtons'; import { DashboardContainerHeaderSegment } from './DashboardContainerHeaderSegment'; @@ -15,8 +15,6 @@ export const FileContainerHeader: React.FC = React.memo(() => { const selectedFileType = useChatLayoutContextSelector((x) => x.selectedFileType); const selectedFileView = useChatLayoutContextSelector((x) => x.selectedFileView); const onCollapseFileClick = useChatLayoutContextSelector((state) => state.onCollapseFileClick); - const collapseDirection = useChatLayoutContextSelector((state) => state.collapseDirection); - const isCollapseOpen = useChatLayoutContextSelector((state) => state.isCollapseOpen); const renderViewLayoutKey = useChatLayoutContextSelector((state) => state.renderViewLayoutKey); const showCollapseButton = renderViewLayoutKey !== 'file'; @@ -33,7 +31,7 @@ export const FileContainerHeader: React.FC = React.memo(() => { () => selectedFileType && SelectedFileButtonsRecord[selectedFileType] ? SelectedFileButtonsRecord[selectedFileType] - : () => <>no buttons, + : () => null, [selectedFileType] ); @@ -41,9 +39,7 @@ export const FileContainerHeader: React.FC = React.memo(() => { <>
{selectedFileView && } diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons.tsx index bc061684e..f55593617 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons.tsx @@ -11,6 +11,7 @@ import { useMetricIndividual } from '@/context/Metrics'; import { SaveMetricToCollectionButton } from '../../../../components/features/buttons/SaveMetricToCollectionButton'; import { SaveMetricToDashboardButton } from '../../../../components/features/buttons/SaveMetricToDashboardButton'; import { ShareMetricButton } from '../../../../components/features/buttons/ShareMetricButton'; +import { Code3, SquareChartPen } from '@/components/ui/icons'; export const MetricContainerHeaderButtons: React.FC = React.memo(() => { const renderViewLayoutKey = useChatLayoutContextSelector((x) => x.renderViewLayoutKey); @@ -52,7 +53,7 @@ const EditChartButton = React.memo(() => { return ( } onClick={onClickButton} selected={isSelectedView} /> @@ -76,7 +77,7 @@ const EditSQLButton = React.memo(() => { return ( } onClick={onClickButton} selected={isSelectedView} /> diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/SelectableButton.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/SelectableButton.tsx index 9bb5b8787..f5acb6797 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/SelectableButton.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/SelectableButton.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { Button } from '@/components/ui/buttons'; import { AppTooltip } from '@/components/ui/tooltip'; -import {} from '@/components/ui/icons'; export const SelectableButton = React.memo<{ tooltipText: string; diff --git a/web/src/layouts/ChatLayout/hooks/useLayoutCollapse.tsx b/web/src/layouts/ChatLayout/hooks/useLayoutCollapse.tsx index 476dabec8..5daddfb4e 100644 --- a/web/src/layouts/ChatLayout/hooks/useLayoutCollapse.tsx +++ b/web/src/layouts/ChatLayout/hooks/useLayoutCollapse.tsx @@ -6,50 +6,25 @@ import { SelectedFileParams } from './useSelectedFileAndLayout'; import { ChatLayoutView } from '../interfaces'; export const useLayoutCollapse = ({ - selectedFile, - animateOpenSplitter, - selectedLayout + animateOpenSplitter }: { - selectedFile: SelectedFileParams['selectedFile']; - selectedLayout: ChatLayoutView; animateOpenSplitter: (side: 'left' | 'right' | 'both') => void; }) => { - const isReasoningFile = selectedFile?.type === 'reasoning'; - - const [isCollapseOpen, setIsCollapseOpen] = useState(isReasoningFile ? true : false); - - const collapseDirection: 'left' | 'right' = useMemo(() => { - if (selectedFile?.type === 'reasoning') return 'right'; - - return selectedLayout === 'file' ? 'left' : 'right'; - }, [selectedLayout, selectedFile?.type]); - const onCollapseFileClick = useMemoizedFn((close?: boolean) => { - const isCloseAction = close ?? isCollapseOpen; - const isFileLayout = selectedLayout === 'file'; + // if (selectedFile && selectedFile.type === 'reasoning') { + // animateOpenSplitter(!isCloseAction ? 'both' : 'left'); + // } else if (isFileLayout) { + // // For file layout, toggle between 'both' and 'right' + // animateOpenSplitter(!isCloseAction && selectedFile ? 'both' : 'right'); + // } else { + // // For other layouts, toggle between 'right' and 'both' + // animateOpenSplitter(isCloseAction ? 'left' : 'both'); + // } - setIsCollapseOpen(!isCloseAction); - - if (selectedFile && selectedFile.type === 'reasoning') { - animateOpenSplitter(!isCloseAction ? 'both' : 'left'); - } else if (isFileLayout) { - // For file layout, toggle between 'both' and 'right' - animateOpenSplitter(!isCloseAction && selectedFile ? 'both' : 'right'); - } else { - // For other layouts, toggle between 'right' and 'both' - animateOpenSplitter(isCloseAction ? 'left' : 'both'); - } + animateOpenSplitter('left'); }); - useEffect(() => { - if (isReasoningFile && !isCollapseOpen) { - setIsCollapseOpen(true); - } - }, [isReasoningFile]); - return { - collapseDirection, - isCollapseOpen, onCollapseFileClick }; };