@datagrok/hit-triage 1.3.7 → 1.3.8

package/package.json

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

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

@@ -10,6 +10,7 @@ import {getNewVid} from '../utils/calculate-single-cell';
 type NewHitDesignCampaignRes = {
     df: DG.DataFrame,
     campaignProps: {[key: string]: any}
+    name: string,
 }
 
 type HitDesignCampaignAccordeon = {
@@ -50,12 +51,15 @@ export function newHitDesignCampaignAccordeon(template: HitDesignTemplate, pepti
         {name: field.name, type: CampaignFieldTypes[field.type as keyof typeof CampaignFieldTypes],
           nullable: !field.required, ...(field.semtype ? {semType: field.semtype} : {})}));
   const campaignPropsObject: {[key: string]: any} = {};
+  const campaignNameInput = ui.input.string('Campaing Name', {tooltipText: 'New campaign name. If empty, campaign code will be used.'});
   const campaignPropsForm = ui.input.form(campaignPropsObject, campaignProps);
+  campaignPropsForm.prepend(campaignNameInput.root);
   campaignPropsForm.classList.remove('ui-form');
   const form = ui.div([
     ...(template.campaignFields?.length > 0 ? []: []),
     campaignPropsForm,
   ]);
+
   const buttonsDiv = ui.buttonsInput([]); // div for create and cancel buttons
   form.appendChild(buttonsDiv);
   const okPromise = new Promise<NewHitDesignCampaignRes>((resolve) => {
@@ -69,7 +73,7 @@ export function newHitDesignCampaignAccordeon(template: HitDesignTemplate, pepti
             }
           }
         }
-        resolve({df, campaignProps: campaignPropsObject});
+        resolve({df, campaignProps: campaignPropsObject, name: campaignNameInput.value});
       });
     buttonsDiv.appendChild(startCampaignButton);
   });

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

@@ -10,7 +10,7 @@ import {CampaignIdKey, CampaignJsonName, CampaignTableName,
 import {calculateColumns, calculateSingleCellValues, getNewVid} from './utils/calculate-single-cell';
 import '../../css/hit-triage.css';
 import {_package} from '../package';
-import {addBreadCrumbsToRibbons, checkRibbonsHaveSubmit, modifyUrl, toFormatedDateString} from './utils';
+import {addBreadCrumbsToRibbons, checkRibbonsHaveSubmit, editableTableField, modifyUrl, toFormatedDateString} from './utils';
 import {HitDesignSubmitView} from './hit-design-views/submit-view';
 import {getTilesViewDialog} from './hit-design-views/tiles-view';
 import {HitAppBase} from './hit-app-base';
@@ -174,6 +174,11 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
 
   get designViewName(): string {return this._designViewName;}
 
+  set designViewName(name: string) {
+    this._designViewName = name;
+    this._designView && (this._designView.name = name);
+  }
+
   get molColName() {
     return this._molColName ??= this.dataFrame?.columns.bySemType(DG.SEMTYPE.MOLECULE)?.name ?? HitDesignMolColName;
   }
@@ -337,7 +342,7 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
           getTilesViewDialog(this, () => this._designView ?? null);
         });
 
-        const submitButton = ui.bigButton('Submit', () => {
+        const submitButton = ui.bigButton('Submit...', () => {
           const dialogContent = this._submitView?.render();
           if (dialogContent) {
             const dlg = ui.dialog('Submit');
@@ -385,10 +390,11 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
   }
 
   protected getDesignView(): DG.TableView {
+    this._designView && this._designView.close();
     const subs: Subscription[] = [];
     const isNew = this.dataFrame!.col(this.molColName)?.toList().every((m) => !m && m === '');
     const view = grok.shell.addTableView(this.dataFrame!);
-    this._designViewName = this.campaign?.name ?? this._designViewName;
+    this._designViewName = this.campaign?.friendlyName ?? this.campaign?.name ?? this._designViewName;
     view.name = this._designViewName;
 
     view._onAdded();
@@ -635,6 +641,7 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
         newPathInput.addOptions(cancelButton);
         newPathInput.addOptions(saveButton);
         pathDiv.appendChild(newPathInput.root);
+        newPathInput.input.focus();
       }, 'Edit file path');
       editIcon.style.marginLeft = '5px';
       const folderPath = getFolderPath();
@@ -644,7 +651,21 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
       return pathDiv;
     };
 
+    const campaignName = this.campaign?.friendlyName ?? this.campaign?.name ?? this.campaignId!;
+    const campaignNameField = editableTableField(ui.divText(campaignName), {
+      tooltip: 'Edit Campaign Name',
+      nullable: false,
+      onOk: async (a) => {
+        this.campaign!.friendlyName = a!;
+        await this.saveCampaign(true);
+      },
+      validator: async (a) => !!a?.trim() ? null : 'Campaign name can not be empty',
+    });
+
+
     return {
+      'Name': campaignNameField,
+      'Code': this.campaignId ?? this._campaign?.name,
       'Template': this.template?.name ?? 'Molecules',
       'File Path': getPathEditor(),
       ...(this.campaign?.authorUserFriendlyName ? {'Author': this.campaign.authorUserFriendlyName} : {}),
@@ -657,7 +678,7 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
     };
   }
 
-  async saveCampaign(notify = true, isCreating = false): Promise<HitDesignCampaign> {
+  async saveCampaign(notify = true, isCreating = false, customProps?: Partial<HitDesignCampaign>): Promise<HitDesignCampaign> {
     const campaignId = this.campaignId!;
     const templateName = this.template!.name;
     const enrichedDf = this.dataFrame!;
@@ -689,6 +710,7 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
     const authorName = authorUserId ? this.campaign?.authorUserFriendlyName ?? (await grok.dapi.users.find(authorUserId))?.friendlyName : undefined;
     const campaign: HitDesignCampaign = {
       name: campaignName,
+      friendlyName: this.campaign?.friendlyName ?? customProps?.friendlyName ?? campaignName,
       templateName,
       status: this.campaign?.status ?? 'In Progress',
       createDate: this.campaign?.createDate ?? toFormatedDateString(new Date()),
@@ -745,6 +767,7 @@ export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> exten
     notify && grok.shell.info('Campaign saved successfully.');
     !notify && isCreating && grok.shell.info('Campaign created successfully.');
     this.campaign = campaign;
+    this.designViewName = campaign.friendlyName ?? campaign.name;
     return campaign;
   }
 }

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

@@ -255,7 +255,8 @@ export class HitDesignInfoView
     };
 
     const table = ui.table(Object.values(grouppedCampaigns).flat(), (info) =>
-      ([ui.link(info.name, () => this.setCampaign(info.name), 'Continue Campaign', ''),
+      ([ui.link(info.friendlyName ?? info.name, () => this.setCampaign(info.name), 'Continue Campaign', ''),
+        info.name,
         info.createDate,
         info.authorUserFriendlyName ?? '',
         info.lastModifiedUserName ?? '',
@@ -263,7 +264,7 @@ export class HitDesignInfoView
         info.status,
         ...(deleteAndShareCampaignIcons(info)),
       ]),
-    ['Name', 'Created', 'Author', 'Last Modified by', 'Molecules', 'Status', '', '']);
+    ['Name', 'Code', 'Created', 'Author', 'Last Modified by', 'Molecules', 'Status', '', '']);
     table.style.color = 'var(--grey-5)';
     table.style.marginLeft = '24px';
     processGroupingTable(table, grouppedCampaigns);
@@ -280,7 +281,8 @@ export class HitDesignInfoView
       this.app.dataFrame = camp.df;
       await this.app.setTemplate(template);
       this.app.campaignProps = camp.campaignProps;
-      await this.app.saveCampaign(false, true);
+      const campaignName = !!camp.name?.trim() ? camp.name?.trim() : undefined;
+      await this.app.saveCampaign(false, true, {friendlyName: campaignName});
       if (template.layoutViewState && this.app.campaign)
         this.app.campaign.layout = template.layoutViewState;
     });

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

@@ -48,7 +48,7 @@ export class PeptiHitApp extends HitDesignApp<PeptiHitTemplate> {
     }
   }
 
-  protected getDesignView(): DG.TableView {
+  protected override 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);

package/src/app/types.ts

@@ -104,6 +104,7 @@ export type HitTriageCampaignStatus = string;
 
 export type HitTriageCampaign = {
     name: string,
+    friendlyName?: string,
     templateName: string,
     template?: HitDesignTemplate,
     savePath?: string,

package/src/app/utils.ts

@@ -215,7 +215,7 @@ export function getGroupedCampaigns<T extends HitDesignCampaign | HitTriageCampa
   return groupedCampaigns;
 }
 
-export function processGroupingTable<T extends HitDesignCampaign | HitTriageCampaign = HitDesignCampaign>(table: HTMLTableElement, groupedCampaigns: {[key: string]: T[]}, numCols = 8) {
+export function processGroupingTable<T extends HitDesignCampaign | HitTriageCampaign = HitDesignCampaign>(table: HTMLTableElement, groupedCampaigns: {[key: string]: T[]}, numCols = 9) {
   table.classList.add('hit-design-groupped-campaigns-table');
   const keys = Object.keys(groupedCampaigns);
   if (keys.length < 2)
@@ -252,3 +252,73 @@ export function processGroupingTable<T extends HitDesignCampaign | HitTriageCamp
     curRow += l;
   }
 }
+
+export type EditableFieldOptions = {
+  onChange?: (val?: string | null) => void,
+  onOk?: (val?: string | null) => Promise<void>,
+  validator?: (val?: string | null) => Promise<string | null>,
+  onCancel?: () => void,
+  afterEditTextContent?: (val: string) => string,
+  beforeEditTextContent?: (val: string) => string,
+  nullable?: boolean,
+  tooltip?: string,
+}
+
+export function editableTableField(field: HTMLElement, options?: EditableFieldOptions) {
+  const editIcon = ui.icons.edit(() => {
+    let tooltipMsg = options?.tooltip ?? field.textContent ?? '';
+    const beforeEditTextContent = options?.beforeEditTextContent ?? ((val) => val);
+    const afterEditTextContent = options?.afterEditTextContent ?? ((val) => val);
+    const input = ui.input.string('smth', {value: beforeEditTextContent(field.textContent ?? ''), onValueChanged: async () => {
+      const vr = await internalValidator();
+      setTimeout(() => {
+        if (vr) {
+          input.input.classList.add('d4-invalid');
+          tooltipMsg = vr;
+          return;
+        } else {
+          input.input.classList.remove('d4-invalid');
+          tooltipMsg = options?.tooltip ?? field.textContent ?? '';
+        }
+      }, 100);
+      options?.onChange?.(input.value);
+    }});
+    ui.tooltip.bind(input.input, () => tooltipMsg);
+    const labelElement = input.root.getElementsByTagName('label').item(0);
+    if (labelElement)
+      labelElement.remove();
+    input.root.style.width = '100%';
+    const internalValidator = async () => {
+      const initialRes = !!input.value?.trim() ? null : !!options?.nullable ? null :'Field cannot be empty';
+      return initialRes ?? (options?.validator ? await options.validator(input.value) : null);
+    };
+
+    const saveButton = ui.button('Save', async () => {
+      const vr = await internalValidator();
+      if (vr) {
+        grok.shell.error(vr);
+        return;
+      }
+      await options?.onOk?.(input.value);
+      field.textContent = afterEditTextContent(input.value) ?? '';
+      ui.empty(container);
+      container.appendChild(field);
+      container.appendChild(editIcon);
+    });
+    const cancelButton = ui.button('Cancel', () => {
+      ui.empty(container);
+      container.appendChild(field);
+      container.appendChild(editIcon);
+      options?.onCancel?.();
+    });
+
+    ui.empty(container);
+    input.addOptions(cancelButton);
+    input.addOptions(saveButton);
+    container.appendChild(input.root);
+    input.input.focus();
+  }, options?.tooltip ?? 'Edit');
+  const container = ui.divH([field, editIcon], {style: {display: 'flex', alignItems: 'center'}});
+  editIcon.style.marginLeft = '5px';
+  return container;
+}