@platforma-sdk/ui-vue 1.45.37 → 1.45.45

package/src/components/PlAdvancedFilter/utils.ts

@@ -1,146 +1,25 @@
-import type { AnchoredPColumnId, AxisId, CanonicalizedJson, FilteredPColumnId, ValueType } from '@platforma-sdk/model';
-import { assertNever, getTypeFromPColumnOrAxisSpec, isAnchoredPColumnId, isFilteredPColumn, parseJson, type AxisSpec, type PColumnSpec, type SUniversalPColumnId } from '@platforma-sdk/model';
-import { type CommonFilterSpec, isSupportedFilterType, type Filter, type FilterType, type Group, type PlAdvancedFilterUI, type SupportedFilterTypes, type PlAdvancedFilterColumnId } from './types';
-import { DEFAULT_FILTER_TYPE, DEFAULT_FILTERS, SUPPORTED_FILTER_TYPES } from './constants';
 import { filterUiMetadata } from '@milaboratories/uikit';
-import { ref, watch, type ModelRef } from 'vue';
-import { isAxisId } from '@platforma-sdk/model';
-
-function toInnerFilter(outerFilter: CommonFilterSpec): Filter | null {
-  if (!('column' in outerFilter) || outerFilter.type === undefined || !isSupportedFilterType(outerFilter.type)) {
-    return null;
-  }
-  if (outerFilter.type === 'patternFuzzyContainSubsequence') {
-    return {
-      ...outerFilter,
-      value: outerFilter.value,
-      wildcard: outerFilter.wildcard,
-      maxEdits: outerFilter.maxEdits ?? 2,
-      substitutionsOnly: outerFilter.substitutionsOnly ?? false,
-    };
-  }
-
-  return { ...outerFilter } as Filter;
-}
-
-let groupIdCounter = 0;
-function getNewGroupId() {
-  groupIdCounter++;
-  return String(groupIdCounter);
-}
-
-function toInnerFiltersGroup(f: CommonFilterSpec): Group | null {
-  if (f.type === 'not') {
-    const group = toInnerFiltersGroup(f.filter);
-    return group
-      ? {
-          not: !group.not,
-          operand: group.operand,
-          filters: group.filters,
-          id: getNewGroupId(),
-          expanded: group.expanded,
-        }
-      : null;
-  }
-  if (f.type === 'and' || f.type === 'or') {
-    return {
-      operand: f.type,
-      not: false,
-      filters: f.filters.map((f) => toInnerFilter(f)).filter((v) => v !== null) as Filter[],
-      id: getNewGroupId(),
-      expanded: f.expanded ?? true,
-    };
-  }
-  if (SUPPORTED_FILTER_TYPES.has(f.type as SupportedFilterTypes)) {
-    const filter = toInnerFilter(f);
-    return {
-      operand: 'or',
-      not: false,
-      filters: filter ? [filter] : [],
-      id: getNewGroupId(),
-      expanded: f.expanded ?? true,
-    };
-  }
-  return null;
-}
-
-export function toInnerModel(m: CommonFilterSpec): PlAdvancedFilterUI {
-  const res: PlAdvancedFilterUI = {
-    operand: 'or',
-    groups: [],
-  };
-  if (m.type === 'not') {
-    return res; // not supported 'not' for all the groups in ui
-  }
-  if (m.type === 'and' || m.type === 'or') {
-    // group
-    res.operand = m.type;
-    res.groups = m.filters.map(toInnerFiltersGroup).filter((v) => v !== null) as Group[];
-  } else if (SUPPORTED_FILTER_TYPES.has(m.type as SupportedFilterTypes)) {
-    // single filter
-    const group = toInnerFiltersGroup(m);
-    res.groups = group ? [group] : [];
-  }
-  res.groups = res.groups.filter((gr) => gr.filters.length > 0);
-  return res;
-}
-
-function toOuterFilter(filter: Filter): CommonFilterSpec | null {
-  if (
-    filter.type === 'isNA' || filter.type === 'isNotNA'
-    || filter.type === 'inSet' || filter.type === 'notInSet'
-  ) {
-    return filter;
-  }
-  if (
-    filter.type === 'greaterThanOrEqual' || filter.type === 'lessThanOrEqual'
-    || filter.type === 'greaterThan' || filter.type === 'lessThan'
-    || filter.type === 'equal' || filter.type === 'notEqual'
-  ) {
-    return filter.x !== undefined ? { ...filter, x: filter.x } : null;
-  }
-  if (
-    filter.type === 'patternEquals' || filter.type === 'patternNotEquals'
-    || filter.type === 'patternContainSubsequence' || filter.type === 'patternNotContainSubsequence'
-    || filter.type === 'patternMatchesRegularExpression'
-    || filter.type === 'patternFuzzyContainSubsequence'
-  ) {
-    return filter.value !== undefined ? { ...filter, value: filter.value } : null;
-  }
-  assertNever(filter.type);
-}
+import type { AnchoredPColumnId, AxisId, CanonicalizedJson, FilteredPColumnId, ValueType } from '@platforma-sdk/model';
+import { getTypeFromPColumnOrAxisSpec, isAnchoredPColumnId, isAxisId, isFilteredPColumn, parseJson, type AxisSpec, type PColumnSpec, type SUniversalPColumnId } from '@platforma-sdk/model';
+import { DEFAULT_FILTER_TYPE, DEFAULT_FILTERS } from './constants';
+import type { NodeFilter } from './types';
+import { type CommonFilter, type EditableFilter, type PlAdvancedFilterColumnId, type SupportedFilterTypes } from './types';
 
-function toOuterFilterGroup(m: Group): CommonFilterSpec {
-  const res: CommonFilterSpec = {
-    type: m.operand,
-    expanded: m.expanded,
-    filters: m.filters.map(toOuterFilter).filter((v): v is CommonFilterSpec => v !== null),
-  };
-  if (m.not) {
-    return {
-      type: 'not',
-      filter: res,
-    } as CommonFilterSpec;
-  }
-  return res;
-}
-export function toOuterModel(m: PlAdvancedFilterUI): CommonFilterSpec {
-  return {
-    type: m.operand,
-    filters: m.groups.map(toOuterFilterGroup),
-  };
+export function getNewId() {
+  return Date.now();
 }
 
-export function createNewGroup(selectedSourceId: string) {
+export function createNewGroup(selectedSourceId: string): NodeFilter {
   return {
-    id: getNewGroupId(),
-    not: false,
-    operand: 'and' as const,
-    expanded: true,
+    id: getNewId(),
+    isExpanded: true,
+    type: 'and',
     filters: [{
+      id: getNewId(),
+      isExpanded: true,
       ...DEFAULT_FILTERS[DEFAULT_FILTER_TYPE],
       column: selectedSourceId as SUniversalPColumnId,
-    }],
+    } as CommonFilter],
   };
 }
 
@@ -169,39 +48,48 @@ export function isStringValueType(spec?: PColumnSpec | AxisSpec): boolean {
   return valueType === 'String';
 }
 
-export function isNumericFilter(filter: Filter): filter is Filter & { type: 'equal' | 'notEqual' | 'lessThan' | 'lessThanOrEqual' | 'greaterThan' | 'greaterThanOrEqual' } {
-  return filter.type === 'equal' || filter.type === 'notEqual' || filter.type === 'lessThan' || filter.type === 'lessThanOrEqual' || filter.type === 'greaterThan' || filter.type === 'greaterThanOrEqual';
-}
-export function isStringFilter(filter: Filter): filter is Filter & { type: 'patternEquals' | 'patternNotEquals' | 'patternContainSubsequence' | 'patternNotContainSubsequence' | 'patternMatchesRegularExpression' | 'patternFuzzyContainSubsequence' } {
-  return filter.type === 'patternEquals' || filter.type === 'patternNotEquals' || filter.type === 'patternContainSubsequence' || filter.type === 'patternNotContainSubsequence' || filter.type === 'patternMatchesRegularExpression' || filter.type === 'patternFuzzyContainSubsequence';
+export function isNumericFilter(filter: EditableFilter): filter is Extract<EditableFilter, {
+  type: 'equal'
+    | 'notEqual'
+    | 'lessThan'
+    | 'lessThanOrEqual'
+    | 'greaterThan'
+    | 'greaterThanOrEqual';
+}> {
+  return filter.type === 'equal'
+    || filter.type === 'notEqual'
+    || filter.type === 'lessThan'
+    || filter.type === 'lessThanOrEqual'
+    || filter.type === 'greaterThan'
+    || filter.type === 'greaterThanOrEqual';
+}
+
+export function isPositionFilter(filter: EditableFilter): filter is Extract<EditableFilter, { type: 'topN' | 'bottomN' }> {
+  return filter.type === 'topN'
+    || filter.type === 'bottomN'
+  ;
+}
+
+export function isStringFilter(filter: EditableFilter): filter is Extract<EditableFilter, {
+  type: 'patternEquals'
+    | 'patternNotEquals'
+    | 'patternContainSubsequence'
+    | 'patternNotContainSubsequence'
+    | 'patternMatchesRegularExpression'
+    | 'patternFuzzyContainSubsequence';
+}> {
+  return filter.type === 'patternEquals'
+    || filter.type === 'patternNotEquals'
+    || filter.type === 'patternContainSubsequence'
+    || filter.type === 'patternNotContainSubsequence'
+    || filter.type === 'patternMatchesRegularExpression'
+    || filter.type === 'patternFuzzyContainSubsequence';
 }
 
-export function getFilterInfo(filterType: FilterType): { label: string; supportedFor: (spec: NormalizedSpecData) => boolean } {
+export function getFilterInfo(filterType: SupportedFilterTypes): { label: string; supportedFor: (spec: NormalizedSpecData) => boolean } {
   return filterUiMetadata[filterType as keyof typeof filterUiMetadata];
 }
 
-export function useInnerModel<T, V>(
-  toInnerModel: (v: T) => V,
-  toOuterModel: (v: V) => T,
-  model: ModelRef<T>,
-) {
-  const innerModel = ref<V>(toInnerModel(model.value));
-  function updateOuterModelValue(v: V) {
-    model.value = toOuterModel(v);
-  }
-  function updateInnerModelValue(v: T) {
-    innerModel.value = toInnerModel(v);
-  }
-  watch(() => model.value, (v: T) => {
-    updateInnerModelValue(v);
-  }, { deep: true });
-  watch(() => innerModel.value, (v: V) => {
-    updateOuterModelValue(v);
-  }, { deep: true });
-
-  return innerModel;
-}
-
 export function isValidColumnId(id: unknown): id is PlAdvancedFilterColumnId {
   if (typeof id !== 'string') {
     return false;

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

@@ -8,6 +8,7 @@ import {
   PlSidebarItem,
 } from '@milaboratories/uikit';
 import type { Annotation } from '../types';
+import $commonStyle from './style.module.css';
 
 // Models
 const annotation = defineModel<Annotation>('annotation', { required: true });
@@ -21,7 +22,7 @@ function handleAddStep() {
   const id = randomInt();
   annotation.value.steps.push({
     id,
-    label: `Filter #${annotation.value.steps.length + 1}`,
+    label: '',
     filter: {
       id: randomInt(),
       type: 'and',
@@ -37,18 +38,15 @@ function handleAddStep() {
     <template #header-content>
       <PlEditableTitle
         v-model="annotation.title"
+        :class="{ [$commonStyle.flashing]: annotation.title.length === 0 }"
         :max-length="40"
         max-width="600px"
-        placeholder="Annotation Name"
+        placeholder="Annotation Title"
         :autofocus="annotation.title.length === 0"
       />
     </template>
     <template v-if="annotation" #body-content>
-      <div :class="$style.root">
-        <PlBtnSecondary icon="add" @click="handleAddStep">
-          Add annotation
-        </PlBtnSecondary>
-
+      <div :class="[$style.root, { [$commonStyle.disabled]: annotation.title.length === 0 }]">
         <span :class="$style.tip">Lower annotations override the ones above. Rearrange them by dragging.</span>
 
         <PlElementList
@@ -63,6 +61,9 @@ function handleAddStep() {
             {{ item.label }}
           </template>
         </PlElementList>
+        <PlBtnSecondary icon="add" @click="handleAddStep">
+          Add label
+        </PlBtnSecondary>
       </div>
     </template>
     <template #footer-content>
@@ -88,7 +89,6 @@ function handleAddStep() {
 }
 
 .tip {
-  margin-top: 12px;
   color: var(--txt-03);
 }
 

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

@@ -1,27 +1,32 @@
 <script lang="ts">
 export type Props = {
-  columns: SimplifiedUniversalPColumnEntry[];
+  columns: PlAdvancedFilterItem[];
+
+  getSuggestOptions: (params: { columnId: PlAdvancedFilterColumnId; searchStr: string; axisIdx?: number }) =>
+    ListOptionBase<string | number>[] | Promise<ListOptionBase<string | number>[]>;
+  // @todo: can be optional
+  getSuggestModel?: (params: { columnId: PlAdvancedFilterColumnId; searchStr: string; axisIdx?: number }) =>
+    ListOptionBase<string | number> | Promise<ListOptionBase<string | number>>;
+
   hasSelectedColumns?: boolean;
   getValuesForSelectedColumns?: () => Promise<undefined | { columnId: PObjectId; values: string[] }>;
 };
 </script>
 <script setup lang="ts">
-import { isNil, randomInt } from '@milaboratories/helpers';
-import type {
-  FilterSpecTypeFieldRecord,
-} from '@milaboratories/uikit';
+import { randomInt } from '@milaboratories/helpers';
 import {
-  getFilterUiMetadata,
   PlBtnSecondary,
   PlEditableTitle,
-  PlElementList,
   PlSidebarItem,
 } from '@milaboratories/uikit';
-import type { FilterSpecLeaf, PObjectId, SimplifiedUniversalPColumnEntry, SUniversalPColumnId } from '@platforma-sdk/model';
+import type { ListOptionBase, PObjectId, SUniversalPColumnId } from '@platforma-sdk/model';
 import { computed } from 'vue';
-import type { Filter, FilterSpec } from '../types';
-import { createDefaultFilterMetadata } from '../utils';
-import DynamicForm from './DynamicForm.vue';
+import type { PlAdvancedFilterFilter, PlAdvancedFilterSupportedFilters } from '../../PlAdvancedFilter';
+import { PlAdvancedFilter, type PlAdvancedFilterItem } from '../../PlAdvancedFilter';
+import type { PlAdvancedFilterColumnId } from '../../PlAdvancedFilter/types';
+import type { Filter } from '../types';
+
+import $commonStyle from './style.module.css';
 
 // Models
 const step = defineModel<Filter>('step', { required: true });
@@ -36,7 +41,14 @@ const addFilterPlaceholder = () => {
   step.value.filter.filters.push({
     id: randomInt(),
     isExpanded: true,
-    type: undefined,
+    type: 'or',
+    filters: [
+      {
+        id: randomInt(),
+        type: 'isNA',
+        column: props.columns[0].id as SUniversalPColumnId,
+      },
+    ],
   });
 };
 
@@ -63,26 +75,22 @@ async function addFilterFromSelected() {
   });
 }
 
-// Getters
-const getColumnLabel = (filter: FilterSpec) => {
-  if (!isNil(filter.name)) return filter.name;
-  return props.columns
-    .find((c) => 'column' in filter ? c.id === filter.column : false)?.label
-    ?? filter.type;
-};
-
-const getFormMetadata = (filter: FilterSpec): FilterSpecTypeFieldRecord<FilterSpecLeaf> => {
-  return !isNil(filter.type)
-    ? getFilterUiMetadata(filter.type).form as FilterSpecTypeFieldRecord<FilterSpecLeaf>
-    : createDefaultFilterMetadata();
-};
-
-const getFilterValues = (filter: FilterSpec) => {
-  if (filter.type === 'or' || filter.type === 'and') {
-    return filter.filters.map((f) => 'value' in f && !isNil(f.value) ? f.value : null).filter((v) => !isNil(v)).join (', ');
-  }
-  return null;
-};
+const supportedFilters = [
+  'isNA',
+  'isNotNA',
+  'greaterThan',
+  'greaterThanOrEqual',
+  'lessThan',
+  'lessThanOrEqual',
+  'patternEquals',
+  'patternNotEquals',
+  'patternContainSubsequence',
+  'patternNotContainSubsequence',
+  'equal',
+  'notEqual',
+  'topN',
+  'bottomN',
+] as typeof PlAdvancedFilterSupportedFilters[number][];
 </script>
 
 <template>
@@ -91,53 +99,40 @@ const getFilterValues = (filter: FilterSpec) => {
       <PlEditableTitle
         :key="step.id"
         v-model="step.label"
+        :class="{ [$commonStyle.flashing]: step.label.length === 0 }"
         :max-length="40"
         max-width="600px"
-        placeholder="Annotation Name"
+        placeholder="Filter Name"
         :autofocus="step.label.length === 0"
       />
     </template>
     <template #body-content>
-      <div :class="$style.root">
-        <div :class="$style.actions">
-          <PlBtnSecondary style="width: 100%;" icon="add" @click="addFilterPlaceholder">
-            Filter
-          </PlBtnSecondary>
-          <PlBtnSecondary v-if="withSelection" style="width: 100%;" icon="add" :disabled="!props.hasSelectedColumns" @click="addFilterFromSelected">
-            From selection
-          </PlBtnSecondary>
-        </div>
-
-        <PlElementList
-          v-model:items="step.filter.filters"
-          :get-item-key="(item) => item.id"
-          :is-expanded="(item) => Boolean(item.isExpanded)"
-          :on-expand="(item) => item.isExpanded = !Boolean(item.isExpanded)"
-        >
-          <template #item-title="{ item }">
-            {{ getColumnLabel(item) }}
-          </template>
-          <template #item-content="{ item, index }">
-            <template v-if="item.type !== 'or' && item.type !== 'and'">
-              <DynamicForm
-                v-model="(step.filter.filters[index] as FilterSpecLeaf)"
-                :columns="props.columns"
-                :form-metadata="getFormMetadata(item)"
-              />
-            </template>
-            <template v-else>
-              <div>{{ getFilterValues(item) }}</div>
-            </template>
-          </template>
-        </PlElementList>
-      </div>
+      <PlAdvancedFilter
+        v-model:filters="(step.filter as PlAdvancedFilterFilter)"
+        :class="[$style.root, { [$commonStyle.disabled]: step.label.length === 0 }]"
+        :items="props.columns"
+        :supported-filters="supportedFilters"
+        :get-suggest-model="props.getSuggestModel"
+        :get-suggest-options="props.getSuggestOptions"
+        :enable-dnd="false"
+        :enable-add-group-button="true"
+      >
+        <template #add-group-buttons>
+          <div :class="$style.actions">
+            <PlBtnSecondary icon="add" @click="addFilterPlaceholder">
+              Add Filter
+            </PlBtnSecondary>
+            <PlBtnSecondary v-if="withSelection" icon="add" :disabled="!props.hasSelectedColumns" @click="addFilterFromSelected">
+              From selection
+            </PlBtnSecondary>
+          </div>
+        </template>
+      </PlAdvancedFilter>
     </template>
   </PlSidebarItem>
 </template>
 
-<style lang="scss" module>
-@use '@milaboratories/uikit/styles/variables' as *;
-
+<style module>
 .root {
   display: flex;
   flex-direction: column;

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

@@ -51,7 +51,7 @@ async function handleDeleteSchema() {
 </script>
 
 <template>
-  <PlSidebarGroup :class="$style.sidebarGroup">
+  <PlSidebarGroup>
     <template #item-0>
       <AnnotationsSidebar
         v-model:annotation="annotation"
@@ -67,6 +67,8 @@ async function handleDeleteSchema() {
         v-model:step="selectedStep"
         :class="$style.sidebarItem"
         :columns="props.columns"
+        :get-suggest-model="props.getSuggestModel"
+        :get-suggest-options="props.getSuggestOptions"
         :selectedStepId="selectedStepId"
         :hasSelectedColumns="props.hasSelectedColumns"
         :getValuesForSelectedColumns="props.getValuesForSelectedColumns"
@@ -75,12 +77,7 @@ async function handleDeleteSchema() {
   </PlSidebarGroup>
 </template>
 
-<style lang="scss" module>
-.sidebarGroup {
-  width: 100%;
-  height: 100%;
-}
-
+<style module>
 .sidebarItem {
   width: 100%;
   height: 100%;

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

@@ -30,8 +30,10 @@ async function handleDeleteSchema() {
   <PlPureSlideModal v-model="opened" :class="$style.modal" width="768px">
     <PlAnnotations
       v-model:annotation="annotation"
-      :class="$style.sidebarItem"
+      :class="$style.content"
       :columns="props.columns"
+      :get-suggest-model="props.getSuggestModel"
+      :get-suggest-options="props.getSuggestOptions"
       :has-selected-columns="props.hasSelectedColumns"
       :getValuesForSelectedColumns="props.getValuesForSelectedColumns"
       @delete-schema="handleDeleteSchema"
@@ -39,17 +41,12 @@ async function handleDeleteSchema() {
   </PlPureSlideModal>
 </template>
 
-<style lang="scss" module>
+<style module>
 .modal {
   display: flex;
 }
 
-.sidebarGroup {
-  width: 100%;
-  height: 100%;
-}
-
-.sidebarItem {
+.content {
   width: 100%;
   height: 100%;
 }

package/src/components/PlAnnotations/components/style.module.css

@@ -0,0 +1,16 @@
+.flashing {
+  animation: flash 1s ease-in-out infinite alternate;
+}
+@keyframes flash {
+  0% {
+    box-shadow: 0 0 6px 4px var(--border-color-focus);
+  }
+  100% {
+    box-shadow: 0 0 2px 2px var(--border-color-focus);
+  }
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

package/src/components/PlAnnotations/index.ts

@@ -1,2 +1,4 @@
 export { default as PlAnnotations } from './components/PlAnnotations.vue';
 export { default as PlAnnotationsModal } from './components/PlAnnotationsModal.vue';
+
+export type { Annotation, Filter, FilterSpec } from './types';

package/dist/components/PlAdvancedFilter/SingleFilter.vue.js

@@ -1,10 +0,0 @@
-import s from "./SingleFilter.vue2.js";
-import o from "./SingleFilter.vue3.js";
-import t from "../../_virtual/_plugin-vue_export-helper.js";
-const e = {
-  $style: o
-}, c = /* @__PURE__ */ t(s, [["__cssModules", e]]);
-export {
-  c as default
-};
-//# sourceMappingURL=SingleFilter.vue.js.map

package/dist/components/PlAdvancedFilter/SingleFilter.vue.js.map

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