@platforma-sdk/ui-vue 1.33.17 → 1.34.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.33.17",
+  "version": "1.34.4",
   "type": "module",
   "main": "dist/lib.js",
   "module": "dist/lib.js",
@@ -21,24 +21,24 @@
     "lru-cache": "^11.1.0",
     "vue": "^3.5.13",
     "@milaboratories/biowasm-tools": "^1.1.0",
-    "@milaboratories/uikit": "^2.2.82",
-    "@platforma-sdk/model": "^1.33.17"
+    "@milaboratories/uikit": "^2.2.83",
+    "@platforma-sdk/model": "^1.34.0"
   },
   "devDependencies": {
     "@faker-js/faker": "^9.2.0",
     "@types/lodash": "^4.17.16",
     "@types/node": "~20.16.15",
-    "@types/semver": "^7.5.8",
+    "@types/semver": "^7.7.0",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vueuse/core": "~12.4.0",
     "d3-format": "^3.1.0",
     "@types/d3-format": "^3.0.4",
     "canonicalize": "~2.1.0",
     "happy-dom": "^15.11.7",
-    "lodash": "^4.17.15",
-    "rollup-plugin-sourcemaps2": "^0.5.0",
+    "lodash": "^4.17.17",
+    "rollup-plugin-sourcemaps2": "^0.5.2",
     "sass": "~1.83.4",
-    "semver": "^7.6.3",
+    "semver": "^7.7.2",
     "typescript": "~5.5.4",
     "vite": "^6.3.5",
     "vitest": "^2.1.9",

package/src/components/PlMultiSequenceAlignment/MultiSequenceAlignmentView.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { PlSplash } from '@milaboratories/uikit';
 import { useObjectUrl } from '@vueuse/core';
-import { computed, reactive } from 'vue';
+import { computed } from 'vue';
 import Consensus from './Consensus.vue';
 import { colorizeSegmentedColumns } from './highlight';
 import {
@@ -9,33 +8,33 @@ import {
   chemicalPropertiesColors,
   getColumnChemicalProperties,
 } from './highlight/chemical-properties';
-import { useAlignedSequences } from './multi-sequence-alignment';
 import { getResidueCounts } from './residue-counts';
 import SeqLogo from './SeqLogo.vue';
-import type { ColorScheme, SequenceRow } from './types';
+import type { ColorScheme } from './types';
 
-const { sequenceRows, colorScheme } = defineProps<{
-  sequenceRows: SequenceRow[];
+const { sequenceRows, labelRows, colorScheme } = defineProps<{
+  sequenceRows: string[][];
+  labelRows: string[][];
   colorScheme: ColorScheme;
   consensus: boolean;
   seqLogo: boolean;
 }>();
 
-const alignedSequences = reactive(useAlignedSequences(
-  () => sequenceRows.map(({ sequence }) => sequence),
-));
+const concatenatedSequences = computed(() =>
+  sequenceRows.map((row) => row.join('')),
+);
 
 const residueCounts = computed(
-  () => getResidueCounts(alignedSequences.data),
+  () => getResidueCounts(concatenatedSequences.value),
 );
 
 const segmentedColumns = computed(() => {
   const columnConsensuses = getColumnChemicalProperties({
     residueCounts: residueCounts.value,
-    rowCount: alignedSequences.data.length,
+    rowCount: sequenceRows.length,
   });
   const segmentedColumns = alignedSequencesToSegmentedColumns({
-    alignedSequences: alignedSequences.data,
+    alignedSequences: concatenatedSequences.value,
     consensuses: columnConsensuses,
   });
   return segmentedColumns;
@@ -71,38 +70,32 @@ const highlightImage = computed(
 </script>
 
 <template>
-  <PlSplash
-    :class="['pl-scrollable', $style.root]"
-    :loading="alignedSequences.loading"
-    type="transparent"
-  >
+  <div :class="['pl-scrollable', $style.root]">
     <div :class="$style.corner" />
     <div :class="$style.header">
       <Consensus v-if="consensus" :residueCounts />
       <SeqLogo v-if="seqLogo" :residueCounts />
     </div>
-    <template v-if="alignedSequences.data.length">
-      <div :class="$style['labels-container']">
-        <template v-for="({ labels }, rowIndex) of sequenceRows">
-          <div
-            v-for="(label, labelIndex) of labels"
-            :key="labelIndex"
-            :style="{ gridRow: rowIndex + 1 }"
-          >
-            {{ label }}
-          </div>
-        </template>
-      </div>
-      <div :class="$style['sequence-data']">
+    <div :class="$style.labels">
+      <template v-for="(labelRow, rowIndex) of labelRows">
         <div
-          v-for="(sequence, sequenceIndex) of alignedSequences.data"
-          :key="sequenceIndex"
+          v-for="(label, labelIndex) of labelRow"
+          :key="labelIndex"
+          :style="{ gridRow: rowIndex + 1 }"
         >
-          {{ sequence }}
+          {{ label }}
         </div>
+      </template>
+    </div>
+    <div :class="$style.sequences">
+      <div
+        v-for="(sequence, sequenceIndex) of concatenatedSequences"
+        :key="sequenceIndex"
+      >
+        {{ sequence }}
       </div>
-    </template>
-  </PlSplash>
+    </div>
+  </div>
 </template>
 
 <style module>
@@ -133,7 +126,7 @@ const highlightImage = computed(
   z-index: 1;
 }
 
-.labels-container {
+.labels {
   grid-area: labels;
   display: grid;
   grid-auto-flow: dense;
@@ -147,7 +140,7 @@ const highlightImage = computed(
   line-height: calc(24 / 14);
 }
 
-.sequence-data {
+.sequences {
   grid-area: sequences;
   display: flex;
   flex-direction: column;

package/src/components/PlMultiSequenceAlignment/PlMultiSequenceAlignment.vue

@@ -1,24 +1,30 @@
 <script lang="ts" setup>
-import { PlAlert } from '@milaboratories/uikit';
+import { PlAlert, PlSplash } from '@milaboratories/uikit';
 import type {
   PColumnPredicate,
   PFrameHandle,
   PlMultiSequenceAlignmentModel,
   PlSelectionModel,
 } from '@platforma-sdk/model';
-import { computed, ref } from 'vue';
+import { computed, onBeforeMount, reactive, ref } from 'vue';
 import {
+  sequenceLimit,
   useLabelColumnsOptions,
+  useMultipleAlignmentData,
   useSequenceColumnsOptions,
-  useSequenceRows,
 } from './data';
 import Legend from './Legend.vue';
+import { runMigrations } from './migrations';
 import MultiSequenceAlignmentView from './MultiSequenceAlignmentView.vue';
 import { defaultSettings } from './settings';
 import Toolbar from './Toolbar.vue';
 
 const model = defineModel<PlMultiSequenceAlignmentModel>({ default: {} });
 
+onBeforeMount(() => {
+  runMigrations(model);
+});
+
 const props = defineProps<{
   /**
    * Handle to PFrame created using `createPFrameForGraphs`.
@@ -74,36 +80,78 @@ const selectedLabelColumnIds = computed({
   },
 });
 
-const sequenceRows = useSequenceRows(() => ({
+const multipleAlignmentData = reactive(useMultipleAlignmentData(() => ({
   pframe: props.pFrame,
   sequenceColumnIds: selectedSequenceColumnIds.value,
   labelColumnIds: selectedLabelColumnIds.value,
   linkerColumnPredicate: props.linkerColumnPredicate,
   selection: props.selection,
-}));
+})));
 
 const settings = ref(defaultSettings);
+
+const formatNumber = new Intl.NumberFormat('en').format;
+
+const selectedTooManySequences = computed(
+  () => props.selection && props.selection.selectedKeys.length > sequenceLimit,
+);
 </script>
 
 <template>
-  <PlAlert v-if="sequenceRows.length < 2" type="warn">
+  <Toolbar
+    v-model:sequence-columns="selectedSequenceColumnIds"
+    v-model:label-columns="selectedLabelColumnIds"
+    v-model:settings="settings"
+    :sequence-column-options="sequenceColumns.options"
+    :label-column-options="labelColumns.options"
+  />
+  <PlAlert
+    v-if="
+      !multipleAlignmentData.loading
+        && multipleAlignmentData.data.sequences.length < 2
+    "
+    type="warn"
+    icon
+  >
     Please select at least one sequence column and two or more rows to run
     alignment
   </PlAlert>
   <template v-else>
-    <Toolbar
-      v-model:sequence-columns="selectedSequenceColumnIds"
-      v-model:label-columns="selectedLabelColumnIds"
-      v-model:settings="settings"
-      :sequence-column-options="sequenceColumns.options"
-      :label-column-options="labelColumns.options"
-    />
-    <MultiSequenceAlignmentView
-      :sequenceRows
-      :colorScheme="settings.colorScheme"
-      :consensus="settings.consensus"
-      :seq-logo="settings.seqLogo"
-    />
-    <Legend v-if="settings.legend" />
+    <PlAlert
+      v-if="selectedTooManySequences"
+      type="warn"
+      icon
+      label="Visualization is limited"
+    >
+      MSA visualization supports {{ formatNumber(2) }} to
+      {{ formatNumber(sequenceLimit) }} sequences. Only the first
+      {{ formatNumber(sequenceLimit) }} will be desplayed.
+    </PlAlert>
+    <PlSplash
+      type="transparent"
+      :class="$style.splash"
+      :loading="multipleAlignmentData.loading"
+    >
+      <template v-if="multipleAlignmentData.data.sequences.length">
+        <MultiSequenceAlignmentView
+          :sequence-rows="multipleAlignmentData.data.sequences"
+          :label-rows="multipleAlignmentData.data.labels"
+          :colorScheme="settings.colorScheme"
+          :consensus="settings.consensus"
+          :seq-logo="settings.seqLogo"
+        />
+        <Legend v-if="settings.legend" />
+      </template>
+    </PlSplash>
   </template>
 </template>
+
+<style module>
+.splash {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow: hidden;
+}
+</style>

package/src/components/PlMultiSequenceAlignment/Toolbar.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { ListOption } from '@milaboratories/uikit';
 import {
+  type ListOptionNormalized,
   PlBtnGhost,
   PlCheckbox,
   PlDropdown,
   PlDropdownMulti,
 } from '@milaboratories/uikit';
-import type { PObjectId, PTableColumnIdJson } from '@platforma-sdk/model';
+import type { PObjectId, PTableColumnId } from '@platforma-sdk/model';
 import type { Settings } from './settings';
 
 const sequenceColumns = defineModel<PObjectId[]>(
@@ -14,7 +14,7 @@ const sequenceColumns = defineModel<PObjectId[]>(
   { required: true },
 );
 
-const labelColumns = defineModel<PTableColumnIdJson[]>(
+const labelColumns = defineModel<PTableColumnId[]>(
   'labelColumns',
   { required: true },
 );
@@ -25,8 +25,8 @@ const settings = defineModel<Settings>(
 );
 
 defineProps<{
-  sequenceColumnOptions: ListOption<PObjectId>[];
-  labelColumnOptions: ListOption<PTableColumnIdJson>[];
+  sequenceColumnOptions: ListOptionNormalized<PObjectId>[];
+  labelColumnOptions: ListOptionNormalized<PTableColumnId>[];
 }>();
 </script>