@datagrok/hit-triage 1.7.0 → 1.7.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/hit-triage",
   "friendlyName": "Hit Triage",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "author": {
     "name": "Davit Rizhinashvili",
     "email": "drizhinashvili@datagrok.ai"

package/src/app/consts.ts

@@ -48,3 +48,4 @@ export enum CampaignGroupingType {
   Author = 'Author',
   LastModifiedUser = 'Last Modified User',
 }
+export const HTFunctionOrderingLSKey = 'HTFunctionOrderingLS';

package/src/app/dialogs/functions-dialog.ts

@@ -8,6 +8,7 @@ import {IChemFunctionsDialogResult, IComputeDialogResult, IDescriptorTree,
 import '../../../css/hit-triage.css';
 import {funcTypeNames, HTQueryPrefix, HTScriptPrefix} from '../consts';
 import {HitAppBase} from '../hit-app-base';
+import { FunctionOrdering, getReorderingInput, getSavedFunctionOrdering } from '../utils';
 
 export async function chemFunctionsDialog(app: HitAppBase<any>,
   onOk: (result: IComputeDialogResult) => void, onCancel: () => void,
@@ -133,19 +134,48 @@ export async function chemFunctionsDialog(app: HitAppBase<any>,
   tc.root.style.minWidth = '350px';
   host.appendChild(tc.root);
   // add checkboxes to each hader
-  tc.panes.forEach((pane)=> {
-    const functionCheck =
-      ui.input.bool('', {value: calculatedFunctions[funcNamesMap[pane.name]], onValueChanged: (value) => {
-        calculatedFunctions[funcNamesMap[pane.name]] = !!value;
-        if (!value)
-          $(pane.content).find('input')?.attr('disabled', 'true');
-        else
-          $(pane.content).find('input')?.removeAttr('disabled');
-      }});
-    functionCheck.setTooltip('Toggle calculation of this function');
-    pane.header.appendChild(functionCheck.root);
-    pane.header.classList.add('hit-triage-compute-dialog-pane-header');
-  });
+  function addCheckboxesToPaneHeaders () {
+    tc.panes.forEach((pane)=> {
+      const functionCheck =
+        ui.input.bool('', {value: calculatedFunctions[funcNamesMap[pane.name]], onValueChanged: (value) => {
+          calculatedFunctions[funcNamesMap[pane.name]] = !!value;
+          if (!value)
+            $(pane.content).find('input')?.attr('disabled', 'true');
+          else
+            $(pane.content).find('input')?.removeAttr('disabled');
+        }});
+      functionCheck.setTooltip('Toggle calculation of this function');
+      pane.header.appendChild(functionCheck.root);
+      pane.header.classList.add('hit-triage-compute-dialog-pane-header');
+    });
+  }
+
+  function initTabs(order: FunctionOrdering) {
+    tc.clear();
+    let actOrder = order.order ?? Object.keys(tabControlArgs);
+    if (actOrder.length === 0)
+      actOrder = Object.keys(tabControlArgs);
+    
+    actOrder.forEach((n) => {
+      if (tabControlArgs[n])
+        tc.addPane(n, () => tabControlArgs[n]);
+    });
+    // after adding ordered panes, we also need to add new functions, not included in the order
+    Object.keys(tabControlArgs).forEach((n) => {
+      if (!actOrder.includes(n) && tabControlArgs[n] && !(order.hidden ?? []).includes(n)) {
+        tc.addPane(n, () => tabControlArgs[n]);
+      }
+    });
+    // make sure that hidden functions are not checked;
+    (order.hidden ?? []).forEach((n) => {
+      calculatedFunctions[funcNamesMap[n]] = false;
+    });
+    addCheckboxesToPaneHeaders();
+    if (tc.panes.length > 0)
+      tc.currentPane = tc.panes[0];
+  }
+
+  initTabs(getSavedFunctionOrdering());
   function onOkProxy() {
     const res: IComputeDialogResult = {descriptors: [], externals: {}, scripts: {}, queries: {}};
     res.descriptors = calculatedFunctions[descriptorsName] ?
@@ -182,12 +212,15 @@ export async function chemFunctionsDialog(app: HitAppBase<any>,
     onOk(res);
   }
 
+  tc.root.appendChild(getReorderingInput(Object.keys(tabControlArgs), (newOrder) => {
+    initTabs(newOrder);
+  }));
   if (dialog) {
     ui.dialog('Compute')
       .add(host)
       .onOK(() => onOkProxy())
       .onCancel(onCancel)
-      .show();
+      .show({resizable: true});
   }
 
   return {

package/src/app/utils.ts

@@ -3,7 +3,7 @@ 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 {CampaignGroupingType, CampaignJsonName, ComputeQueryMolColName, HDCampaignsGroupingLSKey, i18n} from './consts';
+import {CampaignGroupingType, CampaignJsonName, ComputeQueryMolColName, HDCampaignsGroupingLSKey, HTFunctionOrderingLSKey, i18n} from './consts';
 import {AppName, CampaignsType, HitDesignCampaign, HitTriageCampaign, TriagePermissions} from './types';
 import {_package} from '../package';
 
@@ -11,6 +11,24 @@ export const toFormatedDateString = (d: Date): string => {
   return `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()}`;
 };
 
+/**
+ * Modifies the current URL by updating or adding a query parameter with the specified key and value.
+ * Updates the browser's history state without reloading the page.
+ *
+ * @param key - The query parameter key to be added or updated in the URL.
+ * @param value - The value to be assigned to the specified query parameter key.
+ *
+ * @remarks
+ * This function uses the `history.replaceState` method to update the URL and browser history state.
+ * It ensures that the base URL remains unchanged and appends the query parameter.
+ * If `history.replaceState` is not supported, the function will not modify the URL.
+ *
+ * @example
+ * ```typescript
+ * modifyUrl('page', '2');
+ * // Updates the URL to something like: http://example.com/?page=2
+ * ```
+ */
 export function modifyUrl(key: string, value: string) {
   const title = document.title;
   const url = window.location.href.split('?')[0] + '?' + key + '=' + value;
@@ -360,3 +378,98 @@ export function timeoutOneTimeEventListener(element: HTMLElement, eventName: str
 //   df.name = 'Reinvent Design';
 //   return df;
 // }
+
+// #region Function ordering
+
+export type FunctionOrdering = {
+  order: string[],
+  hidden: string[]
+}
+
+export function getSavedFunctionOrdering(): FunctionOrdering {
+  const orderingString = getLocalStorageValue<string>(HTFunctionOrderingLSKey) ?? '{}';
+  try {
+    const orderingP = JSON.parse(orderingString);
+    const ordering: FunctionOrdering = {
+      order: orderingP?.order ?? [],
+      hidden: orderingP?.hidden ?? [],
+    };
+    return ordering;
+  } catch (e) {
+    console.error('error parsing function ordering', e);
+  }
+  return {order: [], hidden: []};
+}
+
+export function setSavedFunctionOrdering(ordering: FunctionOrdering) {
+  setLocalStorageValue(HTFunctionOrderingLSKey, JSON.stringify(ordering));
+}
+
+export function getReorderedFunctionTabArgs(args: {[key: string]: HTMLElement}) {
+  const ordering = getSavedFunctionOrdering();
+  const orderedArgs: {[key: string]: HTMLElement} = {};
+  for (const key of ordering.order) {
+    if (args[key])
+      orderedArgs[key] = args[key];
+  }
+  for (const key in args) {
+    if (!orderedArgs[key] && !ordering.hidden.includes(key)) {
+      orderedArgs[key] = args[key];
+    }
+  }
+  return orderedArgs;
+}
+
+export function getReorderingInput(functions: string[], onOk: (ordering: FunctionOrdering) => void) {
+  const order = getSavedFunctionOrdering();
+  const dataFrame = DG.DataFrame.fromColumns(functions.map((f) => DG.Column.fromStrings(f, [f])));
+  dataFrame.columns.setOrder(order.order ?? []);
+  const columnsEditor = ui.input.columns('reorder', {table: dataFrame, value: dataFrame.columns.toList().filter((c) => !order.hidden.includes(c.name))});
+  columnsEditor.onChanged.subscribe(() => {
+    try {
+      const chosenColumns = columnsEditor.value.map((c) => c.name);
+      const hiddenColumns = functions.filter((f) => !chosenColumns.includes(f));
+      const newOrdering = {
+        order: columnsEditor.value.map((c) => c.name),
+        hidden: hiddenColumns,
+      };
+      dataFrame.columns.setOrder(newOrdering.order);
+      setSavedFunctionOrdering(newOrdering);
+      onOk(newOrdering);
+    } catch (e) {
+      console.error(e);
+    }
+  });
+
+  const children = Array.from(columnsEditor.root.children) as HTMLElement[];
+  setTimeout(() => {
+    children.forEach((child) => {
+      child.style.maxWidth = '0px';
+      child.style.overflow = 'hidden';
+      child.style.padding = '0px';
+      child.style.paddingRight = '0px';
+      child.style.visibility = 'hidden';
+      if (child instanceof HTMLLabelElement)
+        child.style.display = 'none';
+    });
+  },200);
+  columnsEditor.root.style.justifyContent = 'end';
+  columnsEditor.root.style.width = '40px';
+  columnsEditor.root.style.height = '0px';
+  columnsEditor.root.style.overflow = 'visible';
+  columnsEditor.root.style.padding = '0px';
+
+
+  const editIcon = ui.icons.edit(() => {
+    children.forEach((child) => {
+      child.click();
+    });
+  }, 'Order or hide functions');
+
+  columnsEditor.addOptions(editIcon);
+  (Array.from(columnsEditor.root.children) as HTMLElement[]).forEach((child) => {
+    child.style.borderBottom = 'unset';
+  });
+  editIcon.style.fontSize = '16px';
+  return columnsEditor.root;
+}