mirror of
https://github.com/apache/superset.git
synced 2024-09-16 02:29:39 -04:00
feat: Implement drag and drop for metrics (#13575)
* Convert MetricsControl to functional component * Implement drag and drop for metrics * Implement customizable placeholder for DndSelectLabel
This commit is contained in:
parent
1b95ed7267
commit
d439da2fe0
@ -17,12 +17,12 @@
|
||||
* under the License.
|
||||
*/
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { logging, SupersetClient } from '@superset-ui/core';
|
||||
import { logging, SupersetClient, t } from '@superset-ui/core';
|
||||
import { ColumnMeta, Metric } from '@superset-ui/chart-controls';
|
||||
import { Tooltip } from 'src/common/components/Tooltip';
|
||||
import { OPERATORS } from 'src/explore/constants';
|
||||
import { OptionSortType } from 'src/explore/types';
|
||||
import { DndFilterSelectProps, FilterOptionValueType } from './types';
|
||||
import { DndFilterSelectProps, OptionValueType } from './types';
|
||||
import AdhocFilterPopoverTrigger from '../FilterControl/AdhocFilterPopoverTrigger';
|
||||
import OptionWrapper from './components/OptionWrapper';
|
||||
import DndSelectLabel from './DndSelectLabel';
|
||||
@ -37,13 +37,13 @@ import {
|
||||
} from '../../DatasourcePanel/types';
|
||||
import { DndItemType } from '../../DndItemType';
|
||||
|
||||
const isDictionaryForAdhocFilter = (value: FilterOptionValueType) =>
|
||||
const isDictionaryForAdhocFilter = (value: OptionValueType) =>
|
||||
!(value instanceof AdhocFilter) && value?.expressionType;
|
||||
|
||||
export const DndFilterSelect = (props: DndFilterSelectProps) => {
|
||||
const propsValues = Array.from(props.value ?? []);
|
||||
const [values, setValues] = useState(
|
||||
propsValues.map((filter: FilterOptionValueType) =>
|
||||
propsValues.map((filter: OptionValueType) =>
|
||||
isDictionaryForAdhocFilter(filter) ? new AdhocFilter(filter) : filter,
|
||||
),
|
||||
);
|
||||
@ -144,7 +144,7 @@ export const DndFilterSelect = (props: DndFilterSelectProps) => {
|
||||
|
||||
useEffect(() => {
|
||||
setValues(
|
||||
(props.value || []).map((filter: FilterOptionValueType) =>
|
||||
(props.value || []).map((filter: OptionValueType) =>
|
||||
isDictionaryForAdhocFilter(filter) ? new AdhocFilter(filter) : filter,
|
||||
),
|
||||
);
|
||||
@ -171,7 +171,7 @@ export const DndFilterSelect = (props: DndFilterSelectProps) => {
|
||||
(savedMetric: Metric) => savedMetric.metric_name === savedMetricName,
|
||||
)?.expression;
|
||||
|
||||
const mapOption = (option: FilterOptionValueType) => {
|
||||
const mapOption = (option: OptionValueType) => {
|
||||
// already a AdhocFilter, skip
|
||||
if (option instanceof AdhocFilter) {
|
||||
return option;
|
||||
@ -299,7 +299,7 @@ export const DndFilterSelect = (props: DndFilterSelectProps) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<DndSelectLabel<FilterOptionValueType, FilterOptionValueType[]>
|
||||
<DndSelectLabel<OptionValueType, OptionValueType[]>
|
||||
values={values}
|
||||
onDrop={(item: DatasourcePanelDndItem) => {
|
||||
setDroppedItem(item.value);
|
||||
@ -313,6 +313,7 @@ export const DndFilterSelect = (props: DndFilterSelectProps) => {
|
||||
DndItemType.MetricOption,
|
||||
DndItemType.AdhocMetricOption,
|
||||
]}
|
||||
placeholderText={t('Drop columns or metrics')}
|
||||
{...props}
|
||||
/>
|
||||
<AdhocFilterPopoverTrigger
|
||||
|
@ -0,0 +1,301 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with work for additional information
|
||||
* regarding copyright ownership. The ASF licenses file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use 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 React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { ensureIsArray, Metric, t } from '@superset-ui/core';
|
||||
import { ColumnMeta } from '@superset-ui/chart-controls';
|
||||
import { isEqual } from 'lodash';
|
||||
import { usePrevious } from 'src/common/hooks/usePrevious';
|
||||
import AdhocMetric from '../MetricControl/AdhocMetric';
|
||||
import AdhocMetricPopoverTrigger from '../MetricControl/AdhocMetricPopoverTrigger';
|
||||
import MetricDefinitionValue from '../MetricControl/MetricDefinitionValue';
|
||||
import { OptionValueType } from './types';
|
||||
import { DatasourcePanelDndItem } from '../../DatasourcePanel/types';
|
||||
import { DndItemType } from '../../DndItemType';
|
||||
import DndSelectLabel from './DndSelectLabel';
|
||||
import { savedMetricType } from '../MetricControl/types';
|
||||
|
||||
const isDictionaryForAdhocMetric = (value: any) =>
|
||||
value && !(value instanceof AdhocMetric) && value.expressionType;
|
||||
|
||||
const coerceAdhocMetrics = (value: any) => {
|
||||
if (!value) {
|
||||
return [];
|
||||
}
|
||||
if (!Array.isArray(value)) {
|
||||
if (isDictionaryForAdhocMetric(value)) {
|
||||
return [new AdhocMetric(value)];
|
||||
}
|
||||
return [value];
|
||||
}
|
||||
return value.map(val => {
|
||||
if (isDictionaryForAdhocMetric(val)) {
|
||||
return new AdhocMetric(val);
|
||||
}
|
||||
return val;
|
||||
});
|
||||
};
|
||||
|
||||
const getOptionsForSavedMetrics = (
|
||||
savedMetrics: savedMetricType[],
|
||||
currentMetricValues: (string | AdhocMetric)[],
|
||||
currentMetric?: string,
|
||||
) =>
|
||||
savedMetrics?.filter(savedMetric =>
|
||||
Array.isArray(currentMetricValues)
|
||||
? !currentMetricValues.includes(savedMetric.metric_name ?? '') ||
|
||||
savedMetric.metric_name === currentMetric
|
||||
: savedMetric,
|
||||
) ?? [];
|
||||
|
||||
const columnsContainAllMetrics = (
|
||||
value: (string | AdhocMetric | ColumnMeta)[],
|
||||
columns: ColumnMeta[],
|
||||
savedMetrics: savedMetricType[],
|
||||
) => {
|
||||
const columnNames = new Set(
|
||||
[...(columns || []), ...(savedMetrics || [])]
|
||||
// eslint-disable-next-line camelcase
|
||||
.map(
|
||||
item =>
|
||||
(item as ColumnMeta).column_name ||
|
||||
(item as savedMetricType).metric_name,
|
||||
),
|
||||
);
|
||||
|
||||
return (
|
||||
ensureIsArray(value)
|
||||
.filter(metric => metric)
|
||||
// find column names
|
||||
.map(metric =>
|
||||
(metric as AdhocMetric).column
|
||||
? (metric as AdhocMetric).column.column_name
|
||||
: (metric as ColumnMeta).column_name || metric,
|
||||
)
|
||||
.filter(name => name && typeof name === 'string')
|
||||
.every(name => columnNames.has(name))
|
||||
);
|
||||
};
|
||||
|
||||
export const DndMetricSelect = (props: any) => {
|
||||
const { onChange, multi, columns, savedMetrics } = props;
|
||||
|
||||
const handleChange = useCallback(
|
||||
opts => {
|
||||
// if clear out options
|
||||
if (opts === null) {
|
||||
onChange(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const transformedOpts = ensureIsArray(opts);
|
||||
const optionValues = transformedOpts
|
||||
.map(option => {
|
||||
// pre-defined metric
|
||||
if (option.metric_name) {
|
||||
return option.metric_name;
|
||||
}
|
||||
return option;
|
||||
})
|
||||
.filter(option => option);
|
||||
onChange(multi ? optionValues : optionValues[0]);
|
||||
},
|
||||
[multi, onChange],
|
||||
);
|
||||
|
||||
const [value, setValue] = useState<(AdhocMetric | Metric | string)[]>(
|
||||
coerceAdhocMetrics(props.value),
|
||||
);
|
||||
const [droppedItem, setDroppedItem] = useState<DatasourcePanelDndItem | null>(
|
||||
null,
|
||||
);
|
||||
const [newMetricPopoverVisible, setNewMetricPopoverVisible] = useState(false);
|
||||
const prevColumns = usePrevious(columns);
|
||||
const prevSavedMetrics = usePrevious(savedMetrics);
|
||||
|
||||
useEffect(() => {
|
||||
setValue(coerceAdhocMetrics(props.value));
|
||||
}, [JSON.stringify(props.value)]);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
!isEqual(prevColumns, columns) ||
|
||||
!isEqual(prevSavedMetrics, savedMetrics)
|
||||
) {
|
||||
// Remove all metrics if selected value no longer a valid column
|
||||
// in the dataset. Must use `nextProps` here because Redux reducers may
|
||||
// have already updated the value for this control.
|
||||
if (!columnsContainAllMetrics(props.value, columns, savedMetrics)) {
|
||||
onChange([]);
|
||||
}
|
||||
}
|
||||
}, [
|
||||
prevColumns,
|
||||
columns,
|
||||
prevSavedMetrics,
|
||||
savedMetrics,
|
||||
props.value,
|
||||
onChange,
|
||||
]);
|
||||
|
||||
const canDrop = (item: DatasourcePanelDndItem) => {
|
||||
const isMetricAlreadyInValues =
|
||||
item.type === 'metric' ? value.includes(item.value.metric_name) : false;
|
||||
return (props.multi || value.length === 0) && !isMetricAlreadyInValues;
|
||||
};
|
||||
|
||||
const onNewMetric = (newMetric: Metric) => {
|
||||
const newValue = [...value, newMetric];
|
||||
setValue(newValue);
|
||||
handleChange(newValue);
|
||||
};
|
||||
|
||||
const onMetricEdit = (
|
||||
changedMetric: Metric | AdhocMetric,
|
||||
oldMetric: Metric | AdhocMetric,
|
||||
) => {
|
||||
const newValue = value.map(value => {
|
||||
if (
|
||||
// compare saved metrics
|
||||
value === (oldMetric as Metric).metric_name ||
|
||||
// compare adhoc metrics
|
||||
typeof (value as AdhocMetric).optionName !== 'undefined'
|
||||
? (value as AdhocMetric).optionName ===
|
||||
(oldMetric as AdhocMetric).optionName
|
||||
: false
|
||||
) {
|
||||
return changedMetric;
|
||||
}
|
||||
return value;
|
||||
});
|
||||
setValue(newValue);
|
||||
handleChange(newValue);
|
||||
};
|
||||
|
||||
const onRemoveMetric = (index: number) => {
|
||||
if (!Array.isArray(value)) {
|
||||
return;
|
||||
}
|
||||
const valuesCopy = [...value];
|
||||
valuesCopy.splice(index, 1);
|
||||
setValue(valuesCopy);
|
||||
onChange(valuesCopy);
|
||||
};
|
||||
|
||||
const moveLabel = (dragIndex: number, hoverIndex: number) => {
|
||||
const newValues = [...value];
|
||||
[newValues[hoverIndex], newValues[dragIndex]] = [
|
||||
newValues[dragIndex],
|
||||
newValues[hoverIndex],
|
||||
];
|
||||
setValue(newValues);
|
||||
};
|
||||
|
||||
const valueRenderer = (
|
||||
option: Metric | AdhocMetric | string,
|
||||
index: number,
|
||||
) => (
|
||||
<MetricDefinitionValue
|
||||
key={index}
|
||||
index={index}
|
||||
option={option}
|
||||
onMetricEdit={onMetricEdit}
|
||||
onRemoveMetric={() => onRemoveMetric(index)}
|
||||
columns={props.columns}
|
||||
savedMetrics={props.savedMetrics}
|
||||
savedMetricsOptions={getOptionsForSavedMetrics(
|
||||
props.savedMetrics,
|
||||
props.value,
|
||||
props.value?.[index],
|
||||
)}
|
||||
datasourceType={props.datasourceType}
|
||||
onMoveLabel={moveLabel}
|
||||
onDropLabel={() => onChange(value)}
|
||||
/>
|
||||
);
|
||||
|
||||
const valuesRenderer = () =>
|
||||
value.map((value, index) => valueRenderer(value, index));
|
||||
|
||||
const togglePopover = (visible: boolean) => {
|
||||
setNewMetricPopoverVisible(visible);
|
||||
};
|
||||
|
||||
const closePopover = () => {
|
||||
togglePopover(false);
|
||||
};
|
||||
|
||||
const { savedMetric, adhocMetric } = useMemo(() => {
|
||||
if (droppedItem?.type === 'column') {
|
||||
const itemValue = droppedItem?.value as ColumnMeta;
|
||||
return {
|
||||
savedMetric: {} as savedMetricType,
|
||||
adhocMetric: new AdhocMetric({
|
||||
column: { column_name: itemValue?.column_name },
|
||||
}),
|
||||
};
|
||||
}
|
||||
if (droppedItem?.type === 'metric') {
|
||||
const itemValue = droppedItem?.value as savedMetricType;
|
||||
return {
|
||||
savedMetric: itemValue,
|
||||
adhocMetric: new AdhocMetric({ isNew: true }),
|
||||
};
|
||||
}
|
||||
return {
|
||||
savedMetric: {} as savedMetricType,
|
||||
adhocMetric: new AdhocMetric({ isNew: true }),
|
||||
};
|
||||
}, [droppedItem?.type, droppedItem?.value]);
|
||||
|
||||
return (
|
||||
<div className="metrics-select">
|
||||
<DndSelectLabel<OptionValueType, OptionValueType[]>
|
||||
values={value}
|
||||
onDrop={(item: DatasourcePanelDndItem) => {
|
||||
setDroppedItem(item);
|
||||
togglePopover(true);
|
||||
}}
|
||||
canDrop={canDrop}
|
||||
valuesRenderer={valuesRenderer}
|
||||
accept={[DndItemType.Column, DndItemType.Metric]}
|
||||
placeholderText={t('Drop columns or metrics')}
|
||||
{...props}
|
||||
/>
|
||||
<AdhocMetricPopoverTrigger
|
||||
adhocMetric={adhocMetric}
|
||||
onMetricEdit={onNewMetric}
|
||||
columns={props.columns}
|
||||
savedMetricsOptions={getOptionsForSavedMetrics(
|
||||
props.savedMetrics,
|
||||
props.value,
|
||||
)}
|
||||
savedMetric={savedMetric}
|
||||
datasourceType={props.datasourceType}
|
||||
isControlledComponent
|
||||
visible={newMetricPopoverVisible}
|
||||
togglePopover={togglePopover}
|
||||
closePopover={closePopover}
|
||||
createNew
|
||||
>
|
||||
<div />
|
||||
</AdhocMetricPopoverTrigger>
|
||||
</div>
|
||||
);
|
||||
};
|
@ -55,7 +55,7 @@ export default function DndSelectLabel<T, O>(
|
||||
return (
|
||||
<AddControlLabel cancelHover>
|
||||
<Icon name="plus-small" color={theme.colors.grayscale.light1} />
|
||||
{t('Drop Columns')}
|
||||
{t(props.placeholderText || 'Drop columns')}
|
||||
</AddControlLabel>
|
||||
);
|
||||
}
|
||||
|
@ -19,3 +19,4 @@
|
||||
export { default } from './DndSelectLabel';
|
||||
export * from './DndColumnSelect';
|
||||
export * from './DndFilterSelect';
|
||||
export * from './DndMetricSelect';
|
||||
|
@ -17,7 +17,6 @@
|
||||
* under the License.
|
||||
*/
|
||||
import { ReactNode } from 'react';
|
||||
import { AdhocFilter } from '@superset-ui/core';
|
||||
import { ColumnMeta, Metric } from '@superset-ui/chart-controls';
|
||||
import { DatasourcePanelDndItem } from '../../DatasourcePanel/types';
|
||||
import { DndItemType } from '../../DndItemType';
|
||||
@ -51,16 +50,17 @@ export interface DndColumnSelectProps<
|
||||
canDrop: (item: DatasourcePanelDndItem) => boolean;
|
||||
valuesRenderer: () => ReactNode;
|
||||
accept: DndItemType | DndItemType[];
|
||||
placeholderText?: string;
|
||||
}
|
||||
|
||||
export type FilterOptionValueType = Record<string, any> | AdhocFilter;
|
||||
export type OptionValueType = Record<string, any>;
|
||||
export interface DndFilterSelectProps {
|
||||
name: string;
|
||||
value: FilterOptionValueType[];
|
||||
value: OptionValueType[];
|
||||
columns: ColumnMeta[];
|
||||
datasource: Record<string, any>;
|
||||
formData: Record<string, any>;
|
||||
savedMetrics: Metric[];
|
||||
onChange: (filters: FilterOptionValueType[]) => void;
|
||||
onChange: (filters: OptionValueType[]) => void;
|
||||
options: { string: ColumnMeta };
|
||||
}
|
||||
|
@ -35,6 +35,10 @@ export type AdhocMetricPopoverTriggerProps = {
|
||||
datasourceType: string;
|
||||
children: ReactNode;
|
||||
createNew?: boolean;
|
||||
isControlledComponent?: boolean;
|
||||
visible?: boolean;
|
||||
togglePopover?: (visible: boolean) => void;
|
||||
closePopover?: () => void;
|
||||
};
|
||||
|
||||
export type AdhocMetricPopoverTriggerState = {
|
||||
@ -139,7 +143,14 @@ class AdhocMetricPopoverTrigger extends React.PureComponent<
|
||||
}
|
||||
|
||||
render() {
|
||||
const { adhocMetric, savedMetric } = this.props;
|
||||
const {
|
||||
adhocMetric,
|
||||
savedMetric,
|
||||
columns,
|
||||
savedMetricsOptions,
|
||||
datasourceType,
|
||||
isControlledComponent,
|
||||
} = this.props;
|
||||
const { verbose_name, metric_name } = savedMetric;
|
||||
const { hasCustomLabel, label } = adhocMetric;
|
||||
const adhocMetricLabel = hasCustomLabel
|
||||
@ -152,16 +163,28 @@ class AdhocMetricPopoverTrigger extends React.PureComponent<
|
||||
hasCustomLabel,
|
||||
};
|
||||
|
||||
const { visible, togglePopover, closePopover } = isControlledComponent
|
||||
? {
|
||||
visible: this.props.visible,
|
||||
togglePopover: this.props.togglePopover,
|
||||
closePopover: this.props.closePopover,
|
||||
}
|
||||
: {
|
||||
visible: this.state.popoverVisible,
|
||||
togglePopover: this.togglePopover,
|
||||
closePopover: this.closePopover,
|
||||
};
|
||||
|
||||
const overlayContent = (
|
||||
<AdhocMetricEditPopover
|
||||
adhocMetric={adhocMetric}
|
||||
title={title}
|
||||
columns={this.props.columns}
|
||||
savedMetricsOptions={this.props.savedMetricsOptions}
|
||||
savedMetric={this.props.savedMetric}
|
||||
datasourceType={this.props.datasourceType}
|
||||
columns={columns}
|
||||
savedMetricsOptions={savedMetricsOptions}
|
||||
savedMetric={savedMetric}
|
||||
datasourceType={datasourceType}
|
||||
onResize={this.onPopoverResize}
|
||||
onClose={this.closePopover}
|
||||
onClose={closePopover}
|
||||
onChange={this.onChange}
|
||||
getCurrentTab={this.getCurrentTab}
|
||||
getCurrentLabel={this.getCurrentLabel}
|
||||
@ -181,9 +204,9 @@ class AdhocMetricPopoverTrigger extends React.PureComponent<
|
||||
placement="right"
|
||||
trigger="click"
|
||||
content={overlayContent}
|
||||
defaultVisible={this.state.popoverVisible}
|
||||
visible={this.state.popoverVisible}
|
||||
onVisibleChange={this.togglePopover}
|
||||
defaultVisible={visible}
|
||||
visible={visible}
|
||||
onVisibleChange={togglePopover}
|
||||
title={popoverTitle}
|
||||
destroyTooltipOnHide={this.props.createNew}
|
||||
>
|
||||
|
@ -18,16 +18,20 @@
|
||||
*/
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Metric } from '@superset-ui/chart-controls/lib/types';
|
||||
import columnType from 'src/explore/propTypes/columnType';
|
||||
import { OptionControlLabel } from 'src/explore/components/OptionControls';
|
||||
import AdhocMetricOption from './AdhocMetricOption';
|
||||
import AdhocMetric from './AdhocMetric';
|
||||
import savedMetricType from './savedMetricType';
|
||||
import adhocMetricType from './adhocMetricType';
|
||||
import { DndItemType } from '../../DndItemType';
|
||||
|
||||
const propTypes = {
|
||||
option: PropTypes.oneOfType([savedMetricType, adhocMetricType]).isRequired,
|
||||
option: PropTypes.oneOfType([
|
||||
savedMetricType,
|
||||
adhocMetricType,
|
||||
Metric,
|
||||
PropTypes.string,
|
||||
]).isRequired,
|
||||
index: PropTypes.number.isRequired,
|
||||
onMetricEdit: PropTypes.func,
|
||||
onRemoveMetric: PropTypes.func,
|
||||
@ -81,19 +85,6 @@ export default function MetricDefinitionValue({
|
||||
|
||||
return <AdhocMetricOption {...metricOptionProps} />;
|
||||
}
|
||||
if (typeof option === 'string') {
|
||||
return (
|
||||
<OptionControlLabel
|
||||
label={option}
|
||||
onRemove={onRemoveMetric}
|
||||
onMoveLabel={onMoveLabel}
|
||||
onDropLabel={onDropLabel}
|
||||
type={DndItemType.FilterOption}
|
||||
index={index}
|
||||
isFunction
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
MetricDefinitionValue.propTypes = propTypes;
|
||||
|
@ -18,6 +18,6 @@
|
||||
*/
|
||||
export type savedMetricType = {
|
||||
metric_name: string;
|
||||
verbose_name: string;
|
||||
verbose_name?: string;
|
||||
expression: string;
|
||||
};
|
||||
|
@ -42,6 +42,7 @@ import FilterBoxItemControl from './FilterBoxItemControl';
|
||||
import DndColumnSelectControl, {
|
||||
DndColumnSelect,
|
||||
DndFilterSelect,
|
||||
DndMetricSelect,
|
||||
} from './DndColumnSelectControl';
|
||||
|
||||
const controlMap = {
|
||||
@ -57,6 +58,7 @@ const controlMap = {
|
||||
DndColumnSelectControl,
|
||||
DndColumnSelect,
|
||||
DndFilterSelect,
|
||||
DndMetricSelect,
|
||||
FixedOrMetricControl,
|
||||
HiddenControl,
|
||||
SelectAsyncControl,
|
||||
|
Loading…
Reference in New Issue
Block a user