@platforma-sdk/ui-vue 1.45.35 → 1.45.36

package/dist/components/PlMultiSequenceAlignment/settings.js

@@ -1,9 +0,0 @@
-const e = {
-  colorScheme: { type: "chemical-properties" },
-  widgets: ["seqLogo", "consensus", "legend"],
-  alignmentParams: { gpo: 5.5, gpe: 2, tgpe: 1 }
-};
-export {
-  e as defaultSettings
-};
-//# sourceMappingURL=settings.js.map

package/dist/components/PlMultiSequenceAlignment/settings.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"settings.js","sources":["../../../src/components/PlMultiSequenceAlignment/settings.ts"],"sourcesContent":["import type { PlMultiSequenceAlignmentSettings } from '@platforma-sdk/model';\n\nexport const defaultSettings: PlMultiSequenceAlignmentSettings = {\n  colorScheme: { type: 'chemical-properties' },\n  widgets: ['seqLogo', 'consensus', 'legend'],\n  alignmentParams: { gpo: 5.5, gpe: 2.0, tgpe: 1.0 },\n};\n"],"names":["defaultSettings"],"mappings":"AAEO,MAAMA,IAAoD;AAAA,EAC/D,aAAa,EAAE,MAAM,sBAAA;AAAA,EACrB,SAAS,CAAC,WAAW,aAAa,QAAQ;AAAA,EAC1C,iBAAiB,EAAE,KAAK,KAAK,KAAK,GAAK,MAAM,EAAA;AAC/C;"}

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

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

package/dist/components/PlMultiSequenceAlignment/useMiPlots.d.ts

@@ -1,4 +0,0 @@
-export declare function useMiPlots(): {
-    miplots: import('vue').ShallowRef<typeof import('@milaboratories/miplots4').MiPlots | undefined, typeof import('@milaboratories/miplots4').MiPlots | undefined>;
-    error: import('vue').ShallowRef<Error | undefined, Error | undefined>;
-};

package/dist/components/PlMultiSequenceAlignment/useMiPlots.js

@@ -1,19 +0,0 @@
-import { ensureError as s } from "@platforma-sdk/model";
-import { shallowRef as n, onMounted as a } from "vue";
-function l() {
-  const e = async () => {
-    const { MiPlots: o } = await import("@milaboratories/miplots4");
-    return o;
-  }, r = n(), t = n();
-  return a(async () => {
-    try {
-      r.value = await e();
-    } catch (o) {
-      t.value = s(o);
-    }
-  }), { miplots: r, error: t };
-}
-export {
-  l as useMiPlots
-};
-//# sourceMappingURL=useMiPlots.js.map

package/dist/components/PlMultiSequenceAlignment/useMiPlots.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMiPlots.js","sources":["../../../src/components/PlMultiSequenceAlignment/useMiPlots.ts"],"sourcesContent":["import { ensureError } from '@platforma-sdk/model';\nimport { onMounted, shallowRef } from 'vue';\n\nexport function useMiPlots() {\n  const load = async () => {\n    const { MiPlots } = await import('@milaboratories/miplots4');\n    return MiPlots;\n  };\n\n  const miplots = shallowRef<Awaited<ReturnType<typeof load>>>();\n\n  const error = shallowRef<Error>();\n\n  onMounted(async () => {\n    try {\n      miplots.value = await load();\n    } catch (err) {\n      error.value = ensureError(err);\n    }\n  });\n\n  return { miplots, error };\n}\n"],"names":["useMiPlots","load","MiPlots","miplots","shallowRef","error","onMounted","err","ensureError"],"mappings":";;AAGO,SAASA,IAAa;AAC3B,QAAMC,IAAO,YAAY;AACvB,UAAM,EAAE,SAAAC,EAAA,IAAY,MAAM,OAAO,0BAA0B;AAC3D,WAAOA;AAAA,EACT,GAEMC,IAAUC,EAAA,GAEVC,IAAQD,EAAA;AAEd,SAAAE,EAAU,YAAY;AACpB,QAAI;AACF,MAAAH,EAAQ,QAAQ,MAAMF,EAAA;AAAA,IACxB,SAASM,GAAK;AACZ,MAAAF,EAAM,QAAQG,EAAYD,CAAG;AAAA,IAC/B;AAAA,EACF,CAAC,GAEM,EAAE,SAAAJ,GAAS,OAAAE,EAAA;AACpB;"}

package/src/components/PlMultiSequenceAlignment/Consensus.vue

@@ -1,165 +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;
-  labelsClass: string;
-}>();
-
-const classes = useCssModule();
-
-const plotEl = useTemplateRef('plotEl');
-
-const columns = computed(() =>
-  props.residueCounts.map((column) => {
-    let totalCount = 0;
-    let topResidue = { label: '', count: 0 };
-    for (const [residue, count] of Object.entries(column)) {
-      totalCount += count;
-      if (residue === '-') continue;
-      if (count > topResidue.count) topResidue = { label: residue, count };
-    }
-    const confidence = CSS.percent(topResidue.count / totalCount * 100);
-    return {
-      label: topResidue.label,
-      color: `color-mix(in oklab, ${confidence} #3056AE, #C1CDE9)`,
-    };
-  }),
-);
-
-const settings = computed(() => {
-  const width = props.residueCounts.length * cellSize.inline;
-  return ({
-    type: 'discrete',
-    y: {
-      type: 'column',
-      value: 'countKey',
-    },
-    legend: { show: false },
-    primaryGrouping: {
-      columnName: {
-        type: 'column',
-        value: 'columnKey',
-      },
-      order: props.residueCounts.map((_, i) => i),
-      inheritedAes: Object.fromEntries(
-        columns.value.map(({ color }) => ({ fillColor: color })).entries(),
-      ),
-    },
-    layers: [{
-      type: 'bar',
-      height: 'max',
-      aes: {
-        ...props.residueCounts.length && {
-          width: (width - props.residueCounts.length + 1)
-            / props.residueCounts.length,
-        },
-        fillColor: {
-          type: 'primaryGrouping',
-        },
-        lineColor: '#ffffff',
-      },
-    }],
-    title: {
-      name: '',
-      show: false,
-    },
-    size: {
-      width,
-      height: 60,
-      outerOffset: 0,
-      innerOffset: 0,
-    },
-    xAxis: {
-      title: '',
-      showGrid: false,
-      showTicks: false,
-      hiddenLabels: true,
-    },
-    yAxis: {
-      title: '',
-      showGrid: false,
-      showTicks: false,
-      hiddenLabels: true,
-    },
-    frame: {
-      type: 'empty',
-    },
-  } satisfies Settings);
-});
-
-const data = computed<DataByColumns>(() => {
-  const countKey: number[] = [];
-  const columnKey: number[] = [];
-  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);
-    }
-  }
-  return ({
-    type: 'columns',
-    id: `consensus-${crypto.randomUUID()}`,
-    values: { countKey, columnKey },
-  });
-});
-
-const plot = shallowRef<ChartInterface>();
-
-const { miplots, error } = useMiPlots();
-
-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 :class="classes.container">
-    <div :class="props.labelsClass">
-      {{ columns.map(column => column.label).join('') }}
-    </div>
-    <div ref="plotEl" />
-  </div>
-</template>
-
-<style module>
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-
-  svg {
-    display: block;
-  }
-}
-</style>

package/src/components/PlMultiSequenceAlignment/Legend.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { useCssModule } from 'vue';
-import type { HighlightLegend } from './types';
-
-const props = defineProps<{
-  legend: HighlightLegend;
-}>();
-
-const classes = useCssModule();
-</script>
-
-<template>
-  <div :class="classes.container">
-    <div
-      v-for="({ label, color }, key) of props.legend"
-      :key="key"
-      :class="classes.item"
-    >
-      <div :class="classes.colorSample" :style="{ backgroundColor: color }" />
-      {{ label }}
-    </div>
-  </div>
-</template>
-
-<style module>
-.container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  max-inline-size: fit-content;
-}
-
-.item {
-  display: flex;
-  gap: 4px;
-}
-
-.colorSample {
-  display: inline-block;
-  block-size: 18px;
-  inline-size: 18px;
-  border-radius: 3px;
-}
-</style>

package/src/components/PlMultiSequenceAlignment/MultiSequenceAlignmentView.vue

@@ -1,299 +0,0 @@
-<script lang="ts" setup>
-import type { PlMultiSequenceAlignmentWidget } from '@platforma-sdk/model';
-import {
-  computed,
-  onBeforeMount,
-  onBeforeUnmount,
-  onWatcherCleanup,
-  ref,
-  useCssModule,
-  useTemplateRef,
-  watch,
-} from 'vue';
-import { cellSize } from './cell-size';
-import Consensus from './Consensus.vue';
-import Legend from './Legend.vue';
-import type { TreeNodeData } from './phylogenetic-tree.worker';
-import PhylogeneticTree from './PhylogeneticTree.vue';
-import SeqLogo from './SeqLogo.vue';
-import type { HighlightLegend, ResidueCounts } from './types';
-
-const props = defineProps<{
-  sequences: {
-    name: string;
-    rows: string[];
-    residueCounts: ResidueCounts;
-    highlightImageUrl?: string;
-  }[];
-  labels: {
-    rows: string[];
-  }[];
-  highlightLegend: HighlightLegend | undefined;
-  phylogeneticTree: TreeNodeData[] | undefined;
-  widgets: PlMultiSequenceAlignmentWidget[];
-}>();
-
-const classes = useCssModule();
-
-const rootEl = useTemplateRef('rootRef');
-defineExpose({ rootEl });
-
-const rowCount = computed(() => props.sequences.at(0)?.rows.length ?? 0);
-
-const targetCellInlineSize = CSS.px(cellSize.inline).toString();
-const targetCellBlockSize = CSS.px(cellSize.block).toString();
-
-const referenceCellRef = useTemplateRef('referenceCell');
-const referenceCellInlineSize = ref<number>();
-
-const cornerRef = useTemplateRef('corner');
-const cornerInlineSize = ref<number>();
-
-const letterSpacing = computed(() =>
-  referenceCellInlineSize.value
-    ? CSS.px(cellSize.inline - referenceCellInlineSize.value).toString()
-    : undefined,
-);
-
-const sequenceNameInsetInlineStart = computed(() =>
-  CSS.px(cornerInlineSize.value ?? 0).toString(),
-);
-
-let observer: ResizeObserver;
-
-onBeforeMount(() => {
-  const getInlineSize = (entry: ResizeObserverEntry) =>
-    entry.borderBoxSize.find(Boolean)?.inlineSize;
-
-  observer = new ResizeObserver((entries) => {
-    for (const entry of entries) {
-      switch (entry.target) {
-        case referenceCellRef.value:
-          referenceCellInlineSize.value = getInlineSize(entry);
-          break;
-        case cornerRef.value:
-          cornerInlineSize.value = getInlineSize(entry);
-          break;
-      }
-    }
-  });
-});
-
-onBeforeUnmount(() => {
-  observer.disconnect();
-});
-
-for (const ref of [referenceCellRef, cornerRef]) {
-  watch(ref, (el, prevEl) => {
-    if (el) observer.observe(el);
-    onWatcherCleanup(() => {
-      if (prevEl) observer.unobserve(prevEl);
-    });
-  });
-}
-</script>
-
-<template>
-  <div ref="rootRef" :class="classes.root">
-    <div ref="referenceCell" :class="classes.referenceCell">x</div>
-    <div :class="['pl-scrollable', classes.table]">
-      <div :class="classes.sidebar">
-        <PhylogeneticTree
-          v-if="props.widgets.includes('tree') && props.phylogeneticTree"
-          :tree="props.phylogeneticTree"
-          :class="classes.phylogeneticTree"
-        />
-        <div :class="classes.labels">
-          <template
-            v-for="({ rows }, columnIndex) of props.labels"
-            :key="columnIndex"
-          >
-            <div v-for="(row, rowIndex) of rows" :key="rowIndex">
-              {{ row }}
-            </div>
-          </template>
-        </div>
-      </div>
-      <template v-if="letterSpacing !== undefined">
-        <div
-          v-for="(column, columnIndex) of props.sequences"
-          :key="columnIndex"
-          :class="classes.sequenceColumn"
-        >
-          <div :class="classes.sequenceHeader">
-            <div
-              v-show="props.sequences.length > 1"
-              :class="classes.sequenceName"
-            >
-              {{ column.name }}
-            </div>
-            <Consensus
-              v-if="props.widgets.includes('consensus')"
-              :residue-counts="column.residueCounts"
-              :labels-class="classes.sequenceRow"
-            />
-            <SeqLogo
-              v-if="props.widgets.includes('seqLogo')"
-              :residue-counts="column.residueCounts"
-            />
-          </div>
-          <div
-            :class="classes.sequenceRowsContainer"
-            :style="{
-              backgroundImage: column.highlightImageUrl
-                ? `url(${column.highlightImageUrl})`
-                : undefined,
-            }"
-          >
-            <div
-              v-for="(row, rowIndex) of column.rows"
-              :key="rowIndex"
-              :class="classes.sequenceRow"
-            >
-              {{ row }}
-            </div>
-          </div>
-        </div>
-      </template>
-      <div ref="corner" :class="classes.corner" />
-    </div>
-    <Legend
-      v-if="props.widgets.includes('legend') && props.highlightLegend"
-      :legend="props.highlightLegend"
-    />
-  </div>
-</template>
-
-<style module>
-.root {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  min-block-size: 0;
-  -webkit-print-color-adjust: exact;
-  print-color-adjust: exact;
-  container-type: inline-size;
-
-  &[data-pre-print] {
-    container-type: unset;
-
-    .sidebar {
-      max-inline-size: unset;
-    }
-  }
-}
-
-.referenceCell {
-  position: fixed;
-  visibility: hidden;
-  font-family: Spline Sans Mono;
-  font-weight: 600;
-  line-height: v-bind('targetCellBlockSize');
-}
-
-.table {
-  display: grid;
-  grid-template-columns:
-    [sidebar-start] auto [sidebar-end] repeat(
-    v-bind('props.sequences.length'),
-    [column-start] auto [column-end]
-  );
-  grid-template-rows:
-    [header-start] auto [header-end]
-    repeat(v-bind('rowCount'), [row-start] auto [row-end]);
-  justify-content: start;
-  position: relative;
-  @media print {
-    overflow: visible;
-  }
-}
-
-.sidebar {
-  grid-column: sidebar;
-  grid-row: 1 row-start / -1 row-end;
-  display: grid;
-  grid-template-rows: subgrid;
-  position: sticky;
-  inset-inline-start: 0;
-  background-color: #fff;
-  inline-size: min-content;
-  max-inline-size: 30cqi;
-  overflow: scroll;
-  overscroll-behavior-inline: none;
-  scrollbar-width: none;
-}
-
-.phylogeneticTree {
-  grid-row: 1 row-start / -1 row-end;
-}
-
-.labels {
-  grid-row: 1 row-start / -1 row-end;
-  display: grid;
-  grid-template-columns: repeat(v-bind('props.labels.length'), auto);
-  grid-template-rows: subgrid;
-  grid-auto-flow: column;
-  column-gap: 12px;
-  padding-inline-end: 12px;
-  font-family: Spline Sans Mono;
-  line-height: v-bind('targetCellBlockSize');
-  white-space: nowrap;
-}
-
-.sequenceColumn {
-  grid-row: header-start / -1 row-end;
-  display: grid;
-  grid-template-rows: subgrid;
-  & + & {
-    margin-inline-start: 24px;
-  }
-}
-
-.sequenceHeader {
-  grid-row: header;
-  display: flex;
-  flex-direction: column;
-  justify-content: end;
-  min-inline-size: 0;
-  position: sticky;
-  inset-block-start: 0;
-  background-color: #fff;
-}
-
-.sequenceName {
-  margin-block-end: 4px;
-  font-weight: 700;
-  line-height: 20px;
-  inline-size: fit-content;
-  position: sticky;
-  inset-inline-start: v-bind('sequenceNameInsetInlineStart');
-}
-
-.sequenceRowsContainer {
-  grid-row: 1 row-start / -1 row-end;
-  display: grid;
-  grid-template-rows: subgrid;
-}
-
-.sequenceRow {
-  font-family: Spline Sans Mono;
-  font-weight: 600;
-  line-height: v-bind('targetCellBlockSize');
-  letter-spacing: v-bind('letterSpacing');
-  text-indent: calc(v-bind('letterSpacing') / 2);
-  inline-size: calc-size(
-    min-content,
-    round(down, size, v-bind('targetCellInlineSize'))
-  );
-  white-space: nowrap;
-}
-
-.corner {
-  grid-column: sidebar;
-  grid-row: header;
-  position: sticky;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  background-color: #fff;
-}
-</style>

package/src/components/PlMultiSequenceAlignment/PhylogeneticTree.vue

@@ -1,110 +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 { TreeNodeData } from './phylogenetic-tree.worker';
-import { useMiPlots } from './useMiPlots';
-
-const props = defineProps<{
-  tree: TreeNodeData[];
-}>();
-
-const classes = useCssModule();
-
-const plotEl = useTemplateRef('plotEl');
-
-const settings: Settings = {
-  type: 'dendro',
-  title: { show: false, name: '' },
-  size: {
-    width: 149,
-    minCellHeight: cellSize.block,
-    maxCellHeight: cellSize.block,
-    marginLeft: 1,
-    marginRight: 0,
-    marginTop: 0,
-    marginBottom: 0,
-  },
-  mode: 'normal',
-  leavesMode: 'alignLeavesToLine',
-  leavesOrder: 'indexAsc',
-  legend: { show: false },
-  id: {
-    type: 'column',
-    value: 'nodeId',
-  },
-  parentId: {
-    type: 'column',
-    value: 'parentId',
-  },
-  height: {
-    type: 'column',
-    value: 'distance',
-  },
-  showNodes: false,
-  showNodesLabels: false,
-  showLeavesLabels: false,
-  rootPosition: 'left',
-};
-
-const data = computed<DataByColumns>(() => {
-  const nodeId: number[] = [];
-  const parentId: (number | null)[] = [];
-  const distance: number[] = [];
-  for (const node of props.tree) {
-    nodeId.push(node.id);
-    parentId.push(node.parentId ?? null);
-    distance.push(node.length ?? 0);
-  }
-  return ({
-    type: 'columns',
-    id: `phylogeneticTree-${crypto.randomUUID()}`,
-    values: { nodeId, parentId, distance },
-  });
-});
-
-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);
-    plot.value.mount(plotEl.value);
-  } else {
-    plot.value.updateSettingsAndData(data.value, settings);
-  }
-});
-
-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>