@platforma-sdk/ui-vue 1.42.4 → 1.42.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.42.4",
+  "version": "1.42.5",
   "type": "module",
   "main": "dist/lib.js",
   "styles": "dist/lib.js",
@@ -25,9 +25,9 @@
     "@vueuse/integrations": "^13.3.0",
     "d3-format": "^3.1.0",
     "zod": "~3.23.8",
+    "@milaboratories/uikit": "2.3.27",
     "@milaboratories/biowasm-tools": "^1.1.0",
-    "@platforma-sdk/model": "~1.42.4",
-    "@milaboratories/uikit": "2.3.27"
+    "@platforma-sdk/model": "~1.42.4"
   },
   "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/build-configs": "1.0.5",
+    "@milaboratories/eslint-config": "^1.0.4",
+    "@milaboratories/helpers": "^1.6.19"
   },
   "scripts": {
     "test": "vitest run --passWithNoTests",

package/src/components/PlMultiSequenceAlignment/MultiSequenceAlignmentView.vue

@@ -36,7 +36,9 @@ const sequenceLengths = computed(() =>
 <template>
   <div ref="rootRef" :class="$style.root">
     <div :class="['pl-scrollable', $style.table]">
-      <div :class="$style.corner" />
+      <div :class="$style.corner">
+        <div :class="$style['label-scroll-indicator']" />
+      </div>
       <div :class="$style.header">
         <div v-if="sequenceNames.length > 1" :class="$style['sequence-names']">
           <span
@@ -52,15 +54,17 @@ const sequenceLengths = computed(() =>
         <SeqLogo v-if="widgets.includes('seqLogo')" :residue-counts />
       </div>
       <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 :class="$style['labels-grid']">
+          <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>
       <div :class="$style.sequences">
         <div
@@ -86,15 +90,25 @@ const sequenceLengths = computed(() =>
   min-block-size: 0;
   -webkit-print-color-adjust: exact;
   print-color-adjust: exact;
+
+  &[data-pre-print] {
+    .table {
+      container-type: unset;
+    }
+    .labels {
+      max-inline-size: unset;
+    }
+  }
 }
 
 .table {
+  container-type: inline-size;
   display: grid;
   grid-template-areas:
     "corner header"
     "labels sequences";
-  text-wrap: nowrap;
   justify-content: start;
+  timeline-scope: --msa-labels-scroll;
   @media print {
     overflow: visible;
   }
@@ -102,16 +116,28 @@ const sequenceLengths = computed(() =>
 
 .corner {
   grid-area: corner;
-  background-color: white;
+  background-color: #fff;
   position: sticky;
   inset-inline-start: 0;
   inset-block-start: 0;
   z-index: 2;
 }
 
+.label-scroll-indicator {
+  position: absolute;
+  inset-inline-end: 0;
+  block-size: 100cqb;
+  inline-size: 8px;
+  animation-name: hide;
+  animation-timeline: --msa-labels-scroll;
+  visibility: hidden;
+  background: #fff;
+  box-shadow: -4px 0 4px -2px rgba(0, 0, 0, 0.10);
+}
+
 .header {
   grid-area: header;
-  background-color: white;
+  background-color: #fff;
   position: sticky;
   inset-block-start: 0;
   z-index: 1;
@@ -127,16 +153,28 @@ const sequenceLengths = computed(() =>
 
 .labels {
   grid-area: labels;
-  display: grid;
-  grid-auto-flow: dense;
-  column-gap: 12px;
-  background-color: white;
+  background-color: #fff;
   position: sticky;
   inset-inline-start: 0;
   z-index: 1;
-  padding-inline-end: 12px;
+  inline-size: max-content;
+  max-inline-size: 30cqi;
+  overflow: scroll;
+  scrollbar-width: none;
+  overscroll-behavior-inline: none;
+  scroll-timeline: --msa-labels-scroll inline;
+}
+
+.labels-grid {
+  display: grid;
+  grid-auto-flow: dense;
   font-family: Spline Sans Mono;
   line-height: 24px;
+  text-wrap: nowrap;
+
+  > * {
+    padding-inline-end: 12px;
+  }
 }
 
 .sequences {
@@ -153,4 +191,13 @@ const sequenceLengths = computed(() =>
   background-repeat: no-repeat;
   background-size: calc(100% - 5.8px) 100%;
 }
+
+@keyframes hide {
+  from {
+    visibility: visible;
+  }
+  to {
+    visibility: hidden;
+  }
+}
 </style>

package/src/components/PlMultiSequenceAlignment/PlMultiSequenceAlignment.vue

@@ -78,7 +78,7 @@ const markupColumns = reactive(useMarkupColumnsOptions(() => ({
 })));
 
 const multipleAlignmentData = reactive(useMultipleAlignmentData(() => ({
-  pframe: props.pFrame,
+  pFrame: props.pFrame,
   sequenceColumnIds: settings.sequenceColumnIds,
   labelColumnIds: settings.labelColumnIds,
   selection: props.selection,
@@ -147,18 +147,20 @@ watchEffect(() => {
 watchEffect(() => {
   const settingsToReset: (keyof PlMultiSequenceAlignmentSettings)[] = [];
   if (
-    settings.sequenceColumnIds?.some((id) =>
-      !sequenceColumns.data?.options.some(
-        ({ value }) => isJsonEqual(value, id),
+    !sequenceColumns.isLoading
+    && settings.sequenceColumnIds?.some((id) =>
+      (sequenceColumns.data?.options ?? []).every(
+        ({ value }) => !isJsonEqual(value, id),
       ),
     )
   ) {
     settingsToReset.push('sequenceColumnIds');
   }
   if (
-    settings.labelColumnIds?.some((id) =>
-      !labelColumns.data?.options.some(
-        ({ value }) => isJsonEqual(value, id),
+    !labelColumns.isLoading
+    && settings.labelColumnIds?.some((id) =>
+      (labelColumns.data?.options ?? []).every(
+        ({ value }) => !isJsonEqual(value, id),
       ),
     )
   ) {
@@ -170,9 +172,10 @@ watchEffect(() => {
     : undefined;
 
   if (
-    markupColumnId
-    && !markupColumns.data?.some(
-      ({ value }) => isJsonEqual(value, markupColumnId),
+    !markupColumns.isLoading
+    && markupColumnId
+    && (markupColumns.data ?? []).every(
+      ({ value }) => !isJsonEqual(value, markupColumnId),
     )
   ) {
     settingsToReset.push('colorScheme');
@@ -209,7 +212,9 @@ async function exportPdf() {
     position: fixed;
   }
 }`);
-  printTarget.replaceChildren(msaRoot.cloneNode(true));
+  const msaClone = msaRoot.cloneNode(true) as HTMLElement;
+  msaClone.dataset.prePrint = '';
+  printTarget.replaceChildren(msaClone);
   document.body.appendChild(printTarget);
   const { height, width } = printTarget.getBoundingClientRect();
   const margin = CSS.cm(1);

package/src/components/PlMultiSequenceAlignment/data.ts

@@ -68,7 +68,7 @@ async function getSequenceColumnsOptions({
   const options = columns.values()
     .filter((column) => sequenceColumnPredicate(column))
     .map(({ spec, columnId }) => ({
-      label: spec.annotations?.['pl7.app/label'] ?? 'Unlabelled column',
+      label: spec.annotations?.['pl7.app/label'] ?? 'Unlabeled column',
       value: columnId,
     }))
     .toArray();
@@ -111,7 +111,7 @@ async function getLabelColumnsOptions({
         : canonicalizeJson({ type: 'axis', id: axisId }),
       labelColumn?.spec.annotations?.['pl7.app/label']
       ?? axisSpec.annotations?.['pl7.app/label']
-      ?? 'Unlabelled axis',
+      ?? 'Unlabeled axis',
     );
   }
 
@@ -128,7 +128,7 @@ async function getLabelColumnsOptions({
     if (optionMap.has(columnIdJson)) continue;
     optionMap.set(
       columnIdJson,
-      spec.annotations?.['pl7.app/label'] ?? 'Unlabelled column',
+      spec.annotations?.['pl7.app/label'] ?? 'Unlabeled column',
     );
   }
 
@@ -175,30 +175,30 @@ async function getMarkupColumnsOptions({
       ) => column.spec.domain?.[key] === value),
     ).map(({ columnId, spec }) => ({
       value: columnId,
-      label: spec.annotations?.['pl7.app/label'] ?? 'Unlabelled column',
+      label: spec.annotations?.['pl7.app/label'] ?? 'Unlabeled column',
     }))
     .toArray();
 }
 
 async function getMultipleAlignmentData({
-  pframe,
+  pFrame,
   sequenceColumnIds,
   labelColumnIds,
   selection,
   colorScheme,
   alignmentParams,
 }: {
-  pframe: PFrameHandle | undefined;
+  pFrame: PFrameHandle | undefined;
   sequenceColumnIds: PObjectId[] | undefined;
   labelColumnIds: PTableColumnId[] | undefined;
   selection: PlSelectionModel | undefined;
   colorScheme: PlMultiSequenceAlignmentColorSchemeOption;
   alignmentParams: PlMultiSequenceAlignmentSettings['alignmentParams'];
 }): Promise<MultipleAlignmentData | undefined> {
-  if (!pframe || !sequenceColumnIds?.length || !labelColumnIds) return;
+  if (!pFrame || !sequenceColumnIds?.length || !labelColumnIds) return;
 
   const pFrameDriver = getPFrameDriver();
-  const columns = await pFrameDriver.listColumns(pframe);
+  const columns = await pFrameDriver.listColumns(pFrame);
   const linkerColumns = columns.filter((column) => isLinkerColumn(column.spec));
 
   const filterColumn = createRowSelectionColumn({ selection });
@@ -280,7 +280,7 @@ async function getMultipleAlignmentData({
   };
 
   const table = await pFrameDriver.calculateTableData(
-    pframe,
+    pFrame,
     JSON.parse(JSON.stringify(request)),
     {
       offset: 0,
@@ -339,7 +339,7 @@ async function getMultipleAlignmentData({
   );
 
   const sequenceNames = sequenceColumns.map((column) =>
-    column.spec.spec.annotations?.['pl7.app/label'] ?? 'Unlabelled column',
+    column.spec.spec.annotations?.['pl7.app/label'] ?? 'Unlabeled column',
   );
 
   const labels = Array.from(