@platforma-sdk/ui-vue 1.42.15 → 1.42.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.42.15",
+  "version": "1.42.19",
   "type": "module",
   "main": "dist/lib.js",
   "styles": "dist/lib.js",
@@ -26,8 +26,8 @@
     "d3-format": "^3.1.0",
     "zod": "~3.23.8",
     "@milaboratories/biowasm-tools": "^1.1.0",
-    "@milaboratories/uikit": "2.4.1",
-    "@platforma-sdk/model": "~1.42.15"
+    "@platforma-sdk/model": "~1.42.16",
+    "@milaboratories/uikit": "2.4.2"
   },
   "devDependencies": {
     "happy-dom": "^15.11.7",
@@ -43,10 +43,10 @@
     "yarpm": "^1.2.0",
     "fast-json-patch": "^3.1.1",
     "@faker-js/faker": "^9.2.0",
-    "@milaboratories/ts-configs": "1.0.5",
     "@milaboratories/build-configs": "1.0.5",
-    "@milaboratories/eslint-config": "^1.0.4",
-    "@milaboratories/helpers": "^1.6.19"
+    "@milaboratories/ts-configs": "1.0.5",
+    "@milaboratories/helpers": "^1.6.19",
+    "@milaboratories/eslint-config": "^1.0.4"
   },
   "scripts": {
     "test": "vitest run --passWithNoTests",

package/src/components/PlAgDataTable/sources/table-source-v2.ts

@@ -23,6 +23,10 @@ import {
   isColumnHidden,
   matchAxisId,
   isPTableValueAxis,
+  readAnnotation,
+  Annotation,
+  ValueType,
+  readAnnotationJson,
 } from '@platforma-sdk/model';
 import type {
   CellStyle,
@@ -180,12 +184,12 @@ export async function calculateGridOptions({
   indices.sort((a, b) => {
     if (specs[a].type !== specs[b].type) return specs[a].type === 'axis' ? -1 : 1;
 
-    const aPriority = specs[a].spec.annotations?.['pl7.app/table/orderPriority'];
-    const bPriority = specs[b].spec.annotations?.['pl7.app/table/orderPriority'];
+    const aPriority = readAnnotationJson(specs[a].spec, Annotation.Table.OrderPriority);
+    const bPriority = readAnnotationJson(specs[b].spec, Annotation.Table.OrderPriority);
 
     if (aPriority === undefined) return bPriority === undefined ? 0 : 1;
     if (bPriority === undefined) return -1;
-    return Number(bPriority) - Number(aPriority);
+    return bPriority - aPriority;
   });
 
   // fields are indices of columns that would go to columnDefs
@@ -331,7 +335,7 @@ export function makeColDef(
     mainMenuItems: defaultMainMenuItems,
     context: spec,
     field: `${iCol}`,
-    headerName: labeledSpec.spec.annotations?.['pl7.app/label']?.trim() ?? `Unlabeled ${spec.type} ${iCol}`,
+    headerName: readAnnotation(labeledSpec.spec, Annotation.Label)?.trim() ?? `Unlabeled ${spec.type} ${iCol}`,
     lockPosition: spec.type === 'axis',
     hide: hiddenColIds?.includes(colId) ?? isColumnOptional(spec.spec),
     valueFormatter: columnRenderingSpec.valueFormatter,
@@ -358,13 +362,13 @@ export function makeColDef(
     headerComponentParams: {
       type: ((): PlAgHeaderComponentType => {
         switch (valueType) {
-          case 'Int':
-          case 'Long':
-          case 'Float':
-          case 'Double':
+          case ValueType.Int:
+          case ValueType.Long:
+          case ValueType.Float:
+          case ValueType.Double:
             return 'Number';
-          case 'String':
-          case 'Bytes':
+          case ValueType.String:
+          case ValueType.Bytes:
             return 'Text';
           default:
             throw Error(`unsupported data type: ${valueType}`);
@@ -373,13 +377,13 @@ export function makeColDef(
     } satisfies PlAgHeaderComponentParams,
     cellDataType: (() => {
       switch (valueType) {
-        case 'Int':
-        case 'Long':
-        case 'Float':
-        case 'Double':
+        case ValueType.Int:
+        case ValueType.Long:
+        case ValueType.Float:
+        case ValueType.Double:
           return 'number';
-        case 'String':
-        case 'Bytes':
+        case ValueType.String:
+        case ValueType.Bytes:
           return 'text';
         default:
           throw Error(`unsupported data type: ${valueType}`);

package/src/components/PlAgDataTable/sources/value-rendering.ts

@@ -1,4 +1,12 @@
-import { isPTableAbsent, PTableNA, type PTableColumnSpec, type PTableValue } from '@platforma-sdk/model';
+import {
+  Annotation,
+  isPTableAbsent,
+  PTableNA,
+  readAnnotation,
+  ValueType,
+  type PTableColumnSpec,
+  type PTableValue,
+} from '@platforma-sdk/model';
 import type { ValueFormatterFunc } from 'ag-grid-enterprise';
 import type { PTableHidden } from './common';
 import { isPTableHidden } from './common';
@@ -26,11 +34,11 @@ export function getColumnRenderingSpec(spec: PTableColumnSpec): ColumnRenderingS
   const valueType = spec.type === 'axis' ? spec.spec.type : spec.spec.valueType;
   let renderSpec: ColumnRenderingSpec;
   switch (valueType) {
-    case 'Int':
-    case 'Long':
-    case 'Float':
-    case 'Double': {
-      const format = spec.spec.annotations?.['pl7.app/format'];
+    case ValueType.Int:
+    case ValueType.Long:
+    case ValueType.Float:
+    case ValueType.Double: {
+      const format = readAnnotation(spec.spec, Annotation.Format);
       const formatFn = format ? d3.format(format) : undefined;
       renderSpec = {
         valueFormatter: (params) => {
@@ -51,7 +59,7 @@ export function getColumnRenderingSpec(spec: PTableColumnSpec): ColumnRenderingS
       };
       break;
   }
-  const fontFamily = spec.spec.annotations?.['pl7.app/table/fontFamily'];
+  const fontFamily = readAnnotation(spec.spec, Annotation.Table.FontFamily);
   if (fontFamily) renderSpec.fontFamily = fontFamily;
   return renderSpec;
 }

package/src/components/PlAgGridColumnManager/PlAgGridColumnManager.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { PlBtnGhost, PlElementList, PlSearchField, PlSlideModal, usePlBlockPageTitleTeleportTarget } from '@milaboratories/uikit';
 import { type Column, type DisplayedColumnsChangedEvent, type GridApi } from 'ag-grid-enterprise';
-import { PlBtnGhost, PlSlideModal, PlElementList, usePlBlockPageTitleTeleportTarget } from '@milaboratories/uikit';
-import { ref, toRefs, watch, computed } from 'vue';
+import { computed, ref, toRefs, watch } from 'vue';
 import { PlAgDataTableRowNumberColId } from '../PlAgDataTable/sources/row-number';
+import { useFilteredItems } from './useFilteredItems';
 
 const props = defineProps<{
   /**
@@ -46,8 +47,16 @@ const items = computed(() => {
   }));
 });
 
+const query = ref('');
+
 const slideModal = ref(false);
 const teleportTarget = usePlBlockPageTitleTeleportTarget('PlAgGridColumnManager');
+
+const { filteredItems, segments } = useFilteredItems(() => ({
+  items: items.value,
+  query: query.value,
+  getStrings: (item) => [item.label],
+}));
 </script>
 
 <template>
@@ -60,8 +69,9 @@ const teleportTarget = usePlBlockPageTitleTeleportTarget('PlAgGridColumnManager'
 
     <PlSlideModal v-model="slideModal" :width="width" close-on-outside-click>
       <template #title>Manage Columns</template>
+      <PlSearchField v-model="query" clearable />
       <PlElementList
-        :items="items"
+        :items="filteredItems"
         :get-item-key="(item) => item.id"
         :is-draggable="(item) => !item.column.getColDef().lockPosition"
         :on-sort="(fromIndex, toIndex) => {
@@ -80,12 +90,26 @@ const teleportTarget = usePlBlockPageTitleTeleportTarget('PlAgGridColumnManager'
         :is-toggable="(item) => item.id !== PlAgDataTableRowNumberColId"
         :is-pinned="(item) => !!item.column.getColDef().lockPosition"
         :is-pinnable="() => false"
+        :disable-dragging="query.length > 0"
         disable-removing
       >
         <template #item-title="{ item }">
-          {{ item.label }}
+          <span>
+            <span
+              v-for="(segment, i) of segments.get(item.label)"
+              :key="i"
+              :class="{ [$style.match]: segment.match }"
+            >{{ segment.value }}</span>
+          </span>
         </template>
       </PlElementList>
     </PlSlideModal>
   </div>
 </template>
+
+<style module>
+.match {
+  background-color: var(--color-active-select);
+  border-radius: 2px;
+}
+</style>

package/src/components/PlAgGridColumnManager/useFilteredItems.ts

@@ -0,0 +1,68 @@
+import { computed, type MaybeRefOrGetter, toValue } from 'vue';
+
+export function useFilteredItems<T>(
+  props: MaybeRefOrGetter<{
+    items: T[];
+    query: string;
+    getStrings: (item: T) => Iterable<string>;
+  }>,
+) {
+  const result = computed(() => {
+    const { items, query, getStrings } = toValue(props);
+    const filteredItems: T[] = [];
+    const segments = new Map<string, StringSegment[]>();
+    for (const item of items) {
+      let kept = false;
+      for (const string of getStrings(item)) {
+        let stringSegments = segments.get(string);
+        if (!stringSegments) {
+          stringSegments = matchSubstrings(string, query);
+          segments.set(string, stringSegments);
+        }
+        if (!kept && (!query || stringSegments.some(({ match }) => match))) {
+          filteredItems.push(item);
+          kept = true;
+        }
+      }
+    }
+    return { filteredItems, segments };
+  });
+  return {
+    filteredItems: computed(() => result.value.filteredItems),
+    segments: computed(() => result.value.segments),
+  };
+}
+
+// Very naïve implementation of substring matching, doesn't handle Unicode well
+// Maybe one day we'll have nice things: https://github.com/tc39/ecma402/issues/506
+function matchSubstrings(haystack: string, needle: string): StringSegment[] {
+  if (!needle) return [{ value: haystack, match: false }];
+  const haystackLower = haystack.toLowerCase();
+  const needleLower = needle.toLowerCase();
+  const result: StringSegment[] = [];
+  let prevEnd = 0;
+  while (true) {
+    const start = haystackLower.indexOf(needleLower, prevEnd);
+    const end = start + needle.length;
+    if (start < 0) break;
+    if (prevEnd !== start) {
+      result.push({ value: haystack.slice(prevEnd, start), match: false });
+    }
+    const prevSegment = result.at(-1);
+    if (prevSegment?.match) {
+      prevSegment.value += haystack.slice(start, end);
+    } else {
+      result.push({ value: haystack.slice(start, end), match: true });
+    }
+    prevEnd = end;
+  }
+  if (prevEnd < haystack.length) {
+    result.push({ value: haystack.slice(prevEnd), match: false });
+  }
+  return result;
+}
+
+type StringSegment = {
+  value: string;
+  match: boolean;
+};

package/src/components/PlAppErrorNotificationAlert/PlAppErrorNotificationAlert.vue

@@ -40,6 +40,7 @@ watch(
             <PlLogView
               :value="item[1]?.message"
               :valueToCopy="'fullMessage' in (item[1] ?? {}) ? (item[1] as unknown as FullMessage).fullMessage : item[1]?.message"
+              :download-filename="`output-${item[0]}-error.txt`"
             />
           </div>
         </template>

package/src/components/PlMultiSequenceAlignment/data.ts

@@ -22,6 +22,9 @@ import {
   type PTableColumnId,
   type PTableSorting,
   pTableValue,
+  readAnnotation,
+  Annotation,
+  readAnnotationJson,
 } from '@platforma-sdk/model';
 import { ref, watch } from 'vue';
 import { highlightByChemicalProperties } from './chemical-properties';
@@ -68,7 +71,7 @@ async function getSequenceColumnsOptions({
   const options = columns.values()
     .filter((column) => sequenceColumnPredicate(column))
     .map(({ spec, columnId }) => ({
-      label: spec.annotations?.['pl7.app/label'] ?? 'Unlabeled column',
+      label: readAnnotation(spec, Annotation.Label) ?? 'Unlabeled column',
       value: columnId,
     }))
     .toArray();
@@ -109,8 +112,8 @@ async function getLabelColumnsOptions({
       labelColumn
         ? canonicalizeJson({ type: 'column', id: labelColumn.columnId })
         : canonicalizeJson({ type: 'axis', id: axisId }),
-      labelColumn?.spec.annotations?.['pl7.app/label']
-      ?? axisSpec.annotations?.['pl7.app/label']
+      readAnnotation(labelColumn?.spec, Annotation.Label)
+      ?? readAnnotation(axisSpec, Annotation.Label)
       ?? 'Unlabeled axis',
     );
   }
@@ -124,11 +127,11 @@ async function getLabelColumnsOptions({
   });
 
   for (const { columnId, spec } of compatibleColumns) {
-    const columnIdJson = canonicalizeJson({ type: 'column', id: columnId });
+    const columnIdJson = canonicalizeJson({ type: 'column', id: columnId } satisfies PTableColumnId);
     if (optionMap.has(columnIdJson)) continue;
     optionMap.set(
       columnIdJson,
-      spec.annotations?.['pl7.app/label'] ?? 'Unlabeled column',
+      readAnnotation(spec, Annotation.Label) ?? 'Unlabeled column',
     );
   }
 
@@ -168,14 +171,14 @@ async function getMarkupColumnsOptions({
   }
   return columns.values()
     .filter((column) =>
-      column.spec.annotations?.['pl7.app/sequence/isAnnotation'] === 'true'
+      !!readAnnotationJson(column.spec, Annotation.Sequence.IsAnnotation)
       && isJsonEqual(sequenceColumn.spec.axesSpec, column.spec.axesSpec)
       && Object.entries(sequenceColumn.spec.domain ?? {}).every((
         [key, value],
       ) => column.spec.domain?.[key] === value),
     ).map(({ columnId, spec }) => ({
       value: columnId,
-      label: spec.annotations?.['pl7.app/label'] ?? 'Unlabeled column',
+      label: readAnnotation(spec, Annotation.Label) ?? 'Unlabeled column',
     }))
     .toArray();
 }
@@ -339,7 +342,7 @@ async function getMultipleAlignmentData({
   );
 
   const sequenceNames = sequenceColumns.map((column) =>
-    column.spec.spec.annotations?.['pl7.app/label'] ?? 'Unlabeled column',
+    readAnnotation(column.spec.spec, Annotation.Label) ?? 'Unlabeled column',
   );
 
   const labels = Array.from(
@@ -386,10 +389,7 @@ async function getMultipleAlignmentData({
         return markupAlignedSequence(sequences[row][0], markup);
       },
     );
-    const labels: Record<string, string> = JSON.parse(
-      markupColumn.spec.spec.annotations
-        ?.['pl7.app/sequence/annotation/mapping'] ?? '{}',
-    );
+    const labels = readAnnotationJson(markupColumn.spec.spec, Annotation.Sequence.Annotation.Mapping) ?? {};
     result.highlightImage = highlightByMarkup({
       markupRows,
       columnCount: concatenatedSequences.at(0)?.length ?? 0,

package/src/components/PlTableFilters/filters_logic.ts

@@ -12,6 +12,12 @@ import {
   type PlTableFilter,
   type PTableColumnSpec,
   getRawPlatformaInstance,
+  readDomain,
+  Annotation,
+  Domain,
+  readAnnotation,
+  parseJson,
+  readAnnotationJson,
 } from '@platforma-sdk/model';
 import semver from 'semver';
 import type { ListOption } from '@milaboratories/uikit';
@@ -127,7 +133,7 @@ export const isFilterDiscrete = (filter: PlTableFilter): filter is PlTableFilter
 };
 
 export function getColumnName(column: PTableColumnSpec, index: string | number) {
-  return column.spec.annotations?.['pl7.app/label']?.trim() ?? 'Unlabeled ' + column.type + ' ' + index.toString();
+  return readAnnotation(column.spec, Annotation.Label)?.trim() ?? 'Unlabeled ' + column.type + ' ' + index.toString();
 }
 
 export function getFilterReference(filter: PlTableFilter): undefined | number | string {
@@ -220,18 +226,16 @@ export function parseNumber(column: PTableColumnSpec, value: string): 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'];
+  const min = readAnnotationJson(column.spec, Annotation.Min);
   if (min !== undefined) {
-    const minValue = Number(min);
-    if (Number.isFinite(minValue) && parsed < Number(min)) {
+    if (Number.isFinite(min) && parsed < min) {
       throw Error('Model value is too low.');
     }
   }
 
-  const max = column.spec.annotations?.['pl7.app/max'];
+  const max = readAnnotationJson(column.spec, Annotation.Max);
   if (max !== undefined) {
-    const maxValue = Number(max);
-    if (Number.isFinite(maxValue) && parsed > Number(max)) {
+    if (Number.isFinite(max) && parsed > max) {
       throw Error('Model value is too high.');
     }
   }
@@ -240,7 +244,7 @@ export function parseNumber(column: PTableColumnSpec, value: string): number {
 }
 
 export function parseString(column: PTableColumnSpec, value: string): string {
-  const alphabet = column.spec.domain?.['pl7.app/alphabet'] ?? column.spec.annotations?.['pl7.app/alphabet'];
+  const alphabet = readDomain(column.spec, Domain.Alphabet) ?? readAnnotation(column.spec, Annotation.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;
@@ -260,8 +264,7 @@ export function makeWildcardOptions(
   column: PTableColumnSpec,
   reference: string,
 ): ListOption<string>[] {
-  const alphabet = column.spec.domain?.['pl7.app/alphabet']
-    ?? column.spec.annotations?.['pl7.app/alphabet'];
+  const alphabet = readDomain(column.spec, Domain.Alphabet) ?? readAnnotation(column.spec, Annotation.Alphabet);
   if (alphabet === 'nucleotide') {
     return [{
       label: 'N',
@@ -283,17 +286,17 @@ export function makeWildcardOptions(
 }
 
 export function makeDiscreteOptions(column: PTableColumnSpec): ListOption<number | string>[] {
-  const discreteValuesAnnotation = column.spec.annotations?.['pl7.app/discreteValues'];
+  const discreteValuesAnnotation = readAnnotation(column.spec, Annotation.DiscreteValues);
   if (!discreteValuesAnnotation) return [];
 
   try {
-    const discreteValues: (string | number)[] = JSON.parse(discreteValuesAnnotation);
+    const discreteValues = parseJson<number[] | string[]>(discreteValuesAnnotation);
     return discreteValues.map((v) => ({
-      label: v.toString(),
+      label: `${v}`,
       value: v,
     }));
   } catch (err: unknown) {
-    console.error(`Column ${column.id} has invalid 'pl7.app/discreteValues' annotation: '${discreteValuesAnnotation}'`, err);
+    console.error(`Column ${column.id} has invalid '${Annotation.DiscreteValues}' annotation: '${discreteValuesAnnotation}'`, err);
     return [];
   }
 }
@@ -301,7 +304,7 @@ export function makeDiscreteOptions(column: PTableColumnSpec): ListOption<number
 export function isAlphabetic(column: PTableColumnSpec): boolean {
   return semver.gt(getRawPlatformaInstance().sdkInfo.sdkVersion, '1.14.0')
     && (column.type === 'column' ? column.spec.valueType : column.spec.type) === 'String'
-    && (column.spec.domain?.['pl7.app/alphabet'] ?? column.spec.annotations?.['pl7.app/alphabet']) !== undefined;
+    && (readDomain(column.spec, Domain.Alphabet) ?? readAnnotation(column.spec, Annotation.Alphabet)) !== undefined;
 }
 
 export function makePredicate(alphabetic: boolean, filter: PlTableFilter): SingleValuePredicateV2 {

package/dist/lib/ui/uikit/dist/components/PlAccordion/ExpandTransition.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExpandTransition.vue.js","sources":["../../../../../../../../../lib/ui/uikit/src/components/PlAccordion/ExpandTransition.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst onStart = (el: Element) => {\n  el.classList.add('expand-collapse-fix');\n  (el as HTMLElement).style.setProperty('--component-height', el.scrollHeight + 'px');\n};\n\nconst onAfter = (el: Element) => {\n  (el as HTMLElement).style.removeProperty('--component-height');\n  el.classList.remove('expand-collapse-fix');\n};\n</script>\n\n<template>\n  <Transition name=\"expand-collapse\" @enter=\"onStart\" @leave=\"onStart\" @after-enter=\"onAfter\" @after-leave=\"onAfter\">\n    <slot/>\n  </Transition>\n</template>\n\n<style>\n.expand-collapse-fix {\n  overflow: hidden;\n}\n\n.expand-collapse-enter-active,\n.expand-collapse-leave-active {\n  transition:\n    height 0.2s ease-in-out,\n    opacity 0.2s ease-in-out;\n  height: var(--component-height);\n}\n\n.expand-collapse-enter-from,\n.expand-collapse-leave-to {\n  opacity: 0.5;\n  height: 0;\n}\n</style>\n"],"names":["onStart","el","onAfter"],"mappings":";;;;AACMA,UAAAA,IAAU,CAACC,MAAgB;AAC5BA,QAAA,UAAU,IAAI,qBAAqB,GACrCA,EAAmB,MAAM,YAAY,sBAAsBA,EAAG,eAAe,IAAI;AAAA,IAAA,GAG9EC,IAAU,CAACD,MAAgB;AAC9BA,QAAmB,MAAM,eAAe,oBAAoB,GAC1DA,EAAA,UAAU,OAAO,qBAAqB;AAAA,IAC3C;;;;;;;;;;;;;;;"}

package/dist/lib/ui/uikit/dist/generated/components/svg/images/SvgRequired.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SvgRequired.vue.js","sources":["../../../../../../../../../../../lib/ui/uikit/src/generated/components/svg/images/SvgRequired.vue"],"sourcesContent":["<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->\n<script lang=\"ts\">\nimport '../svg-styles.css';\nexport default { name: 'SvgRequired' };\n</script>\n\n<template>\n  <div class=\"svg-icon SvgRequired\" style=\"width: 5px; height: 12px\" />\n</template>\n\n<style>\n  .SvgRequired { background-image: url(\"data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%225%22%20height%3D%2212%22%20viewBox%3D%220%200%205%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.51685%204.8L2.5%203.34159L3.47612%204.8L4.39607%204.12743L3.31461%202.7469L5%202.25133L4.64888%201.16106L3.00562%201.77699L3.06882%200H1.93118L1.99438%201.77699L0.351124%201.16106L0%202.25133L1.68539%202.7469L0.59691%204.12743L1.51685%204.8Z%22%20fill%3D%22%23F1222F%22%2F%3E%3C%2Fsvg%3E\"); }\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAOoC,MAAA,IAAA;AAAA,EAAA,OAAA;AAAA;;;;;;"}