feat(dashboards): Filter status indicators (#10936)

* Initial commit of new filters badge.

* refactor applied/rejected filters code

* finished filter indicators

* filter badge tested

* unnecessary imports

* formatting and types

* fixes

* license

* code quality tweaks

* state management for showing focused filter scope

* clean up filter key extraction code

* remove unnecessary styles

* temp css to demonstrate highlighting

* fix focused filter logic

* no more color badges

* new toys for highlighting dash components (#11144)

* tweak style for the filter chart when filter is focused

* style: Filters p0 css2 (#11151)

* nixing background tweak

* src paths

* another quick theme color

* src paths, adjusting pill icon color, changing icons, showing applied/busted counts

* linting stuff

* fixing and tweaking tests

* show filter indicator when filters are not active

* chart title bar cleanup

* open the right panel when popover opens

* unused import

* fix EditableTitle tests

* margin on dashboard header

* show the chart dropdown menu

* fix blur filter breaking dropdowns

* style tweak - no pointer events when irrelevant charts are blurred

* fix box shadow on filter highlight

* it's an array

* attempt fixing e2e

* style: filters p0 icon churn (#11215)

* new filters icon

* icon styling

* bigger icons in list views

* better sizing of table actions and favStars

* more icon sizing...

* fixing more button size jankiness

* linting

* Filters performance (#11255)

* fixing time filter "ok" button

* making unset filter menu collapsible

* sort alphabetically

* fix highlighting when removing items

* try a flex layout (for browser render perf)

* more specific transitioning

* temp: comment out some code as a test

* temp: comment out more code

* temp: remove possibly expensive computations from ChartHolder

* Revert "temp: comment out some code as a test"

This reverts commit 309b880e90.

* Revert "temp: comment out more code"

This reverts commit 64c88b2cba.

* Revert "temp: remove possibly expensive computations from ChartHolder"

This reverts commit 37ce0214f0.

* experiment: upgrade react-select to v3

* Revert "experiment: upgrade react-select to v3"

This reverts commit c3972ba486.

* fix the damn problem

* remove code used for testing purposes

* awful hack to avoid adding a class to a container

* approaching infinity... and not beyond!

* fix ref forwarding

* add theme to tests as necessary

* fix(extra-filters): add logic for identifying applied extra filters (#11325)

* fix: use dashboard id for stable cache key (#11293)

* fix: button translations missing (#11187)

* button translations missing

* blank space before text

* feat: update time_compare description and choices (#11294)

* feat: update time_compare description and choices

* Update sections.jsx

* fix(extra-filters): add logic for identifying applied extra filters

* lint

Co-authored-by: Jesse Yang <jesse.yang@airbnb.com>
Co-authored-by: rubenSastre <ruben.sastre@decathlon.com>
Co-authored-by: Erik Ritter <erik.ritter@airbnb.com>

* address design feedback

* slight tweak to panel logic, keep panels open that user has opened

* rearrange code to be more graceful

* fix: bump superset-ui/core (#11385)

* use is_dttm instead of is_temporal

* types, names

* only show unset filter panel if there are unset filters

* fix highlighting the filter control

* fix filterbox layout

* translations

* fix cypress

* actually add the test attribute

* Update superset-frontend/src/dashboard/components/DashboardBuilder.jsx

Co-authored-by: Evan Rusackas <evan@preset.io>

* Update superset-frontend/src/dashboard/components/DashboardBuilder.jsx

Co-authored-by: Evan Rusackas <evan@preset.io>

* formatting

* add link comment to hack

* Update superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx

Co-authored-by: Evan Rusackas <evan@preset.io>

* stop importing lodash

* Update superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx

Co-authored-by: Evan Rusackas <evan@preset.io>

* Update superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx

Co-authored-by: Evan Rusackas <evan@preset.io>

* Update superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx

Co-authored-by: Evan Rusackas <evan@preset.io>

* Update superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx

Co-authored-by: Evan Rusackas <evan@preset.io>

* Update superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx

Co-authored-by: Evan Rusackas <evan@preset.io>

* skip broken test

* Update superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx

Co-authored-by: Evan Rusackas <evan@preset.io>

* Update superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx

Co-authored-by: Evan Rusackas <evan@preset.io>

* adjust colors of titles

* linting

* no indicators when chart is loading

* support all time fields

* fix lock file

Co-authored-by: Natalie Ruhe <natalie@preset.io>
Co-authored-by: Evan Rusackas <evan@preset.io>
Co-authored-by: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Co-authored-by: Jesse Yang <jesse.yang@airbnb.com>
Co-authored-by: rubenSastre <ruben.sastre@decathlon.com>
Co-authored-by: Erik Ritter <erik.ritter@airbnb.com>
Co-authored-by: Ville Brofeldt <ville.v.brofeldt@gmail.com>

superset/utils/core.py

@@ -910,6 +910,8 @@ def merge_extra_filters(  # pylint: disable=too-many-branches
     # that are external to the slice definition. We use those for dynamic
     # interactive filters like the ones emitted by the "Filter Box" visualization.
     # Note extra_filters only support simple filters.
+    applied_time_extras: Dict[str, str] = {}
+    form_data["applied_time_extras"] = applied_time_extras
     if "extra_filters" in form_data:
         # __form and __to are special extra_filters that target time
         # boundaries. The rest of extra_filters are simple
@@ -948,9 +950,13 @@ def merge_extra_filters(  # pylint: disable=too-many-branches
         ]:
             filtr["isExtra"] = True
             # Pull out time filters/options and merge into form data
-            if date_options.get(filtr["col"]):
-                if filtr.get("val"):
-                    form_data[date_options[filtr["col"]]] = filtr["val"]
+            filter_column = filtr["col"]
+            time_extra = date_options.get(filter_column)
+            if time_extra:
+                time_extra_value = filtr.get("val")
+                if time_extra_value:
+                    form_data[time_extra] = time_extra_value
+                    applied_time_extras[filter_column] = time_extra_value
             elif filtr["val"]:
                 # Merge column filters
                 filter_key = get_filter_key(filtr)
@@ -1567,5 +1573,80 @@ class RowLevelSecurityFilterType(str, Enum):
     BASE = "Base"
 
 
+class ExtraFiltersTimeColumnType(str, Enum):
+    GRANULARITY = "__granularity"
+    TIME_COL = "__time_col"
+    TIME_GRAIN = "__time_grain"
+    TIME_ORIGIN = "__time_origin"
+    TIME_RANGE = "__time_range"
+
+
 def is_test() -> bool:
     return strtobool(os.environ.get("SUPERSET_TESTENV", "false"))
+
+
+def get_time_filter_status(  # pylint: disable=too-many-branches
+    datasource: "BaseDatasource", applied_time_extras: Dict[str, str],
+) -> Tuple[List[Dict[str, str]], List[Dict[str, str]]]:
+    temporal_columns = {col.column_name for col in datasource.columns if col.is_dttm}
+    applied: List[Dict[str, str]] = []
+    rejected: List[Dict[str, str]] = []
+    time_column = applied_time_extras.get(ExtraFiltersTimeColumnType.TIME_COL)
+    if time_column:
+        if time_column in temporal_columns:
+            applied.append({"column": ExtraFiltersTimeColumnType.TIME_COL})
+        else:
+            rejected.append(
+                {
+                    "reason": "not_in_datasource",
+                    "column": ExtraFiltersTimeColumnType.TIME_COL,
+                }
+            )
+
+    if ExtraFiltersTimeColumnType.TIME_GRAIN in applied_time_extras:
+        # are there any temporal columns to assign the time grain to?
+        if temporal_columns:
+            applied.append({"column": ExtraFiltersTimeColumnType.TIME_GRAIN})
+        else:
+            rejected.append(
+                {
+                    "reason": "no_temporal_column",
+                    "column": ExtraFiltersTimeColumnType.TIME_GRAIN,
+                }
+            )
+
+    if ExtraFiltersTimeColumnType.TIME_RANGE in applied_time_extras:
+        # are there any temporal columns to assign the time grain to?
+        if temporal_columns:
+            applied.append({"column": ExtraFiltersTimeColumnType.TIME_RANGE})
+        else:
+            rejected.append(
+                {
+                    "reason": "no_temporal_column",
+                    "column": ExtraFiltersTimeColumnType.TIME_RANGE,
+                }
+            )
+
+    if ExtraFiltersTimeColumnType.TIME_ORIGIN in applied_time_extras:
+        if datasource.type == "druid":
+            applied.append({"column": ExtraFiltersTimeColumnType.TIME_ORIGIN})
+        else:
+            rejected.append(
+                {
+                    "reason": "not_druid_datasource",
+                    "column": ExtraFiltersTimeColumnType.TIME_ORIGIN,
+                }
+            )
+
+    if ExtraFiltersTimeColumnType.GRANULARITY in applied_time_extras:
+        if datasource.type == "druid":
+            applied.append({"column": ExtraFiltersTimeColumnType.GRANULARITY})
+        else:
+            rejected.append(
+                {
+                    "reason": "not_druid_datasource",
+                    "column": ExtraFiltersTimeColumnType.GRANULARITY,
+                }
+            )
+
+    return applied, rejected