@datagrok/hit-triage 1.7.2 → 1.7.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/hit-triage",
   "friendlyName": "Hit Triage",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "author": {
     "name": "Davit Rizhinashvili",
     "email": "drizhinashvili@datagrok.ai"
@@ -17,22 +17,23 @@
   },
   "dependencies": {
     "@datagrok-libraries/compute-utils": "^1.39.0",
-    "@datagrok-libraries/utils": "^4.3.0",
+    "@datagrok-libraries/utils": "^4.5.7",
     "cash-dom": "^8.1.5",
     "css-loader": "^6.5.1",
     "datagrok-api": "^1.25.0",
+    "rxjs": "^6.5.5",
     "source-map-loader": "^4.0.1",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.5.1",
-    "rxjs": "^6.5.5",
+    "typeahead-standalone": "4.14.1",
     "typescript": "^5.6.3",
-    "uuid": "^9.0.0",
-    "typeahead-standalone": "4.14.1"
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^5.32.0",
     "@typescript-eslint/parser": "^5.32.0",
+    "datagrok-tools": "^4.14.10",
     "eslint": "^8.21.0",
     "eslint-config-google": "^0.14.0",
     "webpack": "^5.95.0",
@@ -45,7 +46,7 @@
     "debug-hittriage": "webpack && grok publish ",
     "release-hittriage": "grok publish --release",
     "build-hittriage": "webpack",
-    "build": "webpack",
+    "build": "grok api && grok check --soft && webpack",
     "debug-hittriage-dev": "grok publish dev",
     "release-hittriage-dev": "grok publish dev --release",
     "debug-hittriage-public": "grok publish public",
@@ -91,4 +92,4 @@
       "friendlyName": "Default Campaign Folder"
     }
   ]
-}
+}

package/src/app/accordeons/new-hit-design-template-accordeon.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import * as DG from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
 import * as grok from 'datagrok-api/grok';
@@ -10,6 +11,7 @@ import {getCampaignFieldEditors} from './new-template-accordeon';
 import {ItemType, ItemsGrid} from '@datagrok-libraries/utils/src/items-grid';
 import {HitAppBase} from '../hit-app-base';
 import {getLayoutInput} from './layout-input';
+import {getFuncPackageNameSafe} from '../utils';
 
 export async function newHitDesignTemplateAccordeon(app: HitAppBase<any>,
   preset?: PeptiHitTemplate): Promise<INewTemplateResult<PeptiHitTemplate>> {
@@ -188,7 +190,7 @@ export async function newHitDesignTemplateAccordeon(app: HitAppBase<any>,
               });
             }),
         },
-        ...(submitFunction ? {submit: {fName: submitFunction.name, package: submitFunction.package.name}} : {}),
+        ...(submitFunction ? {submit: {fName: submitFunction.name, package: getFuncPackageNameSafe(submitFunction)}} : {}),
       };
       await saveHitDesignTemplate(out, app.appName);
       grok.shell.info('Template created successfully');

package/src/app/accordeons/new-template-accordeon.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import * as DG from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
 import * as grok from 'datagrok-api/grok';
@@ -10,6 +11,7 @@ import {chemFunctionsDialog} from '../dialogs/functions-dialog';
 import {ItemType, ItemsGrid} from '@datagrok-libraries/utils/src/items-grid';
 import {HitAppBase} from '../hit-app-base';
 import {getLayoutInput} from './layout-input';
+import {getFuncPackageNameSafe} from '../utils';
 
 
 export async function createTemplateAccordeon(app: HitAppBase<any>,
@@ -165,7 +167,7 @@ export async function createTemplateAccordeon(app: HitAppBase<any>,
               });
             }),
         },
-        ...(submitFunction ? {submit: {fName: submitFunction.name, package: submitFunction.package.name}} : {}),
+        ...(submitFunction ? {submit: {fName: submitFunction.name, package: getFuncPackageNameSafe(submitFunction)}} : {}),
         queryFunctionName: (ingestTypeInput.value === 'Query') ? dataSourceFunctionInput.value ?? undefined : undefined,
       };
       saveTemplate(out);

package/src/app/dialogs/functions-dialog.ts

@@ -8,7 +8,7 @@ import {IChemFunctionsDialogResult, IComputeDialogResult, IDescriptorTree,
 import '../../../css/hit-triage.css';
 import {funcTypeNames, HTQueryPrefix, HTScriptPrefix} from '../consts';
 import {HitAppBase} from '../hit-app-base';
-import { FunctionOrdering, getReorderingInput, getSavedFunctionOrdering } from '../utils';
+import {FunctionOrdering, getFuncPackageNameSafe, getReorderingInput, getSavedFunctionOrdering} from '../utils';
 
 export async function chemFunctionsDialog(app: HitAppBase<any>,
   onOk: (result: IComputeDialogResult) => void, onCancel: () => void,
@@ -48,34 +48,35 @@ export async function chemFunctionsDialog(app: HitAppBase<any>,
   const descriptorsGroupHost = ui.wait(async () => {
     try {
       // tree groups
-        const descriptorsTree = (await grok.chem.descriptorsTree()) as IDescriptorTree;
-        descriptorsGroup.root.classList.add('hit-triage-compute-dialog-descriptors-group');
-    
-        function createTreeGroup(name: string, treeNode: DG.TreeViewGroup): DG.TreeViewGroup {
-          const res = treeNode.group(name, null, false);
-          res.enableCheckBox(false);
-          return res;
-        };
-    
-        // const descriptorsGroup = createTreeGroup('Descriptors', tree);
-        const keys = Object.keys(descriptorsTree);
-        const preselectedDescriptors: string[] = template?.compute?.descriptors?.args ?? [];
-        for (const groupName of keys) {
-          const group = createTreeGroup(groupName, descriptorsGroup);
-    
-          for (const descriptor of descriptorsTree[groupName].descriptors) {
-            const item = group.item(descriptor.name, descriptor);
-            descriptorItems.push(item);
-            item.enableCheckBox(preselectedDescriptors.includes(descriptor.name));
-          }
-        };
-        return descriptorsGroup.root;
-      } catch (e) {
-        console.error(e);
-      }
-      return ui.divText('Failed to load descriptors');
-  })
-  
+      const descriptorsTree = (await grok.chem.descriptorsTree()) as IDescriptorTree;
+      descriptorsGroup.root.classList.add('hit-triage-compute-dialog-descriptors-group');
+
+      function createTreeGroup(name: string, treeNode: DG.TreeViewGroup): DG.TreeViewGroup {
+        const res = treeNode.group(name, null, false);
+        res.enableCheckBox(false);
+        return res;
+      };
+
+      // const descriptorsGroup = createTreeGroup('Descriptors', tree);
+      const keys = Object.keys(descriptorsTree);
+      const preselectedDescriptors: string[] = template?.compute?.descriptors?.args ?? [];
+      for (const groupName of keys) {
+        const group = createTreeGroup(groupName, descriptorsGroup);
+
+        for (const descriptor of descriptorsTree[groupName].descriptors) {
+          const item = group.item(descriptor.name, descriptor);
+          descriptorItems.push(item);
+          item.enableCheckBox(preselectedDescriptors.includes(descriptor.name));
+        }
+      };
+      return descriptorsGroup.root;
+    } catch (e) {
+      console.error(e);
+    }
+    return ui.divText('Failed to load descriptors');
+  });
+  descriptorsGroupHost.classList.add('oy-scroll');
+
   const descriptorsName = 'Descriptors';
   const funcNamesMap: {[key: string]: string} = {[descriptorsName]: descriptorsName};
   // if compute is in dialog form, we need to show all the functions
@@ -118,7 +119,7 @@ export async function chemFunctionsDialog(app: HitAppBase<any>,
       funcNamesMap[f.friendlyName ?? f.name] = keyName;
       calculatedFunctions[keyName] = (template?.compute?.functions?.some(
         (f) => func.func.type === funcTypeNames.function &&
-        f.name === func.func.name && f.package === func.func.package?.name) ||
+        f.name === func.func.name && f.package === getFuncPackageNameSafe(func.func)) ||
           template?.compute?.scripts?.some((s) => s.id === f.id) ||
           template?.compute?.queries?.some((s) => s.id === f.id)) ?? false;
     } catch (e) {
@@ -134,7 +135,7 @@ export async function chemFunctionsDialog(app: HitAppBase<any>,
   tc.root.style.minWidth = '350px';
   host.appendChild(tc.root);
   // add checkboxes to each hader
-  function addCheckboxesToPaneHeaders () {
+  function addCheckboxesToPaneHeaders() {
     tc.panes.forEach((pane)=> {
       const functionCheck =
         ui.input.bool('', {value: calculatedFunctions[funcNamesMap[pane.name]], onValueChanged: (value) => {
@@ -155,16 +156,15 @@ export async function chemFunctionsDialog(app: HitAppBase<any>,
     let actOrder = order.order ?? Object.keys(tabControlArgs);
     if (actOrder.length === 0)
       actOrder = Object.keys(tabControlArgs);
-    
+
     actOrder.forEach((n) => {
       if (tabControlArgs[n])
         tc.addPane(n, () => tabControlArgs[n]);
     });
     // after adding ordered panes, we also need to add new functions, not included in the order
     Object.keys(tabControlArgs).forEach((n) => {
-      if (!actOrder.includes(n) && tabControlArgs[n] && !(order.hidden ?? []).includes(n)) {
+      if (!actOrder.includes(n) && tabControlArgs[n] && !(order.hidden ?? []).includes(n))
         tc.addPane(n, () => tabControlArgs[n]);
-      }
     });
     // make sure that hidden functions are not checked;
     (order.hidden ?? []).forEach((n) => {

package/src/app/hit-design-app.ts

@@ -90,6 +90,10 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
     this.saveCampaign(false);
   }
 
+  public get submitParams() {
+    return this.campaign?.template?.submit ?? this.template?.submit;
+  }
+
   private updateAllVids() {
     const molCol = this.dataFrame!.col(this.molColName);
     const vidCol = this.dataFrame!.col(ViDColName);
@@ -134,9 +138,8 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
             this._infoView.init();
             sub.unsubscribe();
           });
-        } else if (grok.shell.v === this.mainView) {
+        } else if (grok.shell.v === this.mainView)
           this.setBaseUrl();
-        }
       } catch (e) {
         console.error(e);
       }
@@ -503,19 +506,7 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
         });
 
         const submitButton = ui.bigButton('Submit...', () => {
-          const dialogContent = this._submitView?.render();
-          if (dialogContent) {
-            const dlg = ui.dialog('Submit');
-            dlg.add(dialogContent);
-            dlg.addButton('Save', () => {
-              this._campaign!.status = this._submitView!.getStatus();
-              this.saveCampaign();
-              dlg.close();
-            });
-            if (this.template?.submit?.fName && this.template?.submit?.package && DG.Func.find({name: this.template.submit.fName, package: this.template.submit.package})?.length > 0)
-              dlg.addButton('Submit', ()=>{this._submitView?.submit(); dlg.close();});
-            dlg.show();
-          }
+          this._submitView?.render();
         });
 
         const designerFuncs = DG.Func.find({tags: [HitDesignerFunctionTag]}).filter((f) => f.outputs.length === 1 && f.outputs[0].propertyType === DG.TYPE.DATA_FRAME);

package/src/app/hit-design-views/submit-view.ts

@@ -6,6 +6,8 @@ import {HitDesignApp} from '../hit-design-app';
 import {_package} from '../../package';
 import {HitDesignTemplate} from '../types';
 import {HitBaseView} from '../base-view';
+import {HitTriageSubmitTag} from '../consts';
+import {getFuncPackageNameSafe} from '../utils';
 
 export class HitDesignSubmitView extends HitBaseView<HitDesignTemplate, HitDesignApp> {
   private statusInput: DG.InputBase<string | undefined>;
@@ -46,7 +48,7 @@ export class HitDesignSubmitView extends HitBaseView<HitDesignTemplate, HitDesig
     return this.statusInput.value ?? this.app.campaign?.status ?? 'No Status';
   }
 
-  render(): HTMLDivElement {
+  render() {
     this.statusInput.value = this.app.campaign?.status ?? '';
     ui.empty(this.content);
 
@@ -55,17 +57,62 @@ export class HitDesignSubmitView extends HitBaseView<HitDesignTemplate, HitDesig
       ui.div([ui.tableFromMap(this.app.getSummary())]),
       this.statusInput.root,
     ]);
-    return this.content;
+
+
+    const dlg = ui.dialog('Submit');
+    dlg.add(this.content);
+    dlg.addButton('Save', () => {
+      this.app.campaign!.status = this.getStatus();
+      this.app.saveCampaign();
+      dlg.close();
+    });
+    //dlg.addButton('Submit', ()=>{this.submit(); dlg.close();}, undefined, 'Submit the campaign file to the specified function');
+    dlg.show();
+
+    const submitFunctions = DG.Func.find({tags: [HitTriageSubmitTag]});
+    const submitFunctionMap = submitFunctions.reduce((acc, fn) => {
+      acc[fn.friendlyName ?? fn.name] = fn;
+      return acc;
+    }, {} as Record<string, DG.Func>);
+    if (submitFunctions.length > 0) {
+      const chosenFunctionParams = this.app.submitParams;
+      const foundFunction = chosenFunctionParams ? submitFunctions.find((fn) => fn.name === chosenFunctionParams.fName && getFuncPackageNameSafe(fn) == chosenFunctionParams.package) : undefined;
+      const foundFunctionKey = foundFunction?.friendlyName ?? foundFunction?.name;
+      const submitFunctionInput = ui.input.choice('Submit function', {
+        value: foundFunctionKey,
+        items: [...Object.keys(submitFunctionMap)],
+        nullable: true,
+      });
+
+      submitFunctionInput.onChanged.subscribe(() => {
+        const selectedFunction = submitFunctionMap[submitFunctionInput.value ?? ''];
+        this.app.campaign!.template!.submit = selectedFunction ? {
+          fName: selectedFunction.name,
+          package: getFuncPackageNameSafe(selectedFunction),
+        } : undefined;
+        dlg.getButton('Submit')?.remove();
+        if (selectedFunction) {
+          dlg.addButton('Submit', () => {
+            this.submit();
+            dlg.close();
+          }, undefined, 'Submit the campaign file to the specified function');
+        }
+      });
+      submitFunctionInput.fireChanged();
+      this.content.appendChild(submitFunctionInput.root);
+    }
   }
 
   onActivated(): void {
-    this.render();
   }
 
   async submit(): Promise<any> {
-    const submitParams= this.app.template?.submit;
-    if (!submitParams)
+    const submitParams= this.app.submitParams;
+    if (!submitParams) {
+      grok.shell.error('No submit function selected. Please select a function to submit the campaign.');
       return;
+    }
+
     const submitFn = DG.Func.find({name: submitParams.fName, package: submitParams.package})[0];
     if (!submitFn) {
       grok.shell.error(`Function ${submitParams.fName} not found.`);

package/src/app/hit-triage-app.ts

@@ -63,6 +63,10 @@ export class HitTriageApp extends HitAppBase<HitTriageTemplate> {
     });
   }
 
+    public get submitParams() {
+      return this.campaign?.template?.submit ?? this.template?.submit;
+    }
+
   public async setTemplate(template: HitTriageTemplate, presetFilters?: {[key: string]: any}[],
     campaignId?: string, ingestProps?: HitTriageTemplateIngest) {
     this._pickView?.dataFrame && grok.shell.closeTable(this._pickView?.dataFrame);

package/src/app/hit-triage-views/submit-view.ts

@@ -27,7 +27,7 @@ export class SubmitView extends HitBaseView<HitTriageTemplate, HitTriageApp> {
   }
 
   public async submit(): Promise<any> {
-    const submitParams= this.app.template?.submit;
+    const submitParams= this.app.submitParams;
     if (!submitParams)
       return;
     const submitFn = DG.Func.find({name: submitParams.fName, package: submitParams.package})[0];

package/src/app/types.ts

@@ -98,7 +98,7 @@ export type HitTriageTemplateCompute = {
 
 export type HitTriageTemplateSubmit = {
     fName: string,
-    package: string
+    package?: string | undefined
 };
 
 export type HitTriageCampaignStatus = string;

package/src/app/utils.ts

@@ -156,7 +156,7 @@ export async function loadCampaigns<T extends AppName>(
       console.error(e);
     }
     return null;
-  })
+  });
   await Promise.all(campaignPromises);
   return campaignNamesMap;
 }
@@ -413,9 +413,8 @@ export function getReorderedFunctionTabArgs(args: {[key: string]: HTMLElement})
       orderedArgs[key] = args[key];
   }
   for (const key in args) {
-    if (!orderedArgs[key] && !ordering.hidden.includes(key)) {
+    if (!orderedArgs[key] && !ordering.hidden.includes(key))
       orderedArgs[key] = args[key];
-    }
   }
   return orderedArgs;
 }
@@ -452,7 +451,7 @@ export function getReorderingInput(functions: string[], onOk: (ordering: Functio
       if (child instanceof HTMLLabelElement)
         child.style.display = 'none';
     });
-  },200);
+  }, 200);
   columnsEditor.root.style.justifyContent = 'end';
   columnsEditor.root.style.width = '40px';
   columnsEditor.root.style.height = '0px';
@@ -472,4 +471,12 @@ export function getReorderingInput(functions: string[], onOk: (ordering: Functio
   });
   editIcon.style.fontSize = '16px';
   return columnsEditor.root;
-}
+}
+
+export function getFuncPackageNameSafe(func: DG.Func): string | undefined {
+  try {
+    return func.package?.name;
+  } catch (e) {
+    return undefined;
+  }
+}

package/src/package-api.ts

@@ -0,0 +1,54 @@
+import * as grok from 'datagrok-api/grok';
+import * as DG from 'datagrok-api/dg';
+
+
+
+export namespace Funcs {
+  export async function hitTriageAppTreeBrowser(treeNode: any, browseView: DG.View): Promise<any> {
+    return await grok.functions.call('HitTriage:HitTriageAppTreeBrowser', { treeNode, browseView });
+  }
+
+  export async function hitDesignAppTreeBrowser(treeNode: any, browseView: DG.View): Promise<any> {
+    return await grok.functions.call('HitTriage:HitDesignAppTreeBrowser', { treeNode, browseView });
+  }
+
+  export async function peptiHitAppTreeBrowser(treeNode: any, browseView: DG.View): Promise<any> {
+    return await grok.functions.call('HitTriage:PeptiHitAppTreeBrowser', { treeNode, browseView });
+  }
+
+  export async function hitTriageApp(): Promise<any> {
+    return await grok.functions.call('HitTriage:HitTriageApp', {});
+  }
+
+  export async function hitDesignApp(): Promise<any> {
+    return await grok.functions.call('HitTriage:HitDesignApp', {});
+  }
+
+  export async function peptiHitApp(): Promise<any> {
+    return await grok.functions.call('HitTriage:PeptiHitApp', {});
+  }
+
+  export async function demoFileIngest(): Promise<any> {
+    return await grok.functions.call('HitTriage:DemoFileIngest', {});
+  }
+
+  export async function demoFileIngest1(): Promise<any> {
+    return await grok.functions.call('HitTriage:DemoFileIngest1', {});
+  }
+
+  export async function demoFileIngest2(numberOfMolecules: number): Promise<any> {
+    return await grok.functions.call('HitTriage:DemoFileIngest2', { numberOfMolecules });
+  }
+
+  export async function demoFileSubmit(df: DG.DataFrame, molecules: string): Promise<any> {
+    return await grok.functions.call('HitTriage:DemoFileSubmit', { df, molecules });
+  }
+
+  export async function gasteigerCellRenderer(): Promise<any> {
+    return await grok.functions.call('HitTriage:GasteigerCellRenderer', {});
+  }
+
+  export async function htPackageSettingEditor(propList: any): Promise<any> {
+    return await grok.functions.call('HitTriage:HtPackageSettingEditor', { propList });
+  }
+}