@platforma-sdk/ui-vue 1.41.17 → 1.42.0

package/src/components/PlMultiSequenceAlignment/chemical-properties.ts

@@ -1,6 +1,101 @@
-import type { ColorMap, ResidueCounts } from './types';
+import type { HighlightLegend, ResidueCounts } from './types';
 
-export const chemicalPropertiesColorMap: ColorMap = {
+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',
@@ -33,174 +128,72 @@ export const chemicalPropertiesColorMap: ColorMap = {
     label: 'Aromatic',
     color: '#A2F5FA',
   },
-};
+} satisfies HighlightLegend;
 
-export type ChemicalCategory = keyof typeof chemicalPropertiesColorMap;
+export type ChemicalCategory = keyof typeof chemicalPropertiesColorScheme;
 
-export function colorizeSequencesByChemicalProperties(
-  { sequences, residueCounts, colorMap }: {
-    sequences: string[];
-    residueCounts: ResidueCounts;
-    colorMap: ColorMap;
-  },
-): Promise<Blob> {
-  const canvas = new OffscreenCanvas(
-    sequences[0]?.length ?? 0,
-    sequences.length,
-  );
-  const context = canvas.getContext('2d')!;
-  const chemicalProperties = getAlignmentChemicalProperties({
-    residueCounts,
-    rowCount: sequences.length,
-  });
-  for (const [rowIndex, sequence] of sequences.entries()) {
-    for (const [columnIndex, residue] of sequence.split('').entries()) {
-      const category = chemicalProperties
-        .at(columnIndex)
-        ?.find(({ residues }) => residues.includes(residue))
-        ?.category;
-      if (!category) continue;
-      const color = colorMap[category]?.color;
-      if (!color) continue;
-      context.fillStyle = colorMap[category].color;
-      context.fillRect(columnIndex, rowIndex, 1, 1);
-    }
-  }
-  return canvas.convertToBlob();
-}
+/*
+ * Below taken mostly from
+ * https://www.rbvi.ucsf.edu/chimera/1.2065/docs/ContributedSoftware/multalignviewer/colprot.par}
+ */
 
-const getAlignmentChemicalProperties = (
-  { residueCounts, rowCount }: {
-    residueCounts: ResidueCounts;
-    rowCount: number;
-  },
-): ColumnChemicalProperties[] =>
-  // for every column in a residue counts table
-  // (e.g. table = [{ A: 3, R: 5, Q: 1}, { E: 4, T: 2 }, ...])
-  residueCounts.map((column) => (
-    // find all matching criterion
-    categoryCriterion
-      .filter(({ rules }) =>
-        // by matching at least one rule
-        rules.some(({ groups, threshold }) =>
-          // where at least one residue group
-          groups.some((group) => {
-            // combined
-            const groupCount = group.split('').reduce(
-              (acc, residue) => acc + (column[residue] ?? 0),
-              0,
-            );
-            // is above the required threshold
-            return groupCount > rowCount * threshold;
-          }),
-        ),
-      )
-      .map(({ residues, category }) => ({ residues, category }))
-  ));
+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 ColumnChemicalProperties = {
-  residues: string;
-  category: ChemicalCategory;
-}[];
+type RuleName = keyof typeof ruleDefinitions;
 
-/** @see {@link https://www.jalview.org/help/html/colourSchemes/clustal.html} */
 const categoryCriterion: Criteria[] = [
-  {
-    residues: 'ACILMFWV',
-    category: 'hydrophobic',
-    rules: [
-      { groups: ['WLVIMAFCYHP'], threshold: 0.6 },
-    ],
-  },
-  {
-    residues: 'KR',
-    category: 'positiveCharge',
-    rules: [
-      { groups: ['KR'], threshold: 0.6 },
-      { groups: [...'KRQ'], threshold: 0.8 },
-    ],
-  },
-  {
-    residues: 'E',
-    category: 'negativeCharge',
-    rules: [
-      { groups: ['KR'], threshold: 0.6 },
-      { groups: ['QE'], threshold: 0.5 },
-      { groups: ['ED'], threshold: 0.5 },
-      { groups: [...'EQD'], threshold: 0.85 },
-    ],
-  },
-  {
-    residues: 'D',
-    category: 'negativeCharge',
-    rules: [
-      { groups: ['KR'], threshold: 0.6 },
-      { groups: [...'DEN'], threshold: 0.85 },
-      { groups: ['ED'], threshold: 0.5 },
-    ],
-  },
-  {
-    residues: 'N',
-    category: 'polar',
-    rules: [
-      { groups: ['N'], threshold: 0.5 },
-      { groups: [...'ND'], threshold: 0.85 },
-    ],
-  },
-  {
-    residues: 'Q',
-    category: 'polar',
-    rules: [
-      { groups: ['KR'], threshold: 0.6 },
-      { groups: ['QE'], threshold: 0.5 },
-      { groups: [...'QTKR'], threshold: 0.85 },
-    ],
-  },
-  {
-    residues: 'ST',
-    category: 'polar',
-    rules: [
-      { groups: ['WLVIMAFCYHP'], threshold: 0.6 },
-      { groups: ['TS'], threshold: 0.5 },
-      { groups: [...'ST'], threshold: 0.85 },
-    ],
-  },
-  {
-    residues: 'C',
-    category: 'cysteine',
-    rules: [
-      { groups: ['C'], threshold: 0.85 },
-    ],
-  },
-  {
-    residues: 'G',
-    category: 'glycine',
-    rules: [
-      { groups: ['G'], threshold: 0 },
-    ],
-  },
-  {
-    residues: 'P',
-    category: 'proline',
-    rules: [
-      { groups: ['P'], threshold: 0 },
-    ],
-  },
-  {
-    residues: 'HY',
-    category: 'aromatic',
-    rules: [
-      { groups: ['WLVIMAFCYHP'], threshold: 0.6 },
-      { groups: [...'WYACPQFHILMV'], threshold: 0.85 },
-    ],
-  },
+  { 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: {
-    groups: string[];
-    threshold: number;
-  }[];
+  rules: string;
 };

package/src/components/PlMultiSequenceAlignment/data.ts

@@ -24,20 +24,15 @@ import {
   pTableValue,
 } from '@platforma-sdk/model';
 import { ref, watch } from 'vue';
+import { highlightByChemicalProperties } from './chemical-properties';
 import {
-  chemicalPropertiesColorMap,
-  colorizeSequencesByChemicalProperties,
-} from './chemical-properties';
-import {
-  colorizeSequencesByMarkup,
-  type Markup,
+  highlightByMarkup,
   markupAlignedSequence,
-  markupColors,
   parseMarkup,
 } from './markup';
 import { multiSequenceAlignment } from './multi-sequence-alignment';
 import { getResidueCounts } from './residue-counts';
-import type { ColorMap, ResidueCounts } from './types';
+import type { HighlightLegend, ResidueCounts } from './types';
 
 const getPFrameDriver = () => getRawPlatformaInstance().pFrameDriver;
 
@@ -70,12 +65,13 @@ async function getSequenceColumnsOptions({
 
   const pFrameDriver = getPFrameDriver();
   const columns = await pFrameDriver.listColumns(pFrame);
-  const options = columns
+  const options = columns.values()
     .filter((column) => sequenceColumnPredicate(column))
     .map(({ spec, columnId }) => ({
       label: spec.annotations?.['pl7.app/label'] ?? 'Unlabelled column',
       value: columnId,
-    }));
+    }))
+    .toArray();
   const defaults = options.map(({ value }) => value);
   return { options, defaults };
 }
@@ -93,14 +89,16 @@ async function getLabelColumnsOptions({
   const columns = await pFrameDriver.listColumns(pFrame);
   const optionMap = new Map<CanonicalizedJson<PTableColumnId>, string>();
 
-  const sequenceColumnsAxes = new Map(sequenceColumnIds.flatMap((id) => {
-    const column = columns.find(({ columnId }) => columnId === id);
-    if (!column) {
-      throw new Error(`Couldn't find sequence column (ID: \`${id}\`).`);
-    }
-    return column.spec.axesSpec
-      .map((spec) => [canonicalizeJson(getAxisId(spec)), spec]);
-  }));
+  const sequenceColumnsAxes = new Map(
+    sequenceColumnIds.values().flatMap((id) => {
+      const column = columns.find(({ columnId }) => columnId === id);
+      if (!column) {
+        throw new Error(`Couldn't find sequence column (ID: \`${id}\`).`);
+      }
+      return column.spec.axesSpec.values()
+        .map((spec) => [canonicalizeJson(getAxisId(spec)), spec]);
+    }),
+  );
 
   for (const [axisIdJson, axisSpec] of sequenceColumnsAxes.entries()) {
     const axisId = parseJson(axisIdJson);
@@ -119,10 +117,9 @@ async function getLabelColumnsOptions({
 
   const { hits: compatibleColumns } = await pFrameDriver.findColumns(pFrame, {
     columnFilter: {},
-    compatibleWith: Array.from(
-      sequenceColumnsAxes.keys(),
-      (axisIdJson) => parseJson(axisIdJson),
-    ),
+    compatibleWith: sequenceColumnsAxes.keys()
+      .map((axisIdJson) => parseJson(axisIdJson))
+      .toArray(),
     strictlyCompatible: false,
   });
 
@@ -135,17 +132,18 @@ async function getLabelColumnsOptions({
     );
   }
 
-  const options = Array.from(optionMap).map(
-    ([value, label]) => ({ label, value: parseJson(value) }),
-  );
+  const options = optionMap.entries()
+    .map(([value, label]) => ({ label, value: parseJson(value) }))
+    .toArray();
 
-  const defaults = options
+  const defaults = options.values()
     .filter(({ value }) => {
       if (value.type === 'axis') return true;
       const column = columns.find(({ columnId }) => columnId === value.id);
       return column && isLabelColumn(column.spec);
     })
-    .map(({ value }) => value);
+    .map(({ value }) => value)
+    .toArray();
   return { options, defaults };
 }
 
@@ -168,7 +166,7 @@ async function getMarkupColumnsOptions({
       `Couldn't find sequence column (ID: \`${sequenceColumnIds[0]}\`).`,
     );
   }
-  return columns
+  return columns.values()
     .filter((column) =>
       column.spec.annotations?.['pl7.app/sequence/isAnnotation'] === 'true'
       && isJsonEqual(sequenceColumn.spec.axesSpec, column.spec.axesSpec)
@@ -178,14 +176,14 @@ async function getMarkupColumnsOptions({
     ).map(({ columnId, spec }) => ({
       value: columnId,
       label: spec.annotations?.['pl7.app/label'] ?? 'Unlabelled column',
-    }));
+    }))
+    .toArray();
 }
 
 async function getMultipleAlignmentData({
   pframe,
   sequenceColumnIds,
   labelColumnIds,
-  markupColumnId,
   selection,
   colorScheme,
   alignmentParams,
@@ -193,7 +191,6 @@ async function getMultipleAlignmentData({
   pframe: PFrameHandle | undefined;
   sequenceColumnIds: PObjectId[] | undefined;
   labelColumnIds: PTableColumnId[] | undefined;
-  markupColumnId: PObjectId | undefined;
   selection: PlSelectionModel | undefined;
   colorScheme: PlMultiSequenceAlignmentColorSchemeOption;
   alignmentParams: PlMultiSequenceAlignmentSettings['alignmentParams'];
@@ -249,19 +246,21 @@ async function getMultipleAlignmentData({
     });
 
   // and markup
-  if (markupColumnId) {
-    secondaryEntry.push({ type: 'column', column: markupColumnId });
+  if (colorScheme.type === 'markup') {
+    secondaryEntry.push({ type: 'column', column: colorScheme.columnId });
   }
 
   const sorting: PTableSorting[] = Array.from(
-    new Set(sequenceColumnIds.flatMap((id) => {
-      const column = columns.find(({ columnId }) => columnId === id);
-      if (!column) {
-        throw new Error(`Couldn't find sequence column (ID: ${id})`);
-      }
-      return column.spec.axesSpec
-        .map((spec) => canonicalizeJson(getAxisId(spec)));
-    })),
+    new Set(
+      sequenceColumnIds.values().flatMap((id) => {
+        const column = columns.find(({ columnId }) => columnId === id);
+        if (!column) {
+          throw new Error(`Couldn't find sequence column (ID: ${id})`);
+        }
+        return column.spec.axesSpec
+          .map((spec) => canonicalizeJson(getAxisId(spec)));
+      }),
+    ),
   )
     .sort()
     .map((id) => ({
@@ -320,9 +319,6 @@ async function getMultipleAlignmentData({
     return column;
   });
 
-  const markupColumn = markupColumnId
-    && table.find(({ spec }) => spec.id === markupColumnId);
-
   const alignedSequences = await Promise.all(
     sequenceColumns.map((column) =>
       multiSequenceAlignment(
@@ -360,17 +356,26 @@ async function getMultipleAlignmentData({
   const result: MultipleAlignmentData = {
     sequences: concatenatedSequences,
     sequenceNames,
-    labelsRows: labels,
+    labelRows: labels,
     exceedsLimit,
     residueCounts,
   };
 
-  if (markupColumn) {
-    const labels = JSON.parse(
-      markupColumn.spec.spec.annotations
-        ?.['pl7.app/sequence/annotation/mapping'] ?? '{}',
+  if (colorScheme.type === 'chemical-properties') {
+    result.highlightImage = highlightByChemicalProperties({
+      sequences: concatenatedSequences,
+      residueCounts,
+    });
+  } else if (colorScheme.type === 'markup') {
+    const markupColumn = table.find(({ spec }) =>
+      spec.id === colorScheme.columnId,
     );
-    const data = Array.from(
+    if (!markupColumn) {
+      throw new Error(
+        `Couldn't find markup column (ID: \`${colorScheme.columnId}\`).`,
+      );
+    }
+    const markupRows = Array.from(
       { length: rowCount },
       (_, row) => {
         const markup = parseMarkup(
@@ -381,36 +386,15 @@ async function getMultipleAlignmentData({
         return markupAlignedSequence(sequences[row][0], markup);
       },
     );
-    result.markup = { labels, data };
-  }
-
-  if (colorScheme.type === 'chemical-properties') {
-    const colorMap = chemicalPropertiesColorMap;
-    result.highlightImage = {
-      blob: await colorizeSequencesByChemicalProperties({
-        sequences: concatenatedSequences,
-        residueCounts,
-        colorMap,
-      }),
-      colorMap,
-    };
-  } else if (colorScheme.type === 'markup') {
-    const colorMap = Object.fromEntries(
-      Object.entries(
-        result.markup?.labels ?? {},
-      ).map(([id, label], index) => [
-        id,
-        { label, color: markupColors[index % markupColors.length] },
-      ]),
+    const labels: Record<string, string> = JSON.parse(
+      markupColumn.spec.spec.annotations
+        ?.['pl7.app/sequence/annotation/mapping'] ?? '{}',
     );
-    result.highlightImage = {
-      blob: await colorizeSequencesByMarkup({
-        markupRows: result.markup?.data ?? [],
-        colorMap,
-        columnCount: concatenatedSequences.at(0)?.length ?? 0,
-      }),
-      colorMap,
-    };
+    result.highlightImage = highlightByMarkup({
+      markupRows,
+      columnCount: concatenatedSequences.at(0)?.length ?? 0,
+      labels,
+    });
   }
 
   return result;
@@ -450,15 +434,11 @@ function refreshOnDeepChange<T, P>(cb: (params: P) => Promise<T>) {
 type MultipleAlignmentData = {
   sequences: string[];
   sequenceNames: string[];
-  labelsRows: string[][];
+  labelRows: string[][];
   residueCounts: ResidueCounts;
-  markup?: {
-    labels: Record<string, string>;
-    data: Markup[];
-  };
   highlightImage?: {
     blob: Blob;
-    colorMap: ColorMap;
+    legend: HighlightLegend;
   };
   exceedsLimit: boolean;
 };