@platforma-sdk/ui-vue 1.45.35 → 1.45.37

package/src/components/PlMultiSequenceAlignment/PlMultiSequenceAlignment.vue

@@ -1,314 +0,0 @@
-<script lang="ts" setup>
-import { isJsonEqual } from '@milaboratories/helpers';
-import {
-  type ListOptionNormalized,
-  PlAlert,
-  PlSplash,
-} from '@milaboratories/uikit';
-import {
-  getRawPlatformaInstance,
-  type PColumnPredicate,
-  type PFrameHandle,
-  type PlMultiSequenceAlignmentColorSchemeOption,
-  type PlMultiSequenceAlignmentModel,
-  type PlMultiSequenceAlignmentSettings,
-  type PlSelectionModel,
-} from '@platforma-sdk/model';
-import {
-  computed,
-  onBeforeMount,
-  onUnmounted,
-  reactive,
-  useCssModule,
-  useTemplateRef,
-  watchEffect,
-} from 'vue';
-import {
-  SEQUENCE_LIMIT,
-  useLabelColumnsOptions,
-  useMarkupColumnsOptions,
-  useMultipleAlignmentData,
-  useSequenceColumnsOptions,
-} from './data';
-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 settings = reactive<PlMultiSequenceAlignmentSettings>({
-  ...defaultSettings,
-});
-
-const props = defineProps<{
-  /**
-   * Handle to PFrame created using `createPFrameForGraphs`.
-   * Should contain all desired sequence and label columns.
-   */
-  readonly pFrame: PFrameHandle | undefined;
-  /**
-   * Return true if column should be shown in sequence columns dropdown.
-   * By default, all sequence columns are selected.
-   */
-  readonly sequenceColumnPredicate: PColumnPredicate;
-  /**
-   * Row selection model (from `PlAgDataTableV2` or `GraphMaker`).
-   * If not provided or empty, all rows will be considered selected.
-   * Warning: should be forwarded as a field of `reactive` object
-   */
-  readonly selection?: PlSelectionModel;
-}>();
-
-const classes = useCssModule();
-
-const sequenceColumns = reactive(useSequenceColumnsOptions(() => ({
-  pFrame: props.pFrame,
-  sequenceColumnPredicate: props.sequenceColumnPredicate,
-})));
-
-const labelColumns = reactive(useLabelColumnsOptions(() => ({
-  pFrame: props.pFrame,
-  sequenceColumnIds: settings.sequenceColumnIds,
-})));
-
-const markupColumns = reactive(useMarkupColumnsOptions(() => ({
-  pFrame: props.pFrame,
-  sequenceColumnIds: settings.sequenceColumnIds,
-})));
-
-const multipleAlignmentData = reactive(useMultipleAlignmentData(() => ({
-  pFrame: props.pFrame,
-  sequenceColumnIds: settings.sequenceColumnIds,
-  labelColumnIds: settings.labelColumnIds,
-  selection: props.selection,
-  colorScheme: settings.colorScheme,
-  alignmentParams: settings.alignmentParams,
-  shouldBuildPhylogeneticTree: settings.widgets.includes('tree'),
-})));
-
-const formatNumber = new Intl.NumberFormat('en').format;
-
-const colorSchemeOptions = computed<
-  ListOptionNormalized<PlMultiSequenceAlignmentColorSchemeOption>[]
->(
-  () => [
-    {
-      label: 'Chemical Properties',
-      value: { type: 'chemical-properties' },
-    },
-    {
-      label: 'No Color',
-      value: { type: 'no-color' },
-    },
-    ...(markupColumns.data ?? []).map(({ label, value }) => ({
-      label,
-      value: {
-        type: 'markup' as const,
-        columnIds: value,
-      },
-    })),
-  ],
-);
-
-const error = computed(() =>
-  sequenceColumns.error
-  ?? labelColumns.error
-  ?? markupColumns.error
-  ?? multipleAlignmentData.error,
-);
-
-function applySettings(
-  settingsPatch: Partial<PlMultiSequenceAlignmentSettings>,
-) {
-  model.value = Object.fromEntries(
-    Object.entries({ ...model.value, ...settingsPatch })
-      .filter(([_key, value]) => value !== undefined),
-  );
-}
-
-watchEffect(() => {
-  const patch: Partial<PlMultiSequenceAlignmentSettings> = Object.fromEntries(
-    Object.entries({
-      ...defaultSettings,
-      sequenceColumnIds: sequenceColumns.data?.defaults,
-      labelColumnIds: labelColumns.data?.defaults,
-      ...model.value,
-    }).filter(([key, value]) =>
-      !isJsonEqual(
-        settings[key as keyof PlMultiSequenceAlignmentSettings],
-        value,
-      ),
-    ),
-  );
-  Object.assign(settings, patch);
-});
-
-// Reset stale settings
-watchEffect(() => {
-  const settingsToReset: (keyof PlMultiSequenceAlignmentSettings)[] = [];
-  if (
-    !sequenceColumns.isLoading
-    && settings.sequenceColumnIds?.some((id) =>
-      (sequenceColumns.data?.options ?? []).every(
-        ({ value }) => !isJsonEqual(value, id),
-      ),
-    )
-  ) {
-    settingsToReset.push('sequenceColumnIds');
-  }
-  if (
-    !labelColumns.isLoading
-    && settings.labelColumnIds?.some((id) =>
-      (labelColumns.data?.options ?? []).every(
-        ({ value }) => !isJsonEqual(value, id),
-      ),
-    )
-  ) {
-    settingsToReset.push('labelColumnIds');
-  }
-
-  const markupColumnIds = settings.colorScheme?.type === 'markup'
-    ? settings.colorScheme.columnIds
-    : undefined;
-
-  if (
-    !markupColumns.isLoading
-    && markupColumnIds
-    && (markupColumns.data ?? []).every(
-      ({ value }) => !isJsonEqual(value, markupColumnIds),
-    )
-  ) {
-    settingsToReset.push('colorScheme');
-  }
-  if (settingsToReset.length) {
-    applySettings(Object.fromEntries(
-      settingsToReset.map((key) => [key, undefined]),
-    ));
-  }
-});
-
-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;
-  }
-}`);
-  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);
-  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);
-    }
-  }
-}
-
-onUnmounted(() => {
-  multipleAlignmentData.data = undefined;
-});
-</script>
-
-<template>
-  <Toolbar
-    :settings="settings"
-    :sequence-column-options="sequenceColumns.data?.options"
-    :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"
-    type="warn"
-    icon
-  >
-    Please select at least one sequence column and two or more rows to run
-    alignment
-  </PlAlert>
-  <template v-else>
-    <PlAlert
-      v-if="multipleAlignmentData.data?.exceedsLimit"
-      type="warn"
-      icon
-      label="Visualization is limited"
-    >
-      MSA visualization supports {{ formatNumber(2) }} to
-      {{ formatNumber(SEQUENCE_LIMIT) }} sequences. Only the first
-      {{ formatNumber(SEQUENCE_LIMIT) }} will be displayed.
-    </PlAlert>
-    <PlSplash
-      type="transparent"
-      :class="classes.splash"
-      :loading="multipleAlignmentData.isLoading"
-    >
-      <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>
-
-<style module>
-.splash {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  overflow: hidden;
-}
-</style>

package/src/components/PlMultiSequenceAlignment/README.md

@@ -1,216 +0,0 @@
-# `PlMultiSequenceAlignment`
-
-The name of the component is usually shortened to MSA.
-
-For the design, see
-https://www.figma.com/design/pndFzfW2eqdIWfA8IoraMg/%F0%9F%A7%AC-MSA?t=LRoRiHQhyga7Ndzx-0.
-
-## Structure
-
-### PlMultiSequenceAlignment
-
-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 />` and is responsible for loading and error states.
-
-The inputs are:
-
-- `pFrame`
-- `sequenceColumnPredicate`: predicate function by which the component filters
-  the columns to find only the sequence columns
-- `selection`: `PlSelectionModel` that is returned from GraphMaker,
-  PlAgDataTable or potentially some other component, indicates which rows should
-  be selected from the columns
-- `modelValue`: a storage for MSA settings
-
-The settings for MSA are derived from `modelValue`, filling the `undefined` gaps
-with default settings (defined in `settings.ts`).
-
-### MultiSequenceAlignmentView
-
-Defined in `MultiSequenceAlignmentView.vue`.
-
-This is the presentational part, where most of the rendering is happening. It's
-meant to have as little logic as possible to prevent the out-of-sync states. The
-rendering is optimized to be as much monospace text-only as possible, with
-[highlighting](#highlighting-color-scheme) implemented as a background image. A
-lot of the rendering relies on the specific dimensions of the font. Gaps between
-letters are implemented with `letter-spacing`.
-
-### Data
-
-Defined in `data.ts`.
-
-This is MSA data fetcher that is split between 4 Vue composables:
-
-- `useSequenceColumnsOptions`
-- `useLabelColumnsOptions`
-- `useMarkupColumnsOptions`
-- `useMultipleAlignmentData`
-
-First 3 composable are very similar. They take a list of columns from
-`pFrameDriver.listColumns(pFrame)` and return all the options that would be
-reasonable for the user to be able to choose from.
-
-`useSequenceColumnsOptions` and `useLabelColumnsOptions` specifically also
-return a list of default options that are preselected for the user.
-
-`useMultipleAlignmentData` does the actual computation. It runs
-`pFrameDriver.calculateTableData`, `multiSequenceAlignment`, highlighting and
-returns data in this format:
-
-- `sequences`: list of sequences rows, aligned and concatenated with a single
-  whitespace (`["<r0c0> <r0c1>", "<r1c0> <r1c1>", ...]`; "r"—row, "c"—column);
-  every row is the same length
-- `sequenceNames`: list of sequence names, should match the names of the options
-  in a dropdown, which user selected
-- `labelRows`: list of lists of labels,
-  (`[["<r0l0>", "<r0l1>", ...], ["<r1l0>", "<r1l1>", ...]]`, "r"—row, "l"—label)
-- `residueCounts`: see [Residue counts](#residue-counts)
-- `highlightImage`: optional, see [Highlighting](#highlighting-color-scheme)
-- `exceedsLimit`: see [Row limit](#row-limit)
-
-Most of the data generated by it is in the format that is useful for
-`<MultiSequenceAlignmentView />`.
-
-### 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 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.
-
-#### Chemical properties
-
-Defined in `chemical-properties.ts`.
-
-This is an implementation of Clustal X color scheme. See
-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
-
-Defined in `markup.ts`.
-
-This color scheme highlights the parts of sequences that have a special meaning.
-Markup format looks like `<id_0>:<start_0>+<length_0>|<id_1>:<start_1>|...`,
-where `start` and `length` are encoded as base-36 numbers. `length` is optional,
-and is 1 by default. Markup entries can overlap, although right now it's not
-really handled in the UI. IDs bear no special meaning, and can be used in the UI
-directly, or the labels can be looked up in the
-`pl7.app/sequence/annotation/mapping` annotation of the markup column.
-
-For example, a string `1:P+A|2:1G+7|3:2O+D` encodes this markup:
-
-| id | start | length |
-| -- | ----- | ------ |
-| 1  | 25    | 10     |
-| 2  | 52    | 7      |
-| 3  | 96    | 13     |
-
-Note that the markup itself is for an original sequence, not an aligned one. So
-it needs to be adjusted for an aligned sequence (see function
-`markupAlignedSequence`).
-
-### Alignment
-
-Defined in `multi-sequence-alignment.ts`.
-
-To run the actual alignment, MSA component uses
-(kalign)[https://github.com/TimoLassmann/kalign]. It is used as a WASM binary
-through a (Web
-Worker)[https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker].
-Currently, the source is (biowasm)[https://biowasm.com/cdn/v3/kalign/3.3.1],
-which we repackaged to work bundled and without a CDN.
-
-The worker is reused between multiple calls. The results are cached by input
-sequences and alignment params.
-
-### Widgets
-
-#### Consensus
-
-Defined in `Consensus.vue`.
-
-This widget visualizes the most used residue in a column using `miplots4`'s
-`discrete` plot with a `bar` layer.
-
-#### SeqLogo
-
-Defined in `SeqLogo.vue`.
-
-For reference, see https://ivanek.github.io/seqLogo/articles/seqLogo.html. This
-is rendered using `miplots4`'s `discrete` plot with a `logo` layer.
-
-#### Legend
-
-Defined in `Legend.vue`.
-
-Legend for a selected color scheme.
-
-### Toolbar
-
-Defined in `Toolbar.vue`.
-
-Displays the current (settings)[#settings]. Updates to settings are applied to
-model, from which the settings are re-derived afterwards.
-
-### Residue counts
-
-Defined in `residue-counts.ts`.
-
-Supplemental data for [chemical properties](#chemical-properties) color scheme,
-[Consensus](#consensus) and [SeqLogo](#seqlogo) widgets. Simply counts how many
-times each residue was used in a column.
-
-### Settings
-
-Defined in `settings.ts`.
-
-Derived from the `PlMultiSequenceAlignmentModel`, providing defaults for
-`undefined` fields in a model.
-
-- `sequenceColumnIds`: defines which sequence columns should be displayed
-- `labelColumnIds`: defines which label columns should be displayed
-- `colorScheme`: defined which [Color scheme](#highlighting-color-scheme) should
-  be used for output highlighting
-- `widgets`: defines which [Widgets](#widgets) to display
-- `alignmentParams`: params that are used for [kalign](#alignment); currently
-  `gpo`, `gpe` and `tgpe`
-
-Technically, `sequenceColumnIds` and `labelColumnIds` shouldn't be optional, but
-they are implemented as such because the defaults are fetched when the
-`PlMultiSequenceAlignment` component renders.
-
-### Migrations
-
-Defined in `migrations.ts`.
-
-Defines migrations to run for the MSA model before anything is rendered. Useful
-when model format is changed and to upgrade an empty model to one with a
-version. Also, the simplest way to reset all the MSA settings would be to set
-the model to `{}` and run migrations.
-
-### `useMiPlots.ts`
-
-A helper to import `miplots4` dependency dynamically to avoid blowing up the
-bundle. Probably should be moved outside this component at some point.
-
-## Notes
-
-### Row limit
-
-There's an agreed upon limit of 1,000 rows, over which the alignment won't be
-run. This limit is artificial, but it prevents a user from running a computation
-that might be too heavy, especially given that at the moment there's no way to
-terminate the alignment process.
-
-This limit is imposed on `useMultipleAlignmentData`
-/`pFrameDriver.calculateTableData` level.

package/src/components/PlMultiSequenceAlignment/SeqLogo.vue

@@ -1,166 +0,0 @@
-<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;
-}>();
-
-const classes = useCssModule();
-
-const plotEl = useTemplateRef('plotEl');
-
-const palette = {
-  blue: '#549EE7',
-  red: '#E85456',
-  green: '#65BF65',
-  magenta: '#9178E1',
-  pink: '#D568D5',
-  orange: '#C59445',
-  cyan: '#62C7CC',
-  yellow: '#D5D549',
-  black: '#000000',
-};
-
-const residueColors = {
-  A: palette.blue,
-  R: palette.red,
-  N: palette.green,
-  D: palette.magenta,
-  C: palette.pink,
-  Q: palette.green,
-  E: palette.magenta,
-  G: palette.orange,
-  H: palette.cyan,
-  I: palette.blue,
-  L: palette.blue,
-  K: palette.red,
-  M: palette.blue,
-  F: palette.blue,
-  P: palette.yellow,
-  S: palette.green,
-  T: palette.green,
-  W: palette.blue,
-  Y: palette.cyan,
-  V: palette.blue,
-  B: palette.black,
-  X: palette.black,
-  Z: palette.black,
-};
-
-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: 'columnKey',
-    },
-  },
-  secondaryGrouping: {
-    columnName: {
-      type: 'column',
-      value: 'residueKey',
-    },
-  },
-  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 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 },
-  });
-});
-
-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.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 ref="plotEl" :class="classes.container" />
-</template>
-
-<style module>
-.container {
-  svg {
-    display: block;
-  }
-}
-</style>