@platforma-sdk/ui-vue 1.41.17 → 1.42.0

package/dist/node_modules/.pnpm/@vueuse_shared@13.3.0_vue@3.5.13_typescript@5.6.3_/node_modules/@vueuse/shared/index.js

@@ -1,4 +1,4 @@
-import { shallowRef as b, isRef as g, watch as p, shallowReadonly as T, onMounted as S, nextTick as j, toValue as m, getCurrentScope as A, onScopeDispose as C, getCurrentInstance as I } from "vue";
+import { shallowRef as b, isRef as g, watch as p, shallowReadonly as T, onMounted as S, nextTick as j, getCurrentScope as A, onScopeDispose as C, toValue as m, getCurrentInstance as I } from "vue";
 function d(e) {
   return A() ? (C(e), !0) : !1;
 }

package/dist/sdk/model/dist/index.js

@@ -1256,7 +1256,7 @@ class X {
     this.ctx.logError(e);
   }
 }
-const vt = "1.41.6", Y = vt;
+const vt = "1.42.0", Y = vt;
 function Tt(n) {
   return n.__renderLambda === !0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.41.17",
+  "version": "1.42.0",
   "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.3.22",
-    "@platforma-sdk/model": "~1.41.6"
+    "@milaboratories/uikit": "2.3.24",
+    "@platforma-sdk/model": "~1.42.0"
   },
   "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/build-configs": "1.0.5",
-    "@milaboratories/helpers": "^1.6.19",
+    "@milaboratories/ts-configs": "1.0.5",
     "@milaboratories/eslint-config": "^1.0.4",
-    "@milaboratories/ts-configs": "1.0.5"
+    "@milaboratories/helpers": "^1.6.19",
+    "@milaboratories/build-configs": "1.0.5"
   },
   "scripts": {
     "test": "vitest run --passWithNoTests",

package/src/components/PlMultiSequenceAlignment/Legend.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { ColorMap } from './types';
+import type { HighlightLegend } from './types';
 
 defineProps<{
-  colors: ColorMap;
+  legend: HighlightLegend;
 }>();
 </script>
 
 <template>
   <div :class="$style.container">
     <div
-      v-for="([key, { label, color }]) in Object.entries(colors)"
+      v-for="([key, { label, color }]) of Object.entries(legend)"
       :key="key"
       :class="$style.item"
     >
@@ -27,6 +27,7 @@ defineProps<{
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
+  max-inline-size: fit-content;
 }
 
 .item {

package/src/components/PlMultiSequenceAlignment/MultiSequenceAlignmentView.vue

@@ -1,25 +1,30 @@
 <script lang="ts" setup>
-import { useBase64 } from '@vueuse/core';
-import { computed } from 'vue';
+import { useObjectUrl } from '@vueuse/core';
+import { computed, useTemplateRef } from 'vue';
 import Consensus from './Consensus.vue';
+import Legend from './Legend.vue';
 import SeqLogo from './SeqLogo.vue';
-import type { ResidueCounts } from './types';
+import type { HighlightLegend, ResidueCounts } from './types';
 
-const { sequences, highlightImageBlob } = defineProps<{
-  sequenceNames: string[];
+const { sequences, highlightImage } = defineProps<{
   sequences: string[];
+  sequenceNames: string[];
   labelRows: string[][];
   residueCounts: ResidueCounts;
-  highlightImageBlob: Blob | undefined;
-  consensus: boolean;
-  seqLogo: boolean;
+  highlightImage: {
+    blob: Blob;
+    legend: HighlightLegend;
+  } | undefined;
+  widgets: ('consensus' | 'seqLogo' | 'legend')[];
 }>();
 
-const { base64: highlightImageBase64 } = useBase64(() => highlightImageBlob);
+const rootEl = useTemplateRef('rootRef');
+defineExpose({ rootEl });
 
-const highlightImageUrl = computed(() =>
-  highlightImageBase64.value
-    ? `url('${highlightImageBase64.value}')`
+const highlightImageObjectUrl = useObjectUrl(() => highlightImage?.blob);
+const highlightImageCssUrl = computed(() =>
+  highlightImageObjectUrl.value
+    ? `url('${highlightImageObjectUrl.value}')`
     : 'none',
 );
 
@@ -29,55 +34,70 @@ const sequenceLengths = computed(() =>
 </script>
 
 <template>
-  <div :class="['pl-scrollable', $style.root]">
-    <div :class="$style.corner" />
-    <div :class="$style.header">
-      <div v-if="sequenceNames.length > 1" :class="$style['sequence-names']">
-        <span
-          v-for="(name, index) of sequenceNames"
-          :key="index"
-          :style="
-            {
-              inlineSize: `calc(${
-                sequenceLengths?.at(index) ?? 0
-              } * 20px)`,
-            }
-          "
-        >{{ name }}</span>
+  <div ref="rootRef" :class="$style.root">
+    <div :class="['pl-scrollable', $style.table]">
+      <div :class="$style.corner" />
+      <div :class="$style.header">
+        <div v-if="sequenceNames.length > 1" :class="$style['sequence-names']">
+          <span
+            v-for="(name, index) of sequenceNames"
+            :key="index"
+            :style="{
+              inlineSize: ((sequenceLengths?.at(index) ?? 0) * 20)
+                + 'px',
+            }"
+          >{{ name }}</span>
+        </div>
+        <Consensus v-if="widgets.includes('consensus')" :residue-counts />
+        <SeqLogo v-if="widgets.includes('seqLogo')" :residue-counts />
       </div>
-      <Consensus v-if="consensus" :residue-counts />
-      <SeqLogo v-if="seqLogo" :residue-counts />
-    </div>
-    <div :class="$style.labels">
-      <template v-for="(labelRow, rowIndex) of labelRows">
+      <div :class="$style.labels">
+        <template v-for="(labelRow, rowIndex) of labelRows">
+          <div
+            v-for="(label, labelIndex) of labelRow"
+            :key="labelIndex"
+            :style="{ gridRow: rowIndex + 1 }"
+          >
+            {{ label }}
+          </div>
+        </template>
+      </div>
+      <div :class="$style.sequences">
         <div
-          v-for="(label, labelIndex) of labelRow"
-          :key="labelIndex"
-          :style="{ gridRow: rowIndex + 1 }"
+          v-for="(sequence, index) of sequences"
+          :key="index"
         >
-          {{ label }}
+          {{ sequence }}
         </div>
-      </template>
-    </div>
-    <div :class="$style.sequences">
-      <div
-        v-for="(sequence, index) of sequences"
-        :key="index"
-      >
-        {{ sequence }}
       </div>
     </div>
+    <Legend
+      v-if="widgets?.includes('legend') && highlightImage?.legend"
+      :legend="highlightImage.legend"
+    />
   </div>
 </template>
 
 <style module>
 .root {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-block-size: 0;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+
+.table {
   display: grid;
   grid-template-areas:
     "corner header"
     "labels sequences";
   text-wrap: nowrap;
   justify-content: start;
+  @media print {
+    overflow: visible;
+  }
 }
 
 .corner {
@@ -128,9 +148,9 @@ const sequenceLengths = computed(() =>
   line-height: 24px;
   letter-spacing: 11.6px;
   text-indent: 5.8px;
-  background-image: v-bind(highlightImageUrl);
+  margin-inline-end: -5.8px;
+  background-image: v-bind(highlightImageCssUrl);
   background-repeat: no-repeat;
   background-size: calc(100% - 5.8px) 100%;
-  image-rendering: pixelated;
 }
 </style>

package/src/components/PlMultiSequenceAlignment/PlMultiSequenceAlignment.vue

@@ -5,15 +5,22 @@ import {
   PlAlert,
   PlSplash,
 } from '@milaboratories/uikit';
-import type {
-  PColumnPredicate,
-  PFrameHandle,
-  PlMultiSequenceAlignmentColorSchemeOption,
-  PlMultiSequenceAlignmentModel,
-  PlMultiSequenceAlignmentSettings,
-  PlSelectionModel,
+import {
+  getRawPlatformaInstance,
+  type PColumnPredicate,
+  type PFrameHandle,
+  type PlMultiSequenceAlignmentColorSchemeOption,
+  type PlMultiSequenceAlignmentModel,
+  type PlMultiSequenceAlignmentSettings,
+  type PlSelectionModel,
 } from '@platforma-sdk/model';
-import { computed, onBeforeMount, reactive, watchEffect } from 'vue';
+import {
+  computed,
+  onBeforeMount,
+  reactive,
+  useTemplateRef,
+  watchEffect,
+} from 'vue';
 import {
   sequenceLimit,
   useLabelColumnsOptions,
@@ -21,7 +28,6 @@ import {
   useMultipleAlignmentData,
   useSequenceColumnsOptions,
 } from './data';
-import Legend from './Legend.vue';
 import { runMigrations } from './migrations';
 import MultiSequenceAlignmentView from './MultiSequenceAlignmentView.vue';
 import { defaultSettings } from './settings';
@@ -71,17 +77,10 @@ const markupColumns = reactive(useMarkupColumnsOptions(() => ({
   sequenceColumnIds: settings.sequenceColumnIds,
 })));
 
-const markupColumnId = computed(() =>
-  settings.colorScheme?.type === 'markup'
-    ? settings.colorScheme.columnId
-    : undefined,
-);
-
 const multipleAlignmentData = reactive(useMultipleAlignmentData(() => ({
   pframe: props.pFrame,
   sequenceColumnIds: settings.sequenceColumnIds,
   labelColumnIds: settings.labelColumnIds,
-  markupColumnId: markupColumnId.value,
   selection: props.selection,
   colorScheme: settings.colorScheme,
   alignmentParams: settings.alignmentParams,
@@ -165,10 +164,15 @@ watchEffect(() => {
   ) {
     settingsToReset.push('labelColumnIds');
   }
+
+  const markupColumnId = settings.colorScheme?.type === 'markup'
+    ? settings.colorScheme.columnId
+    : undefined;
+
   if (
-    markupColumnId.value
+    markupColumnId
     && !markupColumns.data?.some(
-      ({ value }) => isJsonEqual(value, markupColumnId.value),
+      ({ value }) => isJsonEqual(value, markupColumnId),
     )
   ) {
     settingsToReset.push('colorScheme');
@@ -179,6 +183,61 @@ watchEffect(() => {
     ));
   }
 });
+
+const msaEl = useTemplateRef('msa');
+
+async function exportPdf() {
+  const exportToPdf = getRawPlatformaInstance()?.lsDriver
+    ?.exportToPdf;
+  if (!exportToPdf) {
+    return console.error(
+      'API getPlatformaRawInstance().lsDriver.exportToPdf is not available',
+    );
+  }
+  const msaRoot = msaEl.value?.rootEl;
+  if (!msaRoot) {
+    throw new Error('MSA element is not available.');
+  }
+  const printTarget = document.createElement('div');
+  printTarget.id = `print-target-${crypto.randomUUID()}`;
+  const printStyleSheet = new CSSStyleSheet();
+  document.adoptedStyleSheets.push(printStyleSheet);
+  printStyleSheet.insertRule(`
+@media screen {
+  #${printTarget.id} {
+    visibility: hidden;
+    position: fixed;
+  }
+}`);
+  printTarget.replaceChildren(msaRoot.cloneNode(true));
+  document.body.appendChild(printTarget);
+  const { height, width } = printTarget.getBoundingClientRect();
+  const margin = CSS.cm(1);
+  const pageSize = [width, height]
+    .map((value) => CSS.px(value).add(margin.mul(2)))
+    .join(' ');
+  printStyleSheet.insertRule(`
+@media print {
+  @page {
+    size: ${pageSize};
+    margin: ${margin};
+  }
+  body > :not(#${printTarget.id}) {
+    display: none;
+  }
+}`);
+  try {
+    await exportToPdf();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    document.body.removeChild(printTarget);
+    const index = document.adoptedStyleSheets.indexOf(printStyleSheet);
+    if (index >= 0) {
+      document.adoptedStyleSheets.splice(index, 1);
+    }
+  }
+}
 </script>
 
 <template>
@@ -188,15 +247,14 @@ watchEffect(() => {
     :label-column-options="labelColumns.data?.options"
     :color-scheme-options="colorSchemeOptions"
     @update-settings="applySettings"
+    @export="exportPdf"
   />
   <PlAlert v-if="error" type="error">
     {{ error }}
   </PlAlert>
   <PlAlert
-    v-else-if="
-      !multipleAlignmentData.isLoading
-        && (multipleAlignmentData.data?.sequences ?? []).length < 2
-    "
+    v-else-if="!multipleAlignmentData.isLoading
+      && (multipleAlignmentData.data?.sequences ?? []).length < 2"
     type="warn"
     icon
   >
@@ -221,20 +279,13 @@ watchEffect(() => {
     >
       <template v-if="multipleAlignmentData.data?.sequences.length">
         <MultiSequenceAlignmentView
-          :sequence-names="multipleAlignmentData.data.sequenceNames"
+          ref="msa"
           :sequences="multipleAlignmentData.data.sequences"
-          :label-rows="multipleAlignmentData.data.labelsRows"
+          :sequence-names="multipleAlignmentData.data.sequenceNames"
+          :label-rows="multipleAlignmentData.data.labelRows"
           :residue-counts="multipleAlignmentData.data.residueCounts"
-          :highlight-image-blob="multipleAlignmentData.data.highlightImage?.blob"
-          :consensus="settings.widgets?.includes('consensus') ?? false"
-          :seq-logo="settings.widgets?.includes('seqLogo') ?? false"
-        />
-        <Legend
-          v-if="
-            settings.widgets?.includes('legend')
-              && multipleAlignmentData.data.highlightImage?.colorMap
-          "
-          :colors="multipleAlignmentData.data.highlightImage.colorMap"
+          :highlight-image="multipleAlignmentData.data.highlightImage"
+          :widgets="settings.widgets"
         />
       </template>
     </PlSplash>

package/src/components/PlMultiSequenceAlignment/README.md

@@ -13,7 +13,7 @@ Defined in `PlMultiSequenceAlignment.vue`.
 
 This component is a "wrapper" that takes supplied data, runs data fetchers from
 `data.ts` and draws `<MultiSequenceAlignmentView />`. It also draws a
-`<Toolbar />`, `<Legend />` and is responsible for loading and error states.
+`<Toolbar />` and is responsible for loading and error states.
 
 The inputs are:
 
@@ -66,10 +66,9 @@ returns data in this format:
   every row is the same length
 - `sequenceNames`: list of sequence names, should match the names of the options
   in a dropdown, which user selected
-- `labelsRows`: list of lists of labels,
+- `labelRows`: list of lists of labels,
   (`[["<r0l0>", "<r0l1>", ...], ["<r1l0>", "<r1l1>", ...]]`, "r"—row, "l"—label)
 - `residueCounts`: see [Residue counts](#residue-counts)
-- `markup`: optional, see [Markup](#markup)
 - `highlightImage`: optional, see [Highlighting](#highlighting-color-scheme)
 - `exceedsLimit`: see [Row limit](#row-limit)
 
@@ -79,10 +78,11 @@ Most of the data generated by it is in the format that is useful for
 ### Highlighting (Color Scheme)
 
 There are two ways to colorize the MSA output. Both output a
-[Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) that is a small
-PNG image, that is later scaled up (without antialiasing) to fill the whole
-sequence table. The image is produced with
-[OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas).
+[Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) that is an SVG
+file which is later scaled up to fit the table layout. Current implementation
+uses <path> tags to group multiple runs of the same color. The viewbox is
+doubled in one of the directions to use SVG strokes without resorting to
+fractional positions.
 
 There's also an option to not colorize the output at all.
 
@@ -91,7 +91,9 @@ There's also an option to not colorize the output at all.
 Defined in `chemical-properties.ts`.
 
 This is an implementation of Clustal X color scheme. See
-https://www.jalview.org/help/html/colourSchemes/clustal.html for reference.
+https://www.jalview.org/help/html/colourSchemes/clustal.html and
+https://www.rbvi.ucsf.edu/chimera/1.2065/docs/ContributedSoftware/multalignviewer/cxcolor.html
+for reference.
 
 #### Markup
 

package/src/components/PlMultiSequenceAlignment/Toolbar.vue

@@ -29,6 +29,7 @@ const { settings } = defineProps<{
 
 const emit = defineEmits<{
   updateSettings: [Partial<Settings>];
+  export: [];
 }>();
 
 const settingsOpen = ref(false);
@@ -95,7 +96,9 @@ const canResetAlignmentParams = computed(() =>
         <PlBtnGhost icon="settings" @click.stop="settingsOpen = true">
           Settings
         </PlBtnGhost>
-        <PlBtnGhost icon="export">Export</PlBtnGhost>
+        <PlBtnGhost icon="export" @click.stop="$emit('export')">
+          Export
+        </PlBtnGhost>
       </div>
     </div>
     <div :class="$style.line">