@datagrok/hit-triage 1.2.1 → 1.3.0

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

@@ -1,10 +1,10 @@
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
-import {HitDesignCampaign, HitDesignTemplate, HitTriageCampaignStatus, IFunctionArgs} from './types';
+import {AppName, HitDesignCampaign, HitDesignTemplate, HitTriageCampaignStatus, IFunctionArgs} from './types';
 import {HitDesignInfoView} from './hit-design-views/info-view';
 import {CampaignIdKey, CampaignJsonName, CampaignTableName,
-  EmptyStageCellValue, HTQueryPrefix, HTScriptPrefix, HitDesignCampaignIdKey,
+  HTQueryPrefix, HTScriptPrefix, HitDesignCampaignIdKey,
   HitDesignMolColName, TileCategoriesColName, ViDColName, i18n} from './consts';
 import {calculateColumns, calculateSingleCellValues, getNewVid} from './utils/calculate-single-cell';
 import '../../css/hit-triage.css';
@@ -19,41 +19,39 @@ import {Subscription} from 'rxjs';
 import {filter} from 'rxjs/operators';
 import {defaultPermissions, PermissionsDialog} from './dialogs/permissions-dialog';
 
-export class HitDesignApp extends HitAppBase<HitDesignTemplate> {
+export class HitDesignApp<T extends HitDesignTemplate = HitDesignTemplate> extends HitAppBase<T> {
   multiView: DG.MultiView;
-
-  private _infoView: HitDesignInfoView;
+  protected _infoView: HitDesignInfoView;
   get infoView(): HitDesignInfoView {return this._infoView;}
-  private _designView?: DG.TableView;
+  protected _designView?: DG.TableView;
   public _submitView?: HitDesignSubmitView;
-  private _designViewName = 'Design';
-  private _filePath = 'System.AppData/HitTriage/Hit Design/campaigns';
-  private _campaignId?: string;
-  private _dfName?: string;
-  private _molColName: string = HitDesignMolColName;
-  private _campaign?: HitDesignCampaign;
+  protected _designViewName = 'Design';
+  protected _filePath = `System.AppData/HitTriage/${this.appName}/campaigns`;
+  protected _campaignId?: string;
+  protected _molColName: string = HitDesignMolColName;
+  protected _campaign?: HitDesignCampaign;
   public campaignProps: {[key: string]: any} = {};
-  private processedValues: string[] = [];
-  private _extraStageColsCount = 0;
 
-  private currentDesignViewId?: string;
+  protected currentDesignViewId?: string;
   public mainView: DG.ViewBase;
-  private get version() {return this._campaign?.version ?? 0;};
-
-  constructor(c: DG.FuncCall) {
-    super(c);
-    this._infoView = new HitDesignInfoView(this);
+  protected get version() {return this._campaign?.version ?? 0;};
+  constructor(c: DG.FuncCall, an: AppName = 'Hit Design',
+    infoViewConstructor: (app: HitDesignApp) => HitDesignInfoView = (app) => new HitDesignInfoView(app)) {
+    super(c, an);
+    this._infoView = infoViewConstructor(this);
     this.multiView = new DG.MultiView({viewFactories: {[this._infoView.name]: () => this._infoView}});
     this.multiView.tabs.onTabChanged.subscribe((_) => {
       if (this.multiView.currentView instanceof HitBaseView)
-        (this.multiView.currentView as HitBaseView<HitDesignTemplate, HitDesignApp>).onActivated();
+        (this.multiView.currentView as HitBaseView<T, typeof this>).onActivated();
     });
     this.multiView.parentCall = c;
 
     this.mainView = this.multiView;
-    //this.mainView = grok.shell.addView(this.multiView);
+    this._initViewChangeSub();
+  }
 
-    grok.events.onCurrentViewChanged.subscribe(async () => {
+  _initViewChangeSub() {
+    this.multiView.subs.push(grok.events.onCurrentViewChanged.subscribe(async () => {
       try {
         if (grok.shell.v?.name === this.currentDesignViewId) {
           grok.shell.windows.showHelp = false;
@@ -61,7 +59,7 @@ export class HitDesignApp extends HitAppBase<HitDesignTemplate> {
           this.setBaseUrl();
           modifyUrl(CampaignIdKey, this._campaignId ?? this._campaign?.name ?? '');
 
-          const {sub} = addBreadCrumbsToRibbons(grok.shell.v, 'Hit Design', grok.shell.v?.name, () => {
+          const {sub} = addBreadCrumbsToRibbons(grok.shell.v, this.appName, grok.shell.v?.name, () => {
             grok.shell.v = this.mainView;
             this._designView?.close();
             this._infoView.init();
@@ -71,18 +69,18 @@ export class HitDesignApp extends HitAppBase<HitDesignTemplate> {
       } catch (e) {
         console.error(e);
       }
-    });
+    }));
   }
 
-  public async setTemplate(template: HitDesignTemplate, campaignId?: string) {
+  public async setTemplate(template: T, campaignId?: string) {
     if (!campaignId) {
       this._designView?.dataFrame && grok.shell.closeTable(this._designView.dataFrame);
       this._designView = undefined;
-      campaignId = await this.getNewCampaignName('Hit Design/campaigns', template.key);
+      campaignId = await this.getNewCampaignName(`${this.appName}/campaigns`, template.key);
       modifyUrl(HitDesignCampaignIdKey, campaignId);
-      this._filePath = `System.AppData/HitTriage/Hit Design/campaigns/${campaignId}/${CampaignTableName}`;
+      this._filePath = `System.AppData/HitTriage/${this.appName}/campaigns/${campaignId}/${CampaignTableName}`;
     } else {
-      const fileLoc = 'System.AppData/HitTriage/Hit Design/campaigns';
+      const fileLoc = `System.AppData/HitTriage/${this.appName}/campaigns`;
       this._filePath = this.campaign?.savePath ?? `${fileLoc}/${campaignId}/${CampaignTableName}`;
       this.dataFrame = await grok.dapi.files.readCsv(this._filePath);
       if (this._campaign?.columnSemTypes) {
@@ -108,7 +106,6 @@ export class HitDesignApp extends HitAppBase<HitDesignTemplate> {
     }
     await this.dataFrame.meta.detectSemanticTypes();
     this._molColName = this.dataFrame.columns.bySemType(DG.SEMTYPE.MOLECULE)?.name ?? HitDesignMolColName;
-    this._dfName = this.dataFrame.name ??= campaignId;
     this._campaignId = campaignId;
     this.template = template;
 
@@ -118,8 +115,6 @@ export class HitDesignApp extends HitAppBase<HitDesignTemplate> {
       await this.setCanEdit(this.campaign);
     else
       this.hasEditPermission = true; // if the campaign is new, obviously the user can edit it
-
-    this._extraStageColsCount = this.dataFrame!.rowCount - this.dataFrame.filter.trueCount;
     const designV = this.designView;
     this.currentDesignViewId = designV.name;
     this.setBaseUrl();
@@ -169,34 +164,171 @@ export class HitDesignApp extends HitAppBase<HitDesignTemplate> {
       this.cacheDuplicateVIDs();
     return this._duplicateVidCache;
   }
-  private getDesignView(): DG.TableView {
-    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;
-    view.name = this._designViewName;
-    this.processedValues = this.dataFrame!.getCol(this.molColName).toList();
 
-    const performSingleCellCalculations = async (newValueIdx: number, newValue?: string) => {
-      const computeObj = this.template!.compute;
-      if (!newValue || newValue === '')
-        return;
+  async performSingleCellCalculations(newValueIdx: number, newValue?: string) {
+    const computeObj = this.template!.compute;
+    if (!newValue || newValue === '')
+      return;
 
-      const calcDf =
+    const calcDf =
               await calculateSingleCellValues(
                 newValue, computeObj.descriptors.args, computeObj.functions, computeObj.scripts, computeObj.queries);
 
-      for (const col of calcDf.columns.toList()) {
-        if (col.name === HitDesignMolColName) continue;
-        if (!this.dataFrame!.columns.contains(col.name)) {
-          const newCol = this.dataFrame!.columns.addNew(col.name, col.type);
-          newCol.semType = col.semType;
-        }
-            this.dataFrame!.col(col.name)!.set(newValueIdx, col.get(0), false);
+    for (const col of calcDf.columns.toList()) {
+      if (col.name === HitDesignMolColName) continue;
+      if (!this.dataFrame!.columns.contains(col.name)) {
+        const newCol = this.dataFrame!.columns.addNew(col.name, col.type);
+        newCol.semType = col.semType;
       }
+            this.dataFrame!.col(col.name)!.set(newValueIdx, col.get(0), false);
+    }
           this.dataFrame!.fireValuesChanged();
           this.saveCampaign(undefined, false);
-    };
+  }
+
+  protected initDesignViewRibbons(view: DG.TableView, subs: Subscription[]) {
+    const onRemoveSub = grok.events.onViewRemoved.subscribe((v) => {
+      if (v.id === view?.id) {
+        subs.forEach((s) => s.unsubscribe());
+        onRemoveSub.unsubscribe();
+      }
+    });
+    const ribbons = view?.getRibbonPanels();
+    if (ribbons) {
+      const hasSubmit = checkRibbonsHaveSubmit(ribbons);
+      if (!hasSubmit) {
+        const getComputeDialog = async () => {
+          chemFunctionsDialog(this, async (resultMap) => {
+            const oldDescriptors = this.template!.compute.descriptors.args;
+            const oldFunctions = this.template!.compute.functions;
+            const oldScripts = this.template!.compute.scripts ?? [];
+            const oldQueries = this.template!.compute.queries ?? [];
+            const newDescriptors = resultMap.descriptors;
+            const newComputeObj = {
+              descriptors: {
+                enabled: !!resultMap?.descriptors?.length,
+                args: resultMap?.descriptors ?? [],
+              },
+              functions: Object.entries(resultMap?.externals ?? {}).map(([funcName, args]) => {
+                const splitFunc = funcName.split(':');
+                return ({
+                  name: splitFunc[1],
+                  package: splitFunc[0],
+                  args: args,
+                });
+              }),
+              scripts: Object.entries(resultMap?.scripts ?? {})
+                .filter(([name, _]) => name.startsWith(HTScriptPrefix) && name.split(':').length === 3)
+                .map(([scriptId, args]) => {
+                  const scriptNameParts = scriptId.split(':');
+                  return ({
+                    name: scriptNameParts[1] ?? '',
+                    id: scriptNameParts[2] ?? '',
+                    args: args,
+                  });
+                }),
+              queries: Object.entries(resultMap?.queries ?? {})
+                .filter(([name, _]) => name.startsWith(HTQueryPrefix) && name.split(':').length === 3)
+                .map(([queryName, args]) => {
+                  const queryNameParts = queryName.split(':');
+                  return ({
+                    name: queryNameParts[1] ?? '',
+                    id: queryNameParts[2] ?? '',
+                    args: args,
+                  });
+                }),
+            };
+            this.template!.compute = newComputeObj;
+            this.campaign!.template = this.template;
+            const uncalculatedDescriptors = newDescriptors.filter((d) => !oldDescriptors.includes(d));
+
+            const newFunctions: {[_: string]: IFunctionArgs} = {};
+            Object.entries(resultMap?.externals ?? {})
+              .filter(([funcName, args]) => {
+                const oldFunc = oldFunctions.find((f) => `${f.package}:${f.name}` === funcName);
+                if (!oldFunc)
+                  return true;
+                return !Object.entries(args).every(([key, value]) => oldFunc.args[key] === value);
+              }).forEach(([funcName, args]) => {newFunctions[funcName] = args;});
+
+            const newScripts: {[_: string]: IFunctionArgs} = {};
+            Object.entries(resultMap?.scripts ?? {})
+              .filter(([scriptName, args]) => {
+                const oldScript = oldScripts.find((f) => `${HTScriptPrefix}:${f.name}:${f.id}` === scriptName);
+                if (!oldScript)
+                  return true;
+                return !Object.entries(args).every(([key, value]) => oldScript.args[key] === value);
+              }).forEach(([scriptName, args]) => {newScripts[scriptName] = args;});
+
+            const newQueries: {[_: string]: IFunctionArgs} = {};
+            Object.entries(resultMap?.queries ?? {})
+              .filter(([queryName, args]) => {
+                const oldQuery = oldQueries.find((f) => `${HTQueryPrefix}:${f.name}:${f.id}` === queryName);
+                if (!oldQuery)
+                  return true;
+                return !Object.entries(args).every(([key, value]) => oldQuery.args[key] === value);
+              }).forEach(([queryName, args]) => {newQueries[queryName] = args;});
+            ui.setUpdateIndicator(view.grid.root, true);
+            try {
+              await calculateColumns({descriptors: uncalculatedDescriptors, externals: newFunctions,
+                scripts: newScripts, queries: newQueries}, this.dataFrame!, this.molColName!);
+              this.dataFrame!.fireValuesChanged();
+            } finally {
+              ui.setUpdateIndicator(view.grid.root, false);
+              this.saveCampaign(undefined, false);
+            }
+          }, () => null, this.campaign?.template!, true);
+        };
+
+        const calculateRibbon = ui.iconFA('wrench', getComputeDialog, 'Calculate additional properties');
+        const addNewRowButton = ui.icons.add(() => {this.dataFrame?.rows.addNew(null, true);}, 'Add new row');
+        const permissionsButton = ui.iconFA('share', async () => {
+          await (new PermissionsDialog(this.campaign?.permissions)).show((res) => {
+            this.campaign!.permissions = res;
+            this.saveCampaign(undefined, true);
+          });
+        }, 'Edit campaign permissions');
+        const tilesButton = ui.bigButton('Progress tracker', () => {
+          getTilesViewDialog(this, () => this._designView ?? null);
+        });
+
+        const submitButton = ui.bigButton('Submit', () => {
+          const dialogContent = this._submitView?.render();
+          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.show();
+          }
+        });
+        submitButton.classList.add('hit-design-submit-button');
+        const ribbonButtons: HTMLElement[] = [submitButton];
+        if (this.template?.stages?.length ?? 0 > 0)
+          ribbonButtons.unshift(tilesButton);
+        if (this.campaign && this.template && !this.campaign.template)
+          this.campaign.template = this.template;
+
+        if (this.hasEditPermission)
+          ribbonButtons.unshift(permissionsButton);
+        ribbonButtons.unshift(calculateRibbon);
+        ribbonButtons.unshift(addNewRowButton);
+
+
+        ribbons.push(ribbonButtons);
+        // remove project save button from the ribbon
+        view.setRibbonPanels(ribbons);
+      }
+    }
+    return view;
+  }
+
+  protected getDesignView(): DG.TableView {
+    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;
+    view.name = this._designViewName;
 
     view._onAdded();
     const layoutViewState = this._campaign?.layout ?? this.template?.layoutViewState;
@@ -216,7 +348,6 @@ export class HitDesignApp extends HitAppBase<HitDesignTemplate> {
     subs.push(this.dataFrame!.onRowsAdded.pipe(filter(() => !this.isJoining))
       .subscribe(() => { // TODO, insertion of rows in the middle
         try {
-          this.processedValues = this.dataFrame!.getCol(this.molColName).toList();
           if (this.template!.stages?.length > 0) {
             for (let i = 0; i < this.dataFrame!.rowCount; i++) {
               const colVal = this.dataFrame!.col(TileCategoriesColName)!.get(i);
@@ -240,13 +371,6 @@ export class HitDesignApp extends HitAppBase<HitDesignTemplate> {
         //const lastCell = view.grid.cell(this.molColName, this.dataFrame!.rowCount - 1);
         //view.grid.onCellValueEdited
       }));
-    this.dataFrame && subs.push(this.dataFrame?.onRowsRemoved.subscribe(() => {
-      try {
-        this.processedValues = this.dataFrame!.getCol(this.molColName).toList();
-      } catch (e) {
-        console.error(e);
-      }
-    }));
     subs.push(grok.events.onContextMenu.subscribe((args) => {
       try {
         const viewer: DG.Viewer = args?.args?.context;
@@ -266,18 +390,10 @@ export class HitDesignApp extends HitAppBase<HitDesignTemplate> {
         });
         menu.item('Duplicate molecule', () => {
           try {
-              this.dataFrame!.rows.addNew(null, true);
-              let lastCell: DG.GridCell | null = null;
-              for (let i = 0; i < this.dataFrame!.rowCount; i++) {
-                const cell = view.grid.cell(this.molColName, i);
-                if (!cell)
-                  continue;
-                if (cell.cell.value === '' || cell.cell.value === null)
-                  lastCell = cell;
-              }
-              if (lastCell)
-                lastCell.cell.value = args?.args?.item?.cell?.value ?? '';
-                // grok.functions.call('Chem:editMoleculeCell', {cell: lastCell});
+            const row = this.dataFrame!.rows.addNew(null, true);
+            const cell = row.get(this.molColName);
+            if (cell != null && row.idx > -1)
+              this.dataFrame!.cell(row.idx, this.molColName).value = args?.args?.item?.cell?.value ?? '';
           } catch (e) {
             console.error(e);
           }
@@ -288,7 +404,7 @@ export class HitDesignApp extends HitAppBase<HitDesignTemplate> {
         if (cellValue && (cellIndex ?? -1) > -1) {
           menu.item('Re-Run Calculations', async () => {
             try {
-              await performSingleCellCalculations(cellIndex, cellValue);
+              await this.performSingleCellCalculations(cellIndex, cellValue);
             } catch (e) {
               console.error(e);
             }
@@ -352,7 +468,7 @@ export class HitDesignApp extends HitAppBase<HitDesignTemplate> {
 
           this.dataFrame!.col(ViDColName)!.set(newValueIdx, newVid, false);
 
-          performSingleCellCalculations(newValueIdx, newValue);
+          this.performSingleCellCalculations(newValueIdx, newValue);
       } catch (e) {
         console.error(e);
       }
@@ -373,141 +489,7 @@ export class HitDesignApp extends HitAppBase<HitDesignTemplate> {
         }
       } catch (e) {}
     }));
-
-
-    const onRemoveSub = grok.events.onViewRemoved.subscribe((v) => {
-      if (v.id === view?.id) {
-        subs.forEach((s) => s.unsubscribe());
-        onRemoveSub.unsubscribe();
-      }
-    });
-    const ribbons = view?.getRibbonPanels();
-    if (ribbons) {
-      const hasSubmit = checkRibbonsHaveSubmit(ribbons);
-      if (!hasSubmit) {
-        const getComputeDialog = async () => {
-          chemFunctionsDialog(this, async (resultMap) => {
-            const oldDescriptors = this.template!.compute.descriptors.args;
-            const oldFunctions = this.template!.compute.functions;
-            const oldScripts = this.template!.compute.scripts ?? [];
-            const oldQueries = this.template!.compute.queries ?? [];
-            const newDescriptors = resultMap.descriptors;
-            const newComputeObj = {
-              descriptors: {
-                enabled: !!resultMap?.descriptors?.length,
-                args: resultMap?.descriptors ?? [],
-              },
-              functions: Object.entries(resultMap?.externals ?? {}).map(([funcName, args]) => {
-                const splitFunc = funcName.split(':');
-                return ({
-                  name: splitFunc[1],
-                  package: splitFunc[0],
-                  args: args,
-                });
-              }),
-              scripts: Object.entries(resultMap?.scripts ?? {})
-                .filter(([name, _]) => name.startsWith(HTScriptPrefix) && name.split(':').length === 3)
-                .map(([scriptId, args]) => {
-                  const scriptNameParts = scriptId.split(':');
-                  return ({
-                    name: scriptNameParts[1] ?? '',
-                    id: scriptNameParts[2] ?? '',
-                    args: args,
-                  });
-                }),
-              queries: Object.entries(resultMap?.queries ?? {})
-                .filter(([name, _]) => name.startsWith(HTQueryPrefix) && name.split(':').length === 3)
-                .map(([queryName, args]) => {
-                  const queryNameParts = queryName.split(':');
-                  return ({
-                    name: queryNameParts[1] ?? '',
-                    id: queryNameParts[2] ?? '',
-                    args: args,
-                  });
-                }),
-            };
-            this.template!.compute = newComputeObj;
-            this.campaign!.template = this.template;
-            const uncalculatedDescriptors = newDescriptors.filter((d) => !oldDescriptors.includes(d));
-
-            const newFunctions: {[_: string]: IFunctionArgs} = {};
-            Object.entries(resultMap?.externals ?? {})
-              .filter(([funcName, args]) => {
-                const oldFunc = oldFunctions.find((f) => `${f.package}:${f.name}` === funcName);
-                if (!oldFunc)
-                  return true;
-                return !Object.entries(args).every(([key, value]) => oldFunc.args[key] === value);
-              }).forEach(([funcName, args]) => {newFunctions[funcName] = args;});
-
-            const newScripts: {[_: string]: IFunctionArgs} = {};
-            Object.entries(resultMap?.scripts ?? {})
-              .filter(([scriptName, args]) => {
-                const oldScript = oldScripts.find((f) => `${HTScriptPrefix}:${f.name}:${f.id}` === scriptName);
-                if (!oldScript)
-                  return true;
-                return !Object.entries(args).every(([key, value]) => oldScript.args[key] === value);
-              }).forEach(([scriptName, args]) => {newScripts[scriptName] = args;});
-
-            const newQueries: {[_: string]: IFunctionArgs} = {};
-            Object.entries(resultMap?.queries ?? {})
-              .filter(([queryName, args]) => {
-                const oldQuery = oldQueries.find((f) => `${HTQueryPrefix}:${f.name}:${f.id}` === queryName);
-                if (!oldQuery)
-                  return true;
-                return !Object.entries(args).every(([key, value]) => oldQuery.args[key] === value);
-              }).forEach(([queryName, args]) => {newQueries[queryName] = args;});
-            ui.setUpdateIndicator(view.grid.root, true);
-            try {
-              await calculateColumns({descriptors: uncalculatedDescriptors, externals: newFunctions,
-                scripts: newScripts, queries: newQueries}, this.dataFrame!, this.molColName!);
-              this.dataFrame!.fireValuesChanged();
-            } finally {
-              ui.setUpdateIndicator(view.grid.root, false);
-              this.saveCampaign(undefined, false);
-            }
-          }, () => null, this.campaign?.template!, true);
-        };
-
-        const calculateRibbon = ui.iconFA('wrench', getComputeDialog, 'Calculate additional properties');
-        const addNewRowButton = ui.icons.add(() => {this.dataFrame?.rows.addNew(null, true);}, 'Add new row');
-        const permissionsButton = ui.iconFA('share', async () => {
-          await (new PermissionsDialog(this.campaign?.permissions)).show((res) => {
-            this.campaign!.permissions = res;
-            this.saveCampaign(undefined, true);
-          });
-        }, 'Edit campaign permissions');
-        const tilesButton = ui.bigButton('Progress tracker', () => {
-          getTilesViewDialog(this, () => this._designView ?? null);
-        });
-
-        const submitButton = ui.bigButton('Submit', () => {
-          const dialogContent = this._submitView?.render();
-          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.show();
-          }
-        });
-        submitButton.classList.add('hit-design-submit-button');
-        const ribbonButtons: HTMLElement[] = [submitButton];
-        if (this.template?.stages?.length ?? 0 > 0)
-          ribbonButtons.unshift(tilesButton);
-        if (this.campaign && this.template && !this.campaign.template)
-          this.campaign.template = this.template;
-
-        if (this.hasEditPermission)
-          ribbonButtons.unshift(permissionsButton);
-        ribbonButtons.unshift(calculateRibbon);
-        ribbonButtons.unshift(addNewRowButton);
-
-
-        ribbons.push(ribbonButtons);
-        // remove project save button from the ribbon
-        view.setRibbonPanels(ribbons);
-      }
-    }
+    this.initDesignViewRibbons(view, subs);
     view.parentCall = this.parentCall;
     return view;
   }
@@ -605,7 +587,7 @@ export class HitDesignApp extends HitAppBase<HitDesignTemplate> {
       'Template': this.template?.name ?? 'Molecules',
       'File path': getPathEditor(),
       ...campaignProps,
-      'Number of molecules': (this.dataFrame!.rowCount - this._extraStageColsCount).toString(),
+      'Number of molecules': (this.dataFrame!.rowCount).toString(),
       'Enrichment methods': [this.template!.compute.descriptors.enabled ? 'descriptors' : '',
         ...this.template!.compute.functions.map((func) => func.name)].filter((f) => f && f.trim() !== '').join(', '),
     };
@@ -633,7 +615,7 @@ export class HitDesignApp extends HitAppBase<HitDesignTemplate> {
       createDate: this.campaign?.createDate ?? toFormatedDateString(new Date()),
       campaignFields: this.campaign?.campaignFields ?? this.campaignProps,
       columnSemTypes,
-      rowCount: enrichedDf.col(ViDColName)?.toList().filter((s) => s !== EmptyStageCellValue).length ?? 0,
+      rowCount: enrichedDf.rowCount,
       filteredRowCount: enrichedDf.filter.trueCount,
       savePath: this._filePath,
       columnTypes: colTypeMap,
@@ -646,7 +628,7 @@ export class HitDesignApp extends HitAppBase<HitDesignTemplate> {
       grok.shell.error('You do not have permission to modify this campaign');
       return campaign;
     }
-    const campaignPath = `Hit Design/campaigns/${campaignId}/${CampaignJsonName}`;
+    const campaignPath = `${this.appName}/campaigns/${campaignId}/${CampaignJsonName}`;
     // check if someone already saved the campaign
     let resDf = enrichedDf;
 
@@ -669,7 +651,6 @@ export class HitDesignApp extends HitAppBase<HitDesignTemplate> {
     const csvDf = DG.DataFrame.fromColumns(
       resDf.columns.toList().filter((col) => !col.name.startsWith('~')),
     ).toCsv();
-    //await _package.files.writeAsText(`Hit Design/campaigns/${campaignId}/${CampaignTableName}`, csvDf);
     await grok.dapi.files.writeAsText(this._filePath, csvDf);
     const newLayout = this._designView!.saveLayout();
     if (!newLayout)