You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by yj...@apache.org on 2021/01/11 05:52:57 UTC
[superset] branch master updated: feat(explore): add tooltip to
timepicker label (#12401)
This is an automated email from the ASF dual-hosted git repository.
yjc pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 23263da feat(explore): add tooltip to timepicker label (#12401)
23263da is described below
commit 23263da9f30d95c74011fac967c474bf454e39e9
Author: Yongjie Zhao <yo...@gmail.com>
AuthorDate: Mon Jan 11 13:52:02 2021 +0800
feat(explore): add tooltip to timepicker label (#12401)
---
.../DateFilterControl/DateFilterControl.tsx | 65 ++++++++++++++--------
1 file changed, 41 insertions(+), 24 deletions(-)
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx
index 5bf3d8f..fc440a2 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx
@@ -37,6 +37,7 @@ import Popover from 'src/common/components/Popover';
import { Divider } from 'src/common/components';
import Icon from 'src/components/Icon';
import { Select } from 'src/components/Select';
+import { Tooltip } from 'src/common/components/Tooltip';
import { SelectOptionType, FrameType } from './types';
import {
COMMON_RANGE_VALUES_SET,
@@ -181,27 +182,41 @@ export default function DateFilterControl(props: DateFilterLabelProps) {
const [timeRangeValue, setTimeRangeValue] = useState(value);
const [validTimeRange, setValidTimeRange] = useState<boolean>(false);
const [evalResponse, setEvalResponse] = useState<string>(value);
+ const [tooltipTitle, setTooltipTitle] = useState<string>(value);
useEffect(() => {
- const valueToLower = value.toLowerCase();
- if (
- valueToLower.startsWith('last') ||
- valueToLower.startsWith('next') ||
- valueToLower.startsWith('previous')
- ) {
- setActualTimeRange(value);
- setValidTimeRange(true);
- } else {
- fetchTimeRange(value, endpoints).then(({ value, error }) => {
- if (error) {
- setEvalResponse(error || '');
- setValidTimeRange(false);
+ fetchTimeRange(value, endpoints).then(({ value: actualRange, error }) => {
+ if (error) {
+ setEvalResponse(error || '');
+ setValidTimeRange(false);
+ setTooltipTitle(value || '');
+ } else {
+ /*
+ HRT == human readable text
+ ADR == actual datetime range
+ +--------------+------+----------+--------+----------+-----------+
+ | | Last | Previous | Custom | Advanced | No Filter |
+ +--------------+------+----------+--------+----------+-----------+
+ | control pill | HRT | HRT | ADR | ADR | ADR |
+ +--------------+------+----------+--------+----------+-----------+
+ | tooltip | ADR | ADR | HRT | HRT | HRT |
+ +--------------+------+----------+--------+----------+-----------+
+ */
+ const valueToLower = value.toLowerCase();
+ if (
+ valueToLower.startsWith('last') ||
+ valueToLower.startsWith('next') ||
+ valueToLower.startsWith('previous')
+ ) {
+ setActualTimeRange(value);
+ setTooltipTitle(actualRange || '');
} else {
- setActualTimeRange(value || '');
- setValidTimeRange(true);
+ setActualTimeRange(actualRange || '');
+ setTooltipTitle(value || '');
}
- });
- }
+ setValidTimeRange(true);
+ }
+ });
}, [value]);
useEffect(() => {
@@ -327,13 +342,15 @@ export default function DateFilterControl(props: DateFilterLabelProps) {
onVisibleChange={togglePopover}
overlayStyle={overlayStyle}
>
- <Label
- className="pointer"
- data-test="time-range-trigger"
- onClick={() => setShow(true)}
- >
- {actualTimeRange}
- </Label>
+ <Tooltip placement="top" title={tooltipTitle}>
+ <Label
+ className="pointer"
+ data-test="time-range-trigger"
+ onClick={() => setShow(true)}
+ >
+ {actualTimeRange}
+ </Label>
+ </Tooltip>
</StyledPopover>
</>
);