ui: fix filter options reset, fix dashboard chart density

frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx

@@ -181,9 +181,10 @@ function WidgetChart(props: Props) {
     }
     prevMetricRef.current = _metric;
     const timestmaps = drillDownPeriod.toTimestamps();
+    const density = props.isPreview ? metric.density : dashboardStore.selectedDensity
     const payload = isSaved
-      ? { ...metricParams }
-      : { ...params, ...timestmaps, ..._metric.toJson() };
+      ? { ...metricParams, density }
+      : { ...params, ...timestmaps, ..._metric.toJson(), density };
     debounceRequest(
       _metric,
       payload,

frontend/app/components/Dashboard/components/WidgetDateRange/RangeGranularity.tsx

@@ -55,7 +55,7 @@ function RangeGranularity({
 }
 
 const PAST_24_HR_MS = 24 * 60 * 60 * 1000;
-function calculateGranularities(periodDurationMs: number) {
+export function calculateGranularities(periodDurationMs: number) {
   const granularities = [
     { label: 'Hourly', durationMs: 60 * 60 * 1000 },
     { label: 'Daily', durationMs: 24 * 60 * 60 * 1000 },

frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx

@@ -125,7 +125,7 @@ export function AutocompleteModal({
       if (index === blocksAmount - 1 && blocksAmount > 1) {
         str += ' and ';
       }
-      str += `"${block.trim()}"`;
+      str += block.trim();
       if (index < blocksAmount - 2) {
         str += ', ';
       }
@@ -188,10 +188,10 @@ export function AutocompleteModal({
             {query.length ? (
               <div className="border-y border-y-gray-light py-2">
                 <div
-                  className="whitespace-normal rounded cursor-pointer text-teal hover:bg-active-blue px-2 py-1"
+                  className="whitespace-nowrap truncate w-full rounded cursor-pointer text-teal hover:bg-active-blue px-2 py-1"
                   onClick={applyQuery}
                 >
-                  {t('Apply')}&nbsp;{queryStr}
+                  {t('Apply')}&nbsp;<span className='font-semibold'>{queryStr}</span>
                 </div>
               </div>
             ) : null}

frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx

@@ -128,8 +128,10 @@ const FilterAutoComplete = observer(
     };
 
     const handleFocus = () => {
+      if (!initialFocus) {
+        setOptions(topValues.map((i) => ({ value: i.value, label: i.value })));
+      }
       setInitialFocus(true);
-      setOptions(topValues.map((i) => ({ value: i.value, label: i.value })));
     };
 
     return (

frontend/app/mstore/dashboardStore.ts

@@ -1,4 +1,4 @@
-import { makeAutoObservable, runInAction } from 'mobx';
+import { makeAutoObservable, runInAction, reaction } from 'mobx';
 import { dashboardService, metricService } from 'App/services';
 import { toast } from 'react-toastify';
 import Period, { LAST_24_HOURS, LAST_7_DAYS } from 'Types/app/period';
@@ -6,6 +6,7 @@ import { getRE } from 'App/utils';
 import Filter from './types/filter';
 import Widget from './types/widget';
 import Dashboard from './types/dashboard';
+import { calculateGranularities } from '@/components/Dashboard/components/WidgetDateRange/RangeGranularity';
 
 interface DashboardFilter {
   query?: string;
@@ -36,7 +37,7 @@ export default class DashboardStore {
 
   drillDownPeriod: Record<string, any> = Period({ rangeName: LAST_24_HOURS });
 
-  selectedDensity: number = 7; // depends on default drilldown, 7 points here!!!;
+  selectedDensity: number = 7;
 
   comparisonPeriods: Record<string, any> = {};
 
@@ -83,10 +84,25 @@ export default class DashboardStore {
     makeAutoObservable(this);
 
     this.resetDrillDownFilter();
+
+    this.createDensity(this.period.getDuration());
+    reaction(
+      () => this.period,
+      (period) => {
+        this.createDensity(period.getDuration());
+      }
+    )
   }
 
-  setDensity = (density: any) => {
-    this.selectedDensity = parseInt(density, 10);
+  createDensity = (duration: number) => {
+    const densityOpts = calculateGranularities(duration);
+    const defaultOption = densityOpts[densityOpts.length - 2];
+
+    this.setDensity(defaultOption.key)
+  }
+
+  setDensity = (density: number) => {
+    this.selectedDensity = density;
   };
 
   get sortedDashboards() {
@@ -529,7 +545,7 @@ export default class DashboardStore {
         const data = await metricService.getMetricChartData(
           metric,
           params,
-          isSaved,
+          isSaved
         );
         resolve(metric.setData(data, period, isComparison, density));
       } catch (error) {

frontend/app/mstore/types/widget.ts

@@ -163,6 +163,7 @@ export default class Widget {
   fromJson(json: any, period?: any) {
     json.config = json.config || {};
     runInAction(() => {
+      this.dashboardId = json.dashboardId;
       this.metricId = json.metricId;
       this.widgetId = json.widgetId;
       this.metricValue = this.metricValueFromArray(