@platforma-sdk/ui-vue 1.44.15 → 1.45.0

package/dist/components/PlBtnExportArchive/Summary.vue2.js

@@ -0,0 +1,42 @@
+import { defineComponent as p, createElementBlock as i, openBlock as n, normalizeClass as s, createElementVNode as t, createTextVNode as o, createCommentVNode as d, toDisplayString as m, unref as a } from "vue";
+import { prettyBytes as r } from "../../lib/util/helpers/dist/prettyBytes.js";
+const v = /* @__PURE__ */ p({
+  __name: "Summary",
+  props: {
+    item: {}
+  },
+  emits: ["cancel"],
+  setup(u, { emit: y }) {
+    return (e, l) => (n(), i("div", {
+      class: s(e.$style.summary)
+    }, [
+      t("div", {
+        class: s(e.$style.name)
+      }, [
+        o(m(e.item.fileName), 1),
+        d("", !0)
+      ], 2),
+      e.item.status === "in-progress" ? (n(), i("div", {
+        key: 0,
+        class: s(e.$style.details)
+      }, [
+        t("span", null, m(a(r)(e.item.current, {})), 1),
+        l[1] || (l[1] = t("span", null, "/", -1)),
+        t("span", null, m(a(r)(e.item.size, {})), 1)
+      ], 2)) : e.item.status === "completed" ? (n(), i("div", {
+        key: 1,
+        class: s(e.$style.details)
+      }, [
+        l[2] || (l[2] = o(" Done ")),
+        t("span", null, m(a(r)(e.item.size, {})), 1)
+      ], 2)) : (n(), i("div", {
+        key: 2,
+        class: s(e.$style.details)
+      }, " Pending ", 2))
+    ], 2));
+  }
+});
+export {
+  v as default
+};
+//# sourceMappingURL=Summary.vue2.js.map

package/dist/components/PlBtnExportArchive/Summary.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Summary.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlBtnExportArchive/Summary.vue3.js

@@ -0,0 +1,13 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._summary_s5gm9_2{display:flex;flex-direction:column;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:8px;--name-font-size: 14px;--details-font-size: 12px}._name_s5gm9_12{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--name-font-size);font-weight:600}._details_s5gm9_19{font-size:var(--details-font-size);font-weight:400;color:#fff9}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+const s = "_summary_s5gm9_2", m = "_name_s5gm9_12", a = "_details_s5gm9_19", t = {
+  summary: s,
+  name: m,
+  details: a
+};
+export {
+  t as default,
+  a as details,
+  m as name,
+  s as summary
+};
+//# sourceMappingURL=Summary.vue3.js.map

package/dist/components/PlBtnExportArchive/Summary.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Summary.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/components/PlBtnExportArchive/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PlBtnExportArchive } from './PlBtnExportArchive.vue';
+export type { FileExportEntry } from './types';

package/dist/components/PlBtnExportArchive/types.d.ts

@@ -0,0 +1,14 @@
+import { ImportFileHandle, RemoteBlobHandleAndSize } from '@platforma-sdk/model';
+export type FileExportEntry = {
+    importHandle: ImportFileHandle;
+    blobHandle: RemoteBlobHandleAndSize;
+    fileName?: string;
+};
+export type ExportItem = {
+    fileName: string;
+    current: number;
+    size: number;
+    status: 'pending' | 'in-progress' | 'completed' | 'error';
+    error?: unknown;
+};
+export type ExportsMap = Map<string, ExportItem>;

package/dist/index.js

@@ -5,17 +5,17 @@
 .pl-ag-chart-stacked-bar-cell{height:100%;display:flex;flex-direction:row;align-items:center}.pl-ag-chart-stacked-bar-cell__not-ready{color:var(--txt-03)!important}`)),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
 
 import { default as m } from "./components/BlockLayout.vue.js";
-import { default as u, default as p } from "./components/PlAgDataTable/PlAgDataTableV2.vue.js";
+import { default as p, default as u } from "./components/PlAgDataTable/PlAgDataTableV2.vue.js";
 import { default as i } from "./components/PlAgDataTable/PlAgOverlayLoading.vue.js";
 import { default as x } from "./components/PlAgDataTable/PlAgOverlayNoRows.vue.js";
 
 import { default as A } from "./components/ValueOrErrorsComponent.vue.js";
-import { useAgGridOptions as P } from "./AgGridVue/useAgGridOptions.js";
+import { useAgGridOptions as C } from "./AgGridVue/useAgGridOptions.js";
 import { createAgGridColDef as b } from "./AgGridVue/createAgGridColDef.js";
 import { deselectAll as w, getSelectedRowsCount as R, getTotalRowsCount as S, isSelectionEnabled as T, selectAll as D } from "./AgGridVue/selection.js";
-import { default as M } from "./components/PlAgColumnHeader/PlAgColumnHeader.vue.js";
-import { default as v } from "./components/PlAgCellFile/PlAgCellFile.vue.js";
-import { default as N } from "./components/PlAgCellProgress/PlAgCellProgress.vue.js";
+import { default as v } from "./components/PlAgColumnHeader/PlAgColumnHeader.vue.js";
+import { default as O } from "./components/PlAgCellFile/PlAgCellFile.vue.js";
+import { default as G } from "./components/PlAgCellProgress/PlAgCellProgress.vue.js";
 import { default as k } from "./components/PlAgCellStatusTag/PlAgCellStatusTag.vue.js";
 
 import { default as B } from "./components/PlAgChartHistogramCell/PlAgChartHistogramCell.vue.js";
@@ -31,67 +31,71 @@ import { default as $ } from "./components/PlAgTextAndButtonCell/PlAgTextAndButt
 import { default as re } from "./components/PlAgGridColumnManager/PlAgGridColumnManager.vue.js";
 import { default as te } from "./components/PlTableFilters/PlTableFiltersV2.vue.js";
 import { default as ae } from "./components/PlMultiSequenceAlignment/PlMultiSequenceAlignment.vue.js";
-import { default as me } from "./components/PlAnnotations/components/PlAnnotationsModal.vue.js";
-import { defineApp as ue, useSdkPlugin as pe } from "./defineApp.js";
-import { createModel as ie } from "./createModel.js";
-import { defineStore as xe } from "./defineStore.js";
-import { AgGridTheme as Ae, activateAgGrid as Ce } from "./aggrid.js";
-import { MultiError as ce, UnresolvedError as be, ensureError as Ee, formatZodError as we, identity as Re, isDefined as Se, isZodError as Te, unwrapValueOrErrors as De, wrapOptionalResult as Ve, wrapValueOrErrors as Me } from "./utils.js";
-import { objectHash as ve } from "./objectHash.js";
-import { computedResult as Ne } from "./computedResult.js";
-import { ReactiveFileContent as ke } from "./composition/fileContent.js";
+import { default as me } from "./components/PlAnnotations/components/PlAnnotations.vue.js";
+import { default as pe } from "./components/PlAnnotations/components/PlAnnotationsModal.vue.js";
+import { default as de } from "./components/PlBtnExportArchive/PlBtnExportArchive.vue.js";
+import { defineApp as ne, useSdkPlugin as xe } from "./defineApp.js";
+import { createModel as Ae } from "./createModel.js";
+import { defineStore as Ce } from "./defineStore.js";
+import { AgGridTheme as be, activateAgGrid as Ee } from "./aggrid.js";
+import { MultiError as Re, UnresolvedError as Se, ensureError as Te, formatZodError as De, identity as Ve, isDefined as ve, isZodError as Me, unwrapValueOrErrors as Oe, wrapOptionalResult as he, wrapValueOrErrors as Ge } from "./utils.js";
+import { objectHash as ke } from "./objectHash.js";
+import { computedResult as Be } from "./computedResult.js";
+import { ReactiveFileContent as He } from "./composition/fileContent.js";
 export * from "@milaboratories/uikit";
 export {
-  Ae as AgGridTheme,
+  be as AgGridTheme,
   m as BlockLayout,
   J as DeferredCircular,
-  ce as MultiError,
-  v as PlAgCellFile,
-  N as PlAgCellProgress,
+  Re as MultiError,
+  O as PlAgCellFile,
+  G as PlAgCellProgress,
   k as PlAgCellStatusTag,
   B as PlAgChartHistogramCell,
   H as PlAgChartStackedBarCell,
-  M as PlAgColumnHeader,
+  v as PlAgColumnHeader,
   Y as PlAgCsvExporter,
   j as PlAgDataTableRowNumberColId,
-  u as PlAgDataTableV2,
+  p as PlAgDataTableV2,
   re as PlAgGridColumnManager,
   i as PlAgOverlayLoading,
   x as PlAgOverlayNoRows,
   $ as PlAgTextAndButtonCell,
-  me as PlAnnotationsModal,
-  p as PlDataTableV2,
+  me as PlAnnotations,
+  pe as PlAnnotationsModal,
+  de as PlBtnExportArchive,
+  u as PlDataTableV2,
   ae as PlMultiSequenceAlignment,
   te as PlTableFiltersV2,
-  ke as ReactiveFileContent,
-  be as UnresolvedError,
+  He as ReactiveFileContent,
+  Se as UnresolvedError,
   A as ValueOrErrorsComponent,
-  Ce as activateAgGrid,
+  Ee as activateAgGrid,
   q as autoSizeRowNumberColumn,
-  Ne as computedResult,
+  Be as computedResult,
   b as createAgGridColDef,
-  ie as createModel,
+  Ae as createModel,
   W as defaultMainMenuItems,
-  ue as defineApp,
-  xe as defineStore,
+  ne as defineApp,
+  Ce as defineStore,
   w as deselectAll,
-  Ee as ensureError,
+  Te as ensureError,
   K as ensureNodeVisible,
-  we as formatZodError,
+  De as formatZodError,
   R as getSelectedRowsCount,
   S as getTotalRowsCount,
-  Re as identity,
-  Se as isDefined,
+  Ve as identity,
+  ve as isDefined,
   T as isSelectionEnabled,
-  Te as isZodError,
+  Me as isZodError,
   z as makeRowNumberColDef,
-  ve as objectHash,
+  ke as objectHash,
   D as selectAll,
-  De as unwrapValueOrErrors,
-  P as useAgGridOptions,
+  Oe as unwrapValueOrErrors,
+  C as useAgGridOptions,
   L as usePlDataTableSettingsV2,
-  pe as useSdkPlugin,
-  Ve as wrapOptionalResult,
-  Me as wrapValueOrErrors
+  xe as useSdkPlugin,
+  he as wrapOptionalResult,
+  Ge as wrapValueOrErrors
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/util/helpers/dist/prettyBytes.js

@@ -0,0 +1,68 @@
+const f = [
+  "B",
+  "kB",
+  "MB",
+  "GB",
+  "TB",
+  "PB",
+  "EB",
+  "ZB",
+  "YB"
+], o = [
+  "B",
+  "kiB",
+  "MiB",
+  "GiB",
+  "TiB",
+  "PiB",
+  "EiB",
+  "ZiB",
+  "YiB"
+], b = [
+  "b",
+  "kbit",
+  "Mbit",
+  "Gbit",
+  "Tbit",
+  "Pbit",
+  "Ebit",
+  "Zbit",
+  "Ybit"
+], T = [
+  "b",
+  "kibit",
+  "Mibit",
+  "Gibit",
+  "Tibit",
+  "Pibit",
+  "Eibit",
+  "Zibit",
+  "Yibit"
+], n = (i, t) => {
+  let B = String(i);
+  return typeof t == "string" || Array.isArray(t) ? B = i.toLocaleString(t) : t === !0 && (B = i.toLocaleString(void 0)), B;
+};
+function y(i, t) {
+  if (i = typeof i == "bigint" ? Number(i) : i, !Number.isFinite(i))
+    throw new TypeError(`Expected a finite number, got ${typeof i}: ${i}`);
+  Object.assign({
+    bits: !1,
+    binary: !1
+  }, t);
+  const B = t.bits ? t.binary ? T : b : t.binary ? o : f;
+  if (t.signed && i === 0)
+    return ` 0 ${B[0]}`;
+  const e = i < 0, r = e ? "-" : t.signed ? "+" : "";
+  if (e && (i = -i), i < 1) {
+    const g = n(i, t.locale);
+    return r + g + " " + B[0];
+  }
+  const a = Math.min(Math.floor(t.binary ? Math.log(i) / Math.log(1024) : Math.log10(i) / 3), B.length - 1);
+  i /= (t.binary ? 1024 : 1e3) ** a, i = Number(i.toPrecision(3));
+  const s = n(Number(i), t.locale), c = B[a];
+  return r + s + " " + c;
+}
+export {
+  y as prettyBytes
+};
+//# sourceMappingURL=prettyBytes.js.map

package/dist/lib/util/helpers/dist/prettyBytes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prettyBytes.js","sources":["../../../../../../../lib/util/helpers/src/prettyBytes.ts"],"sourcesContent":["const BYTE_UNITS = [\n  'B',\n  'kB',\n  'MB',\n  'GB',\n  'TB',\n  'PB',\n  'EB',\n  'ZB',\n  'YB',\n];\n\nconst BIBYTE_UNITS = [\n  'B',\n  'kiB',\n  'MiB',\n  'GiB',\n  'TiB',\n  'PiB',\n  'EiB',\n  'ZiB',\n  'YiB',\n];\n\nconst BIT_UNITS = [\n  'b',\n  'kbit',\n  'Mbit',\n  'Gbit',\n  'Tbit',\n  'Pbit',\n  'Ebit',\n  'Zbit',\n  'Ybit',\n];\n\nconst BIBIT_UNITS = [\n  'b',\n  'kibit',\n  'Mibit',\n  'Gibit',\n  'Tibit',\n  'Pibit',\n  'Eibit',\n  'Zibit',\n  'Yibit',\n];\n\ntype Options = {\n  bits?: boolean;\n  binary?: boolean;\n  signed?: boolean;\n  locale?: string;\n};\n\n/*\nFormats the given number using `Number#toLocaleString`.\n- If locale is a string, the value is expected to be a locale-key (for example: `de`).\n- If locale is true, the system default locale is used for translation.\n- If no value for locale is specified, the number is returned unmodified.\n*/\nconst toLocaleString = (number: number, locale: string | undefined) => {\n  let result = String(number);\n  if (typeof locale === 'string' || Array.isArray(locale)) {\n    result = number.toLocaleString(locale);\n  } else if (locale === true) {\n    result = number.toLocaleString(undefined);\n  }\n\n  return result;\n};\n\nexport function prettyBytes(number: number | bigint, options: Options) {\n  number = typeof number === 'bigint' ? Number(number) : number;\n\n  if (!Number.isFinite(number)) {\n    throw new TypeError(`Expected a finite number, got ${typeof number}: ${number}`);\n  }\n\n  Object.assign({\n    bits: false,\n    binary: false,\n  }, options);\n\n  const UNITS = options.bits\n    ? (options.binary ? BIBIT_UNITS : BIT_UNITS)\n    : (options.binary ? BIBYTE_UNITS : BYTE_UNITS);\n\n  if (options.signed && number === 0) {\n    return ` 0 ${UNITS[0]}`;\n  }\n\n  const isNegative = number < 0;\n  const prefix = isNegative ? '-' : (options.signed ? '+' : '');\n\n  if (isNegative) {\n    number = -number;\n  }\n\n  let localeOptions;\n\n  if (number < 1) {\n    const numberString = toLocaleString(number, options.locale);\n    return prefix + numberString + ' ' + UNITS[0];\n  }\n\n  const exponent = Math.min(Math.floor(options.binary ? Math.log(number) / Math.log(1024) : Math.log10(number) / 3), UNITS.length - 1);\n  number /= (options.binary ? 1024 : 1000) ** exponent;\n\n  if (!localeOptions) {\n    number = Number(number.toPrecision(3));\n  }\n\n  const numberString = toLocaleString(Number(number), options.locale);\n\n  const unit = UNITS[exponent];\n\n  return prefix + numberString + ' ' + unit;\n}\n"],"names":["BYTE_UNITS","BIBYTE_UNITS","BIT_UNITS","BIBIT_UNITS","toLocaleString","number","locale","result","prettyBytes","options","UNITS","isNegative","prefix","numberString","exponent","unit"],"mappings":"AAAA,MAAMA,IAAa;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAEKC,IAAe;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAEKC,IAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAEKC,IAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAeKC,IAAiB,CAACC,GAAgBC,MAA8B;AACpE,MAAIC,IAAS,OAAOF,CAAM;AAC1B,SAAI,OAAOC,KAAW,YAAY,MAAM,QAAQA,CAAM,IACpDC,IAASF,EAAO,eAAeC,CAAM,IAC5BA,MAAW,OACpBC,IAASF,EAAO,eAAe,MAAS,IAGnCE;AACT;AAEM,SAAUC,EAAYH,GAAyBI,GAAgB;AAGnE,MAFAJ,IAAS,OAAOA,KAAW,WAAW,OAAOA,CAAM,IAAIA,GAEnD,CAAC,OAAO,SAASA,CAAM;AACzB,UAAM,IAAI,UAAU,iCAAiC,OAAOA,CAAM,KAAKA,CAAM,EAAE;AAGjF,SAAO,OAAO;AAAA,IACZ,MAAM;AAAA,IACN,QAAQ;AAAA,EACT,GAAEI,CAAO;AAEV,QAAMC,IAAQD,EAAQ,OACjBA,EAAQ,SAASN,IAAcD,IAC/BO,EAAQ,SAASR,IAAeD;AAErC,MAAIS,EAAQ,UAAUJ,MAAW;AAC/B,WAAO,MAAMK,EAAM,CAAC,CAAC;AAGvB,QAAMC,IAAaN,IAAS,GACtBO,IAASD,IAAa,MAAOF,EAAQ,SAAS,MAAM;AAQ1D,MANIE,MACFN,IAAS,CAACA,IAKRA,IAAS,GAAG;AACd,UAAMQ,IAAeT,EAAeC,GAAQI,EAAQ,MAAM;AAC1D,WAAOG,IAASC,IAAe,MAAMH,EAAM,CAAC;AAAA,EAC9C;AAEA,QAAMI,IAAW,KAAK,IAAI,KAAK,MAAML,EAAQ,SAAS,KAAK,IAAIJ,CAAM,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,MAAMA,CAAM,IAAI,CAAC,GAAGK,EAAM,SAAS,CAAC;AACnI,EAAAL,MAAWI,EAAQ,SAAS,OAAO,QAASK,GAG1CT,IAAS,OAAOA,EAAO,YAAY,CAAC,CAAC;AAGvC,QAAMQ,IAAeT,EAAe,OAAOC,CAAM,GAAGI,EAAQ,MAAM,GAE5DM,IAAOL,EAAMI,CAAQ;AAE3B,SAAOF,IAASC,IAAe,MAAME;AACvC;"}

package/dist/lib.d.ts

@@ -18,6 +18,7 @@ export * from './components/PlAgGridColumnManager';
 export * from './components/PlTableFilters';
 export * from './components/PlMultiSequenceAlignment';
 export * from './components/PlAnnotations';
+export * from './components/PlBtnExportArchive';
 export * from './defineApp';
 export * from './createModel';
 export * from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.44.15",
+  "version": "1.45.0",
   "type": "module",
   "main": "dist/index.js",
   "styles": "dist/index.js",
@@ -25,9 +25,11 @@
     "@vueuse/integrations": "^13.3.0",
     "d3-format": "^3.1.0",
     "zod": "~3.23.8",
+    "@zip.js/zip.js": "^2.8.2",
+    "@milaboratories/ptabler-expression-js": "1.1.0",
+    "@milaboratories/uikit": "2.5.0",
     "@milaboratories/biowasm-tools": "2.0.0",
-    "@milaboratories/uikit": "2.4.30",
-    "@platforma-sdk/model": "1.44.14"
+    "@platforma-sdk/model": "1.45.0"
   },
   "devDependencies": {
     "happy-dom": "^15.11.7",
@@ -43,9 +45,9 @@
     "fast-json-patch": "^3.1.1",
     "@faker-js/faker": "^9.2.0",
     "@milaboratories/ts-configs": "1.0.6",
+    "@milaboratories/helpers": "1.12.0",
     "@milaboratories/build-configs": "1.0.8",
     "@milaboratories/ts-builder": "1.0.5",
-    "@milaboratories/helpers": "1.12.0",
     "@milaboratories/eslint-config": "1.0.4"
   },
   "scripts": {

package/src/components/PlAnnotations/components/AnnotationsSidebar.vue

@@ -7,10 +7,10 @@ import {
   PlElementList,
   PlSidebarItem,
 } from '@milaboratories/uikit';
-import type { AnnotationScriptUi } from '@platforma-sdk/model';
+import type { Annotation } from '../types';
 
 // Models
-const annotation = defineModel<AnnotationScriptUi>('annotation', { required: true });
+const annotation = defineModel<Annotation>('annotation', { required: true });
 const selectedStepId = defineModel<undefined | number>('selectedStepId');
 // Emits
 const emits = defineEmits<{

package/src/components/PlAnnotations/components/DynamicForm.vue

@@ -1,11 +1,12 @@
-<script setup lang="ts" generic="T extends FilterUi = FilterUi">
+<script setup lang="ts" generic="T extends FilterSpec = FilterSpec">
 import { computed, watch } from 'vue';
-import type { FilterUi, SUniversalPColumnId, TypeFieldRecord } from '@platforma-sdk/model';
-import type { FilterUiType } from '@platforma-sdk/model';
+
 import { isNil } from '@milaboratories/helpers';
-import { PlTextField, PlDropdown, PlNumberField, PlCheckbox } from '@milaboratories/uikit';
-import { getFilterUiTypeOptions, getFilterUiMetadata } from '@platforma-sdk/model';
-import type { SimplifiedUniversalPColumnEntry } from '../types';
+import type { FilterSpecTypeFieldRecord } from '@milaboratories/uikit';
+import { getFilterUiMetadata, getFilterUiTypeOptions, PlCheckbox, PlDropdown, PlNumberField, PlTextField } from '@milaboratories/uikit';
+import type { SimplifiedUniversalPColumnEntry, SUniversalPColumnId } from '@platforma-sdk/model';
+
+import type { FilterSpec, FilterSpecType } from '../types';
 
 type ObjectEntries<T, K extends keyof T = keyof T> = [K, T[K]][];
 
@@ -13,7 +14,7 @@ const formData = defineModel<T>({ default: () => ({}) });
 
 const props = defineProps<{
   columns: SimplifiedUniversalPColumnEntry[];
-  formMetadata: TypeFieldRecord<T>;
+  formMetadata: FilterSpecTypeFieldRecord<T>;
 }>();
 
 const columnSpecRef = computed(() => {
@@ -66,6 +67,12 @@ watch(() => props.formMetadata, (newForm) => {
 { immediate: true, deep: true },
 );
 
+function isFilterType(type: string | undefined): boolean {
+  return type === 'FilterType'
+    // @deprecated version
+    || type === 'FilterUiType';
+}
+
 </script>
 
 <template>
@@ -81,9 +88,9 @@ watch(() => props.formMetadata, (newForm) => {
           @update:model-value="setFieldValue(fieldName, $event as T[keyof T])"
         />
       </template>
-      <template v-else-if="field.fieldType === 'FilterUiType'">
+      <template v-else-if="isFilterType(field.fieldType)">
         <PlDropdown
-          :model-value="formData[fieldName] as FilterUiType"
+          :model-value="formData[fieldName] as FilterSpecType"
           :label="field.label ?? fieldName"
           :options="filterUiTypeOptions"
           @update:model-value="setFieldValue(fieldName, $event as T[keyof T])"

package/src/components/PlAnnotations/components/FilterSidebar.vue

@@ -1,25 +1,33 @@
+<script lang="ts">
+export type Props = {
+  columns: SimplifiedUniversalPColumnEntry[];
+  hasSelectedColumns?: boolean;
+  getValuesForSelectedColumns?: () => Promise<undefined | { columnId: PObjectId; values: string[] }>;
+};
+</script>
 <script setup lang="ts">
 import { isNil, randomInt } from '@milaboratories/helpers';
 import {
+  getFilterUiMetadata,
   PlBtnSecondary,
   PlEditableTitle,
   PlElementList,
   PlSidebarItem,
 } from '@milaboratories/uikit';
-import type { AnnotationStepUi, FilterUi, PObjectId, SUniversalPColumnId } from '@platforma-sdk/model';
-import { getFilterUiMetadata } from '@platforma-sdk/model';
-import type { SimplifiedUniversalPColumnEntry } from '../types';
+import type { PObjectId, SimplifiedUniversalPColumnEntry, SUniversalPColumnId } from '@platforma-sdk/model';
+import { computed } from 'vue';
+import type { Filter, FilterSpec } from '../types';
 import { createDefaultFilterMetadata } from '../utils';
 import DynamicForm from './DynamicForm.vue';
 
 // Models
-const step = defineModel<AnnotationStepUi>('step', { required: true });
+const step = defineModel<Filter>('step', { required: true });
 // Props
-const props = defineProps<{
-  columns: SimplifiedUniversalPColumnEntry[];
-  hasSelectedColumns: boolean;
-  getValuesForSelectedColumns: () => Promise<undefined | { columnId: PObjectId; values: string[] }>;
-}>();
+const props = defineProps<Props>();
+// State
+const withSelection = computed(() => {
+  return props.hasSelectedColumns !== undefined && props.getValuesForSelectedColumns !== undefined;
+});
 // Actions
 const addFilterPlaceholder = () => {
   step.value.filter.filters.push({
@@ -30,6 +38,8 @@ const addFilterPlaceholder = () => {
 };
 
 async function addFilterFromSelected() {
+  if (props.hasSelectedColumns === undefined || props.getValuesForSelectedColumns === undefined) return;
+
   const data = await props.getValuesForSelectedColumns();
   if (!data || data.values.length === 0) return;
 
@@ -50,18 +60,18 @@ async function addFilterFromSelected() {
 }
 
 // Getters
-const getColumnLabel = (filter: FilterUi) => {
+const getColumnLabel = (filter: FilterSpec) => {
   if (!isNil(filter.name)) return filter.name;
   return props.columns
     .find((c) => 'column' in filter ? c.id === filter.column : false)?.label
     ?? filter.type;
 };
 
-const getFormMetadata = (filter: FilterUi) => {
+const getFormMetadata = (filter: FilterSpec) => {
   return !isNil(filter.type) ? getFilterUiMetadata(filter.type).form : createDefaultFilterMetadata();
 };
 
-const getFilterValues = (filter: FilterUi) => {
+const getFilterValues = (filter: FilterSpec) => {
   if (filter.type === 'or' || filter.type === 'and') {
     return filter.filters.map((f) => 'value' in f && !isNil(f.value) ? f.value : null).filter((v) => !isNil(v)).join (', ');
   }
@@ -87,7 +97,7 @@ const getFilterValues = (filter: FilterUi) => {
           <PlBtnSecondary style="width: 100%;" icon="add" @click="addFilterPlaceholder">
             Filter
           </PlBtnSecondary>
-          <PlBtnSecondary style="width: 100%;" icon="add" :disabled="!props.hasSelectedColumns" @click="addFilterFromSelected">
+          <PlBtnSecondary v-if="withSelection" style="width: 100%;" icon="add" :disabled="!props.hasSelectedColumns" @click="addFilterFromSelected">
             From selection
           </PlBtnSecondary>
         </div>

package/src/components/PlAnnotations/components/PlAnnotations.vue

@@ -0,0 +1,92 @@
+<script lang="ts">
+import type { Props as BaseProps } from './FilterSidebar.vue';
+export type Props = BaseProps & {
+  onDeleteSchema?: () => void;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, effect, shallowRef } from 'vue';
+
+import { isNil } from '@milaboratories/helpers';
+import { PlSidebarGroup, useConfirm } from '@milaboratories/uikit';
+
+import type { Annotation } from '../types';
+import AnnotationsSidebar from './AnnotationsSidebar.vue';
+import FilterSidebar from './FilterSidebar.vue';
+
+// Models
+const annotation = defineModel<Annotation>('annotation', { required: true });
+// Props
+const props = defineProps<Props>();
+// State
+const selectedStepId = shallowRef<number | undefined>(undefined);
+const selectedStep = computed(() => {
+  return isNil(selectedStepId.value) || isNil(annotation.value)
+    ? undefined
+    : annotation.value.steps.find((step) => step.id === selectedStepId.value);
+});
+
+// Watchers
+effect(function setDefaultStepId() {
+  if (selectedStepId.value === undefined && annotation.value.steps.length > 0) {
+    selectedStepId.value = annotation.value.steps[0].id;
+  }
+});
+// Hooks
+const confirmResetSchema = useConfirm({
+  title: 'Reset Schema',
+  message: 'Are you sure you want to reset the schema? This action cannot be undone.',
+  confirmLabel: 'Yes, reset',
+  cancelLabel: 'No, cancel',
+});
+// Actions
+async function handleDeleteSchema() {
+  if (await confirmResetSchema()) {
+    selectedStepId.value = undefined;
+    props.onDeleteSchema?.();
+  }
+}
+
+</script>
+
+<template>
+  <PlSidebarGroup :class="$style.sidebarGroup">
+    <template #item-0>
+      <AnnotationsSidebar
+        v-model:annotation="annotation"
+        v-model:selectedStepId="selectedStepId"
+        :class="$style.sidebarItem"
+        :columns="props.columns"
+        @delete-schema="handleDeleteSchema"
+      />
+    </template>
+    <template #item-1>
+      <FilterSidebar
+        v-if="selectedStep"
+        v-model:step="selectedStep"
+        :class="$style.sidebarItem"
+        :columns="props.columns"
+        :selectedStepId="selectedStepId"
+        :hasSelectedColumns="props.hasSelectedColumns"
+        :getValuesForSelectedColumns="props.getValuesForSelectedColumns"
+      />
+    </template>
+  </PlSidebarGroup>
+</template>
+
+<style lang="scss" module>
+.modal {
+  display: flex;
+}
+
+.sidebarGroup {
+  width: 100%;
+  height: 100%;
+}
+
+.sidebarItem {
+  width: 100%;
+  height: 100%;
+}
+</style>