[GitHub] [superset] villebro commented on a change in pull request #12946: feature(native-filters): Add time filters

[GitBox <gi...@apache.org>]

villebro commented on a change in pull request #12946:
URL: https://github.com/apache/superset/pull/12946#discussion_r570347975



##########
File path: superset-frontend/src/filters/components/Time/buildQuery.ts
##########
@@ -0,0 +1,72 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import {
+  buildQueryContext,
+  ColumnType,
+  QueryFormData,
+} from '@superset-ui/core';
+
+/**
+ * The buildQuery function is used to create an instance of QueryContext that's
+ * sent to the chart data endpoint. In addition to containing information of which
+ * datasource to use, it specifies the type (e.g. full payload, samples, query) and
+ * format (e.g. CSV or JSON) of the result and whether or not to force refresh the data from
+ * the datasource as opposed to using a cached copy of the data, if available.
+ *
+ * More importantly though, QueryContext contains a property `queries`, which is an array of
+ * QueryObjects specifying individual data requests to be made. A QueryObject specifies which
+ * columns, metrics and filters, among others, to use during the query. Usually it will be enough
+ * to specify just one query based on the baseQueryObject, but for some more advanced use cases
+ * it is possible to define post processing operations in the QueryObject, or multiple queries
+ * if a viz needs multiple different result sets.
+ */
+export default function buildQuery(formData: QueryFormData) {
+  const { groupby } = formData;
+  const [column] = groupby || [];
+  return buildQueryContext(formData, baseQueryObject => [

Review comment:
       This file can probably be removed, as the chart won't be doing any data fetching. Otherwise we need to do some tweaking to make sure viz plugins don't need do do any data fetching.

##########
File path: superset-frontend/src/filters/components/Time/TimeFilter.tsx
##########
@@ -0,0 +1,72 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { styled, TimeRange } from '@superset-ui/core';
+import React, { useState, useEffect } from 'react';
+import DateFilterControl from 'src/explore/components/controls/DateFilterControl/DateFilterControl';
+import { getRangeExtraFormData } from 'src/filters/utils';
+import { AntdPluginFilterStylesProps } from '../types';
+import { DEFAULT_FORM_DATA, PluginFilterTimeProps } from './types';
+
+const Styles = styled.div<AntdPluginFilterStylesProps>`
+  height: ${({ height }) => height}px;
+  width: ${({ width }) => width}px;
+  overflow-x: scroll;
+`;
+
+export default function PluginFilterTime(props: PluginFilterTimeProps) {
+  const { formData, setExtraFormData, width, height } = props;
+  const { defaultValue } = {
+    ...DEFAULT_FORM_DATA,
+    ...formData,
+  };
+
+  const firstDefault = (defaultValue?.[0] || '').toString();
+  const [value, setValue] = useState<string>(firstDefault || 'Last week');
+
+  let { groupby = [] } = formData;
+  groupby = Array.isArray(groupby) ? groupby : [groupby];
+
+  const handleTimeRangeChange = (timeRange: TimeRange) => {
+    const [col] = groupby;
+    const extraFormData = getRangeExtraFormData(
+      col,
+      timeRange.since,
+      timeRange.until,
+    );
+    // @ts-ignore
+    setExtraFormData({ extraFormData, currentState: { value: [value] } });
+  };

Review comment:
       The handler should set `extraFormData` with the following params:
   ```javascript
   extraFormData = {
     override: {
       time_range: timeRange,
     },
   };
   ```
   

##########
File path: superset-frontend/src/filters/components/Time/types.ts
##########
@@ -0,0 +1,56 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import {
+  QueryFormData,
+  DataRecord,
+  SetExtraFormDataHook,
+} from '@superset-ui/core';
+import { RefObject } from 'react';
+import { AntdPluginFilterStylesProps } from '../types';
+
+interface PluginFilterTimeCustomizeProps {
+  defaultValue?: (string | number)[] | null;
+  currentValue?: (string | number)[] | null;
+  enableEmptyFilter: boolean;
+  fetchPredicate?: string;
+  inverseSelection: boolean;
+  multiSelect: boolean;
+  showSearch: boolean;
+  inputRef?: RefObject<HTMLInputElement>;
+}
+
+export type AntdPluginFilterSelectQueryFormData = QueryFormData &
+  AntdPluginFilterStylesProps &
+  PluginFilterTimeCustomizeProps;
+
+export type PluginFilterTimeProps = AntdPluginFilterStylesProps & {
+  data: DataRecord[];
+  setExtraFormData: SetExtraFormDataHook;
+  formData: AntdPluginFilterSelectQueryFormData;
+};
+
+export const DEFAULT_FORM_DATA: PluginFilterTimeCustomizeProps = {
+  defaultValue: null,
+  currentValue: null,
+  enableEmptyFilter: false,
+  fetchPredicate: '',
+  inverseSelection: false,
+  multiSelect: true,
+  showSearch: true,

Review comment:
       We can probably remove all the other default form data except `defaultValue` and `currentValue`.

##########
File path: superset-frontend/src/filters/components/Time/controlPanel.ts
##########
@@ -0,0 +1,44 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { t, validateNonEmpty } from '@superset-ui/core';
+import { ControlPanelConfig, sections } from '@superset-ui/chart-controls';
+
+const config: ControlPanelConfig = {
+  // For control input types, see: superset-frontend/src/explore/components/controls/index.js
+  controlPanelSections: [
+    // @ts-ignore
+    sections.legacyRegularTime,
+    {
+      label: t('Query'),
+      expanded: true,
+      controlSetRows: [['groupby'], ['adhoc_filters']],
+    },
+  ],
+  controlOverrides: {
+    groupby: {
+      validators: [validateNonEmpty],
+      clearable: false,
+    },
+    row_limit: {
+      default: 100,
+    },
+  },
+};

Review comment:
       Same here - a minimal control panel should be enough.

##########
File path: superset-frontend/src/filters/utils.ts
##########
@@ -46,8 +46,8 @@ export const getSelectExtraFormData = (
 
 export const getRangeExtraFormData = (
   col: string,
-  lower?: number | null,
-  upper?: number | null,
+  lower?: number | string | null,
+  upper?: number | string | null,

Review comment:
       As the time filter won't be needing this util, we don't need to make changes here.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org