-
Notifications
You must be signed in to change notification settings - Fork 13.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(explore): Dataset panel option tooltips #19259
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -18,9 +18,41 @@ | |
*/ | ||
import React, { ReactNode } from 'react'; | ||
|
||
import { t } from '@superset-ui/core'; | ||
import { css, styled, t } from '@superset-ui/core'; | ||
import { ColumnMeta, Metric } from '@superset-ui/chart-controls'; | ||
|
||
const TooltipSectionWrapper = styled.div` | ||
${({ theme }) => css` | ||
display: flex; | ||
flex-direction: column; | ||
font-size: ${theme.typography.sizes.s}px; | ||
line-height: 1.2; | ||
|
||
&:not(:last-of-type) { | ||
margin-bottom: ${theme.gridUnit * 2}px; | ||
} | ||
`} | ||
`; | ||
|
||
const TooltipSectionLabel = styled.span` | ||
${({ theme }) => css` | ||
font-weight: ${theme.typography.weights.bold}; | ||
`} | ||
`; | ||
|
||
const TooltipSection = ({ | ||
label, | ||
text, | ||
}: { | ||
label: ReactNode; | ||
text: ReactNode; | ||
}) => ( | ||
<TooltipSectionWrapper> | ||
<TooltipSectionLabel>{label}</TooltipSectionLabel> | ||
<span>{text}</span> | ||
</TooltipSectionWrapper> | ||
); | ||
|
||
export const isLabelTruncated = (labelRef?: React.RefObject<any>): boolean => | ||
!!( | ||
labelRef && | ||
|
@@ -35,22 +67,25 @@ export const getColumnTooltipNode = ( | |
column: ColumnMeta, | ||
labelRef?: React.RefObject<any>, | ||
): ReactNode => { | ||
// don't show tooltip if it hasn't verbose_name and hasn't truncated | ||
if (!column.verbose_name && !isLabelTruncated(labelRef)) { | ||
if ( | ||
!column.verbose_name && | ||
!column.description && | ||
!isLabelTruncated(labelRef) | ||
) { | ||
return null; | ||
} | ||
|
||
if (column.verbose_name) { | ||
return ( | ||
<> | ||
<div>{t('column name: %s', column.column_name)}</div> | ||
<div>{t('verbose name: %s', column.verbose_name)}</div> | ||
</> | ||
); | ||
} | ||
|
||
// show column name in tooltip when column truncated | ||
return t('column name: %s', column.column_name); | ||
return ( | ||
<> | ||
<TooltipSection label={t('Column name')} text={column.column_name} /> | ||
{column.verbose_name && ( | ||
<TooltipSection label={t('Label')} text={column.verbose_name} /> | ||
)} | ||
{column.description && ( | ||
<TooltipSection label={t('Description')} text={column.description} /> | ||
)} | ||
</> | ||
); | ||
}; | ||
|
||
type MetricType = Omit<Metric, 'id'> & { label?: string }; | ||
|
@@ -59,23 +94,27 @@ export const getMetricTooltipNode = ( | |
metric: MetricType, | ||
labelRef?: React.RefObject<any>, | ||
): ReactNode => { | ||
// don't show tooltip if it hasn't verbose_name, label and hasn't truncated | ||
if (!metric.verbose_name && !metric.label && !isLabelTruncated(labelRef)) { | ||
if ( | ||
!metric.verbose_name && | ||
!metric.description && | ||
!metric.label && | ||
!isLabelTruncated(labelRef) | ||
) { | ||
return null; | ||
} | ||
|
||
if (metric.verbose_name) { | ||
return ( | ||
<> | ||
<div>{t('metric name: %s', metric.metric_name)}</div> | ||
<div>{t('verbose name: %s', metric.verbose_name)}</div> | ||
</> | ||
); | ||
} | ||
|
||
if (isLabelTruncated(labelRef) && metric.label) { | ||
return t('label name: %s', metric.label); | ||
} | ||
|
||
return t('metric name: %s', metric.metric_name); | ||
return ( | ||
<> | ||
<TooltipSection label={t('Metric name')} text={metric.metric_name} /> | ||
{(metric.label || metric.verbose_name) && ( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If both are falsy, but not empty, it could potentially render something. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think empty strings in logical expressions always resolve to |
||
<TooltipSection | ||
label={t('Label')} | ||
text={metric.label || metric.verbose_name} | ||
/> | ||
)} | ||
{metric.description && ( | ||
<TooltipSection label={t('Description')} text={metric.description} /> | ||
)} | ||
</> | ||
); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not relevant to this PR, but we should probably add a range of line heights to our theme at some point. CC @michael-s-molina