ui: fix savesearch button, fix comparison period tracking

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;

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

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 (
     <div>
       <Button
         type="link"
         disabled={disabled}
-        onClick={() => setshowModal(true)}
+        onClick={() => setShowModal(true)}
       >
         {savedSearch.exists() ? 'Update Search' : 'Save Search'}
       </Button>
       {showModal && (
         <SaveSearchModal
           show={showModal}
-          closeHandler={() => setshowModal(false)}
+          closeHandler={() => setShowModal(false)}
         />
       )}
     </div>

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 (
-    <Dropdown.Button menu={{ items: options }} className={'w-fit'}>
+    <>
+    <Dropdown.Button onClick={toggleModal} menu={{ items: options }} className={'w-fit'}>
       {savedSearch.exists() ? 'Update' : 'Save'} Search
     </Dropdown.Button>
+      {showModal && (
+        <SaveSearchModal
+          show={showModal}
+          closeHandler={() => setShowModal(false)}
+        />
+      )}
+    </>
   );
 }