From 61fe2cbf5d0753868dfe0ddb38b79224551dee2e Mon Sep 17 00:00:00 2001
From: Matthias Mohr <m.mohr@uni-muenster.de>
Date: Thu, 4 May 2023 17:13:05 +0200
Subject: [PATCH] CQL improvements (#315)

* CQL refactor
* Boolean support
* Support POST & CQL JSON
* Show only supported queryables + UI
* Add another rel from OGC
* ...
---
 .eslintrc                               |   2 +-
 babel.config.js                         |   3 +-
 src/components/ApiCapabilitiesMixin.js  |   5 +-
 src/components/ItemFilter.vue           |  99 +++++++----
 src/components/QueryableInput.vue       | 226 ++++++++----------------
 src/locales/de/texts.json               |  10 ++
 src/locales/en/texts.json               |  10 ++
 src/models/cql2/cql.js                  |  23 +++
 src/models/cql2/operators/advanced.js   |  24 +++
 src/models/cql2/operators/comparison.js | 127 +++++++++++++
 src/models/cql2/operators/logical.js    |  52 ++++++
 src/models/cql2/operators/operator.js   |  32 ++++
 src/models/cql2/queryable.js            | 121 +++++++++++++
 src/models/cql2/value.js                |  65 +++++++
 src/models/queryable.js                 |  72 --------
 src/models/stac.js                      |   6 +-
 src/rels.js                             |   3 +-
 src/store/index.js                      |   5 +-
 src/utils.js                            |  85 +++++----
 19 files changed, 673 insertions(+), 297 deletions(-)
 create mode 100644 src/models/cql2/cql.js
 create mode 100644 src/models/cql2/operators/advanced.js
 create mode 100644 src/models/cql2/operators/comparison.js
 create mode 100644 src/models/cql2/operators/logical.js
 create mode 100644 src/models/cql2/operators/operator.js
 create mode 100644 src/models/cql2/queryable.js
 create mode 100644 src/models/cql2/value.js
 delete mode 100644 src/models/queryable.js

diff --git a/.eslintrc b/.eslintrc
index 5a3f341b6..e6f7cb808 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,6 +1,6 @@
 {
   "parserOptions": {
-    "ecmaVersion": 2020,
+    "ecmaVersion": 2022,
     "sourceType": "module"
   },
   "globals": {
diff --git a/babel.config.js b/babel.config.js
index 9bc21ecc7..da9df6caf 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -3,6 +3,7 @@ module.exports = {
     '@vue/cli-plugin-babel/preset'
   ],
   plugins: [
-    "@babel/plugin-proposal-optional-chaining"
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-class-properties"
   ]
 };
diff --git a/src/components/ApiCapabilitiesMixin.js b/src/components/ApiCapabilitiesMixin.js
index c7bf66470..0baefc573 100644
--- a/src/components/ApiCapabilitiesMixin.js
+++ b/src/components/ApiCapabilitiesMixin.js
@@ -45,7 +45,7 @@ export default ogcapi => ({
       }
       let textMode = this.supportsConformance(CQL_TEXT);
       let jsonMode = this.supportsConformance(CQL_JSON);
-      if (!textMode/* && !jsonMode*/) {
+      if (!textMode && !jsonMode) {
         return null;
       }
 
@@ -55,6 +55,9 @@ export default ogcapi => ({
         advancedComparison: this.supportsConformance(CQL_ADV_COMPARISON)
       };
     },
+    cqlAdvComparison() {
+      return this.supportsConformance(CQL_ADV_COMPARISON);
+    },
     filterComponentProps() {
       return {
         canSort: this.canSort,
diff --git a/src/components/ItemFilter.vue b/src/components/ItemFilter.vue
index c50ff87de..029ec4986 100644
--- a/src/components/ItemFilter.vue
+++ b/src/components/ItemFilter.vue
@@ -61,20 +61,21 @@
 
         <div class="additional-filters" v-if="cql && Array.isArray(queryables) && queryables.length > 0">
           <b-form-group :label="$t('search.additionalFilters')" label-for="availableFields">
-            <b-alert variant="warning" show>{{ $t('featureExperimental') }}</b-alert>
+            <b-form-radio-group id="logical" v-model="filtersAndOr" :options="andOrOptions" name="logical" size="sm" />
 
             <b-dropdown size="sm" :text="$t('search.addFilter')" block variant="primary" class="mt-2 mb-3" menu-class="w-100">
-              <b-dropdown-item v-for="queryable in queryables" :key="queryable.id" @click="additionalFieldSelected(queryable)">
-                {{ queryable.title }}
-              </b-dropdown-item>
+              <template v-for="queryable in queryables">
+                <b-dropdown-item v-if="queryable.supported" :key="queryable.id" @click="additionalFieldSelected(queryable)">
+                  {{ queryable.title }}
+                </b-dropdown-item>
+              </template>
             </b-dropdown>
 
             <QueryableInput
-              v-for="(filter, index) in query.filters" :key="filter.id"
-              :title="filter.queryable.title"
+              v-for="(filter, index) in filters" :key="filter.id"
               :value.sync="filter.value"
               :operator.sync="filter.operator"
-              :schema="filter.queryable.schema"
+              :queryable="filter.queryable"
               :index="index"
               :cql="cql"
               @remove-queryable="removeQueryable(index)"
@@ -82,6 +83,8 @@
           </b-form-group>
         </div>
 
+        <hr>
+
         <b-form-group v-if="canSort" :label="$t('sort.title')" label-for="sort" :description="$t('search.notFullySupported')">
           <multiselect
             id="sort" :value="sortTerm" @input="sortFieldSet"
@@ -111,13 +114,41 @@
 </template>
 
 <script>
-import { BDropdown, BDropdownItem, BForm, BFormGroup, BFormInput, BFormCheckbox } from 'bootstrap-vue';
+import { BDropdown, BDropdownItem, BForm, BFormGroup, BFormInput, BFormCheckbox, BFormRadioGroup } from 'bootstrap-vue';
 import Multiselect from 'vue-multiselect';
 
 import { mapGetters, mapState } from "vuex";
 import DatePickerMixin from './DatePickerMixin';
 import Loading from './Loading.vue';
 import Utils from '../utils';
+import CqlLogicalOperator from '../models/cql2/operators/logical';
+import Cql from '../models/cql2/cql';
+import { CqlEqual } from '../models/cql2/operators/comparison';
+import CqlValue from '../models/cql2/value';
+
+function getQueryDefaults() {
+  return {
+    datetime: null,
+    bbox: null,
+    limit: null,
+    ids: [],
+    collections: [],
+    sortby: null,
+    filters: []
+  };
+}
+
+function getDefaults() {
+  return {
+    sortOrder: 1,
+    sortTerm: null,
+    provideBBox: false,
+    query: getQueryDefaults(),
+    filtersAndOr: 'and',
+    filters: [],
+    selectedCollections: []
+  };
+}
 
 export default {
   name: 'ItemFilter',
@@ -128,6 +159,7 @@ export default {
     BFormGroup,
     BFormInput,
     BFormCheckbox,
+    BFormRadioGroup,
     QueryableInput: () => import('./QueryableInput.vue'),
     Loading,
     Map: () => import('./Map.vue'),
@@ -168,19 +200,20 @@ export default {
     }
   },
   data() {
-    return {
-      sortOrder: 1,
-      sortTerm: null,
+    return Object.assign({
       maxItems: 10000,
-      provideBBox: false,
-      query: this.getDefaultValues(),
-      loaded: false,
-      selectedCollections: []
-    };
+      loaded: false
+    }, getDefaults());
   },
   computed: {
     ...mapState(['itemsPerPage', 'uiLanguage', 'queryables', 'apiCollections']),
     ...mapGetters(['hasMoreCollections', 'root']),
+    andOrOptions() {
+      return [
+        { value: 'and', text: this.$i18n.t('search.logical.and') },
+        { value: 'or', text: this.$i18n.t('search.logical.or') },
+      ];
+    },
     sortOptions() {
       return [
         { value: null, text: this.$t('default') },
@@ -205,13 +238,10 @@ export default {
     value: {
       immediate: true,
       handler(value) {
-        let query = Object.assign({}, this.getDefaultValues(), value);
+        let query = Object.assign(getQueryDefaults(), value);
         if (Array.isArray(query.datetime)) {
           query.datetime = query.datetime.map(Utils.dateFromUTC);
         }
-        else if (query.filters.length > 0) {
-          query.filters = query.filters.map(f => Object.assign({}, f));
-        }
         this.query = query;
       }
     }
@@ -244,35 +274,32 @@ export default {
     sortDirectionSet(value) {
       this.sortOrder = value;
     },
+    buildFilter() {
+      const args = this.filters.map(f => new f.operator(f.queryable, f.value));
+      const logical = CqlLogicalOperator.create(this.filtersAndOr, args);
+      return new Cql(logical);
+    },
     removeQueryable(queryableIndex) {
-      this.query.filters.splice(queryableIndex, 1);
+      this.filters.splice(queryableIndex, 1);
     },
     additionalFieldSelected(queryable) {
-      this.query.filters.push({
-        value: null,
-        operator: null,
+      this.filters.push({
+        value: CqlValue.create(queryable.defaultValue),
+        operator: CqlEqual,
         queryable
       });
     },
-    getDefaultValues() {
-      return {
-        datetime: null,
-        bbox: null,
-        limit: null,
-        ids: [],
-        collections: [],
-        sortby: null,
-        filters: []
-      };
-    },
     onSubmit() {
       if (this.canSort && this.sortTerm && this.sortOrder) {
         this.$set(this.query, 'sortby', this.formatSort());
       }
+      if (this.filters.length > 0) {
+        this.$set(this.query, 'filters', this.buildFilter());
+      }
       this.$emit('input', this.query, false);
     },
     async onReset() {
-      this.query = this.getDefaultValues();
+      Object.assign(this, getDefaults());
       this.$emit('input', {}, true);
     },
     setLimit(limit) {
diff --git a/src/components/QueryableInput.vue b/src/components/QueryableInput.vue
index e0e477d9d..2c1f75035 100644
--- a/src/components/QueryableInput.vue
+++ b/src/components/QueryableInput.vue
@@ -2,77 +2,96 @@
   <div class="queryable-group">
     <b-row class="queryable-row">
       <span class="title">
-        {{ title }}
+        {{ queryable.title }}
       </span>
 
-      <b-form-select
-        v-if="operatorOptions !== null"
-        size="sm"
-        class="op"
-        :value="operator"
-        @input="updateOperator($event)"
-        :options="operatorOptions"
+      <b-dropdown size="sm" class="op" variant="dark" split :text="operator.label" @click="iterateOps">
+        <b-dropdown-item-button
+          v-for="op in operators"
+          :key="op.SYMBOL"
+          :active="op === operator"
+          @click="updateOperator(op)"
+        >
+          {{ op.longLabel }}
+          <b-badge variant="dark" class="ml-2">{{ op.label }}</b-badge>
+        </b-dropdown-item-button>
+      </b-dropdown>
+      
+      <date-picker
+        v-if="queryable.isTemporal"
+        type="date"
+        class="value"
+        :lang="datepickerLang"
+        :format="datepickerFormat"
+        :value="value.value"
+        @input="updateValue($event)"
         v-bind="validation"
       />
 
       <b-form-select
-        v-if="queryableType === 'select'"
+        v-else-if="queryable.isSelection"
         :options="queryableOptions"
         size="sm"
         class="value"
-        :value="value"
+        :value="value.value"
         @input="updateValue($event)"
         v-bind="validation"
       />
       <b-form-input
-        v-else-if="queryableType === 'text'"
+        v-else-if="queryable.isText"
         size="sm"
         class="value"
-        :value="value"
+        :value="value.value"
         @input="updateValue($event)"
         v-bind="validation"
       />
       <b-form-input
-        v-else-if="queryableType === 'number'"
+        v-else-if="queryable.isNumeric"
         number
         type="number"
         size="sm"
         class="value"
-        :value="value"
+        :value="value.value"
         @input="updateValue($event)"
         v-bind="validation"
       />
-      <date-picker
-        v-else-if="queryableType === 'date'"
-        type="datetime"
+      <b-form-checkbox
+        v-else-if="queryable.isBoolean"
+        switch
         class="value"
-        :lang="datepickerLang"
-        :format="datepickerFormat"
-        :value="value"
+        :checked="value.value"
         @input="updateValue($event)"
         v-bind="validation"
-      />
+      >
+        {{ $t(`checkbox.${value.value}`) }}
+      </b-form-checkbox>
 
       <b-button class="delete" size="sm" variant="danger" @click="$emit('remove-queryable')">
         <b-icon-x-circle-fill aria-hidden="true" />
       </b-button>
     </b-row>
 
-    <b-row v-if="help" class="queryable-help text-muted small">
-      <Description :description="help" inline />
+    <b-row v-if="queryable.description || operator.description" class="queryable-help text-muted small">
+      <Description v-if="operator.description" :description="operator.description" inline />
+      <Description v-if="queryable.description" :description="queryable.description" inline />
     </b-row>
   </div>
 </template>
 
 <script>
-import { BFormInput, BFormSelect, BIconXCircleFill } from 'bootstrap-vue';
+import { BBadge, BDropdown, BDropdownItemButton, BFormCheckbox, BFormInput, BFormSelect, BIconXCircleFill } from 'bootstrap-vue';
 
 import DatePickerMixin from './DatePickerMixin';
 import Utils from '../utils';
+import CqlValue from '../models/cql2/value';
     
 export default {
   name: 'QueryableInput',
   components: {
+    BBadge, 
+    BDropdown,
+    BDropdownItemButton,
+    BFormCheckbox,
     BFormInput,
     BFormSelect,
     BIconXCircleFill,
@@ -82,38 +101,33 @@ export default {
     DatePickerMixin
   ],
   props: {
-    title: {
-      type: String,
-      required: true
-    },
-    // eslint-disable-next-line vue/require-prop-types
+    // eslint-disable-next-line
     value: {
       // Any type is allowed
-      default: null
     },
     operator: {
-      type: String,
-      default: null
+      type: Function,
+      required: true
     },
-    schema: {
+    queryable: {
       type: Object,
-      default: () => ({})
+      required: true
     },
     cql: {
       type: Object,
       required: true
-    },
+    }
   },
   computed: {
     validation() {
-      if (this.queryableType === 'text') {
+      if (this.isText && !this.isTemporal) {
         return {
           minlength: this.schema.minLength,
           maxlength: this.schema.maxLenggth,
           required: this.schema.minLength > 0
         };
       }
-      else if (this.queryableType === 'number') {
+      else if (this.isNumeric) {
         return {
           min: this.schema.minimum,
           max: this.schema.maximum
@@ -121,131 +135,40 @@ export default {
       }
       return {};
     },
-    schemaTypes() {
-      if (typeof this.schema.type === 'string') {
-        return [this.schema.type];
-      }
-      else if (Array.isArray(this.schema.type)) {
-        return this.schema.type;
-      }
-      return [];
-    },
-    isNumeric() {
-      return this.schemaTypes.includes('number') || this.schemaTypes.includes('integer');
-    },
-    help() {
-      if (this.operator === 'LIKE') {
-        return this.$t('search.likeOperatorDescription');
-      }
-      else if (this.queryableType === 'date') {
-        return this.$t('search.dateDescription');
-      }
-      return null;
-    },
-    queryableType() {
-      if ('enum' in this.schema) {
-        return 'select';
-      }
-      else if (this.isNumeric) {
-        return 'number';
-      }
-      else if (this.schemaTypes.includes('string')) {
-        if (this.schema.format === 'date-time') {
-          return 'date';
-        }
-        else {
-          return 'text';
-        }
-      }
-      return null;
+    schema() {
+      return this.queryable.schema;
     },
-    operatorOptions() {
-      const LESS_THAN = {text: this.$t('search.lessThan'), value: '<'};
-      const MORE_THAN = {text: this.$t('search.greaterThan'), value: '>'};
-      const EQUALS = {text: this.$t('search.equalTo'), value: '='};
-      const NOT_EQUALS = {text: this.$t('search.notEqualTo'), value: '<>'};
-      const LIKE = {text: this.$t('search.matches'), value: 'LIKE'};
-
-      let ops = [EQUALS, NOT_EQUALS];
-      if (this.isNumeric || this.queryableType === 'date') {
-        ops.push(LESS_THAN);
-        ops.push(MORE_THAN);
-      }
-      else if (this.queryableType === 'text' && this.cql.advancedComparison) {
-        ops.push(LIKE);
-      }
-      return ops;
+    operators() {
+      return this.queryable.getOperators(this.cql);
     },
     queryableOptions() {
-      if (this.queryableType !== 'select') {
-        return [];
+      if (this.queryable.isSelection) {
+        this.queryable.schema.enum.map(option => ({
+          value: option,
+          text: option
+        }));
       }
-      else {
-        return this.schema.enum.map((option) => {
-          if (typeof option === 'string') {
-            return {
-              value: option,
-              text: option
-            };
-          }
-          else {
-            return option;
-          }
-        });
-      }
-    },
-    selectedOperator() {
-      if (this.operatorOptions === null) {
-        return null;
-      }
-      return this.operatorOptions.find(o => o.value === this.operator);
-    }
-  },
-  mounted() {
-    if (this.operator === null) {
-      this.queryableVisible = true;
-    }
-    if (this.operator === null) {
-      this.updateOperator(this.operatorOptions[0].value);
-    }
-    if (this.value === null) {
-      this.updateValue(this.calculateDefaultValue());
+      return [];
     }
   },
   methods: {
+    iterateOps() {
+      let findIndex = this.operators.findIndex(op => op === this.operator);
+      let nextIndex = ++findIndex % this.operators.length;
+      this.updateOperator(this.operators[nextIndex]);
+    },
     updateValue(evt) {
       let val = Utils.isObject(evt) && 'target' in evt ? evt.target.value : evt;
-      if (typeof val === "string" && this.schemaTypes.includes('integer')) {
+      if (typeof val === "string" && this.queryable.is('integer')) {
         val = parseInt(val, 10);
       }
-      else if (typeof val === "string" && this.schemaTypes.includes('number')) {
+      else if (typeof val === "string" && this.queryable.is('number')) {
         val = parseFloat(val);
       }
-      this.$emit('update:value', val);
+      this.$emit('update:value', CqlValue.create(val));
     },
-    updateOperator(evt) {
-      let val = Utils.isObject(evt) && 'target' in evt ? evt.target.value : evt;
-      this.$emit('update:operator', val);
-    },
-    calculateDefaultValue() {
-      if (typeof this.schema.default !== 'undefined') {
-        return this.schema.default;
-      }
-      else if (this.queryableType === 'text') {
-        return '';
-      }
-      else if (this.queryableType === 'date') {
-        return new Date();
-      }
-      else if (this.queryableType === 'number') {
-        if (typeof this.schema.minimum !== 'undefined') {
-         return this.schema.minimum;
-        }
-        return 0;
-      }
-      else if (this.queryableType === 'select') {
-        return this.queryableOptions[0].value;
-      }
+    updateOperator(op) {
+      this.$emit('update:operator', op);
     }
   }
 };
@@ -262,9 +185,6 @@ export default {
   flex-wrap: nowrap;
   align-content: center;
 
-  .op {
-    width: 8rem;
-  }
   .delete {
     width: auto;
   }
@@ -274,6 +194,10 @@ export default {
   }
 }
 
+.op {
+  min-width: 4rem;
+}
+
 .queryable-help {
   display: block;
   margin: 0.25em 0 1em 0;
diff --git a/src/locales/de/texts.json b/src/locales/de/texts.json
index ef70e4016..170e1d8ab 100644
--- a/src/locales/de/texts.json
+++ b/src/locales/de/texts.json
@@ -46,6 +46,10 @@
     "loadMore": "Lade mehr...",
     "noMatches": "Keiner der Kataloge entspricht den Suchkriterien."
   },
+  "checkbox": {
+    "false": "Nein",
+    "true": "Ja"
+  },
   "copy": "Kopieren",
   "default": "Standardeinstellung",
   "defaultWithValue": "Standardeinstellung ({value})",
@@ -193,11 +197,17 @@
     "equalTo": "entspricht genau",
     "filterBySpatialExtent": "Filtern nach räumlicher Ausdehnung",
     "greaterThan": "größer als",
+    "greaterThanEqual": "größer als oder entspricht",
     "itemIds": "Element-Identifikationsnummern",
     "itemsPerPage": "Elemente pro Seite",
     "itemsPerPageDescription": "Anzahl der Elemente die pro Seite angefragft wird, maximal {maxItems} Elemente.",
     "lessThan": "kleiner als",
+    "lessThanEqual": "kleiner als oder entspricht",
     "likeOperatorDescription": "Platzhalterzeichen können verwendet werden. `_` entspricht einem einzelnen Zeichen, `%` entspricht einer beliebigen Anzahl an Zeichen. Um nach einem Platzhalterzeichen selber zu suchen, müssen ein `\\` vor das Zeichen gesetzt werden.",
+    "logical": {
+      "and": "Berücksichtige alle Filter (und)",
+      "or": "Berücksichtige mindestens einen der Filter (oder)"
+    },
     "matches": "enthält etwa",
     "metaDescription": "Durchsuche die angebotenen Daten von {title}.",
     "modifyCriteria": "Bitte die Suchkriterien ändern.",
diff --git a/src/locales/en/texts.json b/src/locales/en/texts.json
index d5c329414..b1959b639 100644
--- a/src/locales/en/texts.json
+++ b/src/locales/en/texts.json
@@ -46,6 +46,10 @@
     "loadMore": "Load more...",
     "noMatches": "No catalogs match the given search criteria."
   },
+  "checkbox": {
+    "false": "no",
+    "true": "yes"
+  },
   "copy": "Copy",
   "default": "Default",
   "defaultWithValue": "Default ({value})",
@@ -193,11 +197,17 @@
     "equalTo": "equal to",
     "filterBySpatialExtent": "Filter by spatial extent",
     "greaterThan": "greater than",
+    "greaterThanEqual": "greater than or equal to",
     "itemIds": "Item IDs",
     "itemsPerPage": "Items per page",
     "itemsPerPageDescription": "Number of items requested per page, max. {maxItems} items.",
     "lessThan": "less than",
+    "lessThanEqual": "less than or equal to",
     "likeOperatorDescription": "You can use wildcard characters. `_` matches a single character, `%` matches any number of characters. To search for a wildcard character specifically, you need to add a `\\` in front of the character.",
+    "logical": {
+      "and": "Match all filters (and)",
+      "or": "Match any filters (or)"
+    },
     "matches": "matches",
     "metaDescription": "Search through the data offering of {title}.",
     "modifyCriteria": "Please modify the search criteria.",
diff --git a/src/models/cql2/cql.js b/src/models/cql2/cql.js
new file mode 100644
index 000000000..7ad66e91b
--- /dev/null
+++ b/src/models/cql2/cql.js
@@ -0,0 +1,23 @@
+// https://docs.ogc.org/DRAFTS/21-065.html
+
+export default class Cql {
+
+  constructor(filters) {
+    this.filters = filters;
+  }
+
+  toJSON() {
+    return {
+      "filter-lang": "cql2-json",
+      filter: this.filters.toJSON()
+    };
+  }
+
+  toText() {
+    return {
+      "filter-lang": "cql2-text",
+      filter: this.filters.toText()
+    };
+  }
+
+}
\ No newline at end of file
diff --git a/src/models/cql2/operators/advanced.js b/src/models/cql2/operators/advanced.js
new file mode 100644
index 000000000..d070bf93d
--- /dev/null
+++ b/src/models/cql2/operators/advanced.js
@@ -0,0 +1,24 @@
+import i18n from '../../../i18n.js';
+import CqlComparisonOperator from './comparison';
+
+export class CqlLike extends CqlComparisonOperator {
+
+  static SYMBOL = "like";
+
+  constructor(pred = null, obj = null) {
+    super(CqlLike.SYMBOL, pred, obj);
+  }
+
+  static get label() {
+    return "~";
+  }
+
+  static get longLabel() {
+    return i18n.t('search.matches');
+  }
+
+  static get description() {
+    return i18n.t('search.likeOperatorDescription');
+  }
+
+}
diff --git a/src/models/cql2/operators/comparison.js b/src/models/cql2/operators/comparison.js
new file mode 100644
index 000000000..4d68042ed
--- /dev/null
+++ b/src/models/cql2/operators/comparison.js
@@ -0,0 +1,127 @@
+import i18n from '../../../i18n.js';
+import CqlOperator from './operator';
+
+export default class CqlComparisonOperator extends CqlOperator {
+
+  constructor(operator, pred = null, obj = null) {
+    super(operator, [pred, obj]);
+  }
+
+  clone(value) {
+    return new this.constructor(this.operator, this.args[0], value);
+  }
+
+  static create(pred, op, obj) {
+    if (["=", "==", "==="].includes(op)) {
+      return new CqlEqual(pred, obj);
+    }
+    else if (["<>", "!=", "!=="].includes(op)) {
+      return new CqlNotEqual(pred, obj);
+    }
+    else if (op === ">=") {
+      return new CqlGreaterThanEqual(pred, obj);
+    }
+    else if (op === ">") {
+      return new CqlGreaterThan(pred, obj);
+    }
+    else if (op === "<=") {
+      return new CqlLessThanEqual(pred, obj);
+    }
+    else if (op === "<") {
+      return new CqlLessThan(pred, obj);
+    }
+  }
+
+}
+
+export class CqlEqual extends CqlComparisonOperator {
+
+  static SYMBOL = "=";
+
+  constructor(pred = null, obj = null) {
+    super(CqlEqual.SYMBOL, pred, obj);
+  }
+
+  static get longLabel() {
+    return i18n.t('search.equalTo');
+  }
+
+}
+
+export class CqlNotEqual extends CqlComparisonOperator {
+
+  static SYMBOL = "<>";
+
+  constructor(pred = null, obj = null) {
+    super(CqlNotEqual.SYMBOL, pred, obj);
+  }
+
+  static get longLabel() {
+    return i18n.t('search.notEqualTo');
+  }
+
+}
+
+export class CqlGreaterThan extends CqlComparisonOperator {
+
+  static SYMBOL = ">";
+
+  constructor(pred = null, obj = null) {
+    super(CqlGreaterThan.SYMBOL, pred, obj);
+  }
+
+  static get longLabel() {
+    return i18n.t('search.greaterThan');
+  }
+
+}
+
+export class CqlGreaterThanEqual extends CqlComparisonOperator {
+
+  static SYMBOL = ">=";
+
+  constructor(pred = null, obj = null) {
+    super(CqlGreaterThanEqual.SYMBOL, pred, obj);
+  }
+
+  static get longLabel() {
+    return i18n.t('search.greaterThanEqual');
+  }
+
+}
+
+export class CqlLessThan extends CqlComparisonOperator {
+
+  static SYMBOL = "<";
+
+  constructor(pred = null, obj = null) {
+    super(CqlLessThan.SYMBOL, pred, obj);
+  }
+
+  static get longLabel() {
+    return i18n.t('search.lessThan');
+  }
+
+}
+
+export class CqlLessThanEqual extends CqlComparisonOperator {
+
+  static SYMBOL = "<=";
+
+  constructor(pred = null, obj = null) {
+    super(CqlLessThanEqual.SYMBOL, pred, obj);
+  }
+
+  static get longLabel() {
+    return i18n.t('search.lessThanEqual');
+  }
+  
+}
+
+/* export class CqlIsNull extends CqlComparisonOperator {
+  
+  constructor(pred = null) {
+    super("IS NULL", pred);
+  }
+
+} */
diff --git a/src/models/cql2/operators/logical.js b/src/models/cql2/operators/logical.js
new file mode 100644
index 000000000..fd741010d
--- /dev/null
+++ b/src/models/cql2/operators/logical.js
@@ -0,0 +1,52 @@
+//import i18n from '../../../i18n.js';
+import CqlOperator from './operator';
+
+export default class CqlLogicalOperator extends CqlOperator {
+
+  constructor(operator, args = []) {
+    super(operator, args);
+  }
+
+  static create(op, args) {
+    if (['&&', 'and'].includes(op)) {
+      return new CqlAnd(args);
+    }
+    else if (['||', 'or'].includes(op)) {
+      return new CqlOr(args);
+    }
+    else if (['!', 'not'].includes(op)) {
+      return new CqlNot(args);
+    }
+  }
+
+}
+
+export class CqlAnd extends CqlLogicalOperator {
+
+  static SYMBOL = "and";
+
+  constructor(args = []) {
+    super(CqlAnd.SYMBOL, args);
+  }
+
+}
+
+export class CqlOr extends CqlLogicalOperator {
+
+  static SYMBOL = "or";
+
+  constructor(args = []) {
+    super(CqlOr.SYMBOL, args);
+  }
+
+}
+
+export class CqlNot extends CqlLogicalOperator {
+
+  static SYMBOL = "not";
+
+  constructor(arg = null) {
+    super(CqlNot.SYMBOL, arg ? [arg] : null);
+  }
+
+}
diff --git a/src/models/cql2/operators/operator.js b/src/models/cql2/operators/operator.js
new file mode 100644
index 000000000..bd5ecfec0
--- /dev/null
+++ b/src/models/cql2/operators/operator.js
@@ -0,0 +1,32 @@
+export default class CqlOperator {
+
+  constructor(operator, args = []) {
+    this.operator = operator;
+    this.args = args;
+  }
+
+  toText() {
+    let op = this.operator.toUpperCase();
+    return this.args.map(arg => arg.toText()).join(` ${op} `);
+  }
+
+  toJSON() {
+    return {
+      op: this.operator,
+      args: this.args.map(arg => arg.toJSON())
+    };
+  }
+
+  static get description() {
+    return "";
+  }
+
+  static get label() {
+    return this.SYMBOL;
+  }
+
+  static get longLabel() {
+    return this.label;
+  }
+
+}
\ No newline at end of file
diff --git a/src/models/cql2/queryable.js b/src/models/cql2/queryable.js
new file mode 100644
index 000000000..3c81397fd
--- /dev/null
+++ b/src/models/cql2/queryable.js
@@ -0,0 +1,121 @@
+import { formatKey } from "@radiantearth/stac-fields/helper";
+import i18n from '../../i18n.js';
+import { CqlEqual, CqlGreaterThan, CqlGreaterThanEqual, CqlLessThan, CqlLessThanEqual, CqlNotEqual } from "./operators/comparison";
+import { CqlLike } from "./operators/advanced";
+
+export default class Queryable {
+
+  constructor(id, schema) {
+    this.id = id;
+    this.schema = schema;
+  }
+
+  get title() {
+    if (typeof this.schema.title === 'string') {
+      return this.schema.title;
+    }
+    return formatKey(this.id);
+  }
+
+  get description() {
+    if (this.isTemporal) {
+      return i18n.t('search.dateDescription');
+    }
+    return "";
+  }
+
+  get supported() {
+    return this.isText || this.isNumeric || this.isBoolean;
+  }
+
+  is(type) {
+    return this.types.includes(type);
+  }
+
+  get isSelection() {
+    return Array.isArray(this.schema.enum);
+  }
+
+  get isText() {
+    return this.is('string');
+  }
+
+  get isBoolean() {
+    return this.is('boolean');
+  }
+
+  get isNumeric() {
+    return this.is('number') || this.is('integer');
+  }
+
+  get isDate() {
+    return this.isText && this.schema.format === 'date';
+  }
+
+  get isDateTime() {
+    return this.isText && this.schema.format === 'date-time';
+  }
+
+  get isTemporal() {
+    return this.isDate || this.isDateTime;
+  }
+
+  get defaultValue() {
+    if (typeof this.schema.default !== 'undefined') {
+      return this.schema.default;
+    }
+    else if (this.isSelection) {
+      return this.schema.enum[0];
+    }
+    else if (this.isTemporal) {
+      return new Date();
+    }
+    else if (this.isNumeric) {
+      if (typeof this.schema.minimum !== 'undefined') {
+       return this.schema.minimum;
+      }
+      return 0;
+    }
+    else if (this.isText) {
+      return '';
+    }
+    else if (this.isBoolean) {
+      return false;
+    }
+    // todo: Support boolean
+    return null;
+  }
+
+  get types() {
+    if (typeof this.schema.type === 'string') {
+      return [this.schema.type];
+    }
+    else if (Array.isArray(this.schema.type)) {
+      return this.schema.type;
+    }
+    return [];
+  }
+
+  getOperators(cql) {
+    let ops = [CqlEqual, CqlNotEqual];
+    if (this.isNumeric || this.isTemporal) {
+      ops.push(CqlLessThan);
+      ops.push(CqlLessThanEqual);
+      ops.push(CqlGreaterThan);
+      ops.push(CqlGreaterThanEqual);
+    }
+    else if (this.isText && cql.advancedComparison) {
+      ops.push(CqlLike);
+    }
+    return ops;
+  }
+
+  toText() {
+    return this.id;
+  }
+
+  toJSON() {
+    return { property: this.id };
+  }
+
+}
\ No newline at end of file
diff --git a/src/models/cql2/value.js b/src/models/cql2/value.js
new file mode 100644
index 000000000..346033d76
--- /dev/null
+++ b/src/models/cql2/value.js
@@ -0,0 +1,65 @@
+import Utils from "../../utils";
+
+export default class CqlValue {
+
+  constructor(value) {
+    this.value = value;
+  }
+
+  static create(value) {
+    if (value instanceof Date) {
+      return new CqlTimestamp(value);
+    }
+    else if (typeof value === 'string') {
+      return new CqlString(value);
+    }
+    else {
+      return new CqlValue(value);
+    }
+  }
+
+  toJSON() {
+    return this.value;
+  }
+
+  toText() {
+    return this.value;
+  }
+
+}
+
+export class CqlTimestamp extends CqlValue {
+
+  constructor(value) {
+    super(value);
+  }
+
+  toJSON() {
+    return { timestamp: this.toTimestamp() };
+  }
+
+  toText() {
+    return `TIMESTAMP('${this.toTimestamp()}')`;
+  }
+
+  toTimestamp() {
+    return Utils.dateToUTC(this.value).toISOString();
+  }
+
+}
+
+export class CqlString extends CqlValue {
+
+  constructor(value) {
+    super(value);
+  }
+
+  toJSON() {
+    return this.value;
+  }
+
+  toText() {
+    return `'${this.value.replace("'", "''")}'`;
+  }
+
+}
diff --git a/src/models/queryable.js b/src/models/queryable.js
deleted file mode 100644
index 2bb2b0507..000000000
--- a/src/models/queryable.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import { formatKey } from "@radiantearth/stac-fields/helper";
-import Utils from '../utils';
-
-export default class Queryable {
-
-  constructor(id, schema) {
-    this.id = id;
-    this.schema = schema;
-  }
-
-  get title() {
-    if (typeof this.schema.title === 'string') {
-      return this.schema.title;
-    }
-    return formatKey(this.id);
-  }
-
-  toJSON(queryable) {
-    let value = queryable.value;
-    if (value instanceof Date) {
-      value = { timestamp: Utils.dateToUTC(value).toISOString() };
-    }
-    return {
-      op: queryable.operator,
-      args: [{ property: this.id }, value]
-    };
-  }
-
-  toText(queryable) {
-    let value = queryable.value;
-    if (value instanceof Date) {
-      value = `TIMESTAMP('${Utils.dateToUTC(value).toISOString()}')`;
-    }
-    else if (typeof value === 'string') {
-      value = `'${value.replace("'", "\\'")}'`;
-    }
-    return `${this.id} ${queryable.operator} ${value}`;
-  }
-
-  static formatText(queryables) {
-    if (queryables.length === 0) {
-      return {};
-    }
-
-    return {
-      "filter-lang": "cql2-text",
-      filter: queryables.map(q => q.queryable.toText(q)).join(' AND ')
-    };
-  }
-
-  static formatJSON(queryables) {
-    if (queryables.length === 0) {
-      return {};
-    }
-
-    let filter;
-    if (queryables.length === 1) {
-      filter = queryables[0].queryable.toJSON(queryables[0]);
-    }
-    else {
-      filter = {
-        op: "and",
-        args: queryables.map(q => q.queryable.toJSON(q))
-      };
-    }
-
-    return {
-      "filter-lang": "cql2-json",
-      filter
-    };
-  }
-}
\ No newline at end of file
diff --git a/src/models/stac.js b/src/models/stac.js
index 64e5401cb..8a14d267f 100644
--- a/src/models/stac.js
+++ b/src/models/stac.js
@@ -145,8 +145,10 @@ class STAC {
   }
 
   getSearchLink() {
-    // ToDo: Currently, only GET search requests are supported #183
-    return this.getStacLinksWithRel('search').find(link => link.method !== 'POST');
+    let links = this.getStacLinksWithRel('search');
+    // Prefer POST if present
+    let post = links.find(link => Utils.hasText(link.method) && link.method.toUpperCase() === 'POST');
+    return post || links[0] || null;
   }
 
   getApiCollectionsLink() {
diff --git a/src/rels.js b/src/rels.js
index 3e909c2df..43246d068 100644
--- a/src/rels.js
+++ b/src/rels.js
@@ -22,7 +22,8 @@ export const stacPagination = [
 // Queryables
 export const ogcQueryables = [
   'queryables', // Old way in STAC (deprecated)
-  'http://www.opengis.net/def/rel/ogc/1.0/queryables',
+  'http://www.opengis.net/def/rel/ogc/1.0/queryables', // STAC and OGC APIs
+  'ogc-rel:queryables' // Alternative in OGC APIs
 ];
 
 // Rels that STAC Browser can navigate to and display natively (i.e. Collections, Catalogs and Items)
diff --git a/src/store/index.js b/src/store/index.js
index bd9721f45..747ab70b7 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -8,7 +8,7 @@ import i18n from '../i18n';
 import { ogcQueryables, stacBrowserSpecialHandling, stacPagination } from "../rels";
 import Utils, { schemaMediaType, BrowserError } from '../utils';
 import STAC from '../models/stac';
-import Queryable from '../models/queryable';
+import Queryable from '../models/cql2/queryable';
 
 import { addQueryIfNotExists, isAuthenticationError, Loading, processSTAC, proxyUrl, unproxyUrl, stacRequest } from './utils';
 import { getBest } from '../locale-id';
@@ -589,7 +589,8 @@ function getStore(config, router) {
       },
       addQueryables(state, queryables) {
         if (Utils.isObject(queryables) && Utils.isObject(queryables.properties)) {
-          state.queryables = Object.keys(queryables.properties).map(key => new Queryable(key, queryables.properties[key]));
+          state.queryables = Object.entries(queryables.properties)
+            .map(([key, schema]) => new Queryable(key, schema));
         }
         else {
           state.queryables = [];
diff --git a/src/utils.js b/src/utils.js
index 63f3dac49..6f19c2125 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,5 +1,4 @@
 import URI from 'urijs';
-import Queryable from './models/queryable';
 import removeMd from 'remove-markdown';
 
 export const commonFileNames = ['catalog', 'collection', 'item'];
@@ -239,40 +238,66 @@ export default class Utils {
   }
 
   static addFiltersToLink(link, filters = {}) {
-    // Construct new link with search params
-    let url = new URI(link.href);
-
-    for (let key in filters) {
-      let value = filters[key];
-      if (
-        value === null
-        || (typeof value === 'number' && !Number.isFinite(value))
-        || (typeof value === 'string' && value.length === 0)
-        || (typeof value === 'object' && Utils.size(value) === 0)
-      ) {
-        url.removeQuery(key);
-        continue;
-      }
+    let isEmpty = value => {
+      return (value === null
+      || (typeof value === 'number' && !Number.isFinite(value))
+      || (typeof value === 'string' && value.length === 0)
+      || (typeof value === 'object' && Utils.size(value) === 0));
+    };
+
+    if (Utils.hasText(link.method) && link.method.toUpperCase() === 'POST') {
+      let body = Object.assign({}, link.body);
+
+      for (let key in filters) {
+        let value = filters[key];
+        if (isEmpty(value)) {
+          delete body[key];
+          continue;
+        }
 
-      if (key === 'datetime') {
-        value = Utils.formatDatetimeQuery(value);
-      }
-      else if (key === 'bbox' && Array.isArray(value)) {
-        value = value.join(',');
-      }
-      else if ((key === 'collections' || key === 'ids') && Array.isArray(value)) {
-        value = value.join(',');
+        if (key === 'datetime') {
+          value = Utils.formatDatetimeQuery(value);
+        }
+        else if (key === 'filters') {
+          Object.assign(body, value.toJSON());
+          continue;
+        }
+
+        body[key] = value;
       }
-      else if (key === 'filters') {
-        let params = Queryable.formatText(value);
-        url.setQuery(params);
-        continue;
+      return Object.assign({}, link, { body });
+    }
+    else { // GET
+      // Construct new link with search params
+      let url = new URI(link.href);
+
+      for (let key in filters) {
+        let value = filters[key];
+        if (isEmpty(value)) {
+          url.removeQuery(key);
+          continue;
+        }
+
+        if (key === 'datetime') {
+          value = Utils.formatDatetimeQuery(value);
+        }
+        else if (key === 'bbox') {
+          value = value.join(',');
+        }
+        else if ((key === 'collections' || key === 'ids')) {
+          value = value.join(',');
+        }
+        else if (key === 'filters') {
+          let params = value.toText();
+          url.setQuery(params);
+          continue;
+        }
+
+        url.setQuery(key, value);
       }
 
-      url.setQuery(key, value);
+      return Object.assign({}, link, { href: url.toString() });
     }
-
-    return Object.assign({}, link, { href: url.toString() });
   }
 
   static titleForHref(href, preferFileName = false) {