@platforma-sdk/ui-vue 1.44.15 → 1.45.5

package/src/components/PlAnnotations/components/DynamicForm.vue

@@ -1,11 +1,12 @@
-<script setup lang="ts" generic="T extends FilterUi = FilterUi">
+<script setup lang="ts" generic="T extends FilterSpec = FilterSpec">
 import { computed, watch } from 'vue';
-import type { FilterUi, SUniversalPColumnId, TypeFieldRecord } from '@platforma-sdk/model';
-import type { FilterUiType } from '@platforma-sdk/model';
+
 import { isNil } from '@milaboratories/helpers';
-import { PlTextField, PlDropdown, PlNumberField, PlCheckbox } from '@milaboratories/uikit';
-import { getFilterUiTypeOptions, getFilterUiMetadata } from '@platforma-sdk/model';
-import type { SimplifiedUniversalPColumnEntry } from '../types';
+import type { FilterSpecTypeFieldRecord } from '@milaboratories/uikit';
+import { getFilterUiMetadata, getFilterUiTypeOptions, PlCheckbox, PlDropdown, PlNumberField, PlTextField } from '@milaboratories/uikit';
+import type { SimplifiedUniversalPColumnEntry, SUniversalPColumnId } from '@platforma-sdk/model';
+
+import type { FilterSpec, FilterSpecType } from '../types';
 
 type ObjectEntries<T, K extends keyof T = keyof T> = [K, T[K]][];
 
@@ -13,7 +14,7 @@ const formData = defineModel<T>({ default: () => ({}) });
 
 const props = defineProps<{
   columns: SimplifiedUniversalPColumnEntry[];
-  formMetadata: TypeFieldRecord<T>;
+  formMetadata: FilterSpecTypeFieldRecord<T>;
 }>();
 
 const columnSpecRef = computed(() => {
@@ -66,6 +67,12 @@ watch(() => props.formMetadata, (newForm) => {
 { immediate: true, deep: true },
 );
 
+function isFilterType(type: string | undefined): boolean {
+  return type === 'FilterType'
+    // @deprecated version
+    || type === 'FilterUiType';
+}
+
 </script>
 
 <template>
@@ -81,9 +88,9 @@ watch(() => props.formMetadata, (newForm) => {
           @update:model-value="setFieldValue(fieldName, $event as T[keyof T])"
         />
       </template>
-      <template v-else-if="field.fieldType === 'FilterUiType'">
+      <template v-else-if="isFilterType(field.fieldType)">
         <PlDropdown
-          :model-value="formData[fieldName] as FilterUiType"
+          :model-value="formData[fieldName] as FilterSpecType"
           :label="field.label ?? fieldName"
           :options="filterUiTypeOptions"
           @update:model-value="setFieldValue(fieldName, $event as T[keyof T])"

package/src/components/PlAnnotations/components/FilterSidebar.vue

@@ -1,25 +1,33 @@
+<script lang="ts">
+export type Props = {
+  columns: SimplifiedUniversalPColumnEntry[];
+  hasSelectedColumns?: boolean;
+  getValuesForSelectedColumns?: () => Promise<undefined | { columnId: PObjectId; values: string[] }>;
+};
+</script>
 <script setup lang="ts">
 import { isNil, randomInt } from '@milaboratories/helpers';
 import {
+  getFilterUiMetadata,
   PlBtnSecondary,
   PlEditableTitle,
   PlElementList,
   PlSidebarItem,
 } from '@milaboratories/uikit';
-import type { AnnotationStepUi, FilterUi, PObjectId, SUniversalPColumnId } from '@platforma-sdk/model';
-import { getFilterUiMetadata } from '@platforma-sdk/model';
-import type { SimplifiedUniversalPColumnEntry } from '../types';
+import type { PObjectId, SimplifiedUniversalPColumnEntry, SUniversalPColumnId } from '@platforma-sdk/model';
+import { computed } from 'vue';
+import type { Filter, FilterSpec } from '../types';
 import { createDefaultFilterMetadata } from '../utils';
 import DynamicForm from './DynamicForm.vue';
 
 // Models
-const step = defineModel<AnnotationStepUi>('step', { required: true });
+const step = defineModel<Filter>('step', { required: true });
 // Props
-const props = defineProps<{
-  columns: SimplifiedUniversalPColumnEntry[];
-  hasSelectedColumns: boolean;
-  getValuesForSelectedColumns: () => Promise<undefined | { columnId: PObjectId; values: string[] }>;
-}>();
+const props = defineProps<Props>();
+// State
+const withSelection = computed(() => {
+  return props.hasSelectedColumns !== undefined && props.getValuesForSelectedColumns !== undefined;
+});
 // Actions
 const addFilterPlaceholder = () => {
   step.value.filter.filters.push({
@@ -30,6 +38,8 @@ const addFilterPlaceholder = () => {
 };
 
 async function addFilterFromSelected() {
+  if (props.hasSelectedColumns === undefined || props.getValuesForSelectedColumns === undefined) return;
+
   const data = await props.getValuesForSelectedColumns();
   if (!data || data.values.length === 0) return;
 
@@ -50,18 +60,18 @@ async function addFilterFromSelected() {
 }
 
 // Getters
-const getColumnLabel = (filter: FilterUi) => {
+const getColumnLabel = (filter: FilterSpec) => {
   if (!isNil(filter.name)) return filter.name;
   return props.columns
     .find((c) => 'column' in filter ? c.id === filter.column : false)?.label
     ?? filter.type;
 };
 
-const getFormMetadata = (filter: FilterUi) => {
+const getFormMetadata = (filter: FilterSpec) => {
   return !isNil(filter.type) ? getFilterUiMetadata(filter.type).form : createDefaultFilterMetadata();
 };
 
-const getFilterValues = (filter: FilterUi) => {
+const getFilterValues = (filter: FilterSpec) => {
   if (filter.type === 'or' || filter.type === 'and') {
     return filter.filters.map((f) => 'value' in f && !isNil(f.value) ? f.value : null).filter((v) => !isNil(v)).join (', ');
   }
@@ -87,7 +97,7 @@ const getFilterValues = (filter: FilterUi) => {
           <PlBtnSecondary style="width: 100%;" icon="add" @click="addFilterPlaceholder">
             Filter
           </PlBtnSecondary>
-          <PlBtnSecondary style="width: 100%;" icon="add" :disabled="!props.hasSelectedColumns" @click="addFilterFromSelected">
+          <PlBtnSecondary v-if="withSelection" style="width: 100%;" icon="add" :disabled="!props.hasSelectedColumns" @click="addFilterFromSelected">
             From selection
           </PlBtnSecondary>
         </div>

package/src/components/PlAnnotations/components/PlAnnotations.vue

@@ -0,0 +1,92 @@
+<script lang="ts">
+import type { Props as BaseProps } from './FilterSidebar.vue';
+export type Props = BaseProps & {
+  onDeleteSchema?: () => void;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, effect, shallowRef } from 'vue';
+
+import { isNil } from '@milaboratories/helpers';
+import { PlSidebarGroup, useConfirm } from '@milaboratories/uikit';
+
+import type { Annotation } from '../types';
+import AnnotationsSidebar from './AnnotationsSidebar.vue';
+import FilterSidebar from './FilterSidebar.vue';
+
+// Models
+const annotation = defineModel<Annotation>('annotation', { required: true });
+// Props
+const props = defineProps<Props>();
+// State
+const selectedStepId = shallowRef<number | undefined>(undefined);
+const selectedStep = computed(() => {
+  return isNil(selectedStepId.value) || isNil(annotation.value)
+    ? undefined
+    : annotation.value.steps.find((step) => step.id === selectedStepId.value);
+});
+
+// Watchers
+effect(function setDefaultStepId() {
+  if (selectedStepId.value === undefined && annotation.value.steps.length > 0) {
+    selectedStepId.value = annotation.value.steps[0].id;
+  }
+});
+// Hooks
+const confirmResetSchema = useConfirm({
+  title: 'Reset Schema',
+  message: 'Are you sure you want to reset the schema? This action cannot be undone.',
+  confirmLabel: 'Yes, reset',
+  cancelLabel: 'No, cancel',
+});
+// Actions
+async function handleDeleteSchema() {
+  if (await confirmResetSchema()) {
+    selectedStepId.value = undefined;
+    props.onDeleteSchema?.();
+  }
+}
+
+</script>
+
+<template>
+  <PlSidebarGroup :class="$style.sidebarGroup">
+    <template #item-0>
+      <AnnotationsSidebar
+        v-model:annotation="annotation"
+        v-model:selectedStepId="selectedStepId"
+        :class="$style.sidebarItem"
+        :columns="props.columns"
+        @delete-schema="handleDeleteSchema"
+      />
+    </template>
+    <template #item-1>
+      <FilterSidebar
+        v-if="selectedStep"
+        v-model:step="selectedStep"
+        :class="$style.sidebarItem"
+        :columns="props.columns"
+        :selectedStepId="selectedStepId"
+        :hasSelectedColumns="props.hasSelectedColumns"
+        :getValuesForSelectedColumns="props.getValuesForSelectedColumns"
+      />
+    </template>
+  </PlSidebarGroup>
+</template>
+
+<style lang="scss" module>
+.modal {
+  display: flex;
+}
+
+.sidebarGroup {
+  width: 100%;
+  height: 100%;
+}
+
+.sidebarItem {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/PlAnnotations/components/PlAnnotationsModal.vue

@@ -1,99 +1,41 @@
 <script setup lang="ts">
-import { isNil } from '@milaboratories/helpers';
-import { PlPureSlideModal, PlSidebarGroup, useConfirm } from '@milaboratories/uikit';
-import type { AnnotationScriptUi, PObjectId } from '@platforma-sdk/model';
-import { computed, effect, shallowRef } from 'vue';
-import type { SimplifiedUniversalPColumnEntry } from '../types';
-import { getDefaultAnnotationScript } from '../utils';
-import AnnotationsSidebar from './AnnotationsSidebar.vue';
-import FilterSidebar from './FilterSidebar.vue';
-import PlAnnotationCreateDialog from './PlAnnotationCreateDialog.vue';
+import { PlPureSlideModal } from '@milaboratories/uikit';
+import { effect, shallowRef } from 'vue';
+
+import type { Annotation } from '../types';
+import type { Props } from './PlAnnotations.vue';
+import PlAnnotations from './PlAnnotations.vue';
 
 // Models
-const annotation = defineModel<AnnotationScriptUi>('annotation', { required: true, default: getDefaultAnnotationScript });
+const annotation = defineModel<Annotation>('annotation', { required: true });
 const opened = defineModel<boolean>('opened', { required: true });
 // Props
-const props = defineProps<{
-  columns: SimplifiedUniversalPColumnEntry[];
-  hasSelectedColumns: boolean;
-  getValuesForSelectedColumns: () => Promise<undefined | { columnId: PObjectId; values: string[] }>;
-}>();
+const props = defineProps<Props>();
 // State
 const selectedStepId = shallowRef<number | undefined>(undefined);
-const selectedStep = computed(() => {
-  return isNil(selectedStepId.value) || isNil(annotation.value)
-    ? undefined
-    : annotation.value.steps.find((step) => step.id === selectedStepId.value);
-});
-const hasAnnotation = computed(() => annotation.value.isCreated === true);
-
-const openedDialog = computed({
-  get: () => !hasAnnotation.value && opened.value,
-  set: (value: boolean) => (opened.value = value),
-});
-const openedModal = computed({
-  get: () => hasAnnotation.value && opened.value,
-  set: (value: boolean) => (opened.value = value),
-});
 // Watchers
 effect(function setDefaultStepId() {
   if (selectedStepId.value === undefined && annotation.value.steps.length > 0) {
     selectedStepId.value = annotation.value.steps[0].id;
   }
 });
-// Hooks
-const confirmResetSchema = useConfirm({
-  title: 'Reset Schema',
-  message: 'Are you sure you want to reset the schema? This action cannot be undone.',
-  confirmLabel: 'Yes, reset',
-  cancelLabel: 'No, cancel',
-});
 // Actions
-function handleCreateAnnotation(props: { type: 'byClonotype' | 'bySampleAndClonotype'; name: string }) {
-  annotation.value.isCreated = true;
-  annotation.value.mode = props.type;
-  annotation.value.title = props.name;
-  annotation.value.steps = [];
-}
-
 async function handleDeleteSchema() {
-  if (await confirmResetSchema()) {
-    annotation.value.isCreated = false;
-    annotation.value.title = '';
-    annotation.value.mode = 'byClonotype';
-    annotation.value.steps = [];
-    opened.value = false;
-    selectedStepId.value = undefined;
-  }
+  opened.value = false;
+  props.onDeleteSchema?.();
 }
-
 </script>
 
 <template>
-  <PlAnnotationCreateDialog v-model="openedDialog" @submit="handleCreateAnnotation"/>
-  <PlPureSlideModal v-model="openedModal" :class="$style.modal" width="768px">
-    <PlSidebarGroup :class="$style.sidebarGroup">
-      <template #item-0>
-        <AnnotationsSidebar
-          v-model:annotation="annotation"
-          v-model:selectedStepId="selectedStepId"
-          :class="$style.sidebarItem"
-          :columns="props.columns"
-          @delete-schema="handleDeleteSchema"
-        />
-      </template>
-      <template #item-1>
-        <FilterSidebar
-          v-if="selectedStep"
-          v-model:step="selectedStep"
-          :class="$style.sidebarItem"
-          :columns="props.columns"
-          :selectedStepId="selectedStepId"
-          :hasSelectedColumns="props.hasSelectedColumns"
-          :getValuesForSelectedColumns="props.getValuesForSelectedColumns"
-        />
-      </template>
-    </PlSidebarGroup>
+  <PlPureSlideModal v-model="opened" :class="$style.modal" width="768px">
+    <PlAnnotations
+      v-model:annotation="annotation"
+      :class="$style.sidebarItem"
+      :columns="props.columns"
+      :has-selected-columns="props.hasSelectedColumns"
+      :getValuesForSelectedColumns="props.getValuesForSelectedColumns"
+      @delete-schema="handleDeleteSchema"
+    />
   </PlPureSlideModal>
 </template>
 

package/src/components/PlAnnotations/index.ts

@@ -1 +1,2 @@
+export { default as PlAnnotations } from './components/PlAnnotations.vue';
 export { default as PlAnnotationsModal } from './components/PlAnnotationsModal.vue';

package/src/components/PlAnnotations/types.ts

@@ -1,9 +1,10 @@
-import type { PColumnSpec, SUniversalPColumnId } from '@platforma-sdk/model';
+import type { FilterSpec as _FilterSpec, AnnotationSpecUi, FilterSpecLeaf, FilterSpecUi } from '@platforma-sdk/model';
+export type { FilterSpecType } from '@platforma-sdk/model';
 
-export type SimplifiedPColumnSpec = Pick<PColumnSpec, 'valueType' | 'annotations'>;
+export type FilterSpec = _FilterSpec<FilterSpecLeaf, { id?: number; name?: string; isExpanded?: boolean }>;
 
-export type SimplifiedUniversalPColumnEntry = {
-  id: SUniversalPColumnId;
-  label: string;
-  obj: SimplifiedPColumnSpec;
+export type Filter = FilterSpecUi<Extract<FilterSpec, { type: 'and' | 'or' }>> & {
+  id: number;
 };
+
+export type Annotation = AnnotationSpecUi<Filter>;

package/src/components/PlAnnotations/utils.ts

@@ -1,15 +1,7 @@
-import type { AnnotationScriptUi, FilterUi, TypeFieldRecord } from '@platforma-sdk/model';
+import type { FilterSpecTypeFieldRecord } from '@milaboratories/uikit';
+import type { FilterSpec } from './types';
 
-export function getDefaultAnnotationScript(): AnnotationScriptUi {
-  return {
-    isCreated: false,
-    title: 'My Annotation',
-    mode: 'byClonotype',
-    steps: [],
-  };
-}
-
-export function createDefaultFilterMetadata<T extends Extract<FilterUi, { column: unknown }>>(): TypeFieldRecord<T> {
+export function createDefaultFilterMetadata<T extends Extract<FilterSpec, { column: unknown }>>(): FilterSpecTypeFieldRecord<T> {
   return {
     column: {
       label: 'Column',
@@ -18,8 +10,8 @@ export function createDefaultFilterMetadata<T extends Extract<FilterUi, { column
     },
     type: {
       label: 'Predicate',
-      fieldType: 'FilterUiType',
+      fieldType: 'FilterType',
       defaultValue: () => undefined,
     },
-  } as TypeFieldRecord<T>;
+  } as FilterSpecTypeFieldRecord<T>;
 };

package/src/components/PlBtnExportArchive/Item.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { ExportItem } from './types';
+import { prettyBytes } from '@milaboratories/helpers';
+
+defineProps<{
+  item: ExportItem;
+}>();
+</script>
+
+<template>
+  <div
+    :class="$style.item"
+  >
+    <div :class="$style.name">{{ item.fileName }}</div>
+    <div v-if="item.status === 'in-progress'" :class="$style.details">
+      <span>{{ prettyBytes(item.current, {}) }}</span>
+      <span>/</span>
+      <span>{{ prettyBytes(item.size, {}) }}</span>
+    </div>
+    <div v-else-if="item.status === 'completed'" :class="$style.details">
+      Done <span>{{ prettyBytes(item.size, {}) }}</span>
+    </div>
+    <div v-else-if="item.status === 'error'" :class="$style.error">
+      <span>{{ item.error }}</span>
+    </div>
+    <div v-else :class="$style.details">
+      Pending
+    </div>
+  </div>
+</template>
+
+<style module>
+.item {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 8px;
+  overflow: hidden;
+  --name-font-size: 12px;
+  --details-font-size: 10px;
+}
+.name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--name-font-size);
+  font-weight: 600;
+}
+
+.details {
+  font-size: var(--details-font-size);
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.error {
+  font-size: var(--details-font-size);
+  font-weight: 400;
+  color: var(--txt-error);
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+}
+</style>