@datagrok/bio 2.15.7 → 2.15.9

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,6 +488,12 @@ 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;
@@ -480,6 +504,12 @@ class MonomerForm implements INewMonomerForm {
     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,
@@ -603,13 +633,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,6 +646,19 @@ 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 {
@@ -656,6 +698,7 @@ class MonomerForm implements INewMonomerForm {
       'Monomer': mainInputsDiv,
       'R-groups': this.rgroupsGridRoot,
       'Meta': ui.divV([this.metaGrid.root]),
+      'Colors': this.colorsEditor.form,
     }, false);
     inputsPanel.header.style.marginBottom = '10px';
     const saveB = ui.buttonsInput([this.saveButton]);
@@ -802,6 +845,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 +979,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-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

@@ -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; }
@@ -43,7 +42,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 +58,7 @@ export class LibraryWebEditorMonomer implements IWebEditorMonomer {
       monomer[REQ.MONOMER_TYPE],
       at);
 
-    const colors = getMonomerColors(biotype, monomer);
+    const colors = monomerLib.getMonomerColors(biotype, monomer[REQ.SYMBOL]);
     if (colors) {
       res.textcolor = colors?.textcolor;
       res.linecolor = colors?.linecolor;
@@ -68,35 +68,3 @@ export class LibraryWebEditorMonomer implements IWebEditorMonomer {
     return res;
   }
 }
-
-function getMonomerColors(biotype: HelmType, monomer: Monomer): 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';
-    let 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 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",};
-  }
-
-  return !res ? null : {
-    textcolor: res.text ?? res.textColor,
-    linecolor: res.line ?? res.lineColor,
-    backgroundcolor: res.background ?? res.backgroundColor
-  } as IMonomerColors;
-}

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;