@platforma-sdk/ui-vue 1.40.4 → 1.40.6

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

@@ -0,0 +1,144 @@
+<script setup lang="ts" generic="T extends FilterUi = FilterUi">
+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';
+
+type ObjectEntries<T, K extends keyof T = keyof T> = [K, T[K]][];
+
+const formData = defineModel<T>({ default: () => ({}) });
+
+const props = defineProps<{
+  columns: SimplifiedUniversalPColumnEntry[];
+  formMetadata: TypeFieldRecord<T>;
+}>();
+
+const columnSpecRef = computed(() => {
+  const value = formData.value;
+  if ('column' in value) {
+    return props.columns.find((c) => c.id === value.column)?.obj;
+  }
+  return undefined;
+});
+
+const typeMetadataRef = computed(() => {
+  const value = formData.value;
+  if (value.type && typeof value.type === 'string') {
+    return getFilterUiMetadata(value.type);
+  }
+  return undefined;
+});
+
+const filterUiTypeOptions = computed(() => {
+  return getFilterUiTypeOptions(columnSpecRef.value);
+});
+
+const firstColumnsOptions = computed(() => props.columns.map((c) => ({ label: c.label, value: c.id })));
+const secondColumnOptions = computed(() => {
+  const typeMetadata = typeMetadataRef.value;
+  const columnSpec = columnSpecRef.value;
+  if (typeMetadata && columnSpec) {
+    return props.columns.filter((c) => typeMetadata.supportedFor(columnSpec, c.obj)).map((c) => ({
+      label: c.label,
+      value: c.id,
+    }));
+  }
+  return [];
+});
+
+const setFieldValue = <K extends keyof T>(fieldName: K, value: T[K]) => {
+  formData.value[fieldName] = value;
+};
+
+watch(() => props.formMetadata, (newForm) => {
+  for (const [fieldName, field] of Object.entries(newForm) as ObjectEntries<typeof newForm>) {
+    if (formData.value[fieldName] === undefined) {
+      const value = field.defaultValue();
+      if (!isNil(value)) {
+        formData.value[fieldName] = value;
+      }
+    }
+  }
+},
+{ immediate: true, deep: true },
+);
+
+</script>
+
+<template>
+  <div v-if="formMetadata" :class="$style.form">
+    <template v-for="(field, fieldName) in formMetadata" :key="fieldName">
+      <template v-if="field.fieldType === 'form'">
+        <!-- TODO: Nested Form not described in FilterUi, we need to define it later. Even more in type it don't possible situations -->
+        <DynamicForm
+          v-if="'form' in field"
+          :model-value="formData[fieldName] as any"
+          :form-metadata="field.form as any"
+          :columns="props.columns"
+          @update:model-value="setFieldValue(fieldName, $event as T[keyof T])"
+        />
+      </template>
+      <template v-else-if="field.fieldType === 'FilterUiType'">
+        <PlDropdown
+          :model-value="formData[fieldName] as FilterUiType"
+          :label="field.label ?? fieldName"
+          :options="filterUiTypeOptions"
+          @update:model-value="setFieldValue(fieldName, $event as T[keyof T])"
+        />
+      </template>
+      <template v-else-if="field.fieldType === 'string'">
+        <PlTextField
+          :model-value="formData[fieldName] as string"
+          :label="field.label ?? fieldName"
+          @update:model-value="setFieldValue(fieldName, $event as T[keyof T])"
+        />
+      </template>
+      <template v-else-if="field.fieldType === 'SUniversalPColumnId'">
+        <PlDropdown
+          :model-value="formData[fieldName] as SUniversalPColumnId"
+          :label="field.label ?? fieldName"
+          :options="fieldName === 'column' ? firstColumnsOptions : secondColumnOptions"
+          @update:model-value="setFieldValue(fieldName, $event as T[keyof T])"
+        />
+      </template>
+      <template v-else-if="field.fieldType === 'number'">
+        <PlNumberField
+          :model-value="formData[fieldName] as number"
+          :label="field.label ?? fieldName"
+          @update:model-value="setFieldValue(fieldName, $event as T[keyof T])"
+        />
+      </template>
+      <template v-else-if="field.fieldType === 'number?'">
+        <PlNumberField
+          :model-value="formData[fieldName] as (undefined | number)"
+          :label="field.label ?? fieldName"
+          :clearable="true"
+          @update:model-value="setFieldValue(fieldName, $event as T[keyof T])"
+        />
+      </template>
+      <template v-else-if="field.fieldType === 'boolean' || field.fieldType === 'boolean?'">
+        <PlCheckbox
+          :model-value="Boolean(formData[fieldName])"
+          :label="field.label ?? fieldName"
+          @update:model-value="setFieldValue(fieldName, $event as T[keyof T])"
+        >
+          {{ field.label ?? fieldName }}
+        </PlCheckbox>
+      </template>
+      <template v-else>
+        <pre>TODO:{{ field.fieldType }}</pre>
+      </template>
+    </template>
+  </div>
+</template>
+
+<style module>
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+</style>

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

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { isNil, randomInt } from '@milaboratories/helpers';
+import {
+  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 { createDefaultFilterMetadata } from '../utils';
+import DynamicForm from './DynamicForm.vue';
+
+// Models
+const step = defineModel<AnnotationStepUi>('step', { required: true });
+// Props
+const props = defineProps<{
+  columns: SimplifiedUniversalPColumnEntry[];
+  hasSelectedColumns: boolean;
+  getValuesForSelectedColumns: () => Promise<undefined | { columnId: PObjectId; values: string[] }>;
+}>();
+// Actions
+const addFilterPlaceholder = () => {
+  step.value.filter.filters.push({
+    id: randomInt(),
+    isExpanded: true,
+    type: undefined,
+  });
+};
+
+async function addFilterFromSelected() {
+  const data = await props.getValuesForSelectedColumns();
+  if (!data || data.values.length === 0) return;
+
+  const { columnId, values } = data;
+  const shortReminder = values.slice(0, 3).join(', ') + (values.length > 3 ? ` and ${values.length - 3} more` : '');
+
+  step.value.filter.filters.push({
+    id: randomInt(),
+    name: `Selected list (${shortReminder})`,
+    isExpanded: false,
+    type: 'or',
+    filters: values.map((value) => ({
+      type: 'patternEquals',
+      column: columnId as SUniversalPColumnId,
+      value,
+    })),
+  });
+}
+
+// Getters
+const getColumnLabel = (filter: FilterUi) => {
+  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) => {
+  return !isNil(filter.type) ? getFilterUiMetadata(filter.type).form : createDefaultFilterMetadata();
+};
+
+const getFilterValues = (filter: FilterUi) => {
+  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 (', ');
+  }
+  return null;
+};
+</script>
+
+<template>
+  <PlSidebarItem v-if="step">
+    <template #header-content>
+      <PlEditableTitle
+        :key="step.id"
+        v-model="step.label"
+        :max-length="40"
+        max-width="600px"
+        placeholder="Annotation Name"
+        :autofocus="step.label.length === 0"
+      />
+    </template>
+    <template #body-content>
+      <div :class="$style.root">
+        <div :class="$style.actions">
+          <PlBtnSecondary style="width: 100%;" icon="add" @click="addFilterPlaceholder">
+            Filter
+          </PlBtnSecondary>
+          <PlBtnSecondary style="width: 100%;" icon="add" :disabled="!props.hasSelectedColumns" @click="addFilterFromSelected">
+            From selection
+          </PlBtnSecondary>
+        </div>
+
+        <span :class="$style.tip">Lower annotations override the ones above. Rearrange them by dragging.</span>
+
+        <PlElementList
+          v-model:items="step.filter.filters"
+          :get-item-key="(item) => item.id!"
+          :is-expanded="(item) => Boolean(item.isExpanded)"
+          :on-expand="(item) => item.isExpanded = !Boolean(item.isExpanded)"
+        >
+          <template #item-title="{ item }">
+            {{ getColumnLabel(item) }}
+          </template>
+          <template #item-content="{ item, index }">
+            <template v-if="item.type !== 'or' && item.type !== 'and'">
+              <DynamicForm
+                v-model="step.filter.filters[index]"
+                :form-metadata="getFormMetadata(item)"
+                :columns="props.columns"
+              />
+            </template>
+            <template v-else>
+              <div>{{ getFilterValues(item) }}</div>
+            </template>
+          </template>
+        </PlElementList>
+      </div>
+    </template>
+  </PlSidebarItem>
+</template>
+
+<style lang="scss" module>
+@use '@milaboratories/uikit/styles/variables' as *;
+
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.actions {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+}
+
+.tip {
+  margin-top: 12px;
+  color: var(--txt-03);
+}
+</style>

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { SimpleOption } from '@milaboratories/uikit';
+import { PlBtnGhost, PlBtnPrimary, PlDialogModal, PlRadioGroup, PlTextField } from '@milaboratories/uikit';
+import type { AnnotationMode } from '@platforma-sdk/model';
+import { computed, ref } from 'vue';
+
+// Models
+const opened = defineModel<boolean>({ required: true });
+// Emits
+const emits = defineEmits<{
+  (e: 'submit', props: { type: 'byClonotype' | 'bySampleAndClonotype'; name: string }): void;
+}>();
+
+const annotationSchemaTypes = [
+  { label: 'Global', value: 'byClonotype' },
+  { label: 'Per sample', value: 'bySampleAndClonotype' },
+] satisfies SimpleOption<AnnotationMode>[];
+
+const modalState = ref<{
+  type: 'byClonotype' | 'bySampleAndClonotype';
+  name: string;
+}>({
+  type: 'byClonotype',
+  name: '',
+});
+
+const isValidForm = computed(() => {
+  return modalState.value.name.length > 3;
+});
+
+const handleSubmit = () => {
+  if (isValidForm.value) {
+    emits('submit', modalState.value);
+  }
+};
+
+const handleCancel = () => {
+  opened.value = false;
+};
+</script>
+
+<template>
+  <PlDialogModal v-model="opened" width="600px">
+    <template #title>
+      Choose the Annotation Scheme type
+    </template>
+    <template #default>
+      <PlRadioGroup v-model="modalState.type" :options="annotationSchemaTypes" />
+      <PlTextField
+        v-model="modalState.name"
+        label="Name your Scheme"
+        min-length="3"
+        max-length="40"
+        placeholder="Annotation Name"
+        autofocus
+        required
+      />
+    </template>
+    <template #actions>
+      <PlBtnPrimary :disabled="!isValidForm" @click.stop="handleSubmit">Apply</PlBtnPrimary>
+      <PlBtnGhost @click.stop="handleCancel">Cancel</PlBtnGhost>
+    </template>
+  </PlDialogModal>
+</template>

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

@@ -0,0 +1,114 @@
+<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';
+
+// Models
+const annotation = defineModel<AnnotationScriptUi>('annotation', { required: true, default: getDefaultAnnotationScript });
+const opened = defineModel<boolean>('opened', { required: true });
+// Props
+const props = defineProps<{
+  columns: SimplifiedUniversalPColumnEntry[];
+  hasSelectedColumns: boolean;
+  getValuesForSelectedColumns: () => Promise<undefined | { columnId: PObjectId; values: string[] }>;
+}>();
+// 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;
+  }
+}
+
+</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>
+</template>
+
+<style lang="scss" module>
+.modal {
+  display: flex;
+}
+
+.sidebarGroup {
+  width: 100%;
+  height: 100%;
+}
+
+.sidebarItem {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/PlAnnotations/index.ts

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

package/src/components/PlAnnotations/types.ts

@@ -0,0 +1,9 @@
+import type { PColumnSpec, SUniversalPColumnId } from '@platforma-sdk/model';
+
+export type SimplifiedPColumnSpec = Pick<PColumnSpec, 'valueType' | 'annotations'>;
+
+export type SimplifiedUniversalPColumnEntry = {
+  id: SUniversalPColumnId;
+  label: string;
+  obj: SimplifiedPColumnSpec;
+};

package/src/components/PlAnnotations/utils.ts

@@ -0,0 +1,25 @@
+import type { AnnotationScriptUi, FilterUi, TypeFieldRecord } from '@platforma-sdk/model';
+
+export function getDefaultAnnotationScript(): AnnotationScriptUi {
+  return {
+    isCreated: false,
+    title: 'My Annotation',
+    mode: 'byClonotype',
+    steps: [],
+  };
+}
+
+export function createDefaultFilterMetadata<T extends Extract<FilterUi, { column: unknown }>>(): TypeFieldRecord<T> {
+  return {
+    column: {
+      label: 'Column',
+      fieldType: 'SUniversalPColumnId',
+      defaultValue: () => undefined,
+    },
+    type: {
+      label: 'Predicate',
+      fieldType: 'FilterUiType',
+      defaultValue: () => undefined,
+    },
+  } as TypeFieldRecord<T>;
+};

package/src/lib.ts

@@ -28,6 +28,8 @@ export * from './components/PlTableFilters';
 
 export * from './components/PlMultiSequenceAlignment';
 
+export * from './components/PlAnnotations';
+
 export * from './defineApp';
 
 export * from './createModel';

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

@@ -1 +0,0 @@
-{"version":3,"file":"ExpandTransition.vue2.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;;;;;;;;;;;;;;;"}

package/dist/lib/ui/uikit/dist/generated/components/svg/images/SvgRequired.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SvgRequired.vue.js","sources":["../../../../../../../../../../../lib/ui/uikit/src/generated/components/svg/images/SvgRequired.vue"],"sourcesContent":["<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->\n<script lang=\"ts\">\nimport '../svg-styles.css';\nexport default { name: 'SvgRequired' };\n</script>\n\n<template>\n  <div class=\"svg-icon SvgRequired\" style=\"width: 5px; height: 12px\" />\n</template>\n\n<style>\n  .SvgRequired { background-image: url(\"data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%225%22%20height%3D%2212%22%20viewBox%3D%220%200%205%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.51685%204.8L2.5%203.34159L3.47612%204.8L4.39607%204.12743L3.31461%202.7469L5%202.25133L4.64888%201.16106L3.00562%201.77699L3.06882%200H1.93118L1.99438%201.77699L0.351124%201.16106L0%202.25133L1.68539%202.7469L0.59691%204.12743L1.51685%204.8Z%22%20fill%3D%22%23F1222F%22%2F%3E%3C%2Fsvg%3E\"); }\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAOoC,MAAA,IAAA;AAAA,EAAA,OAAA;AAAA;;;;;;"}