@platforma-sdk/ui-vue 1.42.53 → 1.43.0

package/src/components/PlMultiSequenceAlignment/PhylogeneticTree.vue

@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import type {
+  ChartInterface,
+  DataByColumns,
+  Settings,
+} from '@milaboratories/miplots4';
+import { PlAlert } from '@milaboratories/uikit';
+import {
+  computed,
+  onBeforeUnmount,
+  shallowRef,
+  useCssModule,
+  useTemplateRef,
+  watchEffect,
+} from 'vue';
+import { cellSize } from './cell-size';
+import type { TreeNodeData } from './phylogenetic-tree.worker';
+import { useMiPlots } from './useMiPlots';
+
+const props = defineProps<{
+  tree: TreeNodeData[];
+}>();
+
+const classes = useCssModule();
+
+const plotEl = useTemplateRef('plotEl');
+
+const settings: Settings = {
+  type: 'dendro',
+  title: { show: false, name: '' },
+  size: {
+    width: 149,
+    minCellHeight: cellSize.block,
+    maxCellHeight: cellSize.block,
+    marginLeft: 1,
+    marginRight: 0,
+    marginTop: 0,
+    marginBottom: 0,
+  },
+  mode: 'normal',
+  leavesMode: 'alignLeavesToLine',
+  leavesOrder: 'indexAsc',
+  legend: { show: false },
+  id: {
+    type: 'column',
+    value: 'nodeId',
+  },
+  parentId: {
+    type: 'column',
+    value: 'parentId',
+  },
+  height: {
+    type: 'column',
+    value: 'distance',
+  },
+  showNodes: false,
+  showNodesLabels: false,
+  showLeavesLabels: false,
+  rootPosition: 'left',
+};
+
+const data = computed<DataByColumns>(() => {
+  const nodeId: number[] = [];
+  const parentId: (number | null)[] = [];
+  const distance: number[] = [];
+  for (const node of props.tree) {
+    nodeId.push(node.id);
+    parentId.push(node.parentId ?? null);
+    distance.push(node.length ?? 0);
+  }
+  return ({
+    type: 'columns',
+    id: `phylogeneticTree-${crypto.randomUUID()}`,
+    values: { nodeId, parentId, distance },
+  });
+});
+
+const { miplots, error } = useMiPlots();
+
+const plot = shallowRef<ChartInterface>();
+
+watchEffect(async () => {
+  if (!plotEl.value || !miplots.value) return;
+  if (!plot.value) {
+    plot.value = miplots.value.newPlot(data.value, settings);
+    plot.value.mount(plotEl.value);
+  } else {
+    plot.value.updateSettingsAndData(data.value, settings);
+  }
+});
+
+onBeforeUnmount(() => {
+  plot.value?.unmount();
+});
+</script>
+
+<template>
+  <PlAlert v-if="error" type="error">
+    {{ error.message }}
+  </PlAlert>
+  <div v-else ref="plotEl" :class="classes.container" />
+</template>
+
+<style module>
+.container {
+  svg {
+    display: block;
+  }
+}
+</style>

package/src/components/PlMultiSequenceAlignment/PlMultiSequenceAlignment.vue

@@ -17,12 +17,14 @@ import {
 import {
   computed,
   onBeforeMount,
+  onUnmounted,
   reactive,
+  useCssModule,
   useTemplateRef,
   watchEffect,
 } from 'vue';
 import {
-  sequenceLimit,
+  SEQUENCE_LIMIT,
   useLabelColumnsOptions,
   useMarkupColumnsOptions,
   useMultipleAlignmentData,
@@ -62,6 +64,8 @@ const props = defineProps<{
   readonly selection?: PlSelectionModel;
 }>();
 
+const classes = useCssModule();
+
 const sequenceColumns = reactive(useSequenceColumnsOptions(() => ({
   pFrame: props.pFrame,
   sequenceColumnPredicate: props.sequenceColumnPredicate,
@@ -84,6 +88,7 @@ const multipleAlignmentData = reactive(useMultipleAlignmentData(() => ({
   selection: props.selection,
   colorScheme: settings.colorScheme,
   alignmentParams: settings.alignmentParams,
+  shouldBuildPhylogeneticTree: settings.widgets.includes('tree'),
 })));
 
 const formatNumber = new Intl.NumberFormat('en').format;
@@ -104,7 +109,7 @@ const colorSchemeOptions = computed<
       label,
       value: {
         type: 'markup' as const,
-        columnId: value,
+        columnIds: value,
       },
     })),
   ],
@@ -167,15 +172,15 @@ watchEffect(() => {
     settingsToReset.push('labelColumnIds');
   }
 
-  const markupColumnId = settings.colorScheme?.type === 'markup'
-    ? settings.colorScheme.columnId
+  const markupColumnIds = settings.colorScheme?.type === 'markup'
+    ? settings.colorScheme.columnIds
     : undefined;
 
   if (
     !markupColumns.isLoading
-    && markupColumnId
+    && markupColumnIds
     && (markupColumns.data ?? []).every(
-      ({ value }) => !isJsonEqual(value, markupColumnId),
+      ({ value }) => !isJsonEqual(value, markupColumnIds),
     )
   ) {
     settingsToReset.push('colorScheme');
@@ -243,6 +248,10 @@ async function exportPdf() {
     }
   }
 }
+
+onUnmounted(() => {
+  multipleAlignmentData.data = undefined;
+});
 </script>
 
 <template>
@@ -258,8 +267,7 @@ async function exportPdf() {
     {{ error }}
   </PlAlert>
   <PlAlert
-    v-else-if="!multipleAlignmentData.isLoading
-      && (multipleAlignmentData.data?.sequences ?? []).length < 2"
+    v-else-if="!multipleAlignmentData.isLoading && !multipleAlignmentData.data"
     type="warn"
     icon
   >
@@ -274,25 +282,23 @@ async function exportPdf() {
       label="Visualization is limited"
     >
       MSA visualization supports {{ formatNumber(2) }} to
-      {{ formatNumber(sequenceLimit) }} sequences. Only the first
-      {{ formatNumber(sequenceLimit) }} will be displayed.
+      {{ formatNumber(SEQUENCE_LIMIT) }} sequences. Only the first
+      {{ formatNumber(SEQUENCE_LIMIT) }} will be displayed.
     </PlAlert>
     <PlSplash
       type="transparent"
-      :class="$style.splash"
+      :class="classes.splash"
       :loading="multipleAlignmentData.isLoading"
     >
-      <template v-if="multipleAlignmentData.data?.sequences.length">
-        <MultiSequenceAlignmentView
-          ref="msa"
-          :sequences="multipleAlignmentData.data.sequences"
-          :sequence-names="multipleAlignmentData.data.sequenceNames"
-          :label-rows="multipleAlignmentData.data.labelRows"
-          :residue-counts="multipleAlignmentData.data.residueCounts"
-          :highlight-image="multipleAlignmentData.data.highlightImage"
-          :widgets="settings.widgets"
-        />
-      </template>
+      <MultiSequenceAlignmentView
+        v-if="multipleAlignmentData.data"
+        ref="msa"
+        :sequences="multipleAlignmentData.data.sequences"
+        :labels="multipleAlignmentData.data.labels"
+        :highlight-legend="multipleAlignmentData.data.highlightLegend"
+        :phylogenetic-tree="multipleAlignmentData.data.phylogeneticTree"
+        :widgets="settings.widgets"
+      />
     </PlSplash>
   </template>
 </template>

package/src/components/PlMultiSequenceAlignment/SeqLogo.vue

@@ -9,16 +9,20 @@ import {
   computed,
   onBeforeUnmount,
   shallowRef,
+  useCssModule,
   useTemplateRef,
   watchEffect,
 } from 'vue';
+import { cellSize } from './cell-size';
 import type { ResidueCounts } from './types';
 import { useMiPlots } from './useMiPlots';
 
-const { residueCounts } = defineProps<{
+const props = defineProps<{
   residueCounts: ResidueCounts;
 }>();
 
+const classes = useCssModule();
+
 const plotEl = useTemplateRef('plotEl');
 
 const palette = {
@@ -59,84 +63,80 @@ const residueColors = {
   Z: palette.black,
 };
 
-const settings = computed<Settings | undefined>(() => {
-  return ({
-    type: 'discrete',
-    title: {
-      name: '',
-      show: false,
-    },
-    size: {
-      width: residueCounts.length * 20,
-      height: 80,
-      innerOffset: 0,
-      outerOffset: 0,
-    },
-    frame: {
-      type: 'empty',
-    },
-    xAxis: {
-      title: '',
-      showGrid: false,
-      showTicks: false,
-      hiddenLabels: true,
-    },
-    yAxis: {
-      title: '',
-      showGrid: false,
-      showTicks: false,
-      hiddenLabels: true,
-    },
-    y: {
+const settings = computed(() => ({
+  type: 'discrete',
+  title: {
+    name: '',
+    show: false,
+  },
+  size: {
+    width: props.residueCounts.length * cellSize.inline,
+    height: 80,
+    innerOffset: 0,
+    outerOffset: 0,
+  },
+  frame: {
+    type: 'empty',
+  },
+  xAxis: {
+    title: '',
+    showGrid: false,
+    showTicks: false,
+    hiddenLabels: true,
+  },
+  yAxis: {
+    title: '',
+    showGrid: false,
+    showTicks: false,
+    hiddenLabels: true,
+  },
+  y: {
+    type: 'column',
+    value: 'countKey',
+  },
+  primaryGrouping: {
+    columnName: {
       type: 'column',
-      value: 'countKey',
+      value: 'columnKey',
     },
-    primaryGrouping: {
-      columnName: {
-        type: 'column',
-        value: 'columnKey',
-      },
-    },
-    secondaryGrouping: {
-      columnName: {
-        type: 'column',
-        value: 'residueKey',
-      },
+  },
+  secondaryGrouping: {
+    columnName: {
+      type: 'column',
+      value: 'residueKey',
     },
-    layers: [{
-      type: 'logo',
-      aes: { fillColor: residueColors },
-    }],
-  });
-});
+  },
+  layers: [{
+    type: 'logo',
+    aes: { fillColor: residueColors },
+  }],
+} satisfies Settings));
 
-const data = computed<DataByColumns>(
-  () => {
-    const countKey: number[] = [];
-    const columnKey: number[] = [];
-    const residueKey: string[] = [];
-    for (const [columnIndex, column] of residueCounts.entries()) {
-      for (const [residue, count] of Object.entries(column)) {
-        if (residue === '-') continue;
-        countKey.push(count);
-        columnKey.push(columnIndex);
-        residueKey.push(residue);
-      }
+const data = computed<DataByColumns>(() => {
+  const countKey: number[] = [];
+  const columnKey: number[] = [];
+  const residueKey: string[] = [];
+  for (const [columnIndex, column] of props.residueCounts.entries()) {
+    for (const [residue, count] of Object.entries(column)) {
+      if (residue === '-') continue;
+      countKey.push(count);
+      columnKey.push(columnIndex);
+      residueKey.push(residue);
     }
-    return ({
-      type: 'columns',
-      id: `seq-logo-${crypto.randomUUID()}`,
-      values: { countKey, columnKey, residueKey },
-    });
-  },
-);
+  }
+  return ({
+    type: 'columns',
+    id: `seq-logo-${crypto.randomUUID()}`,
+    values: { countKey, columnKey, residueKey },
+  });
+});
 
 const { miplots, error } = useMiPlots();
 
 const plot = shallowRef<ChartInterface>();
 
 watchEffect(async () => {
-  if (!settings.value || !plotEl.value || !miplots.value) return;
+  if (!plotEl.value || !miplots.value) return;
   if (!plot.value) {
     plot.value = miplots.value.newPlot(data.value, settings.value);
     plot.value.mount(plotEl.value);
@@ -154,5 +154,13 @@ onBeforeUnmount(() => {
   <PlAlert v-if="error" type="error">
     {{ error.message }}
   </PlAlert>
-  <div v-else ref="plotEl" />
+  <div v-else ref="plotEl" :class="classes.container" />
 </template>
+
+<style module>
+.container {
+  svg {
+    display: block;
+  }
+}
+</style>

package/src/components/PlMultiSequenceAlignment/Toolbar.vue

@@ -14,13 +14,14 @@ import {
 import type {
   PlMultiSequenceAlignmentColorSchemeOption as ColorSchemeOption,
   PlMultiSequenceAlignmentSettings as Settings,
+  PlMultiSequenceAlignmentWidget,
   PObjectId,
   PTableColumnId,
 } from '@platforma-sdk/model';
-import { computed, ref, watchEffect } from 'vue';
-import { defaultAlignmentParams } from './multi-sequence-alignment';
+import { computed, ref, useCssModule, watchEffect } from 'vue';
+import { defaultSettings } from './settings';
 
-const { settings } = defineProps<{
+const props = defineProps<{
   settings: Settings;
   sequenceColumnOptions: ListOptionNormalized<PObjectId>[] | undefined;
   labelColumnOptions: ListOptionNormalized<PTableColumnId>[] | undefined;
@@ -32,6 +33,8 @@ const emit = defineEmits<{
   export: [];
 }>();
 
+const classes = useCssModule();
+
 const settingsOpen = ref(false);
 
 function updateSetting<K extends keyof Settings>(
@@ -42,85 +45,90 @@ function updateSetting<K extends keyof Settings>(
 }
 
 function toggleWidget(
-  widget: 'seqLogo' | 'consensus' | 'legend',
+  widget: PlMultiSequenceAlignmentWidget,
   checked: boolean,
 ) {
   updateSetting(
     'widgets',
     checked
-      ? [...settings.widgets, widget]
-      : settings.widgets.filter((w) => widget !== w),
+      ? [...props.settings.widgets, widget]
+      : props.settings.widgets.filter((w) => widget !== w),
   );
 }
 
-const alignmentParams = ref({ ...settings.alignmentParams });
+const alignmentParams = ref({ ...props.settings.alignmentParams });
 watchEffect(() => {
-  alignmentParams.value = { ...settings.alignmentParams };
+  alignmentParams.value = { ...props.settings.alignmentParams };
 });
 
 const alignmentParamsChangesPending = computed(() =>
-  !isJsonEqual(settings.alignmentParams, alignmentParams.value),
+  !isJsonEqual(props.settings.alignmentParams, alignmentParams.value),
 );
 
 const canResetAlignmentParams = computed(() =>
-  !isJsonEqual(settings.alignmentParams, defaultAlignmentParams),
+  !isJsonEqual(props.settings.alignmentParams, defaultSettings.alignmentParams),
 );
 </script>
 
 <template>
-  <div :class="$style.container">
-    <div :class="$style.line">
-      <div :class="$style.section">
+  <div :class="classes.container">
+    <div :class="classes.line">
+      <div :class="classes.section">
         <PlDropdownMulti
           label="Sequence Columns"
-          :model-value="settings.sequenceColumnIds ?? []"
-          :options="sequenceColumnOptions"
+          :model-value="props.settings.sequenceColumnIds ?? []"
+          :options="props.sequenceColumnOptions"
           clearable
-          @update:model-value="updateSetting('sequenceColumnIds', $event)"
+          @update:model-value="event => updateSetting('sequenceColumnIds', event)"
         />
         <PlDropdownMulti
-          :model-value="settings.labelColumnIds ?? []"
+          :model-value="props.settings.labelColumnIds ?? []"
           label="Label Columns"
-          :options="labelColumnOptions"
+          :options="props.labelColumnOptions"
           clearable
-          @update:model-value="updateSetting('labelColumnIds', $event)"
+          @update:model-value="event => updateSetting('labelColumnIds', event)"
         />
         <PlDropdown
-          :model-value="settings.colorScheme"
+          :model-value="props.settings.colorScheme"
           label="Color Scheme"
-          :options="colorSchemeOptions"
-          @update:model-value="updateSetting('colorScheme', $event)"
+          :options="props.colorSchemeOptions"
+          @update:model-value="event => updateSetting('colorScheme', event)"
         />
       </div>
-      <div :class="$style.buttons">
+      <div :class="classes.buttons">
         <PlBtnGhost icon="settings" @click.stop="settingsOpen = true">
           Settings
         </PlBtnGhost>
-        <PlBtnGhost icon="export" @click.stop="$emit('export')">
+        <PlBtnGhost icon="export" @click.stop="emit('export')">
           Export
         </PlBtnGhost>
       </div>
     </div>
-    <div :class="$style.line">
-      <div :class="$style.section">
+    <div :class="classes.line">
+      <div :class="classes.section">
         <PlCheckbox
-          :model-value="settings.widgets.includes('seqLogo')"
-          @update:model-value="toggleWidget('seqLogo', $event)"
+          :model-value="props.settings.widgets.includes('seqLogo')"
+          @update:model-value="event => toggleWidget('seqLogo', event)"
         >
           Seq logo
         </PlCheckbox>
         <PlCheckbox
-          :model-value="settings.widgets.includes('consensus')"
-          @update:model-value="toggleWidget('consensus', $event)"
+          :model-value="props.settings.widgets.includes('consensus')"
+          @update:model-value="event => toggleWidget('consensus', event)"
         >
           Consensus
         </PlCheckbox>
         <PlCheckbox :model-value="false" disabled>Navigator</PlCheckbox>
-        <PlCheckbox :model-value="false" disabled>Tree</PlCheckbox>
         <PlCheckbox
-          :model-value="settings.widgets.includes('legend')"
-          :disabled="settings.colorScheme.type === 'no-color'"
-          @update:model-value="toggleWidget('legend', $event)"
+          :model-value="props.settings.widgets.includes('tree')"
+          @update:model-value="event => toggleWidget('tree', event)"
+        >
+          Tree
+        </PlCheckbox>
+        <PlCheckbox
+          :model-value="props.settings.widgets.includes('legend')"
+          :disabled="props.settings.colorScheme.type === 'no-color'"
+          @update:model-value="event => toggleWidget('legend', event)"
         >
           Legend
         </PlCheckbox>
@@ -162,18 +170,18 @@ const canResetAlignmentParams = computed(() =>
     </PlNumberField>
     <div
       v-if="alignmentParamsChangesPending"
-      :class="$style['pending-changes']"
+      :class="classes.pendingChanges"
     >
       <PlBtnPrimary @click="updateSetting('alignmentParams', alignmentParams)">
         Apply
       </PlBtnPrimary>
-      <PlBtnGhost @click="alignmentParams = settings.alignmentParams">
+      <PlBtnGhost @click="alignmentParams = props.settings.alignmentParams">
         Cancel
       </PlBtnGhost>
     </div>
     <PlBtnSecondary
       v-if="canResetAlignmentParams"
-      :class="$style['reset-button']"
+      :class="classes.resetButton"
       icon="reverse"
       @click="updateSetting('alignmentParams', undefined)"
     >
@@ -204,14 +212,14 @@ const canResetAlignmentParams = computed(() =>
   display: flex;
 }
 
-.pending-changes {
+.pendingChanges {
   display: flex;
   button {
     min-width: 160px;
   }
 }
 
-.reset-button {
+.resetButton {
   margin-block-start: auto;
   span {
     text-transform: none;

package/src/components/PlMultiSequenceAlignment/cell-size.ts

@@ -0,0 +1,4 @@
+export const cellSize = {
+  inline: 20,
+  block: 24,
+};