@platforma-sdk/ui-vue 1.13.18 → 1.14.1

package/src/components/PlTableFilters/filters_logic.ts

@@ -0,0 +1,344 @@
+import canonicalize from 'canonicalize';
+import type {
+  SingleValuePredicateV2,
+  PlTableFilterType,
+  PlTableFilterNumberType,
+  PlTableFilterStringType,
+  PlTableFilter,
+  PTableColumnSpec,
+  PTableColumnId,
+  PlTableFiltersStateEntry,
+  PlTableFilterColumnId,
+} from '@platforma-sdk/model';
+import * as lodash from 'lodash';
+
+export function makeColumnId(column: PTableColumnId | PTableColumnSpec): PlTableFilterColumnId {
+  return canonicalize(column.id)!;
+}
+
+export function 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_greaterThan':
+      return 'Greater than';
+    case 'number_greaterThanOrEqualTo':
+      return 'Greater than or equal to';
+    case 'number_lessThan':
+      return 'Less than';
+    case 'number_lessThanOrEqualTo':
+      return 'Less than 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}`);
+  }
+}
+
+export const filterTypesNumber: PlTableFilterNumberType[] = [
+  'isNotNA',
+  'isNA',
+  'number_equals',
+  'number_notEquals',
+  'number_greaterThan',
+  'number_greaterThanOrEqualTo',
+  'number_lessThan',
+  'number_lessThanOrEqualTo',
+  'number_between',
+] as const;
+
+export const filterTypesString: PlTableFilterStringType[] = [
+  'isNotNA',
+  'isNA',
+  'string_equals',
+  'string_notEquals',
+  'string_contains',
+  'string_doesNotContain',
+  'string_matches',
+  'string_doesNotMatch',
+  'string_containsFuzzyMatch',
+] as const;
+
+export function getColumnName(column: PTableColumnSpec, index: string | number) {
+  return column.spec.annotations?.['pl7.app/label']?.trim() ?? 'Unlabeled ' + column.type + ' ' + index.toString();
+}
+
+export function 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_greaterThan':
+    case 'number_greaterThanOrEqualTo':
+    case 'number_lessThan':
+    case 'number_lessThanOrEqualTo':
+      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}`);
+  }
+}
+
+export function getFilterDefault(type: PlTableFilterType, reference?: undefined | number | string): PlTableFilter {
+  switch (type) {
+    case 'isNotNA':
+    case 'isNA':
+      return { type };
+    case 'number_equals':
+    case 'number_notEquals':
+    case 'number_greaterThan':
+    case 'number_greaterThanOrEqualTo':
+    case 'number_lessThan':
+    case 'number_lessThanOrEqualTo':
+      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}`);
+  }
+}
+
+export function changeFilterType(filter: PlTableFiltersStateEntry, type: PlTableFilterType): PlTableFiltersStateEntry {
+  return {
+    columnId: filter.columnId,
+    filter: getFilterDefault(type, getFilterReference(filter.filter)),
+    disabled: filter.disabled,
+  };
+}
+
+export function parseNumber(column: PTableColumnSpec, value: string): number {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed)) throw Error('Model value is not a number.');
+
+  const type = column.type === 'column' ? column.spec.valueType : column.spec.type;
+  if ((type === 'Int' || type === 'Long') && !Number.isInteger(parsed)) throw Error('Model value is not an integer.');
+
+  const min = column.spec.annotations?.['pl7.app/min'];
+  if (min !== undefined) {
+    const minValue = Number(min);
+    if (Number.isFinite(minValue) && parsed < Number(min)) {
+      throw Error('Model value is too low.');
+    }
+  }
+
+  const max = column.spec.annotations?.['pl7.app/max'];
+  if (max !== undefined) {
+    const maxValue = Number(max);
+    if (Number.isFinite(maxValue) && parsed > Number(max)) {
+      throw Error('Model value is too high.');
+    }
+  }
+
+  return parsed;
+}
+
+export function parseString(column: PTableColumnSpec, value: string): string {
+  const alphabet = column.spec.domain?.['pl7.app/alphabet'] ?? column.spec.annotations?.['pl7.app/alphabet'];
+  if (alphabet === 'nucleotide' && !/^[AaTtGgCcNn]+$/.test(value)) throw Error('Model value is not a nucleotide.');
+  if (alphabet === 'aminoacid' && !/^[AaCcDdEeFfGgHhIiKkLlMmNnPpQqRrSsTtVvWwYyXx]+$/.test(value)) throw Error('Model value is not an aminoacid.');
+  return value;
+}
+
+export function parseRegex(value: string): string {
+  try {
+    new RegExp(value);
+    return value;
+  } catch (err: unknown) {
+    if (err instanceof SyntaxError) throw Error('Model value is not a regexp.');
+    throw err;
+  }
+}
+
+export function makeWildcardOptions(column: PTableColumnSpec, reference: string) {
+  const alphabet = column.spec.domain?.['pl7.app/alphabet'] ?? column.spec.annotations?.['pl7.app/alphabet'];
+  if (alphabet === 'nucleotide') {
+    return [
+      {
+        value: 'N',
+        text: 'N',
+      },
+    ];
+  }
+  if (alphabet === 'aminoacid') {
+    return [
+      {
+        value: 'X',
+        text: 'X',
+      },
+    ];
+  }
+
+  const chars = lodash.uniq(reference);
+  chars.sort();
+  return chars.map((char) => ({
+    value: char,
+    text: char,
+  }));
+}
+
+export function makePredicate(column: PTableColumnSpec, filter: PlTableFilter): SingleValuePredicateV2 {
+  const alphabetic =
+    (column.type === 'column' ? column.spec.valueType : column.spec.type) === 'String' &&
+    (column.spec.domain?.['pl7.app/alphabet'] ?? column.spec.annotations?.['pl7.app/alphabet']) !== undefined;
+  const type = filter.type;
+  switch (type) {
+    case 'isNotNA':
+      return {
+        operator: 'Not',
+        operand: {
+          operator: 'IsNA',
+        },
+      };
+    case 'isNA':
+      return {
+        operator: 'IsNA',
+      };
+    case 'number_equals':
+      return {
+        operator: 'Equal',
+        reference: filter.reference,
+      };
+    case 'string_equals':
+      return {
+        operator: alphabetic ? 'IEqual' : 'Equal',
+        reference: filter.reference as string,
+      };
+    case 'number_notEquals':
+      return {
+        operator: 'Not',
+        operand: {
+          operator: 'Equal',
+          reference: filter.reference,
+        },
+      };
+    case 'string_notEquals':
+      return {
+        operator: 'Not',
+        operand: {
+          operator: alphabetic ? 'IEqual' : 'Equal',
+          reference: filter.reference,
+        },
+      };
+    case 'number_greaterThan':
+      return {
+        operator: 'Greater',
+        reference: filter.reference,
+      };
+    case 'number_greaterThanOrEqualTo':
+      return {
+        operator: 'GreaterOrEqual',
+        reference: filter.reference,
+      };
+    case 'number_lessThan':
+      return {
+        operator: 'Less',
+        reference: filter.reference,
+      };
+    case 'number_lessThanOrEqualTo':
+      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: alphabetic ? 'StringIContains' : 'StringContains',
+        substring: filter.reference,
+      };
+    case 'string_doesNotContain':
+      return {
+        operator: 'Not',
+        operand: {
+          operator: alphabetic ? 'StringIContains' : '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: alphabetic ? 'StringIContainsFuzzy' : 'StringContainsFuzzy',
+        reference: filter.reference,
+        maxEdits: filter.maxEdits,
+        substitutionsOnly: filter.substitutionsOnly,
+        wildcard: filter.wildcard,
+      };
+    default:
+      throw Error(`unsupported filter type: ${type satisfies never}`);
+  }
+}

package/src/components/PlTableFilters/index.ts

@@ -0,0 +1 @@
+export { default as PlTableFilters } from './PlTableFilters.vue';

package/src/components/PlTableFilters/pl-table-filters.scss

@@ -0,0 +1,98 @@
+.pl-filter-manager {
+    $this: &;
+
+    &__add-btn {
+        height: 40px;
+        position: sticky;
+        bottom: -16px;
+        background-color: var(--bg-elevated-01);
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding-left: 12px;
+        padding-right: 12px;
+        border-radius: 6px;
+        border: 1px dashed var(--border-color-div-grey);
+        line-height: 0;
+        cursor: pointer;
+    }
+
+    &__add-btn-title {
+        flex-grow: 1;
+    }
+
+    &__header {
+        height: 40px;
+        padding-left: 12px;
+        padding-right: 12px;
+        cursor: pointer;
+    }
+
+    &__content {
+        max-height: 0;
+        overflow: hidden;
+        transition: all .2s ease-in-out;
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    &__expand-icon {
+        .mask-16 {
+            transition: all .15s ease-in-out;
+        }
+    }
+
+    &__toggle,
+    &__expand-icon,
+    &__delete {
+        line-height: 0;
+        cursor: pointer;
+    }
+
+    &__toggle,
+    &__delete {
+        .mask-24 {
+            background-color: var(--ic-02);
+        }
+    }
+
+
+    &__filter {
+        border-radius: 6px;
+        border: 1px solid var(--border-color-div-grey);
+        background-color: var(--bg-base-light);
+        transition: background-color .15s ease-in-out;
+        overflow: auto;
+    }
+
+    &__filter.open {
+        background-color: var(--bg-elevated-01);
+
+        #{$this}__content {
+            max-height: 1600px;
+            // overflow: auto;
+            padding: 24px;
+            transition: all .2s ease-in-out;
+        }
+
+        #{$this}__header {
+            background: linear-gradient(180deg, #EBFFEB 0%, #FFF 100%);
+        }
+
+        #{$this}__expand-icon {
+            .mask-16 {
+                transform: rotate(90deg);
+            }
+        }
+    }
+
+    &__revert-btn {
+        padding: 8px 14px;
+        border-radius: 6px;
+        cursor: pointer;
+    }
+
+    &__revert-btn:hover {
+        background-color: var(--btn-sec-hover-grey);
+    }
+}

package/src/lib.ts

@@ -1,12 +1,11 @@
 import './assets/ui.scss';
 import BlockLayout from './components/BlockLayout.vue';
 import PlAgDataTable from './components/PlAgDataTable/PlAgDataTable.vue';
-import PlTableFilters from './components/PlAgDataTable/PlTableFilters.vue';
 import PlAgOverlayLoading from './components/PlAgDataTable/PlAgOverlayLoading.vue';
 import PlAgOverlayNoRows from './components/PlAgDataTable/PlAgOverlayNoRows.vue';
 import ValueOrErrorsComponent from './components/ValueOrErrorsComponent.vue';
 
-export { BlockLayout, PlAgDataTable, PlTableFilters, PlAgOverlayLoading, PlAgOverlayNoRows, ValueOrErrorsComponent };
+export { BlockLayout, PlAgDataTable, PlAgOverlayLoading, PlAgOverlayNoRows, ValueOrErrorsComponent };
 
 export * from './components/PlAgCellFile';
 
@@ -16,6 +15,8 @@ export * from './components/PlAgTextAndButtonCell';
 
 export * from './components/PlAgGridColumnManager';
 
+export * from './components/PlTableFilters';
+
 export * from './defineApp';
 
 export * from './createModel';

package/dist/src/components/PlAgDataTable/PlTableFilters.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PlTableFilters.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/PlAgDataTable/PlTableFilters.vue"],"names":[],"mappings":"AAqjBA,OAAO,KAAK,EACV,mBAAmB,EAOnB,gBAAgB,EAEjB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EAAE,qBAAqB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAKhF,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;IACtC,YAAY,CAAC,EAAE,QAAQ,CAAC,yBAAyB,EAAE,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,QAAQ,CAAC,qBAAqB,EAAE,CAAC,CAAC;CAC9C,CAAC;AAgcF,KAAK,iBAAiB,GAAG;IACzB,UAAU,EAAE,mBAAmB,CAAC;CAC/B,GAAG,WAAW,CAAC;;;;;;AAgOhB,wBAOG"}