You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by GitBox <gi...@apache.org> on 2021/08/11 14:18:18 UTC

[GitHub] [superset] kgabryje opened a new pull request #16196: fix(explore): adhoc metrics popover resets label after hovering outside

kgabryje opened a new pull request #16196:
URL: https://github.com/apache/superset/pull/16196


   ### SUMMARY
   When user opened "Add new metric" popover and selected a column and/or aggregate, metric title is automatically set to "column(aggregate)". However, when user hovers with their mouse outside of the popover before saving, the title gets reset. Then, after saving, the label appears to be correct, but an empty string gets passed to executed query as a label, causing seemingly unrelated errors.
   This PR converts `MetricsControl` component from class to functional and uses memoization to prevent resetting the title.
   
   ### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
   Before: see linked issue and video in the comments
   After:
   https://user-images.githubusercontent.com/15073128/129045681-e33f2ab4-4aac-4d95-b928-6f5c3705e13f.mov
   
   ### TESTING INSTRUCTIONS
   1. Open a chart
   2. Open new metric popover
   3. Add a column and aggregate
   4. Hover with your mouse outside of the popover - nothing should happen
   5. Save the metric and run query
   6. Chart should render as expected
   
   ### ADDITIONAL INFORMATION
   <!--- Check any relevant boxes with "x" -->
   <!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue -->
   - [x] Has associated issue: fixes #16067 
   - [ ] Changes UI
   - [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351))
     - [ ] Migration is atomic, supports rollback & is backwards-compatible
     - [ ] Confirm DB migration upgrade and downgrade tested
     - [ ] Runtime estimates and downtime expectations provided
   - [ ] Introduces new feature or API
   - [ ] Removes existing feature or API
   
   CC @graceguo-supercat @junlincc 


-- 
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.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] kgabryje commented on a change in pull request #16196: fix(explore): adhoc metrics popover resets label after hovering outside

Posted by GitBox <gi...@apache.org>.
kgabryje commented on a change in pull request #16196:
URL: https://github.com/apache/superset/pull/16196#discussion_r686950267



##########
File path: superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx
##########
@@ -123,295 +116,233 @@ function coerceAdhocMetrics(value) {
   });
 }
 
-class MetricsControl extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.onChange = this.onChange.bind(this);
-    this.onMetricEdit = this.onMetricEdit.bind(this);
-    this.onNewMetric = this.onNewMetric.bind(this);
-    this.onRemoveMetric = this.onRemoveMetric.bind(this);
-    this.moveLabel = this.moveLabel.bind(this);
-    this.checkIfAggregateInInput = this.checkIfAggregateInInput.bind(this);
-    this.optionsForSelect = this.optionsForSelect.bind(this);
-    this.selectFilterOption = this.selectFilterOption.bind(this);
-    this.isAutoGeneratedMetric = this.isAutoGeneratedMetric.bind(this);
-    this.optionRenderer = option => <MetricDefinitionOption option={option} />;
-    this.valueRenderer = (option, index) => (
-      <MetricDefinitionValue
-        key={index}
-        index={index}
-        option={option}
-        onMetricEdit={this.onMetricEdit}
-        onRemoveMetric={this.onRemoveMetric}
-        columns={this.props.columns}
-        datasource={this.props.datasource}
-        savedMetrics={this.props.savedMetrics}
-        savedMetricsOptions={getOptionsForSavedMetrics(
-          this.props.savedMetrics,
-          this.props.value,
-          this.props.value?.[index],
-        )}
-        datasourceType={this.props.datasourceType}
-        onMoveLabel={this.moveLabel}
-        onDropLabel={() => this.props.onChange(this.state.value)}
-        multi={this.props.multi}
-      />
-    );
-    this.select = null;
-    this.selectRef = ref => {
-      if (ref) {
-        this.select = ref.select;
-      } else {
-        this.select = null;
-      }
-    };
-    this.state = {
-      aggregateInInput: null,
-      options: this.optionsForSelect(this.props),
-      value: coerceAdhocMetrics(this.props.value),
-    };
-  }
+const emptySavedMetric = { metric_name: '', expression: '' };
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { value } = this.props;
-    if (
-      !isEqual(this.props.columns, nextProps.columns) ||
-      !isEqual(this.props.savedMetrics, nextProps.savedMetrics)
-    ) {
-      this.setState({ options: this.optionsForSelect(nextProps) });
+const MetricsControl = ({
+  onChange,
+  multi,
+  value: propsValue,
+  columns,
+  savedMetrics,
+  datasource,
+  datasourceType,
+  ...props
+}) => {
+  const [value, setValue] = useState(coerceAdhocMetrics(propsValue));
+  const theme = useTheme();
 
-      // 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(nextProps.value, nextProps)) {
-        this.props.onChange([]);
+  const handleChange = useCallback(
+    opts => {
+      // if clear out options
+      if (opts === null) {
+        onChange(null);
+        return;
       }
-    }
-    if (value !== nextProps.value) {
-      this.setState({ value: coerceAdhocMetrics(nextProps.value) });
-    }
-  }
-
-  onNewMetric(newMetric) {
-    this.setState(
-      prevState => ({
-        ...prevState,
-        value: [...prevState.value, newMetric],
-      }),
-      () => {
-        this.onChange(this.state.value);
-      },
-    );
-  }
 
-  onMetricEdit(changedMetric, oldMetric) {
-    this.setState(
-      prevState => ({
-        value: prevState.value.map(value => {
-          if (
-            // compare saved metrics
-            value === oldMetric.metric_name ||
-            // compare adhoc metrics
-            typeof value.optionName !== 'undefined'
-              ? value.optionName === oldMetric.optionName
-              : false
-          ) {
-            return changedMetric;
+      let transformedOpts;
+      if (Array.isArray(opts)) {
+        transformedOpts = opts;
+      } else {
+        transformedOpts = opts ? [opts] : [];
+      }

Review comment:
       Good point, done!




-- 
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.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] kgabryje commented on pull request #16196: fix(explore): adhoc metrics popover resets label after hovering outside

Posted by GitBox <gi...@apache.org>.
kgabryje commented on pull request #16196:
URL: https://github.com/apache/superset/pull/16196#issuecomment-896884080


   /testenv up


-- 
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.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] rosemarie-chiu commented on pull request #16196: fix(explore): adhoc metrics popover resets label after hovering outside

Posted by GitBox <gi...@apache.org>.
rosemarie-chiu commented on pull request #16196:
URL: https://github.com/apache/superset/pull/16196#issuecomment-896954916


   🏷 2021.31


-- 
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.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] github-actions[bot] commented on pull request #16196: fix(explore): adhoc metrics popover resets label after hovering outside

Posted by GitBox <gi...@apache.org>.
github-actions[bot] commented on pull request #16196:
URL: https://github.com/apache/superset/pull/16196#issuecomment-896954273


   Ephemeral environment shutdown and build artifacts deleted.


-- 
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.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] codecov[bot] commented on pull request #16196: fix(explore): adhoc metrics popover resets label after hovering outside

Posted by GitBox <gi...@apache.org>.
codecov[bot] commented on pull request #16196:
URL: https://github.com/apache/superset/pull/16196#issuecomment-896953482


   # [Codecov](https://codecov.io/gh/apache/superset/pull/16196?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
   > Merging [#16196](https://codecov.io/gh/apache/superset/pull/16196?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (86cc19a) into [master](https://codecov.io/gh/apache/superset/commit/4df3672baad2791bef57f0348ccc0eaa8d09222e?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (4df3672) will **decrease** coverage by `0.09%`.
   > The diff coverage is `38.57%`.
   
   [![Impacted file tree graph](https://codecov.io/gh/apache/superset/pull/16196/graphs/tree.svg?width=650&height=150&src=pr&token=KsB0fHcx6l&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)](https://codecov.io/gh/apache/superset/pull/16196?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   
   ```diff
   @@            Coverage Diff             @@
   ##           master   #16196      +/-   ##
   ==========================================
   - Coverage   76.83%   76.73%   -0.10%     
   ==========================================
     Files         996      996              
     Lines       53060    52999      -61     
     Branches     6766     6738      -28     
   ==========================================
   - Hits        40766    40670      -96     
   - Misses      12066    12100      +34     
   - Partials      228      229       +1     
   ```
   
   | Flag | Coverage Δ | |
   |---|---|---|
   | javascript | `70.97% <38.57%> (-0.21%)` | :arrow_down: |
   
   Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
   
   | [Impacted Files](https://codecov.io/gh/apache/superset/pull/16196?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
   |---|---|---|
   | [...mponents/controls/MetricControl/MetricsControl.jsx](https://codecov.io/gh/apache/superset/pull/16196/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9NZXRyaWNDb250cm9sL01ldHJpY3NDb250cm9sLmpzeA==) | `42.05% <38.57%> (-40.89%)` | :arrow_down: |
   | [...ontrols/DndColumnSelectControl/DndMetricSelect.tsx](https://codecov.io/gh/apache/superset/pull/16196/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9EbmRDb2x1bW5TZWxlY3RDb250cm9sL0RuZE1ldHJpY1NlbGVjdC50c3g=) | `41.21% <0.00%> (-0.57%)` | :arrow_down: |
   
   ------
   
   [Continue to review full report at Codecov](https://codecov.io/gh/apache/superset/pull/16196?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   > **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   > `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
   > Powered by [Codecov](https://codecov.io/gh/apache/superset/pull/16196?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [4df3672...86cc19a](https://codecov.io/gh/apache/superset/pull/16196?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   


-- 
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.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] villebro commented on a change in pull request #16196: fix(explore): adhoc metrics popover resets label after hovering outside

Posted by GitBox <gi...@apache.org>.
villebro commented on a change in pull request #16196:
URL: https://github.com/apache/superset/pull/16196#discussion_r686892793



##########
File path: superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx
##########
@@ -123,295 +116,233 @@ function coerceAdhocMetrics(value) {
   });
 }
 
-class MetricsControl extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.onChange = this.onChange.bind(this);
-    this.onMetricEdit = this.onMetricEdit.bind(this);
-    this.onNewMetric = this.onNewMetric.bind(this);
-    this.onRemoveMetric = this.onRemoveMetric.bind(this);
-    this.moveLabel = this.moveLabel.bind(this);
-    this.checkIfAggregateInInput = this.checkIfAggregateInInput.bind(this);
-    this.optionsForSelect = this.optionsForSelect.bind(this);
-    this.selectFilterOption = this.selectFilterOption.bind(this);
-    this.isAutoGeneratedMetric = this.isAutoGeneratedMetric.bind(this);
-    this.optionRenderer = option => <MetricDefinitionOption option={option} />;
-    this.valueRenderer = (option, index) => (
-      <MetricDefinitionValue
-        key={index}
-        index={index}
-        option={option}
-        onMetricEdit={this.onMetricEdit}
-        onRemoveMetric={this.onRemoveMetric}
-        columns={this.props.columns}
-        datasource={this.props.datasource}
-        savedMetrics={this.props.savedMetrics}
-        savedMetricsOptions={getOptionsForSavedMetrics(
-          this.props.savedMetrics,
-          this.props.value,
-          this.props.value?.[index],
-        )}
-        datasourceType={this.props.datasourceType}
-        onMoveLabel={this.moveLabel}
-        onDropLabel={() => this.props.onChange(this.state.value)}
-        multi={this.props.multi}
-      />
-    );
-    this.select = null;
-    this.selectRef = ref => {
-      if (ref) {
-        this.select = ref.select;
-      } else {
-        this.select = null;
-      }
-    };
-    this.state = {
-      aggregateInInput: null,
-      options: this.optionsForSelect(this.props),
-      value: coerceAdhocMetrics(this.props.value),
-    };
-  }
+const emptySavedMetric = { metric_name: '', expression: '' };
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { value } = this.props;
-    if (
-      !isEqual(this.props.columns, nextProps.columns) ||
-      !isEqual(this.props.savedMetrics, nextProps.savedMetrics)
-    ) {
-      this.setState({ options: this.optionsForSelect(nextProps) });
+const MetricsControl = ({
+  onChange,
+  multi,
+  value: propsValue,
+  columns,
+  savedMetrics,
+  datasource,
+  datasourceType,
+  ...props
+}) => {
+  const [value, setValue] = useState(coerceAdhocMetrics(propsValue));
+  const theme = useTheme();
 
-      // 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(nextProps.value, nextProps)) {
-        this.props.onChange([]);
+  const handleChange = useCallback(
+    opts => {
+      // if clear out options
+      if (opts === null) {
+        onChange(null);
+        return;
       }
-    }
-    if (value !== nextProps.value) {
-      this.setState({ value: coerceAdhocMetrics(nextProps.value) });
-    }
-  }
-
-  onNewMetric(newMetric) {
-    this.setState(
-      prevState => ({
-        ...prevState,
-        value: [...prevState.value, newMetric],
-      }),
-      () => {
-        this.onChange(this.state.value);
-      },
-    );
-  }
 
-  onMetricEdit(changedMetric, oldMetric) {
-    this.setState(
-      prevState => ({
-        value: prevState.value.map(value => {
-          if (
-            // compare saved metrics
-            value === oldMetric.metric_name ||
-            // compare adhoc metrics
-            typeof value.optionName !== 'undefined'
-              ? value.optionName === oldMetric.optionName
-              : false
-          ) {
-            return changedMetric;
+      let transformedOpts;
+      if (Array.isArray(opts)) {
+        transformedOpts = opts;
+      } else {
+        transformedOpts = opts ? [opts] : [];
+      }

Review comment:
       nit: would `const transformedOpts = ensureIsArray(opts)` work here?




-- 
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.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] rusackas merged pull request #16196: fix(explore): adhoc metrics popover resets label after hovering outside

Posted by GitBox <gi...@apache.org>.
rusackas merged pull request #16196:
URL: https://github.com/apache/superset/pull/16196


   


-- 
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.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] github-actions[bot] commented on pull request #16196: fix(explore): adhoc metrics popover resets label after hovering outside

Posted by GitBox <gi...@apache.org>.
github-actions[bot] commented on pull request #16196:
URL: https://github.com/apache/superset/pull/16196#issuecomment-896885790


   @kgabryje Ephemeral environment spinning up at http://34.217.60.12:8080. Credentials are `admin`/`admin`. Please allow several minutes for bootstrapping and startup.


-- 
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.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org