rusackas commented on a change in pull request #10936:
URL:
https://github.com/apache/incubator-superset/pull/10936#discussion_r513096004
##########
File path:
superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx
##########
@@ -69,6 +72,50 @@ const defaultProps = {
directPathLastUpdated: 0,
};
+/**
+ * Renders any styles necessary to highlight the chart's relationship to the
focused filter.
+ *
+ * If there is no focused filter scope (i.e. most of the time), this will be
just a pass-through.
+ *
+ * If the chart is outside the scope of the focused filter, dims the chart.
+ *
+ * If the chart is in the scope of the focused filter,
+ * renders a highlight around the chart.
+ *
+ * If ChartHolder were a function component, this could be implemented as a
hook instead.
+ */
+const FilterFocusHighlight = React.forwardRef(
+ ({ chartId, focusedFilterScope, ...otherProps }, ref) => {
+ const theme = useTheme();
+ if (!focusedFilterScope) return <div ref={ref} {...otherProps} />;
+
+ // we use local styles here instead of a conditionally-applied class,
+ // because adding any conditional class to this container
+ // causes performance issues in Chrome.
+
+ // default to the "de-emphasized" state
+ let styles = { opacity: 0.3, pointerEvents: 'none' };
+
+ if (
+ chartId === focusedFilterScope.chartId ||
+ getChartIdsInFilterScope({
+ filterScope: focusedFilterScope.scope,
+ }).includes(chartId)
+ ) {
+ // apply the "highlighted" state if this chart
+ // contains a filter being focused, or is in scope of a focused filter.
+ styles = {
+ borderColor: theme.colors.primary.light2,
+ opacity: 1,
+ boxShadow: `0px 0px 8px ${theme.colors.primary.light2}`,
+ pointerEvents: 'auto',
+ };
+ }
+
+ return <div ref={ref} style={styles} {...otherProps} />;
Review comment:
```suggestion
// inline styles are used here due to a performance issue when
adding/changing a class, which causes a reflow
return <div ref={ref} style={styles} {...otherProps} />;
```
----------------------------------------------------------------
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:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
