[GitHub] williaster closed pull request #5038: [Explore] [Adhoc Metrics/Filters] Force Ace editor to refresh when it is shown

[GitBox]

williaster closed pull request #5038: [Explore] [Adhoc Metrics/Filters] Force 
Ace editor to refresh when it is shown
URL: https://github.com/apache/incubator-superset/pull/5038
 
 
   

This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:

As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):

diff --git 
a/superset/assets/src/explore/components/AdhocFilterEditPopoverSqlTabContent.jsx
 
b/superset/assets/src/explore/components/AdhocFilterEditPopoverSqlTabContent.jsx
index 8a3a97bd82..7e8a6a6a39 100644
--- 
a/superset/assets/src/explore/components/AdhocFilterEditPopoverSqlTabContent.jsx
+++ 
b/superset/assets/src/explore/components/AdhocFilterEditPopoverSqlTabContent.jsx
@@ -33,6 +33,7 @@ export default class AdhocFilterEditPopoverSqlTabContent 
extends React.Component
     super(props);
     this.onSqlExpressionChange = this.onSqlExpressionChange.bind(this);
     this.onSqlExpressionClauseChange = 
this.onSqlExpressionClauseChange.bind(this);
+    this.handleAceEditorRef = this.handleAceEditorRef.bind(this);
 
     this.selectProps = {
       multi: false,
@@ -59,6 +60,10 @@ export default class AdhocFilterEditPopoverSqlTabContent 
extends React.Component
     }
   }
 
+  componentDidUpdate() {
+    this.aceEditorRef.editor.resize();
+  }
+
   onSqlExpressionClauseChange(clause) {
     this.props.onChange(this.props.adhocFilter.duplicateWith({
       clause: clause && clause.clause,
@@ -73,6 +78,12 @@ export default class AdhocFilterEditPopoverSqlTabContent 
extends React.Component
     }));
   }
 
+  handleAceEditorRef(ref) {
+    if (ref) {
+      this.aceEditorRef = ref;
+    }
+  }
+
   render() {
     const { adhocFilter, height } = this.props;
 
@@ -101,6 +112,7 @@ export default class AdhocFilterEditPopoverSqlTabContent 
extends React.Component
         </FormGroup>
         <FormGroup>
           <AceEditor
+            ref={this.handleAceEditorRef}
             mode="sql"
             theme="github"
             height={(height - 100) + 'px'}
diff --git a/superset/assets/src/explore/components/AdhocMetricEditPopover.jsx 
b/superset/assets/src/explore/components/AdhocMetricEditPopover.jsx
index 24ac5b5fbc..5611a32c13 100644
--- a/superset/assets/src/explore/components/AdhocMetricEditPopover.jsx
+++ b/superset/assets/src/explore/components/AdhocMetricEditPopover.jsx
@@ -46,6 +46,8 @@ export default class AdhocMetricEditPopover extends 
React.Component {
     this.onDragDown = this.onDragDown.bind(this);
     this.onMouseMove = this.onMouseMove.bind(this);
     this.onMouseUp = this.onMouseUp.bind(this);
+    this.handleAceEditorRef = this.handleAceEditorRef.bind(this);
+    this.refreshAceEditor = this.refreshAceEditor.bind(this);
     this.state = {
       adhocMetric: this.props.adhocMetric,
       width: startingWidth,
@@ -137,6 +139,16 @@ export default class AdhocMetricEditPopover extends 
React.Component {
     document.removeEventListener('mousemove', this.onMouseMove);
   }
 
+  handleAceEditorRef(ref) {
+    if (ref) {
+      this.aceEditorRef = ref;
+    }
+  }
+
+  refreshAceEditor() {
+    setTimeout(() => this.aceEditorRef.editor.resize(), 0);
+  }
+
   render() {
     const {
       adhocMetric: propsAdhocMetric,
@@ -200,6 +212,8 @@ export default class AdhocMetricEditPopover extends 
React.Component {
           defaultActiveKey={adhocMetric.expressionType}
           className="adhoc-metric-edit-tabs"
           style={{ height: this.state.height, width: this.state.width }}
+          onSelect={this.refreshAceEditor}
+          animation={false}
         >
           <Tab className="adhoc-metric-edit-tab" 
eventKey={EXPRESSION_TYPES.SIMPLE} title="Simple">
             <FormGroup>
@@ -216,6 +230,7 @@ export default class AdhocMetricEditPopover extends 
React.Component {
             <Tab className="adhoc-metric-edit-tab" 
eventKey={EXPRESSION_TYPES.SQL} title="Custom SQL">
               <FormGroup>
                 <AceEditor
+                  ref={this.handleAceEditorRef}
                   mode="sql"
                   theme="github"
                   height={(this.state.height - 43) + 'px'}


 

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


With regards,
Apache Git Services

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