@platforma-sdk/ui-vue 1.44.5 → 1.44.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +34 -36
- package/.turbo/turbo-type-check.log +1 -1
- package/CHANGELOG.md +7 -0
- package/dist/AgGridVue/createAgGridColDef.js +2 -3
- package/dist/AgGridVue/createAgGridColDef.js.map +1 -1
- package/dist/AgGridVue/useAgGridOptions.js +2 -3
- package/dist/AgGridVue/useAgGridOptions.js.map +1 -1
- package/dist/components/PlAgDataTable/PlAgDataTableSheets.vue2.js +2 -3
- package/dist/components/PlAgDataTable/PlAgDataTableSheets.vue2.js.map +1 -1
- package/dist/components/PlAgDataTable/PlAgDataTableV2.vue2.js +2 -3
- package/dist/components/PlAgDataTable/PlAgDataTableV2.vue2.js.map +1 -1
- package/dist/components/PlAgDataTable/PlAgRowCount.vue.js +7 -8
- package/dist/components/PlAgDataTable/PlAgRowCount.vue.js.map +1 -1
- package/dist/components/PlAgDataTable/sources/focus-row.js +20 -21
- package/dist/components/PlAgDataTable/sources/focus-row.js.map +1 -1
- package/dist/components/PlAgDataTable/sources/table-source-v2.js +2 -3
- package/dist/components/PlAgDataTable/sources/table-source-v2.js.map +1 -1
- package/dist/components/PlAgDataTable/sources/table-state-v2.js +2 -3
- package/dist/components/PlAgDataTable/sources/table-state-v2.js.map +1 -1
- package/dist/components/PlAgDataTable/types.js +9 -10
- package/dist/components/PlAgDataTable/types.js.map +1 -1
- package/dist/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue.js +9 -10
- package/dist/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue.js.map +1 -1
- package/dist/components/PlAgRowNumHeader.vue.js +2 -3
- package/dist/components/PlAgRowNumHeader.vue.js.map +1 -1
- package/dist/components/PlAnnotations/components/AnnotationsSidebar.vue2.js +2 -3
- package/dist/components/PlAnnotations/components/AnnotationsSidebar.vue2.js.map +1 -1
- package/dist/components/PlAnnotations/components/DynamicForm.vue2.js +2 -3
- package/dist/components/PlAnnotations/components/DynamicForm.vue2.js.map +1 -1
- package/dist/components/PlAnnotations/components/FilterSidebar.vue2.js +2 -3
- package/dist/components/PlAnnotations/components/FilterSidebar.vue2.js.map +1 -1
- package/dist/components/PlAnnotations/components/PlAnnotationsModal.vue2.js +9 -10
- package/dist/components/PlAnnotations/components/PlAnnotationsModal.vue2.js.map +1 -1
- package/dist/components/PlMultiSequenceAlignment/PlMultiSequenceAlignment.vue2.js +2 -3
- package/dist/components/PlMultiSequenceAlignment/PlMultiSequenceAlignment.vue2.js.map +1 -1
- package/dist/components/PlMultiSequenceAlignment/Toolbar.vue2.js +2 -3
- package/dist/components/PlMultiSequenceAlignment/Toolbar.vue2.js.map +1 -1
- package/dist/components/PlMultiSequenceAlignment/data.js +8 -9
- package/dist/components/PlMultiSequenceAlignment/data.js.map +1 -1
- package/dist/components/PlTableFilters/PlTableAddFilterV2.vue.js +2 -3
- package/dist/components/PlTableFilters/PlTableAddFilterV2.vue.js.map +1 -1
- package/dist/components/PlTableFilters/PlTableFilterEntryV2.vue.js +2 -3
- package/dist/components/PlTableFilters/PlTableFilterEntryV2.vue.js.map +1 -1
- package/dist/components/PlTableFilters/PlTableFiltersV2.vue2.js +2 -3
- package/dist/components/PlTableFilters/PlTableFiltersV2.vue2.js.map +1 -1
- package/dist/components/PlTableFilters/filters-state.js +9 -10
- package/dist/components/PlTableFilters/filters-state.js.map +1 -1
- package/dist/composition/fileContent.js +0 -1
- package/dist/composition/fileContent.js.map +1 -1
- package/dist/createModel.js +2 -3
- package/dist/createModel.js.map +1 -1
- package/dist/defineApp.js +8 -9
- package/dist/defineApp.js.map +1 -1
- package/dist/internal/UpdateSerializer.js +10 -11
- package/dist/internal/UpdateSerializer.js.map +1 -1
- package/dist/internal/createAppModel.js +11 -12
- package/dist/internal/createAppModel.js.map +1 -1
- package/dist/internal/createAppV1.js +2 -3
- package/dist/internal/createAppV1.js.map +1 -1
- package/dist/internal/createAppV2.js +31 -32
- package/dist/internal/createAppV2.js.map +1 -1
- package/package.json +5 -5
- package/dist/lib/util/helpers/dist/parse.js +0 -24
- package/dist/lib/util/helpers/dist/parse.js.map +0 -1
- package/dist/lib/util/helpers/dist/test_timeouts.js +0 -9
- package/dist/lib/util/helpers/dist/test_timeouts.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../src/components/PlAgDataTable/types.ts"],"sourcesContent":["import {\n type JsonCompatible,\n type AxisId,\n type CanonicalizedJson,\n type ListOptionBase,\n type PlDataTableModel,\n type PlDataTableSheet,\n type PlDataTableSheetState,\n type PlTableFilter,\n type PlTableFilterType,\n type PTableColumnId,\n type PTableColumnSpec,\n type PTableKey,\n type PTableValue,\n} from '@platforma-sdk/model';\nimport type { PTableHidden } from './sources/common';\nimport type { ComputedRef, MaybeRefOrGetter } from 'vue';\nimport { computed, toValue } from 'vue';\nimport canonicalize from 'canonicalize';\nimport { deepClone } from '@milaboratories/helpers';\n\nexport type PlDataTableFilterConfig = {\n options?: PlTableFilterType[];\n default?: PlTableFilter;\n};\n\nexport type PlDataTableSettingsV2Base =\n | { sourceId: null }\n | {\n /** Unique source id for state caching */\n sourceId: string;\n /** Sheets that we want to show in our table */\n sheets: PlDataTableSheet[];\n /** Result of `createPlDataTableV2` */\n model: PlDataTableModel | undefined;\n };\n\n/** Data table V2 settings */\nexport type PlDataTableSettingsV2 = PlDataTableSettingsV2Base & {\n /** Callback configuring filters for the table */\n filtersConfig: (info: {\n sourceId: string;\n column: PTableColumnSpec;\n }) => PlDataTableFilterConfig;\n};\n\ntype OptionsBasic = {\n /** Block output created by `createPlDataTableV2` */\n model: MaybeRefOrGetter<PlDataTableModel | undefined>;\n /**\n * Sheets for partitioned data sources.\n * Do not set if data source is never partitioned.\n */\n sheets?: MaybeRefOrGetter<PlDataTableSheet[] | undefined>;\n};\n\ntype OptionsSimple = OptionsBasic & {\n /**\n * Callback configuring filters for the table.\n * If not provided, filtering will be disabled.\n */\n filtersConfig?: (info: {\n column: PTableColumnSpec;\n }) => PlDataTableFilterConfig;\n};\n\ntype OptionsAdvanced<T> = OptionsBasic & {\n /**\n * Block property (such as inputAnchor) used to produce the data source.\n * Mandatory for cases when the table can change without block run.\n * Skip when the table is changed only after block run.\n * Ask developers for help if you don't know what to set here.\n */\n sourceId: MaybeRefOrGetter<T | undefined>;\n /**\n * Callback configuring filters for the table.\n * If not provided, filtering will be disabled.\n * Parameter `sourceId` should be compared using `isJsonEqual` from `@milaboratories/helpers`.\n */\n filtersConfig?: (info: {\n sourceId: JsonCompatible<T>;\n column: PTableColumnSpec;\n }) => PlDataTableFilterConfig;\n};\n\nexport function usePlDataTableSettingsV2<T>(options: OptionsAdvanced<T>): ComputedRef<PlDataTableSettingsV2>;\nexport function usePlDataTableSettingsV2(options: OptionsSimple): ComputedRef<PlDataTableSettingsV2>;\nexport function usePlDataTableSettingsV2<T>(options: OptionsAdvanced<T> | OptionsSimple): ComputedRef<PlDataTableSettingsV2> {\n const fc = options.filtersConfig;\n const filtersConfigValue = typeof fc === 'function'\n ? (ops: {\n sourceId: string;\n column: PTableColumnSpec;\n }) => {\n try {\n return fc({\n sourceId: JSON.parse(ops.sourceId) as JsonCompatible<T>,\n column: ops.column,\n });\n } catch (e) {\n console.error(`filtersConfig failed for sourceId: ${ops.sourceId}, column: ${JSON.stringify(ops.column)} - using default config`, e);\n return {};\n }\n }\n : () => ({});\n return computed(() => {\n const modelValue = deepClone(toValue(options.model));\n let settingsBase: PlDataTableSettingsV2Base;\n if ('sourceId' in options) {\n const sourceIdValue = deepClone(toValue(options.sourceId));\n if (options.sheets) {\n const sheetsValue = deepClone(toValue(options.sheets));\n settingsBase = sourceIdValue && sheetsValue\n ? {\n sourceId: canonicalize(sourceIdValue)!,\n sheets: sheetsValue,\n model: modelValue,\n }\n : { sourceId: null };\n } else {\n settingsBase = sourceIdValue\n ? {\n sourceId: canonicalize(sourceIdValue)!,\n sheets: [],\n model: modelValue,\n }\n : { sourceId: null };\n }\n } else {\n if (options.sheets) {\n const sheetsValue = deepClone(toValue(options.sheets));\n settingsBase = sheetsValue\n ? {\n sourceId: canonicalize('static')!,\n sheets: sheetsValue,\n model: modelValue,\n }\n : { sourceId: null };\n } else {\n settingsBase = modelValue\n ? {\n sourceId: canonicalize('static')!,\n sheets: [],\n model: modelValue,\n }\n : { sourceId: null };\n }\n }\n return {\n ...settingsBase,\n filtersConfig: filtersConfigValue,\n };\n });\n};\n\n/** PlTableFilters restriction entry */\nexport type PlTableFiltersRestriction = {\n /** Spec of the column for which filter types should be restricted */\n column: PTableColumnId;\n /** List of filter types applicable to the column */\n allowedFilterTypes: PlTableFilterType[];\n};\n\n/** PlTableFilters default settings entry */\nexport type PlTableFiltersDefault = {\n /** Spec of the column the default should be applied */\n column: PTableColumnId;\n /** Filter entry */\n default: PlTableFilter;\n};\n\n/** PlAgDataTable controller contains all exported methods */\nexport type PlAgDataTableV2Controller = {\n /**\n * Scroll table to make row with provided key visible\n * Warning: works reliably only in client side mode.\n * @returns `true` if row was found and focused, `false` otherwise\n */\n focusRow: (rowKey: PTableKey) => Promise<boolean>;\n /**\n * Update selection in the table.\n * @param axesIds - axes ids identifying axes key values in `selectedKeys`\n * @param selectedKeys - axes keys of the rows to select\n * Warning: update will be ignored if axes ids cannot be correctly resolved\n * @returns `true` if selection was updated, `false` otherwise\n */\n updateSelection: ({\n axesSpec,\n selectedKeys,\n }: {\n axesSpec: AxisId[];\n selectedKeys: PTableKey[];\n }) => Promise<boolean>;\n};\n\nexport type PlTableRowId = PTableKey;\n\nexport type PlTableRowIdJson = CanonicalizedJson<PTableKey>;\n\n/** PlAgDataTableV2 row */\nexport type PlAgDataTableV2Row = {\n /** Axes key */\n axesKey: PTableKey;\n /** Unique row identifier */\n id: PlTableRowIdJson;\n /** Row values by column; sheet axes and labeled axes are excluded */\n [field: `${number}`]: PTableValue | PTableHidden;\n};\n\nexport type PlAgOverlayLoadingParams = {\n /**\n * Required flag, that shows catInBag icon with message if `true`, shows PlSplash component if `false`.\n */\n notReady?: boolean;\n /**\n * Prop to override default \"Loading\" text\n */\n loadingText?: string;\n /**\n * Prop to override default \"No datasource\" text (So why props name is notReady? Good question)\n */\n notReadyText?: string;\n /**\n * Use \"transparent\" to make table headers visible below the loading layer\n */\n overlayType?: 'transparent';\n};\n\nexport type PlAgOverlayNoRowsParams = {\n /**\n * Prop to override default \"Empty\" text\n */\n text?: string;\n};\n\nexport type PlDataTableSheetsSettings = {\n /** User-provided sheets for the sourceId */\n sheets: PlDataTableSheet[];\n /** Persisted selection for the sourceId */\n cachedState: PlDataTableSheetState[];\n};\n\nexport type PlDataTableSheetNormalized = {\n /** id of the axis */\n axisId: AxisId;\n /** sheet prefix */\n prefix: string;\n /** options to show in the filter dropdown */\n options: ListOptionBase<string | number>[];\n /** default (selected) value */\n defaultValue: string | number;\n};\n"],"names":["usePlDataTableSettingsV2","options","fc","filtersConfigValue","ops","e","computed","modelValue","deepClone","toValue","settingsBase","sourceIdValue","sheetsValue","canonicalize"],"mappings":"
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../src/components/PlAgDataTable/types.ts"],"sourcesContent":["import {\n type JsonCompatible,\n type AxisId,\n type CanonicalizedJson,\n type ListOptionBase,\n type PlDataTableModel,\n type PlDataTableSheet,\n type PlDataTableSheetState,\n type PlTableFilter,\n type PlTableFilterType,\n type PTableColumnId,\n type PTableColumnSpec,\n type PTableKey,\n type PTableValue,\n} from '@platforma-sdk/model';\nimport type { PTableHidden } from './sources/common';\nimport type { ComputedRef, MaybeRefOrGetter } from 'vue';\nimport { computed, toValue } from 'vue';\nimport canonicalize from 'canonicalize';\nimport { deepClone } from '@milaboratories/helpers';\n\nexport type PlDataTableFilterConfig = {\n options?: PlTableFilterType[];\n default?: PlTableFilter;\n};\n\nexport type PlDataTableSettingsV2Base =\n | { sourceId: null }\n | {\n /** Unique source id for state caching */\n sourceId: string;\n /** Sheets that we want to show in our table */\n sheets: PlDataTableSheet[];\n /** Result of `createPlDataTableV2` */\n model: PlDataTableModel | undefined;\n };\n\n/** Data table V2 settings */\nexport type PlDataTableSettingsV2 = PlDataTableSettingsV2Base & {\n /** Callback configuring filters for the table */\n filtersConfig: (info: {\n sourceId: string;\n column: PTableColumnSpec;\n }) => PlDataTableFilterConfig;\n};\n\ntype OptionsBasic = {\n /** Block output created by `createPlDataTableV2` */\n model: MaybeRefOrGetter<PlDataTableModel | undefined>;\n /**\n * Sheets for partitioned data sources.\n * Do not set if data source is never partitioned.\n */\n sheets?: MaybeRefOrGetter<PlDataTableSheet[] | undefined>;\n};\n\ntype OptionsSimple = OptionsBasic & {\n /**\n * Callback configuring filters for the table.\n * If not provided, filtering will be disabled.\n */\n filtersConfig?: (info: {\n column: PTableColumnSpec;\n }) => PlDataTableFilterConfig;\n};\n\ntype OptionsAdvanced<T> = OptionsBasic & {\n /**\n * Block property (such as inputAnchor) used to produce the data source.\n * Mandatory for cases when the table can change without block run.\n * Skip when the table is changed only after block run.\n * Ask developers for help if you don't know what to set here.\n */\n sourceId: MaybeRefOrGetter<T | undefined>;\n /**\n * Callback configuring filters for the table.\n * If not provided, filtering will be disabled.\n * Parameter `sourceId` should be compared using `isJsonEqual` from `@milaboratories/helpers`.\n */\n filtersConfig?: (info: {\n sourceId: JsonCompatible<T>;\n column: PTableColumnSpec;\n }) => PlDataTableFilterConfig;\n};\n\nexport function usePlDataTableSettingsV2<T>(options: OptionsAdvanced<T>): ComputedRef<PlDataTableSettingsV2>;\nexport function usePlDataTableSettingsV2(options: OptionsSimple): ComputedRef<PlDataTableSettingsV2>;\nexport function usePlDataTableSettingsV2<T>(options: OptionsAdvanced<T> | OptionsSimple): ComputedRef<PlDataTableSettingsV2> {\n const fc = options.filtersConfig;\n const filtersConfigValue = typeof fc === 'function'\n ? (ops: {\n sourceId: string;\n column: PTableColumnSpec;\n }) => {\n try {\n return fc({\n sourceId: JSON.parse(ops.sourceId) as JsonCompatible<T>,\n column: ops.column,\n });\n } catch (e) {\n console.error(`filtersConfig failed for sourceId: ${ops.sourceId}, column: ${JSON.stringify(ops.column)} - using default config`, e);\n return {};\n }\n }\n : () => ({});\n return computed(() => {\n const modelValue = deepClone(toValue(options.model));\n let settingsBase: PlDataTableSettingsV2Base;\n if ('sourceId' in options) {\n const sourceIdValue = deepClone(toValue(options.sourceId));\n if (options.sheets) {\n const sheetsValue = deepClone(toValue(options.sheets));\n settingsBase = sourceIdValue && sheetsValue\n ? {\n sourceId: canonicalize(sourceIdValue)!,\n sheets: sheetsValue,\n model: modelValue,\n }\n : { sourceId: null };\n } else {\n settingsBase = sourceIdValue\n ? {\n sourceId: canonicalize(sourceIdValue)!,\n sheets: [],\n model: modelValue,\n }\n : { sourceId: null };\n }\n } else {\n if (options.sheets) {\n const sheetsValue = deepClone(toValue(options.sheets));\n settingsBase = sheetsValue\n ? {\n sourceId: canonicalize('static')!,\n sheets: sheetsValue,\n model: modelValue,\n }\n : { sourceId: null };\n } else {\n settingsBase = modelValue\n ? {\n sourceId: canonicalize('static')!,\n sheets: [],\n model: modelValue,\n }\n : { sourceId: null };\n }\n }\n return {\n ...settingsBase,\n filtersConfig: filtersConfigValue,\n };\n });\n};\n\n/** PlTableFilters restriction entry */\nexport type PlTableFiltersRestriction = {\n /** Spec of the column for which filter types should be restricted */\n column: PTableColumnId;\n /** List of filter types applicable to the column */\n allowedFilterTypes: PlTableFilterType[];\n};\n\n/** PlTableFilters default settings entry */\nexport type PlTableFiltersDefault = {\n /** Spec of the column the default should be applied */\n column: PTableColumnId;\n /** Filter entry */\n default: PlTableFilter;\n};\n\n/** PlAgDataTable controller contains all exported methods */\nexport type PlAgDataTableV2Controller = {\n /**\n * Scroll table to make row with provided key visible\n * Warning: works reliably only in client side mode.\n * @returns `true` if row was found and focused, `false` otherwise\n */\n focusRow: (rowKey: PTableKey) => Promise<boolean>;\n /**\n * Update selection in the table.\n * @param axesIds - axes ids identifying axes key values in `selectedKeys`\n * @param selectedKeys - axes keys of the rows to select\n * Warning: update will be ignored if axes ids cannot be correctly resolved\n * @returns `true` if selection was updated, `false` otherwise\n */\n updateSelection: ({\n axesSpec,\n selectedKeys,\n }: {\n axesSpec: AxisId[];\n selectedKeys: PTableKey[];\n }) => Promise<boolean>;\n};\n\nexport type PlTableRowId = PTableKey;\n\nexport type PlTableRowIdJson = CanonicalizedJson<PTableKey>;\n\n/** PlAgDataTableV2 row */\nexport type PlAgDataTableV2Row = {\n /** Axes key */\n axesKey: PTableKey;\n /** Unique row identifier */\n id: PlTableRowIdJson;\n /** Row values by column; sheet axes and labeled axes are excluded */\n [field: `${number}`]: PTableValue | PTableHidden;\n};\n\nexport type PlAgOverlayLoadingParams = {\n /**\n * Required flag, that shows catInBag icon with message if `true`, shows PlSplash component if `false`.\n */\n notReady?: boolean;\n /**\n * Prop to override default \"Loading\" text\n */\n loadingText?: string;\n /**\n * Prop to override default \"No datasource\" text (So why props name is notReady? Good question)\n */\n notReadyText?: string;\n /**\n * Use \"transparent\" to make table headers visible below the loading layer\n */\n overlayType?: 'transparent';\n};\n\nexport type PlAgOverlayNoRowsParams = {\n /**\n * Prop to override default \"Empty\" text\n */\n text?: string;\n};\n\nexport type PlDataTableSheetsSettings = {\n /** User-provided sheets for the sourceId */\n sheets: PlDataTableSheet[];\n /** Persisted selection for the sourceId */\n cachedState: PlDataTableSheetState[];\n};\n\nexport type PlDataTableSheetNormalized = {\n /** id of the axis */\n axisId: AxisId;\n /** sheet prefix */\n prefix: string;\n /** options to show in the filter dropdown */\n options: ListOptionBase<string | number>[];\n /** default (selected) value */\n defaultValue: string | number;\n};\n"],"names":["usePlDataTableSettingsV2","options","fc","filtersConfigValue","ops","e","computed","modelValue","deepClone","toValue","settingsBase","sourceIdValue","sheetsValue","canonicalize"],"mappings":";;;AAuFO,SAASA,EAA4BC,GAAiF;AAC3H,QAAMC,IAAKD,EAAQ,eACbE,IAAqB,OAAOD,KAAO,aACrC,CAACE,MAGK;AACJ,QAAI;AACF,aAAOF,EAAG;AAAA,QACR,UAAU,KAAK,MAAME,EAAI,QAAQ;AAAA,QACjC,QAAQA,EAAI;AAAA,MAAA,CACb;AAAA,IACH,SAASC,GAAG;AACV,qBAAQ,MAAM,sCAAsCD,EAAI,QAAQ,aAAa,KAAK,UAAUA,EAAI,MAAM,CAAC,2BAA2BC,CAAC,GAC5H,CAAA;AAAA,IACT;AAAA,EACF,IACA,OAAO,CAAA;AACX,SAAOC,EAAS,MAAM;AACpB,UAAMC,IAAaC,EAAUC,EAAQR,EAAQ,KAAK,CAAC;AACnD,QAAIS;AACJ,QAAI,cAAcT,GAAS;AACzB,YAAMU,IAAgBH,EAAUC,EAAQR,EAAQ,QAAQ,CAAC;AACzD,UAAIA,EAAQ,QAAQ;AAClB,cAAMW,IAAcJ,EAAUC,EAAQR,EAAQ,MAAM,CAAC;AACrD,QAAAS,IAAeC,KAAiBC,IAC5B;AAAA,UACE,UAAUC,EAAaF,CAAa;AAAA,UACpC,QAAQC;AAAA,UACR,OAAOL;AAAA,QAAA,IAET,EAAE,UAAU,KAAA;AAAA,MAClB;AACE,QAAAG,IAAeC,IACX;AAAA,UACE,UAAUE,EAAaF,CAAa;AAAA,UACpC,QAAQ,CAAA;AAAA,UACR,OAAOJ;AAAA,QAAA,IAET,EAAE,UAAU,KAAA;AAAA,IAEpB,WACMN,EAAQ,QAAQ;AAClB,YAAMW,IAAcJ,EAAUC,EAAQR,EAAQ,MAAM,CAAC;AACrD,MAAAS,IAAeE,IACX;AAAA,QACE,UAAUC,EAAa,QAAQ;AAAA,QAC/B,QAAQD;AAAA,QACR,OAAOL;AAAA,MAAA,IAET,EAAE,UAAU,KAAA;AAAA,IAClB;AACE,MAAAG,IAAeH,IACX;AAAA,QACE,UAAUM,EAAa,QAAQ;AAAA,QAC/B,QAAQ,CAAA;AAAA,QACR,OAAON;AAAA,MAAA,IAET,EAAE,UAAU,KAAA;AAGpB,WAAO;AAAA,MACL,GAAGG;AAAA,MACH,eAAeP;AAAA,IAAA;AAAA,EAEnB,CAAC;AACH;"}
|
|
@@ -7,12 +7,11 @@
|
|
|
7
7
|
.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}
|
|
8
8
|
.pl-ag-chart-histogram-cell{height:100%;display:flex;flex-direction:row;align-items:center}.pl-ag-chart-histogram-cell__not-ready{color:var(--txt-03)!important}
|
|
9
9
|
.pl-ag-cell-status-tag{height:100%;padding:0 12px}`)),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
|
|
10
|
-
import { defineComponent as C, ref as c, computed as h, onBeforeMount as w, onBeforeUnmount as b, createElementBlock as d, openBlock as
|
|
10
|
+
import { defineComponent as C, ref as c, computed as h, onBeforeMount as w, onBeforeUnmount as b, createElementBlock as d, openBlock as i, normalizeClass as n, unref as t, createCommentVNode as u, createBlock as y, toDisplayString as B } from "vue";
|
|
11
11
|
import { PlCheckbox as E } from "@milaboratories/uikit";
|
|
12
12
|
import r from "./pl-ag-row-num-checkbox.module.scss.js";
|
|
13
13
|
|
|
14
14
|
|
|
15
|
-
import "../../lib/util/helpers/dist/test_timeouts.js";
|
|
16
15
|
import "@platforma-sdk/model";
|
|
17
16
|
import "@vueuse/core";
|
|
18
17
|
import "../../node_modules/.pnpm/fast-json-patch@3.1.1/node_modules/fast-json-patch/index.js";
|
|
@@ -33,7 +32,7 @@ import "canonicalize";
|
|
|
33
32
|
import { isSelectionEnabled as p } from "../../AgGridVue/selection.js";
|
|
34
33
|
import "../PlMultiSequenceAlignment/data.js";
|
|
35
34
|
import "../../composition/fileContent.js";
|
|
36
|
-
const
|
|
35
|
+
const X = /* @__PURE__ */ C({
|
|
37
36
|
__name: "PlAgRowNumCheckbox",
|
|
38
37
|
props: {
|
|
39
38
|
params: {}
|
|
@@ -41,21 +40,21 @@ const Y = /* @__PURE__ */ C({
|
|
|
41
40
|
setup(f) {
|
|
42
41
|
const e = f, a = e.params.api, o = c(!!e.params.node.isSelected()), v = h(() => o.value || p(a)), k = c(p(a)), m = () => {
|
|
43
42
|
o.value = e.params.node.isSelected() !== !1;
|
|
44
|
-
}, S = (
|
|
45
|
-
p(a) && (e.params.node.setSelected(
|
|
43
|
+
}, S = (l) => {
|
|
44
|
+
p(a) && (e.params.node.setSelected(l), m());
|
|
46
45
|
};
|
|
47
46
|
return w(() => {
|
|
48
47
|
e.params.node.addEventListener("rowSelected", m);
|
|
49
48
|
}), b(() => {
|
|
50
49
|
e.params.node.removeEventListener("rowSelected", m);
|
|
51
|
-
}), (
|
|
50
|
+
}), (l, s) => (i(), d("div", {
|
|
52
51
|
class: n([t(r).container, { [t(r)["allowed-selection"]]: k.value }, "d-flex", "justify-center", "align-center"])
|
|
53
52
|
}, [
|
|
54
|
-
o.value ? u("", !0) : (
|
|
53
|
+
o.value ? u("", !0) : (i(), d("div", {
|
|
55
54
|
key: 0,
|
|
56
55
|
class: n([t(r).text])
|
|
57
|
-
}, B(
|
|
58
|
-
v.value ? (
|
|
56
|
+
}, B(l.params.value), 3)),
|
|
57
|
+
v.value ? (i(), y(t(E), {
|
|
59
58
|
key: 1,
|
|
60
59
|
modelValue: o.value,
|
|
61
60
|
"onUpdate:modelValue": [
|
|
@@ -68,6 +67,6 @@ const Y = /* @__PURE__ */ C({
|
|
|
68
67
|
}
|
|
69
68
|
});
|
|
70
69
|
export {
|
|
71
|
-
|
|
70
|
+
X as default
|
|
72
71
|
};
|
|
73
72
|
//# sourceMappingURL=PlAgRowNumCheckbox.vue.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlAgRowNumCheckbox.vue.js","sources":["../../../src/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ICellRendererParams } from 'ag-grid-enterprise';\nimport { PlCheckbox } from '@milaboratories/uikit';\nimport { ref, computed, onBeforeMount, onBeforeUnmount } from 'vue';\nimport $styles from './pl-ag-row-num-checkbox.module.scss';\nimport { isSelectionEnabled } from '../../lib';\n\nconst props = defineProps<{ params: ICellRendererParams }>();\n\nconst api = props.params.api;\nconst isChecked = ref(!!props.params.node.isSelected());\nconst forceShowCheckbox = computed(() => isChecked.value || isSelectionEnabled(api));\nconst allowedSelection = ref(isSelectionEnabled(api));\n\nconst updateSelection = () => {\n isChecked.value = props.params.node.isSelected() !== false;\n};\n\nconst setSelection = (val: boolean) => {\n if (isSelectionEnabled(api)) {\n props.params.node.setSelected(val);\n updateSelection();\n }\n};\n\nonBeforeMount(() => {\n props.params.node.addEventListener('rowSelected', updateSelection);\n});\n\nonBeforeUnmount(() => {\n props.params.node.removeEventListener('rowSelected', updateSelection);\n});\n</script>\n\n<template>\n <div :class=\"[$styles.container, { [$styles['allowed-selection']]: allowedSelection }, 'd-flex', 'justify-center', 'align-center']\">\n <div v-if=\"!isChecked\" :class=\"[$styles.text]\">{{ params.value }}</div>\n <PlCheckbox\n v-if=\"forceShowCheckbox\"\n v-model=\"isChecked\"\n :class=\"[$styles.checkbox, isChecked && $styles.checked]\"\n @update:modelValue=\"setSelection\"\n />\n </div>\n</template>\n"],"names":["props","__props","api","isChecked","ref","forceShowCheckbox","computed","isSelectionEnabled","allowedSelection","updateSelection","setSelection","val","onBeforeMount","onBeforeUnmount"],"mappings":"
|
|
1
|
+
{"version":3,"file":"PlAgRowNumCheckbox.vue.js","sources":["../../../src/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ICellRendererParams } from 'ag-grid-enterprise';\nimport { PlCheckbox } from '@milaboratories/uikit';\nimport { ref, computed, onBeforeMount, onBeforeUnmount } from 'vue';\nimport $styles from './pl-ag-row-num-checkbox.module.scss';\nimport { isSelectionEnabled } from '../../lib';\n\nconst props = defineProps<{ params: ICellRendererParams }>();\n\nconst api = props.params.api;\nconst isChecked = ref(!!props.params.node.isSelected());\nconst forceShowCheckbox = computed(() => isChecked.value || isSelectionEnabled(api));\nconst allowedSelection = ref(isSelectionEnabled(api));\n\nconst updateSelection = () => {\n isChecked.value = props.params.node.isSelected() !== false;\n};\n\nconst setSelection = (val: boolean) => {\n if (isSelectionEnabled(api)) {\n props.params.node.setSelected(val);\n updateSelection();\n }\n};\n\nonBeforeMount(() => {\n props.params.node.addEventListener('rowSelected', updateSelection);\n});\n\nonBeforeUnmount(() => {\n props.params.node.removeEventListener('rowSelected', updateSelection);\n});\n</script>\n\n<template>\n <div :class=\"[$styles.container, { [$styles['allowed-selection']]: allowedSelection }, 'd-flex', 'justify-center', 'align-center']\">\n <div v-if=\"!isChecked\" :class=\"[$styles.text]\">{{ params.value }}</div>\n <PlCheckbox\n v-if=\"forceShowCheckbox\"\n v-model=\"isChecked\"\n :class=\"[$styles.checkbox, isChecked && $styles.checked]\"\n @update:modelValue=\"setSelection\"\n />\n </div>\n</template>\n"],"names":["props","__props","api","isChecked","ref","forceShowCheckbox","computed","isSelectionEnabled","allowedSelection","updateSelection","setSelection","val","onBeforeMount","onBeforeUnmount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,UAAMA,IAAQC,GAERC,IAAMF,EAAM,OAAO,KACnBG,IAAYC,EAAI,CAAC,CAACJ,EAAM,OAAO,KAAK,YAAY,GAChDK,IAAoBC,EAAS,MAAMH,EAAU,SAASI,EAAmBL,CAAG,CAAC,GAC7EM,IAAmBJ,EAAIG,EAAmBL,CAAG,CAAC,GAE9CO,IAAkB,MAAM;AAC5B,MAAAN,EAAU,QAAQH,EAAM,OAAO,KAAK,iBAAiB;AAAA,IACvD,GAEMU,IAAe,CAACC,MAAiB;AACrC,MAAIJ,EAAmBL,CAAG,MACxBF,EAAM,OAAO,KAAK,YAAYW,CAAG,GACjCF,EAAA;AAAA,IAEJ;AAEA,WAAAG,EAAc,MAAM;AAClB,MAAAZ,EAAM,OAAO,KAAK,iBAAiB,eAAeS,CAAe;AAAA,IACnE,CAAC,GAEDI,EAAgB,MAAM;AACpB,MAAAb,EAAM,OAAO,KAAK,oBAAoB,eAAeS,CAAe;AAAA,IACtE,CAAC;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -11,7 +11,6 @@ import { defineComponent as E, ref as i, computed as s, onBeforeMount as g, onBe
|
|
|
11
11
|
import { PlCheckbox as U } from "@milaboratories/uikit";
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
import "../lib/util/helpers/dist/test_timeouts.js";
|
|
15
14
|
import "@platforma-sdk/model";
|
|
16
15
|
import "@vueuse/core";
|
|
17
16
|
import "../node_modules/.pnpm/fast-json-patch@3.1.1/node_modules/fast-json-patch/index.js";
|
|
@@ -32,7 +31,7 @@ import "canonicalize";
|
|
|
32
31
|
import { getSelectedRowsCount as d, getTotalRowsCount as u, isSelectionEnabled as c, deselectAll as y, selectAll as h } from "../AgGridVue/selection.js";
|
|
33
32
|
import "./PlMultiSequenceAlignment/data.js";
|
|
34
33
|
import "../composition/fileContent.js";
|
|
35
|
-
const k = { style: { position: "absolute", inset: "0", display: "flex", "justify-content": "center", "align-items": "center" } }, b = { key: 1 },
|
|
34
|
+
const k = { style: { position: "absolute", inset: "0", display: "flex", "justify-content": "center", "align-items": "center" } }, b = { key: 1 }, _ = /* @__PURE__ */ E({
|
|
36
35
|
__name: "PlAgRowNumHeader",
|
|
37
36
|
props: {
|
|
38
37
|
params: {}
|
|
@@ -67,6 +66,6 @@ const k = { style: { position: "absolute", inset: "0", display: "flex", "justify
|
|
|
67
66
|
}
|
|
68
67
|
});
|
|
69
68
|
export {
|
|
70
|
-
|
|
69
|
+
_ as default
|
|
71
70
|
};
|
|
72
71
|
//# sourceMappingURL=PlAgRowNumHeader.vue.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlAgRowNumHeader.vue.js","sources":["../../src/components/PlAgRowNumHeader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlCheckbox } from '@milaboratories/uikit';\nimport type { IHeaderParams } from 'ag-grid-enterprise';\nimport { computed, onBeforeMount, onBeforeUnmount, ref } from 'vue';\nimport { deselectAll, getSelectedRowsCount, getTotalRowsCount, isSelectionEnabled, selectAll } from '../lib';\n\nconst { params } = defineProps<{\n params: IHeaderParams;\n}>();\n\nconst selectedRowCount = ref(getSelectedRowsCount(params.api));\nconst totalRowCount = ref(getTotalRowsCount(params.api));\nconst isSelectable = ref(isSelectionEnabled(params.api));\n\nconst someRowsSelected = computed(() =>\n selectedRowCount.value > 0,\n);\n\nconst allRowsSelected = computed(() =>\n someRowsSelected.value\n && selectedRowCount.value === totalRowCount.value,\n);\n\nfunction toggleSelectAll() {\n if (someRowsSelected.value) {\n deselectAll(params.api);\n } else {\n selectAll(params.api);\n }\n}\n\nfunction updateRowCounts() {\n selectedRowCount.value = getSelectedRowsCount(params.api);\n totalRowCount.value = getTotalRowsCount(params.api);\n}\n\nfunction updateIsSelectable() {\n isSelectable.value = isSelectionEnabled(params.api);\n}\n\nonBeforeMount(() => {\n params.api.addEventListener('selectionChanged', updateRowCounts);\n params.api.addEventListener('rowDataUpdated', updateRowCounts);\n params.api.addEventListener('modelUpdated', updateRowCounts);\n params.api.addEventListener('stateUpdated', updateIsSelectable);\n});\n\nonBeforeUnmount(() => {\n params.api.removeEventListener('selectionChanged', updateRowCounts);\n params.api.removeEventListener('rowDataUpdated', updateRowCounts);\n params.api.removeEventListener('modelUpdated', updateRowCounts);\n params.api.removeEventListener('stateUpdated', updateIsSelectable);\n});\n</script>\n\n<template>\n <div\n style=\"\n position: absolute;\n inset: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n \"\n >\n <PlCheckbox\n v-if=\"isSelectable\"\n :model-value=\"someRowsSelected\"\n :indeterminate=\"someRowsSelected && !allRowsSelected\"\n @update:model-value=\"toggleSelectAll\"\n />\n <span v-else>\n {{ params.displayName }}\n </span>\n </div>\n</template>\n"],"names":["selectedRowCount","ref","getSelectedRowsCount","__props","totalRowCount","getTotalRowsCount","isSelectable","isSelectionEnabled","someRowsSelected","computed","allRowsSelected","toggleSelectAll","deselectAll","selectAll","updateRowCounts","updateIsSelectable","onBeforeMount","onBeforeUnmount"],"mappings":"
|
|
1
|
+
{"version":3,"file":"PlAgRowNumHeader.vue.js","sources":["../../src/components/PlAgRowNumHeader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlCheckbox } from '@milaboratories/uikit';\nimport type { IHeaderParams } from 'ag-grid-enterprise';\nimport { computed, onBeforeMount, onBeforeUnmount, ref } from 'vue';\nimport { deselectAll, getSelectedRowsCount, getTotalRowsCount, isSelectionEnabled, selectAll } from '../lib';\n\nconst { params } = defineProps<{\n params: IHeaderParams;\n}>();\n\nconst selectedRowCount = ref(getSelectedRowsCount(params.api));\nconst totalRowCount = ref(getTotalRowsCount(params.api));\nconst isSelectable = ref(isSelectionEnabled(params.api));\n\nconst someRowsSelected = computed(() =>\n selectedRowCount.value > 0,\n);\n\nconst allRowsSelected = computed(() =>\n someRowsSelected.value\n && selectedRowCount.value === totalRowCount.value,\n);\n\nfunction toggleSelectAll() {\n if (someRowsSelected.value) {\n deselectAll(params.api);\n } else {\n selectAll(params.api);\n }\n}\n\nfunction updateRowCounts() {\n selectedRowCount.value = getSelectedRowsCount(params.api);\n totalRowCount.value = getTotalRowsCount(params.api);\n}\n\nfunction updateIsSelectable() {\n isSelectable.value = isSelectionEnabled(params.api);\n}\n\nonBeforeMount(() => {\n params.api.addEventListener('selectionChanged', updateRowCounts);\n params.api.addEventListener('rowDataUpdated', updateRowCounts);\n params.api.addEventListener('modelUpdated', updateRowCounts);\n params.api.addEventListener('stateUpdated', updateIsSelectable);\n});\n\nonBeforeUnmount(() => {\n params.api.removeEventListener('selectionChanged', updateRowCounts);\n params.api.removeEventListener('rowDataUpdated', updateRowCounts);\n params.api.removeEventListener('modelUpdated', updateRowCounts);\n params.api.removeEventListener('stateUpdated', updateIsSelectable);\n});\n</script>\n\n<template>\n <div\n style=\"\n position: absolute;\n inset: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n \"\n >\n <PlCheckbox\n v-if=\"isSelectable\"\n :model-value=\"someRowsSelected\"\n :indeterminate=\"someRowsSelected && !allRowsSelected\"\n @update:model-value=\"toggleSelectAll\"\n />\n <span v-else>\n {{ params.displayName }}\n </span>\n </div>\n</template>\n"],"names":["selectedRowCount","ref","getSelectedRowsCount","__props","totalRowCount","getTotalRowsCount","isSelectable","isSelectionEnabled","someRowsSelected","computed","allRowsSelected","toggleSelectAll","deselectAll","selectAll","updateRowCounts","updateIsSelectable","onBeforeMount","onBeforeUnmount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,UAAMA,IAAmBC,EAAIC,EAAqBC,EAAA,OAAO,GAAG,CAAC,GACvDC,IAAgBH,EAAII,EAAkBF,EAAA,OAAO,GAAG,CAAC,GACjDG,IAAeL,EAAIM,EAAmBJ,EAAA,OAAO,GAAG,CAAC,GAEjDK,IAAmBC;AAAA,MAAS,MAChCT,EAAiB,QAAQ;AAAA,IAAA,GAGrBU,IAAkBD;AAAA,MAAS,MAC/BD,EAAiB,SACdR,EAAiB,UAAUI,EAAc;AAAA,IAAA;AAG9C,aAASO,IAAkB;AACzB,MAAIH,EAAiB,QACnBI,EAAYT,EAAA,OAAO,GAAG,IAEtBU,EAAUV,EAAA,OAAO,GAAG;AAAA,IAExB;AAEA,aAASW,IAAkB;AACzB,MAAAd,EAAiB,QAAQE,EAAqBC,SAAO,GAAG,GACxDC,EAAc,QAAQC,EAAkBF,SAAO,GAAG;AAAA,IACpD;AAEA,aAASY,IAAqB;AAC5B,MAAAT,EAAa,QAAQC,EAAmBJ,SAAO,GAAG;AAAA,IACpD;AAEA,WAAAa,EAAc,MAAM;AAClB,MAAAb,EAAA,OAAO,IAAI,iBAAiB,oBAAoBW,CAAe,GAC/DX,EAAA,OAAO,IAAI,iBAAiB,kBAAkBW,CAAe,GAC7DX,EAAA,OAAO,IAAI,iBAAiB,gBAAgBW,CAAe,GAC3DX,EAAA,OAAO,IAAI,iBAAiB,gBAAgBY,CAAkB;AAAA,IAChE,CAAC,GAEDE,EAAgB,MAAM;AACpB,MAAAd,EAAA,OAAO,IAAI,oBAAoB,oBAAoBW,CAAe,GAClEX,EAAA,OAAO,IAAI,oBAAoB,kBAAkBW,CAAe,GAChEX,EAAA,OAAO,IAAI,oBAAoB,gBAAgBW,CAAe,GAC9DX,EAAA,OAAO,IAAI,oBAAoB,gBAAgBY,CAAkB;AAAA,IACnE,CAAC;;;;;;;;;;"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { defineComponent as g, mergeModels as y, useModel as u, createBlock as S, openBlock as b, unref as a, createSlots as I, withCtx as o, createVNode as s, withModifiers as k, createTextVNode as d, createElementVNode as p, normalizeClass as r, toDisplayString as h } from "vue";
|
|
2
|
-
import "../../../lib/util/helpers/dist/test_timeouts.js";
|
|
3
2
|
import { randomInt as C } from "../../../lib/util/helpers/dist/random.js";
|
|
4
3
|
import { PlSidebarItem as V, PlBtnGhost as $, PlEditableTitle as M, PlBtnSecondary as P, PlElementList as w } from "@milaboratories/uikit";
|
|
5
|
-
const
|
|
4
|
+
const x = /* @__PURE__ */ g({
|
|
6
5
|
__name: "AnnotationsSidebar",
|
|
7
6
|
props: {
|
|
8
7
|
annotation: { required: !0 },
|
|
@@ -90,6 +89,6 @@ const E = /* @__PURE__ */ g({
|
|
|
90
89
|
}
|
|
91
90
|
});
|
|
92
91
|
export {
|
|
93
|
-
|
|
92
|
+
x as default
|
|
94
93
|
};
|
|
95
94
|
//# sourceMappingURL=AnnotationsSidebar.vue2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnnotationsSidebar.vue2.js","sources":["../../../../src/components/PlAnnotations/components/AnnotationsSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { randomInt } from '@milaboratories/helpers';\nimport {\n PlBtnGhost,\n PlBtnSecondary,\n PlEditableTitle,\n PlElementList,\n PlSidebarItem,\n} from '@milaboratories/uikit';\nimport type { AnnotationScriptUi } from '@platforma-sdk/model';\n\n// Models\nconst annotation = defineModel<AnnotationScriptUi>('annotation', { required: true });\nconst selectedStepId = defineModel<undefined | number>('selectedStepId');\n// Emits\nconst emits = defineEmits<{\n (e: 'delete-schema'): void;\n}>();\n// Actions\nfunction handleAddStep() {\n const id = randomInt();\n annotation.value.steps.push({\n id,\n label: `Filter #${annotation.value.steps.length + 1}`,\n filter: {\n type: 'and',\n filters: [],\n },\n });\n selectedStepId.value = id;\n};\n</script>\n\n<template>\n <PlSidebarItem>\n <template #header-content>\n <PlEditableTitle\n v-model=\"annotation.title\"\n :max-length=\"40\"\n max-width=\"600px\"\n placeholder=\"Annotation Name\"\n :autofocus=\"annotation.title.length === 0\"\n />\n </template>\n <template v-if=\"annotation\" #body-content>\n <div :class=\"$style.root\">\n <PlBtnSecondary icon=\"add\" @click=\"handleAddStep\">\n Add annotation\n </PlBtnSecondary>\n\n <span :class=\"$style.tip\">Lower annotations override the ones above. Rearrange them by dragging.</span>\n\n <PlElementList\n v-model:items=\"annotation.steps\"\n :get-item-key=\"(item) => item.id!\"\n :is-active=\"(item) => item.id === selectedStepId\"\n :item-class=\"$style.stepItem\"\n :class=\"$style.steps\"\n @item-click=\"(item) => selectedStepId = item.id\"\n >\n <template #item-title=\"{ item }\">\n {{ item.label }}\n </template>\n </PlElementList>\n </div>\n </template>\n <template #footer-content>\n <PlBtnGhost\n icon=\"delete-bin\"\n reverse\n :disabled=\"annotation.steps.length === 0\"\n @click.stop=\"emits('delete-schema')\"\n >\n Delete Schema\n </PlBtnGhost>\n </template>\n </PlSidebarItem>\n</template>\n\n<style lang=\"scss\" module>\n@use '@milaboratories/uikit/styles/variables' as *;\n\n.root {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.tip {\n margin-top: 12px;\n color: var(--txt-03);\n}\n\n.steps {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.stepItem {\n cursor: pointer;\n}\n</style>\n"],"names":["annotation","_useModel","__props","selectedStepId","emits","__emit","handleAddStep","id","randomInt"],"mappings":"
|
|
1
|
+
{"version":3,"file":"AnnotationsSidebar.vue2.js","sources":["../../../../src/components/PlAnnotations/components/AnnotationsSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { randomInt } from '@milaboratories/helpers';\nimport {\n PlBtnGhost,\n PlBtnSecondary,\n PlEditableTitle,\n PlElementList,\n PlSidebarItem,\n} from '@milaboratories/uikit';\nimport type { AnnotationScriptUi } from '@platforma-sdk/model';\n\n// Models\nconst annotation = defineModel<AnnotationScriptUi>('annotation', { required: true });\nconst selectedStepId = defineModel<undefined | number>('selectedStepId');\n// Emits\nconst emits = defineEmits<{\n (e: 'delete-schema'): void;\n}>();\n// Actions\nfunction handleAddStep() {\n const id = randomInt();\n annotation.value.steps.push({\n id,\n label: `Filter #${annotation.value.steps.length + 1}`,\n filter: {\n type: 'and',\n filters: [],\n },\n });\n selectedStepId.value = id;\n};\n</script>\n\n<template>\n <PlSidebarItem>\n <template #header-content>\n <PlEditableTitle\n v-model=\"annotation.title\"\n :max-length=\"40\"\n max-width=\"600px\"\n placeholder=\"Annotation Name\"\n :autofocus=\"annotation.title.length === 0\"\n />\n </template>\n <template v-if=\"annotation\" #body-content>\n <div :class=\"$style.root\">\n <PlBtnSecondary icon=\"add\" @click=\"handleAddStep\">\n Add annotation\n </PlBtnSecondary>\n\n <span :class=\"$style.tip\">Lower annotations override the ones above. Rearrange them by dragging.</span>\n\n <PlElementList\n v-model:items=\"annotation.steps\"\n :get-item-key=\"(item) => item.id!\"\n :is-active=\"(item) => item.id === selectedStepId\"\n :item-class=\"$style.stepItem\"\n :class=\"$style.steps\"\n @item-click=\"(item) => selectedStepId = item.id\"\n >\n <template #item-title=\"{ item }\">\n {{ item.label }}\n </template>\n </PlElementList>\n </div>\n </template>\n <template #footer-content>\n <PlBtnGhost\n icon=\"delete-bin\"\n reverse\n :disabled=\"annotation.steps.length === 0\"\n @click.stop=\"emits('delete-schema')\"\n >\n Delete Schema\n </PlBtnGhost>\n </template>\n </PlSidebarItem>\n</template>\n\n<style lang=\"scss\" module>\n@use '@milaboratories/uikit/styles/variables' as *;\n\n.root {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.tip {\n margin-top: 12px;\n color: var(--txt-03);\n}\n\n.steps {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.stepItem {\n cursor: pointer;\n}\n</style>\n"],"names":["annotation","_useModel","__props","selectedStepId","emits","__emit","handleAddStep","id","randomInt"],"mappings":";;;;;;;;;;;;;AAYA,UAAMA,IAAaC,EAA+BC,GAAC,YAAgC,GAC7EC,IAAiBF,EAA+BC,GAAC,gBAAgB,GAEjEE,IAAQC;AAId,aAASC,IAAgB;AACvB,YAAMC,IAAKC,EAAA;AACX,MAAAR,EAAW,MAAM,MAAM,KAAK;AAAA,QAC1B,IAAAO;AAAA,QACA,OAAO,WAAWP,EAAW,MAAM,MAAM,SAAS,CAAC;AAAA,QACnD,QAAQ;AAAA,UACN,MAAM;AAAA,UACN,SAAS,CAAA;AAAA,QAAC;AAAA,MACZ,CACD,GACDG,EAAe,QAAQI;AAAA,IACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { defineComponent as g, mergeModels as D, useModel as O, computed as c, watch as _, resolveComponent as h, createElementBlock as v, createCommentVNode as V, openBlock as u, normalizeClass as P, Fragment as i, renderList as B, createBlock as p, unref as s, withCtx as S, createTextVNode as j, toDisplayString as U } from "vue";
|
|
2
2
|
import { isNil as w } from "../../../lib/util/helpers/dist/utils.js";
|
|
3
|
-
import "../../../lib/util/helpers/dist/test_timeouts.js";
|
|
4
3
|
import { PlDropdown as k, PlTextField as x, PlNumberField as T, PlCheckbox as R } from "@milaboratories/uikit";
|
|
5
4
|
import { getFilterUiMetadata as z, getFilterUiTypeOptions as E } from "@platforma-sdk/model";
|
|
6
|
-
const I = { key: 7 },
|
|
5
|
+
const I = { key: 7 }, G = /* @__PURE__ */ g({
|
|
7
6
|
__name: "DynamicForm",
|
|
8
7
|
props: /* @__PURE__ */ D({
|
|
9
8
|
columns: {},
|
|
@@ -102,6 +101,6 @@ const I = { key: 7 }, H = /* @__PURE__ */ g({
|
|
|
102
101
|
}
|
|
103
102
|
});
|
|
104
103
|
export {
|
|
105
|
-
|
|
104
|
+
G as default
|
|
106
105
|
};
|
|
107
106
|
//# sourceMappingURL=DynamicForm.vue2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DynamicForm.vue2.js","sources":["../../../../src/components/PlAnnotations/components/DynamicForm.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends FilterUi = FilterUi\">\nimport { computed, watch } from 'vue';\nimport type { FilterUi, SUniversalPColumnId, TypeFieldRecord } from '@platforma-sdk/model';\nimport type { FilterUiType } from '@platforma-sdk/model';\nimport { isNil } from '@milaboratories/helpers';\nimport { PlTextField, PlDropdown, PlNumberField, PlCheckbox } from '@milaboratories/uikit';\nimport { getFilterUiTypeOptions, getFilterUiMetadata } from '@platforma-sdk/model';\nimport type { SimplifiedUniversalPColumnEntry } from '../types';\n\ntype ObjectEntries<T, K extends keyof T = keyof T> = [K, T[K]][];\n\nconst formData = defineModel<T>({ default: () => ({}) });\n\nconst props = defineProps<{\n columns: SimplifiedUniversalPColumnEntry[];\n formMetadata: TypeFieldRecord<T>;\n}>();\n\nconst columnSpecRef = computed(() => {\n const value = formData.value;\n if ('column' in value) {\n return props.columns.find((c) => c.id === value.column)?.obj;\n }\n return undefined;\n});\n\nconst typeMetadataRef = computed(() => {\n const value = formData.value;\n if (value.type && typeof value.type === 'string') {\n return getFilterUiMetadata(value.type);\n }\n return undefined;\n});\n\nconst filterUiTypeOptions = computed(() => {\n return getFilterUiTypeOptions(columnSpecRef.value);\n});\n\nconst firstColumnsOptions = computed(() => props.columns.map((c) => ({ label: c.label, value: c.id })));\nconst secondColumnOptions = computed(() => {\n const typeMetadata = typeMetadataRef.value;\n const columnSpec = columnSpecRef.value;\n if (typeMetadata && columnSpec) {\n return props.columns.filter((c) => typeMetadata.supportedFor(columnSpec, c.obj)).map((c) => ({\n label: c.label,\n value: c.id,\n }));\n }\n return [];\n});\n\nconst setFieldValue = <K extends keyof T>(fieldName: K, value: T[K]) => {\n formData.value[fieldName] = value;\n};\n\nwatch(() => props.formMetadata, (newForm) => {\n for (const [fieldName, field] of Object.entries(newForm) as ObjectEntries<typeof newForm>) {\n if (formData.value[fieldName] === undefined) {\n const value = field.defaultValue();\n if (!isNil(value)) {\n formData.value[fieldName] = value;\n }\n }\n }\n},\n{ immediate: true, deep: true },\n);\n\n</script>\n\n<template>\n <div v-if=\"formMetadata\" :class=\"$style.form\">\n <template v-for=\"(field, fieldName) in formMetadata\" :key=\"fieldName\">\n <template v-if=\"field.fieldType === 'form'\">\n <!-- TODO: Nested Form not described in FilterUi, we need to define it later. Even more in type it don't possible situations -->\n <DynamicForm\n v-if=\"'form' in field\"\n :model-value=\"formData[fieldName] as any\"\n :form-metadata=\"field.form as any\"\n :columns=\"props.columns\"\n @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n />\n </template>\n <template v-else-if=\"field.fieldType === 'FilterUiType'\">\n <PlDropdown\n :model-value=\"formData[fieldName] as FilterUiType\"\n :label=\"field.label ?? fieldName\"\n :options=\"filterUiTypeOptions\"\n @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n />\n </template>\n <template v-else-if=\"field.fieldType === 'string'\">\n <PlTextField\n :model-value=\"formData[fieldName] as string\"\n :label=\"field.label ?? fieldName\"\n @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n />\n </template>\n <template v-else-if=\"field.fieldType === 'SUniversalPColumnId'\">\n <PlDropdown\n :model-value=\"formData[fieldName] as SUniversalPColumnId\"\n :label=\"field.label ?? fieldName\"\n :options=\"fieldName === 'column' ? firstColumnsOptions : secondColumnOptions\"\n @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n />\n </template>\n <template v-else-if=\"field.fieldType === 'number'\">\n <PlNumberField\n :model-value=\"formData[fieldName] as number\"\n :label=\"field.label ?? fieldName\"\n @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n />\n </template>\n <template v-else-if=\"field.fieldType === 'number?'\">\n <PlNumberField\n :model-value=\"formData[fieldName] as (undefined | number)\"\n :label=\"field.label ?? fieldName\"\n :clearable=\"true\"\n @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n />\n </template>\n <template v-else-if=\"field.fieldType === 'boolean' || field.fieldType === 'boolean?'\">\n <PlCheckbox\n :model-value=\"Boolean(formData[fieldName])\"\n :label=\"field.label ?? fieldName\"\n @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n >\n {{ field.label ?? fieldName }}\n </PlCheckbox>\n </template>\n <template v-else>\n <pre>TODO:{{ field.fieldType }}</pre>\n </template>\n </template>\n </div>\n</template>\n\n<style module>\n.form {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n</style>\n"],"names":["formData","_useModel","__props","props","columnSpecRef","computed","value","_a","c","typeMetadataRef","getFilterUiMetadata","filterUiTypeOptions","getFilterUiTypeOptions","firstColumnsOptions","secondColumnOptions","typeMetadata","columnSpec","setFieldValue","fieldName","watch","newForm","field","isNil"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DynamicForm.vue2.js","sources":["../../../../src/components/PlAnnotations/components/DynamicForm.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends FilterUi = FilterUi\">\nimport { computed, watch } from 'vue';\nimport type { FilterUi, SUniversalPColumnId, TypeFieldRecord } from '@platforma-sdk/model';\nimport type { FilterUiType } from '@platforma-sdk/model';\nimport { isNil } from '@milaboratories/helpers';\nimport { PlTextField, PlDropdown, PlNumberField, PlCheckbox } from '@milaboratories/uikit';\nimport { getFilterUiTypeOptions, getFilterUiMetadata } from '@platforma-sdk/model';\nimport type { SimplifiedUniversalPColumnEntry } from '../types';\n\ntype ObjectEntries<T, K extends keyof T = keyof T> = [K, T[K]][];\n\nconst formData = defineModel<T>({ default: () => ({}) });\n\nconst props = defineProps<{\n columns: SimplifiedUniversalPColumnEntry[];\n formMetadata: TypeFieldRecord<T>;\n}>();\n\nconst columnSpecRef = computed(() => {\n const value = formData.value;\n if ('column' in value) {\n return props.columns.find((c) => c.id === value.column)?.obj;\n }\n return undefined;\n});\n\nconst typeMetadataRef = computed(() => {\n const value = formData.value;\n if (value.type && typeof value.type === 'string') {\n return getFilterUiMetadata(value.type);\n }\n return undefined;\n});\n\nconst filterUiTypeOptions = computed(() => {\n return getFilterUiTypeOptions(columnSpecRef.value);\n});\n\nconst firstColumnsOptions = computed(() => props.columns.map((c) => ({ label: c.label, value: c.id })));\nconst secondColumnOptions = computed(() => {\n const typeMetadata = typeMetadataRef.value;\n const columnSpec = columnSpecRef.value;\n if (typeMetadata && columnSpec) {\n return props.columns.filter((c) => typeMetadata.supportedFor(columnSpec, c.obj)).map((c) => ({\n label: c.label,\n value: c.id,\n }));\n }\n return [];\n});\n\nconst setFieldValue = <K extends keyof T>(fieldName: K, value: T[K]) => {\n formData.value[fieldName] = value;\n};\n\nwatch(() => props.formMetadata, (newForm) => {\n for (const [fieldName, field] of Object.entries(newForm) as ObjectEntries<typeof newForm>) {\n if (formData.value[fieldName] === undefined) {\n const value = field.defaultValue();\n if (!isNil(value)) {\n formData.value[fieldName] = value;\n }\n }\n }\n},\n{ immediate: true, deep: true },\n);\n\n</script>\n\n<template>\n <div v-if=\"formMetadata\" :class=\"$style.form\">\n <template v-for=\"(field, fieldName) in formMetadata\" :key=\"fieldName\">\n <template v-if=\"field.fieldType === 'form'\">\n <!-- TODO: Nested Form not described in FilterUi, we need to define it later. Even more in type it don't possible situations -->\n <DynamicForm\n v-if=\"'form' in field\"\n :model-value=\"formData[fieldName] as any\"\n :form-metadata=\"field.form as any\"\n :columns=\"props.columns\"\n @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n />\n </template>\n <template v-else-if=\"field.fieldType === 'FilterUiType'\">\n <PlDropdown\n :model-value=\"formData[fieldName] as FilterUiType\"\n :label=\"field.label ?? fieldName\"\n :options=\"filterUiTypeOptions\"\n @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n />\n </template>\n <template v-else-if=\"field.fieldType === 'string'\">\n <PlTextField\n :model-value=\"formData[fieldName] as string\"\n :label=\"field.label ?? fieldName\"\n @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n />\n </template>\n <template v-else-if=\"field.fieldType === 'SUniversalPColumnId'\">\n <PlDropdown\n :model-value=\"formData[fieldName] as SUniversalPColumnId\"\n :label=\"field.label ?? fieldName\"\n :options=\"fieldName === 'column' ? firstColumnsOptions : secondColumnOptions\"\n @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n />\n </template>\n <template v-else-if=\"field.fieldType === 'number'\">\n <PlNumberField\n :model-value=\"formData[fieldName] as number\"\n :label=\"field.label ?? fieldName\"\n @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n />\n </template>\n <template v-else-if=\"field.fieldType === 'number?'\">\n <PlNumberField\n :model-value=\"formData[fieldName] as (undefined | number)\"\n :label=\"field.label ?? fieldName\"\n :clearable=\"true\"\n @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n />\n </template>\n <template v-else-if=\"field.fieldType === 'boolean' || field.fieldType === 'boolean?'\">\n <PlCheckbox\n :model-value=\"Boolean(formData[fieldName])\"\n :label=\"field.label ?? fieldName\"\n @update:model-value=\"setFieldValue(fieldName, $event as T[keyof T])\"\n >\n {{ field.label ?? fieldName }}\n </PlCheckbox>\n </template>\n <template v-else>\n <pre>TODO:{{ field.fieldType }}</pre>\n </template>\n </template>\n </div>\n</template>\n\n<style module>\n.form {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n</style>\n"],"names":["formData","_useModel","__props","props","columnSpecRef","computed","value","_a","c","typeMetadataRef","getFilterUiMetadata","filterUiTypeOptions","getFilterUiTypeOptions","firstColumnsOptions","secondColumnOptions","typeMetadata","columnSpec","setFieldValue","fieldName","watch","newForm","field","isNil"],"mappings":";;;;;;;;;;;;;;;AAWA,UAAMA,IAAWC,EAAcC,GAAA,YAAwB,GAEjDC,IAAQD,GAKRE,IAAgBC,EAAS,MAAM;;AACnC,YAAMC,IAAQN,EAAS;AACvB,UAAI,YAAYM;AACd,gBAAOC,IAAAJ,EAAM,QAAQ,KAAK,CAACK,MAAMA,EAAE,OAAOF,EAAM,MAAM,MAA/C,gBAAAC,EAAkD;AAAA,IAG7D,CAAC,GAEKE,IAAkBJ,EAAS,MAAM;AACrC,YAAMC,IAAQN,EAAS;AACvB,UAAIM,EAAM,QAAQ,OAAOA,EAAM,QAAS;AACtC,eAAOI,EAAoBJ,EAAM,IAAI;AAAA,IAGzC,CAAC,GAEKK,IAAsBN,EAAS,MAC5BO,EAAuBR,EAAc,KAAK,CAClD,GAEKS,IAAsBR,EAAS,MAAMF,EAAM,QAAQ,IAAI,CAACK,OAAO,EAAE,OAAOA,EAAE,OAAO,OAAOA,EAAE,GAAA,EAAK,CAAC,GAChGM,IAAsBT,EAAS,MAAM;AACzC,YAAMU,IAAeN,EAAgB,OAC/BO,IAAaZ,EAAc;AACjC,aAAIW,KAAgBC,IACXb,EAAM,QAAQ,OAAO,CAACK,MAAMO,EAAa,aAAaC,GAAYR,EAAE,GAAG,CAAC,EAAE,IAAI,CAACA,OAAO;AAAA,QAC3F,OAAOA,EAAE;AAAA,QACT,OAAOA,EAAE;AAAA,MAAA,EACT,IAEG,CAAA;AAAA,IACT,CAAC,GAEKS,IAAgB,CAAoBC,GAAcZ,MAAgB;AACtE,MAAAN,EAAS,MAAMkB,CAAS,IAAIZ;AAAA,IAC9B;AAEA,WAAAa;AAAA,MAAM,MAAMhB,EAAM;AAAA,MAAc,CAACiB,MAAY;AAC3C,mBAAW,CAACF,GAAWG,CAAK,KAAK,OAAO,QAAQD,CAAO;AACrD,cAAIpB,EAAS,MAAMkB,CAAS,MAAM,QAAW;AAC3C,kBAAMZ,IAAQe,EAAM,aAAA;AACpB,YAAKC,EAAMhB,CAAK,MACdN,EAAS,MAAMkB,CAAS,IAAIZ;AAAA,UAEhC;AAAA,MAEJ;AAAA,MACA,EAAE,WAAW,IAAM,MAAM,GAAA;AAAA,IAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { defineComponent as E, mergeModels as S, useModel as B, createBlock as m, createCommentVNode as M, openBlock as i, unref as n, withCtx as a, createElementVNode as y, normalizeClass as v, createVNode as p, createTextVNode as c, createElementBlock as N, toDisplayString as g } from "vue";
|
|
2
2
|
import { isNil as s } from "../../../lib/util/helpers/dist/utils.js";
|
|
3
|
-
import "../../../lib/util/helpers/dist/test_timeouts.js";
|
|
4
3
|
import { randomInt as F } from "../../../lib/util/helpers/dist/random.js";
|
|
5
4
|
import { PlSidebarItem as w, PlBtnSecondary as V, PlElementList as P, PlEditableTitle as U } from "@milaboratories/uikit";
|
|
6
5
|
import { getFilterUiMetadata as $ } from "@platforma-sdk/model";
|
|
7
6
|
import { createDefaultFilterMetadata as D } from "../utils.js";
|
|
8
7
|
import I from "./DynamicForm.vue.js";
|
|
9
|
-
const j = { key: 1 },
|
|
8
|
+
const j = { key: 1 }, H = /* @__PURE__ */ E({
|
|
10
9
|
__name: "FilterSidebar",
|
|
11
10
|
props: /* @__PURE__ */ S({
|
|
12
11
|
columns: {},
|
|
@@ -114,6 +113,6 @@ const j = { key: 1 }, J = /* @__PURE__ */ E({
|
|
|
114
113
|
}
|
|
115
114
|
});
|
|
116
115
|
export {
|
|
117
|
-
|
|
116
|
+
H as default
|
|
118
117
|
};
|
|
119
118
|
//# sourceMappingURL=FilterSidebar.vue2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterSidebar.vue2.js","sources":["../../../../src/components/PlAnnotations/components/FilterSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isNil, randomInt } from '@milaboratories/helpers';\nimport {\n PlBtnSecondary,\n PlEditableTitle,\n PlElementList,\n PlSidebarItem,\n} from '@milaboratories/uikit';\nimport type { AnnotationStepUi, FilterUi, PObjectId, SUniversalPColumnId } from '@platforma-sdk/model';\nimport { getFilterUiMetadata } from '@platforma-sdk/model';\nimport type { SimplifiedUniversalPColumnEntry } from '../types';\nimport { createDefaultFilterMetadata } from '../utils';\nimport DynamicForm from './DynamicForm.vue';\n\n// Models\nconst step = defineModel<AnnotationStepUi>('step', { required: true });\n// Props\nconst props = defineProps<{\n columns: SimplifiedUniversalPColumnEntry[];\n hasSelectedColumns: boolean;\n getValuesForSelectedColumns: () => Promise<undefined | { columnId: PObjectId; values: string[] }>;\n}>();\n// Actions\nconst addFilterPlaceholder = () => {\n step.value.filter.filters.push({\n id: randomInt(),\n isExpanded: true,\n type: undefined,\n });\n};\n\nasync function addFilterFromSelected() {\n const data = await props.getValuesForSelectedColumns();\n if (!data || data.values.length === 0) return;\n\n const { columnId, values } = data;\n const shortReminder = values.slice(0, 3).join(', ') + (values.length > 3 ? ` and ${values.length - 3} more` : '');\n\n step.value.filter.filters.push({\n id: randomInt(),\n name: `Selected list (${shortReminder})`,\n isExpanded: false,\n type: 'or',\n filters: values.map((value) => ({\n type: 'patternEquals',\n column: columnId as SUniversalPColumnId,\n value,\n })),\n });\n}\n\n// Getters\nconst getColumnLabel = (filter: FilterUi) => {\n if (!isNil(filter.name)) return filter.name;\n return props.columns\n .find((c) => 'column' in filter ? c.id === filter.column : false)?.label\n ?? filter.type;\n};\n\nconst getFormMetadata = (filter: FilterUi) => {\n return !isNil(filter.type) ? getFilterUiMetadata(filter.type).form : createDefaultFilterMetadata();\n};\n\nconst getFilterValues = (filter: FilterUi) => {\n if (filter.type === 'or' || filter.type === 'and') {\n return filter.filters.map((f) => 'value' in f && !isNil(f.value) ? f.value : null).filter((v) => !isNil(v)).join (', ');\n }\n return null;\n};\n</script>\n\n<template>\n <PlSidebarItem v-if=\"step\">\n <template #header-content>\n <PlEditableTitle\n :key=\"step.id\"\n v-model=\"step.label\"\n :max-length=\"40\"\n max-width=\"600px\"\n placeholder=\"Annotation Name\"\n :autofocus=\"step.label.length === 0\"\n />\n </template>\n <template #body-content>\n <div :class=\"$style.root\">\n <div :class=\"$style.actions\">\n <PlBtnSecondary style=\"width: 100%;\" icon=\"add\" @click=\"addFilterPlaceholder\">\n Filter\n </PlBtnSecondary>\n <PlBtnSecondary style=\"width: 100%;\" icon=\"add\" :disabled=\"!props.hasSelectedColumns\" @click=\"addFilterFromSelected\">\n From selection\n </PlBtnSecondary>\n </div>\n\n <PlElementList\n v-model:items=\"step.filter.filters\"\n :get-item-key=\"(item) => item.id!\"\n :is-expanded=\"(item) => Boolean(item.isExpanded)\"\n :on-expand=\"(item) => item.isExpanded = !Boolean(item.isExpanded)\"\n >\n <template #item-title=\"{ item }\">\n {{ getColumnLabel(item) }}\n </template>\n <template #item-content=\"{ item, index }\">\n <template v-if=\"item.type !== 'or' && item.type !== 'and'\">\n <DynamicForm\n v-model=\"step.filter.filters[index]\"\n :form-metadata=\"getFormMetadata(item)\"\n :columns=\"props.columns\"\n />\n </template>\n <template v-else>\n <div>{{ getFilterValues(item) }}</div>\n </template>\n </template>\n </PlElementList>\n </div>\n </template>\n </PlSidebarItem>\n</template>\n\n<style lang=\"scss\" module>\n@use '@milaboratories/uikit/styles/variables' as *;\n\n.root {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.actions {\n display: flex;\n flex-direction: row;\n gap: 12px;\n}\n</style>\n"],"names":["step","_useModel","props","__props","addFilterPlaceholder","randomInt","addFilterFromSelected","data","columnId","values","shortReminder","value","getColumnLabel","filter","isNil","_a","c","getFormMetadata","createDefaultFilterMetadata","getFilterUiMetadata","getFilterValues","f","v"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FilterSidebar.vue2.js","sources":["../../../../src/components/PlAnnotations/components/FilterSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isNil, randomInt } from '@milaboratories/helpers';\nimport {\n PlBtnSecondary,\n PlEditableTitle,\n PlElementList,\n PlSidebarItem,\n} from '@milaboratories/uikit';\nimport type { AnnotationStepUi, FilterUi, PObjectId, SUniversalPColumnId } from '@platforma-sdk/model';\nimport { getFilterUiMetadata } from '@platforma-sdk/model';\nimport type { SimplifiedUniversalPColumnEntry } from '../types';\nimport { createDefaultFilterMetadata } from '../utils';\nimport DynamicForm from './DynamicForm.vue';\n\n// Models\nconst step = defineModel<AnnotationStepUi>('step', { required: true });\n// Props\nconst props = defineProps<{\n columns: SimplifiedUniversalPColumnEntry[];\n hasSelectedColumns: boolean;\n getValuesForSelectedColumns: () => Promise<undefined | { columnId: PObjectId; values: string[] }>;\n}>();\n// Actions\nconst addFilterPlaceholder = () => {\n step.value.filter.filters.push({\n id: randomInt(),\n isExpanded: true,\n type: undefined,\n });\n};\n\nasync function addFilterFromSelected() {\n const data = await props.getValuesForSelectedColumns();\n if (!data || data.values.length === 0) return;\n\n const { columnId, values } = data;\n const shortReminder = values.slice(0, 3).join(', ') + (values.length > 3 ? ` and ${values.length - 3} more` : '');\n\n step.value.filter.filters.push({\n id: randomInt(),\n name: `Selected list (${shortReminder})`,\n isExpanded: false,\n type: 'or',\n filters: values.map((value) => ({\n type: 'patternEquals',\n column: columnId as SUniversalPColumnId,\n value,\n })),\n });\n}\n\n// Getters\nconst getColumnLabel = (filter: FilterUi) => {\n if (!isNil(filter.name)) return filter.name;\n return props.columns\n .find((c) => 'column' in filter ? c.id === filter.column : false)?.label\n ?? filter.type;\n};\n\nconst getFormMetadata = (filter: FilterUi) => {\n return !isNil(filter.type) ? getFilterUiMetadata(filter.type).form : createDefaultFilterMetadata();\n};\n\nconst getFilterValues = (filter: FilterUi) => {\n if (filter.type === 'or' || filter.type === 'and') {\n return filter.filters.map((f) => 'value' in f && !isNil(f.value) ? f.value : null).filter((v) => !isNil(v)).join (', ');\n }\n return null;\n};\n</script>\n\n<template>\n <PlSidebarItem v-if=\"step\">\n <template #header-content>\n <PlEditableTitle\n :key=\"step.id\"\n v-model=\"step.label\"\n :max-length=\"40\"\n max-width=\"600px\"\n placeholder=\"Annotation Name\"\n :autofocus=\"step.label.length === 0\"\n />\n </template>\n <template #body-content>\n <div :class=\"$style.root\">\n <div :class=\"$style.actions\">\n <PlBtnSecondary style=\"width: 100%;\" icon=\"add\" @click=\"addFilterPlaceholder\">\n Filter\n </PlBtnSecondary>\n <PlBtnSecondary style=\"width: 100%;\" icon=\"add\" :disabled=\"!props.hasSelectedColumns\" @click=\"addFilterFromSelected\">\n From selection\n </PlBtnSecondary>\n </div>\n\n <PlElementList\n v-model:items=\"step.filter.filters\"\n :get-item-key=\"(item) => item.id!\"\n :is-expanded=\"(item) => Boolean(item.isExpanded)\"\n :on-expand=\"(item) => item.isExpanded = !Boolean(item.isExpanded)\"\n >\n <template #item-title=\"{ item }\">\n {{ getColumnLabel(item) }}\n </template>\n <template #item-content=\"{ item, index }\">\n <template v-if=\"item.type !== 'or' && item.type !== 'and'\">\n <DynamicForm\n v-model=\"step.filter.filters[index]\"\n :form-metadata=\"getFormMetadata(item)\"\n :columns=\"props.columns\"\n />\n </template>\n <template v-else>\n <div>{{ getFilterValues(item) }}</div>\n </template>\n </template>\n </PlElementList>\n </div>\n </template>\n </PlSidebarItem>\n</template>\n\n<style lang=\"scss\" module>\n@use '@milaboratories/uikit/styles/variables' as *;\n\n.root {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.actions {\n display: flex;\n flex-direction: row;\n gap: 12px;\n}\n</style>\n"],"names":["step","_useModel","props","__props","addFilterPlaceholder","randomInt","addFilterFromSelected","data","columnId","values","shortReminder","value","getColumnLabel","filter","isNil","_a","c","getFormMetadata","createDefaultFilterMetadata","getFilterUiMetadata","getFilterValues","f","v"],"mappings":";;;;;;;;;;;;;;;;;;;AAeA,UAAMA,IAAOC,KAA8B,MAA0B,GAE/DC,IAAQC,GAMRC,IAAuB,MAAM;AACjC,MAAAJ,EAAK,MAAM,OAAO,QAAQ,KAAK;AAAA,QAC7B,IAAIK,EAAA;AAAA,QACJ,YAAY;AAAA,QACZ,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAEA,mBAAeC,IAAwB;AACrC,YAAMC,IAAO,MAAML,EAAM,4BAAA;AACzB,UAAI,CAACK,KAAQA,EAAK,OAAO,WAAW,EAAG;AAEvC,YAAM,EAAE,UAAAC,GAAU,QAAAC,EAAA,IAAWF,GACvBG,IAAgBD,EAAO,MAAM,GAAG,CAAC,EAAE,KAAK,IAAI,KAAKA,EAAO,SAAS,IAAI,QAAQA,EAAO,SAAS,CAAC,UAAU;AAE9G,MAAAT,EAAK,MAAM,OAAO,QAAQ,KAAK;AAAA,QAC7B,IAAIK,EAAA;AAAA,QACJ,MAAM,kBAAkBK,CAAa;AAAA,QACrC,YAAY;AAAA,QACZ,MAAM;AAAA,QACN,SAASD,EAAO,IAAI,CAACE,OAAW;AAAA,UAC9B,MAAM;AAAA,UACN,QAAQH;AAAA,UACR,OAAAG;AAAA,QAAA,EACA;AAAA,MAAA,CACH;AAAA,IACH;AAGA,UAAMC,IAAiB,CAACC,MAAqB;;AAC3C,aAAKC,EAAMD,EAAO,IAAI,MACfE,IAAAb,EAAM,QACV,KAAK,CAACc,MAAM,YAAYH,IAASG,EAAE,OAAOH,EAAO,SAAS,EAAK,MAD3D,gBAAAE,EAC8D,UAChEF,EAAO,OAHoBA,EAAO;AAAA,IAIzC,GAEMI,IAAkB,CAACJ,MACfC,EAAMD,EAAO,IAAI,IAA4CK,EAAA,IAAxCC,EAAoBN,EAAO,IAAI,EAAE,MAG1DO,IAAkB,CAACP,MACnBA,EAAO,SAAS,QAAQA,EAAO,SAAS,QACnCA,EAAO,QAAQ,IAAI,CAACQ,MAAM,WAAWA,KAAK,CAACP,EAAMO,EAAE,KAAK,IAAIA,EAAE,QAAQ,IAAI,EAAE,OAAO,CAACC,MAAM,CAACR,EAAMQ,CAAC,CAAC,EAAE,KAAM,IAAI,IAEjH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
import { defineComponent as I, mergeModels as F, useModel as S, shallowRef as M, computed as u, effect as A, createElementBlock as w, openBlock as C, Fragment as B, createVNode as d, unref as y, normalizeClass as i, withCtx as
|
|
1
|
+
import { defineComponent as I, mergeModels as F, useModel as S, shallowRef as M, computed as u, effect as A, createElementBlock as w, openBlock as C, Fragment as B, createVNode as d, unref as y, normalizeClass as i, withCtx as c, createBlock as D, createCommentVNode as U } from "vue";
|
|
2
2
|
import { isNil as g } from "../../../lib/util/helpers/dist/utils.js";
|
|
3
|
-
import "../../../lib/util/helpers/dist/test_timeouts.js";
|
|
4
3
|
import { useConfirm as $, PlPureSlideModal as k, PlSidebarGroup as N } from "@milaboratories/uikit";
|
|
5
4
|
import { getDefaultAnnotationScript as P } from "../utils.js";
|
|
6
5
|
import R from "./AnnotationsSidebar.vue.js";
|
|
7
6
|
import q from "./FilterSidebar.vue.js";
|
|
8
7
|
import G from "./PlAnnotationCreateDialog.vue.js";
|
|
9
|
-
const
|
|
8
|
+
const H = /* @__PURE__ */ I({
|
|
10
9
|
__name: "PlAnnotationsModal",
|
|
11
10
|
props: /* @__PURE__ */ F({
|
|
12
11
|
columns: {},
|
|
@@ -20,11 +19,11 @@ const J = /* @__PURE__ */ I({
|
|
|
20
19
|
}),
|
|
21
20
|
emits: ["update:annotation", "update:opened"],
|
|
22
21
|
setup(m) {
|
|
23
|
-
const e = S(m, "annotation"), n = S(m, "opened"), s = m, a = M(void 0), r = u(() => g(a.value) || g(e.value) ? void 0 : e.value.steps.find((t) => t.id === a.value)),
|
|
24
|
-
get: () => !
|
|
22
|
+
const e = S(m, "annotation"), n = S(m, "opened"), s = m, a = M(void 0), r = u(() => g(a.value) || g(e.value) ? void 0 : e.value.steps.find((t) => t.id === a.value)), p = u(() => e.value.isCreated === !0), v = u({
|
|
23
|
+
get: () => !p.value && n.value,
|
|
25
24
|
set: (t) => n.value = t
|
|
26
25
|
}), f = u({
|
|
27
|
-
get: () =>
|
|
26
|
+
get: () => p.value && n.value,
|
|
28
27
|
set: (t) => n.value = t
|
|
29
28
|
});
|
|
30
29
|
A(function() {
|
|
@@ -54,11 +53,11 @@ const J = /* @__PURE__ */ I({
|
|
|
54
53
|
class: i(t.$style.modal),
|
|
55
54
|
width: "768px"
|
|
56
55
|
}, {
|
|
57
|
-
default:
|
|
56
|
+
default: c(() => [
|
|
58
57
|
d(y(N), {
|
|
59
58
|
class: i(t.$style.sidebarGroup)
|
|
60
59
|
}, {
|
|
61
|
-
"item-0":
|
|
60
|
+
"item-0": c(() => [
|
|
62
61
|
d(R, {
|
|
63
62
|
annotation: e.value,
|
|
64
63
|
"onUpdate:annotation": l[1] || (l[1] = (o) => e.value = o),
|
|
@@ -69,7 +68,7 @@ const J = /* @__PURE__ */ I({
|
|
|
69
68
|
onDeleteSchema: h
|
|
70
69
|
}, null, 8, ["annotation", "selectedStepId", "class", "columns"])
|
|
71
70
|
]),
|
|
72
|
-
"item-1":
|
|
71
|
+
"item-1": c(() => [
|
|
73
72
|
r.value ? (C(), D(q, {
|
|
74
73
|
key: 0,
|
|
75
74
|
step: r.value,
|
|
@@ -90,6 +89,6 @@ const J = /* @__PURE__ */ I({
|
|
|
90
89
|
}
|
|
91
90
|
});
|
|
92
91
|
export {
|
|
93
|
-
|
|
92
|
+
H as default
|
|
94
93
|
};
|
|
95
94
|
//# sourceMappingURL=PlAnnotationsModal.vue2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlAnnotationsModal.vue2.js","sources":["../../../../src/components/PlAnnotations/components/PlAnnotationsModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isNil } from '@milaboratories/helpers';\nimport { PlPureSlideModal, PlSidebarGroup, useConfirm } from '@milaboratories/uikit';\nimport type { AnnotationScriptUi, PObjectId } from '@platforma-sdk/model';\nimport { computed, effect, shallowRef } from 'vue';\nimport type { SimplifiedUniversalPColumnEntry } from '../types';\nimport { getDefaultAnnotationScript } from '../utils';\nimport AnnotationsSidebar from './AnnotationsSidebar.vue';\nimport FilterSidebar from './FilterSidebar.vue';\nimport PlAnnotationCreateDialog from './PlAnnotationCreateDialog.vue';\n\n// Models\nconst annotation = defineModel<AnnotationScriptUi>('annotation', { required: true, default: getDefaultAnnotationScript });\nconst opened = defineModel<boolean>('opened', { required: true });\n// Props\nconst props = defineProps<{\n columns: SimplifiedUniversalPColumnEntry[];\n hasSelectedColumns: boolean;\n getValuesForSelectedColumns: () => Promise<undefined | { columnId: PObjectId; values: string[] }>;\n}>();\n// State\nconst selectedStepId = shallowRef<number | undefined>(undefined);\nconst selectedStep = computed(() => {\n return isNil(selectedStepId.value) || isNil(annotation.value)\n ? undefined\n : annotation.value.steps.find((step) => step.id === selectedStepId.value);\n});\nconst hasAnnotation = computed(() => annotation.value.isCreated === true);\n\nconst openedDialog = computed({\n get: () => !hasAnnotation.value && opened.value,\n set: (value: boolean) => (opened.value = value),\n});\nconst openedModal = computed({\n get: () => hasAnnotation.value && opened.value,\n set: (value: boolean) => (opened.value = value),\n});\n// Watchers\neffect(function setDefaultStepId() {\n if (selectedStepId.value === undefined && annotation.value.steps.length > 0) {\n selectedStepId.value = annotation.value.steps[0].id;\n }\n});\n// Hooks\nconst confirmResetSchema = useConfirm({\n title: 'Reset Schema',\n message: 'Are you sure you want to reset the schema? This action cannot be undone.',\n confirmLabel: 'Yes, reset',\n cancelLabel: 'No, cancel',\n});\n// Actions\nfunction handleCreateAnnotation(props: { type: 'byClonotype' | 'bySampleAndClonotype'; name: string }) {\n annotation.value.isCreated = true;\n annotation.value.mode = props.type;\n annotation.value.title = props.name;\n annotation.value.steps = [];\n}\n\nasync function handleDeleteSchema() {\n if (await confirmResetSchema()) {\n annotation.value.isCreated = false;\n annotation.value.title = '';\n annotation.value.mode = 'byClonotype';\n annotation.value.steps = [];\n opened.value = false;\n selectedStepId.value = undefined;\n }\n}\n\n</script>\n\n<template>\n <PlAnnotationCreateDialog v-model=\"openedDialog\" @submit=\"handleCreateAnnotation\"/>\n <PlPureSlideModal v-model=\"openedModal\" :class=\"$style.modal\" width=\"768px\">\n <PlSidebarGroup :class=\"$style.sidebarGroup\">\n <template #item-0>\n <AnnotationsSidebar\n v-model:annotation=\"annotation\"\n v-model:selectedStepId=\"selectedStepId\"\n :class=\"$style.sidebarItem\"\n :columns=\"props.columns\"\n @delete-schema=\"handleDeleteSchema\"\n />\n </template>\n <template #item-1>\n <FilterSidebar\n v-if=\"selectedStep\"\n v-model:step=\"selectedStep\"\n :class=\"$style.sidebarItem\"\n :columns=\"props.columns\"\n :selectedStepId=\"selectedStepId\"\n :hasSelectedColumns=\"props.hasSelectedColumns\"\n :getValuesForSelectedColumns=\"props.getValuesForSelectedColumns\"\n />\n </template>\n </PlSidebarGroup>\n </PlPureSlideModal>\n</template>\n\n<style lang=\"scss\" module>\n.modal {\n display: flex;\n}\n\n.sidebarGroup {\n width: 100%;\n height: 100%;\n}\n\n.sidebarItem {\n width: 100%;\n height: 100%;\n}\n</style>\n"],"names":["annotation","_useModel","__props","opened","props","selectedStepId","shallowRef","selectedStep","computed","isNil","step","hasAnnotation","openedDialog","value","openedModal","effect","confirmResetSchema","useConfirm","handleCreateAnnotation","handleDeleteSchema"],"mappings":"
|
|
1
|
+
{"version":3,"file":"PlAnnotationsModal.vue2.js","sources":["../../../../src/components/PlAnnotations/components/PlAnnotationsModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isNil } from '@milaboratories/helpers';\nimport { PlPureSlideModal, PlSidebarGroup, useConfirm } from '@milaboratories/uikit';\nimport type { AnnotationScriptUi, PObjectId } from '@platforma-sdk/model';\nimport { computed, effect, shallowRef } from 'vue';\nimport type { SimplifiedUniversalPColumnEntry } from '../types';\nimport { getDefaultAnnotationScript } from '../utils';\nimport AnnotationsSidebar from './AnnotationsSidebar.vue';\nimport FilterSidebar from './FilterSidebar.vue';\nimport PlAnnotationCreateDialog from './PlAnnotationCreateDialog.vue';\n\n// Models\nconst annotation = defineModel<AnnotationScriptUi>('annotation', { required: true, default: getDefaultAnnotationScript });\nconst opened = defineModel<boolean>('opened', { required: true });\n// Props\nconst props = defineProps<{\n columns: SimplifiedUniversalPColumnEntry[];\n hasSelectedColumns: boolean;\n getValuesForSelectedColumns: () => Promise<undefined | { columnId: PObjectId; values: string[] }>;\n}>();\n// State\nconst selectedStepId = shallowRef<number | undefined>(undefined);\nconst selectedStep = computed(() => {\n return isNil(selectedStepId.value) || isNil(annotation.value)\n ? undefined\n : annotation.value.steps.find((step) => step.id === selectedStepId.value);\n});\nconst hasAnnotation = computed(() => annotation.value.isCreated === true);\n\nconst openedDialog = computed({\n get: () => !hasAnnotation.value && opened.value,\n set: (value: boolean) => (opened.value = value),\n});\nconst openedModal = computed({\n get: () => hasAnnotation.value && opened.value,\n set: (value: boolean) => (opened.value = value),\n});\n// Watchers\neffect(function setDefaultStepId() {\n if (selectedStepId.value === undefined && annotation.value.steps.length > 0) {\n selectedStepId.value = annotation.value.steps[0].id;\n }\n});\n// Hooks\nconst confirmResetSchema = useConfirm({\n title: 'Reset Schema',\n message: 'Are you sure you want to reset the schema? This action cannot be undone.',\n confirmLabel: 'Yes, reset',\n cancelLabel: 'No, cancel',\n});\n// Actions\nfunction handleCreateAnnotation(props: { type: 'byClonotype' | 'bySampleAndClonotype'; name: string }) {\n annotation.value.isCreated = true;\n annotation.value.mode = props.type;\n annotation.value.title = props.name;\n annotation.value.steps = [];\n}\n\nasync function handleDeleteSchema() {\n if (await confirmResetSchema()) {\n annotation.value.isCreated = false;\n annotation.value.title = '';\n annotation.value.mode = 'byClonotype';\n annotation.value.steps = [];\n opened.value = false;\n selectedStepId.value = undefined;\n }\n}\n\n</script>\n\n<template>\n <PlAnnotationCreateDialog v-model=\"openedDialog\" @submit=\"handleCreateAnnotation\"/>\n <PlPureSlideModal v-model=\"openedModal\" :class=\"$style.modal\" width=\"768px\">\n <PlSidebarGroup :class=\"$style.sidebarGroup\">\n <template #item-0>\n <AnnotationsSidebar\n v-model:annotation=\"annotation\"\n v-model:selectedStepId=\"selectedStepId\"\n :class=\"$style.sidebarItem\"\n :columns=\"props.columns\"\n @delete-schema=\"handleDeleteSchema\"\n />\n </template>\n <template #item-1>\n <FilterSidebar\n v-if=\"selectedStep\"\n v-model:step=\"selectedStep\"\n :class=\"$style.sidebarItem\"\n :columns=\"props.columns\"\n :selectedStepId=\"selectedStepId\"\n :hasSelectedColumns=\"props.hasSelectedColumns\"\n :getValuesForSelectedColumns=\"props.getValuesForSelectedColumns\"\n />\n </template>\n </PlSidebarGroup>\n </PlPureSlideModal>\n</template>\n\n<style lang=\"scss\" module>\n.modal {\n display: flex;\n}\n\n.sidebarGroup {\n width: 100%;\n height: 100%;\n}\n\n.sidebarItem {\n width: 100%;\n height: 100%;\n}\n</style>\n"],"names":["annotation","_useModel","__props","opened","props","selectedStepId","shallowRef","selectedStep","computed","isNil","step","hasAnnotation","openedDialog","value","openedModal","effect","confirmResetSchema","useConfirm","handleCreateAnnotation","handleDeleteSchema"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYA,UAAMA,IAAaC,EAA+BC,GAAC,YAAqE,GAClHC,IAASF,EAAoBC,GAAC,QAA4B,GAE1DE,IAAQF,GAMRG,IAAiBC,EAA+B,MAAS,GACzDC,IAAeC,EAAS,MACrBC,EAAMJ,EAAe,KAAK,KAAKI,EAAMT,EAAW,KAAK,IACxD,SACAA,EAAW,MAAM,MAAM,KAAK,CAACU,MAASA,EAAK,OAAOL,EAAe,KAAK,CAC3E,GACKM,IAAgBH,EAAS,MAAMR,EAAW,MAAM,cAAc,EAAI,GAElEY,IAAeJ,EAAS;AAAA,MAC5B,KAAK,MAAM,CAACG,EAAc,SAASR,EAAO;AAAA,MAC1C,KAAK,CAACU,MAAoBV,EAAO,QAAQU;AAAA,IAAA,CAC1C,GACKC,IAAcN,EAAS;AAAA,MAC3B,KAAK,MAAMG,EAAc,SAASR,EAAO;AAAA,MACzC,KAAK,CAACU,MAAoBV,EAAO,QAAQU;AAAA,IAAA,CAC1C;AAED,IAAAE,EAAO,WAA4B;AACjC,MAAIV,EAAe,UAAU,UAAaL,EAAW,MAAM,MAAM,SAAS,MACxEK,EAAe,QAAQL,EAAW,MAAM,MAAM,CAAC,EAAE;AAAA,IAErD,CAAC;AAED,UAAMgB,IAAqBC,EAAW;AAAA,MACpC,OAAO;AAAA,MACP,SAAS;AAAA,MACT,cAAc;AAAA,MACd,aAAa;AAAA,IAAA,CACd;AAED,aAASC,EAAuBd,GAAuE;AACrG,MAAAJ,EAAW,MAAM,YAAY,IAC7BA,EAAW,MAAM,OAAOI,EAAM,MAC9BJ,EAAW,MAAM,QAAQI,EAAM,MAC/BJ,EAAW,MAAM,QAAQ,CAAA;AAAA,IAC3B;AAEA,mBAAemB,IAAqB;AAClC,MAAI,MAAMH,QACRhB,EAAW,MAAM,YAAY,IAC7BA,EAAW,MAAM,QAAQ,IACzBA,EAAW,MAAM,OAAO,eACxBA,EAAW,MAAM,QAAQ,CAAA,GACzBG,EAAO,QAAQ,IACfE,EAAe,QAAQ;AAAA,IAE3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { defineComponent as J, mergeModels as Q, useModel as G, onBeforeMount as H, reactive as h, useCssModule as K, computed as T, watchEffect as L, useTemplateRef as W, onUnmounted as X, createElementBlock as A, openBlock as p, Fragment as N, createVNode as R, createBlock as S, unref as r, withCtx as b, createTextVNode as w, toDisplayString as v, createCommentVNode as V, normalizeClass as Y } from "vue";
|
|
2
2
|
import { isJsonEqual as q } from "../../lib/util/helpers/dist/objects.js";
|
|
3
|
-
import "../../lib/util/helpers/dist/test_timeouts.js";
|
|
4
3
|
import { PlAlert as P, PlSplash as Z } from "@milaboratories/uikit";
|
|
5
4
|
import { getRawPlatformaInstance as ee } from "@platforma-sdk/model";
|
|
6
5
|
import { useSequenceColumnsOptions as te, useLabelColumnsOptions as oe, useMarkupColumnsOptions as ne, useMultipleAlignmentData as le, SEQUENCE_LIMIT as _ } from "./data.js";
|
|
@@ -8,7 +7,7 @@ import { runMigrations as se } from "./migrations.js";
|
|
|
8
7
|
import ae from "./MultiSequenceAlignmentView.vue.js";
|
|
9
8
|
import { defaultSettings as j } from "./settings.js";
|
|
10
9
|
import re from "./Toolbar.vue.js";
|
|
11
|
-
const
|
|
10
|
+
const ye = /* @__PURE__ */ J({
|
|
12
11
|
__name: "PlMultiSequenceAlignment",
|
|
13
12
|
props: /* @__PURE__ */ Q({
|
|
14
13
|
pFrame: {},
|
|
@@ -220,6 +219,6 @@ const Ce = /* @__PURE__ */ J({
|
|
|
220
219
|
}
|
|
221
220
|
});
|
|
222
221
|
export {
|
|
223
|
-
|
|
222
|
+
ye as default
|
|
224
223
|
};
|
|
225
224
|
//# sourceMappingURL=PlMultiSequenceAlignment.vue2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlMultiSequenceAlignment.vue2.js","sources":["../../../src/components/PlMultiSequenceAlignment/PlMultiSequenceAlignment.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { isJsonEqual } from '@milaboratories/helpers';\nimport {\n type ListOptionNormalized,\n PlAlert,\n PlSplash,\n} from '@milaboratories/uikit';\nimport {\n getRawPlatformaInstance,\n type PColumnPredicate,\n type PFrameHandle,\n type PlMultiSequenceAlignmentColorSchemeOption,\n type PlMultiSequenceAlignmentModel,\n type PlMultiSequenceAlignmentSettings,\n type PlSelectionModel,\n} from '@platforma-sdk/model';\nimport {\n computed,\n onBeforeMount,\n onUnmounted,\n reactive,\n useCssModule,\n useTemplateRef,\n watchEffect,\n} from 'vue';\nimport {\n SEQUENCE_LIMIT,\n useLabelColumnsOptions,\n useMarkupColumnsOptions,\n useMultipleAlignmentData,\n useSequenceColumnsOptions,\n} from './data';\nimport { runMigrations } from './migrations';\nimport MultiSequenceAlignmentView from './MultiSequenceAlignmentView.vue';\nimport { defaultSettings } from './settings';\nimport Toolbar from './Toolbar.vue';\n\nconst model = defineModel<PlMultiSequenceAlignmentModel>({ default: {} });\n\nonBeforeMount(() => {\n runMigrations(model);\n});\n\nconst settings = reactive<PlMultiSequenceAlignmentSettings>({\n ...defaultSettings,\n});\n\nconst props = defineProps<{\n /**\n * Handle to PFrame created using `createPFrameForGraphs`.\n * Should contain all desired sequence and label columns.\n */\n readonly pFrame: PFrameHandle | undefined;\n /**\n * Return true if column should be shown in sequence columns dropdown.\n * By default, all sequence columns are selected.\n */\n readonly sequenceColumnPredicate: PColumnPredicate;\n /**\n * Row selection model (from `PlAgDataTableV2` or `GraphMaker`).\n * If not provided or empty, all rows will be considered selected.\n * Warning: should be forwarded as a field of `reactive` object\n */\n readonly selection?: PlSelectionModel;\n}>();\n\nconst classes = useCssModule();\n\nconst sequenceColumns = reactive(useSequenceColumnsOptions(() => ({\n pFrame: props.pFrame,\n sequenceColumnPredicate: props.sequenceColumnPredicate,\n})));\n\nconst labelColumns = reactive(useLabelColumnsOptions(() => ({\n pFrame: props.pFrame,\n sequenceColumnIds: settings.sequenceColumnIds,\n})));\n\nconst markupColumns = reactive(useMarkupColumnsOptions(() => ({\n pFrame: props.pFrame,\n sequenceColumnIds: settings.sequenceColumnIds,\n})));\n\nconst multipleAlignmentData = reactive(useMultipleAlignmentData(() => ({\n pFrame: props.pFrame,\n sequenceColumnIds: settings.sequenceColumnIds,\n labelColumnIds: settings.labelColumnIds,\n selection: props.selection,\n colorScheme: settings.colorScheme,\n alignmentParams: settings.alignmentParams,\n shouldBuildPhylogeneticTree: settings.widgets.includes('tree'),\n})));\n\nconst formatNumber = new Intl.NumberFormat('en').format;\n\nconst colorSchemeOptions = computed<\n ListOptionNormalized<PlMultiSequenceAlignmentColorSchemeOption>[]\n>(\n () => [\n {\n label: 'Chemical Properties',\n value: { type: 'chemical-properties' },\n },\n {\n label: 'No Color',\n value: { type: 'no-color' },\n },\n ...(markupColumns.data ?? []).map(({ label, value }) => ({\n label,\n value: {\n type: 'markup' as const,\n columnIds: value,\n },\n })),\n ],\n);\n\nconst error = computed(() =>\n sequenceColumns.error\n ?? labelColumns.error\n ?? markupColumns.error\n ?? multipleAlignmentData.error,\n);\n\nfunction applySettings(\n settingsPatch: Partial<PlMultiSequenceAlignmentSettings>,\n) {\n model.value = Object.fromEntries(\n Object.entries({ ...model.value, ...settingsPatch })\n .filter(([_key, value]) => value !== undefined),\n );\n}\n\nwatchEffect(() => {\n const patch: Partial<PlMultiSequenceAlignmentSettings> = Object.fromEntries(\n Object.entries({\n ...defaultSettings,\n sequenceColumnIds: sequenceColumns.data?.defaults,\n labelColumnIds: labelColumns.data?.defaults,\n ...model.value,\n }).filter(([key, value]) =>\n !isJsonEqual(\n settings[key as keyof PlMultiSequenceAlignmentSettings],\n value,\n ),\n ),\n );\n Object.assign(settings, patch);\n});\n\n// Reset stale settings\nwatchEffect(() => {\n const settingsToReset: (keyof PlMultiSequenceAlignmentSettings)[] = [];\n if (\n !sequenceColumns.isLoading\n && settings.sequenceColumnIds?.some((id) =>\n (sequenceColumns.data?.options ?? []).every(\n ({ value }) => !isJsonEqual(value, id),\n ),\n )\n ) {\n settingsToReset.push('sequenceColumnIds');\n }\n if (\n !labelColumns.isLoading\n && settings.labelColumnIds?.some((id) =>\n (labelColumns.data?.options ?? []).every(\n ({ value }) => !isJsonEqual(value, id),\n ),\n )\n ) {\n settingsToReset.push('labelColumnIds');\n }\n\n const markupColumnIds = settings.colorScheme?.type === 'markup'\n ? settings.colorScheme.columnIds\n : undefined;\n\n if (\n !markupColumns.isLoading\n && markupColumnIds\n && (markupColumns.data ?? []).every(\n ({ value }) => !isJsonEqual(value, markupColumnIds),\n )\n ) {\n settingsToReset.push('colorScheme');\n }\n if (settingsToReset.length) {\n applySettings(Object.fromEntries(\n settingsToReset.map((key) => [key, undefined]),\n ));\n }\n});\n\nconst msaEl = useTemplateRef('msa');\n\nasync function exportPdf() {\n const exportToPdf = getRawPlatformaInstance()?.lsDriver\n ?.exportToPdf;\n if (!exportToPdf) {\n return console.error(\n 'API getPlatformaRawInstance().lsDriver.exportToPdf is not available',\n );\n }\n const msaRoot = msaEl.value?.rootEl;\n if (!msaRoot) {\n throw new Error('MSA element is not available.');\n }\n const printTarget = document.createElement('div');\n printTarget.id = `print-target-${crypto.randomUUID()}`;\n const printStyleSheet = new CSSStyleSheet();\n document.adoptedStyleSheets.push(printStyleSheet);\n printStyleSheet.insertRule(`\n@media screen {\n #${printTarget.id} {\n visibility: hidden;\n position: fixed;\n }\n}`);\n const msaClone = msaRoot.cloneNode(true) as HTMLElement;\n msaClone.dataset.prePrint = '';\n printTarget.replaceChildren(msaClone);\n document.body.appendChild(printTarget);\n const { height, width } = printTarget.getBoundingClientRect();\n const margin = CSS.cm(1);\n const pageSize = [width, height]\n .map((value) => CSS.px(value).add(margin.mul(2)))\n .join(' ');\n printStyleSheet.insertRule(`\n@media print {\n @page {\n size: ${pageSize};\n margin: ${margin};\n }\n body > :not(#${printTarget.id}) {\n display: none;\n }\n}`);\n try {\n await exportToPdf();\n } catch (error) {\n console.error(error);\n } finally {\n document.body.removeChild(printTarget);\n const index = document.adoptedStyleSheets.indexOf(printStyleSheet);\n if (index >= 0) {\n document.adoptedStyleSheets.splice(index, 1);\n }\n }\n}\n\nonUnmounted(() => {\n multipleAlignmentData.data = undefined;\n});\n</script>\n\n<template>\n <Toolbar\n :settings=\"settings\"\n :sequence-column-options=\"sequenceColumns.data?.options\"\n :label-column-options=\"labelColumns.data?.options\"\n :color-scheme-options=\"colorSchemeOptions\"\n @update-settings=\"applySettings\"\n @export=\"exportPdf\"\n />\n <PlAlert v-if=\"error\" type=\"error\">\n {{ error }}\n </PlAlert>\n <PlAlert\n v-else-if=\"!multipleAlignmentData.isLoading && !multipleAlignmentData.data\"\n type=\"warn\"\n icon\n >\n Please select at least one sequence column and two or more rows to run\n alignment\n </PlAlert>\n <template v-else>\n <PlAlert\n v-if=\"multipleAlignmentData.data?.exceedsLimit\"\n type=\"warn\"\n icon\n label=\"Visualization is limited\"\n >\n MSA visualization supports {{ formatNumber(2) }} to\n {{ formatNumber(SEQUENCE_LIMIT) }} sequences. Only the first\n {{ formatNumber(SEQUENCE_LIMIT) }} will be displayed.\n </PlAlert>\n <PlSplash\n type=\"transparent\"\n :class=\"classes.splash\"\n :loading=\"multipleAlignmentData.isLoading\"\n >\n <MultiSequenceAlignmentView\n v-if=\"multipleAlignmentData.data\"\n ref=\"msa\"\n :sequences=\"multipleAlignmentData.data.sequences\"\n :labels=\"multipleAlignmentData.data.labels\"\n :highlight-legend=\"multipleAlignmentData.data.highlightLegend\"\n :phylogenetic-tree=\"multipleAlignmentData.data.phylogeneticTree\"\n :widgets=\"settings.widgets\"\n />\n </PlSplash>\n </template>\n</template>\n\n<style module>\n.splash {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 12px;\n overflow: hidden;\n}\n</style>\n"],"names":["model","_useModel","__props","onBeforeMount","runMigrations","settings","reactive","defaultSettings","props","classes","useCssModule","sequenceColumns","useSequenceColumnsOptions","labelColumns","useLabelColumnsOptions","markupColumns","useMarkupColumnsOptions","multipleAlignmentData","useMultipleAlignmentData","formatNumber","colorSchemeOptions","computed","label","value","error","applySettings","settingsPatch","_key","watchEffect","patch","_a","_b","key","isJsonEqual","settingsToReset","id","markupColumnIds","_c","msaEl","useTemplateRef","exportPdf","exportToPdf","getRawPlatformaInstance","msaRoot","printTarget","printStyleSheet","msaClone","height","width","margin","pageSize","index","onUnmounted"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PlMultiSequenceAlignment.vue2.js","sources":["../../../src/components/PlMultiSequenceAlignment/PlMultiSequenceAlignment.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { isJsonEqual } from '@milaboratories/helpers';\nimport {\n type ListOptionNormalized,\n PlAlert,\n PlSplash,\n} from '@milaboratories/uikit';\nimport {\n getRawPlatformaInstance,\n type PColumnPredicate,\n type PFrameHandle,\n type PlMultiSequenceAlignmentColorSchemeOption,\n type PlMultiSequenceAlignmentModel,\n type PlMultiSequenceAlignmentSettings,\n type PlSelectionModel,\n} from '@platforma-sdk/model';\nimport {\n computed,\n onBeforeMount,\n onUnmounted,\n reactive,\n useCssModule,\n useTemplateRef,\n watchEffect,\n} from 'vue';\nimport {\n SEQUENCE_LIMIT,\n useLabelColumnsOptions,\n useMarkupColumnsOptions,\n useMultipleAlignmentData,\n useSequenceColumnsOptions,\n} from './data';\nimport { runMigrations } from './migrations';\nimport MultiSequenceAlignmentView from './MultiSequenceAlignmentView.vue';\nimport { defaultSettings } from './settings';\nimport Toolbar from './Toolbar.vue';\n\nconst model = defineModel<PlMultiSequenceAlignmentModel>({ default: {} });\n\nonBeforeMount(() => {\n runMigrations(model);\n});\n\nconst settings = reactive<PlMultiSequenceAlignmentSettings>({\n ...defaultSettings,\n});\n\nconst props = defineProps<{\n /**\n * Handle to PFrame created using `createPFrameForGraphs`.\n * Should contain all desired sequence and label columns.\n */\n readonly pFrame: PFrameHandle | undefined;\n /**\n * Return true if column should be shown in sequence columns dropdown.\n * By default, all sequence columns are selected.\n */\n readonly sequenceColumnPredicate: PColumnPredicate;\n /**\n * Row selection model (from `PlAgDataTableV2` or `GraphMaker`).\n * If not provided or empty, all rows will be considered selected.\n * Warning: should be forwarded as a field of `reactive` object\n */\n readonly selection?: PlSelectionModel;\n}>();\n\nconst classes = useCssModule();\n\nconst sequenceColumns = reactive(useSequenceColumnsOptions(() => ({\n pFrame: props.pFrame,\n sequenceColumnPredicate: props.sequenceColumnPredicate,\n})));\n\nconst labelColumns = reactive(useLabelColumnsOptions(() => ({\n pFrame: props.pFrame,\n sequenceColumnIds: settings.sequenceColumnIds,\n})));\n\nconst markupColumns = reactive(useMarkupColumnsOptions(() => ({\n pFrame: props.pFrame,\n sequenceColumnIds: settings.sequenceColumnIds,\n})));\n\nconst multipleAlignmentData = reactive(useMultipleAlignmentData(() => ({\n pFrame: props.pFrame,\n sequenceColumnIds: settings.sequenceColumnIds,\n labelColumnIds: settings.labelColumnIds,\n selection: props.selection,\n colorScheme: settings.colorScheme,\n alignmentParams: settings.alignmentParams,\n shouldBuildPhylogeneticTree: settings.widgets.includes('tree'),\n})));\n\nconst formatNumber = new Intl.NumberFormat('en').format;\n\nconst colorSchemeOptions = computed<\n ListOptionNormalized<PlMultiSequenceAlignmentColorSchemeOption>[]\n>(\n () => [\n {\n label: 'Chemical Properties',\n value: { type: 'chemical-properties' },\n },\n {\n label: 'No Color',\n value: { type: 'no-color' },\n },\n ...(markupColumns.data ?? []).map(({ label, value }) => ({\n label,\n value: {\n type: 'markup' as const,\n columnIds: value,\n },\n })),\n ],\n);\n\nconst error = computed(() =>\n sequenceColumns.error\n ?? labelColumns.error\n ?? markupColumns.error\n ?? multipleAlignmentData.error,\n);\n\nfunction applySettings(\n settingsPatch: Partial<PlMultiSequenceAlignmentSettings>,\n) {\n model.value = Object.fromEntries(\n Object.entries({ ...model.value, ...settingsPatch })\n .filter(([_key, value]) => value !== undefined),\n );\n}\n\nwatchEffect(() => {\n const patch: Partial<PlMultiSequenceAlignmentSettings> = Object.fromEntries(\n Object.entries({\n ...defaultSettings,\n sequenceColumnIds: sequenceColumns.data?.defaults,\n labelColumnIds: labelColumns.data?.defaults,\n ...model.value,\n }).filter(([key, value]) =>\n !isJsonEqual(\n settings[key as keyof PlMultiSequenceAlignmentSettings],\n value,\n ),\n ),\n );\n Object.assign(settings, patch);\n});\n\n// Reset stale settings\nwatchEffect(() => {\n const settingsToReset: (keyof PlMultiSequenceAlignmentSettings)[] = [];\n if (\n !sequenceColumns.isLoading\n && settings.sequenceColumnIds?.some((id) =>\n (sequenceColumns.data?.options ?? []).every(\n ({ value }) => !isJsonEqual(value, id),\n ),\n )\n ) {\n settingsToReset.push('sequenceColumnIds');\n }\n if (\n !labelColumns.isLoading\n && settings.labelColumnIds?.some((id) =>\n (labelColumns.data?.options ?? []).every(\n ({ value }) => !isJsonEqual(value, id),\n ),\n )\n ) {\n settingsToReset.push('labelColumnIds');\n }\n\n const markupColumnIds = settings.colorScheme?.type === 'markup'\n ? settings.colorScheme.columnIds\n : undefined;\n\n if (\n !markupColumns.isLoading\n && markupColumnIds\n && (markupColumns.data ?? []).every(\n ({ value }) => !isJsonEqual(value, markupColumnIds),\n )\n ) {\n settingsToReset.push('colorScheme');\n }\n if (settingsToReset.length) {\n applySettings(Object.fromEntries(\n settingsToReset.map((key) => [key, undefined]),\n ));\n }\n});\n\nconst msaEl = useTemplateRef('msa');\n\nasync function exportPdf() {\n const exportToPdf = getRawPlatformaInstance()?.lsDriver\n ?.exportToPdf;\n if (!exportToPdf) {\n return console.error(\n 'API getPlatformaRawInstance().lsDriver.exportToPdf is not available',\n );\n }\n const msaRoot = msaEl.value?.rootEl;\n if (!msaRoot) {\n throw new Error('MSA element is not available.');\n }\n const printTarget = document.createElement('div');\n printTarget.id = `print-target-${crypto.randomUUID()}`;\n const printStyleSheet = new CSSStyleSheet();\n document.adoptedStyleSheets.push(printStyleSheet);\n printStyleSheet.insertRule(`\n@media screen {\n #${printTarget.id} {\n visibility: hidden;\n position: fixed;\n }\n}`);\n const msaClone = msaRoot.cloneNode(true) as HTMLElement;\n msaClone.dataset.prePrint = '';\n printTarget.replaceChildren(msaClone);\n document.body.appendChild(printTarget);\n const { height, width } = printTarget.getBoundingClientRect();\n const margin = CSS.cm(1);\n const pageSize = [width, height]\n .map((value) => CSS.px(value).add(margin.mul(2)))\n .join(' ');\n printStyleSheet.insertRule(`\n@media print {\n @page {\n size: ${pageSize};\n margin: ${margin};\n }\n body > :not(#${printTarget.id}) {\n display: none;\n }\n}`);\n try {\n await exportToPdf();\n } catch (error) {\n console.error(error);\n } finally {\n document.body.removeChild(printTarget);\n const index = document.adoptedStyleSheets.indexOf(printStyleSheet);\n if (index >= 0) {\n document.adoptedStyleSheets.splice(index, 1);\n }\n }\n}\n\nonUnmounted(() => {\n multipleAlignmentData.data = undefined;\n});\n</script>\n\n<template>\n <Toolbar\n :settings=\"settings\"\n :sequence-column-options=\"sequenceColumns.data?.options\"\n :label-column-options=\"labelColumns.data?.options\"\n :color-scheme-options=\"colorSchemeOptions\"\n @update-settings=\"applySettings\"\n @export=\"exportPdf\"\n />\n <PlAlert v-if=\"error\" type=\"error\">\n {{ error }}\n </PlAlert>\n <PlAlert\n v-else-if=\"!multipleAlignmentData.isLoading && !multipleAlignmentData.data\"\n type=\"warn\"\n icon\n >\n Please select at least one sequence column and two or more rows to run\n alignment\n </PlAlert>\n <template v-else>\n <PlAlert\n v-if=\"multipleAlignmentData.data?.exceedsLimit\"\n type=\"warn\"\n icon\n label=\"Visualization is limited\"\n >\n MSA visualization supports {{ formatNumber(2) }} to\n {{ formatNumber(SEQUENCE_LIMIT) }} sequences. Only the first\n {{ formatNumber(SEQUENCE_LIMIT) }} will be displayed.\n </PlAlert>\n <PlSplash\n type=\"transparent\"\n :class=\"classes.splash\"\n :loading=\"multipleAlignmentData.isLoading\"\n >\n <MultiSequenceAlignmentView\n v-if=\"multipleAlignmentData.data\"\n ref=\"msa\"\n :sequences=\"multipleAlignmentData.data.sequences\"\n :labels=\"multipleAlignmentData.data.labels\"\n :highlight-legend=\"multipleAlignmentData.data.highlightLegend\"\n :phylogenetic-tree=\"multipleAlignmentData.data.phylogeneticTree\"\n :widgets=\"settings.widgets\"\n />\n </PlSplash>\n </template>\n</template>\n\n<style module>\n.splash {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 12px;\n overflow: hidden;\n}\n</style>\n"],"names":["model","_useModel","__props","onBeforeMount","runMigrations","settings","reactive","defaultSettings","props","classes","useCssModule","sequenceColumns","useSequenceColumnsOptions","labelColumns","useLabelColumnsOptions","markupColumns","useMarkupColumnsOptions","multipleAlignmentData","useMultipleAlignmentData","formatNumber","colorSchemeOptions","computed","label","value","error","applySettings","settingsPatch","_key","watchEffect","patch","_a","_b","key","isJsonEqual","settingsToReset","id","markupColumnIds","_c","msaEl","useTemplateRef","exportPdf","exportToPdf","getRawPlatformaInstance","msaRoot","printTarget","printStyleSheet","msaClone","height","width","margin","pageSize","index","onUnmounted"],"mappings":"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"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { defineComponent as I, useCssModule as K, ref as S, watchEffect as L, computed as x, createElementBlock as w, openBlock as P, Fragment as M, createElementVNode as r, createVNode as o, normalizeClass as m, unref as t, withModifiers as k, withCtx as s, createTextVNode as a, createCommentVNode as U, createBlock as T, withKeys as C } from "vue";
|
|
2
2
|
import { isJsonEqual as q } from "../../lib/util/helpers/dist/objects.js";
|
|
3
|
-
import "../../lib/util/helpers/dist/test_timeouts.js";
|
|
4
3
|
import { PlDropdownMulti as $, PlDropdown as D, PlBtnGhost as V, PlCheckbox as g, PlSlideModal as G, PlNumberField as b, PlBtnPrimary as A, PlBtnSecondary as F } from "@milaboratories/uikit";
|
|
5
4
|
import { defaultSettings as R } from "./settings.js";
|
|
6
|
-
const
|
|
5
|
+
const H = /* @__PURE__ */ I({
|
|
7
6
|
__name: "Toolbar",
|
|
8
7
|
props: {
|
|
9
8
|
settings: {},
|
|
@@ -224,6 +223,6 @@ const Q = /* @__PURE__ */ I({
|
|
|
224
223
|
}
|
|
225
224
|
});
|
|
226
225
|
export {
|
|
227
|
-
|
|
226
|
+
H as default
|
|
228
227
|
};
|
|
229
228
|
//# sourceMappingURL=Toolbar.vue2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.vue2.js","sources":["../../../src/components/PlMultiSequenceAlignment/Toolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isJsonEqual } from '@milaboratories/helpers';\nimport {\n type ListOptionNormalized,\n PlBtnGhost,\n PlBtnPrimary,\n PlBtnSecondary,\n PlCheckbox,\n PlDropdown,\n PlDropdownMulti,\n PlNumberField,\n PlSlideModal,\n} from '@milaboratories/uikit';\nimport type {\n PlMultiSequenceAlignmentColorSchemeOption as ColorSchemeOption,\n PlMultiSequenceAlignmentSettings as Settings,\n PlMultiSequenceAlignmentWidget,\n PObjectId,\n PTableColumnId,\n} from '@platforma-sdk/model';\nimport { computed, ref, useCssModule, watchEffect } from 'vue';\nimport { defaultSettings } from './settings';\n\nconst props = defineProps<{\n settings: Settings;\n sequenceColumnOptions: ListOptionNormalized<PObjectId>[] | undefined;\n labelColumnOptions: ListOptionNormalized<PTableColumnId>[] | undefined;\n colorSchemeOptions: ListOptionNormalized<ColorSchemeOption>[];\n}>();\n\nconst emit = defineEmits<{\n updateSettings: [Partial<Settings>];\n export: [];\n}>();\n\nconst classes = useCssModule();\n\nconst settingsOpen = ref(false);\n\nfunction updateSetting<K extends keyof Settings>(\n key: K,\n value: Settings[K] | undefined,\n) {\n emit('updateSettings', { [key]: value });\n}\n\nfunction toggleWidget(\n widget: PlMultiSequenceAlignmentWidget,\n checked: boolean,\n) {\n updateSetting(\n 'widgets',\n checked\n ? [...props.settings.widgets, widget]\n : props.settings.widgets.filter((w) => widget !== w),\n );\n}\n\nconst alignmentParams = ref({ ...props.settings.alignmentParams });\nwatchEffect(() => {\n alignmentParams.value = { ...props.settings.alignmentParams };\n});\n\nconst alignmentParamsChangesPending = computed(() =>\n !isJsonEqual(props.settings.alignmentParams, alignmentParams.value),\n);\n\nconst canResetAlignmentParams = computed(() =>\n !isJsonEqual(props.settings.alignmentParams, defaultSettings.alignmentParams),\n);\n</script>\n\n<template>\n <div :class=\"classes.container\">\n <div :class=\"classes.line\">\n <div :class=\"classes.section\">\n <PlDropdownMulti\n label=\"Sequence Columns\"\n :model-value=\"props.settings.sequenceColumnIds ?? []\"\n :options=\"props.sequenceColumnOptions\"\n clearable\n @update:model-value=\"event => updateSetting('sequenceColumnIds', event)\"\n />\n <PlDropdownMulti\n :model-value=\"props.settings.labelColumnIds ?? []\"\n label=\"Label Columns\"\n :options=\"props.labelColumnOptions\"\n clearable\n @update:model-value=\"event => updateSetting('labelColumnIds', event)\"\n />\n <PlDropdown\n :model-value=\"props.settings.colorScheme\"\n label=\"Color Scheme\"\n :options=\"props.colorSchemeOptions\"\n @update:model-value=\"event => updateSetting('colorScheme', event)\"\n />\n </div>\n <div :class=\"classes.buttons\">\n <PlBtnGhost icon=\"settings\" @click.stop=\"settingsOpen = true\">\n Settings\n </PlBtnGhost>\n <PlBtnGhost icon=\"export\" @click.stop=\"emit('export')\">\n Export\n </PlBtnGhost>\n </div>\n </div>\n <div :class=\"classes.line\">\n <div :class=\"classes.section\">\n <PlCheckbox\n :model-value=\"props.settings.widgets.includes('seqLogo')\"\n @update:model-value=\"event => toggleWidget('seqLogo', event)\"\n >\n Seq logo\n </PlCheckbox>\n <PlCheckbox\n :model-value=\"props.settings.widgets.includes('consensus')\"\n @update:model-value=\"event => toggleWidget('consensus', event)\"\n >\n Consensus\n </PlCheckbox>\n <PlCheckbox :model-value=\"false\" disabled>Navigator</PlCheckbox>\n <PlCheckbox\n :model-value=\"props.settings.widgets.includes('tree')\"\n @update:model-value=\"event => toggleWidget('tree', event)\"\n >\n Tree\n </PlCheckbox>\n <PlCheckbox\n :model-value=\"props.settings.widgets.includes('legend')\"\n :disabled=\"props.settings.colorScheme.type === 'no-color'\"\n @update:model-value=\"event => toggleWidget('legend', event)\"\n >\n Legend\n </PlCheckbox>\n </div>\n </div>\n </div>\n <PlSlideModal v-model=\"settingsOpen\">\n <template #title>Settings</template>\n <PlNumberField\n v-model=\"alignmentParams.gpo\"\n label=\"Gap open penalty\"\n :step=\"0.1\"\n @keyup.enter=\"updateSetting('alignmentParams', alignmentParams)\"\n >\n <template #tooltip>\n Penalty score assigned to the introduction of a gap in the alignment\n </template>\n </PlNumberField>\n <PlNumberField\n v-model=\"alignmentParams.gpe\"\n label=\"Gap extension penalty\"\n :step=\"0.1\"\n @keyup.enter=\"updateSetting('alignmentParams', alignmentParams)\"\n >\n <template #tooltip>\n Penalty score assigned to each additional residue added to an existing\n gap\n </template>\n </PlNumberField>\n <PlNumberField\n v-model=\"alignmentParams.tgpe\"\n label=\"Terminal gap extension penalty\"\n :step=\"0.1\"\n @keyup.enter=\"updateSetting('alignmentParams', alignmentParams)\"\n >\n <template #tooltip>\n Penalty score assigned to extending gaps at the ends of sequences\n </template>\n </PlNumberField>\n <div\n v-if=\"alignmentParamsChangesPending\"\n :class=\"classes.pendingChanges\"\n >\n <PlBtnPrimary @click=\"updateSetting('alignmentParams', alignmentParams)\">\n Apply\n </PlBtnPrimary>\n <PlBtnGhost @click=\"alignmentParams = props.settings.alignmentParams\">\n Cancel\n </PlBtnGhost>\n </div>\n <PlBtnSecondary\n v-if=\"canResetAlignmentParams\"\n :class=\"classes.resetButton\"\n icon=\"reverse\"\n @click=\"updateSetting('alignmentParams', undefined)\"\n >\n Reset to Default\n </PlBtnSecondary>\n </PlSlideModal>\n</template>\n\n<style module>\n.container {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n.line {\n display: flex;\n justify-content: space-between;\n}\n\n.section {\n display: flex;\n flex-wrap: wrap;\n gap: 24px;\n}\n\n.buttons {\n display: flex;\n}\n\n.pendingChanges {\n display: flex;\n button {\n min-width: 160px;\n }\n}\n\n.resetButton {\n margin-block-start: auto;\n span {\n text-transform: none;\n }\n}\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","settingsOpen","ref","updateSetting","key","value","toggleWidget","widget","checked","w","alignmentParams","watchEffect","alignmentParamsChangesPending","computed","isJsonEqual","canResetAlignmentParams","defaultSettings"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Toolbar.vue2.js","sources":["../../../src/components/PlMultiSequenceAlignment/Toolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isJsonEqual } from '@milaboratories/helpers';\nimport {\n type ListOptionNormalized,\n PlBtnGhost,\n PlBtnPrimary,\n PlBtnSecondary,\n PlCheckbox,\n PlDropdown,\n PlDropdownMulti,\n PlNumberField,\n PlSlideModal,\n} from '@milaboratories/uikit';\nimport type {\n PlMultiSequenceAlignmentColorSchemeOption as ColorSchemeOption,\n PlMultiSequenceAlignmentSettings as Settings,\n PlMultiSequenceAlignmentWidget,\n PObjectId,\n PTableColumnId,\n} from '@platforma-sdk/model';\nimport { computed, ref, useCssModule, watchEffect } from 'vue';\nimport { defaultSettings } from './settings';\n\nconst props = defineProps<{\n settings: Settings;\n sequenceColumnOptions: ListOptionNormalized<PObjectId>[] | undefined;\n labelColumnOptions: ListOptionNormalized<PTableColumnId>[] | undefined;\n colorSchemeOptions: ListOptionNormalized<ColorSchemeOption>[];\n}>();\n\nconst emit = defineEmits<{\n updateSettings: [Partial<Settings>];\n export: [];\n}>();\n\nconst classes = useCssModule();\n\nconst settingsOpen = ref(false);\n\nfunction updateSetting<K extends keyof Settings>(\n key: K,\n value: Settings[K] | undefined,\n) {\n emit('updateSettings', { [key]: value });\n}\n\nfunction toggleWidget(\n widget: PlMultiSequenceAlignmentWidget,\n checked: boolean,\n) {\n updateSetting(\n 'widgets',\n checked\n ? [...props.settings.widgets, widget]\n : props.settings.widgets.filter((w) => widget !== w),\n );\n}\n\nconst alignmentParams = ref({ ...props.settings.alignmentParams });\nwatchEffect(() => {\n alignmentParams.value = { ...props.settings.alignmentParams };\n});\n\nconst alignmentParamsChangesPending = computed(() =>\n !isJsonEqual(props.settings.alignmentParams, alignmentParams.value),\n);\n\nconst canResetAlignmentParams = computed(() =>\n !isJsonEqual(props.settings.alignmentParams, defaultSettings.alignmentParams),\n);\n</script>\n\n<template>\n <div :class=\"classes.container\">\n <div :class=\"classes.line\">\n <div :class=\"classes.section\">\n <PlDropdownMulti\n label=\"Sequence Columns\"\n :model-value=\"props.settings.sequenceColumnIds ?? []\"\n :options=\"props.sequenceColumnOptions\"\n clearable\n @update:model-value=\"event => updateSetting('sequenceColumnIds', event)\"\n />\n <PlDropdownMulti\n :model-value=\"props.settings.labelColumnIds ?? []\"\n label=\"Label Columns\"\n :options=\"props.labelColumnOptions\"\n clearable\n @update:model-value=\"event => updateSetting('labelColumnIds', event)\"\n />\n <PlDropdown\n :model-value=\"props.settings.colorScheme\"\n label=\"Color Scheme\"\n :options=\"props.colorSchemeOptions\"\n @update:model-value=\"event => updateSetting('colorScheme', event)\"\n />\n </div>\n <div :class=\"classes.buttons\">\n <PlBtnGhost icon=\"settings\" @click.stop=\"settingsOpen = true\">\n Settings\n </PlBtnGhost>\n <PlBtnGhost icon=\"export\" @click.stop=\"emit('export')\">\n Export\n </PlBtnGhost>\n </div>\n </div>\n <div :class=\"classes.line\">\n <div :class=\"classes.section\">\n <PlCheckbox\n :model-value=\"props.settings.widgets.includes('seqLogo')\"\n @update:model-value=\"event => toggleWidget('seqLogo', event)\"\n >\n Seq logo\n </PlCheckbox>\n <PlCheckbox\n :model-value=\"props.settings.widgets.includes('consensus')\"\n @update:model-value=\"event => toggleWidget('consensus', event)\"\n >\n Consensus\n </PlCheckbox>\n <PlCheckbox :model-value=\"false\" disabled>Navigator</PlCheckbox>\n <PlCheckbox\n :model-value=\"props.settings.widgets.includes('tree')\"\n @update:model-value=\"event => toggleWidget('tree', event)\"\n >\n Tree\n </PlCheckbox>\n <PlCheckbox\n :model-value=\"props.settings.widgets.includes('legend')\"\n :disabled=\"props.settings.colorScheme.type === 'no-color'\"\n @update:model-value=\"event => toggleWidget('legend', event)\"\n >\n Legend\n </PlCheckbox>\n </div>\n </div>\n </div>\n <PlSlideModal v-model=\"settingsOpen\">\n <template #title>Settings</template>\n <PlNumberField\n v-model=\"alignmentParams.gpo\"\n label=\"Gap open penalty\"\n :step=\"0.1\"\n @keyup.enter=\"updateSetting('alignmentParams', alignmentParams)\"\n >\n <template #tooltip>\n Penalty score assigned to the introduction of a gap in the alignment\n </template>\n </PlNumberField>\n <PlNumberField\n v-model=\"alignmentParams.gpe\"\n label=\"Gap extension penalty\"\n :step=\"0.1\"\n @keyup.enter=\"updateSetting('alignmentParams', alignmentParams)\"\n >\n <template #tooltip>\n Penalty score assigned to each additional residue added to an existing\n gap\n </template>\n </PlNumberField>\n <PlNumberField\n v-model=\"alignmentParams.tgpe\"\n label=\"Terminal gap extension penalty\"\n :step=\"0.1\"\n @keyup.enter=\"updateSetting('alignmentParams', alignmentParams)\"\n >\n <template #tooltip>\n Penalty score assigned to extending gaps at the ends of sequences\n </template>\n </PlNumberField>\n <div\n v-if=\"alignmentParamsChangesPending\"\n :class=\"classes.pendingChanges\"\n >\n <PlBtnPrimary @click=\"updateSetting('alignmentParams', alignmentParams)\">\n Apply\n </PlBtnPrimary>\n <PlBtnGhost @click=\"alignmentParams = props.settings.alignmentParams\">\n Cancel\n </PlBtnGhost>\n </div>\n <PlBtnSecondary\n v-if=\"canResetAlignmentParams\"\n :class=\"classes.resetButton\"\n icon=\"reverse\"\n @click=\"updateSetting('alignmentParams', undefined)\"\n >\n Reset to Default\n </PlBtnSecondary>\n </PlSlideModal>\n</template>\n\n<style module>\n.container {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n.line {\n display: flex;\n justify-content: space-between;\n}\n\n.section {\n display: flex;\n flex-wrap: wrap;\n gap: 24px;\n}\n\n.buttons {\n display: flex;\n}\n\n.pendingChanges {\n display: flex;\n button {\n min-width: 160px;\n }\n}\n\n.resetButton {\n margin-block-start: auto;\n span {\n text-transform: none;\n }\n}\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","settingsOpen","ref","updateSetting","key","value","toggleWidget","widget","checked","w","alignmentParams","watchEffect","alignmentParamsChangesPending","computed","isJsonEqual","canResetAlignmentParams","defaultSettings"],"mappings":";;;;;;;;;;;;;;AAuBA,UAAMA,IAAQC,GAORC,IAAOC,GAKPC,IAAUC,EAAA,GAEVC,IAAeC,EAAI,EAAK;AAE9B,aAASC,EACPC,GACAC,GACA;AACA,MAAAR,EAAK,kBAAkB,EAAE,CAACO,CAAG,GAAGC,GAAO;AAAA,IACzC;AAEA,aAASC,EACPC,GACAC,GACA;AACA,MAAAL;AAAA,QACE;AAAA,QACAK,IACI,CAAC,GAAGb,EAAM,SAAS,SAASY,CAAM,IAClCZ,EAAM,SAAS,QAAQ,OAAO,CAACc,MAAMF,MAAWE,CAAC;AAAA,MAAA;AAAA,IAEzD;AAEA,UAAMC,IAAkBR,EAAI,EAAE,GAAGP,EAAM,SAAS,iBAAiB;AACjE,IAAAgB,EAAY,MAAM;AAChB,MAAAD,EAAgB,QAAQ,EAAE,GAAGf,EAAM,SAAS,gBAAA;AAAA,IAC9C,CAAC;AAED,UAAMiB,IAAgCC;AAAA,MAAS,MAC7C,CAACC,EAAYnB,EAAM,SAAS,iBAAiBe,EAAgB,KAAK;AAAA,IAAA,GAG9DK,IAA0BF;AAAA,MAAS,MACvC,CAACC,EAAYnB,EAAM,SAAS,iBAAiBqB,EAAgB,eAAe;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|