@platforma-sdk/ui-vue 1.40.4 → 1.40.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.40.4",
+  "version": "1.40.6",
   "type": "module",
   "main": "dist/lib.js",
   "styles": "dist/lib.js",
@@ -14,7 +14,6 @@
   "dependencies": {
     "@types/node": "~20.16.15",
     "@types/semver": "^7.7.0",
-    "@types/sortablejs": "^1.15.6",
     "@types/d3-format": "^3.0.4",
     "@milaboratories/miplots4": "^1.0.123",
     "ag-grid-enterprise": "^33.3.2",
@@ -24,12 +23,11 @@
     "vue": "^3.5.13",
     "@vueuse/core": "^13.3.0",
     "@vueuse/integrations": "^13.3.0",
-    "sortablejs": "^1.15.6",
     "d3-format": "^3.1.0",
     "zod": "~3.23.8",
     "@milaboratories/biowasm-tools": "^1.1.0",
-    "@milaboratories/uikit": "2.3.13",
-    "@platforma-sdk/model": "~1.40.1"
+    "@milaboratories/uikit": "2.3.15",
+    "@platforma-sdk/model": "~1.40.6"
   },
   "devDependencies": {
     "happy-dom": "^15.11.7",
@@ -42,10 +40,10 @@
     "vitest": "^2.1.9",
     "vue-tsc": "^2.2.10",
     "yarpm": "^1.2.0",
-    "@milaboratories/ts-configs": "1.0.4",
-    "@milaboratories/helpers": "^1.6.17",
     "@milaboratories/build-configs": "1.0.4",
-    "@milaboratories/eslint-config": "^1.0.4"
+    "@milaboratories/eslint-config": "^1.0.4",
+    "@milaboratories/helpers": "^1.6.18",
+    "@milaboratories/ts-configs": "1.0.4"
   },
   "scripts": {
     "test": "vitest run --passWithNoTests",

package/src/components/PlAgDataTable/PlAgDataTableV2.vue

@@ -1,7 +1,5 @@
 <script lang="ts" setup>
-import {
-  isJsonEqual,
-} from '@milaboratories/helpers';
+import { isJsonEqual } from '@milaboratories/helpers';
 import type {
   AxisId,
   AxisSpec,
@@ -12,10 +10,7 @@ import type {
   PTableColumnSpec,
   PTableKey,
 } from '@platforma-sdk/model';
-import {
-  getRawPlatformaInstance,
-  parseJson,
-} from '@platforma-sdk/model';
+import { getRawPlatformaInstance, parseJson } from '@platforma-sdk/model';
 import type {
   CellRendererSelectorFunc,
   ColDef,
@@ -26,41 +21,22 @@ import type {
   ManagedGridOptionKey,
   ManagedGridOptions,
 } from 'ag-grid-enterprise';
-import {
-  AgGridVue,
-} from 'ag-grid-vue3';
-import {
-  computed,
-  ref,
-  shallowRef,
-  toRefs,
-  watch,
-} from 'vue';
-import {
-  AgGridTheme,
-} from '../../aggrid';
+import { AgGridVue } from 'ag-grid-vue3';
+import { computed, ref, shallowRef, toRefs, watch } from 'vue';
+import { AgGridTheme } from '../../aggrid';
 import PlAgCsvExporter from '../PlAgCsvExporter/PlAgCsvExporter.vue';
-import {
-  PlAgGridColumnManager,
-} from '../PlAgGridColumnManager';
+import { PlAgGridColumnManager } from '../PlAgGridColumnManager';
+import type { PlDataTableFiltersSettings } from '../PlTableFilters';
+import PlTableFiltersV2 from '../PlTableFilters/PlTableFiltersV2.vue';
+import PlAgDataTableSheets from './PlAgDataTableSheets.vue';
 import PlOverlayLoading from './PlAgOverlayLoading.vue';
 import PlOverlayNoRows from './PlAgOverlayNoRows.vue';
 import PlAgRowCount from './PlAgRowCount.vue';
-import PlAgDataTableSheets from './PlAgDataTableSheets.vue';
-import {
-  focusRow,
-  makeOnceTracker,
-} from './sources/focus-row';
-import {
-  autoSizeRowNumberColumn,
-  PlAgDataTableRowNumberColId,
-} from './sources/row-number';
-import type {
-  PlAgCellButtonAxisParams,
-} from './sources/table-source-v2';
-import {
-  calculateGridOptions,
-} from './sources/table-source-v2';
+import { focusRow, makeOnceTracker } from './sources/focus-row';
+import { autoSizeRowNumberColumn, PlAgDataTableRowNumberColId } from './sources/row-number';
+import type { PlAgCellButtonAxisParams } from './sources/table-source-v2';
+import { calculateGridOptions } from './sources/table-source-v2';
+import { useTableState } from './sources/table-state-v2';
 import type {
   PlAgDataTableV2Controller,
   PlAgDataTableV2Row,
@@ -68,21 +44,14 @@ import type {
   PlAgOverlayNoRowsParams,
   PlDataTableSettingsV2,
   PlDataTableSheetsSettings,
-  PlTableLabeledSelectionModel,
   PlTableRowIdJson,
 } from './types';
-import {
-  useTableState,
-} from './sources/table-state-v2';
-import type { PlDataTableFiltersSettings } from '../PlTableFilters';
-import PlTableFiltersV2 from '../PlTableFilters/PlTableFiltersV2.vue';
 import { watchCached } from '@milaboratories/uikit';
 
 const tableState = defineModel<PlDataTableStateV2>({
   required: true,
 });
 const selection = defineModel<PlSelectionModel>('selection');
-const selectionLabeled = defineModel<PlTableLabeledSelectionModel>('selectionLabeled');
 const props = defineProps<{
   /** Required component settings */
   settings: Readonly<PlDataTableSettingsV2>;
@@ -184,10 +153,10 @@ const firstDataRenderedTracker = makeOnceTracker<GridApi<PlAgDataTableV2Row>>();
 const gridOptions = shallowRef<GridOptions<PlAgDataTableV2Row>>({
   animateRows: false,
   suppressColumnMoveAnimation: true,
-  cellSelection: !selection.value && !selectionLabeled.value,
+  cellSelection: !selection.value,
   initialState: gridState.value,
   autoSizeStrategy: { type: 'fitCellContents' },
-  rowSelection: selection.value || selectionLabeled.value
+  rowSelection: selection.value
     ? {
         mode: 'multiRow',
         selectAll: 'all',
@@ -198,15 +167,11 @@ const gridOptions = shallowRef<GridOptions<PlAgDataTableV2Row>>({
       }
     : undefined,
   onSelectionChanged: (event) => {
-    const state = event.api.getServerSideSelectionState();
     if (selection.value) {
-      const selectedKeys = state?.toggledNodes?.map((nodeId) => parseJson(nodeId as PlTableRowIdJson).axesKey) ?? [];
+      const state = event.api.getServerSideSelectionState();
+      const selectedKeys = state?.toggledNodes?.map((nodeId) => parseJson(nodeId as PlTableRowIdJson)) ?? [];
       selection.value = { ...selection.value, selectedKeys };
     }
-    if (selectionLabeled.value) {
-      const selectedLabeledKeys = state?.toggledNodes?.map((nodeId) => parseJson(nodeId as PlTableRowIdJson).labeled) ?? [];
-      selectionLabeled.value = { ...selectionLabeled.value, selectedLabeledKeys };
-    }
   },
   onRowDoubleClicked: (event) => {
     if (event.data && event.data.axesKey) emit('rowDoubleClicked', event.data.axesKey);
@@ -385,12 +350,6 @@ watchCached(
           selectedKeys: [],
         };
       }
-      if (selectionLabeled.value) {
-        selectionLabeled.value = {
-          spec: [],
-          selectedLabeledKeys: [],
-        };
-      }
     } else {
       const isColDef = (def: ColDef | ColGroupDef): def is ColDef =>
         !('children' in def);
@@ -415,19 +374,6 @@ watchCached(
           axesSpec,
         };
       }
-      if (selectionLabeled.value) {
-        const spec = columns
-          .reduce((acc, column) => {
-            if (column.source.type === 'axis') {
-              acc.push(column.labeled);
-            }
-            return acc;
-          }, [] as PTableColumnSpec[]);
-        selectionLabeled.value = {
-          ...selectionLabeled.value,
-          spec,
-        };
-      }
     }
   },
   { immediate: true },
@@ -460,7 +406,7 @@ watch(
           columnDefs: undefined,
           serverSideDatasource: undefined,
         });
-        if (selection.value || selectionLabeled.value) {
+        if (selection.value) {
           gridApi.setServerSideSelectionState({
             selectAll: false,
             toggledNodes: [],
@@ -478,7 +424,7 @@ watch(
             notReady: false,
           } satisfies PlAgOverlayLoadingParams,
         });
-        if (selection.value || selectionLabeled.value) {
+        if (selection.value) {
           gridApi.setServerSideSelectionState({
             selectAll: false,
             toggledNodes: [],

package/src/components/PlAgDataTable/sources/table-source-v2.ts

@@ -1,3 +1,5 @@
+import type {
+  PTableColumnSpecColumn } from '@platforma-sdk/model';
 import {
   canonicalizeJson,
   getAxisId,
@@ -15,6 +17,7 @@ import {
   type PlTableColumnId,
   type PlTableColumnIdJson,
   isLabelColumn as isLabelColumnSpec,
+  isColumnHidden,
 } from '@platforma-sdk/model';
 import type {
   CellStyle,
@@ -39,7 +42,7 @@ import { getColumnRenderingSpec } from './value-rendering';
 import type { Ref } from 'vue';
 import { isJsonEqual } from '@milaboratories/helpers';
 
-export function isLabelColumn(column: PTableColumnSpec) {
+export function isLabelColumn(column: PTableColumnSpec): column is PTableColumnSpecColumn {
   return column.type === 'column' && isLabelColumnSpec(column.spec);
 }
 
@@ -48,7 +51,6 @@ function columns2rows(
   fields: number[],
   columns: PTableVector[],
   axes: number[],
-  labeledAxes: number[],
   resultMapping: number[],
 ): PlAgDataTableV2Row[] {
   const rowData: PlAgDataTableV2Row[] = [];
@@ -58,15 +60,7 @@ function columns2rows(
         pTableValue(columns[resultMapping[iAxis]], iRow),
       );
     });
-    const labeled = labeledAxes.map((iAxis) => {
-      return mapPTableValueToAxisKey(
-        pTableValue(columns[resultMapping[iAxis]], iRow),
-      );
-    });
-    const id = canonicalizeJson<PlTableRowId>({
-      axesKey,
-      labeled,
-    });
+    const id = canonicalizeJson<PlTableRowId>(axesKey);
     const row: PlAgDataTableV2Row = { id, axesKey };
     fields.forEach((field, iCol) => {
       row[field.toString() as `${number}`] = resultMapping[iCol] === -1
@@ -118,18 +112,31 @@ export async function calculateGridOptions({
   if (numberOfAxes === -1) numberOfAxes = specs.length;
 
   // column indices in the specs array that we are going to process
-  const indices = [...specs.keys()]
+  const indices = specs.keys()
     .filter(
-      (i) =>
-        !sheets.some(
-          (sheet) =>
-            isJsonEqual(getAxisId(sheet.axis), specs[i].id)
-            || (specs[i].type === 'column'
-              && specs[i].spec.name === 'pl7.app/label'
-              && specs[i].spec.axesSpec.length === 1
-              && isJsonEqual(getAxisId(sheet.axis), getAxisId(specs[i].spec.axesSpec[0]))),
-        ),
+      (i) => {
+        const spec = specs[i];
+        switch (spec.type) {
+          case 'axis':
+          {
+            return !sheets.some(
+              (sheet) => isJsonEqual(getAxisId(sheet.axis), spec.id),
+            );
+          }
+          case 'column':
+          {
+            if (isLabelColumnSpec(spec.spec)) {
+              return !sheets.some(
+                (sheet) => isJsonEqual(getAxisId(sheet.axis), getAxisId(spec.spec.axesSpec[0])),
+              );
+            } else {
+              return !isColumnHidden(spec.spec);
+            }
+          }
+        }
+      },
     )
+    .toArray()
     .sort((a, b) => {
       if (specs[a].type !== specs[b].type) return specs[a].type === 'axis' ? -1 : 1;
 
@@ -202,13 +209,6 @@ export async function calculateGridOptions({
       }
       return r;
     });
-  const labeledAxes: number[] = fields
-    .reduce((acc, field, index) => {
-      if (specs[field].type === 'axis') {
-        acc.push(allIndices.indexOf(indices[index]));
-      }
-      return acc;
-    }, [] as number[]);
 
   const requestIndices: number[] = [];
   const resultMapping: number[] = [];
@@ -260,7 +260,7 @@ export async function calculateGridOptions({
               length,
             });
             if (stateGeneration !== generation.value || params.api.isDestroyed()) return params.fail();
-            rowData = columns2rows(fields, data, axes, labeledAxes, resultMapping);
+            rowData = columns2rows(fields, data, axes, resultMapping);
           }
         }
 

package/src/components/PlAgDataTable/types.ts

@@ -24,9 +24,7 @@ export type PlDataTableFilterConfig = {
   default?: PlTableFilter;
 };
 
-/** Data table V2 settings */
-export type PlDataTableSettingsV2 =
-(
+export type PlDataTableSettingsV2Base =
   | { sourceId: null }
   | {
     /** Unique source id for state caching */
@@ -35,8 +33,10 @@ export type PlDataTableSettingsV2 =
     sheets: PlDataTableSheet[];
     /** Result of `createPlDataTableV2` */
     model: PlDataTableModel | undefined;
-  }
-) & {
+  };
+
+/** Data table V2 settings */
+export type PlDataTableSettingsV2 = PlDataTableSettingsV2Base & {
   /** Callback configuring filters for the table */
   filtersConfig: (info: {
     sourceId: string;
@@ -44,45 +44,41 @@ export type PlDataTableSettingsV2 =
   }) => PlDataTableFilterConfig;
 };
 
-type OptionsAdvanced<T> = {
-  /**
-   * Block property (such as inputAnchor) used to produce the data source.
-   * Mandatory for cases when the table can change without block run.
-   * Skip when the table is changed only after block run.
-   * Ask developers for help if you don't know what to set here.
-   */
-  sourceId: MaybeRefOrGetter<T | undefined>;
+type OptionsBasic = {
   /** Block output created by `createPlDataTableV2` */
   model: MaybeRefOrGetter<PlDataTableModel | undefined>;
   /**
-   * Sheets for partitioned data sources.
-   * Do not set if data source is never partitioned.
-   */
+    * Sheets for partitioned data sources.
+    * Do not set if data source is never partitioned.
+    */
   sheets?: MaybeRefOrGetter<PlDataTableSheet[] | undefined>;
+};
+
+type OptionsSimple = OptionsBasic & {
   /**
-   * Callback configuring filters for the table.
-   * If not provided, filtering will be disabled.
-   * Parameter `sourceId` should be compared using `isJsonEqual` from `@milaboratories/helpers`.
-   */
+    * Callback configuring filters for the table.
+    * If not provided, filtering will be disabled.
+    */
   filtersConfig?: (info: {
-    sourceId: JsonCompatible<T>;
     column: PTableColumnSpec;
   }) => PlDataTableFilterConfig;
 };
 
-type OptionsSimple = {
-  /** Block output created by `createPlDataTableV2` */
-  model: MaybeRefOrGetter<PlDataTableModel | undefined>;
+type OptionsAdvanced<T> = OptionsBasic & {
   /**
-   * Sheets for partitioned data sources.
-   * Do not set if data source is never partitioned.
-   */
-  sheets?: MaybeRefOrGetter<PlDataTableSheet[] | undefined>;
+    * Block property (such as inputAnchor) used to produce the data source.
+    * Mandatory for cases when the table can change without block run.
+    * Skip when the table is changed only after block run.
+    * Ask developers for help if you don't know what to set here.
+    */
+  sourceId: MaybeRefOrGetter<T | undefined>;
   /**
-   * Callback configuring filters for the table.
-   * If not provided, filtering will be disabled.
-   */
+    * Callback configuring filters for the table.
+    * If not provided, filtering will be disabled.
+    * Parameter `sourceId` should be compared using `isJsonEqual` from `@milaboratories/helpers`.
+    */
   filtersConfig?: (info: {
+    sourceId: JsonCompatible<T>;
     column: PTableColumnSpec;
   }) => PlDataTableFilterConfig;
 };
@@ -109,62 +105,51 @@ export function usePlDataTableSettingsV2<T>(options: OptionsAdvanced<T> | Option
     : () => ({});
   return computed(() => {
     const modelValue = toValue(options.model);
+    let settingsBase: PlDataTableSettingsV2Base;
     if ('sourceId' in options) {
       const sourceIdValue = deepClone(toValue(options.sourceId));
       if (options.sheets) {
         const sheetsValue = deepClone(toValue(options.sheets));
-        return sourceIdValue && sheetsValue
+        settingsBase = sourceIdValue && sheetsValue
           ? {
               sourceId: canonicalize(sourceIdValue)!,
               sheets: sheetsValue,
               model: modelValue,
-              filtersConfig: filtersConfigValue,
             }
-          : {
-              sourceId: null,
-              filtersConfig: filtersConfigValue,
-            };
+          : { sourceId: null };
       } else {
-        return sourceIdValue
+        settingsBase = sourceIdValue
           ? {
               sourceId: canonicalize(sourceIdValue)!,
               sheets: [],
               model: modelValue,
-              filtersConfig: filtersConfigValue,
             }
-          : {
-              sourceId: null,
-              filtersConfig: filtersConfigValue,
-            };
+          : { sourceId: null };
       }
     } else {
       if (options.sheets) {
         const sheetsValue = toValue(options.sheets);
-        return sheetsValue
+        settingsBase = sheetsValue
           ? {
               sourceId: canonicalize('static')!,
               sheets: sheetsValue,
               model: modelValue,
-              filtersConfig: filtersConfigValue,
             }
-          : {
-              sourceId: null,
-              filtersConfig: filtersConfigValue,
-            };
+          : { sourceId: null };
       } else {
-        return modelValue
+        settingsBase = modelValue
           ? {
               sourceId: canonicalize('static')!,
               sheets: [],
               model: modelValue,
-              filtersConfig: filtersConfigValue,
             }
-          : {
-              sourceId: null,
-              filtersConfig: filtersConfigValue,
-            };
+          : { sourceId: null };
       }
     }
+    return {
+      ...settingsBase,
+      filtersConfig: filtersConfigValue,
+    };
   });
 };
 
@@ -193,14 +178,9 @@ export type PlAgDataTableV2Controller = {
   focusRow: (rowKey: PTableKey) => Promise<void>;
 };
 
-export type PlTableRowId = {
-  /** Axes values */
-  axesKey: PTableKey;
-  /** Axes key where values of labeled axes are resolved to corresponding labels */
-  labeled: PTableKey;
-};
+export type PlTableRowId = PTableKey;
 
-export type PlTableRowIdJson = CanonicalizedJson<PlTableRowId>;
+export type PlTableRowIdJson = CanonicalizedJson<PTableKey>;
 
 /** PlAgDataTableV2 row */
 export type PlAgDataTableV2Row = {
@@ -212,14 +192,6 @@ export type PlAgDataTableV2Row = {
   [field: `${number}`]: PTableValue | PTableHidden;
 };
 
-/** PlSelectionModel with labeled axes replaced by label columns */
-export type PlTableLabeledSelectionModel = {
-  /** Specs for valuess in {@link PTableKey} */
-  spec: PTableColumnSpec[];
-  /** Row keys (arrays of axes values) of selected rows */
-  selectedLabeledKeys: PTableKey[];
-};
-
 export type PlAgOverlayLoadingParams = {
   /**
    * Required flag, that shows catInBag icon with message if `true`, shows PlSplash component if `false`.

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

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { randomInt } from '@milaboratories/helpers';
+import {
+  PlBtnGhost,
+  PlBtnSecondary,
+  PlEditableTitle,
+  PlElementList,
+  PlSidebarItem,
+} from '@milaboratories/uikit';
+import type { AnnotationScriptUi } from '@platforma-sdk/model';
+
+// Models
+const annotation = defineModel<AnnotationScriptUi>('annotation', { required: true });
+const selectedStepId = defineModel<undefined | number>('selectedStepId');
+// Emits
+const emits = defineEmits<{
+  (e: 'delete-schema'): void;
+}>();
+// Actions
+function handleAddStep() {
+  const id = randomInt();
+  annotation.value.steps.push({
+    id,
+    label: `Filter #${annotation.value.steps.length + 1}`,
+    filter: {
+      type: 'and',
+      filters: [],
+    },
+  });
+  selectedStepId.value = id;
+};
+</script>
+
+<template>
+  <PlSidebarItem>
+    <template #header-content>
+      <PlEditableTitle
+        v-model="annotation.title"
+        :max-length="40"
+        max-width="600px"
+        placeholder="Annotation Name"
+        :autofocus="annotation.title.length === 0"
+      />
+    </template>
+    <template v-if="annotation" #body-content>
+      <div :class="$style.root">
+        <PlBtnSecondary icon="add" @click="handleAddStep">
+          Add annotation
+        </PlBtnSecondary>
+
+        <span :class="$style.tip">Lower annotations override the ones above. Rearrange them by dragging.</span>
+
+        <PlElementList
+          v-model:items="annotation.steps"
+          :get-item-key="(item) => item.id!"
+          :is-active="(item) => item.id === selectedStepId"
+          :item-class="$style.stepItem"
+          :class="$style.steps"
+          @item-click="(item) => selectedStepId = item.id"
+        >
+          <template #item-title="{ item }">
+            {{ item.label }}
+          </template>
+        </PlElementList>
+      </div>
+    </template>
+    <template #footer-content>
+      <PlBtnGhost
+        icon="delete-bin"
+        reverse
+        :disabled="annotation.steps.length === 0"
+        @click.stop="emits('delete-schema')"
+      >
+        Delete Schema
+      </PlBtnGhost>
+    </template>
+  </PlSidebarItem>
+</template>
+
+<style lang="scss" module>
+@use '@milaboratories/uikit/styles/variables' as *;
+
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.tip {
+  margin-top: 12px;
+  color: var(--txt-03);
+}
+
+.steps {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.stepItem {
+  cursor: pointer;
+}
+</style>