@platforma-sdk/ui-vue 1.30.26 → 1.30.38

package/src/components/PlAgDataTable/sources/table-source-v2.ts

@@ -1,35 +1,44 @@
 import type {
   ColDef,
+  ICellRendererParams,
   IServerSideDatasource,
   IServerSideGetRowsParams,
   RowModelType,
 } from 'ag-grid-enterprise';
 import type {
+  AxisId,
   PlDataTableGridStateWithoutSheets,
   PlDataTableModel,
   PTableColumnSpec,
+  PTableKey,
 } from '@platforma-sdk/model';
 import {
+  canonicalizeJson,
   getAxisId,
+  isColumnOptional,
+  mapPTableValueToAxisKey,
   pTableValue,
+  stringifyPTableColumnSpec,
   type PColumnSpec,
   type PFrameDriver,
   type PlDataTableSheet,
   type PTableVector,
 } from '@platforma-sdk/model';
 import * as lodash from 'lodash';
-import type { PlAgDataTableRow } from '../types';
+import type { PlAgDataTableV2Row, PTableKeyJson } from '../types';
 import { makeRowNumberColDef, PlAgDataTableRowNumberColId } from './row-number';
 import { objectHash } from '../../../objectHash';
 import type { Ref } from 'vue';
 import {
+  defaultValueFormatter,
   isLabelColumn,
-  makeColDef,
-  makeRowId,
   PTableHidden,
-  type PlAgCellButtonAxisParams,
 } from './common';
 import canonicalize from 'canonicalize';
+import type { PlAgHeaderComponentType, PlAgHeaderComponentParams } from '../../PlAgColumnHeader';
+import { PlAgColumnHeader } from '../../PlAgColumnHeader';
+import { PlAgTextAndButtonCell } from '../../PlAgTextAndButtonCell';
+import { defaultMainMenuItems } from './menu-items';
 
 /** Convert columnar data from the driver to rows, used by ag-grid */
 function columns2rows(
@@ -37,11 +46,15 @@ function columns2rows(
   columns: PTableVector[],
   axes: number[],
   resultMapping: number[],
-): PlAgDataTableRow[] {
-  const rowData: PlAgDataTableRow[] = [];
+): PlAgDataTableV2Row[] {
+  const rowData: PlAgDataTableV2Row[] = [];
   for (let iRow = 0; iRow < columns[0].data.length; ++iRow) {
-    const key = axes.map((iAxis) => pTableValue(columns[resultMapping[iAxis]], iRow));
-    const row: PlAgDataTableRow = { id: makeRowId(key), key };
+    const key = axes.map((iAxis) => {
+      return mapPTableValueToAxisKey(
+        pTableValue(columns[resultMapping[iAxis]], iRow),
+      );
+    });
+    const row: PlAgDataTableV2Row = { id: makeRowId(key), key };
     fields.forEach((field, iCol) => {
       row[field.toString() as `${number}`] = resultMapping[iCol] === -1
         ? PTableHidden
@@ -66,7 +79,7 @@ export async function updatePFrameGridOptions(
     columnDefs: ColDef[];
     serverSideDatasource?: IServerSideDatasource;
     rowModelType: RowModelType;
-    rowData?: PlAgDataTableRow[];
+    rowData?: PlAgDataTableV2Row[];
   }> {
   const pt = model.tableHandle;
   const specs = model.tableSpec;
@@ -153,7 +166,7 @@ export async function updatePFrameGridOptions(
 
   const ptShape = await pfDriver.getShape(pt);
   const rowCount = ptShape.rows;
-  const columnDefs: ColDef<PlAgDataTableRow>[] = [
+  const columnDefs: ColDef<PlAgDataTableV2Row>[] = [
     makeRowNumberColDef(),
     ...fields.map((i) => makeColDef(i, specs[i], columnVisibility?.hiddenColIds, cellButtonAxisParams)),
   ];
@@ -229,7 +242,7 @@ export async function updatePFrameGridOptions(
         lastParams = params;
 
         let length = 0;
-        let rowData: PlAgDataTableRow[] = [];
+        let rowData: PlAgDataTableV2Row[] = [];
         if (rowCount > 0 && params.request.startRow !== undefined && params.request.endRow !== undefined) {
           length = Math.min(rowCount, params.request.endRow) - params.request.startRow;
           if (length > 0) {
@@ -258,3 +271,85 @@ export async function updatePFrameGridOptions(
     serverSideDatasource,
   };
 }
+
+export type PlAgCellButtonAxisParams = {
+  showCellButtonForAxisId?: AxisId;
+  cellButtonInvokeRowsOnDoubleClick?: boolean;
+  trigger: (key?: PTableKey) => void;
+};
+
+/**
+ * Calculates column definition for a given p-table column
+ */
+export function makeColDef(
+  iCol: number,
+  spec: PTableColumnSpec,
+  hiddenColIds?: string[],
+  cellButtonAxisParams?: PlAgCellButtonAxisParams,
+): ColDef {
+  const colId = stringifyPTableColumnSpec(spec);
+  const valueType = spec.type === 'axis' ? spec.spec.type : spec.spec.valueType;
+  return {
+    colId,
+    mainMenuItems: defaultMainMenuItems,
+    context: spec,
+    field: iCol.toString(),
+    headerName: spec.spec.annotations?.['pl7.app/label']?.trim() ?? 'Unlabeled ' + spec.type + ' ' + iCol.toString(),
+    lockPosition: spec.type === 'axis',
+    hide: hiddenColIds?.includes(colId) ?? isColumnOptional(spec.spec),
+    valueFormatter: defaultValueFormatter,
+    headerComponent: PlAgColumnHeader,
+    cellRendererSelector: cellButtonAxisParams?.showCellButtonForAxisId
+      ? (params: ICellRendererParams) => {
+          if (spec.type !== 'axis') return;
+
+          const axisId = (params.colDef?.context as PTableColumnSpec)?.id as AxisId;
+          if (lodash.isEqual(axisId, cellButtonAxisParams.showCellButtonForAxisId)) {
+            return {
+              component: PlAgTextAndButtonCell,
+              params: {
+                invokeRowsOnDoubleClick: cellButtonAxisParams.cellButtonInvokeRowsOnDoubleClick,
+                onClick: (params: ICellRendererParams<PlAgDataTableV2Row>) => {
+                  cellButtonAxisParams.trigger(params.data?.key);
+                },
+              },
+            };
+          }
+        }
+      : undefined,
+    headerComponentParams: {
+      type: ((): PlAgHeaderComponentType => {
+        switch (valueType) {
+          case 'Int':
+          case 'Long':
+          case 'Float':
+          case 'Double':
+            return 'Number';
+          case 'String':
+          case 'Bytes':
+            return 'Text';
+          default:
+            throw Error(`unsupported data type: ${valueType}`);
+        }
+      })(),
+    } satisfies PlAgHeaderComponentParams,
+    cellDataType: (() => {
+      switch (valueType) {
+        case 'Int':
+        case 'Long':
+        case 'Float':
+        case 'Double':
+          return 'number';
+        case 'String':
+        case 'Bytes':
+          return 'text';
+        default:
+          throw Error(`unsupported data type: ${valueType}`);
+      }
+    })(),
+  };
+}
+
+export function makeRowId(rowKey: PTableKey): PTableKeyJson {
+  return canonicalizeJson(rowKey);
+}

package/src/components/PlAgDataTable/sources/table-source.ts

@@ -1,15 +1,22 @@
 import type {
   ColDef,
+  ICellRendererParams,
   IServerSideDatasource,
   IServerSideGetRowsParams,
   RowModelType,
 } from 'ag-grid-enterprise';
 import type {
+  AxisId,
   PlDataTableGridStateWithoutSheets,
+  PTableColumnSpec,
+  PTableRowKey,
 } from '@platforma-sdk/model';
 import {
+  canonicalizeJson,
   getAxisId,
+  isColumnOptional,
   pTableValue,
+  stringifyPTableColumnSpec,
   type PColumnSpec,
   type PFrameDriver,
   type PlDataTableSheet,
@@ -17,12 +24,16 @@ import {
   type PTableVector,
 } from '@platforma-sdk/model';
 import * as lodash from 'lodash';
-import type { PlAgDataTableRow } from '../types';
+import type { PlAgDataTableRow, PTableRowKeyJson } from '../types';
 import { makeRowNumberColDef, PlAgDataTableRowNumberColId } from './row-number';
 import { getHeterogeneousColumns, updatePFrameGridOptionsHeterogeneousAxes } from './table-source-heterogeneous';
 import { objectHash } from '../../../objectHash';
 import type { Ref } from 'vue';
-import { isLabelColumn, makeColDef, makeRowId, type PlAgCellButtonAxisParams } from './common';
+import { defaultValueFormatter, isLabelColumn } from './common';
+import { defaultMainMenuItems } from './menu-items';
+import type { PlAgHeaderComponentParams, PlAgHeaderComponentType } from '../../PlAgColumnHeader';
+import { PlAgColumnHeader } from '../../PlAgColumnHeader';
+import { PlAgTextAndButtonCell } from '../../PlAgTextAndButtonCell';
 
 /** Convert columnar data from the driver to rows, used by ag-grid */
 function columns2rows(fields: number[], columns: PTableVector[], axes: number[]): PlAgDataTableRow[] {
@@ -246,3 +257,85 @@ export async function updatePFrameGridOptions(
     serverSideDatasource,
   };
 }
+
+export type PlAgCellButtonAxisParams = {
+  showCellButtonForAxisId?: AxisId;
+  cellButtonInvokeRowsOnDoubleClick?: boolean;
+  trigger: (key?: PTableRowKey) => void;
+};
+
+/**
+ * Calculates column definition for a given p-table column
+ */
+export function makeColDef(
+  iCol: number,
+  spec: PTableColumnSpec,
+  hiddenColIds?: string[],
+  cellButtonAxisParams?: PlAgCellButtonAxisParams,
+): ColDef {
+  const colId = stringifyPTableColumnSpec(spec);
+  const valueType = spec.type === 'axis' ? spec.spec.type : spec.spec.valueType;
+  return {
+    colId,
+    mainMenuItems: defaultMainMenuItems,
+    context: spec,
+    field: iCol.toString(),
+    headerName: spec.spec.annotations?.['pl7.app/label']?.trim() ?? 'Unlabeled ' + spec.type + ' ' + iCol.toString(),
+    lockPosition: spec.type === 'axis',
+    hide: hiddenColIds?.includes(colId) ?? isColumnOptional(spec.spec),
+    valueFormatter: defaultValueFormatter,
+    headerComponent: PlAgColumnHeader,
+    cellRendererSelector: cellButtonAxisParams?.showCellButtonForAxisId
+      ? (params: ICellRendererParams) => {
+          if (spec.type !== 'axis') return;
+
+          const axisId = (params.colDef?.context as PTableColumnSpec)?.id as AxisId;
+          if (lodash.isEqual(axisId, cellButtonAxisParams.showCellButtonForAxisId)) {
+            return {
+              component: PlAgTextAndButtonCell,
+              params: {
+                invokeRowsOnDoubleClick: cellButtonAxisParams.cellButtonInvokeRowsOnDoubleClick,
+                onClick: (prms: ICellRendererParams<PlAgDataTableRow>) => {
+                  cellButtonAxisParams.trigger(prms.data?.key);
+                },
+              },
+            };
+          }
+        }
+      : undefined,
+    headerComponentParams: {
+      type: ((): PlAgHeaderComponentType => {
+        switch (valueType) {
+          case 'Int':
+          case 'Long':
+          case 'Float':
+          case 'Double':
+            return 'Number';
+          case 'String':
+          case 'Bytes':
+            return 'Text';
+          default:
+            throw Error(`unsupported data type: ${valueType}`);
+        }
+      })(),
+    } satisfies PlAgHeaderComponentParams,
+    cellDataType: (() => {
+      switch (valueType) {
+        case 'Int':
+        case 'Long':
+        case 'Float':
+        case 'Double':
+          return 'number';
+        case 'String':
+        case 'Bytes':
+          return 'text';
+        default:
+          throw Error(`unsupported data type: ${valueType}`);
+      }
+    })(),
+  };
+}
+
+export function makeRowId(rowKey: PTableRowKey): PTableRowKeyJson {
+  return canonicalizeJson(rowKey);
+}

package/src/components/PlAgDataTable/types.ts

@@ -7,9 +7,12 @@ import type {
   PlTableFilterType,
   PTableColumnId,
   PTableHandle,
+  PTableKey,
+  PTableRowKey,
   PTableValue,
   RemoteBlobHandleAndSize,
 } from '@platforma-sdk/model';
+import type { PTableHidden } from './sources/common';
 
 export type PlDataTableSettingsPTable = {
   /** The type of the source to feed the data into the table */
@@ -62,9 +65,6 @@ export type PlTableFiltersDefault = {
   default: PlTableFilter;
 };
 
-/** Key is a set of all axes values, which means it is unique across rows */
-export type PTableRowKey = PTableValue[];
-
 /** PlAgDataTable controller contains all exported methods */
 export type PlAgDataTableController = {
   /**
@@ -74,8 +74,20 @@ export type PlAgDataTableController = {
   focusRow: (rowKey: PTableRowKey) => Promise<void>;
 };
 
-/** Canonicalized PTableValue array JSON string */
-export type PTableRowKeyJson = CanonicalizedJson<PTableValue[]>;
+/** PlAgDataTable controller contains all exported methods */
+export type PlAgDataTableV2Controller = {
+  /**
+   * Scroll table to make row with provided key visible
+   * Warning: works reliably only in client side mode.
+   */
+  focusRow: (rowKey: PTableKey) => Promise<void>;
+};
+
+/**
+ * Canonicalized PTableValue array JSON string
+ * @deprecated Migrate to PlAgDataTableV2
+ */
+export type PTableRowKeyJson = CanonicalizedJson<PTableRowKey>;
 
 /** PlAgDataTable row */
 export type PlAgDataTableRow = {
@@ -87,6 +99,18 @@ export type PlAgDataTableRow = {
   [field: `${number}` | `hC${number}`]: PTableValue;
 };
 
+export type PTableKeyJson = CanonicalizedJson<PTableKey>;
+
+/** PlAgDataTableV2 row */
+export type PlAgDataTableV2Row = {
+  /** Axis key is not present for heterogeneous axes */
+  key?: PTableKey;
+  /** Unique row identifier, created as canonicalize(key)! when key is present */
+  id: PTableKeyJson;
+  /** Row values by column; sheet axes and labeled axes are excluded */
+  [field: `${number}`]: PTableValue | PTableHidden;
+};
+
 export type PlAgOverlayLoadingParams = {
   /**
    * Required flag, that shows catInBag icon with message if `true`, shows PlSplash component if `false`.

package/src/components/PlMultiSequenceAlignment/MultiSequenceAlignmentView.vue

@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { computed, reactive } from 'vue';
+import { getCssBackgroundImage } from './highlight';
+import {
+  chemicalPropertiesColors,
+  useChemicalPropertiesHighlight,
+} from './highlight/chemical-properties';
+import { useAlignedRows } from './multi-sequence-alignment';
+import type { SequenceRow } from './types';
+
+const { sequenceRows, highlight } = defineProps<{
+  sequenceRows: SequenceRow[];
+  highlight?: 'chemical-properties' | undefined;
+}>();
+
+const alignedRows = useAlignedRows(() => sequenceRows);
+
+const chemicalPropertiesHighlight = reactive(
+  useChemicalPropertiesHighlight(() => {
+    if (highlight !== 'chemical-properties' || alignedRows.loading) {
+      return;
+    }
+    return sequenceRows.map(({ header }) => {
+      const row = alignedRows.value.get(header);
+      if (!row) {
+        console.error(`Missing aligned row for header ${header}`);
+      }
+      return alignedRows.value.get(header) ?? '';
+    });
+  }),
+);
+
+const columnCount = computed(
+  () => (sequenceRows.at(0)?.labels.length ?? 0) + 1,
+);
+const rowCount = computed(() => sequenceRows.length);
+
+const selectedHighlight = computed(() => {
+  if (!highlight) {
+    return;
+  }
+  switch (highlight) {
+    case 'chemical-properties':
+      return chemicalPropertiesHighlight;
+    default:
+      throw new Error(`Unknown highlight ${highlight}`);
+  }
+});
+
+const sequenceLetterSpacing = '12px';
+</script>
+
+<template>
+  <div v-if="!alignedRows.loading" :class="['pl-scrollable', $style.container]">
+    <div
+      v-if="selectedHighlight && !selectedHighlight.loading"
+      :class="$style.highlight"
+      :style="
+        {
+          backgroundImage: getCssBackgroundImage({
+            columns: selectedHighlight.data,
+            rowCount: sequenceRows.length,
+            colors: chemicalPropertiesColors,
+          }),
+        }
+      "
+    />
+    <template
+      v-for="row of sequenceRows"
+      :key="row.header"
+    >
+      <div
+        v-for="(label, labelIndex) of row.labels"
+        :key="labelIndex"
+        :class="
+          [
+            $style.label,
+            labelIndex === row.labels.length - 1 && $style.last,
+          ]
+        "
+      >
+        {{ label }}
+      </div>
+      <div :class="$style.sequence">
+        {{ alignedRows.value.get(row.header) }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<style module>
+.container {
+  flex: 1;
+  position: relative;
+  font-family: Spline Sans Mono;
+  text-wrap: nowrap;
+  display: grid;
+  grid-template-columns: repeat(v-bind(columnCount), min-content);
+  grid-template-rows: repeat(v-bind(rowCount), min-content);
+  justify-content: start;
+  column-gap: 16px;
+  line-height: calc(24 / 14);
+
+  * {
+    content-visibility: auto;
+  }
+}
+
+.highlight {
+  position: absolute;
+  grid-area: 1 / -2 / -1 / -1; /* all rows and last column */
+  inset: 0 calc(v-bind(sequenceLetterSpacing) / -2);
+  background-size: calc(100% - v-bind(sequenceLetterSpacing));
+  background-repeat: no-repeat;
+  z-index: -1;
+}
+
+.label {
+  background-color: white;
+  position: sticky;
+  inset-inline-start: 0;
+  text-align: end;
+  z-index: 1;
+
+  &.last {
+    padding-inline-end: 16px;
+    border-inline-end: 1px solid black;
+  }
+}
+
+.sequence {
+  font-weight: 600;
+  letter-spacing: v-bind(sequenceLetterSpacing);
+}
+</style>

package/src/components/PlMultiSequenceAlignment/PlMultiSequenceAlignment.vue

@@ -0,0 +1,173 @@
+<script lang="ts" setup>
+import {
+  PlAlert,
+  PlBtnGhost,
+  PlDropdownMulti,
+  PlIcon24,
+  PlSlideModal,
+  PlTooltip,
+} from '@milaboratories/uikit';
+import type {
+  PColumnPredicate,
+  PFrameHandle,
+  PlMultiSequenceAlignmentModel,
+  PlSelectionModel,
+} from '@platforma-sdk/model';
+import { computed, onMounted, reactive, ref } from 'vue';
+import { useDataTableToolsPanelTarget } from '../PlAgDataTableToolsPanel';
+import { useLabelColumns, useSequenceColumns, useSequenceRows } from './data';
+import {
+  chemicalCategories,
+  chemicalPropertiesColors,
+  chemicalPropertiesLabels,
+} from './highlight/chemical-properties';
+import MultiSequenceAlignmentView from './MultiSequenceAlignmentView.vue';
+
+const model = defineModel<PlMultiSequenceAlignmentModel>({ default: {} });
+
+const props = defineProps<{
+  /**
+   * Handle to PFrame created using `createPFrameForGraphs`.
+   * Should contain all desired sequence and label columns.
+   */
+  readonly pFrame: PFrameHandle | undefined;
+  /**
+   * Return true if column should be shown in sequence columns dropdown.
+   * By default, all sequence columns are selected.
+   */
+  readonly sequenceColumnPredicate: PColumnPredicate;
+  /**
+   * Return true if column should be shown in label columns dropdown.
+   * By default, common axes of selected sequence columns are selected.
+   */
+  readonly labelColumnOptionPredicate?: PColumnPredicate;
+  /**
+   * Sometimes sequence column and label column have disjoint axes.
+   * In this case you have to define `linkerColumnPredicate` to select columns
+   * connecting axes of sequence and label columns.
+   */
+  readonly linkerColumnPredicate?: PColumnPredicate;
+  /**
+   * Row selection model (from `PlAgDataTableV2` or `GraphMaker`).
+   * If not provided or empty, all rows will be considered selected.
+   * Warning: should be forwarded as a field of `reactive` object
+   */
+  readonly selection?: PlSelectionModel | undefined;
+}>();
+
+// SlidePanel visibility flag
+const show = ref(false);
+
+// Teleport open button to DataTableToolsPanel after mount
+const mounted = ref(false);
+onMounted(() => {
+  mounted.value = true;
+});
+const teleportTarget = useDataTableToolsPanelTarget();
+
+const sequenceColumns = reactive(useSequenceColumns(() => ({
+  pframe: props.pFrame,
+  sequenceColumnPredicate: props.sequenceColumnPredicate,
+})));
+
+const labelColumns = reactive(useLabelColumns(() => ({
+  pframe: props.pFrame,
+  sequenceColumnIds: sequenceColumns.defaults,
+  labelColumnOptionPredicate: props.labelColumnOptionPredicate,
+})));
+
+const selectedSequenceColumnIds = computed({
+  get: () => model.value.sequenceColumnIds ?? sequenceColumns.defaults,
+  set: (value) => {
+    model.value.sequenceColumnIds = value;
+  },
+});
+const selectedLabelColumnIds = computed({
+  get: () => model.value.labelColumnIds ?? labelColumns.defaults,
+  set: (value) => {
+    model.value.labelColumnIds = value;
+  },
+});
+
+const sequenceRows = reactive(useSequenceRows(() => ({
+  pframe: props.pFrame,
+  sequenceColumnIds: selectedSequenceColumnIds.value,
+  labelColumnIds: selectedLabelColumnIds.value,
+  linkerColumnPredicate: props.linkerColumnPredicate,
+  selection: props.selection,
+})));
+</script>
+
+<template>
+  <Teleport v-if="mounted && teleportTarget" :to="teleportTarget">
+    <PlBtnGhost icon="dna" @click.stop="show = true">
+      Multi Alignment
+    </PlBtnGhost>
+  </Teleport>
+
+  <PlSlideModal v-model="show" width="100%" :close-on-outside-click="false">
+    <template #title>
+      Multi Alignment
+      <PlTooltip :class="$style.tooltip" position="southwest">
+        <PlIcon24 name="info" />
+        <template #tooltip>
+          <div
+            v-for="category in chemicalCategories"
+            :key="category"
+          >
+            <span
+              :class="$style['color-sample']"
+              :style="
+                {
+                  backgroundColor:
+                    chemicalPropertiesColors[category],
+                }
+              "
+            />
+            {{ chemicalPropertiesLabels[category] }}
+          </div>
+        </template>
+      </PlTooltip>
+    </template>
+
+    <PlDropdownMulti
+      v-model="selectedSequenceColumnIds"
+      label="Sequence Columns"
+      :options="sequenceColumns.options"
+      :disabled="sequenceColumns.loading"
+      clearable
+    />
+    <PlDropdownMulti
+      v-model="selectedLabelColumnIds"
+      label="Label Columns"
+      :options="labelColumns.options"
+      :disabled="labelColumns.loading"
+      clearable
+    />
+
+    <PlAlert v-if="sequenceRows.data.length < 2" type="warn">
+      Please select at least one sequence column and two or more rows to run
+      alignment
+    </PlAlert>
+
+    <MultiSequenceAlignmentView
+      v-else
+      :sequenceRows="sequenceRows.data"
+      highlight="chemical-properties"
+    />
+  </PlSlideModal>
+</template>
+
+<style module>
+.tooltip {
+  display: inline-flex;
+}
+.color-sample {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 1px solid #ccc;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+</style>