diff --git a/apps/web/src/components/features/metrics/ThreeDotMenu.tsx b/apps/web/src/components/features/metrics/ThreeDotMenu.tsx index 4fd4a25d0..0f4db94c2 100644 --- a/apps/web/src/components/features/metrics/ThreeDotMenu.tsx +++ b/apps/web/src/components/features/metrics/ThreeDotMenu.tsx @@ -2,10 +2,11 @@ import React, { useMemo } from 'react'; import { useGetMetric } from '@/api/buster_rest/metrics'; import { useChatLayoutContextSelector } from '@/layouts/ChatLayout'; import { DropdownContent, DropdownItems, type DropdownItem } from '@/components/ui/dropdown'; -import { History, Star } from '@/components/ui/icons'; +import { History, Star, WandSparkle } from '@/components/ui/icons'; import { Star as StarFilled } from '@/components/ui/icons/NucleoIconFilled'; import { useListVersionDropdownItems } from '../versionHistory/useListVersionDropdownItems'; import { useFavoriteStar } from '../list'; +import { FollowUpWithAssetContent } from '../popups/FollowUpWithAsset'; export const useVersionHistorySelectMenu = ({ metricId }: { metricId: string }): DropdownItem => { const chatId = useChatLayoutContextSelector((x) => x.chatId); @@ -69,3 +70,23 @@ export const useFavoriteMetricSelectMenu = ({ metricId }: { metricId: string }) return item; }; + +export const useMetricDrilldownItem = ({ metricId }: { metricId: string }): DropdownItem => { + return useMemo( + () => ({ + value: 'drilldown', + label: 'Drill down & filter', + items: [ + + ], + icon: + }), + [metricId] + ); +}; diff --git a/apps/web/src/components/features/metrics/hooks/useMetricDrilldownItem.tsx b/apps/web/src/components/features/metrics/hooks/useMetricDrilldownItem.tsx deleted file mode 100644 index 8a302216e..000000000 --- a/apps/web/src/components/features/metrics/hooks/useMetricDrilldownItem.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { useMemo } from 'react'; -import type { DropdownItem } from '@/components/ui/dropdown'; -import { WandSparkle } from '@/components/ui/icons'; -import { FollowUpWithAssetContent } from '@/components/features/popups/FollowUpWithAsset'; - -export const useMetricDrilldownItem = ({ metricId }: { metricId: string }): DropdownItem => { - return useMemo( - () => ({ - value: 'drilldown', - label: 'Drill down & filter', - items: [ - - ], - icon: - }), - [metricId] - ); -}; diff --git a/apps/web/src/components/features/popups/FollowUpWithAsset.tsx b/apps/web/src/components/features/popups/FollowUpWithAsset.tsx index a070d26ff..4af44c7a6 100644 --- a/apps/web/src/components/features/popups/FollowUpWithAsset.tsx +++ b/apps/web/src/components/features/popups/FollowUpWithAsset.tsx @@ -3,12 +3,10 @@ import { Popover, type PopoverProps } from '../../ui/popover'; import { InputCard } from '../../ui/card/InputCard'; import type { ShareAssetType } from '@buster/server-shared/share'; import { useMemoizedFn } from '../../../hooks'; -import { useStartChatFromAsset } from '../../../api/buster_rest/chats'; +import { useStartChatFromAsset } from '@/api/buster_rest/chats'; import { AppTooltip } from '../../ui/tooltip'; import { useAppLayoutContextSelector } from '@/context/BusterAppLayout'; -import { assetParamsToRoute } from '../../../lib/assets'; - -type FollowUpMode = 'filter' | 'drilldown'; +import { assetParamsToRoute } from '@/lib/assets'; type FollowUpWithAssetProps = { assetType: Exclude; @@ -18,7 +16,6 @@ type FollowUpWithAssetProps = { align?: PopoverProps['align']; placeholder?: string; buttonText?: string; - mode?: FollowUpMode; }; export const FollowUpWithAssetContent: React.FC<{ @@ -26,26 +23,22 @@ export const FollowUpWithAssetContent: React.FC<{ assetId: string; placeholder?: string; buttonText?: string; - mode?: FollowUpMode; }> = React.memo( ({ assetType, assetId, placeholder = 'Describe the filter you want to apply', - buttonText = 'Apply custom filter', - mode + buttonText = 'Apply custom filter' }) => { const { mutateAsync: startChatFromAsset, isPending } = useStartChatFromAsset(); const onChangePage = useAppLayoutContextSelector((x) => x.onChangePage); const transformPrompt = useMemoizedFn((userPrompt: string): string => { - if (!mode) return userPrompt; - - if (mode === 'filter') { + if (assetType === 'dashboard') { return `Hey Buster. Please recreate this dashboard applying this filter to the metrics on the dashboard: ${userPrompt}`; } - if (mode === 'drilldown') { + if (assetType === 'metric') { return `Hey Buster. Can you filter or drill down into this metric based on the following request: ${userPrompt}`; } @@ -55,12 +48,10 @@ export const FollowUpWithAssetContent: React.FC<{ const onSubmit = useMemoizedFn(async (prompt: string) => { if (!prompt || !assetId || !assetType || isPending) return; - const transformedPrompt = transformPrompt(prompt); - const res = await startChatFromAsset({ asset_id: assetId, asset_type: assetType, - prompt: transformedPrompt + prompt: transformPrompt(prompt) }); const link = assetParamsToRoute({ assetId, @@ -85,16 +76,7 @@ export const FollowUpWithAssetContent: React.FC<{ FollowUpWithAssetContent.displayName = 'FollowUpWithAssetContent'; export const FollowUpWithAssetPopup: React.FC = React.memo( - ({ - assetType, - assetId, - side = 'bottom', - align = 'end', - children, - placeholder, - buttonText, - mode - }) => { + ({ assetType, assetId, side = 'bottom', align = 'end', children, placeholder, buttonText }) => { return ( = React.me assetId={assetId} placeholder={placeholder} buttonText={buttonText} - mode={mode} /> }> {children} diff --git a/apps/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricItemCardThreeDotMenu.tsx b/apps/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricItemCardThreeDotMenu.tsx index ededc1162..8df75ef2c 100644 --- a/apps/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricItemCardThreeDotMenu.tsx +++ b/apps/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricItemCardThreeDotMenu.tsx @@ -24,9 +24,9 @@ import { useStartChatFromAsset } from '@/api/buster_rest/chats'; import { useAppLayoutContextSelector } from '@/context/BusterAppLayout'; import { useFavoriteMetricSelectMenu, - useVersionHistorySelectMenu + useVersionHistorySelectMenu, + useMetricDrilldownItem } from '@/components/features/metrics/ThreeDotMenu'; -import { useMetricDrilldownItem } from '@/components/features/metrics/hooks/useMetricDrilldownItem'; export const MetricItemCardThreeDotMenu: React.FC<{ dashboardId: string; diff --git a/apps/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardContainerHeaderButtons.tsx b/apps/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardContainerHeaderButtons.tsx index 9a2dabe51..b1bbe7a85 100644 --- a/apps/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardContainerHeaderButtons.tsx +++ b/apps/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardContainerHeaderButtons.tsx @@ -84,7 +84,7 @@ AddContentToDashboardButton.displayName = 'AddContentToDashboardButton'; const FollowUpWithAssetButton = React.memo(({ dashboardId }: { dashboardId: string }) => { return ( - +