@platforma-sdk/ui-vue 1.65.9 → 1.66.0

package/src/components/PlAdvancedFilter/FilterEditor.test.ts

@@ -0,0 +1,315 @@
+// @vitest-environment happy-dom
+import { mount } from "@vue/test-utils";
+import { defineComponent, h } from "vue";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+
+function makeStub(name: string) {
+  return defineComponent({
+    name,
+    props: ["modelValue", "options", "optionsSearch", "error", "errorStatus"],
+    emits: ["update:modelValue"],
+    setup(_, { slots }) {
+      return () => h("div", { "data-stub": name }, slots.default?.());
+    },
+  });
+}
+
+vi.mock("@milaboratories/uikit", () => ({
+  PlAutocomplete: makeStub("PlAutocomplete"),
+  PlAutocompleteMulti: makeStub("PlAutocompleteMulti"),
+  PlDropdown: makeStub("PlDropdown"),
+  PlIcon16: makeStub("PlIcon16"),
+  PlNumberField: makeStub("PlNumberField"),
+  PlTextField: makeStub("PlTextField"),
+  PlToggleSwitch: makeStub("PlToggleSwitch"),
+  Slider: makeStub("Slider"),
+  filterUiMetadata: new Proxy(
+    {},
+    {
+      get: (_t, key: string) => ({
+        label: key,
+        supportedFor: () => true,
+      }),
+    },
+  ),
+}));
+
+let FilterEditor: typeof import("./FilterEditor.vue").default;
+let DEFAULT_FILTERS: typeof import("./constants").DEFAULT_FILTERS;
+let SUPPORTED_FILTER_TYPES: typeof import("./constants").SUPPORTED_FILTER_TYPES;
+
+type EditableFilter = import("./types").EditableFilter;
+type PlAdvancedFilterColumnId = import("./types").PlAdvancedFilterColumnId;
+type SourceOptionInfo = import("./types").SourceOptionInfo;
+
+beforeAll(async () => {
+  FilterEditor = (await import("./FilterEditor.vue")).default;
+  const constants = await import("./constants");
+  DEFAULT_FILTERS = constants.DEFAULT_FILTERS;
+  SUPPORTED_FILTER_TYPES = constants.SUPPORTED_FILTER_TYPES;
+});
+
+const columnA = "colA" as PlAdvancedFilterColumnId;
+const columnB = "colB" as PlAdvancedFilterColumnId;
+
+const columnOptions: SourceOptionInfo[] = [
+  {
+    id: columnA,
+    label: "Column A",
+    spec: { kind: "PColumn", name: "a", valueType: "String", axesSpec: [] },
+  },
+  {
+    id: columnB,
+    label: "Column B",
+    spec: { kind: "PColumn", name: "b", valueType: "Int", axesSpec: [] },
+  },
+];
+
+function mountEditor(
+  filter: EditableFilter,
+  handlers: {
+    onUpdateFilter?: (f: EditableFilter) => void;
+    onDelete?: (c: PlAdvancedFilterColumnId) => void;
+    onChangeOperand?: () => void;
+  } = {},
+) {
+  return mount(FilterEditor, {
+    props: {
+      filter,
+      isLast: false,
+      operand: "and",
+      enableDnd: false,
+      columnOptions,
+      supportedFilters: SUPPORTED_FILTER_TYPES,
+      getSuggestOptions: () => [],
+      onDelete: handlers.onDelete ?? (() => {}),
+      onUpdateFilter: handlers.onUpdateFilter ?? (() => {}),
+      onChangeOperand: handlers.onChangeOperand ?? (() => {}),
+    },
+  });
+}
+
+function findDropdowns(wrapper: ReturnType<typeof mount>) {
+  return wrapper.findAllComponents({ name: "PlDropdown" });
+}
+
+describe("FilterEditor.vue: changeFilterType", () => {
+  it("changing type from isNA to greaterThan emits filter with new type and default x", () => {
+    const onUpdateFilter = vi.fn();
+    const wrapper = mountEditor({ type: "isNA", column: columnA }, { onUpdateFilter });
+
+    // second PlDropdown (index 1) is the filter-type selector
+    const typeDropdown = findDropdowns(wrapper)[1];
+    typeDropdown.vm.$emit("update:modelValue", "greaterThan");
+
+    expect(onUpdateFilter).toHaveBeenCalledTimes(1);
+    expect(onUpdateFilter).toHaveBeenCalledWith({
+      type: "greaterThan",
+      column: columnA,
+      x: 0,
+    });
+  });
+
+  it("changing type from patternEquals to greaterThan drops stale `value`", () => {
+    const onUpdateFilter = vi.fn();
+    const wrapper = mountEditor(
+      { type: "patternEquals", column: columnA, value: "hello" },
+      { onUpdateFilter },
+    );
+
+    findDropdowns(wrapper)[1].vm.$emit("update:modelValue", "greaterThan");
+
+    expect(onUpdateFilter).toHaveBeenCalledWith({
+      type: "greaterThan",
+      column: columnA,
+      x: 0,
+    });
+    expect(onUpdateFilter.mock.calls[0][0]).not.toHaveProperty("value");
+  });
+
+  it("changing between numeric filters resets `x` to default (data fields are not preserved)", () => {
+    const onUpdateFilter = vi.fn();
+    const wrapper = mountEditor(
+      { type: "greaterThan", column: columnA, x: 42 },
+      { onUpdateFilter },
+    );
+
+    findDropdowns(wrapper)[1].vm.$emit("update:modelValue", "lessThan");
+
+    expect(onUpdateFilter).toHaveBeenCalledWith({
+      type: "lessThan",
+      column: columnA,
+      x: 0,
+    });
+  });
+
+  it("changing to patternFuzzyContainSubsequence populates all default fields", () => {
+    const onUpdateFilter = vi.fn();
+    const wrapper = mountEditor({ type: "isNA", column: columnA }, { onUpdateFilter });
+
+    findDropdowns(wrapper)[1].vm.$emit("update:modelValue", "patternFuzzyContainSubsequence");
+
+    expect(onUpdateFilter).toHaveBeenCalledWith({
+      ...DEFAULT_FILTERS.patternFuzzyContainSubsequence,
+      column: columnA,
+    });
+  });
+
+  it("undefined newType is ignored (no emit)", () => {
+    const onUpdateFilter = vi.fn();
+    const wrapper = mountEditor({ type: "isNA", column: columnA }, { onUpdateFilter });
+
+    findDropdowns(wrapper)[1].vm.$emit("update:modelValue", undefined);
+
+    expect(onUpdateFilter).not.toHaveBeenCalled();
+  });
+
+  it("preserves meta fields (id, isExpanded, isSuppressed, source) across type change", () => {
+    const onUpdateFilter = vi.fn();
+    const wrapper = mountEditor(
+      {
+        type: "patternEquals",
+        column: columnA,
+        value: "foo",
+        id: 777,
+        isExpanded: true,
+        isSuppressed: false,
+        source: "abc",
+      } as unknown as EditableFilter,
+      { onUpdateFilter },
+    );
+
+    findDropdowns(wrapper)[1].vm.$emit("update:modelValue", "greaterThan");
+
+    expect(onUpdateFilter).toHaveBeenCalledWith({
+      type: "greaterThan",
+      column: columnA,
+      x: 0,
+      id: 777,
+      isExpanded: true,
+      isSuppressed: false,
+      source: "abc",
+    });
+  });
+
+  it("does not carry over unknown data fields from the old filter", () => {
+    const onUpdateFilter = vi.fn();
+    const wrapper = mountEditor({ type: "topN", column: columnA, n: 7 }, { onUpdateFilter });
+
+    findDropdowns(wrapper)[1].vm.$emit("update:modelValue", "isNA");
+
+    const emitted = onUpdateFilter.mock.calls[0][0];
+    expect(emitted).toEqual({ type: "isNA", column: columnA });
+    expect(emitted).not.toHaveProperty("n");
+  });
+});
+
+describe("FilterEditor.vue: updateFilterProp", () => {
+  it("editing `x` on greaterThan filter emits updated filter preserving type and column", () => {
+    const onUpdateFilter = vi.fn();
+    const wrapper = mountEditor({ type: "greaterThan", column: columnA, x: 0 }, { onUpdateFilter });
+
+    const numberField = wrapper.findComponent({ name: "PlNumberField" });
+    numberField.vm.$emit("update:modelValue", 99);
+
+    expect(onUpdateFilter).toHaveBeenCalledWith({
+      type: "greaterThan",
+      column: columnA,
+      x: 99,
+    });
+  });
+
+  it("editing `value` on patternEquals emits updated value", () => {
+    const onUpdateFilter = vi.fn();
+    const wrapper = mountEditor(
+      { type: "patternEquals", column: columnA, value: "" },
+      { onUpdateFilter },
+    );
+
+    const autocomplete = wrapper.findComponent({ name: "PlAutocomplete" });
+    autocomplete.vm.$emit("update:modelValue", "abc");
+
+    expect(onUpdateFilter).toHaveBeenCalledWith({
+      type: "patternEquals",
+      column: columnA,
+      value: "abc",
+    });
+  });
+
+  it("editing substring `value` on patternContainSubsequence emits updated value", () => {
+    const onUpdateFilter = vi.fn();
+    const wrapper = mountEditor(
+      { type: "patternContainSubsequence", column: columnA, value: "" },
+      { onUpdateFilter },
+    );
+
+    const textField = wrapper.findComponent({ name: "PlTextField" });
+    textField.vm.$emit("update:modelValue", "xyz");
+
+    expect(onUpdateFilter).toHaveBeenCalledWith({
+      type: "patternContainSubsequence",
+      column: columnA,
+      value: "xyz",
+    });
+  });
+
+  it("editing `n` on topN emits updated value", () => {
+    const onUpdateFilter = vi.fn();
+    const wrapper = mountEditor({ type: "topN", column: columnA, n: 10 }, { onUpdateFilter });
+
+    const numberField = wrapper.findComponent({ name: "PlNumberField" });
+    numberField.vm.$emit("update:modelValue", 5);
+
+    expect(onUpdateFilter).toHaveBeenCalledWith({
+      type: "topN",
+      column: columnA,
+      n: 5,
+    });
+  });
+});
+
+describe("FilterEditor.vue: changeSourceId", () => {
+  it("changing source to a column supporting the current filter keeps the filter type", () => {
+    const onUpdateFilter = vi.fn();
+    const wrapper = mountEditor({ type: "isNA", column: columnA }, { onUpdateFilter });
+
+    // first PlDropdown is the source selector
+    findDropdowns(wrapper)[0].vm.$emit("update:modelValue", columnB);
+
+    expect(onUpdateFilter).toHaveBeenCalledWith({
+      type: "isNA",
+      column: columnB,
+    });
+  });
+
+  it("undefined newSourceId is ignored", () => {
+    const onUpdateFilter = vi.fn();
+    const wrapper = mountEditor({ type: "isNA", column: columnA }, { onUpdateFilter });
+
+    findDropdowns(wrapper)[0].vm.$emit("update:modelValue", undefined);
+
+    expect(onUpdateFilter).not.toHaveBeenCalled();
+  });
+
+  it("unknown source id is ignored", () => {
+    const onUpdateFilter = vi.fn();
+    const wrapper = mountEditor({ type: "isNA", column: columnA }, { onUpdateFilter });
+
+    findDropdowns(wrapper)[0].vm.$emit("update:modelValue", "unknown" as PlAdvancedFilterColumnId);
+
+    expect(onUpdateFilter).not.toHaveBeenCalled();
+  });
+});
+
+describe("FilterEditor.vue: onDelete", () => {
+  it("clicking the close icon invokes onDelete with the current column id", async () => {
+    const onDelete = vi.fn();
+    const wrapper = mountEditor({ type: "isNA", column: columnA }, { onDelete });
+
+    // the close button wraps a PlIcon16 with name="close"
+    const closeBtn = wrapper.find('[class*="closeButton"]');
+    await closeBtn.trigger("click");
+
+    expect(onDelete).toHaveBeenCalledWith(columnA);
+  });
+});

package/src/components/PlAdvancedFilter/FilterEditor.vue

@@ -26,8 +26,14 @@ import type { SUPPORTED_FILTER_TYPES } from "./constants";
 import { DEFAULT_FILTER_TYPE, DEFAULT_FILTERS } from "./constants";
 import OperandButton from "./OperandButton.vue";
 import type { EditableFilter, Operand, PlAdvancedFilterColumnId, SourceOptionInfo } from "./types";
-import { getFilterInfo, getNormalizedSpec, isNumericFilter, isPositionFilter } from "./utils";
-import { Entries } from "@milaboratories/helpers";
+import {
+  getFilterInfo,
+  getNormalizedSpec,
+  isNumericFilter,
+  isPositionFilter,
+  mergeFilterForTypeChange,
+} from "./utils";
+import { isNil } from "es-toolkit";
 
 const props = defineProps<{
   filter: EditableFilter;
@@ -87,21 +93,9 @@ async function getMultiSuggestOptionsFn(
   throw new Error("Invalid arguments combination");
 }
 
-function changeFilterType(newType: EditableFilter["type"]) {
-  const defaultFilter = DEFAULT_FILTERS[newType];
-
-  props.onUpdateFilter(
-    (Object.entries(defaultFilter) as Entries<EditableFilter>).reduce(
-      (res, [key, val]) => {
-        res[key] = props.filter[key] ?? val;
-        return res;
-      },
-      { ...props.filter, type: newType } as Record<
-        keyof EditableFilter,
-        EditableFilter[keyof EditableFilter]
-      >,
-    ) as EditableFilter,
-  );
+function changeFilterType(newType?: EditableFilter["type"]) {
+  if (isNil(newType)) return;
+  props.onUpdateFilter(mergeFilterForTypeChange(props.filter, newType));
 }
 
 function changeSourceId(newSourceId?: PlAdvancedFilterColumnId) {
@@ -333,7 +327,7 @@ const stringMatchesError = computed(() => {
         :group-position="
           props.filter.type === 'isNA' || props.filter.type === 'isNotNA' ? 'bottom' : 'middle'
         "
-        @update:model-value="(v) => changeFilterType(v!)"
+        @update:model-value="changeFilterType"
       />
     </div>
 

package/src/components/PlAdvancedFilter/PlAdvancedFilter.vue

@@ -252,12 +252,7 @@ function validateFilter<T extends CommonFilter>(item: T): EditableFilter {
       </template>
       <template #item-content="{ item, index }">
         <div
-          :class="[
-            $style.groupContent,
-            {
-              [$style.suppressedLabel]: item.isSuppressed,
-            },
-          ]"
+          :class="[$style.groupContent, { [$style.suppressedLabel]: item.isSuppressed }]"
           dropzone="true"
           @drop="(event) => handleDropToExistingGroup(index, event)"
           @dragover="dragOver"

package/src/components/PlAdvancedFilter/types.ts

@@ -9,6 +9,7 @@ import type {
   SUniversalPColumnId,
 } from "@platforma-sdk/model";
 import type { SUPPORTED_FILTER_TYPES } from "./constants";
+import { PartialBy, RequiredBy } from "@milaboratories/helpers";
 
 export type Operand = "or" | "and";
 
@@ -52,9 +53,6 @@ export type RootFilter<Meta extends RequiredMeta = RequiredMeta> = Omit<
 // or, and, not - in groups
 export type SupportedFilterTypes = (typeof SUPPORTED_FILTER_TYPES)[number];
 
-type RequireFields<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
-type OptionalFields<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
-
 type NumericalWithOptionalN = "topN" | "bottomN";
 type NumericalWithOptionalX =
   | "lessThan"
@@ -64,21 +62,21 @@ type NumericalWithOptionalX =
   | "equal"
   | "notEqual";
 type StringWithOptionalValue = "patternEquals" | "patternNotEquals";
-// types from ui with some changed by optionality fields
 type EditedTypes =
   | "patternFuzzyContainSubsequence"
   | NumericalWithOptionalX
   | StringWithOptionalValue
   | NumericalWithOptionalN;
+
 export type EditableFilter =
   | Exclude<FilterLeafContent, { type: EditedTypes }>
-  | RequireFields<
+  | RequiredBy<
       Extract<FilterLeafContent, { type: "patternFuzzyContainSubsequence" }>,
       "maxEdits" | "substitutionsOnly"
     >
-  | OptionalFields<Extract<FilterLeafContent, { type: NumericalWithOptionalN }>, "n">
-  | OptionalFields<Extract<FilterLeafContent, { type: NumericalWithOptionalX }>, "x">
-  | OptionalFields<Extract<FilterLeafContent, { type: StringWithOptionalValue }>, "value">;
+  | PartialBy<Extract<FilterLeafContent, { type: NumericalWithOptionalN }>, "n">
+  | PartialBy<Extract<FilterLeafContent, { type: NumericalWithOptionalX }>, "x">
+  | PartialBy<Extract<FilterLeafContent, { type: StringWithOptionalValue }>, "value">;
 
 export type FixedAxisInfo = {
   idx: number;

package/src/components/PlAdvancedFilter/utils.ts

@@ -148,3 +148,23 @@ export function isValidColumnId(id: unknown): id is PlAdvancedFilterColumnId {
     return false;
   }
 }
+
+export function mergeFilterForTypeChange(
+  oldFilter: EditableFilter,
+  newType: SupportedFilterTypes,
+): EditableFilter {
+  const oldDefault = DEFAULT_FILTERS[oldFilter.type] as Record<string, unknown>;
+  const newDefault = DEFAULT_FILTERS[newType];
+
+  const stripped = { ...oldFilter } as Record<string, unknown>;
+  for (const key of Object.keys(oldDefault)) {
+    if (key === "type" || key === "column") continue;
+    delete stripped[key];
+  }
+
+  return {
+    ...newDefault,
+    ...stripped,
+    type: newType,
+  } as EditableFilter;
+}

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import $commonStyle from "./style.module.css";
 
+import { produce } from "immer";
 import { randomInt } from "@milaboratories/helpers";
 import {
   PlBtnGhost,
@@ -14,26 +15,53 @@ import type { Annotation } from "../types";
 import { validateTitle } from "../utils";
 import { isEmpty } from "es-toolkit/compat";
 
-// Models
-const annotation = defineModel<Annotation>("annotation", { required: true });
-const selectedStepId = defineModel<undefined | number>("selectedStepId");
-// Emits
+const props = defineProps<{
+  annotation: Annotation;
+  selectedStepId: undefined | number;
+  onUpdateAnnotation: (annotation: Annotation) => void;
+  onUpdateSelectedStepId: (id: undefined | number) => void;
+}>();
+
 const emits = defineEmits<{
   (e: "delete-schema"): void;
 }>();
-// Actions
+
+function produceAnnotationUpdate(updater: (draft: Annotation) => void) {
+  props.onUpdateAnnotation(produce(props.annotation, updater));
+}
+
+function updateTitle(title: string) {
+  produceAnnotationUpdate((draft) => {
+    draft.title = title;
+  });
+}
+
+function updateSteps(steps: Annotation["steps"]) {
+  produceAnnotationUpdate((draft) => {
+    draft.steps = steps;
+  });
+}
+
+function updateDefaultValue(value: string) {
+  produceAnnotationUpdate((draft) => {
+    draft.defaultValue = value === "" ? undefined : value;
+  });
+}
+
 function handleAddStep() {
   const id = randomInt();
-  annotation.value.steps.push({
-    id,
-    label: "",
-    filter: {
-      id: randomInt(),
-      type: "and",
-      filters: [],
-    },
+  produceAnnotationUpdate((draft) => {
+    draft.steps.push({
+      id,
+      label: "",
+      filter: {
+        id: randomInt(),
+        type: "and",
+        filters: [],
+      },
+    });
   });
-  selectedStepId.value = id;
+  props.onUpdateSelectedStepId(id);
 }
 </script>
 
@@ -41,28 +69,29 @@ function handleAddStep() {
   <PlSidebarItem>
     <template #header-content>
       <PlEditableTitle
-        v-model="annotation.title"
-        :class="{ [$commonStyle.flashing]: annotation.title.length === 0 }"
+        :model-value="props.annotation.title"
+        :class="{ [$commonStyle.flashing]: props.annotation.title.length === 0 }"
         :max-length="40"
         max-width="600px"
         placeholder="Annotation Title"
-        :autofocus="annotation.title.length === 0"
+        :autofocus="props.annotation.title.length === 0"
         :validate="validateTitle"
+        @update:model-value="updateTitle"
       />
     </template>
-    <template v-if="annotation" #body-content>
-      <div :class="[$style.root, { [$commonStyle.disabled]: annotation.title.length === 0 }]">
-        <span :class="$style.tip"
-          >Above annotations override the ones below. Rearrange them by dragging.</span
-        >
-
+    <template v-if="props.annotation" #body-content>
+      <div :class="[$style.root, { [$commonStyle.disabled]: props.annotation.title.length === 0 }]">
+        <span :class="$style.tip">
+          Above annotations override the ones below. Rearrange them by dragging.
+        </span>
         <PlElementList
-          v-model:items="annotation.steps"
+          :items="props.annotation.steps"
           :get-item-key="(item) => item.id"
-          :is-active="(item) => item.id === selectedStepId"
+          :is-active="(item) => item.id === props.selectedStepId"
           :item-class="$style.stepItem"
           :class="$style.steps"
-          @item-click="(item) => (selectedStepId = item.id)"
+          @update:items="updateSteps"
+          @item-click="(item) => props.onUpdateSelectedStepId(item.id)"
         >
           <template #item-title="{ item }">
             {{ item.label }}
@@ -74,15 +103,15 @@ function handleAddStep() {
         <PlTextField
           :class="[
             $style.defaultValue,
-            { [$style.emptyDefaultValue]: isEmpty(annotation.defaultValue) },
+            { [$style.emptyDefaultValue]: isEmpty(props.annotation.defaultValue) },
           ]"
-          :model-value="annotation.defaultValue ?? ''"
+          :model-value="props.annotation.defaultValue ?? ''"
           label="Label remaining with"
           placeholder="No label"
           clearable
           helper="This label will be applied to the remaining rows, after all other filters are applied."
           @click.stop
-          @update:model-value="annotation.defaultValue = $event === '' ? undefined : $event"
+          @update:model-value="updateDefaultValue"
         />
       </div>
     </template>
@@ -90,7 +119,7 @@ function handleAddStep() {
       <PlBtnGhost
         icon="delete-bin"
         reverse
-        :disabled="annotation.steps.length === 0"
+        :disabled="props.annotation.steps.length === 0"
         @click.stop="emits('delete-schema')"
       >
         Delete Schema