@datagrok/bio 2.15.7 → 2.15.8

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

@@ -7,19 +7,21 @@ import {HelmType} from '@datagrok-libraries/bio/src/helm/types';
  */
 export const naturalMonomerColors = {
   [HelmTypes.BASE]: {
-    A: "#A0A0FF",
-    G: "#FF7070",
-    T: "#A0FFA0",
-    C: "#FF8C4B",
-    U: "#FF8080"
+    // Chromatogram palette  // HELMWebEditor monomerColors
+    A: "green",              // "#A0A0FF",
+    G: "black",              // "#FF7070",
+    T: "red",                // "#A0FFA0",
+    C: "blue",               // "#FF8C4B",
+    U: "red",                // "#FF8080"
   },
 
   [HelmTypes.NUCLEOTIDE]: {
-    A: "#A0A0FF",
-    G: "#FF7070",
-    T: "#A0FFA0",
-    C: "#FF8C4B",
-    U: "#FF8080"
+    // Chromatogram palette  // HELMWebEditor monomerColors
+    A: "green",              // "#A0A0FF",
+    G: "black",              // "#FF7070",
+    T: "red",                // "#A0FFA0",
+    C: "blue",               // "#FF8C4B",
+    U: "red",                // "#FF8080"
   },
 
   [HelmTypes.LINKER]: {
@@ -34,26 +36,27 @@ export const naturalMonomerColors = {
   },
 
   [HelmTypes.AA]: {
-    A: "#C8C8C8",
-    R: "#145AFF",
-    N: "#00DCDC",
-    D: "#E60A0A",
-    C: "#E6E600",
-    E: "#00DCDC",
-    Q: "#E60A0A",
-    G: "#EBEBEB",
-    H: "#8282D2",
-    I: "#0F820F",
-    L: "#0F820F",
-    K: "#145AFF",
-    M: "#E6E600",
-    F: "#3232AA",
-    P: "#DC9682",
-    S: "#FA9600",
-    T: "#FA9600",
-    W: "#B45AB4",
-    Y: "#3232AA",
-    V: "#0F820F"
+    // GrokGroups palette    // HELMWebEditor monomerColors
+    A: "rgb(44,160,44)",     // "#C8C8C8",
+    R: "rgb(23,190,207)",    // "#145AFF",
+    N: "rgb(235,137,70)",    // "#00DCDC",
+    D: "rgb(31,119,180)",    // "#E60A0A",
+    C: "rgb(188,189,34)",    // "#E6E600",
+    E: "rgb(31, 120, 150)",  // "#00DCDC",
+    Q: "rgb(205, 111, 71)",  // "#E60A0A",
+    G: "rgb(214,39,40)",     // "#EBEBEB",
+    H: "rgb(158,218,229)",   // "#8282D2",
+    I: "rgb(23,103,57)",     // "#0F820F",
+    L: "rgb(30,110,96)",     // "#0F820F",
+    K: "rgb(108, 218, 229)", //"#145AFF",
+    M: "rgb(60,131,95)",     // "#E6E600",
+    F: "rgb(24,110,79)",     // "#3232AA",
+    P: "rgb(255,152,150)",   // "#DC9682",
+    S: "rgb(255,187,120)",   // "#FA9600",
+    T: "rgb(245,167,100)",   // "#FA9600",
+    W: "rgb(182, 223, 138)", // "#B45AB4",
+    Y: "rgb(152,223,138)",   // "#3232AA",
+    V: "rgb(74,160,74)",     // "#0F820F",
   },
 
   [HelmTypes.CHEM]: {

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

@@ -3,6 +3,7 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 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';
@@ -10,13 +11,12 @@ 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 {GapOriginals, NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
+import {GAP_SYMBOL, GapOriginals, NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
 
 import {AmbiguousWebEditorMonomer, GapWebEditorMonomer, MissingWebEditorMonomer} from './web-editor-monomer-dummy';
 import {LibraryWebEditorMonomer} from './web-editor-monomer-of-library';
 
 import {_package} from '../../package';
-import {Observable, Subject} from 'rxjs';
 
 const monomerRe = /[\w()]+/;
 //** Do not mess with monomer symbol with parenthesis enclosed in square brackets */
@@ -25,13 +25,20 @@ const ambMonomerRe = RegExp(String.raw`\(${monomerRe}(,${monomerRe})+\)`);
 export type MonomerLibDataType = { [polymerType: string]: { [monomerSymbol: string]: Monomer } };
 
 export class MonomerLibBase implements IMonomerLibBase {
+  protected _isEmpty: boolean;
+  get isEmpty(): boolean { return this._isEmpty; }
+
   protected _onChanged = new Subject<any>();
 
   get onChanged(): Observable<any> { return this._onChanged; }
 
+
   constructor(
     protected _monomers: MonomerLibDataType,
-  ) {}
+  ) {
+    this._isEmpty = !this._monomers || Object.keys(this._monomers).length === 0 ||
+      Object.entries(this._monomers).every(([_, ptMonomers]) => Object.keys(ptMonomers).length === 0);
+  }
 
   /** Creates missing {@link Monomer} */
   addMissingMonomer(polymerType: PolymerType, monomerSymbol: string): Monomer {
@@ -40,7 +47,7 @@ export class MonomerLibBase implements IMonomerLibBase {
       mSet = this._monomers[polymerType] = {};
 
     let monomerName: string = monomerSymbol;
-    if (monomerSymbol === GapOriginals[NOTATION.HELM])
+    if (monomerSymbol == GAP_SYMBOL || monomerSymbol === GapOriginals[NOTATION.HELM] /* usage from HELMWebEditor */)
       monomerName = 'Gap';
     else if (polymerType === PolymerTypes.PEPTIDE && monomerSymbol === 'X')
       monomerName = 'Any';
@@ -120,17 +127,17 @@ export class MonomerLibBase implements IMonomerLibBase {
     /** Get or create {@link org,helm.WebEditorMonomer} */
     let resWem: IWebEditorMonomer | null = m.wem ?? null;
     if (!resWem) {
-      if (elem === '*')
-        resWem = m.wem = new GapWebEditorMonomer(biotype, elem);
+      if (elem === GAP_SYMBOL || elem == '*' /* usage from HELMWebEditor */)
+        resWem = m.wem = new GapWebEditorMonomer(biotype);
       else if (
-        (biotype === 'HELM_NUCLETIDE' && elem === 'N') ||
-        (biotype === 'HELM_AA' && elem === 'X') ||
-        (biotype === 'HELM_CHEM' && false) || // TODO: Ambiguous monomer for CHEM
+        (biotype === HelmTypes.NUCLEOTIDE && elem === 'N') ||
+        (biotype === HelmTypes.AA && elem === 'X') ||
+        (biotype === HelmTypes.CHEM && false) || // TODO: Ambiguous monomer for CHEM
         ambMonomerRe.test(elem) // e.g. (A,R,_)
       )
         resWem = m.wem = new AmbiguousWebEditorMonomer(biotype, elem);
       else if (!m.lib)
-        resWem = m.wem = new MissingWebEditorMonomer(biotype, elem);
+        resWem = m.wem = new MissingWebEditorMonomer(biotype, elem, this.isEmpty);
 
       if (!resWem)
         resWem = m.wem = LibraryWebEditorMonomer.fromMonomer(biotype, m, this);
@@ -139,6 +146,51 @@ export class MonomerLibBase implements IMonomerLibBase {
     return resWem!;
   }
 
+  getTooltip(biotype: HelmType, monomerSymbol: string): HTMLElement {
+    const polymerType = helmTypeToPolymerType(biotype);
+    const res = ui.div([], {classes: 'ui-form ui-tooltip'});
+    const monomer = this.getMonomer(polymerType, monomerSymbol);
+    if (monomer) {
+      // Symbol & Name
+      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])
+      ], {style: {display: 'flex', flexDirection: 'row', justifyContent: 'left'}}));
+
+      // Structure
+      const chemOptions = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
+      let structureEl: HTMLElement;
+      if (monomer.molfile)
+        structureEl = grok.chem.svgMol(monomer.molfile, undefined, undefined, chemOptions);
+      else if (monomer.smiles) {
+        structureEl = ui.divV([
+          grok.chem.svgMol(monomer.smiles, undefined, undefined, chemOptions),
+          ui.divText('from smiles', {style: {fontSize: 'smaller'}}),
+        ]);
+      } else {
+        // Unable to get monomer's structure
+        structureEl = ui.divText('No structure', {style: {margin: '6px'}});
+      }
+      res.append(ui.div(structureEl,
+        {style: {display: 'flex', flexDirection: 'row', justifyContent: 'center', margin: '6px'}}));
+
+      // Source
+      if (monomer.symbol != GAP_SYMBOL)
+        res.append(ui.divText(monomer.lib?.source ?? 'Missed in libraries'));
+    } else {
+      res.append(ui.divV([
+        ui.divText(`Monomer '${monomerSymbol}' of type '${polymerType}' not found.`),
+        ui.divText('Open the Context Panel, then expand Manage Libraries'),
+      ]));
+    }
+    return res;
+  }
+
+
   getRS(smiles: string): { [r: string]: string } {
     const newS = smiles.match(/(?<=\[)[^\][]*(?=])/gm);
     const res: { [name: string]: string } = {};

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

@@ -163,22 +163,20 @@ export class MonomerLib extends MonomerLibBase implements IMonomerLib {
         this._monomers[type][monomerSymbol] = lib.getMonomer(type, monomerSymbol)!;
       });
     });
-  }
-
-  public update(lib: IMonomerLib): void {
-    this._updateLibInt(lib);
-    this._onChanged.next();
+    this._isEmpty = this.isEmpty && lib.isEmpty;
   }
 
   public updateLibs(libList: IMonomerLib[], reload: boolean = false): void {
-    if (reload)
+    if (reload) {
       this._monomers = {};
+      this._isEmpty = true;
+    }
     this._duplicateMonomers = {}; // Reset duplicates
     for (const lib of libList)
       if (!lib.error) this._updateLibInt(lib);
     if (Object.entries(this.duplicateMonomers).length > 0) {
       getUserLibSettings().then((settings) => {
-        this.assignDuplicatePreferances(settings);
+        this.assignDuplicatePreferences(settings);
       });
     } else
       this._duplicatesHandled = true;
@@ -186,8 +184,8 @@ export class MonomerLib extends MonomerLibBase implements IMonomerLib {
     this._onChanged.next();
   }
 
-  /** Checks wether all duplicated monomers have set preferences in user settings. overwrites those which have. */
-  assignDuplicatePreferances(userSettings: UserLibSettings): boolean {
+  /** Checks weather all duplicated monomers have set preferences in user settings. overwrites those which have. */
+  assignDuplicatePreferences(userSettings: UserLibSettings): boolean {
     let res = true;
     for (const polymerType in this.duplicateMonomers) {
       for (const monomerSymbol in this.duplicateMonomers[polymerType]) {
@@ -243,47 +241,6 @@ export class MonomerLib extends MonomerLibBase implements IMonomerLib {
     return resStr;
   }
 
-  getTooltip(biotype: HelmType, monomerSymbol: string): HTMLElement {
-    const polymerType = helmTypeToPolymerType(biotype);
-    const res = ui.div([], {classes: 'ui-form ui-tooltip'});
-    const monomer = this.getMonomer(polymerType, monomerSymbol);
-    if (monomer) {
-      // Symbol & Name
-      const symbol = monomer[REQ.SYMBOL];
-      const _name = monomer[REQ.NAME];
-      res.append(ui.divH([
-        ui.div([symbol], {style: {fontWeight: 'bolder', textWrap: 'nowrap', marginRight: '6px'}}),
-        ui.div([monomer.name])
-      ], {style: {display: 'flex', flexDirection: 'row', justifyContent: 'left'}}));
-
-      // Structure
-      const chemOptions = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
-      let structureEl: HTMLElement;
-      if (monomer.molfile)
-        structureEl = grok.chem.svgMol(monomer.molfile, undefined, undefined, chemOptions);
-      else if (monomer.smiles) {
-        structureEl = ui.divV([
-          grok.chem.svgMol(monomer.smiles, undefined, undefined, chemOptions),
-          ui.divText('from smiles', {style: {fontSize: 'smaller'}}),
-        ]);
-      } else {
-        // Unable to get monomer's structure
-        structureEl = ui.divText('No structure', {style: {margin: '6px'}});
-      }
-      res.append(ui.div(structureEl,
-        {style: {display: 'flex', flexDirection: 'row', justifyContent: 'center', margin: '6px'}}));
-
-      // Source
-      res.append(ui.divText(monomer.lib?.source ?? 'Missed in libraries'));
-    } else {
-      res.append(ui.divV([
-        ui.divText(`Monomer '${monomerSymbol}' of type '${polymerType}' not found.`),
-        ui.divText('Open the Context Panel, then expand Manage Libraries'),
-      ]));
-    }
-    return res;
-  }
-
   override(data: MonomerLibData): IMonomerLibBase {
     return new OverriddenMonomerLib(data, this);
   }

package/src/utils/monomer-lib/web-editor-monomer-dummy.ts

@@ -3,7 +3,7 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import {
-  HelmType, PolymerType, MonomerType,
+  PolymerType, MonomerType,
   IWebEditorMonomer, WebEditorRGroups
 } from '@datagrok-libraries/bio/src/helm/types';
 
@@ -85,8 +85,9 @@ export class GapWebEditorMonomer extends WebEditorMonomerDummy {
   public readonly linecolor: string = '#808080';
   public readonly textcolor: string = '#808080';
 
-  constructor(biotype: string, id: string) {
-    super(biotype, id, 'gap');
+  constructor(biotype: string) {
+    // monomer symbol is used to build pseudo molfile for Helm, symbol can not be empty for molfile
+    super(biotype, '*', 'gap');
   }
 }
 
@@ -105,8 +106,14 @@ export class MissingWebEditorMonomer extends WebEditorMonomerDummy {
   public readonly linecolor: string = '#800000';
   public readonly textcolor: string = '#FFFFFF';
 
-  constructor(biotype: string, id: string) {
+  constructor(biotype: string, id: string, isLibEmpty: boolean) {
     super(biotype, id, 'missing');
+
+    if (isLibEmpty) {
+      this.backgroundcolor = '#C0C0C0';
+      this.linecolor = '#404040';
+      this.textcolor = '#404040';
+    }
   }
 }
 

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

@@ -43,7 +43,8 @@ export class LibraryWebEditorMonomer implements IWebEditorMonomer {
       at = monomerLib.getRS(smiles);
     } else if (!monomer.lib) {
       // missing
-      return new MissingWebEditorMonomer(biotype, symbol);
+      throw new Error('Unexpected missing monomer without .lib');
+      // return new MissingWebEditorMonomer(biotype, symbol);
     } else {
       // broken
       return new BrokenWebEditorMonomer(biotype, symbol);
@@ -58,7 +59,7 @@ export class LibraryWebEditorMonomer implements IWebEditorMonomer {
       monomer[REQ.MONOMER_TYPE],
       at);
 
-    const colors = getMonomerColors(biotype, monomer);
+    const colors = getMonomerColors(biotype, monomer, monomerLib);
     if (colors) {
       res.textcolor = colors?.textcolor;
       res.linecolor = colors?.linecolor;
@@ -69,7 +70,7 @@ export class LibraryWebEditorMonomer implements IWebEditorMonomer {
   }
 }
 
-function getMonomerColors(biotype: HelmType, monomer: Monomer): IMonomerColors | null {
+function getMonomerColors(biotype: HelmType, monomer: Monomer, monomerLib?: IMonomerLibBase): IMonomerColors | null {
   const currentMonomerSchema = 'default';
   let monomerSchema: string = currentMonomerSchema;
 
@@ -77,23 +78,29 @@ function getMonomerColors(biotype: HelmType, monomer: Monomer): IMonomerColors |
   if (monomer.meta && monomer.meta.colors) {
     const monomerColors: { [colorSchemaName: string]: any } = monomer.meta.colors;
     if (!(currentMonomerSchema in monomerColors)) monomerSchema = 'default';
-    let res = monomerColors[monomerSchema];
+    res = monomerColors[monomerSchema];
   }
 
   if (!res) {
     const biotypeColors: { [symbol: string]: string } | undefined = naturalMonomerColors[biotype];
-    const nColor = biotypeColors?.[monomer.symbol];
-    if (nColor)
-      res = {textColor: "#000000", lineColor: "#000000", backgroundColor: nColor};
+    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 na = monomer[OPT.NATURAL_ANALOG];
-  if (!res && na) {
-    const biotypeColors: { [symbol: string]: string } | undefined = naturalMonomerColors[biotype];
-    const naColor = biotypeColors?.[na];
-    res = {textColor: "#000000", lineColor: "#000000", backgroundColor: naColor ?? "#FFFFFF",};
+  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,

package/src/viewers/web-logo-viewer.ts

@@ -7,9 +7,8 @@ import wu from 'wu';
 import {fromEvent, Observable, Subject, Unsubscribable} from 'rxjs';
 
 import {SeqHandler} from '@datagrok-libraries/bio/src/utils/seq-handler';
-import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
 import {
-  monomerToShort, pickUpPalette, pickUpSeqCol, TAGS as bioTAGS, positionSeparator
+  monomerToShort, pickUpSeqCol, TAGS as bioTAGS, positionSeparator, ALPHABET
 } from '@datagrok-libraries/bio/src/utils/macromolecule';
 import {
   FilterSources, HorizontalAlignments, IWebLogoViewer, PositionHeight, PositionMarginStates,
@@ -21,11 +20,14 @@ import {ISeqSplitted} from '@datagrok-libraries/bio/src/utils/macromolecule/type
 import {testEvent} from '@datagrok-libraries/utils/src/test';
 import {PromiseSyncer} from '@datagrok-libraries/bio/src/utils/syncer';
 import {GAP_SYMBOL} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
+import {IMonomerLibBase} from '@datagrok-libraries/bio/src/types/index';
+import {HelmType} from '@datagrok-libraries/bio/src/helm/types';
+import {undefinedColor} from '@datagrok-libraries/bio/src/utils/cell-renderer-monomer-placer';
 
 import {AggFunc, getAgg} from '../utils/agg';
 import {buildCompositionTable} from '../widgets/composition-analysis-widget';
 
-import {_package} from '../package';
+import {_package, getMonomerLibHelper} from '../package';
 
 declare global {
   interface HTMLCanvasElement {
@@ -199,7 +201,8 @@ export class PositionInfo {
   }
 
   render(g: CanvasRenderingContext2D,
-    fontStyle: string, uppercaseLetterAscent: number, uppercaseLetterHeight: number, cp: SeqPalette
+    fontStyle: string, uppercaseLetterAscent: number, uppercaseLetterHeight: number,
+    biotype: HelmType, monomerLib: IMonomerLibBase | null
   ) {
     for (const [monomer, pmInfo] of Object.entries(this._freqs)) {
       if (monomer !== GAP_SYMBOL) {
@@ -207,11 +210,17 @@ export class PositionInfo {
         const b = pmInfo.bounds!;
         const left = b.left;
 
+        let color: string = undefinedColor;
+        if (monomerLib) {
+          const wem = monomerLib.getWebEditorMonomer(biotype, monomer)!;
+          color = wem.backgroundcolor!;
+        }
+
         g.resetTransform();
         g.strokeStyle = 'lightgray';
         g.lineWidth = 1;
         g.rect(left, b.top, b.width, b.height);
-        g.fillStyle = cp.get(monomer) ?? cp.get('other');
+        g.fillStyle = color;
         g.textAlign = 'left';
         g.font = fontStyle;
         //g.fillRect(b.left, b.top, b.width, b.height);
@@ -233,13 +242,13 @@ export class PositionInfo {
     return !!findRes ? findRes[0] : undefined;
   }
 
-  buildCompositionTable(palette: SeqPalette): HTMLTableElement {
+  buildCompositionTable(biotype: HelmType, monomerLib: IMonomerLibBase): HTMLTableElement {
     if ('-' in this._freqs)
       throw new Error(`Unexpected monomer symbol '-'.`);
-    return buildCompositionTable(palette,
+    return buildCompositionTable(
       Object.assign({}, ...Object.entries(this._freqs)
-        .map(([m, pmi]) => ({[m]: pmi.rowCount})))
-    );
+        .map(([m, pmi]) => ({[m]: pmi.rowCount}))),
+      biotype, monomerLib);
   }
 }
 
@@ -304,9 +313,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
   private seqHandler: SeqHandler | null;
   private initialized: boolean = false;
 
-  // private readonly colorScheme: ColorScheme = ColorSchemes[NucleotidesWebLogo.residuesSet];
-  protected palette: SeqPalette | null = null;
-
+  private monomerLib: IMonomerLibBase | null = null;
   private host?: HTMLDivElement;
   private msgHost?: HTMLElement;
   private canvas: HTMLCanvasElement;
@@ -446,6 +453,14 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
     this.canvas.classList.value = 'bio-wl-canvas';
     this.canvas.style.width = '100%';
 
+    getMonomerLibHelper().then((libHelper) => {
+      this.monomerLib = libHelper.getMonomerLib();
+      this.render(WlRenderLevel.Render, 'monomerLib');
+      this.subs.push(this.monomerLib.onChanged.subscribe(() => {
+        this.render(WlRenderLevel.Render, 'monomerLib changed');
+      }));
+    });
+
     /* this.root.style.background = '#FFEEDD'; */
     this.viewSyncer = new PromiseSyncer(_package.logger);
   }
@@ -583,7 +598,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
     // Set valueColumnNameProp.choices has no effect
   }
 
-  /** Assigns {@link seqCol} and {@link palette} based on {@link sequenceColumnName} and calls {@link render}(). */
+  /** Assigns {@link seqCol} based on {@link sequenceColumnName} and calls {@link render}(). */
   private updateSeqCol(): void {
     if (this.dataFrame) {
       this.seqCol = this.sequenceColumnName ? this.dataFrame.col(this.sequenceColumnName) : null;
@@ -595,7 +610,6 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
         try {
           this.seqHandler = SeqHandler.forColumn(this.seqCol);
 
-          this.palette = pickUpPalette(this.seqCol);
           this.render(WlRenderLevel.Freqs, 'updateSeqCol()');
           this.error = null;
         } catch (err: any) {
@@ -609,7 +623,6 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
           this.positionLabels = [];
           this.startPosition = -1;
           this.endPosition = -1;
-          this.palette = null;
         }
       }
     }
@@ -1085,15 +1098,10 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       this._onLayoutCalculated.next();
     };
 
-    if (this.msgHost) {
-      if (this.seqCol && !this.palette) {
-        this.msgHost!.innerText = `Unknown palette (column semType: '${this.seqCol.semType}').`;
-        this.msgHost!.style.display = '';
-      } else
-        this.msgHost!.style.display = 'none';
-    }
+    if (this.msgHost)
+      this.msgHost!.style.display = 'none';
 
-    if (!this.seqCol || !this.dataFrame || !this.palette || this.host == null || this.slider == null)
+    if (!this.seqCol || !this.dataFrame || this.host == null || this.slider == null)
       return;
 
     const dpr: number = window.devicePixelRatio;
@@ -1133,8 +1141,10 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       // Hacks to scale uppercase characters to target rectangle
       const uppercaseLetterAscent = 0.25;
       const uppercaseLetterHeight = 12.2;
+      const sh = SeqHandler.forColumn(this.seqCol);
+      const biotype = sh.defaultBiotype;
       for (let jPos = firstPos; jPos <= lastPos; jPos++)
-        this.positions[jPos].render(g, fontStyle, uppercaseLetterAscent, uppercaseLetterHeight, this.palette);
+        this.positions[jPos].render(g, fontStyle, uppercaseLetterAscent, uppercaseLetterHeight, biotype, this.monomerLib);
     } finally {
       g.restore();
     }
@@ -1216,12 +1226,15 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       const [pi, monomer] = this.getMonomer(cursorP, dpr);
       const positionLabelHeight = this.showPositionLabels ? POSITION_LABELS_HEIGHT * dpr : 0;
 
-      if (pi !== null && monomer === null && 0 <= cursorP.y && cursorP.y <= positionLabelHeight) {
+      if (pi !== null && monomer === null && 0 <= cursorP.y && cursorP.y <= positionLabelHeight && this.monomerLib) {
         // Position tooltip
 
         const tooltipRows = [ui.divText(`Position ${pi.label}`)];
-        if (this.valueAggrType === DG.AGG.TOTAL_COUNT)
-          tooltipRows.push(pi.buildCompositionTable(this.palette!));
+        if (this.valueAggrType === DG.AGG.TOTAL_COUNT) {
+          const sh = SeqHandler.forColumn(this.seqCol!);
+          const biotype = sh.defaultBiotype;
+          tooltipRows.push(pi.buildCompositionTable(biotype, this.monomerLib));
+        }
         const tooltipEl = ui.divV(tooltipRows);
         ui.tooltip.show(tooltipEl, args.x + 16, args.y + 16);
       } else if (pi !== null && monomer && this.dataFrame && this.seqCol && this.seqHandler) {

package/src/widgets/composition-analysis-widget.ts

@@ -7,27 +7,19 @@ import wu from 'wu';
 import {TAGS as bioTAGS, ALPHABET, getPaletteByType} from '@datagrok-libraries/bio/src/utils/macromolecule';
 import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
 import {UnknownSeqPalettes} from '@datagrok-libraries/bio/src/unknown';
-import '../../css/composition-analysis.css';
 import {SeqHandler} from '@datagrok-libraries/bio/src/utils/seq-handler';
 import {GAP_SYMBOL} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
+import {IMonomerLibBase} from '@datagrok-libraries/bio/src/types';
+import {HelmType} from '@datagrok-libraries/bio/src/helm/types';
+import {HelmTypes} from '@datagrok-libraries/bio/src/helm/consts';
 
+import '../../css/composition-analysis.css';
 
-export function getCompositionAnalysisWidget(val: DG.SemanticValue): DG.Widget {
+export function getCompositionAnalysisWidget(val: DG.SemanticValue, monomerLib: IMonomerLibBase): DG.Widget {
   const host = ui.div();
   host.classList.add('macromolecule-cell-comp-analysis-host');
   const alphabet = val.cell.column.tags[bioTAGS.alphabet];
-  let palette: SeqPalette = UnknownSeqPalettes.Color;
-  switch (alphabet) {
-  case ALPHABET.DNA:
-  case ALPHABET.RNA:
-    palette = getPaletteByType(ALPHABET.DNA);
-    break;
-  case ALPHABET.PT:
-    palette = getPaletteByType(ALPHABET.PT);
-    break;
-  default:
-    break;
-  }
+  const biotype = alphabet === ALPHABET.DNA || alphabet === ALPHABET.RNA ? HelmTypes.NUCLEOTIDE : HelmTypes.AA;
 
   const counts: { [m: string]: number } = {};
   const sh = SeqHandler.forColumn(val.cell.column as DG.Column<string>);
@@ -38,7 +30,7 @@ export function getCompositionAnalysisWidget(val: DG.SemanticValue): DG.Widget {
     const count = counts[cm] || 0;
     counts[cm] = count + 1;
   });
-  const table = buildCompositionTable(palette, counts);
+  const table = buildCompositionTable(counts, biotype, monomerLib);
   Array.from(table.rows).forEach((row) => {
     const barCol = (row.getElementsByClassName('macromolecule-cell-comp-analysis-bar')[0] as HTMLDivElement)
       .style.backgroundColor;
@@ -49,7 +41,9 @@ export function getCompositionAnalysisWidget(val: DG.SemanticValue): DG.Widget {
   return new DG.Widget(host);
 }
 
-export function buildCompositionTable(palette: SeqPalette, counts: { [m: string]: number }): HTMLTableElement {
+export function buildCompositionTable(
+  counts: { [m: string]: number }, biotype: HelmType, monomerLib: IMonomerLibBase
+): HTMLTableElement {
   let sumValue: number = 0;
   let maxValue: number | null = null;
   for (const value of Object.values(counts)) {
@@ -61,7 +55,8 @@ export function buildCompositionTable(palette: SeqPalette, counts: { [m: string]
     .sort((a, b) => b[1] - a[1])
     .map(([cm, value]) => {
       const ratio = value / sumValue;
-      const color = palette.get(cm);
+      const wem = monomerLib.getWebEditorMonomer(biotype, cm)!;
+      const color = wem.backgroundcolor!;
       const barDiv = ui.div('', {classes: 'macromolecule-cell-comp-analysis-bar'});
       barDiv.style.width = `${50 * ratio / maxRatio}px`;
       barDiv.style.backgroundColor = color;