You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by vi...@apache.org on 2021/01/12 12:35:00 UTC
[superset] 05/08: feat(explore): add tooltip to timepicker label
(#12401)
This is an automated email from the ASF dual-hosted git repository.
villebro pushed a commit to branch 1.0
in repository https://gitbox.apache.org/repos/asf/superset.git
commit e3b65f2519fcf19f423e29aeadabcfd34fd2e3ce
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>
</>
);