@sfgrp/distinguish 0.0.3 → 0.0.6

package/README.md

@@ -56,12 +56,12 @@ Add `data-interactive-key="true"` attribute to input elements to initialize it.
 To pass the options you need to add the prefix `data-` and write the option in kebab-case, like the following example:
 
 ```html
-<input 
+<div 
   data-interactive-key="true"
   data-observation-matrix-id="1"
   data-project-token="xQ9bKrhfQtHYfro9t6YY0A"
   data-base-url="https://sfg.taxonworks.org/api/v1"
->
+></div>
 ```
 
 ### Imperative

package/dist/distinguish.es.js

@@ -6828,7 +6828,7 @@ const useRequest = (instanceConfiguration = {}) => {
       token: userToken
     }
   }, instanceConfiguration);
-  if (!projectToken || !(projectId && userToken)) {
+  if (!projectToken || !(projectId && userToken) && csrfToken) {
     const headers = { "X-CSRF-Token": csrfToken };
     Object.assign(axiosConfiguration, { headers });
   }
@@ -7054,9 +7054,11 @@ const useSettingsStore = defineStore("settings", {
     refreshOnlyTaxa: false,
     rowFilter: true,
     shouldUpdate: true,
-    observationMatrixId: void 0
+    observationMatrixId: void 0,
+    errorMessage: ""
   }),
   getters: {
+    getErrorMessage: (state2) => state2.errorMessage,
     getIsLoading: (state2) => state2.isLoading,
     getLayout: (state2) => state2.gridLayout,
     getRefreshOnlyTaxa: (state2) => state2.refreshOnlyTaxa,
@@ -7086,15 +7088,13 @@ const useSettingsStore = defineStore("settings", {
           opt: {
             refreshOnlyTaxa: this.refreshOnlyTaxa
           }
-        }).then((_) => {
-          this.isLoading = false;
-        });
+        }).then((_) => this.errorMessage = "").catch((error) => this.errorMessage = error.message).finally(() => this.isLoading = false);
       }
     }
   }
 });
-const _hoisted_1$v = /* @__PURE__ */ createTextVNode(" Eliminate unknowns ");
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _hoisted_1$w = /* @__PURE__ */ createTextVNode(" Eliminate unknowns ");
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "FilterEliminateUnknowns",
   setup(__props) {
     const store = useFilterStore();
@@ -7112,18 +7112,18 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         }, null, 512), [
           [vModelCheckbox, unref(eliminateUknown)]
         ]),
-        _hoisted_1$v
+        _hoisted_1$w
       ]);
     };
   }
 });
-const _hoisted_1$u = /* @__PURE__ */ createBaseVNode("label", {
+const _hoisted_1$v = /* @__PURE__ */ createBaseVNode("label", {
   for: "languages",
   class: "d-block"
 }, " Error tolerance ", -1);
 const _hoisted_2$g = /* @__PURE__ */ createBaseVNode("option", { value: "" }, null, -1);
-const _hoisted_3$9 = ["value"];
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _hoisted_3$8 = ["value"];
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "FilterErrorTolerance",
   setup(__props) {
     const ERROR_TOLERANCE_VALUES = [0, 1, 2];
@@ -7136,7 +7136,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        _hoisted_1$u,
+        _hoisted_1$v,
         withDirectives(createBaseVNode("select", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(errorTolerance) ? errorTolerance.value = $event : null),
           name: "languages",
@@ -7147,7 +7147,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             return createBaseVNode("option", {
               key: value,
               value
-            }, toDisplayString(value), 9, _hoisted_3$9);
+            }, toDisplayString(value), 9, _hoisted_3$8);
           }), 64))
         ], 512), [
           [vModelSelect, unref(errorTolerance)]
@@ -7167,9 +7167,9 @@ const RANK_TYPES = [
   "subfamily",
   "family"
 ];
-const _hoisted_1$t = /* @__PURE__ */ createBaseVNode("label", { class: "d-block" }, "Identified to rank", -1);
+const _hoisted_1$u = /* @__PURE__ */ createBaseVNode("label", { class: "d-block" }, "Identified to rank", -1);
 const _hoisted_2$f = /* @__PURE__ */ createBaseVNode("option", { value: void 0 }, null, -1);
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "FilterRank",
   setup(__props) {
     const store = useFilterStore();
@@ -7183,7 +7183,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        _hoisted_1$t,
+        _hoisted_1$u,
         withDirectives(createBaseVNode("select", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(rankSelected) ? rankSelected.value = $event : null)
         }, [
@@ -7198,9 +7198,9 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$s = /* @__PURE__ */ createBaseVNode("label", { class: "d-block" }, "Descriptor sorting", -1);
+const _hoisted_1$t = /* @__PURE__ */ createBaseVNode("label", { class: "d-block" }, "Descriptor sorting", -1);
 const _hoisted_2$e = /* @__PURE__ */ createBaseVNode("option", { value: void 0 }, null, -1);
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "FilterSort",
   setup(__props) {
     const SORT_TYPES = [
@@ -7219,7 +7219,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        _hoisted_1$s,
+        _hoisted_1$t,
         withDirectives(createBaseVNode("select", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(sortDescriptors) ? sortDescriptors.value = $event : null)
         }, [
@@ -7234,12 +7234,12 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$r = /* @__PURE__ */ createBaseVNode("label", {
+const _hoisted_1$s = /* @__PURE__ */ createBaseVNode("label", {
   for: "languages",
   class: "d-block"
 }, " Languages ", -1);
 const _hoisted_2$d = ["value"];
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "FilterLanguage",
   setup(__props) {
     const filterStore = useFilterStore();
@@ -7252,7 +7252,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        _hoisted_1$r,
+        _hoisted_1$s,
         withDirectives(createBaseVNode("select", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(language) ? language.value = $event : null),
           name: "languages",
@@ -7272,7 +7272,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 var VBtn_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".btn{border-radius:8px;border:none}.btn-primary-color{background-color:var(--primary-color);color:#fff}.btn-medium-size{min-height:var(--btn-medium-size)}\n")();
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "VBtn",
   props: {
     color: { default: "primary" },
@@ -7295,11 +7295,11 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 var VModal_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => '.modal-mask{position:fixed;z-index:1099;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:table;transition:opacity .3s ease}.modal-wrapper{display:table-cell;vertical-align:middle}.modal-container{position:relative;width:300px;margin:0 auto;padding:20px 30px;background-color:#fff;border-radius:2px;box-shadow:0 2px 8px #00000054;transition:all .3s ease;font-family:IBM Plex Sans,Helvetica,Arial,sans-serif;max-height:90vh;overflow-y:auto}.modal-close{position:absolute;cursor:pointer;top:26px;right:30px;width:10px;height:10px;background-image:image-url("close.svg");background-size:10px 10px;opacity:.4}.modal-close:hover{opacity:1}.modal-header h3{margin-top:0;color:#42b983}.modal-body{margin:20px 0}.modal-default-button{float:right}.modal-enter,.modal-leave-active{opacity:0}.modal-enter .modal-container,.modal-leave-active .modal-container{-webkit-transform:scale(1.1);transform:scale(1.1)}.transparent-modal{background-color:#000c!important}.transparent-modal .modal-header h3{margin:0 0 2em 2em;padding:6px 6px 6px 12px;border-radius:3px;background-color:#0000004d;color:#ffffff80}.transparent-modal .modal-close{right:42px;top:30px;color:#ffffff80;background-image:image-url("w_close.svg")}.transparent-modal .modal-container{width:70%;position:relative;background-color:transparent!important;box-shadow:none}.transparent-modal .modal-container .modal-body{overflow:auto;margin-right:1em;max-height:80vh}.transparent-modal .modal-container .modal-body::-webkit-scrollbar{position:absolute;right:40px;-webkit-appearance:none}.transparent-modal .modal-container .modal-body::-webkit-scrollbar:vertical{width:6px}.transparent-modal .modal-container .modal-body::-webkit-scrollbar:horizontal{height:6px}.transparent-modal .modal-container .modal-body::-webkit-scrollbar-thumb{border-radius:8px;width:11px;height:5px;border:rgba(255,255,255,.5);background-color:#ffffff80}.transparent-modal .modal-container .modal-body::-webkit-scrollbar-track{background-color:#0000004d;border-radius:8px}\n')();
-const _hoisted_1$q = { class: "modal-wrapper" };
+const _hoisted_1$r = { class: "modal-wrapper" };
 const _hoisted_2$c = { class: "modal-header" };
-const _hoisted_3$8 = { class: "modal-body" };
-const _hoisted_4$5 = { class: "modal-footer" };
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _hoisted_3$7 = { class: "modal-body" };
+const _hoisted_4$6 = { class: "modal-footer" };
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "VModal",
   props: {
     containerClass: null,
@@ -7323,7 +7323,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             onClick: _cache[2] || (_cache[2] = ($event) => emit("close")),
             onKey: _cache[3] || (_cache[3] = ($event) => emit("close"))
           }, [
-            createBaseVNode("div", _hoisted_1$q, [
+            createBaseVNode("div", _hoisted_1$r, [
               createBaseVNode("div", {
                 class: normalizeClass(["modal-container", __props.containerClass]),
                 style: normalizeStyle(__spreadValues({}, __props.containerStyle)),
@@ -7337,10 +7337,10 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                   }),
                   renderSlot(_ctx.$slots, "header")
                 ]),
-                createBaseVNode("div", _hoisted_3$8, [
+                createBaseVNode("div", _hoisted_3$7, [
                   renderSlot(_ctx.$slots, "body")
                 ]),
-                createBaseVNode("div", _hoisted_4$5, [
+                createBaseVNode("div", _hoisted_4$6, [
                   renderSlot(_ctx.$slots, "footer")
                 ])
               ], 6)
@@ -7352,11 +7352,11 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$p = /* @__PURE__ */ createTextVNode(" Keyword ");
+const _hoisted_1$q = /* @__PURE__ */ createTextVNode(" Keyword ");
 const _hoisted_2$b = /* @__PURE__ */ createBaseVNode("h3", null, "Keywords", -1);
-const _hoisted_3$7 = { class: "list-none p-0" };
-const _hoisted_4$4 = ["value"];
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _hoisted_3$6 = { class: "list-none p-0" };
+const _hoisted_4$5 = ["value"];
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "FilterKeywords",
   setup(__props) {
     const store = useObservationMatrixStore();
@@ -7370,17 +7370,17 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$t, {
+        createVNode(_sfc_main$u, {
           color: "primary",
           size: "medium",
           onClick: _cache[0] || (_cache[0] = ($event) => isModalVisible.value = true)
         }, {
           default: withCtx(() => [
-            _hoisted_1$p
+            _hoisted_1$q
           ]),
           _: 1
         }),
-        isModalVisible.value ? (openBlock(), createBlock(_sfc_main$s, {
+        isModalVisible.value ? (openBlock(), createBlock(_sfc_main$t, {
           key: 0,
           onClose: _cache[2] || (_cache[2] = ($event) => isModalVisible.value = false)
         }, {
@@ -7388,7 +7388,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             _hoisted_2$b
           ]),
           body: withCtx(() => [
-            createBaseVNode("ul", _hoisted_3$7, [
+            createBaseVNode("ul", _hoisted_3$6, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(unref(store).getKeywords, ({ keywordId, name }) => {
                 return openBlock(), createElementBlock("li", { key: keywordId }, [
                   createBaseVNode("label", null, [
@@ -7396,7 +7396,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                       "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(keywordIds) ? keywordIds.value = $event : null),
                       value: keywordId,
                       type: "checkbox"
-                    }, null, 8, _hoisted_4$4), [
+                    }, null, 8, _hoisted_4$5), [
                       [vModelCheckbox, unref(keywordIds)]
                     ]),
                     createTextVNode(" " + toDisplayString(name), 1)
@@ -7411,8 +7411,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$o = /* @__PURE__ */ createTextVNode(" Refresh only taxa ");
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _hoisted_1$p = /* @__PURE__ */ createTextVNode(" Refresh only taxa ");
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "SettingRefresh",
   setup(__props) {
     const store = useSettingsStore();
@@ -7430,7 +7430,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
         }, null, 512), [
           [vModelCheckbox, unref(refreshTaxa)]
         ]),
-        _hoisted_1$o
+        _hoisted_1$p
       ]);
     };
   }
@@ -7443,41 +7443,41 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$p = {};
-const _hoisted_1$n = { class: "menu-list" };
+const _sfc_main$q = {};
+const _hoisted_1$o = { class: "menu-list" };
 function _sfc_render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("ul", _hoisted_1$n, [
+  return openBlock(), createElementBlock("ul", _hoisted_1$o, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var MenuList = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$2]]);
+var MenuList = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$2]]);
 var MenuItem_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".list-item[data-v-3f00bdeb]{justify-content:center;padding-left:1em;padding-right:1em;border-right:1px solid #e5e5e5}\n")();
-const _sfc_main$o = {};
-const _hoisted_1$m = { class: "list-item" };
+const _sfc_main$p = {};
+const _hoisted_1$n = { class: "list-item" };
 function _sfc_render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("li", _hoisted_1$m, [
+  return openBlock(), createElementBlock("li", _hoisted_1$n, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
-var MenuListItem = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$1], ["__scopeId", "data-v-3f00bdeb"]]);
+var MenuListItem = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$1], ["__scopeId", "data-v-3f00bdeb"]]);
 const LAYOUT_MODES = {
   "layout-mode-1": "layout-mode-2",
   "layout-mode-2": "layout-mode-1"
 };
 var VGrid_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".grid[data-v-203acd5e]{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);grid-column-gap:0px;grid-row-gap:0px;grid-gap:1px;background-color:var(--border-color);box-shadow:0 2px 2px #0003}\n")();
-const _sfc_main$n = {};
-const _hoisted_1$l = { class: "grid" };
+const _sfc_main$o = {};
+const _hoisted_1$m = { class: "grid" };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$l, [
+  return openBlock(), createElementBlock("div", _hoisted_1$m, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
-var VGrid = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render], ["__scopeId", "data-v-203acd5e"]]);
+var VGrid = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render], ["__scopeId", "data-v-203acd5e"]]);
 var GridToggle_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".grid-icon{width:20px;height:12px;border:2px solid transparent;background-color:transparent;grid-gap:2px}.grid-icon>div{background-color:#fff}\n")();
-const _hoisted_1$k = /* @__PURE__ */ createBaseVNode("div", { class: "panel-descriptors" }, null, -1);
+const _hoisted_1$l = /* @__PURE__ */ createBaseVNode("div", { class: "panel-descriptors" }, null, -1);
 const _hoisted_2$a = /* @__PURE__ */ createBaseVNode("div", { class: "panel-remaining" }, null, -1);
-const _hoisted_3$6 = /* @__PURE__ */ createBaseVNode("div", { class: "panel-eliminated" }, null, -1);
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _hoisted_3$5 = /* @__PURE__ */ createBaseVNode("div", { class: "panel-eliminated" }, null, -1);
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "GridToggle",
   setup(__props) {
     const store = useSettingsStore();
@@ -7488,16 +7488,16 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$t, {
+      return openBlock(), createBlock(_sfc_main$u, {
         class: normalizeClass(unref(LAYOUT_MODES)[unref(gridLayout)]),
         onClick: setLayout
       }, {
         default: withCtx(() => [
           createVNode(VGrid, { class: "grid-icon" }, {
             default: withCtx(() => [
-              _hoisted_1$k,
+              _hoisted_1$l,
               _hoisted_2$a,
-              _hoisted_3$6
+              _hoisted_3$5
             ]),
             _: 1
           })
@@ -7507,92 +7507,100 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$j = /* @__PURE__ */ createTextVNode(" Reset ");
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _hoisted_1$k = /* @__PURE__ */ createTextVNode(" Reset ");
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "ResetButton",
   setup(__props) {
     const store = useFilterStore();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$t, {
+      return openBlock(), createBlock(_sfc_main$u, {
         color: "primary",
         size: "medium",
         onClick: _cache[0] || (_cache[0] = ($event) => unref(store).$reset())
       }, {
         default: withCtx(() => [
-          _hoisted_1$j
+          _hoisted_1$k
         ]),
         _: 1
       });
     };
   }
 });
-var HeaderBar_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".header-bar[data-v-2f031624]{background-color:var(--bg-panel-color);padding:1em;box-shadow:#24252614 4px 4px 15px;border-radius:.9rem;display:flex;justify-content:space-between;align-items:center}.header-bar__buttons[data-v-2f031624]{display:flex;align-items:center}\n")();
-const _withScopeId$1 = (n) => (pushScopeId("data-v-2f031624"), n = n(), popScopeId(), n);
+const _hoisted_1$j = { class: "error-message" };
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  __name: "ErrorMessage",
+  setup(__props) {
+    const store = useSettingsStore();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", _hoisted_1$j, toDisplayString(unref(store).getErrorMessage), 1);
+    };
+  }
+});
+var HeaderBar_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".header-bar[data-v-1fab3a2c]{background-color:var(--bg-panel-color);padding:1em;box-shadow:#24252614 4px 4px 15px;border-radius:.9rem;display:flex;justify-content:space-between;align-items:center}.header-bar__buttons[data-v-1fab3a2c]{display:flex;align-items:center}\n")();
 const _hoisted_1$i = { class: "header-bar" };
-const _hoisted_2$9 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createBaseVNode("div", null, null, -1));
-const _hoisted_3$5 = { class: "header-bar__buttons" };
+const _hoisted_2$9 = { class: "header-bar__buttons" };
 const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "HeaderBar",
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$i, [
-        _hoisted_2$9,
+        createVNode(_sfc_main$l),
         createVNode(MenuList, null, {
           default: withCtx(() => [
             createVNode(MenuListItem, null, {
               default: withCtx(() => [
-                createVNode(_sfc_main$q)
+                createVNode(_sfc_main$r)
               ]),
               _: 1
             }),
             createVNode(MenuListItem, null, {
               default: withCtx(() => [
-                createVNode(_sfc_main$y)
+                createVNode(_sfc_main$z)
               ]),
               _: 1
             }),
             createVNode(MenuListItem, null, {
               default: withCtx(() => [
-                createVNode(_sfc_main$x)
+                createVNode(_sfc_main$y)
               ]),
               _: 1
             }),
             createVNode(MenuListItem, null, {
               default: withCtx(() => [
-                createVNode(_sfc_main$w)
+                createVNode(_sfc_main$x)
               ]),
               _: 1
             }),
             createVNode(MenuListItem, null, {
               default: withCtx(() => [
-                createVNode(_sfc_main$u)
+                createVNode(_sfc_main$v)
               ]),
               _: 1
             }),
             createVNode(MenuListItem, null, {
               default: withCtx(() => [
-                createVNode(_sfc_main$v)
+                createVNode(_sfc_main$w)
               ]),
               _: 1
             }),
             createVNode(MenuListItem, null, {
               default: withCtx(() => [
-                createVNode(_sfc_main$r)
+                createVNode(_sfc_main$s)
               ]),
               _: 1
             })
           ]),
           _: 1
         }),
-        createBaseVNode("div", _hoisted_3$5, [
-          createVNode(_sfc_main$l, { class: "margin-small-right" }),
-          createVNode(_sfc_main$m)
+        createBaseVNode("div", _hoisted_2$9, [
+          createVNode(_sfc_main$m, { class: "margin-small-right" }),
+          createVNode(_sfc_main$n)
         ])
       ]);
     };
   }
 });
-var HeaderBar = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-2f031624"]]);
+var HeaderBar = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-1fab3a2c"]]);
 const _hoisted_1$h = ["innerHTML"];
 const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "PanelRowItem",
@@ -7631,7 +7639,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
 const _hoisted_1$g = /* @__PURE__ */ createTextVNode(" Select ");
 const _hoisted_2$8 = /* @__PURE__ */ createBaseVNode("h3", null, "Filter row", -1);
 const _hoisted_3$4 = { class: "list-none p-0" };
-const _hoisted_4$3 = ["value"];
+const _hoisted_4$4 = ["value"];
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "FilterRow",
   setup(__props) {
@@ -7660,7 +7668,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$t, {
+        createVNode(_sfc_main$u, {
           color: "primary",
           size: "medium",
           onClick: _cache[0] || (_cache[0] = ($event) => isModalVisible.value = true)
@@ -7670,7 +7678,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }),
-        isModalVisible.value ? (openBlock(), createBlock(_sfc_main$s, {
+        isModalVisible.value ? (openBlock(), createBlock(_sfc_main$t, {
           key: 0,
           onClose: _cache[2] || (_cache[2] = ($event) => isModalVisible.value = false)
         }, {
@@ -7688,7 +7696,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                       "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(rowIds) ? rowIds.value = $event : null),
                       value: row.rowId,
                       type: "checkbox"
-                    }, null, 8, _hoisted_4$3), [
+                    }, null, 8, _hoisted_4$4), [
                       [vModelCheckbox, unref(rowIds)]
                     ]),
                     createTextVNode(" " + toDisplayString(row.objectLabel), 1)
@@ -7848,8 +7856,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
 });
 var DescriptorModal_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".descriptor-modal{width:1000px;max-height:90vh;overflow-y:scroll}.descriptor-modal__depiction{display:flex;justify-content:center}\n")();
 const _hoisted_1$b = { key: 0 };
-const _hoisted_2$5 = { class: "descriptor-modal__depiction" };
-const _hoisted_3$3 = /* @__PURE__ */ createBaseVNode("hr", null, null, -1);
+const _hoisted_2$5 = { key: 1 };
+const _hoisted_3$3 = { class: "descriptor-modal__depiction" };
+const _hoisted_4$3 = /* @__PURE__ */ createBaseVNode("hr", null, null, -1);
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "DescriptorModal",
   props: {
@@ -7857,13 +7866,13 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$s, { "container-class": "descriptor-modal" }, {
+      return openBlock(), createBlock(_sfc_main$t, { "container-class": "descriptor-modal" }, {
         header: withCtx(() => [
           createBaseVNode("h3", null, toDisplayString(__props.descriptor.name), 1),
-          __props.descriptor.description ? (openBlock(), createElementBlock("span", _hoisted_1$b, toDisplayString(__props.descriptor.description), 1)) : createCommentVNode("", true)
+          __props.descriptor.description ? (openBlock(), createElementBlock("span", _hoisted_1$b, toDisplayString(__props.descriptor.description), 1)) : (openBlock(), createElementBlock("i", _hoisted_2$5, " No further description available. "))
         ]),
         body: withCtx(() => [
-          createBaseVNode("div", _hoisted_2$5, [
+          createBaseVNode("div", _hoisted_3$3, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(__props.descriptor.depictionIds, (depictionId) => {
               return openBlock(), createBlock(_sfc_main$f, {
                 key: depictionId,
@@ -7871,7 +7880,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               }, null, 8, ["depiction-id"]);
             }), 128))
           ]),
-          _hoisted_3$3,
+          _hoisted_4$3,
           __props.descriptor.type === unref(descriptorTypes).Qualitative ? (openBlock(), createBlock(_sfc_main$d, {
             key: 0,
             descriptor: __props.descriptor
@@ -7928,10 +7937,16 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const useStore = useFilterStore();
     const fieldValue = ref(String(useStore.getDescriptorValueById(props.descriptor.descriptorId)));
     const setDescriptorValue = () => {
-      useStore.setDescriptor({
-        descriptorId: props.descriptor.descriptorId,
-        value: fieldValue.value
-      });
+      const { descriptorId } = props.descriptor;
+      const value = fieldValue.value.trim();
+      if (value) {
+        useStore.setDescriptor({
+          descriptorId,
+          value
+        });
+      } else {
+        useStore.removeDescriptor(descriptorId);
+      }
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$b, { descriptor: __props.descriptor }, {
@@ -8064,10 +8079,16 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const useStore = useFilterStore();
     const fieldValue = ref(String(useStore.getDescriptorValueById(props.descriptor.descriptorId)));
     const setDescriptorValue = () => {
-      useStore.setDescriptor({
-        descriptorId: props.descriptor.descriptorId,
-        value: fieldValue.value
-      });
+      const { descriptorId } = props.descriptor;
+      const value = fieldValue.value.trim();
+      if (value) {
+        useStore.setDescriptor({
+          descriptorId,
+          value
+        });
+      } else {
+        useStore.removeDescriptor(descriptorId);
+      }
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$b, { descriptor: __props.descriptor }, {
@@ -8351,14 +8372,13 @@ const __default__ = {
 };
 const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
   props: {
-    observationMatrixId: { default: 1 },
+    observationMatrixId: null,
     apiConfig: null
   },
   setup(__props) {
     const props = __props;
     const settingStore = useSettingsStore();
     const filterStore = useFilterStore();
-    useObservationMatrixStore();
     const isLoading = computed(() => settingStore.getIsLoading);
     const gridLayout = computed(() => settingStore.getLayout);
     const initialize = () => {
@@ -8396,7 +8416,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     };
   }
 }));
-var main = /* @__PURE__ */ (() => ":root{--bg-color: #f7f8fc;--bg-panel-color: #FFFFFF;--primary-color: #5D9ECE;--border-color: #CCCCCC;--link-color: #5D9ECE;--btn-medium-size: 28px}.d-block{display:block}.d-flex{display:flex}.justify-between{justify-content:space-between}.align-center{align-items:center}.w-100{height:100%}.margin-medium-bottom{margin-bottom:1em}.margin-small-right{margin-right:.5em}.p-0{padding:0}.link{color:var(--link-color);cursor:pointer}.list-none{list-style:none}body{background-color:var(--bg-color)}.vue-interactive-keys{height:calc(100vh - 160px);max-height:calc(100vh - 160px);font-family:Arial,Helvetica,sans-serif;font-size:13px}.vue-interactive-keys .grid-panel{background-color:#fff;padding:1rem;overflow-y:scroll}.vue-interactive-keys .layout-mode-1 .panel-descriptors{grid-area:1/1/2/3}.vue-interactive-keys .layout-mode-1 .panel-remaining{grid-area:2/1/3/2}.vue-interactive-keys .layout-mode-1 .panel-eliminated{grid-area:2/2/3/3}.vue-interactive-keys .layout-mode-2 .panel-descriptors{grid-area:1/1/3/2}.vue-interactive-keys .layout-mode-2 .panel-remaining{grid-area:1/2/2/3}.vue-interactive-keys .layout-mode-2 .panel-eliminated{grid-area:2/2/3/3}.vue-interactive-keys input,.vue-interactive-keys select{padding:.5em 1em;border:1px solid;border-radius:2px;border-color:var(--border-color);background-color:#fff}\n")();
+var main = /* @__PURE__ */ (() => ":root{--bg-color: #f7f8fc;--bg-panel-color: #FFFFFF;--error-color: #FF0000;--primary-color: #5D9ECE;--border-color: #CCCCCC;--link-color: #5D9ECE;--btn-medium-size: 28px}.d-block{display:block}.d-flex{display:flex}.justify-between{justify-content:space-between}.align-center{align-items:center}.w-100{height:100%}.margin-medium-bottom{margin-bottom:1em}.margin-small-right{margin-right:.5em}.p-0{padding:0}.link{color:var(--link-color);cursor:pointer}.list-none{list-style:none}body{background-color:var(--bg-color)}.vue-interactive-keys{height:calc(100vh - 160px);max-height:calc(100vh - 160px);font-family:Arial,Helvetica,sans-serif;font-size:13px}.vue-interactive-keys .grid-panel{background-color:#fff;padding:1rem;overflow-y:scroll}.vue-interactive-keys .layout-mode-1 .panel-descriptors{grid-area:1/1/2/3}.vue-interactive-keys .layout-mode-1 .panel-remaining{grid-area:2/1/3/2}.vue-interactive-keys .layout-mode-1 .panel-eliminated{grid-area:2/2/3/3}.vue-interactive-keys .layout-mode-2 .panel-descriptors{grid-area:1/1/3/2}.vue-interactive-keys .layout-mode-2 .panel-remaining{grid-area:1/2/2/3}.vue-interactive-keys .layout-mode-2 .panel-eliminated{grid-area:2/2/3/3}.vue-interactive-keys input,.vue-interactive-keys select{padding:.5em 1em;border:1px solid;border-radius:2px;border-color:var(--border-color);background-color:#fff}.vue-interactive-keys .error-message{color:var(--error-color)}\n")();
 function discoverInteractiveKey(selector) {
   const tag = selector || '[data-interactive-key="true"]';
   const elements = document.querySelectorAll(tag);