@platforma-sdk/ui-vue 1.44.15 → 1.45.5

package/src/components/PlBtnExportArchive/PlBtnExportArchive.vue

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import {
+  PlBtnGhost,
+  PlIcon16,
+  PlIcon24,
+  useClickOutside,
+} from '@milaboratories/uikit';
+import { ZipWriter } from '@zip.js/zip.js';
+import { reactive, computed, ref } from 'vue';
+import type { ExportItem, ExportsMap, FileExportEntry } from './types';
+import Item from './Item.vue';
+import { getFileNameFromHandle, ChunkedStreamReader } from '@platforma-sdk/model';
+import { getRawPlatformaInstance } from '@platforma-sdk/model';
+import { uniqueId } from '@milaboratories/helpers';
+import Summary from './Summary.vue';
+
+type FilePickerAcceptType = {
+  description?: string;
+  accept?: Record<string, string[]>;
+};
+
+const props = defineProps<{
+  fileExports?: FileExportEntry[];
+  suggestedFileName?: string;
+  disabled?: boolean;
+  filePickerTypes?: FilePickerAcceptType[];
+  strategy?: 'parallel'; // default is sequential
+  debugFn?: (fileName: string) => Promise<void>;
+}>();
+
+const defaultData = () => ({
+  loading: false,
+  name: '',
+  exports: undefined as ExportsMap | undefined,
+  showExports: false,
+});
+
+const data = reactive(defaultData());
+
+const updateExportsItem = (id: string, partial: Partial<ExportItem>) => {
+  const it = data.exports?.get(id);
+  if (it) {
+    data.exports?.set(id, { ...it, ...partial });
+  }
+};
+
+const isReadyToExport = computed(() => {
+  return props.fileExports !== undefined && !props.disabled;
+});
+
+const items = computed(() => {
+  return Array.from(data.exports?.values() ?? []);
+});
+
+const archive = computed<ExportItem>(() => {
+  return {
+    fileName: data.name,
+    current: items.value.reduce((acc, item) => acc + item.current, 0),
+    size: items.value.reduce((acc, item) => acc + item.size, 0),
+    status: items.value.some((item) => item.status === 'in-progress') ? 'in-progress' : items.value.every((item) => item.status === 'completed') ? 'completed' : 'pending',
+    hasErrors: items.value.some((item) => item.status === 'error'),
+  };
+});
+
+type ZipRequest = {
+  id: string;
+  fileName: string;
+  size: number;
+  stream: ReadableStream<Uint8Array>;
+};
+
+const exportRawTsvs = async () => {
+  if (data.loading) {
+    data.showExports = true;
+    return;
+  }
+
+  if (!isReadyToExport.value || !props.fileExports) {
+    return;
+  }
+
+  const defaultFileName = `${new Date().toISOString().split('T')[0]}_Export.zip`;
+  const defaultTypes = [{
+    description: 'ZIP files',
+    accept: {
+      'application/zip': ['.zip'],
+    },
+  }];
+
+  // @ts-expect-error - type definition issue TODO: fix this
+  const newHandle = await window.showSaveFilePicker({
+    types: props.filePickerTypes || defaultTypes,
+    suggestedName: props.suggestedFileName || defaultFileName,
+  });
+
+  data.loading = true;
+  data.name = newHandle.name;
+  data.showExports = true;
+  data.exports = new Map();
+
+  try {
+    const writableStream = await newHandle.createWritable();
+    const zip = new ZipWriter(writableStream, { keepOrder: true, zip64: true, bufferedWrite: false });
+    try {
+      const requests = [] as ZipRequest[];
+
+      for (const entry of props.fileExports) {
+        const { importHandle, blobHandle, fileName: customFileName } = entry;
+        const fileName = customFileName ?? getFileNameFromHandle(importHandle);
+        const { handle, size } = blobHandle;
+
+        const id = uniqueId();
+
+        data.exports?.set(id, { fileName, current: 0, size, status: 'pending' });
+
+        const stream = ChunkedStreamReader.create({
+          fetchChunk: async ({ from, to }) => {
+            if (props.debugFn) {
+              await props.debugFn(fileName);
+            }
+
+            return await getRawPlatformaInstance().blobDriver.getContent(handle, { from, to });
+          },
+          totalSize: size,
+          onError: async (error) => {
+            updateExportsItem(id, { status: 'error', error });
+            await new Promise((resolve) => setTimeout(resolve, 1000)); // primitive for now
+            return 'continue';
+          },
+        });
+
+        // Create a chunked stream reader for efficient streaming
+        requests.push({ id, fileName, size, stream });
+      }
+
+      const processRequest = async (request: ZipRequest) => {
+        const { id, fileName, size, stream } = request;
+        const update = (partial: Partial<ExportItem>) => {
+          const it = data.exports?.get(id);
+          if (it) {
+            data.exports?.set(id, { ...it, ...partial });
+          }
+        };
+        await zip.add(fileName, stream, {
+          bufferedWrite: true,
+          onstart: () => {
+            update({ status: 'in-progress' });
+            return undefined;
+          },
+          onprogress: (current: number) => {
+            update({ current, status: 'in-progress' });
+            return undefined;
+          },
+          onend() {
+            update({ current: size, status: 'completed' });
+            return undefined;
+          },
+        });
+      };
+
+      if (props.strategy === 'parallel') {
+        await Promise.all(requests.map(processRequest));
+      } else {
+        for (const request of requests) {
+          await processRequest(request);
+        }
+      }
+    } finally {
+      await zip.close().catch((error) => {
+        console.error('Error closing zip', error);
+      });
+    }
+  } finally {
+    data.loading = false;
+  }
+};
+
+const progressesRef = ref();
+
+useClickOutside([progressesRef], () => {
+  data.showExports = false;
+});
+</script>
+
+<template>
+  <PlBtnGhost
+    :disabled="!isReadyToExport" :loading="data.loading" :class="{ [$style['has-exports']]: data.exports }"
+    @click.stop="exportRawTsvs"
+  >
+    <slot />
+    <template #append>
+      <PlIcon24 :class="$style.icon" name="download" />
+    </template>
+  </PlBtnGhost>
+  <Teleport to="body">
+    <div v-if="data.exports && data.showExports" ref="progressesRef" :class="$style.progresses">
+      <PlIcon16 :class="$style.close" name="close" @click.stop="data.showExports = false" />
+      <Summary :item="archive" />
+      <div :class="$style.itemsContainer" class="pl-scrollable-y">
+        <Item v-for="item in data.exports?.values()" :key="item.fileName" :item="item" />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style module>
+.progresses {
+  position: fixed;
+  top: 8px;
+  right: 8px;
+  width: 350px;
+  height: auto;
+  max-height: 400px;
+  overflow: auto;
+  background: rgba(0, 0, 0, 0.85);
+  border-radius: 8px;
+  padding: 20px 8px 8px 20px;
+  color: white;
+  font-size: 12px;
+  font-weight: 600;
+  z-index: 1000;
+
+  .itemsContainer {
+    max-height: 300px;
+  }
+
+  .close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    cursor: pointer;
+    --icon-color: white;
+  }
+}
+</style>

package/src/components/PlBtnExportArchive/Summary.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { ExportItem } from './types';
+import { prettyBytes } from '@milaboratories/helpers';
+
+defineProps<{
+  item: ExportItem;
+}>();
+
+const emit = defineEmits<{
+  (e: 'cancel'): void;
+}>();
+</script>
+
+<template>
+  <div
+    :class="$style.summary"
+  >
+    <div :class="$style.name">{{ item.fileName }}<span v-if="false" @click.stop="emit('cancel')">[TODO: Cancel]</span></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 :class="$style.details">
+      Pending
+    </div>
+  </div>
+</template>
+
+<style module>
+.summary {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  padding-bottom: 8px;
+  --name-font-size: 14px;
+  --details-font-size: 12px;
+}
+
+.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);
+}
+</style>

package/src/components/PlBtnExportArchive/index.ts

@@ -0,0 +1,2 @@
+export { default as PlBtnExportArchive } from './PlBtnExportArchive.vue';
+export type { FileExportEntry } from './types';

package/src/components/PlBtnExportArchive/types.ts

@@ -0,0 +1,17 @@
+import type { ImportFileHandle, RemoteBlobHandleAndSize } from '@platforma-sdk/model';
+
+export type FileExportEntry = {
+  importHandle: ImportFileHandle;
+  blobHandle: RemoteBlobHandleAndSize;
+  fileName?: string;
+};
+
+export type ExportItem = {
+  fileName: string;
+  current: number;
+  size: number;
+  status: 'pending' | 'in-progress' | 'completed' | 'error';
+  error?: unknown;
+};
+
+export type ExportsMap = Map<string, ExportItem>;

package/src/lib.ts

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

package/dist/components/PlAnnotations/components/PlAnnotationCreateDialog.vue.d.ts

@@ -1,18 +0,0 @@
-type __VLS_PublicProps = {
-    modelValue: boolean;
-};
-declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => any;
-} & {
-    submit: (props: {
-        type: "byClonotype" | "bySampleAndClonotype";
-        name: string;
-    }) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onSubmit?: ((props: {
-        type: "byClonotype" | "bySampleAndClonotype";
-        name: string;
-    }) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/PlAnnotations/components/PlAnnotationCreateDialog.vue.js

@@ -1,73 +0,0 @@
-import { defineComponent as v, mergeModels as b, useModel as C, ref as P, computed as x, createBlock as g, openBlock as S, unref as t, withCtx as a, createVNode as n, withModifiers as i, createTextVNode as d } from "vue";
-import { PlDialogModal as A, PlBtnPrimary as B, PlBtnGhost as M, PlRadioGroup as c, PlTextField as h } from "@milaboratories/uikit";
-const G = /* @__PURE__ */ v({
-  __name: "PlAnnotationCreateDialog",
-  props: {
-    modelValue: { type: Boolean, required: !0 },
-    modelModifiers: {}
-  },
-  emits: /* @__PURE__ */ b(["submit"], ["update:modelValue"]),
-  setup(p, { emit: r }) {
-    const u = C(p, "modelValue"), s = r, f = [
-      { label: "Global", value: "byClonotype" },
-      { label: "Per sample", value: "bySampleAndClonotype" }
-    ], l = P({
-      type: "byClonotype",
-      name: ""
-    }), m = x(() => l.value.name.length > 3), y = () => {
-      m.value && s("submit", l.value);
-    }, V = () => {
-      u.value = !1;
-    };
-    return (k, e) => (S(), g(t(A), {
-      modelValue: u.value,
-      "onUpdate:modelValue": e[2] || (e[2] = (o) => u.value = o),
-      width: "600px"
-    }, {
-      title: a(() => e[3] || (e[3] = [
-        d(" Choose the Annotation Scheme type ")
-      ])),
-      default: a(() => [
-        n(t(c), {
-          modelValue: l.value.type,
-          "onUpdate:modelValue": e[0] || (e[0] = (o) => l.value.type = o),
-          options: f
-        }, null, 8, ["modelValue"]),
-        n(t(h), {
-          modelValue: l.value.name,
-          "onUpdate:modelValue": e[1] || (e[1] = (o) => l.value.name = o),
-          label: "Name your Scheme",
-          "min-length": "3",
-          "max-length": "40",
-          placeholder: "Annotation Name",
-          autofocus: "",
-          required: ""
-        }, null, 8, ["modelValue"])
-      ]),
-      actions: a(() => [
-        n(t(B), {
-          disabled: !m.value,
-          onClick: i(y, ["stop"])
-        }, {
-          default: a(() => e[4] || (e[4] = [
-            d("Apply")
-          ])),
-          _: 1
-        }, 8, ["disabled"]),
-        n(t(M), {
-          onClick: i(V, ["stop"])
-        }, {
-          default: a(() => e[5] || (e[5] = [
-            d("Cancel")
-          ])),
-          _: 1
-        })
-      ]),
-      _: 1
-    }, 8, ["modelValue"]));
-  }
-});
-export {
-  G as default
-};
-//# sourceMappingURL=PlAnnotationCreateDialog.vue.js.map

package/dist/components/PlAnnotations/components/PlAnnotationCreateDialog.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PlAnnotationCreateDialog.vue.js","sources":["../../../../src/components/PlAnnotations/components/PlAnnotationCreateDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SimpleOption } from '@milaboratories/uikit';\nimport { PlBtnGhost, PlBtnPrimary, PlDialogModal, PlRadioGroup, PlTextField } from '@milaboratories/uikit';\nimport type { AnnotationMode } from '@platforma-sdk/model';\nimport { computed, ref } from 'vue';\n\n// Models\nconst opened = defineModel<boolean>({ required: true });\n// Emits\nconst emits = defineEmits<{\n  (e: 'submit', props: { type: 'byClonotype' | 'bySampleAndClonotype'; name: string }): void;\n}>();\n\nconst annotationSchemaTypes = [\n  { label: 'Global', value: 'byClonotype' },\n  { label: 'Per sample', value: 'bySampleAndClonotype' },\n] satisfies SimpleOption<AnnotationMode>[];\n\nconst modalState = ref<{\n  type: 'byClonotype' | 'bySampleAndClonotype';\n  name: string;\n}>({\n  type: 'byClonotype',\n  name: '',\n});\n\nconst isValidForm = computed(() => {\n  return modalState.value.name.length > 3;\n});\n\nconst handleSubmit = () => {\n  if (isValidForm.value) {\n    emits('submit', modalState.value);\n  }\n};\n\nconst handleCancel = () => {\n  opened.value = false;\n};\n</script>\n\n<template>\n  <PlDialogModal v-model=\"opened\" width=\"600px\">\n    <template #title>\n      Choose the Annotation Scheme type\n    </template>\n    <template #default>\n      <PlRadioGroup v-model=\"modalState.type\" :options=\"annotationSchemaTypes\" />\n      <PlTextField\n        v-model=\"modalState.name\"\n        label=\"Name your Scheme\"\n        min-length=\"3\"\n        max-length=\"40\"\n        placeholder=\"Annotation Name\"\n        autofocus\n        required\n      />\n    </template>\n    <template #actions>\n      <PlBtnPrimary :disabled=\"!isValidForm\" @click.stop=\"handleSubmit\">Apply</PlBtnPrimary>\n      <PlBtnGhost @click.stop=\"handleCancel\">Cancel</PlBtnGhost>\n    </template>\n  </PlDialogModal>\n</template>\n"],"names":["opened","_useModel","__props","emits","__emit","annotationSchemaTypes","modalState","ref","isValidForm","computed","handleSubmit","handleCancel"],"mappings":";;;;;;;;;;AAOA,UAAMA,IAASC,EAAoBC,GAAA,YAAmB,GAEhDC,IAAQC,GAIRC,IAAwB;AAAA,MAC5B,EAAE,OAAO,UAAU,OAAO,cAAA;AAAA,MAC1B,EAAE,OAAO,cAAc,OAAO,uBAAA;AAAA,IAAuB,GAGjDC,IAAaC,EAGhB;AAAA,MACD,MAAM;AAAA,MACN,MAAM;AAAA,IAAA,CACP,GAEKC,IAAcC,EAAS,MACpBH,EAAW,MAAM,KAAK,SAAS,CACvC,GAEKI,IAAe,MAAM;AACzB,MAAIF,EAAY,SACdL,EAAM,UAAUG,EAAW,KAAK;AAAA,IAEpC,GAEMK,IAAe,MAAM;AACzB,MAAAX,EAAO,QAAQ;AAAA,IACjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlAnnotations/components/PlAnnotationCreateDialog.vue2.js

@@ -1,5 +0,0 @@
-import f from "./PlAnnotationCreateDialog.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=PlAnnotationCreateDialog.vue2.js.map

package/dist/components/PlAnnotations/components/PlAnnotationCreateDialog.vue2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PlAnnotationCreateDialog.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -1,64 +0,0 @@
-<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>