@datagrok/bio 2.22.0 → 2.22.3

package/src/widgets/sequence-scrolling-widget.ts

@@ -333,7 +333,13 @@ export function handleSequenceHeaderRendering() {
       const seqCols = df.columns.bySemTypeAll(DG.SEMTYPE.MACROMOLECULE);
 
       for (const seqCol of seqCols) {
-        const sh = _package.seqHelper.getSeqHandler(seqCol);
+        let sh: ISeqHandler | null = null;
+
+        try {
+          sh = _package.seqHelper.getSeqHandler(seqCol);
+        } catch (_e) {
+          continue;
+        }
         if (!sh) continue;
         if (sh.isHelm() || sh.alphabet === ALPHABET.UN) continue;
 
@@ -344,193 +350,195 @@ export function handleSequenceHeaderRendering() {
           Array.from(grid.tableView.viewers).some((v) => v.type === 'Sequence Position Statistics');
 
         const isMSA = sh.isMsa();
-        const ifNan = (a: number, els: number) => (Number.isNaN(a) ? els : a);
-        const getStart = () => ifNan(Math.max(Number.parseInt(seqCol.getTag(bioTAGS.positionShift) ?? '0'), 0), 0) + 1;
-        const getCurrent = () => ifNan(Number.parseInt(seqCol.getTag(bioTAGS.selectedPosition) ?? '-2'), -2);
-        const getFontSize = () => MonomerPlacer.getFontSettings(seqCol).fontWidth;
-
-        // Get maximum sequence length. since this scroller is only applicable to Single character monomeric sequences,
-        // we do not need to check every single sequence and split it, instead, max length will coorelate with length of the longest string
-        let pseudoMaxLenIndex = 0;
-        let pseudoMaxLength = 0;
-        const cats = seqCol.categories;
-        for (let i = 0; i < cats.length; i++) {
-          const seq = cats[i];
-          if (seq && seq.length > pseudoMaxLength) {
-            pseudoMaxLength = seq.length;
-            pseudoMaxLenIndex = i;
-          }
-        }
-        const seq = cats[pseudoMaxLenIndex];
-        const split = sh.splitter(seq);
-        const maxSeqLen = split ? split.length : 30;
-
-        // Do not Skip if sequences are too short, rather, just don't render the tracks by default
-
-        const STRICT_THRESHOLDS = {
-          WITH_TITLE: 58, // BASE + TITLE_HEIGHT(16) + TRACK_GAP(4)
-          WITH_WEBLOGO: 107, // WITH_TITLE + DEFAULT_TRACK_HEIGHT(45) + TRACK_GAP(4)
-          WITH_BOTH: 156 // WITH_WEBLOGO + DEFAULT_TRACK_HEIGHT(45) + TRACK_GAP(4)
-        };
-
-        let initialHeaderHeight: number;
-        if (seqCol.length > 100_000 || maxSeqLen < 50) {
-          // Single sequence: just dotted cells
-          initialHeaderHeight = STRICT_THRESHOLDS.WITH_TITLE;
-        } else {
-          if (seqCol.length > 50_000)
-            initialHeaderHeight = STRICT_THRESHOLDS.WITH_WEBLOGO;
-          else
-            initialHeaderHeight = STRICT_THRESHOLDS.WITH_BOTH;
-        }
 
-        let webLogoTrackRef: LazyWebLogoTrack | null = null;
-        let conservationTrackRef: LazyConservationTrack | null = null;
-        const filterChangeSub = DG.debounce(
-          RxJs.merge(df.onFilterChanged, df.onDataChanged.pipe(filter((a) => a?.args?.column === seqCol))), 100
-        ).subscribe(() => {
-          MSAViewportManager.clearAllCaches();
-
-          if (webLogoTrackRef) {
-            webLogoTrackRef.resetViewportTracking();
-            webLogoTrackRef.forceUpdate();
-          }
-          if (conservationTrackRef) {
-            conservationTrackRef.resetViewportTracking();
-            conservationTrackRef.forceUpdate();
+        if (isMSA) {
+          const ifNan = (a: number, els: number) => (Number.isNaN(a) ? els : a);
+          const getStart = () => ifNan(Math.max(Number.parseInt(seqCol.getTag(bioTAGS.positionShift) ?? '0'), 0), 0) + 1;
+          const getCurrent = () => ifNan(Number.parseInt(seqCol.getTag(bioTAGS.selectedPosition) ?? '-2'), -2);
+          const getFontSize = () => MonomerPlacer.getFontSettings(seqCol).fontWidth;
+
+          // Get maximum sequence length. since this scroller is only applicable to Single character monomeric sequences,
+          // we do not need to check every single sequence and split it, instead, max length will coorelate with length of the longest string
+          let pseudoMaxLenIndex = 0;
+          let pseudoMaxLength = 0;
+          const cats = seqCol.categories;
+          for (let i = 0; i < cats.length; i++) {
+            const seq = cats[i];
+            if (seq && seq.length > pseudoMaxLength) {
+              pseudoMaxLength = seq.length;
+              pseudoMaxLenIndex = i;
+            }
           }
-          setTimeout(() => {
-            if (!grid.isDetached)
-              grid.invalidate();
-          }, 50);
-        });
-
-        grid.sub(filterChangeSub);
-
-        const initializeHeaders = (monomerLib: IMonomerLib) => {
-          const tracks: { id: string, track: MSAHeaderTrack, priority: number }[] = [];
-
-          // Create lazy tracks only if we have multiple sequences
-
-          // OPTIMIZED: Pass seqHandler directly instead of column/splitter
-          const conservationTrack = new LazyConservationTrack(
-            sh,
-            maxSeqLen,
-            45, // DEFAULT_TRACK_HEIGHT
-            'default',
-            'Conservation'
-          );
-          conservationTrackRef = conservationTrack; // Store reference
-          tracks.push({id: 'conservation', track: conservationTrack, priority: 1});
-
-          // OPTIMIZED: Pass seqHandler directly
-          const webLogoTrack = new LazyWebLogoTrack(
-            sh,
-            maxSeqLen,
-            45, // DEFAULT_TRACK_HEIGHT
-            'WebLogo'
-          );
-          webLogoTrackRef = webLogoTrack; // Store reference
-
-          if (monomerLib) {
-            webLogoTrack.setMonomerLib(monomerLib);
-            webLogoTrack.setBiotype(sh.defaultBiotype || 'HELM_AA');
+          const seq = cats[pseudoMaxLenIndex];
+          const split = sh.splitter(seq);
+          const maxSeqLen = split ? split.length : 30;
+
+          // Do not Skip if sequences are too short, rather, just don't render the tracks by default
+
+          const STRICT_THRESHOLDS = {
+            WITH_TITLE: 58, // BASE + TITLE_HEIGHT(16) + TRACK_GAP(4)
+            WITH_WEBLOGO: 107, // WITH_TITLE + DEFAULT_TRACK_HEIGHT(45) + TRACK_GAP(4)
+            WITH_BOTH: 156 // WITH_WEBLOGO + DEFAULT_TRACK_HEIGHT(45) + TRACK_GAP(4)
+          };
+
+          let initialHeaderHeight: number;
+          if (seqCol.length > 100_000 || maxSeqLen < 50) {
+            // Single sequence: just dotted cells
+            initialHeaderHeight = STRICT_THRESHOLDS.WITH_TITLE;
+          } else {
+            if (seqCol.length > 50_000)
+              initialHeaderHeight = STRICT_THRESHOLDS.WITH_WEBLOGO;
+            else
+              initialHeaderHeight = STRICT_THRESHOLDS.WITH_BOTH;
           }
 
-          webLogoTrack.setupDefaultTooltip();
-          tracks.push({id: 'weblogo', track: webLogoTrack, priority: 2});
+          let webLogoTrackRef: LazyWebLogoTrack | null = null;
+          let conservationTrackRef: LazyConservationTrack | null = null;
+          const filterChangeSub = DG.debounce(
+            RxJs.merge(df.onFilterChanged, df.onDataChanged.pipe(filter((a) => a?.args?.column === seqCol))), 100
+          ).subscribe(() => {
+            MSAViewportManager.clearAllCaches();
+
+            if (webLogoTrackRef) {
+              webLogoTrackRef.resetViewportTracking();
+              webLogoTrackRef.forceUpdate();
+            }
+            if (conservationTrackRef) {
+              conservationTrackRef.resetViewportTracking();
+              conservationTrackRef.forceUpdate();
+            }
+            setTimeout(() => {
+              if (!grid.isDetached)
+                grid.invalidate();
+            }, 50);
+          });
 
+          grid.sub(filterChangeSub);
 
-          // Create the scrolling header
-          const scroller = new MSAScrollingHeader({
-            canvas: grid.overlay,
-            headerHeight: initialHeaderHeight,
-            totalPositions: maxSeqLen + 1,
-            onPositionChange: (scrollerCur, scrollerRange) => {
-              setTimeout(() => {
-                const start = getStart();
-                const cur = getCurrent();
-                if (start !== scrollerRange.start)
-                  seqCol.setTag(bioTAGS.positionShift, (scrollerRange.start - 1).toString());
-
-                if (cur !== scrollerCur) {
-                  seqCol.setTag(bioTAGS.selectedPosition, (scrollerCur).toString());
-                  if (scrollerCur >= 0 && !positionStatsViewerAddedOnce && grid.tableView) {
-                    positionStatsViewerAddedOnce = true;
-                    const v = grid.tableView.addViewer('Sequence Position Statistics', {sequenceColumnName: seqCol.name});
-                    grid.tableView.dockManager.dock(v, DG.DOCK_TYPE.DOWN, null, 'Sequence Position Statistics', 0.4);
-                  }
-                }
-              });
-            },
-            onHeaderHeightChange: (_newHeight) => {
-              // Update grid header height
-              if (grid.isDetached || _newHeight < STRICT_THRESHOLDS.WITH_TITLE) return;
-              setTimeout(() => grid.props.colHeaderHeight = _newHeight);
-            },
-          });
+          const initializeHeaders = (monomerLib: IMonomerLib) => {
+            const tracks: { id: string, track: MSAHeaderTrack, priority: number }[] = [];
 
-          scroller.setupTooltipHandling();
+            // Create lazy tracks only for MSA sequences
 
-          // Add tracks to scroller
-          tracks.forEach(({id, track}) => {
-            scroller.addTrack(id, track);
-          });
+            // OPTIMIZED: Pass seqHandler directly instead of column/splitter
+            const conservationTrack = new LazyConservationTrack(
+              sh,
+              maxSeqLen,
+              45, // DEFAULT_TRACK_HEIGHT
+              'default',
+              'Conservation'
+            );
+            conservationTrackRef = conservationTrack; // Store reference
+            tracks.push({id: 'conservation', track: conservationTrack, priority: 1});
+
+            // OPTIMIZED: Pass seqHandler directly
+            const webLogoTrack = new LazyWebLogoTrack(
+              sh,
+              maxSeqLen,
+              45, // DEFAULT_TRACK_HEIGHT
+              'WebLogo'
+            );
+            webLogoTrackRef = webLogoTrack; // Store reference
+
+            if (monomerLib) {
+              webLogoTrack.setMonomerLib(monomerLib);
+              webLogoTrack.setBiotype(sh.defaultBiotype || 'HELM_AA');
+            }
+
+            webLogoTrack.setupDefaultTooltip();
+            tracks.push({id: 'weblogo', track: webLogoTrack, priority: 2});
+
+            // Create the scrolling header
+            const scroller = new MSAScrollingHeader({
+              canvas: grid.overlay,
+              headerHeight: initialHeaderHeight,
+              totalPositions: maxSeqLen + 1,
+              onPositionChange: (scrollerCur, scrollerRange) => {
+                setTimeout(() => {
+                  const start = getStart();
+                  const cur = getCurrent();
+                  if (start !== scrollerRange.start)
+                    seqCol.setTag(bioTAGS.positionShift, (scrollerRange.start - 1).toString());
+
+                  if (cur !== scrollerCur) {
+                    seqCol.setTag(bioTAGS.selectedPosition, (scrollerCur).toString());
+                    if (scrollerCur >= 0 && !positionStatsViewerAddedOnce && grid.tableView) {
+                      positionStatsViewerAddedOnce = true;
+                      const v = grid.tableView.addViewer('Sequence Position Statistics', {sequenceColumnName: seqCol.name});
+                      grid.tableView.dockManager.dock(v, DG.DOCK_TYPE.DOWN, null, 'Sequence Position Statistics', 0.4);
+                    }
+                  }
+                });
+              },
+              onHeaderHeightChange: (_newHeight) => {
+                // Update grid header height
+                if (grid.isDetached || _newHeight < STRICT_THRESHOLDS.WITH_TITLE) return;
+                setTimeout(() => grid.props.colHeaderHeight = _newHeight);
+              },
+            });
 
-          scroller.setSelectionData(df, seqCol, sh);
+            scroller.setupTooltipHandling();
 
-          if (maxSeqLen > 50) {
-            grid.props.colHeaderHeight = initialHeaderHeight;
+            // Add tracks to scroller
+            tracks.forEach(({id, track}) => {
+              scroller.addTrack(id, track);
+            });
 
-            // Set column width
-            setTimeout(() => {
-              if (grid.isDetached) return;
-              gCol.width = 400;
-            }, 300);
-          }
+            scroller.setSelectionData(df, seqCol, sh);
 
-          // Handle cell rendering
-          grid.sub(grid.onCellRender.subscribe((e) => {
-            const cell = e.cell;
-            if (!cell || !cell.isColHeader || cell?.gridColumn?.name !== gCol?.name)
-              return;
-
-
-            const cellBounds = e.bounds;
-            if (!cellBounds) return;
-
-            // Set dynamic properties
-            scroller.headerHeight = cellBounds.height;
-            const font = getFontSize();
-            scroller.positionWidth = font + (isMSA ? 8 : 0);
-
-            const start = getStart();
-            const startPadding = isMSA ? 0 : 4;
-
-            scroller.draw(
-              cellBounds.x + startPadding,
-              cellBounds.y,
-              cellBounds.width - startPadding,
-              cellBounds.height,
-              getCurrent(),
-              start,
-              e,
-              seqCol.name
-            );
-          }));
-        };
-
-        // Initialize with monomer library
-        getMonomerLibHelper()
-          .then((libHelper) => {
-            const monomerLib = libHelper.getMonomerLib();
-            initializeHeaders(monomerLib);
-          })
-          .catch((error) => {
-            grok.shell.warning(`Failed to initialize monomer library`);
-            //initializeHeaders();
-            console.error('Failed to initialize monomer library:', error);
-          });
+            if (maxSeqLen > 50) {
+              grid.props.colHeaderHeight = initialHeaderHeight;
+
+              // Set column width
+              setTimeout(() => {
+                if (grid.isDetached) return;
+                gCol.width = 400;
+              }, 300);
+            }
+
+            // Handle cell rendering for MSA
+            grid.sub(grid.onCellRender.subscribe((e) => {
+              const cell = e.cell;
+              if (!cell || !cell.isColHeader || cell?.gridColumn?.name !== gCol?.name)
+                return;
+
+              const cellBounds = e.bounds;
+              if (!cellBounds) return;
+
+              // Set dynamic properties
+              scroller.headerHeight = cellBounds.height;
+              const font = getFontSize();
+              scroller.positionWidth = font + 8; // MSA always has padding
+
+              const start = getStart();
+              const startPadding = 0; // MSA doesn't need extra padding
+
+              scroller.draw(
+                cellBounds.x + startPadding,
+                cellBounds.y,
+                cellBounds.width - startPadding,
+                cellBounds.height,
+                getCurrent(),
+                start,
+                e,
+                seqCol.name
+              );
+            }));
+          };
+
+          // Initialize with monomer library for MSA sequences
+          getMonomerLibHelper()
+            .then((libHelper) => {
+              const monomerLib = libHelper.getMonomerLib();
+              initializeHeaders(monomerLib);
+            })
+            .catch((error) => {
+              grok.shell.warning(`Failed to initialize monomer library`);
+              console.error('Failed to initialize monomer library:', error);
+            });
+        } else {
+          // For non-MSA sequences, just use standard sequence rendering.
+        }
       }
     }, 1000);
   };

package/src/widgets/to-atomic-level-widget.ts

@@ -1,37 +1,37 @@
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
+import * as OCL from 'openchemlib/full';
 import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
 import {_package, getSeqHelper, toAtomicLevel} from '../package';
 
 
-export async function toAtomicLevelWidget(sequence: DG.SemanticValue): Promise<DG.Widget> {
-  const errorDiv = ui.divText('');
-  const errorWidget = DG.Widget.fromRoot(errorDiv);
+export async function toAtomicLevelSingle(sequence: DG.SemanticValue): Promise<{mol: string, errorText: string}> {
+  let errorText = '';
   try {
     if (!sequence || !sequence.value) {
-      errorDiv.innerText = 'No sequence provided';
-      return errorWidget;
+      errorText = 'No sequence provided';
+      return {errorText, mol: ''};
     }
     if (!sequence.cell || !sequence.cell.dart || !sequence.cell.dataFrame || !sequence.cell.column) {
-      errorDiv.innerText = 'Atomic level conversion requeires a sequence column';
-      return errorWidget;
+      errorText = 'Atomic level conversion requeires a sequence column';
+      return {errorText, mol: ''};
     }
     const supportedUnits: string[] = [NOTATION.FASTA, NOTATION.SEPARATOR, NOTATION.HELM];
     //todo: add support for custom notations
     if (!supportedUnits.includes(sequence.cell.column.meta.units?.toLowerCase() ?? '')) {
-      errorDiv.innerText = 'Unsupported sequence notation. please use Bio | Polytool | Convert';
-      return errorWidget;
+      errorText = 'Unsupported sequence notation. please use Bio | Polytool | Convert';
+      return {errorText, mol: ''};
     }
     const seqHelper = await getSeqHelper();
     const seqSh = seqHelper.getSeqHandler(sequence.cell.column);
     if (!seqSh) {
-      errorDiv.innerText = 'No sequence handler found';
-      return errorWidget;
+      errorText = 'No sequence handler found';
+      return {errorText, mol: ''};
     }
     if ((seqSh.getSplitted(sequence.cell.rowIndex, 50)?.length ?? 100) > 40) {
-      errorDiv.innerText = 'Maximum number of monomers is 40';
-      return errorWidget;
+      errorText = 'Maximum number of monomers is 40';
+      return {errorText, mol: ''};
     }
     const singleValCol = DG.Column.fromStrings('singleVal', [sequence.value]);
     const sDf = DG.DataFrame.fromColumns([singleValCol]);
@@ -41,30 +41,43 @@ export async function toAtomicLevelWidget(sequence: DG.SemanticValue): Promise<D
     });
     await toAtomicLevel(sDf, singleValCol, sequence.cell.column.meta.units === NOTATION.HELM, false);
     if (sDf.columns.length < 2) {
-      errorDiv.innerText = 'No structure generated';
-      return errorWidget;
+      errorText = 'No structure generated';
+      return {errorText, mol: ''};
     }
     const molCol = sDf.columns.byIndex(1);
     const molfile = molCol.get(0);
     if (!molfile) {
-      errorDiv.innerText = 'No structure generated';
-      return errorWidget;
+      errorText = 'No structure generated';
+      return {errorText, mol: ''};
     }
-    molCol.semType = DG.SEMTYPE.MOLECULE;
-    const molSemanticValue = DG.SemanticValue.fromTableCell(sDf.cell(0, molCol.name));
+    return {errorText: '', mol: molfile as string};
+  } catch (e) {
+    _package.logger.error(e);
+  }
+
+  errorText = 'No Structure generated';
+  return {errorText, mol: ''};
+}
+
+export async function toAtomicLevelWidget(sequence: DG.SemanticValue): Promise<DG.Widget> {
+  const res = await toAtomicLevelSingle(sequence);
+  if (res.errorText || !res.mol)
+    return DG.Widget.fromRoot(ui.divText(res.errorText ?? 'No structure generated'));
+  try {
+    const molSemanticValue = DG.SemanticValue.fromValueType(res.mol, DG.SEMTYPE.MOLECULE);
     const panel = ui.panels.infoPanel(molSemanticValue);
     let molPanel: DG.Widget | null = null;
     if (panel)
       molPanel = DG.Widget.fromRoot(panel.root);
 
 
-    const root = grok.chem.drawMolecule(molfile, 300, 300, false);
+    const root = grok.chem.drawMolecule(res.mol, 300, 300, false);
     root.style.cursor = 'pointer';
     ui.tooltip.bind(root, 'Click to expand');
     root.onclick = () => {
       const width = window.innerWidth - 200;
       const height = window.innerHeight - 200;
-      const bigMol = grok.chem.drawMolecule(molfile, width, height, false);
+      const bigMol = grok.chem.drawMolecule(res.mol, width, height, false);
       ui.dialog({title: 'Molecule'}).add(bigMol).showModal(true);
     };
     if (molPanel)
@@ -73,7 +86,65 @@ export async function toAtomicLevelWidget(sequence: DG.SemanticValue): Promise<D
   } catch (e) {
     _package.logger.error(e);
   }
+  return DG.Widget.fromRoot(ui.divText('No structure generated'));
+}
+
+/**
+ * 3D representation widget of macromolecule.
+ *
+ * @export
+ * @return {Promise<DG.Widget>} Widget.
+ */
+export async function molecular3DStructureWidget(
+  sequence: DG.SemanticValue
+): Promise<DG.Widget> {
+  const pi = DG.TaskBarProgressIndicator.create('Creating 3D view');
+  let widgetHost;
+  let molBlock3D = '';
+  try {
+    // make sure biostructure viewer package is loaded.
+    await DG.Func.find({name: 'getPdbHelper'})[0]?.apply({});
+    try {
+      const result = await toAtomicLevelSingle(sequence);//await getMacroMol(atomicCodes!);
+      if (result.errorText || !result.mol) {
+        widgetHost = ui.divText(result.errorText ?? 'No structure generated');
+        pi.close();
+        return new DG.Widget(widgetHost);
+      }
+      const molBlock2D = result.mol;
+      molBlock3D = (await grok.functions.call('Bio:Embed', {molecule: molBlock2D})) as unknown as string;
+      // rdfkit sometimes fails to convert molv3 to molv2, so we try to convert it via the OCL
+      const OCLMol = OCL.Molecule.fromMolfile(molBlock3D);
+      if (OCLMol)
+        molBlock3D = OCLMol.toMolfile();
+      else
+        console.warn('Failed to convert molv3 to molv2');
+
+      //molBlock3D = grok.chem.convert(molBlock3D, grok.chem.Notation.Unknown, grok.chem.Notation.MolBlock);
+    } catch (e) {
+      console.warn(e);
+    }
 
-  errorDiv.innerText = 'No Structure generated';
-  return errorWidget;
+    try {
+      molBlock3D = molBlock3D.replaceAll('\\n', '\n');
+      const stringBlob = new Blob([molBlock3D], {type: 'text/plain'});
+      const nglHost = ui.div([], {classes: 'd4-ngl-viewer', id: 'ngl-3d-host'});
+      nglHost.style.setProperty('height', '100%', 'important');
+      //@ts-ignore
+      const stage = new NGL.Stage(nglHost, {backgroundColor: 'white'});
+      //@ts-ignore
+      stage.loadFile(stringBlob, {ext: 'sdf'}).then(function(comp: NGL.StructureComponent) {
+        stage.setSize(300, 300);
+        comp.addRepresentation('ball+stick');
+        comp.autoView();
+      });
+      widgetHost = ui.div([nglHost], {style: {aspectRatio: '1'}});
+    } catch (e) {
+      widgetHost = ui.divText('Couldn\'t get 3D structure');
+    }
+  } catch (e) {
+    widgetHost = ui.divText('Couldn\'t get 3D structure');
+  }
+  pi.close();
+  return new DG.Widget(widgetHost);
 }