Unable to view the filter option

krishanthvs commented 1 month ago

Bug description

I am unable to view the filter option

Screenshots/recordings

No response

Superset version

master / latest-dev

Python version

3.11

Node version

Not applicable

Browser

Chrome

Additional context

No response

Checklist

[X] I have searched Superset docs and Slack and didn't find a solution to my problem.
[X] I have searched the GitHub issue tracker and didn't find a similar bug report.
[x] I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

dosubot[bot] commented 1 month ago

@krishanthvs Hello there! I'm here to help you with any issues you may have in Superset. I can assist with bug fixes, answer questions, and guide you on how to become a contributor. Looking forward to assisting you!

The reason you are unable to view the filter option in Superset version master/latest-dev is due to the removal of the filter_bar_orientation from the dashboard's json_metadata. This change was made in the pull request #22248 ^[1].

Additionally, there are new configuration options and settings related to filters introduced in recent versions of Superset. For example, the DASHBOARD_NATIVE_FILTERS feature flag has been permanently enabled, and the deprecated Filter Box code has been removed, with existing filter boxes automatically migrated to native filters ^[2]^[3]^[4].

For more details, you can refer to the UPDATING.md file in the Superset repository.

To continue talking to Dosu, mention @dosu.

krishanthvs commented 1 month ago

@dosu How to add filters in superset dashboard

dosubot[bot] commented 1 month ago

To add filters in a Superset dashboard, you can use predefined filter classes or programmatically add native filters. Here are the steps:

Using Predefined Filter Classes

DashboardTitleOrSlugFilter: Filters dashboards by title or slug.
DashboardCreatedByMeFilter: Filters dashboards created by the current user.
DashboardFavoriteFilter: Filters dashboards that the user has marked as favorite.
DashboardTagNameFilter: Filters dashboards by tag name.
DashboardTagIdFilter: Filters dashboards by tag ID.
DashboardAccessFilter: Filters dashboards based on user access, ownership, and roles.
FilterRelatedRoles: Filters dashboards by related roles.
DashboardCertifiedFilter: Filters dashboards that are certified.
DashboardHasCreatedByFilter: Filters dashboards based on whether they have a creator.

Example of applying a filter to a query:

from superset.dashboards.filters import DashboardTitleOrSlugFilter

# Example query to filter dashboards by title or slug
query = db.session.query(Dashboard)
filter_value = "example_title_or_slug"
filtered_query = DashboardTitleOrSlugFilter().apply(query, filter_value)
dashboards = filtered_query.all()

Programmatically Adding Native Filters

You can also add native filters programmatically using the following TypeScript function:

import { SAMPLE_DASHBOARD_1 } from 'cypress/utils/urls';
import { interceptCharts, interceptDatasets, interceptGet } from './utils';

export function prepareDashboardFilters(
  filters: { name: string; column: string; datasetId: number }[],
) {
  cy.createSampleDashboards([0]);
  cy.request({
    method: 'GET',
    url: `api/v1/dashboard/1-sample-dashboard`,
  }).then(res => {
    const { body } = res;
    const dashboardId = body.result.id;
    const allFilters: Record<string, unknown>[] = [];
    filters.forEach((f, i) => {
      allFilters.push({
        id: `NATIVE_FILTER-fLH0pxFQ${i}`,
        controlValues: {
          enableEmptyFilter: false,
          defaultToFirstItem: false,
          multiSelect: true,
          searchAllOptions: false,
          inverseSelection: false,
        },
        name: f.name,
        filterType: 'filter_select',
        targets: [
          {
            datasetId: f.datasetId,
            column: { name: f.column },
          },
        ],
        defaultDataMask: {
          extraFormData: {},
          filterState: {},
          ownState: {},
        },
        cascadeParentIds: [],
        scope: {
          rootPath: ['ROOT_ID'],
          excluded: [],
        },
        type: 'NATIVE_FILTER',
        description: '',
        chartsInScope: [5],
        tabsInScope: [],
      });
    });
    if (dashboardId) {
      const jsonMetadata = {
        native_filter_configuration: allFilters,
        timed_refresh_immune_slices: [],
        expanded_slices: {},
        refresh_frequency: 0,
        color_scheme: '',
        label_colors: {},
        shared_label_colors: {},
        color_scheme_domain: [],
        cross_filters_enabled: false,
        positions: {
          DASHBOARD_VERSION_KEY: 'v2',
          ROOT_ID: { type: 'ROOT', id: 'ROOT_ID', children: ['GRID_ID'] },
          GRID_ID: {
            type: 'GRID',
            id: 'GRID_ID',
            children: ['ROW-0rHnUz4nMA'],
            parents: ['ROOT_ID'],
          },
          HEADER_ID: {
            id: 'HEADER_ID',
            type: 'HEADER',
            meta: { text: '1 - Sample dashboard' },
          },
          'CHART-DF6EfI55F-': {
            type: 'CHART',
            id: 'CHART-DF6EfI55F-',
            children: [],
            parents: ['ROOT_ID', 'GRID_ID', 'ROW-0rHnUz4nMA'],
            meta: {
              width: 4,
              height: 50,
              chartId: 5,
              sliceName: 'Most Populated Countries',
            },
          },
          'ROW-0rHnUz4nMA': {
            type: 'ROW',
            id: 'ROW-0rHnUz4nMA',
            children: ['CHART-DF6EfI55F-'],
            parents: ['ROOT_ID', 'GRID_ID'],
            meta: { background: 'BACKGROUND_TRANSPARENT' },
          },
        },
        default_filters: '{}',
        filter_scopes: {},
        chart_configuration: {},
      };
      return cy
        .request({
          method: 'PUT',
          url: `api/v1/dashboard/${dashboardId}`,
          body: {
            json_metadata: JSON.stringify(jsonMetadata),
          },
        })
        .then(() => visitDashboard(false));
    }
    return cy;
  });
}

This function allows you to add native filters to a dashboard by specifying the filter details and updating the dashboard's metadata ^[1]^[2].

To continue talking to Dosu, mention @dosu.

krishanthvs commented 1 month ago

@dosu i want to add a date filter and location filter to my dashboard

dosubot[bot] commented 1 month ago

To add a date filter and a location filter to your Superset dashboard, follow these steps:

Adding a Date Filter

Navigate to your dashboard: Open the dashboard where you want to add the date filter.
Edit the dashboard: Click on the "Edit Dashboard" button.
Add a filter box: Drag and drop a "Filter Box" from the components panel to your dashboard.
Configure the filter box:
- Choose a dataset: Select the dataset you want to filter.
- Add a date filter: In the filter configuration, add a filter for the date column. You can use predefined date ranges such as "Last day", "Last week", "Last month", etc.

Adding a Location Filter

Navigate to your dashboard: Open the dashboard where you want to add the location filter.
Edit the dashboard: Click on the "Edit Dashboard" button.
Add a filter box: Drag and drop a "Filter Box" from the components panel to your dashboard.
Configure the filter box:
- Choose a dataset: Select the dataset you want to filter.
- Add a location filter: In the filter configuration, add a filter for the location column. This could be a dropdown or a multi-select filter depending on your dataset.

Example Code for Date Filter Options

Here is an example of how the date filter options are defined:

export const COMMON_RANGE_OPTIONS: SelectOptionType[] = [
  { value: 'Last day', label: 'Last day' },
  { value: 'Last week', label: 'Last week' },
  { value: 'Last month', label: 'Last month' },
  { value: 'Last quarter', label: 'Last quarter' },
  { value: 'Last year', label: 'Last year' },
];

Applying Filters

Once you have added and configured the filters, click on the "Save" button to apply the changes to your dashboard. The filters will now be available for users to interact with and filter the data displayed in the dashboard.

By following these steps, you can successfully add both date and location filters to your Superset dashboard ^[1].

To continue talking to Dosu, mention @dosu.

krishanthvs commented 1 month ago

@dosu I am unable to view this Drag and drop a "Filter Box" from the components panel to your dashboard

dosubot[bot] commented 1 month ago

To view and use the "Filter Box" component in the Superset dashboard, you need to interact with the FilterBar component. The FilterBar component can be configured to be either horizontal or vertical and includes action buttons for applying and clearing filters.

Here is a simplified example of how you might use the FilterBar component:

import React from 'react';
import FilterBar, { FilterBarOrientation } from 'src/dashboard/components/nativeFilters/FilterBar';

const MyDashboard = () => {
  const verticalConfig = {
    filtersOpen: true,
    height: 400,
    offset: 0,
    toggleFiltersBar: () => {},
    width: 300,
  };

  return (
    <div>
      <FilterBar
        orientation={FilterBarOrientation.Vertical}
        verticalConfig={verticalConfig}
        hidden={false}
      />
      {/* Other dashboard components */}
    </div>
  );
};

export default MyDashboard;

In this example, the FilterBar is configured to be vertical with specific dimensions and is not hidden. You can customize the verticalConfig and orientation as needed for your dashboard layout.

Additionally, the FilterControls component within the FilterBar handles the rendering of filters and their interactions. It supports both vertical and horizontal orientations and includes features like collapsing out-of-scope filters and handling cross-filters ^[1]^[2]^[3].

To continue talking to Dosu, mention @dosu.

krishanthvs commented 1 month ago

@dosu can this be assigned to some support team. Need this fixed asap

dosubot[bot] commented 1 month ago

It seems like we need your specialized knowledge on this, @rusackas.

To continue talking to Dosu, mention @dosu.

krishanthvs commented 1 month ago

@rusackas can you please help me on this

sadpandajoe commented 1 month ago

@krishanthvs filter box has been deprecated for 4.0 i think. We switched to native filters and you should be able to open the native filter bar on the left side of a dashboard as it might be collapsed and then you can create your filters. I don't think there is a Superset how to doc, but Preset has one that is pretty descriptive on how to create a filter. https://docs.preset.io/docs/managing-filters

apache / superset