@datagrok/bio 2.26.6 → 2.26.7

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

@@ -9,6 +9,8 @@ import {HelmTypes} from '@datagrok-libraries/bio/src/helm/consts';
 import {MonomerSelectionWidget} from '@datagrok-libraries/bio/src/utils/monomer-selection-dialog';
 
 import {MonomerLibManager} from './lib-manager';
+import {MonomerCollectionHandler, MonomerCollectionInfo} from './monomer-collection-handler';
+import {SEM_TYPES} from '../constants';
 import {_package} from '../../package';
 
 //@ts-ignore
@@ -29,6 +31,12 @@ export class MonomerCollectionsView {
   private currentUser: string = '';
   /** Cached collection data for search filtering */
   private collectionsCache: Map<string, MonomerCollection> = new Map();
+  /** Currently selected collection names */
+  private selectedCollections: Set<string> = new Set();
+  /** Map of collection name -> card element for quick access */
+  private cardElements: Map<string, HTMLDivElement> = new Map();
+  /** The handler instance for context menu and actions */
+  private handler: MonomerCollectionHandler = new MonomerCollectionHandler();
 
   static readonly VIEW_NAME = 'Monomer Collections';
 
@@ -40,13 +48,15 @@ export class MonomerCollectionsView {
 
     this.view = DG.View.create();
     this.view.name = MonomerCollectionsView.VIEW_NAME;
+    // Store reference for the handler to find
+    (this.view as any)._mcView = this;
 
     // Ribbon
     const addBtn = ui.icons.add(() => this.showAddCollectionDialog(), 'Create new monomer collection');
     const refreshBtn = ui.iconFA('sync', () => this.refresh(), 'Refresh collections');
     this.view.setRibbonPanels([[addBtn, refreshBtn]]);
 
-    // Context menu
+    // Background context menu (not on cards)
     this.view.root.addEventListener('contextmenu', (e: MouseEvent) => {
       const target = e.target as HTMLElement;
       if (target.closest('.monomer-collection-card') || target.closest('.monomer-collection-add-card'))
@@ -58,6 +68,20 @@ export class MonomerCollectionsView {
       menu.show();
     });
 
+    // Click on empty space deselects all
+    this.view.root.addEventListener('click', (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (!target.closest('.monomer-collection-card') && !target.closest('.monomer-collection-add-card'))
+        this.clearSelection();
+    });
+
+    // Escape key clears selection
+    this.view.root.tabIndex = 0;
+    this.view.root.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key === 'Escape')
+        this.clearSelection();
+    });
+
     await this.buildContent();
     return this.view;
   }
@@ -125,13 +149,17 @@ export class MonomerCollectionsView {
 
     this.displayedCount = 0;
     this.cardsContainer!.innerHTML = '';
+    this.cardElements.clear();
     this.showNextPage();
   }
 
   private showNextPage(): void {
     const end = Math.min(this.displayedCount + PAGE_SIZE, this.filteredNames.length);
-    for (let i = this.displayedCount; i < end; i++)
-      this.cardsContainer!.appendChild(this.createCollectionCard(this.filteredNames[i]));
+    for (let i = this.displayedCount; i < end; i++) {
+      const card = this.createCollectionCard(this.filteredNames[i]);
+      this.cardsContainer!.appendChild(card);
+      this.cardElements.set(this.filteredNames[i], card);
+    }
 
     this.displayedCount = end;
 
@@ -175,6 +203,34 @@ export class MonomerCollectionsView {
     const actionsEl = ui.div([], {classes: 'monomer-collection-card-actions'});
 
     const card = ui.div([headerEl, bodyEl, actionsEl], {classes: 'monomer-collection-card'}) as HTMLDivElement;
+    card.dataset.collectionName = collectionName;
+
+    // Apply selected state if already selected
+    if (this.selectedCollections.has(collectionName))
+      card.classList.add('monomer-collection-card-selected');
+
+    // Click handler: select card and set as current object
+    card.addEventListener('click', (e: MouseEvent) => {
+      // Don't handle clicks on buttons or monomer tags
+      const target = e.target as HTMLElement;
+      if (target.closest('.monomer-collection-card-actions') || target.closest('.monomer-collection-tag'))
+        return;
+
+      e.stopPropagation();
+      this.handleCardClick(collectionName, e.ctrlKey || e.metaKey);
+    });
+
+    // Right-click context menu
+    card.addEventListener('contextmenu', (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      // If right-clicking a non-selected card, select it first
+      if (!this.selectedCollections.has(collectionName))
+        this.handleCardClick(collectionName, false);
+
+      this.showCardContextMenu(e);
+    });
 
     // Load content in background
     const loadContent = async (): Promise<HTMLElement> => {
@@ -222,20 +278,31 @@ export class MonomerCollectionsView {
           }
         });
         tag.addEventListener('mouseleave', () => ui.tooltip.hide());
+        // Clicking a monomer tag sets its SemanticValue as the current object
+        tag.addEventListener('click', (e: MouseEvent) => {
+          e.stopPropagation();
+          grok.shell.o = DG.SemanticValue.fromValueType(symbol, SEM_TYPES.MONOMER);
+        });
         monomerTagsContainer.appendChild(tag);
       }
 
       const countLabel = ui.divText(`${symbols.length} monomer(s)`, {style: {fontSize: '11px', color: 'var(--grey-4)', marginBottom: '6px'}});
       const contentDiv = ui.divV([countLabel, monomerTagsContainer]);
 
-      // Actions: only show edit/delete if the current user matches updatedBy
+      // Actions: show edit/delete with disabled state for non-owners
       const isOwner = collection.updatedBy === this.currentUser;
-      if (isOwner) {
-        const editBtn = ui.button('Edit', () => this.showEditCollectionDialog(collectionName, collection));
-        const deleteBtn = ui.button('Delete', () => this.confirmDeleteCollection(collectionName));
-        actionsEl.appendChild(editBtn);
-        actionsEl.appendChild(deleteBtn);
+      const editBtn = ui.button('Edit', () => { if (isOwner) this.showEditCollectionDialog(collectionName, collection); });
+      const deleteBtn = ui.button('Delete', () => { if (isOwner) this.confirmDeleteCollection(collectionName); });
+      if (!isOwner) {
+        for (const btn of [editBtn, deleteBtn]) {
+          btn.style.opacity = '0.4';
+          btn.style.cursor = 'default';
+        }
+        ui.tooltip.bind(editBtn, 'Only the author can edit');
+        ui.tooltip.bind(deleteBtn, 'Only the author can delete');
       }
+      actionsEl.appendChild(editBtn);
+      actionsEl.appendChild(deleteBtn);
 
       return contentDiv;
     };
@@ -244,6 +311,91 @@ export class MonomerCollectionsView {
     return card;
   }
 
+  /** Handle card click with optional Ctrl/Cmd for multi-select. */
+  private handleCardClick(collectionName: string, isMulti: boolean): void {
+    if (isMulti) {
+      // Toggle selection
+      if (this.selectedCollections.has(collectionName))
+        this.selectedCollections.delete(collectionName);
+      else
+        this.selectedCollections.add(collectionName);
+    } else {
+      // Single select: clear others
+      this.selectedCollections.clear();
+      this.selectedCollections.add(collectionName);
+    }
+
+    this.updateCardSelectionStyles();
+    this.setCurrentObject();
+  }
+
+  /** Clear all selections. */
+  private clearSelection(): void {
+    this.selectedCollections.clear();
+    this.updateCardSelectionStyles();
+  }
+
+  /** Update card CSS classes to reflect current selection. */
+  private updateCardSelectionStyles(): void {
+    for (const [name, card] of this.cardElements) {
+      if (this.selectedCollections.has(name))
+        card.classList.add('monomer-collection-card-selected');
+      else
+        card.classList.remove('monomer-collection-card-selected');
+    }
+  }
+
+  /** Set the current object in grok.shell.o based on selection. */
+  private async setCurrentObject(): Promise<void> {
+    const selected = [...this.selectedCollections];
+    if (selected.length === 0) return;
+
+    // Build MonomerCollectionInfo items for the selected collections
+    const infos: MonomerCollectionInfo[] = [];
+    for (const name of selected) {
+      let data = this.collectionsCache.get(name);
+      if (!data) {
+        try { data = await this.libHelper!.readMonomerCollection(name); } catch { continue; }
+      }
+      infos.push({
+        name,
+        displayName: name.replace(/\.json$/i, ''),
+        data,
+      });
+    }
+
+    if (infos.length === 1)
+      grok.shell.o = infos[0];
+    else if (infos.length > 1)
+      grok.shell.o = infos;
+  }
+
+  /** Show context menu for selected cards. */
+  private showCardContextMenu(e: MouseEvent): void {
+    const menu = DG.Menu.popup();
+    const selected = [...this.selectedCollections];
+
+    if (selected.length <= 1 && selected.length > 0) {
+      const name = selected[0];
+      const data = this.collectionsCache.get(name);
+      if (data) {
+        const info: MonomerCollectionInfo = {name, displayName: name.replace(/\.json$/i, ''), data};
+        MonomerCollectionHandler.buildContextMenu(menu, info, this.handler);
+      }
+    } else if (selected.length > 1) {
+      const items: MonomerCollectionInfo[] = selected
+        .map((name) => {
+          const data = this.collectionsCache.get(name);
+          return data ? {name, displayName: name.replace(/\.json$/i, ''), data} : null;
+        })
+        .filter((x): x is MonomerCollectionInfo => x !== null);
+      if (items.length > 0)
+        MonomerCollectionHandler.buildMultiContextMenu(menu, items, this.handler);
+    }
+
+    menu.show();
+  }
+
   private getMonomerTooltipSafe(symbol: string): HTMLElement | null {
     if (!this.monomerLib) return null;
     const helmTypes: HelmType[] = [HelmTypes.AA, HelmTypes.NUCLEOTIDE, HelmTypes.CHEM, HelmTypes.BLOB];
@@ -321,6 +473,11 @@ export class MonomerCollectionsView {
     monomerWidget.focus();
   }
 
+  /** Public method so the handler can trigger edit from the context panel. */
+  editCollectionPublic(collectionName: string, collection: MonomerCollection): void {
+    this.showEditCollectionDialog(collectionName, collection);
+  }
+
   private showEditCollectionDialog(collectionName: string, collection: MonomerCollection): void {
     const displayName = collectionName.replace(/\.json$/i, '');
     const nameInput = ui.input.string('Name', {value: displayName, nullable: false});
@@ -395,6 +552,7 @@ export class MonomerCollectionsView {
   }
 
   async refresh(): Promise<void> {
+    this.selectedCollections.clear();
     await this.loadCollections();
   }
 }

package/src/widgets/monomer-info-widget.ts

@@ -0,0 +1,79 @@
+/* eslint-disable max-len */
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import {IMonomerLib, Monomer} from '@datagrok-libraries/bio/src/types/monomer-library';
+import {HELM_REQUIRED_FIELD as REQ, HELM_RGROUP_FIELDS as RGP} from '@datagrok-libraries/bio/src/utils/const';
+
+import {getCorrectedSmiles, capSmiles} from '../utils/monomer-lib/monomer-manager/monomer-manager';
+
+/** Finds a monomer in the library across all polymer types. */
+function findMonomer(monomerLib: IMonomerLib, symbol: string): Monomer | null {
+  return monomerLib.getMonomer(null, symbol);
+}
+
+/** Caps the monomer (replaces R-groups with cap atoms) and returns capped SMILES. */
+function getCappedSmiles(monomer: Monomer): string | null {
+  try {
+    const corrected = getCorrectedSmiles(monomer[REQ.RGROUPS], monomer.smiles, monomer.molfile);
+    return capSmiles(corrected, monomer[REQ.RGROUPS]);
+  } catch { /* capping may fail for some monomers */ }
+  return null;
+}
+
+/** Creates a widget for the monomer info panel shown in the context panel. */
+export function getMonomerInfoWidget(symbol: string, monomerLib: IMonomerLib): DG.Widget {
+  const monomer = findMonomer(monomerLib, symbol);
+  if (!monomer)
+    return new DG.Widget(ui.divText(`Monomer '${symbol}' not found in the library.`));
+
+  const acc = ui.accordion('Monomer');
+
+  // Details pane — includes general info, structure, and R-groups in one table
+  acc.addPane('Details', () => {
+    const map: {[key: string]: any} = {
+      'Symbol': monomer[REQ.SYMBOL],
+      'Name': monomer[REQ.NAME],
+      'Polymer Type': monomer[REQ.POLYMER_TYPE],
+      'Monomer Type': monomer[REQ.MONOMER_TYPE],
+    };
+    if (monomer[REQ.AUTHOR])
+      map['Author'] = monomer[REQ.AUTHOR];
+    if (monomer.naturalAnalog)
+      map['Natural Analog'] = monomer.naturalAnalog;
+    if (monomer.lib?.source) {
+      let source = monomer.lib.source;
+      if (source.endsWith('.json'))
+        source = source.substring(0, source.length - 5);
+      map['Library'] = source;
+    }
+
+    // Structure
+    if (monomer.molfile)
+      map['Structure'] = grok.chem.drawMolecule(monomer.molfile, 150, 150);
+    else if (monomer.smiles)
+      map['Structure'] = grok.chem.drawMolecule(monomer.smiles, 150, 150);
+
+    // R-Groups
+    const rgroups = monomer[REQ.RGROUPS];
+    if (rgroups && rgroups.length > 0) {
+      for (const rg of rgroups)
+        map[rg[RGP.LABEL] ?? '?'] = rg[RGP.ALTERNATE_ID] ?? '';
+    }
+
+    return ui.tableFromMap(map);
+  }, true);
+
+  // Molecule panel pane — cap the monomer first, then embed the generic Molecule context panel
+  acc.addPane('Molecule', () => {
+    const cappedMol = getCappedSmiles(monomer);
+    if (!cappedMol)
+      return ui.divText('No molecular structure available');
+
+    const molSv = DG.SemanticValue.fromValueType(cappedMol, DG.SEMTYPE.MOLECULE);
+    return ui.panels.infoPanel(molSv).root;
+  }, true);
+
+  return new DG.Widget(acc.root);
+}