diff --git a/web/src/components/ui/dropdown/Dropdown.tsx b/web/src/components/ui/dropdown/Dropdown.tsx index 012cd6d43..6b3274117 100644 --- a/web/src/components/ui/dropdown/Dropdown.tsx +++ b/web/src/components/ui/dropdown/Dropdown.tsx @@ -85,7 +85,7 @@ export const DropdownBase = ({ closeOnSelect = true, onSelect, children, - align = 'center', + align = 'start', side = 'bottom', open, onOpenChange, diff --git a/web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx b/web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx index 14795487a..8f62ca53e 100644 --- a/web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx +++ b/web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useMemo } from 'react'; import type { MetricViewProps } from '../config'; import { useMemoizedFn, useUnmount } from '@/hooks'; import { IDataResult } from '@/api/asset_interfaces'; -import { useMetricLayout } from '../useMetricLayout'; +import { useMetricResultsLayout } from './useMetricResultsLayout'; import { useChatLayoutContextSelector } from '@/layouts/ChatLayout/ChatLayoutContext'; import { AppSplitterRef } from '@/components/ui/layouts'; import { AppVerticalCodeSplitter } from '@/components/features/layouts/AppVerticalCodeSplitter'; @@ -67,11 +67,10 @@ export const MetricViewResults: React.FC = React.memo(({ metric }); }); - const { defaultLayout, renderSecondary } = useMetricLayout({ + const { defaultLayout, renderSecondary } = useMetricResultsLayout({ selectedFileViewSecondary, appSplitterRef, - autoSaveId, - type: 'sql' + autoSaveId }); useEffect(() => { diff --git a/web/src/controllers/MetricController/useMetricLayout.ts b/web/src/controllers/MetricController/MetricViewResults/useMetricResultsLayout.ts similarity index 68% rename from web/src/controllers/MetricController/useMetricLayout.ts rename to web/src/controllers/MetricController/MetricViewResults/useMetricResultsLayout.ts index 90c34ab96..f129de3b4 100644 --- a/web/src/controllers/MetricController/useMetricLayout.ts +++ b/web/src/controllers/MetricController/MetricViewResults/useMetricResultsLayout.ts @@ -4,29 +4,23 @@ import { type AppSplitterRef } from '@/components/ui/layouts'; import Cookies from 'js-cookie'; import { createAutoSaveId } from '@/components/ui/layouts/AppSplitter/helper'; -const defaultChartOpenLayout = ['auto', '310px']; const defaultSqlOpenLayout = ['30%', 'auto']; - -const defaultChartLayout = ['auto', '0px']; const defaultSqlLayout = ['0px', 'auto']; -export const useMetricLayout = ({ +export const useMetricResultsLayout = ({ selectedFileViewSecondary, appSplitterRef, - autoSaveId, - type + autoSaveId }: { selectedFileViewSecondary: null | string; appSplitterRef: React.RefObject; autoSaveId: string; - type: 'chart' | 'sql'; }) => { const [renderSecondary, setRenderSecondary] = useState(!!selectedFileViewSecondary); const isOpenSecondary = !!selectedFileViewSecondary; - const isChart = type === 'chart'; - const defaultOpenLayout = isChart ? defaultChartOpenLayout : defaultSqlOpenLayout; - const defaultOriginalLayout = isChart ? defaultChartLayout : defaultSqlLayout; + const defaultOpenLayout = defaultSqlOpenLayout; + const defaultOriginalLayout = defaultSqlLayout; const secondaryLayoutDimensions: [string, string] = useMemo(() => { const cookieKey = createAutoSaveId(autoSaveId); @@ -54,20 +48,10 @@ export const useMetricLayout = ({ const animateOpenSplitter = useMemoizedFn((side: 'metric' | 'both') => { if (!appSplitterRef.current) return; - if (type === 'chart') { - if (side === 'metric') { - appSplitterRef.current.animateWidth('100%', 'left'); - } else if (side === 'both') { - appSplitterRef.current.animateWidth('310px', 'right'); - } - } - - if (type === 'sql') { - if (side === 'metric') { - appSplitterRef.current.animateWidth('0px', 'left'); - } else if (side === 'both') { - appSplitterRef.current.animateWidth('40%', 'left'); - } + if (side === 'metric') { + appSplitterRef.current.animateWidth('0px', 'left'); + } else if (side === 'both') { + appSplitterRef.current.animateWidth('40%', 'left'); } }); diff --git a/web/src/layouts/ChatLayout/ChatLayout/ChatLayout.tsx b/web/src/layouts/ChatLayout/ChatLayout/ChatLayout.tsx index b472ebcc7..23264cb08 100644 --- a/web/src/layouts/ChatLayout/ChatLayout/ChatLayout.tsx +++ b/web/src/layouts/ChatLayout/ChatLayout/ChatLayout.tsx @@ -26,8 +26,6 @@ export const ChatLayout: React.FC = ({ children }) => { return ['380px', 'auto']; }, [selectedLayout]); - console.log(selectedLayout); - return ( void; + onSetSelectedFile: (file: SelectedFile | null) => void; }) => { const [fileViews, setFileViews] = useState>({}); @@ -48,7 +53,7 @@ export const useLayoutConfig = ({ }, [selectedFileViewConfig]); const onSetFileView = useMemoizedFn( - ({ + async ({ fileView, fileId: fileIdProp, secondaryView, @@ -61,6 +66,14 @@ export const useLayoutConfig = ({ }) => { const fileId = fileIdProp ?? selectedFileId; if (!fileId) return; + + if (secondaryView) { + animateOpenSplitter('right'); + await timeout(250); //wait for splitter to close before opening secondary view + } else { + animateOpenSplitter('both'); + } + setFileViews((prev) => { return create(prev, (draft) => { if (!draft[fileId]) { @@ -105,6 +118,11 @@ export const useLayoutConfig = ({ }); }); + const onCollapseFileClick = useMemoizedFn(() => { + onSetSelectedFile(null); + closeSecondaryView(); + }); + const selectedLayout: ChatLayoutView = useMemo(() => { if (chatId) { if (selectedFileId) return 'both'; @@ -128,14 +146,26 @@ export const useLayoutConfig = ({ } }, [isVersionHistoryMode, selectedFileId]); - return { - selectedLayout, - selectedFileView, - selectedFileViewSecondary, - selectedFileViewRenderSecondary, - onSetFileView, - closeSecondaryView - }; + return useMemo( + () => ({ + selectedLayout, + selectedFileView, + selectedFileViewSecondary, + selectedFileViewRenderSecondary, + onSetFileView, + closeSecondaryView, + onCollapseFileClick + }), + [ + selectedLayout, + selectedFileView, + selectedFileViewSecondary, + selectedFileViewRenderSecondary, + onSetFileView, + closeSecondaryView, + onCollapseFileClick + ] + ); }; const DEFAULT_FILE_VIEW: Record = { diff --git a/web/src/layouts/ChatLayout/ChatLayoutContext/useSelectedFile/useSelectedFile.ts b/web/src/layouts/ChatLayout/ChatLayoutContext/useSelectedFile/useSelectedFile.ts index defc1ec1e..535fa5c70 100644 --- a/web/src/layouts/ChatLayout/ChatLayoutContext/useSelectedFile/useSelectedFile.ts +++ b/web/src/layouts/ChatLayout/ChatLayoutContext/useSelectedFile/useSelectedFile.ts @@ -44,16 +44,11 @@ export const useSelectedFile = ({ animateOpenSplitter('both'); }); - const onCollapseFileClick = useMemoizedFn((close?: boolean) => { - onSetSelectedFile(null); - }); - return useMemo( () => ({ isVersionHistoryMode, onSetSelectedFile, - selectedFile, - onCollapseFileClick + selectedFile }), [onSetSelectedFile, isVersionHistoryMode, selectedFile] ); diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainer.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainer.tsx index 6c95b259e..adcd26050 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainer.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainer.tsx @@ -78,7 +78,7 @@ export const FileContainer: React.FC = ({ children }) => { useLayoutEffect(() => { setTimeout(() => { animateOpenSplitter(isOpenSecondary ? 'open' : 'closed'); - }, 25); + }, 20); }, [isOpenSecondary]); return ( diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/CollapseFileButton.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/CollapseFileButton.tsx index adc52c388..747b3daa1 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/CollapseFileButton.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/CollapseFileButton.tsx @@ -2,18 +2,14 @@ import { DoubleChevronRight } from '@/components/ui/icons'; import { Button } from '@/components/ui/buttons'; import React, { useMemo } from 'react'; import { AnimatePresence, motion } from 'framer-motion'; -import { useMemoizedFn } from '@/hooks'; +import { AppTooltip } from '@/components/ui/tooltip'; export const CollapseFileButton: React.FC<{ showCollapseButton: boolean; - onCollapseFileClick: (value?: boolean) => void; + onCollapseFileClick: () => void; }> = React.memo(({ showCollapseButton, onCollapseFileClick }) => { const icon = ; - const onClick = useMemoizedFn(() => { - onCollapseFileClick(); - }); - const animation = useMemo(() => { return { initial: { opacity: 0 }, @@ -26,7 +22,9 @@ export const CollapseFileButton: React.FC<{ {showCollapseButton && ( - + + + )} diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/CreateChatButtont.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/CreateChatButtont.tsx index eec93a872..222763813 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/CreateChatButtont.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/CreateChatButtont.tsx @@ -7,10 +7,9 @@ import { useMemoizedFn } from '@/hooks'; import { AppTooltip } from '@/components/ui/tooltip'; export const CreateChatButton = React.memo(() => { - const onCollapseFileClick = useChatLayoutContextSelector((x) => x.onCollapseFileClick); - const onCollapseFileClickPreflight = useMemoizedFn(() => { - onCollapseFileClick(false); + // onCollapseFileClick(false); + alert('TODO'); }); useHotkeys('e', onCollapseFileClickPreflight, { preventDefault: true });