diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/BigNumChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/BigNumChart.tsx index 05fb1b8c7..1f97c0892 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/BigNumChart.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/BigNumChart.tsx @@ -45,8 +45,8 @@ function BigNum({ color, series, value, label, compData, valueLabel }: { } const changePercent = React.useMemo(() => { - if (!compData || compData === 0) return '0%'; - return `${(((value - compData) / compData) * 100).toFixed(2)}%`; + if (!compData || compData === 0) return '0'; + return `${(((value - compData) / compData) * 100).toFixed(2)}`; }, [value, compData]) const change = React.useMemo(() => { if (!compData) return 0; diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx index 2928139ee..853d6ec1b 100644 --- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx +++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx @@ -185,7 +185,16 @@ function WidgetChart(props: Props) { useEffect(() => { if (!inView || !props.isPreview) return; loadComparisonData(); - }, [dashboardStore.comparisonPeriods[_metric.metricId], _metric.metricId, inView, props.isPreview]); + }, [ + dashboardStore.comparisonPeriods[_metric.metricId], + _metric.metricId, + inView, + props.isPreview, + drillDownPeriod, + period, + depsString, + dashboardStore.selectedDensity, + ]); useEffect(() => { setCompData(null); _metric.updateKey('page', 1); diff --git a/frontend/app/components/shared/SaveFilterButton/SaveFilterButton.tsx b/frontend/app/components/shared/SaveFilterButton/SaveFilterButton.tsx index dc6df25e1..ca02bc26d 100644 --- a/frontend/app/components/shared/SaveFilterButton/SaveFilterButton.tsx +++ b/frontend/app/components/shared/SaveFilterButton/SaveFilterButton.tsx @@ -7,20 +7,21 @@ import { useStore } from 'App/mstore'; function SaveFilterButton({ disabled }: { disabled?: boolean }) { const { searchStore } = useStore(); const savedSearch = searchStore.savedSearch; - const [showModal, setshowModal] = useState(false); + const [showModal, setShowModal] = useState(false); + return (
{showModal && ( setshowModal(false)} + closeHandler={() => setShowModal(false)} /> )}
diff --git a/frontend/app/components/shared/SavedSearch/SavedSearch.tsx b/frontend/app/components/shared/SavedSearch/SavedSearch.tsx index 566dda0f5..0e6d857ca 100644 --- a/frontend/app/components/shared/SavedSearch/SavedSearch.tsx +++ b/frontend/app/components/shared/SavedSearch/SavedSearch.tsx @@ -1,9 +1,11 @@ -import React from 'react'; +import React, { useState } from "react"; import { Dropdown } from 'antd'; import { useStore } from 'App/mstore'; import { observer } from 'mobx-react-lite'; +import SaveSearchModal from "../SaveSearchModal/SaveSearchModal"; function SavedSearch() { + const [showModal, setShowModal] = useState(false); const { searchStore } = useStore(); const savedSearch = searchStore.savedSearch; @@ -13,10 +15,22 @@ function SavedSearch() { onClick: () => searchStore.applySavedSearch(item) })) + const toggleModal = () => { + if (searchStore.instance.filters.length === 0) return; + setShowModal(true); + } return ( - + <> + {savedSearch.exists() ? 'Update' : 'Save'} Search + {showModal && ( + setShowModal(false)} + /> + )} + ); }