@platforma-sdk/ui-vue 1.34.17 → 1.35.0

package/src/components/PlMultiSequenceAlignment/data.ts

@@ -5,6 +5,7 @@ import {
   type CanonicalizedJson,
   canonicalizeJson,
   createRowSelectionColumn,
+  ensureError,
   getAxisId,
   getRawPlatformaInstance,
   isLabelColumn,
@@ -20,13 +21,12 @@ import {
   pTableValue,
 } from '@platforma-sdk/model';
 import { computedAsync } from '@vueuse/core';
-import { type MaybeRefOrGetter, ref, toValue } from 'vue';
+import { type MaybeRefOrGetter, ref, shallowRef, toValue } from 'vue';
+import { type Markup, markupAlignedSequence, parseMarkup } from './markup';
 import { multiSequenceAlignment } from './multi-sequence-alignment';
 
 const getPFrameDriver = () => getRawPlatformaInstance().pFrameDriver;
 
-const getEmptyOptions = () => ({ defaults: [], options: [] });
-
 export const sequenceLimit = 1000;
 
 export function useSequenceColumnsOptions(
@@ -35,10 +35,20 @@ export function useSequenceColumnsOptions(
     sequenceColumnPredicate: PColumnPredicate;
   }>,
 ) {
-  return computedAsync(
-    () => getSequenceColumnsOptions(toValue(params)).catch(getEmptyOptions),
-    getEmptyOptions(),
+  const error = shallowRef<Error>();
+  const data = computedAsync(
+    async () => {
+      try {
+        error.value = undefined;
+        return await getSequenceColumnsOptions(toValue(params));
+      } catch (err) {
+        error.value = ensureError(err);
+        return { options: [], defaults: [] };
+      }
+    },
+    { options: [], defaults: [] },
   );
+  return { data, error };
 }
 
 export function useLabelColumnsOptions(
@@ -50,10 +60,42 @@ export function useLabelColumnsOptions(
       | undefined;
   }>,
 ) {
-  return computedAsync(
-    () => getLabelColumnsOptions(toValue(params)).catch(getEmptyOptions),
-    getEmptyOptions(),
+  const error = shallowRef<Error>();
+  const data = computedAsync(
+    async () => {
+      try {
+        error.value = undefined;
+        return await getLabelColumnsOptions(toValue(params));
+      } catch (err) {
+        error.value = ensureError(err);
+        return { options: [], defaults: [] };
+      }
+    },
+    { options: [], defaults: [] },
   );
+  return { data, error };
+}
+
+export function useMarkupColumnsOptions(
+  params: MaybeRefOrGetter<{
+    pFrame: PFrameHandle | undefined;
+    sequenceColumnIds: PObjectId[];
+  }>,
+) {
+  const error = shallowRef<Error>();
+  const data = computedAsync(
+    async () => {
+      try {
+        error.value = undefined;
+        return await getMarkupColumnsOptions(toValue(params));
+      } catch (err) {
+        error.value = ensureError(err);
+        return [];
+      }
+    },
+    [],
+  );
+  return { data, error };
 }
 
 export function useMultipleAlignmentData(
@@ -61,17 +103,27 @@ export function useMultipleAlignmentData(
     pframe: PFrameHandle | undefined;
     sequenceColumnIds: PObjectId[];
     labelColumnIds: PTableColumnId[];
+    markupColumnId: PObjectId | undefined;
     linkerColumnPredicate: PColumnPredicate | undefined;
     selection: PlSelectionModel | undefined;
   }>,
 ) {
   const loading = ref(true);
-  const result = computedAsync(
-    () => getMultipleAlignmentData(toValue(params)).catch(() => ({ sequences: [], labels: [] })),
+  const error = shallowRef<Error>();
+  const data = computedAsync(
+    async () => {
+      try {
+        error.value = undefined;
+        return await getMultipleAlignmentData(toValue(params));
+      } catch (err) {
+        error.value = ensureError(err);
+        return { sequences: [], labels: [] };
+      }
+    },
     { sequences: [], labels: [] },
     { evaluating: loading },
   );
-  return { data: result, loading };
+  return { data, error, loading };
 }
 
 async function getSequenceColumnsOptions({
@@ -80,11 +132,8 @@ async function getSequenceColumnsOptions({
 }: {
   pFrame: PFrameHandle | undefined;
   sequenceColumnPredicate: (column: PColumnIdAndSpec) => boolean;
-}): Promise<{
-    options: ListOptionNormalized<PObjectId>[];
-    defaults: PObjectId[];
-  }> {
-  if (!pFrame) return getEmptyOptions();
+}): Promise<OptionsWithDefaults<PObjectId>> {
+  if (!pFrame) return { options: [], defaults: [] };
   const pFrameDriver = getPFrameDriver();
   const columns = await pFrameDriver.listColumns(pFrame);
   const options = columns
@@ -107,11 +156,8 @@ async function getLabelColumnsOptions({
   labelColumnOptionPredicate:
     | ((column: PColumnIdAndSpec) => boolean)
     | undefined;
-}): Promise<{
-    options: ListOptionNormalized<PTableColumnId>[];
-    defaults: PTableColumnId[];
-  }> {
-  if (!pFrame) return getEmptyOptions();
+}): Promise<OptionsWithDefaults<PTableColumnId>> {
+  if (!pFrame) return { options: [], defaults: [] };
   const pFrameDriver = getPFrameDriver();
   const columns = await pFrameDriver.listColumns(pFrame);
   const optionMap = new Map<CanonicalizedJson<PTableColumnId>, string>();
@@ -154,24 +200,52 @@ async function getLabelColumnsOptions({
   return { options, defaults };
 }
 
-async function getMultipleAlignmentData(
-  {
-    pframe,
-    sequenceColumnIds,
-    labelColumnIds,
-    linkerColumnPredicate,
-    selection,
-  }: {
-    pframe: PFrameHandle | undefined;
-    sequenceColumnIds: PObjectId[];
-    labelColumnIds: PTableColumnId[];
-    linkerColumnPredicate: PColumnPredicate | undefined;
-    selection: PlSelectionModel | undefined;
-  },
-): Promise<{
-    sequences: string[][];
-    labels: string[][];
-  }> {
+async function getMarkupColumnsOptions({
+  pFrame,
+  sequenceColumnIds,
+}: {
+  pFrame: PFrameHandle | undefined;
+  sequenceColumnIds: PObjectId[];
+}): Promise<ListOptionNormalized<PObjectId>[]> {
+  if (!pFrame || sequenceColumnIds.length !== 1) return [];
+  const pFrameDriver = getPFrameDriver();
+  const columns = await pFrameDriver.listColumns(pFrame);
+  const sequenceColumn = columns.find((column) =>
+    column.columnId === sequenceColumnIds[0],
+  );
+  if (!sequenceColumn) {
+    throw new Error(
+      `Couldn't find sequence column (ID: ${sequenceColumnIds[0]})`,
+    );
+  }
+  return columns
+    .filter((column) =>
+      column.spec.annotations?.['pl7.app/sequence/isAnnotation'] === 'true'
+      && isJsonEqual(sequenceColumn.spec.axesSpec, column.spec.axesSpec)
+      && Object.entries(sequenceColumn.spec.domain ?? {}).every((
+        [key, value],
+      ) => column.spec.domain?.[key] === value),
+    ).map(({ columnId, spec }) => ({
+      value: columnId,
+      label: spec.annotations?.['pl7.app/label'] ?? 'Unlabelled column',
+    }));
+}
+
+async function getMultipleAlignmentData({
+  pframe,
+  sequenceColumnIds,
+  labelColumnIds,
+  markupColumnId,
+  linkerColumnPredicate,
+  selection,
+}: {
+  pframe: PFrameHandle | undefined;
+  sequenceColumnIds: PObjectId[];
+  labelColumnIds: PTableColumnId[];
+  markupColumnId: PObjectId | undefined;
+  linkerColumnPredicate: PColumnPredicate | undefined;
+  selection: PlSelectionModel | undefined;
+}): Promise<MultipleAlignmentData> {
   if (!pframe || sequenceColumnIds.length === 0) {
     return { sequences: [], labels: [] };
   }
@@ -219,13 +293,18 @@ async function getMultipleAlignmentData(
     };
   }
 
+  // left join with labels
   const secondaryEntry: JoinEntry<PObjectId>[] = labelColumnIds
     .flatMap((column) => {
       if (column.type !== 'column') return [];
       return { type: 'column', column: column.id };
     });
 
-  // left join with labels
+  // and markup
+  if (markupColumnId) {
+    secondaryEntry.push({ type: 'column', column: markupColumnId });
+  }
+
   const request: CalculateTableDataRequest<PObjectId> = {
     src: {
       type: 'outer',
@@ -281,6 +360,9 @@ async function getMultipleAlignmentData(
     return column;
   });
 
+  const markupColumn = markupColumnId
+    && table.find(({ spec }) => spec.id === markupColumnId);
+
   const alignedSequences = await Promise.all(
     sequenceColumns.map((column) =>
       multiSequenceAlignment(Array.from(
@@ -305,5 +387,40 @@ async function getMultipleAlignmentData(
       ),
   );
 
-  return { sequences, labels };
+  const result: MultipleAlignmentData = { sequences, labels };
+
+  if (markupColumn) {
+    const labels = JSON.parse(
+      markupColumn.spec.spec.annotations
+        ?.['pl7.app/sequence/annotation/mapping'] ?? '{}',
+    );
+    const data = Array.from(
+      { length: rowCount },
+      (_, row) => {
+        const markup = parseMarkup(
+          pTableValue(markupColumn.data, row, { na: '', absent: '' })
+            ?.toString()
+            ?? '',
+        );
+        return markupAlignedSequence(sequences[row][0], markup);
+      },
+    );
+    result.markup = { labels, data };
+  }
+
+  return result;
 }
+
+type MultipleAlignmentData = {
+  sequences: string[][];
+  labels: string[][];
+  markup?: {
+    labels: Record<string, string>;
+    data: Markup[];
+  };
+};
+
+type OptionsWithDefaults<T> = {
+  options: ListOptionNormalized<T>[];
+  defaults: T[];
+};

package/src/components/PlMultiSequenceAlignment/markup.ts

@@ -0,0 +1,107 @@
+import type { ColorMap } from './types';
+
+export type Markup = { id: string; start: number; length: number }[];
+
+export function parseMarkup(row: string): Markup {
+  return Array.from(row.matchAll(
+    /(?<id>[^:]*):(?<start>[0-9A-Za-z]*)(?:\+(?<length>[0-9A-Za-z]*))?\|?/g,
+  )).map((match) => {
+    const matchGroups = match.groups as {
+      id: string;
+      start: string;
+      length: string | undefined;
+    };
+    const start = Number.parseInt(matchGroups.start, 36);
+    const length = matchGroups.length
+      ? Number.parseInt(matchGroups.length, 36)
+      : 0;
+    return {
+      id: matchGroups.id,
+      start,
+      length,
+    };
+  });
+}
+
+export function markupAlignedSequence(
+  alignedSequence: string,
+  markup: Markup,
+): Markup {
+  const indexMap = alignedSequence.split('').reduce<number[]>(
+    (acc, char, index) => {
+      if (char !== '-') acc.push(index);
+      return acc;
+    },
+    [],
+  );
+  const adjusted = markup.map((segment) => {
+    const start = indexMap[segment.start];
+    const end = indexMap[segment.start + segment.length - 1] + 1;
+    return {
+      id: segment.id,
+      start: start,
+      length: end - start,
+    };
+  });
+  return adjusted;
+}
+
+export function colorizeSequencesByMarkup(
+  { markupRows, columnCount, colorMap }: {
+    markupRows: Markup[];
+    columnCount: number;
+    colorMap: ColorMap;
+  },
+): Promise<Blob> {
+  const canvas = new OffscreenCanvas(columnCount, markupRows.length);
+  const context = canvas.getContext('2d')!;
+  for (const [rowIndex, markup] of markupRows.entries()) {
+    for (const segment of markup) {
+      const color = colorMap[segment.id]?.color;
+      if (!color) continue;
+      context.fillStyle = color;
+      context.fillRect(segment.start, rowIndex, segment.length, 1);
+    }
+  }
+  return canvas.convertToBlob();
+}
+
+export const markupColors = [
+  '#E5F2FF',
+  '#FFE8E8',
+  '#F0EBFF',
+  '#FFFFE3',
+  '#E5F7E5',
+  '#FEEAFE',
+  '#FDEED6',
+  '#E8FDFE',
+  '#CCDFF2',
+  '#F2CCCD',
+  '#D5CCF2',
+  '#F2F2CC',
+  '#CCF2CC',
+  '#F2CCF2',
+  '#EFDDBF',
+  '#DEEEEF',
+];
+
+if (import.meta.vitest) {
+  const { test, expect } = import.meta.vitest;
+  test('annotateAlignedRow', () => {
+    const alignedSequence
+      = 'EVRLVESGGALVQPGGSLRLSCVAASGFTFINNWVTWVRQAPGKGLEWVANIKEDGSQKYYVDSVKGRFTISRDNAEKSVYLQMSSLRVDDTAVYYCAR------------GRAV----D---QWGQGTLVTVSS';
+    //   0         10        20        30        40        50        60        70        80        90        100       110       120       130
+    //   EVRLVESGGALVQPGGSLRLSCVAASGFTFINNWVTWVRQAPGKGLEWVANIKEDGSQKYYVDSVKGRFTISRDNAEKSVYLQMSSLRVDDTAVYYCARGRAVDQWGQGTLVTVSS
+    const markup = [
+      { id: '1', start: 0, length: 99 },
+      { id: '2', start: 99, length: 3 },
+      { id: '3', start: 102, length: 14 },
+    ];
+    const alignedMarkup = markupAlignedSequence(alignedSequence, markup);
+    expect(alignedMarkup).toEqual([
+      { id: '1', start: 0, length: 99 },
+      { id: '2', start: 111, length: 3 },
+      { id: '3', start: 114, length: 21 },
+    ]);
+  });
+}

package/src/components/PlMultiSequenceAlignment/settings.ts

@@ -1,7 +1,7 @@
-import type { ColorScheme } from './types';
+import type { ColorSchemeOption } from './types';
 
 export const defaultSettings = {
-  colorScheme: 'chemical-properties' as ColorScheme,
+  colorScheme: { type: 'chemical-properties' } as ColorSchemeOption,
   consensus: true,
   seqLogo: true,
   legend: true,

package/src/components/PlMultiSequenceAlignment/types.ts

@@ -1,3 +1,15 @@
-export type ColorScheme = 'chemical-properties' | 'no-color';
+import type { PObjectId } from '@platforma-sdk/model';
+
+export type ColorSchemeOption =
+  | { type: 'no-color' }
+  | { type: 'chemical-properties' }
+  | { type: 'markup'; columnId: PObjectId };
+
+export type ColorScheme = {
+  type: ColorSchemeOption['type'];
+  colors: ColorMap;
+};
+
+export type ColorMap = Record<string, { label: string; color: string }>;
 
 export type ResidueCounts = Record<string, number>[];

package/src/components/PlMultiSequenceAlignment/useMiPlots.ts

@@ -1,6 +1,5 @@
-import { shallowRef } from 'vue';
-import { onMounted } from 'vue';
 import { ensureError } from '@platforma-sdk/model';
+import { onMounted, shallowRef } from 'vue';
 
 export function useMiPlots() {
   const load = async () => {

package/dist/src/components/PlMultiSequenceAlignment/highlight/chemical-properties.d.ts

@@ -1,20 +0,0 @@
-import type { ResidueCounts } from '../types';
-import type { SegmentedColumn } from './types';
-export declare const chemicalCategories: readonly ["hydrophobic", "positiveCharge", "negativeCharge", "polar", "cysteine", "glycine", "proline", "aromatic"];
-export type ChemicalCategory = typeof chemicalCategories[number];
-export declare const chemicalPropertiesLabels: Record<ChemicalCategory, string>;
-export declare const chemicalPropertiesColors: Record<ChemicalCategory, string>;
-type ColumnChemicalProperties = {
-    residues: string;
-    category: ChemicalCategory;
-}[];
-export declare const getColumnChemicalProperties: ({ residueCounts, rowCount }: {
-    residueCounts: ResidueCounts;
-    rowCount: number;
-}) => ColumnChemicalProperties[];
-export declare function alignedSequencesToSegmentedColumns({ alignedSequences, consensuses }: {
-    alignedSequences: string[];
-    consensuses: ColumnChemicalProperties[];
-}): SegmentedColumn<ChemicalCategory>[];
-export {};
-//# sourceMappingURL=chemical-properties.d.ts.map

package/dist/src/components/PlMultiSequenceAlignment/highlight/chemical-properties.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chemical-properties.d.ts","sourceRoot":"","sources":["../../../../../src/components/PlMultiSequenceAlignment/highlight/chemical-properties.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,kBAAkB,qHASrB,CAAC;AAEX,MAAM,MAAM,gBAAgB,GAAG,OAAO,kBAAkB,CAAC,MAAM,CAAC,CAAC;AAEjE,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CASrE,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CASrE,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,gBAAgB,CAAC;CAC5B,EAAE,CAAC;AAEJ,eAAO,MAAM,2BAA2B,gCACT;IAC3B,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;CAClB,KACA,wBAAwB,EAsBvB,CAAC;AAEL,wBAAgB,kCAAkC,CAChD,EAAE,gBAAgB,EAAE,WAAW,EAAE,EAAE;IACjC,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,WAAW,EAAE,wBAAwB,EAAE,CAAC;CACzC,GACA,eAAe,CAAC,gBAAgB,CAAC,EAAE,CAuBrC"}

package/dist/src/components/PlMultiSequenceAlignment/highlight/index.d.ts

@@ -1,7 +0,0 @@
-import type { SegmentedColumn } from './types';
-export declare const colorizeSegmentedColumns: <T extends string>({ columns, rowCount, colors }: {
-    columns: SegmentedColumn<T>[];
-    rowCount: number;
-    colors: Record<T, string>;
-}) => Blob;
-//# sourceMappingURL=index.d.ts.map

package/dist/src/components/PlMultiSequenceAlignment/highlight/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/PlMultiSequenceAlignment/highlight/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,wBAAwB,GAAI,CAAC,SAAS,MAAM,iCACxB;IAC7B,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;CAC3B,KACA,IAwBF,CAAC"}

package/dist/src/components/PlMultiSequenceAlignment/highlight/types.d.ts

@@ -1,8 +0,0 @@
-type ColumnSegment<T> = {
-    category: T;
-    start: number;
-    end: number;
-};
-export type SegmentedColumn<T> = ColumnSegment<T>[];
-export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/src/components/PlMultiSequenceAlignment/highlight/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/PlMultiSequenceAlignment/highlight/types.ts"],"names":[],"mappings":"AAAA,KAAK,aAAa,CAAC,CAAC,IAAI;IACtB,QAAQ,EAAE,CAAC,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC"}

package/src/components/PlMultiSequenceAlignment/highlight/index.ts

@@ -1,33 +0,0 @@
-import type { SegmentedColumn } from './types';
-
-export const colorizeSegmentedColumns = <T extends string>(
-  { columns, rowCount, colors }: {
-    columns: SegmentedColumn<T>[];
-    rowCount: number;
-    colors: Record<T, string>;
-  },
-): Blob => {
-  const pathsByColor: Record<string, string> = {};
-  for (const [columnIndex, column] of columns.entries()) {
-    for (const { category, start, end } of column) {
-      const color = colors[category];
-      pathsByColor[color] = (pathsByColor[color] ?? '').concat(
-        [
-          `M${columnIndex},${start}`,
-          'h1',
-          `v${end - start + 1}`,
-          'h-1',
-          'z',
-        ].join(''),
-      );
-    }
-  }
-  return new Blob([
-    `<svg viewBox="0 0 ${columns.length} ${rowCount}" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">`,
-    ...Object.entries(pathsByColor).map(
-      ([color, pathDefinition]) =>
-        `<path d="${pathDefinition}" fill="${color}" />`,
-    ),
-    `</svg>`,
-  ], { type: 'image/svg+xml' });
-};

package/src/components/PlMultiSequenceAlignment/highlight/types.ts

@@ -1,7 +0,0 @@
-type ColumnSegment<T> = {
-  category: T;
-  start: number;
-  end: number;
-};
-
-export type SegmentedColumn<T> = ColumnSegment<T>[];