working trees table

Author: gnefedev

model/src/index.ts

@@ -4,6 +4,7 @@ import {
   Ref,
   Option,
   InferOutputsType,
+  PlDataTableState,
   isPColumn,
   isPColumnSpec
 } from '@milaboratory/sdk-ui';
@@ -16,7 +17,11 @@ export type BlockArgs = {
   datasetColumns: (Ref | null)[];
 };
 
-export const platforma = BlockModel.create<BlockArgs>('Heavy')
+export type UiState = {
+  treeTableState?: PlDataTableState;
+};
+
+export const platforma = BlockModel.create<BlockArgs, UiState>('Heavy')
 
   .initialArgs({
     datasetColumns: [null]
@@ -86,29 +91,31 @@ export const platforma = BlockModel.create<BlockArgs>('Heavy')
       );
   })
 
-  // .output('allColumnSpecs', (ctx) => {
-  //   return ctx.resultPool
-  //     .getSpecsFromResultPool()
-  //     .entries
-  //     .filter((v) => {
-  //       return isPColumnSpec(v.obj);
-  //     });
-  // })
+  .output('allColumnSpecs', (ctx) => {
+    return ctx.resultPool.getSpecsFromResultPool().entries.filter((v) => {
+      return isPColumnSpec(v.obj);
+    });
+  })
 
   .output('trees', (ctx) => {
-    const collection = ctx.outputs
-      ?.resolve({ field: 'trees', assertFieldType: 'Input' })
-      ?.parsePObjectCollection();
-    if (collection === undefined) return undefined;
-    // if (collection === undefined || !collection.isComplete) return undefined;
-    const pColumns = Object.entries(collection)
-      .map(([id, obj]) => obj)
-      .filter(isPColumn);
-    return ctx.createPFrame(pColumns);
+    const pCols = ctx.outputs?.resolve("trees")?.getPColumns();
+    if (pCols === undefined) return undefined;
+    return ctx.createPTable({
+      columns: pCols,
+      filters: ctx.uiState?.treeTableState?.pTableParams?.filters ?? [],
+      sorting: ctx.uiState?.treeTableState?.pTableParams?.sorting ?? []
+    });
   })
 
   .output('temp', (ctx) => {
-    return ctx.outputs?.resolve('trees')?.listInputFields();
+    return {
+      fields: ctx.outputs?.resolve('trees')?.listInputFields(),
+      columns: ctx.outputs?.resolve("trees")?.getPColumns()?.map((o) => ({
+          spec: o.spec,
+          resourseType: o.data.resourceType,
+          data: o.data.getDataAsJson()
+      }))
+    }
   })
 
   .output('allelesLog', (ctx) => {
@@ -119,7 +126,10 @@ export const platforma = BlockModel.create<BlockArgs>('Heavy')
     return ctx.outputs?.resolve('treesLog')?.listInputFields();
   })
 
-  .sections([{ type: 'link', href: '/', label: 'Settings' }])
+  .sections([
+    { type: 'link', href: '/', label: 'Settings' },
+    { type: 'link', href: '/trees', label: 'Trees Table' }
+  ])
 
   .done();
 

pnpm-lock.yaml

@@ -6,20 +6,20 @@ packages:
   - test
 
 catalog:
-  '@milaboratory/tengo-template-builder': 1.13.0
+  '@milaboratory/tengo-template-builder': ^1.14.2
   '@milaboratory/pl-block-tools': ^2.1.5
   '@milaboratory/block-builder': ^1.2.3
 
   '@milaboratory/sdk-ui': ^0.12.22
   '@milaboratory/sdk-test': ^1.5.5
 
-  '@milaboratory/tengo-sdk': ^1.2.1
+  '@milaboratory/tengo-sdk': ^1.2.4
   '@milaboratory/pframes-conv': ^0.4.25
 
   '@milaboratory/mixcr': 4.7.0-70-develop
 
-  '@milaboratory/platforma-uikit': ^1.1.4
-  '@milaboratory/sdk-vue': ^1.1.1
+  '@milaboratory/platforma-uikit': ^1.1.11
+  '@milaboratory/sdk-vue': ^1.1.4
   '@milaboratory/helpers': ^1.5.3
 
   'vue': ^3.4.38

pnpm-workspace.yaml

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { platforma } from '@milaboratory/milaboratories.mixcr-shm-trees.model';
+import { useApp } from './app';
+import { computed } from 'vue';
+import { PlAgDataTable, PlDataTableSettings } from '@milaboratory/sdk-vue';
+
+const app = useApp();
+
+const uiState = app.createUiModel({}, () => ({}))
+
+const tableSettings = computed<PlDataTableSettings>(() => ({
+  sourceType: "pframe",
+
+  pTable: app.outputs.trees,
+
+  // sheets: [
+  //   {
+  //     id: "trees",
+  //     axis: {
+  //       type: "String",
+  //       name: "pl7.app/sampleId",
+  //     },
+  //     options: [],
+  //     // defaultValue: ",
+  //   }
+  // ],
+}));
+
+</script>
+
+<template>
+  <div class="container">
+    <PlAgDataTable v-model="uiState.model.treeTableState" :settings="tableSettings"></PlAgDataTable>
+  </div>
+</template>

ui/src/TreeTablePage.vue

@@ -1,11 +1,13 @@
 import { platforma } from '@milaboratory/milaboratories.mixcr-shm-trees.model';
 import { defineApp } from '@milaboratory/sdk-vue';
 import SettingsPage from './SettingsPage.vue';
+import TreeTablePage from './TreeTablePage.vue';
 
 export const sdkPlugin = defineApp(platforma, () => {
   return {
     routes: {
-      '/': SettingsPage
+      '/': SettingsPage,
+      '/trees': TreeTablePage
     }
   };
 });

ui/src/app.ts

@@ -1,4 +1,4 @@
 declare type TemplateFromFile = { readonly type: "from-file"; readonly path: string; };
-declare type TplName = "reconstruct-shm-trees" | "main";
+declare type TplName = "reconstruct-shm-trees" | "process" | "main";
 declare const Templates: Record<TplName, TemplateFromFile>;
 export { Templates };

workflow/index.d.ts

@@ -1,4 +1,5 @@
 module.exports = { Templates: {
   'reconstruct-shm-trees': { type: 'from-file', path: require.resolve('./dist/tengo/tpl/reconstruct-shm-trees.plj.gz') },
+  'process': { type: 'from-file', path: require.resolve('./dist/tengo/tpl/process.plj.gz') },
   'main': { type: 'from-file', path: require.resolve('./dist/tengo/tpl/main.plj.gz') }
 }}