@datagrok/hit-triage 1.2.1 → 1.3.0

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

@@ -14,8 +14,10 @@ import {newHitDesignTemplateAccordeon} from '../accordeons/new-hit-design-templa
 import {HitBaseView} from '../base-view';
 import {defaultPermissions, PermissionsDialog} from '../dialogs/permissions-dialog';
 
-export class HitDesignInfoView extends HitBaseView<HitDesignTemplate, HitDesignApp> {
-  constructor(app: HitDesignApp) {
+export class HitDesignInfoView
+  <T extends HitDesignTemplate = HitDesignTemplate, K extends HitDesignApp = HitDesignApp>
+  extends HitBaseView<T, K> {
+  constructor(app: K) {
     super(app);
     this.name = 'Hit Design';
     grok.shell.windows.showHelp = true;
@@ -28,22 +30,26 @@ export class HitDesignInfoView extends HitBaseView<HitDesignTemplate, HitDesignA
     grok.shell.windows.help.showHelp(_package.webRoot + 'README_HD.md');
   }
 
-  async init(presetTemplate?: HitDesignTemplate) {
+  getAppHeader() {
+    return u2.appHeader({
+      iconPath: _package.webRoot + '/images/icons/hit-design-icon.png',
+      learnMoreUrl: 'https://github.com/datagrok-ai/public/blob/master/packages/HitTriage/README_HD.md',
+      description:
+      '-  Configure your own workflow using the template editor\n' +
+      '-  Sketch molecules in the molecular spreadsheet\n' +
+      '-  Annotate and share ideas with the team\n' +
+      '-  Calculate different molecular properties\n' +
+      '-  Save campaigns and continue from where you left off\n' +
+      '-  Submit final selection to the function of your choice',
+    });
+  }
+
+  async init(presetTemplate?: T) {
     ui.setUpdateIndicator(this.root, true);
     try {
       const continueCampaignsHeader = ui.h1(i18n.continueCampaigns);
       const createNewCampaignHeader = ui.h1(i18n.createNewCampaignHeader, {style: {marginLeft: '10px'}});
-      const appHeader = u2.appHeader({
-        iconPath: _package.webRoot + '/images/icons/hit-design-icon.png',
-        learnMoreUrl: 'https://github.com/datagrok-ai/public/blob/master/packages/HitTriage/README_HD.md',
-        description:
-        '-  Configure your own workflow using the template editor\n' +
-        '-  Sketch molecules in the molecular spreadsheet\n' +
-        '-  Annotate and share ideas with the team\n' +
-        '-  Calculate different molecular properties\n' +
-        '-  Save campaigns and continue from where you left off\n' +
-        '-  Submit final selection to the function of your choice',
-      });
+      const appHeader = this.getAppHeader();
 
       const campaignAccordionDiv = ui.div();
       const templatesDiv = ui.divH([]);
@@ -64,24 +70,24 @@ export class HitDesignInfoView extends HitBaseView<HitDesignTemplate, HitDesignA
     }
   }
 
-  private async startNewCampaign(
-    containerDiv: HTMLElement, templateInputDiv: HTMLElement, presetTemplate?: HitDesignTemplate,
+  protected async startNewCampaign(
+    containerDiv: HTMLElement, templateInputDiv: HTMLElement, presetTemplate?: T,
   ) {
-    const templates = (await _package.files.list('Hit Design/templates'))
+    const templates = (await _package.files.list(`${this.app.appName}/templates`))
       .filter((file) => file.name.endsWith('.json'))
       .map((file) => file.name.slice(0, -5));
     // if the template is just created and saved, it may not be in the list of templates
     if (presetTemplate && !templates.includes(presetTemplate.name))
       templates.push(presetTemplate.name);
 
-    let selectedTemplate: HitDesignTemplate | null = null;
+    let selectedTemplate: T | null = null;
     let templateChangeFlag = true;
     const onTemmplateChange = async () => {
       if (!templateChangeFlag)
         return;
       const templateName = templatesInput.value;
-      const template: HitDesignTemplate = presetTemplate && presetTemplate.name === templateName ? presetTemplate :
-        JSON.parse(await _package.files.readAsText('Hit Design/templates/' + templateName + '.json'));
+      const template: T = presetTemplate && presetTemplate.name === templateName ? presetTemplate :
+        JSON.parse(await _package.files.readAsText(`${this.app.appName}/templates/${templateName}.json`));
       selectedTemplate = template;
       const newCampaignAccordeon = await this.getNewCampaignAccordeon(template);
       $(containerDiv).empty();
@@ -110,7 +116,7 @@ export class HitDesignInfoView extends HitBaseView<HitDesignTemplate, HitDesignA
         .onOK(async () => {
           try {
             const prevValue = templatesInput.value;
-            await _package.files.delete(`Hit Design/templates/${prevValue}.json`);
+            await _package.files.delete(`${this.app.appName}/templates/${prevValue}.json`);
             templateChangeFlag = false;
             templatesInput.items = templatesInput.items.filter((item) => item !== prevValue);
             templatesInput.value = templatesInput.items[0];
@@ -135,17 +141,17 @@ export class HitDesignInfoView extends HitBaseView<HitDesignTemplate, HitDesignA
   }
 
 
-  private async checkCampaign(campId?: string) {
+  protected async checkCampaign(campId?: string) {
     const url = location.search;
     const urlParams = new URLSearchParams(url);
     if (!urlParams.has(HitDesignCampaignIdKey) && !campId)
       return;
     const campaignId = campId ?? urlParams.get(HitDesignCampaignIdKey);
     // check if such campaign exists
-    if (!await _package.files.exists(`Hit Design/campaigns/${campaignId}/${CampaignJsonName}`))
+    if (!await _package.files.exists(`${this.app.appName}/campaigns/${campaignId}/${CampaignJsonName}`))
       return;
     const campaign: HitDesignCampaign =
-      JSON.parse(await _package.files.readAsText(`Hit Design/campaigns/${campaignId}/${CampaignJsonName}`));
+      JSON.parse(await _package.files.readAsText(`${this.app.appName}/campaigns/${campaignId}/${CampaignJsonName}`));
     if (campaign) {
       // in case if the link was opened and user has no permissions to view the campaign
       if (campaign.authorUserId && campaign.permissions &&
@@ -157,8 +163,8 @@ export class HitDesignInfoView extends HitBaseView<HitDesignTemplate, HitDesignA
       this.app.campaign = campaign;
     }
     // Load the template and modify it
-    const template: HitDesignTemplate = campaign.template ?? JSON.parse(
-      await _package.files.readAsText(`Hit Design/templates/${campaign.templateName}.json`),
+    const template: T = campaign.template ?? JSON.parse(
+      await _package.files.readAsText(`${this.app.appName}/templates/${campaign.templateName}.json`),
     );
     // modify the template with path to the campaign's precalculated table
     await this.app.setTemplate(template, campaignId!);
@@ -171,14 +177,14 @@ export class HitDesignInfoView extends HitBaseView<HitDesignTemplate, HitDesignA
   }
 
   private async getCampaignsTable() {
-    const campaignNamesMap = await loadCampaigns('Hit Design', this.deletedCampaigns);
+    const campaignNamesMap = await loadCampaigns(this.app.appName, this.deletedCampaigns);
 
     const deleteAndShareCampaignIcons = (info: HitDesignCampaign) => {
       const deleteIcon = ui.icons.delete(async () => {
         ui.dialog('Delete campaign')
           .add(ui.divText(`Are you sure you want to delete campaign ${info.name}?`))
           .onOK(async () => {
-            await this.deleteCampaign('Hit Design', info.name);
+            await this.deleteCampaign(this.app.appName, info.name);
             this.deletedCampaigns.push(info.name);
             await this.init();
           })
@@ -190,7 +196,7 @@ export class HitDesignInfoView extends HitBaseView<HitDesignTemplate, HitDesignA
             info.permissions = res;
             info.authorUserId ??= grok.shell.user.id;
             await _package.files.writeAsText(
-              `Hit Design/campaigns/${info.name}/${CampaignJsonName}`, JSON.stringify(info));
+              `${this.app.appName}/campaigns/${info.name}/${CampaignJsonName}`, JSON.stringify(info));
             grok.shell.info('Permissions updated for campaign ' + info.name);
           } catch (e) {
             grok.shell.error('Failed to update permissions for campaign ' + info.name);
@@ -227,7 +233,7 @@ export class HitDesignInfoView extends HitBaseView<HitDesignTemplate, HitDesignA
     const campaign = await this.checkCampaign(campaignName);
     this.app.campaign = campaign;
   }
-  private async getNewCampaignAccordeon(template: HitDesignTemplate) {
+  async getNewCampaignAccordeon(template: T) {
     const {root, promise, cancelPromise} = newHitDesignCampaignAccordeon(template);
     promise.then(async (camp) => {
       this.app.dataFrame = camp.df;
@@ -244,7 +250,7 @@ export class HitDesignInfoView extends HitBaseView<HitDesignTemplate, HitDesignA
     return root;
   }
 
-  private async createNewTemplate(preset?: HitDesignTemplate) {
+  private async createNewTemplate(preset?: T) {
     ui.setUpdateIndicator(this.root, true);
     try {
       const newTemplateAccordeon = await newHitDesignTemplateAccordeon(this.app, preset);
@@ -259,13 +265,13 @@ export class HitDesignInfoView extends HitBaseView<HitDesignTemplate, HitDesignA
       newView.parentCall = this.app.parentCall;
       grok.shell.addView(newView);
       newView.path = new URL(this.app.baseUrl).pathname + '/new-template';
-      const {sub} = addBreadCrumbsToRibbons(newView, 'Hit Design', i18n.createNewTemplate, async () => {
+      const {sub} = addBreadCrumbsToRibbons(newView, this.app.appName, i18n.createNewTemplate, async () => {
         grok.shell.v = curView;
         newView.close();
       });
       //containerDiv.appendChild(newTemplateAccordeon.root);
       newTemplateAccordeon.template.then(async (t) => {
-        await this.init(t);
+        await this.init(t as any);
         newView.close();
         popRibbonPannels(newView);
         grok.shell.v = curView;

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

@@ -23,6 +23,12 @@ export function getTilesViewDialog(app: HitDesignApp, getTableView: () => DG.Tab
       sketchState.elementStates = sketchState.elementStates.filter((elementState: any) =>
         elementState?.viewerSettings?.column && app.dataFrame!.col(elementState.viewerSettings.column),
       );
+      // similarly, because the table name can be duplicated or changed,
+      // we need to make sure that table name in all viewer settings corresponds to actual table name
+      sketchState.elementStates.forEach((elState: any) => {
+        if (elState?.viewerSettings?.table)
+          elState.viewerSettings.table = app.dataFrame!.name;
+      });
     }
   }
 

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

@@ -40,7 +40,7 @@ export class HitTriageApp extends HitAppBase<HitTriageTemplate> {
   private _pickViewPromise?: Promise<void> | null = null;
 
   constructor(c: DG.FuncCall) {
-    super(c);
+    super(c, 'Hit Triage');
     this._infoView = new InfoView(this);
     this.multiView = new DG.MultiView({viewFactories: {[this._infoView.name]: () => this._infoView}});
     this.multiView.tabs.onTabChanged.subscribe((_) => {

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

@@ -0,0 +1,221 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+import {PeptiHitTemplate} from './types';
+import {PeptiHitHelmColName, TileCategoriesColName, ViDColName} from './consts';
+import {getNewVid} from './utils/calculate-single-cell';
+import '../../css/hit-triage.css';
+import {_package} from '../package';
+import {Subscription} from 'rxjs';
+import {filter} from 'rxjs/operators';
+import {HitDesignApp} from './hit-design-app';
+import {PeptiHitInfoView} from './pepti-hits-views/info-view';
+
+export class PeptiHitApp extends HitDesignApp<PeptiHitTemplate> {
+  _helmColName: string = PeptiHitHelmColName;
+  constructor(c: DG.FuncCall) {
+    super(c, 'PeptiHit', (app) => new PeptiHitInfoView(app as PeptiHitApp));
+  }
+
+  public async setTemplate(template: PeptiHitTemplate, campaignId?: string): Promise<void> {
+    await super.setTemplate(template, campaignId);
+    this._helmColName = this.dataFrame!.columns.bySemType(DG.SEMTYPE.MACROMOLECULE)?.name ?? PeptiHitHelmColName;
+  }
+
+  get helmColName(): string {
+    return this._helmColName ??
+        this.dataFrame!.columns.bySemType(DG.SEMTYPE.MACROMOLECULE)?.name;
+  }
+
+  async performSingleCellCalculations(cellIndex: number, cellValue?: string) {
+    try {
+      if (!cellValue)
+        throw new Error('No cell value provided');
+      const col = DG.Column.fromStrings(this.helmColName, [cellValue]);
+      const table = DG.DataFrame.fromColumns([col]);
+      col.semType = DG.SEMTYPE.MACROMOLECULE;
+      col.setTag('units', 'helm');
+      col.setTag('.alphabetIsMultichar', 'true');
+      await grok.functions.call('Bio:toAtomicLevel', {table: table, seqCol: col, nonlinear: true});
+      const molCol = table.columns.names().find((c) => c.toLowerCase() !== this.helmColName.toLowerCase());
+      const mol = molCol ? table.col(molCol)?.get(0) : null;
+      if (!mol)
+        throw new Error('Failed to convert sequence to atomic level');
+      this.dataFrame!.set(this.molColName, cellIndex, mol);
+      await super.performSingleCellCalculations(cellIndex, mol);
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  protected getDesignView(): DG.TableView {
+    const subs: Subscription[] = [];
+    const isNew = this.dataFrame!.col(this.helmColName)?.toList().every((m) => !m && m === '');
+    const helmCol = this.dataFrame!.col(this.helmColName);
+    if (!helmCol)
+      throw new Error('No helm column found');
+    helmCol.semType = DG.SEMTYPE.MACROMOLECULE;
+    helmCol.setTag('units', 'helm');
+    helmCol.setTag('.alphabetIsMultichar', 'true');
+    helmCol.setTag('cell.renderer', 'helm');
+
+    const view = grok.shell.addTableView(this.dataFrame!);
+    this._designViewName = this.campaign?.name ?? this._designViewName;
+    view.name = this._designViewName;
+    view._onAdded();
+    const layoutViewState = this._campaign?.layout ?? this.template?.layoutViewState;
+    if (layoutViewState) {
+      try {
+        const layout = DG.ViewLayout.fromViewState(layoutViewState);
+        view.loadLayout(layout);
+      } catch (e) {
+        grok.shell.error('Failed to apply layout. Falling back to default layout.');
+        console.error(e);
+      }
+    }
+
+    if (isNew)
+      grok.functions.call('Helm:editMoleculeCell', {cell: view.grid.cell(this.helmColName, 0)});
+
+    subs.push(this.dataFrame!.onRowsAdded.pipe(filter(() => !this.isJoining))
+      .subscribe(() => { // TODO, insertion of rows in the middle
+        try {
+          if (this.template!.stages?.length > 0) {
+            for (let i = 0; i < this.dataFrame!.rowCount; i++) {
+              const colVal = this.dataFrame!.col(TileCategoriesColName)!.get(i);
+              if (!colVal || colVal === '' || this.dataFrame!.col(TileCategoriesColName)?.isNone(i))
+                this.dataFrame!.set(TileCategoriesColName, i, this.template!.stages[0]);
+            }
+          }
+          let lastAddedCell: DG.GridCell | null = null;
+          for (let i = 0; i < this.dataFrame!.rowCount; i++) {
+            const cell = view.grid.cell(this.helmColName, i);
+            if (!cell)
+              continue;
+            if (cell.cell.value === '' || cell.cell.value === null)
+              lastAddedCell = cell;
+          }
+          if (lastAddedCell)
+            grok.functions.call('Helm:editMoleculeCell', {cell: lastAddedCell});
+        } catch (e) {
+          console.error(e);
+        }
+      }));
+
+    subs.push(grok.events.onContextMenu.subscribe((args) => {
+      try {
+        const viewer: DG.Viewer = args?.args?.context;
+        if (!viewer)
+          return;
+        if (viewer?.type !== DG.VIEWER.GRID)
+          return;
+        if (!viewer.tableView || viewer.tableView.id !== view.id)
+          return;
+        if (args?.args?.item?.tableColumn?.name !== this.helmColName || !args?.args?.item?.isTableCell)
+          return;
+        const menu: DG.Menu = args?.args?.menu;
+        if (!menu)
+          return;
+        menu.item('Add new row', () => {
+              this.dataFrame!.rows.addNew(null, true);
+        });
+        menu.item('Duplicate Sequence', () => {
+          try {
+            const row = this.dataFrame!.rows.addNew(null, true);
+            const cell = row.get(this.helmColName);
+            if (cell != null && row.idx > -1)
+              this.dataFrame!.cell(row.idx, this.helmColName).value = args?.args?.item?.cell?.value ?? '';
+          } catch (e) {
+            console.error(e);
+          }
+        });
+
+        const cellIndex = args?.args?.item?.tableRowIndex;
+        const cellValue = args?.args?.item?.cell?.value;
+        if (cellValue && (cellIndex ?? -1) > -1) {
+          menu.item('Re-Run Calculations', async () => {
+            try {
+              await this.performSingleCellCalculations(cellIndex, cellValue);
+            } catch (e) {
+              console.error(e);
+            }
+          });
+        }
+      } catch (e: any) {
+        grok.log.error(e);
+      }
+    }));
+
+    if (!view?.grid) {
+      grok.shell.error('Applied layout created view without grid. Resetting layout.');
+      view.resetLayout();
+    }
+
+    view?.grid && subs.push(view.grid.onCellValueEdited.subscribe(async (gc) => {
+      try {
+        if (gc.tableColumn?.name === TileCategoriesColName) {
+          await this.saveCampaign(undefined, false);
+          return;
+        }
+        if (gc.tableColumn?.name !== this.helmColName)
+          return;
+        const newValue = gc.cell.value;
+        const newValueIdx = gc.tableRowIndex!;
+        let newVid = this.dataFrame!.col(ViDColName)?.get(newValueIdx);
+        let foundMatch = false;
+        // try to find existing sequence
+        if (newValue) {
+          try {
+            const canonicals = gc.tableColumn.toList();
+            const canonicalNewValue = newValue;
+            if (canonicals?.length === this.dataFrame!.rowCount) {
+              for (let i = 0; i < canonicals.length; i++) {
+                if (canonicals[i] === canonicalNewValue &&
+                        i !== newValueIdx && this.dataFrame!.col(ViDColName)?.get(i)) {
+                  newVid = this.dataFrame!.col(ViDColName)?.get(i);
+                  foundMatch = true;
+                  break;
+                }
+              }
+            }
+          } catch (e) {
+            console.error(e);
+          }
+        }
+        // if the vid was duplicated, generate a new one
+        if (this.duplicateVidCache && !foundMatch &&
+              this.duplicateVidCache.valueCounts[this.duplicateVidCache.indexes[newValueIdx]] > 1)
+          newVid = null;
+
+        if (!newVid || newVid === '')
+          newVid = getNewVid(this.dataFrame!.col(ViDColName)!);
+
+        this.dataFrame!.col(ViDColName)!.set(newValueIdx, newVid, false);
+
+        this.performSingleCellCalculations(newValueIdx, newValue);
+      } catch (e) {
+        console.error(e);
+      }
+    }));
+
+    view?.grid && subs.push(view.grid.onCellRender.subscribe((args) => {
+      try {
+        // color duplicate vid values
+        const cell = args.cell;
+        if (!cell || !cell.isTableCell || !cell.tableColumn || !this.duplicateVidCache ||
+              cell.tableColumn.name !== ViDColName || (cell.tableRowIndex ?? -1) < 0)
+          return;
+
+        if (this.duplicateVidCache.valueCounts[this.duplicateVidCache.indexes[cell.tableRowIndex!]] > 1) {
+          args.cell.style.backColor =
+                DG.Color.setAlpha(DG.Color.getCategoricalColor(this.duplicateVidCache.indexes[cell.tableRowIndex!])
+                  , 150);
+        }
+      } catch (e) {}
+    }));
+
+    this.initDesignViewRibbons(view, subs);
+    view.parentCall = this.parentCall;
+    return view;
+  }
+}

package/src/app/pepti-hits-views/info-view.ts

@@ -0,0 +1,49 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+import {u2} from '@datagrok-libraries/utils/src/u2';
+import {_package} from '../../package';
+import {PeptiHitTemplate} from '../types';
+import {newHitDesignCampaignAccordeon} from '../accordeons/new-hit-design-campaign-accordeon';
+import {HitDesignInfoView} from '../hit-design-views/info-view';
+import {PeptiHitApp} from '../pepti-hit-app';
+
+export class PeptiHitInfoView extends HitDesignInfoView<PeptiHitTemplate, PeptiHitApp> {
+  constructor(app: PeptiHitApp) {
+    super(app);
+    this.name = 'PeptiHit';
+    grok.shell.windows.showHelp = true;
+    grok.shell.windows.help.showHelp(_package.webRoot + 'README_HD.md');
+  }
+
+  override async getNewCampaignAccordeon(template: PeptiHitTemplate) {
+    const {root, promise, cancelPromise} = newHitDesignCampaignAccordeon(template, true);
+    promise.then(async (camp) => {
+      this.app.dataFrame = camp.df;
+      await this.app.setTemplate(template);
+      this.app.campaignProps = camp.campaignProps;
+      await this.app.saveCampaign(undefined, false);
+      if (template.layoutViewState && this.app.campaign)
+        this.app.campaign.layout = template.layoutViewState;
+    });
+
+    cancelPromise.then(() => {
+      this.init();
+    });
+    return root;
+  }
+
+  override getAppHeader() {
+    return u2.appHeader({
+      iconPath: _package.webRoot + '/images/icons/pepti-hit-icon.png',
+      learnMoreUrl: 'https://github.com/datagrok-ai/public/blob/master/packages/HitTriage/README_HD.md',
+      description:
+      '-  Configure your own workflow using the template editor\n' +
+      '-  Sketch Helm sequences in the spreadsheet\n' +
+      '-  Annotate and share ideas with the team\n' +
+      '-  Convert to molecular form and calculate different properties\n' +
+      '-  Save campaigns and continue from where you left off\n' +
+      '-  Submit final selection to the function of your choice',
+    });
+  }
+}

package/src/app/types.ts

@@ -1,10 +1,11 @@
 import * as DG from 'datagrok-api/dg';
 
-export type AppName = 'Hit Triage' | 'Hit Design';
+export type AppName = 'Hit Triage' | 'Hit Design' | 'PeptiHit';
 
 export type CampaignsType = {
     'Hit Triage': HitTriageCampaign,
     'Hit Design': HitDesignCampaign,
+    'PeptiHit': HitDesignCampaign,
 }
 
 export type IDescriptorTree = {
@@ -145,6 +146,9 @@ export type HitDesignTemplate = Omit<HitTriageTemplate, 'dataSourceType' | 'quer
 
 export type HitDesignCampaign = Omit<HitTriageCampaign, 'filters' | 'ingest'> & {tilesViewerFormSketch?: string};
 
+// todo: probably add some more stuff
+export type PeptiHitTemplate = HitDesignTemplate & {toAtomiLevelProps?: {[key: string]: any}}
+
 export type ComputeFunctions = {
     functions: DG.Func[],
     scripts: DG.Script[],

package/src/package.ts

@@ -7,30 +7,12 @@ import {HitDesignApp} from './app/hit-design-app';
 import {GasteigerPngRenderer} from './pngRenderers';
 import {loadCampaigns} from './app/utils';
 import {AppName} from './app';
+import {PeptiHitApp} from './app/pepti-hit-app';
+import {PeptiHitHelmColName} from './app/consts';
 // import {loadCampaigns} from './app/utils';
 
 export const _package = new DG.Package();
 
-//input: dynamic treeNode
-//input: view browseView
-export async function hitTriageAppTreeBrowser(treeNode: DG.TreeViewGroup, browseView: any) {// TODO: DG.BrowseView
-  await hitAppTB(treeNode, browseView, 'Hit Triage');
-}
-
-//tags: app
-//name: Hit Triage
-//output: view v
-export async function hitTriageApp(): Promise<DG.ViewBase> {
-  const c = grok.functions.getCurrentCall();
-  return new HitTriageApp(c).multiView;
-}
-
-//input: dynamic treeNode
-//input: view browseView
-export async function hitDesignAppTreeBrowser(treeNode: DG.TreeViewGroup, browseView: any) {// TODO: DG.BrowseView
-  await hitAppTB(treeNode, browseView, 'Hit Design');
-}
-
 async function hitAppTB(treeNode: DG.TreeViewGroup, browseView: any, name: AppName) {// TODO: DG.BrowseView
   const camps = await loadCampaigns(name, []);
 
@@ -38,7 +20,8 @@ async function hitAppTB(treeNode: DG.TreeViewGroup, browseView: any, name: AppNa
     const savePath = 'ingest' in camp ? camp.ingest.query : camp.savePath;
     if (!savePath || await grok.dapi.files.exists(savePath) === false)
       continue;
-    treeNode.item(camp.name).onSelected.subscribe(async (_) => {
+    const node = treeNode.item(camp.name);
+    node.onSelected.subscribe(async (_) => {
       try {
         const df = await grok.dapi.files.readCsv(savePath);
         if (!df)
@@ -47,8 +30,14 @@ async function hitAppTB(treeNode: DG.TreeViewGroup, browseView: any, name: AppNa
         if (semtypeInfo) {
           for (const [colName, semType] of Object.entries(semtypeInfo)) {
             const col = df.columns.byName(colName);
-            if (col)
+            if (col) {
               col.semType = semType;
+              if (semType === DG.SEMTYPE.MACROMOLECULE && colName === PeptiHitHelmColName) {
+                col.setTag('units', 'helm');
+                col.setTag('.alphabetIsMultichar', 'true');
+                col.setTag('cell.renderer', 'helm');
+              }
+            }
           }
         }
         const tv = DG.TableView.create(df, false);
@@ -63,6 +52,32 @@ async function hitAppTB(treeNode: DG.TreeViewGroup, browseView: any, name: AppNa
   }
 }
 
+//input: dynamic treeNode
+//input: view browseView
+export async function hitTriageAppTreeBrowser(treeNode: DG.TreeViewGroup, browseView: any) {// TODO: DG.BrowseView
+  await hitAppTB(treeNode, browseView, 'Hit Triage');
+}
+
+//input: dynamic treeNode
+//input: view browseView
+export async function hitDesignAppTreeBrowser(treeNode: DG.TreeViewGroup, browseView: any) {// TODO: DG.BrowseView
+  await hitAppTB(treeNode, browseView, 'Hit Design');
+}
+
+//input: dynamic treeNode
+//input: view browseView
+export async function peptiHitAppTreeBrowser(treeNode: DG.TreeViewGroup, browseView: any) {// TODO: DG.BrowseView
+  await hitAppTB(treeNode, browseView, 'PeptiHit');
+}
+
+//tags: app
+//name: Hit Triage
+//output: view v
+export async function hitTriageApp(): Promise<DG.ViewBase> {
+  const c = grok.functions.getCurrentCall();
+  return new HitTriageApp(c).multiView;
+}
+
 //tags: app
 //name: Hit Design
 //meta.icon: images/icons/hit-design-icon.png
@@ -72,6 +87,16 @@ export async function hitDesignApp(): Promise<DG.ViewBase> {
   return new HitDesignApp(c).multiView;
 }
 
+//tags: app
+//name: PeptiHit
+//meta.icon: images/icons/pepti-hit-icon.png
+//output: view v
+export async function peptiHitApp(): Promise<DG.ViewBase> {
+  const c = grok.functions.getCurrentCall();
+  await grok.functions.call('Bio:initBio', {});
+  return new PeptiHitApp(c).multiView;
+}
+
 //name: Demo Molecules 100
 //tags: HitTriageDataSource
 //output: dataframe result