saving graph maker state and add comments

Author: gnefedev

model/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@platforma-sdk/model": "catalog:",
+    "@milaboratories/graph-maker": "catalog:",
     "zod": "catalog:"
   },
   "devDependencies": {

model/src/index.ts

@@ -8,6 +8,7 @@ import {
   isPColumn,
   isPColumnSpec
 } from '@platforma-sdk/model';
+import { GraphMakerSettings } from '@milaboratories/graph-maker/dist/GraphMaker/types';
 import { parseResourceMap } from './helpers';
 
 /**
@@ -32,6 +33,7 @@ export type UiState = {
   treeTableState?: PlDataTableState;
   treeSelectionForTreeNodesTable: TreeSelection;
   reportSelection: ReportSelection;
+  treeNodesGraphState: GraphMakerSettings
 };
 
 export type ColumnOption = {

pnpm-lock.yaml

@@ -11,7 +11,7 @@ catalog:
 
   '@platforma-sdk/model': ^1.2.27
   '@platforma-sdk/test': ^1.5.23
-  "@milaboratories/graph-maker": ^1.0.5
+  "@milaboratories/graph-maker": ^1.0.7
 
   '@platforma-sdk/workflow-tengo': ^1.2.8
   '@milaboratories/software-pframes-conv': ^1.5.6

pnpm-workspace.yaml

@@ -1,15 +1,25 @@
 <script setup lang="ts">
-import { platforma } from '@platforma-open/milaboratories.mixcr-shm-trees.model';
 import { useApp } from './app';
 import { computed, reactive, watch } from 'vue';
 import { ListOption, PlBlockPage, PlBtnGroup, PlDropdown, PlTextArea, SimpleOption } from '@platforma-sdk/ui-vue';
 
 const app = useApp();
 
+// TODO should be moved to model
 const uiState = app.createUiModel({}, () => ({
   treeSelectionForTreeNodesTable: {},
   reportSelection: {
     type: 'alleles'
+  },
+  treeNodesGraphState: {
+    title: "",
+    chartType: "dendro",
+    template: "dendro",
+    optionsState: null,
+    statisticsSettings: null,
+    axesSettings: null,
+    layersSettings: null,
+    dataBindAes: null
   }
 }))
 
@@ -28,6 +38,7 @@ watch(() => app.getOutputFieldOkOptional('allelesReports'), (reports) => {
   for (const data of reports.data) {
     donors.push(data.key[0] as string)
   }
+  // update selection choises
   state.donors = donors.map((donor) => ({ text: donor, value: donor }))
 
   // if previously selected donor isn't in available options, remove selection
@@ -37,12 +48,14 @@ watch(() => app.getOutputFieldOkOptional('allelesReports'), (reports) => {
   }
 }, { immediate: true })
 
+// extract report to show
 const reportText = computed(() => {
   const selecetedDonor = uiState.model.reportSelection.donor
   if (selecetedDonor === undefined) {
     return undefined
   }
 
+  // choose an output to extract report from
   var field
   switch(uiState.model.reportSelection.type) {
     case 'alleles': {
@@ -59,13 +72,7 @@ const reportText = computed(() => {
     return undefined
   }
 
-  const selectedReport = field.data.find((data) => data.key[0] === selecetedDonor)
-
-  if (selectedReport === undefined || selectedReport.value === undefined) {
-    return undefined
-  }
-
-  return selectedReport.value
+  return field.data.find((data) => data.key[0] === selecetedDonor)?.value
 })
 
 const reportOptions = [