npm - @milaboratories/milaboratories.ui-examples.ui - Versions diffs - 1.6.6 → 1.6.7 - Mend

@milaboratories/milaboratories.ui-examples.ui 1.6.6 → 1.6.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/.turbo/turbo-build.log +4 -4
package/.turbo/turbo-type-check.log +1 -1
package/CHANGELOG.md +9 -0
package/dist/assets/{index-D3ynzqog.js → index-DYfpDE_1.js} +111 -111
package/dist/assets/{index-D3ynzqog.js.map → index-DYfpDE_1.js.map} +1 -1
package/dist/index.html +1 -1
package/package.json +7 -7
package/src/pages/PlAdvancedFilterPage.vue +31 -27
package/src/pages/PlAnnotationPage.vue +66 -23

package/dist/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' blob: data: 'unsafe-eval';">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script type="module" crossorigin src="./assets/index-D3ynzqog.js"></script>
+    <script type="module" crossorigin src="./assets/index-DYfpDE_1.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-CrE9XJ4f.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,11 +1,11 @@
 {
   "name": "@milaboratories/milaboratories.ui-examples.ui",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "type": "module",
   "dependencies": {
     "vue": "^3.5.24",
-    "@milaboratories/milaboratories.ui-examples.model": "1.3.6",
-    "@platforma-sdk/model": "1.45.42"
+    "@milaboratories/milaboratories.ui-examples.model": "1.3.7",
+    "@platforma-sdk/model": "1.45.45"
   },
   "devDependencies": {
     "typescript": "~5.6.3",
@@ -13,12 +13,12 @@
     "zod": "~3.23.8",
     "ag-grid-enterprise": "~34.1.2",
     "ag-grid-vue3": "~34.1.2",
-    "@milaboratories/ts-configs": "1.0.6",
-    "@milaboratories/build-configs": "1.0.8",
-    "@platforma-sdk/ui-vue": "1.45.42",
+    "@platforma-sdk/ui-vue": "1.45.45",
     "@milaboratories/ts-builder": "1.0.5",
+    "@milaboratories/build-configs": "1.0.8",
+    "@milaboratories/uikit": "2.6.5",
     "@milaboratories/helpers": "1.12.0",
-    "@milaboratories/uikit": "2.6.4"
+    "@milaboratories/ts-configs": "1.0.6"
   },
   "scripts": {
     "dev": "ts-builder serve --target browser",

package/src/pages/PlAdvancedFilterPage.vue CHANGED Viewed

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { AxisId, CanonicalizedJson } from '@platforma-sdk/model';
-import { stringifyColumnId, type FilterSpec, type ListOptionBase, type SUniversalPColumnId } from '@platforma-sdk/model';
+import { stringifyColumnId, type ListOptionBase, type SUniversalPColumnId } from '@platforma-sdk/model';
+import type { PlAdvancedFilterFilter, PlAdvancedFilterItem } from '@platforma-sdk/ui-vue';
 import { PlAdvancedFilter, PlBlockPage, PlCheckbox, PlDropdown } from '@platforma-sdk/ui-vue';
-import { computed, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 const column1Id = stringifyColumnId({ name: '1', axes: [] }) as SUniversalPColumnId;
 const column2Id = stringifyColumnId({ name: '2', axes: [] }) as SUniversalPColumnId;
@@ -19,7 +20,7 @@ const uniqueValuesByAxisIdx: Record<string, Record<number, ListOptionBase<string
   [column1Id]: { 0: [{ value: 'axisValue1', label: 'Axis Value 1' }, { value: 'axisValue2', label: 'Axis Value 2' }] },
 };
-const options = [
+const options: PlAdvancedFilterItem[] = [
   {
     id: column1Id,
     label: 'Column 1',
@@ -60,44 +61,48 @@ async function getSuggestModel({ columnId, searchStr, axisIdx }: { columnId: SUn
   return columnValues.find((v) => v.value === searchStr) || { value: searchStr, label: `Label of ${searchStr}` };
 }
-const errorState = {
+const errorState: PlAdvancedFilterFilter = {
+  id: Math.random(),
   type: 'and' as const,
   filters: [
     {
+      id: Math.random(),
       type: 'and' as const,
       filters: [
         {
+          id: Math.random(),
           type: 'patternEquals' as const,
           column: inconsistentColumnId, // error - column id is not from available columns
           value: 'A',
         },
         {
-          type: 'or' as const,
-          filters: [
-            {
-              type: 'patternEquals' as const,
-              column: inconsistentColumnId, // error - column id is not from available columns
-              value: 'A',
-            },
-          ],
+          id: Math.random(),
+          type: 'patternEquals' as const,
+          column: inconsistentColumnId, // error - column id is not from available columns
+          value: 'A',
         },
       ],
     }, {
+      id: Math.random(),
       type: 'and' as const,
       filters: [
         {
+          id: Math.random(),
           type: 'isNA' as const,
           column: inconsistentColumnId, // error - column id is not from available columns
         },
         {
+          id: Math.random(),
           type: 'isNotNA' as const,
           column: inconsistentColumnId, // error - column id is not from available columns
         },
       ],
     }, {
+      id: Math.random(),
       type: 'and' as const,
       filters: [
         {
+          id: Math.random(),
           type: 'patternContainSubsequence' as const,
           column: inconsistentColumnId, // error - column id is not from available columns
           value: 'someString',
@@ -106,15 +111,19 @@ const errorState = {
     }],
 };
-const normalState: FilterSpec = {
+const normalState: PlAdvancedFilterFilter = {
+  id: Math.random(),
   type: 'and' as const,
   filters: [
     {
+      id: Math.random(),
       type: 'or' as const,
       filters: [{
+        id: Math.random(),
         type: 'isNA' as const,
         column: column1Id,
       }, {
+        id: Math.random(),
         type: 'equal' as const,
         column: column2Id,
         x: 10,
@@ -122,13 +131,16 @@ const normalState: FilterSpec = {
     },
     {
       type: 'and' as const,
+      id: Math.random(),
       filters: [
         {
+          id: Math.random(),
           type: 'isNotNA' as const,
           column: column3Id,
         }, {
+          id: Math.random(),
           type: 'patternFuzzyContainSubsequence' as const,
-          column: column3Id,
+          column: column2Id,
           value: 'abc',
         },
       ],
@@ -136,32 +148,24 @@ const normalState: FilterSpec = {
   ],
 };
-const filterStates: Record<string, FilterSpec> = {
+const filterStates = ref<Record<string, PlAdvancedFilterFilter>>({
   normalState: normalState,
   errorState: errorState,
   emptyState: {
+    id: Math.random(),
     type: 'and',
     filters: [],
   },
-};
-const filtersModel = computed<FilterSpec>({
-  get: () => {
-    return filterStates[selectedSavedFilters.value];
-  },
-  set: (v) => {
-    console.log('updated filters state: ', v);
-  },
 });
-const selectedSavedFilters = ref<keyof typeof filterStates>('normalState');
+const selectedSavedFilters = ref<keyof typeof filterStates.value>('normalState');
 const filterStatesOptions = [
   { value: 'normalState', label: 'Normal state' },
   { value: 'errorState', label: 'State with errors' },
   { value: 'emptyState', label: 'Empty state' },
 ];
-watch(() => filtersModel.value, (m) => {
+watch(() => filterStates.value[selectedSavedFilters.value], (m) => {
   console.log('Model changed: ', m);
 });
 </script>
@@ -186,7 +190,7 @@ watch(() => filtersModel.value, (m) => {
       </div>
       <div :key="selectedSavedFilters" :class="$style.rightColumn" >
         <PlAdvancedFilter
-          v-model="filtersModel"
+          v-model:filters="filterStates[selectedSavedFilters] as PlAdvancedFilterFilter"
           :items="options"
           :enable-dnd="enableDnd"
           :get-suggest-options="getSuggestOptions"

package/src/pages/PlAnnotationPage.vue CHANGED Viewed

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { randomInt } from '@milaboratories/helpers';
-import type { PObjectId, SimplifiedUniversalPColumnEntry, SUniversalPColumnId } from '@platforma-sdk/model';
+import { stringifyColumnId, type ListOptionBase, type PObjectId, type SUniversalPColumnId, type CanonicalizedJson, type AxisId } from '@platforma-sdk/model';
+import type { PlAdvancedFilterItem, Annotation } from '@platforma-sdk/ui-vue';
 import { PlAnnotationsModal } from '@platforma-sdk/ui-vue';
 import { ref, watch } from 'vue';
@@ -11,11 +12,17 @@ watch(showModal, (value) => {
   }
 });
-const mockAnnotations = ref({
+const sampleNameId = stringifyColumnId({ name: 'sample_name', axes: [] }) as SUniversalPColumnId;
+const countId = stringifyColumnId({ name: 'count', axes: [] }) as SUniversalPColumnId;
+const descriptionId = stringifyColumnId({ name: 'description', axes: [] }) as SUniversalPColumnId;
+const scoreId = stringifyColumnId({ name: 'score', axes: [] }) as SUniversalPColumnId;
+const frequencyId = stringifyColumnId({ name: 'frequency', axes: [] }) as SUniversalPColumnId;
+const mockAnnotations = ref<Annotation>({
   title: 'Sample Pattern Filter',
   steps: [
     {
-      id: 1,
+      id: randomInt(),
       label: 'Text Pattern Filter',
       filter: {
         id: randomInt(),
@@ -24,14 +31,14 @@ const mockAnnotations = ref({
           {
             id: randomInt(),
             type: 'patternEquals' as const,
-            column: 'sample_name' as SUniversalPColumnId,
+            column: sampleNameId,
             value: 'Sample_001',
           },
         ],
       },
     },
     {
-      id: 2,
+      id: randomInt(),
       label: 'Numeric Comparison',
       filter: {
         id: randomInt(),
@@ -40,7 +47,7 @@ const mockAnnotations = ref({
           {
             id: randomInt(),
             type: 'greaterThan' as const,
-            column: 'count' as SUniversalPColumnId,
+            column: countId,
             x: 100,
           },
         ],
@@ -49,53 +56,87 @@ const mockAnnotations = ref({
   ],
 });
-const mockColumns = ref<SimplifiedUniversalPColumnEntry[]>([
+const mockColumns = ref<PlAdvancedFilterItem[]>([
   {
-    id: 'sample_name' as SUniversalPColumnId,
+    id: sampleNameId,
     label: 'Sample Name',
-    obj: {
+    error: false,
+    spec: {
+      kind: 'PColumn',
+      name: 'sample_name',
       valueType: 'String' as const,
-      annotations: {},
+      axesSpec: [],
     },
   },
   {
-    id: 'count' as SUniversalPColumnId,
+    id: countId,
     label: 'Count',
-    obj: {
+    error: false,
+    spec: {
+      kind: 'PColumn',
+      name: 'count',
       valueType: 'Int' as const,
-      annotations: {},
+      axesSpec: [],
     },
   },
   {
-    id: 'description' as SUniversalPColumnId,
+    id: descriptionId,
     label: 'Description',
-    obj: {
+    error: false,
+    spec: {
+      kind: 'PColumn',
+      name: 'description',
       valueType: 'String' as const,
-      annotations: {},
+      axesSpec: [],
     },
   },
   {
-    id: 'score' as SUniversalPColumnId,
+    id: scoreId,
     label: 'Score',
-    obj: {
+    error: false,
+    spec: {
+      kind: 'PColumn',
+      name: 'score',
       valueType: 'Double' as const,
-      annotations: {},
+      axesSpec: [],
     },
   },
   {
-    id: 'frequency' as SUniversalPColumnId,
+    id: frequencyId,
     label: 'Frequency',
-    obj: {
+    error: false,
+    spec: {
+      kind: 'PColumn',
+      name: 'frequency',
       valueType: 'Float' as const,
-      annotations: {},
+      axesSpec: [],
     },
   },
 ]);
+const uniqueValuesByColumnId: Record<string, ListOptionBase<string>[]> = {
+  [sampleNameId]: [
+    { value: 'Sample_001', label: 'Sample_001' },
+    { value: 'Sample_002', label: 'Sample_002' },
+    { value: 'Sample_003', label: 'Sample_003' },
+    { value: 'Control_001', label: 'Control_001' },
+    { value: 'Control_002', label: 'Control_002' },
+  ],
+};
+async function getSuggestOptions({ columnId, searchStr }: { columnId: SUniversalPColumnId | CanonicalizedJson<AxisId>; searchStr: string; axisIdx?: number }) {
+  return (uniqueValuesByColumnId[columnId] || []).filter((v) => v.label.toLowerCase().includes(searchStr.toLowerCase()));
+}
+async function getSuggestModel({ columnId, searchStr }: { columnId: SUniversalPColumnId | CanonicalizedJson<AxisId>; searchStr: string; axisIdx?: number }) {
+  const columnValues = uniqueValuesByColumnId[columnId];
+  return columnValues?.find((v) => v.value === searchStr) || { value: searchStr, label: `Label of ${searchStr}` };
+}
 const getValuesForSelectedColumns = async () => {
   // Mock implementation - in real app this would fetch actual column values
   return {
-    columnId: 'sample_name' as PObjectId,
+    columnId: sampleNameId as PObjectId,
     values: ['Sample_001', 'Sample_002', 'Sample_003', 'Control_001', 'Control_002'],
   };
 };
@@ -108,6 +149,8 @@ const getValuesForSelectedColumns = async () => {
       v-model:annotation="mockAnnotations"
       :columns="mockColumns"
       :hasSelectedColumns="true"
+      :getSuggestOptions="getSuggestOptions"
+      :getSuggestModel="getSuggestModel"
       :getValuesForSelectedColumns="getValuesForSelectedColumns"
     />