@platforma-sdk/ui-vue 1.41.19 → 1.42.0

package/src/components/PlMultiSequenceAlignment/markup.ts

@@ -1,4 +1,4 @@
-import type { ColorMap } from './types';
+import type { HighlightLegend } from './types';
 
 export type Markup = { id: string; start: number; length: number }[];
 
@@ -46,27 +46,59 @@ export function markupAlignedSequence(
   return adjusted;
 }
 
-export function colorizeSequencesByMarkup(
-  { markupRows, columnCount, colorMap }: {
+export function highlightByMarkup(
+  { markupRows, columnCount, labels }: {
     markupRows: Markup[];
     columnCount: number;
-    colorMap: ColorMap;
+    labels: Record<string, string>;
   },
-): 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);
+): { blob: Blob; legend: HighlightLegend } {
+  const linesById: Map<string, {
+    row: number;
+    start: number;
+    length: number;
+  }[]> = new Map();
+  for (const [row, markup] of markupRows.entries()) {
+    for (const { id, start, length } of markup) {
+      let bucket = linesById.get(id);
+      if (!bucket) linesById.set(id, bucket = []);
+      bucket.push({ row, start, length });
     }
   }
-  return canvas.convertToBlob();
+  const legend: HighlightLegend = Object.fromEntries(
+    Object.entries(labels)
+      .filter(([id]) => linesById.has(id))
+      .map(([id, label], index) => [
+        id,
+        {
+          label,
+          color: markupColors[index % markupColors.length],
+        },
+      ]),
+  );
+  const blob = new Blob(
+    (function*() {
+      const viewBox = `0 0 ${columnCount} ${markupRows.length * 2}`;
+      yield `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}" stroke-width="2" preserveAspectRatio="none">`;
+      for (const [id, lines] of linesById) {
+        const { color } = legend[id];
+        yield `<path stroke="${color}" d="`;
+        let x = 0, y = 0;
+        for (const { row, start, length } of lines) {
+          yield `m${start - x},${row * 2 + 1 - y}h${length}`;
+          x = start + length;
+          y = row * 2 + 1;
+        }
+        yield '"/>';
+      }
+      yield '</svg>';
+    })().toArray(),
+    { type: 'image/svg+xml' },
+  );
+  return { blob, legend };
 }
 
-export const markupColors = [
+const markupColors = [
   '#E5F2FF',
   '#FFE8E8',
   '#F0EBFF',

package/src/components/PlMultiSequenceAlignment/types.ts

@@ -1,3 +1,3 @@
-export type ColorMap = Record<string, { label: string; color: string }>;
+export type HighlightLegend = Record<string, { label: string; color: string }>;
 
 export type ResidueCounts = Record<string, number>[];

package/dist/lib/ui/uikit/dist/components/PlAccordion/ExpandTransition.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExpandTransition.vue.js","sources":["../../../../../../../../../lib/ui/uikit/src/components/PlAccordion/ExpandTransition.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst onStart = (el: Element) => {\n  el.classList.add('expand-collapse-fix');\n  (el as HTMLElement).style.setProperty('--component-height', el.scrollHeight + 'px');\n};\n\nconst onAfter = (el: Element) => {\n  (el as HTMLElement).style.removeProperty('--component-height');\n  el.classList.remove('expand-collapse-fix');\n};\n</script>\n\n<template>\n  <Transition name=\"expand-collapse\" @enter=\"onStart\" @leave=\"onStart\" @after-enter=\"onAfter\" @after-leave=\"onAfter\">\n    <slot/>\n  </Transition>\n</template>\n\n<style>\n.expand-collapse-fix {\n  overflow: hidden;\n}\n\n.expand-collapse-enter-active,\n.expand-collapse-leave-active {\n  transition:\n    height 0.2s ease-in-out,\n    opacity 0.2s ease-in-out;\n  height: var(--component-height);\n}\n\n.expand-collapse-enter-from,\n.expand-collapse-leave-to {\n  opacity: 0.5;\n  height: 0;\n}\n</style>\n"],"names":["onStart","el","onAfter"],"mappings":";;;;AACMA,UAAAA,IAAU,CAACC,MAAgB;AAC5BA,QAAA,UAAU,IAAI,qBAAqB,GACrCA,EAAmB,MAAM,YAAY,sBAAsBA,EAAG,eAAe,IAAI;AAAA,IAAA,GAG9EC,IAAU,CAACD,MAAgB;AAC9BA,QAAmB,MAAM,eAAe,oBAAoB,GAC1DA,EAAA,UAAU,OAAO,qBAAqB;AAAA,IAC3C;;;;;;;;;;;;;;;"}