</div>
    </div>
  </fieldset>

<fieldset ng-if="filterDesc.uiData.$filterOptions === 'ES_QUERY_STRING'" style="margin-top:15px">
    <div class="horizontal-flex">
      <div class="noflex var-col-selector" style="width: 240px; height: 150px; margin-right: 10px;">
        <tabs no-hash-update>
          <pane title="Columns">
            <div class="selector-list" style="overflow: auto; height: 114px;">
              <a ng-repeat="col in getColumns() track by col.name"
                 class="column-name-line qa_recipe_filter-editor-column-name"
                 ng-click="clickedOnColumnName(col.name)"
                 title="{{col.name}} ({{col.type | columnTypeToName}})"
              >
                <span class="column-name"> {{col.name}} </span>
                <span class="column-type"> {{col.type | columnTypeToName}} </span>
              </a>
            </div>
          </pane>
          <pane title="Variables">
            <div class="selector-list">
              <a ng-repeat="(var, value) in recipeVariables"
                 class="variable-name-line qa_recipe_filter-editor-variable-name"
                 ng-click="clickedOnVariableName(var)"
                 title="{{var}}: {{value}}"
              >
                <span class="variable-name"> {{var}} </span>
                <span class="variable-value"> {{value}} </span>
              </a>
            </div>
          </pane>
        </tabs>
      </div>
      <div class="flex" style="width:240px; margin-top: 6px;">
                <textarea
                        id='grel-editor' class="qa_recipe_filter-editor-textarea"
                        ng-model="filterDesc.expression"
                        ng-change="onESQueryStringChange()"
                        ui-codemirror="sqlEditorOptions"
                />
        <div class="help-inline" style="width:100%">Read <doclink page="other_recipes/sampling#elasticsearch-query-string" title="the documentation" /> to learn more</div>
      </div>
    </div>
  </fieldset>
</div>