@datagrok/hit-triage 1.3.3 → 1.3.4

package/package.json

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

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

@@ -2,7 +2,7 @@
 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,
@@ -36,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);
@@ -112,7 +113,7 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
 
     this.campaign.template.stages = uniqueStages;
     this.template.stages = uniqueStages;
-    await this.saveCampaign(undefined, true);
+    await this.saveCampaign(true);
   }
 
   public async setTemplate(template: T, campaignId?: string) {
@@ -226,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[]) {
@@ -318,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);
         };
@@ -328,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', () => {
@@ -340,8 +341,13 @@ 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();
           }
         });
@@ -476,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)
@@ -610,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,
@@ -647,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!;
@@ -665,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/utils.css

@@ -4,4 +4,8 @@ img[alt='hitDesignReadmeImg'] {
 
 .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

@@ -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;
+  }
+}