@milaboratories/multi-sequence-alignment 1.45.0

package/src/Toolbar.vue

@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import { isJsonEqual } from '@milaboratories/helpers';
+import {
+  type ListOptionNormalized,
+  PlBtnGhost,
+  PlBtnPrimary,
+  PlBtnSecondary,
+  PlCheckbox,
+  PlDropdown,
+  PlDropdownMulti,
+  PlNumberField,
+  PlSlideModal,
+} from '@milaboratories/uikit';
+import type {
+  PlMultiSequenceAlignmentColorSchemeOption as ColorSchemeOption,
+  PlMultiSequenceAlignmentSettings as Settings,
+  PlMultiSequenceAlignmentWidget,
+  PObjectId,
+  PTableColumnId,
+} from '@platforma-sdk/model';
+import { computed, ref, useCssModule, watchEffect } from 'vue';
+import { defaultSettings } from './settings';
+
+const props = defineProps<{
+  settings: Settings;
+  sequenceColumnOptions: ListOptionNormalized<PObjectId>[] | undefined;
+  labelColumnOptions: ListOptionNormalized<PTableColumnId>[] | undefined;
+  colorSchemeOptions: ListOptionNormalized<ColorSchemeOption>[];
+}>();
+
+const emit = defineEmits<{
+  updateSettings: [Partial<Settings>];
+  export: [];
+}>();
+
+const classes = useCssModule();
+
+const settingsOpen = ref(false);
+
+function updateSetting<K extends keyof Settings>(
+  key: K,
+  value: Settings[K] | undefined,
+) {
+  emit('updateSettings', { [key]: value });
+}
+
+function toggleWidget(
+  widget: PlMultiSequenceAlignmentWidget,
+  checked: boolean,
+) {
+  updateSetting(
+    'widgets',
+    checked
+      ? [...props.settings.widgets, widget]
+      : props.settings.widgets.filter((w) => widget !== w),
+  );
+}
+
+const alignmentParams = ref({ ...props.settings.alignmentParams });
+watchEffect(() => {
+  alignmentParams.value = { ...props.settings.alignmentParams };
+});
+
+const alignmentParamsChangesPending = computed(() =>
+  !isJsonEqual(props.settings.alignmentParams, alignmentParams.value),
+);
+
+const canResetAlignmentParams = computed(() =>
+  !isJsonEqual(props.settings.alignmentParams, defaultSettings.alignmentParams),
+);
+</script>
+
+<template>
+  <div :class="classes.container">
+    <div :class="classes.line">
+      <div :class="classes.section">
+        <PlDropdownMulti
+          label="Sequence Columns"
+          :model-value="props.settings.sequenceColumnIds ?? []"
+          :options="props.sequenceColumnOptions"
+          clearable
+          @update:model-value="event => updateSetting('sequenceColumnIds', event)"
+        />
+        <PlDropdownMulti
+          :model-value="props.settings.labelColumnIds ?? []"
+          label="Label Columns"
+          :options="props.labelColumnOptions"
+          clearable
+          @update:model-value="event => updateSetting('labelColumnIds', event)"
+        />
+        <PlDropdown
+          :model-value="props.settings.colorScheme"
+          label="Color Scheme"
+          :options="props.colorSchemeOptions"
+          @update:model-value="event => updateSetting('colorScheme', event)"
+        />
+      </div>
+      <div :class="classes.buttons">
+        <PlBtnGhost icon="settings" @click.stop="settingsOpen = true">
+          Settings
+        </PlBtnGhost>
+        <PlBtnGhost icon="export" @click.stop="emit('export')">
+          Export
+        </PlBtnGhost>
+      </div>
+    </div>
+    <div :class="classes.line">
+      <div :class="classes.section">
+        <PlCheckbox
+          :model-value="props.settings.widgets.includes('seqLogo')"
+          @update:model-value="event => toggleWidget('seqLogo', event)"
+        >
+          Seq logo
+        </PlCheckbox>
+        <PlCheckbox
+          :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="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>
+      </div>
+    </div>
+  </div>
+  <PlSlideModal v-model="settingsOpen">
+    <template #title>Settings</template>
+    <PlNumberField
+      v-model="alignmentParams.gpo"
+      label="Gap open penalty"
+      :step="0.1"
+      @keyup.enter="updateSetting('alignmentParams', alignmentParams)"
+    >
+      <template #tooltip>
+        Penalty score assigned to the introduction of a gap in the alignment
+      </template>
+    </PlNumberField>
+    <PlNumberField
+      v-model="alignmentParams.gpe"
+      label="Gap extension penalty"
+      :step="0.1"
+      @keyup.enter="updateSetting('alignmentParams', alignmentParams)"
+    >
+      <template #tooltip>
+        Penalty score assigned to each additional residue added to an existing
+        gap
+      </template>
+    </PlNumberField>
+    <PlNumberField
+      v-model="alignmentParams.tgpe"
+      label="Terminal gap extension penalty"
+      :step="0.1"
+      @keyup.enter="updateSetting('alignmentParams', alignmentParams)"
+    >
+      <template #tooltip>
+        Penalty score assigned to extending gaps at the ends of sequences
+      </template>
+    </PlNumberField>
+    <div
+      v-if="alignmentParamsChangesPending"
+      :class="classes.pendingChanges"
+    >
+      <PlBtnPrimary @click="updateSetting('alignmentParams', alignmentParams)">
+        Apply
+      </PlBtnPrimary>
+      <PlBtnGhost @click="alignmentParams = props.settings.alignmentParams">
+        Cancel
+      </PlBtnGhost>
+    </div>
+    <PlBtnSecondary
+      v-if="canResetAlignmentParams"
+      :class="classes.resetButton"
+      icon="reverse"
+      @click="updateSetting('alignmentParams', undefined)"
+    >
+      Reset to Default
+    </PlBtnSecondary>
+  </PlSlideModal>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.line {
+  display: flex;
+  justify-content: space-between;
+}
+
+.section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+}
+
+.buttons {
+  display: flex;
+}
+
+.pendingChanges {
+  display: flex;
+  button {
+    min-width: 160px;
+  }
+}
+
+.resetButton {
+  margin-block-start: auto;
+  span {
+    text-transform: none;
+  }
+}
+</style>

package/src/cell-size.ts

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

package/src/chemical-properties.ts

@@ -0,0 +1,199 @@
+import type { HighlightLegend, ResidueCounts } from './types';
+
+export function highlightByChemicalProperties(
+  { sequences, residueCounts }: {
+    sequences: string[];
+    residueCounts: ResidueCounts;
+  },
+): { blob: Blob; legend: HighlightLegend } {
+  const lines: {
+    category: ChemicalCategory;
+    column: number;
+    start: number;
+    length: number;
+  }[] = [];
+  const chemicalProperties = getAlignmentChemicalProperties({
+    residueCounts,
+    rowCount: sequences.length,
+  });
+  const width = sequences.at(0)?.length ?? 0;
+  const height = sequences.length;
+  for (let column = 0; column < width; column += 1) {
+    for (let row = 0; row < height; row += 1) {
+      const residue = sequences[row][column];
+      const category = chemicalProperties
+        .at(column)
+        ?.find(({ residues }) => residues.includes(residue))
+        ?.category;
+      if (!category) continue;
+      const lastLine = lines.at(-1);
+      if (
+        lastLine
+        && lastLine.category === category
+        && lastLine.column === column
+        && lastLine.start + lastLine.length === row
+      ) {
+        lastLine.length += 1;
+      } else {
+        lines.push({ category, column, start: row, length: 1 });
+      }
+    }
+  }
+  const linesByCategory = Map.groupBy(lines, ({ category }) => category);
+  const blob = new Blob(
+    (function*() {
+      const viewBox = `0 0 ${width * 2} ${height}`;
+      yield `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}" stroke-width="2" preserveAspectRatio="none">`;
+      for (const [category, lines] of linesByCategory) {
+        const color = chemicalPropertiesColorScheme[category]?.color;
+        if (!color) continue;
+        yield `<path stroke="${color}" d="`;
+        let x = 0, y = 0;
+        for (const { column, start, length } of lines) {
+          yield `m${column * 2 + 1 - x},${start - y}v${length}`;
+          x = column * 2 + 1;
+          y = start + length;
+        }
+        yield '"/>';
+      }
+      yield '</svg>';
+    })().toArray(),
+    { type: 'image/svg+xml' },
+  );
+  const legend = Object.fromEntries(
+    Object.entries(chemicalPropertiesColorScheme)
+      .filter(([color]) => linesByCategory.has(color as ChemicalCategory)),
+  );
+  return { blob, legend };
+}
+
+const getAlignmentChemicalProperties = (
+  { residueCounts, rowCount }: {
+    residueCounts: ResidueCounts;
+    rowCount: number;
+  },
+): ColumnChemicalProperties[] =>
+  residueCounts.map((column) => {
+    const matchedRules = new Set<string>();
+    return categoryCriterion.filter(({ residues, rules }) =>
+      residues.split('').some((residue) => residue in column)
+      && (!rules || rules.split('').map((ruleName) =>
+        [ruleName, ruleDefinitions[ruleName as RuleName]] as const,
+      ).some(([ruleName, { residues, threshold }]) => {
+        if (matchedRules.has(ruleName)) return true;
+        const groupCount = residues.split('')
+          .reduce((acc, residue) => acc + (column[residue] ?? 0), 0);
+        const matches = groupCount >= rowCount * threshold;
+        if (matches) matchedRules.add(ruleName);
+        return matches;
+      })),
+    );
+  });
+
+type ColumnChemicalProperties = {
+  residues: string;
+  category: ChemicalCategory;
+}[];
+
+const chemicalPropertiesColorScheme = {
+  hydrophobic: {
+    label: 'Hydrophobic',
+    color: '#99CCFF',
+  },
+  positiveCharge: {
+    label: 'Positive Charged',
+    color: '#FFA2A3',
+  },
+  negativeCharge: {
+    label: 'Negative Charged',
+    color: '#C1ADFF',
+  },
+  polar: {
+    label: 'Polar',
+    color: '#99E099',
+  },
+  cysteine: {
+    label: 'Cysteines',
+    color: '#FAAAFA',
+  },
+  glycine: {
+    label: 'Glycines',
+    color: '#F7BC5D',
+  },
+  proline: {
+    label: 'Prolines',
+    color: '#FFFF8F',
+  },
+  aromatic: {
+    label: 'Aromatic',
+    color: '#A2F5FA',
+  },
+} satisfies HighlightLegend;
+
+export type ChemicalCategory = keyof typeof chemicalPropertiesColorScheme;
+
+/*
+ * Below taken mostly from
+ * https://www.rbvi.ucsf.edu/chimera/1.2065/docs/ContributedSoftware/multalignviewer/colprot.par}
+ */
+
+const ruleDefinitions = {
+  '%': { residues: 'WLVIMAFCYHP', threshold: 0.6 },
+  '#': { residues: 'WLVIMAFCYHP', threshold: 0.8 },
+  '-': { residues: 'ED', threshold: 0.5 },
+  '+': { residues: 'KR', threshold: 0.6 },
+  'g': { residues: 'G', threshold: 0.5 },
+  'n': { residues: 'N', threshold: 0.5 },
+  'q': { residues: 'QE', threshold: 0.5 },
+  'p': { residues: 'P', threshold: 0.5 },
+  't': { residues: 'TS', threshold: 0.5 },
+  'A': { residues: 'A', threshold: 0.85 },
+  'C': { residues: 'C', threshold: 0.85 },
+  'D': { residues: 'D', threshold: 0.85 },
+  'E': { residues: 'E', threshold: 0.85 },
+  'F': { residues: 'F', threshold: 0.85 },
+  'G': { residues: 'G', threshold: 0.85 },
+  'H': { residues: 'H', threshold: 0.85 },
+  'I': { residues: 'I', threshold: 0.85 },
+  'K': { residues: 'K', threshold: 0.85 },
+  'L': { residues: 'L', threshold: 0.85 },
+  'M': { residues: 'M', threshold: 0.85 },
+  'N': { residues: 'N', threshold: 0.85 },
+  'P': { residues: 'P', threshold: 0.85 },
+  'Q': { residues: 'Q', threshold: 0.85 },
+  'R': { residues: 'R', threshold: 0.85 },
+  'S': { residues: 'S', threshold: 0.85 },
+  'T': { residues: 'T', threshold: 0.85 },
+  'V': { residues: 'V', threshold: 0.85 },
+  'W': { residues: 'W', threshold: 0.85 },
+  'Y': { residues: 'Y', threshold: 0.85 },
+};
+
+type RuleName = keyof typeof ruleDefinitions;
+
+const categoryCriterion: Criteria[] = [
+  { residues: 'G', category: 'glycine', rules: '' },
+  { residues: 'P', category: 'proline', rules: '' },
+  { residues: 'T', category: 'polar', rules: 'tST%#' },
+  { residues: 'S', category: 'polar', rules: 'tST#' },
+  { residues: 'N', category: 'polar', rules: 'nND' },
+  { residues: 'Q', category: 'polar', rules: 'qQE+KR' },
+  // criteria below has to go before the other criteria for C,
+  // otherwise it will never match
+  { residues: 'C', category: 'cysteine', rules: 'C' },
+  { residues: 'WLVIMF', category: 'hydrophobic', rules: '%#ACFHILMVWYPp' },
+  // below there was an 's' rule too,
+  // but no definition of such rule was provided
+  { residues: 'A', category: 'hydrophobic', rules: '%#ACFHILMVWYPpTSG' },
+  { residues: 'C', category: 'hydrophobic', rules: '%#AFHILMVWYSPp' },
+  { residues: 'HY', category: 'aromatic', rules: '%#ACFHILMVWYPp' },
+  { residues: 'E', category: 'negativeCharge', rules: '-DEqQ' },
+  { residues: 'D', category: 'negativeCharge', rules: '-DEnN' },
+  { residues: 'KR', category: 'positiveCharge', rules: '+KRQ' },
+];
+
+type Criteria = {
+  residues: string;
+  category: ChemicalCategory;
+  rules: string;
+};