@platforma-sdk/ui-vue 1.10.0 → 1.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.10.0",
+  "version": "1.10.2",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -38,7 +38,7 @@
     "@ag-grid-enterprise/side-bar": "^32.3.3",
     "@ag-grid-enterprise/column-tool-panel": "^32.3.3",
     "@milaboratories/uikit": "^2.2.3",
-    "@platforma-sdk/model": "^1.10.0"
+    "@platforma-sdk/model": "^1.10.2"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",

package/src/components/PlAgDataTable/PlAgDataTable.vue

@@ -9,6 +9,8 @@ import type {
   ManagedGridOptions,
   SortState,
   StateUpdatedEvent,
+  ColDef,
+  ColGroupDef,
 } from '@ag-grid-community/core';
 import { ModuleRegistry } from '@ag-grid-community/core';
 import { AgGridVue } from '@ag-grid-community/vue3';
@@ -18,7 +20,7 @@ import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
 import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
 import { SideBarModule } from '@ag-grid-enterprise/side-bar';
 import { PlDropdownLine } from '@milaboratories/uikit';
-import type { AxisId, PlDataTableState, PTableRecordFilter, PTableSorting } from '@platforma-sdk/model';
+import type { AxisId, PlDataTableState, PTableColumnSpec, PTableRecordFilter, PTableSorting } from '@platforma-sdk/model';
 import canonicalize from 'canonicalize';
 import * as lodash from 'lodash';
 import { computed, ref, shallowRef, toRefs, watch } from 'vue';
@@ -26,7 +28,8 @@ import { AgGridTheme, useWatchFetch } from '../../lib';
 import PlOverlayLoading from './PlAgOverlayLoading.vue';
 import PlOverlayNoRows from './PlAgOverlayNoRows.vue';
 import { updateXsvGridOptions } from './sources/file-source';
-import { enrichJoinWithLabelColumns, makeSheets, parseColId, PlAgDataTableRow, updatePFrameGridOptions } from './sources/table-source';
+import type { PlAgDataTableRow } from './sources/table-source';
+import { enrichJoinWithLabelColumns, makeSheets, parseColId, updatePFrameGridOptions } from './sources/table-source';
 import type { PlDataTableSettings, PlDataTableSheet } from './types';
 
 ModuleRegistry.registerModules([
@@ -38,15 +41,15 @@ ModuleRegistry.registerModules([
   ColumnsToolPanelModule,
 ]);
 
-const emit = defineEmits<{
-  onRowDoubleClicked: [key: unknown[]]
-}>()
-
 const tableState = defineModel<PlDataTableState>({ default: { gridState: {} } });
 const props = defineProps<{
   settings: Readonly<PlDataTableSettings>;
 }>();
 const { settings } = toRefs(props);
+const emit = defineEmits<{
+  onRowDoubleClicked: [key: unknown[]];
+  columnsChanged: [columns: PTableColumnSpec[]];
+}>();
 
 watch(
   () => settings.value,
@@ -118,14 +121,15 @@ const sheets = useWatchFetch<PlDataTableSettings['sourceType'], PlDataTableSheet
 function makeSorting(state?: SortState): PTableSorting[] | undefined {
   if (settings.value.sourceType !== 'ptable' && settings.value.sourceType !== 'pframe') return undefined;
   return (
-    state?.sortModel.map(
-      (item) =>
-        ({
-          column: parseColId(item.colId),
-          ascending: item.sort === 'asc',
-          naAndAbsentAreLeastValues: true,
-        }) as PTableSorting,
-    ) ?? []
+    state?.sortModel.map((item) => {
+      const { spec, ...column } = parseColId(item.colId);
+      const _ = spec;
+      return {
+        column,
+        ascending: item.sort === 'asc',
+        naAndAbsentAreLeastValues: true,
+      } as PTableSorting;
+    }) ?? []
   );
 }
 
@@ -169,13 +173,13 @@ function makeFilters(sheetsState: Record<string, string | number>): PTableRecord
       type: 'bySingleColumn',
       column: sheet.column
         ? {
-          type: 'column',
-          id: sheet.column,
-        }
+            type: 'column',
+            id: sheet.column,
+          }
         : {
-          type: 'axis',
-          id: sheet.axis,
-        },
+            type: 'axis',
+            id: sheet.axis,
+          },
       predicate: {
         operator: 'Equal',
         reference: sheetsState[makeSheetId(sheet.axis)],
@@ -252,8 +256,7 @@ const gridOptions = ref<GridOptions<PlAgDataTableRow>>({
     event.api.autoSizeAllColumns();
   },
   onRowDoubleClicked: (value) => {
-    if (value.data)
-      emit("onRowDoubleClicked", value.data!.key)
+    if (value.data) emit('onRowDoubleClicked', value.data.key);
   },
   defaultColDef: {
     suppressHeaderMenuButton: true,
@@ -358,6 +361,15 @@ watch(
   (options, oldOptions) => {
     if (!oldOptions) return;
     if (options.rowModelType != oldOptions.rowModelType) ++reloadKey.value;
+    if (!lodash.isEqual(options.columnDefs, oldOptions.columnDefs) && options.columnDefs) {
+      const idColDef = (def: ColDef | ColGroupDef): def is ColDef => !('children' in def);
+      const colDefs: ColDef[] | undefined = options.columnDefs?.filter(idColDef);
+      const columns = colDefs
+        ?.map((def) => def.colId)
+        .filter((colId) => colId !== undefined)
+        .map((colId) => parseColId(colId));
+      emit('columnsChanged', columns ?? []);
+    }
   },
 );
 
@@ -438,13 +450,24 @@ watch(
   <div class="ap-ag-data-table-container">
     <Transition name="ap-ag-data-table-sheets-transition">
       <div v-if="sheets.value && sheets.value.length > 0" class="ap-ag-data-table-sheets">
-        <PlDropdownLine v-for="(sheet, i) in sheets.value" :key="i" :model-value="sheetsState[makeSheetId(sheet.axis)]"
+        <PlDropdownLine
+          v-for="(sheet, i) in sheets.value"
+          :key="i"
+          :model-value="sheetsState[makeSheetId(sheet.axis)]"
           :options="sheet.options"
-          @update:model-value="(newValue) => onSheetChanged(makeSheetId(sheet.axis), newValue)" />
+          @update:model-value="(newValue) => onSheetChanged(makeSheetId(sheet.axis), newValue)"
+        />
       </div>
     </Transition>
-    <AgGridVue :key="reloadKey" :theme="AgGridTheme" class="ap-ag-data-table-grid" :grid-options="gridOptions"
-      @grid-ready="onGridReady" @state-updated="onStateUpdated" @grid-pre-destroyed="onGridPreDestroyed" />
+    <AgGridVue
+      :key="reloadKey"
+      :theme="AgGridTheme"
+      class="ap-ag-data-table-grid"
+      :grid-options="gridOptions"
+      @grid-ready="onGridReady"
+      @state-updated="onStateUpdated"
+      @grid-pre-destroyed="onGridPreDestroyed"
+    />
   </div>
 </template>
 

package/src/components/PlAgDataTable/PlTableFilters.vue

@@ -0,0 +1,471 @@
+<script lang="ts" setup>
+import type { ListOption } from '@milaboratories/uikit';
+import { PlCheckbox, PlDropdown, PlNumberField, PlTextField, PlToggleSwitch, Slider } from '@milaboratories/uikit';
+import { computed, reactive, toRefs, watch } from 'vue';
+import canonicalize from 'canonicalize';
+import type {
+  PlTableFiltersModel,
+  PTableRecordFilter,
+  SingleValuePredicate,
+  PlTableFilterType,
+  PlTableFilterNumberType,
+  PlTableFilterStringType,
+  PlTableFilter,
+  PTableColumnSpec,
+  PTableColumnId,
+} from '@platforma-sdk/model';
+import * as lodash from 'lodash';
+import type { PlTableFiltersDefault, PlTableFiltersRestriction } from './types';
+
+const model = defineModel<PlTableFiltersModel>({ required: true });
+const props = defineProps<{
+  columns: Readonly<PTableColumnSpec[]>;
+  restrictions?: Readonly<PlTableFiltersRestriction[]>;
+  defaults?: Readonly<PlTableFiltersDefault[]>;
+}>();
+const { columns, restrictions, defaults } = toRefs(props);
+
+const makeColumnId = (column: PTableColumnId | PTableColumnSpec): string => canonicalize(column.id)!;
+const columnsWithIds = computed(() => {
+  return columns.value
+    .filter((column) => {
+      const type = column.type;
+      switch (type) {
+        case 'axis':
+          return column.spec.type !== 'Bytes';
+        case 'column':
+          return column.spec.valueType !== 'Bytes';
+        default:
+          throw Error(`unsupported data type: ${type satisfies never}`);
+      }
+    })
+    .map((column) => ({
+      column,
+      id: makeColumnId(column),
+    }));
+});
+const restrictionsMap = computed(() => {
+  const restrictionsValue = restrictions.value ?? [];
+  const map: Record<string, PlTableFilterType[]> = {};
+  for (const { column, id } of columnsWithIds.value) {
+    const entry = lodash.find(restrictionsValue, (entry) => lodash.isEqual(entry.column.id, column.id));
+    if (entry !== undefined) {
+      map[id] = entry.allowedFilterTypes;
+    }
+  }
+  return map;
+});
+const defaultsMap = computed(() => {
+  const defaultsValue = defaults.value ?? [];
+  const map: Record<string, PlTableFilter> = {};
+  for (const { column, id } of columnsWithIds.value) {
+    const entry = lodash.find(defaultsValue, (entry) => lodash.isEqual(entry.column.id, column.id));
+    if (entry !== undefined) {
+      map[id] = entry.default;
+    }
+  }
+  return map;
+});
+
+const makeState = (state?: Record<string, PlTableFilter>): Record<string, PlTableFilter> => {
+  if (state !== undefined) return state;
+  return defaultsMap.value;
+};
+const reactiveModel = reactive({ state: makeState(model.value.state) });
+watch(
+  () => model.value,
+  (model) => {
+    if (!lodash.isEqual(reactiveModel.state, model.state)) {
+      reactiveModel.state = makeState(model.state);
+    }
+  },
+);
+
+watch(
+  () => columnsWithIds.value,
+  (columnsWithIds) => {
+    const currentState = reactiveModel.state ?? {};
+    const newState: Record<string, PlTableFilter> = {};
+    for (const { id } of columnsWithIds) {
+      if (currentState[id] !== undefined) newState[id] = currentState[id];
+    }
+    reactiveModel.state = newState;
+  },
+  { immediate: true },
+);
+
+const getFilterLabel = (type: PlTableFilterType): string => {
+  switch (type) {
+    case 'isNotNA':
+      return 'Is not NA';
+    case 'isNA':
+      return 'Is NA';
+    case 'number_equals':
+    case 'string_equals':
+      return 'Equals';
+    case 'number_notEquals':
+    case 'string_notEquals':
+      return 'Not equals';
+    case 'number_greaterThen':
+      return 'Greater then';
+    case 'number_greaterThenOrEqualTo':
+      return 'Greater then or equal to';
+    case 'number_lessThen':
+      return 'Less then';
+    case 'number_lessThenOrEqualTo':
+      return 'Less then or equal to';
+    case 'number_between':
+      return 'Between';
+    case 'string_contains':
+      return 'Contains';
+    case 'string_doesNotContain':
+      return 'Does not contain';
+    case 'string_matches':
+      return 'Matches';
+    case 'string_doesNotMatch':
+      return 'Does not match';
+    case 'string_containsFuzzyMatch':
+      return 'Contains fuzzy match';
+    default:
+      throw Error(`unsupported filter type: ${type satisfies never}`);
+  }
+};
+
+const filterTypesNumber: PlTableFilterNumberType[] = [
+  'isNotNA',
+  'isNA',
+  'number_equals',
+  'number_notEquals',
+  'number_greaterThen',
+  'number_greaterThenOrEqualTo',
+  'number_lessThen',
+  'number_lessThenOrEqualTo',
+  'number_between',
+] as const;
+const filterTypesString: PlTableFilterStringType[] = [
+  'isNotNA',
+  'isNA',
+  'string_equals',
+  // 'string_notEquals',
+  'string_contains',
+  // 'string_doesNotContain',
+  'string_matches',
+  // 'string_doesNotMatch',
+  'string_containsFuzzyMatch',
+] as const;
+const filterOptions = computed(() => {
+  const restrictionsMapValue = restrictionsMap.value;
+  const map: Record<string, ListOption<PlTableFilterType>[]> = {};
+  for (const { column, id } of columnsWithIds.value) {
+    const valueType = column.type === 'column' ? column.spec.valueType : column.spec.type;
+    let types: PlTableFilterType[] = valueType === 'String' ? filterTypesString : filterTypesNumber;
+
+    const restrictionsEntry = restrictionsMapValue[id];
+    if (restrictionsEntry !== undefined) {
+      types = types.filter((type) => restrictionsEntry.includes(type));
+    }
+
+    map[id] = types.map((type) => ({
+      value: type,
+      text: getFilterLabel(type),
+    }));
+  }
+  return map;
+});
+
+const getFilterReference = (filter: PlTableFilter): undefined | number | string => {
+  const type = filter.type;
+  switch (type) {
+    case 'isNotNA':
+    case 'isNA':
+      return undefined;
+    case 'number_equals':
+    case 'number_notEquals':
+    case 'number_greaterThen':
+    case 'number_greaterThenOrEqualTo':
+    case 'number_lessThen':
+    case 'number_lessThenOrEqualTo':
+      return filter.reference;
+    case 'number_between':
+      return filter.lowerBound;
+    case 'string_equals':
+    case 'string_notEquals':
+    case 'string_contains':
+    case 'string_doesNotContain':
+    case 'string_matches':
+    case 'string_doesNotMatch':
+    case 'string_containsFuzzyMatch':
+      return filter.reference;
+    default:
+      throw Error(`unsupported filter type: ${type satisfies never}`);
+  }
+};
+const getFilterDefault = (type: PlTableFilterType, reference?: undefined | number | string): PlTableFilter => {
+  switch (type) {
+    case 'isNotNA':
+    case 'isNA':
+      return { type };
+    case 'number_equals':
+    case 'number_notEquals':
+    case 'number_greaterThen':
+    case 'number_greaterThenOrEqualTo':
+    case 'number_lessThen':
+    case 'number_lessThenOrEqualTo':
+      return { type, reference: typeof reference === 'number' ? reference : 0 };
+    case 'number_between':
+      return {
+        type,
+        lowerBound: typeof reference === 'number' ? reference : 0,
+        includeLowerBound: true,
+        upperBound: 100,
+        includeUpperBound: false,
+      };
+    case 'string_equals':
+    case 'string_notEquals':
+    case 'string_contains':
+    case 'string_doesNotContain':
+    case 'string_matches':
+    case 'string_doesNotMatch':
+      return { type, reference: typeof reference === 'string' ? reference : '' };
+    case 'string_containsFuzzyMatch':
+      return {
+        type,
+        reference: typeof reference === 'string' ? reference : '',
+        maxEdits: 2,
+        substitutionsOnly: false,
+        wildcard: undefined,
+      };
+    default:
+      throw Error(`unsupported filter type: ${type satisfies never}`);
+  }
+};
+const updateColumnFilter = (columnId: string, type: PlTableFilterType): void => {
+  const prevFilter = reactiveModel.state![columnId];
+  reactiveModel.state![columnId] = getFilterDefault(type, getFilterReference(prevFilter));
+};
+const onFilterActiveChanged = (columnId: string, checked: boolean) => {
+  if (checked) {
+    reactiveModel.state![columnId] = defaultsMap.value[columnId] ?? getFilterDefault(filterOptions.value[columnId][0].value);
+  } else {
+    delete reactiveModel.state![columnId];
+  }
+};
+
+const makeWildcardOptions = (reference: string) => {
+  const chars = lodash.uniq(reference);
+  chars.sort();
+  return chars.map((char) => ({
+    value: char,
+    text: char,
+  }));
+};
+
+const makePredicate = (filter: PlTableFilter): SingleValuePredicate => {
+  const type = filter.type;
+  switch (type) {
+    case 'isNotNA':
+      return {
+        operator: 'Not',
+        operand: {
+          operator: 'IsNA',
+        },
+      };
+    case 'isNA':
+      return {
+        operator: 'IsNA',
+      };
+    case 'number_equals':
+    case 'string_equals':
+      return {
+        operator: 'Equal',
+        reference: filter.reference,
+      };
+    case 'number_notEquals':
+    case 'string_notEquals':
+      return {
+        operator: 'Not',
+        operand: {
+          operator: 'Equal',
+          reference: filter.reference,
+        },
+      };
+    case 'number_greaterThen':
+      return {
+        operator: 'Greater',
+        reference: filter.reference,
+      };
+    case 'number_greaterThenOrEqualTo':
+      return {
+        operator: 'GreaterOrEqual',
+        reference: filter.reference,
+      };
+    case 'number_lessThen':
+      return {
+        operator: 'Less',
+        reference: filter.reference,
+      };
+    case 'number_lessThenOrEqualTo':
+      return {
+        operator: 'LessOrEqual',
+        reference: filter.reference,
+      };
+    case 'number_between':
+      return {
+        operator: 'And',
+        operands: [
+          {
+            operator: filter.includeLowerBound ? 'GreaterOrEqual' : 'Greater',
+            reference: filter.lowerBound,
+          },
+          {
+            operator: filter.includeUpperBound ? 'LessOrEqual' : 'Less',
+            reference: filter.upperBound,
+          },
+        ],
+      };
+    case 'string_contains':
+      return {
+        operator: 'StringContains',
+        substring: filter.reference,
+      };
+    case 'string_doesNotContain':
+      return {
+        operator: 'Not',
+        operand: {
+          operator: 'StringContains',
+          substring: filter.reference,
+        },
+      };
+    case 'string_matches':
+      return {
+        operator: 'Matches',
+        regex: filter.reference,
+      };
+    case 'string_doesNotMatch':
+      return {
+        operator: 'Not',
+        operand: {
+          operator: 'Matches',
+          regex: filter.reference,
+        },
+      };
+    case 'string_containsFuzzyMatch':
+      return {
+        operator: 'StringContainsFuzzy',
+        reference: filter.reference,
+        maxEdits: filter.maxEdits,
+        substitutionsOnly: filter.substitutionsOnly,
+        wildcard: filter.wildcard,
+      };
+    default:
+      throw Error(`unsupported filter type: ${type satisfies never}`);
+  }
+};
+const makeFilters = (state: Record<string, PlTableFilter>): PTableRecordFilter[] => {
+  return columnsWithIds.value
+    .map(({ column, id }) => {
+      if (!(id in state)) return undefined;
+
+      const predicate = makePredicate(state[id]);
+      const { spec, ...columnId } = column;
+      const _ = spec;
+
+      return {
+        type: 'bySingleColumn',
+        column: columnId,
+        predicate,
+      } satisfies PTableRecordFilter;
+    })
+    .filter((entry) => entry !== undefined);
+};
+
+// Should this happen on Apply button click instead?
+watch(
+  () => reactiveModel,
+  (reactiveModel) => {
+    if (!lodash.isEqual(reactiveModel.state, model.value.state)) {
+      model.value = {
+        state: lodash.cloneDeep(reactiveModel.state),
+        filters: makeFilters(reactiveModel.state),
+      };
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+</script>
+
+<template>
+  <div v-for="({ column, id }, i) in columnsWithIds" :key="id">
+    <form v-if="filterOptions[id].length > 0" class="d-flex gap-10 flex-column">
+      <PlCheckbox :model-value="!!reactiveModel.state[id]" @update:model-value="(checked) => onFilterActiveChanged(id, checked)">
+        {{ column.spec.annotations?.['pl7.app/label']?.trim() ?? 'Unlabeled ' + column.type + ' ' + i.toString() }}
+      </PlCheckbox>
+      <div class="controls d-flex gap-10 flex-column" :class="{ open: !!reactiveModel.state[id] }">
+        <PlDropdown
+          v-if="reactiveModel.state[id]"
+          :model-value="reactiveModel.state[id]!.type"
+          :options="filterOptions[id]"
+          label="Predicate"
+          @update:model-value="(type) => updateColumnFilter(id, type!)"
+        />
+        <template
+          v-if="
+            reactiveModel.state[id]?.type === 'number_equals' ||
+            reactiveModel.state[id]?.type === 'number_notEquals' ||
+            reactiveModel.state[id]?.type === 'number_lessThen' ||
+            reactiveModel.state[id]?.type === 'number_lessThenOrEqualTo' ||
+            reactiveModel.state[id]?.type === 'number_greaterThen' ||
+            reactiveModel.state[id]?.type === 'number_greaterThenOrEqualTo'
+          "
+        >
+          <PlNumberField v-model="reactiveModel.state[id].reference" label="Reference value" />
+        </template>
+        <template v-if="reactiveModel.state[id]?.type === 'number_between'">
+          <PlNumberField v-model="reactiveModel.state[id].lowerBound" label="Lower bound" />
+          <PlToggleSwitch v-model="reactiveModel.state[id].includeLowerBound" label="Include lower bound" />
+          <PlNumberField v-model="reactiveModel.state[id].upperBound" label="Upper bound" />
+          <PlToggleSwitch v-model="reactiveModel.state[id].includeUpperBound" label="Include upper bound" />
+        </template>
+        <template
+          v-if="
+            reactiveModel.state[id]?.type === 'string_equals' ||
+            reactiveModel.state[id]?.type === 'string_notEquals' ||
+            reactiveModel.state[id]?.type === 'string_contains' ||
+            reactiveModel.state[id]?.type === 'string_doesNotContain' ||
+            reactiveModel.state[id]?.type === 'string_matches' ||
+            reactiveModel.state[id]?.type === 'string_doesNotMatch'
+          "
+        >
+          <PlTextField v-model="reactiveModel.state[id].reference" label="Reference value" />
+        </template>
+        <template v-if="reactiveModel.state[id]?.type === 'string_containsFuzzyMatch'">
+          <PlTextField v-model="reactiveModel.state[id].reference" label="Reference value" />
+          <Slider v-model="reactiveModel.state[id].maxEdits" :max="5" breakpoints label="Maximum nuber of substitutions and indels" />
+          <PlToggleSwitch v-model="reactiveModel.state[id].substitutionsOnly" label="Substitutions only" />
+          <PlDropdown
+            v-model="reactiveModel.state[id].wildcard"
+            :options="makeWildcardOptions(reactiveModel.state[id].reference)"
+            clearable
+            label="Wildcard symbol"
+          />
+        </template>
+      </div>
+    </form>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.controls {
+  max-height: 0;
+  transition: max-height 0.15s ease-out;
+  overflow: hidden;
+}
+.controls.open {
+  max-height: 500px;
+  transition: max-height 0.25s ease-in;
+  overflow: visible;
+}
+</style>