@datagrok/bio 2.0.9 → 2.0.10

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "Bio is a [package](https://datagrok.ai/help/develop/develop#packages) for the [Datagrok](https://datagrok.ai) platform",
   "repository": {
     "type": "git",

package/src/utils/cell-renderer.ts

@@ -274,7 +274,8 @@ export function drawMoleculeDifferenceOnCanvas(
   s: string,
   units: string,
   separator: string,
-  fullStringLength?: boolean) {
+  fullStringLength?: boolean,
+  molDifferences?:{[key: number]: HTMLCanvasElement}) {
 
   //TODO: can this be replaced/merged with splitSequence?
   const [s1, s2] = s.split('#');
@@ -314,9 +315,34 @@ export function drawMoleculeDifferenceOnCanvas(
       const subX0 = printLeftOrCentered(updatedX, updatedY - vShift, w, h, g, amino1, color1, 0, true);
       const subX1 = printLeftOrCentered(updatedX, updatedY + vShift, w, h, g, amino2, color2, 0, true);
       updatedX = Math.max(subX1, subX0);
+      if (molDifferences) {        
+        molDifferences[i] = createDifferenceCanvas(amino1, amino2, color1, color2, updatedY, vShift, h);
+      }
     } else
       updatedX = printLeftOrCentered(updatedX, updatedY, w, h, g, amino1, color1, 0, true, 0.5);
     updatedX += 4;
   }
   g.restore();
 }
+
+function createDifferenceCanvas(
+  amino1: string, 
+  amino2: string, 
+  color1: string, 
+  color2: string, 
+  y: number,
+  shift: number, 
+  h: number): HTMLCanvasElement {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d')!;
+    const width1 = context.measureText(processSequence([amino1]).join('')).width;
+    const width2 = context.measureText(processSequence([amino2]).join('')).width;
+    const width = Math.max(width1, width2);
+    canvas.height = h;
+    canvas.width = width + 20;
+    context.font = '12px monospace';
+    context.textBaseline = 'top';
+    printLeftOrCentered(0, y - shift, width, h, context, amino1, color1, 0, true);
+    printLeftOrCentered(0, y + shift, width, h, context, amino2, color2, 0, true);
+    return canvas;
+}

package/src/utils/sequence-activity-cliffs.ts

@@ -88,8 +88,24 @@ export function createPropPanelElement(params: ITooltipAndPanelParams): HTMLDivE
   canvas.height = 30;
   const units = params.seqCol.getTag(DG.TAGS.UNITS);
   const separator = params.seqCol.getTag(TAGS.SEPARATOR);
-  drawMoleculeDifferenceOnCanvas(context!, 0, 0, 0, 30, sequencesArray.join('#'), units, separator, true);
+  const molDifferences: {[key: number]: HTMLCanvasElement} = {};
+  drawMoleculeDifferenceOnCanvas(context!, 0, 0, 0, 30, sequencesArray.join('#'), units, separator, true, molDifferences);
   propPanel.append(ui.div(canvas, { style: { width: '300px', overflow: 'scroll' } }));
+  
+  if (Object.keys(molDifferences).length > 0) {
+    const diffsPanel = ui.divV([]);
+    diffsPanel.append(ui.divH([
+      ui.divText('Pos', { style: { fontWeight: 'bold', width: '30px' } }),
+      ui.divText('Difference', { style: { fontWeight: 'bold' } }) 
+    ]))
+    for (let key of Object.keys(molDifferences)) {
+      diffsPanel.append(ui.divH([
+        ui.divText(key, { style: { width: '30px' } }),
+        molDifferences[key as any]
+      ]));
+    }
+    propPanel.append(diffsPanel);
+  }
 
   function addFiledToPropPanel(name: string, value: number) {
     propPanel.append(ui.divH([