@datagrok/hit-triage 1.9.2 → 1.10.0

package/files/pepTriage/templates/Demo Template.json

@@ -0,0 +1 @@
+{"name":"Demo Template","key":"DMT","sequenceColumnName":"Helm","campaignFields":[{"name":"Chemist","type":"String","required":true},{"name":"Supervisor","type":"String","required":true}],"dataSourceType":"Query","compute":{"descriptors":{"enabled":true,"args":["MolWt","HeavyAtomMolWt"]},"functions":[{"name":"addChemPropertiesColumns","package":"Chem","args":{"MW":false,"HBA":true,"HBD":true,"logP":false,"logS":false,"PSA":false,"rotatableBonds":false,"stereoCenters":false,"moleculeCharge":false}}],"scripts":[],"queries":[]},"submit":{"fName":"demoFileSubmit","package":"HitTriage"},"queryFunctionName":"Demo Peptide Sequences"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/hit-triage",
   "friendlyName": "Hit Triage",
-  "version": "1.9.2",
+  "version": "1.10.0",
   "author": {
     "name": "Davit Rizhinashvili",
     "email": "drizhinashvili@datagrok.ai"
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@datagrok-libraries/compute-utils": "^1.44.9",
+    "@datagrok-libraries/statistics": "^1.12.4",
     "@datagrok-libraries/utils": "^4.6.5",
     "cash-dom": "^8.1.5",
     "css-loader": "^6.5.1",
@@ -28,7 +29,8 @@
     "typeahead-standalone": "4.14.1",
     "typescript": "^5.6.3",
     "uuid": "^9.0.0",
-    "@datagrok-libraries/test": "^1.1.0"
+    "@datagrok-libraries/test": "^1.1.0",
+    "@datagrok-libraries/bio": "^5.63.6"
   },
   "devDependencies": {
     "@types/uuid": "^9.0.2",
@@ -52,8 +54,8 @@
     "release-hittriage-dev": "grok publish dev --release",
     "debug-hittriage-public": "grok publish public",
     "release-hittriage-public": "grok publish public --release",
-    "link-all": "npm link datagrok-api @datagrok-libraries/compute-utils @datagrok-libraries/utils",
-    "build-all": "npm --prefix ./../../js-api run build && npm --prefix ./../../libraries/compute-utils run build && npm --prefix ./../../libraries/utils run build && npm run build"
+    "link-all": "npm link datagrok-api @datagrok-libraries/compute-utils @datagrok-libraries/statistics @datagrok-libraries/utils",
+    "build-all": "npm --prefix ./../../js-api run build && npm --prefix ./../../libraries/compute-utils run build && npm --prefix ./../../libraries/statistics run build && npm --prefix ./../../libraries/utils run build && npm run build"
   },
   "canEdit": [
     "Administrators"

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

@@ -7,10 +7,17 @@ import {CampaignFieldTypes, HitTriageTemplate, IngestType} from '../types';
 import * as C from '../consts';
 import '../../../css/hit-triage.css';
 
-type INewCampaignResult = {
+export type INewCampaignResult = {
     df: DG.DataFrame,
     type: IngestType,
-    campaignProps: {[key: string]: any}
+    campaignProps: {[key: string]: any},
+    friendlyName?: string,
+    extraData?: {[key: string]: any},
+}
+
+export type CampaignAccordeonOptions = {
+    extraFormElements?: HTMLElement[],
+    getExtraData?: () => {[key: string]: any},
 }
 
 type HitTriageCampaignAccordeon = {
@@ -24,7 +31,9 @@ type HitTriageCampaignAccordeon = {
  * @return {HitTriageCampaignAccordeon} Object containing root element, promise for the campaign result and cancel
  */
 export async function newCampaignAccordeon(template: HitTriageTemplate,
-  dataSourceFunctionsMap: {[key: string]: DG.Func | DG.DataQuery}): Promise<HitTriageCampaignAccordeon> {
+  dataSourceFunctionsMap: {[key: string]: DG.Func | DG.DataQuery},
+  dataSourceTag: string = C.HitTriageDataSourceTag,
+  options?: CampaignAccordeonOptions): Promise<HitTriageCampaignAccordeon> {
   const errorDiv = ui.divText('', {style: {color: 'red'}});
   // handling file input
   let fileDf: DG.DataFrame | null = null;
@@ -52,7 +61,7 @@ export async function newCampaignAccordeon(template: HitTriageTemplate,
   if (Object.keys(dataSourceFunctionsMap).length === 0) {
   // functions that have special tag and are applicable for data source. they should return a dataframe with molecules
     const dataSourceFunctions =
-      Array.from(new Set(DG.Func.find({meta: {role: C.HitTriageDataSourceTag}}).concat(DG.Func.find({tags: [C.HitTriageDataSourceTag]}))));
+      Array.from(new Set(DG.Func.find({meta: {role: dataSourceTag}}).concat(DG.Func.find({tags: [dataSourceTag]}))));
     // for display purposes we use friendly name of the function
     dataSourceFunctions.forEach((func) => {
       dataSourceFunctionsMap[func.friendlyName ?? func.name] = func;
@@ -82,6 +91,9 @@ export async function newCampaignAccordeon(template: HitTriageTemplate,
   functionInputDiv.style.display = 'none';
   const dataInputsDiv = ui.div([fileInputDiv, functionInputDiv]);
 
+  const campaignNameInput = ui.input.string('Campaign Name', {value: '', nullable: true});
+  campaignNameInput.setTooltip('Optional friendly name for the campaign');
+
   // campaign properties. each template might have number of additional fields that should
   // be filled by user for the campaign. they are cast into DG.Property objects and displayed as a form
   const campaignProps = template.campaignFields
@@ -104,6 +116,8 @@ export async function newCampaignAccordeon(template: HitTriageTemplate,
   }
 
   const form = ui.div([
+    campaignNameInput.root,
+    ...(options?.extraFormElements ?? []),
     dataInputsDiv,
     ...(campaignProps.length ? [campaignPropsForm] : [])]);
   const buttonsDiv = ui.buttonsInput([]); // div for create and cancel buttons
@@ -117,7 +131,9 @@ export async function newCampaignAccordeon(template: HitTriageTemplate,
         }
         const df = fileDf;
         df.name = fileDf.name;
-        resolve({df, type: 'File', campaignProps: campaignPropsObject});
+        const name = campaignNameInput.value?.trim() || undefined;
+        const extraData = options?.getExtraData?.();
+        resolve({df, type: 'File', campaignProps: campaignPropsObject, friendlyName: name, extraData});
       } else {
         const func = dataSourceFunctionsMap[dataSourceFunctionInput.value!];
         if (!func) {
@@ -129,7 +145,9 @@ export async function newCampaignAccordeon(template: HitTriageTemplate,
           funcCallInputs[key] = value;
         });
         const df: DG.DataFrame = await func.apply(funcCallInputs);
-        resolve({df, type: 'Query', campaignProps: campaignPropsObject});
+        const name = campaignNameInput.value?.trim() || undefined;
+        const extraData = options?.getExtraData?.();
+        resolve({df, type: 'Query', campaignProps: campaignPropsObject, friendlyName: name, extraData});
       };
     };
     const startCampaignButton = ui.bigButton(C.i18n.StartCampaign, () => onOkProxy());

package/src/app/accordeons/new-pep-triage-template-accordeon.ts

@@ -0,0 +1,208 @@
+/* eslint-disable max-len */
+import * as DG from 'datagrok-api/dg';
+import * as ui from 'datagrok-api/ui';
+import * as grok from 'datagrok-api/grok';
+import {_package} from '../../package';
+import {CampaignFieldTypes, HitTriageCampaignField, HitTriageCampaignFieldType,
+  IComputeDialogResult, PepTriageTemplate, IngestType, INewTemplateResult} from '../types';
+import * as C from '../consts';
+import '../../../css/hit-triage.css';
+import {chemFunctionsDialog} from '../dialogs/functions-dialog';
+import {ItemType, ItemsGrid} from '@datagrok-libraries/utils/src/items-grid';
+import {HitAppBase} from '../hit-app-base';
+import {getLayoutInput} from './layout-input';
+import {getFuncPackageNameSafe, loadTemplate} from '../utils';
+import {getCampaignFieldEditors, saveTemplate} from './new-template-accordeon';
+
+
+export async function createPepTriageTemplateAccordeon(app: HitAppBase<any>,
+  dataSourceFunctionMap: { [key: string]: DG.Func | DG.DataQuery | DG.Script },
+  preset?: PepTriageTemplate,
+): Promise<INewTemplateResult<PepTriageTemplate>> {
+  const templatesFolder = `${app.appName}/templates`;
+  const availableTemplates = (await _package.files.list(templatesFolder))
+    .filter((file) => file.name.endsWith('.json'))
+    .map((file) => file.name.slice(0, -5));
+  const availableTemplateKeys: string[] = [];
+  for (const tn of availableTemplates) {
+    const t: PepTriageTemplate = await loadTemplate<PepTriageTemplate>(`${templatesFolder}/${tn}.json`);
+    availableTemplateKeys.push(t.key);
+  }
+
+  const availableSubmitFunctions = Array.from(new Set(DG.Func.find({meta: {role: C.HitTriageSubmitTag}}).concat(DG.Func.find({tags: [C.HitTriageSubmitTag]}))));
+  const submitFunctionsMap: {[key: string]: DG.Func} = {};
+  availableSubmitFunctions.forEach((func) => {
+    submitFunctionsMap[func.friendlyName ?? func.name] = func;
+  });
+  const presetSubmitKey = preset?.submit ? Object.keys(submitFunctionsMap)
+    .find((k) => submitFunctionsMap[k]?.name === preset.submit?.fName) : null;
+  const submitFunctionInput =
+    ui.input.choice('Submit function', {value: presetSubmitKey ?? null, items: [null, ...Object.keys(submitFunctionsMap)]});
+  if (!presetSubmitKey)
+    submitFunctionInput.value = null;
+  submitFunctionInput.nullable = true;
+  submitFunctionInput.fireChanged();
+  submitFunctionInput.setTooltip('Select function to be called upon submitting');
+  const layoutInput = getLayoutInput();
+  const errorDiv = ui.divText('Template name is empty or already exists', {classes: 'hit-triage-error-div'});
+  const keyErrorDiv = ui.divText('Template key is empty or already exists', {classes: 'hit-triage-error-div'});
+
+  const templateNameInput = ui.input.string('Name', {value: preset ? `${preset.name} (copy)` : '', onValueChanged: (value) => {
+    if (value === '' || availableTemplates.includes(value)) {
+      templateNameInput.root.style.borderBottom = '1px solid red';
+      errorDiv.style.opacity = '100%';
+    } else {
+      templateNameInput.root.style.borderBottom = 'none';
+      errorDiv.style.opacity = '0%';
+    }
+  }});
+  const templateKeyInput = ui.input.string('Key', {value: preset ? `${preset.key}-copy` : '', onValueChanged: (value) => {
+    if (value === '' || availableTemplateKeys.includes(value)) {
+      templateKeyInput.root.style.borderBottom = '1px solid red';
+      keyErrorDiv.style.opacity = '100%';
+    } else {
+      templateKeyInput.root.style.borderBottom = 'none';
+      keyErrorDiv.style.opacity = '0%';
+    }
+  }});
+
+  templateKeyInput.setTooltip('Template key used for campaign prefix');
+  templateNameInput.setTooltip('Template name');
+  templateNameInput.root.style.borderBottom = 'none';
+  templateKeyInput.root.style.borderBottom = 'none';
+  errorDiv.style.opacity = '0%';
+  keyErrorDiv.style.opacity = '0%';
+
+  // PepTriage-specific inputs
+  const seqColInput = ui.input.string('Sequence Column', {value: preset?.sequenceColumnName ?? '', nullable: false});
+  seqColInput.setTooltip('Name of the sequence column in the dataset (mandatory)');
+  const seqColErrorDiv = ui.divText('Sequence column name is required', {classes: 'hit-triage-error-div'});
+  seqColErrorDiv.style.opacity = '0%';
+  seqColInput.onChanged.subscribe(() => {
+    if (!seqColInput.value?.trim()) {
+      seqColInput.root.style.borderBottom = '1px solid red';
+      seqColErrorDiv.style.opacity = '100%';
+    } else {
+      seqColInput.root.style.borderBottom = 'none';
+      seqColErrorDiv.style.opacity = '0%';
+    }
+  });
+
+  const molColInput = ui.input.string('Molecule Column', {value: preset?.moleculeColumnName ?? '', nullable: true});
+  molColInput.setTooltip('Name of the molecule column (optional). If empty, sequences will be auto-converted to molecules.');
+
+  let funcDialogRes: IComputeDialogResult | null = null;
+  const dummyTemplate = preset ? preset : {
+    compute: {
+      descriptors: {enabled: true, args: []},
+      functions: [],
+    },
+  } as unknown as PepTriageTemplate;
+  const funcInput = await chemFunctionsDialog(app, (res) => {funcDialogRes = res;}, () => null,
+    dummyTemplate, false);
+  funcInput.root.classList.add('hit-triage-new-template-functions-input');
+
+  if (Object.entries(dataSourceFunctionMap).length === 0) {
+    const dataSourceFunctions = Array.from(new Set(
+      DG.Func.find({meta: {role: C.PepTriageDataSourceTag}}).concat(DG.Func.find({tags: [C.PepTriageDataSourceTag]}))));
+    dataSourceFunctions.forEach((func) => {
+      dataSourceFunctionMap[func.friendlyName ?? func.name] = func;
+    });
+  }
+  const combinedSourceNames = Object.keys(dataSourceFunctionMap);
+  const dataSourceFunctionInput = ui.input.choice(
+    C.i18n.dataSourceFunction, {value: combinedSourceNames[0], items: combinedSourceNames});
+  const ingestTypeInput = ui.input.choice<IngestType>('Ingest using', {value: preset?.dataSourceType ?? 'Query', items: ['Query', 'File'],
+    onValueChanged: (value) => {
+      dataSourceFunctionInput.root.style.display = value === 'Query' ? 'block' : 'none';
+    }});
+  if (preset?.dataSourceType)
+    dataSourceFunctionInput.root.style.display = preset.dataSourceType === 'Query' ? 'block' : 'none';
+
+  const fieldsEditor = getCampaignFieldEditors(preset?.campaignFields);
+
+  const form = ui.div([
+    ui.h2('Details'),
+    ui.div([templateNameInput, errorDiv]),
+    ui.div([templateKeyInput, keyErrorDiv]),
+    ui.h2('Sequence Configuration'),
+    ui.div([seqColInput, seqColErrorDiv]),
+    molColInput.root,
+    ui.h2('Data Ingestion'),
+    ingestTypeInput.root,
+    dataSourceFunctionInput.root,
+    layoutInput.dataFileInput,
+    fieldsEditor.fieldsDiv,
+    ui.h2('Compute'),
+    funcInput.root,
+    ui.h2('Submit'),
+    submitFunctionInput.root,
+  ], 'ui-form');
+
+  const buttonsDiv = ui.buttonsInput([]);
+  const buttonsContainerDiv = buttonsDiv.getElementsByClassName('ui-input-editor')?.[0] ?? buttonsDiv;
+  form.appendChild(buttonsDiv);
+  const cancelPromise = new Promise<void>((resolve) => {
+    const cancelButton = ui.button(C.i18n.cancel, () => resolve());
+    buttonsContainerDiv.appendChild(cancelButton);
+  });
+
+  const promise = new Promise<PepTriageTemplate>((resolve) => {
+    async function onOkProxy() {
+      funcInput.okProxy();
+      if (errorDiv.style.opacity === '100%') {
+        grok.shell.error('Template name is empty or already exists');
+        return;
+      }
+      if (keyErrorDiv.style.opacity === '100%') {
+        grok.shell.error('Template key is empty or already exists');
+        return;
+      }
+      if (!seqColInput.value?.trim()) {
+        grok.shell.error('Sequence column name is required');
+        return;
+      }
+      const submitFunction = submitFunctionInput.value ? submitFunctionsMap[submitFunctionInput.value] : undefined;
+      const out: PepTriageTemplate = {
+        name: templateNameInput.value,
+        key: templateKeyInput.value,
+        sequenceColumnName: seqColInput.value!.trim(),
+        moleculeColumnName: molColInput.value?.trim() || undefined,
+        campaignFields: fieldsEditor.getFields(),
+        dataSourceType: ingestTypeInput.value ?? 'Query',
+        layoutViewState: layoutInput.getLayoutViewState() ?? undefined,
+        compute: {
+          descriptors: {
+            enabled: !!funcDialogRes?.descriptors?.length,
+            args: funcDialogRes?.descriptors ?? [],
+          },
+          functions: Object.entries(funcDialogRes?.externals ?? {}).map(([funcName, args]) => {
+            const splitFunc = funcName.split(':');
+            return ({name: splitFunc[1], package: splitFunc[0], args: args});
+          }),
+          scripts: Object.entries(funcDialogRes?.scripts ?? {})
+            .filter(([name, _]) => name.startsWith(C.HTScriptPrefix) && name.split(':').length === 3)
+            .map(([scriptId, args]) => {
+              const scriptNameParts = scriptId.split(':');
+              return ({name: scriptNameParts[1] ?? '', id: scriptNameParts[2] ?? '', args: args});
+            }),
+          queries: Object.entries(funcDialogRes?.queries ?? {})
+            .filter(([name, _]) => name.startsWith(C.HTQueryPrefix) && name.split(':').length === 3)
+            .map(([queryName, args]) => {
+              const queryNameParts = queryName.split(':');
+              return ({name: queryNameParts[1] ?? '', id: queryNameParts[2] ?? '', args: args});
+            }),
+        },
+        ...(submitFunction ? {submit: {fName: submitFunction.name, package: getFuncPackageNameSafe(submitFunction)}} : {}),
+        queryFunctionName: (ingestTypeInput.value === 'Query') ? dataSourceFunctionInput.value ?? undefined : undefined,
+      };
+      _package.files.writeAsText(`${templatesFolder}/${out.name}.json`, JSON.stringify(out));
+      grok.shell.info('Template created successfully');
+      resolve(out);
+    }
+    const createTemplateButton = ui.bigButton(C.i18n.createTemplate, () => onOkProxy());
+    buttonsContainerDiv.appendChild(createTemplateButton);
+  });
+
+  return {root: form, template: promise, cancelPromise};
+}

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

@@ -11,16 +11,17 @@ import {chemFunctionsDialog} from '../dialogs/functions-dialog';
 import {ItemType, ItemsGrid} from '@datagrok-libraries/utils/src/items-grid';
 import {HitAppBase} from '../hit-app-base';
 import {getLayoutInput} from './layout-input';
-import {getFuncPackageNameSafe} from '../utils';
+import {getFuncPackageNameSafe, loadTemplate} from '../utils';
 
 
 export async function createTemplateAccordeon(app: HitAppBase<any>,
   dataSourceFunctionMap: { [key: string]: DG.Func | DG.DataQuery | DG.Script },
+  preset?: HitTriageTemplate,
 ): Promise<INewTemplateResult<HitTriageTemplate>> {
   const availableTemplates = (await _package.files.list('Hit Triage/templates')).map((file) => file.name.slice(0, -5));
   const availableTemplateKeys: string[] = [];
   for (const tn of availableTemplates) {
-    const t: HitTriageTemplate = JSON.parse(await _package.files.readAsText(`Hit Triage/templates/${tn}.json`));
+    const t: HitTriageTemplate = await loadTemplate<HitTriageTemplate>(`Hit Triage/templates/${tn}.json`);
     availableTemplateKeys.push(t.key);
   }
 
@@ -29,9 +30,12 @@ export async function createTemplateAccordeon(app: HitAppBase<any>,
   availableSubmitFunctions.forEach((func) => {
     submitFunctionsMap[func.friendlyName ?? func.name] = func;
   });
+  const presetSubmitKey = preset?.submit ? Object.keys(submitFunctionsMap)
+    .find((k) => submitFunctionsMap[k]?.name === preset.submit?.fName) : null;
   const submitFunctionInput =
-    ui.input.choice('Submit function', {value: null, items: [null, ...Object.keys(submitFunctionsMap)]});
-  submitFunctionInput.value = null;
+    ui.input.choice('Submit function', {value: presetSubmitKey ?? null, items: [null, ...Object.keys(submitFunctionsMap)]});
+  if (!presetSubmitKey)
+    submitFunctionInput.value = null;
   submitFunctionInput.nullable = true;
   submitFunctionInput.fireChanged();
   submitFunctionInput.setTooltip('Select function to be called upon submitting');
@@ -40,7 +44,7 @@ export async function createTemplateAccordeon(app: HitAppBase<any>,
 
   const keyErrorDiv = ui.divText('Template key is empty or already exists', {classes: 'hit-triage-error-div'});
 
-  const templateNameInput = ui.input.string('Name', {value: '', onValueChanged: (value) => {
+  const templateNameInput = ui.input.string('Name', {value: preset ? `${preset.name} (copy)` : '', onValueChanged: (value) => {
     if (value === '' || availableTemplates.includes(value)) {
       templateNameInput.root.style.borderBottom = '1px solid red';
       errorDiv.style.opacity = '100%';
@@ -49,7 +53,7 @@ export async function createTemplateAccordeon(app: HitAppBase<any>,
       errorDiv.style.opacity = '0%';
     }
   }});
-  const templateKeyInput = ui.input.string('Key', {value: '', onValueChanged: (value) => {
+  const templateKeyInput = ui.input.string('Key', {value: preset ? `${preset.key}-copy` : '', onValueChanged: (value) => {
     if (value === '' || availableTemplateKeys.includes(value)) {
       templateKeyInput.root.style.borderBottom = '1px solid red';
       keyErrorDiv.style.opacity = '100%';
@@ -68,7 +72,7 @@ export async function createTemplateAccordeon(app: HitAppBase<any>,
 
   let funcDialogRes: IComputeDialogResult | null = null;
   // used just for functions editor
-  const dummyTemplate = {
+  const dummyTemplate = preset ? preset : {
     compute: {
       descriptors: {
         enabled: true,
@@ -90,12 +94,14 @@ export async function createTemplateAccordeon(app: HitAppBase<any>,
   const combinedSourceNames = Object.keys(dataSourceFunctionMap);
   const dataSourceFunctionInput = ui.input.choice(
     C.i18n.dataSourceFunction, {value: combinedSourceNames[0], items: combinedSourceNames});
-  const ingestTypeInput = ui.input.choice<IngestType>('Ingest using', {value: 'Query', items: ['Query', 'File'],
+  const ingestTypeInput = ui.input.choice<IngestType>('Ingest using', {value: preset?.dataSourceType ?? 'Query', items: ['Query', 'File'],
     onValueChanged: (value) => {
       dataSourceFunctionInput.root.style.display = value === 'Query' ? 'block' : 'none';
     }});
+  if (preset?.dataSourceType)
+    dataSourceFunctionInput.root.style.display = preset.dataSourceType === 'Query' ? 'block' : 'none';
 
-  const fieldsEditor = getCampaignFieldEditors();
+  const fieldsEditor = getCampaignFieldEditors(preset?.campaignFields);
 
   const form = ui.div([
     ui.h2('Details'),

package/src/app/consts.ts

@@ -1,4 +1,7 @@
-import type {HitDesignCampaign} from './types';
+import type {HitDesignCampaign, HitTriageCampaign} from './types';
+
+// Re-export shared compute-function constants from the statistics library
+export {funcTypeNames, HTScriptPrefix, HTQueryPrefix, ComputeQueryMolColName} from '@datagrok-libraries/statistics/src/compute-functions/consts';
 
 export const CampaignIdKey = 'campaignId';
 export const HitDesignCampaignIdKey = 'campaignId';
@@ -16,9 +19,6 @@ export const ViDColName = 'V-iD';
 export const ViDSemType = 'HIT_DESIGN_VID';
 export const HTcampaignName = 'HTcampaignName';
 export const HDcampaignName = 'HDcampaignName';
-export const HTScriptPrefix = 'HTScript';
-export const HTQueryPrefix = 'HTQuery';
-export const ComputeQueryMolColName = 'molecules';
 export const i18n = {
   startNewCampaign: 'New Campaign',
   createNewCampaign: 'New Campaign',
@@ -35,12 +35,6 @@ export const i18n = {
   noInformation: 'No Information',
 } as const;
 
-export const funcTypeNames = {
-  script: 'script',
-  function: 'function-package',
-  query: 'data-query',
-} as const;
-
 export const HDCampaignsGroupingLSKey = 'HDCampaignsGrouping';
 export const HDCampaignTableColumnsLSKey = 'HDCampaignTableColumns';
 export const HDCampaignsTableSortingLSKey = 'HDCampaignsTableSorting';
@@ -67,4 +61,23 @@ export const DefaultCampaignTableInfoGetters = {
 
 export type CampaignTableColumns = keyof typeof DefaultCampaignTableInfoGetters | `campaignFields.${string}`;
 
+export const HTCampaignsGroupingLSKey = 'HTCampaignsGrouping';
+export const HTCampaignTableColumnsLSKey = 'HTCampaignTableColumns';
+export const HTCampaignsTableSortingLSKey = 'HTCampaignsTableSorting';
+
+export const HTDefaultCampaignTableInfoGetters = {
+  'Name': (info: HitTriageCampaign) => info.friendlyName ?? info.name,
+  'Code': (info: HitTriageCampaign) => info.name,
+  'Created': (info: HitTriageCampaign) => info.createDate,
+  'Author': (info: HitTriageCampaign) => info.authorUserFriendlyName ?? '',
+  'Last Modified by': (info: HitTriageCampaign) => info.lastModifiedUserName ?? '',
+  'Total': (info: HitTriageCampaign) => (info.rowCount ?? 0).toString(),
+  'Selected': (info: HitTriageCampaign) => (info.filteredRowCount ?? 0).toString(),
+  'Status': (info: HitTriageCampaign) => info.status,
+} as const;
+
+export type HTCampaignTableColumns = keyof typeof HTDefaultCampaignTableInfoGetters | `campaignFields.${string}`;
+
+export const PepTriageDataSourceTag = 'pepTriageDataSource';
+
 export const HTFunctionOrderingLSKey = 'HTFunctionOrderingLS';