@datagrok/bio 2.15.8 → 2.15.10

package/files/monomer-libraries/sample-lib-Aca-colored.json

@@ -24,8 +24,8 @@
             "colors": {
                 "default": {
                     "line": "#202020",
-                    "text": "#202020",
-                    "background": "#60FF40"
+                    "text": "#20C010",
+                    "background": "#F0F0F0"
                 }
             }
         },

package/package.json

@@ -5,7 +5,7 @@
     "name": "Aleksandr Tanas",
     "email": "atanas@datagrok.ai"
   },
-  "version": "2.15.8",
+  "version": "2.15.10",
   "description": "Bioinformatics support (import/export of sequences, conversion, visualization, analysis). [See more](https://github.com/datagrok-ai/public/blob/master/packages/Bio/README.md) for details.",
   "repository": {
     "type": "git",
@@ -37,12 +37,12 @@
   ],
   "dependencies": {
     "@biowasm/aioli": "^3.1.0",
-    "@datagrok-libraries/bio": "^5.44.4",
+    "@datagrok-libraries/bio": "^5.44.5",
     "@datagrok-libraries/chem-meta": "^1.2.7",
-    "@datagrok-libraries/math": "^1.2.0",
-    "@datagrok-libraries/ml": "^6.7.1",
-    "@datagrok-libraries/tutorials": "^1.4.2",
-    "@datagrok-libraries/utils": "^4.3.4",
+    "@datagrok-libraries/math": "^1.2.1",
+    "@datagrok-libraries/ml": "^6.7.3",
+    "@datagrok-libraries/tutorials": "^1.4.3",
+    "@datagrok-libraries/utils": "^4.3.6",
     "@webgpu/types": "^0.1.40",
     "ajv": "^8.12.0",
     "ajv-errors": "^3.0.0",

package/src/utils/cell-renderer-custom.ts

@@ -5,6 +5,7 @@ import * as ui from 'datagrok-api/ui';
 import {getGridCellColTemp, CellRendererBackBase} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
 import {SeqHandler} from '@datagrok-libraries/bio/src/utils/seq-handler';
 import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {GridCell} from 'datagrok-api/dg';
 
 export class MacromoleculeCustomCellRenderer extends DG.GridCellRenderer {
   get name(): string { return 'sequence'; }
@@ -24,9 +25,16 @@ export class MacromoleculeCustomCellRenderer extends DG.GridCellRenderer {
     return back;
   }
 
-  override onMouseLeave(gridCell: DG.GridCell, e: MouseEvent) {
+  override onMouseEnter(gridCell: GridCell, e: MouseEvent) {
     const back = this.getRendererBack(gridCell);
-    back.onMouseLeave(gridCell, e);
+    back.onMouseEnter(gridCell, e);
+  }
+
+  override onMouseLeave(gridCell: DG.GridCell, e: MouseEvent) {
+    // TODO: We get gridCell from another column here, so we can not get back object from the column rendered.
+    ui.tooltip.hide();
+    // const back = this.getRendererBack(gridCell);
+    // back.onMouseLeave(gridCell, e);
   }
 
   override onMouseMove(gridCell: DG.GridCell, e: MouseEvent) {

package/src/utils/cell-renderer.ts

@@ -102,10 +102,11 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
   ): void {
     const logPrefix: string = 'MacromoleculeSequenceCellRenderer.render()';
 
-    const [gridCol, tableCol, _temp] =
+    const [gridCol, tableCol, temp] =
       getGridCellColTemp<string, MonomerPlacer>(gridCell);
     if (!tableCol) return;
     const tableColTemp: TempType = tableCol.temp;
+    const sh = SeqHandler.forColumn(tableCol);
 
     let gapLength = 0;
     const msaGapLength = 8;
@@ -121,31 +122,16 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
       maxLengthOfMonomer = !isNaN(v) && v ? v : 50;
     }
 
-    const [_gc, _tc, temp] =
-      getGridCellColTemp<string, MonomerPlacer>(gridCell);
     let seqColTemp: MonomerPlacer = temp.rendererBack;
     if (!seqColTemp) {
       seqColTemp = temp.rendererBack = new MonomerPlacer(gridCol, tableCol, _package.logger, maxLengthOfMonomer,
         () => {
-          const sh = SeqHandler.forColumn(tableCol);
           return {
-            seqHandler: sh,
             monomerCharWidth: 7, separatorWidth: !sh.isMsa() ? gapLength : msaGapLength,
             monomerToShort: monomerToShortFunction,
           };
         });
-    }
-
-    if (
-      tableCol.temp[MmcrTemps.rendererSettingsChanged] === rendererSettingsChangedState.true ||
-      seqColTemp.monomerLengthLimit != maxLengthOfMonomer
-    ) {
-      gapLength = tableColTemp[MmcrTemps.gapLength] as number ?? gapLength;
-      // this event means that the mm renderer settings have changed,
-      // particularly monomer representation and max width.
-      seqColTemp.setMonomerLengthLimit(maxLengthOfMonomer);
-      seqColTemp.setSeparatorWidth(seqColTemp.isMsa() ? msaGapLength : gapLength);
-      tableCol.temp[MmcrTemps.rendererSettingsChanged] = rendererSettingsChangedState.false;
+      tableCol.temp[MmcrTemps.rendererSettingsChanged] === rendererSettingsChangedState.true;
     }
 
     seqColTemp.render(g, x, y, w, h, gridCell, _cellStyle);
@@ -269,15 +255,13 @@ export function drawMoleculeDifferenceOnCanvas(
 
       let color1 = undefinedColor;
       if (monomerLib) {
-        const wem1 = monomerLib.getWebEditorMonomer(biotype, amino1)!;
-        color1 = wem1.backgroundcolor!;
+        color1 = monomerLib.getMonomerTextColor(biotype, amino1);
       }
 
       if (amino1 != amino2) {
         let color2 = undefinedColor;
         if (monomerLib) {
-          const wem2 = monomerLib.getWebEditorMonomer(biotype, amino2)!;
-          color2 = wem2.backgroundcolor!;
+          color2 = monomerLib.getMonomerTextColor(biotype, amino2);
         }
         const subX0 = printLeftOrCentered(g, amino1, updatedX, updatedY - vShift, w, h,
           {color: color1, pivot: 0, left: true});

package/src/utils/monomer-cell-renderer.ts

@@ -41,8 +41,7 @@ export class MonomerCellRendererBack extends CellRendererWithMonomerLibBackBase
       if (this.monomerLib) {
         const alphabet = this.tableCol.getTag(bioTAGS.alphabet);
         const biotype = alphabet === ALPHABET.RNA || alphabet === ALPHABET.DNA ? HelmTypes.NUCLEOTIDE : HelmTypes.AA;
-        const wem = this.monomerLib.getWebEditorMonomer(biotype, symbol)!;
-        color = wem.backgroundcolor!;
+        color = this.monomerLib.getMonomerTextColor(biotype, symbol);
       }
 
       //cell width of monomer should dictate how many characters can be displayed

package/src/utils/monomer-lib/monomer-lib-base.ts

@@ -6,15 +6,18 @@ import wu from 'wu';
 import {Observable, Subject} from 'rxjs';
 
 import {IMonomerLibBase, Monomer, RGroup} from '@datagrok-libraries/bio/src/types/index';
-import {HelmAtom, HelmType, IWebEditorMonomer, MonomerType, PolymerType} from '@datagrok-libraries/bio/src/helm/types';
+import {HelmAtom, HelmType, IMonomerColors, IWebEditorMonomer, MonomerType, PolymerType} from '@datagrok-libraries/bio/src/helm/types';
 import {getMonomerHandleArgs} from '@datagrok-libraries/bio/src/helm/helm-helper';
 import {helmTypeToPolymerType} from '@datagrok-libraries/bio/src/monomer-works/monomer-works';
 import {HelmTypes, PolymerTypes} from '@datagrok-libraries/bio/src/helm/consts';
-import {HELM_REQUIRED_FIELD as REQ, HELM_RGROUP_FIELDS as RGP} from '@datagrok-libraries/bio/src/utils/const';
+import {HELM_OPTIONAL_FIELDS as OPT, HELM_REQUIRED_FIELD as REQ, HELM_RGROUP_FIELDS as RGP} from '@datagrok-libraries/bio/src/utils/const';
 import {GAP_SYMBOL, GapOriginals, NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
+import {Vector} from '@datagrok-libraries/utils/src/type-declarations';
+import {vectorAdd, vectorDotProduct, vectorLength} from '@datagrok-libraries/utils/src/vector-operations';
 
 import {AmbiguousWebEditorMonomer, GapWebEditorMonomer, MissingWebEditorMonomer} from './web-editor-monomer-dummy';
 import {LibraryWebEditorMonomer} from './web-editor-monomer-of-library';
+import {naturalMonomerColors} from './monomer-colors';
 
 import {_package} from '../../package';
 
@@ -24,6 +27,10 @@ const ambMonomerRe = RegExp(String.raw`\(${monomerRe}(,${monomerRe})+\)`);
 
 export type MonomerLibDataType = { [polymerType: string]: { [monomerSymbol: string]: Monomer } };
 
+const whiteColorV = new Vector([255.0, 255.0, 255.0]);
+const blackColorV = new Vector([0.0, 0.0, 0.0]);
+const maxTextColorVLen = vectorLength(whiteColorV) * 0.7;
+
 export class MonomerLibBase implements IMonomerLibBase {
   protected _isEmpty: boolean;
   get isEmpty(): boolean { return this._isEmpty; }
@@ -143,7 +150,7 @@ export class MonomerLibBase implements IMonomerLibBase {
         resWem = m.wem = LibraryWebEditorMonomer.fromMonomer(biotype, m, this);
     }
 
-    return resWem!;
+    return resWem;
   }
 
   getTooltip(biotype: HelmType, monomerSymbol: string): HTMLElement {
@@ -155,10 +162,18 @@ export class MonomerLibBase implements IMonomerLibBase {
       const symbol = monomer[REQ.SYMBOL];
       const _name = monomer[REQ.NAME];
       const wem = this.getWebEditorMonomer(biotype, monomerSymbol)!;
+
       const htmlColor = wem.backgroundcolor;
       res.append(ui.divH([
-        ui.div([symbol], {style: {fontWeight: 'bolder', textWrap: 'nowrap', marginRight: '6px', color: htmlColor}}),
-        ui.div([monomer.name])
+        ui.div([symbol], {
+          style: {
+            /* fontWeight: 'bolder', */ textWrap: 'nowrap', marginLeft: '4px', marginRight: '4px',
+            color: wem.textcolor, backgroundColor: wem.backgroundcolor, borderColor: wem.linecolor,
+            borderWidth: '1px', borderStyle: 'solid', borderRadius: '2px', padding: '3px',
+            minWidth: '24px', textAlign: 'center',
+          }
+        }),
+        ui.div([monomer.name], {style: {padding: '4px'}}),
       ], {style: {display: 'flex', flexDirection: 'row', justifyContent: 'left'}}));
 
       // Structure
@@ -190,6 +205,77 @@ export class MonomerLibBase implements IMonomerLibBase {
     return res;
   }
 
+  getMonomerTextColor(biotype: HelmType, symbol: string): string {
+    const colors: IMonomerColors = this.getMonomerColors(biotype, symbol);
+    const htmlToA = (html: string): number[] => {
+      const rgbM = /rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/.exec(html);
+      if (rgbM)
+        return [parseInt(rgbM[1]), parseInt(rgbM[2]), parseInt(rgbM[3])];
+
+      const n = DG.Color.fromHtml(colors.textcolor!);
+      return [DG.Color.r(n), DG.Color.g(n), DG.Color.b(n)];
+    };
+
+    const textColorA = htmlToA(colors.textcolor!);
+    const textColorAdjV = new Vector([...textColorA.map((v) => v + 1)]);
+    const cosTextToWhite = vectorDotProduct(textColorAdjV, whiteColorV) /
+      (vectorLength(textColorAdjV) * vectorLength(whiteColorV));
+
+    const backColorA = htmlToA(colors.backgroundcolor!);
+    const backColorAdjV = new Vector([...backColorA.map((v) => v + 0.01)]);
+    const cosBackToWhite = vectorDotProduct(backColorAdjV, whiteColorV) /
+      (vectorLength(backColorAdjV) * vectorLength(whiteColorV));
+
+    let resColorA;
+    if (cosBackToWhite < cosTextToWhite)
+      resColorA = backColorA;
+    else
+      resColorA = textColorA;
+
+    let resColorV = new Vector(resColorA);
+    const resColorLen = vectorLength(resColorV);
+    if (resColorLen > maxTextColorVLen) resColorV = vectorAdd(blackColorV, resColorV, maxTextColorVLen / resColorLen);
+    return `rgb(${resColorV[0]}, ${resColorV[1]}, ${resColorV[2]})`;
+  }
+
+  getMonomerColors(biotype: HelmType, symbol: string): IMonomerColors {
+    const currentMonomerSchema = 'default';
+    let monomerSchema: string = currentMonomerSchema;
+
+    const polymerType = helmTypeToPolymerType(biotype);
+    const monomer = this.getMonomer(polymerType, symbol)!;
+    let res: any;
+    if (monomer) {
+      if (monomer.meta && monomer.meta.colors) {
+        const monomerColors: { [colorSchemaName: string]: any } = monomer.meta.colors;
+        if (!(currentMonomerSchema in monomerColors)) monomerSchema = 'default';
+        res = monomerColors[monomerSchema];
+      }
+
+      if (!res) {
+        const biotypeColors: { [symbol: string]: string } | undefined = naturalMonomerColors[biotype];
+        const nColor: string = biotypeColors?.[monomer.symbol];
+        if (nColor) {
+          const nTextColor = DG.Color.toHtml(DG.Color.getContrastColor(DG.Color.fromHtml(nColor)));
+          res = {textColor: nTextColor, lineColor: '#202020', backgroundColor: nColor};
+        }
+      }
+
+      const naSymbol: string | undefined = monomer[OPT.NATURAL_ANALOG];
+      if (!res && naSymbol) {
+        return this.getMonomerColors(biotype, naSymbol);
+      }
+    }
+
+    if (!res)
+      res = {textColor: "#202020", lineColor: "#202020", backgroundColor: "#A0A0A0"};
+
+    return {
+      textcolor: res.text ?? res.textColor,
+      linecolor: res.line ?? res.lineColor,
+      backgroundcolor: res.background ?? res.backgroundColor
+    } as IMonomerColors;
+  }
 
   getRS(smiles: string): { [r: string]: string } {
     const newS = smiles.match(/(?<=\[)[^\][]*(?=])/gm);

package/src/utils/monomer-lib/monomer-manager/monomer-manager.ts

@@ -16,6 +16,7 @@ import {MonomerLibManager} from '../lib-manager';
 import {LIB_PATH} from '../consts';
 
 import '../../../../css/monomer-manager.css';
+import { MONOMER_RENDERER_TAGS } from '@datagrok-libraries/bio/src/utils/cell-renderer';
 
 // columns of monomers dataframe, note that rgroups is hidden and will be displayed as separate columns
 export enum MONOMER_DF_COLUMN_NAMES {
@@ -50,6 +51,16 @@ export const MONOMER_DF_COLUMNS = {
 
 
 export class MonomerManager implements IMonomerManager {
+
+  private adjustColWidths() {
+    setTimeout(() => {
+      if (this.tv?.grid) {
+        this.tv!.grid.col(MONOMER_DF_COLUMN_NAMES.NAME)!.width = 100;
+        this.tv!.grid.col(MONOMER_DF_COLUMN_NAMES.SYMBOL)!.width = 70;
+      }
+    }, 200);
+  }
+
   public static readonly VIEW_NAME = 'Manage Monomers';
   private _newMonomer: Monomer = DUMMY_MONOMER;
   private _newMonomerForm: MonomerForm;
@@ -63,7 +74,11 @@ export class MonomerManager implements IMonomerManager {
     this.monomerLib = monomerLibManamger.getBioLib();
     this._newMonomerForm = new MonomerForm(monomerLibManamger, () => this.activeMonomerLib, async () => {
       const df = await this.getMonomersDf(this.libInput.value!);
-      this.tv?.dataFrame && (this.tv.dataFrame = df);
+      if (this.tv?.dataFrame) {
+        this.tv.dataFrame = df;
+        this.adjustColWidths();
+      }
+      
     }, () => this.tv?.dataFrame);
   }
 
@@ -150,7 +165,7 @@ export class MonomerManager implements IMonomerManager {
     const df = await this.getMonomersDf(fileName);
     this.tv = DG.TableView.create(df, true);
     //const f = tv.filters();
-    this.tv.grid.col(MONOMER_DF_COLUMN_NAMES.NAME)!.width = 100;
+    this.adjustColWidths();
     this.tv.subs.push(
       grok.events.onContextMenu.subscribe(({args}) => {
         if (!args || !args.menu || !args.context || args.context.type !== DG.VIEWER.GRID || !args.context.tableView ||
@@ -200,7 +215,7 @@ export class MonomerManager implements IMonomerManager {
       libName && (this.libInput.value = libName);
       const df = await this.getMonomersDf(libName);
       this.tv.dataFrame = df;
-      this.tv.grid.col(MONOMER_DF_COLUMN_NAMES.NAME)!.width = 100;
+      this.adjustColWidths();
       return this.tv;
     }
 
@@ -262,6 +277,7 @@ export class MonomerManager implements IMonomerManager {
         try {
           const df = await this.getMonomersDf(this.libInput.value!);
           this.tv!.dataFrame = df;
+          this.adjustColWidths();
         } catch (e) {
           console.error(e);
         }
@@ -311,6 +327,8 @@ export class MonomerManager implements IMonomerManager {
             df.columns.addNew(rgroupName, DG.COLUMN_TYPE.STRING);
         }
       }
+      df.col(MONOMER_DF_COLUMN_NAMES.SYMBOL)!.semType = 'Monomer';
+      df.col(MONOMER_DF_COLUMN_NAMES.SYMBOL)!.setTag(MONOMER_RENDERER_TAGS.applyToBackground, 'true');
 
 
       for (let i = 0; i < monomers.length; i++) {
@@ -470,16 +488,29 @@ class MonomerForm implements INewMonomerForm {
   monomerNaturalAnalogInput: DG.InputBase<string | null>;
   rgroupsGrid: ItemsGrid;
   metaGrid: ItemsGrid;
+  colors: {
+    line: string,
+    background: string,
+    text: string
+  };
+  colorsEditor: ColorsEditor;
   saveButton: HTMLButtonElement;
   rgroupsGridRoot: HTMLElement;
   private _molChanged: boolean = false;
   get molChanged() { return this._molChanged; }
   private saveValidationResult?: string | null = null;
   private triggerMolChange: boolean = true; // makes sure that change is not triggered by copying the molecule from grid
+  inputsTabControl: DG.TabControl;
   constructor(public monomerLibManager: MonomerLibManager,
     private getMonomerLib: () => IMonomerLib | null, private refreshTable: () => Promise<void>,
     private getMonomersDataFrame: () => DG.DataFrame | undefined) {
     const monomerTypes = ['PEPTIDE', 'RNA', 'CHEM', 'BLOB', 'G'];
+    this.colors = {
+      line: '#000000',
+      background: '#000000',
+      text: '#000000',
+    };
+    this.colorsEditor = new ColorsEditor(this.colors);
     this.molSketcher = new DG.chem.Sketcher();
     this.molSketcher.root.classList.add('monomer-manager-sketcher');
     this.polymerTypeInput = ui.input.choice('Polymer Type', {value: 'PEPTIDE', items: monomerTypes,
@@ -576,6 +607,24 @@ class MonomerForm implements INewMonomerForm {
     ];
     this.metaGrid = new ItemsGrid(metaProps, []);
     this.onMonomerInputChanged();
+
+
+    const mainInputsDiv = ui.divV([
+      this.polymerTypeInput,
+      this.monomerTypeInput,
+      this.monomerSymbolInput,
+      this.monomerNameInput,
+      this.monomerIdInput,
+      this.monomerNaturalAnalogInput,
+    ]);
+
+    this.inputsTabControl = ui.tabControl({
+      'Monomer': mainInputsDiv,
+      'R-groups': this.rgroupsGridRoot,
+      'Meta': ui.divV([this.metaGrid.root]),
+      'Colors': this.colorsEditor.form,
+    }, false);
+
   }
 
   onMonomerInputChanged() {
@@ -603,13 +652,12 @@ class MonomerForm implements INewMonomerForm {
     this.monomerIdInput.value = monomer.id;
     this.monomerNaturalAnalogInput.value = monomer.naturalAnalog ?? null;
     this.rgroupsGrid.items = resolveRGroupInfo(monomer.rgroups);
-    this.metaGrid.items = Object.entries(monomer.meta ?? {}).map(([k, v]) => {
+    this.metaGrid.items = Object.entries(monomer.meta ?? {}).filter(([k, v]) => k?.toLowerCase() !== 'colors').map(([k, v]) => {
       return {Property: k, Value: v};
     });
     this.rgroupsGrid.render();
     this.metaGrid.render();
     this.rgroupsGridRoot.style.display = 'flex';
-
     this.onMonomerInputChanged();
     if (!monomer.naturalAnalog) {
       mostSimilarNaturalAnalog(capSmiles(monomer.smiles, this.rgroupsGrid.items as RGroup[]), monomer.polymerType).then((mostSimilar) => {
@@ -617,20 +665,50 @@ class MonomerForm implements INewMonomerForm {
           this.monomerNaturalAnalogInput.value = mostSimilar;
       });
     }
+    const colorsString = monomer.meta?.colors ?? '';
+    let colorsObj: Partial<typeof this.colors> = {};
+    try {
+      colorsObj = colorsString ? JSON.parse(colorsString)?.default : {};
+    } catch (e) {
+      console.error(e);
+    }
+    
+    this.colorsEditor.colors = {
+      line: colorsObj.line ?? '#000000',
+      background: colorsObj.background ?? '#000000',
+      text: colorsObj.text ?? '#000000',
+    };
   }
 
   validateInputs(): string | null | undefined {
+    const rGroupsPane = this.inputsTabControl.panes.find((p) => p.name?.toLowerCase() === 'r-groups');
+    rGroupsPane && (rGroupsPane.header.style.removeProperty('background-color'));
     if (!this.molSketcher.getSmiles()) return 'Monomer Molecule field is required';
-    for (const i of [this.polymerTypeInput, this.monomerTypeInput, this.monomerSymbolInput, this.monomerNameInput, this.monomerIdInput, this.monomerNaturalAnalogInput]) {
+    for (const i of [this.polymerTypeInput, this.monomerTypeInput, this.monomerSymbolInput, this.monomerNameInput, this.monomerIdInput]) {
       if (i.value == null || i.value === '')
         return `${i.caption} field is required`;
     }
-    if (this.rgroupsGrid.items.length < 1) return 'At least 1 R-group is required';
-    for (const item of this.rgroupsGrid.items) {
-      for (const [k, v] of Object.entries(item))
-        if (!v) return `R-group ${k} field is required for ${item[HELM_RGROUP_FIELDS.LABEL]}`;
+    let rgroupError: string | null | undefined = null;
+    if (this.rgroupsGrid.items.length < 1)
+      rgroupError = 'At least one R-group is required';
+    if (!rgroupError) {
+      outerFor:
+      for (const item of this.rgroupsGrid.items) {
+        for (const [k, v] of Object.entries(item))
+          if (!v){
+            rgroupError = `R-group ${k} field is required for ${item[HELM_RGROUP_FIELDS.LABEL]}`;
+            break outerFor;
+          } 
+      }
+    }
+
+    if (!rgroupError && this.rgroupsGrid.hasErrors()){ 
+      rgroupError = 'R-group fields contain errors';
+    }
+    if (rgroupError) {
+      rGroupsPane && (rGroupsPane.header.style.setProperty('background-color', '#ff000030'));
+      return rgroupError;
     }
-    if (this.rgroupsGrid.hasErrors()) return 'R-group fields contain errors';
     return null;
   }
 
@@ -643,26 +721,14 @@ class MonomerForm implements INewMonomerForm {
   }
 
   get form() {
-    const mainInputsDiv = ui.divV([
-      this.polymerTypeInput,
-      this.monomerTypeInput,
-      this.monomerSymbolInput,
-      this.monomerNameInput,
-      this.monomerIdInput,
-      this.monomerNaturalAnalogInput,
-    ]);
-
-    const inputsPanel = ui.tabControl({
-      'Monomer': mainInputsDiv,
-      'R-groups': this.rgroupsGridRoot,
-      'Meta': ui.divV([this.metaGrid.root]),
-    }, false);
-    inputsPanel.header.style.marginBottom = '10px';
+    
+    this.inputsTabControl.root.classList.add('monomer-manager-form-tab-control');
+    this.inputsTabControl.header.style.marginBottom = '10px';
     const saveB = ui.buttonsInput([this.saveButton]);
     ui.tooltip.bind(saveB, () => this.saveValidationResult ?? 'Save monomer to library');
     return ui.divV([
       this.molSketcher.root,
-      inputsPanel.root,
+      this.inputsTabControl.root,
       saveB,
     ], {classes: 'ui-form', style: {paddingLeft: '10px', overflow: 'scroll'}});
   }
@@ -750,8 +816,12 @@ class MonomerForm implements INewMonomerForm {
     const saveLib = async () => {
       try {
         // first remove the existing monomer with that symbol
-        libJSON = libJSON.filter((m) => m.symbol !== monomer.symbol || m.polymerType !== monomer.polymerType);
-        libJSON.push({...monomer, lib: undefined, wem: undefined});
+        const monomerIdx = libJSON.findIndex((m) => m.symbol === monomer.symbol && m.polymerType === monomer.polymerType);
+        if (monomerIdx >= 0) {
+          libJSON[monomerIdx] = {...monomer, lib: undefined, wem: undefined};
+        } else {
+          libJSON.push({...monomer, lib: undefined, wem: undefined});
+        }
         await grok.dapi.files.writeAsText(LIB_PATH + libName, JSON.stringify(libJSON));
         await (await MonomerLibManager.getInstance()).loadLibraries(true);
         await this.refreshTable();
@@ -802,6 +872,13 @@ class MonomerForm implements INewMonomerForm {
     this.metaGrid.items.filter((item) => (!!item['Property']) && (!!item['Value'])).forEach((item) => {
       meta[item['Property']] = item['Value'];
     });
+    const addingItem = this.metaGrid.addingItem;
+    if (addingItem && addingItem['Property'] && addingItem['Value']) {
+      meta[addingItem['Property']] = addingItem['Value'];
+    }
+    //console.log(this.metaGrid.addingItem);
+    if (this.colorsEditor.colors.line !== '#000000' || this.colorsEditor.colors.background !== '#000000' || this.colorsEditor.colors.text !== '#000000')
+      meta.colors = {default: this.colorsEditor.colors};
     const monomer: Monomer = {
       symbol: this.monomerSymbolInput.value,
       name: this.monomerNameInput.value,
@@ -929,3 +1006,42 @@ function monomerFromDfRow(dfRow: DG.Row): Monomer {
     createDate: dfRow.get(MONOMER_DF_COLUMN_NAMES.CREATE_DATE),
   };
 }
+
+class ColorsEditor {
+  private _colors: { line: string, background: string, text: string };
+  private _colorInputs: { [key in keyof ColorsEditor['_colors']]: DG.InputBase<string> };
+  constructor(colors: { line: string, background: string, text: string }) {
+    this._colors = colors;
+    this._colorInputs = {
+      line: ui.input.color('Line', {value: colors.line, onValueChanged: (v) => this._colors.line = v}),
+      background: ui.input.color('Background', {value: colors.background, onValueChanged: (v) => this._colors.background = v}),
+      text: ui.input.color('Text', {value: colors.text, onValueChanged: (v) => this._colors.text = v}),
+    };
+  }
+
+  get colors() {
+    return this._colors;
+  }
+
+  set colors(cols: { line: string, background: string, text: string }) {
+    //need to convert to hex as the input accepts only hex
+    const colsHex = {
+      line: DG.Color.toHtml(DG.Color.fromHtml(cols.line ?? '#000000')),
+      background: DG.Color.toHtml(DG.Color.fromHtml(cols.background ?? '#000000')),
+      text: DG.Color.toHtml(DG.Color.fromHtml(cols.text ?? '#000000')),
+    };
+
+    this._colors = colsHex;
+    for (const key in this._colorInputs) {
+      this._colorInputs[key as keyof ColorsEditor['_colors']].value = colsHex[key as keyof ColorsEditor['_colors']];
+    }
+  }
+
+  get colorsMetaFormat() {
+    return {colors: {default: this._colors}};
+  }
+
+  get form() {
+    return ui.form(Object.values(this._colorInputs));
+  }
+}

package/src/utils/monomer-lib/web-editor-monomer-of-library.ts

@@ -2,12 +2,11 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import {HelmType, IMonomerColors, IWebEditorMonomer, MonomerType, PolymerType, WebEditorRGroups} from '@datagrok-libraries/bio/src/helm/types';
+import {HelmType, IWebEditorMonomer, MonomerType, PolymerType, WebEditorRGroups} from '@datagrok-libraries/bio/src/helm/types';
 import {IMonomerLibBase, Monomer} from '@datagrok-libraries/bio/src/types/index';
 import {HELM_OPTIONAL_FIELDS as OPT, HELM_REQUIRED_FIELD as REQ, HELM_RGROUP_FIELDS as RGP} from '@datagrok-libraries/bio/src/utils/const';
 
-import {BrokenWebEditorMonomer, MissingWebEditorMonomer} from './web-editor-monomer-dummy';
-import {naturalMonomerColors} from './monomer-colors';
+import {BrokenWebEditorMonomer} from './web-editor-monomer-dummy';
 
 export class LibraryWebEditorMonomer implements IWebEditorMonomer {
   public get rs(): number { return Object.keys(this.at).length; }
@@ -59,7 +58,7 @@ export class LibraryWebEditorMonomer implements IWebEditorMonomer {
       monomer[REQ.MONOMER_TYPE],
       at);
 
-    const colors = getMonomerColors(biotype, monomer, monomerLib);
+    const colors = monomerLib.getMonomerColors(biotype, monomer[REQ.SYMBOL]);
     if (colors) {
       res.textcolor = colors?.textcolor;
       res.linecolor = colors?.linecolor;
@@ -69,41 +68,3 @@ export class LibraryWebEditorMonomer implements IWebEditorMonomer {
     return res;
   }
 }
-
-function getMonomerColors(biotype: HelmType, monomer: Monomer, monomerLib?: IMonomerLibBase): IMonomerColors | null {
-  const currentMonomerSchema = 'default';
-  let monomerSchema: string = currentMonomerSchema;
-
-  let res: any;
-  if (monomer.meta && monomer.meta.colors) {
-    const monomerColors: { [colorSchemaName: string]: any } = monomer.meta.colors;
-    if (!(currentMonomerSchema in monomerColors)) monomerSchema = 'default';
-    res = monomerColors[monomerSchema];
-  }
-
-  if (!res) {
-    const biotypeColors: { [symbol: string]: string } | undefined = naturalMonomerColors[biotype];
-    const nColor: string = biotypeColors?.[monomer.symbol];
-    if (nColor) {
-      const nTextColor = DG.Color.toHtml(DG.Color.getContrastColor(DG.Color.fromHtml(nColor)));
-      res = {textColor: nTextColor, lineColor: '#202020', backgroundColor: nColor};
-    }
-  }
-
-  const naSymbol: string | undefined = monomer[OPT.NATURAL_ANALOG];
-  if (!res && naSymbol) {
-    const polymerType = monomer[REQ.POLYMER_TYPE];
-    const naMonomer = monomerLib?.getMonomer(polymerType, naSymbol);
-    if (naMonomer)
-      return getMonomerColors(biotype, naMonomer);
-  }
-
-  if (!res)
-    res = {textColor: "#202020", lineColor: "#202020", backgroundColor: "#A0A0A0"};
-
-  return !res ? null : {
-    textcolor: res.text ?? res.textColor,
-    linecolor: res.line ?? res.lineColor,
-    backgroundcolor: res.background ?? res.backgroundColor
-  } as IMonomerColors;
-}