@milaboratories/multi-sequence-alignment 1.45.0

package/src/Consensus.vue

@@ -0,0 +1,165 @@
+<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 { ResidueCounts } from './types';
+import { useMiPlots } from './useMiPlots';
+
+const props = defineProps<{
+  residueCounts: ResidueCounts;
+  labelsClass: string;
+}>();
+
+const classes = useCssModule();
+
+const plotEl = useTemplateRef('plotEl');
+
+const columns = computed(() =>
+  props.residueCounts.map((column) => {
+    let totalCount = 0;
+    let topResidue = { label: '', count: 0 };
+    for (const [residue, count] of Object.entries(column)) {
+      totalCount += count;
+      if (residue === '-') continue;
+      if (count > topResidue.count) topResidue = { label: residue, count };
+    }
+    const confidence = CSS.percent(topResidue.count / totalCount * 100);
+    return {
+      label: topResidue.label,
+      color: `color-mix(in oklab, ${confidence} #3056AE, #C1CDE9)`,
+    };
+  }),
+);
+
+const settings = computed(() => {
+  const width = props.residueCounts.length * cellSize.inline;
+  return ({
+    type: 'discrete',
+    y: {
+      type: 'column',
+      value: 'countKey',
+    },
+    legend: { show: false },
+    primaryGrouping: {
+      columnName: {
+        type: 'column',
+        value: 'columnKey',
+      },
+      order: props.residueCounts.map((_, i) => i),
+      inheritedAes: Object.fromEntries(
+        columns.value.map(({ color }) => ({ fillColor: color })).entries(),
+      ),
+    },
+    layers: [{
+      type: 'bar',
+      height: 'max',
+      aes: {
+        ...props.residueCounts.length && {
+          width: (width - props.residueCounts.length + 1)
+            / props.residueCounts.length,
+        },
+        fillColor: {
+          type: 'primaryGrouping',
+        },
+        lineColor: '#ffffff',
+      },
+    }],
+    title: {
+      name: '',
+      show: false,
+    },
+    size: {
+      width,
+      height: 60,
+      outerOffset: 0,
+      innerOffset: 0,
+    },
+    xAxis: {
+      title: '',
+      showGrid: false,
+      showTicks: false,
+      hiddenLabels: true,
+    },
+    yAxis: {
+      title: '',
+      showGrid: false,
+      showTicks: false,
+      hiddenLabels: true,
+    },
+    frame: {
+      type: 'empty',
+    },
+  } satisfies Settings);
+});
+
+const data = computed<DataByColumns>(() => {
+  const countKey: number[] = [];
+  const columnKey: number[] = [];
+  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);
+    }
+  }
+  return ({
+    type: 'columns',
+    id: `consensus-${crypto.randomUUID()}`,
+    values: { countKey, columnKey },
+  });
+});
+
+const plot = shallowRef<ChartInterface>();
+
+const { miplots, error } = useMiPlots();
+
+watchEffect(async () => {
+  if (!plotEl.value || !miplots.value) return;
+  if (!plot.value) {
+    plot.value = miplots.value.newPlot(data.value, settings.value);
+    plot.value.mount(plotEl.value);
+  } else {
+    plot.value.updateSettingsAndData(data.value, settings.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  plot.value?.unmount();
+});
+</script>
+
+<template>
+  <PlAlert v-if="error" type="error">
+    {{ error.message }}
+  </PlAlert>
+  <div v-else :class="classes.container">
+    <div :class="props.labelsClass">
+      {{ columns.map(column => column.label).join('') }}
+    </div>
+    <div ref="plotEl" />
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  svg {
+    display: block;
+  }
+}
+</style>

package/src/Legend.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useCssModule } from 'vue';
+import type { HighlightLegend } from './types';
+
+const props = defineProps<{
+  legend: HighlightLegend;
+}>();
+
+const classes = useCssModule();
+</script>
+
+<template>
+  <div :class="classes.container">
+    <div
+      v-for="({ label, color }, key) of props.legend"
+      :key="key"
+      :class="classes.item"
+    >
+      <div :class="classes.colorSample" :style="{ backgroundColor: color }" />
+      {{ label }}
+    </div>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  max-inline-size: fit-content;
+}
+
+.item {
+  display: flex;
+  gap: 4px;
+}
+
+.colorSample {
+  display: inline-block;
+  block-size: 18px;
+  inline-size: 18px;
+  border-radius: 3px;
+}
+</style>

package/src/MultiSequenceAlignmentView.vue

@@ -0,0 +1,299 @@
+<script lang="ts" setup>
+import type { PlMultiSequenceAlignmentWidget } from '@platforma-sdk/model';
+import {
+  computed,
+  onBeforeMount,
+  onBeforeUnmount,
+  onWatcherCleanup,
+  ref,
+  useCssModule,
+  useTemplateRef,
+  watch,
+} from 'vue';
+import { cellSize } from './cell-size';
+import Consensus from './Consensus.vue';
+import Legend from './Legend.vue';
+import type { TreeNodeData } from './phylogenetic-tree.worker';
+import PhylogeneticTree from './PhylogeneticTree.vue';
+import SeqLogo from './SeqLogo.vue';
+import type { HighlightLegend, ResidueCounts } from './types';
+
+const props = defineProps<{
+  sequences: {
+    name: string;
+    rows: string[];
+    residueCounts: ResidueCounts;
+    highlightImageUrl?: string;
+  }[];
+  labels: {
+    rows: string[];
+  }[];
+  highlightLegend: HighlightLegend | undefined;
+  phylogeneticTree: TreeNodeData[] | undefined;
+  widgets: PlMultiSequenceAlignmentWidget[];
+}>();
+
+const classes = useCssModule();
+
+const rootEl = useTemplateRef('rootRef');
+defineExpose({ rootEl });
+
+const rowCount = computed(() => props.sequences.at(0)?.rows.length ?? 0);
+
+const targetCellInlineSize = CSS.px(cellSize.inline).toString();
+const targetCellBlockSize = CSS.px(cellSize.block).toString();
+
+const referenceCellRef = useTemplateRef('referenceCell');
+const referenceCellInlineSize = ref<number>();
+
+const cornerRef = useTemplateRef('corner');
+const cornerInlineSize = ref<number>();
+
+const letterSpacing = computed(() =>
+  referenceCellInlineSize.value
+    ? CSS.px(cellSize.inline - referenceCellInlineSize.value).toString()
+    : undefined,
+);
+
+const sequenceNameInsetInlineStart = computed(() =>
+  CSS.px(cornerInlineSize.value ?? 0).toString(),
+);
+
+let observer: ResizeObserver;
+
+onBeforeMount(() => {
+  const getInlineSize = (entry: ResizeObserverEntry) =>
+    entry.borderBoxSize.find(Boolean)?.inlineSize;
+
+  observer = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      switch (entry.target) {
+        case referenceCellRef.value:
+          referenceCellInlineSize.value = getInlineSize(entry);
+          break;
+        case cornerRef.value:
+          cornerInlineSize.value = getInlineSize(entry);
+          break;
+      }
+    }
+  });
+});
+
+onBeforeUnmount(() => {
+  observer.disconnect();
+});
+
+for (const ref of [referenceCellRef, cornerRef]) {
+  watch(ref, (el, prevEl) => {
+    if (el) observer.observe(el);
+    onWatcherCleanup(() => {
+      if (prevEl) observer.unobserve(prevEl);
+    });
+  });
+}
+</script>
+
+<template>
+  <div ref="rootRef" :class="classes.root">
+    <div ref="referenceCell" :class="classes.referenceCell">x</div>
+    <div :class="['pl-scrollable', classes.table]">
+      <div :class="classes.sidebar">
+        <PhylogeneticTree
+          v-if="props.widgets.includes('tree') && props.phylogeneticTree"
+          :tree="props.phylogeneticTree"
+          :class="classes.phylogeneticTree"
+        />
+        <div :class="classes.labels">
+          <template
+            v-for="({ rows }, columnIndex) of props.labels"
+            :key="columnIndex"
+          >
+            <div v-for="(row, rowIndex) of rows" :key="rowIndex">
+              {{ row }}
+            </div>
+          </template>
+        </div>
+      </div>
+      <template v-if="letterSpacing !== undefined">
+        <div
+          v-for="(column, columnIndex) of props.sequences"
+          :key="columnIndex"
+          :class="classes.sequenceColumn"
+        >
+          <div :class="classes.sequenceHeader">
+            <div
+              v-show="props.sequences.length > 1"
+              :class="classes.sequenceName"
+            >
+              {{ column.name }}
+            </div>
+            <Consensus
+              v-if="props.widgets.includes('consensus')"
+              :residue-counts="column.residueCounts"
+              :labels-class="classes.sequenceRow"
+            />
+            <SeqLogo
+              v-if="props.widgets.includes('seqLogo')"
+              :residue-counts="column.residueCounts"
+            />
+          </div>
+          <div
+            :class="classes.sequenceRowsContainer"
+            :style="{
+              backgroundImage: column.highlightImageUrl
+                ? `url(${column.highlightImageUrl})`
+                : undefined,
+            }"
+          >
+            <div
+              v-for="(row, rowIndex) of column.rows"
+              :key="rowIndex"
+              :class="classes.sequenceRow"
+            >
+              {{ row }}
+            </div>
+          </div>
+        </div>
+      </template>
+      <div ref="corner" :class="classes.corner" />
+    </div>
+    <Legend
+      v-if="props.widgets.includes('legend') && props.highlightLegend"
+      :legend="props.highlightLegend"
+    />
+  </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;
+  container-type: inline-size;
+
+  &[data-pre-print] {
+    container-type: unset;
+
+    .sidebar {
+      max-inline-size: unset;
+    }
+  }
+}
+
+.referenceCell {
+  position: fixed;
+  visibility: hidden;
+  font-family: Spline Sans Mono;
+  font-weight: 600;
+  line-height: v-bind('targetCellBlockSize');
+}
+
+.table {
+  display: grid;
+  grid-template-columns:
+    [sidebar-start] auto [sidebar-end] repeat(
+    v-bind('props.sequences.length'),
+    [column-start] auto [column-end]
+  );
+  grid-template-rows:
+    [header-start] auto [header-end]
+    repeat(v-bind('rowCount'), [row-start] auto [row-end]);
+  justify-content: start;
+  position: relative;
+  @media print {
+    overflow: visible;
+  }
+}
+
+.sidebar {
+  grid-column: sidebar;
+  grid-row: 1 row-start / -1 row-end;
+  display: grid;
+  grid-template-rows: subgrid;
+  position: sticky;
+  inset-inline-start: 0;
+  background-color: #fff;
+  inline-size: min-content;
+  max-inline-size: 30cqi;
+  overflow: scroll;
+  overscroll-behavior-inline: none;
+  scrollbar-width: none;
+}
+
+.phylogeneticTree {
+  grid-row: 1 row-start / -1 row-end;
+}
+
+.labels {
+  grid-row: 1 row-start / -1 row-end;
+  display: grid;
+  grid-template-columns: repeat(v-bind('props.labels.length'), auto);
+  grid-template-rows: subgrid;
+  grid-auto-flow: column;
+  column-gap: 12px;
+  padding-inline-end: 12px;
+  font-family: Spline Sans Mono;
+  line-height: v-bind('targetCellBlockSize');
+  white-space: nowrap;
+}
+
+.sequenceColumn {
+  grid-row: header-start / -1 row-end;
+  display: grid;
+  grid-template-rows: subgrid;
+  & + & {
+    margin-inline-start: 24px;
+  }
+}
+
+.sequenceHeader {
+  grid-row: header;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  min-inline-size: 0;
+  position: sticky;
+  inset-block-start: 0;
+  background-color: #fff;
+}
+
+.sequenceName {
+  margin-block-end: 4px;
+  font-weight: 700;
+  line-height: 20px;
+  inline-size: fit-content;
+  position: sticky;
+  inset-inline-start: v-bind('sequenceNameInsetInlineStart');
+}
+
+.sequenceRowsContainer {
+  grid-row: 1 row-start / -1 row-end;
+  display: grid;
+  grid-template-rows: subgrid;
+}
+
+.sequenceRow {
+  font-family: Spline Sans Mono;
+  font-weight: 600;
+  line-height: v-bind('targetCellBlockSize');
+  letter-spacing: v-bind('letterSpacing');
+  text-indent: calc(v-bind('letterSpacing') / 2);
+  inline-size: calc-size(
+    min-content,
+    round(down, size, v-bind('targetCellInlineSize'))
+  );
+  white-space: nowrap;
+}
+
+.corner {
+  grid-column: sidebar;
+  grid-row: header;
+  position: sticky;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  background-color: #fff;
+}
+</style>

package/src/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>