@datagrok/hit-triage 1.3.2 → 1.3.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/hit-triage",
   "friendlyName": "HitTriage",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "author": {
     "name": "Davit Rizhinashvili",
     "email": "drizhinashvili@datagrok.ai"

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

@@ -227,5 +227,6 @@ export function getTileCategoryEditor(preset?: string[]) {
   return {
     getFields: getFieldParams,
     fieldsDiv: itemsGrid.root,
+    itemsGrid,
   };
 }

package/src/app/consts.ts

@@ -17,17 +17,17 @@ export const HTScriptPrefix = 'HTScript';
 export const HTQueryPrefix = 'HTQuery';
 export const ComputeQueryMolColName = 'molecules';
 export const i18n = {
-  startNewCampaign: 'New campaign',
-  createNewCampaign: 'New campaign',
+  startNewCampaign: 'New Campaign',
+  createNewCampaign: 'New Campaign',
   dataSourceFunction: 'Source',
-  createNewTemplate: 'New template',
+  createNewTemplate: 'New Template',
   StartCampaign: 'Start',
   createTemplate: 'Create',
   createCampaign: 'Create',
   download: 'Download',
   cancel: 'Cancel',
-  continueCampaigns: 'Continue a campaign',
-  createNewCampaignHeader: 'New campaign',
+  continueCampaigns: 'Continue Campaign',
+  createNewCampaignHeader: 'New Campaign',
   selectTemplate: 'Template',
 } as const;
 
@@ -36,3 +36,11 @@ export const funcTypeNames = {
   function: 'function-package',
   query: 'data-query',
 } as const;
+
+export const HDCampaignsGroupingLSKey = 'HDCampaignsGrouping';
+
+export enum CampaignGroupingType {
+  None = 'None',
+  Template = 'Template',
+  Status = 'Status',
+}

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

@@ -1,7 +1,8 @@
+/* eslint-disable max-len */
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
-import {AppName, HitDesignCampaign, HitDesignTemplate, HitTriageCampaignStatus, IFunctionArgs} from './types';
+import {AppName, HitDesignCampaign, HitDesignTemplate, IFunctionArgs} from './types';
 import {HitDesignInfoView} from './hit-design-views/info-view';
 import {CampaignIdKey, CampaignJsonName, CampaignTableName,
   HTQueryPrefix, HTScriptPrefix, HitDesignCampaignIdKey,
@@ -35,6 +36,7 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
   protected currentDesignViewId?: string;
   public mainView: DG.ViewBase;
   protected get version() {return this._campaign?.version ?? 0;};
+  public existingStatuses: string[] = [];
   constructor(c: DG.FuncCall, an: AppName = 'Hit Design',
     infoViewConstructor: (app: HitDesignApp) => HitDesignInfoView = (app) => new HitDesignInfoView(app)) {
     super(c, an);
@@ -72,6 +74,48 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
     }));
   }
 
+  public get stages() {
+    return this.campaign?.template?.stages ?? this.template?.stages ?? [];
+  }
+
+  public async setStages(st: string[]) {
+    if (!this.campaign || !this.campaign.template || !this.template) {
+      grok.shell.error('Campaign or template is not set');
+      return;
+    }
+    if (!st?.length) {
+      grok.shell.error('Removing all stages is not allowed');
+      return;
+    }
+    const stageCol = this.dataFrame?.col(TileCategoriesColName);
+    if (!stageCol) {
+      grok.shell.error('No stage column found');
+      return;
+    }
+    const removedStages: string[] = [];
+    //make sure there is no duplication
+    const stageSet = new Set(st);
+    const uniqueStages = [...stageSet];
+    const dfLen = this.dataFrame!.rowCount;
+    const stageCats = stageCol.categories;
+    const stageIndexes = stageCol.getRawData() as Int32Array;
+    for (let i = 0; i < dfLen; i++) {
+      const stage = stageCats[stageIndexes[i]];
+      if (!stageSet.has(stage)) {
+        stageCol.set(i, st[0], false);
+        removedStages.push(stage);
+      }
+    }
+
+    if (removedStages.length > 0)
+      grok.shell.warning(`Some stages were removed: (${removedStages.join(', ')}). Corresponding rows were set to stage "${st[0]}"`);
+
+
+    this.campaign.template.stages = uniqueStages;
+    this.template.stages = uniqueStages;
+    await this.saveCampaign(true);
+  }
+
   public async setTemplate(template: T, campaignId?: string) {
     if (!campaignId) {
       this._designView?.dataFrame && grok.shell.closeTable(this._designView.dataFrame);
@@ -183,7 +227,7 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
             this.dataFrame!.col(col.name)!.set(newValueIdx, col.get(0), false);
     }
           this.dataFrame!.fireValuesChanged();
-          this.saveCampaign(undefined, false);
+          this.saveCampaign(false);
   }
 
   protected initDesignViewRibbons(view: DG.TableView, subs: Subscription[]) {
@@ -275,7 +319,7 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
               this.dataFrame!.fireValuesChanged();
             } finally {
               ui.setUpdateIndicator(view.grid.root, false);
-              this.saveCampaign(undefined, false);
+              this.saveCampaign(false);
             }
           }, () => null, this.campaign?.template!, true);
         };
@@ -285,7 +329,7 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
         const permissionsButton = ui.iconFA('share', async () => {
           await (new PermissionsDialog(this.campaign?.permissions)).show((res) => {
             this.campaign!.permissions = res;
-            this.saveCampaign(undefined, true);
+            this.saveCampaign(true);
           });
         }, 'Edit campaign permissions');
         const tilesButton = ui.bigButton('Progress tracker', () => {
@@ -297,15 +341,21 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
           if (dialogContent) {
             const dlg = ui.dialog('Submit');
             dlg.add(dialogContent);
-            dlg.addButton('Save', ()=>{this.saveCampaign(); dlg.close();});
-            dlg.addButton('Submit', ()=>{this._submitView?.submit(); dlg.close();});
+            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();
           }
         });
         submitButton.classList.add('hit-design-submit-button');
         const ribbonButtons: HTMLElement[] = [submitButton];
-        if (this.template?.stages?.length ?? 0 > 0)
+        if (this.stages.length > 0)
           ribbonButtons.unshift(tilesButton);
+        // only initialize campaign template if its not exsitent yet
         if (this.campaign && this.template && !this.campaign.template)
           this.campaign.template = this.template;
 
@@ -358,11 +408,11 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
     subs.push(this.dataFrame!.onRowsAdded.pipe(filter(() => !this.isJoining))
       .subscribe(() => { // TODO, insertion of rows in the middle
         try {
-          if (this.template!.stages?.length > 0) {
+          if (this.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]);
+                this.dataFrame!.set(TileCategoriesColName, i, this.stages[0]);
             }
           }
           let lastAddedCell: DG.GridCell | null = null;
@@ -432,7 +482,7 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
     view?.grid && subs.push(view.grid.onCellValueEdited.subscribe(async (gc) => {
       try {
         if (gc.tableColumn?.name === TileCategoriesColName) {
-          await this.saveCampaign(undefined, false);
+          await this.saveCampaign(false);
           return;
         }
         if (gc.tableColumn?.name !== this.molColName)
@@ -566,7 +616,7 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
 
           if (this._campaign)
             this._campaign!.savePath = this._filePath;
-          await this.saveCampaign(undefined, true);
+          await this.saveCampaign(true);
           ui.empty(pathDiv);
           const folderPath = getFolderPath();
           link = ui.link(folderPath,
@@ -603,7 +653,7 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
     };
   }
 
-  async saveCampaign(status?: HitTriageCampaignStatus, notify = true): Promise<HitDesignCampaign> {
+  async saveCampaign(notify = true): Promise<HitDesignCampaign> {
     const campaignId = this.campaignId!;
     const templateName = this.template!.name;
     const enrichedDf = this.dataFrame!;
@@ -621,7 +671,7 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
     const campaign: HitDesignCampaign = {
       name: campaignName,
       templateName,
-      status: status ?? this.campaign?.status ?? 'In Progress',
+      status: this.campaign?.status ?? 'In Progress',
       createDate: this.campaign?.createDate ?? toFormatedDateString(new Date()),
       campaignFields: this.campaign?.campaignFields ?? this.campaignProps,
       columnSemTypes,

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

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
@@ -5,10 +6,13 @@ import {u2} from '@datagrok-libraries/utils/src/u2';
 import {HitDesignApp} from '../hit-design-app';
 import {_package} from '../../package';
 import $ from 'cash-dom';
-import {CampaignJsonName, HitDesignCampaignIdKey, i18n} from '../consts';
+import {CampaignGroupingType, CampaignJsonName, HitDesignCampaignIdKey, i18n} from '../consts';
 import {HitDesignCampaign, HitDesignTemplate} from '../types';
 import {addBreadCrumbsToRibbons, checkEditPermissions,
-  checkViewPermissions, loadCampaigns, modifyUrl, popRibbonPannels} from '../utils';
+  checkViewPermissions, getGroupedCampaigns, getSavedCampaignsGrouping,
+  loadCampaigns, modifyUrl, popRibbonPannels,
+  processGroupingTable,
+  setSavedCampaignsGrouping} from '../utils';
 import {newHitDesignCampaignAccordeon} from '../accordeons/new-hit-design-campaign-accordeon';
 import {newHitDesignTemplateAccordeon} from '../accordeons/new-hit-design-template-accordeon';
 import {HitBaseView} from '../base-view';
@@ -17,6 +21,7 @@ import {defaultPermissions, PermissionsDialog} from '../dialogs/permissions-dial
 export class HitDesignInfoView
   <T extends HitDesignTemplate = HitDesignTemplate, K extends HitDesignApp = HitDesignApp>
   extends HitBaseView<T, K> {
+  currentSorting: string = 'None';
   constructor(app: K) {
     super(app);
     this.name = 'Hit Design';
@@ -48,6 +53,7 @@ export class HitDesignInfoView
     ui.setUpdateIndicator(this.root, true);
     try {
       const continueCampaignsHeader = ui.h1(i18n.continueCampaigns);
+
       const createNewCampaignHeader = ui.h1(i18n.createNewCampaignHeader, {style: {marginLeft: '10px'}});
       const appHeader = this.getAppHeader();
 
@@ -56,10 +62,38 @@ export class HitDesignInfoView
       const contentDiv = ui.div([templatesDiv, campaignAccordionDiv], 'ui-form');
 
       const campaignsTable = await this.getCampaignsTable();
+      const tableRoot = ui.div([campaignsTable], {style: {position: 'relative'}});
+
+      const sortIcon = ui.iconFA('sort', () => {
+        const menu = DG.Menu.popup();
+        Object.values(CampaignGroupingType).forEach((i) => {
+          menu.item(i, async () => {
+            setSavedCampaignsGrouping(i as CampaignGroupingType);
+            ui.setUpdateIndicator(tableRoot, true);
+            try {
+              const t = await this.getCampaignsTable();
+              ui.setUpdateIndicator(tableRoot, false);
+              ui.empty(tableRoot);
+              tableRoot.appendChild(t);
+            } catch (e) {
+              grok.shell.error('Failed to update campaigns table');
+              console.error(e);
+            } finally {
+              ui.setUpdateIndicator(tableRoot, false);
+            }
+          });
+          menu.show({element: sortingHeader, x: 100, y: sortingHeader.offsetTop + 30});
+        });
+      });
+      sortIcon.style.marginBottom = '12px';
+      sortIcon.style.marginLeft = '5px';
+      sortIcon.style.fontSize = '15px';
+      ui.tooltip.bind(sortIcon, () => `Group Campaigns. Current: ${this.currentSorting}`);
+      const sortingHeader = ui.divH([continueCampaignsHeader, sortIcon], {style: {alignItems: 'center'}});
       $(this.root).empty();
       this.root.appendChild(ui.div([
-        ui.divV([appHeader, continueCampaignsHeader], {style: {marginLeft: '10px'}}),
-        campaignsTable,
+        ui.divV([appHeader, sortingHeader], {style: {marginLeft: '10px'}}),
+        tableRoot,
         createNewCampaignHeader,
         contentDiv,
       ]));
@@ -178,7 +212,10 @@ export class HitDesignInfoView
 
   private async getCampaignsTable() {
     const campaignNamesMap = await loadCampaigns(this.app.appName, this.deletedCampaigns);
-
+    const grouppingMode = getSavedCampaignsGrouping();
+    const grouppedCampaigns = getGroupedCampaigns<HitDesignCampaign>(Object.values(campaignNamesMap), grouppingMode);
+    this.currentSorting = grouppingMode;
+    this.app.existingStatuses = Array.from(new Set(Object.values(campaignNamesMap).map((c) => c.status).filter((s) => !!s)));
     const deleteAndShareCampaignIcons = (info: HitDesignCampaign) => {
       const deleteIcon = ui.icons.delete(async () => {
         ui.dialog('Delete campaign')
@@ -226,6 +263,7 @@ export class HitDesignInfoView
     ['Name', 'Created', 'Molecules', 'Status', '']);
     table.style.color = 'var(--grey-5)';
     table.style.marginLeft = '24px';
+    processGroupingTable(table, grouppedCampaigns);
     return table;
   }
 
@@ -239,7 +277,7 @@ export class HitDesignInfoView
       this.app.dataFrame = camp.df;
       await this.app.setTemplate(template);
       this.app.campaignProps = camp.campaignProps;
-      await this.app.saveCampaign(undefined, false);
+      await this.app.saveCampaign(false);
       if (template.layoutViewState && this.app.campaign)
         this.app.campaign.layout = template.layoutViewState;
     });

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

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import * as ui from 'datagrok-api/ui';
 import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
@@ -7,19 +8,54 @@ import {HitDesignTemplate} from '../types';
 import {HitBaseView} from '../base-view';
 
 export class HitDesignSubmitView extends HitBaseView<HitDesignTemplate, HitDesignApp> {
+  private statusInput: DG.InputBase<string | undefined>;
+  private statusSuggestionsMenu: DG.Menu;
+  content: HTMLDivElement;
   constructor(app: HitDesignApp) {
     super(app);
     this.name = 'Submit';
+    this.statusInput = ui.input.string('Status', {value: this.app.campaign?.status, nullable: false});
+    this.statusSuggestionsMenu = DG.Menu.popup();
+    this.statusInput.root.style.marginLeft = '12px';
+    this.content = ui.div();
+
+    this.statusInput.onChanged.subscribe(() => {
+      this.statusSuggestionsMenu.clear();
+      const status = (this.statusInput.value ?? '').toLowerCase();
+      // eslint-disable-next-line max-len
+      const similarStatuses = this.app.existingStatuses.filter((s) => s?.toLowerCase()?.includes(status) && s?.toLowerCase() !== status).filter((_, i) => i < 5);
+      if (similarStatuses.length) {
+        similarStatuses.forEach((s) => {
+          this.statusSuggestionsMenu.item(s, () => {
+            this.statusInput.value = s;
+            this.statusSuggestionsMenu.root.remove();
+            this.statusInput.root.focus();
+          });
+        });
+        if (this.content.parentElement?.parentElement) {
+          const xOffset = this.statusInput.root.offsetLeft + (this.statusInput.input?.offsetLeft ?? 0);
+          const yOffset = this.statusInput.root.offsetTop + this.statusInput.root.offsetHeight + this.content.parentElement.offsetTop;
+          this.statusSuggestionsMenu.show({element: this.content.parentElement.parentElement!, x: xOffset, y: yOffset});
+        }
+      } else
+        this.statusSuggestionsMenu.root.remove();
+    });
+  }
+
+  public getStatus() {
+    return this.statusInput.value ?? this.app.campaign?.status ?? 'No Status';
   }
 
   render(): HTMLDivElement {
-    ui.empty(this.root);
+    this.statusInput.value = this.app.campaign?.status ?? '';
+    ui.empty(this.content);
 
-    const content = ui.divV([
+    this.content = ui.divV([
       ui.h1('Summary'),
       ui.div([ui.tableFromMap(this.app.getSummary())]),
+      this.statusInput.root,
     ]);
-    return content;
+    return this.content;
   }
 
   onActivated(): void {
@@ -37,8 +73,8 @@ export class HitDesignSubmitView extends HitBaseView<HitDesignTemplate, HitDesig
     }
     const filteredDf = DG.DataFrame.fromCsv(this.app.dataFrame!.toCsv({filteredRowsOnly: true}));
     await submitFn.apply({df: filteredDf, molecules: this.app.molColName});
-    this.app.campaign && (this.app.campaign.status = 'Submitted');
-    this.app.saveCampaign('Submitted');
+    this.app.campaign!.status = this.getStatus();
+    this.app.saveCampaign();
     grok.shell.info('Submitted successfully.');
   }
 }

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

@@ -5,6 +5,7 @@ import {HitDesignApp} from '../hit-design-app';
 import {_package} from '../../package';
 import {TileCategoriesColName} from '../consts';
 import './utils.css';
+import {getTileCategoryEditor} from '../accordeons/new-hit-design-template-accordeon';
 
 export function getTilesViewDialog(app: HitDesignApp, getTableView: () => DG.TableView | null) {
   const tilesViewerSketchStateString = app.campaign?.tilesViewerFormSketch;
@@ -32,7 +33,8 @@ export function getTilesViewDialog(app: HitDesignApp, getTableView: () => DG.Tab
     }
   }
 
-  const tileOpts = {lanesColumnName: TileCategoriesColName, lanes: app.template?.stages ?? [],
+  const tileOpts = {lanesColumnName: TileCategoriesColName,
+    lanes: app.stages,
     ...((sketchState?.elementStates?.length ?? 0) > 0 ? {sketchState} : {})};
 
   const tv = getTableView();
@@ -59,15 +61,50 @@ export function getTilesViewDialog(app: HitDesignApp, getTableView: () => DG.Tab
       v.detach();
     }
     v = tv.addViewer(DG.VIEWER.TILE_VIEWER,
-      {lanesColumnName: TileCategoriesColName, lanes: app.template?.stages ?? []});
+      {lanesColumnName: TileCategoriesColName, lanes: app.stages});
   }
 
   if (!v) {
     grok.shell.error('Failed to create tiles viewer. check the console for more details.');
     return;
   }
-  modal.add(v.root);
 
+  let stageEditorDialog: DG.Dialog | null = null;
+  const closeViewer = () => {// it can be already closed by the time we get here
+    try {
+      v.detach();
+      v.close();
+    } catch (e) {
+    }
+  };
+  modal.add(v.root);
+  modal.addButton('Modify Stages', () => {
+    stageEditorDialog?.close();
+    const stageEditor = getTileCategoryEditor(app.stages);
+    stageEditorDialog = ui.dialog('Modify Stages')
+      .add(stageEditor.fieldsDiv)
+      .onOK(async () => {
+        closeViewer(); // so that its not included in the layout.
+        ui.setUpdateIndicator(modal.root, true);
+        try {
+          await app.setStages(stageEditor.getFields());
+          ui.setUpdateIndicator(modal.root, false);
+          modal.close();
+          await new Promise<void>((r) => setTimeout(() => {
+            r();
+            getTilesViewDialog(app, getTableView);
+          }, 100));
+        } catch (e) {
+          grok.shell.error('Failed to update stages. check the console for more details.');
+          console.error('Failed to update stages', e);
+        } finally {
+          if (modal?.root && document.contains(modal.root))
+            modal.close();
+        }
+      })
+      .show();
+    stageEditorDialog.root.classList.add('hit-design-stage-editing-dialog');
+  }, 0);
   // from this modal, only way to go to another view is through edit form.
   // when this happens, we should not destroy the viewer,
   //but just hide it so that when we come back, we can show it again.
@@ -85,6 +122,7 @@ export function getTilesViewDialog(app: HitDesignApp, getTableView: () => DG.Tab
   const closeSub = modal.onClose.subscribe(() => {
     closeSub.unsubscribe();
     viewChangeSub.unsubscribe();
+    stageEditorDialog?.close();
     // save the sketch state
     try {
       const sketchState = v.props.sketchState;
@@ -97,13 +135,13 @@ export function getTilesViewDialog(app: HitDesignApp, getTableView: () => DG.Tab
       grok.shell.error('Failed to save sketch state. check the console for more details.');
       console.error('Failed to save sketch state', e);
     }
-    v.detach();
-    v.close();
+    closeViewer();
   });
 
   modal.showModal(true);
 
-
+  modal.getButton('CANCEL')?.remove();
+  modal.onOK(() => {});
   // remove the modal background
   document.querySelector('.d4-modal-background')?.remove();
 }

package/src/app/hit-design-views/utils.css

@@ -1,3 +1,11 @@
 img[alt='hitDesignReadmeImg'] {
     max-width: 100%;
+}
+
+.hit-design-stage-editing-dialog {
+    z-index: 10000 !important;
+}
+
+.hit-design-groupped-campaigns-table .d4-accordion-pane-content.expanded {
+    margin: 0 !important;
 }

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

@@ -80,11 +80,11 @@ export class PeptiHitApp extends HitDesignApp<PeptiHitTemplate> {
     subs.push(this.dataFrame!.onRowsAdded.pipe(filter(() => !this.isJoining))
       .subscribe(() => { // TODO, insertion of rows in the middle
         try {
-          if (this.template!.stages?.length > 0) {
+          if (this.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]);
+                this.dataFrame!.set(TileCategoriesColName, i, this.stages[0]);
             }
           }
           let lastAddedCell: DG.GridCell | null = null;
@@ -154,7 +154,7 @@ export class PeptiHitApp extends HitDesignApp<PeptiHitTemplate> {
     view?.grid && subs.push(view.grid.onCellValueEdited.subscribe(async (gc) => {
       try {
         if (gc.tableColumn?.name === TileCategoriesColName) {
-          await this.saveCampaign(undefined, false);
+          await this.saveCampaign(false);
           return;
         }
         if (gc.tableColumn?.name !== this.helmColName)

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

@@ -22,7 +22,7 @@ export class PeptiHitInfoView extends HitDesignInfoView<PeptiHitTemplate, PeptiH
       this.app.dataFrame = camp.df;
       await this.app.setTemplate(template);
       this.app.campaignProps = camp.campaignProps;
-      await this.app.saveCampaign(undefined, false);
+      await this.app.saveCampaign(false);
       if (template.layoutViewState && this.app.campaign)
         this.app.campaign.layout = template.layoutViewState;
     });

package/src/app/types.ts

@@ -100,7 +100,7 @@ export type HitTriageTemplateSubmit = {
     package: string
 };
 
-export type HitTriageCampaignStatus = 'In Progress' | 'Submitted';
+export type HitTriageCampaignStatus = string;
 
 export type HitTriageCampaign = {
     name: string,

package/src/app/utils.ts

@@ -1,9 +1,10 @@
+/* eslint-disable max-len */
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 import {Subscription} from 'rxjs';
-import {CampaignJsonName, ComputeQueryMolColName} from './consts';
-import {AppName, CampaignsType, TriagePermissions} from './types';
+import {CampaignGroupingType, CampaignJsonName, ComputeQueryMolColName, HDCampaignsGroupingLSKey} from './consts';
+import {AppName, CampaignsType, HitDesignCampaign, HitTriageCampaign, TriagePermissions} from './types';
 import {_package} from '../package';
 
 export const toFormatedDateString = (d: Date): string => {
@@ -164,3 +165,82 @@ export async function checkEditPermissions(authorId: string, permissions: Triage
 export async function checkViewPermissions(authorId: string, permissions: TriagePermissions): Promise<boolean> {
   return checkPermissions(authorId, Array.from(new Set([...permissions.view, ...permissions.edit])));
 }
+
+export function getLocalStorageValue<T = string>(key: string): T | null {
+  return localStorage.getItem(key) as unknown as T;
+}
+
+export function setLocalStorageValue(key: string, value: string) {
+  localStorage.setItem(key, value as unknown as string);
+}
+
+export function getSavedCampaignsGrouping(): CampaignGroupingType {
+  return getLocalStorageValue<CampaignGroupingType>(HDCampaignsGroupingLSKey) ?? CampaignGroupingType.None;
+}
+
+export function setSavedCampaignsGrouping(value: CampaignGroupingType) {
+  setLocalStorageValue(HDCampaignsGroupingLSKey, value);
+}
+
+export const getGroupingKey = <T extends HitDesignCampaign | HitTriageCampaign = HitDesignCampaign>(grouping: CampaignGroupingType, campaign: T): string => {
+  switch (grouping) {
+  case CampaignGroupingType.Template:
+    return campaign.template?.key ?? campaign.templateName;
+  case CampaignGroupingType.Status:
+    return campaign.status;
+  default:
+    return '';
+  }
+};
+
+export function getGroupedCampaigns<T extends HitDesignCampaign | HitTriageCampaign = HitDesignCampaign>(campaigns: T[], grouping: CampaignGroupingType):
+  {[key: string]: T[]} {
+  if (grouping === CampaignGroupingType.None)
+    return {'': campaigns};
+  const groupedCampaigns: {[key: string]: T[]} = {};
+  for (const campaign of campaigns) {
+    const key = getGroupingKey(grouping, campaign);
+    if (!groupedCampaigns[key])
+      groupedCampaigns[key] = [];
+    groupedCampaigns[key].push(campaign);
+  }
+  return groupedCampaigns;
+}
+
+export function processGroupingTable<T extends HitDesignCampaign | HitTriageCampaign = HitDesignCampaign>(table: HTMLTableElement, groupedCampaigns: {[key: string]: T[]}, numCols = 6) {
+  table.classList.add('hit-design-groupped-campaigns-table');
+  const keys = Object.keys(groupedCampaigns);
+  if (keys.length < 2)
+    return table;
+  const body = table.getElementsByTagName('tbody')[0];
+  const rows = Array.from(table.getElementsByTagName('tr')).filter((row) => !row.classList.contains('header'));
+  let curRow = 0;
+
+  const setState = (expanded: boolean, start: number, end: number) => {
+    for (let i = start; i < end; i++)
+      rows[i]?.style && (rows[i].style.display = expanded ? 'table-row' : 'none');
+  };
+
+
+  for (const key of keys) {
+    const row = rows[curRow];
+    if (!row)
+      break;
+    const l = groupedCampaigns[key].length;
+    const startRow = curRow;
+    const endRow = curRow + l;
+    const acc = ui.accordion(`Hit-Design-campaigns-group-${key}`);
+    const pane = acc.addPane(key, () => {return ui.div();}, undefined, undefined, false);
+    pane.root.style.marginLeft = '-24px';
+    pane.root.onclick = () => {
+      setState(pane.expanded, startRow, endRow);
+    };
+    setState(pane.expanded, startRow, endRow);
+    const newRow = body.insertRow(0);
+    const newCell = newRow.insertCell(0);
+    newCell.appendChild(pane.root);
+    newCell.colSpan = numCols;
+    body.insertBefore(newRow, row);
+    curRow += l;
+  }
+}