@datagrok/peptides 1.27.0 → 1.27.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/peptides",
   "friendlyName": "Peptides",
-  "version": "1.27.0",
+  "version": "1.27.2",
   "author": {
     "name": "Davit Rizhinashvili",
     "email": "drizhinashvili@datagrok.ai"

package/src/styles.css

@@ -60,3 +60,14 @@
   left: 5px;
   top: 1px;
 }
+
+.panel-base:has(.peptides-viewer-show-title:only-child) > .panel-titlebar > .panel-titlebar-text {
+    visibility: visible;
+    display: block;
+    text-align: center;
+    margin-left: 36px;
+    padding: 0;
+    width: 100%;
+    font-size: 14px !important;
+    color: #4d5261 !important;
+}

package/src/utils/misc.ts

@@ -500,3 +500,13 @@ export function debounce<T extends Array<any>, K>(f: (...args: T) => Promise<K>,
 export function isInDemo(): boolean {
   return 'isInDemo' in grok.shell && !!grok.shell.isInDemo;
 }
+
+export function dartLike<T extends any>(obj: T) {
+  return {
+    set: function<K extends keyof T>(key: K, value: T[K]) {
+      (obj as any)[key] = value;
+      return this;
+    },
+  };
+}
+

package/src/viewers/logo-summary.ts

@@ -76,7 +76,6 @@ export interface ILogoSummaryTable {
 
 /** LogoSummaryTable viewer shows per cluster information. */
 export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
-  _titleHost = ui.divText(VIEWER_TYPE.LOGO_SUMMARY_TABLE, {id: 'pep-viewer-title'});
   sequenceColumnName: string;
   clustersColumnName: string;
   webLogoMode: string;
@@ -98,6 +97,7 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
   /** Creates LogoSummaryTable properties. */
   constructor() {
     super();
+    this.root.classList.add('peptides-viewer-show-title');
 
     this.sequenceColumnName = this.column(LST_PROPERTIES.SEQUENCE,
       {
@@ -365,7 +365,7 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
     if (!this.logoSummaryTable.filter.anyTrue) {
       const emptyDf = ui.divText('No clusters to satisfy the threshold. ' +
         'Please, lower the threshold in viewer proeperties to include clusters');
-      this.root.appendChild(ui.divV([this._titleHost, emptyDf]));
+      this.root.appendChild(ui.divV([emptyDf]));
       return;
     }
     const expand = ui.iconFA('expand-alt', () => {
@@ -380,7 +380,7 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
     this.viewerGrid.root.style.height = 'auto';
     this.viewerGrid.root.style.overflow = 'hidden';
     this.root.appendChild(ui.divV([
-      ui.divH([this._titleHost, expand], {
+      ui.divH([expand], {
         style: {
           alignSelf: 'center',
           lineHeight: 'normal',

package/src/viewers/mutation-cliffs-viewer.ts

@@ -30,6 +30,7 @@ export class MutationCliffsViewer extends DG.JsViewer {
     this.position = this.int('position', 1, {nullable: false, showSlider: false, min: 1, max: 100, showPlusMinus: true, description: 'Position in the sequence to analyze (1 Based).', category: 'Data'});
     this.yAxisType = this.string('yAxisType', 'Linear', {choices: ['Linear', 'Logarithmic'], description: 'Y-Axis scale type.', nullable: false, category: 'Data'}) as 'Linear' | 'Logarithmic';
     this.currentRowMutationsOnly = this.bool('currentRowMutationsOnly', false, {nullable: false, defaultValue: false, description: 'When enabled, the viewer will show mutations related to the peptide in current row in the dataframe and selected position.', category: 'Data'});
+    this.root.classList.add('peptides-viewer-show-title');
   }
 
   onTableAttached(): void {
@@ -332,6 +333,7 @@ export class MutationCliffsViewer extends DG.JsViewer {
         showXSelector: false,
         showYSelector: true,
         showSplitSelector: false,
+        packCategories: false,
         xAxisLabelOrientation: 'Auto',
         axisFont: 'normal normal 14px "Roboto"',
         controlsFont: 'normal normal 14px "Roboto"',

package/src/viewers/sar-viewer.ts

@@ -23,6 +23,7 @@ import {
 import {showTooltip} from '../utils/tooltips';
 import {calculateCliffsStatistics, calculateMonomerPositionStatistics, findMutations, MutationCliffsOptions} from '../utils/algorithms';
 import {
+  dartLike,
   debounce,
   extractColInfo,
   getTotalAggColumns,
@@ -41,7 +42,6 @@ import {getMonomerLibHelper} from '@datagrok-libraries/bio/src/types/monomer-lib
 import {PolymerTypes} from '@datagrok-libraries/bio/src/helm/consts';
 import {PeptideUtils} from '../peptideUtils';
 import {StringDictionary} from '@datagrok-libraries/utils/src/type-declarations';
-import BitArray from '@datagrok-libraries/utils/src/bit-array';
 
 export enum SELECTION_MODE {
   MUTATION_CLIFFS = 'Mutation Cliffs',
@@ -177,6 +177,7 @@ export abstract class SARViewer extends DG.JsViewer implements ISARViewer {
     // this.targetCategoryInput.root.style.display = 'none';
     // this.targetCategoryInput.root.style.maxWidth = '50%';
     // this.targetCategoryInput.root.style.marginLeft = '8px'
+    this.root.classList.add('peptides-viewer-show-title');
   }
 
   _viewerGrid: DG.Grid | null = null;
@@ -678,7 +679,7 @@ export class MonomerPosition extends SARViewer {
     this.customColorRange = this.bool(MONOMER_POSITION_PROPERTIES.CUSTOM_COLOR_RANGE, false, {category: PROPERTY_CATEGORIES.INVARIANT_MAP});
     this.minColorValue = this.float(MONOMER_POSITION_PROPERTIES.MIN_COLOR_VALUE, 0, {category: PROPERTY_CATEGORIES.INVARIANT_MAP});
     this.maxColorValue = this.float(MONOMER_POSITION_PROPERTIES.MAX_COLOR_VALUE, 0, {category: PROPERTY_CATEGORIES.INVARIANT_MAP});
-    this.showFilterControls = this.bool(MONOMER_POSITION_PROPERTIES.SHOW_FILTER_CONTROLS, true, {category: PROPERTY_CATEGORIES.GENERAL, description: 'Show monomer search and target controls'});
+    this.showFilterControls = this.bool(MONOMER_POSITION_PROPERTIES.SHOW_FILTER_CONTROLS, true, {category: PROPERTY_CATEGORIES.GENERAL, description: 'Show monomer search and target controls', userEditable: false}); // Old stuff. Not used anymore
     this.monomerSearchInput = ui.input.string('Search', {
       value: '', nullable: true, placeholder: 'Search monomer', tooltipText: 'Search for monomer by symbol. For multiple monomers use comma as a separator.',
       onValueChanged: () => {
@@ -832,7 +833,7 @@ export class MonomerPosition extends SARViewer {
       let maxColorVal = -9999999;
       const filter = (this.dataSource === 'Filtered' && this.dataFrame.filter.anyFalse) ?
         this.dataFrame.filter : null;
-      const isTarget = filter == null ? (index: number) => true : (index: number) => filter.get(index);
+      const isTarget = filter == null ? (_index: number) => true : (index: number) => filter.get(index);
       for (const pCol of this.positionColumns) {
         pCol.temp[C.TAGS.INVARIANT_MAP_COLOR_CACHE] = {};
         const colorCache = pCol.temp[C.TAGS.INVARIANT_MAP_COLOR_CACHE];
@@ -1104,6 +1105,8 @@ export class MonomerPosition extends SARViewer {
     };
   }
 
+  private _showSearchInput = false;
+
   /** Renders the MonomerPosition viewer body. */
   render(): void {
     $(this.root).empty();
@@ -1150,20 +1153,20 @@ export class MonomerPosition extends SARViewer {
     }
     const viewerRoot = this.viewerGrid.root;
     viewerRoot.style.width = 'auto';
-    // expand button
-    const expand = ui.iconFA('expand-alt', () => {
-      const dialog = ui.dialog();
-      dialog.add(ui.divV([switchHost, viewerRoot], {style: {height: '100%'}}));
-      dialog.onCancel(() => this.render());
-      dialog.showModal(true);
-      this.viewerGrid.invalidate();
-    }, 'Show Sequence Variability Map Table in full screen');
-    $(expand).addClass('pep-help-icon');
-    this.monomerSearchInput.root.style.marginRight = '8px';
-    const targetInputsHost = ui.divH([this.monomerSearchInput.input],
+    // search icon
+    const searchIcon = ui.icons.search(() => {
+      this._showSearchInput = !this._showSearchInput;
+      this.monomerSearchInput.input.style.display = this._showSearchInput ? 'block' : 'none';
+    }, 'Toggle monomer search input visibility');
+
+    this.monomerSearchInput.input.style.display = this._showSearchInput ? 'block' : 'none';
+    $(searchIcon).addClass('pep-help-icon');
+    dartLike(searchIcon.style).set('top', '3px').set('fontSize', '14px');
+
+    const filtersHost = ui.divH([this.monomerSearchInput.input], // plural because might expand in future
       {style: {alignSelf: 'center', justifyContent: 'center', width: '100%', flexWrap: 'wrap'}});
-    targetInputsHost.style.display = this.showFilterControls ? 'flex' : 'none';
-    const header = ui.divH([expand, switchHost, targetInputsHost], {style: {alignSelf: 'center', lineHeight: 'normal', flexDirection: 'column', width: '100%'}});
+    // targetInputsHost.style.display = this.showFilterControls ? 'flex' : 'none';
+    const header = ui.divH([searchIcon, switchHost, filtersHost], {style: {alignSelf: 'center', lineHeight: 'normal', flexDirection: 'column', width: '100%'}});
     this.root.appendChild(ui.divV([header, viewerRoot]));
     this.viewerGrid?.invalidate();
     this.monomerSearchInput.fireChanged();
@@ -1470,11 +1473,11 @@ export class MostPotentResidues extends SARViewer {
       this.root.appendChild(ui.divText('Please, select a sequence and activity columns in the viewer properties'));
       return;
     }
-    const switchHost = ui.divText(VIEWER_TYPE.MOST_POTENT_RESIDUES, {id: 'pep-viewer-title'});
+
     const viewerRoot = this.viewerGrid.root;
     viewerRoot.style.width = 'auto';
-    const header = ui.divH([switchHost], {style: {alignSelf: 'center', lineHeight: 'normal'}});
-    this.root.appendChild(ui.divV([header, viewerRoot]));
+
+    this.root.appendChild(ui.divV([viewerRoot]));
     this.viewerGrid?.invalidate();
   }
 }