Remove Question's `update` method & related code (#25531)

* Remove _update from Question

* Update TimeseriesGroupingWidget

* Update ExtendedOptions

* Update SummarizeSidebar

* Update AddAggregationButton and AggreationItem

* Remove update method from MBQLClause

* Update ChartTypeSidebar

* Update GuiQueryEditor

* Update NativeQueryEditor

* Update BulkFilterModal

* Update Notebook

* Update NotebookSteps

* Update NotebookStep

* Update AggregateStep

* Update BreakoutStep

* Update DataStep

* Update ExpressionStep

* Update FilterStep

* Update JoinStep

* Update LimitStep

* Update SortStep

* Update NativeQueryButton

* Update QuestionDataSelector

* Update QuestionFilters

* Update QuestionRowCount

* Update View

* Update random doc

* Ensure we have a 'datasetQuery' in the setDatasetQuery function

* Ensure we have a 'datasetQuery' in the setDatasetQuery action

frontend/src/metabase-lib/README.md

@@ -3,11 +3,10 @@
 - `setFoo(bar)`: returns clone of the wrapper but with the "foo" attribute to set to `bar`
 - `replace(object)`: returns clone of parent wrapper with this object replaced by `object`
 - `remove()`: returns clone of the parent wrapper with this object removed
-- `update()`: propagates current wrapper update to parent wrapper, recursively
 
 Examples:
 
-- `question().query().aggregation()[0].setDimension(dimension).update()`
+- `question().query().aggregation()[0].setDimension(dimension)`
 
 Exceptions:
 

frontend/src/metabase-lib/lib/Question.ts

@@ -82,8 +82,6 @@ import {
   ALERT_TYPE_TIMESERIES_GOAL,
 } from "metabase-lib/lib/Alert";
 
-type QuestionUpdateFn = (q: Question) => Promise<void> | null | undefined;
-
 export type QuestionCreatorOpts = {
   databaseId?: DatabaseId;
   tableId?: TableId;
@@ -120,11 +118,6 @@ class QuestionInner {
    */
   _parameterValues: ParameterValues;
 
-  /**
-   * Bound update function, if any
-   */
-  _update: QuestionUpdateFn | null | undefined;
-
   /**
    * Question constructor
    */
@@ -132,7 +125,6 @@ class QuestionInner {
     card: CardObject,
     metadata?: Metadata,
     parameterValues?: ParameterValues,
-    update?: QuestionUpdateFn | null | undefined,
   ) {
     this._card = card;
     this._metadata =
@@ -146,16 +138,10 @@ class QuestionInner {
         questions: {},
       });
     this._parameterValues = parameterValues || {};
-    this._update = update;
   }
 
   clone() {
-    return new Question(
-      this._card,
-      this._metadata,
-      this._parameterValues,
-      this._update,
-    );
+    return new Question(this._card, this._metadata, this._parameterValues);
   }
 
   metadata(): Metadata {
@@ -172,27 +158,6 @@ class QuestionInner {
     return q;
   }
 
-  /**
-   * calls the passed in update function (useful for chaining) or bound update function with the question
-   * NOTE: this passes Question instead of card, unlike how Query passes dataset_query
-   */
-  update(update?: QuestionUpdateFn, ...args: any[]) {
-    // TODO: if update returns a new card, create a new Question based on that and return it
-    if (update) {
-      update(this, ...args);
-    } else if (this._update) {
-      this._update(this, ...args);
-    } else {
-      throw new Error("Question update function not provided or bound");
-    }
-  }
-
-  bindUpdate(update: QuestionUpdateFn) {
-    const q = this.clone();
-    q._update = update;
-    return q;
-  }
-
   withoutNameAndId() {
     return this.setCard(
       chain(this.card())

frontend/src/metabase-lib/lib/queries/Query.ts

@@ -9,11 +9,9 @@ import Variable from "metabase-lib/lib/variables/Variable";
 import { memoizeClass } from "metabase-lib/lib/utils";
 import DimensionOptions from "metabase-lib/lib/DimensionOptions";
 
-type QueryUpdateFn = (datasetQuery: DatasetQuery) => void;
 /**
  * An abstract class for all query types (StructuredQuery & NativeQuery)
  */
-
 class QueryInner {
   _metadata: Metadata;
 
@@ -119,17 +117,6 @@ class QueryInner {
   setDefaultQuery(): QueryInner {
     return this;
   }
-
-  /**
-   * Helper for updating with functions that expect a DatasetQuery object, or proxy to parent question
-   */
-  update(update?: QueryUpdateFn, ...args: any[]) {
-    if (update) {
-      return update(this.datasetQuery(), ...args);
-    } else {
-      return this.question().update(undefined, ...args);
-    }
-  }
 }
 
 export default class Query extends memoizeClass<QueryInner>("question")(

frontend/src/metabase-lib/lib/queries/structured/MBQLClause.ts

@@ -49,13 +49,6 @@ export default class MBQLArrayClause extends Array {
     return this._index;
   }
 
-  /**
-   * replaces the previous clause with this one and propagates an update, recursively
-   */
-  update(...args: any) {
-    return this.replace(this).update(undefined, ...args);
-  }
-
   parent() {
     return this.replace(this);
   }
@@ -110,13 +103,6 @@ export class MBQLObjectClause {
     return this._index;
   }
 
-  /**
-   * replaces the previous clause with this one and propagates an update, recursively
-   */
-  update(...args: any) {
-    return this.replace(this).update(undefined, ...args);
-  }
-
   parent() {
     return this.replace(this);
   }

frontend/src/metabase/admin/datamodel/components/PartialQueryBuilder.jsx

@@ -11,6 +11,7 @@ import Tables from "metabase/entities/tables";
 import GuiQueryEditor from "metabase/query_builder/components/GuiQueryEditor";
 import * as Urls from "metabase/lib/urls";
 import Question from "metabase-lib/lib/Question";
+import Query from "metabase-lib/lib/queries/Query";
 
 import withTableMetadataLoaded from "../hoc/withTableMetadataLoaded";
 
@@ -75,6 +76,10 @@ class PartialQueryBuilder extends Component {
   }
 
   setDatasetQuery = datasetQuery => {
+    if (datasetQuery instanceof Query) {
+      datasetQuery = datasetQuery.datasetQuery();
+    }
+
     this.props.onChange(datasetQuery.query);
     this.props.updatePreviewSummary(datasetQuery);
   };

frontend/src/metabase/modes/components/TimeseriesGroupingWidget.jsx

@@ -9,20 +9,16 @@ import TimeGroupingPopover from "metabase/query_builder/components/TimeGroupingP
 import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
 import SelectButton from "metabase/core/components/SelectButton";
 
-// set the display automatically then run
-function updateAndRun(query) {
-  query.question().setDefaultDisplay().update(null, { run: true });
-}
-
 export default class TimeseriesGroupingWidget extends Component {
   static propTypes = {
     query: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
   };
 
   _popover;
 
   render() {
-    const { query } = this.props;
+    const { query, onChange } = this.props;
 
     if (isStructured(query.datasetQuery())) {
       const breakouts = query.breakouts();
@@ -49,9 +45,20 @@ export default class TimeseriesGroupingWidget extends Component {
                 d.isSameBaseDimension(dimension),
               );
               if (index >= 0) {
-                updateAndRun(query.updateBreakout(index, dimension.mbql()));
+                const newQuestion = query
+                  .updateBreakout(index, dimension.mbql())
+                  .question()
+                  .setDefaultDisplay();
+
+                onChange(newQuestion);
               } else {
-                updateAndRun(query.clearBreakouts().breakout(dimension.mbql()));
+                const newQuestion = query
+                  .clearBreakouts()
+                  .breakout(dimension.mbql())
+                  .question()
+                  .setDefaultDisplay();
+
+                onChange(newQuestion);
               }
               if (this._popover) {
                 this._popover.close();

frontend/src/metabase/modes/components/modes/TimeseriesMode.jsx

@@ -13,12 +13,21 @@ import PivotByCategoryDrill from "../drill/PivotByCategoryDrill";
 import PivotByLocationDrill from "../drill/PivotByLocationDrill";
 
 const TimeseriesModeFooter = props => {
+  const onChange = question => {
+    const { updateQuestion } = props;
+    updateQuestion(question, { run: true });
+  };
+
   return (
     <div className="flex layout-centered">
       <span className="mr1">{t`View`}</span>
       <TimeseriesFilterWidget {...props} card={props.lastRunCard} />
       <span className="mx1">{t`by`}</span>
-      <TimeseriesGroupingWidget {...props} card={props.lastRunCard} />
+      <TimeseriesGroupingWidget
+        {...props}
+        onChange={onChange}
+        card={props.lastRunCard}
+      />
     </div>
   );
 };

frontend/src/metabase/query_builder/actions/core/core.js

@@ -18,6 +18,7 @@ import { openUrl } from "metabase/redux/app";
 import Questions from "metabase/entities/questions";
 import Databases from "metabase/entities/databases";
 import { fetchAlertsForQuestion } from "metabase/alert/alert";
+import Query from "metabase-lib/lib/queries/Query";
 
 import { trackNewQuestionSaved } from "../../analytics";
 import {
@@ -160,6 +161,10 @@ export const navigateToNewCardInsideQB = createThunkAction(
 // DEPRECATED, still used in a couple places
 export const setDatasetQuery =
   (datasetQuery, options) => (dispatch, getState) => {
+    if (datasetQuery instanceof Query) {
+      datasetQuery = datasetQuery.datasetQuery();
+    }
+
     const question = getQuestion(getState());
     dispatch(updateQuestion(question.setDatasetQuery(datasetQuery), options));
   };

frontend/src/metabase/query_builder/components/ExtendedOptions.jsx

@@ -34,9 +34,10 @@ export class ExtendedOptionsPopover extends Component {
 
   setExpression(name, expression, previousName) {
     const { query, setDatasetQuery } = this.props;
-    query
-      .updateExpression(name, expression, previousName)
-      .update(setDatasetQuery);
+
+    const newQuery = query.updateExpression(name, expression, previousName);
+    setDatasetQuery(newQuery);
+
     this.setState({ editExpression: null });
     MetabaseAnalytics.trackStructEvent(
       "QueryBuilder",
@@ -47,7 +48,10 @@ export class ExtendedOptionsPopover extends Component {
 
   removeExpression(name) {
     const { query, setDatasetQuery } = this.props;
-    query.removeExpression(name).update(setDatasetQuery);
+
+    const newQuery = query.removeExpression(name);
+    setDatasetQuery(newQuery);
+
     this.setState({ editExpression: null });
 
     MetabaseAnalytics.trackStructEvent("QueryBuilder", "Remove Expression");
@@ -55,7 +59,10 @@ export class ExtendedOptionsPopover extends Component {
 
   setLimit = limit => {
     const { query, setDatasetQuery } = this.props;
-    query.updateLimit(limit).update(setDatasetQuery);
+
+    const newQuery = query.setLimit(limit);
+    setDatasetQuery(newQuery);
+
     MetabaseAnalytics.trackStructEvent("QueryBuilder", "Set Limit", limit);
     if (this.props.onClose) {
       this.props.onClose();
@@ -78,9 +85,9 @@ export class ExtendedOptionsPopover extends Component {
           tableMetadata={query.table()}
           sort={sort}
           fieldOptions={query.sortOptions(sort)}
-          removeOrderBy={() => query.removeSort(index).update(setDatasetQuery)}
+          removeOrderBy={() => setDatasetQuery(query.removeSort(index))}
           updateOrderBy={orderBy =>
-            query.updateSort(index, orderBy).update(setDatasetQuery)
+            setDatasetQuery(query.updateSort(index, orderBy))
           }
         />
       ));
@@ -90,7 +97,7 @@ export class ExtendedOptionsPopover extends Component {
           <AddClauseButton
             text={t`Pick a field to sort by`}
             onClick={() => {
-              query.sort(["asc", null]).update(setDatasetQuery);
+              setDatasetQuery(query.sort(["asc", null]));
             }}
           />
         );

frontend/src/metabase/query_builder/components/GuiQueryEditor.jsx

@@ -94,11 +94,9 @@ export default class GuiQueryEditor extends React.Component {
           <FilterWidgetList
             query={query}
             filters={filters}
-            removeFilter={index =>
-              query.removeFilter(index).update(setDatasetQuery)
-            }
+            removeFilter={index => setDatasetQuery(query.removeFilter(index))}
             updateFilter={(index, filter) =>
-              query.updateFilter(index, filter).update(setDatasetQuery)
+              setDatasetQuery(query.updateFilter(index, filter))
             }
           />
         );
@@ -135,9 +133,7 @@ export default class GuiQueryEditor extends React.Component {
             <FilterPopover
               isNew
               query={query}
-              onChangeFilter={filter =>
-                query.filter(filter).update(setDatasetQuery)
-              }
+              onChangeFilter={filter => setDatasetQuery(query.filter(filter))}
               onClose={() => this.filterPopover.current.close()}
             />
           </PopoverWithTrigger>
@@ -178,10 +174,8 @@ export default class GuiQueryEditor extends React.Component {
             query={query}
             onChangeAggregation={aggregation =>
               aggregation
-                ? query
-                    .updateAggregation(index, aggregation)
-                    .update(setDatasetQuery)
-                : query.removeAggregation(index).update(setDatasetQuery)
+                ? setDatasetQuery(query.updateAggregation(index, aggregation))
+                : setDatasetQuery(query.removeAggregation(index))
             }
             showMetrics={false}
             showRawData
@@ -241,8 +235,8 @@ export default class GuiQueryEditor extends React.Component {
           breakoutOptions={query.breakoutOptions(breakout)}
           onChangeBreakout={breakout =>
             breakout
-              ? query.updateBreakout(index, breakout).update(setDatasetQuery)
-              : query.removeBreakout(index).update(setDatasetQuery)
+              ? setDatasetQuery(query.updateBreakout(index, breakout))
+              : setDatasetQuery(query.removeBreakout(index))
           }
         >
           {this.renderAdd(index === 0 ? t`Add a grouping` : null)}

frontend/src/metabase/query_builder/components/NativeQueryEditor.jsx

@@ -423,14 +423,15 @@ class NativeQueryEditor extends Component {
   }, AUTOCOMPLETE_DEBOUNCE_DURATION);
 
   onChange() {
-    const { query } = this.props;
+    const { query, setDatasetQuery } = this.props;
     if (this._editor && !this._localUpdate) {
       this._updateSize();
       if (query.queryText() !== this._editor.getValue()) {
-        query
-          .setQueryText(this._editor.getValue())
-          .updateSnippetsWithIds(this.props.snippets)
-          .update(this.props.setDatasetQuery);
+        setDatasetQuery(
+          query
+            .setQueryText(this._editor.getValue())
+            .updateSnippetsWithIds(this.props.snippets),
+        );
       }
     }
 
@@ -443,12 +444,9 @@ class NativeQueryEditor extends Component {
 
   /// Change the Database we're currently editing a query for.
   setDatabaseId = databaseId => {
-    const { query } = this.props;
+    const { query, setDatasetQuery } = this.props;
     if (query.databaseId() !== databaseId) {
-      query
-        .setDatabaseId(databaseId)
-        .setDefaultCollection()
-        .update(this.props.setDatasetQuery);
+      setDatasetQuery(query.setDatabaseId(databaseId).setDefaultCollection());
       if (this._editor && !this.props.readOnly) {
         // HACK: the cursor doesn't blink without this intended small delay
         setTimeout(() => this._editor.focus(), 50);
@@ -458,18 +456,16 @@ class NativeQueryEditor extends Component {
 
   setTableId = tableId => {
     // TODO: push more of this into metabase-lib?
-    const { query } = this.props;
+    const { query, setDatasetQuery } = this.props;
     const table = query.metadata().table(tableId);
     if (table?.name !== query.collection()) {
-      query.setCollectionName(table.name).update(this.props.setDatasetQuery);
+      setDatasetQuery(query.setCollectionName(table.name));
     }
   };
 
   setParameterIndex = (parameterId, parameterIndex) => {
     const { query, setDatasetQuery } = this.props;
-    query
-      .setParameterIndex(parameterId, parameterIndex)
-      .update(setDatasetQuery);
+    setDatasetQuery(query.setParameterIndex(parameterId, parameterIndex));
   };
 
   handleFilterButtonClick = () => {
@@ -492,6 +488,7 @@ class NativeQueryEditor extends Component {
       snippetCollections = [],
       resizable,
       requireWriteback = false,
+      setDatasetQuery,
     } = this.props;
 
     const parameters = query.question().parameters();
@@ -568,9 +565,7 @@ class NativeQueryEditor extends Component {
             <SnippetModal
               onSnippetUpdate={(newSnippet, oldSnippet) => {
                 if (newSnippet.name !== oldSnippet.name) {
-                  query
-                    .updateSnippetNames([newSnippet])
-                    .update(this.props.setDatasetQuery);
+                  setDatasetQuery(query.updateSnippetNames([newSnippet]));
                 }
               }}
               snippet={this.props.modalSnippet}

frontend/src/metabase/query_builder/components/QueryModals.jsx

@@ -54,6 +54,11 @@ class QueryModals extends React.Component {
     }
   };
 
+  onQueryChange = query => {
+    const question = query.question();
+    this.props.updateQuestion(question, { run: true });
+  };
+
   render() {
     const {
       modal,
@@ -166,7 +171,11 @@ class QueryModals extends React.Component {
       </Modal>
     ) : modal === MODAL_TYPES.FILTERS ? (
       <Modal fit onClose={onCloseModal}>
-        <BulkFilterModal question={question} onClose={onCloseModal} />
+        <BulkFilterModal
+          question={question}
+          onQueryChange={this.onQueryChange}
+          onClose={onCloseModal}
+        />
       </Modal>
     ) : modal === MODAL_TYPES.HISTORY ? (
       <Modal onClose={onCloseModal}>

frontend/src/metabase/query_builder/components/filters/modals/BulkFilterModal/BulkFilterModal.tsx

@@ -36,12 +36,14 @@ import { fixBetweens, getSearchHits } from "./utils";
 
 export interface BulkFilterModalProps {
   question: Question;
+  onQueryChange: (query: StructuredQuery) => void;
   onClose?: () => void;
 }
 
 const BulkFilterModal = ({
   question,
   onClose,
+  onQueryChange,
 }: BulkFilterModalProps): JSX.Element | null => {
   const [query, setQuery] = useState(getQuery(question));
   const [isChanged, setIsChanged] = useState(false);
@@ -87,9 +89,9 @@ const BulkFilterModal = ({
 
   const handleApplyQuery = useCallback(() => {
     const preCleanedQuery = fixBetweens(query);
-    preCleanedQuery.clean().update(undefined, { run: true });
+    onQueryChange(preCleanedQuery.clean());
     onClose?.();
-  }, [query, onClose]);
+  }, [query, onClose, onQueryChange]);
 
   const clearFilters = () => {
     setQuery(query.clearFilters());

frontend/src/metabase/query_builder/components/notebook/Notebook.jsx

@@ -16,6 +16,7 @@ export default function Notebook({ className, ...props }) {
     isResultDirty,
     runQuestionQuery,
     setQueryBuilderMode,
+    updateQuestion,
     hasVisualizeButton = true,
   } = props;
 
@@ -26,7 +27,8 @@ export default function Notebook({ className, ...props }) {
     if (cleanQuestion.display() === "table") {
       cleanQuestion = cleanQuestion.setDefaultDisplay();
     }
-    await cleanQuestion.update();
+
+    await updateQuestion(cleanQuestion);
   }
 
   // vizualize switches the view to the question's visualization.

frontend/src/metabase/query_builder/components/notebook/NotebookStep.jsx

@@ -166,7 +166,7 @@ export default class NotebookStep extends React.Component {
               name="close"
               className="ml-auto cursor-pointer text-light text-medium-hover hover-child"
               tooltip={t`Remove`}
-              onClick={() => step.revert(step.query).update(updateQuery)}
+              onClick={() => updateQuery(step.revert(step.query))}
               data-testid="remove-step"
             />
           </StepHeader>

frontend/src/metabase/query_builder/components/notebook/NotebookSteps.jsx

@@ -38,7 +38,7 @@ export default class NotebookSteps extends React.Component {
   };
 
   render() {
-    const { question, className } = this.props;
+    const { question, className, updateQuestion } = this.props;
     const { openSteps, lastOpenedStep } = this.state;
 
     if (!question) {
@@ -51,8 +51,10 @@ export default class NotebookSteps extends React.Component {
       <div className={cx(className, "pt3")}>
         {steps.map((step, index) => {
           // pass a version of updateQuery that cleans subsequent steps etc
-          const updateQuery = async datasetQuery => {
-            await step.update(datasetQuery).update();
+          const updateQuery = async query => {
+            const datasetQuery = query.datasetQuery();
+            const updatedQuery = step.update(datasetQuery);
+            await updateQuestion(updatedQuery.question());
             // mark the step as "closed" since we can assume it's been added or removed by the updateQuery
             this.closeStep(step.id);
           };

frontend/src/metabase/query_builder/components/notebook/steps/AggregateStep.jsx

@@ -36,13 +36,13 @@ export default function AggregateStep({
           aggregation={aggregation}
           onChangeAggregation={newAggregation =>
             aggregation
-              ? aggregation.replace(newAggregation).update(updateQuery)
-              : query.aggregate(newAggregation).update(updateQuery)
+              ? updateQuery(aggregation.replace(newAggregation))
+              : updateQuery(query.aggregate(newAggregation))
           }
         />
       )}
       isLastOpened={isLastOpened}
-      onRemove={aggregation => aggregation.remove().update(updateQuery)}
+      onRemove={aggregation => updateQuery(aggregation.remove())}
       canRemove={aggregation => aggregation.canRemove()}
     />
   );

frontend/src/metabase/query_builder/components/notebook/steps/BreakoutStep.jsx

@@ -36,13 +36,13 @@ export default function BreakoutStep({
           breakout={breakout}
           onChangeBreakout={newBreakout =>
             breakout
-              ? breakout.replace(newBreakout).update(updateQuery)
-              : query.breakout(newBreakout).update(updateQuery)
+              ? updateQuery(breakout.replace(newBreakout))
+              : updateQuery(query.breakout(newBreakout))
           }
         />
       )}
       isLastOpened={isLastOpened}
-      onRemove={breakout => breakout.remove().update(updateQuery)}
+      onRemove={breakout => updateQuery(breakout.remove())}
     />
   );
 }

frontend/src/metabase/query_builder/components/notebook/steps/DataStep.jsx

@@ -54,7 +54,7 @@ function DataStep({ color, query, updateQuery }) {
           selectedDatabaseId={query.databaseId()}
           selectedTableId={query.tableId()}
           setSourceTableFn={tableId =>
-            query.setTableId(tableId).setDefaultQuery().update(updateQuery)
+            updateQuery(query.setTableId(tableId).setDefaultQuery())
           }
           isInitiallyOpen={!query.tableId()}
           triggerElement={
@@ -80,12 +80,12 @@ const DataFieldsPicker = ({ query, updateQuery, ...props }) => {
   const fields = query.fields();
 
   const handleSelectNone = () => {
-    query
-      .setFields([
+    updateQuery(
+      query.setFields([
         dimensions[0].mbql(),
         ...expressionDimensions.map(d => d.mbql()),
-      ])
-      .update(updateQuery);
+      ]),
+    );
   };
 
   const handleToggleDimension = dimension => {
@@ -99,7 +99,7 @@ const DataFieldsPicker = ({ query, updateQuery, ...props }) => {
       })
       .map(d => d.mbql());
 
-    query.setFields(newFields).update(updateQuery);
+    updateQuery(query.setFields(newFields));
   };
 
   const hasOneColumnSelected = fields.filter(isLocalField).length === 1;
@@ -110,7 +110,7 @@ const DataFieldsPicker = ({ query, updateQuery, ...props }) => {
       dimensions={dimensions}
       selectedDimensions={selectedDimensions}
       isAll={!fields || fields.length === 0}
-      onSelectAll={() => query.clearFields().update(updateQuery)}
+      onSelectAll={() => updateQuery(query.clearFields())}
       onSelectNone={handleSelectNone}
       disableSelected={hasOneColumnSelected}
       onToggleDimension={handleToggleDimension}

frontend/src/metabase/query_builder/components/notebook/steps/ExpressionStep.jsx

@@ -23,16 +23,16 @@ export default function ExpressionStep({
           expression={expression}
           onChangeExpression={(newName, newExpression) =>
             expression
-              ? query
-                  .updateExpression(newName, newExpression, name)
-                  .update(updateQuery)
-              : query.addExpression(newName, newExpression).update(updateQuery)
+              ? updateQuery(
+                  query.updateExpression(newName, newExpression, name),
+                )
+              : updateQuery(query.addExpression(newName, newExpression))
           }
         />
       )}
       isLastOpened={isLastOpened}
       onRemove={([name, expression]) =>
-        query.removeExpression(name).update(updateQuery)
+        updateQuery(query.removeExpression(name))
       }
     />
   );